:root {
  --navy: #10283a;
  --navy-2: #183e55;
  --ink: #183042;
  --muted: #657583;
  --paper: #f4f7f7;
  --surface: #ffffff;
  --line: #dce5e8;
  --ocean: #087f8c;
  --ocean-soft: #e6f4f4;
  --coral: #eb6343;
  --coral-soft: #fff0eb;
  --gold: #d99a2b;
  --forest: #27745d;
  --purple: #6458a6;
  --shadow: 0 12px 34px rgba(16, 40, 58, .12);
  --topbar: 54px;
  --status: 40px;
  --dates: 0px;
  --side-nav: 94px;
}

* { box-sizing: border-box; }
html { height: 100%; }
body {
  min-height: 100%; margin: 0; color: var(--ink); background: var(--paper);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--ocean); text-underline-offset: 3px; }
button { color: inherit; }

.topbar {
  position: sticky; top: 0; z-index: 1000; height: var(--topbar); display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; color: #fff; background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand { display: flex; align-items: center; gap: 9px; color: white; text-decoration: none; min-width: 0; }
.brand-mark {
  display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px;
  color: #fff; background: var(--coral); font-size: 1rem; font-weight: 900; transform: rotate(-8deg);
}
.brand strong { display: block; font-size: .9rem; letter-spacing: .01em; line-height: 1.15; }
.brand small { display: block; color: #adc0cb; font-size: .63rem; line-height: 1.2; }
.top-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ghost-btn, .icon-btn {
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: white;
  min-height: 34px; border-radius: 9px; padding: 6px 10px; cursor: pointer; font-size: .78rem; font-weight: 750;
}
.ghost-btn:hover { background: rgba(255,255,255,.15); }
.ghost-btn span + span { margin-left: 7px; color: #aee4e2; }

.status-banner {
  height: var(--status); display: flex; align-items: center; gap: 9px; margin-left: var(--side-nav); padding: 0 16px;
  color: #6b4810; background: #fff4d9; border-bottom: 1px solid #efd8a8; font-size: .75rem;
}
.status-banner div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.status-banner span:not(.pulse-dot) { color: #8e713e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-banner a { margin-left: auto; color: #755012; font-weight: 800; white-space: nowrap; }
.pulse-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #e09b28; box-shadow: 0 0 0 5px rgba(224,155,40,.16); }

.date-rail {
  position: fixed; z-index: 900; top: var(--topbar); bottom: 0; left: 0; width: var(--side-nav); display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  overflow-x: hidden; overflow-y: auto; padding: 8px; background: #fff; border-right: 1px solid var(--line); box-shadow: 3px 0 16px rgba(16,40,58,.05); scrollbar-width: thin;
}
.date-pill {
  display: flex; flex: 1 1 0; min-width: 0; min-height: 44px; max-height: 62px; flex-direction: column; justify-content: center; overflow: hidden;
  padding: 4px 9px; border: 1px solid transparent; border-radius: 11px; background: transparent;
  text-align: left; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.date-pill:hover { background: #f0f5f6; }
.date-pill span, .date-pill small { display: block; }
.date-pill span { color: var(--muted); font-size: .72rem; line-height: 1.12; }
.date-pill strong { display: block; margin: 2px 0; font-size: .96rem; line-height: 1.08; }
.date-pill small { display: none; color: #8a98a2; font-size: .6rem; line-height: 1.12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.date-pill.active { color: white; background: var(--navy); border-color: var(--navy); box-shadow: 0 7px 16px rgba(16,40,58,.2); }
.date-pill.active span, .date-pill.active small { color: #c5d3da; }
.date-pill.active small { display: block; }

.workspace { display: block; min-height: calc(100vh - var(--topbar) - var(--status)); margin-left: var(--side-nav); }
.planner { width: min(1120px, 100%); min-width: 0; margin: 0 auto; overflow: visible; overflow-anchor: none; background: var(--paper); }
body.map-visible .workspace { display: grid; grid-template-columns: minmax(540px, 58%) 1fr; height: calc(100vh - var(--topbar)); min-height: 560px; }
body.map-visible .planner { width: auto; margin: 0; overflow: auto; border-right: 1px solid var(--line); }
.continuous-plan { min-width: 0; }
.day-section { contain: layout style; scroll-margin-top: calc(var(--topbar) + 10px); border-bottom: 10px solid #e5edef; background: var(--paper); }
.day-section:last-child { border-bottom: 0; }
.day-overview { padding: 23px 24px 18px; background: #fff; border-bottom: 1px solid var(--line); }
.day-content { padding: 18px 20px 54px; }
.kicker { color: var(--ocean); font-size: .72rem; font-weight: 850; letter-spacing: .13em; }
.day-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.day-title-row h1 { margin: 4px 0 5px; font: 750 clamp(1.45rem, 2.5vw, 2.05rem)/1.16 Georgia, "Songti SC", serif; }
.day-title-row p { margin: 0; color: var(--muted); font-size: .9rem; }
.day-title-row .title-en { margin: -1px 0 7px; color: var(--navy-2); font-size: .82rem; font-weight: 750; letter-spacing: .01em; }
.weather-glyph { color: var(--gold); font-size: 2rem; line-height: 1; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 17px; }
.metric { padding: 9px 10px; border-radius: 11px; background: #f1f5f6; }
.metric span { display: block; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; }
.metric strong { display: block; font-size: .9rem; white-space: nowrap; }
.sunset-metric { background: #fff4d8; }
.sunset-metric span { color: #7e5c12; }
.sunset-metric strong { color: #66450a; }
.day-actions { display: flex; gap: 8px; margin-top: 14px; }
.primary-btn, .secondary-btn, .mini-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 8px 12px;
  border-radius: 10px; border: 1px solid var(--line); text-decoration: none; cursor: pointer; font-weight: 800; font-size: .82rem;
}
.primary-btn { color: white; background: var(--coral); border-color: var(--coral); }
.secondary-btn { color: var(--ink); background: white; }
.mini-btn { min-height: 31px; padding: 5px 9px; color: var(--ink); background: #fff; font-size: .73rem; }
.apple-nav { color: white; background: #182a36; border-color: #182a36; }
.flight-card { display: grid; grid-template-columns: .65fr 1.15fr 1.15fr 1.4fr; gap: 1px; overflow: hidden; margin-top: 16px; border: 1px solid #cddce1; border-radius: 13px; background: #cddce1; }
.flight-card > div { min-width: 0; padding: 10px 11px; background: #f7fafb; }
.flight-card span, .flight-card small { display: block; color: var(--muted); font-size: .65rem; }
.flight-card strong { display: block; margin-top: 2px; font-size: .78rem; line-height: 1.35; }
.flight-card .flight-number { color: white; background: var(--navy); }
.flight-card .flight-number span { color: #b9c9d1; }
.flight-card .flight-number strong { font-size: 1.25rem; }

.panel-tabs {
  position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(244,247,247,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px);
}
.panel-tab { padding: 13px 5px 11px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font-size: .84rem; font-weight: 800; }
.panel-tab small { color: inherit; font-size: .64rem; font-weight: 650; }
.panel-tab.active { color: var(--ocean); border-bottom-color: var(--ocean); }
.panel-content { padding: 18px 20px 44px; }

.route-note {
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; padding: 12px 13px;
  border: 1px solid #efd2ca; border-radius: 13px; background: var(--coral-soft); color: #7c3c2e; font-size: .82rem;
}
.route-note strong { display: block; }
.route-note span { color: #946052; }
.section-label { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 10px; }
.section-label h2 { margin: 0; font-size: .92rem; letter-spacing: .04em; }
.section-label span { color: var(--muted); font-size: .72rem; }

.timeline-list { position: relative; }
.timeline-list::before { content: ""; position: absolute; left: 15px; top: 18px; bottom: 17px; width: 1px; background: #c9d4d8; }
.timeline-item { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 0 0 18px; }
.timeline-item::before {
  content: ""; position: absolute; left: 10px; top: 8px; width: 9px; height: 9px; border: 3px solid white; border-radius: 50%;
  background: var(--ocean); box-shadow: 0 0 0 1px var(--ocean);
}
.timeline-item.drive-event::before { background: var(--coral); box-shadow: 0 0 0 1px var(--coral); }
.timeline-item.buffer-event::before { background: #798894; box-shadow: 0 0 0 1px #798894; }
.timeline-item.meal-event::before { background: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.timeline-item.stay-event::before { background: var(--purple); box-shadow: 0 0 0 1px var(--purple); }
.timeline-item.shop-event::before { background: var(--forest); box-shadow: 0 0 0 1px var(--forest); }
.timeline-item.sunset-event::before { width: 13px; height: 13px; left: 8px; top: 6px; background: var(--gold); box-shadow: 0 0 0 4px rgba(217,154,43,.17); }
.timeline-time { padding-left: 30px; color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.timeline-card { padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(16,40,58,.035); }
.timeline-card-top { display: flex; justify-content: space-between; gap: 12px; }
.timeline-card h3 { margin: 0; font-size: .94rem; }
.timeline-card p { margin: 4px 0 0; color: var(--muted); font-size: .79rem; }
.place-name-zh, .place-name-en { display: block; }
.place-name-zh { color: var(--ink); font-weight: 850; }
.place-name-en { color: var(--navy-2); font-size: .78rem; font-weight: 750; line-height: 1.35; }
.attraction-copy { margin-top: 8px; padding: 10px 11px; border-left: 3px solid #9dcfd1; border-radius: 0 9px 9px 0; background: #f1f7f7; }
.attraction-copy strong { display: block; color: var(--ocean); font-size: .68rem; letter-spacing: .04em; }
.attraction-copy p { margin: 5px 0 0; color: #516673; font-size: .76rem; line-height: 1.55; }
.attraction-copy p[lang="en"] { color: #71818b; font-style: italic; }
.attraction-copy .visit-tip { margin-top: 8px; padding-top: 7px; border-top: 1px solid #d9e8e9; color: #516673; font-style: normal; }
.attraction-copy .visit-tip b { margin-right: 7px; color: var(--ocean); font-size: .66rem; letter-spacing: .04em; }
.address-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 9px 10px; border: 1px solid #cfdce0; border-radius: 10px; background: #f8fafb; }
.address-box span { min-width: 0; color: #213d4e; font: 750 .75rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-word; }
.address-box small { display: block; color: var(--muted); font: 650 .62rem/1.3 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; letter-spacing: .05em; }
.address-box button { flex: 0 0 auto; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--ocean); cursor: pointer; font-size: .64rem; font-weight: 850; }
.address-box.compact { margin-top: 9px; }
.segment-nav { display: inline-flex; margin-top: 5px; padding: 3px 6px; border-radius: 6px; background: #e9f1f3; color: var(--navy-2); text-decoration: none; font-size: .64rem; font-weight: 850; }
.timeline-card .duration { flex: 0 0 auto; color: var(--ocean); font-size: .7rem; font-weight: 800; }
.place-photos { margin-top: 9px; }
.place-photo-grid { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 2px; scrollbar-width: none; scroll-snap-type: x proximity; }
.place-photo-grid::-webkit-scrollbar { display: none; }
.place-photo { position: relative; display: block; flex: 0 0 clamp(210px,28%,260px); overflow: hidden; aspect-ratio: 16 / 9; border-radius: 9px; background: #dce6e8; color: white; text-decoration: none; isolation: isolate; scroll-snap-align: start; }
.place-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transition: transform .18s ease, opacity .18s ease; }
.place-photo:hover img { transform: scale(1.02); }
.place-photo span { position: absolute; right: 7px; bottom: 7px; padding: 3px 6px; border-radius: 6px; background: rgba(8,25,37,.82); color: white; font-size: .61rem; font-weight: 850; letter-spacing: .02em; }
.place-photos > small { display: block; margin-top: 4px; color: #7a8992; font-size: .58rem; line-height: 1.35; overflow-wrap: anywhere; }
.event-type { margin-bottom: 4px; color: var(--ocean); font-size: .65rem; font-weight: 900; letter-spacing: .1em; }
.drive-event .event-type { color: var(--coral); }
.buffer-event .event-type { color: #657583; }
.meal-event .event-type { color: #9a6711; }
.stay-event .event-type { color: var(--purple); }
.shop-event .event-type { color: var(--forest); }
.event-en { display: block; margin-top: 2px; color: var(--navy-2); font-size: .74rem; font-weight: 700; }
.sunset-strip { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 9px; padding: 9px 10px; border: 1px solid #efd59d; border-radius: 10px; background: #fff6df; }
.sunset-strip strong { color: #825711; font-size: .78rem; }
.sunset-strip span { color: #8a6b34; font-size: .73rem; }
.visit-rules { margin-top: 10px; overflow: hidden; border: 1px solid #d8e2e5; border-radius: 10px; background: #fbfcfc; }
.visit-rules summary { padding: 8px 10px; cursor: pointer; color: var(--navy-2); font-size: .72rem; font-weight: 850; }
.visit-rules summary span { float: right; max-width: 52%; overflow: hidden; color: var(--muted); font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.rule-row { display: grid; grid-template-columns: 98px 1fr; gap: 10px; padding: 7px 10px; border-top: 1px solid #e5ebed; }
.rule-row strong { color: var(--muted); font-size: .65rem; letter-spacing: .03em; }
.rule-row span { color: #405867; font-size: .73rem; line-height: 1.45; }
.reservation-strip { display: grid; gap: 2px; margin-top: 9px; padding: 9px 10px; border-left: 3px solid var(--gold); border-radius: 0 9px 8px 0; background: #fff9ea; }
.reservation-strip strong { color: #765610; font-size: .73rem; }
.reservation-strip span, .reservation-strip small { color: #665b43; font-size: .7rem; }
.stay-focus { display: grid; gap: 2px; margin-top: 9px; padding: 10px; border-left: 3px solid var(--purple); background: #f4f1fb; }
.stay-focus strong { font-size: .82rem; }
.stay-focus span, .stay-focus small { color: #5d567e; font-size: .72rem; }
.trip-btn { color: #155f4b; border-color: #b7d9cc; background: #eff9f5; }
.badge { display: inline-flex; margin-top: 8px; padding: 3px 7px; border-radius: 999px; background: var(--ocean-soft); color: #17656b; font-size: .68rem; font-weight: 800; }
.badge.must { color: #943f2f; background: var(--coral-soft); }
.badge.suggest { color: #765610; background: #fff3d5; }
.badge.pass { color: #245f4e; background: #e5f3ed; }

.segment-table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: white; font-size: .77rem; }
.segment-table th, .segment-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.segment-table th { color: var(--muted); background: #eef3f4; font-size: .68rem; }
.segment-table tr:last-child td { border-bottom: 0; }
.segment-table strong { white-space: nowrap; }

.option-list { display: grid; gap: 11px; }
.option-card { padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.option-card.featured { border-color: #9dcdd0; box-shadow: 0 0 0 2px rgba(8,127,140,.07); }
.option-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.option-card h3 { margin: 0; font-size: .92rem; }
.option-card h3 small { color: var(--muted); font-weight: 600; }
.option-card p { margin: 5px 0; color: var(--muted); font-size: .78rem; }
.option-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.option-meta span { padding: 3px 7px; border-radius: 7px; background: #f0f4f5; color: #526775; font-size: .67rem; }
.option-actions { display: flex; gap: 6px; margin-top: 10px; }

.save-toggle { position: relative; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; flex: 0 0 auto; }
.save-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.save-toggle span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: white; font-size: .68rem; font-weight: 800; }
.save-toggle input:checked + span { color: white; background: var(--forest); border-color: var(--forest); }

.scenario-grid { display: grid; gap: 10px; }
.scenario { padding: 15px; border-radius: 15px; border: 1px solid var(--line); background: #fff; }
.scenario.primary { border-left: 4px solid var(--ocean); }
.scenario.weather { border-left: 4px solid var(--gold); }
.scenario.easy { border-left: 4px solid var(--purple); }
.scenario h3 { margin: 0 0 4px; font-size: .9rem; }
.scenario p { margin: 0; color: var(--muted); font-size: .78rem; }
.check-box { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-bottom: 1px solid var(--line); background: white; }
.check-box:first-child { border-radius: 13px 13px 0 0; }
.check-box:last-child { border-bottom: 0; border-radius: 0 0 13px 13px; }
.check-box input { margin-top: 4px; accent-color: var(--forest); }
.check-box span { font-size: .8rem; }
.check-box small { display: block; color: var(--muted); }
.day-more { margin-top: 12px; border: 1px solid var(--line); border-radius: 16px; background: #edf3f4; }
.day-more > summary { padding: 14px 16px; cursor: pointer; color: var(--navy); font-size: .82rem; font-weight: 850; }
.day-more > summary span { display: block; color: var(--muted); font-size: .68rem; font-weight: 650; }
.day-more-content { padding: 0 14px 18px; }
.day-more[open] > summary { border-bottom: 1px solid var(--line); background: #fff; border-radius: 16px 16px 0 0; }

.map-shell { position: relative; display: none; min-width: 0; background: #dfe9e8; overflow: hidden; }
body.map-visible .map-shell { display: block; }
#map { width: 100%; height: 100%; background: #dfe9e8; }
.map-toolbar {
  position: absolute; z-index: 500; left: 14px; top: 14px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 28px);
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid rgba(16,40,58,.14); border-radius: 999px;
  background: rgba(255,255,255,.93); box-shadow: 0 4px 14px rgba(16,40,58,.11); cursor: pointer; color: #536a79; font-size: .72rem; font-weight: 800;
}
.filter-chip.active { color: white; background: var(--navy); border-color: var(--navy); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ocean); }
.dot.food { background: var(--gold); } .dot.hotel { background: var(--purple); } .dot.charge { background: var(--coral); }
.map-legend {
  position: absolute; z-index: 500; left: 14px; bottom: 15px; display: flex; gap: 11px; padding: 7px 10px;
  border-radius: 10px; background: rgba(255,255,255,.92); box-shadow: 0 4px 16px rgba(16,40,58,.12); color: var(--muted); font-size: .67rem;
}
.map-legend span { display: flex; align-items: center; gap: 5px; }
.route-key { width: 20px; height: 4px; border-radius: 3px; background: #697784; }
.route-key.today { background: var(--coral); height: 5px; } .route-key.future { background: repeating-linear-gradient(90deg,#aebbc3 0 5px,transparent 5px 8px); }
.route-state {
  position: absolute; z-index: 500; right: 14px; bottom: 15px; padding: 7px 10px; border-radius: 10px;
  background: rgba(16,40,58,.9); color: white; font-size: .67rem; box-shadow: var(--shadow);
}

@media (min-width: 901px) {
  body.map-visible { height: 100vh; overflow: hidden; }
  body.map-visible .status-banner { display: none; }
  body.map-visible .workspace { height: calc(100vh - var(--topbar)); min-height: 0; }
  body.map-visible .planner { height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; }
  body.map-visible .map-shell { height: 100%; }
  body.map-visible .day-section { scroll-margin-top: 8px; }
  body.map-visible .place-photo { flex-basis: clamp(190px,42%,230px); }
}

.custom-marker { background: transparent; border: 0; }
.marker-pin {
  display: grid; place-items: center; width: 31px; height: 31px; border: 3px solid #fff; border-radius: 11px 11px 11px 3px;
  background: var(--ocean); color: white; box-shadow: 0 5px 12px rgba(16,40,58,.26); transform: rotate(-45deg);
}
.marker-pin span { transform: rotate(45deg); font-size: .82rem; }
.marker-pin.food { background: var(--gold); } .marker-pin.hotel { background: var(--purple); } .marker-pin.charge { background: var(--coral); }
.leaflet-popup-content-wrapper { border-radius: 15px; box-shadow: var(--shadow); }
.leaflet-popup-content { width: 245px !important; margin: 14px 15px; }
.popup-type { color: var(--ocean); font-size: .64rem; font-weight: 900; letter-spacing: .1em; }
.popup h3 { margin: 2px 0 4px; color: var(--ink); font-size: .95rem; }
.popup p { margin: 4px 0; color: var(--muted); font-size: .73rem; line-height: 1.45; }
.popup strong { color: var(--ink); }
.popup-actions { display: flex; gap: 6px; margin-top: 9px; }
.popup-actions a { padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); text-decoration: none; font-size: .66rem; font-weight: 800; }
.popup-actions a.official { color: white; background: var(--ocean); border-color: var(--ocean); }
.popup-actions a.apple { color: white; background: #182a36; border-color: #182a36; }
.popup-address { padding: 6px 7px; border-radius: 7px; background: #eef3f4; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.booking-dialog { width: min(680px, calc(100% - 28px)); max-height: 88vh; padding: 0; border: 0; border-radius: 22px; color: var(--ink); box-shadow: 0 28px 80px rgba(8,29,43,.32); }
.booking-dialog::backdrop { background: rgba(7,22,32,.56); backdrop-filter: blur(3px); }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 23px 24px 9px; }
.dialog-head h2 { margin: 3px 0 0; font: 750 1.65rem/1.15 Georgia,"Songti SC",serif; }
.dialog-head .icon-btn { width: 36px; height: 36px; padding: 0; border-color: var(--line); color: var(--ink); background: white; font-size: 1.35rem; }
.dialog-intro { margin: 0; padding: 0 24px 14px; color: var(--muted); font-size: .82rem; }
.booking-progress { height: 6px; margin: 0 24px 16px; border-radius: 6px; overflow: hidden; background: #e7edef; }
.booking-progress span { display: block; width: 0; height: 100%; background: var(--forest); transition: width .2s; }
.booking-list { margin: 0 24px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.alt-ticket-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 15px 24px 0; }
.alt-ticket-grid span { width: 100%; color: var(--muted); font-size: .72rem; font-weight: 800; }
.alt-ticket-grid a { padding: 6px 8px; border-radius: 8px; background: #eef3f4; color: var(--ink); text-decoration: none; font-size: .7rem; font-weight: 800; }
.source-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: 18px 24px 24px; }
.source-grid a { padding: 9px; border: 1px solid var(--line); border-radius: 10px; text-align: center; text-decoration: none; font-size: .72rem; font-weight: 800; }
.print-plan { display: none; }

@media (max-width: 900px) {
  :root { --dates: 68px; --side-nav: 0px; }
  .status-banner { margin-left: 0; }
  .date-rail {
    position: sticky; top: var(--topbar); bottom: auto; left: auto; width: auto; height: var(--dates); flex-direction: row; gap: 4px;
    overflow-x: auto; overflow-y: hidden; padding: 7px 10px; border-right: 0; border-bottom: 1px solid var(--line); box-shadow: 0 3px 12px rgba(16,40,58,.05);
  }
  .date-pill { flex: 0 0 68px; min-height: 0; max-height: none; padding: 5px 8px; }
  .date-pill small, .date-pill.active small { display: none; }
  .workspace { margin-left: 0; }
  body.map-visible { height: auto; overflow: visible; }
  .workspace { min-height: 0; }
  body.map-visible .workspace { display: flex; flex-direction: column; height: auto; min-height: 0; }
  body.map-visible .map-shell { position: relative; height: 43vh; min-height: 310px; order: -1; border-bottom: 1px solid var(--line); }
  body.map-visible .planner { width: 100%; overflow: visible; border-right: 0; }
  .panel-tabs { top: 0; }
  .day-overview { padding: 20px; }
  .flight-card { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 620px) {
  :root { --topbar: 52px; --status: 56px; --dates: 64px; }
  .topbar { padding: 0 9px; }
  .brand-mark { width: 28px; height: 28px; }
  .brand strong { font-size: .82rem; }
  .brand small { font-size: .58rem; }
  .desktop-only { display: none; }
  .top-actions { gap: 5px; }
  .ghost-btn { min-height: 32px; padding: 5px 7px; font-size: .68rem; }
  #toggleMap, #printBtn { font-size: 0; }
  #toggleMap::after { content: "地图"; font-size: .72rem; }
  body.map-visible #toggleMap::after { content: "收起地图"; }
  #printBtn::after { content: "A4"; font-size: .72rem; }
  .status-banner { align-items: flex-start; padding: 9px 13px; font-size: .73rem; line-height: 1.35; }
  .status-banner div { display: block; }
  .status-banner span:not(.pulse-dot) { display: block; white-space: normal; }
  .status-banner a { margin-top: 3px; }
  .pulse-dot { margin-top: 5px; }
  .date-rail { padding: 6px 8px; gap: 3px; }
  .date-pill { flex-basis: 64px; padding: 4px 7px; }
  .date-pill small { display: none; }
  body.map-visible .map-shell { height: 39vh; min-height: 285px; }
  .panel-tabs { top: 0; }
  .metrics { grid-template-columns: repeat(2,1fr); }
  .day-overview { padding: 17px 15px; }
  .panel-content { padding: 15px 13px 38px; }
  .map-toolbar { top: 9px; left: 9px; }
  .filter-chip { padding: 6px 8px; }
  .map-legend { left: 9px; bottom: 9px; }
  .route-state { right: 9px; bottom: 44px; }
  .source-grid { grid-template-columns: repeat(2,1fr); }
  .timeline-item { grid-template-columns: 66px minmax(0, 1fr); }
  .day-actions { flex-direction: column; }
  .flight-card { grid-template-columns: 1fr; }
  .address-box { align-items: flex-start; }
  .place-photo { flex-basis: calc(50% - 4px); }
  .place-photos > small { font-size: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .date-pill, .place-photo img { transition: none; }
}

@media print {
  @page { size: A4 portrait; margin: 12mm 11mm 14mm; }
  html, body { width: auto; height: auto; min-height: 0; overflow: visible; background: white; }
  body { font-size: 9.5pt; line-height: 1.4; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .topbar, .status-banner, .date-rail, .workspace, .booking-dialog { display: none !important; }
  .print-plan { display: block; }
  .print-cover { min-height: 257mm; padding: 13mm 2mm 8mm; border-top: 5mm solid var(--navy); break-after: page; page-break-after: always; }
  .print-cover h1 { margin: 2mm 0 2mm; font: 700 28pt/1.1 Georgia,"Songti SC",serif; }
  .print-cover > p { max-width: 165mm; margin: 2mm 0; color: #526471; }
  .print-summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2mm 5mm; margin-top: 10mm; }
  .print-summary-item { display: grid; grid-template-columns: 13mm 1fr; gap: 3mm; align-items: start; padding: 2.6mm 3mm; border: .3mm solid #d8e2e5; border-radius: 2mm; break-inside: avoid; }
  .print-summary-item strong { color: var(--ocean); font-size: 8.5pt; }
  .print-summary-item span { font-size: 8.5pt; line-height: 1.3; }
  .print-summary-item small { display: block; color: #657583; font-size: 7.5pt; }
  .print-day { min-height: 255mm; padding: 2mm 1mm 4mm; break-before: page; page-break-before: always; }
  .print-day h2 { margin: 0 0 1.5mm; padding-bottom: 2mm; border-bottom: .8mm solid var(--navy); font: 700 15pt/1.2 Georgia,"Songti SC",serif; }
  .print-day h3 { margin: 4mm 0 1.5mm; color: var(--ocean); font-size: 9.5pt; break-after: avoid; page-break-after: avoid; }
  .print-day p, .print-day li { margin: .8mm 0; font-size: 8.2pt; line-height: 1.42; orphans: 3; widows: 3; }
  .print-day ul { margin: 1.5mm 0; padding-left: 5mm; }
  .print-day li { padding-left: 1mm; break-inside: avoid; page-break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}