/* ============================================================
   My Greek Odyssey — LIGHT THEME
   Purely additive overrides, scoped under [data-theme="light"].
   Loaded after base.css + screens.css; never edits an existing dark
   rule, so the Dark Theme is byte-for-byte unaffected by this file.

   DESIGN LANGUAGE — Soft UI (neumorphism) + Glassmorphism + modern
   SaaS + iOS elegance, not a recolored Dark Theme:
   — surfaces are flat #F6F8FC / #FFFFFF (per spec), never a dark
     gradient — depth comes from shadow layering, not from color
   — every card drops its visible gray border for a near-invisible
     white hairline (a soft top "catch-light" edge) + a two-layer
     shadow: a tight contact shadow plus a wide, soft ambient one —
     the neumorphic cue, tuned subtle enough to stay accessible
   — inputs/tracks sit in a slightly recessed "well" tone with a
     gentle inset shadow (soft-UI's pressed-in feel), then lift to
     a bright white surface + blue glow on focus
   — floating/overlay elements (bars, sheets, tab bar, popups) use
     real translucency + backdrop-filter blur, not flat panels
   — every interactive element gets explicit hover / focus / active
     / disabled treatment, not just a resting state

   COLOR SYSTEM — no gold anywhere in this theme:
   — primary gradient (buttons, strong active states, progress fill,
     CTA highlights):  var(--lt-primary-grad)
                        linear-gradient(90deg, #3A8DDE 0%, #1F6FB2 100%)
   — primary solid (links, icons, focus rings, active tabs, badges):
                        var(--blue-link)  →  #0176D2
   — supporting tints (soft badges/chips at rest): the EXISTING
     --blue-050 / --blue-100 / --blue-400 / --blue-600 tokens already
     used for this exact role elsewhere in the untouched base build
   Anything filled with the primary gradient gets WHITE text/icons,
   never the dark "#2a1e08" the gold gradient used.
   ============================================================ */

:root {
  --lt-primary-grad: linear-gradient(90deg, #3a8dde 0%, #1f6fb2 100%);

  /* surfaces — flat per spec; the radial is a 5%-opacity whisper so a
     tall scroll doesn't read dead-flat, never a competing gradient */
  --lt-bg: #f6f8fc;
  --lt-surface: #ffffff;
  --lt-surface-grad:
    radial-gradient(120% 45% at 50% -14%, rgba(58, 141, 222, 0.05), transparent 60%),
    var(--lt-bg);

  /* soft-UI card: near-invisible hairline + two-layer soft shadow
     (tight contact + wide ambient) instead of a visible gray border */
  --lt-card-border: 1px solid rgba(255, 255, 255, 0.9);
  --lt-shadow-xs: 0 1px 2px rgba(24, 58, 99, 0.05);
  --lt-shadow-sm: 0 1px 2px rgba(24, 58, 99, 0.05), 0 8px 20px -10px rgba(24, 58, 99, 0.12);
  --lt-shadow-md: 0 2px 4px rgba(24, 58, 99, 0.05), 0 16px 32px -12px rgba(24, 58, 99, 0.16);
  --lt-shadow-lg: 0 4px 10px rgba(24, 58, 99, 0.06), 0 28px 56px -20px rgba(24, 58, 99, 0.22);
  --lt-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.85);

  /* recessed "well" tone for inputs/tracks — the soft-UI pressed-in
     cue — lifting to a bright white + blue glow only once focused */
  --lt-well-bg: #eef2f8;
  --lt-well-shadow: inset 0 1px 4px rgba(24, 58, 99, 0.07), inset 0 -1px 0 rgba(255, 255, 255, 0.7);
  --lt-focus-ring: 0 0 0 4px rgba(1, 118, 210, 0.15);

  /* glass (blur) — floating overlays: bars, sheets, tab bar, popups */
  --lt-glass: rgba(255, 255, 255, 0.72);
  --lt-glass-strong: rgba(255, 255, 255, 0.88);
  --lt-glass-border: 1px solid rgba(255, 255, 255, 0.6);
}

/* ============================================================
   GLOBAL SOFT-UI PRIMITIVES — every plain card, icon button, search
   field and badge across all 26 screens shares ONE definition here,
   instead of near-duplicated rules per screen. Screen sections below
   then only add what's genuinely screen-specific (text/accent color,
   layout tweaks) — this is what keeps the depth language identical
   everywhere instead of drifting screen to screen.
   ============================================================ */

/* the recurring "plain white info card" — route rows, stat tiles,
   activity/hotel/review cards, list rows, summary cards, payment
   method rows, profile menu cards... one soft-UI recipe for all */
[data-theme="light"] .itn-route,
[data-theme="light"] .itn-stat,
[data-theme="light"] .stay-card,
[data-theme="light"] .ai-chip,
[data-theme="light"] .ai-composer,
[data-theme="light"] .chatcard-act,
[data-theme="light"] .act-card,
[data-theme="light"] .mini-hotel,
[data-theme="light"] .stop-fact,
[data-theme="light"] .stop-row,
[data-theme="light"] .about-tag,
[data-theme="light"] .story-card,
[data-theme="light"] .stay-hotel-card,
[data-theme="light"] .simple-card,
[data-theme="light"] .itn-summary,
[data-theme="light"] .tl-node,
[data-theme="light"] .tl-card,
[data-theme="light"] .adjuster-row,
[data-theme="light"] .hotel-card,
[data-theme="light"] .scr-hotel .card,
[data-theme="light"] .qa-item,
[data-theme="light"] .review-card,
[data-theme="light"] .ferry-form.card,
[data-theme="light"] .ferry-card,
[data-theme="light"] .bk-card,
[data-theme="light"] .bkd-summary,
[data-theme="light"] .bkd-card,
[data-theme="light"] .profile-card,
[data-theme="light"] .menu-card,
[data-theme="light"] .rv-ferry-card,
[data-theme="light"] .rv-hotel-card,
[data-theme="light"] .rv-stay-card,
[data-theme="light"] .rv-card,
[data-theme="light"] .rv-room-guests,
[data-theme="light"] .pm-card {
  background: var(--lt-surface);
  border: var(--lt-card-border);
  box-shadow: var(--lt-sheen), var(--lt-shadow-sm);
}
/* the hover/press lift shared by every clickable card above */
[data-theme="light"] .act-card:hover,
[data-theme="light"] .mini-hotel:hover,
[data-theme="light"] .stop-row:hover,
[data-theme="light"] .hotel-card:hover,
[data-theme="light"] .stay-card:hover {
  box-shadow: var(--lt-sheen), var(--lt-shadow-md);
}

/* the recurring circular "back" / bar icon button */
[data-theme="light"] .scr-quiz .quiz-top .icon-btn,
[data-theme="light"] .scr-ai .bar .icon-btn,
[data-theme="light"] .scr-chats .bar .icon-btn,
[data-theme="light"] .scr-stop .bar .icon-btn,
[data-theme="light"] .scr-stop-sub .bar .icon-btn,
[data-theme="light"] .scr-itinerary .bar .icon-btn,
[data-theme="light"] .scr-hotels .bar .icon-btn,
[data-theme="light"] .scr-ferry .bar .icon-btn,
[data-theme="light"] .scr-bookings .bar .icon-btn,
[data-theme="light"] .scr-bkdetail .bar .icon-btn,
[data-theme="light"] .scr-review .bar .icon-btn,
[data-theme="light"] .scr-payment .bar .icon-btn,
[data-theme="light"] .scr-favs .bar .icon-btn,
[data-theme="light"] .scr-home .home-head-actions .icon-btn,
[data-theme="light"] .bsheet .icon-btn {
  color: var(--ink);
  background: var(--lt-surface);
  border: var(--lt-card-border);
  box-shadow: var(--lt-sheen), var(--lt-shadow-sm);
}
[data-theme="light"] .icon-btn:hover { box-shadow: var(--lt-sheen), var(--lt-shadow-md); }
[data-theme="light"] .icon-btn:active { box-shadow: var(--lt-well-shadow); transform: scale(0.9); }

/* the scroll-triggered solid header on photo-hero screens (island/hotel) */
[data-theme="light"] .scr-island .bar-overlay.solid,
[data-theme="light"] .scr-hotel .bar-overlay.solid {
  background: var(--lt-glass-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--lt-shadow-xs);
}
[data-theme="light"] .scr-island .bar-overlay.solid .bar-title,
[data-theme="light"] .scr-hotel .bar-overlay.solid .bar-title { color: var(--ink); }
[data-theme="light"] .scr-island .bar-overlay.solid .icon-btn.glass,
[data-theme="light"] .scr-hotel .bar-overlay.solid .icon-btn.glass {
  background: var(--lt-surface);
  border: var(--lt-card-border);
  color: var(--ink);
  box-shadow: var(--lt-shadow-sm);
}

/* search bars + text inputs — the soft-UI "well": recessed, no hard
   border, then a bright lift + blue glow on focus */
[data-theme="light"] .searchbar,
[data-theme="light"] .scr-quiz .field-box.sm,
[data-theme="light"] .scr-review .field-box,
[data-theme="light"] .scr-payment .field-box,
[data-theme="light"] .scr-ferry .input-like,
[data-theme="light"] .bsheet .searchbar {
  background: var(--lt-well-bg);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--lt-well-shadow);
  /* the well flips light here, but the base keeps its dark-theme #fff value
     text — recolor to ink so the ferry date / passenger values stay legible */
  color: var(--ink);
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
[data-theme="light"] .scr-ferry .input-like > span { color: var(--ink); }
[data-theme="light"] .searchbar:focus-within,
[data-theme="light"] .scr-quiz .field-box.sm:focus-within,
[data-theme="light"] .scr-review .field-box:focus-within,
[data-theme="light"] .scr-payment .field-box:focus-within {
  background: var(--lt-surface);
  border-color: var(--blue-link);
  box-shadow: var(--lt-focus-ring);
}
[data-theme="light"] .scr-ferry .input-like:hover { background: var(--lt-surface); border-color: rgba(1, 118, 210, 0.3); }
[data-theme="light"] .searchbar-ico,
[data-theme="light"] .scr-ferry .input-ico { color: var(--blue-link); }
/* Name / Email (and payment) field icons default to gold in the base build
   (screens.css .scr-review/.scr-payment .field-ico) — recolor to the light
   theme's blue so they match every other input icon here */
[data-theme="light"] .scr-review .field-ico,
[data-theme="light"] .scr-payment .field-ico { color: var(--blue-link); }
[data-theme="light"] .searchbar input,
[data-theme="light"] .field-box input { color: var(--ink); }
[data-theme="light"] .searchbar input::placeholder,
[data-theme="light"] .field-box input::placeholder { color: var(--mist); }

/* soft accent badge/chip at rest — the one recipe for every small
   tinted pill across the app (tag, icon tile, status chip) */
[data-theme="light"] .pill-select,
[data-theme="light"] .stop-days-pill,
[data-theme="light"] .island-title-row .badge,
[data-theme="light"] .chip-soft,
[data-theme="light"] .btn-soft,
[data-theme="light"] .tl-mini-icon,
[data-theme="light"] .tl-detail-icon,
[data-theme="light"] .tl-action,
[data-theme="light"] .ferry-logo,
[data-theme="light"] .swap-btn,
[data-theme="light"] .mland-cat-icon,
[data-theme="light"] .qa-q .qa-ico,
[data-theme="light"] .bkd-ci,
[data-theme="light"] .chip-badge-grad,
[data-theme="light"] .rv-stay-nights,
[data-theme="light"] .pm-add-ico,
[data-theme="light"] .match-card,
[data-theme="light"] .badge-gold {
  background: var(--blue-050);
  color: var(--blue-link);
  border: 1px solid var(--blue-100);
  box-shadow: none;
}
[data-theme="light"] .swap-btn:hover,
[data-theme="light"] .mland-cat-icon:hover { background: var(--blue-100); }

/* ============================================================
   GLOBAL SAFETY NET — generic base.css classes used app-wide without
   a screen-scoped dark reskin. Buttons/badges get the full soft-UI
   treatment plus explicit hover / active / disabled states here.
   ============================================================ */
[data-theme="light"] .btn-primary {
  background: var(--lt-primary-grad);
  color: #fff;
  box-shadow: var(--lt-sheen), 0 10px 24px -10px rgba(1, 118, 210, 0.45), 0 3px 8px -2px rgba(1, 118, 210, 0.3);
  transition: filter var(--t-fast) ease, box-shadow var(--t-fast) ease, transform var(--t-fast) var(--ease-spring);
}
[data-theme="light"] .btn-primary:hover { filter: brightness(1.06); }
[data-theme="light"] .btn-primary:active { transform: scale(0.97); filter: brightness(0.98); }
[data-theme="light"] .btn-primary:disabled { background: var(--line); color: var(--mist); box-shadow: none; filter: none; }
[data-theme="light"] .btn-outline {
  background: var(--lt-surface);
  color: var(--ink);
  border: 1px solid rgba(24, 58, 99, 0.12);
  box-shadow: var(--lt-shadow-xs);
}
[data-theme="light"] .btn-outline:hover { border-color: var(--blue-400); box-shadow: var(--lt-shadow-sm); }
[data-theme="light"] .btn-outline:active { transform: scale(0.97); }
[data-theme="light"] .badge-glass {
  color: var(--blue-link);
  /* background: rgba(9, 18, 30, 0.55); */
  background: var(--blue-050);
  border: 1px solid rgba(1, 118, 210, 0.5);
}
[data-theme="light"] .price-big { color: var(--blue-link); }
/* star-rating chips ("★ 4.0") inherit a dark-theme white fill in the plain
   white card bodies of the hotels list and Home stay-cards, leaving the
   number invisible on white — pin them to ink. Ratings that sit on photos
   (island / hotel / review heroes) carry their own scoped rules already. */
[data-theme="light"] .scr-hotels .rating,
[data-theme="light"] .scr-home .rating { color: var(--ink); }
[data-theme="light"] .itn-hero-badge {
  color: var(--blue-link);
  /* background: rgba(9, 18, 30, 0.55); */
  background: var(--blue-050);
  border: 1px solid rgba(1, 118, 210, 0.5);
}
[data-theme="light"] .itn-hero-badge .badge-ico { color: var(--blue-link); }
[data-theme="light"] .switch { background: var(--lt-well-bg); box-shadow: var(--lt-well-shadow); }
[data-theme="light"] .switch.on { background: var(--lt-primary-grad); box-shadow: none; }
[data-theme="light"] .switch:focus-visible { outline: 2px solid var(--blue-link); outline-offset: 2px; }
[data-theme="light"] .sheet-opt {
  background: var(--lt-surface);
  border: var(--lt-card-border);
  color: var(--ink);
  box-shadow: var(--lt-sheen), var(--lt-shadow-sm);
}
[data-theme="light"] .sheet-opt:hover { border-color: rgba(1, 118, 210, 0.35); box-shadow: var(--lt-sheen), var(--lt-shadow-md); }
[data-theme="light"] .sheet-opt.sel {
  background: var(--blue-050);
  border-color: var(--blue-link);
  box-shadow: 0 6px 16px -8px rgba(1, 118, 210, 0.3);
}
[data-theme="light"] .sheet-opt .so-ico img[src*="ferry-boat.svg"] { filter: none; }
/* "Booking Confirmed!" success check — the ring gradient is an inline SVG
   <linearGradient id="ccGrad"> injected by JS with gold stops; a plain CSS
   stop-color rule (no !important needed) overrides an SVG presentation
   attribute regardless of selector specificity */
[data-theme="light"] #ccGrad stop:first-child { stop-color: #3a8dde; }
[data-theme="light"] #ccGrad stop:last-child { stop-color: #1f6fb2; }
[data-theme="light"] .confirm-check::before { background: radial-gradient(closest-side, rgba(1, 118, 210, 0.28), transparent 72%); }
[data-theme="light"] .confirm-check .cc-ring { filter: drop-shadow(0 4px 12px rgba(1, 118, 210, 0.4)); }
[data-theme="light"] .confirm-check .cc-tick { stroke: #1f6fb2; }
/* these dark-reskin selectors compound 3 classes, which outranks the plain
   2-class ".btn-primary" safety net above regardless of load order — each
   needs its own equal-or-higher-specificity light override */
[data-theme="light"] .scr-ai .chatcard .btn-primary,
[data-theme="light"] .scr-island .sticky-cta .btn-primary,
[data-theme="light"] .scr-itinerary .sticky-cta .btn-primary,
[data-theme="light"] .scr-itinerary .bsheet .btn-primary,
[data-theme="light"] .scr-hotel .sticky-cta .btn-primary,
[data-theme="light"] .scr-ferry .ferry-form .btn-primary {
  background: var(--lt-primary-grad);
  color: #fff;
  box-shadow: var(--lt-sheen), 0 10px 24px -10px rgba(1, 118, 210, 0.45);
}
[data-theme="light"] .scr-island .sticky-cta .btn-primary .btn-ico,
[data-theme="light"] .scr-ferry .ferry-form .btn-primary .btn-ico { color: #fff; }

/* ============================================================
   GLOBAL SHELL — status bar, tab bar, Pete FAB, shared overlays
   ============================================================ */
[data-theme="light"] .statusbar.light { color: var(--ink); }
/* Welcome (splash), Stories and Auth keep a colour/photo hero in this
   theme too, so the status bar needs to stay white on them specifically —
   overriding the ink flip above for just these three. Every other screen
   (home, explore, hotels, …) goes fully light-themed and is correctly
   handled by the ink rule above. */
[data-theme="light"] .phone:has(.scr-splash.active) .statusbar,
[data-theme="light"] .phone:has(.scr-stories.active) .statusbar,
[data-theme="light"] .phone:has(.scr-auth.active) .statusbar {
  color: #fff;
}

/* cinematic tab bar + FAB revert to a soft glass bar on every screen */
[data-theme="light"] .tabbar.cine {
  background: var(--lt-glass-strong);
  border: var(--lt-glass-border);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--lt-sheen), var(--lt-shadow-lg);
}
[data-theme="light"] .tabbar.cine .tab { color: var(--slate); background: transparent; }
[data-theme="light"] .tabbar.cine .tab:active { transform: scale(0.86); }
[data-theme="light"] .tabbar.cine .tab.active { color: #fff; background: transparent; }
[data-theme="light"] .tabbar.cine .tab-pill { background: var(--lt-primary-grad); box-shadow: 0 8px 18px -6px rgba(1, 118, 210, 0.5); }
[data-theme="light"] .pete-fab.cine .pete-fab-ring { border-color: var(--blue-400); }
[data-theme="light"] .pete-fab.cine img { border-color: var(--white); box-shadow: var(--lt-shadow-md); }

/* modals, bottom sheets, toasts — shared across every screen, always dark
   navy in the base build; a soft frosted-glass card, lifted with real depth.
   border-radius/padding are set PER ELEMENT below to match each one's own
   Dark Theme box model exactly — .bsheet/.bsheet-card are a flush bottom
   sheet (rounded top corners only, flat bottom against the screen edge);
   rounding all four corners here (as a single shared rule previously did)
   clipped transparent notches at the bottom-left/right where the sheet is
   supposed to be flush, which read as the sheet not reaching the edges.
   The 1px glass-edge border is new vs Dark's border:0, so padding is
   nudged -1px/side wherever the border is added — zero net effect on the
   card's outer size or its content's position. */
[data-theme="light"] .modal-card,
[data-theme="light"] .bsheet,
[data-theme="light"] .bsheet-card {
  background: var(--lt-glass-strong);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: var(--lt-sheen), var(--lt-shadow-lg);
}
[data-theme="light"] .modal-card {
  border: var(--lt-glass-border);
  border-radius: 24px;
  padding: 23px 21px;
}
[data-theme="light"] .bsheet {
  border: var(--lt-glass-border);
  border-radius: 24px 24px 0 0;
  padding: 19px;
  padding-bottom: calc(19px + env(safe-area-inset-bottom, 0px));
}
[data-theme="light"] .bsheet-card {
  border-radius: 28px 28px 0 0;
}
[data-theme="light"] .modal-title,
[data-theme="light"] .bsheet-title,
[data-theme="light"] .sheet-title,
[data-theme="light"] .confirm-title,
[data-theme="light"] .cancel-title { color: var(--ink); }
[data-theme="light"] .modal-text,
[data-theme="light"] .bsheet-sub,
[data-theme="light"] .cancel-text { color: var(--slate); }
[data-theme="light"] .btn-ghost {
  background: var(--lt-surface);
  color: var(--ink);
  border: var(--lt-card-border);
  box-shadow: var(--lt-shadow-xs);
}
[data-theme="light"] .btn-ghost:hover { box-shadow: var(--lt-shadow-sm); }
[data-theme="light"] .btn-ghost:active { transform: scale(0.97); }
[data-theme="light"] .cancel-row span:first-child { color: var(--mist); }
[data-theme="light"] .cancel-row span:last-child { color: var(--ink); }
[data-theme="light"] .cancel-keep { background: var(--lt-surface); border: var(--lt-card-border); color: var(--ink); box-shadow: var(--lt-shadow-xs); }
[data-theme="light"] .cancel-confirm { background: rgba(224, 56, 46, 0.1); border: 1px solid rgba(224, 56, 46, 0.3); color: var(--danger); }
[data-theme="light"] .confirm-detail-row span:first-child { color: var(--mist); }
[data-theme="light"] .confirm-detail-row span:last-child { color: var(--ink); }
[data-theme="light"] .toast {
  background: var(--lt-glass-strong);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: var(--lt-glass-border);
  color: var(--ink);
  box-shadow: var(--lt-sheen), var(--lt-shadow-lg);
}
[data-theme="light"] .field-box.error { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(224, 56, 46, 0.14) !important; }

/* ============================================================
   DESKTOP STAGE — the showroom chrome around the phone (outside the
   app itself). The marketing copy/logo/nav-pills that used to live
   here were removed as unnecessary; all that's left is the backdrop
   itself, which just needs to be a flat white in this theme (Dark
   Theme's own default is a flat black — see base.css). The dev-only
   theme-toggle switch is deliberately left alone (its look is fixed
   regardless of theme — see base.css).
   ============================================================ */
[data-theme="light"] .stage { background: #fff; }

/* ============================================================
   SPLASH / STORIES / GENERATING — the video/scrim itself is left
   theme-agnostic (it's real footage, not a paintable surface), and
   Stories/Generating already read as neutral white-on-video with no
   gold to begin with. Splash's brand mark, though, IS drawn chrome —
   its gold wordmark + cream accent labels are the same "no gold
   anywhere in this theme" violation Auth/Stage already fixed, so they
   get the identical recolor here (white logo, blue-tinted accents)
   even though the cinematic backdrop behind them stays as-is.
   Auth and Quiz get the full light treatment below since they're
   interactive, text-heavy screens users spend real time on.
   ============================================================ */
/* wordmark — solid white, same recolor as every other host of this
   logo in Light Theme (see AUTH / DESKTOP STAGE) */
[data-theme="light"] #goldGrad stop:nth-child(1),
[data-theme="light"] #goldGrad stop:nth-child(2),
[data-theme="light"] #goldGrad stop:nth-child(3),
[data-theme="light"] #goldGrad stop:nth-child(4) { stop-color: #ffffff; }
[data-theme="light"] .scr-splash .logo-ghost { stroke: rgba(255, 255, 255, 0.55); }
/* eyebrow / hint / drifting particles — cream-gold swapped for a cool
   sky-blue so nothing gold survives, while staying legible against the
   unchanged dark cinematic video */
[data-theme="light"] .scr-splash .se-text { color: rgba(191, 224, 251, 0.95); }
[data-theme="light"] .scr-splash .se-rule { background: linear-gradient(90deg, transparent, rgba(191, 224, 251, 0.8)); }
[data-theme="light"] .scr-splash .splash-hint { color: rgba(191, 224, 251, 0.85); }
[data-theme="light"] .scr-splash .splash-particles i {
  background: rgba(191, 224, 251, 0.85);
  box-shadow: 0 0 6px rgba(191, 224, 251, 0.5);
}

/* GENERATING — the section header above wrongly assumed this screen had no
   gold. It does: the eyebrow, the progress trail + its pins, the stage
   check-dots, and the "Continue" beacon are all gold. Recolor every one of
   them to the theme's blue palette here, Light-Theme-only, leaving the video,
   scrim, layout, typography and all animations exactly as they are. The Dark
   Theme keeps its gold (these rules never fire without [data-theme="light"]). */
[data-theme="light"] .scr-generating {
  --gen-blue: #2563eb;         /* primary */
  --gen-blue-lt: #3b82f6;      /* light   */
  --gen-blue-soft: #60a5fa;    /* soft    */
  --gen-blue-border: #93c5fd;  /* border  */
  --gen-blue-glow: rgba(37, 99, 235, 0.18);
}
/* small accent text */
[data-theme="light"] .scr-generating .gen-eyebrow { color: #fff; }
[data-theme="light"] .gen-scrim {
  background: #ad9af54f;
    /* backdrop-filter: blur(2px); */
}
/* progress line + start / end pins — CSS stroke overrides the inline
   stroke="#C8A96A" SVG presentation attributes; fill on the pins stays white */
[data-theme="light"] .scr-generating #genPath,
[data-theme="light"] .scr-generating .gen-route circle { stroke: var(--gen-blue); }
/* progress indicators: active ring + its pulsing loading core, filled "done" check */
[data-theme="light"] .scr-generating .gen-stage.active .gs-dot { border-color: var(--gen-blue); }
[data-theme="light"] .scr-generating .gen-stage.active .gs-dot::before { background: var(--gen-blue-lt); }
[data-theme="light"] .scr-generating .gen-stage.done .gs-dot {
  background: var(--gen-blue);
  border-color: var(--gen-blue);
}
/* bottom CTA button (sailboat waypoint) — gold beacon + sonar rings → blue,
   with a subtle blue glow in place of the gold one */
[data-theme="light"] .scr-generating .gen-go { color: var(--gen-blue); }
[data-theme="light"] .scr-generating .gen-go-ring { border-color: rgba(59, 130, 246, 0.55); }
[data-theme="light"] .scr-generating .gen-go-core {
  background: radial-gradient(circle at 50% 32%, var(--gen-blue-lt), var(--gen-blue));
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.45), inset 0 1px 3px rgba(255, 255, 255, 0.45);
}
[data-theme="light"] .scr-generating .gen-go-core svg { filter: drop-shadow(0 1px 2px rgba(37, 99, 235, 0.3)); }
/* outline chips — airy white pill, blue border, high-contrast ink text, soft
   blue glow (radius / padding / font / size all untouched from the base) */
[data-theme="light"] .scr-generating .gen-chip {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--gen-blue-border);
  color: var(--ink);
  box-shadow: 0 4px 12px -4px var(--gen-blue-glow);
}

/* ============================================================
   AUTH — a visual-only reskin: an immersive hero wash, a wordmark
   recolored to the brand blue (via its own cloned gradient), a
   genuinely translucent frosted-glass card, and soft-UI depth on
   every field/button. The box model (sizes, spacing, positions) is
   deliberately untouched — it must stay pixel-identical to the Dark
   Theme's screens.css rules; only color/shadow/blur/border properties
   are overridden here.
   ============================================================ */

/* hero — a premium vertical blue gradient (the brand ramp #3A8DDE→#1F6FB2)
   that the white wordmark reads on with strong, guaranteed contrast. It is
   fully opaque through the top ~1/3 (the logo + eyebrow zone) so the logo
   is always crisply legible, then eases its alpha to zero lower down so
   the Greece photo re-emerges behind the frosted glass card — keeping the
   scene immersive "where appropriate" without ever sitting behind the
   logo. Only paint changes; nothing here touches layout or the photo el. */
[data-theme="light"] .auth-scrim {
  background: linear-gradient(180deg,
    #3a8dde 0%,
    #3384d0 32%,
    rgba(44, 124, 190, 0.82) 42%,
    rgba(37, 116, 183, 0.42) 54%,
    rgba(31, 111, 178, 0.1) 66%,
    rgba(31, 111, 178, 0) 74%);
}

/* wordmark — recolored to PURE WHITE for the Light Theme by whiting out
   every drawn part: the fill gradient (all four cloned #goldGrad-a stops)
   AND the ghost outline stroke shown during the water-fill reveal, so the
   logo is solid white at every frame of the (untouched) animation. Size,
   geometry, mask and animation timing are all left exactly as the Dark
   Theme — only colour changes here. */
[data-theme="light"] #goldGrad-a stop:nth-child(1),
[data-theme="light"] #goldGrad-a stop:nth-child(2),
[data-theme="light"] #goldGrad-a stop:nth-child(3),
[data-theme="light"] #goldGrad-a stop:nth-child(4) { stop-color: #ffffff; }
[data-theme="light"] .auth-logo-host .logo-ghost { stroke: rgba(255, 255, 255, 0.6); }
[data-theme="light"] .auth-logo-host .splash-logo {
  /* a soft deep-blue ambient shadow so the white wordmark lifts off the
     blue gradient with gentle depth (never a harsh outline) */
  filter:
    drop-shadow(0 2px 5px rgba(8, 38, 70, 0.3))
    drop-shadow(0 12px 28px rgba(8, 38, 70, 0.2));
}
[data-theme="light"] .auth-eyebrow { color: rgba(255, 255, 255, 0.92); }
[data-theme="light"] .auth-eyebrow i { background: rgba(255, 255, 255, 0.55); }

/* the card — genuine frosted glass: translucent gradient (not flat
   white), saturated blur so the photo bleeds through softly, a
   hairline inner sheen for a glass edge, and a layered ambient shadow
   that lifts it off the photo instead of just darkening its corners.
   Border-radius is intentionally NOT overridden (stays the Dark
   Theme's 26px). Padding is nudged -1px on each side to exactly
   offset the 1px border added below (Dark has border:0 + 24px/20px
   padding = 24/20 to content; Light has border:1px + 23px/19px
   padding = 24/20 to content too) — the glass edge is purely visual,
   zero net effect on the card's outer size or the content's position. */
[data-theme="light"] .auth-glass {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.7) 100%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  padding: 23px 19px;
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 -60px 60px -50px rgba(58, 141, 222, 0.16) inset,
    var(--lt-shadow-lg);
}
[data-theme="light"] .auth-title { color: var(--ink); }
[data-theme="light"] .auth-sub { color: var(--slate); }

/* fields — deliberately the EXACT same "well" recipe as the Home search
   bar (and every other input in the app: quiz/review/payment/ferry), so
   Auth reads as the same design system rather than a one-off: same
   background token, same border, same two-layer inset shadow, same
   hover lift, same focus behavior. Height/margins are NOT overridden —
   they stay the Dark Theme's 44px / 12px (screens.css .auth-glass
   .field-box). Border-radius IS changed, from Dark's 14px to the
   shared --r-md (16px) the search bar uses — a pure corner-rounding
   change, it doesn't touch the box's width/height/position. */
[data-theme="light"] .auth-glass .field-label { color: var(--slate); }
[data-theme="light"] .auth-glass .field-box {
  background: var(--lt-well-bg);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 12px !important;
  box-shadow: var(--lt-well-shadow);
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
[data-theme="light"] .auth-glass .field-box:hover {
  background: var(--lt-surface);
  border-color: rgba(1, 118, 210, 0.3);
}
[data-theme="light"] .auth-glass .field-box:focus-within {
  background: var(--lt-surface);
  border-color: var(--blue-link);
  box-shadow: var(--lt-focus-ring);
}
[data-theme="light"] .auth-glass .field-ico { color: var(--blue-link); }
[data-theme="light"] .auth-glass .field-box input { color: var(--ink); }
[data-theme="light"] .auth-glass .field-box input::placeholder { color: var(--mist); }
[data-theme="light"] .auth-glass .field-box input:disabled { color: var(--mist); opacity: 0.7; }
[data-theme="light"] .auth-glass .field-eye {
  color: var(--mist);
  transition: color var(--t-fast) ease, transform var(--t-fast) var(--ease-spring);
}
[data-theme="light"] .auth-glass .field-eye:hover { color: var(--blue-link); }
[data-theme="light"] .auth-glass .field-eye:active { transform: scale(0.88); }
[data-theme="light"] .auth-row .link { color: var(--blue-link); }

/* divider + social — real depth (soft shadow, hover lift) instead of
   a flat outline pill */
[data-theme="light"] .auth-or { color: var(--mist); }
[data-theme="light"] .auth-or::before, [data-theme="light"] .auth-or::after { background: var(--line); }
[data-theme="light"] .social-btn {
  background: var(--lt-surface);
  border: var(--lt-card-border);
  box-shadow: var(--lt-sheen), var(--lt-shadow-sm);
}
[data-theme="light"] .social-btn:hover { box-shadow: var(--lt-sheen), var(--lt-shadow-md); transform: translateY(-1px); }
[data-theme="light"] .social-btn:active { transform: scale(0.94); }
/* the Apple glyph is hardcoded fill="#fff" for the dark pill — invisible on
   a white one, so recolor it for light mode only */
[data-theme="light"] .social-btn svg path[fill="#fff"] { fill: #1a1a1a; }

/* primary CTA — the brand gradient with a real elevated glow instead
   of a flat drop-shadow. Height/border-radius are NOT overridden — they
   stay the Dark Theme's 54px / 14px (screens.css .auth-form .btn-primary). */
[data-theme="light"] .auth-form .btn-primary {
  box-shadow: var(--lt-sheen), 0 18px 36px -14px rgba(31, 111, 178, 0.45), 0 4px 10px -4px rgba(31, 111, 178, 0.28);
}
[data-theme="light"] .auth-switch { color: var(--slate); }
[data-theme="light"] .auth-switch .link-bold { color: var(--blue-link); }

/* ============ QUIZ — soft-UI tiles on the same cinematic gradient ============ */
[data-theme="light"] .scr-quiz {
  background: var(--lt-surface-grad);
}
[data-theme="light"] .quiz-count { color: var(--blue-link); }
[data-theme="light"] .quiz-progress { background: var(--lt-well-bg); box-shadow: var(--lt-well-shadow); }
[data-theme="light"] .quiz-progress span { background: var(--lt-primary-grad); box-shadow: 0 0 12px rgba(1, 118, 210, 0.4); }
[data-theme="light"] .quiz-q { color: var(--ink); }
[data-theme="light"] .quiz-hint { color: var(--slate); }
[data-theme="light"] .quiz-group-label { color: var(--ink); }
[data-theme="light"] .quiz-opt {
  background: var(--lt-surface);
  border: var(--lt-card-border);
  color: var(--ink);
  box-shadow: var(--lt-sheen), var(--lt-shadow-sm);
}
[data-theme="light"] .quiz-opt .q-ico { background: var(--lt-well-bg); box-shadow: none; }
[data-theme="light"] .quiz-opt .q-lbl { color: var(--ink); }
[data-theme="light"] .quiz-opt .q-sub { color: var(--mist); }
[data-theme="light"] .quiz-opt:hover { border-color: rgba(1, 118, 210, 0.35); box-shadow: var(--lt-sheen), var(--lt-shadow-md); }
[data-theme="light"] .quiz-opt:active { transform: scale(0.98); }
[data-theme="light"] .quiz-opt.sel {
  border-color: var(--blue-link);
  background: var(--blue-050);
  box-shadow: 0 10px 24px -14px rgba(1, 118, 210, 0.3), inset 0 0 0 1px rgba(1, 118, 210, 0.25);
}
[data-theme="light"] .quiz-opt.sel::after { background: var(--lt-primary-grad); color: #fff; box-shadow: 0 2px 8px rgba(1, 118, 210, 0.45); }
/* five monochrome icons were whitened for the dark tile — on a white tile
   the original dark line art already reads fine, so undo the invert */
[data-theme="light"] .quiz-opt .q-ico img[src*="route-03-1.svg"],
[data-theme="light"] .quiz-opt .q-ico img[src*="travel-bag.svg"],
[data-theme="light"] .quiz-opt .q-ico img[src*="swimming.svg"],
[data-theme="light"] .quiz-opt .q-ico img[src*="serving-food.svg"],
[data-theme="light"] .quiz-opt .q-ico img[src*="trip1.svg"] { filter: none; }
[data-theme="light"] .quiz-slider input[type='range'] { background: linear-gradient(to right, var(--blue-link) var(--fill, 40%), var(--line) var(--fill, 40%)); }
/* thumbs — the ::-webkit- and ::-moz- pseudo-elements MUST be in SEPARATE
   rules. A comma-group that mixes another engine's pseudo-element is invalid
   as a whole and every browser drops it, which is why the thumbs kept
   rendering the Dark Theme gold. Keep webkit selectors together, moz apart. */
[data-theme="light"] .quiz-slider input[type='range']::-webkit-slider-thumb,
[data-theme="light"] .range-dual input[type='range']::-webkit-slider-thumb {
  background: var(--lt-primary-grad);
  border-color: #fff;
  box-shadow: 0 3px 10px rgba(31, 76, 118, 0.28);
}
[data-theme="light"] .quiz-slider input[type='range']::-moz-range-thumb,
[data-theme="light"] .range-dual input[type='range']::-moz-range-thumb {
  background: var(--lt-primary-grad);
  border-color: #fff;
  box-shadow: 0 3px 10px rgba(31, 76, 118, 0.28);
}
[data-theme="light"] .quiz-slider-bubble,
[data-theme="light"] .rd-bubble { background: var(--lt-primary-grad); color: #fff; }
[data-theme="light"] .quiz-slider-marks { color: var(--mist); }
[data-theme="light"] .rd-track { background: var(--line); }
[data-theme="light"] .rd-fill { background: var(--lt-primary-grad); }
[data-theme="light"] .budget-note { color: var(--mist); }
[data-theme="light"] .quiz-footer { background: linear-gradient(180deg, rgba(246, 248, 252, 0) 0%, var(--lt-bg) 34%); }
[data-theme="light"] .scr-quiz .field-label { color: var(--slate); }
/* the From/To budget values — the dark rule ".scr-quiz .field-box.sm input"
   sets white text and outranks the generic light ".field-box input" ink rule,
   so the numbers rendered white-on-light (near-invisible). Match its
   specificity to restore readable ink text. */
[data-theme="light"] .scr-quiz .field-box.sm input { color: var(--ink); }

/* Q5 / itinerary map — parchment-and-sea recolor of the night map. Pin
   markers, glow and wayfinding line all use the one blue system now
   (previously gold pins + gold route on the dark map). */
[data-theme="light"] .quiz-map,
[data-theme="light"] .itn-map {
  border: 1px solid rgba(1, 118, 210, 0.2);
  background:
    linear-gradient(135deg, rgba(1, 118, 210, 0.1) 0%, rgba(1, 118, 210, 0) 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(158deg, #eaf3fc 0%, #dbebf8 55%, #cfe3f3 100%);
  box-shadow: var(--lt-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
[data-theme="light"] .q5-map-glow,
[data-theme="light"] .itn-map-glow {
  background:
    linear-gradient(120deg, rgba(1, 118, 210, 0.08), rgba(1, 118, 210, 0) 44%),
    repeating-linear-gradient(0deg, rgba(1, 118, 210, 0.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(1, 118, 210, 0.04) 0 1px, transparent 1px 28px);
}
[data-theme="light"] .q5-map-greece,
[data-theme="light"] .itn-map-greece { opacity: 0.5; filter: brightness(0) saturate(100%) invert(52%) sepia(12%) saturate(700%) hue-rotate(170deg) brightness(97%) contrast(92%) drop-shadow(0 12px 22px rgba(31, 76, 118, 0.18)); }
[data-theme="light"] .q5-route-glow,
[data-theme="light"] .itn-route-glow { stroke: rgba(1, 118, 210, 0.22); }
[data-theme="light"] .q5-route-line,
[data-theme="light"] .itn-route-path { stroke: var(--blue-link); filter: drop-shadow(0 0 6px rgba(1, 118, 210, 0.35)); }
[data-theme="light"] .q5-pin-dot,
[data-theme="light"] .itn-pin-dot { background: var(--lt-primary-grad); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 5px rgba(1, 118, 210, 0.14), 0 12px 20px rgba(31, 76, 118, 0.3); }
[data-theme="light"] .q5-pin-dot::after,
[data-theme="light"] .itn-pin-dot::after { background: var(--blue-050); }
[data-theme="light"] .q5-pin-tag,
[data-theme="light"] .itn-pin-tag { border: 1px solid rgba(1, 118, 210, 0.32); }
[data-theme="light"] .q5-pin-tag::after,
[data-theme="light"] .itn-pin-tag::after { border-right-color: rgba(1, 118, 210, 0.32); border-bottom-color: rgba(1, 118, 210, 0.32); }
[data-theme="light"] .q5-pin.sel .q5-pin-tag { background: var(--lt-primary-grad); color: #fff; border-color: rgba(255, 255, 255, 0.5); }
[data-theme="light"] .q5-pin.sel .q5-pin-tag::after { background: #1f6fb2; border-color: rgba(255, 255, 255, 0.5); }

/* ============================================================
   HOME
   ============================================================ */
[data-theme="light"] .scr-home { background: var(--lt-surface-grad); }
[data-theme="light"] .scr-home .home-hello { color: var(--mist); }
[data-theme="light"] .scr-home .home-name { color: var(--ink); }
[data-theme="light"] .scr-home .pill-select { box-shadow: none; }
[data-theme="light"] .scr-home .searchbar:focus-within { border-color: var(--blue-link); }
[data-theme="light"] .scr-home .icon-btn.sm.search-filter { color: var(--slate); }
[data-theme="light"] .scr-home .section-kicker { color: var(--slate); }
[data-theme="light"] .scr-home .section-title { color: var(--ink); }
[data-theme="light"] .scr-home .link.sm { color: var(--blue-link); }
[data-theme="light"] .scr-home .itn-hero {
  background: linear-gradient(180deg, #ffffff, #f6fafe);
  border: 1px solid rgba(1, 118, 210, 0.2);
  box-shadow: var(--lt-sheen), var(--lt-shadow-md), 0 0 32px -18px rgba(1, 118, 210, 0.2);
}
/* route eyebrow over the hero photo — the lone gold hold-out on this screen.
   Drop it to a soft blue-tinted white so it reads as the blue-system accent
   under the white "Your Aegean Odyssey" title, still legible on the image. */
[data-theme="light"] .scr-home .itn-hero-place { color: #d9eafa; }
/* hero slider image quality — the Dark Theme's own source files fit the
   1.58:1 banner poorly on two of the three slides: santorini-card.png is
   1.25:1 (~21% cropped) and island-rhodes.png is a 334x436 PORTRAIT thumbnail
   (~52% cropped + far too low-res, hence "blurred + cropped"). Swap ONLY
   those two slides, ONLY in the Light Theme, to well-proportioned landscape
   / hi-res assets already in the repo, using content:url() so nothing in the
   markup, JS, slider transitions, Ken-Burns animation, layout or the Dark
   Theme changes — only which bitmap this <img> paints in light mode. object-fit
   stays cover (full-bleed, premium); with matching-aspect sources the crop is
   now minimal (~12%, i.e. no longer "unnecessary"). */
[data-theme="light"] .itn-hero-track img[src$="santorini-card.png"] {
  content: url('../assets/img/island-hero-santorini.png');
}
[data-theme="light"] .itn-hero-track img[src$="island-rhodes.png"] {
  content: url('../assets/img/symi-aerial.jpg');
}
[data-theme="light"] .scr-home .itn-stop-chip { background: #f2f2f2; border: 1px solid #ececec; }
[data-theme="light"] .scr-home .itn-stop.active .itn-stop-chip {
  background: var(--blue-050);
  border-color: var(--blue-link);
  box-shadow: 0 0 0 4px rgba(1, 118, 210, 0.1), 0 6px 16px -6px rgba(1, 118, 210, 0.3);
}
[data-theme="light"] .scr-home .itn-stop-name { color: var(--ink); }
[data-theme="light"] .scr-home .itn-stop.active .itn-stop-name { color: var(--blue-link); }
[data-theme="light"] .scr-home .itn-stat-num { color: var(--ink); }
[data-theme="light"] .scr-home .itn-stat-lbl { color: var(--mist); }
[data-theme="light"] .scr-home .itn-stat-ico { background: var(--blue-050); }
[data-theme="light"] .scr-home .ess-tile { background: var(--blue-050); border: 1px solid var(--blue-100); color: var(--ink); box-shadow: none; }
[data-theme="light"] .scr-home .ess-tile:hover { border-color: var(--blue-400); box-shadow: var(--lt-shadow-xs); }
[data-theme="light"] .scr-home .ess-ico[src*="ferry-boat.svg"] { filter: none; }
[data-theme="light"] .scr-home .itn-arrow { filter: none; opacity: 0.55; }
[data-theme="light"] .scr-home .itn-cta {
  background: var(--lt-primary-grad);
  color: #fff;
  box-shadow: var(--lt-sheen), 0 14px 28px -12px rgba(1, 118, 210, 0.45);
}
[data-theme="light"] .scr-home .itn-cta .btn-ico { color: #fff; }
[data-theme="light"] .scr-home .rec-card .badge { background: var(--blue-050); color: var(--blue-link); border: 1px solid rgba(1, 118, 210, 0.5); }
[data-theme="light"] .scr-home .cta-banner,
[data-theme="light"] .scr-home .save-banner { background: var(--lt-primary-grad); }
[data-theme="light"] .scr-home .stay-title { color: var(--ink); }
[data-theme="light"] .scr-home .stay-loc { color: var(--mist); }
[data-theme="light"] .scr-home .stay-price { color: var(--blue-link); }
[data-theme="light"] .scr-home .stay-price small { color: var(--mist); }

/* ============================================================
   AI CHAT + CHAT HISTORY
   ============================================================ */
[data-theme="light"] .scr-ai,
[data-theme="light"] .scr-chats { background: var(--lt-surface-grad); }
[data-theme="light"] .scr-ai .bar,
[data-theme="light"] .scr-chats .bar { background: transparent; }
[data-theme="light"] .scr-ai .bar-title,
[data-theme="light"] .scr-chats .bar-title,
[data-theme="light"] .scr-chats .chats-recents { color: var(--ink); }
[data-theme="light"] .scr-ai .ai-avatar-lg img { border-color: rgba(1, 118, 210, 0.45); box-shadow: var(--lt-shadow-md); }
[data-theme="light"] .scr-ai .ai-avatar-lg::before { border-color: rgba(1, 118, 210, 0.25); }
[data-theme="light"] .scr-ai .ai-avatar-glow { background: radial-gradient(closest-side, rgba(1, 118, 210, 0.2), rgba(1, 118, 210, 0.06) 62%, transparent 75%); }
[data-theme="light"] .scr-ai .ai-avatar-arc { background: conic-gradient(from 0deg, transparent 0 68%, rgba(31, 111, 178, 0.85) 84%, transparent 100%); }
[data-theme="light"] .scr-ai .ai-eyebrow { color: var(--blue-link); }
[data-theme="light"] .scr-ai .ai-eyebrow i { background: linear-gradient(90deg, transparent, rgba(1, 118, 210, 0.5)); }
[data-theme="light"] .scr-ai .ai-hi { color: var(--ink); }
[data-theme="light"] .scr-ai .ai-q { color: var(--slate); }
[data-theme="light"] .scr-ai .ai-note { color: var(--mist); }
[data-theme="light"] .scr-ai .msg { color: var(--ink); box-shadow: none; border: none; }
[data-theme="light"] .scr-ai .msg.user { background: var(--lt-well-bg); }
[data-theme="light"] .scr-ai .msg.pete { background: var(--blue-050); }
[data-theme="light"] .scr-ai .msg.pete b { color: var(--blue-600); }
[data-theme="light"] .scr-ai .msg-time { color: var(--mist); }
[data-theme="light"] .scr-ai .msg-ava img { border-color: var(--white); }
[data-theme="light"] .scr-ai .from-pete .msg-ava::after { border-color: var(--blue-400); }
[data-theme="light"] .scr-ai .ai-status { color: var(--ink); }
[data-theme="light"] .scr-ai .ai-status svg { color: var(--blue-link); }
[data-theme="light"] .scr-ai .typing i { background: var(--blue-400); }
[data-theme="light"] .scr-ai .chatcard-sec + .chatcard-sec { border-top-color: var(--line-soft); }
[data-theme="light"] .scr-ai .chatcard-day { color: var(--slate); background: rgba(255, 255, 255, 0.85); }
[data-theme="light"] .scr-ai .chatcard-title,
[data-theme="light"] .scr-ai .chatcard-stay-name { color: var(--ink); }
[data-theme="light"] .scr-ai .chatcard-sub,
[data-theme="light"] .scr-ai .chatcard-label { color: var(--slate); }
[data-theme="light"] .scr-ai .chatcard-loc { color: var(--mist); }
[data-theme="light"] .scr-ai .chatcard-price { color: var(--blue-link); }
[data-theme="light"] .scr-ai .chatcard-act { color: var(--ink); }
[data-theme="light"] .scr-ai .chatcard .btn-primary { box-shadow: var(--lt-sheen), 0 10px 24px -10px rgba(1, 118, 210, 0.45); }
[data-theme="light"] .scr-ai .ai-suggest-kicker { color: var(--slate); }
[data-theme="light"] .scr-ai .ai-chip { color: var(--ink); }
[data-theme="light"] .scr-ai .ai-chip:hover { background: var(--blue-050); border-color: var(--blue-400); color: var(--ink); box-shadow: var(--lt-sheen), var(--lt-shadow-md); }
[data-theme="light"] .scr-ai .ai-chip .chip-ico { background: var(--lt-well-bg); box-shadow: none; }
[data-theme="light"] .scr-ai .ai-composer:focus-within { box-shadow: var(--lt-sheen), var(--lt-focus-ring), var(--lt-shadow-sm); }
[data-theme="light"] .scr-ai .composer-pete { border-color: var(--blue-100); }
[data-theme="light"] .scr-ai .ai-composer input { color: var(--ink); }
[data-theme="light"] .scr-ai .ai-composer input::placeholder { color: var(--mist); }
[data-theme="light"] .scr-ai .comp-btn { background: var(--lt-well-bg); border-color: transparent; color: var(--ink); box-shadow: var(--lt-well-shadow); }
[data-theme="light"] .scr-ai .comp-btn:hover { color: var(--blue-link); }
[data-theme="light"] .scr-ai #aiSend { background: var(--lt-primary-grad); border-color: transparent; color: #fff; box-shadow: var(--lt-sheen), 0 6px 16px -6px rgba(1, 118, 210, 0.4); }
[data-theme="light"] .scr-ai #aiSend:hover { filter: brightness(1.06); }
[data-theme="light"] .scr-ai .rec-timer { color: var(--ink); }
[data-theme="light"] .scr-ai .rec-wave i { background: var(--line); }
[data-theme="light"] .scr-ai .rec-wave i.hot { background: var(--blue-link); }
[data-theme="light"] .scr-ai .voice-play { background: var(--lt-primary-grad); color: #fff; }
[data-theme="light"] .scr-ai .voice-bars i { background: var(--line); }
[data-theme="light"] .scr-ai .voice-bars i.played { background: var(--blue-link); }
[data-theme="light"] .scr-ai .voice-dur { color: var(--mist); }
[data-theme="light"] .scr-chats .chats-item { color: var(--ink); border-bottom-color: var(--line-soft); }
[data-theme="light"] .scr-chats .chats-item:hover { color: var(--blue-link); }
[data-theme="light"] .scr-chats .chat-fab { background: var(--lt-primary-grad); color: #fff; box-shadow: var(--lt-sheen), 0 10px 24px -10px rgba(1, 118, 210, 0.45); }
[data-theme="light"] .scr-chats .chat-fab .btn-ico { color: #fff; }

/* ============================================================
   EXPLORE
   ============================================================ */
[data-theme="light"] .scr-explore { background: var(--lt-surface-grad); }
[data-theme="light"] .scr-explore .bar-title-lg { color: var(--ink); }
[data-theme="light"] .scr-explore .segment-btn {
  background: var(--lt-surface);
  border: var(--lt-card-border);
  color: var(--slate);
  box-shadow: var(--lt-sheen), var(--lt-shadow-sm);
}
[data-theme="light"] .scr-explore .segment-btn.active {
  background: var(--blue-050);
  border-color: var(--blue-400);
  color: var(--blue-600);
  box-shadow: 0 6px 16px -8px rgba(1, 118, 210, 0.28);
}
[data-theme="light"] .scr-explore .segment-btn.active .segment-icon { color: var(--blue-link); }
[data-theme="light"] .scr-explore .searchbar:focus-within { border-color: var(--blue-link); }
[data-theme="light"] .scr-explore .icon-btn.sm.search-filter { color: var(--slate); }
[data-theme="light"] .scr-explore .island-card { box-shadow: var(--lt-shadow-md); }
[data-theme="light"] .scr-explore .island-card::before { border: 1px solid rgba(255, 255, 255, 0.12); }
[data-theme="light"] .scr-explore .island-card .badge { background: var(--blue-050); color: var(--blue-link); border: 1px solid rgba(1, 118, 210, 0.5); }
[data-theme="light"] .scr-explore .island-card .badge .badge-ico { color: var(--blue-link); }
[data-theme="light"] .scr-explore .mland-cat-title { color: var(--ink); }

/* ============================================================
   ISLAND DETAIL
   ============================================================ */
[data-theme="light"] .scr-island { background: var(--lt-surface-grad); }
[data-theme="light"] .scr-island .island-name,
[data-theme="light"] .scr-island .sub-title { color: var(--ink); }
[data-theme="light"] .scr-island .island-region { color: var(--mist); }
[data-theme="light"] .scr-island .island-desc { color: var(--slate); }
[data-theme="light"] .scr-island .island-desc .link { color: var(--blue-link); }
[data-theme="light"] .scr-island .chip { background: var(--lt-well-bg); color: var(--slate); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: var(--lt-well-shadow); }
[data-theme="light"] .scr-island .act-ico { background: var(--blue-050); }
[data-theme="light"] .scr-island .act-card h4 { color: var(--ink); }
[data-theme="light"] .scr-island .act-card p { color: var(--mist); }
[data-theme="light"] .scr-island .mini-hotel h4 { color: var(--ink); }
[data-theme="light"] .scr-island .mini-hotel-loc { color: var(--mist); }
[data-theme="light"] .scr-island .mini-hotel-price { color: var(--blue-link); }
[data-theme="light"] .scr-island .mini-hotel-price small { color: var(--mist); }
[data-theme="light"] .scr-island .mini-hotel .badge.badge-blue { background: var(--lt-primary-grad); color: #fff; border: none; box-shadow: 0 6px 14px -6px rgba(1, 118, 210, 0.5); }
[data-theme="light"] .scr-island .sticky-cta { background: linear-gradient(to top, var(--lt-bg) 62%, rgba(246, 248, 252, 0)); }
[data-theme="light"] .scr-island .sticky-cta .btn-primary .btn-ico { color: #fff; }

/* ============================================================
   ITINERARY STOP DETAIL + SUB-PAGES
   ============================================================ */
[data-theme="light"] .scr-stop,
[data-theme="light"] .scr-stop-sub { background: var(--lt-surface-grad); }
[data-theme="light"] .scr-stop .bar-title,
[data-theme="light"] .scr-stop-sub .bar-title,
[data-theme="light"] .scr-stop .sub-title,
[data-theme="light"] .scr-stop-sub .sub-title,
[data-theme="light"] .scr-stop .stop-name,
[data-theme="light"] .scr-stop-sub .stop-name { color: var(--ink); }
[data-theme="light"] .scr-stop .stop-tagline,
[data-theme="light"] .scr-stop-sub .stop-tagline { color: var(--slate); }
[data-theme="light"] .scr-stop .stop-fact-label { color: var(--slate); }
[data-theme="light"] .scr-stop .stop-fact-value { color: var(--ink); }
[data-theme="light"] .scr-stop .stop-row-ico { background: var(--lt-surface); border-color: var(--blue-link); }
[data-theme="light"] .scr-stop .stop-row-title { color: var(--ink); }
[data-theme="light"] .scr-stop .stop-row-sub { color: var(--mist); }
[data-theme="light"] .scr-stop .stop-row-chev { color: var(--blue-link); }
[data-theme="light"] .scr-stop-sub .about-desc { color: var(--slate); }
[data-theme="light"] .scr-stop-sub .about-tag { color: var(--mist); }
[data-theme="light"] .scr-stop-sub .story-card-title { color: var(--ink); }
[data-theme="light"] .scr-stop-sub .story-card-desc { color: var(--slate); }
[data-theme="light"] .scr-stop-sub .stay-group-title { color: var(--ink); }
[data-theme="light"] .scr-stop-sub .stay-hotel-name,
[data-theme="light"] .scr-stop-sub .stay-hotel-rating { color: var(--ink); }
[data-theme="light"] .scr-stop-sub .stay-hotel-addr { color: var(--mist); }
[data-theme="light"] .scr-stop-sub .stay-hotel-price { color: var(--blue-link); }
[data-theme="light"] .scr-stop-sub .stay-hotel-price small { color: var(--mist); }
[data-theme="light"] .scr-stop-sub .stay-hotel-pick { background: var(--blue-link); color: #fff; }
[data-theme="light"] .scr-stop-sub .simple-card-title { color: var(--ink); }
[data-theme="light"] .scr-stop-sub .simple-card-desc { color: var(--slate); }
[data-theme="light"] .scr-stop-sub .miss-card { border: 1px solid rgba(255, 255, 255, 0.15); }

/* ============================================================
   ITINERARY (overview + timeline + map already covered above)
   ============================================================ */
[data-theme="light"] .scr-itinerary { background: var(--lt-surface-grad); }
[data-theme="light"] .scr-itinerary .bar-title,
[data-theme="light"] .scr-itinerary .section-title,
[data-theme="light"] .scr-itinerary .itn-summary-route { color: var(--ink); }
[data-theme="light"] .scr-itinerary .timeline::before { border-left-color: var(--blue-100); }
[data-theme="light"] .scr-itinerary .tl-progress { border-left-color: var(--blue-link); }
[data-theme="light"] .scr-itinerary .journey-progress {
  background: var(--lt-glass-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: var(--lt-glass-border);
  box-shadow: var(--lt-shadow-sm);
}
[data-theme="light"] .jp-cities { color: var(--ink); }
[data-theme="light"] .jp-stop { color: var(--mist); }
[data-theme="light"] .jp-dot { border: 1.5px solid var(--line); background: var(--lt-surface); }
[data-theme="light"] .jp-stop.done .jp-dot,
[data-theme="light"] .jp-stop.current .jp-dot { border-color: rgba(255, 255, 255, 0.7); background: var(--lt-primary-grad); }
[data-theme="light"] .jp-stop.done .jp-name,
[data-theme="light"] .jp-stop.current .jp-name { color: var(--blue-link); }
[data-theme="light"] .jp-seg { background: linear-gradient(90deg, rgba(1, 118, 210, 0.45), rgba(1, 118, 210, 0.14)); }
[data-theme="light"] .scr-itinerary .tl-node { color: var(--slate); }
[data-theme="light"] .scr-itinerary .tl-item.is-current .tl-node,
[data-theme="light"] .scr-itinerary .tl-item.is-completed .tl-node { color: #fff; background: var(--lt-primary-grad); border-color: transparent; box-shadow: 0 0 0 6px rgb(215 235 255), 0 14px 28px -18px rgb(202 229 255); }
[data-theme="light"] .scr-itinerary .tl-item.is-upcoming .tl-node { opacity: 0.75; }
[data-theme="light"] .scr-itinerary .tl-item.stay .tl-card { background: var(--blue-050); border-color: var(--blue-100); }
[data-theme="light"] .scr-itinerary .tl-label { color: var(--blue-link); }
[data-theme="light"] .scr-itinerary .tl-badge { background: var(--lt-primary-grad); color: #fff; }
[data-theme="light"] .scr-itinerary .tl-route,
[data-theme="light"] .scr-itinerary .tl-place { color: var(--ink); }
[data-theme="light"] .scr-itinerary .tl-route .tl-dots { border-top-color: var(--line); }
[data-theme="light"] .scr-itinerary .tl-route-icon { color: var(--blue-link); }
[data-theme="light"] .scr-itinerary .tl-note { color: var(--slate); }
[data-theme="light"] .scr-itinerary .tl-link { color: var(--blue-link); }
[data-theme="light"] .tl-transport strong { color: var(--ink); }
[data-theme="light"] .tl-transport span:not(.tl-mini-icon) { color: var(--slate); }
[data-theme="light"] .tl-meta-grid span { color: var(--blue-link); }
[data-theme="light"] .tl-meta-grid svg { color: var(--blue-link); }
[data-theme="light"] .tl-thumb, [data-theme="light"] .tl-stay-thumb { border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: var(--lt-shadow-sm); }
[data-theme="light"] .tl-stay-arrow { color: var(--blue-link); }
[data-theme="light"] .tl-experiences > span { color: var(--blue-link); }
[data-theme="light"] .tl-experiences em { color: var(--slate); background: var(--blue-050); border: 1px solid var(--blue-100); }
[data-theme="light"] .tl-experiences svg { color: var(--blue-link); }
[data-theme="light"] .tl-detail-row span:not(.tl-detail-icon) { color: var(--ink); }
[data-theme="light"] .tl-detail-row p { color: var(--slate); }
[data-theme="light"] .scr-itinerary .cta-banner { background: var(--lt-primary-grad); }
[data-theme="light"] .scr-itinerary .sticky-cta { background: linear-gradient(to top, var(--lt-bg) 62%, rgba(246, 248, 252, 0)); }
[data-theme="light"] .scr-itinerary .bsheet-title { color: var(--ink); }
[data-theme="light"] .scr-itinerary .bsheet-sub { color: var(--slate); }
[data-theme="light"] .scr-itinerary .adjuster-label,
[data-theme="light"] .scr-itinerary .adjuster-value { color: var(--ink); }
[data-theme="light"] .scr-itinerary .adjuster-btn { background: var(--lt-surface); border: var(--lt-card-border); color: var(--ink); box-shadow: var(--lt-shadow-xs); }
[data-theme="light"] .scr-itinerary .adjuster-btn:hover { color: var(--blue-link); box-shadow: var(--lt-shadow-sm); }
[data-theme="light"] .scr-itinerary .adjuster-btn.plus { background: var(--lt-primary-grad); border-color: transparent; color: #fff; box-shadow: var(--lt-sheen), var(--lt-shadow-sm); }
[data-theme="light"] .scr-itinerary .bsheet .btn-primary { box-shadow: var(--lt-sheen), 0 10px 24px -10px rgba(1, 118, 210, 0.45); }
[data-theme="light"] .scr-itinerary .bsheet .searchbar-ico { color: var(--blue-link); }
[data-theme="light"] .scr-itinerary .bsheet .searchbar input { color: var(--ink); }
[data-theme="light"] .scr-itinerary .island-item { border-bottom-color: var(--line-soft); }
[data-theme="light"] .scr-itinerary .island-item-name { color: var(--ink); }
[data-theme="light"] .scr-itinerary .island-item-checkbox { border-color: #d0d0d0; }
[data-theme="light"] .scr-itinerary .island-item.selected .island-item-checkbox { background: var(--blue-link); border-color: var(--blue-link); }
[data-theme="light"] .scr-itinerary .island-item.selected .island-item-checkbox::after { border-color: #fff; }

/* ============================================================
   HOTELS LISTING + HOTEL DETAIL
   ============================================================ */
[data-theme="light"] .scr-hotels { background: var(--lt-surface-grad); }
[data-theme="light"] .scr-hotels .bar-title { color: var(--ink); }
[data-theme="light"] .scr-hotels .searchbar:focus-within { border-color: var(--blue-link); }
[data-theme="light"] .scr-hotels .icon-btn.sm.search-filter { color: var(--slate); }
[data-theme="light"] .scr-hotels .chip-filter {
  background: var(--lt-surface);
  border: var(--lt-card-border);
  color: var(--slate);
  box-shadow: var(--lt-sheen), var(--lt-shadow-xs);
}
[data-theme="light"] .scr-hotels .chip-filter.active { background: var(--lt-primary-grad); border-color: transparent; color: #fff; }
[data-theme="light"] .scr-hotels .hotel-card:hover { box-shadow: var(--lt-sheen), var(--lt-shadow-md); }
[data-theme="light"] .scr-hotels .hotel-name { color: var(--ink); }
[data-theme="light"] .scr-hotels .hotel-loc { color: var(--mist); }
[data-theme="light"] .scr-hotels .hotel-perk.alt { color: var(--slate); }
[data-theme="light"] .scr-hotels .hotel-price { color: var(--blue-link); }
[data-theme="light"] .scr-hotels .hotel-fees { color: var(--mist); }

[data-theme="light"] .scr-hotel { background: var(--lt-surface-grad); }
[data-theme="light"] .scr-hotel .island-name,
[data-theme="light"] .scr-hotel .sub-title,
[data-theme="light"] .scr-hotel .rating { color: var(--ink); }
[data-theme="light"] .scr-hotel .island-region { color: var(--mist); }
[data-theme="light"] .scr-hotel .island-desc { color: var(--slate); }
[data-theme="light"] .scr-hotel .island-desc .link,
[data-theme="light"] .scr-hotel .section-row .link,
[data-theme="light"] .scr-hotel .map-mini-meta .link { color: var(--blue-link); }
[data-theme="light"] .scr-hotel .card-title { color: var(--ink); }
[data-theme="light"] .scr-hotel .kv { background: var(--lt-well-bg); box-shadow: var(--lt-well-shadow); }
[data-theme="light"] .scr-hotel .kv-k { color: var(--mist); }
[data-theme="light"] .scr-hotel .kv-v { color: var(--ink); }
[data-theme="light"] .scr-hotel .match-card h4 { color: var(--blue-600); }
[data-theme="light"] .scr-hotel .match-card p { color: var(--slate); }
[data-theme="light"] .scr-hotel .chip { background: var(--lt-well-bg); color: var(--slate); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: var(--lt-well-shadow); }
[data-theme="light"] .scr-hotel .map-mini { border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: var(--lt-shadow-sm); }
[data-theme="light"] .scr-hotel .qa-q { color: var(--ink); }
[data-theme="light"] .scr-hotel .qa-q .qa-ico svg { color: var(--blue-link); }
[data-theme="light"] .scr-hotel .qa-q .qa-caret { color: var(--mist); }
[data-theme="light"] .scr-hotel .qa-item.open .qa-caret { color: var(--blue-link); }
[data-theme="light"] .scr-hotel .qa-a-inner { color: var(--slate); }
[data-theme="light"] .scr-hotel .review-name { color: var(--ink); }
[data-theme="light"] .scr-hotel .review-text { color: var(--slate); }
[data-theme="light"] .scr-hotel .sticky-cta { background: linear-gradient(to top, var(--lt-bg) 62%, rgba(246, 248, 252, 0)); }
[data-theme="light"] .scr-hotel .price-fees { color: var(--mist); }

/* ============================================================
   FERRY
   ============================================================ */
[data-theme="light"] .scr-ferry { background: var(--lt-surface-grad); }
[data-theme="light"] .scr-ferry .bar-title { color: var(--ink); }
[data-theme="light"] .ferry-tabs { background: var(--lt-well-bg); box-shadow: var(--lt-well-shadow); border: none; }
[data-theme="light"] .ferry-tab { color: var(--slate); }
[data-theme="light"] .ferry-tab.active { background: var(--lt-primary-grad); color: #fff; box-shadow: var(--lt-shadow-sm); }
[data-theme="light"] .port-lbl { color: var(--mist); }
[data-theme="light"] .port-val { color: var(--ink); }
[data-theme="light"] .swap-btn:active { transform: scale(0.9); }
[data-theme="light"] .ferry-route-line { color: var(--blue-link); }
[data-theme="light"] .ferry-vessel { color: var(--ink); }
[data-theme="light"] .ferry-operator { color: var(--mist); }
[data-theme="light"] .ferry-head .badge.badge-blue { background: var(--lt-primary-grad); color: #fff; border: none; box-shadow: 0 6px 14px -6px rgba(1, 118, 210, 0.5); }
[data-theme="light"] .ferry-times,
[data-theme="light"] .ferry-foot { border-top-color: var(--line-soft); }
[data-theme="light"] .ft-place { color: var(--ink); }
[data-theme="light"] .ft-time { color: var(--slate); }
[data-theme="light"] .ft-date { color: var(--mist); }
[data-theme="light"] .fm-line { border-top-color: var(--line); }
[data-theme="light"] .fm-dur { color: var(--mist); }
[data-theme="light"] .ferry-price { color: var(--blue-link); }
[data-theme="light"] .ferry-price small { color: var(--mist); }
[data-theme="light"] .ferry-select { background: var(--lt-primary-grad); color: #fff; box-shadow: var(--lt-sheen), 0 10px 22px -12px rgba(1, 118, 210, 0.45); }

/* ============================================================
   BOOKINGS + BOOKING DETAIL
   ============================================================ */
[data-theme="light"] .scr-bookings { background: var(--lt-surface-grad); }
[data-theme="light"] .scr-bookings .bar-title { color: var(--ink); }
[data-theme="light"] .scr-bookings .seg-tab {
  background: var(--lt-surface);
  border: var(--lt-card-border);
  color: var(--slate);
  box-shadow: var(--lt-sheen), var(--lt-shadow-xs);
}
[data-theme="light"] .scr-bookings .seg-tab.active { background: var(--lt-primary-grad); border-color: transparent; color: #fff; }
[data-theme="light"] .scr-bookings .bk-title,
[data-theme="light"] .scr-bookings .bk-title-row .rating { color: var(--ink); }
[data-theme="light"] .scr-bookings .bk-chip { background: var(--lt-well-bg); color: var(--mist); border: none; }
[data-theme="light"] .scr-bookings .bk-divider { background: var(--line-soft); }
[data-theme="light"] .scr-bookings .bk-kv .k { color: var(--slate); }
[data-theme="light"] .scr-bookings .bk-kv .v { color: var(--ink); }
[data-theme="light"] .scr-bookings .bk-price { color: var(--blue-link); }
[data-theme="light"] .scr-bookings .bk-card .hotel-loc { color: var(--mist); }
[data-theme="light"] .scr-bookings .bk-card .hotel-perk.alt { color: var(--slate); }
[data-theme="light"] .scr-bookings .btn-cancel { background: var(--lt-surface); border: var(--lt-card-border); color: #e0382e; box-shadow: var(--lt-sheen), var(--lt-shadow-xs); }
[data-theme="light"] .scr-bookings .btn-cancel:hover { background: #fff5f5; box-shadow: var(--lt-sheen), var(--lt-shadow-sm); }
[data-theme="light"] .scr-bookings .bk-status.done { color: var(--green); background: #e9f7f0; }
[data-theme="light"] .scr-bookings .bk-status.cancelled { color: var(--danger); background: #fdf0ef; }
[data-theme="light"] .scr-bookings .bkf-vessel,
[data-theme="light"] .scr-bookings .bkf-place { color: var(--ink); }
[data-theme="light"] .scr-bookings .bkf-operator,
[data-theme="light"] .scr-bookings .bkf-time,
[data-theme="light"] .scr-bookings .bkf-date,
[data-theme="light"] .scr-bookings .bkf-dur,
[data-theme="light"] .scr-bookings .bkf-amenities { color: var(--mist); }
[data-theme="light"] .scr-bookings .bkf-dash { border-top-color: var(--line); }
[data-theme="light"] .scr-bookings .bkf-boat { color: var(--blue-link); }

[data-theme="light"] .scr-bkdetail { background: var(--lt-surface-grad); }
[data-theme="light"] .scr-bkdetail .bar-title { color: var(--ink); }
[data-theme="light"] .scr-bkdetail .bkd-summary-name { color: var(--ink); }
[data-theme="light"] .scr-bkdetail .bkd-summary-loc { color: var(--mist); }
[data-theme="light"] .scr-bkdetail .bkd-summary-price { color: var(--blue-link); }
[data-theme="light"] .scr-bkdetail .bkd-summary-price small { color: var(--mist); }
[data-theme="light"] .scr-bkdetail .bkd-ci svg { color: var(--blue-link); }
[data-theme="light"] .scr-bkdetail .bkd-ci-label { color: var(--mist); }
[data-theme="light"] .scr-bkdetail .bkd-ci-val { color: var(--ink); }
[data-theme="light"] .scr-bkdetail .bkd-msg-btn { background: var(--blue-050); border: 1px solid var(--blue-100); color: var(--blue-link); box-shadow: none; }
[data-theme="light"] .scr-bkdetail .bkd-msg-btn:hover { background: var(--blue-100); }
[data-theme="light"] .scr-bkdetail .bkd-msg-btn svg { color: var(--blue-link); }
[data-theme="light"] .scr-bkdetail .bkd-section-title { color: var(--ink); }
[data-theme="light"] .scr-bkdetail .bkd-loc-addr { color: #3e4143; }
[data-theme="light"] .scr-bkdetail .bkd-open-map { color: var(--blue-link); }
[data-theme="light"] .scr-bkdetail .bkd-group-title { color: var(--blue-link); }
[data-theme="light"] .scr-bkdetail .bkd-kv .bkd-k { color: var(--slate); }
[data-theme="light"] .scr-bkdetail .bkd-kv .bkd-k img { filter: none; }
[data-theme="light"] .scr-bkdetail .bkd-kv .bkd-v { color: var(--ink); }
[data-theme="light"] .scr-bkdetail .bkd-kv.total .bkd-k,
[data-theme="light"] .scr-bkdetail .bkd-kv.total .bkd-v { color: var(--blue-link); }
[data-theme="light"] .scr-bkdetail .bkd-divider { background: var(--line-soft); }
[data-theme="light"] .scr-bkdetail .sticky-cta { background: linear-gradient(to top, var(--lt-bg) 62%, rgba(246, 248, 252, 0)); }
[data-theme="light"] .scr-bkdetail .bkd-cancel-btn { background: var(--lt-surface); border: var(--lt-card-border); color: #e0382e; box-shadow: var(--lt-sheen), var(--lt-shadow-xs); }
[data-theme="light"] .scr-bkdetail .bkd-cancel-btn:hover { background: #fff5f5; box-shadow: var(--lt-sheen), var(--lt-shadow-sm); }

/* ============================================================
   PROFILE
   ============================================================ */
[data-theme="light"] .scr-profile { background: var(--lt-surface-grad); }
[data-theme="light"] .scr-profile .bar-title-lg { color: var(--ink); }
[data-theme="light"] .scr-profile .profile-avatar { border-color: var(--white); box-shadow: var(--lt-shadow-sm); }
[data-theme="light"] .scr-profile .profile-meta h3 { color: var(--ink); }
[data-theme="light"] .scr-profile .profile-meta p { color: var(--slate); }
[data-theme="light"] .scr-profile .profile-card .icon-btn { color: var(--slate); background: var(--lt-well-bg); border: none; box-shadow: var(--lt-well-shadow); }
[data-theme="light"] .scr-profile .group-label { color: var(--blue-link); }
[data-theme="light"] .scr-profile .menu-row { color: var(--ink); }
[data-theme="light"] .scr-profile .menu-row:hover { background: rgba(1, 118, 210, 0.035); }
[data-theme="light"] .scr-profile .menu-row + .menu-row { border-top-color: var(--line-soft); }
[data-theme="light"] .scr-profile .menu-ico { color: var(--slate); }
[data-theme="light"] .scr-profile .menu-val { color: var(--mist); }
[data-theme="light"] .scr-profile .menu-caret { color: var(--mist); }
[data-theme="light"] .scr-profile .menu-card.danger { background: rgba(224, 56, 46, 0.05); border-color: rgba(224, 56, 46, 0.16); box-shadow: none; }
[data-theme="light"] .scr-profile .menu-row.danger,
[data-theme="light"] .scr-profile .menu-row.danger .menu-ico { color: var(--danger); }
[data-theme="light"] .scr-profile .app-version { color: var(--mist); }

/* ============================================================
   REVIEW BOOKING + PAYMENT
   ============================================================ */
[data-theme="light"] .scr-review,
[data-theme="light"] .scr-payment { background: var(--lt-surface-grad); }
/* the checkout dock — same base dark `.sticky-cta` fade the island / itinerary
   / hotel / booking screens already re-theme, but here it was left dark, so a
   navy bar sat under the otherwise-light checkout. Fade to the light bg to
   match, and drop the "Total" label + amount off their dark-theme whites. */
[data-theme="light"] .scr-review .sticky-cta,
[data-theme="light"] .scr-payment .sticky-cta { background: linear-gradient(to top, var(--lt-bg) 62%, rgba(246, 248, 252, 0)); }
[data-theme="light"] .scr-review .price-fees,
[data-theme="light"] .scr-payment .price-fees { color: var(--slate); }
[data-theme="light"] .scr-review .bar-title,
[data-theme="light"] .scr-payment .bar-title,
[data-theme="light"] .scr-review .sub-title,
[data-theme="light"] .scr-payment .sub-title { color: var(--ink); }
[data-theme="light"] .scr-review .rv-amenities { color: var(--slate); }
[data-theme="light"] .scr-review .rv-ferry-mid .icon-btn.sm { background: var(--blue-050); border: 1px solid var(--blue-100); color: var(--blue-link); box-shadow: none; }
[data-theme="light"] .scr-review .rv-ferry-name p:first-child,
[data-theme="light"] .scr-review .rv-ferry-point .t { color: var(--ink); }
[data-theme="light"] .scr-review .rv-ferry-op,
[data-theme="light"] .scr-review .rv-ferry-point .time,
[data-theme="light"] .scr-review .rv-ferry-point .date { color: var(--mist); }
[data-theme="light"] .scr-review .rv-ferry-route,
[data-theme="light"] .scr-review .rv-ferry-bottom { border-top-color: var(--line-soft); }
[data-theme="light"] .scr-review .rv-ferry-line { background: var(--line); }
[data-theme="light"] .scr-review .rv-ferry-dur svg { color: var(--blue-link); }
[data-theme="light"] .scr-review .rv-ferry-dur span { color: var(--mist); }
[data-theme="light"] .scr-review .rv-ferry-price { color: var(--blue-link); }
[data-theme="light"] .scr-review .rv-ferry-price small { color: var(--mist); }
[data-theme="light"] .scr-review .rv-ferry-bottom .chev { color: var(--mist); }
[data-theme="light"] .scr-review .rv-hotel-name,
[data-theme="light"] .scr-review .rv-hotel-rating { color: var(--ink); }
[data-theme="light"] .scr-review .rv-hotel-loc { color: var(--mist); }
/* "✦ Exclusive Price" pill on the hotel photo — matches the light blue-glass
   badge recipe used for .badge-glass / .itn-hero-badge instead of dark+gold */
[data-theme="light"] .scr-review .rv-hotel-badge {
  background: var(--blue-050);
  color: var(--blue-link);
  border: 1px solid rgba(1, 118, 210, 0.5);
}
[data-theme="light"] .scr-review .rv-hotel-perk { color: #3f843c; }
[data-theme="light"] .scr-review .rv-hotel-price { color: var(--blue-link); }
[data-theme="light"] .scr-review .rv-hotel-price small { color: var(--mist); }
[data-theme="light"] .scr-review .rv-hotel-edit { color: var(--slate); }
[data-theme="light"] .scr-review .rv-stay-name,
[data-theme="light"] .scr-review .rv-stay-date { color: var(--ink); }
[data-theme="light"] .scr-review .rv-stay-label { color: var(--slate); }
[data-theme="light"] .scr-review .rv-stay-time { color: var(--mist); }
[data-theme="light"] .scr-review .rv-room-guests { color: var(--ink); }
[data-theme="light"] .scr-review .rv-room-guests svg:first-child { color: var(--blue-link); }
[data-theme="light"] .scr-review .rv-room-guests-edit { color: var(--mist); }
[data-theme="light"] .scr-review .field-label,
[data-theme="light"] .scr-payment .field-label { color: var(--slate); }
[data-theme="light"] .scr-review .rv-coupon { background: var(--blue-050); color: var(--ink); box-shadow: none; }
[data-theme="light"] .scr-review .rv-coupon .link { color: var(--blue-link); }
[data-theme="light"] .scr-review .rv-price-group { color: var(--slate); }
[data-theme="light"] .scr-review .rv-price-row { color: var(--ink); }
[data-theme="light"] .scr-review .rv-price-row + .rv-price-row { border-top-color: var(--line-soft); }
[data-theme="light"] .scr-review .rv-price-total { border-top-color: var(--line); color: var(--ink); }
[data-theme="light"] .scr-review .rv-price-total span:last-child { color: var(--blue-link); }
[data-theme="light"] .scr-payment .pm-row + .pm-row { border-top-color: var(--line-soft); }
[data-theme="light"] .scr-payment .pm-row-label { color: var(--ink); }
[data-theme="light"] .scr-payment .pm-radio { border-color: var(--blue-100); }
[data-theme="light"] .scr-payment .pm-radio:checked { border-color: var(--blue-link); }
[data-theme="light"] .scr-payment .pm-chev { color: var(--mist); }
[data-theme="light"] .scr-payment .pm-saved-sub { color: var(--mist); }
[data-theme="light"] .scr-payment .pm-save-row { color: var(--ink); }

/* ============================================================
   FAVOURITES
   ============================================================ */
[data-theme="light"] .scr-favs { background: var(--lt-surface-grad); }
[data-theme="light"] .scr-favs .bar-title { color: var(--ink); }
[data-theme="light"] .scr-favs .empty h3 { color: var(--ink); }
[data-theme="light"] .scr-favs .empty p { color: var(--slate); }