:root{
  --bg:#f4f6fa;--card:#fff;--fg:#0f172a;--muted:#64748b;--border:#e2e8f0;
  --accent:#2563eb;--ok:#16a34a;--bad:#dc2626;--radius:16px;
  --shadow:0 1px 2px rgb(0 0 0/.04),0 6px 24px rgb(15 23 42/.06);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --bg:#0a0f1e;--card:#111a30;--fg:#e5e9f2;--muted:#94a3b8;--border:#22304d;--accent:#60a5fa;
    --shadow:0 1px 2px rgb(0 0 0/.3),0 6px 24px rgb(0 0 0/.35);color-scheme:dark;
  }
}
:root[data-theme=dark]{
  --bg:#0a0f1e;--card:#111a30;--fg:#e5e9f2;--muted:#94a3b8;--border:#22304d;--accent:#60a5fa;
  --shadow:0 1px 2px rgb(0 0 0/.3),0 6px 24px rgb(0 0 0/.35);color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
h1{font-size:1.25rem;margin:0}
h2{font-size:1rem;margin:0 0 .75rem}
h2 small{color:var(--muted);font-weight:400}
a{color:var(--accent)}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem}
pre{background:color-mix(in srgb,var(--fg) 6%,transparent);padding:.75rem;border-radius:10px;overflow-x:auto;margin:.25rem 0 0}

.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;max-width:1200px;margin:0 auto;padding:1rem}
.top nav{display:flex;gap:.5rem;align-items:center}
.wrap{max-width:1200px;margin:0 auto;padding:0 1rem 3rem;display:grid;gap:1rem}
.inline{display:inline}

.btn,button{font:inherit;cursor:pointer;border:1px solid var(--border);background:var(--card);color:var(--fg);
  padding:.45rem .9rem;border-radius:999px;text-decoration:none;transition:.15s}
.btn:hover,button:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.ghost{padding:.45rem .7rem}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem 1.25rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.metric{border-top:4px solid var(--c)}
.label{display:block;color:var(--muted);font-size:.85rem}
.metric strong,.status strong{display:block;font-size:2rem;line-height:1.2;margin-top:.15rem}
.metric small{font-size:1rem;color:var(--muted);font-weight:500}
.status strong{font-size:1.5rem;display:flex;align-items:center;gap:.5rem}
.dot{width:.7rem;height:.7rem;border-radius:50%;background:var(--muted);display:inline-block}
.dot.on{background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 25%,transparent)}
.dot.off{background:var(--bad)}
.muted{color:var(--muted);font-size:.85rem}

.toolbar{display:flex;gap:.4rem;flex-wrap:wrap}
.toolbar button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}

.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,540px),1fr));gap:1rem}
.chart-card header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.stats{color:var(--muted);font-size:.8rem}
.chart{height:280px;position:relative}
.chart[data-empty="1"]::after{content:"Sem dados no período";position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}

.alert{background:color-mix(in srgb,var(--bad) 12%,var(--card));border:1px solid var(--bad);color:var(--fg);padding:.6rem .9rem;border-radius:10px}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:1rem}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1rem;margin:0 0 .75rem}
.kv dt{color:var(--muted)}.kv dd{margin:0;word-break:break-all}
.export{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}
select,input{font:inherit;padding:.5rem .7rem;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--fg)}

.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid var(--border);white-space:nowrap}
th{color:var(--muted);font-weight:500}

body.login{display:grid;place-items:center;min-height:100vh;padding:1rem}
.login-card{width:100%;max-width:380px;display:grid;gap:.9rem}
.login-card label{display:grid;gap:.3rem;font-size:.9rem;color:var(--muted)}
.login-card .btn{width:100%;padding:.65rem}