:root { --sidebar-width: 270px; }
body { background: #f5f7fb; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: var(--sidebar-width); background: #0f172a; color: #e2e8f0; position: fixed; left: 0; top: 0; bottom: 0; overflow-y: auto; }
.sidebar .brand { padding: 22px 24px; font-weight: 800; color: #fff; letter-spacing: .3px; }
.sidebar a { color: #cbd5e1; text-decoration: none; display: block; padding: 10px 22px; border-left: 3px solid transparent; }
.sidebar a:hover { color: #fff; background: #1e293b; border-left-color: #38bdf8; }
.sidebar .section { font-size: 11px; text-transform: uppercase; color: #94a3b8; padding: 18px 22px 6px; letter-spacing: .08em; }
.main { margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); }
.topbar { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 14px 24px; display:flex; justify-content:space-between; align-items:center; position: sticky; top:0; z-index:10; }
.content { padding: 24px; }
.card-kpi { border: 0; box-shadow: 0 10px 30px rgba(15,23,42,.06); border-radius: 16px; }
.card-kpi .label { color:#64748b; font-size:13px; }
.card-kpi .value { font-size:28px; font-weight:800; color:#0f172a; }
.table-card { background:#fff; border-radius:16px; box-shadow: 0 10px 30px rgba(15,23,42,.06); overflow:hidden; }
.table thead th { background:#f8fafc; color:#475569; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.form-card { background:#fff; border-radius:16px; box-shadow: 0 10px 30px rgba(15,23,42,.06); padding: 24px; }
.btn-primary { background:#2563eb; border-color:#2563eb; }
.login-bg { min-height:100vh; background: linear-gradient(135deg, #0f172a, #1d4ed8); display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card { width:420px; background:#fff; border-radius:22px; padding:32px; box-shadow:0 24px 60px rgba(0,0,0,.25); }
.progress { height: 9px; }
@media (max-width: 900px) { .sidebar { position:relative; width:100%; } .main { margin-left:0; width:100%; } .app-shell { display:block; } }