:root{
  --bg:#0b0f17; --card:#111827; --muted:#9ca3af; --text:#e5e7eb;
  --line:#1f2937; --accent:#60a5fa; --good:#34d399; --bad:#f87171;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:linear-gradient(180deg,#070a10 0%, #0b0f17 65%, #070a10 100%);
  color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
a{color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:20px}
.top{
  display:flex; gap:14px; align-items:center; justify-content:space-between;
  padding:14px 16px; border:1px solid var(--line); border-radius:16px; background:rgba(17,24,39,.75);
  position:sticky; top:10px; backdrop-filter: blur(10px); z-index:10;
}
.brand{display:flex;flex-direction:column;gap:2px}
.brand b{font-size:16px;letter-spacing:.4px}
.brand small{color:var(--muted)}
.nav{display:flex;flex-wrap:wrap;gap:10px}
.nav a{
  text-decoration:none; padding:8px 10px; border:1px solid var(--line);
  border-radius:12px; color:var(--text); opacity:.92;
}
.nav a.active{border-color:var(--accent); box-shadow:0 0 0 2px rgba(96,165,250,.15) inset}
.grid{display:grid; gap:14px; margin-top:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:920px){.g3{grid-template-columns:1fr}.g2{grid-template-columns:1fr}.top{flex-direction:column;align-items:flex-start}}
.card{
  border:1px solid var(--line); background:rgba(17,24,39,.70);
  border-radius:16px; padding:14px 14px;
}
.card h2{margin:0 0 10px 0;font-size:16px}
.muted{color:var(--muted)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.kpi{display:flex;flex-direction:column;gap:2px}
.kpi b{font-size:18px}
.kpi small{color:var(--muted)}
input,select,button{
  background:#0b1220; color:var(--text); border:1px solid var(--line);
  padding:10px 10px; border-radius:12px; outline:none;
}
button{cursor:pointer}
button:hover{border-color:#334155}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted)
}
.dot{width:8px;height:8px;border-radius:50%}
.dot.ok{background:var(--good)} .dot.no{background:var(--bad)}
.footer{
  margin:18px 0 28px 0; color:var(--muted); font-size:13px;
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
hr.sep{border:none;border-top:1px solid var(--line);margin:12px 0}
.small{font-size:13px}