*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f0f2f5;--sf:#fff;--sf2:#f7f8fa;--sf3:#eef0f3;
  --bd:#e4e7eb;--bd2:#cdd2d8;--mu:#9ca3af;--gh:#6b7280;
  --tx:#374151;--st:#111827;
  --ac:#da291c;--acb:rgba(218,41,28,.07);--acd:rgba(218,41,28,.22);
  --gn:#15803d;--gnb:rgba(21,128,61,.08);--gnd:rgba(21,128,61,.25);
  --am:#b45309;--amb:rgba(180,83,9,.08);--amd:rgba(180,83,9,.25);
  --bl:#1d4ed8;--blb:rgba(29,78,216,.08);
  --rd:#dc2626;--rdb:rgba(220,38,38,.08);
  --pu:#7c3aed;--pub:rgba(124,58,237,.08);
  --sh:0 1px 3px rgba(0,0,0,.07);--sh2:0 4px 20px rgba(0,0,0,.09);--sh3:0 8px 32px rgba(0,0,0,.13);
  --tf:none;
}
[data-theme=dark]{
  --bg:#0c0e14;--sf:#161924;--sf2:#1d2130;--sf3:#232840;
  --bd:#282d3f;--bd2:#333a52;--mu:#4a5270;--gh:#6b7a9e;
  --tx:#c4cce0;--st:#eaeef8;
  --ac:#f05540;--acb:rgba(240,85,64,.1);--acd:rgba(240,85,64,.3);
  --gn:#22c55e;--gnb:rgba(34,197,94,.1);--gnd:rgba(34,197,94,.3);
  --am:#f59e0b;--amb:rgba(245,158,11,.1);--amd:rgba(245,158,11,.3);
  --bl:#60a5fa;--blb:rgba(96,165,250,.1);
  --rd:#f87171;--rdb:rgba(248,113,113,.1);
  --pu:#a78bfa;--pub:rgba(167,139,250,.1);
  --sh:0 1px 3px rgba(0,0,0,.3);--sh2:0 4px 20px rgba(0,0,0,.4);--sh3:0 8px 32px rgba(0,0,0,.5);
  --tf:brightness(.8) saturate(.5) contrast(1.1);
}
html,body{height:100%;overflow:hidden;font-family:'Inter',system-ui,sans-serif;color:var(--tx);background:var(--bg)}
body{display:grid;grid-template-rows:50px 1fr;grid-template-columns:340px 1fr;grid-template-areas:"hd hd" "sd mp"}

/* HEADER */
header{grid-area:hd;background:var(--sf);border-bottom:1px solid var(--bd);display:flex;align-items:center;padding:0 12px;gap:8px;z-index:9500;box-shadow:var(--sh)}
.logo{display:flex;align-items:center;gap:7px;text-decoration:none;flex-shrink:0}
.logo-ic{width:28px;height:28px;border-radius:7px;background:var(--ac);display:flex;align-items:center;justify-content:center;font-size:14px}
.logo-nm{font-weight:700;font-size:14px;color:var(--st);letter-spacing:-.2px}
.logo-v{font-family:'JetBrains Mono',monospace;font-size:8px;color:var(--mu);margin-top:1px;letter-spacing:0}
.srch{flex:1;max-width:240px;position:relative}
.srch input{width:100%;height:30px;background:var(--sf2);border:1px solid var(--bd);border-radius:7px;padding:0 10px 0 28px;color:var(--st);font-size:12px;outline:none;transition:border-color .15s,box-shadow .15s}
.srch input::placeholder{color:var(--mu)}
.srch input:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--acb)}
.si{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--mu);pointer-events:none}
.hdr-r{display:flex;align-items:center;gap:5px;margin-left:auto}
.hbtn{height:30px;padding:0 10px;background:var(--sf2);border:1px solid var(--bd);border-radius:6px;color:var(--gh);font-size:11px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .15s;white-space:nowrap}
.hbtn:hover{border-color:var(--bd2);color:var(--tx)}
.hbtn.on{background:var(--acb);border-color:var(--acd);color:var(--ac);font-weight:600}
.hbtn .badge{font-family:'JetBrains Mono',monospace;font-size:9px;padding:1px 4px;border-radius:3px;background:var(--ac);color:#fff}
.ibtn{width:30px;height:30px;background:var(--sf2);border:1px solid var(--bd);border-radius:6px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;text-decoration:none;color:var(--tx)}
.ibtn:hover{border-color:var(--bd2)}

/* SIDEBAR */
aside{grid-area:sd;background:var(--sf);border-right:1px solid var(--bd);display:flex;flex-direction:column;overflow:hidden}
.tabs{display:flex;border-bottom:1px solid var(--bd);flex-shrink:0;overflow-x:auto}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;height:38px;padding:0 12px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:500;color:var(--mu);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;margin-bottom:-1px;white-space:nowrap;gap:4px}
.tab:hover{color:var(--tx)}
.tab.on{color:var(--ac);border-bottom-color:var(--ac);font-weight:600}
.panel{display:none;flex:1;flex-direction:column;overflow-y:auto;min-height:0}
.panel.on{display:flex}
.panel::-webkit-scrollbar{width:3px}
.panel::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:2px}
.dpanel{display:none;flex:1;flex-direction:column;overflow-y:auto;min-height:0}
.dpanel.on{display:flex}
.dpanel::-webkit-scrollbar{width:3px}
.dpanel::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:2px}
.dpback{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid var(--bd);cursor:pointer;font-size:12px;font-weight:500;color:var(--gh);transition:background .1s;background:var(--sf);position:sticky;top:0;z-index:5;flex-shrink:0}
.dpback:hover{background:var(--sf2);color:var(--tx)}

/* GENERICS */
.sec{padding:8px 13px 3px;font-size:9px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--mu);flex-shrink:0}
.loader{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--mu);font-size:11px}
.spin{width:18px;height:18px;border:2px solid var(--bd);border-top-color:var(--ac);border-radius:50%;animation:sp .6s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--mu);font-size:11px;padding:24px;text-align:center}
.empty-ic{font-size:26px;opacity:.55}
.apierr{margin:12px;padding:12px;background:var(--rdb);border:1px solid rgba(220,38,38,.2);border-radius:8px;font-size:11px;color:var(--rd);line-height:1.75}
.chip{display:inline-flex;align-items:center;padding:2px 6px;border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.3px}
.chip.ok{background:var(--gnb);color:var(--gn)}
.chip.warn{background:var(--amb);color:var(--am)}
.chip.err{background:var(--rdb);color:var(--rd)}
.chip.info{background:var(--blb);color:var(--bl)}
.chip.none{background:var(--sf3);color:var(--mu)}

/* ROUTE LIST */
.rrow{display:flex;align-items:center;gap:9px;padding:8px 11px;cursor:pointer;border-bottom:1px solid var(--bd);transition:background .1s;position:relative;flex-shrink:0}
.rrow::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;border-radius:0 2px 2px 0;transition:background .15s}
.rrow:hover{background:var(--sf2)}
.rrow.sel{background:var(--acb)}
.rrow.sel::before{background:var(--ac)}
.rtag{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;flex-shrink:0;letter-spacing:-.3px}
.rtag.s{background:rgba(185,28,28,.1);color:#b91c1c}
.rtag.t{background:rgba(180,83,9,.1);color:#b45309}
.rtag.b{background:var(--acb);color:var(--ac)}
.rinfo{flex:1;min-width:0}
.rname{font-size:12px;font-weight:500;color:var(--st);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rsub{font-size:10px;color:var(--mu);margin-top:1px}
.star{background:none;border:none;font-size:14px;color:var(--bd2);cursor:pointer;padding:2px 0 2px 3px;flex-shrink:0;transition:color .15s;line-height:1}
.star:hover,.star.on{color:var(--am)}

/* ROUTE DETAIL */
.rdhero{padding:12px;border-bottom:1px solid var(--bd);flex-shrink:0}
.rdtag{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;border-radius:10px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;padding:0 9px;margin-bottom:7px}
.rdtitle{font-size:15px;font-weight:700;color:var(--st);margin-bottom:2px}
.rdtype{font-size:9px;color:var(--mu);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px}
.rdstats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.rdstat{background:var(--sf2);border:1px solid var(--bd);border-radius:7px;padding:7px 8px;text-align:center}
.rdstat-n{font-family:'JetBrains Mono',monospace;font-size:17px;font-weight:700;color:var(--ac);line-height:1}
.rdstat-l{font-size:8px;text-transform:uppercase;letter-spacing:.5px;color:var(--mu);margin-top:2px}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:0 12px 10px;flex-shrink:0}
.icard{background:var(--sf2);border:1px solid var(--bd);border-radius:8px;padding:9px 10px}
.icard-ic{font-size:15px;margin-bottom:3px}
.icard-lbl{font-size:8px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--mu);margin-bottom:3px}
.icard-val{font-size:10px;color:var(--tx);line-height:1.55}
.rdmsg{margin:0 11px 6px;padding:9px 11px;border-radius:7px;font-size:11px;line-height:1.5;flex-shrink:0}
.rdmsg.warn{background:var(--amb);border:1px solid var(--amd);color:var(--am)}
.rdmsg.info{background:var(--acb);border:1px solid var(--acd);color:var(--ac)}
.bunch-bar{margin:0 12px 8px;padding:8px 10px;background:var(--rdb);border:1px solid rgba(220,38,38,.2);border-radius:7px;font-size:10px;color:var(--rd);flex-shrink:0}
.dirtabs{display:flex;border-bottom:1px solid var(--bd);padding:0 8px;gap:2px;background:var(--sf2);flex-shrink:0}
.dirtab{height:32px;padding:0 10px;font-size:10px;font-weight:500;color:var(--gh);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;display:flex;align-items:center;margin-bottom:-1px}
.dirtab:hover{color:var(--tx)}
.dirtab.on{color:var(--ac);border-bottom-color:var(--ac);font-weight:600}
.srow{display:flex;align-items:center;gap:9px;padding:7px 13px;border-bottom:1px solid var(--bd);cursor:pointer;transition:background .1s;flex-shrink:0}
.srow:hover{background:var(--sf2)}
.srow.active{background:var(--acb)}
.sdot{width:7px;height:7px;border-radius:50%;border:2px solid var(--bd2);background:var(--sf);flex-shrink:0;transition:all .15s}
.srow.active .sdot,.srow:hover .sdot{border-color:var(--ac);background:var(--ac)}
.sname{font-size:11px;color:var(--tx);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sid{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--mu);flex-shrink:0}
.sarr{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;color:var(--mu);flex-shrink:0;min-width:24px;text-align:right}
.sarr.soon{color:var(--gn)}
.sarr.now{color:var(--rd)}

/* STOP SEARCH */
.stop-srch{padding:10px 12px;border-bottom:1px solid var(--bd);flex-shrink:0;display:flex;gap:7px}
.stop-srch input{flex:1;height:30px;background:var(--sf2);border:1px solid var(--bd);border-radius:7px;padding:0 10px;font-size:12px;color:var(--st);outline:none;transition:border-color .15s}
.stop-srch input:focus{border-color:var(--ac)}
.stop-srch button{height:30px;padding:0 12px;background:var(--ac);color:#fff;border:none;border-radius:7px;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;transition:opacity .15s}
.stop-srch button:hover{opacity:.85}

/* STOP FAVORITES DASHBOARD */
.fav-stop{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-bottom:1px solid var(--bd);flex-shrink:0}
.fav-stop-info{flex:1;min-width:0}
.fav-stop-name{font-size:12px;font-weight:600;color:var(--st);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fav-stop-routes{font-size:10px;color:var(--mu);margin-top:1px}
.fav-arrs{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.fav-arr{background:var(--sf2);border:1px solid var(--bd);border-radius:6px;padding:4px 8px;min-width:48px;text-align:center}
.fav-arr-n{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700;color:var(--tx);line-height:1}
.fav-arr-n.now{color:var(--rd)}
.fav-arr-n.soon{color:var(--gn)}
.fav-arr-r{font-size:8px;color:var(--mu);margin-top:1px}
.fav-rm{background:none;border:none;font-size:14px;color:var(--bd2);cursor:pointer;padding:2px;flex-shrink:0;transition:color .15s;line-height:1;margin-top:1px}
.fav-rm:hover{color:var(--rd)}

/* ALERTS */
.alert-row{padding:10px 13px;border-bottom:1px solid var(--bd);display:flex;gap:9px;align-items:flex-start;flex-shrink:0}
.adot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:4px}
.adot.major{background:var(--rd)}
.adot.minor{background:var(--am)}
.adot.info{background:var(--gh)}
.atitle{font-size:12px;font-weight:500;color:var(--st);line-height:1.4}
.adesc{font-size:10px;color:var(--gh);margin-top:2px;line-height:1.4}
.ameta{font-size:9px;color:var(--mu);margin-top:3px;font-family:'JetBrains Mono',monospace;line-height:1.5}
.aurl{font-size:9px;color:var(--ac);text-decoration:none;margin-top:3px;display:inline-block}
.aurl:hover{text-decoration:underline}

/* SUBWAY STATUS */
.subway-line{padding:10px 12px;border-bottom:1px solid var(--bd);flex-shrink:0}
.sl-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.sl-num{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.sl-name{font-size:13px;font-weight:600;color:var(--st)}
.sl-stats{display:flex;gap:8px;flex-wrap:wrap}
.sl-stat{font-size:10px;color:var(--gh);display:flex;align-items:center;gap:4px}
.sl-alerts{margin-top:7px;display:flex;flex-direction:column;gap:4px}
.sl-alert{font-size:10px;padding:6px 8px;border-radius:5px;line-height:1.4}
.sl-alert.major{background:var(--rdb);color:var(--rd)}
.sl-alert.minor{background:var(--amb);color:var(--am)}
.sl-alert.info{background:var(--blb);color:var(--bl)}

/* TRIP PLANNER */
.trip-form{padding:12px;border-bottom:1px solid var(--bd);flex-shrink:0;display:flex;flex-direction:column;gap:8px}
.trip-inp{display:flex;flex-direction:column;gap:3px}
.trip-inp label{font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--mu)}
.trip-inp input{height:30px;background:var(--sf2);border:1px solid var(--bd);border-radius:7px;padding:0 10px;font-size:11px;color:var(--st);outline:none;transition:border-color .15s;font-family:'JetBrains Mono',monospace}
.trip-inp input:focus{border-color:var(--ac)}
.trip-inp input::placeholder{font-family:'Inter',sans-serif;font-size:11px;color:var(--mu)}
.trip-btn{height:32px;background:var(--ac);color:#fff;border:none;border-radius:7px;font-size:11px;font-weight:600;cursor:pointer;transition:opacity .15s}
.trip-btn:hover{opacity:.85}
.trip-result{padding:12px;flex-shrink:0}
.trip-route{padding:8px 10px;border:1px solid var(--bd);border-radius:8px;margin-bottom:6px;cursor:pointer;transition:border-color .15s,background .15s}
.trip-route:hover{border-color:var(--ac);background:var(--acb)}
.trip-route-top{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.trip-route-tag{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700}
.trip-route-nm{font-size:11px;font-weight:500;color:var(--st)}
.trip-route-meta{font-size:10px;color:var(--mu);display:flex;gap:8px}

/* BUNCHING PANEL */
.bunch-row{padding:9px 12px;border-bottom:1px solid var(--bd);display:flex;gap:9px;align-items:center;flex-shrink:0;cursor:pointer;transition:background .15s}
.bunch-row:hover{background:var(--sf2)}
.bunch-dot{width:8px;height:8px;border-radius:50%;background:var(--rd);flex-shrink:0;animation:blink 1s infinite}
.bunch-info{flex:1;min-width:0}
.bunch-route{font-size:11px;font-weight:600;color:var(--st)}
.bunch-detail{font-size:10px;color:var(--mu);margin-top:1px}
.bunch-dist{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--rd);flex-shrink:0}

/* ARRIVALS FOOTER */
.foot{background:var(--sf);border-top:1px solid var(--bd);padding:9px 11px;flex-shrink:0}
.foot-lbl{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--mu);margin-bottom:6px;display:flex;align-items:center;gap:5px}
.flive{width:5px;height:5px;border-radius:50%;background:var(--gn)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.flive{animation:blink 1.2s ease-in-out infinite}
.farr-row{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.farr{background:var(--sf2);border:1px solid var(--bd);border-radius:7px;padding:6px;text-align:center;transition:border-color .15s}
.farr.hi{border-color:var(--ac);background:var(--acb)}
.farr-n{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:700;color:var(--tx);line-height:1}
.farr-n.now{color:var(--rd);animation:blink 1s infinite}
.farr-n.soon{color:var(--gn)}
.farr-sub{font-size:8px;color:var(--mu);margin-top:2px}
.farr-dir{font-size:8px;color:var(--gh);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* MAP */
main{grid-area:mp;position:relative;overflow:hidden}
#map{width:100%;height:100%}
.leaflet-tile-pane{filter:var(--tf)}
.leaflet-control-zoom a{background:var(--sf)!important;color:var(--tx)!important;border-color:var(--bd)!important;box-shadow:var(--sh)!important}
.leaflet-control-zoom a:hover{background:var(--sf2)!important}
[data-theme=dark] .leaflet-control-attribution{background:rgba(22,25,36,.9)!important;color:var(--gh)!important}
.map-tl{position:absolute;top:10px;left:10px;z-index:500;display:flex;flex-direction:column;gap:5px;pointer-events:none}
.map-tl>*{pointer-events:auto}
.map-tr{position:absolute;top:10px;right:10px;z-index:500;display:flex;flex-direction:column;gap:4px;pointer-events:none}
.map-tr>*{pointer-events:auto}
.live-pill{height:28px;padding:0 10px;background:var(--sf);border:1px solid var(--bd);border-radius:20px;box-shadow:var(--sh);display:flex;align-items:center;gap:7px;font-size:10px;color:var(--gh)}
.tstamp{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ac);min-width:58px}
.fbtn{height:30px;padding:0 10px;background:var(--sf);border:1px solid var(--bd);border-radius:7px;color:var(--gh);font-size:11px;font-weight:500;cursor:pointer;box-shadow:var(--sh);display:flex;align-items:center;gap:6px;transition:all .15s;white-space:nowrap}
.fbtn:hover{border-color:var(--bd2);color:var(--tx)}
.fbtn.on{color:var(--st);font-weight:600;border-color:var(--bd2)}
.fbtn.off{opacity:.35}
.fbtn .cnt{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--mu);margin-left:auto}
.fbtn.warn{color:var(--rd)!important;border-color:rgba(220,38,38,.3)!important}
.hud{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:500;background:var(--sf);border:1px solid var(--bd);border-radius:10px;box-shadow:var(--sh2);display:flex;overflow:hidden}
.huds{padding:7px 12px;text-align:center;border-right:1px solid var(--bd)}
.huds:last-child{border-right:none}
.hudn{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:700;color:var(--ac);line-height:1}
.hudl{font-size:8px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--mu);margin-top:2px}

/* VEHICLE DETAIL */
.vd{position:absolute;bottom:68px;left:10px;z-index:600;background:var(--sf);border:1px solid var(--bd);border-radius:11px;box-shadow:var(--sh3);padding:13px;width:230px;display:none}
.vd.show{display:block;animation:fadeup .16s ease}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.vd-x{position:absolute;top:9px;right:9px;background:none;border:none;color:var(--mu);cursor:pointer;font-size:14px;line-height:1;padding:2px;transition:color .15s}
.vd-x:hover{color:var(--tx)}
.vd-type{font-size:8px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ac);margin-bottom:1px}
.vd-name{font-size:13px;font-weight:700;color:var(--st);margin-bottom:8px;padding-right:18px;line-height:1.3}
.vd-dir{font-size:10px;color:var(--gh);margin-bottom:8px;padding:5px 7px;background:var(--sf2);border-radius:5px;border:1px solid var(--bd)}
.vd-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:8px}
.vd-stat{background:var(--sf2);border:1px solid var(--bd);border-radius:6px;padding:6px 8px}
.vd-val{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;color:var(--st);line-height:1}
.vd-val.g{color:var(--gn)}
.vd-val.a{color:var(--am)}
.vd-val.r{color:var(--rd)}
.vd-lbl{font-size:8px;color:var(--mu);margin-top:1px;text-transform:uppercase;letter-spacing:.5px}
.vd-btns{display:flex;gap:5px}
.vdbtn{flex:1;height:28px;border-radius:6px;font-size:10px;font-weight:600;cursor:pointer;border:1px solid;display:flex;align-items:center;justify-content:center;gap:3px;transition:all .15s}
.vdbtn.track{background:var(--acb);border-color:var(--acd);color:var(--ac)}
.vdbtn.track.on{background:var(--ac);color:#fff;border-color:var(--ac)}
.vdbtn.route{background:var(--sf2);border-color:var(--bd);color:var(--gh)}
.vdbtn.route:hover{border-color:var(--bd2);color:var(--tx)}

/* TRAIL ON MAP */
.trail-seg{stroke-linecap:round;stroke-linejoin:round}

/* LEAFLET POPUP */
.leaflet-popup-content-wrapper{background:var(--sf)!important;color:var(--tx)!important;border:1px solid var(--bd2)!important;border-radius:9px!important;box-shadow:var(--sh2)!important;font-family:'Inter',sans-serif!important}
.leaflet-popup-tip{background:var(--sf)!important}
.leaflet-popup-content{margin:9px 11px!important;font-size:11px}

/* API EXPLORER */
.explorer{padding:14px;flex-shrink:0;overflow-y:auto}
.ep-card{background:var(--sf2);border:1px solid var(--bd);border-radius:8px;margin-bottom:8px;overflow:hidden}
.ep-head{display:flex;align-items:center;gap:8px;padding:9px 11px;cursor:pointer;transition:background .1s}
.ep-head:hover{background:var(--sf3)}
.ep-method{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;padding:2px 5px;border-radius:3px;background:var(--gnb);color:var(--gn);flex-shrink:0}
.ep-path{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--st);flex:1}
.ep-desc{font-size:10px;color:var(--mu);flex:2;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ep-body{display:none;padding:10px 11px;border-top:1px solid var(--bd);background:var(--sf)}
.ep-body.open{display:block}
.ep-params{display:flex;flex-direction:column;gap:5px;margin-bottom:9px}
.ep-param{display:flex;gap:6px;align-items:center}
.ep-param label{font-size:9px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.5px;min-width:60px;flex-shrink:0}
.ep-param input{flex:1;height:26px;background:var(--bg);border:1px solid var(--bd);border-radius:5px;padding:0 7px;font-size:10px;color:var(--st);font-family:'JetBrains Mono',monospace;outline:none;transition:border-color .15s}
.ep-param input:focus{border-color:var(--ac)}
.ep-run{height:26px;padding:0 12px;background:var(--ac);color:#fff;border:none;border-radius:5px;font-size:10px;font-weight:600;cursor:pointer;transition:opacity .15s}
.ep-run:hover{opacity:.85}
.ep-result{margin-top:9px;background:var(--bg);border:1px solid var(--bd);border-radius:6px;padding:8px;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--tx);line-height:1.6;white-space:pre;overflow-x:auto;max-height:200px;overflow-y:auto;display:none}
.ep-result.show{display:block}

/* MOBILE */
@media(max-width:680px){
  body{grid-template-rows:46px 1fr 50px;grid-template-columns:1fr;grid-template-areas:"hd" "mp" "mn"}
  body.sl{grid-template-areas:"hd" "sd" "mn"}
  body.sl main{display:none}
  body:not(.sl) aside{display:none}
  aside{grid-area:sd;border-right:none;width:100%!important}
  main{grid-area:mp}
  .srch{display:none!important}
  .mnav{display:flex!important;grid-area:mn;background:var(--sf);border-top:1px solid var(--bd);z-index:9000}
  .mnb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:8px;font-weight:500;color:var(--mu);cursor:pointer;border:none;background:none;padding:3px 0;transition:color .15s}
  .mnb .mi{font-size:17px;line-height:1.3}
  .mnb.on{color:var(--ac)}
  .map-tr{top:8px;right:8px}
  .fbtn{height:28px;font-size:10px;padding:0 8px}
  .hud{bottom:8px}
  .huds{padding:6px 9px}
  .hudn{font-size:15px}
  .map-tl{display:none}
  .vd{width:calc(100vw - 20px);bottom:58px}
  .farr-row{grid-template-columns:repeat(3,1fr)}
}
.mnav{display:none}

/* SPLASH */
#splash{position:fixed;inset:0;z-index:99999;background:var(--sf);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;animation:splout .25s ease .9s forwards}
@keyframes splout{to{opacity:0;pointer-events:none}}
.spl-ic{width:64px;height:64px;border-radius:18px;background:var(--ac);display:flex;align-items:center;justify-content:center;font-size:30px;margin-bottom:4px;box-shadow:0 8px 28px rgba(218,41,28,.3)}
.spl-nm{font-size:24px;font-weight:700;color:var(--st);letter-spacing:-.4px}
.spl-sub{font-size:12px;color:var(--mu)}
.spl-load{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:10px;color:var(--mu)}