/* =========================================================
   国庆深圳行程 · 路线图视图
   深空底色 + 极光 + 地铁线路式路线图 + 时间引擎高亮
   ========================================================= */

:root {
  --bg: #04060f;
  --panel: rgba(18, 27, 52, 0.6);
  --panel-solid: #0e1830;
  --line: rgba(140, 172, 232, 0.16);
  --line-soft: rgba(140, 172, 232, 0.08);
  --text: #eaf0ff;
  --text-soft: #a9b8d8;
  --text-dim: #6f7fa3;
  --accent: #5fd3ff;
  --accent-2: #a78bfa;
  --warm: #ffb74d;
  --coral: #ff7a7a;
  --teal: #2dd4bf;
  --gold: #ffd166;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.92);
  --font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  /* 每日主题色（由 app.js 在 .rail-card 上覆盖） */
  --d1: #7dd3fc;
  --d2: #2dd4bf;
  --d3: #a78bfa;
  --d4: #fbbf24;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
a { color: inherit; text-decoration: none; }

/* ---------- 极光 ---------- */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora span { position: absolute; display: block; border-radius: 50%; filter: blur(96px); opacity: .5; }
.aurora-a { width: 62vw; height: 62vw; top: -24vw; left: -16vw; background: radial-gradient(circle, rgba(95,211,255,.44), transparent 68%); animation: drift 26s ease-in-out infinite; }
.aurora-b { width: 54vw; height: 54vw; top: 14vh; right: -20vw; background: radial-gradient(circle, rgba(167,139,250,.42), transparent 68%); animation: drift 32s ease-in-out infinite reverse; }
.aurora-c { width: 48vw; height: 48vw; bottom: -18vw; left: 20vw; background: radial-gradient(circle, rgba(45,212,191,.3), transparent 68%); animation: drift 38s ease-in-out infinite; }
@keyframes drift {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(4vw,4vh,0) scale(1.14); }
}

.page { max-width: 1240px; margin: 0 auto; padding: 0 20px 80px; }

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  margin: 0 -20px 22px; padding: 12px 20px;
  background: rgba(4, 6, 15, .78);
  backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-bottom: 1px solid var(--line-soft);
}
.icon-button {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; font-size: 20px;
  border-radius: 12px; color: var(--text-soft);
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  transition: color .18s, background .18s, transform .18s;
}
.icon-button:hover { color: var(--text); background: rgba(95,211,255,.14); }
.topbar-title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.topbar-title strong { font-size: 15.5px; }
.topbar-title small { color: var(--text-dim); font-size: 12px; }
.topbar-live { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.live-phase {
  padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
  color: #04121a; background: linear-gradient(120deg, var(--accent), var(--teal));
  box-shadow: 0 6px 20px -8px rgba(95,211,255,.85);
}
.live-clock { font-family: var(--mono); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.live-zone { font-size: 11px; color: var(--text-dim); }

/* ---------- HERO ---------- */
.hero { padding: 22px 0 6px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 16px; padding: 7px 15px;
  font-size: 12.5px; letter-spacing: .06em; color: var(--accent);
  border-radius: 999px; background: rgba(95,211,255,.09); border: 1px solid rgba(95,211,255,.26);
}
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(95,211,255,.8); animation: pulse 2.1s infinite; }
@keyframes pulse {
  70% { box-shadow: 0 0 0 11px rgba(95,211,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(95,211,255,0); }
}
.hero h1 { margin: 0 0 12px; font-size: clamp(36px, 7.6vw, 62px); line-height: 1.06; letter-spacing: -.02em; font-weight: 800; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--accent) 5%, var(--accent-2) 52%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { margin: 0 0 26px; max-width: 52ch; color: var(--text-soft); font-size: 16px; }

.fact-grid { display: grid; gap: 12px; margin: 0; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.fact {
  padding: 15px 17px; border-radius: var(--radius-sm);
  background: var(--panel); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line); transition: border-color .22s, transform .22s;
}
.fact:hover { border-color: rgba(95,211,255,.42); transform: translateY(-3px); }
.fact dt { font-size: 11.5px; letter-spacing: .16em; color: var(--text-dim); text-transform: uppercase; }
.fact dd { margin: 6px 0 0; display: flex; flex-direction: column; }
.fact dd b { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fact dd span { font-size: 12.5px; color: var(--text-soft); }

/* ---------- 时间 HUD ---------- */
.hud {
  display: grid; gap: 12px; margin: 26px 0 30px;
  grid-template-columns: minmax(160px, 1.05fr) minmax(0, 1.55fr) minmax(0, 1.55fr) minmax(130px, .85fr);
  padding: 16px; border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(95,211,255,.10), rgba(167,139,250,.09) 60%, rgba(45,212,191,.07));
  border: 1px solid rgba(95,211,255,.24);
  box-shadow: var(--shadow);
}
.hud > div { min-width: 0; }
.hud-key, .hud-gate-label { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); }
.hud strong { display: block; margin-top: 3px; font-size: 16px; font-weight: 700; }
.hud-note, .hud-gate-note { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-soft); }
.hud-gate strong { font-size: 19px; }
.hud-count { text-align: right; }
.hud-count strong { font-family: var(--mono); font-size: 24px; font-variant-numeric: tabular-nums; color: var(--gold); letter-spacing: -.01em; }
.hud-now { padding-left: 14px; border-left: 1px solid var(--line); }
.hud-next { padding-left: 14px; border-left: 1px solid var(--line); }
.hud-next.is-live strong { color: var(--teal); }

/* ---------- 路线图视图 ---------- */
.route-view { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; margin-bottom: 64px; }
.rail-wrap { min-width: 0; }

.view-switch { display: inline-flex; gap: 4px; margin-bottom: 12px; padding: 4px; border-radius: 999px; background: rgba(10,17,36,.78); border: 1px solid var(--line); }
.vs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 15px; border: 0; cursor: pointer; border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--text-soft); background: transparent; transition: background .2s, color .2s;
}
.vs-chip svg { font-size: 15px; }
.vs-chip:hover { color: var(--text); background: rgba(95,211,255,.1); }
.vs-chip.is-active { color: #04121a; background: linear-gradient(120deg, var(--accent), var(--teal)); }

.rail-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; font-size: 12.5px; color: var(--text-dim); }
.rail-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rail-legend .lg { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.lg-now { background: var(--coral); box-shadow: 0 0 8px var(--coral); animation: pulse 2.1s infinite; }
.lg-done { background: var(--accent); }
.lg-key { background: transparent; border: 2px solid var(--accent-2); }
.lg-todo { background: transparent; border: 2px solid var(--text-dim); }
.rail-legend .lg-hint { color: var(--text-dim); opacity: .8; }

.rail-list { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.rail-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: border-color .3s, box-shadow .3s, opacity .3s;
}
.rail-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--dc1), var(--dc2));
}
.rail-card[data-day="0"] { --dc1: var(--d1); --dc2: #38bdf8; }
.rail-card[data-day="1"] { --dc1: var(--d2); --dc2: #0ea5e9; }
.rail-card[data-day="2"] { --dc1: var(--d3); --dc2: #f472b6; }
.rail-card[data-day="3"] { --dc1: var(--d4); --dc2: #fb7185; }
.rail-card.is-today {
  border-color: color-mix(in srgb, var(--dc1) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dc1) 30%, transparent), var(--shadow);
}
.rail-card.is-today::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--dc1) 13%, transparent), transparent 62%);
}
.rail-card.is-past { opacity: .56; }
.rail-card.is-past:hover { opacity: .82; }

.rail-head {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  padding: 15px 20px 13px 22px;
  border-bottom: 1px solid var(--line-soft);
  position: relative; z-index: 1;
}
.rail-date {
  flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px;
  background: linear-gradient(150deg, var(--dc1), var(--dc2)); color: #05121b;
}
.rail-date b { font-size: 20px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.rail-date span { font-size: 10px; letter-spacing: .1em; margin-top: 2px; }
.rail-meta { min-width: 0; }
.rail-meta h3 { margin: 0; font-size: 17.5px; font-weight: 700; }
.rail-meta p { margin: 1px 0 0; font-size: 13px; color: var(--text-soft); }
.rail-badges { margin-left: auto; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.badge {
  padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
  color: var(--dc1); background: color-mix(in srgb, var(--dc1) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--dc1) 34%, transparent);
}
.badge-today { color: #04121a; background: linear-gradient(120deg, var(--dc1), var(--dc2)); border-color: transparent; animation: badgeGlow 2.4s ease-in-out infinite; }
@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dc1) 55%, transparent); }
  50% { box-shadow: 0 0 0 7px transparent; }
}

/* 线路本体 */
.rail-scroll { overflow-x: auto; overflow-y: hidden; padding: 0 20px 4px 22px; scrollbar-width: thin; position: relative; z-index: 1; }
.rail-scroll::-webkit-scrollbar { height: 6px; }
.rail-scroll::-webkit-scrollbar-thumb { background: rgba(140,172,232,.24); border-radius: 99px; }
.rail-canvas { position: relative; height: 118px; }
.rail-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.rail-line { stroke: color-mix(in srgb, var(--dc1) 45%, transparent); stroke-width: 4; stroke-linecap: round; }
.rail-line-glow { stroke: color-mix(in srgb, var(--dc1) 22%, transparent); stroke-width: 14; stroke-linecap: round; filter: blur(4px); }
.rail-node { fill: var(--panel-solid); stroke: var(--dc1); stroke-width: 2.4; transition: r .2s, fill .2s; }
.rail-node.is-key { fill: color-mix(in srgb, var(--dc1) 32%, var(--panel-solid)); }
.rail-node.is-done { fill: var(--dc1); }
.rail-node.is-now { fill: var(--coral); stroke: var(--coral); }
.rail-now-line { stroke: var(--coral); stroke-width: 2; stroke-dasharray: 3 3; opacity: .9; animation: dashRun 1.6s linear infinite; }
.rail-now-halo { fill: var(--coral); opacity: .35; }
.rail-now-cap { fill: var(--coral); }
.rail-now-ring { fill: none; stroke: var(--coral); stroke-width: 1.6; }
.rail-flow { fill: var(--dc1); filter: drop-shadow(0 0 6px var(--dc1)); }
@keyframes dashRun { to { stroke-dashoffset: -12; } }

/* ---------- 示意地图叠加层 ---------- */
.day-map {
  position: relative; margin: 0 20px 12px 22px;
  border-radius: 14px; overflow: hidden;
  background:
    radial-gradient(120% 130% at 18% 8%, color-mix(in srgb, var(--dc1) 12%, transparent), transparent 58%),
    linear-gradient(160deg, rgba(9,16,32,.92), rgba(6,11,24,.96));
  border: 1px solid color-mix(in srgb, var(--dc1) 22%, var(--line));
  z-index: 1;
}
.day-map svg { display: block; width: 100%; height: auto; }
.map-grid line { stroke: rgba(140,172,232,.07); stroke-width: 1; }
.map-water { fill: rgba(56,132,206,.16); }
.map-land { fill: rgba(60,120,150,.2); stroke: rgba(120,190,220,.18); stroke-width: 1; }
.map-road { fill: none; stroke: rgba(180,205,240,.13); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 7; }
.map-district { fill: rgba(190,210,240,.42); font-size: 11px; font-weight: 600; letter-spacing: .06em; font-family: var(--font); }
.map-water-label { fill: rgba(120,190,230,.5); font-size: 10.5px; font-style: italic; letter-spacing: .08em; font-family: var(--font); }
.map-node-label {
  fill: rgba(235,244,255,.9); font-size: 10px; font-weight: 650; letter-spacing: .02em;
  font-family: var(--font); paint-order: stroke;
  stroke: rgba(4,8,18,.85); stroke-width: 2.6px; stroke-linejoin: round;
  pointer-events: none;
}

.map-route-halo { fill: none; stroke: color-mix(in srgb, var(--dc1) 26%, transparent); stroke-width: 9; stroke-linecap: round; filter: blur(5px); }
.map-route { fill: none; stroke: color-mix(in srgb, var(--dc1) 72%, transparent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.map-route-flow {
  fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 8 22;
  opacity: .85;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--dc1) 85%, transparent));
  animation: mapFlow 2.6s linear infinite;
}
@keyframes mapFlow { to { stroke-dashoffset: -30; } }

.map-node { fill: var(--panel-solid); stroke: var(--dc1); stroke-width: 2; cursor: pointer; transition: r .2s, fill .2s; }
.map-node.is-key { fill: color-mix(in srgb, var(--dc1) 34%, var(--panel-solid)); }
.map-node.is-done { fill: var(--dc1); }
.map-node.is-now { fill: var(--coral); stroke: var(--coral); }
.map-node:hover { r: 7; }
.map-node.is-selected { stroke: #fff; stroke-width: 2.6; }
.map-now-ring { fill: none; stroke: var(--coral); stroke-width: 1.8; pointer-events: none; }

.map-now-halo { fill: var(--coral); opacity: .3; pointer-events: none; }
.map-pin { animation: pinFloat 2.6s ease-in-out infinite; }
@keyframes pinFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.map-pin-dot { fill: #fff; stroke: var(--coral); stroke-width: 2.4; }
.map-pin-pulse { fill: none; stroke: var(--coral); stroke-width: 1.6; opacity: .5; }

.map-caption {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  padding: 7px 12px 8px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px; color: var(--text-dim);
}
.map-caption > span:first-child {
  flex: none; font-family: var(--mono); letter-spacing: .04em; color: var(--dc1);
}
.map-caption-hint {
  margin-left: auto; min-width: 0; opacity: .85;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rail-legend {
  display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap;
  margin: 0 0 16px; font-size: 12.5px; color: var(--text-dim);
}
.rail-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.rail-stop {
  position: absolute; top: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  /* 宽度必须小于站点最小间距（MIN_STOP_GAP=100），否则相邻站名会互相压住 */
  width: 98px; padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit;
  color: var(--text-dim);
}
.rail-stop .stop-time {
  font-family: var(--mono); font-size: 10.5px; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.rail-stop .stop-dot { width: 11px; height: 11px; margin: 2px 0; border-radius: 50%; border: 2px solid var(--dc1); background: var(--panel-solid); transition: transform .2s, background .2s; }
.rail-stop .stop-name {
  font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--text-soft); text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-all;
}
.rail-stop.is-done .stop-dot { background: var(--dc1); }
.rail-stop.is-done .stop-name { color: var(--text-dim); }
.rail-stop.is-next .stop-dot { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 40%, var(--panel-solid)); }
.rail-stop.is-next .stop-name { color: var(--text); }
.rail-stop.is-next .stop-time { color: var(--teal); }
.rail-stop.is-later .stop-dot { border-color: color-mix(in srgb, var(--dc1) 55%, transparent); }
.rail-stop.is-now .stop-dot { background: var(--coral); border-color: var(--coral); animation: nowPulse 1.8s ease-in-out infinite; }
.rail-stop.is-now .stop-name { color: var(--text); font-weight: 700; }
.rail-stop.is-now .stop-time { color: var(--coral); font-weight: 700; }
.rail-stop.is-selected .stop-dot { transform: scale(1.35); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dc1) 26%, transparent); }
.rail-stop.is-selected .stop-name { color: var(--text); }
.rail-stop:hover .stop-dot { transform: scale(1.25); }
.rail-stop:hover .stop-name { color: var(--text); }
.rail-stop:focus-visible { outline: none; }
.rail-stop:focus-visible .stop-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--dc1) 40%, transparent); }
@keyframes nowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,122,122,.7); }
  50% { box-shadow: 0 0 0 8px rgba(255,122,122,0); }
}

.rail-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 20px 15px 22px; position: relative; z-index: 1;
  border-top: 1px dashed var(--line-soft);
  font-size: 12.5px; color: var(--text-dim);
}
.rail-foot svg { font-size: 15px; color: var(--dc1); flex: none; }
.rail-foot .foot-chain { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rail-foot b { color: var(--text-soft); font-weight: 600; }
.rail-foot .foot-progress { margin-left: auto; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--dc1); }
.rail-foot .foot-hint {
  font-size: 11.5px; color: var(--text-dim); opacity: .8;
  padding: 2px 9px; border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--dc1) 30%, transparent);
  white-space: nowrap;
}
/* 线路是横向滚动容器：右侧加一层渐隐，暗示还有内容 */
.rail-scroll { position: relative; }
.rail-scroll.is-scrollable {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
}
@media (max-width: 720px) {
  .rail-foot .foot-hint { display: none; }
}

/* ---------- 站点详情面板 ---------- */
.stop-panel { position: sticky; top: 78px; }
.stop-card {
  padding: 20px; border-radius: var(--radius);
  background: var(--panel); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.stop-card .stop-eyebrow { display: flex; align-items: center; gap: 9px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.stop-card .stop-eyebrow b { color: var(--accent); font-weight: 700; }
.stop-card h3 { margin: 10px 0 6px; font-size: 20px; font-weight: 750; line-height: 1.3; }
.stop-card .stop-when { font-family: var(--mono); font-size: 13px; color: var(--accent); font-variant-numeric: tabular-nums; }
.stop-card .stop-body { margin: 10px 0 0; font-size: 14px; color: var(--text-soft); }
.stop-state {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
}
.stop-state.is-now { color: #2a0808; background: linear-gradient(120deg, var(--coral), #ffb74d); animation: badgeGlow 2s ease-in-out infinite; }
.stop-state.is-next { color: #04121a; background: linear-gradient(120deg, var(--teal), var(--accent)); }
.stop-state.is-done { color: var(--text-dim); background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.stop-state.is-later { color: var(--text-soft); background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.stop-count { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--text-soft); }
.stop-count b { font-family: var(--mono); font-size: 18px; color: var(--gold); font-variant-numeric: tabular-nums; }
.stop-hint { margin-top: 12px; font-size: 12.5px; color: var(--text-dim); }

/* ---------- 横向卡片轨道 ---------- */
.section { margin: 0 0 56px; scroll-margin-top: 90px; }
.section-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.section-index { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--accent); padding-top: 6px; font-variant-numeric: tabular-nums; }
.section-head h2 { margin: 0 0 3px; font-size: clamp(20px, 3.2vw, 26px); font-weight: 700; letter-spacing: -.01em; }
.section-head p { margin: 0; font-size: 13.5px; color: var(--text-dim); }

.swipe { position: relative; margin: 0 -20px; padding: 0 20px; }
.swipe-track {
  display: flex; gap: 12px; overflow-x: auto; padding: 4px 20px 14px;
  scroll-snap-type: x mandatory; scroll-padding-left: 20px;
  scrollbar-width: thin;
}
.swipe-track::-webkit-scrollbar { height: 6px; }
.swipe-track::-webkit-scrollbar-thumb { background: rgba(140,172,232,.22); border-radius: 99px; }
.swipe-track > * { scroll-snap-align: start; flex: 0 0 auto; }
.swipe-label { display: flex; align-items: center; gap: 9px; margin: 16px 0 8px; font-size: 14.5px; font-weight: 680; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot-warm { background: var(--warm); box-shadow: 0 0 12px var(--warm); }
.dot-cool { background: var(--accent); box-shadow: 0 0 12px var(--accent); }

.tile {
  width: 268px; padding: 15px 16px; border-radius: var(--radius-sm);
  background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .22s, border-color .22s;
}
.tile:hover { transform: translateY(-4px); border-color: rgba(95,211,255,.44); }
.tile .tile-top { display: flex; align-items: center; gap: 8px; }
.tile .tile-kicker { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.tile .tile-pill { margin-left: auto; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: #04121a; background: linear-gradient(120deg, var(--accent), var(--teal)); }
.tile h4 { margin: 0; font-size: 15.5px; font-weight: 680; }
.tile p { margin: 0; font-size: 13.2px; color: var(--text-soft); }
.tile .tile-where { font-size: 12.5px; color: var(--text-dim); }
.tile .tile-price { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--warm); }
.tile-warn { border-left: 3px solid var(--coral); }
.tile-ok { border-left: 3px solid var(--teal); }
.tile-dim { opacity: .82; border-left: 3px solid var(--text-dim); }
.tile-food { width: 246px; }
.tile-faq { width: 330px; }
.tile-faq h4 { font-size: 15px; }
.tile-faq p { font-size: 13px; }

/* ---------- 待办 ---------- */
.progress-pill { margin-left: auto; flex: none; padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); background: rgba(95,211,255,.12); border: 1px solid rgba(95,211,255,.3); }
.progress-track { height: 5px; margin: -8px 0 18px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.progress-track span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--teal)); transition: width .4s cubic-bezier(.22,.9,.3,1); }

.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.check-item {
  display: flex; gap: 13px; align-items: flex-start; height: 100%;
  padding: 14px 16px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color .2s, background .2s, opacity .2s;
}
.check-item:hover { border-color: rgba(95,211,255,.4); }
.check-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.check-box { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; border: 2px solid var(--line); color: transparent; transition: background .2s, border-color .2s, color .2s; }
.check-box svg { font-size: 14px; stroke-width: 2.6; }
.check-item input:checked + .check-box { background: linear-gradient(140deg, var(--teal), var(--accent)); border-color: transparent; color: #04121a; }
.check-item:has(input:checked) { opacity: .58; }
.check-item:has(input:checked) .check-title { text-decoration: line-through; text-decoration-color: var(--text-dim); }
.check-copy { min-width: 0; }
.check-title { display: block; font-size: 14.6px; font-weight: 650; }
.check-desc { display: block; margin-top: 3px; font-size: 13px; color: var(--text-soft); }
.check-item.is-hard { border-left: 3px solid var(--coral); }
.check-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; vertical-align: 2px; color: var(--coral); background: rgba(255,122,122,.14); border: 1px solid rgba(255,122,122,.32); }
.reset-row { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.reset-row span { font-size: 12.5px; color: var(--text-dim); }
.ghost-button { padding: 8px 16px; border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-soft); background: rgba(255,255,255,.04); border: 1px solid var(--line); transition: color .18s, border-color .18s; }
.ghost-button:hover { color: var(--text); border-color: rgba(95,211,255,.45); }

/* ---------- 路书地图（平面 2D） ---------- */
.atlas-days { margin-left: auto; display: flex; gap: 5px; flex-wrap: wrap; }
.atlas-day {
  padding: 5px 12px; border-radius: 999px; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--text-soft);
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  transition: color .18s, background .18s, border-color .18s;
}
.atlas-day:hover { color: var(--text); border-color: rgba(95,211,255,.45); }
.atlas-day.is-active { color: #04121a; background: linear-gradient(120deg, var(--accent), var(--teal)); border-color: transparent; }

.atlas {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background:
    radial-gradient(120% 130% at 18% 0%, rgba(95,211,255,.10), transparent 55%),
    linear-gradient(165deg, #0a1226, #050912 60%, #04070f);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.atlas-canvas { position: relative; width: 100%; overflow: hidden; }
.atlas-canvas svg { display: block; width: 100%; height: auto; }
.atlas-placeholder {
  display: grid; place-items: center; min-height: 260px;
  color: var(--text-dim); font-size: 13.5px; letter-spacing: .06em;
}

/* 地面 / 水系 / 绿地（平面 2D，无挤出侧壁）。
   旧配色的问题是水面(约 #153A5C)与地面(#0a1526)明度太接近，海湾区根本看不出
   是水，只剩一圈青色描边像裂缝。这里把三者按「水最亮、地居中、绿地最暗」
   重新拉开：水域是画面里唯一的大块亮面，一眼就能认出深圳湾与大鹏湾。 */
.bm-ground { fill: #0c1830; }
.bm-green { fill: rgba(26,74,60,.75); }
.bm-water { fill: #16497a; }
.bm-waterline { fill: none; stroke: rgba(74,156,220,.6); stroke-width: 1.8; }

/* 道路：按等级分色分宽。0 级是高速/快速路，必须一眼认出来，
   其余等级逐级压暗退到背景里（旧配色整体偏暗，2D 平铺后路网几乎看不见）。 */
.bm-road { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bm-road[data-c="0"] { stroke: #6f9bd8; }
.bm-road[data-c="1"] { stroke: #5b81b8; }
.bm-road[data-c="2"] { stroke: #4a6b9c; }
.bm-road[data-c="3"] { stroke: #3d587f; }
.bm-road[data-c="4"] { stroke: #334963; }
.bm-road[data-c="5"] { stroke: #2b3d54; }
.bm-road-hi { fill: none; stroke: rgba(196,222,255,.4); stroke-linecap: round; stroke-linejoin: round; }

/* 路名与地名：平铺在图面上，保证可读 */
.bm-roadname {
  fill: rgba(190,214,246,.62); font-size: 10px; font-family: var(--font);
  letter-spacing: .04em; paint-order: stroke;
  stroke: rgba(4,8,18,.85); stroke-width: 2.6px; stroke-linejoin: round;
  pointer-events: none;
}
.bm-place {
  fill: rgba(214,230,255,.72); font-size: 11.5px; font-weight: 600; font-family: var(--font);
  letter-spacing: .08em; paint-order: stroke;
  stroke: rgba(4,8,18,.85); stroke-width: 3px; stroke-linejoin: round;
  pointer-events: none;
}
.bm-station { fill: rgba(150,200,240,.5); }
.bm-station-label {
  fill: rgba(170,205,240,.55); font-size: 9.5px; font-family: var(--font);
  paint-order: stroke; stroke: rgba(4,8,18,.8); stroke-width: 2.2px;
  pointer-events: none;
}

/* 四天动线：白描边 + 彩色主体，压过底图路网成为画面主角 */
.bm-route {
  fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;
  opacity: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
.bm-route-side {
  fill: none; stroke: rgba(2,5,12,.95); stroke-width: 12;
  stroke-linecap: round; stroke-linejoin: round; opacity: 1;
}
.bm-route-flow {
  fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 10 20; opacity: .95;
  animation: mapFlow 2.2s linear infinite;
}
.bm-route.is-dim { opacity: .2; stroke-width: 4.5; }

/* 底图路网退到背景层 */
.bm-road { opacity: .85; }
.bm-road-hi { opacity: .4; }

/* 站点底座加大，保证在图上一眼可见 */
.bm-stop-base { stroke: #fff; stroke-width: 2; }
.bm-stop-num { font-size: 13px; }
.bm-stop-name { font-size: 13px; stroke-width: 4px; }
.bm-stop-shadow { fill: rgba(0,0,0,.55); }
.atlas[data-focus="0"] .bm-route[data-day="1"],
.atlas[data-focus="0"] .bm-route[data-day="2"],
.atlas[data-focus="0"] .bm-route[data-day="3"] { opacity: .16; }
.atlas[data-focus="1"] .bm-route:not([data-day="1"]) { opacity: .16; }
.atlas[data-focus="2"] .bm-route:not([data-day="2"]) { opacity: .16; }
.atlas[data-focus="3"] .bm-route:not([data-day="3"]) { opacity: .16; }
.bm-route-flow.is-dim { opacity: 0; }

/* 站点标记：多天经过的站点加一圈虚线环 */
.bm-stop-multi { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 1.2; stroke-dasharray: 3 3; }

/* 行程站点：等腰三角形底座 + 编号 + 名称牌 */
.bm-stop { cursor: pointer; }
.bm-stop-shadow { fill: rgba(0,0,0,.45); }
.bm-stop-base { stroke: rgba(255,255,255,.85); stroke-width: 1.6; }
/* 编号画在三角形右侧：底边只有 22px 宽，塞在三角形里会被白描边吃掉一半 */
.bm-stop-num {
  fill: #eaf4ff; font-size: 11px; font-weight: 800; font-family: var(--mono);
  text-anchor: start; paint-order: stroke;
  stroke: rgba(4,8,18,.9); stroke-width: 3px; stroke-linejoin: round;
  pointer-events: none;
}
/* 站点名被避让推远时的引线 */
.bm-stop-leader {
  fill: none; stroke: rgba(226,238,255,.55); stroke-width: 1.1;
  stroke-dasharray: 2 3; stroke-linecap: round; pointer-events: none;
}
.bm-stop-name {
  fill: #eaf4ff; font-size: 12px; font-weight: 700; font-family: var(--font);
  text-anchor: middle; paint-order: stroke;
  stroke: rgba(4,8,18,.92); stroke-width: 3.4px; stroke-linejoin: round;
  pointer-events: none;
}
.bm-stop-pin { fill: var(--coral); }
.bm-stop:hover .bm-stop-base { stroke: #fff; stroke-width: 2.2; }
.bm-stop.is-dim { opacity: .3; }

.atlas-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px 12px; border-top: 1px solid var(--line-soft);
  font-size: 11.5px; color: var(--text-dim);
}
.atlas-credit { min-width: 0; }
.atlas-hint { margin-left: auto; white-space: nowrap; opacity: .85; }

@media (max-width: 720px) {
  .atlas-days { width: 100%; margin-left: 0; }
  .atlas-foot { font-size: 11px; }
  .atlas-hint { margin-left: 0; }
}

/* ---------- 列表视图（备用） ---------- */
.list-view { margin-bottom: 56px; }
.day-list { display: flex; flex-direction: column; gap: 18px; }
.day-card { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); scroll-margin-top: 90px; }
.day-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--dc1), var(--dc2)); }
.day-card[data-day="0"] { --dc1: var(--d1); --dc2: #38bdf8; }
.day-card[data-day="1"] { --dc1: var(--d2); --dc2: #0ea5e9; }
.day-card[data-day="2"] { --dc1: var(--d3); --dc2: #f472b6; }
.day-card[data-day="3"] { --dc1: var(--d4); --dc2: #fb7185; }
.day-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 20px 16px 24px; border-bottom: 1px solid var(--line-soft); }
.day-date { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 14px; background: linear-gradient(150deg, var(--dc1), var(--dc2)); color: #05121b; }
.day-date b { font-size: 21px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.day-date span { font-size: 10.5px; letter-spacing: .12em; margin-top: 3px; }
.day-meta h3 { margin: 0 0 3px; font-size: 18px; font-weight: 700; }
.day-meta p { margin: 0; font-size: 13.5px; color: var(--text-soft); }
.day-tags { margin-left: auto; display: flex; gap: 7px; flex-wrap: wrap; }
.tag { padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--dc1); background: color-mix(in srgb, var(--dc1) 14%, transparent); border: 1px solid color-mix(in srgb, var(--dc1) 34%, transparent); }
.day-body { padding: 6px 20px 18px 24px; }
.tl { position: relative; padding: 13px 0 13px 30px; border-bottom: 1px dashed var(--line-soft); }
.tl:last-child { border-bottom: 0; }
.tl::before { content: ""; position: absolute; left: 5px; top: 21px; width: 9px; height: 9px; border-radius: 50%; background: var(--panel-solid); border: 2px solid var(--dc1); }
.tl::after { content: ""; position: absolute; left: 9px; top: 32px; bottom: -1px; width: 1px; background: var(--line-soft); }
.tl:last-child::after { display: none; }
.tl-time { display: inline-block; margin-bottom: 4px; font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--dc1); font-variant-numeric: tabular-nums; }
.tl-title { margin: 0 0 3px; font-size: 15.5px; font-weight: 650; }
.tl-note { margin: 0; font-size: 13.5px; color: var(--text-soft); }
.tl.is-now { background: rgba(255,122,122,.07); border-radius: 10px; }
.tl.is-now .tl-time { color: var(--coral); }
.tl.is-now::before { background: var(--coral); border-color: var(--coral); box-shadow: 0 0 0 5px rgba(255,122,122,.18); }
.tl.is-passed { opacity: .55; }
.route { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 14px 0 2px; padding: 11px 14px; border-radius: var(--radius-sm); background: rgba(255,255,255,.035); border: 1px solid var(--line-soft); font-size: 12.5px; color: var(--text-soft); }
.route svg { font-size: 15px; color: var(--dc1); flex: none; }
.route .route-chain { color: var(--text-dim); }
.route b { color: var(--text); font-weight: 600; }

/* ---------- 来源 / callout ---------- */
.source-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.source-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 15px; border-radius: var(--radius-sm); background: rgba(255,255,255,.03); border: 1px solid var(--line-soft); font-size: 13.2px; }
.src-status { flex: none; font-size: 13px; }
.src-status.ok { color: var(--teal); }
.src-status.warn { color: var(--warm); }
.source-item .src-text { color: var(--text-soft); }
.source-item .src-text b { color: var(--text); font-weight: 620; }
.source-item a { color: var(--accent); border-bottom: 1px dotted rgba(95,211,255,.45); }
.source-item a:hover { border-bottom-style: solid; }

.callout { display: flex; gap: 13px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius-sm); }
.callout svg { flex: none; margin-top: 3px; font-size: 18px; }
.callout b { display: block; margin-bottom: 4px; font-size: 14.2px; }
.callout p { margin: 0; font-size: 13.4px; }
.callout-warn { background: linear-gradient(100deg, rgba(255,122,122,.13), rgba(255,183,77,.07)); border: 1px solid rgba(255,122,122,.3); }
.callout-warn svg { color: var(--coral); }
.callout-warn p { color: #ffd9cf; }
.callout-info { background: rgba(95,211,255,.09); border: 1px solid rgba(95,211,255,.26); }
.callout-info svg { color: var(--accent); }
.callout-info p { color: #cfeeff; }

/* ---------- 结尾 / 页脚 ---------- */
.closing { margin: 20px 0 40px; padding: 32px 24px; text-align: center; border-radius: var(--radius); background: linear-gradient(135deg, rgba(95,211,255,.13), rgba(167,139,250,.13) 55%, rgba(255,209,102,.1)); border: 1px solid rgba(95,211,255,.25); }
.closing p { margin: 0; font-size: clamp(16px, 3.2vw, 20px); font-weight: 700; }
.closing-soft { margin-top: 9px !important; font-size: 14.5px !important; font-weight: 500 !important; color: var(--text-soft); }
.site-footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--line-soft); font-size: 12px; letter-spacing: .06em; color: var(--text-dim); }
.site-footer a { color: var(--text-soft); }
.site-footer a:hover { color: var(--accent); }
.footer-rule { flex: none; width: 22px; height: 1px; background: var(--line); }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .route-view { grid-template-columns: minmax(0, 1fr); }
  .stop-panel { position: static; order: -1; }
  .stop-card h3 { font-size: 18.5px; }
}
@media (max-width: 860px) {
  .hud { grid-template-columns: 1fr 1fr; }
  .hud-now, .hud-next { padding-left: 0; border-left: 0; }
  .hud-count { text-align: left; }
  .topbar-live .live-zone { display: none; }
}
@media (max-width: 720px) {
  .page { padding: 0 15px 66px; }
  .topbar { margin: 0 -15px 18px; padding: 10px 15px; gap: 10px; }
  .topbar-title strong { font-size: 13.5px; }
  .topbar-title small { display: none; }
  .live-clock { font-size: 14px; }
  .swipe { margin: 0 -15px; padding: 0 15px; }
  .swipe-track { padding: 4px 15px 14px; scroll-padding-left: 15px; }
  .rail-head { padding: 13px 15px 12px 17px; }
  .rail-scroll { padding: 0 15px 4px 17px; }
  .rail-foot { padding: 9px 15px 13px 17px; }
  .rail-badges { margin-left: 0; width: 100%; }
  .check-list { grid-template-columns: 1fr; }
  .tile { width: 240px; }
  .tile-faq { width: 290px; }
  .section { margin-bottom: 46px; }
}
@media (max-width: 420px) {
  .hud { grid-template-columns: 1fr; }
  .fact-grid { grid-template-columns: 1fr 1fr; }
  .rail-date { width: 48px; height: 48px; }
  .rail-date b { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}
@media print {
  .aurora, .topbar-live, .icon-button, .swipe { display: none; }
  body { background: #fff; color: #111; }
  .rail-card, .fact, .tile, .check-item, .stop-card { background: #fff; border-color: #ccc; box-shadow: none; }
}