:root { --bg:#04060b; --accent:#38bdf8; --text:#e5e7eb; --muted:#9ca3af; --card:rgba(11,18,32,.82); --glow:0 0 38px rgba(56,189,248,.45); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:Inter,Arial,sans-serif; color:var(--text); background:radial-gradient(circle at 80% 5%,#112743 0,transparent 34%),var(--bg); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.13; background-image:linear-gradient(rgba(56,189,248,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.17) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,black,transparent); }
header { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px clamp(18px,5vw,70px); background:rgba(4,6,11,.9); backdrop-filter:blur(14px); border-bottom:1px solid rgba(56,189,248,.22); }
.brand { color:var(--accent); text-decoration:none; font-weight:800; letter-spacing:2px; font-size:14px; text-shadow:var(--glow); }
.back { color:var(--text); text-decoration:none; font-size:12px; font-weight:700; border:1px solid rgba(56,189,248,.45); padding:9px 13px; border-radius:999px; }
.back:hover { color:var(--accent); box-shadow:var(--glow); }
main { width:min(1080px,calc(100% - 32px)); margin:0 auto; padding:68px 0 80px; }
.eyebrow { color:var(--accent); font:12px monospace; letter-spacing:3px; }
h1 { margin:12px 0; font-size:clamp(32px,7vw,64px); line-height:1; }
.intro { max-width:670px; color:var(--muted); line-height:1.7; margin-bottom:38px; }
.panel { background:var(--card); border:1px solid rgba(56,189,248,.3); border-radius:18px; box-shadow:var(--glow); padding:clamp(18px,4vw,32px); }
.input-row { display:flex; gap:10px; flex-wrap:wrap; }
input { flex:1; min-width:210px; background:#050b14; color:var(--text); border:1px solid rgba(56,189,248,.42); border-radius:10px; padding:14px; font:15px monospace; outline:none; }
input:focus { border-color:var(--accent); box-shadow:var(--glow); }
button { cursor:pointer; color:#021018; background:var(--accent); border:0; border-radius:10px; padding:13px 17px; font-weight:800; letter-spacing:.5px; }
button:hover { filter:brightness(1.12); box-shadow:var(--glow); }
.notice { color:var(--muted); font-size:12px; line-height:1.6; margin:15px 0 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-top:24px; }
.stat { background:rgba(3,10,19,.7); border:1px solid rgba(255,255,255,.08); padding:17px; border-radius:12px; min-height:92px; }
.label { color:var(--muted); font:11px monospace; letter-spacing:1.3px; text-transform:uppercase; }
.value { margin-top:9px; color:var(--accent); font-size:17px; overflow-wrap:anywhere; }
.loading { color:var(--accent); font-family:monospace; padding:22px 0 0; }
.meters { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px; }
.meter { text-align:center; padding:22px 10px; border:1px solid rgba(56,189,248,.22); border-radius:15px; background:rgba(3,10,19,.55); }
.metric { color:var(--accent); font-size:clamp(25px,5vw,42px); font-weight:800; margin:9px 0; }
.unit { color:var(--muted); font-size:12px; }
.progress { margin-top:26px; height:8px; border-radius:999px; overflow:hidden; background:#071524; }
.progress > i { display:block; height:100%; width:0; background:var(--accent); box-shadow:var(--glow); transition:width .25s; }
.map { height:min(65vh,640px); min-height:420px; border-radius:18px; overflow:hidden; border:1px solid rgba(56,189,248,.45); box-shadow:var(--glow); }
.map .leaflet-control-attribution { font-size:10px; }
@media (max-width:620px) { main { padding-top:45px; } .meters { grid-template-columns:1fr; } header { padding:15px 16px; } }