:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #111;
  background: #f4f4f2;
  --border: #d9d9d3;
  --muted: #666;
}
* { box-sizing: border-box; }
body { margin: 0; background: #f4f4f2; }
.topbar { background:#111; color:white; padding:22px clamp(18px,4vw,54px); display:flex; gap:20px; justify-content:space-between; align-items:center; }
h1 { margin:4px 0 0; font-size:clamp(23px,4vw,38px); line-height:1.05; }
h2 { margin:3px 0 0; font-size:22px; }
.eyebrow { font-size:11px; letter-spacing:.12em; font-weight:800; color:#777; }
.topbar .eyebrow { color:#aaa; }
.status-pill { border:1px solid #555; border-radius:999px; padding:8px 12px; font-size:12px; white-space:nowrap; }
main { padding:18px clamp(14px,4vw,54px) 36px; max-width:1500px; margin:auto; }
.notice { background:white; border:1px solid var(--border); border-left:5px solid #e3b23c; padding:13px 16px; display:flex; gap:12px; flex-wrap:wrap; }
.notice span { color:#555; }
.controls { display:flex; gap:10px; margin:16px 0; flex-wrap:wrap; }
button { font:inherit; cursor:pointer; }
.primary,.secondary { padding:11px 15px; border-radius:8px; font-weight:700; }
.primary { background:#111; color:white; border:1px solid #111; }
.secondary { background:white; color:#111; border:1px solid var(--border); }
.layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(320px,.8fr); gap:16px; }
#map { min-height:620px; border:1px solid var(--border); background:#ddd; }
.panel,.departures-card { background:white; border:1px solid var(--border); }
.panel { max-height:620px; overflow:auto; }
.panel-head { padding:16px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #eee; }
.stop-list { display:flex; flex-direction:column; }
.stop { padding:14px 16px; border:0; border-bottom:1px solid #eee; background:white; text-align:left; }
.stop:hover { background:#f7f7f5; }
.stop-name { font-weight:750; font-size:15px; }
.stop-meta { color:var(--muted); font-size:12px; margin-top:4px; }
.empty { padding:22px 16px; color:var(--muted); }
.departures-card { margin-top:16px; }
.departure { display:grid; grid-template-columns:70px 1fr auto; gap:12px; align-items:center; padding:14px 16px; border-bottom:1px solid #eee; }
.route-badge { display:inline-flex; min-width:48px; justify-content:center; background:#111; color:white; padding:7px 9px; border-radius:6px; font-weight:850; }
.destination { font-weight:750; }
.schedule-label { color:var(--muted); font-size:12px; margin-top:3px; }
.minutes { font-size:20px; font-weight:850; text-align:right; }
.minutes small { display:block; font-size:10px; color:#777; font-weight:700; }
.close { width:36px; height:36px; border:1px solid var(--border); background:white; border-radius:50%; font-size:24px; line-height:1; }
.hidden { display:none; }
footer { max-width:1500px; margin:auto; padding:0 clamp(14px,4vw,54px) 30px; color:#777; font-size:12px; }
.user-dot { width:14px; height:14px; background:#111; border:3px solid white; border-radius:50%; box-shadow:0 0 0 1px #111; }
@media (max-width: 860px) {
  .topbar { align-items:flex-start; flex-direction:column; }
  .layout { grid-template-columns:1fr; }
  #map { min-height:420px; }
  .panel { max-height:420px; }
}

.routes-card,.route-schedule-card { background:white; border:1px solid var(--border); margin:16px 0; }
.route-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.route-choice { min-width:0; border:0; border-right:1px solid #eee; border-bottom:1px solid #eee; background:white; padding:14px 16px; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; text-align:left; }
.route-choice:hover { background:#f7f7f5; }
.route-number { min-width:58px; min-height:52px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; background:#111; color:white; border-radius:8px; font-size:20px; font-weight:900; }
.route-choice-main { min-width:0; display:flex; flex-direction:column; gap:4px; }
.route-choice-main strong { font-size:15px; }
.route-choice-main span { color:var(--muted); font-size:12px; line-height:1.35; }
.route-arrow { font-size:30px; line-height:1; color:#777; }
.route-stop-info { color:var(--muted); margin-top:5px; font-size:13px; }
button:disabled { opacity:.6; cursor:wait; }
@media (max-width: 600px) {
  .route-grid { grid-template-columns:1fr; }
  .route-choice { border-right:0; }
  .departure { grid-template-columns:58px 1fr; }
  .departure .minutes { grid-column:2; text-align:left; font-size:17px; }
}

.live-status { margin-left:auto; font-size:12px; font-weight:750; }
.live-ok { color:#176f2c; }
.live-off { color:#8a4b10; }
.route-eta { min-width:74px; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.route-eta strong { font-size:19px; }
.route-eta small { font-size:9px; font-weight:850; letter-spacing:.08em; }
.route-live-eta small,.live-word { color:#176f2c !important; }
.route-schedule-eta small { color:#777; }
.departure-live { background:#fbfff9; }
.departure-section-title { padding:9px 16px; font-size:10px; letter-spacing:.12em; font-weight:850; color:#666; background:#f7f7f5; border-bottom:1px solid #eee; }
.realtime-warning { padding:12px 16px; background:#fff8e8; border-bottom:1px solid #eee; color:#6f4b00; font-size:13px; }
.live-bus-icon-wrap { background:transparent; border:0; }
.live-bus-icon { min-width:34px; height:26px; padding:0 5px; background:#111; color:#fff; border:2px solid #fff; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; box-shadow:0 1px 4px rgba(0,0,0,.35); }
@media (max-width:600px) {
  .live-status { width:100%; margin-left:0; }
  .route-choice { grid-template-columns:auto 1fr auto; }
  .route-eta { min-width:62px; }
  .route-eta strong { font-size:17px; }
}