:root{
  --vfr:#28a745; --mvfr:#0080f0; --ifr:#dc3545; --lifr:#9722ce;
  --bg:#0a0b0d; --surface:#13151a; --border:#20232a; --text:#f4f6fb; --muted:#9aa4b2; --accent:#3b82f6;
  --good:#28a745; --warn:#f59e0b; --bad:#ef4444;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.4 system-ui,Segoe UI,Roboto,Arial,sans-serif}

.topbar{position:fixed;inset:0 0 auto 0;display:flex;gap:.75rem;align-items:center;padding:.5rem .75rem;background:rgba(10,11,13,.9);backdrop-filter: blur(10px);z-index:1000;border-bottom:1px solid var(--border)}
.brand{font-weight:700;letter-spacing:.2px}
.search{margin-left:auto;display:flex;gap:.5rem}
.search input{width:44vw;max-width:360px;padding:.5rem .6rem;background:#0f1115;border:1px solid var(--border);border-radius:.5rem;color:var(--text)}
.search button{padding:.5rem .7rem;border:1px solid var(--border);background:#12151b;color:var(--text);border-radius:.5rem}
.search button:hover{border-color:#3a3f4a}

#map{position:absolute;inset:48px 0 56px 0}

.favbar{position:fixed;inset:auto 0 0 0;height:56px;display:flex;gap:.5rem;align-items:center;padding:.5rem .75rem;background:rgba(10,11,13,.9);border-top:1px solid var(--border);overflow:auto}
.fav{flex:0 0 auto;padding:.35rem .55rem;background:#12151b;border:1px solid var(--border);border-radius:.5rem;cursor:pointer}
.fav.active{outline:2px solid var(--accent)}

.leaflet-container{background:#0b0d12}

/* marker pills */
.mm-pill{display:inline-flex;align-items:center;justify-content:center;padding:.1rem .4rem;border-radius:.6rem;border:1px solid #0005;color:#fff;font-weight:700;font-size:12px;box-shadow:0 2px 8px #0008}
.mm-vfr{background:var(--vfr)}
.mm-mvfr{background:var(--mvfr)}
.mm-ifr{background:var(--ifr)}
.mm-lifr{background:var(--lifr)}
.mm-unk{background:#3a3f4a}

/* modal */
.modal{position:fixed;inset:0;background:#0008;display:grid;place-items:center;z-index:1100}
.modal.hidden{display:none}
.modal__card{width:min(820px,96vw);max-height:90vh;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:1rem;box-shadow:0 10px 40px #000c}
.modal__hdr{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--border);gap:.75rem}
.modal__title{font-size:1.1rem;font-weight:700}
.badge{display:inline-block;padding:.2rem .5rem;border-radius:.4rem;border:1px solid #0004;margin-top:.3rem}
.modal__close{position:absolute;right:1rem;top:1rem;border:1px solid var(--border);background:#141821;color:var(--text);border-radius:.5rem;font-size:20px;line-height:20px;padding:.3rem .5rem}
.btn{padding:.5rem .7rem;border:1px solid var(--border);background:#141821;color:var(--text);border-radius:.5rem}
.btn:hover{border-color:#3a3f4a}

.modal__grid{display:grid;grid-template-columns:1fr;gap:.75rem;padding:1rem}
@media(min-width:720px){.modal__grid{grid-template-columns:1fr 1fr}}

.card{border:1px solid var(--border);border-radius:.75rem;background:#0f1117;overflow:hidden}
.card__hdr{padding:.6rem .8rem;border-bottom:1px solid var(--border);font-weight:700;background:#10131a}
.card__body{padding:.8rem .9rem;display:grid;gap:.5rem}
.muted{color:var(--muted);font-size:.92em}

.rawchip{display:inline-block;padding:.25rem .5rem;border-radius:.5rem;border:1px dashed #3a3f4a;color:#cbd5e1;cursor:pointer;user-select:all;max-width:100%;overflow:auto;white-space:nowrap}
.timeline{display:flex;gap:.5rem;flex-wrap:wrap}
.tseg{border:1px solid var(--border);border-radius:.5rem;padding:.4rem .5rem;background:#0c0f14}
.tseg b{font-weight:700}

.peek{position:fixed;left:50%;bottom:70px;transform:translateX(-50%);max-width:92vw;background:#0f1117;border:1px solid var(--border);border-radius:.7rem;padding:.6rem .7rem;box-shadow:0 10px 30px #000c;z-index:1200}
.peek.hidden{display:none}