:root{
  --bg:#06070D; --text:#EDEFF7; --dim:#9AA1B8; --border:#243049;
  --grad:linear-gradient(120deg,#A855F7,#3B82F6,#06D6E0);
  --bar:52px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg);color:var(--text);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  overflow:hidden;
}
.topbar{
  position:fixed;top:0;left:0;right:0;height:var(--bar);z-index:10;
  display:flex;align-items:center;gap:16px;padding:0 18px;
  background:rgba(8,10,18,.86);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text)}
.brand svg{width:22px;height:22px;color:#A855F7}
.wordmark{
  font-size:18px;font-weight:800;letter-spacing:.3px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.coverage{
  font-size:11.5px;font-weight:600;color:#C4B5FD;
  background:rgba(124,58,237,.14);border:1px solid rgba(124,58,237,.30);
  border-radius:999px;padding:2px 10px;
}
.links{margin-left:auto;display:flex;gap:18px}
.links a{color:var(--dim);font-size:14px;font-weight:600;text-decoration:none}
.links a:hover{color:var(--text)}
#map{position:fixed;top:var(--bar);left:0;right:0;bottom:0}
/* MapLibre control + attribution dark tweaks */
.maplibregl-ctrl-attrib{background:rgba(8,10,18,.7)!important}
.maplibregl-ctrl-attrib a{color:#9AA1B8!important}
.maplibregl-ctrl-group{background:#0c1322!important;border:1px solid var(--border)!important}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--border)!important}
.maplibregl-ctrl button .maplibregl-ctrl-icon{filter:invert(1) hue-rotate(180deg) brightness(.9)}
/* Only lay this out when actually shown — the `hidden` attribute (set unless
   WebGL is missing) must win, or the message overlays a perfectly good map. */
#nowebgl:not([hidden]){
  position:fixed;top:var(--bar);left:0;right:0;bottom:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px;color:var(--dim);
}
#nowebgl b{color:var(--text)}
#nowebgl .sub{font-size:13px;margin-top:4px}