:root {
  --radius: 18px;
  --shadow: 0 12px 30px rgba(0,0,0,.14);
}

/* Backgrounds */
html[data-bs-theme="dark"] body {
  background: radial-gradient(1200px 600px at 10% -10%, rgba(96,165,250,.22), transparent 60%),
              radial-gradient(900px 500px at 90% 0%, rgba(52,211,153,.18), transparent 55%),
              #0b1220;
}

html[data-bs-theme="light"] body {
  background: radial-gradient(1200px 600px at 10% -10%, rgba(59,130,246,.18), transparent 60%),
              radial-gradient(900px 500px at 90% 0%, rgba(16,185,129,.14), transparent 55%),
              #f6f7fb;
}

.navbar {
  backdrop-filter: blur(10px);
}

.card {
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.table {
  margin-bottom: 0;
}

.badge-soft {
  border-radius: 999px;
  padding: .35rem .6rem;
  background: rgba(59,130,246,.14);
  color: rgba(59,130,246,1);
}
html[data-bs-theme="dark"] .badge-soft {
  background: rgba(96,165,250,.18);
  color: rgba(147,197,253,1);
}

.small-muted { color: var(--bs-secondary-color); }

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

.form-control:focus, .form-select:focus {
  box-shadow: 0 0 0 .25rem rgba(59,130,246,.18);
}

.app-kpi {
  border-radius: var(--radius);
  padding: 1rem;
  background: color-mix(in srgb, var(--bs-body-bg) 85%, transparent);
}