:root {
  color-scheme: light;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172033;
  background: #f6f7fb;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f6f7fb; }
button, table { font: inherit; }
.container { width: min(1280px, calc(100% - 32px)); margin: 0 auto; }

.hero {
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 8px 30px rgba(69, 55, 132, .2);
}

.hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 38px 0; }
.eyebrow { margin: 0 0 8px; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
h1 { max-width: 820px; margin: 0; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; }
.hero-copy { margin: 12px 0 0; font-size: 1.05rem; opacity: .88; }
.refresh-button { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border: 1px solid rgba(255,255,255,.28); border-radius: 10px; color: white; background: rgba(255,255,255,.14); cursor: pointer; }
.refresh-button:hover { background: rgba(255,255,255,.23); }
.refresh-button:disabled { cursor: wait; opacity: .65; }
.refresh-button svg { width: 18px; }

.main-content { padding: 32px 0 48px; }
.error-banner { margin-bottom: 20px; padding: 14px 16px; border: 1px solid #fecaca; border-radius: 10px; color: #991b1b; background: #fef2f2; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 26px; }
.metric-card { display: flex; justify-content: space-between; min-height: 128px; padding: 24px; border-radius: 16px; color: white; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); box-shadow: 0 10px 25px rgba(114, 74, 154, .15); }
.metric-card span { display: block; margin-bottom: 12px; font-size: .83rem; font-weight: 600; opacity: .9; }
.metric-card strong { display: block; font-size: clamp(1.45rem, 2.3vw, 2rem); }
.metric-card svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: rgba(255,255,255,.18); box-sizing: content-box; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 24px; align-items: start; }
.side-column { display: grid; gap: 24px; }
.panel { overflow: hidden; border: 1px solid #e8eaf2; border-radius: 16px; background: white; box-shadow: 0 7px 22px rgba(31, 41, 75, .07); }
.panel-title { display: flex; align-items: center; gap: 10px; padding: 17px 20px; color: white; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.panel-title h2 { margin: 0; font-size: 1rem; }
.panel-title svg { width: 19px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 13px 12px; color: #667085; background: #f9fafb; font-size: .7rem; letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { padding: 12px; border-top: 1px solid #eef0f5; font-size: .82rem; }
tbody tr[data-route-id] { cursor: pointer; transition: background .15s; }
tbody tr[data-route-id]:hover { background: #f7f7ff; }
tbody tr.selected { background: #eef2ff; box-shadow: inset 4px 0 #667eea; }
.route-number { font-weight: 700; color: #5846b5; }
.loading-cell { height: 160px; color: #7a8191; text-align: center; }
.chart-wrap { height: 330px; padding: 20px; }
#routeMap { height: 330px; width: 100%; background: #eef1f5; }

footer { padding: 22px 0; color: #697083; background: #eceef4; font-size: .76rem; line-height: 1.55; }
footer p { max-width: 1000px; margin: 0; }

@media (max-width: 1000px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .container { width: min(100% - 22px, 1280px); }
  .hero-inner { align-items: flex-start; flex-direction: column; padding: 28px 0; }
  .metrics { grid-template-columns: 1fr; }
  .metric-card { min-height: 104px; }
  .main-content { padding-top: 20px; }
  .chart-wrap, #routeMap { height: 290px; }
}