:root{
  --bg:#0b0f14; --panel:#121821; --panel2:#1a2330;
  --text:#e8eef7; --muted:#8b9bb0; --line:#243040;
  --accent:#39ff88; --accent-dim:#1f8f52;
  --warn:#ff5f56; --gold:#ffcf4a;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--text); overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
#map{position:fixed;inset:0;background:#0b0f14;z-index:0}

/* Leaflet dark tune */
.leaflet-tile{filter:brightness(0.75) invert(0)}
.leaflet-container{background:#0b0f14}
.leaflet-control-attribution{background:rgba(10,14,20,.7)!important;color:#65758a!important}
.leaflet-control-attribution a{color:#8b9bb0!important}

#topbar{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--safe-t) + 10px) 14px 10px;
  background:linear-gradient(180deg,rgba(11,15,20,.92),rgba(11,15,20,0));
  pointer-events:none;
}
.brand{font-weight:700;font-size:15px;letter-spacing:.2px;display:flex;gap:6px;align-items:center}
.brand span{opacity:.95}
.stats{
  pointer-events:auto;font-size:12px;color:var(--muted);
  background:rgba(18,24,33,.8);border:1px solid var(--line);
  padding:5px 9px;border-radius:999px;backdrop-filter:blur(6px);
}

.card{
  position:fixed;left:10px;right:10px;bottom:calc(var(--safe-b) + 10px);z-index:500;
  background:rgba(18,24,33,.92);border:1px solid var(--line);
  border-radius:18px;padding:14px;backdrop-filter:blur(10px);
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.card-grid{display:flex;gap:14px;align-items:center;justify-content:space-between}
.near{min-width:0;flex:1}
.near-label{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted)}
.near-name{font-size:20px;font-weight:700;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.near-hint{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dist{display:flex;flex-direction:column;align-items:center;min-width:74px}
.arrow{font-size:26px;line-height:1;transition:transform .25s ease;color:var(--accent)}
.dist-val{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:3px}

.controls{display:flex;gap:8px;margin-top:12px}
.btn{
  appearance:none;border:1px solid var(--line);background:var(--panel2);
  color:var(--text);font-size:15px;font-weight:600;padding:12px 14px;
  border-radius:12px;cursor:pointer;flex:0 0 auto;transition:.15s;
}
.btn:active{transform:scale(.97)}
.btn.primary{flex:1;background:var(--accent);color:#052312;border-color:transparent}
.btn.primary.on{background:var(--warn);color:#2a0605}
.btn.wide{width:100%;margin-top:6px}
.btn.danger{background:#2a1416;border-color:#5a2b2f;color:#ff9a94}
.btn.filelabel{display:inline-flex;align-items:center}

.sheet{position:fixed;inset:0;z-index:700;background:rgba(0,0,0,.5);
  display:flex;align-items:flex-end;backdrop-filter:blur(2px)}
.sheet.hidden{display:none}
.sheet-inner{
  width:100%;background:var(--panel);border-top-left-radius:20px;border-top-right-radius:20px;
  padding:18px 16px calc(var(--safe-b) + 18px);border-top:1px solid var(--line);
  max-height:85vh;overflow:auto;
}
.sheet h2{margin:2px 0 14px;font-size:18px}
.row{display:flex;flex-direction:column;gap:8px;margin:14px 0;font-size:14px}
.row.toggle{flex-direction:row;align-items:center;justify-content:space-between}
.row.buttons{flex-direction:row;gap:10px}
.row.buttons .btn{flex:1;text-align:center}
input[type=range]{width:100%;accent-color:var(--accent)}
input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent)}
.muted{color:var(--muted);font-size:12px}

.toast{
  position:fixed;left:50%;top:calc(var(--safe-t) + 56px);transform:translateX(-50%);
  z-index:900;background:var(--gold);color:#241a00;font-weight:700;
  padding:12px 18px;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.5);
  max-width:90vw;text-align:center;animation:pop .3s ease;
}
.toast.hidden{display:none}
@keyframes pop{from{transform:translateX(-50%) scale(.8);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}

.me-dot{
  width:18px;height:18px;border-radius:50%;background:#3aa0ff;
  border:3px solid #fff;box-shadow:0 0 0 6px rgba(58,160,255,.25),0 0 14px rgba(58,160,255,.7);
}
.hidden{display:none}

/* Leaflet popup dark theme */
.leaflet-popup-content-wrapper{background:var(--panel2);color:var(--text);border-radius:12px;border:1px solid var(--line)}
.leaflet-popup-tip{background:var(--panel2)}
.leaflet-popup-content{margin:12px 14px;font-size:13px;line-height:1.4}
.pp b{font-size:15px}
.pp-hint{color:var(--muted);margin:6px 0;font-style:italic}
.pp-btn{margin-top:8px;width:100%;background:var(--accent);color:#052312;border:none;
  padding:9px;border-radius:9px;font-weight:700;cursor:pointer}