/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:'Space Grotesk','Segoe UI',Arial,sans-serif;min-height:100vh}
button{cursor:pointer;font-family:inherit}

/* ── VIEWS ── */
.view{display:none}
.view.active{display:block}

/* ══════════════════════════════════════════════
   HOME — cardinal red / clean white
══════════════════════════════════════════════ */
#homeView{background:#fff;color:#111827}

.h-nav{
  position:sticky;top:0;z-index:200;
  background:#B91C1C;
  padding:0 20px;height:60px;
  display:flex;align-items:center;gap:14px;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.h-logo{display:flex;align-items:center;gap:10px}
.h-logo .bus-icon{font-size:1.4rem}
.h-logo .org-name{font-size:.95rem;font-weight:700;color:#fff;line-height:1.2;letter-spacing:-.2px}
.h-logo .org-sub{font-size:.62rem;color:rgba(255,255,255,.65);font-weight:400;letter-spacing:.5px}
.h-clock{
  margin-left:auto;
  background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.25);
  border-radius:6px;padding:6px 12px;
  font-size:.75rem;font-weight:600;color:#fff;
  font-family:'IBM Plex Mono',monospace;white-space:nowrap;
}

.hero{
  background:#fff;
  padding:52px 24px 40px;text-align:center;
  border-bottom:1px solid #E5E7EB;
  position:relative;overflow:hidden;
}
.hero::before{
  content:'🚌';font-size:220px;opacity:.03;
  position:absolute;right:-20px;bottom:-30px;
  pointer-events:none;line-height:1;
}
.hero-tag{
  display:inline-block;
  background:#FEE2E2;color:#B91C1C;
  font-size:.62rem;font-weight:700;
  border-radius:4px;padding:4px 12px;
  letter-spacing:1.5px;text-transform:uppercase;margin-bottom:18px;
}
.hero h1{
  font-size:clamp(1.8rem,5vw,3rem);
  font-weight:700;color:#111827;line-height:1.1;
  margin-bottom:12px;letter-spacing:-1px;
}
.hero h1 span{color:#B91C1C}
.hero p{font-size:.88rem;color:#6B7280;max-width:440px;margin:0 auto 28px;line-height:1.7}
.hero-search{
  display:flex;max-width:460px;margin:0 auto;
  border-radius:8px;overflow:hidden;
  border:2px solid #E5E7EB;background:#fff;
  transition:border-color .15s;
}
.hero-search:focus-within{border-color:#B91C1C}
.hero-search input{
  flex:1;background:none;border:none;outline:none;
  padding:13px 16px;font-size:.85rem;color:#111827;
  font-family:'IBM Plex Mono',monospace;
}
.hero-search input::placeholder{color:#9CA3AF;font-family:'Space Grotesk',sans-serif}
.hero-search button{
  background:#B91C1C;color:#fff;border:none;
  padding:13px 20px;font-size:.85rem;font-weight:700;
  transition:background .15s;white-space:nowrap;letter-spacing:.2px;
}
.hero-search button:hover{background:#991B1B}

.stats-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:#fff;border-bottom:1px solid #E5E7EB;
}
.stat-item{
  padding:16px 14px;text-align:center;
  border-right:1px solid #E5E7EB;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.stat-item:last-child{border-right:none}
.stat-num{font-size:1.6rem;font-weight:700;color:#B91C1C;font-family:'IBM Plex Mono',monospace;line-height:1}
.stat-lbl{font-size:.6rem;color:#6B7280;text-transform:uppercase;letter-spacing:1px}

.date-row{
  display:flex;overflow-x:auto;
  background:#F9FAFB;border-bottom:1px solid #E5E7EB;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.date-row::-webkit-scrollbar{display:none}
.date-row button{
  flex-shrink:0;background:none;border:none;
  border-right:1px solid #E5E7EB;
  color:#6B7280;padding:10px 18px;
  font-size:.73rem;font-weight:600;white-space:nowrap;
  font-family:'Space Grotesk',sans-serif;
  transition:background .15s,color .15s;
}
.date-row button.dr-home{color:#374151;background:#fff;font-weight:700}
.date-row button.dr-today{background:#FEE2E2;color:#B91C1C;font-weight:700}
.date-row button.dr-sel,.date-row button:hover{background:#B91C1C;color:#fff}

.trips-section{padding:24px 16px;background:#F9FAFB}
.trips-title{
  font-size:.62rem;font-weight:700;text-transform:uppercase;
  letter-spacing:2px;color:#9CA3AF;margin-bottom:16px;
  display:flex;align-items:center;gap:10px;
}
.trips-title::after{content:'';flex:1;height:1px;background:#E5E7EB}
.trips-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
}

.trip-card{
  background:#fff;border:1.5px solid #E5E7EB;
  border-radius:12px;padding:0;
  transition:border-color .2s,transform .15s,box-shadow .2s;
  overflow:hidden;
}
.trip-card::after{display:none}
.trip-card-bar{height:4px;border-radius:0}
.trip-card.morning .trip-card-bar{background:linear-gradient(90deg,#F59E0B,#FBBF24)}
.trip-card.return  .trip-card-bar{background:linear-gradient(90deg,#B91C1C,#DC2626)}
.trip-card:hover{border-color:#D1D5DB;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.07)}
.trip-card-body{padding:20px}
.tc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.tc-icon{font-size:1.8rem;line-height:1}
.tc-badge{font-size:.6rem;font-weight:700;padding:3px 9px;border-radius:4px;text-transform:uppercase;letter-spacing:.8px}
.badge-am{background:#FEF3C7;color:#92400E}
.badge-pm{background:#FEE2E2;color:#991B1B}
.tc-title{font-size:1rem;font-weight:700;color:#111827;margin-bottom:3px;letter-spacing:-.2px}
.tc-time{font-size:.75rem;color:#6B7280;margin-bottom:14px}
.tc-meta{display:flex;gap:7px;margin-bottom:16px;flex-wrap:wrap}
.tc-chip{
  background:#F9FAFB;border:1px solid #E5E7EB;
  border-radius:5px;padding:4px 9px;font-size:.68rem;color:#374151;
}
.tc-chip b{color:#111827}

.tc-strips{margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.tc-strip{
  display:grid;grid-template-columns:44px 1fr 52px;
  align-items:center;gap:10px;
}
.tc-strip-label{
  font-size:.68rem;font-weight:700;color:#fff;
  background:#B91C1C;border-radius:4px;
  padding:3px 0;text-align:center;
}
.tc-strip-label.pm-label{background:#1D4ED8}
.tc-strip-label.alt-label{background:#B45309}
.tc-strip-wrap{position:relative;height:20px;display:flex;align-items:center}
.tc-strip-track{position:absolute;left:0;right:0;height:2px;background:#E5E7EB;border-radius:1px}
.tc-strip-fill{position:absolute;left:0;height:2px;border-radius:1px;transition:width 1.2s ease}
.tc-strip-fill.red {background:#B91C1C}
.tc-strip-fill.blue{background:#1D4ED8}
.tc-strip-fill.amb {background:#B45309}
.tc-strip-fill.grn {background:#15803D}
.tc-strip-fill.pnk {background:#DB2777}
.tc-strip-bus{
  position:absolute;font-size:.9rem;
  top:50%;transform:translate(-50%,-50%);
  transition:left 1.2s ease;z-index:2;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));
}
.tc-strip-spd{
  font-family:'IBM Plex Mono',monospace;
  font-size:.65rem;color:#6B7280;text-align:right;
}
.tc-strip-spd.fast{color:#B91C1C}
.tc-strip-spd.mid {color:#B45309}

.tc-btn{
  width:100%;padding:11px;border:none;border-radius:7px;
  font-size:.83rem;font-weight:700;
  transition:opacity .15s,transform .12s;color:#fff;
  font-family:'Space Grotesk',sans-serif;letter-spacing:.2px;
}
.tc-btn:hover{opacity:.87;transform:scale(.99)}
.tc-btn.am-btn{background:#B91C1C}
.tc-btn.pm-btn{background:#1D4ED8}

.sos-home-banner{
  margin:0 16px 0;
  background:#FEF2F2;border:1.5px solid #FECACA;border-radius:8px;
  padding:12px 16px;display:flex;align-items:center;gap:12px;
  animation:sos-pulse-banner 1.5s ease-in-out infinite;
}
@keyframes sos-pulse-banner{0%,100%{border-color:#FECACA}50%{border-color:#F87171}}
.sos-home-banner-icon{font-size:1.2rem;flex-shrink:0}
.sos-home-banner-text{flex:1}
.sos-home-banner-title{font-size:.82rem;font-weight:700;color:#991B1B;margin-bottom:2px}
.sos-home-banner-sub{font-size:.7rem;color:#B91C1C;opacity:.8}
.sos-home-banner-btn{
  background:#B91C1C;color:#fff;border:none;border-radius:6px;
  padding:7px 14px;font-size:.73rem;font-weight:700;cursor:pointer;
  white-space:nowrap;transition:background .15s;
}
.sos-home-banner-btn:hover{background:#991B1B}

.weekend-box{
  margin:20px 0;background:#fff;border:1.5px solid #E5E7EB;
  border-radius:12px;padding:36px;text-align:center;
}
.weekend-box .wb-icon{font-size:2.4rem;margin-bottom:10px}
.weekend-box p{color:#6B7280;font-size:.88rem}

.rec-footer{
  background:#111827;color:#6B7280;
  text-align:center;padding:16px 16px;
  font-size:.72rem;margin-top:16px;
}
#busListView .rec-footer{background:#0c0a09;color:#78716c;border-top:1px solid #292524}

/* ══════════════════════════════════════════════
   BUS LIST VIEW — warm rose / slate theme
══════════════════════════════════════════════ */
#busListView{background:#1c1917;min-height:100vh;color:#e7e5e4}

.list-hdr{
  background:linear-gradient(135deg,#881337,#be123c);
  padding:13px 16px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 3px 12px rgba(0,0,0,.35);
}
.back-btn{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;
  border-radius:7px;padding:7px 13px;font-size:.77rem;font-weight:700;
  transition:background .15s;
}
.back-btn:hover{background:rgba(255,255,255,.25)}
.list-hdr-title{color:#fff;font-size:1rem;font-weight:800;letter-spacing:.2px}
.list-hdr-sub{color:#fda4af;font-size:.7rem;margin-top:2px}

.filter-row{
  background:#292524;
  border-bottom:1px solid #3f3f46;
  padding:10px 14px;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
}
.filter-lbl{font-size:.7rem;color:#a8a29e;font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.ftag{
  background:#3f3f46;border:none;border-radius:20px;
  padding:5px 13px;font-size:.7rem;color:#d4d4d8;font-weight:600;
  transition:background .13s,color .13s;
}
.ftag.on{background:#be123c;color:#fff}
.ftag:hover:not(.on){background:#52525b;color:#fff}

.tbl-wrap{padding:12px 14px;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.81rem}
thead tr{background:#be123c}
thead th{
  padding:11px 13px;text-align:left;font-weight:700;
  color:#fff;white-space:nowrap;letter-spacing:.3px;
}
tbody tr{border-bottom:1px solid #292524;transition:background .12s}
tbody tr:hover{background:#292524}
tbody td{padding:10px 13px;vertical-align:middle;color:#d4d4d8}
tbody td b{color:#fafaf9}

.sdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
.sdot-mv{background:#4ade80}
.sdot-st{background:#fb923c}
.sdot-sos{background:#f87171;animation:dblink .75s infinite}
@keyframes dblink{0%,100%{opacity:1}50%{opacity:.1}}

.trk-btn{
  background:#be123c;color:#fff;border:none;
  border-radius:7px;padding:7px 14px;font-size:.73rem;font-weight:700;
  transition:background .13s,transform .1s;white-space:nowrap;
}
.trk-btn:hover{background:#9f1239;transform:scale(.97)}
.trk-btn.sos{background:#7f1d1d;border:1px solid #f87171;color:#fca5a5}
.trk-btn.sos:hover{background:#991b1b}

/* ══════════════════════════════════════════════
   TRACKER VIEW
══════════════════════════════════════════════ */
#trackerView{display:none;flex-direction:column;height:100vh;overflow:hidden;background:#0d1117;color:#e6edf3}
#trackerView.active{display:flex}

.trk-topbar{
  background:#161b22;border-bottom:1px solid #30363d;
  padding:9px 14px;display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.trk-topbar .back-btn{background:#21262d;border:1px solid #30363d;color:#e6edf3}
.trk-topbar .back-btn:hover{background:#30363d}
.trk-name{font-size:.92rem;font-weight:800;color:#e6edf3}
.trk-sub{font-size:.68rem;color:#8b949e;margin-top:1px}
.live-pill{
  margin-left:auto;display:flex;align-items:center;gap:5px;
  background:#0e2016;border:1px solid #3fb950;border-radius:20px;
  padding:4px 10px;font-size:.7rem;color:#3fb950;font-weight:700;flex-shrink:0;
}
.pdot{width:7px;height:7px;border-radius:50%;background:#3fb950;animation:pa 1.4s infinite}
@keyframes pa{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

.trk-body{display:grid;grid-template-columns:1fr 310px;flex:1;min-height:0;overflow:hidden}
.map-col{position:relative;display:flex;flex-direction:column}
#liveMap{width:100%;flex:1;min-height:300px}

.hud-spd{
  position:absolute;bottom:56px;left:10px;
  background:rgba(13,17,23,.93);backdrop-filter:blur(6px);
  border:1px solid #30363d;border-radius:11px;
  padding:12px 16px;z-index:800;min-width:120px;
}
.hud-lbl{font-size:.58rem;text-transform:uppercase;letter-spacing:1px;color:#8b949e;margin-bottom:2px}
.hud-num{font-size:2.4rem;font-weight:900;font-family:monospace;line-height:1}
.hud-unit{font-size:.7rem;color:#8b949e;font-weight:700}
.sbar-w{background:#0d1117;border-radius:3px;height:5px;overflow:hidden;margin-top:7px}
.sbar{height:100%;border-radius:3px;transition:width .8s,background .4s}

.hud-sos{
  position:absolute;top:10px;right:10px;
  background:rgba(58,16,16,.95);border:1px solid #f85149;
  border-radius:9px;padding:7px 13px;z-index:800;
  display:none;align-items:center;gap:7px;
  animation:sring .8s infinite;
}
.hud-sos.on{display:flex}
.hud-sos span{font-size:.8rem;font-weight:800;color:#f85149}
@keyframes sring{0%,100%{box-shadow:0 0 0 0 rgba(248,81,73,0)}50%{box-shadow:0 0 0 6px rgba(248,81,73,.2)}}

.tele-panel{background:#161b22;border-left:1px solid #30363d;overflow-y:auto}
.tele-panel::-webkit-scrollbar{width:4px}
.tele-panel::-webkit-scrollbar-thumb{background:#30363d;border-radius:2px}
.ts{padding:13px 14px;border-bottom:1px solid #30363d}
.ts:last-child{border-bottom:none}
.ttag{font-size:.6rem;text-transform:uppercase;letter-spacing:1.1px;color:#8b949e;font-weight:700;margin-bottom:7px}

.dev-id{font-size:.92rem;font-weight:900;color:#58a6ff;font-family:monospace}
.dev-sync{display:flex;align-items:center;gap:4px;font-size:.68rem;color:#3fb950;margin-top:3px}
.sync-dot{width:6px;height:6px;border-radius:50%;background:#3fb950}
.dev-ts{font-size:.63rem;color:#8b949e;font-family:monospace;margin-top:3px}

.spd-hero{
  background:linear-gradient(135deg,#0d1f3c,#1a2742);
  border:1px solid #2a4a7f;border-radius:11px;
  padding:14px;display:flex;align-items:center;gap:12px;
}
.spd-num{font-size:2.8rem;font-weight:900;font-family:monospace;line-height:1}
.spd-unit{font-size:.72rem;color:#8b949e;font-weight:700}
.spd-bar-w{background:rgba(0,0,0,.3);border-radius:4px;height:6px;overflow:hidden;margin-top:7px}
.spd-bar{height:100%;border-radius:4px;transition:width .8s,background .4s}
.mpill{padding:4px 9px;border-radius:20px;font-size:.68rem;font-weight:700;white-space:nowrap}
.mpill-mv{background:#0e2016;color:#3fb950;border:1px solid #3fb950}
.mpill-st{background:#2c1e08;color:#d29922;border:1px solid #d29922}
.enc-note{font-size:.57rem;color:#8b949e;text-align:center;margin-top:3px}

.cg{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.cbox{background:#21262d;border:1px solid #30363d;border-radius:8px;padding:9px}
.ckey{font-size:.6rem;color:#8b949e;margin-bottom:3px}
.cval{font-size:.85rem;font-weight:800;font-family:monospace;color:#e6edf3}

.sos-card{border-radius:9px;padding:11px;display:flex;align-items:center;gap:9px;transition:.3s}
.sos-safe{background:#0e2016;border:1.5px solid #3fb950}
.sos-trig{background:#2a0e0e;border:1.5px solid #f85149;animation:sring .8s infinite}
.sos-ico{font-size:1.7rem}
.sos-st{font-size:.87rem;font-weight:800}
.sos-sub{font-size:.66rem;color:#8b949e;margin-top:2px}

.geo-card{background:#21262d;border:1px solid #30363d;border-radius:9px;padding:11px;display:flex;align-items:center;gap:9px}
.geo-ico{font-size:1.4rem}
.geo-nm{font-size:.85rem;font-weight:700;color:#58a6ff}
.geo-sb{font-size:.66rem;color:#8b949e;margin-top:2px}

.json-b{
  background:#0d1a0d;border:1px solid #1a3a1a;border-radius:9px;
  padding:9px;font-family:monospace;font-size:.66rem;color:#a8d8a8;
  overflow-x:auto;white-space:pre;line-height:1.6;
}

.log-row{background:#21262d;border:1px solid #30363d;border-radius:7px;padding:8px;margin-bottom:4px}
.log-nm{font-size:.76rem;font-weight:700;color:#e6edf3}
.log-mt{font-size:.66rem;color:#8b949e;margin-top:2px}
.log-dw{color:#d29922;font-weight:700}
.log-in{color:#3fb950;font-weight:700}

/* US-28: overspeed badge */
.overspeed-badge{
  display:inline-block;font-size:.58rem;font-weight:700;
  background:#7f1d1d;color:#fca5a5;border:1px solid #f87171;
  border-radius:4px;padding:1px 6px;margin-left:5px;
  letter-spacing:.5px;vertical-align:middle;
}

/* US-30: offline row */
.offline-row{opacity:.45}
.sdot-off{background:#6b7280}

/* US-26: bus appears stopped notice */
.stopped-notice{
  margin-top:8px;padding:7px 10px;border-radius:7px;
  background:#2c1e08;border:1px solid #d29922;
  color:#d29922;font-size:.68rem;font-weight:600;
}

/* US-31: acknowledge SOS button */
.sos-ack-btn{
  margin-top:10px;width:100%;padding:8px;border:none;
  border-radius:7px;background:#7f1d1d;color:#fca5a5;
  font-size:.75rem;font-weight:700;cursor:pointer;
  border:1px solid #f87171;transition:background .15s;
  font-family:'Space Grotesk',sans-serif;
}
.sos-ack-btn:hover{background:#991b1b;color:#fff}

/* US-25: share button */
.share-btn{
  margin-left:8px;padding:5px 12px;border:1px solid #30363d;border-radius:7px;
  background:#21262d;color:#c9d1d9;font-size:.72rem;font-weight:600;cursor:pointer;
  font-family:'Space Grotesk',sans-serif;transition:background .15s;white-space:nowrap;
}
.share-btn:hover{background:#30363d;color:#fff}

/* US-29: dwell delay highlight in landmark log */
.log-row-delay{border-color:#7f1d1d!important;background:#1c0a0a!important}
.log-delay-tag{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;
  background:#7f1d1d;color:#fca5a5;font-size:.62rem;font-weight:700;
  font-family:'IBM Plex Mono',monospace;vertical-align:middle;
}
.log-dw-warn{color:#f85149!important;font-weight:700}

/* ══════════════════════════════════════════════
   TRIP TOPBAR BUTTONS
══════════════════════════════════════════════ */
.trip-start-btn{
  padding:5px 12px;border-radius:7px;font-size:.72rem;font-weight:700;
  background:#0e2016;color:#3fb950;border:1px solid #3fb950;
  font-family:'Space Grotesk',sans-serif;transition:background .15s,color .15s;
  white-space:nowrap;flex-shrink:0;
}
.trip-start-btn:hover{background:#163a22;color:#4ade80}
.trip-start-btn.trip-active{background:#2a0e0e;color:#f85149;border-color:#f85149}
.trip-start-btn.trip-active:hover{background:#3d1010}
.trips-log-btn{
  padding:5px 12px;border-radius:7px;font-size:.72rem;font-weight:700;
  background:#21262d;color:#c9d1d9;border:1px solid #30363d;
  font-family:'Space Grotesk',sans-serif;transition:background .15s;
  white-space:nowrap;flex-shrink:0;
}
.trips-log-btn:hover{background:#30363d;color:#fff}

/* ══════════════════════════════════════════════
   ACTIVE TRIP PANEL (in tele-panel)
══════════════════════════════════════════════ */
.trip-metrics{
  display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:10px;
}
.tm{background:#0d1f3c;border:1px solid #1a3a5f;border-radius:8px;padding:8px;text-align:center}
.tm-v{font-size:1rem;font-weight:900;font-family:monospace;color:#58a6ff;line-height:1.1}
.tm-v.warn{color:#f85149}
.tm-l{font-size:.55rem;color:#8b949e;text-transform:uppercase;letter-spacing:.8px;margin-top:2px}

.stop-progress{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.sp-row{
  display:flex;align-items:center;gap:7px;
  padding:5px 8px;border-radius:6px;border:1px solid #30363d;background:#161b22;
  font-size:.72rem;color:#8b949e;
}
.sp-row.sp-done{border-color:#1a3a1a;background:#0d1f0d;color:#c9d1d9}
.sp-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
  background:#30363d;border:2px solid #484f58;
}
.sp-dot.done{background:#3fb950;border-color:#3fb950;box-shadow:0 0 5px #3fb950}
.sp-nm{flex:1;font-weight:600}
.sp-dwell{color:#d29922;font-size:.65rem;font-weight:700;white-space:nowrap}
.sp-here{color:#3fb950;font-size:.65rem;font-weight:700;animation:dblink .9s infinite}
.trip-start-note{font-size:.6rem;color:#6b7280;font-family:'IBM Plex Mono',monospace}

/* ══════════════════════════════════════════════
   PRESENCE / PASSENGER PANEL
══════════════════════════════════════════════ */
.pax-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.pax-icon{font-size:1.4rem}
.pax-count{font-size:.95rem;color:#e6edf3}
.pax-count b{font-size:1.5rem;font-weight:900;font-family:monospace;color:#58a6ff}
.pres-ctrls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pres-num{
  width:55px;background:#21262d;border:1px solid #30363d;border-radius:6px;
  color:#e6edf3;padding:6px 8px;font-size:.82rem;font-family:monospace;
  text-align:center;
}
.pres-btn{
  flex:1;padding:7px 10px;border:none;border-radius:7px;
  font-size:.75rem;font-weight:700;cursor:pointer;
  font-family:'Space Grotesk',sans-serif;transition:opacity .15s;
}
.pres-btn.board {background:#0e2016;color:#3fb950;border:1px solid #3fb950}
.pres-btn.board:hover{background:#163a22}
.pres-btn.alight{background:#2a0e0e;color:#f85149;border:1px solid #f85149}
.pres-btn.alight:hover{background:#3d1010}
.pres-stop{font-size:.63rem;color:#8b949e;margin-top:5px;font-family:'IBM Plex Mono',monospace}

/* ══════════════════════════════════════════════
   TRIP LOG VIEW (View 4)
══════════════════════════════════════════════ */
#tripLogView{background:#1c1917;min-height:100vh;color:#e7e5e4}
.trip-refresh-btn{
  margin-left:auto;padding:6px 13px;border:1px solid #3f3f46;border-radius:7px;
  background:#292524;color:#a8a29e;font-size:.72rem;font-weight:700;cursor:pointer;
  font-family:'Space Grotesk',sans-serif;transition:background .15s;
}
.trip-refresh-btn:hover{background:#3f3f46;color:#fff}

.tlog-row{
  background:#292524;border:1px solid #3f3f46;border-radius:10px;
  padding:14px 16px;margin-bottom:10px;
  display:flex;align-items:center;gap:12px;
  cursor:pointer;transition:background .15s,border-color .15s;
}
.tlog-row:hover{background:#3f3f46;border-color:#57534e}
.tlog-left{flex:1;min-width:0}
.tlog-route{font-size:.88rem;font-weight:700;color:#e7e5e4;margin-bottom:3px}
.tlog-meta{font-size:.7rem;color:#a8a29e;font-family:'IBM Plex Mono',monospace;margin-bottom:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlog-badges{display:flex;gap:6px;flex-wrap:wrap}
.tlog-badge{font-size:.62rem;font-weight:700;padding:2px 8px;border-radius:4px;letter-spacing:.3px}
.tlog-badge.active {background:#0e2016;color:#3fb950;border:1px solid #3fb950}
.tlog-badge.done   {background:#21262d;color:#8b949e;border:1px solid #30363d}
.tlog-badge.offroute{background:#2a0e0e;color:#fca5a5;border:1px solid #f87171}
.tlog-chev{font-size:1.4rem;color:#57534e;flex-shrink:0}
.tlog-empty{
  text-align:center;padding:60px 20px;
  font-size:.9rem;color:#a8a29e;
}

/* Trip summary */
.back-to-list{
  display:inline-block;margin-bottom:16px;
  background:#292524;border:1px solid #3f3f46;color:#a8a29e;
  border-radius:7px;padding:7px 14px;font-size:.75rem;font-weight:700;
  cursor:pointer;font-family:'Space Grotesk',sans-serif;transition:background .15s;
}
.back-to-list:hover{background:#3f3f46;color:#fff}

.sum-hero{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px;
}
.sh{
  background:#292524;border:1px solid #3f3f46;border-radius:10px;
  padding:14px;text-align:center;
}
.sh-v{font-size:1.3rem;font-weight:900;font-family:monospace;color:#58a6ff;line-height:1.1}
.sh-v.warn{color:#f85149}
.sh-l{font-size:.6rem;color:#8b949e;text-transform:uppercase;letter-spacing:.8px;margin-top:4px}

.sum-meta{
  background:#292524;border:1px solid #3f3f46;border-radius:10px;
  padding:14px;margin-bottom:16px;
  display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:.78rem;color:#a8a29e;
}
.sum-meta b{color:#e7e5e4}
.sum-title{
  font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;
  color:#78716c;margin:16px 0 8px;
}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .trk-body{grid-template-columns:1fr 270px}
}
@media(max-width:680px){
  .trk-body{display:flex;flex-direction:column}
  #liveMap{height:52vh}
  .tele-panel{overflow-y:auto;flex:1}
  .hud-spd{bottom:6px;left:8px;padding:9px 12px}
  .hud-num{font-size:1.9rem}
  .spd-num{font-size:2rem}
}
@media(max-width:600px){
  .hero{padding:32px 16px 24px}
  .hero h1{font-size:1.5rem;letter-spacing:-.5px}
  .trips-grid{grid-template-columns:1fr}
  .stats-strip{grid-template-columns:1fr 1fr}
  .stat-item:nth-child(2){border-right:none}
  .stat-item:nth-child(1),.stat-item:nth-child(2){border-bottom:1px solid #E5E7EB}
}
@media(max-width:420px){
  .date-row button{padding:8px 10px;font-size:.72rem}
  thead th,tbody td{padding:7px 7px;font-size:.74rem}
}

/* ══════════════════════════════════════════════
   VIEW 5 — BUS LIVE TEST
══════════════════════════════════════════════ */

/* Nav button */
.bustest-nav-btn{
  margin-left:8px;padding:6px 12px;
  background:rgba(88,166,255,.15);border:1px solid rgba(88,166,255,.4);
  color:#58a6ff;border-radius:7px;font-size:.75rem;font-weight:600;
  transition:background .2s;white-space:nowrap;
}
.bustest-nav-btn:hover{background:rgba(88,166,255,.28)}

/* Top bar */
.bt-topbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;background:#161b22;
  border-bottom:1px solid #30363d;
}
.bt-title-block{display:flex;flex-direction:column;gap:1px}
.bt-title{font-size:1rem;font-weight:700;color:#e6edf3}
.bt-subtitle{font-size:.68rem;color:#8b949e}
.bt-id-block{display:flex;gap:6px;margin-left:auto;align-items:center}
.bt-id-input{
  padding:5px 10px;border-radius:7px;border:1px solid #30363d;
  background:#0d1117;color:#e6edf3;font-size:.8rem;width:110px;
  font-family:'IBM Plex Mono',monospace;
}
.bt-id-input:focus{outline:none;border-color:#58a6ff}
.bt-go-btn{
  padding:5px 14px;border-radius:7px;border:none;
  background:#238636;color:#fff;font-size:.8rem;font-weight:600;
  transition:background .2s;
}
.bt-go-btn:hover{background:#2ea043}

/* Status bar */
.bt-status-bar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:6px 14px;background:#0d1117;border-bottom:1px solid #21262d;
  font-size:.74rem;
}
.bt-status{font-weight:600}
.bt-online{color:#3fb950}
.bt-offline{color:#f85149}
.bt-lastseen{color:#8b949e}
.bt-sos-flash{
  display:inline-flex;align-items:center;gap:5px;
  color:#f85149;font-weight:700;font-size:.78rem;
  animation:bt-sos-blink 1s steps(1) infinite;
}
@keyframes bt-sos-blink{0%,100%{opacity:1}50%{opacity:0}}
.bt-countdown{margin-left:auto;color:#8b949e;font-family:'IBM Plex Mono',monospace;font-size:.72rem}

/* Body split */
.bt-body{
  display:grid;grid-template-columns:1fr 380px;
  height:calc(100vh - 118px);overflow:hidden;
}

/* Map column */
.bt-map-col{position:relative;height:100%}
#btMap{width:100%;height:100%}
.bt-map-overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(13,17,23,.85);z-index:500;gap:10px;pointer-events:none;
}
.bt-map-overlay-icon{font-size:2.5rem}
.bt-map-overlay-text{color:#e6edf3;font-weight:600;font-size:1rem}
.bt-map-overlay-sub{color:#8b949e;font-size:.78rem}

/* Bus icon on map */
.bt-bus-icon{
  font-size:28px;line-height:1;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.7));
}

/* Telemetry column */
.bt-tele-col{
  background:#0d1117;border-left:1px solid #21262d;
  overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;
}
.bt-tele-col::-webkit-scrollbar{width:5px}
.bt-tele-col::-webkit-scrollbar-thumb{background:#30363d;border-radius:3px}

/* Cards */
.bt-card{
  background:#161b22;border:1px solid #30363d;border-radius:10px;
  padding:10px 12px;
}
.bt-card-hdr{font-size:.7rem;font-weight:700;color:#8b949e;margin-bottom:8px;letter-spacing:.04em}

/* Coord grid */
.bt-coord-grid{display:flex;flex-direction:column;gap:6px}
.bt-coord-row{display:flex;justify-content:space-between;align-items:center}
.bt-ck{font-size:.72rem;color:#8b949e}
.bt-cv{font-size:.85rem;color:#e6edf3;font-weight:600}
.bt-cv.mono{font-family:'IBM Plex Mono',monospace}

/* Speed */
.bt-spd-row{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}
.bt-spd-num{font-size:2rem;font-weight:700;color:#58a6ff;font-family:'IBM Plex Mono',monospace}
.bt-spd-unit{font-size:.8rem;color:#8b949e}
.bt-mpill{font-size:.72rem;font-weight:600;margin-left:auto}
.bt-sbar-w{height:4px;background:#21262d;border-radius:2px;overflow:hidden}
.bt-sbar{height:100%;background:linear-gradient(90deg,#1f6feb,#58a6ff);border-radius:2px;transition:width .5s ease}

/* Info grid (sats/hdop/alt, date/time) */
.bt-info-grid{display:flex;flex-direction:column;gap:5px}
.bt-info-row{display:flex;justify-content:space-between}

/* SOS card */
.bt-sos-inner{display:flex;align-items:center;gap:10px}
.bt-sos-ico{font-size:1.6rem}
.bt-sos-st{font-weight:700;font-size:.85rem}
.bt-sos-sub{font-size:.72rem;color:#8b949e;margin-top:2px}

/* Raw JSON */
.bt-json{
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:#7ee787;
  background:#0d1117;border-radius:6px;padding:8px;overflow-x:auto;
  white-space:pre;max-height:200px;overflow-y:auto;
}
.bt-json::-webkit-scrollbar{width:4px;height:4px}
.bt-json::-webkit-scrollbar-thumb{background:#30363d;border-radius:2px}

/* Responsive */
@media(max-width:900px){
  .bt-body{grid-template-columns:1fr;grid-template-rows:55vh auto}
  .bt-tele-col{height:auto;max-height:none}
}
@media(max-width:600px){
  .bt-topbar{padding:8px 10px;gap:6px}
  .bt-title{font-size:.88rem}
  .bt-id-input{width:85px}
}

/* ══════════════════════════════════════════════════════
   PREDICTIVE SIMULATION VIEW — View 6
   Scope: Morning to College / Evening to Home routes
══════════════════════════════════════════════════════ */
#predictionView{background:#0d1117;color:#e6edf3;min-height:100vh;display:flex;flex-direction:column}

.pred-nav-btn{background:#6d28d9!important;border-color:#6d28d9!important}
.pred-nav-btn:hover{background:#5b21b6!important}

.pred-topbar{
  background:#161b22;border-bottom:1px solid #30363d;
  padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  position:sticky;top:0;z-index:200;
}
.pred-title-block{display:flex;flex-direction:column;gap:1px}
.pred-title{font-size:.95rem;font-weight:700;color:#e6edf3}
.pred-subtitle{font-size:.62rem;color:#8b949e}

.pred-route-tabs{display:flex;gap:6px;margin-left:8px}
.pred-tab{
  background:#21262d;border:1px solid #30363d;color:#8b949e;
  border-radius:6px;padding:5px 12px;font-size:.75rem;font-weight:600;
  cursor:pointer;transition:all .15s;
}
.pred-tab-active{background:#1f6feb;border-color:#1f6feb;color:#fff}
.pred-tab:hover:not(.pred-tab-active){background:#30363d;color:#e6edf3}

.pred-speed-ctrl{display:flex;align-items:center;gap:5px;margin-left:auto}
.pred-spd-btn{
  background:#21262d;border:1px solid #30363d;color:#8b949e;
  border-radius:4px;padding:4px 8px;font-size:.68rem;font-weight:600;cursor:pointer;
}
.pred-spd-active{background:#388bfd22;border-color:#1f6feb;color:#58a6ff}
.pred-spd-btn:hover:not(.pred-spd-active){background:#30363d;color:#e6edf3}

.pred-deviation-banner{
  background:#3d0000;border:1px solid #f85149;color:#fca5a5;
  padding:10px 16px;font-size:.82rem;font-weight:600;
  display:flex;align-items:center;justify-content:space-between;
  animation:pred-flash .6s ease-in-out infinite alternate;
}
@keyframes pred-flash{from{background:#3d0000}to{background:#5c0000}}
.pred-dev-close{background:none;border:none;color:#fca5a5;font-size:1rem;cursor:pointer;padding:0 4px}

.pred-info-bar{
  background:#161b22;border-bottom:1px solid #30363d;
  padding:10px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.pred-eta-card{display:flex;flex-direction:column;gap:2px;min-width:100px}
.pred-info-lbl{font-size:.6rem;color:#8b949e;text-transform:uppercase;letter-spacing:.8px;font-weight:600}
.pred-eta-val{font-size:1.1rem;font-weight:700;color:#58a6ff;font-family:'IBM Plex Mono',monospace}
.pred-next-val{font-size:.9rem;font-weight:700;color:#3fb950}
.pred-prog-w{height:6px;background:#21262d;border-radius:3px;overflow:hidden;margin:3px 0;min-width:120px}
.pred-prog-bar{height:100%;background:linear-gradient(90deg,#1f6feb,#58a6ff);border-radius:3px;transition:width .4s ease}
.pred-prog-txt{font-size:.68rem;color:#8b949e;font-family:'IBM Plex Mono',monospace}

.pred-search-wrap{display:flex;gap:4px;margin-left:auto}
.pred-search-in{
  background:#21262d;border:1px solid #30363d;color:#e6edf3;
  border-radius:6px;padding:6px 10px;font-size:.78rem;outline:none;width:160px;
}
.pred-search-in:focus{border-color:#1f6feb}
.pred-search-btn{
  background:#1f6feb;border:none;color:#fff;border-radius:6px;
  padding:6px 12px;font-size:.75rem;font-weight:600;cursor:pointer;
}
.pred-search-btn:hover{background:#388bfd}

.pred-body{
  flex:1;display:grid;grid-template-columns:1fr 320px;
  min-height:0;overflow:hidden;
}

.pred-map-col{position:relative;background:#0d1117}
#predMap{width:100%;height:100%;min-height:calc(100vh - 220px)}

.pred-ctrl-overlay{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;z-index:500;
}
.pred-sim-btn{
  border:none;border-radius:8px;padding:9px 20px;
  font-size:.82rem;font-weight:700;cursor:pointer;transition:all .15s;
}
.pred-sim-start{background:#238636;color:#fff}
.pred-sim-start:hover{background:#2ea043}
.pred-sim-pause{background:#d29922;color:#fff}
.pred-sim-pause:hover{background:#e3b341}
.pred-sim-reset{background:#30363d;color:#e6edf3}
.pred-sim-reset:hover{background:#3d444e}
.pred-sim-clock{
  background:rgba(13,17,23,.9);border:1px solid #30363d;
  border-radius:6px;padding:6px 12px;
  font-family:'IBM Plex Mono',monospace;font-size:.88rem;font-weight:700;color:#58a6ff;
}

.pred-side{
  background:#161b22;border-left:1px solid #30363d;
  overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;
}
.pred-side::-webkit-scrollbar{width:4px}
.pred-side::-webkit-scrollbar-thumb{background:#30363d;border-radius:2px}

.pred-card{background:#0d1117;border:1px solid #21262d;border-radius:8px;padding:12px}
.pred-card-hdr{font-size:.72rem;font-weight:700;color:#8b949e;text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}

.pred-traffic-badge{
  display:inline-block;padding:4px 12px;border-radius:4px;
  font-size:.78rem;font-weight:700;letter-spacing:.5px;
}
.pred-traffic-low   {background:#1a3a2a;color:#3fb950}
.pred-traffic-medium{background:#2d2011;color:#d29922}
.pred-traffic-heavy {background:#3d0000;color:#f85149}
.pred-traffic-note{font-size:.68rem;color:#6b7280;margin-top:4px}

.pred-stop-list{display:flex;flex-direction:column;gap:4px}
.pred-stop-row{
  display:flex;align-items:center;gap:8px;padding:6px 8px;
  border-radius:5px;font-size:.75rem;
}
.pred-stop-done{background:#0d2a1a;color:#3fb950}
.pred-stop-current{background:#0d2040;color:#58a6ff;font-weight:700}
.pred-stop-pending{background:#161b22;color:#6b7280}
.pred-stop-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.pred-stop-dot-done{background:#3fb950}
.pred-stop-dot-current{background:#58a6ff;animation:pred-pulse .8s infinite}
.pred-stop-dot-pending{background:#30363d}
@keyframes pred-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.pred-stop-name{flex:1}
.pred-stop-eta{font-size:.68rem;color:#58a6ff;font-family:'IBM Plex Mono',monospace}

.pred-hist-table{display:flex;flex-direction:column;gap:3px;font-size:.7rem}
.pred-hist-row{display:flex;justify-content:space-between;padding:4px 6px;border-radius:3px;background:#0d1117}
.pred-hist-row:nth-child(odd){background:#161b22}
.pred-hist-date{color:#6b7280;font-family:'IBM Plex Mono',monospace}
.pred-hist-dur{color:#e6edf3;font-weight:600}
.pred-hist-traffic-low   {color:#3fb950}
.pred-hist-traffic-medium{color:#d29922}
.pred-hist-traffic-heavy {color:#f85149}

.pred-search-result-stop{
  background:#0d2040;border:1px solid #1f6feb;border-radius:6px;
  padding:10px;font-size:.8rem;
}
.pred-search-result-stop b{color:#58a6ff}

@media(max-width:900px){
  .pred-body{grid-template-columns:1fr;grid-template-rows:55vh auto}
  .pred-side{height:auto;max-height:none}
  #predMap{min-height:55vh}
}
@media(max-width:600px){
  .pred-topbar{gap:6px}
  .pred-speed-ctrl{margin-left:0}
  .pred-search-wrap{margin-left:0;width:100%}
  .pred-search-in{width:100%}
}

/* ── Enhanced per-stop prediction cards ───────────────────────────── */
.pred-scard{
  border-radius:7px;border:1px solid #21262d;
  overflow:hidden;font-size:.75rem;
  transition:border-color .2s;
}
.pred-scard-done   {background:#0a1f10;border-color:#1a3a2a}
.pred-scard-current{background:#0d2040;border-color:#1f6feb;box-shadow:0 0 0 1px #1f6feb44}
.pred-scard-pending{background:#0d1117;border-color:#21262d}

.pred-scard-hdr{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;
  background:rgba(255,255,255,.03);
}
.pred-scard-num{
  width:20px;height:20px;border-radius:50%;
  background:#21262d;color:#8b949e;
  font-size:.65rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.pred-scard-done .pred-scard-num{background:#1a3a2a;color:#3fb950}
.pred-scard-current .pred-scard-num{background:#1f6feb;color:#fff;animation:pred-pulse .9s infinite}
.pred-scard-name{flex:1;font-weight:600;color:#e6edf3}
.pred-scard-done .pred-scard-name{color:#8b949e}
.pred-scard-status{font-size:.65rem;font-weight:600;color:#6b7280;white-space:nowrap}
.pred-scard-done .pred-scard-status{color:#3fb950}
.pred-scard-current .pred-scard-status{color:#58a6ff}

.pred-scard-body{padding:6px 10px 8px;display:flex;flex-direction:column;gap:4px}
.pred-scard-row{display:flex;justify-content:space-between;align-items:center;gap:6px}
.pred-scard-lbl{font-size:.64rem;color:#6b7280}
.pred-scard-val{font-size:.72rem;font-weight:600;color:#e6edf3;font-family:'IBM Plex Mono',monospace}
.pred-scard-hist{font-family:'IBM Plex Mono',monospace;font-size:.65rem;color:#8b949e}
.pred-scard-hist b{color:#58a6ff}
.pred-eta-blue{color:#58a6ff!important}

/* History table header */
.pred-hist-hdr-row{
  display:flex;justify-content:space-between;
  padding:3px 6px;font-size:.6rem;color:#6b7280;
  text-transform:uppercase;letter-spacing:.6px;font-weight:600;
  border-bottom:1px solid #21262d;margin-bottom:3px;
}
.pred-hist-pred-row{border-top:1px solid #21262d;margin-top:3px;padding-top:5px}

/* ── ETA Panel (View 3 tracker) ──────────────────────────────────── */
.eta-modal-open-btn{
  background:#0d2040;border:1px solid #1f6feb;color:#58a6ff;
  border-radius:6px;padding:6px 12px;font-size:.75rem;font-weight:700;
  cursor:pointer;transition:all .15s;white-space:nowrap;
}
.eta-modal-open-btn:hover{background:#1f2d45;border-color:#388bfd}

.eta-panel{
  position:absolute;top:0;right:0;width:300px;height:100%;
  background:#161b22;border-left:1px solid #30363d;
  z-index:600;flex-direction:column;
  box-shadow:-4px 0 20px rgba(0,0,0,.5);
  overflow:hidden;
}
/* trackerView needs position:relative for the panel to anchor */
#trackerView{position:relative}

.eta-panel-hdr{
  background:#0d1117;border-bottom:1px solid #30363d;
  padding:12px 14px;display:flex;align-items:center;justify-content:space-between;
  font-size:.88rem;font-weight:700;color:#e6edf3;flex-shrink:0;
}
.eta-panel-close{background:none;border:none;color:#8b949e;font-size:1.1rem;cursor:pointer;padding:0 2px}
.eta-panel-close:hover{color:#f85149}
.eta-panel-sub{padding:8px 14px;font-size:.68rem;color:#8b949e;background:#0d1117;border-bottom:1px solid #21262d;flex-shrink:0}
.eta-panel-body{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px}
.eta-panel-body::-webkit-scrollbar{width:3px}
.eta-panel-body::-webkit-scrollbar-thumb{background:#30363d;border-radius:2px}
.eta-panel-note{padding:8px 14px;font-size:.63rem;color:#6b7280;background:#0d1117;border-top:1px solid #21262d;flex-shrink:0}
.eta-panel-nodata{text-align:center;color:#6b7280;font-size:.8rem;padding:30px 14px;line-height:1.7}

.eta-stop-card{
  background:#0d1117;border:1px solid #21262d;border-radius:7px;
  overflow:hidden;font-size:.75rem;
}
.eta-stop-passed{opacity:.5}
.eta-stop-next{border-color:#1f6feb;background:#0d2040;box-shadow:0 0 0 1px #1f6feb33}

.eta-stop-top{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;background:rgba(255,255,255,.03);
}
.eta-stop-num{
  width:20px;height:20px;border-radius:50%;
  background:#21262d;color:#8b949e;font-size:.65rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.eta-stop-next .eta-stop-num{background:#1f6feb;color:#fff;animation:pred-pulse .9s infinite}
.eta-stop-name{flex:1;font-weight:600;color:#e6edf3;font-size:.78rem}
.eta-stop-time{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:#58a6ff;white-space:nowrap}

.eta-stop-detail{padding:6px 10px 8px;display:flex;flex-direction:column;gap:3px}
.eta-detail-row{display:flex;justify-content:space-between;align-items:center}
.eta-detail-lbl{font-size:.62rem;color:#6b7280}
.eta-detail-val{font-size:.7rem;font-weight:600;color:#c9d1d9;font-family:'IBM Plex Mono',monospace}
.eta-blue{color:#58a6ff!important}

@media(max-width:600px){
  .eta-panel{width:100%;height:60%!important;top:auto;bottom:0;border-left:none;border-top:1px solid #30363d}
}