:root{
  --bg: #0b1220;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  --border: rgba(255,255,255,.12);
  --shadow: 0 12px 40px rgba(0,0,0,.35);
}

.bg-app{
  background: radial-gradient(1000px 600px at 12% 12%, rgba(111,66,193,.35), transparent 55%),
              radial-gradient(900px 600px at 80% 20%, rgba(13,110,253,.35), transparent 55%),
              radial-gradient(900px 700px at 60% 80%, rgba(32,201,151,.28), transparent 55%),
              var(--bg);
  color: var(--text);
}

.bg-nav{
  background: rgba(0,0,0,.35) !important;
  backdrop-filter: blur(10px);
}

.brand-dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:99px;
  margin-right:10px;
  background: linear-gradient(135deg, rgba(13,110,253,1), rgba(111,66,193,1));
  box-shadow: 0 0 0 4px rgba(255,255,255,.05);
}

.card.glass{
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.card.glass .card-header{
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid var(--border);
}

.badge-soft{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
}

.table.table-dark{
  --bs-table-bg: rgba(0,0,0,.25);
  --bs-table-striped-bg: rgba(255,255,255,.02);
  --bs-table-border-color: rgba(255,255,255,.10);
}

.hero{
  padding: 64px 0 24px;
}

.hero h1{
  letter-spacing: -0.03em;
}

.kpi{
  display:flex;
  gap: 14px;
  align-items:center;
}

.kpi .kpi-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}

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

.banner{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 14px 16px;
}

.btn-outline-light{
  border-color: rgba(255,255,255,.28);
}