:root{
  --gsize: clamp(180px, 60vw, 280px);

  --bg:#0b1220;
  --card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.18);
  --text:#e6f1ff;
  --accent:#22c55e;
  --accent2:#ef4444;
  --muted:#9fb0c7;
}

*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 600px at 20% -10%,#13203a,transparent),radial-gradient(1000px 800px at 120% 10%,#151533,transparent),var(--bg);color:var(--text);font-family:'Inter',system-ui,Arial,sans-serif;}

.site-header{padding:24px 16px;text-align:center}
.nav{display:flex;gap:12px;justify-content:center;margin-bottom:8px}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--text)}
h1{margin:6px 0 2px;font-size:clamp(28px,3vw,42px)}
.tagline{margin:0;color:var(--muted)}

.container{max-width:980px;margin:20px auto;padding:16px}
.card{background:var(--card);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.25)}

.meter-card{display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:center}
@media (max-width:900px){.meter-card{grid-template-columns:1fr}}

.gauge{--val:0;inline-size:var(--gsize);block-size:var(--gsize);border-radius:50%;
  background:
   conic-gradient(#22c55e 0turn calc(var(--val)*1turn),
                  #a3e635 0turn calc((var(--val)+.15)*1turn),
                  #f59e0b 0turn calc((var(--val)+.3)*1turn),
                  #ef4444 0turn 1turn),
   radial-gradient(closest-side, #0f172a 62%, transparent 63%);
  display:grid;place-items:center;margin:auto;border:1px solid var(--border)}

.gauge-inner{text-align:center}
.current-db{font-size:48px;font-weight:700}
.subline{color:var(--muted)}

.controls{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:12px}
.controls button{padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:#172033;color:var(--text);cursor:pointer}
.controls button:disabled{opacity:.5;cursor:not-allowed}
.control{display:flex;flex-direction:column;gap:6px;color:var(--muted)}
select,input[type=range]{width:100%}

.exposure{display:flex;gap:16px;flex-wrap:wrap;color:#d1fae5;margin-top:8px}

#chart{width:100%;height:160px;border-radius:12px;background:#0c1426;border:1px solid var(--border)}

.table{width:100%;border-collapse:collapse;margin-top:10px}
.table th,.table td{padding:8px;border-bottom:1px solid rgba(255,255,255,0.2)}
.table th{background:rgba(255,255,255,0.1)}

.site-footer{text-align:center;color:var(--muted);padding:30px 10px}
.disclaimer{color:#cbd5e1;font-size:14px}
.export{display:flex;align-items:center;gap:10px;margin-top:10px}
.hint{color:#9fb0c7;font-size:12px}

@media (max-width: 520px){
  .container{padding:12px}
  .current-db{font-size:40px}
  .subline{font-size:14px}
  .controls{grid-template-columns:1fr}
  .controls button{width:100%;padding:14px 16px}
  select{min-height:44px}
  input[type=range]{height:34px}
}