/* ========== TEMA SCURO (default) ========== */
:root {
    --bg:#0b1220;--bg2:#101828;--panel:#1e293b;--panel2:#263349;
    --bd:#334155;--t1:#f1f5f9;--t2:#cbd5e1;--t3:#94a3b8;
    --pri:#3b82f6;--pri2:#2563eb;--ok:#22c55e;--warn:#f59e0b;--err:#ef4444;
    --shadow: 0 25px 60px rgba(0,0,0,.6);
}
/* ========== TEMA CHIARO ========== */
body.theme-light {
    --bg:#f8fafc;--bg2:#eef2f7;--panel:#ffffff;--panel2:#f1f5f9;
    --bd:#e2e8f0;--t1:#0f172a;--t2:#334155;--t3:#64748b;
    --pri:#2563eb;--pri2:#1d4ed8;--ok:#16a34a;--warn:#d97706;--err:#dc2626;
    --shadow: 0 10px 30px rgba(15,23,42,.08);
}
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: var(--bg); color: var(--t1); font-size: 14px;
    transition: background .25s, color .25s; }
a { color: var(--pri); text-decoration: none; }
a:hover { color: var(--pri2); }
.muted { color: var(--t3); }
.small { font-size: 12px; }

/* LOGIN */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh;
    background: linear-gradient(135deg, var(--bg) 0%, var(--bg2) 100%); position:relative; }
.login-box { background: var(--panel); padding: 36px 32px; border-radius: 16px;
    width: 360px; box-shadow: var(--shadow); border:1px solid var(--bd); }
.login-box h1 { margin:0 0 4px; font-size:28px; }
.login-box label { display:block; font-size:12px; color:var(--t3); margin-top:14px; }
.login-box input { width:100%; padding:10px 12px; background:var(--bg2); border:1px solid var(--bd);
    border-radius:8px; color:var(--t1); font-size:14px; margin-top:4px; }
.login-box input:focus { outline:none; border-color:var(--pri); }
.login-box button { width:100%; padding:12px; background:var(--pri); border:none; color:#fff;
    border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; margin-top:20px; }
.login-box button:hover { background: var(--pri2); }
.login-box .err { background: color-mix(in srgb, var(--err) 12%, transparent); color:var(--err);
    border:1px solid var(--err); padding:10px; border-radius:8px; font-size:13px; margin-bottom:10px; }

/* LAYOUT */
.sidebar { position:fixed; left:0; top:0; bottom:0; width:230px; background: var(--bg2);
    border-right:1px solid var(--bd); display:flex; flex-direction:column;
    transition: background .25s, border-color .25s; }
.sidebar .brand { font-size:20px; font-weight:700; padding:22px 20px; border-bottom:1px solid var(--bd); }
.sidebar nav { flex:1; display:flex; flex-direction:column; padding:12px 8px; gap:2px; }
.sidebar nav a { color:var(--t2); padding:10px 14px; border-radius:8px; font-size:14px; transition: background .15s, color .15s; }
.sidebar nav a:hover { background: var(--panel); color:var(--t1); }
.sidebar nav a.active { background: var(--pri); color:#fff; }
.sidebar-foot { padding:16px 20px; border-top:1px solid var(--bd); display:flex; flex-direction:column; gap:10px; }
.sidebar-foot .row { display:flex; justify-content:space-between; align-items:center; }
main { margin-left:230px; padding:28px 32px; min-height:100vh; }
main h2 { margin:0 0 20px; font-size:22px; }
.loading { padding:40px; text-align:center; color:var(--t3); }

/* THEME TOGGLE */
.theme-toggle { display:flex; align-items:center; justify-content:space-between;
    padding:8px 10px; background: var(--panel); border:1px solid var(--bd); border-radius:8px;
    cursor:pointer; font-size:13px; color:var(--t2); user-select:none; transition: all .2s; }
.theme-toggle:hover { background: var(--panel2); }
.theme-toggle .track { position:relative; width:38px; height:20px; background: var(--bg); border:1px solid var(--bd); border-radius:20px; }
.theme-toggle .knob { position:absolute; top:1px; left:1px; width:16px; height:16px; border-radius:50%;
    background: var(--pri); transition: transform .25s; }
body.theme-light .theme-toggle .knob { transform: translateX(18px); }
.theme-toggle-login { position:absolute; top:16px; right:20px; }

/* CARDS */
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:14px; margin-bottom:22px; }
.card { background: var(--panel); border:1px solid var(--bd); border-radius:12px; padding:18px;
    box-shadow: var(--shadow); transition: background .25s, border-color .25s; }
.card .k { color:var(--t3); font-size:12px; text-transform:uppercase; letter-spacing:.5px; }
.card .v { font-size:28px; font-weight:700; margin-top:6px; }
.card .sub { color:var(--t3); font-size:12px; margin-top:4px; }

/* BADGES */
.badge { display:inline-block; padding:3px 8px; border-radius:6px; font-size:11px; font-weight:600; }
.badge.ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color:var(--ok); }
.badge.warn { background: color-mix(in srgb, var(--warn) 15%, transparent); color:var(--warn); }
.badge.err { background: color-mix(in srgb, var(--err) 15%, transparent); color:var(--err); }
.badge.pri { background: color-mix(in srgb, var(--pri) 15%, transparent); color:var(--pri); }

/* PROGRESS */
.bar { background:var(--bg2); border-radius:4px; height:6px; margin-top:8px; overflow:hidden; }
.bar > div { background:var(--pri); height:100%; transition: width .4s; }
.bar.warn > div { background: var(--warn); }
.bar.err > div { background: var(--err); }

/* TABLE */
.tw { overflow-x:auto; background:var(--panel); border:1px solid var(--bd); border-radius:12px; box-shadow: var(--shadow); }
table { width:100%; border-collapse: collapse; }
th, td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--bd); font-size:13px; }
th { background: var(--panel2); color:var(--t2); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.3px; }
tr:last-child td { border-bottom:none; }
td code { background:var(--bg2); padding:2px 6px; border-radius:4px; font-size:12px; color:var(--t2); }

.empty { text-align:center; padding:40px; color:var(--t3); }