:root { color-scheme: dark; font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #09211d; color: #f8f5ed; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; padding: 16px; overflow: hidden; background: radial-gradient(circle at top, #1b604c, #09211d 58%); -webkit-text-size-adjust: 100%; }
main { width: min(100%, 1100px); min-height: calc(100dvh - 32px); margin: 0 auto; padding: 20px; border: 1px solid #ffffff26; border-radius: 24px; background: #0d2d27e8; box-shadow: 0 20px 60px #0006; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand img { display: block; width: 30px !important; height: 30px !important; max-width: 30px !important; object-fit: cover; border-radius: 7px; }
.eyebrow { margin: 0; color: #a7e4bd; font-size: .74rem; font-weight: 800; letter-spacing: .14em; }
h1 { margin: 8px 0; font-size: clamp(2rem, 8vw, 3rem); }
#status { min-height: 1.25em; margin: 0 0 10px; color: #d2e5dc; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stats div { padding: 16px 10px; border-radius: 14px; background: #ffffff12; text-align: center; }
.stats strong, .stats span { display: block; }
.stats strong { font-size: 1.15rem; }
.stats span, .note { margin-top: 5px; color: #b8cbc2; font-size: .78rem; }
.live-map { width: 100%; flex: 1 1 auto; min-height: 360px; margin: 0 0 12px; overflow: hidden; border: 1px solid #ffffff26; border-radius: 16px; background: #153d34; touch-action: pan-x pan-y; }
.map-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: -5px 2px 15px; color: #d2e5dc; font-size: .72rem; }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.map-legend i { display: inline-block; width: 18px; height: 4px; border-radius: 99px; background: #fff; }
.map-legend .planned { background: #ff9f1c; }
.map-legend .completed { background: #72e6a6; }
.map-legend .runner { width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #13795b; }
.note { margin: 22px 0 0; line-height: 1.45; }
.next-stop { margin: 12px 2px 0; color: #dff8e8; font-size: .9rem; font-weight: 700; }
.map-pin, .map-runner { display: block; width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; background: #2583e8; box-shadow: 0 1px 4px #0008; }
.map-pin-finish { width: 18px; height: 18px; background: #ff9f1c; }
.map-runner { width: 20px; height: 20px; background: #13795b; }
.route-direction { display: block; width: 16px; height: 16px; transform: rotate(calc(var(--bearing) * 1deg - 45deg)); filter: drop-shadow(0 1px 2px #001b14cc); }
.route-direction::before { content: ""; display: block; width: 10px; height: 10px; border-top: 3px solid #f8f5ed; border-right: 3px solid #f8f5ed; }

@media (max-width: 600px) {
  body { padding: 0; background: #0d2d27; }
  main { width: 100%; min-height: 100vh; min-height: 100dvh; padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); border: 0; border-radius: 0; box-shadow: none; }
  .brand { gap: 6px; }
  .brand img { width: 22px !important; height: 22px !important; max-width: 22px !important; border-radius: 5px; }
  .eyebrow { font-size: .56rem; letter-spacing: .12em; }
  h1 { margin: 3px 0 1px; font-size: 1.2rem; line-height: 1.15; }
  #status { min-height: 1em; margin: 0 0 6px; font-size: .78rem; }
  .live-map { min-height: 0; height: auto; margin-bottom: 7px; border-radius: 13px; }
  .map-legend { gap: 5px 10px; margin: -1px 2px 7px; font-size: .62rem; }
  .map-legend i { width: 14px; height: 3px; }
  .map-legend .runner { width: 8px; height: 8px; }
  .stats { gap: 7px; }
  .stats div { padding: 8px 4px; border-radius: 11px; }
  .stats strong { font-size: 1rem; }
  .stats span { margin-top: 2px; font-size: .65rem; }
  .next-stop { margin: 6px 2px 0; font-size: .75rem; }
  .note { display: none; }
}