:root{
  --bg:#0b0e11;--card:#12161a;--text:#e8f1f5;--muted:#9bb0bd;--accent:#12a37a;--warn:#ffb703;--danger:#ef476f
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;background:var(--bg);color:var(--text)}
.app-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #1c2024;background:#0a0d10;position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.3px}
.brand-logo{width:24px;height:24px;border-radius:6px;object-fit:cover;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.btn{appearance:none;border:1px solid #26323a;background:#162026;color:var(--text);padding:8px 12px;border-radius:10px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#04261e;font-weight:600}
.tabs{display:flex;gap:8px;padding:8px 12px;position:sticky;top:48px;background:#0b0e11;z-index:9}
.tab{flex:1;padding:10px;border-radius:10px;border:1px solid #1d242a;background:#11161b;color:var(--muted)}
.tab.active{color:#03291f;border-color:#125e47;background:#0fe099}
.view{display:none;padding:12px}
.view.active{display:block}
.map{height:52vh;border-radius:12px;overflow:hidden;border:1px solid #1d242a}
.controls{display:flex;gap:8px;margin:8px 0}
.card{background:var(--card);border:1px solid #1d242a;border-radius:12px;padding:12px}
.card.small{font-size:.9rem;color:var(--muted)}
.list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.list li{padding:10px;border-radius:10px;background:var(--card);border:1px solid #1d242a}
.banner{padding:12px;border-radius:10px;margin-bottom:8px}
.banner.hidden{display:none}
.banner.emergency{background:#2a0f14;border:1px solid #4a151f;color:#ffc7d4}
.row{display:flex;gap:8px;align-items:end;margin:10px 0}
label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--muted)}
select,input{background:#12181d;border:1px solid #1c242b;color:var(--text);padding:10px;border-radius:10px}
.tag{font-size:.75rem;color:#6ee7c6;border:1px solid #214538;border-radius:999px;padding:6px 10px}
.chat-log{height:40vh;overflow:auto;display:flex;flex-direction:column;gap:8px;margin:0;padding:0}
.chat-log li{list-style:none;background:#131a20;border:1px solid #1e2a31;border-radius:10px;padding:8px}
.chat-input{display:flex;gap:8px;position:sticky;bottom:0;background:linear-gradient(180deg,rgba(11,14,17,0),#0b0e11 50%);padding:8px}
.chat-input input{flex:1}
.ads{display:flex;gap:8px;overflow:auto;padding:8px;min-height:84px}
.ad{min-width:280px;display:flex;gap:10px;align-items:center;background:#15222a;border:1px solid #23323b;border-radius:12px;padding:10px;color:var(--text);text-decoration:none;transition:background .18s ease,border-color .18s ease;position:relative}
.ad:link,.ad:visited,.ad:hover,.ad:active{color:var(--text);text-decoration:none}
.ad *{text-decoration:none}
.ad div, .ad strong, .ad small{color:inherit}
.ad:hover{background:#18303a;border-color:#2c4552}
.ad:focus{outline:2px solid #2ad3a2;outline-offset:2px}
.ad img{width:48px;height:48px}
.ad strong{color:#ffffff}
.ad small{color:#9bb0bd}
.ad .spon{position:absolute;top:6px;left:6px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#e8f1f5;font-size:.65rem;padding:2px 6px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.app-footer{padding:12px;color:var(--muted);text-align:center;border-top:1px solid #1c2024}
@media(min-width:720px){.map{height:60vh}}

/* Bus markers */
.leaflet-marker-icon.bus-marker{background:transparent;border:0}
.bus-wrap{display:flex;align-items:center}
.bus-dot{width:18px;height:18px;border-radius:999px;border:2px solid rgba(0,0,0,.35);box-shadow:0 0 0 3px rgba(18,163,122,.25),0 2px 8px rgba(0,0,0,.5);animation:pulse 1.8s infinite}
.bus-label{margin-left:6px;padding:2px 6px;border-radius:999px;font-size:.75rem;line-height:1;background:#e6fff7;color:#063c2c;border:1px solid #b9f6e3;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.25);text-shadow:0 1px 1px rgba(0,0,0,.25)}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}

/* Stop markers */
.leaflet-marker-icon.stop-marker{background:transparent;border:0}
.stop-wrap{display:flex;align-items:center}
.stop-dot{width:10px;height:10px;border-radius:2px;background:#fff;border:2px solid #1a73e8;box-shadow:0 1px 6px rgba(0,0,0,.35)}
.stop-label{margin-left:6px;padding:2px 6px;border-radius:6px;font-size:.7rem;line-height:1;background:#f5f9ff;color:#0b3c91;border:1px solid #cfe0ff;box-shadow:0 1px 3px rgba(0,0,0,.2)}

/* Learn */
.learn-grid{display:grid;gap:10px}
@media(min-width:900px){.learn-grid{grid-template-columns: 1fr 2fr}}
.lesson{min-height:180px;margin:10px 0;line-height:1.5}
.lesson h1,.lesson h2,.lesson h3{margin:.4em 0}
.quiz{margin-top:10px}
.quiz .q{margin:8px 0;padding:10px;border-radius:10px;background:#131a20;border:1px solid #1e2a31}
.quiz .q h4{margin:0 0 6px 0}
.quiz .q label{display:flex;gap:8px;align-items:center}
.quiz .result{margin-top:10px;font-weight:700}