:root {
  color-scheme: dark;
  --bg: #07111d;
  --panel: rgba(8, 20, 33, .88);
  --panel-strong: rgba(10, 25, 41, .96);
  --line: rgba(142, 194, 222, .16);
  --line-strong: rgba(142, 214, 240, .3);
  --text: #eef8fd;
  --muted: #829aaa;
  --cyan: #70e6ff;
  --blue: #6d9dff;
  --violet: #b088ff;
  --mint: #62e1bd;
  --orange: #ffbd73;
  --shadow: 0 24px 70px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 72% 18%, rgba(35, 112, 145, .14), transparent 32%),
    radial-gradient(circle at 28% 92%, rgba(92, 64, 155, .13), transparent 34%),
    var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
}
button, input, select { font: inherit; }
button { color: inherit; }
button, select, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
[hidden] { display: none !important; }

.app-shell { min-height: 100dvh; }
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 0 clamp(16px, 2.6vw, 42px);
  border-bottom: 1px solid rgba(142, 194, 222, .1);
  background: linear-gradient(180deg, rgba(4, 12, 21, .93), rgba(4, 12, 21, .68));
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-orbit { width: 40px; height: 40px; position: relative; border: 1px solid rgba(112, 230, 255, .55); border-radius: 50%; }
.brand-orbit::before { content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(112, 230, 255, .34); border-radius: 50%; }
.brand-orbit::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); left: 16px; top: 16px; box-shadow: 0 0 14px var(--cyan); }
.brand-orbit i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; }
.brand-orbit i:first-child { top: 4px; right: 6px; }
.brand-orbit i:last-child { bottom: 5px; left: 4px; background: var(--violet); }
.brand-copy strong { display: block; font-size: 20px; line-height: 1; letter-spacing: .04em; }
.brand-copy small { display: block; margin-top: 5px; color: #688090; font-size: 11px; letter-spacing: .16em; }

.mode-switch { margin-left: auto; display: flex; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, .025); }
.mode-switch button { border: 0; border-radius: 9px; padding: 9px 14px; color: #829aaa; background: transparent; cursor: pointer; font-size: 14px; transition: .2s ease; }
.mode-switch button span { margin-right: 6px; color: #587080; font-size: 12px; }
.mode-switch button.active { color: var(--text); background: rgba(112, 230, 255, .1); box-shadow: inset 0 0 0 1px rgba(112, 230, 255, .1); }
.mode-switch button.active span { color: var(--cyan); }
.icon-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, .025); cursor: pointer; color: #a7bbc8; }

.map-stage { position: relative; width: 100vw; height: 100dvh; padding-top: 72px; overflow: hidden; }
.map-canvas { position: absolute; inset: 72px 0 0 0; overflow: hidden; }
.map-canvas::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(160, 209, 235, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(160, 209, 235, .025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, black, transparent 82%);
}
#geoMap, #timeSvg { position: absolute; inset: 0; width: 100%; height: 100%; }
#timeSvg { display: block; touch-action: none; cursor: grab; }
#timeSvg[hidden] { display: none; }
#viewportLayer { transform-origin: 500px 350px; transition: transform .24s cubic-bezier(.2,.75,.2,1); }
#timeSvg.dragging #viewportLayer { transition: none; }
.maplibregl-canvas { outline: none; }
.maplibregl-ctrl-attrib { display: none; }
.maplibregl-popup { z-index: 70; }
.maplibregl-popup-content { min-width: 176px; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 11px; color: var(--text); background: rgba(5, 15, 26, .96); box-shadow: var(--shadow); }
.maplibregl-popup-content strong { display: block; margin-bottom: 4px; font-size: 14px; }
.maplibregl-popup-content span { display: block; color: #8da4b3; font-size: 12px; line-height: 1.5; }
.maplibregl-popup-tip { border-top-color: rgba(5, 15, 26, .96) !important; }
.map-grid-line { stroke: rgba(145, 196, 220, .045); stroke-width: 1; stroke-dasharray: 2 12; vector-effect: non-scaling-stroke; }
.map-grid-label { fill: #4f697a; font-size: 11px; letter-spacing: .08em; }
.rail-line { fill: none; stroke-linecap: round; opacity: .28; vector-effect: non-scaling-stroke; transition: opacity .2s ease; }
.rail-line.active { opacity: 1; filter: url(#lineGlow); }
.rail-line.dim { opacity: .12; }
.city-node { cursor: pointer; }
.city-node .halo { opacity: 0; transition: .2s ease; }
.city-node .dot { stroke: rgba(255, 255, 255, .92); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: .2s ease; }
.city-node:hover .halo, .city-node.active .halo, .origin-node .halo { opacity: .3; }
.city-node:hover .dot, .city-node.active .dot { transform: scale(1.32); transform-box: fill-box; transform-origin: center; }
.city-node.dim { opacity: .18; }
.city-label { fill: #d9e8f0; font-size: 13px; font-weight: 650; paint-order: stroke; stroke: rgba(7, 17, 29, .94); stroke-width: 2.4px; stroke-linejoin: round; }
.city-meta { fill: #86a0b1; font-size: 11px; paint-order: stroke; stroke: rgba(7, 17, 29, .94); stroke-width: 2.2px; }
.origin-node .dot { fill: var(--cyan) !important; }
.origin-node .halo { fill: var(--cyan) !important; }
.origin-node .city-label { fill: #fff; font-weight: 800; }
.time-ring { fill: none; stroke: rgba(150, 204, 229, .12); stroke-width: 1; stroke-dasharray: 3 8; vector-effect: non-scaling-stroke; }
.time-ring-label { fill: #587383; font-size: 10px; }

.map-status { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: #8fa6b5; border: 1px solid var(--line); border-radius: 999px; background: rgba(6, 17, 29, .78); backdrop-filter: blur(14px); font-size: 12px; pointer-events: none; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 9px var(--mint); }
.map-tools { position: absolute; right: 24px; top: 22px; display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: rgba(7, 18, 31, .82); backdrop-filter: blur(12px); }
.map-tools button { width: 38px; height: 36px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: #a5bac7; cursor: pointer; font-size: 19px; }
.map-tools button:last-child { border-bottom: 0; font-size: 16px; }
.view-switch { position: absolute; right: 78px; top: 22px; display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: rgba(7, 18, 31, .82); backdrop-filter: blur(12px); }
.view-switch button { border: 0; border-radius: 7px; padding: 7px 11px; background: transparent; color: #78909f; cursor: pointer; font-size: 12px; }
.view-switch button.active { color: var(--text); background: rgba(255,255,255,.08); }
.map-legend { position: absolute; left: 360px; bottom: 142px; display: flex; gap: 14px; align-items: center; color: #728b9b; font-size: 11px; }
.map-legend span { display: flex; align-items: center; gap: 6px; }
.map-legend i { width: 7px; height: 7px; border-radius: 50%; }
.map-legend .fast { background: var(--cyan); }.map-legend .medium { background: var(--blue); }.map-legend .slow { background: var(--violet); }
.legend-note { margin-left: 4px; }
.tooltip { position: fixed; z-index: 80; min-width: 174px; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 11px; background: rgba(5, 15, 26, .95); box-shadow: var(--shadow); pointer-events: none; }
.tooltip strong { display: block; margin-bottom: 4px; font-size: 14px; }.tooltip span { display: block; color: #8da4b3; font-size: 12px; line-height: 1.5; }

.query-panel, .result-panel, .timeline-panel { z-index: 10; border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(22px); box-shadow: var(--shadow); }
.query-panel { position: absolute; top: 92px; left: 22px; width: 316px; max-height: calc(100dvh - 222px); overflow: auto; border-radius: 20px; padding: 21px; scrollbar-width: thin; }
.panel-grip { display: none; }
.eyebrow { margin: 0 0 7px; color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 0 0 20px; font-size: 25px; line-height: 1.14; letter-spacing: -.04em; }
.field { display: block; min-width: 0; margin: 0 0 12px; padding: 11px 12px; border: 1px solid rgba(142, 194, 222, .11); border-radius: 12px; background: rgba(255, 255, 255, .025); }
fieldset.field { min-width: 0; }
.field > span, .field legend { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; letter-spacing: .05em; }
.field select, .field input { width: 100%; min-width: 0; color: var(--text); border: 0; outline: 0; background: transparent; font-weight: 650; }
.field select.native-select { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.custom-select { position: relative; width: 100%; }
.select-trigger { width: 100%; min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0; border: 0; color: var(--text); background: transparent; text-align: left; cursor: pointer; font: inherit; font-weight: 650; }
.select-trigger:focus-visible { outline-offset: 5px; }
.select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-chevron { width: 7px; height: 7px; flex: 0 0 auto; margin: -3px 3px 0 0; border-right: 1.5px solid var(--cyan); border-bottom: 1.5px solid var(--cyan); transform: rotate(45deg); transition: transform .18s ease; }
.custom-select.open .select-chevron { margin-top: 3px; transform: rotate(225deg); }
.select-menu { position: absolute; z-index: 120; top: calc(100% + 9px); left: -8px; min-width: max(calc(100% + 16px), 142px); max-height: min(280px, 40dvh); overflow: auto; display: none; padding: 5px; border: 1px solid rgba(112, 230, 255, .24); border-radius: 11px; background: rgba(6, 19, 31, .98); box-shadow: 0 18px 48px rgba(0, 0, 0, .46), 0 0 22px rgba(112, 230, 255, .06); backdrop-filter: blur(18px); scrollbar-width: thin; scrollbar-color: #365267 transparent; }
.custom-select.open .select-menu { display: grid; gap: 2px; animation: selectReveal .16s ease-out; }
.custom-select.open-up .select-menu { top: auto; bottom: calc(100% + 9px); }
.select-option { position: relative; width: 100%; min-height: 34px; padding: 7px 27px 7px 9px; border: 0; border-radius: 7px; color: #a9bdc9; background: transparent; text-align: left; white-space: nowrap; cursor: pointer; font-size: 12px; }
.select-option:hover, .select-option:focus-visible { color: #e8f8ff; outline: 0; background: rgba(112, 230, 255, .08); }
.select-option.active { color: var(--cyan); background: rgba(112, 230, 255, .12); font-weight: 750; }
.select-option.active::after { content: "✓"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--cyan); font-size: 11px; }
.select-option:disabled { opacity: .38; cursor: default; }
@keyframes selectReveal { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
.field input[type="date"], .field input[type="datetime-local"] { color-scheme: dark; font-size: 13px; }
.field input[type="date"]::-webkit-calendar-picker-indicator, .field input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .5; }
.range-field > span { display: flex; justify-content: space-between; }
.range-field output { color: var(--text); font-weight: 700; }
input[type="range"] { height: 3px; accent-color: var(--cyan); cursor: pointer; }
.chips { display: flex; gap: 6px; }
.chip { flex: 1; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: #718999; cursor: pointer; }
.chip.active { color: #07111d; border-color: var(--cyan); background: var(--cyan); font-weight: 800; box-shadow: 0 0 14px rgba(112, 230, 255, .12); }
.summary-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 15px; }
.summary-strip span { min-width: 0; padding: 8px 4px; text-align: center; color: #718999; border-top: 1px solid var(--line); font-size: 11px; }
.summary-strip strong { display: block; margin-bottom: 2px; color: var(--text); font-size: 16px; white-space: nowrap; }
.route-inputs { display: grid; grid-template-columns: 1fr 18px 1fr; gap: 5px; align-items: center; }
.route-arrow { color: var(--cyan); text-align: center; }
.date-grid { display: grid; gap: 0; }
.date-range { display: grid; grid-template-columns: 1fr 10px 1fr; align-items: center; gap: 3px; }
.date-range b { color: #617988; font-weight: 400; }
.date-range input { font-size: 11px !important; }
.compact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 7px; }
.compact-grid .field:last-child { grid-column: 1 / -1; }
.compact-grid .wide-field { grid-column: 1 / -1; }
.money-input { display: flex; gap: 3px; align-items: center; }.money-input span { color: var(--cyan); font-weight: 700; }
.unit-input { display: flex; align-items: center; gap: 5px; }
.unit-input b { color: var(--cyan); font-size: 12px; }
.compact-field { padding-top: 9px; padding-bottom: 9px; }
.source-note { margin: 10px 2px 0; color: #617a8b; font-size: 10.5px; line-height: 1.55; }
.filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 3px 0 15px; }
.filter-chip { border: 1px solid var(--line); border-radius: 999px; padding: 6px 9px; color: #758e9e; background: rgba(255,255,255,.02); cursor: pointer; font-size: 11.5px; }
.filter-chip.active { color: #bdefff; border-color: rgba(112, 230, 255, .3); background: rgba(112, 230, 255, .07); }
.search-button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 13px; border: 0; border-radius: 11px; color: #06111c; background: var(--cyan); cursor: pointer; font-weight: 800; }
.search-button small { color: rgba(6,17,28,.62); font-size: 11px; font-weight: 700; }
.search-button.loading span::after { content: "…"; animation: blink 1s infinite; }

.result-panel { position: absolute; top: 92px; right: 22px; width: 310px; max-height: calc(100dvh - 222px); overflow: hidden; border-radius: 20px; padding: 16px; }
.result-heading { display: flex; align-items: center; justify-content: space-between; min-height: 28px; margin-bottom: 8px; }
.result-heading span { font-size: 13px; font-weight: 750; }.result-heading b { margin-left: 4px; color: var(--cyan); }
.result-heading button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; }
.result-subheading { min-height: 30px; margin: -4px 0 8px; color: #668091; font-size: 10.5px; line-height: 1.45; }
.route-list, .journey-list { max-height: calc(100dvh - 490px); overflow: auto; scrollbar-width: thin; scrollbar-color: #365267 transparent; }
.route-item { width: 100%; display: grid; grid-template-columns: 24px 1fr auto; gap: 7px; align-items: center; padding: 10px 7px; border: 0; border-top: 1px solid rgba(142,194,222,.08); background: transparent; text-align: left; cursor: pointer; }
.route-item:hover, .route-item.active { background: rgba(112,230,255,.055); }
.route-item .rank { color: #536e80; font-size: 11px; }.route-item strong { font-size: 13px; }.route-item small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }.route-item > span:last-child { color: #c7d8e2; font-size: 12px; }
.selected-card { margin-top: 12px; padding: 14px; border: 1px solid rgba(112,230,255,.13); border-radius: 14px; background: linear-gradient(145deg, rgba(25,55,77,.82), rgba(10,24,40,.9)); }
.selected-card header { display: flex; justify-content: space-between; align-items: flex-end; }.selected-card header small { display: block; color: var(--muted); font-size: 11px; }.selected-card header strong { display: block; margin-top: 2px; font-size: 20px; }.selected-card header b { color: var(--cyan); font-size: 15px; }
.mini-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }.mini-metrics span { color: var(--muted); font-size: 11px; }.mini-metrics strong { display: block; margin-top: 2px; color: var(--text); font-size: 12px; }
.plan-here { width: 100%; margin-top: 12px; padding: 9px; border: 1px solid rgba(112,230,255,.3); border-radius: 9px; color: var(--cyan); background: rgba(112,230,255,.06); cursor: pointer; font-size: 12px; font-weight: 700; }

.journey-card { width: 100%; display: block; margin-bottom: 8px; padding: 12px; border: 1px solid rgba(142,194,222,.1); border-radius: 13px; background: rgba(255,255,255,.018); text-align: left; cursor: pointer; }
.journey-card:hover, .journey-card.active { border-color: rgba(112,230,255,.3); background: rgba(112,230,255,.055); }
.journey-card-top { display: flex; justify-content: space-between; gap: 8px; }.journey-card-top strong { font-size: 13px; }.journey-card-top b { color: var(--cyan); font-size: 14px; }
.journey-card-route { margin: 7px 0 9px; color: #d6e7ef; font-size: 12px; line-height: 1.55; }
.journey-card-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }.journey-card-extra { color: var(--mint); }

.journey-empty { display: grid; justify-items: center; gap: 8px; padding: 28px 15px; color: #9cb0bd; text-align: center; }
.journey-empty strong { color: #d9e9f1; font-size: 13px; }
.journey-empty p { max-width: 240px; margin: 0; color: #6f8797; font-size: 11.5px; line-height: 1.65; }
.empty-orbit { position: relative; width: 30px; height: 30px; border: 1px solid rgba(112,230,255,.4); border-radius: 50%; }
.empty-orbit::before { content: ""; position: absolute; left: 50%; top: -4px; width: 6px; height: 6px; transform: translateX(-50%); border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px rgba(112,230,255,.7); }
.loading-line { height: 2px; margin: 0 15px 20px; overflow: hidden; border-radius: 2px; background: rgba(112,230,255,.08); }
.loading-line::after { content: ""; display: block; width: 35%; height: 100%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: loadingRail 1.1s ease-in-out infinite; }
@keyframes loadingRail { from { transform: translateX(-110%); } to { transform: translateX(310%); } }

.candidate-card, .train-card { margin-bottom: 8px; overflow: hidden; border: 1px solid rgba(142,194,222,.1); border-radius: 13px; background: rgba(255,255,255,.018); }
.candidate-card.active, .train-card.active { border-color: rgba(112,230,255,.38); background: rgba(112,230,255,.055); }
.candidate-main { width: 100%; display: grid; grid-template-columns: 24px 1fr auto; gap: 7px; align-items: center; padding: 11px 10px 8px; border: 0; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.candidate-rank { color: #536e80; font-size: 10px; }
.candidate-copy { min-width: 0; }.candidate-copy strong { display: block; font-size: 14px; }.candidate-copy small { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.detour-badge { padding: 4px 6px; border-radius: 7px; color: var(--cyan); background: rgba(112,230,255,.08); font-size: 11px; font-weight: 750; }
.candidate-detail { display: flex; justify-content: space-between; gap: 8px; padding: 0 10px 8px 41px; color: #718a9a; font-size: 10px; }
.candidate-action { width: calc(100% - 20px); margin: 0 10px 10px; padding: 8px; border: 1px solid rgba(112,230,255,.22); border-radius: 8px; color: #bfeffc; background: rgba(112,230,255,.055); cursor: pointer; font-size: 11px; font-weight: 700; }
.candidate-action:hover { background: rgba(112,230,255,.11); }

.train-card { padding: 11px; }
.train-top, .train-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.train-top strong { color: var(--cyan); font-size: 15px; }.train-top span { color: var(--muted); font-size: 10.5px; }
.train-times { display: grid; grid-template-columns: 1fr 18px 1fr; gap: 4px; align-items: center; margin: 9px 0; }
.train-times div:last-child { text-align: right; }.train-times b { display: block; color: #e6f4fa; font-size: 12px; white-space: nowrap; }.train-times small { display: block; margin-top: 3px; color: #7892a2; font-size: 10.5px; }.train-times i { color: #536f80; text-align: center; font-style: normal; }
.seat-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 9px; color: #7791a1; font-size: 9.5px; }.seat-row span { padding: 3px 5px; border-radius: 5px; background: rgba(255,255,255,.035); }
.train-actions { align-items: flex-end; }
.choose-train, .price-button, .copy-button { border: 1px solid rgba(112,230,255,.25); border-radius: 8px; padding: 7px 8px; color: var(--cyan); background: rgba(112,230,255,.06); cursor: pointer; font-size: 10.5px; font-weight: 700; }
.choose-train { margin-left: auto; color: #07111d; border-color: var(--cyan); background: var(--cyan); }
.price-button.error { color: #ffb6b6; border-color: rgba(255,150,150,.25); }.price-button:disabled { opacity: .55; cursor: wait; }
.price-list { display: flex; flex-wrap: wrap; gap: 4px 7px; color: #7f98a7; font-size: 9.5px; }.price-list b { color: #d4f6ff; }

.timeline-panel { position: absolute; left: 354px; right: 348px; bottom: 18px; min-height: 112px; padding: 13px 16px 12px; border-radius: 18px; }
.timeline-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.timeline-title span, .timeline-cost span { display: block; color: var(--muted); font-size: 11px; }.timeline-title strong { display: block; margin-top: 3px; font-size: 13px; }
.timeline-cost { display: grid; grid-template-columns: auto auto; column-gap: 8px; text-align: right; }.timeline-cost span { grid-column: 1 / -1; }.timeline-cost strong { color: var(--cyan); font-size: 17px; }.timeline-cost small { align-self: center; color: var(--mint); font-size: 11px; }
.timeline-track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; height: 30px; margin-top: 9px; }
.day-cell { position: relative; padding: 5px 7px; overflow: hidden; border-radius: 7px; background: rgba(255,255,255,.035); color: #8098a8; font-size: 11px; }
.day-cell.travel { color: #09131d; background: linear-gradient(90deg, var(--cyan), #86d9ff); }.day-cell.stay { color: #d9e8f0; background: rgba(176,136,255,.17); }.day-cell.arrive { color: #08131d; background: var(--mint); }
.day-cell strong { display: block; font-size: 11px; white-space: nowrap; }
.timeline-summary { margin-top: 7px; color: #7891a1; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timeline-summary-row { display: flex; align-items: center; gap: 10px; }.timeline-summary-row .timeline-summary { flex: 1; min-width: 0; }
.copy-button { flex: 0 0 auto; margin-top: 6px; padding: 5px 9px; }
.mobile-sheet-toggle { display: none; }

dialog { width: min(470px, calc(100vw - 28px)); padding: 28px; color: var(--text); border: 1px solid var(--line-strong); border-radius: 20px; background: #0b1d2e; box-shadow: 0 30px 100px #000; }
dialog::backdrop { background: rgba(2,8,14,.76); backdrop-filter: blur(8px); }
dialog h2 { margin: 0 0 14px; font-size: 24px; line-height: 1.25; letter-spacing: -.035em; }
dialog p:not(.eyebrow) { color: #9db0bc; font-size: 14px; line-height: 1.75; }
.dialog-close { position: absolute; right: 14px; top: 11px; border: 0; background: transparent; color: #718999; cursor: pointer; font-size: 24px; }
dialog .search-button { margin-top: 16px; }

@media (max-width: 1080px) {
  .query-panel { width: 290px; }
  .result-panel { width: 280px; }
  .timeline-panel { left: 326px; right: 318px; }
  .map-legend { left: 324px; }
}

@media (max-width: 820px) {
  body { overflow: hidden; }
  .topbar { height: 64px; padding: 0 14px; gap: 10px; }
  .brand-orbit { width: 34px; height: 34px; }.brand-orbit::after { left: 13px; top: 13px; }
  .brand-copy strong { font-size: 17px; }.brand-copy small { display: none; }
  .mode-switch { padding: 3px; }
  .mode-switch button { padding: 8px 9px; font-size: 12px; }.mode-switch button span { display: none; }
  .map-stage { padding-top: 64px; }.map-canvas { top: 64px; }
  .query-panel { top: auto; left: 10px; right: 10px; bottom: 10px; width: auto; max-height: 58dvh; padding: 16px; border-radius: 20px; transform: translateY(calc(100% + 18px)); transition: transform .28s ease; }
  .query-panel.open { z-index: 30; transform: translateY(0); }
  .panel-grip { display: block; width: 38px; height: 4px; margin: -7px auto 12px; border-radius: 2px; background: #506979; }
  .result-panel { top: 80px; right: 10px; width: min(285px, calc(100vw - 20px)); max-height: 42dvh; padding: 12px; border-radius: 16px; }
  .route-list, .journey-list { max-height: 23dvh; }
  .selected-card { display: none; }
  .timeline-panel { left: 10px; right: 10px; bottom: 62px; min-height: 105px; padding: 11px 12px; }
  .timeline-title > div:first-child { max-width: 58%; }.timeline-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .timeline-cost small { display: none; }
  .map-legend { left: 14px; bottom: 58px; flex-wrap: wrap; gap: 8px; }.map-legend .legend-note { display: none; }
  .map-tools { right: 12px; top: 66px; }.view-switch { right: 12px; top: 18px; }
  .map-status { left: 12px; top: 18px; transform: none; max-width: 48vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-sheet-toggle { position: absolute; z-index: 20; left: 50%; bottom: 10px; transform: translateX(-50%); display: block; padding: 10px 18px; border: 1px solid rgba(112,230,255,.3); border-radius: 999px; color: #dff9ff; background: rgba(8,25,39,.9); backdrop-filter: blur(14px); box-shadow: var(--shadow); cursor: pointer; font-size: 12px; }
  .journey-query h1 { margin-bottom: 14px; }
}

@media (max-width: 520px) {
  .about-button { width: 30px; height: 30px; }
  .mode-switch button { padding: 7px 8px; font-size: 11px; }
  .result-panel { left: 10px; right: 10px; width: auto; }
  .timeline-title { gap: 7px; }.timeline-title strong { font-size: 11px; }
  .timeline-track { overflow-x: auto; grid-auto-columns: minmax(74px, 1fr); }
  .query-panel { max-height: 68dvh; }
  .route-inputs { grid-template-columns: 1fr 14px 1fr; }
  .compact-grid { grid-template-columns: 1fr 1fr; }
  .city-label { font-size: 11px; }.city-meta { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .rail-line { stroke-dasharray: 4 7; animation: railFlow 20s linear infinite; }
  .origin-node .halo { animation: pulse 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes railFlow { to { stroke-dashoffset: -110; } }
  @keyframes pulse { 50% { transform: scale(1.32); opacity: .28; } }
  @keyframes blink { 50% { opacity: .35; } }
}

/* Train card actions: keep price results and the selection action readable. */
.train-actions { flex-wrap: wrap; min-width: 0; }
.train-actions > .price-list { flex: 0 0 100%; min-width: 0; max-width: 100%; order: 0; }
.train-actions > .price-button { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
.train-actions > .choose-train { flex: 0 0 auto; min-width: 96px; margin-left: auto; white-space: nowrap; }
.price-list { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.price-list span { min-width: 0; max-width: 100%; }


.map-coordinate-missing { color: #ffd28a; font-weight: 700; }

/* Date-time controls are interactive across their full field area. */
.datetime-field { cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.datetime-field:hover, .datetime-field:focus-within { border-color: rgba(112, 230, 255, .38); background: rgba(112, 230, 255, .055); box-shadow: 0 0 0 2px rgba(112, 230, 255, .06); }
.datetime-field input[type="datetime-local"] { min-height: 32px; padding: 5px 7px; border: 1px solid rgba(142, 194, 222, .16); border-radius: 8px; background: rgba(3, 13, 23, .34); cursor: pointer; }
.datetime-field input[type="datetime-local"]::-webkit-calendar-picker-indicator { opacity: 1; cursor: pointer; }
.datetime-field small { display: block; margin-top: 5px; color: #688393; font-size: 10px; }
.arrival-toggle { display: flex; align-items: center; gap: 8px; margin: 1px 0 12px; color: #a8bdc9; cursor: pointer; font-size: 12px; font-weight: 700; }
.arrival-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--cyan); cursor: pointer; }
.arrival-time-fields { display: grid; gap: 0; }
.arrival-time-fields[hidden] { display: none; }