:root{
  --radius:18px;
  --stroke:rgba(255,255,255,.10);
  --shadow: 0 18px 50px rgba(0,0,0,.35);
}

/* DARK */
:root[data-theme="dark"]{
  --bg:#0b1220;
  --card:#0f1a33;
  --text:#e9efff;
  --muted:#9fb0d0;
  --accent1:#7c3aed;
  --accent2:#22c55e;
  --stroke:rgba(255,255,255,.10);
  --shadow: 0 18px 50px rgba(0,0,0,.35);
}

/* LIGHT */
:root[data-theme="light"]{
  --bg:#f6f8ff;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#51627f;
  --accent1:#6d28d9;
  --accent2:#16a34a;
  --stroke:rgba(15, 23, 42, .10);
  --shadow: 0 18px 40px rgba(15,23,42,.10);
}

html,body{ height:100%; }
body{
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(124,58,237,.18), transparent 55%),
    radial-gradient(1000px 600px at 90% 30%, rgba(34,197,94,.14), transparent 60%),
    var(--bg);
  color: var(--text);
}

a{ color: color-mix(in oklab, var(--accent1) 70%, var(--text)); }
a:hover{ color: var(--text); }

.app-nav{
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent1) 70%, #111 30%), rgba(15,26,51,.9));
  border-bottom: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
}

.card.app-card{
  background: color-mix(in oklab, var(--card) 92%, transparent 8%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}

.form-control, .form-select, .btn{ border-radius: 14px; }
.form-control, .form-select{
  background: color-mix(in oklab, var(--card) 92%, transparent 8%);
  border: 1px solid var(--stroke);
  color: var(--text);
}
.form-control:focus, .form-select:focus{
  border-color: color-mix(in oklab, var(--accent1) 65%, transparent 35%);
  box-shadow: 0 0 0 .25rem color-mix(in oklab, var(--accent1) 20%, transparent 80%);
}

.table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  border-color: var(--stroke);
}

.kpi{
  border:1px solid var(--stroke);
  border-radius:16px;
  background: color-mix(in oklab, var(--card) 92%, transparent 8%);
}
.kpi .val{ font-size: 1.6rem; font-weight: 800; }
.kpi .lab{ color: var(--muted); }

.brand-logos{
  display:flex; align-items:center; gap:10px;
}
.brand-logos img{
  height:34px; width:auto; object-fit:contain;
  border-radius:10px;
  background: color-mix(in oklab, var(--card) 92%, transparent 8%);
  border:1px solid var(--stroke);
  padding:6px 8px;
}
.brand-divider{
  width:1px; height:28px; background: var(--stroke);
}