:root{
  --sb-bg:#0f2f5a; --sb-bg2:#0b234a; --sb-fg:#dbe6f5; --sb-active:#f9b233;
  --brand:#1e4b93;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#f4f6fb;color:#222}
.app-wrapper{display:flex;min-height:100vh}
.sidebar{width:240px;background:linear-gradient(180deg,var(--sb-bg),var(--sb-bg2));color:var(--sb-fg);position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:.6rem;padding:1rem 1.1rem;font-weight:700;font-size:1.05rem;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.brand i{font-size:1.6rem;color:var(--sb-active)}
.brand small{font-weight:400;font-size:.7rem;opacity:.7}
.menu{display:flex;flex-direction:column;padding:.5rem 0}
.menu a{color:var(--sb-fg);text-decoration:none;padding:.55rem 1.1rem;font-size:.9rem;display:flex;align-items:center;gap:.6rem;border-left:3px solid transparent}
.menu a:hover{background:rgba(255,255,255,.06);color:#fff}
.menu a.active{background:rgba(249,178,51,.12);border-left-color:var(--sb-active);color:#fff;font-weight:600}
.menu-group{padding:.75rem 1.1rem .25rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;opacity:.55}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{background:#fff;border-bottom:1px solid #e6e9ef;padding:.6rem 1rem;display:flex;align-items:center;gap:.5rem;position:sticky;top:0;z-index:10}
.content{padding:1.25rem;flex:1}
.page-title{font-size:1.35rem;font-weight:700;margin:0 0 .25rem}
.page-sub{color:#6c757d;margin-bottom:1rem}
.card{border:0;box-shadow:0 1px 3px rgba(16,24,40,.06)}
.stat-card{border-radius:.75rem;overflow:hidden}
.stat-card .icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:1.4rem;color:#fff}
.login-wrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#0f2f5a,#1e4b93)}
.login-card{width:100%;max-width:400px;background:#fff;border-radius:1rem;padding:2rem;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.login-card .brand-l{display:flex;flex-direction:column;align-items:center;margin-bottom:1.25rem}
.login-card .brand-l i{font-size:2.5rem;color:var(--brand)}
@media (max-width:768px){
  .sidebar{position:fixed;left:-260px;transition:left .2s;z-index:1050}
  body.sidebar-open .sidebar{left:0}
}