:root{
  --sidebar-w: 270px;
  --brand: #4f46e5;
  --bg: #0b1020;
}
body { background: #f5f7fb; }
.app-shell { min-height: 100vh; display:flex; }
.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--bg), #111827);
  color: #e5e7eb;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px 14px;
}
.sidebar .brand {
  display:flex; align-items:center; gap:10px;
  font-weight: 700; font-size: 16px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(79,70,229,.15);
  border: 1px solid rgba(79,70,229,.25);
  margin-bottom: 14px;
}
.sidebar a.nav-link {
  color:#d1d5db;
  border-radius: 12px;
  padding: 10px 12px;
  display:flex; align-items:center; gap:10px;
  margin-bottom: 6px;
  text-decoration:none;
}
.sidebar a.nav-link:hover, .sidebar a.nav-link.active{
  background: rgba(255,255,255,.08);
  color:#fff;
}
.content { flex:1; padding: 18px; }
.topbar {
  background:#fff; border:1px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px 16px;
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
}
.card-soft {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}
.table> :not(caption)>*>*{ vertical-align: middle; }
.avatar {
  width: 36px; height: 36px; border-radius: 12px;
  object-fit: cover; border: 1px solid #e5e7eb;
  background:#f3f4f6;
}
.muted { color:#6b7280; }
.kpi {
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px;
}
.kpi .num { font-size: 22px; font-weight: 800; }
.kpi .lbl { color:#6b7280; font-weight: 600; }