:root{
  --navy:#0f172a; --navy2:#1e3a5f; --accent:#38bdf8; --bg:#f4f6fa;
}
body{background:var(--bg);font-family:'Segoe UI',system-ui,sans-serif;color:#1e293b}
.sidebar{background:var(--navy);min-height:100vh;width:240px;position:fixed;top:0;left:0;padding:22px 0;color:#cbd5e1}
.sidebar .brand{color:#fff;font-weight:700;font-size:1.15rem;padding:0 22px 20px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:12px}
.sidebar a{display:block;color:#cbd5e1;text-decoration:none;padding:11px 22px;font-size:.93rem}
.sidebar a:hover,.sidebar a.active{background:rgba(56,189,248,.12);color:#38bdf8;border-right:3px solid var(--accent)}
.main{margin-left:240px;padding:26px 32px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.card-stat{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.card-stat .num{font-size:1.8rem;font-weight:700;color:var(--navy2)}
.panel-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.btn-navy{background:var(--navy2);color:#fff}
.btn-navy:hover{background:var(--navy);color:#fff}
table.table thead{background:#eef2f8}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f172a,#1e3a5f)}
.login-card{background:#fff;border-radius:14px;padding:36px;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
@media(max-width:768px){
  .sidebar{width:100%;position:static;min-height:auto}
  .main{margin-left:0}
}