:root {
  --sm-c1:#dc3545; --sm-c2:#0d6efd; --sm-c3:#198754; --sm-c4:#ffc107; --sm-c5:#6f42c1;
  --sm-c6:#fd7e14; --sm-c7:#20c997; --sm-c8:#d63384; --sm-c9:#0dcaf0; --sm-c10:#6610f2;
  --sb-bg:#1f2937; --sb-fg:#cbd5e1; --sb-active:#0d6efd; --sb-hover:#334155;
  --sidebar-w: 248px;
  --topbar-h: 56px;
}
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:#f5f7fb; }

.app-shell { display:flex; min-height:100vh; }
.app-sidebar {
  width: var(--sidebar-w); background: var(--sb-bg); color: var(--sb-fg);
  flex-shrink:0; padding: 14px 10px; display:flex; flex-direction:column; gap: 14px;
  position: sticky; top:0; height:100vh; overflow-y:auto;
}
.app-sidebar .brand { display:flex; align-items:center; gap:10px; padding: 4px 8px 12px; border-bottom:1px solid #334155; }
.app-sidebar .brand-logo {
  width:38px; height:38px; border-radius:8px; background: linear-gradient(135deg,var(--sm-c2),var(--sm-c10));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700;
}
.app-sidebar .brand-title { color:#fff; font-weight:600; line-height:1.1; }
.app-sidebar .brand-subtitle { font-size:.72rem; color:#94a3b8; }
.app-sidebar .nav-group .group-label {
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:#64748b;
  padding: 8px 10px 4px;
}
.app-sidebar a {
  display:flex; align-items:center; gap:10px; padding:.5rem .75rem; border-radius:6px;
  color: var(--sb-fg); text-decoration:none; font-size:.9rem; margin: 1px 0;
}
.app-sidebar a i { width:16px; text-align:center; color:#94a3b8; }
.app-sidebar a:hover { background: var(--sb-hover); color:#fff; }
.app-sidebar a.active { background: var(--sb-active); color:#fff; }
.app-sidebar a.active i { color:#fff; }

.app-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.app-topbar {
  height: var(--topbar-h); background:#fff; border-bottom:1px solid #e5e7eb;
  display:flex; align-items:center; gap:12px; padding: 0 18px; position:sticky; top:0; z-index:10;
}
.topbar-title { font-weight:600; font-size:1rem; }
.avatar {
  width:26px; height:26px; border-radius:50%; background:var(--sm-c2); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:600;
}
.app-content { padding: 20px; }

.stat-card { border-left:4px solid var(--sm-c2); }
.stat-card.c1 { border-left-color: var(--sm-c1); }
.stat-card.c3 { border-left-color: var(--sm-c3); }
.stat-card.c4 { border-left-color: var(--sm-c4); }
.stat-card.c5 { border-left-color: var(--sm-c5); }
.stat-card.c6 { border-left-color: var(--sm-c6); }
.stat-card.c7 { border-left-color: var(--sm-c7); }

.badge-soft-primary { background:#cfe2ff; color:#084298; }
.badge-soft-success { background:#d1e7dd; color:#0f5132; }
.badge-soft-warning { background:#fff3cd; color:#664d03; }
.badge-soft-danger  { background:#f8d7da; color:#842029; }
.badge-soft-info    { background:#cff4fc; color:#055160; }

.table thead th { font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:#64748b; }

@media (max-width: 991px) {
  .app-sidebar { position:fixed; left:-100%; z-index:1030; transition: left .2s; }
  body.sidebar-open .app-sidebar { left:0; }
}