:root {
  color-scheme: dark;
  --bg: #06111c;
  --panel: #0b1825;
  --panel2: #102131;
  --text: #eef5fb;
  --muted: #8aa3ba;
  --water: #081824;
  --land: #10293b;
  --lake: #081824;
  --line1: #21a742;
  --line2: #118dde;
  --linet: #f08a00;
  --station: #eef5fb;
  --border: rgba(255,255,255,.09);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body { padding: 24px; }

.board {
  max-width: 1650px;
  margin: 0 auto;
}

.topbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.eyebrow {
  color: #7eb2dc;
  font-size: 12px;
  letter-spacing: .24em;
  font-weight: 800;
}

h1 {
  margin: 2px 0 0;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1;
  letter-spacing: -.04em;
}

.status-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 5px;
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e6a91a;
  box-shadow: 0 0 18px currentColor;
}

.status-dot.live { background: #44cc72; }
.status-dot.error { background: #ef5a5a; }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 18px;
}

.map-panel, .info-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.map-panel { min-width: 0; }

#transit-map {
  width: 100%;
  height: auto;
  display: block;
}

.map-bg { fill: var(--water); }
.land path { fill: var(--land); }

.water-features path {
  fill: var(--lake);
}
.water-features .island {
  fill: var(--land);
}

.geography text {
  fill: #21435d;
  font-size: 16px;
  font-weight: 850;
  letter-spacing: .17em;
}

.route-stroke {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 20;
}

.line1-stroke { stroke: var(--line1); }
.line2-stroke { stroke: var(--line2); }
.linet-stroke { stroke: var(--linet); }

.station circle {
  fill: var(--panel);
  stroke: var(--station);
  stroke-width: 2.5;
}

.station.major circle,
.station.interchange circle {
  fill: var(--station);
  stroke: var(--panel);
  stroke-width: 3;
}

.station.interchange circle {
  stroke-width: 4;
}

.station.future circle {
  fill: var(--panel);
  stroke: #95a7b8;
  stroke-dasharray: 3 3;
}

.station.future text {
  fill: #95a7b8;
  font-style: italic;
}

.station text {
  fill: #d9e5ee;
  font-size: 12.3px;
  font-weight: 700;
}

.t-stations text {
  font-size: 11.5px;
}

.vehicle circle {
  stroke: white;
  stroke-width: 3;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.65));
}

.vehicle text {
  fill: white;
  font-size: 10px;
  font-weight: 900;
  paint-order: stroke;
  stroke: #07111c;
  stroke-width: 4px;
}

.vehicle.line1 circle { fill: var(--line1); }
.vehicle.line2 circle { fill: var(--line2); }
.vehicle.linet circle { fill: var(--linet); }

.legend rect {
  fill: rgba(7,17,28,.90);
  stroke: var(--border);
}

.legend text {
  fill: #d5e2ec;
  font-size: 14px;
  font-weight: 700;
}

.legend .legend-title {
  fill: white;
  font-size: 12px;
  letter-spacing: .16em;
}

.legend-line {
  stroke-width: 7;
  stroke-linecap: round;
}

.line1-color { stroke: var(--line1); }
.line2-color { stroke: var(--line2); }
.linet-color { stroke: var(--linet); }

.info-panel { padding: 20px; }

.clock {
  font-size: 48px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}

.date {
  margin-top: 5px;
  margin-bottom: 30px;
  color: var(--muted);
  font-size: 14px;
}

.metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding: 13px 0;
}

.metric span {
  color: var(--muted);
  font-size: 13px;
}

.metric strong {
  font-size: 15px;
  text-align: right;
}

.notice {
  margin: 18px 0;
  padding: 13px 14px;
  border-radius: 12px;
  background: var(--panel2);
  color: #bed0df;
  font-size: 13px;
  line-height: 1.45;
}

.route-list {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.route-list > div {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
}

.route-list b { font-variant-numeric: tabular-nums; }

.route-chip {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  color: white;
  font-weight: 850;
}

.chip1 { background: var(--line1); }
.chip2 { background: var(--line2); }
.chipt { background: var(--linet); }

footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  color: var(--muted);
  font-size: 12px;
  margin: 12px 4px 0;
}

@media (max-width: 850px) {
  body { padding: 12px; }
  .layout { grid-template-columns: 1fr; }
  .info-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px 20px;
  }
  .clock, .date, .notice, .route-list { grid-column: 1 / -1; }
  .metric { display: block; }
  .metric strong { display: block; margin-top: 3px; text-align: left; }
}

@media (max-width: 560px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .status-wrap { margin: 0; }
  .info-panel { display: block; }
  footer { flex-direction: column; }
}