/* smooth-nav.css — instant, animated cross-page navigation for the whole panel.
 *
 * Uses the browser's native cross-document View Transitions API. When you click
 * a sidebar link, the browser holds the old page's pixels and cross-fades into
 * the new one instead of showing the usual white flash — so multi-page nav feels
 * like a single smooth app.
 *
 * 100% additive and safe:
 *   - No JavaScript, no markup, no logic changes.
 *   - Browsers without support (e.g. Safari, older builds) simply navigate
 *     normally — identical to today's behavior. Nothing breaks.
 *
 * Both the page you leave and the page you land on must include this file for
 * the transition to play, so it's linked on every app page.
 */
/* DIAGNOSTIC (white-flash test): native cross-document View Transitions are
 * temporarily DISABLED to prove whether they cause the white flash. Navigation
 * falls back to normal full-document loads. Re-enable by uncommenting the line:
 * @view-transition { navigation: auto; } */

/* ════════════════════════════════════════════════════════════════════════
 * SPRK DESIGN TOKENS (Phase 1, Step 1) — single source of truth.
 *
 * ADDITIVE + VISUALLY INERT: these custom properties mirror the EXACT values
 * already hardcoded across the app today. Nothing consumes them yet, so this
 * block changes nothing on screen. Later phases adopt these vars (and the
 * shared component classes) so palette/spacing/radius/motion live in one place.
 * No existing selectors are changed and no literals are replaced in this step.
 * ════════════════════════════════════════════════════════════════════════ */
:root {
    /* Backgrounds */
    --bg: #0B0F14;
    --bg-raised: #0E1218;

    /* Panels / surfaces (consolidates ~6 page variants -> 3) */
    --surface-glass: rgba(14, 18, 26, .88);
    --surface-card: rgba(19, 22, 27, .85);
    --surface-inset: rgba(255, 255, 255, .03);

    /* Borders */
    --border: rgba(255, 255, 255, .06);
    --border-soft: rgba(255, 255, 255, .04);
    --border-strong: rgba(255, 255, 255, .12);
    --border-gold: rgba(216, 186, 104, .25);

    /* Gold — the single brand accent */
    --gold: #D8BA68;
    --gold-hi: #E5D19A;
    --gold-deep: #C9A24D;
    --gold-rgb: 216, 186, 104;            /* use as rgba(var(--gold-rgb), a) */
    --gold-glow: rgba(216, 186, 104, .12);

    /* Text */
    --text-1: #E5E7EB;
    --text-2: #9CA3AF;
    --text-3: #6B7280;
    --text-muted: #4B5563;

    /* Status (tames the rainbow -> 4 semantic + gold) */
    --ok: #22C55E;
    --warn: #E0A23A;
    --err: #F87171;
    --info: #60A5FA;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* Radius scale */
    --r-sm: 6px;
    --r: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-pill: 999px;

    /* Shadow / glow (match current smooth-nav values) */
    --shadow-card: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 30px rgba(0, 0, 0, .22);
    --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, .055), 0 24px 60px rgba(0, 0, 0, .28);

    /* Motion (stays under the existing reduced-motion gate below) */
    --t-fast: .12s;
    --t: .18s;
    --t-slow: .3s;
    --ease: cubic-bezier(.2, .8, .2, 1);
}

/* A subtle cross-fade on the app's dark background (navigation v2 Step 1) —
 * the old page fades out while the new page fades in, with NO slide/movement,
 * so no white gap can appear during the brief inter-page transition. Symmetric
 * timing reads smoother than the old 150/220ms rise. Tune here in one place. */
@keyframes sprk-vt-out { to { opacity: 0; } }
@keyframes sprk-vt-in  { from { opacity: 0; } }
/* DIAGNOSTIC (white-flash test): root view-transition animations disabled
 * alongside @view-transition above. Re-enable by uncommenting:
::view-transition-old(root) {
    animation: sprk-vt-out 180ms ease both;
}
::view-transition-new(root) {
    animation: sprk-vt-in 180ms ease both;
}
*/

/* Dark transition canvas — keep html, body, and the view-transition overlay on
 * the app background (#0B0F14 = token --bg) so browser snapshots and the brief
 * inter-document gap never flash white. Static (no animation) → reduced-motion
 * is unaffected, and the root fade above is already disabled by the gate at the
 * end of this file. No sidebar naming, no JS, no markup changes. */
::view-transition { background-color: #0B0F14; }
html { background-color: #0B0F14; }
body { background-color: #0B0F14; }

/* While a sidebar navigation is in flight (class set by /sidebar.js), keep the
 * canvas dark and stop extra sidebar clicks from starting overlapping
 * navigations that cause white/blank flashes. The links also dim slightly to
 * signal the in-flight nav (the dim eases via the sidebar's own opacity
 * transition, and reduced-motion zeroes that — so no flash). */
html.sprk-is-navigating { background-color: #0B0F14; }
html.sprk-is-navigating .w-64.glass-panel nav a,
html.sprk-is-navigating aside.sidebar nav a { pointer-events: none; opacity: .7; }

/* ════════════════════════════════════════════════════════════════════════
 * SPRK UI polish — one shared look across every panel tab.
 *
 * This file is already linked on every page, so these rules unify the UI in
 * ONE place. 100% additive + visual only: typography, spacing, and the shared
 * building-block classes (sidebar nav, stat cards, panels, tables, inputs).
 * No markup, no JavaScript, no layout-structure changes — launching and every
 * other feature are untouched. Tweak the look here and it updates everywhere.
 * ════════════════════════════════════════════════════════════════════════ */

/* Base readability */
body { line-height: 1.5; }

/* ── Sidebar nav — consistent, roomier, cleaner (matches the Performance tab) ── */
.glass-panel nav { padding: 14px !important; }
.glass-panel nav a,
aside nav a {
    padding: 11px 13px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    transition: background .15s ease, color .15s ease !important;
}
.glass-panel nav a span,
aside nav a span { font-size: 14px !important; }
.glass-panel nav a i, .glass-panel nav a svg,
aside nav a i, aside nav a svg { font-size: 15px !important; }
.glass-panel nav a:hover,
aside nav a:hover { background: rgba(255,255,255,0.05) !important; }
.nav-active { border-left: 2px solid #D8BA68 !important; }

/* ── Stat / KPI cards & panels — more breathing room, softer corners ── */
.stat-card { padding: 18px !important; border-radius: 14px !important; }
.kpi-card, .panel { border-radius: 14px !important; }

/* ── Data tables — roomier rows + a touch larger text ── */
.data-table { font-size: 13.5px !important; }
.data-table th { padding: 12px 16px !important; letter-spacing: .5px; }
.data-table td { padding: 14px 16px !important; }

/* ── Inputs — comfortable, consistent sizing ── */
.input-field { font-size: 14px !important; }

/* ════════════════════════════════════════════════════════════════════════
 * SPRK polish layer v2 — tactile buttons, focus glows, micro-motion.
 *
 * Same contract as everything above: CSS-only, additive, zero markup/JS.
 * Deliberate safety choices baked in:
 *   - transform (press effect) is applied ONLY to real buttons — never to
 *     modals, cards, or overlays, where transforms can break fixed-position
 *     children or centering transforms.
 *   - :where() keeps selector specificity at zero, so any page that styles
 *     its own states still wins. No !important in this layer (except the
 *     reduced-motion accessibility override at the very end).
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Page-level feel ── */
:root { color-scheme: dark; accent-color: #D8BA68; }   /* native checkboxes, radios, date pickers, selects → dark + gold */
html { scroll-behavior: smooth; scrollbar-color: rgba(255,255,255,.15) transparent; scrollbar-width: thin; }
::selection { background: rgba(216,186,104,.3); color: #fff; }

/* ── Tactile buttons — every button gets a snappy press + smooth states ── */
:where(button, [role="button"], .btn, .btn-gold, .btn-gold-active, .tab-btn, .chip-on, .chip-off) {
    transition: transform .1s ease-out, background-color .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .18s ease, opacity .15s ease, filter .15s ease;
}
:where(button, [role="button"]):not(:disabled) { cursor: pointer; }
:where(button):disabled { cursor: not-allowed; }
:where(button, [role="button"], .btn, .btn-gold, .btn-gold-active):not(:disabled):active {
    filter: brightness(.92);
}

/* Gold CTAs glow softly on hover */
.btn-gold:hover { box-shadow: 0 4px 18px rgba(216,186,104,.15); }
.btn-gold-active:hover { box-shadow: 0 4px 22px rgba(216,186,104,.3); filter: brightness(1.05); }

/* ── Keyboard focus — a clean gold ring instead of the browser default ── */
:where(button, [role="button"], a, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid rgba(216,186,104,.55);
    outline-offset: 2px;
}

/* ── Inputs — gold glow when focused ── */
:where(input, select, textarea) {
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
:where(input, select, textarea):focus {
    border-color: rgba(216,186,104,.4);
    box-shadow: 0 0 0 3px rgba(216,186,104,.1);
}

/* ── Links — never snap between states ── */
a { transition: color .15s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease; }

/* ── Tables — rows respond to the cursor with a gold wash ── */
table tbody tr { transition: background-color .12s ease; }
table tbody tr:hover { background-color: rgba(216, 186, 104, .035); }

/* ── Stat / KPI cards — quiet gold edge on hover ── */
.stat-card, .kpi-card { transition: border-color .2s ease, box-shadow .2s ease; }
.stat-card:hover, .kpi-card:hover {
    border-color: rgba(216,186,104,.22);
    box-shadow: 0 8px 28px rgba(0,0,0,.3);
}

/* ── Modals & overlays — fade in when shown (opacity only: transforms are
 *    intentionally avoided so centered dialogs and fixed children are safe).
 *    CSS animations re-run every time display flips none → visible, so this
 *    catches every show() without any JS. ── */
@keyframes sprk-fade-in { from { opacity: 0; } }
.modal-overlay, [id^="modal-"], [id$="-modal"], [id$="Modal"] { animation: sprk-fade-in .18s ease; }

/* Alpine x-show reveals (dropdowns, conditional sections) get the same fade.
 * Elements that declare their own x-transition are excluded — Alpine animates
 * those itself and the two would fight. */
[x-show]:not([x-transition]):not([x-transition\.opacity]) { animation: sprk-fade-in .15s ease; }

/* ── Numbers — tabular figures so stats don't wiggle as they update ── */
.stat-card, .kpi-card, .data-table td { font-variant-numeric: tabular-nums; }

/* ── Sidebar micro-interactions (pairs with /sidebar.js) ── */
.sprk-sb nav a svg { transition: transform .18s cubic-bezier(.2, .8, .2, 1); }
.sprk-sb nav a:hover svg { transform: translateX(2px); }
.sprk-sb nav a.active svg { filter: drop-shadow(0 0 6px rgba(216,186,104,.45)); }

/* ════════════════════════════════════════════════════════════════════════
 * Dropdowns — gold, sectioned, smooth. Repo-wide via this one shared file.
 *
 * Two layers:
 *   1. FALLBACK (all browsers): native option list forced dark, selected row
 *      painted gold. background-IMAGE (gradient) is used because native
 *      popups ignore plain background-color on :checked but honor gradients.
 *      `html` prefix + !important so it also beats the per-page option rules
 *      (admin) for one consistent look.
 *   2. MODERN (Chrome/Edge 135+, @supports-gated): `appearance: base-select`
 *      makes the popup part of the page — full control. Options become
 *      rounded "sectioned buttons" in a dark glass panel with gold
 *      hover/selected states, animated open/close, and a gold chevron that
 *      flips. Other browsers skip this block entirely and keep layer 1.
 *
 * Single dropdowns only (the repo has no multiple/size selects). CSS-only.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Layer 1: native popup fallback — dark list, golden selection ── */
html select option {
    background-color: #11161F;
    color: #E5E7EB;
}
html select option:checked {
    background: linear-gradient(rgba(216, 186, 104, .92), rgba(216, 186, 104, .92)) #11161F !important;
    color: #0B0F14 !important;
    font-weight: 600;
}
html select optgroup { background-color: #0D1118; color: rgba(216, 186, 104, .8); }

/* ── Layer 2: fully custom picker ── */
@supports (appearance: base-select) {

    /* Opt in. Legacy chevron background-images are stripped — the styleable
     * ::picker-icon replaces them (and gives the no-arrow selects an arrow).
     * `html` prefix outranks per-page `appearance:none` rules (admin's
     * select.form-input/.form-select), which load after this sheet. */
    html select:not([multiple]) {
        appearance: base-select;
        background-image: none !important;
    }
    select:not([multiple])::picker(select) { appearance: base-select; }

    /* Closed button: gold chevron, flips open smoothly, gold edge while open */
    select:not([multiple])::picker-icon {
        color: #D8BA68;
        transition: transform .18s cubic-bezier(.2, .8, .2, 1);
    }
    select:not([multiple]):open::picker-icon { transform: rotate(180deg); }
    html select:not([multiple]):open { border-color: rgba(216, 186, 104, .45); }

    /* The popup: dark glass panel, slight gap, fade + rise in and out */
    select:not([multiple])::picker(select) {
        background: rgba(13, 17, 24, .97);
        -webkit-backdrop-filter: blur(24px) saturate(1.3);
        backdrop-filter: blur(24px) saturate(1.3);
        border: 1px solid rgba(255, 255, 255, .09);
        border-radius: 12px;
        padding: 5px;
        margin-block-start: 5px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(216, 186, 104, .05);
        opacity: 1;
        transform: translateY(0);
        transition: opacity .14s ease, transform .14s ease,
                    overlay .14s ease allow-discrete, display .14s ease allow-discrete;
    }
    @starting-style {
        select:not([multiple])::picker(select) {
            opacity: 0;
            transform: translateY(-5px);
        }
    }

    /* Options as sectioned buttons. `html` + !important: overrides the
     * per-page `option { … !important }` rules inside the modern picker so
     * every page gets the identical look (fallback path untouched). */
    html select:not([multiple]) option {
        background: transparent !important;
        color: rgba(255, 255, 255, .72) !important;
        padding: 9px 12px;
        margin-block: 1px;
        border-radius: 8px;
        font-size: 13.5px;
        transition: background-color .12s ease, color .12s ease;
    }
    html select:not([multiple]) option:hover,
    html select:not([multiple]) option:focus-visible {
        background: rgba(216, 186, 104, .12) !important;
        color: #E5D19A !important;
        outline: none;
    }
    html select:not([multiple]) option:checked {
        background: rgba(216, 186, 104, .16) !important;
        color: #D8BA68 !important;
        font-weight: 600;
    }
    html select:not([multiple]) option::checkmark { color: #D8BA68; }

    /* Optgroup labels (dashboard) — quiet gold section headers */
    html select:not([multiple]) optgroup {
        background: transparent !important;
        color: rgba(216, 186, 104, .65) !important;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        padding: 6px 12px 2px;
    }
}

/* ════════════════════════════════════════════════════════════════════════
 * LUXURY GLASS layer v3 — ambient gold atmosphere + glass lighting.
 *
 * Performance contract (deliberate):
 *   - Ambient = static radial-gradients on two fixed pseudo-elements.
 *     NO filter:blur, NO new backdrop-filter surfaces — gradients are free.
 *   - The only always-on animation is ONE slow drift (transform/opacity
 *     only → compositor thread, no layout/paint). Killed by reduced-motion.
 *   - CTA shine is hover-triggered (a transition, not a loop) — zero idle
 *     cost across the 80+ gold buttons.
 *   - `isolation: isolate` on body creates a stacking context so the
 *     z-index:-1 ambience paints ABOVE body's background but BELOW all
 *     content. No page z-index relationships change.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── The ambient — gold aura top-right, cool depth bottom-left, plus a fine
 *    film-grain layer. The grain is not decoration: large dark gradients on
 *    near-black band into visible steps on 8-bit displays; grain dithers the
 *    steps away (the full-screen vignette that banded worst was removed).
 *    Grain = one tiny tiled SVG, painted once — no runtime cost. ── */
body { isolation: isolate; }
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 60% 46% at 82% -10%, rgba(216, 186, 104, .15), transparent 68%),
        radial-gradient(ellipse 50% 40% at 4% 112%, rgba(64, 96, 220, .08), transparent 68%);
    background-repeat: repeat, no-repeat, no-repeat;
}
/* The gold aura breathes in place — opacity only, anchored top-right.
 * No translation: a moving blob reads as a glitch, a breathing one as alive. */
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    top: -18%;
    right: -8%;
    width: 56vw;
    height: 56vh;
    background: radial-gradient(circle, rgba(216, 186, 104, .06), transparent 62%);
    animation: sprk-ambient 18s ease-in-out infinite alternate;
}
@keyframes sprk-ambient {
    from { opacity: .5; }
    to   { opacity: 1; }
}

/* ── First-paint dark cover ───────────────────────────────────────────────
   Operator app pages tag <html class="sprk-app">. Because smooth-nav.css is
   render-blocking, this opaque dark cover paints on the VERY FIRST frame —
   before body content, runtime Tailwind utilities, or the sidebar exist — so
   raw/unstyled/small text is never visible. It holds briefly while the page
   settles behind it, then fades to the final UI. Opacity-only; never intercepts
   input; SELF-CLEARS via the keyframe so the page can never get stuck dark.
   Scoped to .sprk-app so login / landing / other pages are unaffected. ── */
html.sprk-app::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: #0B0F14;
    pointer-events: none;
    animation: sprk-boot-cover .7s ease forwards;
}
@keyframes sprk-boot-cover {
    0%, 55% { opacity: 1; }
    100%    { opacity: 0; visibility: hidden; }
}

/* ── Glass lighting — a top light line + deep soft shadow on every surface ── */
.glass-panel {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 24px 60px rgba(0, 0, 0, .28);
}
.stat-card, .kpi-card, .panel, .card {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .028), transparent 42%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 30px rgba(0, 0, 0, .22);
}
.stat-card:hover, .kpi-card:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 14px 40px rgba(0, 0, 0, .3),
                0 0 30px rgba(216, 186, 104, .08);
}

/* ── Gold CTAs — light sweeps across on hover (buttons + links only, so
 *    badges/pills with the same gradient are untouched) ── */
button[style*="linear-gradient(135deg,#D8BA68"],
button[style*="linear-gradient(135deg, #D8BA68"],
a[style*="linear-gradient(135deg,#D8BA68"],
a[style*="linear-gradient(135deg, #D8BA68"],
.btn-gold-active {
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(216, 186, 104, .18), inset 0 1px 0 rgba(255, 255, 255, .25);
}
button[style*="linear-gradient(135deg,#D8BA68"]::after,
button[style*="linear-gradient(135deg, #D8BA68"]::after,
a[style*="linear-gradient(135deg,#D8BA68"]::after,
a[style*="linear-gradient(135deg, #D8BA68"]::after,
.btn-gold-active::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 46%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: translateX(-170%) skewX(-18deg);
    transition: transform .55s ease;
    pointer-events: none;
}
button[style*="linear-gradient(135deg,#D8BA68"]:hover::after,
button[style*="linear-gradient(135deg, #D8BA68"]:hover::after,
a[style*="linear-gradient(135deg,#D8BA68"]:hover::after,
a[style*="linear-gradient(135deg, #D8BA68"]:hover::after,
.btn-gold-active:hover::after {
    transform: translateX(340%) skewX(-18deg);
}

/* ── Tables — gold-lit headers ── */
.data-table thead th, .data-table th {
    background-image: linear-gradient(180deg, rgba(216, 186, 104, .05), transparent);
}

/* ── Admin & affiliate sidebars (they keep their own nav) — same glass
 *    active treatment as the operator sidebar ── */
.nav-active {
    background: linear-gradient(135deg, rgba(216, 186, 104, .15), rgba(216, 186, 104, .05)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 18px rgba(216, 186, 104, .10);
}

/* ── Modal overlays — frost the room behind the dialog ── */
.modal-overlay {
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
}

/* ── Typography — quiet luxury ── */
h1, h2, h3 { letter-spacing: -.02em; }

/* ════════════════════════════════════════════════════════════════════════
 * SPRK COMPONENT CLASSES (Phase 1, Step 2) — reusable building blocks built
 * from the Step-1 tokens. ADDITIVE + INERT: every selector is namespaced
 * `.sprk-*`, so it matches nothing on the current pages and changes nothing on
 * screen until a page opts in (later phases). No existing selector is touched
 * and no literals are replaced. Reduced-motion is handled by the global gate
 * at the end of this file.
 * ════════════════════════════════════════════════════════════════════════ */

/* Page scaffold (default width; pages can set their own max-width on adoption) */
.sprk-page { width: 100%; max-width: 72rem; margin-inline: auto; padding: var(--space-8) var(--space-6); }
.sprk-page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-6); }
.sprk-page-header h1, .sprk-page-header h2 { font-size: 22px; font-weight: 700; color: var(--text-1); letter-spacing: -.02em; line-height: 1.2; }
.sprk-page-header p { font-size: 13.5px; color: var(--text-2); margin-top: 2px; }

/* Surfaces */
.sprk-panel { background: var(--surface-glass); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-glass); -webkit-backdrop-filter: blur(40px) saturate(1.4); backdrop-filter: blur(40px) saturate(1.4); }
.sprk-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: var(--space-5); }
.sprk-stat { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: var(--space-5); font-variant-numeric: tabular-nums; transition: border-color var(--t-slow) ease, box-shadow var(--t-slow) ease; }
.sprk-stat:hover { border-color: var(--border-gold); box-shadow: var(--shadow-card), 0 0 30px var(--gold-glow); }

/* Buttons */
.sprk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 9px 16px; border: 1px solid var(--border); border-radius: var(--r); background: rgba(255, 255, 255, .05); color: var(--text-1); font: 600 13.5px Inter, system-ui, sans-serif; cursor: pointer; transition: transform var(--t-fast) ease-out, background-color var(--t) ease, border-color var(--t) ease, color var(--t) ease, box-shadow var(--t) ease, filter var(--t) ease; }
.sprk-btn:hover { background: rgba(255, 255, 255, .08); }
.sprk-btn:not(:disabled):active { filter: brightness(.92); }
.sprk-btn:disabled { opacity: .5; cursor: not-allowed; }
.sprk-btn--gold { color: #0B0F14; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); border-color: transparent; box-shadow: 0 6px 20px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, .25); }
.sprk-btn--gold:hover { filter: brightness(1.05); box-shadow: 0 4px 22px rgba(var(--gold-rgb), .3), inset 0 1px 0 rgba(255, 255, 255, .25); }
.sprk-btn--ghost { color: var(--gold-hi); background: rgba(var(--gold-rgb), .04); border-color: var(--border-gold); }
.sprk-btn--ghost:hover { background: rgba(var(--gold-rgb), .1); border-color: rgba(var(--gold-rgb), .4); }

/* Inputs / selects */
.sprk-input { width: 100%; padding: 9px 12px; background: var(--surface-inset); border: 1px solid var(--border-strong); border-radius: var(--r); color: var(--text-1); font-size: 14px; transition: border-color var(--t) ease, box-shadow var(--t) ease, background-color var(--t) ease; }
.sprk-input::placeholder { color: var(--text-3); }
.sprk-input:focus { outline: none; border-color: rgba(var(--gold-rgb), .4); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .1); }

/* Tables */
.sprk-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sprk-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--border); }
.sprk-table td { padding: 14px 16px; color: var(--text-2); border-bottom: 1px solid var(--border-soft); font-variant-numeric: tabular-nums; }
.sprk-table tbody tr { transition: background-color var(--t-fast) ease; }
.sprk-table tbody tr:hover { background: rgba(var(--gold-rgb), .035); }

/* Badges / status pills */
.sprk-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid transparent; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; line-height: 1.4; }
.sprk-badge.is-ok { color: var(--ok); background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .30); }
.sprk-badge.is-warn { color: var(--warn); background: rgba(224, 162, 58, .12); border-color: rgba(224, 162, 58, .30); }
.sprk-badge.is-err { color: var(--err); background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .30); }
.sprk-badge.is-info { color: var(--info); background: rgba(96, 165, 250, .12); border-color: rgba(96, 165, 250, .30); }
.sprk-badge.is-neutral { color: var(--text-2); background: rgba(255, 255, 255, .05); border-color: var(--border); }
.sprk-badge.is-gold { color: var(--gold-hi); background: rgba(var(--gold-rgb), .14); border-color: var(--border-gold); }

/* Empty state */
.sprk-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; padding: var(--space-8); color: var(--text-3); border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
.sprk-empty i, .sprk-empty svg { font-size: 24px; width: 24px; height: 24px; color: var(--text-3); opacity: .8; }

/* Toasts (subtle alerts) */
.sprk-toast-container { position: fixed; right: 20px; bottom: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.sprk-toast { pointer-events: auto; min-width: 240px; max-width: 360px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-glass); box-shadow: var(--shadow-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--text-1); font-size: 13px; animation: sprk-fade-in var(--t) ease; }

/* ── Accessibility — respect users who turn motion off ── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}