.like-itinerary-button.svelte-181zvgu {
    border: 0;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
  }

  .like-itinerary-button.svelte-181zvgu:disabled {
    cursor: progress;
    opacity: 0.6;
  }

  .like-itinerary-button.liked.svelte-181zvgu {
    color: var(--color-fm-red, #d33);
  }

  html.dark .like-itinerary-button.liked.svelte-181zvgu {
    /* Brighter red in dark mode so the liked heart reads on dark panel
       surfaces. Tailwind's red-400 (#f87171) — high contrast on slate
       backgrounds, still acceptable on the bg-white/70 wrapper used in
       the home strip. */
    color: #f87171;
  }

  html.dark .like-itinerary-button.svelte-181zvgu:not(.liked) {
    /* Explicit dark-mode color for the UNLIKED heart. `color: inherit`
       resolves to low-contrast tones on the dark My-tab tile
       (depth-layer-fm-sky-600 context in ItineraryPanel). Tailwind's
       gray-300 (#d1d5db) — same tone the panel uses for secondary dark
       text (pills, total-distance). */
    color: #d1d5db;
  }

  .like-itinerary-button.svelte-181zvgu .material-symbols-outlined {
    font-size: 28px;
    transition: font-variation-settings 0.2s ease, color 0.15s ease;
  }

  .like-itinerary-button.liked.svelte-181zvgu .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
  }

  .like-itinerary-error.svelte-181zvgu {
    margin-left: 0.5em;
    color: var(--color-red-700, #b91c1c);
    font-size: 0.875rem;
  }


  .loading-overlay.svelte-1qpkoic {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgb(0 0 0 / 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
  }

  .loading-overlay.non-blocking.svelte-1qpkoic {
    background-color: transparent;
    pointer-events: none;
  }

  html.dark .loading-overlay.svelte-1qpkoic {
    background-color: rgb(0 0 0 / 0.5);
  }

  html.dark .loading-overlay.non-blocking.svelte-1qpkoic {
    background-color: transparent;
  }

  .loading-inner.svelte-1qpkoic {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .loading-inner.pill.svelte-1qpkoic {
    background-color: rgb(0 0 0 / 0.65);
    border-radius: 12px;
    padding: 14px 20px;
  }

  .spinner.svelte-1qpkoic {
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    border: 4px solid rgb(255 255 255 / 0.3);
    border-top-color: white;
    animation: svelte-1qpkoic-spin 0.8s linear infinite;
  }

  .loading-inner.pill.svelte-1qpkoic .spinner:where(.svelte-1qpkoic) {
    width: 28px;
    height: 28px;
    border-width: 3px;
  }

  @keyframes svelte-1qpkoic-spin {
    to { transform: rotate(360deg); }
  }

  .loading-label.svelte-1qpkoic {
    font-size: 0.875rem;
    color: white;
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.5));
  }

  .loading-inner.pill.svelte-1qpkoic .loading-label:where(.svelte-1qpkoic) {
    filter: none;
  }