/* ══════════════════════════════════════�?
   GoForU Design System �?main.css
   Tokens �?Reset �?Layout �?Components �?Screens �?Responsive
══════════════════════════════════════�?*/

/* ─── 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:   "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);
  overflow: hidden;
  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;
}
.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: flex-end;
  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: 52px var(--space-4) var(--space-3) var(--space-4);
  max-height: 72%;
  display: flex;
  flex-direction: column;
}
.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: center;
  justify-content: center;
  gap: 12px;
  white-space: nowrap;
}
.welcome-brandmark__svg {
  width: 164px;
  height: auto;
  display: block;
  overflow: visible;
}
.welcome-brandmark__cn {
  font-family: "Songti SC", "STSong", "SimSun", 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: 13px;
  font-weight: 900;
  letter-spacing: 5px;
  fill: var(--color-primary);
}
.welcome-brandmark__mascot {
  width: 74px;
  height: 74px;
  object-fit: contain;
  flex-shrink: 0;
  transform: translateY(2px);
}

.welcome-sub {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.welcome-tagline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: 1px;
  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; }
/* ── Multi-city Entry ── */
.multicity-entry-section { padding: 0 var(--space-5) var(--space-4); }
.multicity-entry-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(95deg, rgba(74,158,232,.10) 0%, rgba(74,158,232,.04) 100%);
  border: 1px solid var(--cream-line);
  border-left: 3px solid var(--cream-warm);
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 2px rgba(27,36,54,.04);
}
.multicity-entry-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(47,127,217,.10); }
.multicity-entry-card:active { transform: scale(0.98); }
.multicity-entry-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #fff;
  color: var(--cream-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(27,36,54,.05);
}
.multicity-entry-body { flex: 1; min-width: 0; }
.multicity-entry-title { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--cream-ink); }
.multicity-entry-sub { font-size: 12px; color: var(--cream-mute); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.multicity-entry-arrow { font-size: 18px; color: var(--cream-brand); font-weight: 700; flex-shrink: 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); }


/* ══════════════════════════════════════�?
   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; }
.itinerary-header-info { flex: 1; }
.itinerary-title { font-size: var(--text-md); font-weight: var(--weight-bold); line-height: 1.2; }
.itinerary-meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.itinerary-header-actions { display: flex; gap: var(--space-2); }

/* 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); }

/* Tabs */
.itinerary-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.itinerary-tabs::-webkit-scrollbar { display: none; }

.tab-btn {
  flex: 1;
  min-width: 80px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.tab-btn:hover { color: var(--color-primary); background: var(--color-primary-light); }
.tab-btn--active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--weight-semibold); }
#tab-btn-overview,
#tab-btn-more {
  flex: 0 0 auto;
  min-width: 84px;
}

.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 { 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); }

/* ─── Immigration Card Reference ─── */
.safety-section--immigration { border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.imm-card { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-3); margin-top: var(--space-2); }
.imm-card-note { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-3); }
.imm-card--materials {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #dbe7f5;
}
.imm-material-head {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: 6px;
}
.imm-material-summary {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}
.imm-material-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.imm-material-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-light);
}
.imm-material-row:last-child {
  border-bottom: none;
}
.imm-material-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.imm-material-value {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
  text-align: right;
  line-height: 1.6;
}
.imm-material-value--hint {
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
}
.imm-section-kicker {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: #2563eb;
  letter-spacing: 0.04em;
}
.imm-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.imm-row { border-bottom: 1px solid var(--color-border); }
.imm-row:last-child { border-bottom: none; }
.imm-label { padding: 8px 8px 8px 0; width: 45%; vertical-align: top; }
.imm-label-main { display: block; font-weight: var(--weight-medium); color: var(--color-text); }
.imm-label-sub { display: block; font-size: 11px; color: var(--color-text-muted); }
.imm-value { padding: 8px 0; font-weight: var(--weight-semibold); color: var(--color-primary); vertical-align: middle; }
.imm-value--empty { color: var(--color-text-muted); font-weight: var(--weight-regular); }
.imm-missing { font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic; }
.imm-disclaimer { font-size: 11px; color: var(--color-text-muted); margin-top: var(--space-2); text-align: center; }
.imm-steps { padding-left: 0; list-style: none; margin: var(--space-2) 0; }
.imm-step { display: flex; gap: var(--space-2); align-items: flex-start; padding: 6px 0; font-size: var(--text-sm); color: var(--color-text); border-bottom: 1px solid var(--color-border); }
.imm-step:last-child { border-bottom: none; }
.imm-step-num { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 11px; font-weight: var(--weight-semibold); display: flex; align-items: center; justify-content: center; }
.imm-useful { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.imm-useful-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: var(--text-sm); }
.imm-useful-label { color: var(--color-text-secondary); }
.imm-useful-val { font-weight: var(--weight-medium); color: var(--color-text); }
.imm-edit-btn { margin-top: var(--space-3); width: 100%; padding: 8px; border: 1px dashed var(--color-border); border-radius: var(--radius-sm); background: none; color: var(--color-text-secondary); font-size: var(--text-sm); cursor: pointer; }
.imm-edit-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Immigration editor modal */
#imm-editor-modal { display: none; position: fixed; inset: 0; z-index: 9999; align-items: flex-end; justify-content: center; }
.imm-editor-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.imm-editor-panel { position: relative; 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; }
.imm-editor-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); font-weight: var(--weight-semibold); }
.imm-editor-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--color-text-muted); }
.imm-editor-body { overflow-y: auto; padding: var(--space-4) var(--space-5); flex: 1; }
.imm-editor-tip { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.imm-editor-field { margin-bottom: var(--space-3); }
.imm-editor-label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); margin-bottom: 4px; }
.imm-editor-input { width: 100%; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-sm); background: var(--color-surface); color: var(--color-text); box-sizing: border-box; }
.imm-editor-input:focus { outline: none; border-color: var(--color-primary); }
.imm-editor-footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); display: flex; gap: var(--space-3); }
.imm-editor-footer .btn-primary, .imm-editor-footer .btn-secondary { flex: 1; padding: 10px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; border: none; }
.imm-editor-footer .btn-primary { background: var(--color-primary); color: #fff; }
.imm-editor-footer .btn-secondary { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); }
.imm-editor-sep { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.05em; border-top: 1px solid var(--color-border-light); padding-top: var(--space-3); }
.imm-editor-note { display: block; font-size: 11px; color: var(--color-text-muted); margin-top: 3px; }

/* 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); }
  .welcome-brandmark__svg { width: 150px; }
  .welcome-brandmark__mascot { width: 66px; height: 66px; }
  .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: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  scrollbar-width: none;
}
.theme-cards-row::-webkit-scrollbar { display: none; }
.theme-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 6px;
  border-radius: 20px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  white-space: nowrap;
}
.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: 30px; height: 30px;
  border-radius: 50%;
  background: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; 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-name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); }
.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-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 ─── */
.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;
}
.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;
}

/* ─── 🆘 紧急按�?─── */
.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 2：入境材料 ── */
.wiz-imm-wrap { margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4); }

/* ── 向导 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: transparent;
  border-bottom: none;
}
.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--imm       { background: #EEF4FF; border-color: #c7d9fb; color: var(--color-primary); }
/* 交通换�?�?�?*/
.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; }
.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; }