/* ============================================================================
   KYUSHU PLAN — Premium trip-planner design system
   Build-free static site. Mobile-app feel, Google/Gemini-grade polish.
   ========================================================================== */

/* ---------- Design tokens ------------------------------------------------- */
:root {
  /* Brand gradients (Gemini-like indigo -> cyan, sakura accent) */
  --brand-1: #6366f1;     /* indigo light */
  --brand-2: #4f46e5;     /* primary accent (single, refined indigo) */
  --brand-3: #4338ca;     /* indigo deep */
  --sakura: #e0496b;      /* muted rose — reserved for "live/now" only */
  --sakura-2: #ec7891;
  --gold: #c7951b;        /* muted ochre */

  --grad-brand: linear-gradient(145deg, #5b54e8, #4338ca);   /* single-hue, premium */
  --grad-sakura: linear-gradient(145deg, #e0496b, #c83a5c);  /* single-hue */
  --grad-gold: linear-gradient(145deg, #d4a017, #b8860b);
  --grad-aurora: radial-gradient(820px 420px at 50% -16%, rgba(79,70,229,.045), transparent 62%);
  --hero-bg: linear-gradient(155deg, #2b2e39 0%, #191b22 100%);  /* refined ink masthead */
  --hero-accent: #aeb6ee;

  /* Light theme surfaces — clean, neutral */
  --bg: #f6f7f9;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f4f6;
  --surface-3: #e9ebef;
  --line: #ebedf1;
  --line-strong: #dcdfe6;

  --text: #15171c;
  --text-2: #565d6b;
  --text-3: #8a909c;
  --text-on-brand: #ffffff;

  --shadow-1: 0 1px 2px rgba(18,20,28,.05);
  --shadow-2: 0 4px 14px rgba(18,20,28,.07);
  --shadow-3: 0 10px 30px rgba(18,20,28,.10);
  --shadow-pop: 0 18px 44px rgba(18,20,28,.18);

  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  --tab-h: 64px;
  --appbar-h: 60px;
  --maxw: 720px;

  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-in: cubic-bezier(.4,0,1,1);
  --spring: cubic-bezier(.34,1.56,.4,1);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Noto Sans TC", "Noto Sans JP", "PingFang TC", "Microsoft JhengHei", Roboto, sans-serif;
  --font-display: var(--font);   /* swap to a loaded display face (e.g. "Sora") later */

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* ---- Design-system ramps (snap new code to these) ---------------------- */
  --brand: var(--brand-1);       /* alias used by gradients (fixes the AI card) */
  /* type scale */
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px;
  --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-30: 30px; --fs-38: 38px;
  --lh-tight: 1.14; --lh-snug: 1.3; --lh-body: 1.6;
  --tracking-tight: -.022em; --tracking-wide: .06em;
  /* 8pt spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;
  /* semantic color (dark-mode safe) */
  --gold-ink: #a36c00; --success: #1a8f5a; --warning: #b8860b; --danger: var(--sakura);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-2) 35%, transparent);
  --press: scale(.96);
}

[data-theme="dark"] {
  --bg: #0b0d12;
  --bg-elev: #13151c;
  --surface: #161922;
  --surface-2: #1c2029;
  --surface-3: #262b36;
  --line: #242833;
  --line-strong: #353b48;

  --text: #ecedf2;
  --text-2: #a6acba;
  --text-3: #767c8a;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 6px 18px rgba(0,0,0,.4);
  --shadow-3: 0 16px 38px rgba(0,0,0,.5);
  --shadow-pop: 0 22px 56px rgba(0,0,0,.6);
  --grad-aurora: radial-gradient(820px 420px at 50% -16%, rgba(99,102,241,.09), transparent 62%);
  --hero-bg: linear-gradient(155deg, #1c1e26 0%, #0f1117 100%);
  --hero-accent: #a5b4fc;
}

/* ---------- Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; -webkit-tap-highlight-color: transparent; }
/* The `hidden` attribute must ALWAYS win — otherwise a class like .chat-wrap{display:flex}
   overrides it and hidden panels (e.g. 同行聊天) render on top of / below the visible one. */
[hidden] { display: none !important; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  font-size: 15px;
  letter-spacing: .01em;
  overscroll-behavior-y: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background .4s var(--ease), color .25s var(--ease);
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(99,102,241,.25); }

/* sprite icon default size — overridden by any `.context svg` rule (higher specificity) */
.ic { width: 1.1em; height: 1.1em; flex: none; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- App layout ---------------------------------------------------- */
#app {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100%;
  position: relative;
  background: var(--bg);
  box-shadow: 0 0 60px rgba(16,21,31,.06);
}

/* Aurora background layer */
.aurora {
  position: fixed; inset: 0; z-index: -1;
  background: var(--grad-aurora);
  pointer-events: none;
}

/* App bar */
.appbar {
  position: sticky; top: 0; z-index: 40;
  height: calc(var(--appbar-h) + var(--safe-t));
  padding-top: var(--safe-t);
  display: flex; align-items: center; gap: 12px;
  padding-left: 16px; padding-right: 12px;
  background: color-mix(in srgb, var(--bg-elev) 78%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.appbar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.appbar__logo {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--grad-brand);
  display: grid; place-items: center;
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.3);
  flex: none;
}
.appbar__logo svg { width: 20px; height: 20px; }
.appbar__title { font-weight: 600; font-size: 16px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar__sub { font-size: 11px; color: var(--text-3); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar__spacer { flex: 0 0 0; }
.iconbtn {
  width: 40px; height: 40px; border-radius: var(--r-pill);
  display: grid; place-items: center; color: var(--text-2);
  transition: background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.iconbtn:hover { background: var(--surface-2); color: var(--text); }
.iconbtn:active { transform: scale(.92); }
.iconbtn svg { width: 22px; height: 22px; }
.iconbtn--live { position: relative; }
.iconbtn--live::after {
  content: ""; position: absolute; top: 7px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--sakura);
  box-shadow: 0 0 0 3px var(--bg-elev); animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* Page container */
main {
  padding: 16px 16px calc(var(--tab-h) + var(--safe-b) + 24px);
  min-height: calc(100vh - var(--appbar-h));
}
.page { animation: fadeUp .42s var(--ease) both; }
.page[hidden] { display: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

/* ---------- Bottom tab bar ----------------------------------------------- */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 0; width: 100%; max-width: var(--maxw); z-index: 50;
  height: calc(var(--tab-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: flex; align-items: stretch;
  background: color-mix(in srgb, var(--bg-elev) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--text-3); position: relative; font-size: 10.5px; font-weight: 600;
  transition: color .2s var(--ease);
}
.tab svg { width: 24px; height: 24px; transition: transform .25s var(--ease); }
.tab__icon { display: grid; place-items: center; width: 56px; height: 30px; border-radius: var(--r-pill); transition: background .25s var(--ease); }
.tab.is-active { color: var(--brand-2); }
[data-theme="dark"] .tab.is-active { color: #8ab4ff; }
.tab.is-active .tab__icon { background: color-mix(in srgb, var(--brand-2) 13%, transparent); transform: translateY(-1px); }
.tab:active svg { transform: scale(.86); }
/* sliding active indicator */
.tabind { position: absolute; top: 0; left: 0; height: 3px; border-radius: 0 0 4px 4px; background: var(--brand-2); width: 24px;
  transform: translateX(-100px); transition: transform .42s var(--spring), width .42s var(--spring); will-change: transform, width; }
[data-theme="dark"] .tabind { background: #8ab4ff; }

/* ---------- Typography helpers ------------------------------------------- */
.h-display { font-size: 24px; font-weight: 700; letter-spacing: -.022em; line-height: 1.18; }
.h-section { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
.h-card { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.muted { color: var(--text-2); }
.muted-3 { color: var(--text-3); }
.tiny { font-size: 12px; }
.row { display: flex; align-items: center; gap: 8px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin: 22px 2px 12px; }

/* ---------- Cards --------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.card--pad { padding: 16px; }
.card--tap { transition: transform .18s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease); }
.card--tap:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.card--tap:active { transform: translateY(0) scale(.995); }

/* Hero card */
.hero {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  color: #fff; padding: 22px; box-shadow: var(--shadow-2);
  background: var(--hero-bg);
}
.hero::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(520px 240px at 100% -16%, rgba(255,255,255,.07), transparent 60%);
}
.hero > * { position: relative; }
.hero__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hero-accent); }
.hero__title { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 8px; line-height: 1.14; }
.hero__meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; font-size: 13px; font-weight: 500; }
.hero__meta span { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.72); }
.hero__meta svg { width: 15px; height: 15px; opacity: .8; }

/* Chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text-2);
  font-size: 12.5px; font-weight: 600; border: 1px solid var(--line);
  white-space: nowrap; transition: all .18s var(--ease);
}
.chip svg { width: 14px; height: 14px; }
.chip--brand { background: color-mix(in srgb, var(--brand-2) 12%, transparent); color: var(--brand-2); border-color: transparent; }
.chip--sakura { background: color-mix(in srgb, var(--sakura) 14%, transparent); color: var(--sakura); border-color: transparent; }
.chip--gold { background: color-mix(in srgb, var(--gold) 18%, transparent); color: #a36c00; border-color: transparent; }
[data-theme="dark"] .chip--gold { color: var(--gold); }
.chip--tap { cursor: pointer; }
.chip--tap:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.chip.is-on { background: var(--grad-brand); color:#fff; border-color: transparent; }

.chiprow { display: flex; gap: 8px; overflow-x: auto; padding: 2px; margin: 0 -2px; scrollbar-width: none; }
.chiprow::-webkit-scrollbar { display: none; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--r-pill); font-weight: 650; font-size: 14px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { box-shadow: var(--shadow-1); }
.btn:active { transform: scale(.96); }
.btn--brand { background: var(--brand-2); color:#fff; border-color: transparent; box-shadow: var(--shadow-1); }
.btn--brand:hover { background: var(--brand-3); box-shadow: var(--shadow-2); }
.btn--sakura { background: var(--sakura); color:#fff; border-color: transparent; box-shadow: var(--shadow-1); }
.btn--ghost { background: transparent; }
.btn--block { width: 100%; }
.btn--sm { padding: 8px 13px; font-size: 13px; }

/* Map link button */
.gmap-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 650; color: var(--text);
  transition: all .18s var(--ease);
}
.gmap-btn:hover { border-color: var(--brand-2); color: var(--brand-2); transform: translateY(-1px); }
.gmap-btn svg { width: 15px; height: 15px; }

/* ---------- Today / Now banner ------------------------------------------- */
.nowcard { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.nowcard__bg { display: none; }
.nowcard__body { position: relative; padding: 18px; color: var(--text); }
.nowcard__label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sakura); display:flex; align-items:center; gap:8px; }
.nowcard__title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin-top: 8px; line-height: 1.2; }
.nowcard__time { font-size: 13px; font-weight: 600; color: var(--text-2); margin-top: 5px; display:flex; align-items:center; gap:6px; }
.nowcard__next { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.nowcard__next b { font-weight: 700; color: var(--text); }

/* Live dot */
.livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--sakura); box-shadow: 0 0 0 0 rgba(224,73,107,.6); animation: ring 1.8s infinite; display:inline-block; }
@keyframes ring { 0%{box-shadow:0 0 0 0 rgba(224,73,107,.5)} 70%{box-shadow:0 0 0 7px rgba(224,73,107,0)} 100%{box-shadow:0 0 0 0 rgba(224,73,107,0)} }

/* ---------- Timeline (itinerary) ----------------------------------------- */
.daypick { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.daypick::-webkit-scrollbar { display: none; }
.daypill {
  flex: none; min-width: 58px; padding: 9px 12px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); text-align: center;
  transition: all .18s var(--ease);
}
.daypill__dow { font-size: 11px; font-weight: 700; color: var(--text-3); letter-spacing: .05em; }
.daypill__num { font-size: 18px; font-weight: 750; margin-top: 2px; }
.daypill__city { font-size: 10px; color: var(--text-3); margin-top: 1px; white-space: nowrap; }
.daypill.is-active { background: var(--grad-brand); border-color: transparent; color: #fff; box-shadow: var(--shadow-2); }
.daypill.is-active .daypill__dow, .daypill.is-active .daypill__city { color: rgba(255,255,255,.9); }
.daypill.is-today::after { content:"今"; position:absolute; }

.timeline { position: relative; margin-top: 8px; padding-left: 4px; }
.tl-item { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding-bottom: 6px; }
.tl-time { text-align: right; padding-top: 14px; }
.tl-time b { font-size: 14px; font-weight: 750; display: block; }
.tl-time span { font-size: 11px; color: var(--text-3); }
.tl-rail { position: absolute; left: 60px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.tl-body { position: relative; padding-bottom: 14px; }
.tl-dot {
  position: absolute; left: -22px; top: 18px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--brand-2); z-index: 1;
  box-shadow: 0 0 0 4px var(--bg);
}
.tl-item--move .tl-dot { border-color: var(--sakura); }
.tl-item--now .tl-dot { background: var(--sakura); border-color: var(--sakura); animation: pulse 1.6s infinite; }
.tl-item--done .tl-dot { background: var(--brand-2); }
.tl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 14px; box-shadow: var(--shadow-1); transition: all .18s var(--ease); }
.tl-card.is-tap { cursor: pointer; }
.tl-card.is-tap:hover { transform: translateX(2px); box-shadow: var(--shadow-2); }
.tl-item--now .tl-card { border-color: var(--sakura); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sakura) 30%, transparent); }
.tl-card__title { font-weight: 650; font-size: 15px; }
.tl-card__desc { font-size: 13px; color: var(--text-2); margin-top: 3px; }
.tl-card__foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.tl-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill); }

/* Train route block */
.route {
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sakura) 6%, var(--surface)), var(--surface));
  padding: 12px 14px;
}
.route__head { display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; color: var(--sakura); }
.route__legs { margin-top: 8px; }
.leg { display: grid; grid-template-columns: 64px 1fr; gap: 10px; font-size: 13px; position: relative; padding: 6px 0; }
.leg__time { font-weight: 750; font-variant-numeric: tabular-nums; }
.leg__line { font-weight: 650; }
.leg__line small { color: var(--text-3); font-weight: 600; }
.leg__sub { color: var(--text-3); font-size: 12px; }
.leg--transfer { color: var(--text-3); font-style: italic; font-size: 12px; }

/* ---------- Weather ------------------------------------------------------- */
.wx-hero { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-3); color: #fff; position: relative; }
.wx-hero__bg { position:absolute; inset:0; transition: background .6s var(--ease); }
.wx-hero__body { position: relative; padding: 20px; }
.wx-temp { font-size: 56px; font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.wx-now { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wx-emoji { font-size: 52px; line-height: 1; }
.wx-meta { display: flex; gap: 16px; margin-top: 14px; font-size: 13px; font-weight: 600; opacity: .95; flex-wrap: wrap; }
.wx-hours { display: flex; gap: 6px; overflow-x: auto; padding: 12px 2px 2px; scrollbar-width: none; }
.wx-hours::-webkit-scrollbar { display: none; }
.wx-hour { flex: none; text-align: center; min-width: 52px; padding: 10px 6px; border-radius: var(--r-md); background: rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.wx-hour b { font-size: 13px; }
.wx-hour .e { font-size: 20px; margin: 4px 0; }
.wx-hour small { font-size: 11px; opacity: .85; }
.wx-day { display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-bottom: 1px solid var(--line); }
.wx-day:last-child { border-bottom: 0; }
.wx-day.is-visit { background: color-mix(in srgb, var(--brand-2) 7%, transparent); border-radius: 10px; padding: 11px 10px; border-bottom-color: transparent; }
.wx-day.is-visit .wx-day__name { color: var(--brand-2); font-weight: 700; }
.wx-day__name { width: 64px; font-weight: 650; font-size: 13px; }
.wx-day__e { font-size: 22px; width: 30px; text-align:center; }
.wx-day__bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-3); position: relative; overflow: hidden; }
.wx-day__fill { position:absolute; height: 100%; border-radius:999px; background: linear-gradient(90deg, #38bdf8, #fbbf24, #fb7185); }
.wx-day__t { width: 86px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; font-weight:600; }
.wx-rain { font-size: 11px; color: var(--brand-3); font-weight: 700; }

/* ---------- Souvenirs ----------------------------------------------------- */
.gift {
  display: grid; grid-template-columns: 46px 1fr; gap: 12px; padding: 13px;
  border-bottom: 1px solid var(--line);
}
.gift:last-child { border-bottom: 0; }
.gift__ico { width: 46px; height: 46px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 24px; background: var(--surface-2); }
.gift__name { font-weight: 650; font-size: 15px; }
.gift__jp { font-size: 12px; color: var(--text-3); }
.gift__desc { font-size: 13px; color: var(--text-2); margin-top: 3px; }
.gift__where { font-size: 12px; color: var(--brand-2); font-weight: 600; margin-top: 5px; display:flex; align-items:center; gap:5px; }
[data-theme="dark"] .gift__where { color: #8ab4ff; }

/* ---------- Map page ------------------------------------------------------ */
#leafmap { height: 56vh; min-height: 360px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-2); z-index: 0; }
#dayMiniMap { height: 190px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-1); z-index: 0; }
.leaflet-container { font: inherit; background: var(--surface-2); }
.leaflet-popup-content-wrapper { border-radius: var(--r-md); box-shadow: var(--shadow-3); }
.leaflet-popup-content { margin: 12px 14px; font-family: var(--font); }
.map-legend { display:flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.map-legend span { display:inline-flex; align-items:center; gap:6px; }
.legend-dot { width: 11px; height: 11px; border-radius: 50%; }

/* ---------- Gemini chat / agent ------------------------------------------ */
.chat-wrap { display: flex; flex-direction: column; height: calc(100vh - var(--appbar-h) - var(--tab-h) - var(--safe-b) - 8px); }
.chat-scroll { flex: 1; overflow-y: auto; padding: 6px 2px 12px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 86%; padding: 12px 14px; border-radius: 18px; font-size: 14px; line-height: 1.5; animation: fadeUp .3s var(--ease) both; white-space: pre-wrap; word-wrap: break-word; }
.msg--user { align-self: flex-end; background: var(--grad-brand); color: #fff; border-bottom-right-radius: 6px; }
.msg--ai { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 6px; box-shadow: var(--shadow-1); }
.msg--ai strong { font-weight: 700; }
.msg--ai code { background: var(--surface-2); padding: 1px 5px; border-radius: 5px; font-size: 13px; }
.msg-action {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 650; color: var(--brand-2);
  background: color-mix(in srgb, var(--brand-2) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--brand-2) 35%, transparent);
  padding: 8px 12px; border-radius: var(--r-md); animation: fadeUp .3s var(--ease) both;
}
.msg-action svg { width: 15px; height: 15px; }
[data-theme="dark"] .msg-action { color: #8ab4ff; }
.typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); animation: bounce 1.2s infinite; }
.typing span:nth-child(2){ animation-delay: .15s } .typing span:nth-child(3){ animation-delay: .3s }
@keyframes bounce { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-5px);opacity:1} }

.suggest { display: flex; gap: 8px; overflow-x: auto; padding: 8px 2px; scrollbar-width: none; }
.suggest::-webkit-scrollbar { display: none; }
.suggest button {
  flex: none; padding: 9px 13px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--line); color: var(--text-2);
  transition: all .18s var(--ease);
}
.suggest button:hover { border-color: var(--brand-2); color: var(--brand-2); transform: translateY(-1px); }

.composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 2px calc(8px + var(--safe-b)); }
.composer__field { flex: 1; display: flex; align-items: flex-end; gap: 8px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: 8px 8px 8px 14px; box-shadow: var(--shadow-1); transition: border-color .2s; }
.composer__field:focus-within { border-color: var(--brand-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-2) 18%, transparent); }
.composer textarea { flex: 1; border: 0; background: none; resize: none; max-height: 120px; font-size: 14.5px; line-height: 1.4; padding: 4px 0; }
.composer textarea:focus { outline: none; }
.send-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--grad-brand); color: #fff; display: grid; place-items: center; flex: none; box-shadow: var(--shadow-2); transition: transform .15s var(--ease); }
.send-btn:active { transform: scale(.9); }
.send-btn:disabled { opacity: .4; }
.mic-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); display: grid; place-items: center; flex: none; transition: all .18s var(--ease); }
.mic-btn.is-rec { background: var(--grad-sakura); color: #fff; animation: pulse 1.2s infinite; }
.send-btn svg, .mic-btn svg { width: 20px; height: 20px; }

.agent-toggle { display:flex; align-items:center; gap: 8px; }
.switch { width: 42px; height: 24px; border-radius: 999px; background: var(--line-strong); position: relative; transition: background .25s var(--ease); flex:none; }
.switch::after { content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow: var(--shadow-1); transition: transform .25s var(--ease); }
.switch.is-on { background: var(--grad-brand); }
.switch.is-on::after { transform: translateX(18px); }

/* ---------- Sheets / modals ---------------------------------------------- */
.scrim { position: fixed; inset: 0; background: rgba(8,10,18,.55); backdrop-filter: blur(3px); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.scrim.is-open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 100%);
  width: 100%; max-width: var(--maxw); max-height: 88vh; z-index: 61;
  background: var(--bg-elev); border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-pop); transition: transform .38s var(--ease);
  display: flex; flex-direction: column; padding-bottom: var(--safe-b);
}
.sheet.is-open { transform: translate(-50%, 0); }
.sheet__grab { width: 40px; height: 4px; border-radius: 999px; background: var(--line-strong); margin: 10px auto 4px; flex: none; }
.sheet__head { display:flex; align-items:center; justify-content:space-between; padding: 8px 18px 12px; border-bottom: 1px solid var(--line); }
.sheet__title { font-size: 18px; font-weight: 700; }
.sheet__body { overflow-y: auto; padding: 16px 18px 24px; }

/* ---------- Misc ---------------------------------------------------------- */
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-sm); }
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.divider { height: 1px; background: var(--line); margin: 16px 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + 20px + var(--safe-b)); transform: translateX(-50%) translateY(20px); background: var(--text); color: var(--bg); padding: 11px 18px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; box-shadow: var(--shadow-3); z-index: 80; opacity: 0; pointer-events: none; transition: all .3s var(--ease); white-space: nowrap; }
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.empty { text-align: center; padding: 40px 20px; color: var(--text-3); }
.empty__emoji { font-size: 44px; margin-bottom: 12px; }

.badge-rain { background: color-mix(in srgb, var(--brand-3) 16%, transparent); color: var(--brand-3); }
.badge-move { background: color-mix(in srgb, var(--sakura) 16%, transparent); color: var(--sakura); }
.badge-eat { background: color-mix(in srgb, var(--gold) 18%, transparent); color: #a36c00; }
[data-theme="dark"] .badge-eat { color: var(--gold); }
.badge-see { background: color-mix(in srgb, var(--brand-2) 14%, transparent); color: var(--brand-2); }

.flag-pill { display:inline-flex; align-items:center; gap:6px; font-weight:700; }

/* Pull-to-detail enter animation for list children */
.stagger > * { animation: fadeUp .4s var(--ease) both; }
.stagger > *:nth-child(2){animation-delay:.04s} .stagger > *:nth-child(3){animation-delay:.08s}
.stagger > *:nth-child(4){animation-delay:.12s} .stagger > *:nth-child(5){animation-delay:.16s}
.stagger > *:nth-child(6){animation-delay:.2s} .stagger > *:nth-child(7){animation-delay:.24s}

/* ========================================================================
   MOTION SYSTEM — splash, ripple, transitions, micro-interactions
   ====================================================================== */
#splash {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--grad-brand);
  transition: opacity .55s var(--ease), visibility .55s var(--ease);
}
#splash.hide { opacity: 0; visibility: hidden; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #fff; }
.splash-logo {
  width: 84px; height: 84px; border-radius: 24px; background: rgba(255,255,255,.16);
  display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 18px 50px rgba(0,0,0,.25);
  animation: splashPop .7s var(--ease) both;
}
.splash-logo svg { width: 48px; height: 48px; }
.splash-title { font-size: 19px; font-weight: 800; letter-spacing: .04em; animation: fadeUp .6s .15s var(--ease) both; }
.splash-sub { font-size: 12.5px; font-weight: 600; opacity: .85; animation: fadeUp .6s .25s var(--ease) both; margin-top: -8px; }
.splash-bar { width: 120px; height: 3px; border-radius: 999px; background: rgba(255,255,255,.3); overflow: hidden; margin-top: 6px; }
.splash-bar::after { content:""; display: block; height: 100%; width: 40%; border-radius: 999px; background: #fff; animation: splashBar 1s var(--ease) infinite; }
@keyframes splashPop { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes splashBar { 0% { transform: translateX(-120%); } 100% { transform: translateX(360%); } }

/* Ripple */
.rippling { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: currentColor; opacity: .16; pointer-events: none; animation: rippleOut .6s var(--ease) forwards; }
@keyframes rippleOut { to { transform: scale(2.4); opacity: 0; } }

/* Tab bounce + active indicator dot */
@keyframes tabPop { 0% { transform: scale(.78); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } }
.tab.is-active svg { animation: tabPop .42s var(--ease); }

/* Page enter handled via WAAPI in JS; keep will-change hint */
.page { will-change: opacity, transform; }

/* Count-up / shimmer-in for numbers */
@keyframes popIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* ========================================================================
   COMMAND CENTER (Today) — progress ring + next-step
   ====================================================================== */
.cmd { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; }
.ring { position: relative; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; }
@property --pct { syntax: '<number>'; inherits: false; initial-value: 0; }
.ring__fill { position: absolute; inset: 0; border-radius: 50%; --pct: 0;
  background: conic-gradient(var(--brand-2) calc(var(--pct) * 1deg), var(--surface-3) 0);
  transition: --pct .95s var(--ease); }
.ring__hole { position: absolute; inset: 8px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; }
.ring__pct { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.ring__lbl { font-size: 9.5px; font-weight: 700; color: var(--text-3); letter-spacing: .08em; }
.cmd__next-lbl { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.cmd__next-title { font-size: 18px; font-weight: 750; margin-top: 3px; line-height: 1.2; }
.cmd__count { font-size: 13px; font-weight: 650; color: var(--sakura); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.dayprog { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-top: 14px; }
.dayprog__fill { height: 100%; border-radius: 999px; background: var(--grad-brand); transition: width .8s var(--ease); }

/* ========================================================================
   TOOLKIT (錦囊) — tool grid + sub-views
   ====================================================================== */
.tk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tk-tile {
  display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  text-align: left; transition: transform .18s var(--ease), box-shadow .25s var(--ease);
}
.tk-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.tk-tile:active { transform: scale(.97); }
.tk-tile__ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; }
.tk-tile__t { font-weight: 700; font-size: 14.5px; }
.tk-tile__d { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
.tk-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 13px; color: var(--brand-2); padding: 6px 0; }
.tk-back svg { width: 18px; height: 18px; transform: rotate(180deg); }

/* Phrasebook */
.ph-cat { font-size: 13px; font-weight: 800; letter-spacing: .04em; margin: 18px 2px 8px; display: flex; align-items: center; gap: 8px; }
.ph-item { padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); margin-bottom: 8px; cursor: pointer; transition: all .18s var(--ease); }
.ph-item:hover { border-color: var(--brand-2); }
.ph-zh { font-size: 13px; color: var(--text-3); }
.ph-jp { font-size: 16px; font-weight: 650; margin-top: 2px; }
.ph-ro { font-size: 12px; color: var(--brand-2); margin-top: 2px; }
[data-theme="dark"] .ph-ro { color: #8ab4ff; }
.ph-speak { float: right; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; }
.ph-speak svg { width: 16px; height: 16px; }

/* Currency converter */
.cc-row { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); margin-bottom: 10px; }
.cc-flag { font-size: 26px; }
.cc-cur { font-size: 12px; font-weight: 700; color: var(--text-3); }
.cc-input { flex: 1; border: 0; background: none; font-size: 24px; font-weight: 700; text-align: right; width: 100%; min-width: 0; }
.cc-input:focus { outline: none; }
.cc-rate { font-size: 12px; color: var(--text-3); text-align: center; }
.cc-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Checklist */
.ck-item { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.ck-box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line-strong); flex: none; display: grid; place-items: center; transition: all .2s var(--ease); }
.ck-box svg { width: 14px; height: 14px; color: #fff; opacity: 0; transform: scale(.5); transition: all .2s var(--ease); }
.ck-item.done .ck-box { background: var(--brand-2); border-color: var(--brand-2); }
.ck-item.done .ck-box svg { opacity: 1; transform: none; }
.ck-item.done .ck-label { color: var(--text-3); text-decoration: line-through; }
.ck-label { font-size: 14.5px; }

/* Emergency card */
.emg { border-radius: var(--r-lg); padding: 16px; color: #fff; background: var(--grad-sakura); box-shadow: var(--shadow-2); margin-bottom: 14px; }
.emg-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.emg-row:last-child { border-bottom: 0; }
.emg-call { background: rgba(255,255,255,.22); padding: 7px 14px; border-radius: var(--r-pill); font-weight: 800; font-size: 15px; }
.info-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; margin-bottom: 10px; }

/* Bookings form */
.bk-field { margin-bottom: 12px; }
.bk-field label { font-size: 12px; font-weight: 600; color: var(--text-3); display: block; margin-bottom: 4px; }
.bk-field input, .bk-field textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 14px; }

/* Global search results */
.sr-item { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .15s var(--ease); border-radius: 10px; }
.sr-item:hover { background: var(--surface-2); }
.sr-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; font-size: 19px; flex: none; }
.sr-label { font-weight: 650; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-sub { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Favorite star */
.fav-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-3); transition: all .2s var(--ease); flex: none; }
.fav-btn svg { width: 19px; height: 19px; }
.fav-btn.is-fav { color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); }
.fav-btn.is-fav svg { fill: var(--gold); animation: tabPop .4s var(--ease); }

/* ---------- Today weather + outfit card ---------------------------------- */
.wx-today { position: relative; border-radius: var(--r-xl); overflow: hidden; color: #fff; box-shadow: var(--shadow-3); }
.wx-today__bg { position: absolute; inset: 0; transition: background .6s var(--ease); }
.wx-today__bg::after { content:""; position:absolute; inset:0; background: radial-gradient(420px 200px at 92% -10%, rgba(255,255,255,.28), transparent 60%); }
.wx-today__body { position: relative; padding: 18px; }
.wx-today__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .92; display:flex; align-items:center; gap:8px; }
.wx-today__where { font-size: 21px; font-weight: 800; margin-top: 5px; display: flex; align-items: center; gap: 8px; }
.wx-today__now { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.wx-today__temp { font-size: 46px; font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.wx-today__emoji { font-size: 42px; line-height: 1; }
.wx-today__meta { font-size: 12.5px; font-weight: 600; opacity: .95; margin-top: 3px; }
.wx-today__wear { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.22); }
.wx-today__wear-h { font-size: 12px; font-weight: 700; letter-spacing: .06em; opacity: .92; margin-bottom: 9px; display: flex; align-items: center; gap: 7px; }
.wear-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wear-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 12.5px; font-weight: 600; }
.wx-today__tip { font-size: 12px; opacity: .9; margin-top: 10px; line-height: 1.5; }

/* ========================================================================
   SCREENS: Home (login) + Plans (list)
   ====================================================================== */
.screen { animation: fadeUp .35s var(--ease) both; }
.home { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 32px 22px calc(40px + var(--safe-b)); }
.home__logo { width: 76px; height: 76px; border-radius: 22px; background: var(--grad-brand); display: grid; place-items: center; box-shadow: var(--shadow-3); margin-bottom: 20px; }
.home__logo svg { width: 42px; height: 42px; }
.home__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--brand-2); }
.home__title { font-size: 34px; font-weight: 800; letter-spacing: -.03em; margin-top: 6px; }
.home__sub { font-size: 15px; color: var(--text-2); margin-top: 10px; line-height: 1.6; }
.home__features { margin: 24px 0; display: flex; flex-direction: column; gap: 14px; }
.home-feat { display: flex; gap: 12px; align-items: flex-start; }
.home-feat__ic { width: 38px; height: 38px; border-radius: 11px; background: var(--surface-2); display: grid; place-items: center; font-size: 19px; flex: none; }
.home-feat__t { font-weight: 650; font-size: 14.5px; }
.home-feat__d { font-size: 12.5px; color: var(--text-3); line-height: 1.45; }

.plans-main { max-width: var(--maxw); margin: 0 auto; padding: 16px 16px calc(40px + var(--safe-b)); }
.plan-card { display: flex; align-items: center; gap: 14px; padding: 15px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); margin-bottom: 12px; transition: transform .18s var(--ease), box-shadow .25s var(--ease); cursor: pointer; }
.plan-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.plan-card:active { transform: scale(.99); }
.plan-card__ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; flex: none; background: var(--surface-2); }
.plan-card__body { flex: 1; min-width: 0; }
.plan-card__title { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-card__meta { font-size: 12px; color: var(--text-3); margin-top: 3px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.plan-card__actions { display: flex; gap: 2px; flex: none; }
.plan-card--tpl { border-style: dashed; border-color: var(--line-strong); background: transparent; box-shadow: none; }
.plan-card--ai { border: none; color: #fff; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--brand) 60%, transparent); }
.plan-card--ai .plan-card__ico { background: rgba(255,255,255,.18); }
.plan-card--ai .plan-card__title { color: #fff; }
.plan-card--ai .plan-card__meta { color: rgba(255,255,255,.85); }
.plan-card--ai .iconbtn { color: #fff; }
.plan-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--brand-2) 14%, transparent); color: var(--brand-2); }
.plan-badge--tpl { background: color-mix(in srgb, var(--gold) 18%, transparent); color: #a36c00; }
[data-theme="dark"] .plan-badge--tpl { color: var(--gold); }

/* AI create-trip box (Plans page) */
.ai-create { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 14px; margin-bottom: 18px; }
.ai-create__head { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 10px; }
.ai-create__spark { width: 28px; height: 28px; border-radius: 8px; background: var(--grad-brand); display: grid; place-items: center; color: #fff; }
.ai-create__spark svg { width: 16px; height: 16px; }
.ai-create__field { display: flex; align-items: flex-end; gap: 8px; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 8px 8px 8px 12px; transition: border-color .2s, box-shadow .2s; }
.ai-create__field:focus-within { border-color: var(--brand-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-2) 16%, transparent); }
.ai-create__field textarea { flex: 1; border: 0; background: none; resize: none; max-height: 100px; font-size: 14.5px; line-height: 1.4; padding: 4px 0; }
.ai-create__field textarea:focus { outline: none; }
.ai-create__chips { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; scrollbar-width: none; }
.ai-create__chips::-webkit-scrollbar { display: none; }
.ai-create__chips button { flex: none; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); transition: all .18s var(--ease); }
.ai-create__chips button:hover { border-color: var(--brand-2); color: var(--brand-2); }

/* Polished login */
#screen-home { background: radial-gradient(900px 520px at 50% -12%, color-mix(in srgb, var(--brand-2) 13%, transparent), transparent 62%); }
.home__logo { width: 84px; height: 84px; border-radius: 24px; }
.home__logo svg { width: 46px; height: 46px; }
.btn-google { background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 600; box-shadow: var(--shadow-1); }
.btn-google:hover { box-shadow: var(--shadow-2); background: #fff; }
[data-theme="dark"] .btn-google { background: #fff; color: #1f1f1f; border-color: #fff; }
.btn-google .gicon { width: 18px; height: 18px; flex: none; }

/* Install (Add to Home Screen) guide */
.ig-step { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; }
.ig-num { width: 24px; height: 24px; border-radius: 50%; background: var(--brand-2); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; flex: none; margin-top: 2px; }
.ig-mock { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; }
.ig-mock__ic { color: var(--brand-2); display: grid; place-items: center; }
.ig-mock__ic svg { width: 18px; height: 18px; }
.ig-cap { font-size: 13px; color: var(--text-2); margin-top: 6px; line-height: 1.5; }

@media (min-width: 600px) {
  body { font-size: 15.5px; }
  #leafmap { height: 60vh; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .01ms !important; }
}

/* ---- Export sheet rows ---- */
.exp-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; margin-top: 10px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); transition: background .15s var(--ease), transform .12s var(--ease); }
.exp-row:hover { background: var(--surface-2); }
.exp-row:active { transform: scale(.99); }
.exp-row__ic { font-size: 22px; flex: none; line-height: 1; }
.exp-row__tx { min-width: 0; flex: 1; }
.exp-row__tx b { display: block; font-size: 14.5px; }
.exp-row__go { color: var(--text-3); display: grid; place-items: center; flex: none; }
.exp-row__go svg { width: 18px; height: 18px; }

/* ---- Printable PDF plan (#printRoot only renders in print) ---- */
#printRoot { display: none; }
@media print {
  body.printing > *:not(#printRoot) { display: none !important; }
  body.printing #printRoot { display: block !important; }
  body.printing { background: #fff !important; }
  @page { margin: 14mm 12mm; }
}
.pdoc { font-family: 'Noto Sans TC', 'Inter', system-ui, sans-serif; color: #111; font-size: 11.5px; line-height: 1.5; -webkit-print-color-adjust: exact; print-color-adjust: exact; background: #fff; }
.pd-cover { border-bottom: 3px solid #2563eb; padding-bottom: 10px; margin-bottom: 14px; }
.pd-brand { font-weight: 800; letter-spacing: .16em; color: #2563eb; font-size: 11px; }
.pd-title { font-size: 24px; font-weight: 800; margin: 5px 0 3px; color: #0f172a; }
.pd-meta { color: #555; font-size: 12px; }
.pd-block { margin: 0 0 14px; }
.pd-block > h2 { font-size: 14px; font-weight: 800; color: #1d4ed8; border-left: 4px solid #2563eb; padding-left: 8px; margin: 16px 0 8px; }
.pd-day { break-inside: avoid; page-break-inside: avoid; margin-bottom: 10px; }
.pd-dh { display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid #d4d4d8; padding-bottom: 3px; margin-bottom: 4px; }
.pd-dn { font-weight: 800; color: #2563eb; }
.pd-dd { color: #444; font-size: 11px; }
.pd-dt { font-weight: 700; margin-left: auto; color: #0f172a; }
.pd-sum { color: #555; font-size: 10.5px; margin: 0 0 5px; }
.pd-tab { width: 100%; border-collapse: collapse; }
.pd-tab td { padding: 3px 6px; vertical-align: top; border-bottom: 1px solid #eee; }
.pd-t { white-space: nowrap; font-weight: 700; color: #2563eb; width: 42px; }
.pd-ty { white-space: nowrap; color: #777; width: 40px; font-size: 10px; }
.pd-c { white-space: nowrap; text-align: right; color: #333; width: 70px; }
.pd-d { color: #666; font-size: 10px; margin-top: 1px; }
.pd-ul { margin: 4px 0; padding-left: 18px; }
.pd-ul li { margin: 2.5px 0; }
.pd-cols { columns: 2; column-gap: 24px; margin: 4px 0; padding-left: 18px; list-style: none; }
.pd-cols li { margin: 2.5px 0; break-inside: avoid; }
.pd-card { border: 1px solid #d4d4d8; border-radius: 8px; padding: 8px 10px; break-inside: avoid; }
.pd-budget td { border-bottom: 1px solid #eee; }
.pd-tot td { border-top: 2px solid #2563eb; border-bottom: none; padding-top: 5px; }
.pd-muted { color: #888; }
.pd-foot { margin-top: 16px; padding-top: 8px; border-top: 1px solid #d4d4d8; color: #888; font-size: 10px; text-align: center; }

/* ---- AI generation progress overlay ---- */
.gen-overlay { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; background: color-mix(in srgb, var(--bg) 68%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.gen-overlay.is-on { display: flex; animation: genFade .25s var(--ease); }
@keyframes genFade { from { opacity: 0; } to { opacity: 1; } }
.gen-card { width: 100%; max-width: 380px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 22px; padding: 26px 22px; box-shadow: var(--shadow-2); text-align: center; }
.gen-spark { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; background: var(--grad-brand); display: grid; place-items: center; box-shadow: var(--shadow-1); animation: genPulse 1.6s var(--ease) infinite; }
.gen-spark svg { width: 28px; height: 28px; color: #fff; }
@keyframes genPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.gen-title { font-size: 17px; font-weight: 750; }
.gen-steps { margin-top: 16px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.gen-step { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-3); transition: color .3s var(--ease); }
.gen-step .gen-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; transition: all .3s var(--ease); position: relative; }
.gen-step.is-now { color: var(--text); font-weight: 650; }
.gen-step.is-now .gen-dot { border-color: var(--brand-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-2) 18%, transparent); }
.gen-step.is-done { color: var(--text-2); }
.gen-step.is-done .gen-dot { background: var(--brand-2); border-color: var(--brand-2); }
.gen-step.is-done .gen-dot::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ---- In-app dialogs (replace native confirm/prompt) ---- */
.app-dialog { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8,10,18,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s var(--ease); }
.app-dialog.is-on { opacity: 1; }
.app-dialog__card { width: 100%; max-width: 380px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: var(--shadow-2); transform: translateY(8px) scale(.98); transition: transform .2s var(--ease); }
.app-dialog.is-on .app-dialog__card { transform: none; }
.app-dialog__title { font-size: 17px; font-weight: 750; }
.app-dialog__msg { font-size: 14px; color: var(--text-2); line-height: 1.6; margin-top: 8px; }
.app-dialog__actions { display: flex; gap: 10px; margin-top: 18px; }
.app-dialog__actions .btn { flex: 1; }
.btn--danger { background: var(--sakura); color: #fff; border-color: transparent; }
.btn--danger:hover { filter: brightness(1.05); }

/* ---- Collaborative group chat (同行聊天) ---- */
.collab-msg { display: flex; flex-direction: column; align-items: flex-start; margin: 8px 0; }
.collab-msg.is-me { align-items: flex-end; }
.collab-msg__who { font-size: 11px; color: var(--text-3); margin: 0 6px 3px; font-weight: 600; }

/* ---- First-run onboarding ---- */
.onb { position: fixed; inset: 0; z-index: 220; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8,10,18,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s var(--ease); }
.onb.is-on { opacity: 1; }
.onb__card { width: 100%; max-width: 380px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 24px; padding: 30px 24px 24px; box-shadow: var(--shadow-2); text-align: center; transform: translateY(10px) scale(.98); transition: transform .25s var(--ease); }
.onb.is-on .onb__card { transform: none; }
.onb__emoji { font-size: 52px; line-height: 1; margin-bottom: 14px; }
.onb__title { font-size: 20px; font-weight: 800; }
.onb__body { font-size: 14.5px; color: var(--text-2); line-height: 1.7; margin-top: 10px; }
.onb__dots { display: flex; gap: 7px; justify-content: center; margin: 18px 0 16px; }
.onb__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); transition: all .25s var(--ease); }
.onb__dot.is-on { background: var(--brand-2); width: 20px; border-radius: 4px; }
.onb__actions { margin-top: 4px; }

/* ====== Cover / 3D landing ====================================== */
#screen-home { background: #0a0c14; }
.cover { position: relative; min-height: 100vh; overflow-x: hidden; color: #eaf0ff; --mx: 0; --my: 0; }
.cover__space { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(125% 90% at 72% -8%, #1b2452 0%, #0a0c14 58%); }
.orb { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .5; transition: transform .35s ease-out; }
.orb--a { width: 420px; height: 420px; left: -90px; top: 3%; background: radial-gradient(circle, #6d4bff, transparent 70%); transform: translate(calc(var(--mx) * -30px), calc(var(--my) * -24px)); }
.orb--b { width: 380px; height: 380px; right: -70px; top: 28%; background: radial-gradient(circle, #22b8cf, transparent 70%); transform: translate(calc(var(--mx) * 36px), calc(var(--my) * 20px)); }
.orb--c { width: 360px; height: 360px; left: 28%; bottom: 2%; background: radial-gradient(circle, #3b6ef6, transparent 70%); opacity: .38; transform: translate(calc(var(--mx) * 20px), calc(var(--my) * -16px)); }
.cover > *:not(.cover__space) { position: relative; z-index: 1; }
.cover .btn:not(.btn--brand):not(.btn-google) { color: #eaf0ff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.cover .btn:not(.btn--brand):not(.btn-google):hover { background: rgba(255,255,255,.14); }
.cover .ai-create__chips button { background: rgba(255,255,255,.07); color: #cdd6f0; border-color: rgba(255,255,255,.12); }

.cover__nav { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 13px clamp(16px,4vw,40px); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: linear-gradient(#0a0c14d9, #0a0c1400); }
.cover__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; }
.cover__logo { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, #6d4bff, #22b8cf); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(109,75,255,.4); }
.cover__logo svg { width: 19px; height: 19px; }

.cover__hero { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; padding: clamp(26px,6vw,64px) clamp(20px,5vw,40px) 40px; max-width: 1100px; margin: 0 auto; }
.cover__eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; color: #9db4ff; }
.cover__h1 { font-size: clamp(33px,7vw,56px); font-weight: 850; line-height: 1.1; margin: 14px 0 16px; letter-spacing: -.01em; }
.grad { background: linear-gradient(100deg, #9b8bff, #46c7e0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cover__lead { font-size: clamp(15px,2.3vw,18px); color: #b9c4e6; line-height: 1.7; max-width: 540px; }
.cover .ai-create { margin: 22px 0 16px; max-width: 540px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.cover .ai-create textarea { color: #eaf0ff; }
.cover .ai-create textarea::placeholder { color: #8a96bf; }
.cover__cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.btn--lg { padding: 15px 30px; font-size: 16px; }

.cover__hero-phone { display: flex; justify-content: center; perspective: 1300px; }
.p3d { width: 240px; border-radius: 36px; padding: 11px; background: linear-gradient(160deg, #2a2f48, #14172a); box-shadow: 0 44px 90px -24px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.1); transform-style: preserve-3d; }
.p3d__scr { border-radius: 26px; overflow: hidden; background: #0e1120; min-height: 430px; padding: 16px 14px; display: flex; }
.p3d--float { transform: rotateY(calc(var(--mx) * 13deg)) rotateX(calc(var(--my) * -9deg)); transition: transform .25s ease-out; animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.p3d--tilt { transform: rotateY(-15deg) rotateX(6deg); transition: transform .7s var(--ease); }
.p3d--tiltL { transform: rotateY(15deg) rotateX(6deg); }
.reveal.in .p3d--tilt { transform: rotateY(0) rotateX(0); }

.mk { font-size: 12px; color: #cdd6f0; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.mk__bar { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: #8a96bf; }
.mk__bar b { color: #fff; font-size: 14px; }
.mk__chip { align-self: flex-start; background: linear-gradient(135deg, #6d4bff, #22b8cf); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.mk__chip--g { background: rgba(255,255,255,.1); color: #b9c4e6; }
.mk__row { display: flex; gap: 10px; align-items: center; padding: 8px 10px; background: rgba(255,255,255,.05); border-radius: 12px; }
.mk__row i { color: #7fb0ff; font-style: normal; font-weight: 700; width: 38px; flex: none; }
.mk__wx { margin-top: auto; background: rgba(91,141,239,.16); border-radius: 12px; padding: 10px; color: #cfe0ff; text-align: center; }
.mk__bub { align-self: flex-start; max-width: 82%; background: rgba(255,255,255,.08); padding: 9px 12px; border-radius: 14px 14px 14px 4px; line-height: 1.5; }
.mk__bub--me { align-self: flex-end; background: linear-gradient(135deg, #3b6ef6, #6d4bff); color: #fff; border-radius: 14px 14px 4px 14px; }
.mk__act { align-self: center; font-size: 11px; color: #9db4ff; }
.mk--map { position: relative; background: linear-gradient(160deg, #11203a, #0b1426); }
.mk__pin { position: absolute; transform: translate(-50%, -50%); font-size: 20px; }
.mk__route { position: absolute; inset: 0; width: 100%; height: 100%; }
.mk__wx--abs { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; }

.cover__feat { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; max-width: 1000px; margin: 0 auto; padding: clamp(38px,8vw,76px) clamp(20px,5vw,40px); }
.cover__feat-phone { display: flex; justify-content: center; perspective: 1300px; }
.cover__feat-phone .p3d { width: 208px; }
.cover__feat-phone .p3d__scr { min-height: 388px; }
.cover__kicker { font-size: 13px; font-weight: 700; color: #9db4ff; letter-spacing: .05em; }
.cover__feat-txt h2 { font-size: clamp(23px,4.5vw,33px); font-weight: 800; margin: 10px 0 12px; line-height: 1.2; }
.cover__feat-txt p { font-size: clamp(14px,2.1vw,17px); color: #b9c4e6; line-height: 1.75; max-width: 460px; }
.cover__final { text-align: center; padding: clamp(48px,9vw,96px) 20px clamp(60px,10vw,110px); max-width: 700px; margin: 0 auto; }
.cover__final .btn--ghost { color: #eaf0ff; border-color: rgba(255,255,255,.22); }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (min-width: 860px) {
  .cover__hero { grid-template-columns: 1.12fr .88fr; }
  .cover__feat { grid-template-columns: .9fr 1.1fr; }
  .cover__feat--rev .cover__feat-phone { order: 2; }
  .cover .ai-create, .cover__lead { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .p3d--float { animation: none; } .reveal { opacity: 1; transform: none; } }

/* ===== Realistic phone chrome (shared by hero + story) ===== */
.p3d { position: relative; }
.p3d__island {
  position: absolute; top: 17px; left: 50%; transform: translateX(-50%);
  width: 74px; height: 21px; border-radius: 999px;
  background: #05060d; z-index: 4; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.p3d__island::after {
  content: ''; position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2b3a63, #070a14 70%);
  box-shadow: 0 0 0 1px rgba(120,150,255,.18);
}
.p3d::before, .p3d::after {
  content: ''; position: absolute; width: 3px; border-radius: 4px;
  background: linear-gradient(#454c70, #20243a);
}
.p3d::before { left: -3px; top: 92px; height: 34px; box-shadow: 0 46px 0 0 #3a4060; }
.p3d::after  { right: -3px; top: 118px; height: 58px; }
.p3d__glare {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 26px;
  background: linear-gradient(108deg, transparent 30%, rgba(255,255,255,.05) 44%, rgba(255,255,255,.17) 50%, rgba(255,255,255,.04) 56%, transparent 70%);
  background-size: 230% 100%; background-position: var(--glx, 60%) 0; mix-blend-mode: screen;
}
.cover__hero-phone .p3d__scr { padding-top: 32px; }

/* ===== Scroll-pinned phone story ===== */
.story { position: relative; }
.story__track { position: relative; height: 430vh; }
.story__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; grid-template-columns: 1fr; gap: 26px;
  place-content: center; justify-items: center;
  max-width: 1040px; margin: 0 auto; padding: 0 clamp(20px,5vw,40px);
  overflow: hidden; text-align: center;
}
.story__rail { position: relative; width: 100%; max-width: 460px; }
.story__caps { position: relative; min-height: 176px; }
.story__cap {
  position: absolute; inset: 0; opacity: 0; transform: translateY(22px);
  transition: opacity .55s var(--ease), transform .55s var(--ease); pointer-events: none;
}
.story__cap.is-active { opacity: 1; transform: none; pointer-events: auto; }
.story__cap h2 { font-size: clamp(24px,4.6vw,34px); font-weight: 850; margin: 10px 0 12px; line-height: 1.18; }
.story__cap p { font-size: clamp(14.5px,2.1vw,17px); color: #b9c4e6; line-height: 1.7; margin: 0 auto; max-width: 440px; }
.story__dots { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
.story__dots span { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.2); transition: width .35s var(--ease), background .35s var(--ease); }
.story__dots span.on { width: 24px; background: linear-gradient(135deg, #6d4bff, #22b8cf); }

.story__phone { display: flex; justify-content: center; perspective: 1500px; }
.p3d--story {
  width: clamp(216px, 60vw, 258px);
  transform: rotateY(var(--ry, -15deg)) rotateX(var(--rx, 5deg)) rotateZ(var(--rz, -1deg));
  transition: transform .12s linear; will-change: transform;
}
.p3d--story .p3d__scr { position: relative; display: block; min-height: clamp(420px, 64vw, 486px); padding: 0; }
.story__slide {
  position: absolute; inset: 0; margin: 0; padding: 34px 16px 16px;
  opacity: var(--o, 0); transform: scale(calc(.952 + .048 * var(--o, 0)));
  transform-origin: 50% 46%; will-change: opacity, transform;
}
.story__slide.mk--map { padding: 0; }

@media (min-width: 860px) {
  .story__track { height: 460vh; }
  .story__stage { grid-template-columns: 1fr 1fr; gap: 48px; text-align: left; align-items: center; }
  .story__rail { max-width: none; justify-self: end; }
  .story__cap p { margin: 0; }
  .story__dots { justify-content: flex-start; }
  .story__phone { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .story__track { height: auto; }
  .story__stage { position: static; height: auto; grid-template-columns: 1fr; gap: 28px; padding-block: 48px; }
  .story__phone { perspective: none; }
  .p3d--story { transform: rotateY(-12deg) rotateX(5deg); transition: none; }
  .story__caps { position: static; min-height: 0; display: flex; flex-direction: column; gap: 26px; }
  .story__cap { position: static; opacity: 1; transform: none; }
  .story__slide { transition: opacity .4s var(--ease); }
}

/* ---- Desktop / landscape (≥1000px): left nav rail + wide content ---- */
@media (min-width: 1000px) {
  :root { --maxw: 1240px; }
  #app:not([hidden]) {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "topbar topbar" "side content";
    min-height: 100vh;
    max-width: none; margin: 0;   /* full-bleed: the nav rail sits flush against the left edge */
  }
  #app > .appbar { grid-area: topbar; }
  #app > main { grid-area: content; padding: 22px 40px 48px; min-height: 0; }
  /* Designed-for-desktop: center each tab in a comfortable column instead of stretching a phone.
     Text/cards/chat read best in a contained width; the map page takes the full width. */
  #page-today, #page-plan, #page-weather, #page-gift { max-width: 1040px; margin: 0 auto; }
  #page-ai { max-width: 980px; margin: 0 auto; }
  #page-route { max-width: 1280px; margin: 0 auto; }
  /* AI tab: flex column that fills the content height so the chat composer is always on-screen
     (the segment above the chat takes its own space; the chat fills the rest). */
  #page-ai { display: flex; flex-direction: column; height: calc(100vh - var(--appbar-h) - 70px); min-height: 0; }
  .chat-scroll { padding-inline: 4px; }
  #app > .tabbar {
    grid-area: side; position: sticky; top: 0; align-self: start;
    width: 96px; max-width: none; height: 100vh; left: auto; right: auto; bottom: auto; transform: none;
    flex-direction: column; justify-content: flex-start; gap: 4px;
    padding: calc(var(--appbar-h) + 18px) 0 18px;
    border-top: none; border-right: 1px solid var(--line);
  }
  #app > .tabbar .tab { flex: 0 0 auto; height: 66px; font-size: 11px; }
  #tabind { display: none; }
  .chat-wrap { max-width: 880px; margin-inline: auto; width: 100%; height: auto; flex: 1 1 auto; min-height: 0; }
  /* keep bottom sheets a sensible width on desktop */
  .sheet { max-width: 560px; }
  /* Plans + community: a 2-column card grid on desktop (uses the width like a real desktop app) */
  .plans-main { max-width: 1040px; }
  #plansList, #templateList > div, #communityList .stagger { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  #plansList .plan-card, #communityList .plan-card { margin: 0; }
  .plan-card--tpl, .plan-card--ai { margin-top: 0 !important; }   /* grid gap handles spacing */
  .community-filters, .community-sort { max-width: 1040px; }
}
@media (min-width: 1400px) {
  .grid2 { gap: 16px; }
}

/* ---------- Sharing & permissions (Google-Docs-style) --------------------- */
.share-add {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px;
}
.access-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
}
.access-row:last-child { border-bottom: none; }
.access-row__who { flex: 1 1 auto; min-width: 0; }
.access-row__who b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.access-row__who .tiny { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.access-row select { flex: 0 0 auto; }

/* read-only / commenter banner pinned under the app bar */
.ro-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--gold) 16%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line));
  font-size: 13px;
  color: var(--text);
}
.ro-banner[hidden] { display: none; }
.ro-banner__txt { flex: 1 1 auto; min-width: 0; }
.ro-banner__btn {
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--brand-2);
  font-weight: 600;
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.ro-banner__btn:hover { background: var(--surface-2); }

/* =========================================================================
   Google-style intro / landing  —  theme-aware (light / dark / auto)  [.gl-*]
   ========================================================================= */
#screen-home { background: var(--bg) !important; }
.gl { --glmax: 1120px; --g-blue:#4285F4; --g-red:#EA4335; --g-yellow:#FBBC05; --g-green:#34A853;
  position: relative; background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; }
.gl-wrap { max-width: var(--glmax); margin: 0 auto; padding: 0 clamp(20px,5vw,40px); }
.gl-section { padding: clamp(56px,9vw,108px) 0; }
.gl-eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; letter-spacing:.03em;
  color: var(--brand-2); background: color-mix(in srgb,var(--brand-2) 11%, transparent); padding:6px 13px; border-radius:999px; }
[data-theme="dark"] .gl-eyebrow { color:#aab4ff; }
.gl-h2 { font-size: clamp(27px,4.4vw,42px); font-weight:800; letter-spacing:-.02em; line-height:1.13; margin:16px 0 14px; }
.gl-lead { font-size: clamp(16px,2.1vw,19px); color: var(--text-2); line-height:1.7; max-width:660px; }
.gl-center { text-align:center; }
.gl-center .gl-lead { margin-left:auto; margin-right:auto; }
.gl-head { max-width:720px; margin:0 auto; }

/* ---- nav ---- */
.gl-nav { position: sticky; top:0; z-index:40; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom:1px solid transparent; transition: border-color .25s; }
.gl-nav.is-stuck { border-bottom-color: var(--line); }
.gl-nav__in { max-width: var(--glmax); margin:0 auto; height:64px; display:flex; align-items:center; gap:16px; padding:0 clamp(16px,5vw,40px); }
.gl-brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; letter-spacing:-.01em; color:var(--text); }
.gl-logo { width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--brand-1),var(--brand-3));
  display:grid; place-items:center; box-shadow:0 4px 14px color-mix(in srgb,var(--brand-2) 42%, transparent); }
.gl-logo svg{ width:20px; height:20px; }
.gl-nav__links { display:none; gap:2px; margin-left:10px; }
.gl-nav__links a { font-size:14.5px; font-weight:600; color:var(--text-2); padding:8px 12px; border-radius:8px; cursor:pointer; }
.gl-nav__links a:hover { color:var(--text); background:var(--surface-2); }
.gl-nav__spacer { flex:1; }
.gl-nav__actions { display:flex; align-items:center; gap:8px; }
.gl-iconbtn { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:var(--text-2);
  border:1px solid var(--line); background:var(--surface); transition:.2s; cursor:pointer; }
.gl-iconbtn:hover { color:var(--text); background:var(--surface-2); }
.gl-iconbtn svg{ width:19px; height:19px; }
.gl-btn.gl-hide-sm{ display:none; }
@media (min-width: 940px){ .gl-nav__links{display:flex;} .gl-menu-btn{display:none;} .gl-btn.gl-hide-sm{display:inline-flex;} }

/* ---- mobile menu ---- */
.gl-mobile { display:none; position:fixed; inset:64px 0 0; z-index:39; background:var(--bg);
  padding:14px clamp(20px,6vw,40px); flex-direction:column; gap:2px; overflow:auto; }
.gl-mobile.open { display:flex; }
.gl-mobile a { font-size:17px; font-weight:600; color:var(--text); padding:15px 6px; border-bottom:1px solid var(--line); cursor:pointer; }
.gl-mobile .gl-btn{ margin-top:16px; }

/* ---- buttons ---- */
.gl-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 22px;
  border-radius:999px; font-size:15px; font-weight:700; border:1px solid var(--line-strong); background:var(--surface);
  color:var(--text); cursor:pointer; transition:transform .15s, box-shadow .2s, background .2s, border-color .2s; white-space:nowrap; }
.gl-btn:hover{ background:var(--surface-2); transform:translateY(-1px); box-shadow:var(--shadow-1); }
.gl-btn--primary{ background:var(--brand-2); color:#fff; border-color:transparent; box-shadow:0 6px 18px color-mix(in srgb,var(--brand-2) 36%, transparent); }
.gl-btn--primary:hover{ background:var(--brand-3); box-shadow:0 10px 26px color-mix(in srgb,var(--brand-2) 44%, transparent); }
.gl-btn--ghost{ background:transparent; }
.gl-btn--sm{ height:38px; padding:0 15px; font-size:14px; }
.gl-btn--lg{ height:54px; padding:0 30px; font-size:16.5px; }
.gl-btn-google{ background:#fff; color:#1f1f1f; border:1px solid #dadce0; }
.gl-btn-google .gicon{ width:18px; height:18px; }

/* ---- hero ---- */
.gl-hero{ position:relative; padding: clamp(44px,8vw,92px) 0 clamp(34px,5vw,60px); overflow:hidden; }
.gl-hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(58% 46% at 50% -6%, color-mix(in srgb,var(--brand-2) 17%, transparent), transparent 72%); }
.gl-hero__in{ position:relative; z-index:1; max-width:880px; margin:0 auto; text-align:center; }
.gl-h1{ font-size: clamp(38px,7.2vw,66px); font-weight:800; letter-spacing:-.03em; line-height:1.06; margin:22px 0 0; }
.g-grad{ background:linear-gradient(96deg,var(--g-blue),var(--brand-2) 42%,var(--g-red) 74%,var(--g-yellow));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.gl-hero .gl-lead{ margin:20px auto 0; font-size:clamp(16.5px,2.3vw,21px); max-width:600px; }
.gl-hero__cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px; }
.gl-hero__note{ margin-top:18px; font-size:13.5px; color:var(--text-3); display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.gl-hero__note span{ display:inline-flex; align-items:center; gap:5px; }
.gl-hero__note svg{ width:15px; height:15px; color:var(--g-green); }
.gl .ai-create{ max-width:580px; margin:30px auto 6px; text-align:left; box-shadow:var(--shadow-2); }

/* ---- product shot frames ---- */
.gl-shot{ margin:46px auto 0; max-width:960px; border-radius:18px; overflow:hidden; border:1px solid var(--line);
  background:var(--bg-elev); box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--brand-3) 40%, rgba(0,0,0,.5)); }
.gl-shot__bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.gl-shot__bar i{ width:11px; height:11px; border-radius:50%; background:var(--line-strong); display:inline-block; }
.gl-shot__url{ margin-left:10px; flex:1; height:22px; border-radius:999px; background:var(--surface); border:1px solid var(--line);
  font-size:11.5px; color:var(--text-3); display:flex; align-items:center; padding:0 12px; }
.gl-shot__body{ padding:18px; }

/* a lightweight, theme-aware app mock used across showcases */
.mock{ display:flex; flex-direction:column; gap:9px; font-size:13px; color:var(--text); }
.mock__bar{ display:flex; justify-content:space-between; align-items:center; color:var(--text-3); font-size:12px; }
.mock__bar b{ color:var(--text); font-size:15px; }
.mock__row{ display:flex; gap:11px; align-items:center; padding:10px 12px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; }
.mock__row i{ color:var(--brand-2); font-style:normal; font-weight:700; width:42px; flex:none; }
[data-theme="dark"] .mock__row i{ color:#9db4ff; }
.mock__row.is-ai{ border-color:color-mix(in srgb,var(--brand-2) 40%, transparent); background:color-mix(in srgb,var(--brand-2) 8%, transparent); }
.mock__chip{ align-self:flex-start; background:var(--brand-2); color:#fff; font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; display:inline-flex; gap:6px; align-items:center; }
.mock__bub{ align-self:flex-start; max-width:84%; background:var(--surface-2); border:1px solid var(--line); padding:10px 13px; border-radius:14px 14px 14px 4px; line-height:1.55; }
.mock__bub--me{ align-self:flex-end; background:var(--brand-2); color:#fff; border:0; border-radius:14px 14px 4px 14px; }
.mock__note{ font-size:12px; color:var(--text-3); }
.mock--map{ position:relative; height:210px; border-radius:12px; overflow:hidden; border:1px solid var(--line);
  background: linear-gradient(160deg, color-mix(in srgb,var(--brand-2) 12%, var(--surface-2)), var(--surface-2)); }
.mock--map .pin{ position:absolute; transform:translate(-50%,-50%); font-size:22px; }
.mock--map svg{ position:absolute; inset:0; width:100%; height:100%; }
.mock--map .tag{ position:absolute; left:12px; bottom:12px; background:var(--surface); border:1px solid var(--line);
  font-size:12px; padding:7px 11px; border-radius:10px; color:var(--text-2); }

/* ---- trust strip ---- */
.gl-trust{ padding: clamp(28px,5vw,44px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.gl-trust__label{ text-align:center; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.gl-trust__row{ display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center; align-items:center; margin-top:18px; }
.gl-trust__row span{ font-size:14.5px; font-weight:700; color:var(--text-2); display:inline-flex; align-items:center; gap:7px; }
.gl-trust__row svg{ width:18px; height:18px; color:var(--brand-2); }

/* ---- feature grid ---- */
.gl-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(244px,1fr)); gap:16px; margin-top:44px; }
.gl-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px 22px; transition:transform .2s, box-shadow .2s, border-color .2s; }
.gl-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:var(--line-strong); }
.gl-card__ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:15px; color:#fff; }
.gl-card__ic svg{ width:23px; height:23px; }
.gl-card h3{ font-size:17.5px; font-weight:750; margin:0 0 7px; }
.gl-card p{ font-size:14.5px; color:var(--text-2); line-height:1.65; margin:0; }
.ic-blue{ background:linear-gradient(135deg,#4285F4,#1a73e8); } .ic-red{ background:linear-gradient(135deg,#EA4335,#c5221f); }
.ic-green{ background:linear-gradient(135deg,#34A853,#1e8e3e); } .ic-yellow{ background:linear-gradient(135deg,#FBBC05,#f29900); }
.ic-indigo{ background:linear-gradient(135deg,var(--brand-1),var(--brand-3)); } .ic-teal{ background:linear-gradient(135deg,#22b8cf,#0e8fa3); }

/* ---- alternating showcase rows ---- */
.gl-show{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; padding: clamp(40px,6vw,68px) 0; }
.gl-show + .gl-show{ border-top:1px solid var(--line); }
.gl-show__txt h3{ font-size:clamp(22px,3.4vw,30px); font-weight:800; letter-spacing:-.01em; margin:14px 0 12px; line-height:1.2; }
.gl-show__txt p{ font-size:16px; color:var(--text-2); line-height:1.75; max-width:480px; }
.gl-show__list{ margin:18px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.gl-show__list li{ display:flex; gap:10px; font-size:14.5px; color:var(--text); align-items:flex-start; }
.gl-show__list svg{ width:19px; height:19px; color:var(--g-green); flex:none; margin-top:1px; }
.gl-show__media{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:var(--shadow-1); }
@media (min-width:860px){
  .gl-show{ grid-template-columns:1fr 1fr; gap:54px; }
  .gl-show--rev .gl-show__media{ order:-1; }
}

/* ---- steps / how it works ---- */
.gl-steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:44px; }
.gl-step{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px 22px; }
.gl-step__n{ width:34px; height:34px; border-radius:10px; background:color-mix(in srgb,var(--brand-2) 13%, transparent);
  color:var(--brand-2); font-weight:800; font-size:16px; display:grid; place-items:center; margin-bottom:14px; }
[data-theme="dark"] .gl-step__n{ color:#aab4ff; }
.gl-step h3{ font-size:17px; font-weight:750; margin:0 0 7px; }
.gl-step p{ font-size:14px; color:var(--text-2); line-height:1.6; margin:0; }

/* ---- comparison table ---- */
.gl-table-wrap{ margin-top:40px; overflow-x:auto; border:1px solid var(--line); border-radius:18px; }
.gl-table{ width:100%; border-collapse:collapse; min-width:660px; font-size:14.5px; }
.gl-table th, .gl-table td{ padding:15px 16px; text-align:center; border-bottom:1px solid var(--line); }
.gl-table thead th{ font-weight:700; color:var(--text-2); font-size:13.5px; background:var(--surface-2); }
.gl-table tbody th{ text-align:left; font-weight:600; color:var(--text); }
.gl-table .col-us{ background:color-mix(in srgb,var(--brand-2) 9%, transparent); }
.gl-table thead .col-us{ color:var(--brand-2); font-weight:800; background:color-mix(in srgb,var(--brand-2) 15%, transparent); }
[data-theme="dark"] .gl-table thead .col-us{ color:#aab4ff; }
.gl-table tr:last-child td, .gl-table tr:last-child th{ border-bottom:0; }
.gl-yes{ color:var(--g-green); } .gl-yes svg{ width:20px; height:20px; }
.gl-no{ color:var(--text-3); } .gl-mid{ color:#e8910a; font-weight:700; }
.gl-table small{ display:block; font-size:11.5px; color:var(--text-3); font-weight:500; }
.gl-note{ margin-top:14px; font-size:12.5px; color:var(--text-3); text-align:center; }

/* ---- stats ---- */
.gl-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin-top:8px; }
.gl-stat{ text-align:center; padding:22px 14px; background:var(--surface-2); border-radius:16px; }
.gl-stat b{ display:block; font-size:clamp(30px,5vw,44px); font-weight:800; letter-spacing:-.02em;
  background:linear-gradient(120deg,var(--g-blue),var(--brand-2),var(--g-red)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gl-stat span{ font-size:14px; color:var(--text-2); }

/* ---- privacy ---- */
.gl-priv{ background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:clamp(30px,5vw,52px); }
.gl-priv__grid{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:30px; }
.gl-priv__item{ display:flex; gap:14px; }
.gl-priv__item svg{ width:24px; height:24px; color:var(--brand-2); flex:none; }
.gl-priv__item h4{ font-size:16px; font-weight:750; margin:0 0 5px; }
.gl-priv__item p{ font-size:14px; color:var(--text-2); line-height:1.6; margin:0; }
.gl-priv__docs{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
@media (min-width:760px){ .gl-priv__grid{ grid-template-columns:1fr 1fr; gap:24px 34px; } }

/* ---- FAQ ---- */
.gl-faq{ max-width:780px; margin:40px auto 0; }
.gl-faq__item{ border-bottom:1px solid var(--line); }
.gl-faq__q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; text-align:left;
  padding:22px 4px; font-size:16.5px; font-weight:650; color:var(--text); background:none; cursor:pointer; }
.gl-faq__q svg{ width:20px; height:20px; color:var(--text-3); transition:transform .25s; flex:none; }
.gl-faq__item.open .gl-faq__q svg{ transform:rotate(45deg); }
.gl-faq__a{ overflow:hidden; max-height:0; transition:max-height .3s ease; }
.gl-faq__a p{ padding:0 4px 22px; margin:0; font-size:15px; color:var(--text-2); line-height:1.75; }

/* ---- CTA band ---- */
.gl-cta{ position:relative; overflow:hidden; text-align:center; border-radius:28px; padding:clamp(44px,7vw,80px) 24px;
  background:linear-gradient(125deg,var(--brand-3),var(--brand-2) 55%,var(--brand-1)); color:#fff; }
.gl-cta h2{ font-size:clamp(28px,5vw,42px); font-weight:800; letter-spacing:-.02em; margin:0 0 12px; }
.gl-cta p{ font-size:17px; opacity:.92; margin:0 auto 26px; max-width:520px; }
.gl-cta .gl-btn{ background:#fff; color:var(--brand-3); border-color:transparent; }
.gl-cta .gl-btn:hover{ background:#f1f1ff; }
.gl-cta .gl-btn--ghost{ background:color-mix(in srgb,#fff 16%, transparent); color:#fff; border:1px solid color-mix(in srgb,#fff 55%, transparent); }
.gl-cta .gl-btn--ghost:hover{ background:color-mix(in srgb,#fff 26%, transparent); }

/* ---- footer ---- */
.gl-footer{ border-top:1px solid var(--line); padding:clamp(40px,6vw,64px) 0 40px; }
.gl-footer__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px 20px; }
.gl-footer__brand{ grid-column:1/-1; max-width:300px; }
.gl-footer__brand p{ font-size:13.5px; color:var(--text-3); line-height:1.6; margin:12px 0 0; }
.gl-footer h5{ font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--text-3); text-transform:uppercase; margin:0 0 14px; }
.gl-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.gl-footer a{ font-size:14.5px; color:var(--text-2); cursor:pointer; }
.gl-footer a:hover{ color:var(--text); }
.gl-footer__bottom{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  margin-top:38px; padding-top:24px; border-top:1px solid var(--line); font-size:13px; color:var(--text-3); }
.gl-seg{ display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:3px; gap:2px; background:var(--surface); }
.gl-seg button{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--text-2);
  padding:6px 12px; border-radius:999px; cursor:pointer; }
.gl-seg button.on{ background:var(--brand-2); color:#fff; }
.gl-seg svg{ width:15px; height:15px; }
@media (min-width:720px){ .gl-footer__grid{ grid-template-columns:2fr 1fr 1fr 1fr; } .gl-footer__brand{ grid-column:auto; } }

/* ---- legal modal ---- */
.gl-modal{ position:fixed; inset:0; z-index:60; display:none; }
.gl-modal.open{ display:block; }
.gl-modal__scrim{ position:absolute; inset:0; background:rgba(8,10,16,.5); backdrop-filter:blur(3px); }
.gl-modal__panel{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(720px,92vw); max-height:86vh;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-3); display:flex; flex-direction:column; }
.gl-modal__head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }
.gl-modal__head h3{ font-size:19px; font-weight:800; margin:0; }
.gl-modal__body{ padding:22px 24px 28px; overflow:auto; }
.gl-doc h4{ font-size:15.5px; font-weight:750; margin:22px 0 8px; }
.gl-doc h4:first-child{ margin-top:0; }
.gl-doc p, .gl-doc li{ font-size:14.5px; color:var(--text-2); line-height:1.75; }
.gl-doc ul{ margin:8px 0; padding-left:20px; }
.gl-doc .upd{ font-size:12.5px; color:var(--text-3); }

@media (prefers-reduced-motion: reduce){ .gl-card:hover,.gl-btn:hover{ transform:none; } }
.gl-skip{ position:absolute; left:8px; top:-64px; z-index:100; background:var(--brand-2); color:#fff; padding:10px 16px;
  border-radius:8px; font-weight:700; font-size:14px; transition:top .2s; }
.gl-skip:focus{ top:8px; outline:2px solid #fff; outline-offset:2px; }

/* ---------- Community feed (我的計劃 / 社群) ------------------------------- */
.plans-seg {
  display: flex; gap: 4px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-pill); margin: 4px 0 16px;
}
.plans-seg__btn {
  flex: 1 1 0; padding: 9px 10px; border: none; background: transparent;
  border-radius: var(--r-pill); font-size: 14px; font-weight: 600;
  color: var(--text-2); cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease);
}
.plans-seg__btn.is-on { background: var(--surface); color: var(--brand-2); box-shadow: var(--shadow-1); }

.community-sort { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 12px; }
.community-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.community-filter { display: flex; flex-direction: column; gap: 4px; }
.community-filter__lbl { font-weight: 700; }

.plan-card--community { box-shadow: inset 0 0 0 1px var(--line); }
.plan-card--community .plan-card__actions { flex-direction: column; gap: 6px; align-items: flex-end; }
.community-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.chip--mini { padding: 2px 8px; font-size: 11px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line); }

.like-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text-3); font-size: 13px; font-weight: 700; cursor: pointer;
  transition: transform .12s var(--spring), color .15s var(--ease), border-color .15s var(--ease);
}
.like-badge__heart { font-size: 14px; line-height: 1; }
.like-badge.is-on { color: var(--sakura); border-color: color-mix(in srgb, var(--sakura) 50%, var(--line-strong)); background: color-mix(in srgb, var(--sakura) 8%, var(--surface)); }
.like-badge:active { transform: scale(.92); }

.preview-item { display: flex; gap: 10px; padding: 5px 2px; border-bottom: 1px dashed var(--line); font-size: 14px; }
.preview-item:last-child { border-bottom: none; }
.preview-item__t { flex: 0 0 48px; color: var(--brand-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.preview-item__x { flex: 1 1 auto; color: var(--text); }

/* ---------- Craft polish: focus, press, view transitions ------------------ */
/* Unified keyboard focus ring (accessibility + 'designed' feel) */
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.iconbtn:focus-visible, .chip:focus-visible, .tab:focus-visible { border-radius: var(--r-pill); }
/* Tactile press on interactive controls (Linear/Things feel) */
.btn:active, .iconbtn:active, .chip--tap:active, .like-badge:active,
.plans-seg__btn:active, .plan-card:active, .daypill:active {
  transform: var(--press);
}
.btn, .iconbtn, .chip--tap, .like-badge, .plan-card, .daypill { transition: transform .12s var(--spring), box-shadow .18s var(--ease), background .18s var(--ease); }
/* Smooth cross-fade between screens via the View Transitions API (progressive enhancement) */
.appbar { view-transition-name: appbar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Community plan DETAIL page + reviews/見解 ---------------------- */
#screen-detail { flex-direction: column; }
#screen-detail:not([hidden]) { display: flex; height: 100vh; height: 100dvh; }
.detail-main { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#detailRoot { max-width: var(--maxw); margin: 0 auto; padding: var(--space-4) var(--space-5) var(--space-8); }
.detail-actionbar { flex: 0 0 auto; display: flex; gap: 10px; padding: 10px 16px calc(10px + var(--safe-b)); background: var(--bg-elev); border-top: 1px solid var(--line); }
.detail-actionbar .btn { min-height: 46px; font-size: var(--fs-15); }

.detail-hero {
  text-align: center; padding: var(--space-6) var(--space-4) var(--space-4);
  border-radius: var(--r-xl); margin-bottom: var(--space-4);
  background: var(--grad-aurora), color-mix(in srgb, var(--brand-2) 7%, var(--surface));
  border: 1px solid var(--line);
}
.detail-hero__emoji { font-size: 52px; line-height: 1; }
.detail-hero__title { font-family: var(--font-display); font-size: var(--fs-24); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin: var(--space-3) 0 var(--space-2); }
.detail-hero__meta { font-size: var(--fs-13); color: var(--text-2); }
.detail-author { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: var(--space-4); }
.detail-author__name { font-size: var(--fs-13); color: var(--text-2); }
.detail-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: var(--space-2); }
.detail-stat { text-align: center; padding: 10px 4px; background: var(--surface-2); border-radius: var(--r-md); }
.detail-stat__n { font-weight: 700; font-size: var(--fs-15); }
.detail-stat__l { font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* avatars */
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.avatar--sm { width: 28px; height: 28px; }
.avatar--xs { width: 20px; height: 20px; }
.avatar--init { display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; background: var(--grad-brand); }
.avatar--init.avatar--xs { font-size: 10px; }

/* stars */
.stars { display: inline-flex; gap: 1px; color: var(--sakura); font-size: 13px; line-height: 1; }
.stars .is-off { color: var(--line-strong); }
.stars-input { display: flex; gap: 4px; }
.star-btn { border: none; background: none; cursor: pointer; font-size: 26px; line-height: 1; color: var(--line-strong); padding: 2px; }
.star-btn.is-on { color: var(--sakura); }

/* review composer + cards */
.review-compose { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--space-4); margin-bottom: var(--space-4); }
.review-ta { width: 100%; margin-top: 10px; padding: 11px 13px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); font: inherit; font-size: var(--fs-14); resize: vertical; }
.review-card { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); margin-bottom: 10px; background: var(--surface); }
.review-card__head { display: flex; align-items: center; gap: 10px; }
.review-card__name { font-weight: 600; font-size: var(--fs-14); }
.review-card__text { margin-top: 8px; font-size: var(--fs-14); line-height: var(--lh-body); color: var(--text); white-space: pre-wrap; }
.review-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }

/* community card footer (avatar + author + social stats) */
.community-card__foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.community-card__social { margin-left: auto; }

/* ---------- Skeleton loading cards (perceived speed) ---------------------- */
.skel-card { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 12px; background: var(--surface); }
.skel-ico { width: 48px; height: 48px; border-radius: 14px; flex: 0 0 auto; }
.skel-lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.skel-line { height: 12px; border-radius: var(--r-xs); }
.skel-line.w70 { width: 70%; } .skel-line.w45 { width: 45%; } .skel-line.w90 { width: 90%; }

/* ---------- Plan switcher (tappable app-bar title) ------------------------ */
#app .appbar__brand { cursor: pointer; border-radius: var(--r-md); }
#app .appbar__brand:active { transform: var(--press); }
.appbar__title-row { display: flex; align-items: center; gap: 3px; min-width: 0; }
.appbar__title-row .appbar__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.switch-caret { opacity: .45; font-size: 12px; flex: 0 0 auto; }
.switch-row { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: var(--r-md); cursor: pointer; }
.switch-row:hover { background: var(--surface-2); }
.switch-row.is-current { background: color-mix(in srgb, var(--brand-2) 8%, var(--surface)); }
.switch-row__ico { font-size: 24px; flex: 0 0 auto; }
.switch-row__body { flex: 1 1 auto; min-width: 0; }
.switch-row__body b { display: block; font-size: var(--fs-15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }