:root{
  --bg:#0b1020; --card:#121a33; --border:rgb(255 255 255 / 10%);
  --text:#e9ecff; --muted:rgb(233 236 255 / 70%);
  --good:#37d67a; --bad:#ff4d4f; --warn:#ffcc00;
  --shadow: 0 12px 30px rgb(0 0 0 / 35%);
}
html{color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto;background:var(--bg);color:var(--text)}
a{color:inherit}
.topbar{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:18px}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:42px;height:42px;border-radius:12px;background:rgb(255 255 255 / 10%);background-size:cover;background-position:center}
.title{font-weight:900}
.muted{color:var(--muted);font-size:14px}
.link{opacity:.9}
.top-metrics{display:flex;gap:14px;flex-wrap:wrap}
.metric{min-width:110px;padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:rgb(255 255 255 / 4%)}
.metric .label{font-size:12px;color:var(--muted)}
.metric .value{font-weight:900;font-size:18px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;padding:14px;max-width:1200px;margin:0 auto}
.card{grid-column:span 6;background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:14px}
.card.wide{grid-column:span 12}
.card-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.h{font-weight:900}
.pill{padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:rgb(255 255 255 / 6%);font-weight:900;font-size:12px}
.np-title{font-size:22px;font-weight:1000;line-height:1.15}
.progress{margin-top:10px;height:10px;border-radius:999px;background:rgb(255 255 255 / 6%);overflow:hidden;border:1px solid var(--border)}
.bar{height:100%;width:0%}
.kpi-row{display:flex;gap:12px;flex-wrap:wrap}
.kpi{flex:1;min-width:150px;padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:rgb(255 255 255 / 4%)}
.kpi .label{font-size:12px;color:var(--muted)}
.kpi .value{font-weight:1000;font-size:20px}
.actions{display:flex;gap:8px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;border:1px solid var(--border);background:rgb(255 255 255 / 6%);text-decoration:none;font-weight:900;font-size:13px}
.btn:hover{filter:brightness(1.1)}
.auth{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:18px}
.auth-card{width:min(420px,100%);background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:16px}
.auth-card h1{margin:0 0 12px;font-size:22px}
.auth-card label{display:block;margin:10px 0 6px;color:var(--muted);font-size:13px}
.auth-card input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:rgb(255 255 255 / 4%);color:var(--text)}
.auth-card button{margin-top:12px;width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:rgb(255 255 255 / 8%);color:var(--text);font-weight:1000}
.error{margin:10px 0;padding:10px 12px;border-radius:12px;border:1px solid rgb(255 79 79 / 45%);background:rgb(255 79 79 / 10%);color:#ffd9d9}
@media (max-width:900px){.card{grid-column:span 12}}
.chartbox{position:relative;height:220px;width:100%}
.progress{height:8px;border-radius:999px;overflow:hidden;background:var(--surface-10, rgba(255,255,255,.10))}
.bar{height:100%;width:0%;border-radius:999px;background:var(--good);transition:width .6s linear;will-change:width}