html:has(#app) {
  --brand-dim: color-mix(in srgb, var(--spx-accent) 12%, transparent);
  background: var(--spx-bg);
  color: var(--spx-text);
}
html:has(#app) body, html:has(#app) .bg-black { background-color:var(--spx-bg)!important; color:var(--spx-text); }
html:has(#app) .bg-zinc-950, html:has(#app) .bg-zinc-950\/80 { background-color:var(--spx-surface)!important; }
html:has(#app) .bg-zinc-900, html:has(#app) .bg-zinc-900\/60 { background-color:var(--spx-muted-surface)!important; }
html:has(#app) .bg-zinc-800 { background-color:var(--spx-border)!important; }
html:has(#app) .bg-zinc-800.text-zinc-300 { color:var(--spx-text)!important; }
html:has(#app) .text-white { color:var(--spx-text)!important; }
html:has(#app) .text-zinc-300, html:has(#app) .text-zinc-400 { color:var(--spx-text-muted)!important; }
html:has(#app) .text-zinc-500, html:has(#app) .text-zinc-600 { color:var(--spx-text-muted)!important; }
html:has(#app) .border-zinc-800, html:has(#app) .border-zinc-700 { border-color:var(--spx-border)!important; }
html:has(#app) .text-brand, html:has(#app) .group:hover .group-hover\:text-brand { color:var(--spx-accent-text)!important; }
html:has(#app) .bg-brand { background-color:var(--spx-accent)!important; color:var(--spx-on-accent)!important; }
html:has(#app) .bg-brand-hover, html:has(#app) .hover\:bg-brand\/10:hover { background-color:var(--spx-muted-surface)!important; }
html:has(#app) .bg-brand\/5, html:has(#app) .bg-brand\/10, html:has(#app) .bg-brand\/20, html:has(#app) .bg-brand\/25, html:has(#app) .bg-brand\/30, html:has(#app) .bg-brand\/40, html:has(#app) .bg-brand\/50 { background-color:var(--spx-muted-surface)!important; }
html:has(#app) .border-brand, html:has(#app) .border-l-brand, html:has(#app) .hover\:border-brand:hover, html:has(#app) .group:hover .group-hover\:border-brand { border-color:var(--spx-accent)!important; }
html:has(#app) .border-brand\/20, html:has(#app) .border-brand\/25, html:has(#app) .border-brand\/30, html:has(#app) .border-brand\/40, html:has(#app) .border-brand\/50 { border-color:var(--spx-accent)!important; }
html:has(#app) .selection\:bg-brand::selection { background:var(--spx-accent)!important; color:var(--spx-on-accent)!important; }
html:has(#app) input, html:has(#app) textarea, html:has(#app) select { background-color:var(--spx-surface); color:var(--spx-text); border-color:var(--spx-border); color-scheme:inherit; }
html:has(#app) select option { background:var(--spx-surface); color:var(--spx-text); }
html:has(#app) input::placeholder, html:has(#app) textarea::placeholder { color:var(--spx-text-muted); opacity:1; }
html:has(#app) :focus-visible { outline:3px solid var(--spx-focus)!important; outline-offset:3px; }
html:has(#app) .focus\:border-brand:focus { border-color:var(--spx-focus)!important; }
html:has(#app) .focus\:ring-brand:focus { --tw-ring-color:var(--spx-focus)!important; }
html:has(#app) .toast { background:var(--spx-surface)!important; box-shadow:var(--spx-shadow)!important; color:var(--spx-text); }
html:has(#app) .toast-success { border-color:var(--spx-success)!important; color:var(--spx-success)!important; }
html:has(#app) .toast-success .ph { color:var(--spx-success)!important; }
html:has(#app) .toast-error { border-color:var(--spx-danger)!important; color:var(--spx-danger)!important; }
html:has(#app) .toast-error .ph { color:var(--spx-danger)!important; }
html:has(#app) .toast-info { border-color:var(--spx-info)!important; color:var(--spx-info)!important; }
html:has(#app) .toast-action { background:var(--spx-accent)!important; color:var(--spx-on-accent)!important; }
html:has(#app) .text-rose-500 { color:var(--spx-danger)!important; }
html:has(#app) .text-amber-500 { color:var(--spx-warning)!important; }
html:has(#app) .text-green-500, html:has(#app) .text-emerald-500 { color:var(--spx-success)!important; }
html:has(#app) .bg-black\/85 { background:var(--spx-overlay)!important; }
html:has(#app) [class*="shadow-[0_0"] { box-shadow:var(--spx-shadow)!important; }
html:has(#app) ::-webkit-scrollbar-thumb { background:var(--spx-border); }
@media (prefers-reduced-motion:reduce) {
  html:has(#app) .toast, html:has(#app) .toast-leaving { animation:none!important; }
}