/* ══════════════════════════════════════�?
   走你·国内 Design System �?main.css
   Tokens �?Reset �?Layout �?Components �?Screens �?Responsive
══════════════════════════════════════�?*/

/* ─── Self-hosted serif (安卓/微信/鸿蒙无 Songti SC，需自托管子集 woff2) ─── */
@font-face {
  font-family: "GoForU Serif";
  src: url("/assets/fonts/goforu-serif-bold.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}
/* Dedicated Black(900) weight, subset to just "走你" for the brandmark logo */
@font-face {
  font-family: "GoForU Serif Black";
  src: url("/assets/fonts/goforu-serif-black-logo.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ─── Design Tokens ─── */
:root {
  --color-primary:        #2F6BF7;
  --color-primary-dark:   #1F4FD6;
  --color-primary-light:  #E7EEFE;
  --color-primary-ghost:  rgba(47,107,247,0.08);
  --color-primary-soft:   rgba(47,107,247,0.10);
  --color-accent:         #FF8C42;
  --color-accent-light:   #FFF1E6;
  --color-safety-red:     #E64545;
  --color-safety-red-soft:rgba(230,69,69,0.10);
  --color-safety-purple:  #7B5BFF;
  --color-safety-amber:   #E69A1E;
  --color-safety-amber-soft: rgba(230,154,30,0.12);
  --color-success:        #1DAE6F;
  --color-success-soft:   rgba(29,174,111,0.10);

  --color-bg:             #FBFCFE;
  --color-bg-soft:        #F4F6FA;
  --color-surface:        #FFFFFF;
  --color-surface-tint:   #F9FAFC;
  --color-border:         #E4E8F0;
  --color-border-light:   #EEF1F7;
  --color-line-dash:      rgba(15,20,36,0.08);

  --color-text-primary:   #0F1424;
  --color-text-secondary: #4B5468;
  --color-text-muted:     #8A93A6;
  --color-text-dim:       #B0B6C4;
  --color-text-on-dark:   #FFFFFF;

  --cream-bg:    #FBFCFE;
  --cream-paper: #FFFFFF;
  --cream-ink:   #1B2436;
  --cream-mute:  #647088;
  --cream-line:  rgba(27,36,54,0.08);
  --cream-brand: #2F7FD9;
  --cream-warm:  #4A9EE8;
  --cream-leaf:  #58B5A7;
  --cream-pop:   #E66062;

  --font-sans:    -apple-system, BlinkMacSystemFont, "PingFang SC",
                  "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-serif:   "GoForU Serif", "Songti SC", "STSong", "SimSun", Georgia, "Times New Roman", serif;
  --font-display: -apple-system, BlinkMacSystemFont, "PingFang SC",
                  "Hiragino Sans GB", "Segoe UI", sans-serif;
  --font-mono:    "SF Mono", "Fira Code", ui-monospace, monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   26px;
  --text-2xl:  34px;
  --text-3xl:  44px;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* Spacing (8px grid) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radii */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 999px;

  --shadow-sm:    0 1px 2px rgba(15,20,36,0.04);
  --shadow-md:    0 2px 12px rgba(15,20,36,0.06);
  --shadow-lg:    0 8px 28px rgba(15,20,36,0.10);
  --shadow-xl:    0 16px 40px rgba(15,20,36,0.14);
  --shadow-brand: 0 8px 24px rgba(47,107,247,0.30);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* Layout */
  --header-height: 56px;
  --chat-input-height: 72px;
  --preview-min-width: 380px;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  height: 100dvh;
  width: 100vw;
}

a { color: var(--color-primary); text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea { font-family: inherit; font-size: inherit; }
img { display: block; max-width: 100%; }

/* ─── Screen System ─── */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  opacity: 0;
  pointer-events: none;
  transform: translateX(20px);
  transition: opacity var(--transition-normal), transform var(--transition-normal);
  z-index: 1;
}
.screen--active {
  opacity: 1;
  pointer-events: all;
  transform: translateX(0);
  z-index: 2;
}

/* ─── Phone Frame Shell (desktop simulation) ─── */
body {
  background: linear-gradient(160deg, #0d1117 0%, #1a2340 50%, #0d1117 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#app-root {
  position: relative;
  width: 390px;
  height: min(844px, 100dvh);
  /* [bugfix] 整页偶发左移 20px 的根因:未激活的 .screen 静止在 translateX(20px)(见 .screen 规则),
     而它们是 position:absolute;inset:0 的子元素 → #app-root.scrollWidth 恒比 clientWidth 宽 20px。
     overflow:hidden 只是不画滚动条,元素依然可被"程序性/焦点滚动"滚走:真实点击让浏览器把某个元素
     scroll-into-view 时会把 scrollLeft 推到 20,整页左移且没有滚动条能拉回来,只能刷新。
     overflow:clip 则彻底不可滚(含程序性滚动),从根上堵死。老浏览器不认 clip 会回落到上面的 hidden(行为同旧版,不回归)。
     注意必须两轴都写 clip:只写 overflow-x:clip 而 y 仍是 hidden 时,浏览器会把 x 强制算回 hidden(实测无效)。
     app-root 本就不该滚动(screen 是 absolute inset:0,纵向滚动由内部 .tab-panel 负责),故两轴 clip 安全。 */
  overflow: hidden;
  overflow: clip;
  background: var(--color-bg);
  border-radius: 44px;
  box-shadow:
    0 0 0 10px #1c1c1e,
    0 0 0 12px #3a3a3c,
    0 50px 100px rgba(0,0,0,0.8);
  /* Fake phone notch bar at top */
  padding-top: 0;
}

/* Phone notch */
#app-root::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 34px;
  background: #1c1c1e;
  border-radius: 0 0 20px 20px;
  z-index: 1000;
  pointer-events: none;
}

/* Screens are absolute inside app-root */
.screen {
  position: absolute;
  inset: 0;
}

/* Modals/overlays are also absolute inside app-root */
.modal-overlay {
  position: absolute !important;
}

.onboarding-overlay {
  position: absolute !important;
}

#toast {
  position: absolute !important;
}

/* On true mobile (< 480px actual device), expand to full screen */
@media (max-width: 480px) {
  body { background: var(--color-bg); }
  #app-root {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
  #app-root::before { display: none; }
}

/* Phone mode: preview panel hidden, chat is full width */
.preview-panel {
  display: none !important;
}

/* Mobile generating overlay */
.mobile-gen-overlay {
  position: absolute;
  inset: 0;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  z-index: 20;
  padding: var(--space-8) var(--space-6) var(--space-6);
}
.mobile-gen-inner {
  width: 100%;
  max-width: 380px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
  padding: var(--space-5) 0 var(--space-2);
}
.mobile-gen-overlay .generating-label {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.mobile-gen-overlay .generating-stream {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Background-generation hint �?sticky at bottom of overlay, always visible */
.gen-bg-hint {
  position: sticky;
  bottom: 0;
  width: 100%;
  max-width: 320px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-light);
  border: 1px solid rgba(26,115,232,0.2);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  text-align: center;
  flex-shrink: 0;
  margin-top: auto;
}
/* dest-discovery 介绍出现后，底部 banner 压缩为一行小提示，把主屏让给介绍轮播 */
.gen-bg-hint.compact {
  padding: var(--space-2) var(--space-4);
}
.gen-bg-hint.compact .gen-bg-hint-sub { display: none; }
.gen-bg-hint-text {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}
.gen-bg-hint-sub {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin: 0;
}
/* 30s email escape hatch */
.gen-email-prompt {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.gen-email-prompt-title {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-2) 0;
}
.gen-email-row {
  display: flex;
  gap: var(--space-2);
}
.gen-email-input {
  flex: 1;
  padding: 7px 10px;
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  outline: none;
  background: #fff;
}
.gen-email-input:focus { border-color: var(--color-primary); }
.gen-email-btn {
  padding: 7px 14px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.gen-email-btn:active { opacity: 0.85; }
/* Escape hatch two-button row */
.gen-escape-btns {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.gen-escape-btn {
  flex: 1;
  padding: 8px 10px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: #fff;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.gen-escape-btn:hover { background: var(--color-surface); }
.gen-escape-btn--email { border-color: var(--color-primary); color: var(--color-primary); }
.gen-escape-btn--email:hover { background: #eff6ff; }
/* Readonly email input �?grayed out */
.gen-email-input[readonly] {
  background: #f1f5f9;
  color: var(--color-text-muted);
  cursor: default;
}
.gen-bg-btn {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1) 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Destination Discovery Carousel ── */
.dest-discovery {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: dd-fadein 0.5s ease both;
}
@keyframes dd-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.disc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-4) var(--space-2);
  flex-shrink: 0;
}
.disc-eyebrow {
  font-size: 10px;
  font-weight: var(--weight-bold);
  color: #c77a10;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.disc-city-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.disc-chip {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  background: rgba(240, 144, 48, 0.18);
  color: #b86100;
}
.disc-carousel-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  margin: 0 var(--space-4);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #1a3a5c;
}
.disc-carousel {
  width: 100%;
  height: 100%;
  position: relative;
}
.disc-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}
.disc-slide.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.disc-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.disc-slide-deco {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 56px;
  opacity: 0.18;
  z-index: 1;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.disc-slide-content {
  position: relative;
  z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.5) 55%, transparent 100%);
  padding: 28px var(--space-4) var(--space-3) var(--space-4);
  min-height: 52%;
  max-height: 78%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.disc-slide-label {
  font-size: 10px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.75);
  margin-bottom: 5px;
}
.disc-slide-text {
  font-size: 12.5px;
  line-height: 1.68;
  color: rgba(255,255,255,0.93);
  /* v8: 不再用 line-clamp 截断，长文化介绍可下拉滚动查看 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.35) transparent;
}
.disc-slide-text::-webkit-scrollbar { width: 4px; }
.disc-slide-text::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: 2px; }
/* 底部渐隐提示还有更多内容 */
.disc-slide-text.has-more::after {
  content: "";
  position: sticky;
  display: block;
  bottom: 0;
  height: 0;
}
.disc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4) var(--space-1);
  flex-shrink: 0;
}
.disc-dots {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
}
.disc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(240, 144, 48, 0.3);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.disc-dot.active {
  background: #f09030;
  transform: scale(1.35);
}
.disc-nav {
  display: flex;
  gap: 6px;
}
.disc-nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(200, 120, 0, 0.3);
  background: rgba(255, 249, 240, 0.85);
  color: #b86100;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  padding: 0;
  line-height: 1;
}
.disc-nav-btn:active { background: rgba(240,144,48,0.22); }

/* Live stream tail — raw token feed during day generation */
.gen-stream-live {
  display: block;
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 10px;
  color: var(--color-text-muted, #999);
  opacity: 0.65;
  text-align: left;
  line-height: 1.4;
  padding: var(--space-2) var(--space-3);
  word-break: break-all;
  white-space: pre-wrap;
  min-height: 18px;
}

/* Travel-fact rotating text */
.gen-fact-text {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.6;
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  animation: factFadeIn 0.4s ease;
}

@keyframes factFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mobile-gen-overlay .generating-steps {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ─── Shared Header ─── */
.welcome-header,
.chat-header,
.itinerary-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  z-index: 10;
}

/* ─── Logo ─── */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  color: var(--color-primary);
}
.logo-icon {
  font-size: 20px;
  line-height: 1;
}
.logo-mascot {
  width: 32px; height: 32px;
  object-fit: contain;
}
.logo-text { letter-spacing: -0.3px; }

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px var(--space-5);
  border-radius: var(--radius-xl);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  transition: all var(--transition-fast);
  white-space: nowrap;
  user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  box-shadow: 0 2px 8px rgba(26,115,232,0.35);
}
.btn--primary:hover { background: var(--color-primary-dark); box-shadow: 0 4px 16px rgba(26,115,232,0.45); }

.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}
.btn--ghost:hover { background: var(--color-border-light); color: var(--color-text-primary); }

.btn--accent {
  background: var(--color-accent);
  color: #fff;
}
.btn--accent:hover { background: #e85a2e; }

.btn--sm { padding: 6px var(--space-3); font-size: var(--text-sm); }
.btn--lg { padding: 14px var(--space-8); font-size: var(--text-md); }
.btn--full { width: 100%; }

.btn-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.btn-icon:hover { background: var(--color-border-light); color: var(--color-text-primary); }

/* ─── Inputs ─── */
.input {
  width: 100%;
  padding: 10px var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background: var(--color-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}
.input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26,115,232,0.12);
}
.input-group { display: flex; flex-direction: column; gap: var(--space-2); }
.input-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-secondary); }
.input-hint { font-size: var(--text-xs); color: var(--color-text-muted); }


/* ══════════════════════════════════════�?
   WELCOME SCREEN
══════════════════════════════════════�?*/
.welcome-header { justify-content: space-between; }

.welcome-main {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: 100%;
  margin: 0 auto;
  width: 100%;
}

.welcome-hero { text-align: center; padding: var(--space-4) 0; }
.welcome-brandmark {
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
}
.welcome-brandmark__svg {
  width: 112px;
  height: auto;
  display: block;
  overflow: visible;
}
.welcome-brandmark__cn {
  font-family: "GoForU Serif Black", var(--font-serif);
  font-size: 52px;
  font-weight: 900;
  letter-spacing: -2px;
  fill: var(--color-text-primary);
  stroke: rgba(27,36,54,0.18);
  stroke-width: 0.45px;
  paint-order: stroke fill;
}
.welcome-brandmark__en {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 2px;
  fill: #8FA3B8;
}
.welcome-brandmark__mascot {
  width: 60px;
  height: 60px;
  object-fit: contain;
  flex-shrink: 0;
  margin-left: 4px;
  margin-top: 4px;
}

.welcome-sub {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  margin-top: 6px;
  margin-bottom: var(--space-2);
  line-height: 1.4;
}

.welcome-tagline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* [P1①打磨] FREE STYLE 标题字体统一 brandmark(GO FOR U)风格,浅灰蓝,与走你 brandmark 呼应 */
.welcome-cta .section-label { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 2px; color: #8FA3B8; text-transform: uppercase; }

.section-label {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-primary);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 10px;
}

/* Destination Grid */
.destination-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.dest-card {
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  min-height: 82px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(15,20,36,0.08);
  background: var(--color-surface);
  user-select: none;
  box-shadow: 0 1px 2px rgba(15,20,36,0.04);
}
.dest-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dest-card:active { transform: scale(0.97); }
.dest-card--selected { border-color: color-mix(in srgb, var(--dest-tint) 34%, #fff); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.dest-card-glow {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--dest-tint) 25%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.dest-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.dest-card-code {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--dest-tint);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.dest-card-body { position: relative; z-index: 1; }
.dest-card-name { font-size: 16px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 2px; line-height: 1.25; }
.dest-card-sub  { font-size: 11.5px; color: var(--color-text-muted); margin-top: 0; }

.dest-card-visa {
  font-size: 9.5px;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 99px;
  background: var(--color-success-soft);
  color: var(--color-success);
  letter-spacing: .02em;
  max-width: 52px;
  line-height: 1.12;
  text-align: center;
  white-space: normal;
}

/* Welcome CTA */
.welcome-cta {
  text-align: center;
  padding: var(--space-5) var(--space-5) var(--space-6);
  margin: 0 calc(-1 * var(--space-4));
  background: linear-gradient(to bottom, transparent, rgba(99,120,255,0.06) 30%, rgba(99,120,255,0.11));
  border-top: 1px solid rgba(99,120,255,0.10);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.welcome-hint { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }

/* [P0 需求④] 自由定制输入框 */
.freetext-wrap { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.freetext-input { width: 100%; min-height: 64px; padding: var(--space-2) var(--space-3); border: 1.5px solid var(--color-border, #e2e2e2); border-radius: var(--radius-md); font-size: var(--text-base); resize: vertical; font-family: inherit; line-height: 1.5; background: var(--color-surface, #fff); color: var(--color-text); box-sizing: border-box; }
.freetext-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(47, 107, 247, 0.15); }
#btn-start-freetext { align-self: flex-end; white-space: nowrap; }
@media (max-width: 480px) { #btn-start-freetext { align-self: stretch; } }


/* ══════════════════════════════════════�?
   CHAT SCREEN
══════════════════════════════════════�?*/
.chat-header { justify-content: flex-start; gap: var(--space-3); }
.chat-header-info { flex: 1; }
.chat-header-title { display: block; font-weight: var(--weight-bold); font-size: var(--text-base); line-height: 1.2; }
.chat-header-status { font-size: var(--text-xs); color: var(--color-success); }
.chat-header-status::before { content: "●"; margin-right: 4px; }
.chat-header-actions { display: flex; align-items: center; gap: var(--space-2); }

/* Turn Indicator */
.turn-indicator { display: flex; align-items: center; gap: 4px; padding: 0 var(--space-2); }
.turn-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-border); transition: background var(--transition-normal);
}
.turn-dot--active { background: var(--color-primary); }
.turn-dot--done { background: var(--color-success); }

/* Chat Layout */
.chat-layout {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

.chat-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--color-border);
}

/* ─── Preview Panel ─── */
.preview-panel {
  width: 420px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  overflow: hidden;
}

.preview-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  padding: var(--space-8);
  text-align: center;
}
.preview-icon { font-size: 48px; opacity: 0.5; }
.preview-placeholder p { font-size: var(--text-base); }
.preview-hint { font-size: var(--text-sm) !important; }

/* Generating State */
.preview-generating {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-8) var(--space-6);
  gap: var(--space-5);
  overflow-y: auto;
}

.generating-animation {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--color-primary-light);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.generating-pulse {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-primary);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(0.8); opacity: 0.7; }
  50% { transform: scale(1.1); opacity: 1; }
}

.generating-label {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.generating-stream {
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.5;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  word-break: break-all;
  white-space: pre-wrap;
}

.generating-steps {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.gen-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--transition-normal);
}
.gen-step--active { color: var(--color-primary); font-weight: var(--weight-medium); }
.gen-step--done { color: var(--color-success); }
.gen-step-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-border); transition: background var(--transition-normal);
}
.gen-step--active .gen-step-dot { background: var(--color-primary); animation: pulse 1s ease infinite; }
.gen-step--done .gen-step-dot { background: var(--color-success); }

/* ── Generation Progress Pill (fixed, visible on all screens) ── */
.gen-pill {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-110%);
  z-index: 200;
  max-width: 420px;
  width: calc(100% - var(--space-8));
  background: var(--color-text-primary);
  color: var(--color-text-on-dark);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.gen-pill:not(.gen-pill--hidden) {
  transform: translateX(-50%) translateY(0);
}
.gen-pill--complete { background: var(--color-success); cursor: pointer; }
.gen-pill--paused   { background: var(--color-primary); }
.gen-pill-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.45);
  flex-shrink: 0;
}
.gen-pill--generating .gen-pill-dot {
  background: white;
  animation: pulse 1s ease-in-out infinite;
}
.gen-pill--paused .gen-pill-dot,
.gen-pill--complete .gen-pill-dot { background: rgba(255,255,255,0.8); }
.gen-pill-text {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gen-pill-btn {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: white;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.gen-pill-btn:active { opacity: 0.75; }
.gen-pill-btn--hidden { display: none; }

/* Preview Result (summary card after gen) */
.preview-result {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.result-summary-card {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  color: #fff;
}
.result-dest { font-size: var(--text-lg); font-weight: var(--weight-bold); margin-bottom: var(--space-1); }
.result-dates { font-size: var(--text-sm); opacity: 0.85; }
.result-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-3); margin-top: var(--space-4);
}
.result-stat { }
.result-stat-val { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.result-stat-label { font-size: var(--text-xs); opacity: 0.75; }

.result-view-btn {
  width: 100%;
  padding: 12px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-xl);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  transition: all var(--transition-fast);
  text-align: center;
  cursor: pointer;
}
.result-view-btn:hover { background: var(--color-primary-dark); }


/* ══════════════════════════════════════�?
   ITINERARY SCREEN
══════════════════════════════════════�?*/
.itinerary-header { justify-content: flex-start; }
/* [C1] min-width:0 是关键:flex 子项默认 min-width:auto 不收缩,长标题/meta 被挤断
   又因 header 固定高度(--header-height)溢出底部,视觉上压到下方封面 → 用户看到的"乱码"。
   加 min-width:0 + nowrap + ellipsis 让标题/meta 各自单行截断,不再溢出。 */
.itinerary-header-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.itinerary-title { font-size: var(--text-md); font-weight: var(--weight-bold); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.itinerary-meta { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.itinerary-header-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

/* Safety Banner */
.safety-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(90deg, #FFF3E0, #FFF8E1);
  border-bottom: 1px solid #FFD54F;
  font-size: var(--text-sm);
  flex-shrink: 0;
}
.safety-banner--critical { background: linear-gradient(90deg, #FDECEA, #FDE8E8); border-bottom-color: #F28B82; }
.safety-banner-icon { font-size: 16px; flex-shrink: 0; }
.safety-banner-text { flex: 1; color: var(--color-text-primary); }
.safety-banner-close {
  font-size: 18px; color: var(--color-text-muted);
  padding: 0 var(--space-1); line-height: 1;
}
.safety-banner-close:hover { color: var(--color-text-primary); }

/* 出发前医疗信息提醒(准备阶段+未填,可关闭) */
.medical-prompt-banner {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 9px var(--space-4);
  background: linear-gradient(90deg, #FFF7ED, #FFFBEB);
  border-bottom: 1px solid #FED7AA;
  font-size: var(--text-sm);
  color: #92400e;
}
.medical-prompt-icon { font-size: 16px; flex-shrink: 0; }
.medical-prompt-text { flex: 1; line-height: 1.4; }
.medical-prompt-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  background: #ea580c;
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.medical-prompt-close {
  flex-shrink: 0;
  background: none; border: none;
  font-size: 18px; line-height: 1;
  color: #92400e; opacity: 0.55;
  cursor: pointer;
}
.medical-prompt-close:hover { opacity: 1; }

/* Tabs ─ 段选择器（规划/准备/旅途）+ 当前段子 tab */
.itinerary-tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}

/* [bugfix] 两层 tab 视觉层次不清:胶囊行(环节)和下方 tab 行(子页)权重接近,看着像并列两排 tab。
   现在:①环节胶囊行用白底+略深投影,视觉上"浮起来"当主导航;②子 tab 行退到浅灰底槽里,字号/字重降级,读作从属于上方胶囊 */
.seg-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  box-shadow: 0 1px 0 rgba(15,20,36,.05);
  position: relative;
  z-index: 1;
}
.seg-pills {
  display: flex;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.seg-pill {
  flex: 0 0 auto;
  padding: 5px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}
.seg-pill:hover { color: var(--color-primary); }
.seg-pill--active {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: var(--weight-semibold);
}
/* 全局地图按钮（任意环节可见） */
.seg-map-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.seg-map-btn:hover { border-color: var(--color-primary); }
.seg-map-btn--active {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

/* 当前段的子 tab 行（同时只显示一段）— 退到浅灰底槽,降级为环节胶囊下方的从属导航 */
.seg-tabs {
  position: relative;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-light);
}
.seg-tab-row { display: none; }
.seg-tab-row--active { display: flex; }

.tab-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--space-2) var(--space-2) 10px;
  font-size: 12.5px;
  font-weight: var(--weight-normal);
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
  white-space: nowrap;
  background: transparent;
}
.tab-btn:hover { color: var(--color-primary); }
.tab-btn--active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--weight-semibold); }
.tab-btn--action { flex: 0 0 auto; padding: var(--space-3) var(--space-3); }

/* 求助 占位 tab */
.placeholder-tab { max-width: 480px; margin: 0 auto; }
.placeholder-tab-head { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); }
.placeholder-tab-icon { font-size: 28px; line-height: 1; }
.placeholder-tab-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text); }
.placeholder-tab-sub { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 4px; }
.placeholder-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.placeholder-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.placeholder-chip:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-light); }
.placeholder-tab-note { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-4); }
.placeholder-tab-actions { margin-top: var(--space-4); }

.tab-panels { flex: 1; overflow: hidden; position: relative; }
.tab-panel { position: absolute; inset: 0; overflow-y: auto; display: none; padding-bottom: 120px; }
.tab-panel--active { display: block; }

/* Map / Budget containers */
.map-container { height: 100%; }
.budget-container, .safety-container, .revise-container, .help-container { padding: var(--space-5); }
.safety-customs-estimate { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-3); background: var(--color-surface); padding: 6px 10px; border-radius: 6px; }
.safety-customs-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin: var(--space-3) 0 var(--space-2); }

/* Sprint 2 placeholder */
.sprint2-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  text-align: center;
}

/* JSON Preview (Sprint 1 debug) */
.json-preview {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--color-border);
  max-height: 500px;
  overflow-y: auto;
}

/* FAB */
.fab {
  position: absolute;
  bottom: var(--space-6);
  right: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  background: rgba(255,255,255,0.85);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  z-index: 50;
  backdrop-filter: blur(8px);
}
.fab:hover { background: #fff; color: var(--color-primary); border-color: var(--color-primary-light); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.fab:active { transform: scale(0.96); }


/* ══════════════════════════════════════�?
   MODAL
══════════════════════════════════════�?*/
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition-normal);
}
.modal-overlay--visible { opacity: 1; pointer-events: all; }

.modal {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-xl);
  transform: translateY(16px);
  transition: transform var(--transition-normal);
}
.modal-overlay--visible .modal { transform: translateY(0); }

.modal-header { text-align: center; margin-bottom: var(--space-6); }
.modal-icon { font-size: 40px; margin-bottom: var(--space-3); }
.modal-title { font-size: var(--text-lg); font-weight: var(--weight-bold); margin-bottom: var(--space-2); }
.modal-desc { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.6; }

.modal-body { margin-bottom: var(--space-6); }
.modal-footer {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  padding: var(--space-4) var(--space-6) var(--space-5);
}
.modal--experience {
  max-width: 460px;
}
.experience-mode-grid {
  display: grid;
  gap: 12px;
}
.experience-mode-card {
  width: 100%;
  text-align: left;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid #dbe7f5;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.experience-mode-card:hover {
  transform: translateY(-1px);
  border-color: #93c5fd;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.12);
}
.experience-mode-card--accent {
  border-color: #bfdbfe;
  background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
}
.experience-mode-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  margin-bottom: 10px;
}
.experience-mode-card__title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin-bottom: 6px;
}
.experience-mode-card__desc {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.experience-mode-note {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ─── Provider Tabs (settings modal) ─── */
.provider-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.provider-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3) var(--space-2);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  gap: 2px;
}
.provider-tab:hover { border-color: var(--color-primary); }
.provider-tab--active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.provider-tab-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}
.provider-tab-sub {
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: center;
}
.provider-panel { }
.provider-pricing {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-border-light);
  border-radius: var(--radius-sm);
}


/* ══════════════════════════════════════�?
   TOAST
══════════════════════════════════════�?*/
.toast {
  position: fixed;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-text-primary);
  color: #fff;
  padding: 10px var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: all var(--transition-normal);
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
}
.toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast--error { background: var(--color-safety-red); }
.toast--success { background: var(--color-success); }


/* ══════════════════════════════════════�?
   UTILITY
══════════════════════════════════════�?*/
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Scrollbar styling */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }


/* ══════════════════════════════════════�?
   RESPONSIVE
══════════════════════════════════════�?*/
@media (max-width: 768px) {
  .preview-panel { display: none; }
  .chat-panel { border-right: none; }

  .welcome-main { padding: var(--space-5) var(--space-4); }
  .destination-grid { grid-template-columns: repeat(2, 1fr); }

  .fab span { display: none; }
  .fab { padding: 14px; border-radius: 50%; }

  .itinerary-tabs { gap: 0; }
  .tab-btn { font-size: var(--text-xs); padding: var(--space-3) var(--space-2); }
}

@media (max-width: 375px) {
  .destination-grid { grid-template-columns: repeat(2, 1fr); }
  .btn--lg { padding: 12px var(--space-6); font-size: var(--text-base); }
}


/* ══════════════════════════════════════�?
   BUDGET COMPARISON CARD
══════════════════════════════════════�?*/
.budget-comparison-card {
  border: 1px solid;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.budget-cmp-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--text-sm); padding: var(--space-1) 0;
  color: var(--color-text-secondary);
}
.budget-cmp-row--result {
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
}
.budget-cmp-val { font-weight: var(--weight-semibold); }
.budget-cmp-divider {
  height: 1px; background: currentColor; opacity: 0.2;
  margin: var(--space-2) 0;
}
.budget-cmp-note {
  font-size: var(--text-xs); color: var(--color-text-muted);
  margin-top: var(--space-2); line-height: 1.5;
}


/* ══════════════════════════════════════�?
   AI CONVERSATIONAL ONBOARDING
══════════════════════════════════════�?*/
.onboarding-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.ob-card {
  width: 100%; max-width: 360px;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  display: flex; flex-direction: column;
  max-height: 80vh; overflow: hidden;
}
.ob-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
  flex-shrink: 0;
}
.ob-title { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--color-text-primary); }
.ob-sub   { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.ob-skip  {
  font-size: var(--text-xs); color: var(--color-text-muted);
  background: none; border: none; cursor: pointer; padding: 2px 0;
  flex-shrink: 0; margin-left: var(--space-3);
}
.ob-skip:hover { color: var(--color-text-secondary); }
.ob-chat {
  flex: 1; overflow-y: auto;
  padding: var(--space-4) var(--space-4) var(--space-2);
  display: flex; flex-direction: column; gap: var(--space-3);
  min-height: 160px;
}
.ob-message {
  max-width: 85%; font-size: var(--text-sm); line-height: 1.5;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  white-space: pre-wrap;
}
.ob-message--ai {
  background: var(--color-primary-light);
  color: var(--color-text-primary);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.ob-message--user {
  background: var(--color-primary);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.ob-message--typing { opacity: 0.6; font-size: var(--text-base); letter-spacing: 3px; }
.ob-message--thinking {
  opacity: 0.55;
  font-size: 11px;
  color: var(--color-text-secondary);
  font-style: italic;
  white-space: pre-wrap;
  line-height: 1.4;
  max-height: 60px;
  overflow: hidden;
}
.ob-message--thinking::before { content: "💭 "; font-style: normal; }
.ob-message--streaming {
  opacity: 0.88;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  line-height: 1.5;
}
.ob-message--streaming::after {
  content: "�?;
  color: var(--color-primary);
  animation: ob-blink 0.8s step-start infinite;
  margin-left: 2px;
  font-size: 10px;
}
@keyframes ob-blink { 0%,100%{opacity:1} 50%{opacity:0} }
.ob-quick-replies {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-2);
  flex-shrink: 0;
}
.ob-qr-btn {
  font-size: var(--text-xs); color: var(--color-primary);
  border: 1px solid var(--color-primary); border-radius: 999px;
  background: var(--color-primary-light); padding: 5px var(--space-3);
  cursor: pointer; transition: all 0.15s;
}
.ob-qr-btn:hover { background: var(--color-primary); color: #fff; }
.ob-qr-multi { position: relative; }
.ob-qr-multi--selected {
  background: var(--color-primary); color: #fff;
}
.ob-qr-multi--selected::after {
  content: ' �?; font-size: 10px;
}
.ob-qr-confirm {
  background: var(--color-primary); color: #fff;
  font-weight: 600; margin-top: 4px;
  display: none;
}
.ob-qr-confirm:hover { opacity: 0.85; }
.ob-input-row {
  display: flex; gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border-light);
  flex-shrink: 0;
}
.ob-input {
  flex: 1; height: 38px; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 0 var(--space-3);
  font-size: var(--text-sm); background: var(--color-bg);
  outline: none;
}
.ob-input:focus { border-color: var(--color-primary); }
.ob-send {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--color-primary); color: #fff; border: none;
  font-size: var(--text-md); cursor: pointer; flex-shrink: 0;
  transition: opacity 0.15s;
}
.ob-send:disabled { opacity: 0.35; cursor: default; }


/* ══════════════════════════════════════�?
   行前必读 QUICK REFERENCE CARD
══════════════════════════════════════�?*/
.quick-ref-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  overflow: hidden;
}
.quick-ref-toggle {
  width: 100%; display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: none; border: none; cursor: pointer;
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--color-text-primary); text-align: left;
}
.quick-ref-count {
  font-size: var(--text-xs); color: var(--color-text-muted);
  font-weight: var(--weight-normal);
}
.quick-ref-arrow { margin-left: auto; color: var(--color-text-muted); font-size: 12px; }
.quick-ref-body {
  border-top: 1px solid var(--color-border-light);
  padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: all 0.2s;
}
.quick-ref-body--collapsed { display: none; }
.quick-ref-item {
  display: flex; gap: var(--space-3); align-items: flex-start;
}
.quick-ref-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.quick-ref-content { display: flex; flex-direction: column; gap: 2px; }
.quick-ref-label {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
}
.quick-ref-text { font-size: var(--text-sm); color: var(--color-text-primary); line-height: 1.5; }


/* ══════════════════════════════════════�?
   ACTIVITY INTEL FIELDS
══════════════════════════════════════�?*/
.act-intel-block {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin: var(--space-2) 0;
}
.act-intel-item {
  display: flex; gap: var(--space-2); align-items: flex-start;
  font-size: var(--text-xs); line-height: 1.5;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
.act-intel-icon { flex-shrink: 0; }
.intel--transfer { background: #E8F0FE; color: #1A55B0; }
.intel--dress    { background: #FFF0F3; color: #C41E3A; }
.intel--entry    { background: #E6F4EA; color: #0B6E35; }
.intel--payment  { background: #FEF3E2; color: #8B5000; }


/* ══════════════════════════════════════�?
   AUTH (登录按钮 + 用户状�?+ 登录弹窗)
══════════════════════════════════════�?*/

/* Welcome header auth button */
.btn-auth {
  padding: 6px 14px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn-auth:hover { background: var(--color-primary); color: #fff; }

/* Logged-in user chip */
.auth-user-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--color-surface);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.auth-user-phone { color: var(--color-text); font-weight: var(--weight-medium); }
.auth-logout-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  padding: 0;
}
.auth-logout-btn:hover { color: var(--color-danger, #e53e3e); }

/* Login modal phone row */
.login-phone-row {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.login-phone-prefix {
  padding: 0 12px;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
  height: 44px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.login-phone-input {
  border: none !important;
  border-radius: 0 !important;
  flex: 1;
}

/* Login modal code row */
.login-code-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.login-code-input { flex: 1; letter-spacing: 4px; font-size: var(--text-lg); text-align: center; }

/* Countdown badge on resend button */
.btn--sm { padding: 6px 12px; font-size: var(--text-sm); min-width: 80px; }

/* ─── My Trips button in auth chip ─── */
.auth-mytrips-btn {
  display: flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  color: var(--color-primary); font-size: var(--text-sm);
  font-weight: var(--weight-medium); padding: 0 4px;
  border-right: 1px solid var(--color-border); margin-right: 2px; padding-right: 8px;
}
.auth-mytrips-btn:hover { text-decoration: underline; }

/* ─── Trips list modal ─── */
.modal--trips { max-height: 80vh; display: flex; flex-direction: column; }
.modal--trips .modal-body { flex: 1; overflow-y: auto; padding: 0; }

.trips-list { display: flex; flex-direction: column; }
.trip-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer; transition: background 0.15s;
}
.trip-item:last-child { border-bottom: none; }
.trip-item:hover { background: var(--color-surface); }
.trip-item-icon { font-size: 28px; flex-shrink: 0; }
.trip-item-info { flex: 1; min-width: 0; }
.trip-item-dest { font-weight: var(--weight-semibold); font-size: var(--text-base); }
.trip-item-meta { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 2px; }
.trip-item-arrow { color: var(--color-text-secondary); flex-shrink: 0; }
.trip-item-del {
  background: none; border: none; cursor: pointer; flex-shrink: 0;
  font-size: 16px; padding: 4px 6px; border-radius: 6px;
  opacity: 0.4; transition: opacity 0.15s, background 0.15s;
}
.trip-item:hover .trip-item-del { opacity: 0.7; }
.trip-item-del:hover { opacity: 1 !important; background: #fee2e2; }

/* ─── Theme selector (welcome screen) ─── */
.theme-section { padding: 0 var(--space-5) var(--space-4); }
.theme-section-sub { font-size: var(--text-xs); color: var(--color-text-secondary); font-weight: var(--weight-regular); margin-left: 4px; }
.theme-cards-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  padding-bottom: var(--space-1);
}
.theme-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 10px 10px 9px;
  border-radius: 16px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.theme-card:hover { border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.theme-card--active {
  border-color: var(--color-primary);
  background: #EEF3FF;
}
.theme-card--active .theme-card-name { color: var(--color-primary); font-weight: var(--weight-semibold); }
.theme-card--soon { opacity: 0.45; cursor: default; pointer-events: none; }
.theme-card-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}
/* Per-theme icon gradient backgrounds */
.theme-card[data-theme="food"] .theme-card-icon {
  background: linear-gradient(135deg, #FFD166 0%, #FF6D3F 100%);
  box-shadow: 0 2px 6px rgba(255,109,63,0.35);
}
.theme-card[data-theme="food"] .theme-card-name { color: #E53935; }
.theme-card[data-theme="photo"] .theme-card-icon {
  background: linear-gradient(135deg, #A8EDBE 0%, #0B8043 100%);
}
.theme-card[data-theme="wellness"] .theme-card-icon {
  background: linear-gradient(135deg, #D4A7F5 0%, #7B2D8E 100%);
}
.theme-card[data-theme="surf"] .theme-card-icon {
  background: linear-gradient(135deg, #81D4FA 0%, #0277BD 100%);
}
.theme-card[data-theme="ski"] .theme-card-icon {
  background: linear-gradient(135deg, #B3E5FC 0%, #4FC3F7 100%);
}
.theme-card[data-theme="family"] .theme-card-icon {
  background: linear-gradient(135deg, #F8BBD0 0%, #D81B60 100%);
  box-shadow: 0 2px 6px rgba(216,27,96,0.35);
}
.theme-card[data-theme="family"] .theme-card-name { color: #D81B60; }
.theme-card-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); }
.theme-card-feats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.theme-feat {
  font-size: 10px;
  line-height: 1.4;
  color: var(--color-text-secondary);
  background: var(--color-bg);
  padding: 2px 7px;
  border-radius: 8px;
  white-space: nowrap;
}
.theme-card-badge { font-size: 10px; color: var(--color-text-secondary); }

/* ─── Theme overview card (itinerary view) ─── */
.theme-ov-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border);
}
.theme-ov-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
}
.theme-ov-icon { font-size: 28px; flex-shrink: 0; }
.theme-ov-name { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-text); }
.theme-ov-tagline { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 2px; }
.theme-ov-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-3);
}
.theme-ov-hl {
  font-size: var(--text-xs);
  background: var(--color-bg);
  border-radius: var(--radius-full);
  padding: 3px 10px;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}
.theme-ov-goals {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}
.theme-ov-goals-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); color: var(--color-text); }
.theme-ov-goals-list { margin: 0; padding-left: var(--space-4); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.75; }
.theme-ov-goals-list li { margin-bottom: 4px; }
.theme-ov-study-summary { margin: 8px 0 0; font-size: var(--text-xs); color: var(--color-text-secondary); line-height: 1.6; }
.theme-ov-highlights-wrap { border-top: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-text-secondary); }
.theme-ov-highlights-wrap summary { padding: var(--space-2) var(--space-4); cursor: pointer; list-style: none; }
.theme-ov-highlights-wrap summary::-webkit-details-marker { display: none; }
.theme-ov-guide {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}
.theme-ov-guide-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); color: var(--color-text); }
.theme-ov-guide-text { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.6; white-space: pre-line; }
.food-guide-cat { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.food-guide-cat:last-child { border-bottom: none; padding-bottom: 0; }
.food-guide-cat-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); margin-bottom: var(--space-1); }
.food-guide-cat-text { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.6; }
.theme-ov-practical { border-top: 1px solid var(--color-border); }
.theme-ov-practical summary {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  list-style: none;
}
.theme-ov-practical summary::-webkit-details-marker { display: none; }
.theme-ov-practical-list { padding: 0 var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.theme-ov-practical-item { display: flex; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-secondary); }
.theme-ov-practical-item > span:first-child { flex-shrink: 0; font-weight: var(--weight-medium); color: var(--color-text); }

/* ══════════════════════════════════════�?
   Phase B �?旅途中模式
══════════════════════════════════════�?*/

/* ─── 出发横幅 ─── */
.phaseb-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}
.phaseb-banner--warn {
  background: #FFF8E1;
  color: #B45309;
  border-color: #FCD34D;
}
.phaseb-banner--active {
  background: linear-gradient(90deg, #E8F5E9 0%, #F0FDF4 100%);
  color: #166534;
  border-color: #86EFAC;
}
.phaseb-banner-icon { font-size: 16px; flex-shrink: 0; }
.phaseb-banner-text { flex: 1; line-height: 1.4; }
.phaseb-start-btn {
  flex-shrink: 0;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  padding: 5px 14px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  white-space: nowrap;
}
.phaseb-start-btn:active { opacity: 0.85; }

/* ─── 今日 tab 高亮 ─── */
.tab-btn--phaseb {
  color: #166534 !important;
  font-weight: var(--weight-semibold) !important;
}
.tab-btn--phaseb.tab-btn--active {
  border-bottom-color: #16a34a !important;
}

/* ─── 三阶�?Phase Header ─── */
/* ─── Day Brief / Highlights / Tips（当日特色 + 攻略，行程页 & 今日页共用）─── */
.day-brief, .today-brief {
  margin: 8px 0 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #eef4ff 0%, #f3effd 100%);
  border-left: 3px solid #5b8def;
  border-radius: 10px;
}
.today-brief { margin-top: 0; }
.day-brief__title, .today-brief__title {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: #1e3a8a; line-height: 1.5;
}
/* 今日总览可折叠(阅读后收起) */
.today-brief__title { cursor: pointer; }
.today-brief__caret { margin-left: auto; font-size: 12px; opacity: 0.55; transition: transform .2s; }
.today-brief--collapsed .today-brief__body { display: none; }
.today-brief--collapsed .today-brief__caret { transform: rotate(-90deg); }
.day-brief__highlights, .today-brief__highlights {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.day-brief__hl, .today-brief__hl {
  background: #fef3c7; color: #92400e;
  padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 500;
}
.day-brief__tips, .today-brief__tips { margin-top: 8px; }
.day-brief__tip, .today-brief__tip {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #166534; margin-bottom: 4px;
}
/* [bugfix] 今日研学要点合并进 brief 块(只做一行标题速览,完整卡在下方活动卡里) */
.today-brief__study {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed rgba(91, 141, 239, 0.35);
  font-size: 12.5px; line-height: 1.6;
}
.today-brief__study-title { font-weight: 600; color: #6d28d9; }
.today-brief__study-names { color: var(--color-text-secondary); }

.today-phase-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}
/* 出发 �?浅蓝底，左侧品牌�?accent �?*/
.today-phase-header--depart {
  background: #EEF4FF;
  border-left: 4px solid var(--color-primary);
}
/* 游玩 �?浅绿�?*/
.today-phase-header--trip {
  background: #F0FDF4;
  border-left: 4px solid #16a34a;
}
/* 离开 �?浅紫�?*/
.today-phase-header--leave {
  background: #F5F3FF;
  border-left: 4px solid #7c3aed;
}
.today-phase-header--transfer {
  background: #FFF7ED;
  border-left: 4px solid #f97316;
}
.today-phase-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.today-phase-title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: 1.2;
}
.today-phase-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ── City Combo Recommendation Cards ── */
.city-combo-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.city-combo-card {
  background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 12px;
  padding: 12px 14px; cursor: pointer; transition: border-color .18s, box-shadow .18s;
}
.city-combo-card:hover { border-color: #0ea5e9; box-shadow: 0 2px 8px rgba(14,165,233,0.12); }
.city-combo-card.ccc--selected { border-color: #0284c7; background: #f0f9ff; box-shadow: 0 0 0 3px rgba(2,132,199,0.15); }
.ccc-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.ccc-chain { font-size: 15px; font-weight: 600; color: #0f172a; }
.ccc-vibe {
  font-size: 11px; font-weight: 500; color: #0369a1;
  background: #e0f2fe; padding: 2px 8px; border-radius: 20px; white-space: nowrap;
}
.ccc-nights { font-size: 12px; color: #64748b; margin-bottom: 4px; }
.ccc-why { font-size: 13px; color: #475569; line-height: 1.5; }

/* ─── 多城市总览 ─── */
/* ── Overview Tab: city transfer timeline ── */
.ov-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 4px;
}
.ov-tl-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  padding-bottom: 12px;
}
.ov-tl-row::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 18px;
  bottom: 0;
  width: 2px;
  background: #e2e8f0;
}
.ov-tl-row:last-child::before { display: none; }
.ov-tl-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  background: #94a3b8;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #94a3b8;
  z-index: 1;
}
.ov-tl-dot--city     { background: #1d4ed8; box-shadow: 0 0 0 2px #1d4ed8; }
.ov-tl-dot--transfer { background: #e2e8f0; box-shadow: 0 0 0 2px #cbd5e1; width: 10px; height: 10px; margin-top: 5px; margin-left: 3px; }
.ov-tl-row--transfer { padding-bottom: 8px; opacity: 0.8; }
.ov-tl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ov-tl-city { font-size: 15px; font-weight: 700; color: #1e3a8a; }
.ov-tl-nights { font-size: 12px; color: #475569; font-weight: 500; }
.ov-tl-date { font-size: 11px; color: #94a3b8; }
.ov-tl-hotel { font-size: 12px; color: #64748b; margin-top: 2px; }
.ov-tl-transfer-label { font-size: 12px; font-weight: 600; color: #059669; }
.ov-tl-btn { font-size: 11px; padding: 4px 10px; margin-top: 4px; align-self: flex-start; }

.multicity-overview {
  padding: 0 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.multicity-overview-hero {
  background: #fff;
  border: 1px solid var(--cream-line);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(27,36,54,.04);
}
.multicity-overview-kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--cream-warm);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.multicity-overview-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--cream-ink);
  line-height: 1.15;
}
.multicity-overview-desc {
  margin-top: 8px;
  font-size: var(--text-sm);
  color: var(--cream-mute);
  line-height: 1.6;
}
.multicity-overview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.multicity-overview-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(47,127,217,.08);
  border: 1px solid rgba(47,127,217,.08);
  font-size: 12px;
  color: var(--cream-brand);
  font-weight: 600;
}
.multicity-relay {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.multicity-relay::-webkit-scrollbar { display: none; }
.multicity-relay-stop {
  flex: 0 0 auto;
  min-width: 124px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--cream-line);
  background: #fff;
  box-shadow: 0 1px 2px rgba(27,36,54,.04);
}
.multicity-relay-stop--past {
  opacity: 0.72;
  background: #f8fafc;
}
.multicity-relay-stop--current {
  border-color: rgba(74,158,232,.30);
  background: linear-gradient(180deg, #f7fbff 0%, #fff 100%);
  box-shadow: 0 10px 20px rgba(47,127,217,.10);
}
.multicity-relay-stop--next {
  border-color: rgba(230,154,30,.25);
  background: linear-gradient(180deg, #fffaf0 0%, #fff 100%);
}
.multicity-relay-stop__state {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--cream-mute);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.multicity-relay-stop__name {
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--cream-ink);
}
.multicity-relay-stop__meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--cream-mute);
  line-height: 1.5;
}
.multicity-overview-grid {
  display: grid;
  gap: 12px;
}
.multicity-overview-card {
  background: #fff;
  border: 1px solid var(--cream-line);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(27,36,54,.04);
}
.multicity-overview-card--current {
  border-color: rgba(74,158,232,.24);
  background: linear-gradient(180deg, #fff 0%, #f7fbff 100%);
}
.multicity-overview-card--next {
  border-color: rgba(230,154,30,.22);
  background: linear-gradient(180deg, #fff 0%, #fffaf0 100%);
}
.multicity-overview-card__label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cream-mute);
}
.multicity-overview-card__title {
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--cream-ink);
}
.multicity-overview-card__sub {
  margin-top: 6px;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--cream-mute);
}
.multicity-overview-card__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.multicity-overview-stat {
  background: rgba(47,127,217,.04);
  border: 1px solid rgba(47,127,217,.08);
  border-radius: 12px;
  padding: 10px 12px;
}
.multicity-overview-stat__label {
  font-size: 9.5px;
  color: var(--cream-mute);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.multicity-overview-stat__value {
  margin-top: 4px;
  font-size: var(--text-sm);
  color: var(--cream-ink);
  font-weight: 700;
  line-height: 1.5;
}
.multicity-overview-card__actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.multicity-action-btn {
  flex: 1;
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  background: #eef2ff;
  color: var(--cream-brand);
}
.multicity-action-btn--primary {
  background: linear-gradient(90deg, #2F6BF7 0%, #4A9EE8 100%);
  color: #fff;
}
.multicity-action-btn--accent {
  background: linear-gradient(90deg, #E69A1E 0%, #F2B14A 100%);
  color: #fff;
}
.multicity-segments {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.multicity-segment {
  border: 1px solid var(--cream-line);
  border-radius: 18px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(27,36,54,.04);
}
.multicity-segment--current {
  border-color: rgba(74,158,232,.24);
  box-shadow: 0 10px 20px rgba(47,127,217,.10);
}
.multicity-segment__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.multicity-segment__name {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--cream-ink);
}
.multicity-segment__meta,
.multicity-segment__desc {
  font-size: var(--text-sm);
  color: var(--cream-mute);
  line-height: 1.6;
  margin-top: 4px;
}
.multicity-segment__badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(47,127,217,.08);
  color: var(--cream-brand);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.multicity-segment__rows {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.multicity-segment__row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: 1.5;
}
.multicity-segment__row span:first-child {
  color: var(--cream-mute);
  min-width: 54px;
  font-weight: 600;
}

/* ─── 多城市转场日 ─── */
.transfer-grid {
  display: grid;
  gap: 12px;
}
.transfer-block {
  background: #fff;
  border: 1px solid var(--cream-line);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(27,36,54,.04);
}
.transfer-block__title {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--cream-brand);
  margin-bottom: 8px;
}
.transfer-block__desc,
.transfer-block__hint {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.transfer-checklist {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.transfer-check {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--cream-line);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--cream-ink);
}
.transfer-check--done {
  background: #eefaf4;
  border-color: rgba(29,174,111,.20);
  color: #166534;
}
.transfer-check__box {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.transfer-summary-card {
  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
  border: 1px solid rgba(230,154,30,.22);
  border-radius: 20px;
  padding: 14px;
}
.transfer-summary-card__title {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--cream-brand);
}
.transfer-summary-card__sub {
  margin-top: 6px;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ─── 多城市更多/城市包 ─── */
.multicity-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.multicity-sheet-action {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--cream-line);
  border-radius: 16px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(27,36,54,.04);
}
.multicity-sheet-action__icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(47,127,217,.08);
  color: var(--cream-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.multicity-sheet-action__title {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--cream-ink);
}
.multicity-sheet-action__desc {
  margin-top: 3px;
  font-size: 12px;
  color: var(--cream-mute);
  line-height: 1.5;
}

/* ─── 阶段内容区块 ─── */
.today-section {
  padding: var(--space-3) var(--space-4) 0;
}
.today-section--utilities {
  padding-top: var(--space-2);
}
.today-section--schedule {
  padding-bottom: var(--space-2);
}
.today-section-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-light);
}
.today-section-title--plain {
  margin-bottom: 4px;
  padding-bottom: 0;
  border-bottom: none;
}
/* 今日地图（嵌入今日页：今日活动 markers + 我的位置 + 路线） */
.today-section--map { padding-bottom: var(--space-2); }
.today-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.today-map {
  height: 220px;
  margin-top: var(--space-2);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: #e8eef3;
}
.map-me-pin {
  font-size: 20px;
  line-height: 26px;
  text-align: center;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.today-fold-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 0 var(--space-2);
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border-light);
  cursor: pointer;
  text-align: left;
}
.today-fold-toggle__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.today-fold-toggle__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
}
.today-fold-toggle__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.today-fold-toggle__chev {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--color-text-muted);
}
.today-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 2px 10px;
}
.today-section-head__main {
  flex: 1;
  min-width: 0;
}
.today-section-meta,
.today-section-gps {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.today-section-gps {
  margin-top: 4px;
  color: #1d4ed8;
}
.phaseb-utilities-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #dbe7f5;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}
.phaseb-schedule-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #d6e6ff;
  border-radius: 22px;
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.08);
  padding: 14px 14px 8px;
  position: relative;
}
.phaseb-schedule-card::before {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
}
.today-info-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.phaseb-info-banner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
  border: none;
  border-bottom: 1px solid #dbe7f5;
  border-radius: 0;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
}
.phaseb-info-banner:active {
  transform: scale(0.99);
}
.phaseb-info-banner__left {
  min-width: 0;
}
.phaseb-info-banner__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: #1d4ed8;
  margin-bottom: 4px;
}
.phaseb-info-banner__sub {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.phaseb-info-banner__arrow {
  font-size: 20px;
  color: #2563eb;
  flex-shrink: 0;
}
.phaseb-popup-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
}
.phaseb-popup-row:last-child {
  border-bottom: none;
}
.phaseb-popup-row__icon {
  font-size: 18px;
  flex-shrink: 0;
}
.phaseb-popup-row__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.phaseb-popup-row__value {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: 1.6;
}
.phaseb-imported-day-slot {
  padding-top: 2px;
}
.phaseb-imported-day {
  padding-bottom: var(--space-1);
}
.phaseb-imported-day .day-header {
  padding: 2px 2px 0;
}
.phaseb-imported-day .activity-list {
  max-height: min(58vh, 500px);
  overflow-y: auto;
  padding-right: 4px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
.phaseb-imported-day .activity-list::-webkit-scrollbar {
  width: 4px;
}
.phaseb-imported-day .activity-list::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.55);
  border-radius: 999px;
}
.phaseb-imported-act--past .timeline-line,
.phaseb-imported-act-card--past {
  opacity: 0.5;
}
.phaseb-imported-act-card--past {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-color: #e2e8f0;
  box-shadow: none;
  padding: 12px 12px 10px;
}
.phaseb-imported-act--past .act-header,
.phaseb-imported-act--past .act-location {
  margin-bottom: 6px;
}
.phaseb-imported-act--past .act-name {
  font-size: 14px;
  color: #64748b;
}
.phaseb-imported-act--past .act-time,
.phaseb-imported-act--past .act-location {
  color: #94a3b8;
}
.phaseb-imported-act--past .act-name-local,
.phaseb-imported-act--past .act-description,
.phaseb-imported-act--past .act-tags,
.phaseb-imported-act--past .act-photo,
.phaseb-imported-act--past .act-photo-credit,
.phaseb-imported-act--past .act-safety-tip,
.phaseb-imported-act--past .act-detail-block,
.phaseb-imported-act--past .act-intel-block,
.phaseb-imported-act--past .act-map-row,
.phaseb-imported-act--past .transport-connector {
  display: none !important;
}
.phaseb-imported-act--past .timeline-dot {
  color: #cbd5e1;
  box-shadow: 0 0 0 2px #cbd5e1;
}
.phaseb-imported-act-card--active,
.phaseb-imported-act-card--focus {
  border-color: #93c5fd;
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.12);
}
.phaseb-imported-act--active .timeline-dot,
.phaseb-imported-act--focus .timeline-dot {
  transform: scale(1.14);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.phaseb-act-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.phaseb-act-title-row .act-name {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
.phaseb-inline-rescue-btn {
  flex-shrink: 0;
  border: 1px solid #fed7aa;
  background: #fff7ed;
  color: #c2410c;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(251, 146, 60, 0.12);
}
.phaseb-inline-rescue-btn:active {
  transform: scale(0.96);
}
.today-info-row {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-light);
  line-height: 1.5;
}
.today-info-row:last-child { border-bottom: none; }

/* ─── 可勾选清�?─── */
.today-checklist {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.today-check-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
  cursor: pointer;
  transition: background 0.15s;
}
.today-check-item:last-child { border-bottom: none; }
.today-check-item:active { background: var(--color-bg); }
.today-check-item--done .today-check-text {
  text-decoration: line-through;
  color: var(--color-text-muted);
}
.today-check-box { font-size: 16px; flex-shrink: 0; }
.today-check-text { font-size: var(--text-sm); color: var(--color-text-primary); line-height: 1.4; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.today-check-optional {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: #7c3aed;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.4;
  flex-shrink: 0;
}

/* ─── 活动列表（出�?离开阶段�?─── */
.today-act-list {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  padding-bottom: var(--space-1);
}
.today-act-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
}
.today-act-row:last-child { border-bottom: none; }
.today-act-time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  flex-shrink: 0;
  min-width: 44px;
  font-variant-numeric: tabular-nums;
}
.today-act-name {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: 1.4;
}

/* ─── 今日聚焦面板 ─── */
.phaseb-today-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  position: sticky;
  top: 0;
  z-index: 1;
}
.phaseb-today-day {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.phaseb-today-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.phaseb-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.phaseb-progress-fill {
  height: 100%;
  background: #16a34a;
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}
.phaseb-progress-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ─── 今日行程入口�?─── */
.today-acts-entry {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  margin: var(--space-3) var(--space-4);
  width: calc(100% - var(--space-8));
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.today-acts-entry:active { background: var(--color-bg); }
.today-acts-entry-left { flex: 1; min-width: 0; }
.today-acts-entry-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: 4px;
}
.today-acts-entry-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}
.today-acts-entry-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.today-acts-entry-gps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.today-acts-entry-arrow {
  font-size: 22px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* ─── 今日行程列表 Overlay ─── */
.today-acts-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0,0,0,0.45);
  align-items: flex-end;
  justify-content: center;
}
.today-acts-sheet {
  background: var(--color-bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.today-acts-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.today-acts-sheet-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.today-acts-sheet-close {
  background: none;
  border: none;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px 8px;
}
.today-acts-sheet-body {
  overflow-y: auto;
  flex: 1;
  padding-bottom: var(--space-6);
}

/* ─── 活动卡片 ─── */
.phaseb-activities {
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.phaseb-activities--inline {
  padding: var(--space-3) 0 0;
}
.phaseb-act-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  transition: opacity 0.2s;
}
.phaseb-act-card.phaseb-act--past {
  opacity: 0.45;
}
.phaseb-act-card.phaseb-act--done {
  opacity: 0.5;
  background: var(--color-bg);
}
.phaseb-check-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: transparent;
  transition: all 0.15s;
  margin-top: 2px;
}
.phaseb-check-btn--done {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.phaseb-check-btn:active { transform: scale(0.9); }
.phaseb-act-body { flex: 1; min-width: 0; }
.phaseb-act-time {
  font-size: var(--text-xs);
  color: var(--color-primary);
  font-weight: var(--weight-medium);
  margin-bottom: 2px;
}
.phaseb-act-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: 3px;
}
.phaseb-act-loc,
.phaseb-act-transport {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* 已完成活动的文字划线 */
.phaseb-act--done .phaseb-act-name {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

/* ─── 航班确认卡片（checklist 顶部�?─── */
.flight-confirm-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.flight-confirm-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}
.flight-confirm-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  align-items: center;
}
.flight-confirm-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  width: 56px;
  flex-shrink: 0;
}
.flight-confirm-input {
  flex: 1;
  font-size: var(--text-sm);
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  background: var(--color-bg);
  outline: none;
}
.flight-confirm-input:focus {
  border-color: var(--color-primary);
  background: var(--color-surface);
}
.flight-confirm-btn {
  width: 100%;
  margin-top: var(--space-2);
  padding: 8px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.flight-confirm-btn:active { opacity: 0.85; }
.flight-confirm-saved {
  font-size: var(--text-xs);
  color: var(--color-success);
  text-align: center;
  margin-top: var(--space-1);
  display: none;
}
.flight-confirm-btn--ghost {
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

/* ─── 住宿确认卡(与航班确认卡同页,出发前向导第3步) ─── */
.hotel-confirm-card {
  margin-top: var(--space-3);
  padding: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.hotel-confirm-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.hotel-confirm-row { margin-bottom: var(--space-2); }
.hotel-confirm-label { font-size: var(--text-xs); color: var(--color-text-secondary); margin-bottom: 3px; }
.hotel-confirm-input-wrap { display: flex; gap: 6px; }
.hotel-confirm-input {
  flex: 1; min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: #fff;
}
.hotel-confirm-input:focus { outline: none; border-color: var(--color-primary); }
.hotel-confirm-ocr {
  flex-shrink: 0;
  padding: 0 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 16px;
  cursor: pointer;
}
.hotel-confirm-saved {
  font-size: var(--text-xs);
  color: var(--color-success);
  text-align: center;
  margin-top: var(--space-1);
  display: none;
}

/* ─── 🆘 紧急按�?─── */
.sos-btn {
  font-size: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-md);
  line-height: 1;
  opacity: 0.85;
  transition: opacity 0.15s, transform 0.15s;
}
.sos-btn:hover { opacity: 1; }
.sos-btn:active { transform: scale(0.92); }

/* ─── 紧急卡片弹�?─── */
.sos-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.sos-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 82vh;
  overflow-y: auto;
  animation: slideUp 0.22s ease;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.sos-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background: var(--color-surface);
  z-index: 1;
}
.sos-card-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: #DC2626;
}
.sos-card-close {
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  line-height: 1;
  padding: 4px 8px;
}
.sos-card-body {
  padding: var(--space-4) var(--space-5);
}

/* ─── 紧急联系项 ─── */
.sos-section-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: var(--space-4) 0 var(--space-2);
}
.sos-section-title:first-child { margin-top: 0; }
.sos-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
  gap: var(--space-3);
}
.sos-row:last-child { border-bottom: none; }
.sos-row-main {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.sos-row-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.sos-row-value {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  text-align: right;
}
.sos-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #DC2626;
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.sos-call-btn:active { opacity: 0.85; }

/* ─── 保险号填写行 ─── */
.sos-insurance-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
}
.sos-insurance-input {
  flex: 1;
  font-size: var(--text-sm);
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  background: var(--color-bg);
  outline: none;
  min-width: 0;
}
.sos-insurance-input:focus { border-color: var(--color-primary); }
.sos-insurance-save {
  flex-shrink: 0;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 5px 12px;
  font-size: var(--text-xs);
  cursor: pointer;
}
.sos-empty-note {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 14px;
  padding: 12px 14px;
  color: #c2410c;
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}
.sos-medical-grid {
  display: grid;
  gap: 12px;
  padding-top: var(--space-2);
}
.sos-medical-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sos-medical-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
}
.sos-medical-input,
.sos-medical-textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg);
  color: var(--color-text-primary);
  padding: 10px 12px;
  font-size: var(--text-sm);
  outline: none;
}
.sos-medical-input:focus,
.sos-medical-textarea:focus {
  border-color: var(--color-primary);
}
.sos-medical-textarea {
  min-height: 74px;
  resize: vertical;
}
.sos-save-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
}

.sos-medical-summary { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 12px; }
.sos-medical-summary__row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #e2e8f0; }
.sos-medical-summary__row:last-child { border-bottom: none; }
.sos-medical-summary__label { font-size: var(--text-xs); color: var(--color-text-muted); flex-shrink: 0; }
.sos-medical-summary__value { font-size: var(--text-sm); color: var(--color-text-primary); font-weight: var(--weight-semibold); text-align: right; }
.sos-medical-translation {
  margin-top: 12px;
  background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  padding: 12px;
}
.sos-medical-translation--muted {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.sos-medical-translation--error {
  background: #fef2f2;
  border-color: #fecaca;
}
.sos-medical-translation__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.sos-medical-translation__badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.sos-medical-translation__tip,
.sos-medical-translation__status {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.sos-medical-translation__local {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
  line-height: 1.75;
}
.sos-medical-translation__phonetic {
  margin-top: 8px;
  font-size: var(--text-xs);
  color: #475569;
  line-height: 1.6;
}
.sos-medical-translation__english {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  font-size: var(--text-xs);
  color: #64748b;
  line-height: 1.7;
}
.sos-secondary-btn { border: 1px solid #cbd5e1; background: #fff; color: #334155; border-radius: 999px; padding: 7px 12px; font-size: var(--text-xs); font-weight: var(--weight-semibold); cursor: pointer; }
.sos-medical-editor { margin-top: 2px; }

/* ══════════════════════════════════════�?
   出发前向�?Wizard
══════════════════════════════════════�?*/
.wizard-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.wizard-modal {
  background: var(--color-bg);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%; max-width: 480px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.wizard-header {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
  flex-shrink: 0;
}
.wizard-title {
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  color: var(--color-text-primary); flex: 1;
}
.wizard-steps { display: flex; gap: 6px; align-items: center; }
.wizard-step-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-border); transition: background 0.2s;
}
.wizard-step-dot--active { background: var(--color-primary); }
.wizard-step-dot--done { background: #22c55e; }
.wizard-close {
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--color-text-muted);
  padding: 2px 6px; line-height: 1;
}
.wizard-body {
  flex: 1; overflow-y: auto;
  padding: var(--space-4);
}
.wizard-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border-light);
  flex-shrink: 0;
}
.wizard-btn-back {
  background: none; border: 1px solid var(--color-border);
  border-radius: var(--radius-full); padding: 8px 16px;
  font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer;
}
.wizard-btn-next {
  background: var(--color-primary); color: #fff;
  border: none; border-radius: var(--radius-full);
  padding: 10px 24px; font-size: var(--text-sm);
  font-weight: var(--weight-semibold); cursor: pointer;
  margin-left: auto;
}
.wizard-btn-next:active { opacity: 0.85; }
.wizard-btn-next--go { background: #16a34a; }

/* ── 向导 Step 1：行前清�?── */
.wiz-section { margin-bottom: var(--space-5); }
.wiz-section-title {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--color-text-muted); text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: var(--space-2);
}
.wiz-check-item {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-light);
  cursor: pointer; user-select: none;
}
.wiz-check-item:last-child { border-bottom: none; }
.wiz-checkbox {
  width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
  border: 2px solid var(--color-border); background: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; margin-top: 1px;
}
.wiz-check-item--done .wiz-checkbox {
  background: var(--color-primary); border-color: var(--color-primary);
  color: #fff; font-size: 12px;
}
.wiz-check-text { font-size: var(--text-sm); color: var(--color-text-primary); line-height: 1.4; }
.wiz-check-note { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }

/* SIM 卡选项 */
.wiz-sim-options { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.wiz-sim-option {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-border); cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.wiz-sim-option--selected {
  border-color: var(--color-primary);
  background: rgba(var(--color-primary-rgb,37,99,235),0.05);
}
.wiz-sim-radio {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--color-border); position: relative;
}
.wiz-sim-option--selected .wiz-sim-radio {
  border-color: var(--color-primary);
}
.wiz-sim-option--selected .wiz-sim-radio::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-primary);
}
.wiz-sim-label { font-size: var(--text-sm); color: var(--color-text-primary); font-weight: var(--weight-medium); }
.wiz-sim-desc { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }

/* ── 向导 Step 3：航班确�?── */
.wiz-flight-tip {
  font-size: var(--text-sm); color: var(--color-text-muted);
  background: var(--color-bg-secondary); border-radius: var(--radius-lg);
  padding: var(--space-3); margin-bottom: var(--space-4); line-height: 1.5;
}

/* ── 今日tab 快捷卡片 �?iOS 图标风格 ── */
.phaseb-quick-cards {
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-light);
  position: sticky;
  top: 0;
  z-index: 20;
}
.phaseb-qcard {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  background: var(--color-surface);
  transition: transform 0.12s, opacity 0.12s;
  box-shadow: none;
  white-space: nowrap;
}
.phaseb-qcard:active {
  transform: scale(0.93);
  opacity: 0.85;
}
.phaseb-qcard-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.phaseb-qcard-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 入境�?�?�?*/
/* 交通换�?�?�?*/
.phaseb-qcard--transport { background: #F0FDF4; border-color: #bbf7d0; color: #15803d; }
/* 求助�?�?�?*/
.phaseb-qcard--help      { background: #FFF7ED; border-color: #fed7aa; color: #ea580c; }
/* SOS �?�?*/
.phaseb-qcard--sos       { background: #FFF1F1; border-color: #fecaca; color: #dc2626; }
/* 出境资料 �?�?*/
.phaseb-qcard--exit      { background: #EEF4FF; border-color: #c7d9fb; color: var(--color-primary); }
/* 行程助手 �?�?*/
.phaseb-qcard--assist    { background: #F5F0FF; border-color: #d4b8ff; color: #7c3aed; }

/* 右侧边 side tab */
#phaseb-side-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 92;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 74px;
  height: 65px;
  padding: 8px 16px 8px 10px;
  background: linear-gradient(180deg, #ffffff 0%, #faf5ff 100%);
  border: 1.5px solid #d8b4fe;
  border-right: none;
  border-radius: 999px 0 0 999px;
  box-shadow: 0 16px 28px rgba(124, 58, 237, 0.16), inset 0 1px 0 rgba(255,255,255,0.9);
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  transition: width 0.24s ease, gap 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
#phaseb-side-tab.is-open {
  width: 154px;
  gap: 10px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, #ffffff 0%, #f3e8ff 100%);
  box-shadow: 0 18px 30px rgba(124, 58, 237, 0.20), inset 0 1px 0 rgba(255,255,255,0.92);
}
.phaseb-side-tab__bubble {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #f5f3ff 100%);
  border: 1px solid #e9d5ff;
  box-shadow: 0 8px 16px rgba(124, 58, 237, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.phaseb-side-tab__icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.phaseb-side-tab__label {
  font-size: 14px;
  font-weight: 800;
  color: #6d28d9;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  max-width: 0;
  opacity: 0;
  transform: translateX(10px);
  transition: width 0.22s ease, max-width 0.22s ease, opacity 0.18s ease, transform 0.22s ease;
}
#phaseb-side-tab.is-open .phaseb-side-tab__label {
  width: 76px;
  max-width: 76px;
  opacity: 1;
  transform: translateX(0);
}
.phaseb-side-tab__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef4444;
  position: absolute;
  top: 10px;
  right: 14px;
}
.phaseb-assistant-overlay {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 980;
  background: rgba(15, 23, 42, 0.06);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.phaseb-assistant-drawer {
  position: absolute;
  top: var(--assistant-drawer-top, 96px);
  right: 8px;
  width: min(82vw, 352px);
  max-width: calc(100vw - 72px);
  height: var(--assistant-drawer-height, min(68vh, 580px));
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #dbeafe;
  border-radius: 28px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  transform: translate3d(calc(100% + 20px), 0, 0) scale(0.96);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(.22,.8,.22,1), opacity 0.22s ease;
  transform-origin: top right;
  overflow: hidden;
}
.phaseb-assistant-overlay.is-open {
  pointer-events: auto;
  opacity: 1;
}
.phaseb-assistant-overlay.is-open .phaseb-assistant-drawer {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}
.phaseb-assistant-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px 13px 10px;
  border-bottom: 1px solid #e6efff;
  background: rgba(255,255,255,0.94);
  flex-shrink: 0;
}
.phaseb-assistant-drawer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.phaseb-assistant-drawer__mascot {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.phaseb-assistant-drawer__title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}
.phaseb-assistant-drawer__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.phaseb-assistant-drawer__close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #dbeafe;
  font-size: 22px;
  line-height: 1;
  color: #475569;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}
.phaseb-assistant-drawer__body {
  flex: 1;
  overflow: hidden;
  padding: 8px 12px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  position: relative;
  display: flex;
  flex-direction: column;
}
.phaseb-assistant-hero {
  background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
  border: 1px solid #dbeafe;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 8px 18px rgba(59, 130, 246, 0.08);
}
.phaseb-assistant-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
}
.phaseb-assistant-hero__title {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.45;
}
.phaseb-assistant-hero__desc {
  margin-top: 6px;
  font-size: 12px;
  color: #475569;
  line-height: 1.7;
}
.phaseb-assistant-section {
  margin-top: 12px;
}
.phaseb-assistant-section__title {
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-left: 2px;
}
.phaseb-assistant-drawer__actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(128px, 1fr);
  gap: 8px;
  flex-shrink: 0;
  overflow-x: auto;
  padding-bottom: 2px;
  scroll-snap-type: x proximity;
}
.phaseb-assistant-drawer__actions--ops {
  grid-template-columns: 1fr;
}
.phaseb-assist-action {
  min-height: 58px;
  border-radius: 18px;
  border: 1.5px solid #dbeafe;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 10px 11px;
  text-align: left;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon sub";
  column-gap: 8px;
  row-gap: 2px;
  align-items: start;
  box-shadow: 0 12px 20px rgba(59, 130, 246, 0.08), inset 0 1px 0 rgba(255,255,255,0.92);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  scroll-snap-align: start;
}
.phaseb-assist-action:active {
  transform: translateY(1px) scale(0.99);
}
.phaseb-assist-action__icon {
  grid-area: icon;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef6ff;
}
.phaseb-assist-action__label {
  grid-area: label;
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
}
.phaseb-assist-action__sub {
  grid-area: sub;
  font-size: 10px;
  line-height: 1.35;
  color: #64748b;
}
.phaseb-assist-action--task {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.phaseb-assist-action--active {
  border-color: #c084fc;
  background: linear-gradient(180deg, #ffffff 0%, #f5f3ff 100%);
  box-shadow: 0 14px 24px rgba(139, 92, 246, 0.16);
}
.phaseb-assist-result-wrap {
  margin-top: 12px;
}
.phaseb-assist-result__label {
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-left: 2px;
}
.phaseb-assist-result {
  min-height: 128px;
  margin: 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: 1.7;
  white-space: pre-wrap;
  overflow: auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.phaseb-assist-result.is-loading {
  color: var(--color-text-muted);
}
.phaseb-assist-home__tag {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
}
.phaseb-assist-home__title {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.55;
}
.phaseb-assist-home__desc {
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.7;
}
.phaseb-assist-home__spotlight {
  margin-top: 12px;
  padding: 12px 13px;
  border-radius: 16px;
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
  border: 1px solid #bfdbfe;
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.08);
}
.phaseb-assist-home__spotlight-title {
  font-size: 12px;
  font-weight: 800;
  color: #1d4ed8;
}
.phaseb-assist-home__spotlight-desc {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.7;
  color: #475569;
}
.phaseb-assist-home__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.phaseb-assist-home__panel {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}
.phaseb-assist-home__panel-title {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
}
.phaseb-assist-home__panel-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.65;
  color: #475569;
}
.phaseb-assist-home__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.phaseb-assist-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 11px;
  color: #334155;
  font-weight: 600;
}
.phaseb-assist-inline-card {
  border-radius: 16px;
  padding: 12px 13px;
  border: 1px solid transparent;
}
.phaseb-assist-inline-card--orange {
  background: #fff7ed;
  border-color: #fed7aa;
}
.phaseb-assist-inline-card--blue {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.phaseb-assist-inline-card__title {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
}
.phaseb-assist-inline-card__desc {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.7;
  color: #475569;
}
.phaseb-assistant-drawer__footer {
  padding: 0 14px 14px;
  background: linear-gradient(180deg, rgba(248,251,255,0) 0%, #ffffff 35%);
}
.phaseb-assistant-chat-btn {
  width: 100%;
  border-radius: var(--radius-full);
  background: #fff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  padding: 10px 14px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.08);
}

/* ── 新版助手抽屉：区域标签 ── */
.phaseb-assist-section-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 2px 5px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.phaseb-assist-section-hint {
  font-size: 10px;
  font-weight: var(--weight-normal);
  color: #94a3b8;
  text-transform: none;
  letter-spacing: 0;
}

/* ── 抽屉双视图布局 ── */
.phaseb-assistant-drawer__body {
  min-height: 0;
}
.phaseb-assist-view {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 0 2px 8px;
}
#phaseb-assist-view-cards {
  padding-bottom: 6px;
}
#phaseb-assist-view-result {
  flex-direction: column;
  gap: 10px;
}
.phaseb-assist-focus-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 20px;
  background: linear-gradient(135deg, #f5f3ff 0%, #eff6ff 100%);
  border: 1px solid #ddd6fe;
  box-shadow: 0 12px 22px rgba(99, 102, 241, 0.09);
}
.phaseb-assist-focus-bar__copy {
  min-width: 0;
  flex: 1;
}
.phaseb-assist-focus-bar__title {
  font-size: 13px;
  font-weight: 800;
  color: #312e81;
  line-height: 1.3;
}
.phaseb-assist-focus-bar__sub {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
  color: #475569;
}
.phaseb-assist-focus-bar__btn {
  flex-shrink: 0;
  height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 10px 18px rgba(99, 102, 241, 0.18);
}
/* 结果视图 */
.phaseb-assist-result-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px 0;
  background: linear-gradient(180deg, rgba(248,251,255,0.96) 0%, rgba(248,251,255,0.84) 75%, rgba(248,251,255,0) 100%);
}
.phaseb-assist-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 800;
  color: #1d4ed8;
  background: #fff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(59, 130, 246, 0.10);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
#phaseb-assist-response-label {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phaseb-assist-result-panel {
  flex: 1;
  min-height: 0;
  border-radius: 22px;
  border: 1px solid #dbeafe;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 16px 28px rgba(59, 130, 246, 0.08), inset 0 1px 0 rgba(255,255,255,0.95);
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
}
.phaseb-assist-result-kicker {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 10px;
}
#phaseb-assist-response {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: 1.75;
  white-space: pre-wrap;
  padding-right: 2px;
}
#phaseb-assist-response.is-loading { color: #94a3b8; }

/* ── 统一输入框（问询 / 突发 / 改行程）── */
.phaseb-assist-composer-wrap {
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(248,251,255,0) 0%, #ffffff 26%);
  padding: 8px 0 14px;
  margin-top: 4px;
}
.phaseb-assist-rescue-composer {
  margin: 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  border: 1.5px solid #c7d9fb;
  border-radius: 22px;
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 14px 24px rgba(59, 130, 246, 0.10);
}
.phaseb-assist-rescue-input {
  width: 100%;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-family: inherit;
  line-height: 1.5;
}
.phaseb-assist-rescue-input::placeholder { color: #94a3b8; }
.phaseb-assist-rescue-send {
  align-self: flex-end;
  background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  padding: 8px 18px;
  font-size: var(--text-sm);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(99, 102, 241, 0.20);
}
.phaseb-assist-rescue-send:active { opacity: 0.85; }

/* ══════════════════════════════════════�?   模块3：突发重规划 输入�?+ Diff
══════════════════════════════════════�?*/

.phaseb-rescue-bar.is-highlighted { border-top-color: #fdba74; background: #fff7ed; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); }
.phaseb-rescue-input {
  flex: 1; min-width: 0;
  font-size: var(--text-sm); padding: 8px 12px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-full);
  background: var(--color-bg-secondary); color: var(--color-text-primary);
  outline: none;
}
.phaseb-rescue-input:focus { border-color: var(--color-primary); background: var(--color-bg); }
.phaseb-rescue-btn {
  flex-shrink: 0; background: #f97316; color: #fff;
  border: none; border-radius: var(--radius-full);
  padding: 8px 16px; font-size: var(--text-sm);
  font-weight: var(--weight-semibold); cursor: pointer;
  white-space: nowrap;
}
.phaseb-rescue-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.phaseb-rescue-btn:active { opacity: 0.85; }

.phaseb-diff-panel {
  margin: 0 var(--space-4) var(--space-4);
  border: 1.5px solid #f97316; border-radius: var(--radius-xl);
  overflow: hidden; background: var(--color-bg);
}
.phaseb-diff-header {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: #fff7ed; border-bottom: 1px solid #fed7aa;
}
.phaseb-diff-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.phaseb-diff-msg { font-size: var(--text-sm); color: #9a3412; line-height: 1.5; }
.phaseb-diff-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--color-border-light);
}
.phaseb-diff-col { padding: var(--space-2) var(--space-3); }
.phaseb-diff-col--before { border-right: 1px solid var(--color-border-light); }
.phaseb-diff-col-title {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--color-text-muted); margin-bottom: var(--space-2);
}
.phaseb-diff-item {
  font-size: var(--text-xs); padding: 3px 0; line-height: 1.4;
  display: flex; gap: 4px; align-items: baseline;
}
.phaseb-diff-item--del { color: #9ca3af; text-decoration: line-through; }
.phaseb-diff-item--add { color: var(--color-text-primary); }
.phaseb-diff-time { flex-shrink: 0; color: var(--color-text-muted); font-size: 10px; min-width: 36px; }
.phaseb-diff-actions {
  display: flex; gap: var(--space-2); justify-content: flex-end;
  padding: var(--space-3) var(--space-4);
}
.phaseb-diff-cancel {
  background: none; border: 1px solid var(--color-border);
  border-radius: var(--radius-full); padding: 6px 14px;
  font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer;
}
.phaseb-diff-confirm {
  background: #16a34a; color: #fff; border: none;
  border-radius: var(--radius-full); padding: 6px 16px;
  font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer;
}
.phaseb-diff-confirm:active { opacity: 0.85; }
.phaseb-diff-error {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); color: #dc2626;
}

/* ══════════════════════════════════════�?
   模块4：下雨模�?
══════════════════════════════════════�?*/
.phaseb-rain-banner {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: #eff6ff; border-bottom: 1px solid #bfdbfe;
  font-size: var(--text-sm);
}
.phaseb-rain-icon { font-size: 18px; flex-shrink: 0; }
.phaseb-rain-text { flex: 1; color: #1e40af; line-height: 1.4; }
.phaseb-rain-all-btn {
  flex-shrink: 0; background: #2563eb; color: #fff;
  border: none; border-radius: var(--radius-full);
  padding: 5px 12px; font-size: var(--text-xs);
  font-weight: var(--weight-semibold); cursor: pointer;
}
.phaseb-rain-all-btn:active { opacity: 0.85; }

.phaseb-act-card.phaseb-act--rain {
  border-left: 3px solid #f97316;
}
.phaseb-act-rain-warn {
  font-size: var(--text-xs); color: #c2410c; margin-top: 4px;
}
.phaseb-rain-switch {
  background: none; border: none; padding: 0;
  color: #2563eb; cursor: pointer; font-size: var(--text-xs);
  text-decoration: underline;
}

/* ══════════════════════════════════════�?
   今日tab 活动卡展开详情
══════════════════════════════════════�?*/
.phaseb-act-card { cursor: default; border-radius: var(--radius-lg); }
.phaseb-act-summary {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: var(--space-2);
  cursor: pointer; padding: var(--space-3) var(--space-4);
}
.phaseb-act-left { flex: 1; min-width: 0; }
.phaseb-act-expand {
  flex-shrink: 0; background: none; border: none;
  font-size: 20px; color: var(--color-text-muted);
  cursor: pointer; padding: 0 4px; line-height: 1;
  transition: transform 0.15s;
}
.phaseb-act-detail {
  padding: 0 var(--space-4) var(--space-3);
  border-top: 1px solid var(--color-border-light);
}
.phaseb-act-detail-row {
  display: flex; gap: var(--space-2); align-items: flex-start;
  padding: var(--space-2) 0;
  font-size: var(--text-sm); color: var(--color-text-secondary);
  line-height: 1.5;
  border-bottom: 1px solid var(--color-border-light);
}
.phaseb-act-detail-row:last-of-type { border-bottom: none; }
.phaseb-act-detail-row span { flex: 1; }
.phaseb-act-detail-actions {
  display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap;
}
.phaseb-act-nav-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
  border-radius: var(--radius-full); padding: 5px 12px;
  font-size: var(--text-xs); color: var(--color-text-primary);
  text-decoration: none; cursor: pointer; font-weight: var(--weight-medium);
}
.phaseb-act-nav-btn:active { opacity: 0.8; }
.phaseb-act-rescue-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff7ed; border: 1px solid #fed7aa;
  border-radius: var(--radius-full); padding: 5px 12px;
  font-size: var(--text-xs); color: #c2410c;
  cursor: pointer; font-weight: var(--weight-medium);
}
.phaseb-act-rescue-btn:active { opacity: 0.8; }

/* ══════════════════════════════════════�?
   🃏 求助卡片系统
══════════════════════════════════════�?*/

/* 遮罩�?*/
.hc-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1100;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* 底部面板 */
.hc-sheet {
  background: var(--color-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%; max-width: 480px;
  max-height: 88vh; overflow-y: auto;
  animation: slideUp 0.22s ease;
}
.hc-sheet-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0;
  background: var(--color-surface); z-index: 1;
}
.hc-sheet-title {
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.hc-close-btn {
  font-size: 20px; background: none; border: none; cursor: pointer;
  color: var(--color-text-muted); line-height: 1; padding: 4px 8px;
}

/* 类型标签�?*/
.hc-type-tabs {
  display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4);
  overflow-x: auto; border-bottom: 1px solid var(--color-border-light);
  -webkit-overflow-scrolling: touch;
}
.hc-type-tabs::-webkit-scrollbar { display: none; }
.hc-type-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 8px 14px;
  cursor: pointer; flex-shrink: 0; transition: all 0.15s;
  min-width: 64px;
}
.hc-type-tab--active {
  background: #eff6ff; border-color: #3b82f6; color: #1d4ed8;
}
.hc-type-icon { font-size: 18px; line-height: 1; }
.hc-type-label { font-size: 11px; font-weight: var(--weight-medium); white-space: nowrap; }

/* 主体内容�?*/
.hc-body { padding: var(--space-4) var(--space-5); }
.hc-hint {
  font-size: var(--text-xs); color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md); padding: 8px 12px;
}

/* 档案预设按钮 */
.hc-preset-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.hc-preset-label {
  font-size: var(--text-xs); color: var(--color-text-muted); flex-shrink: 0;
}
.hc-preset-btn {
  background: #f0fdf4; border: 1px solid #86efac;
  border-radius: var(--radius-full); padding: 4px 12px;
  font-size: var(--text-xs); color: #15803d;
  cursor: pointer; transition: all 0.15s;
}
.hc-preset-btn--active {
  background: #dcfce7; border-color: #22c55e; font-weight: var(--weight-semibold);
}

/* 输入�?*/
.hc-input-row { margin-bottom: var(--space-3); }
.hc-input {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-3); font-size: var(--text-sm);
  color: var(--color-text-primary); background: var(--color-bg);
  resize: none; font-family: inherit;
  transition: border-color 0.15s;
}
.hc-input:focus { outline: none; border-color: #3b82f6; }

/* GPS按钮 */
.hc-gps-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
  border-radius: var(--radius-full); padding: 6px 14px;
  font-size: var(--text-xs); cursor: pointer; margin-bottom: var(--space-3);
  color: var(--color-text-secondary); transition: all 0.15s;
}
.hc-gps-btn--active {
  background: #eff6ff; border-color: #3b82f6; color: #1d4ed8;
}

/* 生成按钮 */
.hc-generate-btn {
  width: 100%; padding: var(--space-3);
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; border: none; border-radius: var(--radius-lg);
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  cursor: pointer; transition: opacity 0.15s;
}
.hc-generate-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.hc-generate-btn:active { opacity: 0.85; }

/* 生成状�?*/
.hc-gen-status {
  margin-top: var(--space-3); font-size: var(--text-sm);
  color: var(--color-text-muted); text-align: center;
  padding: var(--space-2);
}

/* ── 全屏卡片展示 ── */
.hc-fullscreen {
  position: fixed; inset: 0; z-index: 2000;
  background: #0f172a;
  display: flex; align-items: center; justify-content: center;
}
.hc-fs-inner {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
}

/* 顶部工具�?*/
.hc-fs-top-bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 12px 16px;
  background: rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.hc-fs-type-badge {
  font-size: 13px; color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius-full); padding: 4px 12px;
}
.hc-fs-lang {
  font-size: 12px; color: rgba(255,255,255,0.5); flex: 1;
}
.hc-fs-close {
  background: rgba(255,255,255,0.1); border: none; color: #fff;
  border-radius: var(--radius-full); padding: 6px 14px;
  font-size: 13px; cursor: pointer;
}

/* 主文字区 */
.hc-fs-main-text {
  flex: 1; display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: clamp(28px, 8vw, 52px);
  font-weight: 700; color: #ffffff;
  line-height: 1.4; padding: 24px 20px;
  word-break: break-word;
}

/* 音标（罗马字�?*/
.hc-fs-phonetic {
  text-align: center; font-size: clamp(14px, 3.5vw, 20px);
  color: rgba(255,255,255,0.55); padding: 0 20px 12px;
  font-style: italic; line-height: 1.5;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 12px;
}

/* 英语备用 */
.hc-fs-english {
  text-align: center; font-size: clamp(13px, 3vw, 17px);
  color: rgba(255,255,255,0.45); padding: 0 20px 16px;
  line-height: 1.5;
}

/* 底部按钮�?*/
.hc-fs-footer {
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
  padding: 14px 20px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hc-fs-hint {
  font-size: 14px; color: rgba(255,255,255,0.7); font-weight: 600;
}
.hc-fs-brightness {
  font-size: 12px; color: rgba(255,255,255,0.35);
}
.hc-fs-actions {
  display: flex; gap: var(--space-3); align-items: center; justify-content: center;
  margin-top: 4px;
}
.hc-fs-speak-btn {
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85); border-radius: var(--radius-full);
  padding: 8px 20px; font-size: 13px; cursor: pointer;
  transition: background 0.15s;
}
.hc-fs-speak-btn:active { background: rgba(255,255,255,0.2); }
.hc-fs-back-btn {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.6); border-radius: var(--radius-full);
  padding: 8px 20px; font-size: 13px; cursor: pointer;
}

/* ── 🎙�?对方回复 / 即时口译 ── */
.hc-fs-listen-btn {
  background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.4);
  color: #fca5a5; border-radius: var(--radius-full);
  padding: 8px 20px; font-size: 13px; cursor: pointer;
  transition: all 0.15s;
}
.hc-fs-listen-btn--active {
  background: #dc2626; border-color: #dc2626; color: #fff;
  animation: hc-pulse 1.2s ease-in-out infinite;
}
@keyframes hc-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}
.hc-fs-listen-status {
  margin-top: 10px; width: 100%; padding: 0 16px;
}
.hc-listen-hint, .hc-listen-interim {
  display: block; text-align: center;
  font-size: 13px; color: rgba(255,255,255,0.55);
  font-style: italic;
}
.hc-listen-translating {
  display: block; text-align: center;
  font-size: 13px; color: rgba(255,255,255,0.4);
}
.hc-listen-err {
  display: block; text-align: center;
  font-size: 12px; color: #fca5a5;
}
.hc-listen-result {
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-lg); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.hc-listen-result-cn {
  font-size: clamp(18px, 5vw, 28px); font-weight: 700;
  color: #fbbf24; text-align: center; line-height: 1.4;
}
.hc-listen-result-tip {
  font-size: 12px; color: rgba(255,255,255,0.6); text-align: center;
}
.hc-listen-result-orig {
  font-size: 12px; color: rgba(255,255,255,0.3);
  text-align: center; font-style: italic;
}
.hc-listen-read-btn {
  align-self: center; margin-top: 4px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.75); border-radius: var(--radius-full);
  padding: 6px 18px; font-size: 12px; cursor: pointer;
}

/* ── 无API Key 引导横幅 ── */
.hc-nokey-banner {
  margin-top: var(--space-4);
  background: #fefce8; border: 1px solid #fde68a;
  border-radius: var(--radius-lg); padding: var(--space-4);
}
.hc-nokey-title {
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: #92400e; margin-bottom: var(--space-2);
}
.hc-nokey-body {
  font-size: var(--text-xs); color: #78350f; line-height: 1.6;
  margin-bottom: var(--space-3);
}
.hc-nokey-steps { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.hc-nokey-step {
  font-size: var(--text-xs); color: #78350f; line-height: 1.6;
  display: flex; gap: var(--space-2); align-items: flex-start;
}
.hc-nokey-badge {
  background: #6366f1; color: #fff; border-radius: var(--radius-sm);
  padding: 1px 7px; font-size: 11px; font-weight: 600; flex-shrink: 0; margin-top: 1px;
}
.hc-nokey-badge--ds { background: #0ea5e9; }
.hc-nokey-link { color: #1d4ed8; text-decoration: underline; }
.hc-nokey-setup-btn {
  width: 100%; padding: var(--space-2) var(--space-3);
  background: #92400e; color: #fff; border: none;
  border-radius: var(--radius-md); font-size: var(--text-sm);
  font-weight: var(--weight-semibold); cursor: pointer;
}
.hc-generate-btn--dim { opacity: 0.55; }

/* ── 反向翻译全屏 ── */
.hc-fs-inner--reverse { background: #0f172a; }
.hc-fs-reverse-label, .hc-fs-original-label {
  text-align: center; font-size: 11px; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.35); text-transform: uppercase;
  padding: 10px 20px 0; flex-shrink: 0;
}
.hc-fs-main-text--reverse {
  font-size: clamp(24px, 6.5vw, 44px);
  color: #fbbf24;  /* 金色，区别于普通白色正向卡�?*/
}
.hc-fs-keypoints {
  text-align: center; font-size: clamp(12px, 3vw, 16px);
  color: rgba(255,255,255,0.7); padding: 0 20px 12px;
  background: rgba(251,191,36,0.08);
  margin: 0 16px; border-radius: var(--radius-md); line-height: 1.5;
}
.hc-fs-original-text {
  text-align: center; font-size: clamp(12px, 2.8vw, 16px);
  color: rgba(255,255,255,0.4); padding: 4px 20px 16px;
  line-height: 1.6; flex-shrink: 0;
}

/* ── GPS 定位�?── */
.phaseb-gps-bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding-top: var(--space-2);
}
.phaseb-gps-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 96px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-full);
  padding: 8px 14px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  flex-shrink: 0;
  color: #1d4ed8;
  transition: all 0.15s;
}
.phaseb-gps-btn--active {
  background: #dbeafe;
  border-color: #60a5fa;
  color: #1d4ed8;
}
.phaseb-gps-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.phaseb-gps-dist {
  font-size: var(--text-xs); color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.phaseb-location-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.phaseb-location-card__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}
.phaseb-location-card__sub,
.phaseb-location-card__next {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.phaseb-location-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.phaseb-location-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-full);
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.phaseb-location-btn--secondary {
  background: #f8fafc;
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
.phaseb-location-btn--primary {
  background: #dbeafe;
  border-color: #60a5fa;
  color: #1d4ed8;
}



/* ══════════════════════════════════════
   SKELETON CARD — 多城市骨架确认
══════════════════════════════════════ */
.sk-card {
  background: #fff;
  border: 1.5px solid #bfdbfe;
  border-radius: 14px;
  padding: 16px;
  margin-top: 10px;
  max-width: 340px;
}
.sk-card-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
  color: #1e40af;
  margin-bottom: 14px;
}
.sk-card-sub {
  font-size: 11px;
  font-weight: 400;
  color: #64748b;
}
.sk-chain {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sk-stop {
  background: #f0f9ff;
  border-radius: 10px;
  padding: 10px 12px;
}
.sk-stop-name {
  font-weight: 700;
  font-size: 15px;
  color: #1e3a8a;
  margin-bottom: 6px;
}
.sk-nights-ctrl {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.sk-btn-step {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid #93c5fd;
  background: #fff;
  color: #1d4ed8;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.sk-btn-step:disabled { opacity: 0.4; cursor: default; }
/* [bugfix] 换方案时加强自由修改空间:↑↓调顺序 / ✕删除城市 */
.sk-btn-move, .sk-btn-remove {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid #cbd5e1; background: #fff; color: #64748b;
  font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1; flex-shrink: 0;
}
.sk-btn-move:disabled { opacity: 0.35; cursor: default; }
.sk-btn-remove { color: #dc2626; border-color: #fca5a5; margin-left: 2px; }
.sk-add-city-row {
  display: flex; gap: 8px; margin-top: 10px;
}
.sk-add-city-input {
  flex: 1; min-width: 0; padding: 8px 12px; font-size: 13px;
  border: 1.5px solid #cbd5e1; border-radius: 20px; background: #fff;
}
.sk-btn-add-city {
  flex-shrink: 0; background: #eff6ff; color: #1d4ed8; border: 1.5px solid #93c5fd;
  border-radius: 20px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.sk-nights-val {
  font-size: 13px;
  font-weight: 600;
  color: #1e40af;
  min-width: 28px;
  text-align: center;
}
.sk-stop-hl {
  font-size: 11px;
  color: #64748b;
  line-height: 1.4;
}
.sk-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0 6px 12px;
  border-left: 2px dashed #93c5fd;
  margin-left: 16px;
}
.sk-arrow-mode {
  font-size: 12px;
  font-weight: 600;
  color: #2563eb;
}
.sk-arrow-cost {
  font-size: 11px;
  color: #64748b;
}
.sk-arrow-impact {
  font-size: 11px;
  color: #047857;
  font-weight: 500;
}
.sk-arrow-note {
  font-size: 11px;
  color: #78716c;
  font-style: italic;
}
.sk-total-row {
  text-align: center;
  margin: 12px 0 4px;
}
.sk-total {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  background: #f1f5f9;
  padding: 4px 12px;
  border-radius: 20px;
}
.sk-note {
  font-size: 12px;
  color: #44403c;
  background: #fef9c3;
  border-radius: 8px;
  padding: 7px 10px;
  margin: 8px 0 4px;
  line-height: 1.5;
}
.sk-warnings {
  font-size: 12px;
  color: #92400e;
  background: #fffbeb;
  border-radius: 8px;
  padding: 7px 10px;
  margin: 4px 0;
  line-height: 1.5;
}
.sk-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.sk-btn-confirm {
  flex: 1;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 22px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.sk-btn-confirm:disabled { opacity: 0.5; cursor: default; }
.sk-btn-regen {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-radius: 22px;
  padding: 10px 14px;
  font-size: 12px;
  cursor: pointer;
}
.sk-btn-regen:disabled { opacity: 0.4; cursor: default; }

/* ── Skeleton Card v2: Full Timeline ── */
.sk-summary {
  font-size: 12px;
  color: #475569;
  margin-bottom: 12px;
  line-height: 1.5;
}
.sk-timeline { display: flex; flex-direction: column; }
.sk-tl-row { display: flex; gap: 10px; min-height: 36px; }
.sk-tl-day-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 48px;
  flex-shrink: 0;
}
.sk-tl-day-lbl {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  text-align: center;
  line-height: 1.2;
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.sk-tl-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #94a3b8;
  flex-shrink: 0;
  margin: 2px 0;
}
.sk-tl-dot--city     { background: #1d4ed8; }
.sk-tl-dot--transfer { background: #059669; }
.sk-tl-dot--warn     { background: #f59e0b; }
.sk-tl-dot--info     { background: #0ea5e9; }
.sk-tl-line { flex: 1; width: 2px; background: #e2e8f0; min-height: 6px; }
.sk-tl-content { flex: 1; padding: 0 0 10px; min-width: 0; }
.sk-tl-city-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sk-tl-city-name { font-size: 14px; font-weight: 700; color: #1e3a8a; }
.sk-tl-type { font-size: 13px; font-weight: 600; color: #1e40af; margin-bottom: 2px; }
.sk-tl-type--warn { color: #b45309; }
.sk-tl-type--info { color: #0369a1; }
.sk-tl-hl  { font-size: 11px; color: #64748b; margin-top: 2px; }
.sk-tl-sub { font-size: 11px; color: #475569; margin-top: 2px; }
.sk-tl-alt { font-size: 11px; color: #64748b; font-style: italic; margin-top: 1px; }
.sk-tl-impact { font-size: 11px; color: #047857; font-weight: 500; margin-top: 1px; }
.sk-tl-note { font-size: 11px; color: #44403c; margin-top: 2px; line-height: 1.4; }
.sk-tl-note-small { font-size: 10px; color: #78716c; font-style: italic; margin-top: 1px; }
.sk-timezone { font-size: 11px; color: #475569; margin: 4px 0 2px; }
.sk-rhythm-badge {
  font-size: 11px;
  color: #047857;
  background: #dcfce7;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 8px;
  font-weight: 500;
}

/* ── Intercity Transport Activity Card ── */
.itc-card {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1.5px solid #7dd3fc;
}
.itc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 8px;
  flex-wrap: wrap;
}
.itc-mode-icon { font-size: 22px; }
.itc-route { font-size: 16px; font-weight: 700; color: #0c4a6e; flex: 1; }
.itc-duration {
  font-size: 12px;
  color: #fff;
  background: #0369a1;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
}
.itc-body {
  padding: 4px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.itc-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  color: #0c4a6e;
  line-height: 1.4;
}
.itc-actions {
  display: flex;
  gap: 8px;
  padding: 0 14px 12px;
}
.itc-btn {
  flex: 1;
  padding: 8px 6px;
  border-radius: 8px;
  border: 1.5px solid #bae6fd;
  background: #f0f9ff;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  cursor: default;
  text-align: center;
  line-height: 1.4;
}
.itc-btn--active {
  border-color: #0369a1;
  background: #0369a1;
  color: #fff;
  cursor: pointer;
}
.itc-btn-hint { font-size: 10px; font-weight: 400; opacity: 0.8; }


/* ═══════════════ UI v2: welcome restyle (theme featured + dest groups) ═══════════════ */
/* ════════════════════════════════════════════════════════════════
   welcome.css — 生产级样式 · 用 goforu/css/main.css 现有 token
   操作：替换 main.css 里【Theme selector (welcome screen)】整段
        （约 .theme-section … .theme-card-badge），并追加目的地分组样式。
   依赖 token：--color-primary --color-surface --color-border --color-text
              --color-text-secondary --color-bg --font-serif --space-* --radius-* --text-*
═════════════════════════════════════════════════════════════════ */

/* ─── section label 通用增强（竖条 + 核心特色 badge） ─── */
.section-label { display: flex; align-items: center; gap: 8px; }
.section-label__bar {
  width: 4px; height: 18px; border-radius: 99px;
  background: var(--color-primary); flex-shrink: 0;
}
.section-label__bar--mute { background: #C9CFDA; }
.theme-badge-core {
  font-family: var(--font-sans, inherit);
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, #fff);
  padding: 2px 8px; border-radius: 99px;
}

/* ─── Theme selector ─── */
.theme-section { padding: 0 var(--space-5) var(--space-5); }
.theme-section-sub {
  font-size: var(--text-sm); color: var(--color-text-secondary);
  margin: 4px 0 12px;
}

/* featured hero */
.theme-featured {
  position: relative; overflow: hidden;
  border-radius: 18px; margin-bottom: 12px;
  box-shadow: 0 8px 22px rgba(15,20,36,.10);
  color: #fff; min-height: 150px;
  transition: background .3s ease;
}
.theme-featured__pad { position: relative; padding: 18px; }
.theme-featured__blob {
  position: absolute; right: -16px; top: -16px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,.16); pointer-events: none;
}
.theme-featured__ico {
  position: absolute; right: 12px; bottom: -10px; opacity: .9;
  width: 64px; height: 64px;
}
.theme-featured__ico svg { width: 100%; height: 100%; stroke: rgba(255,255,255,.5); fill: none; stroke-width: 1.3; }
.theme-featured__tag {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  background: rgba(255,255,255,.22); padding: 3px 9px; border-radius: 99px;
}
.theme-featured__title { font-family: var(--font-serif); font-size: 25px; font-weight: 700; margin: 11px 0 0; }
.theme-featured__desc { font-size: 12.5px; line-height: 1.55; opacity: .94; margin: 6px 0 12px; max-width: 236px; }
.theme-featured__chips { display: flex; flex-wrap: wrap; gap: 6px; position: relative; }
.theme-featured__chips span {
  font-size: 11px; font-weight: 600; background: rgba(255,255,255,.2);
  padding: 4px 9px; border-radius: 99px;
}

/* 6-theme grid · 2 rows × 3 cols */
.theme-cards-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.theme-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0; padding: 11px 4px 9px; border-radius: 13px; min-width: 0;
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  cursor: pointer; transition: all .2s; user-select: none;
}
.theme-card:hover { border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border)); }
.theme-card-ico {
  width: 34px; height: 34px; border-radius: 10px; margin-bottom: 5px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--theme-tint, var(--color-primary)) 15%, #fff);
}
.theme-card-ico svg { width: 18px; height: 18px; fill: none; stroke: var(--theme-tint, var(--color-primary)); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-card-name { font-size: 12px; font-weight: 600; color: var(--color-text); white-space: nowrap; }
.theme-card-tip { font-size: 9.5px; color: var(--color-text-secondary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* per-theme tint */
.theme-card[data-theme="food"]     { --theme-tint: #FF8C42; }
.theme-card[data-theme="photo"]    { --theme-tint: #7B5BFF; }
.theme-card[data-theme="family"]   { --theme-tint: #1DAE6F; }
.theme-card[data-theme="elder"]    { --theme-tint: #2F9E8F; }
.theme-card[data-theme="sport"]    { --theme-tint: #2F6BF7; }
.theme-card[data-theme="wellness"] { --theme-tint: #E69A1E; }
/* [bugfix] 5 个研学子主题(实际渲染于首页)此前没有 tint,全部退回同一 primary 色,卡片间无区分;
   色值与 itinerary-renderer.js THEME_CONFIG 保持一致,首页选卡 → 行程页头 视觉统一 */
.theme-card[data-theme="geo"]      { --theme-tint: #8B6F47; }
.theme-card[data-theme="nature"]   { --theme-tint: #4a7c3a; }
.theme-card[data-theme="culture"]  { --theme-tint: #7a5c3e; }
.theme-card[data-theme="outdoor"]  { --theme-tint: #2d6a4f; }
.theme-card[data-theme="sketch"]   { --theme-tint: #9d4edd; }

/* active (toggled by app.js .theme-card--active) */
.theme-card--active {
  border-color: var(--theme-tint, var(--color-primary));
  background: color-mix(in srgb, var(--theme-tint, var(--color-primary)) 12%, #fff);
}
.theme-card--active .theme-card-ico { background: var(--theme-tint, var(--color-primary)); }
.theme-card--active .theme-card-ico svg { stroke: #fff; }
.theme-card--active .theme-card-name { color: var(--theme-tint, var(--color-primary)); font-weight: 700; }
.theme-card--soon { opacity: .8; }
.theme-card--soon .theme-card-tip { color: var(--color-text-secondary); }

/* ─── Destination macro regions (大区二级菜单, [P1]) ─── */
.dest-macro { border:1px solid var(--color-border); border-radius:14px; overflow:hidden; margin-bottom:10px; background:var(--color-surface); }
.dest-macro__label { display:flex; justify-content:space-between; align-items:center; padding:13px 16px; cursor:pointer; font-weight:700; font-size:15px; color:var(--color-text); list-style:none; }
.dest-macro__label::-webkit-details-marker { display:none; }
.dest-macro__label::before { content:'▸'; font-size:12px; color:#94a3b8; margin-right:10px; transition:transform .2s; display:inline-block; }
.dest-macro[open] .dest-macro__label::before { transform:rotate(90deg); }
.dest-macro__count { font-size:12px; color:#94a3b8; font-weight:400; }
.dest-macro .dest-group__row { padding:6px 12px 14px; }

/* [P1①打磨] 大区 tab(仿研学主题卡,3 列网格,点 tab 切 panel) */
.dest-zone-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 14px; }
.dest-zone-tab { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:14px 8px; border-radius:13px; background: #f1f5f9; border:1.5px solid var(--color-border); cursor:pointer; transition: all .2s; }
.dest-zone-tab:hover { border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border)); transform: translateY(-1px); }
.dest-zone-tab--active { border-color: var(--zone-tint, var(--color-primary)); background: color-mix(in srgb, var(--zone-tint, var(--color-primary)) 12%, #fff); box-shadow: 0 0 0 2px var(--zone-tint, var(--color-primary)); }
/* [bugfix] 大区 tab 此前无任何图标,和上方研学主题卡(彩色圆角图标)视觉脱节 */
.dest-zone-tab__ico {
  width: 26px; height: 26px; border-radius: 8px; margin-bottom: 1px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--zone-tint, var(--color-primary)) 15%, #fff);
  color: var(--zone-tint, var(--color-primary));
}
.dest-zone-tab__ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.dest-zone-tab--active .dest-zone-tab__ico { background: var(--zone-tint, var(--color-primary)); color: #fff; }
.dest-zone-tab__name { font-family: var(--font-serif); font-size: 13.5px; font-weight: 600; color: var(--color-text); }
.dest-zone-tab__count { font-size: 10.5px; color: var(--color-text-muted); }
.dest-zone-tab--active .dest-zone-tab__name { color: var(--zone-tint, var(--color-primary)); font-weight: 700; }
.dest-zone-panel { min-height: 60px; }

/* ─── City Picker map (地图选城市, [P1②]) ─── */
.city-picker-map { height: 240px; border-radius: 12px; overflow: hidden; margin-bottom: 10px; border: 1px solid var(--color-border); background: #f1f5f9; position: relative; }
.city-picker-map:fullscreen { height: 100vh; border-radius: 0; }
.city-picker-fullscreen { position: absolute; top: 8px; right: 8px; z-index: 1000; background: rgba(255,255,255,0.95); border: 1px solid var(--color-border); border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--color-text); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.map-city-pin { width:26px; height:26px; border-radius:50%; background:#fff; border:2px solid #1A73E8; color:#1A73E8; display:flex; align-items:center; justify-content:center; font-size:13px; box-shadow:0 2px 6px rgba(0,0,0,.2); cursor:pointer; }
.map-city-pin--selected { background:#f59e0b; border-color:#f59e0b; color:#fff; }

/* ─── Today drive roadbook (今日自驾路书, [P2③]) ─── */
.today-drive-roadbook { margin: 12px 0; padding: 14px; background: var(--color-surface); border:1px solid var(--color-border); border-radius: 14px; }
.today-drive-roadbook__title { font-weight: 700; font-size: 15px; margin-bottom: 10px; color: var(--color-text); }
.today-drive-fuel { margin-top: 10px; padding: 10px 12px; background: #f0fdf4; border-radius: 10px; font-size: 13px; }
.today-drive-fuel__row { line-height: 1.8; color: #166534; }
.today-drive-tips { margin-top: 10px; padding: 10px 12px; background: #fef3c7; border-radius: 10px; font-size: 13px; color: #92400e; }
.today-drive-tips__title { font-weight: 600; margin-bottom: 6px; }
.today-drive-map { height: 220px; margin-top: 10px; border-radius: 12px; overflow: hidden; border: 1px solid var(--color-border); background: #f1f5f9; }

/* ─── Study overview (研学综述, [P2-4]) ─── */
.study-overview-card { margin: 12px 0; padding: 14px 16px; background: linear-gradient(135deg,#f5efe6,#fff); border:1px solid #e8dcc8; border-radius: 14px; }
.study-overview-card__title { font-weight: 700; font-size: 15px; margin-bottom: 8px; color: #8B6F47; }
.study-overview-card__body { font-size: 13.5px; line-height: 1.7; color: var(--color-text); }

/* ─── Destination groups (国内省份分组) ─── */
.dest-groups { display: flex; flex-direction: column; gap: 14px; }
.dest-group__label {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em;
  color: #9AA3B2; margin-bottom: 8px;
}
.dest-group__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.dest-card2 {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 11px; border-radius: 12px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(15,20,36,.04); cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.dest-card2:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,20,36,.08); }
.dest-card2:active { transform: scale(.98); }
.dest-card2--theme-match { box-shadow: 0 0 0 2px var(--color-primary), 0 4px 14px rgba(0,0,0,.10); transform: translateY(-2px); }
.dest-card2__code {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10.5px; font-weight: 700; white-space: nowrap;
  background: var(--dest-tint, var(--color-primary));
  font-family: var(--font-serif);
}
.dest-card2__body { min-width: 0; flex: 1; }
.dest-card2__name { font-family: var(--font-serif); font-size: 14.5px; font-weight: 600; color: var(--color-text); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dest-card2__sub { font-size: var(--text-xs); color: #9AA3B2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dest-card2__visa {
  flex-shrink: 0; font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 6px;
  color: var(--dest-tint, var(--color-primary));
  background: color-mix(in srgb, var(--dest-tint, var(--color-primary)) 14%, #fff);
}


/* ═══════════════ UI v2: culture block ═══════════════ */
/* ════════════════════════════════════════════════════════════════
   culture-block.css — 目的地文化特色块样式 · 用 goforu main.css token
   追加到 main.css 末尾即可。
═════════════════════════════════════════════════════════════════ */
.gfc { margin: 14px 0; }

.gfc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.gfc-head__bar { width: 4px; height: 18px; border-radius: 99px; background: #FF8C42; flex-shrink: 0; }
.gfc-head__title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--color-text-primary); }
.gfc-head__badge {
  font-size: 10px; font-weight: 600; color: #FF8C42;
  background: color-mix(in srgb, #FF8C42 14%, #fff);
  padding: 2px 8px; border-radius: 99px;
}

/* culture hero — deep warm gradient */
.gfc-hero {
  position: relative; overflow: hidden;
  border-radius: 18px; padding: 20px 18px; color: #fff;
  background: linear-gradient(130deg, #3A2A20 0%, #6B3A28 100%);
  box-shadow: 0 8px 22px rgba(15,20,36,.12);
}
.gfc-hero__ico {
  position: absolute; right: -18px; top: -8px; width: 96px; height: 96px;
  opacity: .85; pointer-events: none;
}
.gfc-hero__ico svg { width: 100%; height: 100%; stroke: rgba(255,255,255,.16); stroke-width: 1; fill: none; }
.gfc-hero__eyebrow {
  position: relative; font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  color: rgba(255,210,170,.95); text-transform: uppercase;
}
.gfc-hero__title { position: relative; font-family: var(--font-serif); font-size: 22px; font-weight: 700; margin: 8px 0 6px; }
.gfc-hero__desc { position: relative; font-size: 12.5px; line-height: 1.6; opacity: .92; margin: 0; max-width: 250px; }

/* [bugfix] 名菜 chips + 风俗礼仪文字此前是两块独立无边框内容,风俗段"裸奔"无卡片包裹显得边界混乱;
   合并成一张连着 hero 的白卡,内部用 divider 分隔,统一内边距 */
.gfc-info-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-top: 0; border-radius: 0 0 14px 14px; margin-top: -8px;
  padding: 16px 16px 14px; position: relative;
}
.gfc-dishes__label { font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em; color: var(--color-text-secondary); margin-bottom: 9px; }
.gfc-dishes__row { display: flex; flex-wrap: wrap; gap: 8px; }
.gfc-chip {
  font-size: 12px; font-weight: 600; color: #C25E22;
  background: color-mix(in srgb, #FF8C42 12%, #fff);
  padding: 6px 11px; border-radius: 99px;
}

/* customs / etiquette cards */
.gfc-customs { margin-top: 11px; }
.gfc-customs__divider { height: 1px; background: var(--color-border); margin: 0 0 11px; }
.gfc-customs__label { font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em; color: var(--color-text-secondary); margin-bottom: 8px; }
.gfc-customs__text { font-size: 12.5px; line-height: 1.6; color: var(--color-text-secondary); word-break: break-word; overflow-wrap: anywhere; }

/* [bugfix] 实用信息从行程页底部挪到"当地特色"文化卡里,紧跟风俗礼仪 */
.gfc-practical { margin: 11px -16px -14px; border-top: 1px solid var(--color-border); }
.gfc-practical summary { padding: 12px 16px; font-size: var(--text-sm); color: var(--color-text-secondary); cursor: pointer; list-style: none; }
.gfc-practical summary::-webkit-details-marker { display: none; }
.gfc-practical-list { padding: 0 16px 12px; display: flex; flex-direction: column; gap: var(--space-2); }
.gfc-practical-item { display: flex; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-secondary); }
.gfc-practical-item > span:first-child { flex-shrink: 0; font-weight: var(--weight-medium); color: var(--color-text); }
.gfc-custom {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 12px; padding: 12px; margin-bottom: 8px;
}
.gfc-custom__ico {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #FFF1E6; color: #FF8C42;
}
.gfc-custom__ico svg { width: 15px; height: 15px; }
.gfc-custom__t { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.gfc-custom__d { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 1px; line-height: 1.45; }

/* ═══════════════ UI v2: itinerary + today restyle ═══════════════ */
:root { --gf-tint-purple:#7B5BFF; --gf-cape:#E64545; --gf-warn:#E69A1E; }
/* ════════════════════════════════════════════════════════════════
   itinerary-restyle.css — 行程总览 + 今日页 视觉重塑（生产级）
   ────────────────────────────────────────────────────────────────
   策略：只重新着色/排版/留白，针对 app.js 现有类名，
        不改任何渲染 JS（三态/GPS/下雨备选/入境卡逻辑全保留）。
   追加到 goforu/css/main.css 末尾（后置覆盖旧规则）。
   用主线 token：--color-primary --color-surface --color-border
                --color-text(-primary/-secondary) --font-serif --space-* --radius-* --text-*
   配色补充（本文件内自带，避免依赖未定义变量）：
     --gf-tint-purple:#7B5BFF  城市/转场
     --gf-cape:#E64545         SOS/应急
     --gf-warn:#E69A1E         提醒
═════════════════════════════════════════════════════════════════ */

/* ══════════ 行程总览 · multicity-overview ══════════ */
.multicity-overview { padding: 4px 0 8px; }

.multicity-overview-hero {
  position: relative; overflow: hidden;
  margin: 0 var(--space-5) 16px;
  padding: 20px 18px;
  border-radius: 18px; color: #fff;
  background: linear-gradient(125deg, #0F1424 0%, #243056 100%);
  box-shadow: 0 10px 28px rgba(15,20,36,.16);
}
.multicity-overview-hero::after {
  content: ""; position: absolute; right: -30px; top: -30px;
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(47,107,247,.4), transparent 65%);
  pointer-events: none;
}
.multicity-overview-kicker {
  position: relative; font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; color: rgba(155,184,255,.9);
}
.multicity-overview-title {
  position: relative; font-family: var(--font-serif);
  font-size: 27px; font-weight: 600; letter-spacing: -.015em; margin-top: 8px;
}
.multicity-overview-desc {
  position: relative; font-size: 13px; opacity: .82; margin-top: 6px; line-height: 1.5;
}
.multicity-overview-meta { position: relative; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.multicity-overview-pill {
  font-size: 12px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18);
  padding: 5px 11px; border-radius: 99px;
}

/* current / next city cards */
.multicity-overview-grid {
  display: grid; gap: 11px; margin: 0 var(--space-5) 16px;
}
.multicity-overview-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 16px; padding: 16px; box-shadow: 0 1px 2px rgba(15,20,36,.05);
}
.multicity-overview-card--current { border: 1.5px solid var(--color-primary); box-shadow: 0 8px 22px rgba(47,107,247,.10); }
.multicity-overview-card__label {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 99px; margin-bottom: 8px;
}
.multicity-overview-card--current .multicity-overview-card__label { background: var(--color-primary); color: #fff; }
.multicity-overview-card--next .multicity-overview-card__label { background: color-mix(in srgb, var(--gf-tint-purple,#7B5BFF) 14%, #fff); color: var(--gf-tint-purple,#7B5BFF); }
.multicity-overview-card__title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--color-text); }
.multicity-overview-card__sub { font-size: 12.5px; color: var(--color-text-secondary); margin-top: 4px; line-height: 1.5; }
.multicity-overview-card__stats { display: flex; gap: 18px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--color-border); }
.multicity-overview-stat__label { font-size: 10.5px; color: var(--color-text-secondary); }
.multicity-overview-stat__value { font-size: 13px; font-weight: 600; color: var(--color-text); margin-top: 2px; }
.multicity-overview-card__actions { margin-top: 12px; display: flex; gap: 8px; }

/* relay timeline */
.ov-timeline { margin: 0 var(--space-5); }
.ov-tl-row { display: flex; gap: 12px; align-items: stretch; }
.ov-tl-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; position: relative; }
.ov-tl-dot--city { background: var(--gf-tint-purple,#7B5BFF); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gf-tint-purple,#7B5BFF) 16%, transparent); }
.ov-tl-dot--transfer { background: var(--color-surface); border: 2px solid var(--color-border); }
.ov-tl-row:not(:last-child) .ov-tl-dot::after {
  content: ""; position: absolute; left: 50%; top: 16px; transform: translateX(-50%);
  width: 2px; height: calc(100% + 14px); background: var(--color-border);
}
.ov-tl-body { flex: 1; padding-bottom: 16px; }
.ov-tl-city { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--color-text); }
.ov-tl-nights { font-size: 12px; color: var(--color-text-secondary); margin-left: 8px; }
.ov-tl-date { display: block; font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; }
.ov-tl-hotel { font-size: 12px; color: var(--color-text-secondary); margin-top: 4px; }
.ov-tl-row--transfer .ov-tl-body { padding-bottom: 16px; }
.ov-tl-transfer-label {
  font-size: 12.5px; font-weight: 600; color: var(--gf-tint-purple,#7B5BFF);
  background: color-mix(in srgb, var(--gf-tint-purple,#7B5BFF) 10%, #fff);
  padding: 5px 11px; border-radius: 99px; display: inline-block;
}

/* ══════════ 今日页 · today-* / phaseb-* ══════════ */
.today-section { margin: 0 var(--space-5) 14px; }

/* phase header (trip / transfer / depart / leave) */
.today-phase-header {
  display: flex; gap: 12px; align-items: center;
  margin: 4px var(--space-5) 14px; padding: 16px 18px;
  border-radius: 16px; color: #fff;
  background: linear-gradient(120deg, var(--color-primary), #5B8BFF);
}
.today-phase-header--transfer { background: linear-gradient(120deg, #7B5BFF, #9B6BFF); }
.today-phase-header--depart   { background: linear-gradient(120deg, #1DAE6F, #3FC98A); }
.today-phase-header--leave    { background: linear-gradient(120deg, #E0682A, #FF8C42); }
.today-phase-icon { font-size: 24px; line-height: 1; flex-shrink: 0; filter: grayscale(.1); }
.today-phase-title { font-family: var(--font-serif); font-size: 19px; font-weight: 600; }
.today-phase-sub { font-size: 12.5px; opacity: .85; margin-top: 2px; }

/* info banner (出行信息入口) */
.phaseb-info-banner {
  width: calc(100% - var(--space-5) * 2); margin: 0 var(--space-5) 14px;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 14px; cursor: pointer;
  background: linear-gradient(100deg, #F3F0FF, #EEF3FF);
  border: 1px solid #E2DEFA; text-align: left;
}
.phaseb-info-banner__title { font-size: 14px; font-weight: 700; color: var(--color-text); }
.phaseb-info-banner__sub { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
.phaseb-info-banner__arrow { margin-left: auto; color: var(--gf-tint-purple,#7B5BFF); font-size: 18px; }

/* quick cards row */
.phaseb-quick-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(0,1fr)); gap: 8px; margin: 0 var(--space-5) 14px; }
.phaseb-qcard {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 4px 10px; border-radius: 13px; cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(15,20,36,.04);
}
.phaseb-qcard-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: var(--color-primary-light, color-mix(in srgb, var(--color-primary) 12%, #fff));
}
.phaseb-qcard--sos .phaseb-qcard-icon { background: color-mix(in srgb, var(--gf-cape,#E64545) 12%, #fff); }
.phaseb-qcard-label { font-size: 11.5px; font-weight: 600; color: var(--color-text); }

/* utilities card */
.phaseb-utilities-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 14px; padding: 6px 14px;
}
.phaseb-popup-row { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--color-border); }
.phaseb-popup-row:last-child { border-bottom: 0; }
.phaseb-popup-row__icon { font-size: 18px; width: 28px; text-align: center; flex-shrink: 0; }
.phaseb-popup-row__label { font-size: 12px; color: var(--color-text-secondary); }
.phaseb-popup-row__value { font-size: 13.5px; font-weight: 600; color: var(--color-text); margin-top: 1px; }

/* schedule card head */
.phaseb-schedule-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 16px; }
.today-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.today-section-title { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--color-text); }
.today-section-meta { font-size: 12px; color: var(--color-text-secondary); margin-top: 3px; }
.today-section-gps { font-size: 11.5px; color: var(--color-primary); margin-top: 3px; }
.phaseb-gps-btn {
  flex-shrink: 0; font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 10px;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-primary); cursor: pointer;
}
.phaseb-gps-btn--active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* activity cards (旅途中 / inline) */
.phaseb-activities { display: flex; flex-direction: column; gap: 10px; }
.phaseb-act-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 14px; overflow: hidden; transition: box-shadow .2s;
}
.phaseb-act-card.is-current, .phaseb-act-card--current { border: 1.5px solid var(--color-primary); box-shadow: 0 8px 20px rgba(47,107,247,.10); }
.phaseb-act-card.is-done, .phaseb-act-card--done { opacity: .6; }
.phaseb-act-summary { display: flex; align-items: center; gap: 12px; padding: 13px 14px; cursor: pointer; }
.phaseb-act-left { flex: 1; min-width: 0; }
.phaseb-act-time { font-size: 12px; font-weight: 700; color: var(--color-primary); }
.phaseb-act-name { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--color-text); margin-top: 2px; }
.phaseb-act-loc { font-size: 12px; color: var(--color-text-secondary); margin-top: 3px; }
.phaseb-act-expand { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; flex-shrink: 0; }
.phaseb-act-detail { padding: 0 14px 14px; }
.phaseb-act-detail-row { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.5; padding: 5px 0; }
.phaseb-act-detail-actions { display: flex; gap: 8px; margin-top: 10px; }
.phaseb-act-nav-btn {
  flex: 1; text-align: center; font-size: 12.5px; font-weight: 600; padding: 9px; border-radius: 10px;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); cursor: pointer; text-decoration: none;
}
.phaseb-act-nav-go { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.phaseb-act-rescue-btn { background: color-mix(in srgb, var(--gf-warn,#E69A1E) 14%, #fff); color: var(--gf-warn,#E69A1E); border: 0; border-radius: 10px; font-size: 12.5px; font-weight: 600; padding: 9px 12px; cursor: pointer; }
.phaseb-act-rain-warn { margin-top: 10px; padding: 9px 11px; border-radius: 10px; background: #EAF3FF; font-size: 12px; color: var(--color-text-secondary); }
.phaseb-rain-switch, .phaseb-rain-all-btn { border: 0; background: none; color: var(--color-primary); font-weight: 600; cursor: pointer; font-size: 12px; }

/* rain banner */
.phaseb-rain-banner {
  display: flex; align-items: center; gap: 10px; margin: 0 var(--space-5) 14px;
  padding: 12px 14px; border-radius: 12px; background: #EAF3FF; border-left: 3px solid var(--color-primary);
}
.phaseb-rain-icon { font-size: 18px; }
.phaseb-rain-text { font-size: 12.5px; color: var(--color-text); flex: 1; }

/* checklist (depart/exit) */
.today-fold-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 14px; cursor: pointer; }
.today-fold-toggle__title { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--color-text); }
.today-fold-toggle__meta { font-size: 12px; color: var(--color-primary); font-weight: 600; margin-left: 10px; }
.today-fold-toggle__chev { color: var(--color-text-secondary); }
.today-checklist { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 0; border-radius: 0 0 14px 14px; padding: 4px 14px; }
.today-check-item { display: flex; gap: 11px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--color-border); }
.today-check-item:last-child { border-bottom: 0; }
.today-check-box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--color-border); display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; flex-shrink: 0; }
.today-check-item--done .today-check-box { background: var(--color-success, #1DAE6F); border-color: var(--color-success, #1DAE6F); }
.today-check-item--done .today-check-text { color: var(--color-text-secondary); text-decoration: line-through; }
.today-check-text { font-size: 13.5px; color: var(--color-text); }
.today-check-optional { font-size: 10px; color: var(--color-text-secondary); background: var(--color-border); padding: 1px 6px; border-radius: 6px; margin-left: 6px; }

/* info card (退房/入境提示) */
.today-info-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 6px 14px; }
.today-info-row { font-size: 13px; color: var(--color-text-secondary); padding: 9px 0; border-bottom: 1px solid var(--color-border); line-height: 1.5; }
.today-info-row:last-child { border-bottom: 0; }

/* acts sheet (展开全天) */
.today-acts-sheet-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--color-border); }
.today-acts-sheet-title { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--color-text); }
.today-acts-sheet-close { border: 0; background: var(--color-border); border-radius: 8px; padding: 6px 12px; font-size: 12px; cursor: pointer; }
.today-acts-sheet-body { padding: 14px 16px; }

/* ═══════════════ UI v2: timeline/budget/checklist/map tabs restyle ═══════════════ */
/* ════════════════════════════════════════════════════════════════
   tabs-restyle.css — 时间轴 / 预算 / 准备 / 地图 tab 视觉重塑（生产级）
   ────────────────────────────────────────────────────────────────
   策略：只重新着色/排版，针对 itinerary-renderer.js / checklist-renderer.js /
        map-renderer.js 的现有类名，不改渲染逻辑。
   追加到 goforu/css/main.css 末尾。用主线 token + 本文件补充色：
     --gf-tint-purple:#7B5BFF  --gf-cape:#E64545  --gf-warn:#E69A1E
═════════════════════════════════════════════════════════════════ */

/* ══════════ 时间轴 tab · day-* / act-* / timeline-* ══════════ */
.day-tab {
  flex-shrink: 0; padding: 8px 14px; border-radius: 12px; text-align: center; cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--color-border);
}
.day-tab.active, .day-tab--active { background: var(--color-primary); border-color: var(--color-primary); }
.day-tab.active .day-tab-city, .day-tab.active .day-tab-date { color: #fff; }
.day-tab-city { font-size: 13px; font-weight: 700; color: var(--color-text); display: block; }
.day-tab-date { font-size: 10.5px; color: var(--color-text-secondary); margin-top: 1px; }

.day-header-left { display: flex; gap: 14px; align-items: flex-start; }
.day-number {
  font-family: var(--font-serif); font-size: 32px; font-weight: 700; line-height: 1;
  color: var(--color-primary); flex-shrink: 0;
}
.day-title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--color-text); display: block; }
.day-date { font-size: 12px; color: var(--color-text-secondary); display: block; margin-top: 2px; }
.day-city-badge {
  display: inline-block; margin-top: 5px; font-size: 11px; font-weight: 600;
  padding: 2px 9px; border-radius: 99px;
  background: color-mix(in srgb, var(--color-primary) 12%, #fff); color: var(--color-primary);
}
.day-city-badge--transfer { background: color-mix(in srgb, var(--gf-tint-purple,#7B5BFF) 12%, #fff); color: var(--gf-tint-purple,#7B5BFF); }

/* timeline activity cards */
.timeline-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--color-surface); box-shadow: 0 0 0 1px var(--color-border); }
.act-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.act-header-left { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.act-time { font-size: 12px; font-weight: 700; color: var(--color-primary); }
.act-type-badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 99px; }
.act-cost { font-size: 12.5px; font-weight: 700; color: var(--color-text); }
.act-name { font-family: var(--font-serif); font-size: 16.5px; font-weight: 600; color: var(--color-text); margin-top: 7px; }
.act-name-local { font-size: 11.5px; color: var(--color-text-secondary); margin-top: 1px; }
.act-location { font-size: 12px; color: var(--color-text-secondary); margin-top: 6px; }
.act-description { font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.55; margin-top: 8px; padding: 9px 11px; background: var(--color-bg, #F4F6FA); border-radius: 9px; }
.act-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.act-tag { font-size: 10.5px; color: var(--color-text-secondary); border: 1px solid var(--color-border); padding: 2px 8px; border-radius: 99px; }
.act-map-btn { font-size: 11.5px; font-weight: 600; color: var(--color-primary); border: 1px solid var(--color-border); padding: 5px 10px; border-radius: 8px; text-decoration: none; }
.act-map-btn--secondary { color: var(--color-text-secondary); }
.act-detail-item { font-size: 12.5px; color: var(--color-text-secondary); padding: 5px 0; line-height: 1.5; }
.act-intel-item { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; padding: 4px 0; }

/* ══════════ 预算 tab · budget-* ══════════ */
.budget-summary-card {
  margin: 0 var(--space-5) 16px; padding: 18px; border-radius: 18px; color: #fff;
  background: linear-gradient(120deg, #0F1424, #243056); position: relative; overflow: hidden;
}
.budget-summary-card::after {
  content: ""; position: absolute; top: -30px; right: -20px; width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(47,107,247,.4), transparent 65%);
}
.budget-total { position: relative; }
.budget-total-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; opacity: .7; }
.budget-total-amount { font-family: var(--font-serif); font-size: 38px; font-weight: 700; display: block; margin-top: 6px; letter-spacing: -.01em; }
.budget-sub-stats { position: relative; display: flex; gap: 20px; margin-top: 14px; }
.budget-stat-val { font-size: 15px; font-weight: 700; display: block; }
.budget-stat-label { font-size: 11px; opacity: .65; margin-top: 1px; }
.budget-breakdown { margin: 0 var(--space-5) 16px; padding: 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; }
.budget-breakdown-title { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--color-text); margin: 0 0 12px; }
.budget-item { margin-bottom: 14px; }
.budget-item:last-child { margin-bottom: 0; }
.budget-item-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.budget-item-label { font-size: 13px; font-weight: 600; color: var(--color-text); }
.budget-item-amount { font-size: 13px; font-weight: 700; color: var(--color-text); }
.budget-bar-track { height: 7px; border-radius: 99px; background: var(--color-border); overflow: hidden; }
.budget-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--color-primary), #5B8BFF); }
.budget-comparison-card { margin: 0 var(--space-5) 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--color-border); }
.budget-cmp-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; color: var(--color-text-secondary); }
.budget-cmp-val { font-weight: 600; color: var(--color-text); }
.budget-cmp-divider { height: 1px; background: var(--color-border); margin: 6px 0; }
.budget-cmp-row--result { font-weight: 700; }
.budget-cmp-note { font-size: 11.5px; color: var(--color-text-secondary); margin-top: 6px; line-height: 1.45; }
.budget-disclaimer { margin: 0 var(--space-5) 14px; padding: 12px 14px; border-radius: 12px; background: var(--color-bg, #F4F6FA); font-size: 12px; color: var(--color-text-secondary); line-height: 1.55; }

/* ══════════ 准备 tab · checklist-* ══════════ */
.checklist-progress-bar { height: 8px; border-radius: 99px; background: var(--color-border); overflow: hidden; margin: 0 var(--space-5) var(--space-4); }
.checklist-progress-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--color-primary), #5B8BFF); transition: width .3s; }
.checklist-section-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 2px 8px; }
.checklist-section-title { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--color-text); }
.checklist-section-count { font-size: 12px; font-weight: 600; color: var(--color-primary); }
.checklist-items { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 4px 14px; margin-bottom: 12px; }
.checklist-item { display: flex; gap: 11px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--color-border); cursor: pointer; }
.checklist-item:last-child { border-bottom: 0; }
.checklist-check { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--color-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.checklist-check-mark { color: #fff; font-size: 13px; opacity: 0; }
.checklist-item--done .checklist-check, .checklist-item.checked .checklist-check { background: var(--color-success, #1DAE6F); border-color: var(--color-success, #1DAE6F); }
.checklist-item--done .checklist-check-mark, .checklist-item.checked .checklist-check-mark { opacity: 1; }
.checklist-item--done .checklist-item-text, .checklist-item.checked .checklist-item-text { color: var(--color-text-secondary); text-decoration: line-through; }
.checklist-item-text { font-size: 13.5px; color: var(--color-text); line-height: 1.4; }
.checklist-item-note { font-size: 11.5px; color: var(--color-text-secondary); margin-top: 2px; line-height: 1.45; }

/* ══════════ 地图 tab · map-* ══════════ */
.map-day-filter { display: flex; gap: 8px; overflow-x: auto; padding: 10px var(--space-5); }
.map-legend { display: flex; gap: 12px; flex-wrap: wrap; padding: 8px var(--space-5); }
.map-act-pin { width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; border: 2px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.map-act-pin > * { transform: rotate(45deg); }
.map-route-label { font-size: 12.5px; font-weight: 600; color: var(--color-text); }
.map-nav-btn { font-size: 12px; font-weight: 600; color: var(--color-primary); border: 1px solid var(--color-border); padding: 6px 12px; border-radius: 9px; text-decoration: none; }
.map-nav-btn--secondary { color: var(--color-text-secondary); }
.map-popup { min-width: 180px; }
.map-popup-time { font-size: 11px; font-weight: 700; color: var(--color-primary); }
.map-popup-name { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--color-text); margin-top: 2px; }
.map-popup-local { font-size: 11px; color: var(--color-text-secondary); }
.map-popup-loc, .map-popup-cost { font-size: 12px; color: var(--color-text-secondary); margin-top: 4px; }
.map-popup-nav-btn { font-size: 11.5px; font-weight: 600; color: var(--color-primary); border: 1px solid var(--color-border); padding: 5px 10px; border-radius: 8px; text-decoration: none; }
.map-popup-nav-btn--bd { color: var(--color-text-secondary); }
.map-popup-safety { font-size: 11.5px; color: var(--gf-warn,#E69A1E); margin-top: 5px; }

/* ═══════════════ UI v2: SOS/overlays restyle ═══════════════ */
/* ════════════════════════════════════════════════════════════════
   overlays-restyle.css — SOS / 安全卡 / 弹层 视觉重塑（生产级）
   针对 app.js 的 sos-* / 弹层类名，不改逻辑。追加到 main.css 末尾。
   补充色：--gf-cape:#E64545
═════════════════════════════════════════════════════════════════ */

/* ══════════ SOS 紧急卡（浮层） ══════════ */
.sos-card {
  background: var(--color-surface); border-radius: 18px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(15,20,36,.28);
}
.sos-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; color: #fff;
  background: linear-gradient(135deg, #E64545, #C12E2E);
}
.sos-card-title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; }
.sos-card-close { width: 30px; height: 30px; border-radius: 8px; border: 0; background: rgba(255,255,255,.2); color: #fff; font-size: 18px; cursor: pointer; }
.sos-card-body { padding: 16px 18px; max-height: 70vh; overflow-y: auto; }

.sos-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--color-text-secondary);
  text-transform: uppercase; margin: 16px 0 8px;
}
.sos-section-title:first-child { margin-top: 0; }
.sos-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px; margin-bottom: 8px;
  background: var(--color-bg, #F4F6FA); border: 1px solid var(--color-border);
}
.sos-row-label { font-size: 12px; color: var(--color-text-secondary); flex-shrink: 0; min-width: 64px; }
.sos-row-main { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sos-row-value { font-size: 14px; font-weight: 600; color: var(--color-text); }
.sos-call-btn {
  flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: #fff; text-decoration: none;
  background: var(--gf-cape,#E64545); padding: 7px 14px; border-radius: 10px;
  box-shadow: 0 4px 12px rgba(230,69,69,.3);
}
.sos-empty-note, .sos-medical-note {
  font-size: 12px; color: var(--color-text-secondary); line-height: 1.55;
  padding: 12px 14px; background: var(--color-bg, #F4F6FA); border-radius: 10px; margin-top: 8px;
}

/* medical translation card */
.sos-medical-translation {
  border: 1px solid var(--color-border); border-radius: 14px; padding: 14px; margin-bottom: 10px;
  background: var(--color-surface);
}
.sos-medical-translation__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.sos-medical-translation__badge {
  font-size: 10.5px; font-weight: 700; color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, #fff); padding: 2px 8px; border-radius: 99px;
}
.sos-medical-translation__tip { font-size: 11px; color: var(--color-text-secondary); }
.sos-medical-translation__local { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--color-text); line-height: 1.4; }
.sos-medical-translation__english { font-size: 13px; color: var(--color-text-secondary); margin-top: 4px; }
.sos-medical-translation__phonetic { font-size: 11.5px; color: var(--color-text-secondary); opacity: .8; margin-top: 2px; }
.sos-medical-translation__status { font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.55; }
.sos-medical-translation--muted { background: var(--color-bg, #F4F6FA); }
.sos-medical-translation--error { border-color: color-mix(in srgb, var(--gf-cape,#E64545) 30%, var(--color-border)); }

/* medical / contact editor */
.sos-medical-grid { display: flex; flex-direction: column; gap: 12px; }
.sos-medical-field { display: flex; flex-direction: column; gap: 6px; }
.sos-medical-label { font-size: 12px; font-weight: 600; color: var(--color-text); }
.sos-medical-input, .sos-medical-textarea, .sos-insurance-input {
  font-family: var(--font-sans); font-size: 13.5px; color: var(--color-text);
  padding: 11px 13px; border-radius: 11px; border: 1px solid var(--color-border);
  background: var(--color-surface); width: 100%; box-sizing: border-box;
}
.sos-medical-input:focus, .sos-medical-textarea:focus, .sos-insurance-input:focus {
  outline: none; border-color: var(--color-primary);
}
.sos-medical-textarea { min-height: 64px; resize: vertical; }
.sos-save-row { display: flex; gap: 8px; margin-top: 10px; }
.sos-secondary-btn {
  font-size: 13px; font-weight: 600; color: var(--color-text); cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--color-border); padding: 9px 16px; border-radius: 10px;
}
.sos-insurance-save {
  font-size: 13px; font-weight: 600; color: #fff; cursor: pointer;
  background: var(--color-primary); border: 0; padding: 9px 18px; border-radius: 10px;
}
.sos-insurance-row { display: flex; gap: 8px; margin-bottom: 8px; }
.sos-insurance-input { flex: 1; }
.sos-medical-summary { background: var(--color-bg, #F4F6FA); border-radius: 12px; padding: 12px 14px; }
.sos-medical-summary__row { display: flex; gap: 12px; padding: 5px 0; }
.sos-medical-summary__label { font-size: 12px; color: var(--color-text-secondary); min-width: 56px; }
.sos-medical-summary__value { font-size: 13px; font-weight: 600; color: var(--color-text); }

/* ══════════ 通用浮层（simple-popup） ══════════ */
.simple-popup-body { font-size: 13.5px; color: var(--color-text); line-height: 1.6; }

/* ═══════════════ UI v2: deemoji icon sizing ═══════════════ */
.gf-ico { width: 1em; height: 1em; vertical-align: -0.15em; display: inline-block; flex-shrink: 0; }
/* 让被替换 emoji 的图标继承所在文字颜色与大小；行内场景自然对齐 */
.phaseb-act-detail-row .gf-ico { width: 16px; height: 16px; color: var(--color-text-secondary); }
.phaseb-qcard-icon .gf-ico, .phaseb-popup-row__icon .gf-ico { width: 20px; height: 20px; color: var(--color-primary); }
.today-phase-icon .gf-ico { width: 24px; height: 24px; color: #fff; }
.multicity-overview-pill .gf-ico { width: 13px; height: 13px; color: #fff; }


/* ═══════════════ W2 研学知识点卡 (study-points-card) ═══════════════
   活动卡内, 每个 study_point 渲染: title + body + 引导提问 ol + 动手任务。
   研学配色: 暖土黄系(geo 主色,中性不喧宾夺主),与活动卡 .act-description 协调。
════════════════════════════════════════════════════════ */
.study-points-card {
  margin-top: var(--space-3);
  padding: 12px 14px;
  background: linear-gradient(180deg, #f5efe6 0%, #faf6ee 100%);
  border-left: 3px solid #8B6F47;
  border-radius: 10px;
}
.study-points-card__title {
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 600;
  color: #5a4a32;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
.study-point {
  padding: 8px 0;
  border-top: 1px dashed #d6cbb3;
}
.study-point:first-of-type { border-top: none; padding-top: 0; }
.study-point__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.45;
}
.study-point__age {
  font-size: 10.5px;
  font-weight: 500;
  color: #8B6F47;
  margin-left: 4px;
  vertical-align: 1px;
}
.study-point__body {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin-top: 4px;
}
.study-point__prompts {
  font-size: 12px;
  color: #5a4a32;
  line-height: 1.55;
  margin-top: 6px;
  padding: 6px 10px;
  background: #fff8e8;
  border-radius: 6px;
}
.study-point__prompts ol {
  margin: 4px 0 0;
  padding-left: 20px;
}
.study-point__prompts li {
  margin: 2px 0;
}
.study-point__handson {
  font-size: 12px;
  color: #2d6a4f;
  line-height: 1.5;
  margin-top: 6px;
  padding: 6px 10px;
  background: #e8f0ea;
  border-radius: 6px;
  font-weight: 500;
}
/* P3-M4 研学反馈 UI(打卡/照片/感想) */
.study-point__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}
.sp-checkin-btn {
  flex: 0 0 auto;
  border: 1px solid #8B6F47;
  background: #fff;
  color: #5a4a32;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 14px;
  cursor: pointer;
  line-height: 1.4;
}
.sp-checkin-btn--done {
  background: #2d6a4f;
  border-color: #2d6a4f;
  color: #fff;
}
.study-point--done .study-point__title { color: #2d6a4f; }
.sp-feedback {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sp-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.sp-photo-thumb {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #d6cbb3;
}
.sp-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sp-photo-del {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
}
.sp-photo-add {
  width: 52px;
  height: 52px;
  border: 1px dashed #b59a6e;
  border-radius: 8px;
  color: #8B6F47;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  background: #fffdf7;
  line-height: 1.2;
  padding: 2px;
  box-sizing: border-box;
}
.sp-photo-add.is-full {
  border-style: solid;
  color: #aaa;
  cursor: default;
  background: #f4f0e8;
}
.sp-photo-add input { display: none; }
.sp-journal {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d6cbb3;
  border-radius: 8px;
  background: #fffdf7;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text);
  font-family: inherit;
  resize: vertical;
  min-height: 44px;
}
.sp-journal:focus {
  outline: none;
  border-color: #8B6F47;
  background: #fff;
}
/* C6 行程模式反馈UI锁定置灰 */
.sp-feedback--locked { opacity: 0.6; }
.sp-checkin-btn.is-locked { cursor: not-allowed; opacity: 0.6; background: #f4f0e8; border-color: #d6cbb3; color: #aaa; }
.sp-photo-add.is-locked { cursor: not-allowed; opacity: 0.6; }
.sp-feedback__locknote { font-size: 11px; color: #8B6F47; margin-bottom: 4px; font-weight: 600; }
/* P3-M1 研学导师 drawer 推送今日知识点 */
.study-push {
  background: #faf6ee;
  border: 1px solid #e5dcc6;
  border-radius: 10px;
  padding: 12px 14px;
}
.study-push__head {
  font-size: 12.5px;
  font-weight: 600;
  color: #5a4a32;
  line-height: 1.5;
  margin-bottom: 8px;
}
.study-push__list {
  margin: 0;
  padding-left: 20px;
}
.study-push__list li {
  font-size: 12px;
  color: #374151;
  line-height: 1.6;
  margin-bottom: 5px;
}
.study-push__list li b { color: #5a4a32; }
.study-push__list li span { color: #6b7280; }

/* [审查] 研学导师多轮对话线程(原来是单条 textContent 覆盖,现在按聊天气泡堆叠) */
.study-turn { display: flex; flex-direction: column; margin-top: 10px; }
.study-turn--me { align-items: flex-end; }
.study-turn--ai { align-items: flex-start; }
.study-turn__who { font-size: 11px; font-weight: 700; color: #2d6a4f; margin-bottom: 3px; }
.study-turn__bubble {
  max-width: 88%;
  font-size: 12.5px; line-height: 1.65;
  padding: 9px 12px; border-radius: 12px;
  white-space: normal; word-break: break-word;
}
.study-turn--me .study-turn__bubble {
  background: #2d6a4f; color: #fff; border-bottom-right-radius: 4px;
}
.study-turn--ai .study-turn__bubble {
  background: #f4f6f8; color: var(--color-text-primary); border-bottom-left-radius: 4px;
}
.study-turn__bubble--loading { color: var(--color-text-muted); font-style: italic; }
.study-turn--err { font-size: 12px; color: #dc2626; margin-top: 8px; }

/* [审查] 研学导师是付费核心,从后勤功能网格里拆出来单独置顶 */
.phaseb-assist-study-entry {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; margin: 10px 0 4px; padding: 12px 14px;
  background: linear-gradient(120deg, #f0f7f3, #e8f3ec);
  border: 1.5px solid #a8ceb9; border-radius: 12px;
  cursor: pointer; text-align: left;
}
.phaseb-assist-study-entry:hover { border-color: #2d6a4f; }
.phaseb-assist-study-entry__body { display: flex; flex-direction: column; min-width: 0; }
.phaseb-assist-study-entry__label { font-size: 14px; font-weight: 700; color: #2d6a4f; }
.phaseb-assist-study-entry__sub { font-size: 11.5px; color: #5c7a68; margin-top: 2px; }
.phaseb-assist-study-entry__go { flex-shrink: 0; font-size: 12px; font-weight: 600; color: #2d6a4f; }

/* 知识点卡内「问导师」:带着这个知识点当锚点直达导师对话 */
.sp-ask-btn {
  margin-top: 8px; padding: 5px 12px;
  font-size: 11.5px; font-weight: 600; color: #2d6a4f;
  background: #f0f7f3; border: 1px solid #a8ceb9; border-radius: 999px;
  cursor: pointer;
}
.sp-ask-btn:hover { background: #e2efe8; }
@media (max-width: 480px) {
  .study-points-card { padding: 10px 11px; }
  .study-points-card__title { font-size: 13px; }
  .study-point__title { font-size: 12.5px; }
  .study-point__body, .study-point__prompts, .study-point__handson { font-size: 11.5px; }
}


/* ═══════════════ W2 Task8 研学 三大行程级模块 ═══════════════
   1. .study-prep        家长准备清单(行程页顶部)
   2. .drive-segments    自驾分段 + 高德导航深链(行程页底部)
   3. .study-report-tpl  课题报告模板 details/summary(行程页底部,折叠)
   配色与 .study-points-card 协调(暖土黄系), 与 timeline-days 节奏一致。
═══════════════════════════════════════════════════════ */

/* ─── 家长准备清单 ─── */
.study-prep {
  margin: var(--space-3) 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, #f5efe6 0%, #faf6ee 100%);
  border-left: 3px solid #8B6F47;
  border-radius: 10px;
}
.study-prep h3 {
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: #5a4a32;
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}
.study-prep > div {
  font-size: 12.5px;
  color: var(--color-text);
  line-height: 1.6;
  padding: 3px 0;
}
.study-prep b {
  color: #5a4a32;
  font-weight: 600;
  margin-right: 4px;
}

/* ─── 自驾分段 ─── */
.drive-segments {
  margin: var(--space-4) 0 var(--space-3);
  padding: 14px 16px;
  background: linear-gradient(180deg, #eef4f9 0%, #f6f9fc 100%);
  border-left: 3px solid #0369a1;
  border-radius: 10px;
}
.drive-segments h3 {
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: #0369a1;
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}
.drive-seg {
  font-size: 12.5px;
  color: var(--color-text);
  line-height: 1.6;
  padding: 8px 0;
  border-top: 1px dashed #cfd9e3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.drive-seg:first-of-type { border-top: none; padding-top: 0; }
.drive-seg b {
  color: #0369a1;
  font-weight: 600;
  margin-right: 2px;
}
.drive-seg__nav {
  margin-left: auto;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background: #0369a1;
  border-radius: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.drive-seg__nav:hover,
.drive-seg__nav:active { background: #075985; }

/* ─── B8-T2 每日自驾路书(.drive-guide 按日分组 + 123 停靠序列) ─── */
.drive-guide {
  margin: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.drive-guide__day {
  padding: 14px 16px;
  background: linear-gradient(180deg, #eef4f9 0%, #f6f9fc 100%);
  border: 1px solid #d6e3f0;
  border-left: 3px solid #0369a1;
  border-radius: var(--radius-md);
}
.drive-guide__day-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}
.drive-guide__day-tag {
  display: inline-block;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-on-dark);
  background: var(--color-primary);
  border-radius: 999px;
}
.drive-guide__day-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: #0369a1;
  letter-spacing: 0.01em;
}
.drive-guide__day-stat {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.drive-guide__overview {
  margin-bottom: var(--space-3);
  padding: 8px 10px;
  background: var(--color-bg-soft);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.drive-guide__ov-row { padding: 2px 0; }
.drive-guide__ov-row em {
  font-style: normal;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-right: 6px;
}
.drive-guide__stops {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.drive-guide__stop {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 10px 0;
  border-top: 1px dashed #cfd9e3;
}
.drive-guide__stop:first-child { border-top: none; padding-top: 0; }
.drive-guide__num {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-on-dark);
  background: var(--color-primary);
  border-radius: 50%;
}
.drive-guide__stop-body {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  color: var(--color-text);
  line-height: 1.6;
}
.drive-guide__stop-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-bottom: 4px;
}
.drive-guide__tw {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  padding: 1px 8px;
  border-radius: 999px;
}
.drive-guide__route {
  font-weight: 600;
  color: var(--color-text-primary);
}
.drive-guide__dist {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.drive-guide__road,
.drive-guide__fac,
.drive-guide__view,
.drive-guide__meal,
.drive-guide__srv,
.drive-guide__tips {
  padding: 2px 0;
}
.drive-guide__road { color: var(--color-text-secondary); }
.drive-guide__road em,
.drive-guide__fac em,
.drive-guide__view em,
.drive-guide__meal em,
.drive-guide__srv em,
.drive-guide__tips em {
  font-style: normal;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-right: 6px;
}
.drive-guide__nav {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-on-dark);
  background: #0369a1;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.drive-guide__nav:hover,
.drive-guide__nav:active { background: #075985; }
.drive-guide__map-btn {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: #0369a1;
  background: transparent;
  border: 1px dashed #0369a1;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.drive-guide__map-btn:hover,
.drive-guide__map-btn:active { background: var(--color-primary-ghost); }

@media (max-width: 480px) {
  .drive-guide { gap: var(--space-3); }
  .drive-guide__day { padding: 11px 12px; }
  .drive-guide__day-title { font-size: 13.5px; }
  .drive-guide__stop-body { font-size: 12px; }
}

/* ─── 课题报告模板(details/summary 折叠) ─── */
.study-report-tpl {
  margin: var(--space-3) 0 var(--space-4);
  padding: 0;
  background: #faf6ee;
  border: 1px solid #e0d4ba;
  border-radius: 10px;
  overflow: hidden;
}
.study-report-tpl > summary {
  padding: 12px 16px;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  color: #5a4a32;
  cursor: pointer;
  list-style: none;          /* 自定义 marker */
  user-select: none;
  position: relative;
}
.study-report-tpl > summary::-webkit-details-marker { display: none; }
.study-report-tpl > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  color: #8B6F47;
  transition: transform 0.15s;
}
.study-report-tpl[open] > summary::before { transform: rotate(90deg); }
.study-report-tpl > summary:hover { background: #f5edd9; }
.study-report-tpl h4 {
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  padding: 0 16px 8px;
  border-bottom: 1px dashed #d6cbb3;
}
.study-report-tpl > div:not([class]) {   /* section divs */
  padding: 4px 16px;
}
.study-report-tpl > div:not([class]) b {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #5a4a32;
  margin-top: 6px;
}
.study-report-tpl > div:not([class]) p {
  margin: 2px 0 6px;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

/* ── 研学Tab卡片(问导师/知识点/报告) ── */
.study-card {
  margin: 12px 0;
  padding: 16px;
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
}
.study-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}
.study-card__sub {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
  line-height: 1.5;
}
.study-card--cta {
  background: linear-gradient(135deg, #f5efe6, #fff);
  border: 1px solid #e8dcc8;
}
.study-card--progress {
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
}
.study-day {
  margin-bottom: 12px;
}
.study-day__h {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--color-border);
}
.study-empty {
  font-size: 13px;
  color: var(--color-text-secondary);
  padding: 12px 0;
  text-align: center;
}

@media (max-width: 480px) {
  .study-prep, .drive-segments { padding: 11px 12px; }
  .study-prep h3, .drive-segments h3 { font-size: 13.5px; }
  .study-prep > div, .drive-seg { font-size: 12px; }
  .drive-seg { padding: 7px 0; }
  .drive-seg__nav { padding: 2px 9px; font-size: 11.5px; }
  .study-report-tpl > summary { padding: 11px 12px; font-size: 13px; }
  .study-report-tpl h4 { padding: 0 12px 6px; font-size: 13px; }
  .study-report-tpl > div:not([class]) { padding: 4px 12px; }
}