:root{
  --nemat-card-shadow: 0 16px 50px rgba(0,0,0,.15);
  --nemat-bg: #f7f8fb;
  --nemat-fg: rgba(13, 18, 31, .92);
  --nemat-muted: rgba(13, 18, 31, .65);
  --nemat-card: rgba(255,255,255,.75);
  --nemat-border: rgba(13, 18, 31, .10);
  --nemat-navbar: rgba(255,255,255,.70);
  --nemat-grad-a: rgba(59,130,246,.18);
  --nemat-grad-b: rgba(168,85,247,.14);
  --nemat-grad-c: rgba(34,197,94,.10);
}

html[data-bs-theme="dark"]{
  --nemat-card-shadow: 0 16px 50px rgba(0,0,0,.35);
  --nemat-bg: #0b1220;
  --nemat-fg: rgba(255,255,255,.92);
  --nemat-muted: rgba(255,255,255,.65);
  --nemat-card: rgba(255,255,255,.06);
  --nemat-border: rgba(255,255,255,.10);
  --nemat-navbar: rgba(12, 18, 33, .75);
  --nemat-grad-a: rgba(59,130,246,.25);
  --nemat-grad-b: rgba(168,85,247,.22);
  --nemat-grad-c: rgba(34,197,94,.12);
}

body{
  background:
    radial-gradient(900px circle at 15% 10%, var(--nemat-grad-a), transparent 40%),
    radial-gradient(900px circle at 85% 10%, var(--nemat-grad-b), transparent 42%),
    radial-gradient(1100px circle at 50% 90%, var(--nemat-grad-c), transparent 48%),
    var(--nemat-bg);
  color: var(--nemat-fg);
  height: 100vh;
}

.navbar{
  background: var(--nemat-navbar) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nemat-border);
}

.card{
  background: var(--nemat-card);
  border: none;
  box-shadow: var(--nemat-card-shadow);
}

.table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--nemat-fg);
  --bs-table-border-color: var(--nemat-border);
}

.badge-soft{
  background: color-mix(in srgb, var(--nemat-fg) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--nemat-fg) 14%, transparent);
  color: color-mix(in srgb, var(--nemat-fg) 92%, transparent);
}

.btn-primary{
  background: linear-gradient(135deg,#3b82f6,#a855f7);
  border: 0;
}

.btn-outline-light{
  border-color: color-mix(in srgb, var(--nemat-fg) 25%, transparent);
}

.form-control,.form-select{
  background: color-mix(in srgb, var(--nemat-bg) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--nemat-fg) 14%, transparent);
  color: var(--nemat-fg);
}
.form-control:focus,.form-select:focus{
  background: color-mix(in srgb, var(--nemat-bg) 65%, transparent);
  border-color: rgba(59,130,246,.75);
  box-shadow: 0 0 0 .25rem rgba(59,130,246,.20);
  color: var(--nemat-fg);
}

.text-muted{ color: var(--nemat-muted) !important; }