:root{
  color-scheme:dark;
  --vx-bg:#040711;
  --vx-bg2:#070b16;
  --vx-panel:#0a1020;
  --vx-panel2:#0d1426;
  --vx-panel3:#111a2f;
  --vx-border:rgba(148,163,184,.14);
  --vx-border-strong:rgba(125,211,252,.24);
  --vx-text:#f8fafc;
  --vx-muted:#94a3b8;
  --vx-muted2:#64748b;
  --vx-cyan:#22d3ee;
  --vx-blue:#3b82f6;
  --vx-violet:#8b5cf6;
  --vx-pink:#d946ef;
}
html{background:var(--vx-bg);scroll-behavior:smooth}
body{background:
 radial-gradient(circle at 12% 8%,rgba(34,211,238,.08),transparent 28rem),
 radial-gradient(circle at 88% 16%,rgba(139,92,246,.10),transparent 31rem),
 linear-gradient(180deg,var(--vx-bg) 0%,#060a14 55%,#040711 100%) !important;
 color:var(--vx-text) !important;
 min-height:100vh;
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.25;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:48px 48px}
::selection{background:rgba(34,211,238,.28);color:white}
*{scrollbar-width:thin;scrollbar-color:#263552 #070b16}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#070b16}::-webkit-scrollbar-thumb{background:#263552;border:2px solid #070b16;border-radius:999px}

.vx-panel{background:linear-gradient(180deg,rgba(14,21,39,.94),rgba(8,13,25,.94));border:1px solid var(--vx-border);box-shadow:0 24px 80px rgba(0,0,0,.28);backdrop-filter:blur(18px)}
.vx-panel-soft{background:rgba(13,20,38,.78);border:1px solid var(--vx-border);backdrop-filter:blur(14px)}
.vx-gradient{background:linear-gradient(100deg,var(--vx-cyan),var(--vx-blue) 42%,var(--vx-violet) 72%,var(--vx-pink))}
.vx-gradient-text{background:linear-gradient(100deg,var(--vx-cyan),#60a5fa 42%,#a78bfa 72%,#e879f9);-webkit-background-clip:text;background-clip:text;color:transparent}
.vx-glow{box-shadow:0 16px 60px rgba(59,130,246,.14),0 0 0 1px rgba(255,255,255,.02) inset}
.vx-button{background:linear-gradient(100deg,#38d9f2,#4f8df8 48%,#9b5cf6);color:#04101a;border:0;box-shadow:0 14px 40px rgba(56,189,248,.15)}
.vx-button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.vx-button-secondary{background:rgba(255,255,255,.045);border:1px solid rgba(148,163,184,.16);color:#dbeafe}.vx-button-secondary:hover{background:rgba(255,255,255,.075);border-color:rgba(125,211,252,.25)}
.vx-input,input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),textarea,select{background:#0a1020 !important;border-color:rgba(148,163,184,.18) !important;color:#f8fafc !important;box-shadow:none !important}
input::placeholder,textarea::placeholder{color:#526079 !important}
input:focus,textarea:focus,select:focus{border-color:rgba(34,211,238,.48) !important;box-shadow:0 0 0 4px rgba(34,211,238,.08) !important;outline:none !important}
select option{background:#0a1020;color:#f8fafc}
input[type=range]{accent-color:#38bdf8}
a{transition:color .18s ease,background-color .18s ease,border-color .18s ease,transform .18s ease}

/* Force legacy Tailwind light utilities into dark-only surfaces. */
.bg-white,.bg-white\/90{background-color:rgba(10,16,32,.96) !important}.bg-slate-50,.bg-gray-50,.bg-gray-50\/50,.bg-slate-100,.bg-gray-100{background-color:#0d1426 !important}
.text-slate-950,.text-slate-900,.text-slate-800,.text-gray-900,.text-gray-800,.text-gray-700{color:#f8fafc !important}
.text-slate-700,.text-slate-600,.text-gray-600{color:#cbd5e1 !important}.text-slate-500,.text-gray-500{color:#94a3b8 !important}.text-slate-400,.text-gray-400{color:#718096 !important}
.border-slate-100,.border-slate-200,.border-gray-100,.border-gray-200,.divide-slate-100>*,.divide-gray-100>*{border-color:rgba(148,163,184,.13) !important}
.shadow-sm,.shadow-md,.shadow-lg,.shadow-xl,.shadow-2xl,.soft-shadow{box-shadow:0 22px 70px rgba(0,0,0,.22) !important}
.hover\:bg-slate-50:hover,.hover\:bg-gray-50:hover,.hover\:bg-white:hover{background-color:#111a2f !important}
.bg-indigo-50{background-color:rgba(99,102,241,.12) !important}.text-indigo-700,.text-indigo-600{color:#818cf8 !important}
.bg-emerald-50{background-color:rgba(16,185,129,.10) !important}.text-emerald-700,.text-emerald-600{color:#34d399 !important}
.bg-rose-50{background-color:rgba(244,63,94,.10) !important}.text-rose-700,.text-rose-600{color:#fb7185 !important}
.bg-amber-50{background-color:rgba(245,158,11,.10) !important}.text-amber-700,.text-amber-600{color:#fbbf24 !important}

/* Tables */
table{color:#dbeafe}thead{background:#0b1222 !important;color:#718096 !important}tbody tr{border-color:rgba(148,163,184,.11) !important}tbody tr:hover{background:rgba(255,255,255,.025) !important}

/* Audio controls fit dark UI reasonably across browsers. */
audio{filter:saturate(.9) brightness(.86);border-radius:12px;max-width:100%}

/* Premium account shell */
.vx-account-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px}.vx-account-nav{position:sticky;top:104px;align-self:start}
@media(max-width:900px){.vx-account-grid{grid-template-columns:1fr}.vx-account-nav{position:static}}

/* Admin */
.vx-admin-main{min-height:100vh}.vx-admin-card{background:linear-gradient(180deg,#0c1324,#090f1d);border:1px solid var(--vx-border);border-radius:24px;box-shadow:0 22px 65px rgba(0,0,0,.22)}
.vx-kpi{background:linear-gradient(145deg,rgba(15,23,42,.92),rgba(7,12,24,.92));border:1px solid rgba(148,163,184,.13);border-radius:22px}

/* Reduce motion when requested */
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Accent utility remap for legacy screens */
.bg-indigo-600,.bg-blue-600{background:linear-gradient(100deg,#32d5ed,#4d8cf7 48%,#8b5cf6) !important;color:#04101a !important}.hover\:bg-indigo-700:hover,.hover\:bg-indigo-600:hover,.hover\:bg-blue-700:hover{filter:brightness(1.08)}
.bg-slate-900{background:#0b1222 !important}.bg-slate-950{background:#070b16 !important}
.border-indigo-100,.border-indigo-200,.border-indigo-300{border-color:rgba(129,140,248,.22) !important}.border-emerald-100,.border-emerald-200{border-color:rgba(52,211,153,.2) !important}.border-rose-100,.border-rose-200{border-color:rgba(251,113,133,.2) !important}.border-blue-100,.border-blue-200{border-color:rgba(96,165,250,.2) !important}.border-amber-100,.border-amber-200{border-color:rgba(251,191,36,.2) !important}
.bg-cyan-50{background-color:rgba(34,211,238,.1)!important}.text-cyan-600{color:#22d3ee!important}.bg-violet-50,.bg-purple-50{background-color:rgba(139,92,246,.1)!important}.text-violet-600,.text-purple-600{color:#a78bfa!important}
.modal,.admin-card{background:#0a1020!important;color:#f8fafc!important;border-color:rgba(148,163,184,.14)!important}