:root {
  color-scheme: dark;
  --bg: #070b14;
  --sidebar: #0b1220;
  --panel: rgba(15, 24, 40, 0.88);
  --panel-strong: #111c2d;
  --border: rgba(148, 163, 184, 0.14);
  --border-bright: rgba(148, 163, 184, 0.25);
  --text: #e7eef8;
  --muted: #8fa0b7;
  --muted-2: #62738b;
  --cyan: #29d7c0;
  --blue: #4ea5ff;
  --amber: #f2b86d;
  --red: #f1848d;
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--bg); }
body { color: var(--text); overflow-x: hidden; }
button, select, input { font: inherit; }
button { cursor: pointer; }

.app-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: relative; display: flex; flex-direction: column; gap: 24px; padding: 28px 18px 18px; background: linear-gradient(180deg, #0d1728 0%, #09111e 100%); border-right: 1px solid var(--border); }
.sidebar::before { content: ""; position: absolute; inset: 0 0 auto; height: 220px; background: radial-gradient(circle at 12% 0%, rgba(41, 215, 192, .16), transparent 58%); pointer-events: none; }
.brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #03121a; font-size: 20px; font-weight: 800; background: linear-gradient(135deg, var(--cyan), #7ce6d9); box-shadow: 0 8px 22px rgba(41, 215, 192, .22); }
.brand-title { letter-spacing: .04em; font-size: 17px; font-weight: 760; }
.brand-subtitle { margin-top: 3px; color: var(--muted-2); font-size: 9px; font-weight: 800; letter-spacing: .22em; }
.connection-pill { display: flex; align-items: center; gap: 8px; width: fit-content; padding: 7px 10px; border: 1px solid rgba(41, 215, 192, .18); border-radius: 100px; color: #96d9cf; background: rgba(41, 215, 192, .07); font-size: 11px; }
.connection-dot, .pulse-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(41, 215, 192, .10); }
.connection-dot.offline { background: var(--red); box-shadow: 0 0 0 4px rgba(241, 132, 141, .10); }
.sidebar-section { position: relative; z-index: 1; padding: 17px 14px; border: 1px solid var(--border); border-radius: 16px; background: rgba(17, 28, 45, .62); }
.scenario-section { border-color: rgba(41, 215, 192, .16); background: linear-gradient(145deg, rgba(24, 61, 72, .48), rgba(17, 28, 45, .6)); }
.section-kicker, .panel-kicker, .eyebrow { color: var(--muted-2); font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.scenario-title { margin-top: 10px; font-size: 16px; font-weight: 680; }
.scenario-route { display: flex; align-items: center; gap: 8px; margin-top: 9px; color: #b8c9d9; font-size: 12px; }
.route-arrow { color: var(--cyan); }
.scenario-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.soft-tag { padding: 4px 7px; border-radius: 6px; color: #a6b8cb; background: rgba(148, 163, 184, .09); font-size: 10px; }
.accent-tag { color: #a7e9df; background: rgba(41, 215, 192, .10); }
.section-heading { display: flex; align-items: center; justify-content: space-between; color: #c2cfde; font-size: 12px; font-weight: 680; }
.live-label { display: flex; align-items: center; gap: 5px; color: var(--cyan); font-size: 9px; letter-spacing: .1em; }
.live-label span { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); animation: breathe 1.4s ease-in-out infinite; }
.section-count { color: var(--muted-2); font-size: 10px; font-weight: 500; }
.control-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px 36px; gap: 6px; margin-top: 15px; }
.primary-button, .icon-button, .ghost-button, .toolbar-button, .small-button { border: 1px solid transparent; border-radius: 9px; color: var(--text); background: rgba(148, 163, 184, .10); transition: .2s ease; }
.primary-button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; color: #061c1d; background: linear-gradient(135deg, #5be3d0, #27c8bd); box-shadow: 0 7px 20px rgba(41, 215, 192, .16); font-size: 12px; font-weight: 800; }
.primary-button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.primary-button.playing { color: #0c1b2a; background: linear-gradient(135deg, #8bc9ff, #4ea5ff); box-shadow: 0 7px 20px rgba(78, 165, 255, .18); }
.button-icon { font-size: 10px; }
.icon-button { min-height: 38px; color: #aabacd; font-size: 14px; }
.icon-button:hover, .ghost-button:hover, .toolbar-button:hover, .small-button:hover { border-color: var(--border-bright); background: rgba(148, 163, 184, .17); }
.field-label { display: block; margin: 16px 0 7px; color: var(--muted); font-size: 10px; }
.select-control { width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; outline: none; color: #bfcede; background: #101d2f; font-size: 11px; }
.select-control:focus { border-color: rgba(41, 215, 192, .5); }
.quick-jump { margin-top: 14px; }
.quick-jump-label { margin: 0 0 7px; }
.quick-jump-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.quick-time-button {
  min-height: 32px;
  padding: 6px 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: #aebfd0;
  background: rgba(148, 163, 184, .08);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  transition: .2s ease;
}
.quick-time-button:hover { border-color: rgba(41, 215, 192, .38); color: #d8fff9; background: rgba(41, 215, 192, .1); }
.quick-time-button.active { border-color: rgba(41, 215, 192, .5); color: #061c1d; background: #5be3d0; }
.mini-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.mini-stat { padding: 10px; border-radius: 10px; background: rgba(0, 0, 0, .13); }
.mini-stat span { display: block; color: var(--muted-2); font-size: 10px; }
.mini-stat strong { display: block; margin-top: 6px; color: #dce8f2; font-size: 19px; font-weight: 650; }
.warning-number { color: var(--amber) !important; }
.sidebar-footer { margin-top: auto; color: var(--muted-2); font-size: 10px; line-height: 1.75; }
.footer-line { color: #8faeb4; }
.status-check { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 3px; border-radius: 50%; color: #071c1b; background: var(--cyan); font-size: 9px; font-weight: 900; }

.main-content { min-width: 0; padding: 0 34px 42px; background: radial-gradient(circle at 70% -12%, rgba(29, 72, 105, .30), transparent 36%), var(--bg); }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 75px; border-bottom: 1px solid var(--border); }
.breadcrumbs { display: flex; align-items: center; gap: 9px; color: var(--muted-2); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.breadcrumbs b { color: #415269; }
.breadcrumbs strong { color: #b0c0d1; font-size: 10px; }
.topbar-actions { display: flex; align-items: center; gap: 20px; }
.ghost-button { padding: 8px 11px; color: var(--muted); font-size: 11px; }
.ghost-button span { margin-right: 4px; color: var(--cyan); font-size: 15px; }
.clock-display { display: flex; align-items: baseline; gap: 10px; }
.clock-label { color: var(--muted-2); font-size: 10px; }
.clock-display strong { min-width: 77px; color: #e6f5f3; font-family: "SFMono-Regular", Consolas, monospace; font-size: 17px; letter-spacing: .04em; }
.page-intro { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 34px 2px 25px; }
.eyebrow { color: var(--cyan); }
h1, h2, p { margin: 0; }
h1 { margin-top: 8px; letter-spacing: -.035em; font-size: clamp(26px, 3vw, 35px); font-weight: 740; }
.page-intro p { margin-top: 9px; color: var(--muted); font-size: 12px; }
.intro-metric { min-width: 150px; padding: 14px 17px; border-left: 1px solid rgba(41, 215, 192, .45); background: linear-gradient(90deg, rgba(41, 215, 192, .07), transparent); }
.intro-metric span, .intro-metric small { display: block; color: var(--muted); font-size: 10px; }
.intro-metric strong { display: inline-block; margin: 5px 7px 0 0; color: var(--cyan); font-size: 28px; font-weight: 680; }
.intro-metric small { display: inline-block; color: var(--muted-2); }

.map-card, .panel { border: 1px solid var(--border); border-radius: 17px; background: var(--panel); box-shadow: var(--shadow); }
.map-card { overflow: hidden; background: #e7f1e7; border-color: rgba(55, 105, 78, .28); box-shadow: 0 18px 45px rgba(8, 30, 17, .18); }
.map-card .card-toolbar { border-bottom-color: rgba(55, 105, 78, .18); background: rgba(246, 251, 244, .72); }
.map-card .toolbar-title { color: #294d67; }
.map-card .toolbar-dot { background: #2f66aa; box-shadow: 0 0 0 4px rgba(47, 102, 170, .12); }
.map-card .map-status { color: #3b7663; }
.map-card .toolbar-button { color: #315a74; background: rgba(47, 102, 170, .08); }
.map-card .toolbar-button.active { color: #0f766e; background: rgba(32, 188, 169, .16); }
.card-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.toolbar-title { color: #cfdae6; font-size: 12px; font-weight: 700; }
.toolbar-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(41, 215, 192, .11); }
.toolbar-muted { color: var(--muted-2); font-size: 9px; letter-spacing: .12em; }
.map-toolbar-actions { display: flex; align-items: center; gap: 14px; }
.map-status { display: flex; align-items: center; gap: 7px; color: #83a6a9; font-size: 10px; }
.toolbar-button { padding: 6px 9px; color: var(--muted); font-size: 10px; }
.map-viewport { position: relative; min-height: 530px; overflow: hidden; background: #e7f1e7; cursor: grab; touch-action: none; }
.map-viewport.dragging { cursor: grabbing; }
.map-viewport::before, .map-viewport::after { content: ""; position: absolute; z-index: 0; border-radius: 48% 52% 58% 42%; background: rgba(159, 205, 170, .28); pointer-events: none; }
.map-viewport::before { width: 64%; height: 88%; top: -21%; left: -17%; transform: rotate(16deg); }
.map-viewport::after { width: 75%; height: 58%; right: -16%; bottom: -18%; transform: rotate(-19deg); background: rgba(176, 215, 184, .24); }
.map-grid { position: absolute; inset: 0; z-index: 0; opacity: .42; background-image: linear-gradient(rgba(73, 118, 93, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(73, 118, 93, .06) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); }
.map-region { position: absolute; z-index: 1; color: rgba(57, 98, 70, .28); font-size: clamp(15px, 2vw, 25px); font-weight: 700; pointer-events: none; }
.map-region-north { top: 15%; left: 12%; }
.map-region-center { top: 44%; left: 30%; }
.map-region-east { top: 54%; right: 17%; }
.map-region-south { right: 6%; bottom: 8%; color: rgba(42, 92, 67, .38); }
#networkMap { position: relative; z-index: 2; display: block; width: 100%; height: 530px; padding: 18px 26px; overflow: visible; cursor: inherit; }
#mapWorld { transform-origin: 0 0; }
.section-line { fill: none; stroke: #2f66aa; stroke-width: 1.35; stroke-linecap: round; opacity: .72; vector-effect: non-scaling-stroke; }
.section-line.up, .section-line.down { stroke: #2f66aa; }
.station-group { cursor: pointer; }
.station-halo { fill: rgba(255, 255, 255, .48); stroke: rgba(47, 102, 170, .18); stroke-width: .6; vector-effect: non-scaling-stroke; }
.station-node { fill: #f8fcf8; stroke: #2f66aa; stroke-width: 1.15; vector-effect: non-scaling-stroke; }
.station-node.passing { fill: #e7faf3; stroke: #159f8d; }
.station-node.overtake-detected { stroke: #d95a5a; stroke-width: 1.45; }
.station-node.overtake-detected-weak { stroke: #9d8f9d; stroke-width: 1.34; }
.station-overtake-badge { fill: rgba(217, 90, 90, 0.16); stroke: rgba(217, 90, 90, 0.7); stroke-width: .52; vector-effect: non-scaling-stroke; animation: overtakeStationPulse 2s ease-in-out infinite; }
.station-overtake-badge.strong { fill: rgba(217, 90, 90, 0.22); stroke: rgba(217, 90, 90, 0.92); }
.station-overtake-badge.long-hold { fill: rgba(247, 140, 33, 0.2); stroke: rgba(247, 140, 33, 0.96); animation: overtakeStationPulse 1.55s ease-in-out infinite; }
.station-label-leader { stroke: #567b95; stroke-width: .72; stroke-linecap: round; opacity: .82; vector-effect: non-scaling-stroke; pointer-events: none; }
.station-label-leader.hidden { display: none; }
.station-label { fill: #2c4d68; font-size: 2.05px; font-weight: 700; letter-spacing: .01em; paint-order: stroke; stroke: #e7f1e7; stroke-width: .58px; pointer-events: auto; cursor: pointer; }
.station-label.hidden { display: none; }
.station-label.auto-hidden,
.station-label-leader.auto-hidden,
.train-label.auto-hidden { display: none; }
.train-marker { cursor: pointer; transition: transform .11s linear; }
.train-marker .train-core { fill: #fffdf6; filter: url(#trainShadow); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.train-marker.up .train-core { stroke: #1d74b7; }
.train-marker.down .train-core { stroke: #db8a3d; }
.train-marker .train-dot { vector-effect: non-scaling-stroke; }
.train-marker.up .train-dot { fill: var(--cyan); }
.train-marker.down .train-dot { fill: var(--amber); }
.train-marker.overtake-overtaker .train-glow { animation: overtakeGlow 0.9s ease-in-out infinite; fill: rgba(41, 217, 191, 0.68); }
.train-marker.overtake-overtaken .train-glow { animation: overtakeGlow 1.25s ease-in-out infinite 0.2s; fill: rgba(255, 196, 89, 0.62); }
.train-marker.overtake-pair .train-glow { fill: rgba(124, 132, 255, 0.46); }
.train-marker.overtake-strong .train-core { filter: drop-shadow(0 0 .3px #ffb15a); }
.train-marker.overtake-long .train-core { filter: drop-shadow(0 0 1.1px rgba(255, 153, 68, 0.72)); }
.train-marker.overtake-conf-high { transform-box: fill-box; }
.train-marker.overtake-conf-high .train-dot { animation: overtakerPulse 0.95s ease-in-out infinite; }
.train-marker.overtake-conf-mid .train-dot { animation: overtakerPulse 1.35s ease-in-out infinite; opacity: .82; }
.train-marker.overtake-conf-low .train-dot { opacity: .7; }
.train-label { fill: #224769; font-size: 2.4px; font-weight: 800; paint-order: stroke; stroke: #e7f1e7; stroke-width: .75px; pointer-events: none; }
.train-label.hidden { display: none; }

.train-glow { fill: rgba(37, 217, 194, 0.22); vector-effect: non-scaling-stroke; }

.overtake-segment { fill: none; stroke: rgba(255, 110, 106, 0.86); stroke-width: 2.2; stroke-dasharray: 4 2; opacity: 0.84; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(255, 110, 106, 0.42)); }
.overtake-segment.long-hold { stroke: rgba(247, 140, 33, 0.98); stroke-width: 2.45; }
.overtake-segment.weak { stroke: rgba(116, 137, 155, 0.74); stroke-dasharray: 2 3; }
.overtake-segment.strong { animation: overtakeSegmentMove 1.3s linear infinite; }
.overtake-segment-wrap { pointer-events: none; }
.overtake-segment-dot { fill: rgba(255, 196, 89, 0.58); vector-effect: non-scaling-stroke; animation: overtakeSegmentDot 0.75s ease-in-out infinite; }
.overtake-segment.overtake-slow { animation-duration: 1.95s; }
.overtake-segment.overtake-overtaker { stroke: rgba(38, 214, 194, 0.98); }
.overtake-station { fill: rgba(255, 110, 106, 0.16); stroke: rgba(255, 110, 106, 0.7); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.overtake-station.long-hold { fill: rgba(255, 196, 89, 0.24); stroke: rgba(255, 196, 89, 0.92); animation: overtakeStationPulse 1.7s ease-in-out infinite; }
.overtake-station-wrap { pointer-events: none; }
.overtake-station.strong { fill: rgba(255, 110, 106, 0.26); stroke: rgba(255, 110, 106, 0.88); }
.overtake-station.weak { fill: rgba(116, 137, 155, 0.14); stroke: rgba(116, 137, 155, 0.62); }
.overtake-station-wave { fill: transparent; stroke: rgba(255, 110, 106, 0.28); stroke-width: 0.55; opacity: 0.8; animation: overtakeStationPulse 1.85s ease-in-out infinite; }
.overtake-station-wave.strong { stroke: rgba(217, 90, 90, 0.42); }
.overtake-station-wave.weak { stroke: rgba(116, 137, 155, 0.4); }

@keyframes overtakeGlow { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.85; } }
@keyframes overtakeStationPulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
@keyframes overtakeSegmentMove {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -12; }
}
@keyframes overtakeSegmentDot {
  0%, 100% { transform: scale(1); opacity: .28; }
  50% { transform: scale(1.18); opacity: .88; }
}
@keyframes overtakerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
.map-tooltip { position: absolute; z-index: 3; display: none; min-width: 145px; padding: 10px 11px; border: 1px solid var(--border-bright); border-radius: 9px; color: #d9e6f2; background: rgba(7, 14, 25, .95); box-shadow: 0 15px 40px rgba(0, 0, 0, .32); font-size: 11px; pointer-events: none; }
.map-tooltip.visible { display: block; }
.map-tooltip strong { display: block; margin-bottom: 5px; color: var(--cyan); font-size: 12px; }
.map-tooltip span { color: var(--muted); }
.map-empty { position: absolute; inset: 0; z-index: 2; display: none; place-items: center; color: var(--muted); font-size: 12px; }
.map-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 18px; border-top: 1px solid rgba(55, 105, 78, .18); background: rgba(246, 251, 244, .72); }
.legend-group { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; color: #56717d; font-size: 10px; }
.legend-line { display: inline-block; width: 17px; height: 2px; border-radius: 99px; }
.legend-line.up { background: linear-gradient(90deg, var(--cyan), var(--blue)); }
.legend-line.down { background: linear-gradient(90deg, var(--amber), var(--red)); }
.legend-node { display: inline-block; width: 8px; height: 8px; border: 1px solid #2f66aa; border-radius: 50%; background: #f8fcf8; }
.legend-node.passing { border-color: #159f8d; background: #e7faf3; }
.legend-overtake-station { display: inline-block; width: 10px; height: 10px; border: 1px solid #d95a5a; border-radius: 50%; background: linear-gradient(135deg, rgba(255, 110, 106, 0.2), rgba(255, 196, 89, 0.24)); box-shadow: 0 0 0 2px rgba(255, 110, 106, 0.15); }
.legend-overtake-segment { display: inline-block; width: 16px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 110, 106, 0.35), rgba(255, 196, 89, 0.78)); }
.map-footer-note { color: #698481; font-size: 10px; }

.dashboard-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
.panel { padding: 18px; box-shadow: none; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.panel-kicker { color: var(--muted-2); }
h2 { margin-top: 5px; color: #d9e4ef; font-size: 15px; font-weight: 680; letter-spacing: -.015em; }
.timeline-current { padding: 7px 10px; border: 1px solid rgba(41, 215, 192, .22); border-radius: 8px; color: var(--cyan); background: rgba(41, 215, 192, .08); font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; }
.timeline-wrap { position: relative; margin-top: 30px; padding: 0 5px; }
.timeline-track { position: absolute; top: 6px; right: 5px; left: 5px; height: 3px; border-radius: 99px; background: #1c2b40; }
.timeline-progress { width: 0; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--cyan), var(--blue)); box-shadow: 0 0 11px rgba(41, 215, 192, .38); }
.time-slider { position: relative; z-index: 1; display: block; width: 100%; height: 16px; margin: 0; appearance: none; background: transparent; }
.time-slider::-webkit-slider-thumb { width: 13px; height: 13px; appearance: none; border: 3px solid #b8fff2; border-radius: 50%; background: #22bcae; box-shadow: 0 0 0 4px rgba(41, 215, 192, .17), 0 3px 10px rgba(0, 0, 0, .4); }
.time-slider::-moz-range-thumb { width: 9px; height: 9px; border: 3px solid #b8fff2; border-radius: 50%; background: #22bcae; box-shadow: 0 0 0 4px rgba(41, 215, 192, .17); }
.timeline-ticks { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted-2); font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; }
.timeline-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; color: var(--muted-2); font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; }
.timeline-hint { color: var(--muted); font-family: inherit; }
.timeline-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 17px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: 10px; }
.small-button { padding: 7px 10px; color: #b5fff4; background: rgba(41, 215, 192, .09); font-size: 10px; }
.stream-badge { padding: 5px 8px; border-radius: 100px; color: var(--cyan); background: rgba(41, 215, 192, .09); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.event-list { display: flex; flex-direction: column; gap: 7px; max-height: 148px; margin-top: 15px; overflow: auto; }
.event-row { display: grid; grid-template-columns: 55px 1fr auto; gap: 9px; align-items: center; padding: 8px 9px; border: 1px solid transparent; border-radius: 8px; background: rgba(0, 0, 0, .13); font-size: 10px; }
.event-row:hover { border-color: var(--border); background: rgba(148, 163, 184, .07); }
.event-time { color: var(--muted-2); font-family: "SFMono-Regular", Consolas, monospace; }
.event-label { color: #bbcbd9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-train { padding: 3px 5px; border-radius: 4px; color: #8cecdf; background: rgba(41, 215, 192, .09); font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; }
.event-row.warning .event-label { color: var(--amber); }
.event-row.warning .event-train { color: #ffc68b; background: rgba(242, 184, 109, .10); }
.traffic-list { margin-top: 10px; max-height: 132px; overflow: auto; }
.traffic-list .event-row { grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 6px; }
.traffic-list .event-row .event-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.traffic-list .event-row .event-train { color: #8cecdf; }
.traffic-refresh { margin-top: 8px; width: 100%; }
.empty-state { padding: 30px 0; color: var(--muted-2); text-align: center; font-size: 11px; }
.inspector-panel { margin-top: 16px; }
.inspector-heading { align-items: center; }
.inspector-hint { color: var(--muted-2); font-size: 10px; }
.inspector-content { min-height: 60px; margin-top: 15px; }
.inspector-empty { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px dashed var(--border); border-radius: 10px; color: var(--muted); }
.inspector-empty span { color: var(--cyan); font-size: 19px; }
.inspector-empty p { font-size: 11px; }
.inspector-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.detail-cell { padding: 11px; border-radius: 9px; background: rgba(0, 0, 0, .14); }
.detail-cell span { display: block; color: var(--muted-2); font-size: 9px; }
.detail-cell strong { display: block; margin-top: 5px; color: #dbe8f2; font-size: 12px; font-weight: 650; }
.detail-cell strong.cyan { color: var(--cyan); }
.detail-cell strong.amber { color: var(--amber); }
.visits-page {
  min-height: 100vh;
  padding: 28px 22px;
  background: radial-gradient(circle at 80% -12%, rgba(29, 72, 105, .25), transparent 36%), var(--bg);
}
.visits-shell {
  width: min(960px, 100%);
  margin: 0 auto;
}
.visits-header {
  margin-bottom: 16px;
  padding: 14px 2px;
}
.visits-header h1 { margin-top: 6px; }
.visits-header p { margin-top: 6px; color: var(--muted); font-size: 11px; }
.visits-panel { margin-bottom: 16px; }
.visits-stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.visits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
.visits-grid > div { min-width: 0; }
.visits-grid .section-heading { margin-bottom: 8px; }
.visits-grid .event-list { max-height: 250px; }
.visits-grid #topPathStats { max-height: 250px; }
.privacy-note {
  margin: 10px 0 2px;
  padding: 10px 12px;
  border: 1px solid rgba(41, 215, 192, .14);
  border-radius: 9px;
  color: var(--muted);
  background: rgba(41, 215, 192, .04);
  font-size: 10px;
  line-height: 1.65;
}
.visit-request-row { padding: 9px 10px; border-radius: 8px; background: rgba(0, 0, 0, .13); }
.visit-request-main { display: grid; grid-template-columns: 55px 1fr auto; gap: 9px; align-items: center; font-size: 10px; }
.visit-request-meta { margin-top: 6px; color: var(--muted-2); font-size: 9px; line-height: 1.5; overflow-wrap: anywhere; }

@media (max-width: 820px) {
  .visits-stats { grid-template-columns: repeat(2, 1fr); }
  .visits-grid {
    display: block;
  }
  .visits-grid > div {
    margin-bottom: 12px;
  }
}

@keyframes breathe { 0%, 100% { opacity: .42; } 50% { opacity: 1; } }
.fit-flash { animation: fitFlash .55s ease; }
@keyframes fitFlash { 30% { box-shadow: 0 0 0 2px rgba(41, 215, 192, .35), var(--shadow); } }

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .main-content { padding: 0 22px 34px; }
  .dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { display: grid; grid-template-columns: 1fr 1fr; align-items: start; padding: 16px; }
  .brand, .connection-pill, .sidebar-footer { grid-column: 1 / -1; }
  .sidebar-footer { margin-top: 0; }
  .main-content { padding: 0 14px 28px; }
  .topbar { min-height: 64px; }
  .breadcrumbs { display: none; }
  .page-intro { align-items: start; padding-top: 25px; }
  .intro-metric { display: none; }
  .map-viewport, #networkMap { min-height: 350px; height: 350px; }
  #networkMap { padding: 18px 14px; }
  .map-footer { align-items: flex-start; flex-direction: column; }
  .map-footer-note { display: none; }
  .inspector-grid { grid-template-columns: 1fr 1fr; }
}

:root {
  color-scheme: light;
  --bg: #f4f7f5;
  --sidebar: #ffffff;
  --panel: #ffffff;
  --panel-strong: #eef4f2;
  --border: rgba(52, 83, 94, 0.16);
  --border-bright: rgba(36, 105, 132, 0.26);
  --text: #1e2c36;
  --muted: #647487;
  --muted-2: #8190a0;
  --cyan: #20bca9;
  --blue: #2f66aa;
  --amber: #c8792c;
  --red: #d85c55;
  --shadow: 0 18px 42px rgba(43, 78, 86, 0.12);
}

html, body {
  background: var(--bg);
}

body {
  color: var(--text);
}

.app-shell {
  grid-template-columns: 230px minmax(0, 1fr);
}

.sidebar {
  gap: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #eef5f3 100%);
  border-right-color: rgba(41, 87, 96, 0.14);
  box-shadow: 10px 0 30px rgba(37, 72, 82, 0.06);
}

.sidebar::before {
  height: 190px;
  background: radial-gradient(circle at 18% 4%, rgba(32, 188, 169, 0.13), transparent 60%);
}

.brand-mark {
  color: #ffffff;
  background: #1e8f83;
  border-radius: 8px;
  box-shadow: none;
}

.brand-title,
h1,
h2,
.scenario-title,
.section-heading,
.toolbar-title {
  color: #1f3340;
}

.brand-subtitle,
.section-kicker,
.panel-kicker,
.eyebrow,
.breadcrumbs,
.clock-label,
.field-label,
.section-count {
  color: #6c7d8f;
}

.connection-pill {
  color: #177d73;
  background: rgba(32, 188, 169, 0.08);
  border-color: rgba(32, 188, 169, 0.22);
}

.sidebar-section,
.panel {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(52, 83, 94, 0.16);
}

.clock-section {
  padding: 12px 14px;
}

.sidebar-clock {
  margin-top: 6px;
  color: #17394f;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.scenario-section {
  background: linear-gradient(145deg, rgba(234, 249, 245, 0.94), rgba(255, 255, 255, 0.92));
  border-color: rgba(32, 188, 169, 0.22);
}

.scenario-route,
.topbar-actions,
.page-intro p,
.timeline-footer,
.timeline-actions,
.inspector-hint,
.map-footer-note {
  color: var(--muted);
}

.soft-tag {
  color: #526579;
  background: rgba(76, 113, 126, 0.10);
}

.accent-tag {
  color: #147a71;
  background: rgba(32, 188, 169, 0.13);
}

.primary-button {
  color: #ffffff;
  background: #20a99a;
  box-shadow: 0 8px 18px rgba(32, 169, 154, 0.18);
}

.primary-button.playing {
  color: #ffffff;
  background: #2f66aa;
  box-shadow: 0 8px 18px rgba(47, 102, 170, 0.18);
}

.icon-button,
.ghost-button,
.toolbar-button,
.small-button {
  color: #315068;
  background: rgba(47, 102, 170, 0.08);
}

.select-control {
  color: #273b4c;
  background: #ffffff;
  border-color: rgba(52, 83, 94, 0.20);
}

.quick-time-button {
  color: #315068;
  background: rgba(47, 102, 170, 0.06);
  border-color: rgba(52, 83, 94, 0.20);
}

.quick-time-button:hover {
  color: #0f766e;
  background: rgba(32, 188, 169, 0.12);
  border-color: rgba(32, 188, 169, 0.34);
}

.quick-time-button.active {
  color: #ffffff;
  background: #20bca9;
  border-color: #169b8c;
}

.mini-stat,
.detail-cell,
.event-row {
  background: rgba(41, 87, 96, 0.055);
}

.mini-stat strong,
.detail-cell strong {
  color: #213542;
}

.main-content {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(238, 245, 242, 0.82)),
    var(--bg);
  padding: 16px 22px 32px;
}

.topbar {
  border-bottom-color: rgba(52, 83, 94, 0.13);
}

.breadcrumbs strong,
.clock-display strong {
  color: #213542;
}

.intro-metric {
  border-left-color: rgba(32, 188, 169, 0.35);
  background: linear-gradient(90deg, rgba(32, 188, 169, 0.09), transparent);
}

.map-card {
  border-radius: 8px;
  background: #e7f1e7;
  border-color: rgba(81, 124, 92, 0.30);
  box-shadow: 0 18px 42px rgba(58, 91, 63, 0.14);
}

.map-viewport {
  min-height: 0;
  height: clamp(610px, 76vh, 880px);
  background: #eef6ed;
}

#networkMap {
  height: clamp(610px, 76vh, 880px);
  padding: 6px 10px;
}

.map-viewport::before,
.map-viewport::after,
.map-region {
  display: none;
}

.map-grid {
  opacity: .26;
  background-size: 44px 44px;
  mask-image: none;
}

.section-line {
  stroke: #2f66aa;
  stroke-width: 2.05;
  opacity: 0.9;
}

.station-halo {
  fill: rgba(255, 255, 255, 0.88);
  stroke: rgba(47, 102, 170, 0.18);
  stroke-width: 0.32;
}

.station-node {
  fill: #ffffff;
  stroke-width: 0.62;
}

.station-halo-round {
  fill: rgba(255, 255, 255, 0.94);
}

.station-node-round {
  stroke-width: 0.68;
}

.station-label {
  fill: #244a64;
  font-size: 1.45px;
  stroke: #edf6ed;
  stroke-width: 0.44px;
}

.train-marker .train-core {
  stroke-width: 0.82;
}

.train-label {
  fill: #173a56;
  font-size: 1.35px;
  stroke: #edf6ed;
  stroke-width: 0.38px;
}

.legend-node {
  width: 11px;
  height: 5px;
  border-radius: 4px;
}

.map-tooltip {
  color: #253a48;
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(52, 83, 94, 0.18);
  box-shadow: 0 16px 34px rgba(43, 78, 86, 0.16);
}

.timeline-track {
  background: #d8e5e8;
}

.event-label {
  color: #354b5d;
}

.event-train,
.stream-badge,
.timeline-current,
.small-button {
  color: #137c72;
  background: rgba(32, 188, 169, 0.11);
}

.inspector-empty {
  border-color: rgba(52, 83, 94, 0.20);
  color: var(--muted);
}

@media (max-width: 1050px) {
  .app-shell {
    grid-template-columns: 215px minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .map-viewport,
  #networkMap {
    height: 430px;
    min-height: 430px;
  }
}

/* Compact touch layout. The height clause also catches short phone landscape
   viewports whose CSS width would otherwise select the desktop sidebar. */
@media (max-width: 760px), (max-width: 950px) and (max-height: 500px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .brand {
    grid-column: 1;
    min-width: 0;
  }

  .connection-pill {
    grid-column: 2;
    align-self: center;
    justify-self: end;
  }

  .clock-section {
    grid-column: 1;
    grid-row: 2;
  }

  .stats-section {
    grid-column: 2;
    grid-row: 2;
    padding: 10px 12px;
  }

  .stats-section .mini-stat-grid {
    gap: 6px;
    margin-top: 8px;
  }

  .stats-section .mini-stat {
    padding: 7px;
  }

  .stats-section .mini-stat strong {
    margin-top: 3px;
    font-size: 17px;
  }

  .control-section {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    column-gap: 10px;
    padding: 11px 12px;
  }

  .control-section .section-heading {
    grid-column: 1 / -1;
  }

  .control-section .control-row {
    grid-column: 1;
    grid-row: 2 / 4;
    grid-template-columns: minmax(0, 1fr) 42px 42px;
    margin-top: 9px;
  }

  .control-section .field-label {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    margin: 8px 0 4px;
  }

  .control-section .select-control {
    grid-column: 2;
    grid-row: 3;
    min-height: 42px;
    padding: 8px;
  }

  .control-section .quick-jump {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 10px;
  }

  .control-section .quick-jump-label {
    display: inline-block;
    margin: 0 8px 0 0;
  }

  .control-section .quick-jump-buttons {
    display: inline-grid;
    width: min(260px, calc(100% - 60px));
    vertical-align: middle;
  }

  .primary-button,
  .icon-button,
  .toolbar-button,
  .small-button {
    min-height: 42px;
  }

  .sidebar-footer {
    display: none;
  }

  .main-content {
    padding: 10px 10px 24px;
  }

  .card-toolbar {
    gap: 8px;
    padding: 10px;
  }

  .map-toolbar-actions {
    gap: 6px;
  }

  .toolbar-button {
    padding: 7px 9px;
  }

  .map-viewport,
  #networkMap {
    height: clamp(300px, 43vh, 360px);
    min-height: 300px;
  }

  .map-viewport {
    touch-action: pan-y pinch-zoom;
  }

  #networkMap {
    padding: 2px 4px;
  }

  .station-label {
    font-size: 2.35px;
    stroke-width: 0.54px;
  }

  .train-label {
    font-size: 2.15px;
    stroke-width: 0.5px;
  }

  .map-footer {
    padding: 9px 10px;
  }

  .legend-group {
    gap: 9px;
  }

  .panel {
    padding: 14px;
  }

  .timeline-wrap {
    margin-top: 22px;
  }

  .timeline-footer,
  .timeline-actions {
    gap: 8px;
  }

  .timeline-hint {
    display: none;
  }

  .inspector-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .brand-mark {
    width: 34px;
    height: 34px;
  }

  .brand-title {
    font-size: 16px;
  }

  .sidebar-clock {
    font-size: 21px;
  }

  .map-status {
    display: none;
  }

  .toolbar-title,
  .toolbar-button {
    font-size: 9px;
  }
}

@media (max-width: 950px) and (max-height: 500px) {
  .sidebar {
    grid-template-columns: 165px 150px minmax(300px, 1fr) 145px;
    align-items: center;
    padding: 9px 12px;
  }

  .brand,
  .clock-section,
  .control-section,
  .stats-section {
    grid-row: 1;
  }

  .brand {
    grid-column: 1;
  }

  .connection-pill,
  .sidebar-footer {
    display: none;
  }

  .clock-section {
    grid-column: 2;
  }

  .control-section {
    grid-column: 3;
  }

  .stats-section {
    grid-column: 4;
  }

  .main-content {
    padding-top: 8px;
  }

  .map-viewport,
  #networkMap {
    height: 330px;
    min-height: 330px;
  }
}