:root {
  --cerberus-ink: #111827;
  --cerberus-muted: #667085;
  --cerberus-blue: #4967e9;
  --cerberus-violet: #7c5ce5;
  --cerberus-surface: #f5f7fb;
}

body {
  color: var(--cerberus-ink);
  background: var(--cerberus-surface);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.auth-shell {
  background:
    radial-gradient(circle at 15% 15%, rgba(92, 110, 230, .28), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(124, 92, 229, .22), transparent 32%),
    #101522;
}

.auth-card { width: min(440px, calc(100vw - 2rem)); border: 1px solid rgba(255,255,255,.16); }
.brand-mark {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  color: white; background: #eef1ff; overflow: hidden;
  box-shadow: 0 10px 24px rgba(73, 103, 233, .28);
}
.brand-mark img { display: block; width: 40px; height: 40px; object-fit: contain; }
.sidebar { width: 270px; background: #111827; color: #dbe2f1; }
.sidebar .nav-link { color: #aeb8cc; border-radius: .8rem; padding: .75rem 1rem; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { color: white; background: rgba(255,255,255,.1); }
.main-content { min-width: 0; }
.surface-card { border: 1px solid #e6eaf1; border-radius: 1rem; box-shadow: 0 8px 24px rgba(16,24,40,.035); }
.metric-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: #eef1ff; color: var(--cerberus-blue); }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #e9edff; color: #3954c9; font-weight: 700; }
.table > :not(caption) > * > * { padding: .9rem .75rem; }
.badge-soft-success { color: #087443; background: #e6f8ef; }
.badge-soft-secondary { color: #475467; background: #f0f2f5; }
.btn-primary { --bs-btn-bg: var(--cerberus-blue); --bs-btn-border-color: var(--cerberus-blue); }
.empty-state { padding: 4rem 1rem; color: var(--cerberus-muted); text-align: center; }
.activity-agent { max-width: 32rem; }

@media (max-width: 991.98px) {
  .sidebar { width: 80px; }
  .sidebar .nav-label, .sidebar .brand-text, .sidebar .account-copy { display: none; }
  .sidebar .nav-link { text-align: center; }
}