:root {
  --bg: #0e1116;
  --panel: rgba(17, 21, 28, 0.86);
  --panel-border: rgba(255, 255, 255, 0.08);
  --text: #e8ecf1;
  --muted: #9aa4b2;
  --accent: #ffb020;
  --accent-ink: #1a1203;
  --live: #3ddc84;
  --warn: #ff6b5b;
  --radius: 12px;
  --gutter: 16px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
html[data-theme="day"] {
  --bg: #eef0f3;
  --panel: rgba(255, 255, 255, 0.9);
  --panel-border: rgba(0, 0, 0, 0.08);
  --text: #1b2230;
  --muted: #5d6776;
  --accent: #b86e00;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }
#map { position: absolute; inset: 0; }

.panel {
  position: absolute; z-index: 2;
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
a { color: var(--accent); }

.title { top: var(--gutter); left: var(--gutter); padding: 10px 14px; }
.title h1 { margin: 0; font-size: 18px; letter-spacing: 0.2px; display: flex; align-items: center; gap: 8px; }
.title h1::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: pulse 2s infinite; }
.title p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(61,220,132,.6); } 70% { box-shadow: 0 0 0 8px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }

.layers { top: var(--gutter); right: var(--gutter); padding: 8px 10px; font-size: 13px; min-width: 180px; }
.layers-toggle { display: none; }
.layers ul { list-style: none; margin: 0; padding: 0; }
.layers li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 2px; }
.layers label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.layers input { accent-color: var(--accent); }
.layers .soon label { color: var(--muted); cursor: not-allowed; }
.layers .soon span { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); border: 1px solid var(--panel-border); border-radius: 6px; padding: 1px 5px; white-space: nowrap; }

.strip {
  left: var(--gutter); right: var(--gutter); bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; padding: 10px 14px;
}
.stat { display: flex; align-items: baseline; gap: 6px; }
.stat b { font-size: 20px; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--muted); }
.status { font-size: 12px; color: var(--muted); }
.status.ok::before { content: "\25CF  "; color: var(--live); }
.status.err::before { content: "\25CF  "; color: var(--warn); }
.credit { margin-left: auto; font-size: 11px; color: var(--muted); }

.card { left: var(--gutter); top: 84px; width: 260px; padding: 14px; }
.card .close { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; }
.card-line { display: inline-block; background: var(--accent); color: var(--accent-ink); font-weight: 700; border-radius: 6px; padding: 2px 8px; font-size: 16px; }
.card-dest { margin: 8px 0 6px; font-size: 15px; font-weight: 600; }
.card dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0 0 10px; font-size: 13px; }
.card dt { color: var(--muted); }
.card dd { margin: 0; }
.card a { font-size: 13px; }
.card-next { margin: 0 0 6px; font-size: 13px; padding: 6px 8px; border-radius: 8px; background: rgba(127,127,127,.14); }
.card-route { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.card-route:empty { display: none; }

/* Vehicle markers: the bus 公仔, a line-number badge and a heading arrow */
.veh { width: 48px; height: 36px; cursor: pointer; }
.veh .icon { position: absolute; inset: 0; transition: transform .3s ease; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.veh .icon svg { display: block; }
.veh .icon.flip { transform: scaleX(-1); }
.veh .badge { position: absolute; left: 50%; top: -13px; transform: translateX(-50%); min-width: 22px; padding: 2px 5px; border-radius: 8px; background: var(--accent); color: #111; font: 800 11px/1.1 system-ui, sans-serif; text-align: center; white-space: nowrap; box-shadow: 0 0 0 1.5px #fff, 0 2px 5px rgba(0,0,0,.4); }
.veh .arrow { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none; transition: transform .6s ease; }
.veh .arrow::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--arrow, var(--accent)); filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }
.veh.stale .icon, .veh.stale .badge, .veh.stale .arrow { opacity: .45; }
.veh.selected { z-index: 3; }
.veh.selected .icon { transform: scale(1.18); }
.veh.selected .icon.flip { transform: scale(-1.18, 1.18); }
.veh.selected .badge { box-shadow: 0 0 0 2.5px #fff, 0 0 0 4px rgba(0,0,0,.5); }

/* You are here */
.me-dot { width: 18px; height: 18px; border-radius: 50%; background: #2f80ff; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.4); }
.me-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #2f80ff; animation: me-ping 2s ease-out infinite; }
@keyframes me-ping { from { transform: scale(1); opacity: .8; } to { transform: scale(2.6); opacity: 0; } }

/* Day/night and locate buttons */
.sa-ctrl button { font-size: 16px; line-height: 1; }
.sa-ctrl .sa-locate { font-size: 20px; color: #333; }
.sa-ctrl .sa-locate.active { color: #2f80ff; }
.sa-ctrl .sa-locate.pending { animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .35; } }

.toast { position: absolute; z-index: 4; left: 50%; top: 76px; transform: translateX(-50%); max-width: min(420px, calc(100% - 2 * var(--gutter))); padding: 10px 14px; border-radius: 10px; background: rgba(20,24,31,.94); color: #fff; font-size: 13px; line-height: 1.35; box-shadow: 0 6px 24px rgba(0,0,0,.35); }

.stop-pop .maplibregl-popup-content { padding: 6px 9px; font: 12px/1.3 system-ui, sans-serif; color: #1b2230; border-radius: 8px; }

.maplibregl-ctrl-bottom-right { bottom: 70px; }
.maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib.maplibregl-compact { background: var(--panel); color: var(--muted); }
.maplibregl-ctrl-attrib a { color: var(--muted); }
html[data-theme="night"] .maplibregl-ctrl-attrib-button { filter: invert(1); }

@media (max-width: 600px) {
  .title h1 { font-size: 16px; }
  .title p { display: none; }
  .layers { min-width: 0; padding: 6px; }
  .layers-toggle { display: block; background: none; border: 0; color: var(--text); font: 600 13px system-ui, sans-serif; padding: 4px 6px; cursor: pointer; }
  .layers ul { display: none; padding: 4px 2px 2px; }
  .layers.open ul { display: block; }
  .strip { gap: 4px 14px; padding: 8px 12px; }
  .stat b { font-size: 17px; }
  .credit { margin-left: 0; width: 100%; font-size: 10px; }
  .card { top: auto; bottom: 120px; left: var(--gutter); right: 64px; width: auto; }
  .toast { top: 70px; }
  .maplibregl-ctrl-bottom-right { bottom: 110px; }
}