:root {
  --calped-primary: #6f5df6;
  --calped-primary-2: #38bdf8;
  --calped-bg: #f6f8fc;
  --calped-card: rgba(255,255,255,.92);
  --calped-border: rgba(15,23,42,.10);
  --calped-shadow: 0 20px 60px rgba(15,23,42,.08);
}

[data-bs-theme="dark"] {
  --calped-bg: #0b1220;
  --calped-card: rgba(15,23,42,.92);
  --calped-border: rgba(148,163,184,.18);
  --calped-shadow: 0 20px 60px rgba(0,0,0,.35);
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(111,93,246,.14), transparent 34rem),
    radial-gradient(circle at top right, rgba(56,189,248,.14), transparent 30rem),
    var(--calped-bg);
}

.calped-navbar {
  background: color-mix(in srgb, var(--bs-body-bg) 86%, transparent);
  backdrop-filter: blur(16px);
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--calped-primary), var(--calped-primary-2));
  font-weight: 900;
  box-shadow: 0 12px 30px rgba(111,93,246,.28);
}

.auth-shell {
  min-height: calc(100vh - 180px);
  display: grid;
  place-items: center;
  padding: 2rem 0;
}

.auth-card, .app-card, .metric-card, .hero-panel, .soft-panel {
  background: var(--calped-card);
  border: 1px solid var(--calped-border);
  border-radius: 24px;
  box-shadow: var(--calped-shadow);
}

.auth-card {
  width: min(100%, 520px);
  padding: 2rem;
}

.auth-card.wide {
  width: min(100%, 980px);
}

.app-card, .metric-card, .hero-panel, .soft-panel {
  padding: 1.35rem;
}

.metric-card.compact {
  padding: 1rem;
}

.hero-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background:
    linear-gradient(135deg, rgba(111,93,246,.12), rgba(56,189,248,.08)),
    var(--calped-card);
}

.btn-primary {
  --bs-btn-bg: var(--calped-primary);
  --bs-btn-border-color: var(--calped-primary);
  --bs-btn-hover-bg: #5e4de2;
  --bs-btn-hover-border-color: #5e4de2;
}

.form-control, .form-select, .btn, .alert {
  border-radius: 14px;
}

.table thead th {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bs-secondary-color);
}

code {
  color: var(--calped-primary);
}

@media (max-width: 992px) {
  .hero-panel { align-items: flex-start; flex-direction: column; }
  .auth-card { padding: 1.35rem; }
}