:root{
  --bg:#0b1220; --card:#121b2e; --ink:#e8eefc; --muted:#9bb0d0; --brand:#5b9cff;
  --ok:#22c55e; --err:#ef4444; --line:#1e2a44; --chip:#243454;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cairo,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--brand);text-decoration:none}
.container{max-width:1100px;margin:20px auto;padding:0 16px}
.topnav{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(11,18,32,.8);backdrop-filter:saturate(180%) blur(12px)}
.topnav .brand{font-weight:800;letter-spacing:.5px}
.topnav .brand span{color:var(--brand)}
.topnav nav a{margin:0 8px;color:var(--ink);opacity:.9}
.topnav .userbox{display:flex;gap:10px;align-items:center}
.btn{display:inline-block;padding:8px 12px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:#16223a}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#04122b}
.btn.small{padding:6px 10px;font-size:.9rem}
.bg{min-height:100vh}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:16px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.grid2{display:grid;grid-template-columns:1fr 6fr;gap:16px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.kpi{display:flex;align-items:center;justify-content:space-between}
.kpi-num{font-size:2rem;font-weight:800}
.kpi-label{color:var(--muted)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--line);padding:10px;font-size:.95rem}
.table th{color:var(--muted);text-align:left}
.table-scroll{overflow:auto;max-height:60vh}
.units{white-space:pre-wrap;background:#0f1a30;border:1px solid var(--line);border-radius:10px;padding:8px}
.flash{padding:10px 12px;border-radius:10px;margin-bottom:12px}
.flash.ok{background:#112919;border:1px solid #1f8a4d}
.flash.err{background:#2a1010;border:1px solid #a33131}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.filters label{display:flex;flex-direction:column;font-size:.9rem;color:var(--muted)}
.filters input,.filters select,.filters textarea{background:#0f1a30;border:1px solid var(--line);border-radius:10px;padding:8px;color:var(--ink);min-width:160px}
h1,h2{margin:.2rem 0 1rem}
pre{margin:0}
.badge{background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:4px 8px;font-size:.85rem;color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpis > div{background:#0f1a30;border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center}
.form-inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* --- New Enhancements --- */
*{box-sizing:border-box}
:root{
  --bg:#0b1220; --card:#121a2b; --ink:#e6eefc; --muted:#9db0d1; --line:#22304a;
  --primary:#2f7cff; --chip:#17243a; --ok:#15b17a; --err:#ff5a6b;
}
html,body{background:var(--bg); color:var(--ink); font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif; margin:0}
.container{max-width:1100px;margin:0 auto;padding:16px}
.topbar{border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(11,18,32,.9); backdrop-filter: blur(8px); z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700}
.chip{font-size:.8rem;background:var(--chip); padding:2px 8px; border-radius:999px; margin-inline-start:6px}
.menu a{color:var(--ink);text-decoration:none;margin-inline:8px;opacity:.85}
.menu a:hover{opacity:1}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px}
h1,h2{margin:8px 0 12px}
.muted{color:var(--muted)}

.form label{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.form input,.form select,.form textarea{
  background:#0f1a30;border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--ink);
  outline:none; width:100%;
}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(47,124,255,.15)}
.btn{border:1px solid var(--line);background:#17243a;color:var(--ink);border-radius:10px;padding:10px 14px;cursor:pointer}
.btn.primary{background:var(--primary); border-color:#215dcc; color:white}
.btn:disabled{opacity:.6;cursor:not-allowed}
.w-100{width:100%}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpis .h2{font-size:1.6rem; font-weight:700}
@media (max-width:900px){ .kpis{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .kpis{grid-template-columns:1fr} }

.table{width:100%; border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--line); padding:10px; text-align:right}
.table th{color:var(--muted); font-weight:600; background:#0f1a30}

.auth-wrap{min-height:calc(100dvh - 60px); display:grid; place-items:center; padding:24px}
.auth-card{width:min(440px, 92vw); background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.25)}
.auth-card h1{margin:0 0 6px}


/* KPI Grid */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:#0b1220;border-radius:12px;padding:14px;border:1px solid #1f2b44}
.kpi .num{font-size:24px;font-weight:700;margin:4px 0}
.kpi .sub{font-size:12px}
.alert{padding:10px;border-radius:8px;margin:8px 0}
.alert.error{background:#2b0e0e;border:1px solid #6b1b1b}
.alert.success{background:#0d2b17;border:1px solid #1c6b3a}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}