:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --bg: #07131f;
  --panel: #0d2032;
  --panel-border: rgba(145, 184, 214, 0.15);
  --text: #f6f9fb;
  --muted: #91a9bb;
  --accent: #e12d39;
  --good: #43d39e;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--bg); }

body {
  min-height: 100svh;
  color: var(--text);
  background:
    radial-gradient(circle at 80% 5%, rgba(26, 91, 133, 0.26), transparent 38%),
    linear-gradient(160deg, #081827 0%, #06111c 78%);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; }

.dashboard {
  width: min(100%, 480px);
  min-height: 100svh;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 22px max(18px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto minmax(275px, 1fr) auto auto;
  gap: 22px;
}

.topbar, .route-row, .section-heading, .arrival-card, .status-bar {
  display: flex;
  align-items: center;
}

.topbar { justify-content: space-between; gap: 18px; }

.eyebrow {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }

h1 { margin-bottom: 0; font-size: clamp(1.35rem, 6vw, 1.7rem); letter-spacing: -0.025em; }

.clock {
  color: #dce8f1;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.hero {
  border: 1px solid var(--panel-border);
  border-radius: 28px;
  padding: 24px;
  background: linear-gradient(150deg, rgba(17, 44, 66, 0.95), rgba(9, 27, 42, 0.96));
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
}

.route-row { gap: 12px; }

.route-badge {
  min-width: 66px;
  padding: 8px 12px;
  border-radius: 9px;
  background: var(--accent);
  color: white;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  box-shadow: 0 7px 20px rgba(225, 45, 57, 0.24);
}

.destination { color: #c8d8e3; font-size: 1.05rem; font-weight: 650; }

.primary-arrival {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 10px;
}

.primary-meta { min-height: 24px; margin-bottom: 3px; }

.eta {
  margin: 0;
  font-size: clamp(5rem, 25vw, 7.4rem);
  font-weight: 760;
  letter-spacing: -0.075em;
  line-height: 0.92;
  font-variant-numeric: tabular-nums;
}

.eta-unit { margin-left: 0.12em; font-size: 0.3em; letter-spacing: -0.02em; color: #bed0dc; }

.due { letter-spacing: -0.055em; }

.arrival-detail { margin: 13px 0 0; color: var(--muted); font-size: 1rem; font-weight: 600; }

.destination-callout {
  margin-top: 18px;
  padding: 13px 15px;
  border: 1px solid rgba(67, 211, 158, 0.2);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(30, 105, 83, 0.16);
  color: #a9cbbf;
  font-size: 0.82rem;
  font-weight: 650;
}

.destination-callout strong { color: #d9fff2; font-size: 1.35rem; font-variant-numeric: tabular-nums; }

.upcoming { min-height: 178px; }

.section-heading { justify-content: space-between; margin-bottom: 10px; }

h2 { margin-bottom: 0; color: #a9bfce; font-size: 0.81rem; letter-spacing: 0.08em; text-transform: uppercase; }

.refresh-button {
  width: 42px;
  height: 42px;
  margin: -8px -8px -8px 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #aec3d2;
  background: transparent;
}

.refresh-button:active { background: rgba(255, 255, 255, 0.08); }
.refresh-button:disabled { opacity: 0.55; }
.refresh-button svg { width: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.refresh-button.is-spinning svg { animation: spin 0.8s linear infinite; }

.arrival-list { margin: 0; padding: 0; display: grid; gap: 9px; list-style: none; }

.arrival-card {
  min-height: 60px;
  padding: 10px 16px;
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  background: rgba(13, 32, 50, 0.76);
}

.arrival-order { width: 33px; color: #65849a; font-size: 0.78rem; font-weight: 750; text-transform: uppercase; }
.arrival-main { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; }
.arrival-time { font-size: 1.38rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.arrival-clock { grid-column: 1 / -1; color: var(--muted); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.destination-eta { min-width: 82px; display: flex; flex-direction: column; align-items: flex-end; color: #7894a7; font-size: 0.67rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.destination-eta strong { margin-top: 2px; color: #ccebdd; font-size: 1.08rem; font-variant-numeric: tabular-nums; letter-spacing: 0; }

.source-chip {
  justify-self: start;
  padding: 2px 6px;
  border-radius: 5px;
  color: #84a2b6;
  background: rgba(113, 148, 173, 0.12);
  font-size: 0.57rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.status-bar { justify-content: center; gap: 8px; color: #7f9aad; font-size: 0.78rem; }

.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #637b8c; }
.status-dot.live { background: var(--good); box-shadow: 0 0 10px rgba(67, 211, 158, 0.48); }
.status-dot.error { background: #f2a44a; }

.empty-state { margin: 45px 0 0; text-align: center; color: var(--muted); line-height: 1.5; }
.empty-state strong { display: block; margin-bottom: 6px; color: var(--text); font-size: 1.25rem; }

.skeleton { border-radius: 10px; background: linear-gradient(90deg, #16334b 20%, #20435e 45%, #16334b 70%); background-size: 250% 100%; animation: shimmer 1.4s infinite; }
.skeleton-time { width: 72%; height: 94px; }
.skeleton-label { width: 45%; height: 18px; margin-top: 18px; }

@keyframes shimmer { to { background-position-x: -250%; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-height: 760px) {
  .dashboard { padding-top: max(15px, env(safe-area-inset-top)); gap: 13px; grid-template-rows: auto minmax(250px, 1fr) auto auto; }
  .hero { padding: 18px; }
  .arrival-card { min-height: 53px; }
  .destination-callout { margin-top: 12px; padding: 10px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}