:root {
    --ux-bg: var(--bg, #08080a);
    --ux-surface: var(--surface, var(--panel, #121217));
    --ux-panel: var(--panel2, #181820);
    --ux-text: var(--text, #f7f8ff);
    --ux-muted: var(--muted, #9ca3af);
    --ux-accent: var(--accent, #2e5bff);
    --ux-accent-2: var(--accent2, #78a0ff);
    --ux-border: var(--border, rgba(255,255,255,.11));
    --ux-radius: var(--radius, 8px);
    --ux-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ux-control-padding-y: 9px;
    --ux-control-padding-x: 13px;
    --ux-content-gap: 14px;
}

html.sba-theme-lava { --ux-bg:#130606; --ux-surface:#21100b; --ux-panel:#32140d; --ux-text:#fff4ed; --ux-muted:#d7a28c; --ux-accent:#ff4d24; --ux-accent-2:#ffc247; --ux-border:rgba(255,115,64,.28); }
html.sba-theme-mist { --ux-bg:#071013; --ux-surface:#102025; --ux-panel:#162b31; --ux-text:#edf9fb; --ux-muted:#9ebcc2; --ux-accent:#7dd3fc; --ux-accent-2:#c7f9ff; --ux-border:rgba(125,211,252,.24); }
html.sba-theme-forest { --ux-bg:#07110b; --ux-surface:#0f1e13; --ux-panel:#172a1a; --ux-text:#f0fff4; --ux-muted:#a7c9ad; --ux-accent:#22c55e; --ux-accent-2:#b7f7c2; --ux-border:rgba(34,197,94,.24); }
html.sba-theme-desert { --ux-bg:#151009; --ux-surface:#241b10; --ux-panel:#332514; --ux-text:#fff8e7; --ux-muted:#d8bd8f; --ux-accent:#e0a12b; --ux-accent-2:#f6d365; --ux-border:rgba(224,161,43,.28); }
html.sba-theme-moonlight { --ux-bg:#090b14; --ux-surface:#111827; --ux-panel:#1b2440; --ux-text:#f5f7ff; --ux-muted:#aeb7d7; --ux-accent:#a5b4fc; --ux-accent-2:#f0abfc; --ux-border:rgba(165,180,252,.26); }
html.sba-theme-ocean { --ux-bg:#06131d; --ux-surface:#0d2233; --ux-panel:#12304a; --ux-text:#edf9ff; --ux-muted:#9fc3d9; --ux-accent:#38bdf8; --ux-accent-2:#2dd4bf; --ux-border:rgba(56,189,248,.24); }
html.sba-theme-jungle { --ux-bg:#061209; --ux-surface:#102616; --ux-panel:#19351f; --ux-text:#effff0; --ux-muted:#a4c99d; --ux-accent:#84cc16; --ux-accent-2:#facc15; --ux-border:rgba(132,204,22,.25); }
html.sba-theme-foothills { --ux-bg:#0f120b; --ux-surface:#1a2113; --ux-panel:#243018; --ux-text:#f8ffe9; --ux-muted:#bac89a; --ux-accent:#65a30d; --ux-accent-2:#d9f99d; --ux-border:rgba(101,163,13,.24); }
html.sba-theme-light { --ux-bg:#f6f7fb; --ux-surface:#ffffff; --ux-panel:#eef1f7; --ux-text:#111827; --ux-muted:#5b6473; --ux-accent:#2563eb; --ux-accent-2:#0f766e; --ux-border:rgba(17,24,39,.14); }
html.sba-theme-dark { --ux-bg:#08080a; --ux-surface:#121217; --ux-panel:#181820; --ux-text:#f7f8ff; --ux-muted:#9ca3af; --ux-accent:#2e5bff; --ux-accent-2:#78a0ff; --ux-border:rgba(255,255,255,.11); }
html.sba-theme-aurora { --ux-bg:#071016; --ux-surface:#101a22; --ux-panel:#152634; --ux-text:#effcff; --ux-muted:#98b8c0; --ux-accent:#2dd4bf; --ux-accent-2:#c084fc; --ux-border:rgba(45,212,191,.24); }
html.sba-theme-glacier { --ux-bg:#081016; --ux-surface:#101d27; --ux-panel:#172938; --ux-text:#f1fbff; --ux-muted:#a7bdc8; --ux-accent:#67e8f9; --ux-accent-2:#bfdbfe; --ux-border:rgba(103,232,249,.25); }
html.sba-theme-sunset { --ux-bg:#160b12; --ux-surface:#26131d; --ux-panel:#361b27; --ux-text:#fff2f7; --ux-muted:#d8a1b4; --ux-accent:#fb7185; --ux-accent-2:#fbbf24; --ux-border:rgba(251,113,133,.27); }
html.sba-theme-meadow { --ux-bg:#0b1208; --ux-surface:#16200f; --ux-panel:#202d16; --ux-text:#f7ffef; --ux-muted:#b5c8a4; --ux-accent:#a3e635; --ux-accent-2:#34d399; --ux-border:rgba(163,230,53,.23); }
html.sba-theme-storm { --ux-bg:#0a0d12; --ux-surface:#131922; --ux-panel:#1d2530; --ux-text:#f2f6fb; --ux-muted:#aab4c2; --ux-accent:#60a5fa; --ux-accent-2:#f472b6; --ux-border:rgba(96,165,250,.23); }

html[class*="sba-theme-"] body {
    background-color: var(--ux-bg);
    color: var(--ux-text);
    font-family: var(--ux-font);
}

html[class*="sba-theme-"] input,
html[class*="sba-theme-"] select,
html[class*="sba-theme-"] textarea,
html[class*="sba-theme-"] button,
html[class*="sba-theme-"] .ai-btn,
html[class*="sba-theme-"] .tab,
html[class*="sba-theme-"] .btn {
    border-radius: var(--ux-radius);
}

html[class*="sba-theme-"] ::-webkit-scrollbar { width: 12px; height: 12px; }
html[class*="sba-theme-"] ::-webkit-scrollbar-track { background: color-mix(in srgb, var(--ux-bg) 85%, #000); }
html[class*="sba-theme-"] ::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ux-accent) 55%, var(--ux-panel));
    border: 3px solid color-mix(in srgb, var(--ux-bg) 85%, #000);
    border-radius: 999px;
}

.sba-alert-layer {
    position: fixed;
    inset: auto 16px 16px 16px;
    z-index: 2147483000;
    display: grid;
    gap: 10px;
    pointer-events: none;
}

.sba-alert {
    pointer-events: auto;
    max-width: 920px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    width: min(100%, 920px);
    padding: 14px 16px;
    background: color-mix(in srgb, var(--ux-surface) 94%, #000);
    color: var(--ux-text);
    border: 1px solid var(--ux-border);
    border-left: 4px solid var(--ux-accent);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

.sba-alert strong { display:block; font-size:14px; margin-bottom:4px; color:var(--ux-accent-2); }
.sba-alert span { display:block; font-size:13px; line-height:1.45; color:var(--ux-text); }
.sba-alert button {
    border: 1px solid var(--ux-border);
    background: var(--ux-panel);
    color: var(--ux-text);
    border-radius: 8px;
    min-height: 36px;
    padding: 7px 10px;
    cursor: pointer;
    font-weight: 800;
}

@media (max-width: 720px) {
    .sba-alert-layer { inset: auto 10px 10px 10px; }
    .sba-alert { grid-template-columns: 1fr; }
    .sba-alert button { width: 100%; }
}