/* ==========================================================================
   OXUS v3 — REBIRTH. Loads AFTER style.css, oxus-ui.css, oxus-v2.css.
   The emblem files are untouched. Everything else is re-pointed here:
   palette, type, shape, material, controls, player, loader.
   Rule of the system: one rare signature (AMU), used where the eye must land
   and nowhere else. Depth comes from material, not gradients.
   ========================================================================== */

:root {
    /* --- Warm neutrals (dark is the primary environment) -------------- */
    --ox-obsidian: #060708;   /* VOID */
    --ox-ink:      #0D1012;   /* SURFACE */
    --ox-graphite: #15191C;   /* SURFACE RAISED */
    --ox-smoke:    #282E31;   /* BORDER / high surface */
    --ox-ash:      #747D7C;   /* text muted */
    --ox-silver:   #A1A9A8;   /* text secondary */
    --ox-chrome:   #D8DEDB;   /* pearl neutral */
    --ox-bone:     #F5F7F4;   /* text */
    --ox-paper:    #F4F2EC;   /* light-mode floor */

    /* --- Signature: AMU. Named for the river Oxus (Amu Darya).
          A glacier-mineral, desaturated cyan-grey. Not blue, not green,
          not neon. Dark mode value is lifted; light mode value is the
          same hue, dropped to petrol so it passes text contrast. ------- */
    --ox-amu:      #B6FF00;   /* ACID LIME: primary action, active, selected (on void 17:1) */
    --ox-cyan:     #27D9FF;   /* sound, playback, selected nav */
    --ox-pink:     #FF3D83;   /* editorial / campaign only, never on small text */
    --ox-amu-deep: #7FB000;   /* lime pressed */
    --ox-amu-wash: rgba(182,255,0,.10);

    /* --- Functional (muted, never used as brand) ----------------------- */
    --ox-danger:  #FF6A5A;    /* error: coral, always with text + icon */
    --ox-success: #58E6A0;
    --ox-warning: #FFB020;

    /* --- Lines --------------------------------------------------------- */
    --ox-line:    rgba(245,247,244,.10);
    --ox-line-hi: #282E31;

    /* --- Type: one family, two voices ---------------------------------- */
    --f-display: 'Space Grotesk', 'Helvetica Neue', Arial, system-ui, sans-serif;
    --f-util:    'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;
    --f-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* --- Shape: 0–4px ------------------------------------------------- */
    --r-0: 0; --r-1: 8px; --r-2: 14px; --r-3: 22px; --r-pill: 999px;

    /* --- Motion: heavy objects settle, nothing bounces ----------------- */
    --t-micro: 160ms; --t-base: 320ms; --t-cine: 640ms;
    --e-out: cubic-bezier(.2, .7, .1, 1);
    --ease-spring: cubic-bezier(.2, .7, .1, 1);
    --ease-spring-slow: 420ms cubic-bezier(.2, .7, .1, 1);

    /* --- Re-point v2 tokens -------------------------------------------- */
    --oxus-void: var(--ox-obsidian);
    --oxus-black: var(--ox-obsidian);
    --oxus-graphite: var(--ox-graphite);
    --oxus-steel: var(--ox-smoke);
    --oxus-white: var(--ox-bone);
    --oxus-silver: var(--ox-silver);
    --oxus-ash: var(--ox-ash);
    --oxus-chrome: var(--ox-chrome);
    --oxus-red: var(--ox-amu);        /* v2 "signal" now resolves to AMU */
    --oxus-blood: var(--ox-amu-deep);
    --oxus-line: var(--ox-line);
    --oxus-line-hi: var(--ox-line-hi);

    /* --- Re-point legacy style.css tokens ------------------------------ */
    --bg: var(--ox-obsidian);
    --panel: var(--ox-graphite);
    --panel-2: var(--ox-smoke);
    --border: var(--ox-line);
    --text: var(--ox-bone);
    --muted: var(--ox-silver);
    --red: var(--ox-amu);
    --red-dark: var(--ox-amu-deep);
    --green: var(--ox-success);
    --online: var(--ox-success);
    --gold: var(--ox-chrome);
    --accent-dim: var(--ox-amu-wash);
    --surface-0: var(--ox-obsidian);
    --surface-1: var(--ox-ink);
    --surface-2: var(--ox-graphite);
    --surface-3: #1B2024;
    --surface-4: var(--ox-smoke);
    --surface-5: #333A3E;
    --hairline: var(--ox-line);
    --hairline-strong: var(--ox-line-hi);
    --hairline-soft: rgba(245,247,244,.05);
    --glass-top: rgba(245,247,244,.05);
    --radius-sm: var(--r-1);
    --radius-md: var(--r-1);
    --radius-lg: var(--r-2);
    --radius-xl: var(--r-2);
    /* Material: a lit top edge + contact shadow instead of glow */
    --shadow-sm: inset 0 1px 0 var(--glass-top);
    --shadow-md: inset 0 1px 0 var(--glass-top), 0 1px 0 rgba(0,0,0,.6);
    --shadow-lg: inset 0 1px 0 var(--glass-top), 0 18px 36px -22px rgba(0,0,0,.9);
    --shadow-xl: var(--shadow-lg);

    /* --- Re-point oxus-ui.css tokens ----------------------------------- */
    --ox-bg: var(--ox-obsidian);
    --ox-surface: var(--ox-graphite);
    --ox-surface-hi: var(--ox-smoke);
    --ox-border: var(--ox-line-hi);
    --ox-text: var(--ox-bone);
    --ox-text-2: var(--ox-silver);
    --ox-accent: var(--ox-amu);
    --ox-accent-ink: var(--ox-obsidian);
    --ox-focus: 0 0 0 2px var(--ox-obsidian), 0 0 0 4px var(--ox-amu);
    --ox-font-display: var(--f-display);

    --color-brand-primary: var(--ox-amu);
}

/* --- LIGHT: printed editorial paper, not an inversion ------------------- */
html[data-theme="light"] {
    --ox-obsidian: #F4F2EC;  --ox-ink: #ECEAE3;  --ox-graphite: #E6E3DB;
    --ox-smoke: #D9D6CD;     --ox-ash: #77756E;  --ox-silver: #55544F;
    --ox-chrome: #3A3A37;    --ox-bone: #11110F;
    --ox-amu: #4E7A00;       --ox-amu-deep: #3A5C00;
    --ox-amu-wash: rgba(78,122,0,.10);
    --ox-line: rgba(17,17,15,.10); --ox-line-hi: rgba(17,17,15,.24);
    --surface-3: #DFDCD3; --surface-5: #CFCCC2;
    --glass-top: rgba(255,255,255,.55);
    --shadow-lg: inset 0 1px 0 var(--glass-top), 0 18px 36px -24px rgba(17,17,15,.35);
}

/* --- Base ------------------------------------------------------------- */
html body, body button, body input, body select, body textarea {
    font-family: var(--f-util); font-stretch: 100%; font-feature-settings: "ss01", "cv11";
}
html body { background: var(--ox-obsidian); color: var(--ox-bone); }
a { color: var(--ox-bone); }
a:hover { text-decoration: none; }
::selection { background: var(--ox-amu); color: var(--ox-obsidian); }

/* Grain, kept as paper tooth, not noise */
body::after { opacity: .028; mix-blend-mode: overlay; }

/* --- Type: huge/tiny, thin/heavy ----------------------------------------
   Display is LIGHT and tightly tracked. Weight contrast comes from the 600
   labels beside it, so tension replaces decoration. ----------------------- */
h1, h2, .ox-display, .page-title {
    font-family: var(--f-display); font-stretch: 100%; font-weight: 600;
    letter-spacing: -.035em; line-height: .94; text-transform: none;
}
h1 { font-size: clamp(44px, 7vw, 104px); }
h2 { font-size: clamp(28px, 3.6vw, 52px); }
h3 { font-family: var(--f-display); font-stretch: 100%; font-weight: 500; letter-spacing: -.02em; }

.ox-hero-title, .ox-section-head h2, .ox-index b, .ox-artist-name, .ox-join h2,
.ox-empty h1, .ox-tile-title, .ox-battle-name, .ox-disc-search input[type=text] {
    font-family: var(--f-display); font-stretch: 100%; font-weight: 600;
    letter-spacing: -.035em; text-transform: none;
}
.ox-hero-title { line-height: .86; letter-spacing: -.04em; }
.ox-battle-pct, .ox-empty h1 { font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ox-disc-search input[type=text] { font-weight: 700; letter-spacing: -.04em; }

/* Technical label: tiny, mono, wide. The "second voice". */
.ox-util, .ox-hero-artist, .ox-section-label, .sidebar-group-title, .ox-disc-tags .ox-util,
.ox-row-artist, .ox-tile-artist {
    font-family: var(--f-mono); font-stretch: 100%; font-weight: 400;
    font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
}
.ox-mono { font-family: var(--f-mono); font-weight: 400; color: var(--ox-silver); }
.ox-row-title { font-weight: 500; letter-spacing: -.01em; }
.ox-chrome-text { color: var(--ox-chrome); }

/* --- Buttons: bone object on dark, ink object on paper --------------------
   Primary is NEVER the accent. Accent marks state; the button is material. */
button, .btn, .btn-small, .btn-xs, .oxus-composer button[type=submit], .ox-cta-red {
    font-family: var(--f-mono); font-stretch: 100%; font-weight: 500;
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    background: var(--ox-bone); color: var(--ox-obsidian); border: 1px solid var(--ox-bone);
    border-radius: var(--r-1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 0 rgba(0,0,0,.5);
    transition: background var(--t-micro) linear, color var(--t-micro) linear,
                border-color var(--t-micro) linear, transform var(--t-base) var(--e-out);
}
button:hover, .btn:hover, .btn-small:hover, .btn-xs:hover, .ox-cta-red:hover {
    background: transparent; color: var(--ox-bone); border-color: var(--ox-bone); box-shadow: none;
}
button:active, .btn:active, .btn-small:active { transform: translateY(1px) scale(.995); }
.btn-secondary, .notif-clear-read-btn, .ox-cta {
    background: transparent; color: var(--ox-bone); border: 1px solid var(--ox-line-hi);
    box-shadow: none;
}
.btn-secondary:hover, .notif-clear-read-btn:hover, .ox-cta:hover {
    background: var(--ox-bone); color: var(--ox-obsidian); border-color: var(--ox-bone);
}
.ox-cta { font-family: var(--f-mono); font-stretch: 100%; font-size: 11px; letter-spacing: .14em; font-weight: 500; }
.btn-premium { background: var(--ox-chrome); color: var(--ox-obsidian); border-color: var(--ox-chrome); }
.oxus-composer button[type=submit]:disabled, button:disabled {
    background: var(--ox-smoke); border-color: var(--ox-smoke); color: var(--ox-ash); box-shadow: none; cursor: not-allowed;
}

/* Inputs: recessed, like a machined slot */
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=url], select, textarea, .oxus-composer textarea {
    background: var(--ox-ink); border: 1px solid var(--ox-line); color: var(--ox-bone);
    border-radius: var(--r-1); box-shadow: inset 0 1px 2px rgba(0,0,0,.45);
}
input:focus, select:focus, textarea:focus { border-color: var(--ox-amu); box-shadow: inset 0 1px 2px rgba(0,0,0,.45); }
::placeholder { color: var(--ox-ash); }
.notif-row.unread { border-color: var(--ox-amu); background: var(--ox-amu-wash); }

/* Focus: the one place the accent is always allowed */
:focus-visible { outline: none; box-shadow: var(--ox-focus); border-radius: var(--r-1); }

/* --- Shell: nav rail ---------------------------------------------------- */
@media (min-width: 769px) {
    .sidebar { background: var(--ox-ink); border-right: 1px solid var(--ox-line); }
    .sidebar-link { color: var(--ox-silver); }
    .sidebar-link:hover { background: var(--ox-graphite); color: var(--ox-bone); }
    .sidebar-nav .sidebar-label {
        font-family: var(--f-util); font-stretch: 100%; font-size: 14px; font-weight: 400;
        letter-spacing: -.005em; text-transform: none;
    }
    html.sidebar-expanded .sidebar-nav .sidebar-link .sidebar-label::before {
        font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .08em; color: var(--ox-ash);
    }
    .sidebar-link.active { background: transparent; color: var(--ox-bone); font-weight: 500; }
    .sidebar-link.active::before { background: var(--ox-amu); width: 1px; top: 10px; bottom: 10px; }
    .sidebar-link.active .sidebar-icon { color: var(--ox-amu); }
    .sidebar-link.active .sidebar-icon svg { stroke-width: 1.25; }
    .sidebar-icon svg { stroke-width: 1.25; }   /* one thin line weight for all icons */
    .sidebar-link.is-cta { border-color: var(--ox-line-hi); }
    .sidebar-link.is-cta:hover { border-color: var(--ox-bone); }
    .sidebar-badge { background: var(--ox-bone); color: var(--ox-obsidian); font-family: var(--f-mono); }
    .sidebar-bottom { background: var(--ox-ink); border-top: 1px solid var(--ox-line); }
    .sidebar-logo-label { font-family: var(--f-display); font-stretch: 100%; font-weight: 600; letter-spacing: .32em; font-size: 13px; }
    .sidebar-logo-label .dot { color: var(--ox-amu); }
    .sidebar-premium-cta { border: 1px solid var(--ox-line-hi); color: var(--ox-chrome); background: transparent; }
}
.bottom-nav { background: color-mix(in srgb, var(--ox-ink) 94%, transparent); border-top: 1px solid var(--ox-line); }
nav.topbar { background: var(--ox-obsidian); border-bottom: 1px solid var(--ox-line); }

/* --- Loader: the wordmark arrives light and wide; the emblem is untouched */
#oxus-loader { background: var(--ox-obsidian); }
.oxus-loader-wordmark {
    font-family: var(--f-display); font-stretch: 100%; font-weight: 700;
    font-size: clamp(64px, 16vw, 176px); letter-spacing: .02em; color: var(--ox-bone);
}
.oxus-loader-wordmark span:nth-child(4) { color: var(--ox-bone); }
#oxus-loader .oxus-loader-bar { height: 1px; background: var(--ox-line-hi); margin-top: 32px; width: min(240px, 50vw); }
#oxus-loader #oxus-loader-bar-fill, #oxus-topbar-progress-fill { background: var(--ox-amu); }

/* --- Player: audio hardware ---------------------------------------------
   Hairline progress, square cover, one bone play control. ----------------- */
#oxus-gp .gp-bar {
    background: var(--ox-ink); border-top: 1px solid var(--ox-line-hi);
    box-shadow: inset 0 1px 0 var(--glass-top);
}
#oxus-gp .gp-cover { background: var(--ox-smoke); box-shadow: 0 0 0 1px var(--ox-line); }
#oxus-gp .gp-title { font-family: var(--f-display); font-stretch: 100%; font-weight: 500; font-size: 14px; letter-spacing: -.01em; text-transform: none; }
#oxus-gp .gp-artist { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ox-silver); }
#oxus-gp .gp-btn { color: var(--ox-silver); background: transparent; box-shadow: none; border: 0; }
#oxus-gp .gp-btn:hover { color: var(--ox-bone); background: var(--ox-smoke); }
#oxus-gp .gp-btn.is-on { color: var(--ox-amu); }
#oxus-gp .gp-play { background: var(--ox-bone); color: var(--ox-obsidian); border-radius: var(--r-1); box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }
#oxus-gp .gp-play:hover { background: transparent; color: var(--ox-bone); box-shadow: inset 0 0 0 1px var(--ox-bone); }
#oxus-gp .gp-time { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ox-ash); }
#oxus-gp .gp-scrub { height: 1px; background: var(--ox-line-hi); border-radius: 0; }
#oxus-gp .gp-scrub::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; } /* touch target */
#oxus-gp .gp-scrub-fill { background: var(--ox-bone); border-radius: 0; }
#oxus-gp .gp-scrub-handle { width: 7px; height: 7px; border-radius: 0; background: var(--ox-amu); box-shadow: none; }
#oxus-gp .gp-vol { height: 1px; background: var(--ox-line-hi); border-radius: 0; }
#oxus-gp .gp-vol::-webkit-slider-thumb { width: 7px; height: 7px; border-radius: 0; background: var(--ox-bone); }
#oxus-gp-full { background: var(--ox-obsidian); }
#oxus-gp-full .gpf-cover { border-radius: var(--r-1); box-shadow: 0 0 0 1px var(--ox-line), 0 40px 60px -34px rgba(0,0,0,.95); }

/* --- Home / discover: signature appears only on state --------------------- */
.ox-hero { background: var(--ox-graphite); }
.ox-hero::after { background: linear-gradient(to top, rgba(10,10,9,.9) 0%, rgba(10,10,9,.3) 46%, rgba(10,10,9,0) 72%); } /* functional scrim only */
.ox-hero-artistlink:hover { background: var(--ox-bone); color: var(--ox-obsidian); border-color: var(--ox-bone); }
.ox-section-head { border-top: 1px solid var(--ox-line); }
.ox-section-head a:hover, .ox-index a:hover, .ox-disc-tags a:hover, .ox-artist:hover .ox-artist-name { color: var(--ox-amu); }
.ox-row:hover { background: var(--ox-graphite); }
.ox-row:hover .ox-row-play { background: var(--ox-bone); border-color: var(--ox-bone); color: var(--ox-obsidian); }
.ox-tile-play { background: var(--ox-bone); color: var(--ox-obsidian); border-radius: var(--r-1); }
.ox-tile-cover, .ox-row-cover { box-shadow: 0 0 0 1px var(--ox-line); }
.ox-index a { border-bottom: 1px solid var(--ox-line); }
.ox-disc-search { border-bottom: 1px solid var(--ox-bone); }
.ox-disc-search:focus-within { border-color: var(--ox-amu); }
.ox-disc-search button { background: transparent; color: var(--ox-bone); box-shadow: none; border: 0; }
.ox-disc-search button:hover { background: transparent; color: var(--ox-amu); }
.ox-artist img, .ox-battle-side img { filter: grayscale(.9) contrast(1.06) sepia(.06); }
.ox-artist:hover img, .ox-battle:hover .ox-battle-side img { filter: none; }
.ox-empty-code { color: var(--ox-amu); }

/* Battle: the confrontation is typographic. Accent = the live indicator and
   the leading side's bar, nothing else. */
.ox-battle { background: var(--ox-ink); border: 1px solid var(--ox-line); box-shadow: inset 0 1px 0 var(--glass-top); }
.ox-battle:hover { border-color: var(--ox-line-hi); }
.ox-battle-status i { background: var(--ox-amu); animation: ox-live 2.4s ease-in-out infinite; border-radius: 50%; }
.ox-battle-vs { color: var(--ox-ash); font-family: var(--f-mono); font-size: 11px; letter-spacing: .3em; }
.ox-battle-bar { height: 1px; background: var(--ox-line-hi); }
.ox-battle-bar i { background: var(--ox-amu); }

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ox-battle-status i { animation: none; }
    button:active, .btn:active { transform: none; }
}


/* ==========================================================================
   PART 2 — remaining surfaces
   Rules: no decorative glow, no pills, no gradient fills. Depth = lit top
   edge + contact shadow. Accent only marks live / active / focus / progress.
   ========================================================================== */

/* --- Kill decorative glows (all legacy hero/arena light blobs) ----------- */
.battle-hero-glow, .bv-arena-glow, .store-hero-glow, .tracks-hero-glow,
.profile-banner-glow, .featured-card-glow, .store-featured-glow { display: none !important; }
.battle-hero, .bv-arena, .store-hero, .prem2-hero, .tracks-hero {
    background: var(--ox-obsidian) !important;
}
body:has(.fv3-wrap) { background: var(--ox-obsidian) !important; }

/* --- Pills -> rectangles. Avatars/dots keep their circles. ---------------- */
.store-category-pill, .tracks-chip, .tracks-search-recent-chip, .tracks-sorttabs a,
.tracks-sorttabs button, [class*="-chip"]:not([class*="avatar"]), [class*="-pill"]:not([class*="avatar"]),
[class*="-badge"]:not([class*="dot"]), .bcard-badge, .sidebar-badge, .tag, .hashtag {
    border-radius: var(--r-1);
}
[class*="-chip"], [class*="-pill"] { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.store-category-pill, .tracks-chip { background: transparent; border: 1px solid var(--ox-line-hi); color: var(--ox-silver); box-shadow: none; }
.store-category-pill:hover, .tracks-chip:hover { border-color: var(--ox-bone); color: var(--ox-bone); background: transparent; }
.store-category-pill.active, .tracks-chip.active, .tracks-chip.is-active {
    background: var(--ox-bone); color: var(--ox-obsidian); border-color: var(--ox-bone);
}

/* --- Cards: one material. Lit top edge, hairline, no radius. -------------- */
.card, .rail-card, .store-card, .track-card, .bcard, .sc, .scard, .clan-card, .notif-row,
.fv3-card, .fv3-post, .msg-card, .playlist-card, .featured-card {
    background: var(--ox-graphite); border: 1px solid var(--ox-line); border-radius: var(--r-1);
    box-shadow: inset 0 1px 0 var(--glass-top);
    transition: border-color var(--t-base) var(--e-out), transform var(--t-base) var(--e-out), background var(--t-base) var(--e-out);
}
.store-card:hover, .track-card:hover, .bcard:hover, .clan-card:hover, .featured-card:hover {
    border-color: var(--ox-line-hi); background: var(--surface-3); transform: translateY(-2px);
}
.bcard::before, .track-card-sheen { display: none; }

/* --- Battle: poster, scoreboard, vote ------------------------------------- */
.battle-hero { padding: 96px 24px 64px; text-align: left; border-bottom: 1px solid var(--ox-line); }
.battle-hero-inner { max-width: 1100px; margin: 0; }
.battle-hero-title, .bv-title {
    font-family: var(--f-display); font-weight: 700; letter-spacing: -.04em; line-height: .9;
    font-size: clamp(48px, 9vw, 132px); text-transform: none;
}
.battle-hero-eyebrow, .battle-hero-stat span, .bv-back, .bv-countdown, .bcard-timer, .bcard-badge {
    font-family: var(--f-mono); font-weight: 400; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ox-silver);
}
.battle-hero-stat b { font-family: var(--f-display); font-weight: 700; font-size: clamp(32px, 5vw, 64px); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.bv-countdown { font-variant-numeric: tabular-nums; }
.bv-countdown-urgent { color: var(--ox-amu); }
.bv-arena { border-radius: var(--r-1); border: 1px solid var(--ox-line); background: var(--ox-ink) !important; padding: 40px 24px; box-shadow: inset 0 1px 0 var(--glass-top); }
.bv-side { background: transparent; border: 0; box-shadow: none; }
.bv-side.winner { border: 0; box-shadow: none; }
.bv-avatar, .vs-avatar, .bcard-avatar { width: 112px; height: 112px; border-radius: var(--r-1); border: 0; box-shadow: 0 0 0 1px var(--ox-line); filter: grayscale(.9) contrast(1.06) sepia(.06); transition: filter var(--t-base) linear; }
.bv-side.winner .bv-avatar, .bcard-fighter.is-winner .bcard-avatar { border: 0; box-shadow: 0 0 0 1px var(--ox-bone); filter: none; }
.bv-side:hover .bv-avatar { filter: none; }
.bv-name, .bcard-name { font-family: var(--f-display); font-weight: 600; font-size: clamp(22px, 3.4vw, 44px); letter-spacing: -.04em; }
.bv-name a { color: var(--ox-bone); }
.bv-crown, .bcard-crown { color: var(--ox-bone); }
.bv-mid span, .bcard-vs { border-radius: 0; border: 0; background: transparent; width: auto; height: auto; color: var(--ox-ash); font-family: var(--f-mono); font-weight: 400; letter-spacing: .3em; }
.bv-pct-num, .vs-pct { font-family: var(--f-display); font-weight: 700; font-size: clamp(40px, 6vw, 88px); letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: .9; }
.vs-bar, .bv-bar, .bcard-bar { height: 1px; background: var(--ox-line-hi); border-radius: 0; margin-top: 18px; position: relative; overflow: visible; }
.vs-bar-fill, .bv-bar-fill, .bcard-bar-fill { background: var(--ox-bone) !important; border-radius: 0; height: 3px; top: -1px; position: absolute; left: 0; }
.bv-side.winner .bv-bar-fill, .bcard-fighter.is-winner ~ .bcard-bar .bcard-bar-fill { background: var(--ox-amu) !important; }
.battle-vote-actions .btn, .battle-vote-form button {
    min-height: 52px; font-size: 11px; letter-spacing: .2em;
    transition: background var(--t-base) var(--e-out), color var(--t-base) var(--e-out), transform var(--t-base) var(--e-out);
}
.battle-vote-actions .btn:active, .battle-vote-form button:active { transform: scale(.985); }
.bcard-badge { background: transparent; border: 1px solid var(--ox-line-hi); }
.bcard-badge-active { color: var(--ox-amu); border-color: var(--ox-amu); }
.bcard-live-dot { background: var(--ox-amu); animation: ox-live 2.4s ease-in-out infinite; }
.battle-status.active { color: var(--ox-amu); }
.battle-status.declined, .battle-status.cancelled { color: var(--ox-danger); }

/* --- Shop: archive ----------------------------------------------------- */
.store-hero { padding: 96px 24px 56px; text-align: left; border-bottom: 1px solid var(--ox-line); }
.store-hero-title { font-family: var(--f-display); font-weight: 700; letter-spacing: -.04em; line-height: .9; font-size: clamp(48px, 9vw, 132px); text-transform: none; }
.store-hero-eyebrow, .store-card-category, .store-card-creator, .store-hero-stat span {
    font-family: var(--f-mono); font-size: 10.5px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--ox-silver);
}
.store-grid { gap: 40px 24px; }
.store-card { background: transparent; border: 0; box-shadow: none; padding: 0; }
.store-card:hover { background: transparent; transform: none; }
.store-card-cover { border-radius: 0; background: var(--ox-graphite); box-shadow: 0 0 0 1px var(--ox-line); overflow: hidden; }
.store-card-cover img { transition: transform var(--t-cine) var(--e-out); }
.store-card:hover .store-card-cover img { transform: scale(1.025); }
.store-card-title { font-family: var(--f-display); font-weight: 400; font-size: 16px; letter-spacing: -.015em; }
.store-card-price, .store-product-price { font-family: var(--f-mono); font-weight: 400; font-size: 12px; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--ox-bone); }
.store-card-avatar { border-radius: 50%; }
.store-product-cover { border-radius: 0; box-shadow: 0 0 0 1px var(--ox-line); }
.store-product-price { font-family: var(--f-display); font-weight: 700; font-size: clamp(36px, 5vw, 72px); letter-spacing: -.035em; }
.store-product-owned { color: var(--ox-amu); font-family: var(--f-mono); letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }
.store-review-stars, .store-star-input { color: var(--ox-bone); }
.store-featured-card { background: var(--ox-ink); border-radius: var(--r-1); }

/* --- Artist / profile: magazine cover ------------------------------------ */
.profile-banner { filter: grayscale(.85) contrast(1.05); transition: filter var(--t-cine) var(--e-out), transform var(--t-cine) var(--e-out); }
.profile-banner-wrap:hover .profile-banner { transform: scale(1.02); filter: none; }
.profile-banner-scrim { background: linear-gradient(to top, rgba(10,10,9,.92), rgba(10,10,9,0) 70%) !important; }
.profile-avatar { border-radius: var(--r-1); box-shadow: 0 0 0 1px var(--ox-line-hi); }
.profile-avatar-wrap:hover { transform: none; }
.profile-avatar-wrap.is-premium::before { border-radius: var(--r-1); background: none; box-shadow: 0 0 0 1px var(--ox-chrome); }
.profile-name, .profile-username, .profile-header h1 {
    font-family: var(--f-display); font-weight: 700; letter-spacing: -.04em; line-height: .92; font-size: clamp(40px, 7vw, 96px);
}
.profile-stats, .profile-stat span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ox-silver); }
.profile-stat b, .profile-stats b { font-family: var(--f-display); font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

/* --- Tracks / album / release: objects ---------------------------------- */
.tracks-hero { padding: 96px 24px 48px; border-bottom: 1px solid var(--ox-line); text-align: left; }
.tracks-hero-eyebrow { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ox-silver); }
.tracks-hero-text h1, .tracks-hero-title { font-family: var(--f-display); font-weight: 700; letter-spacing: -.04em; font-size: clamp(48px, 8vw, 120px); line-height: .9; }
.tracks-hero-spot-cover, .track-card-cover, .album-cover { border-radius: 0; box-shadow: 0 0 0 1px var(--ox-line), 0 24px 40px -28px rgba(0,0,0,.9); }
.track-card-playbtn, .tracks-hero-spot-play { background: var(--ox-bone); color: var(--ox-obsidian); border-radius: var(--r-1); }
.track-card-rank { font-family: var(--f-display); font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--ox-ash); }
.track-card-title { font-family: var(--f-display); font-weight: 400; letter-spacing: -.015em; }
.track-card-artist { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ox-silver); }
.track-detail-title { font-family: var(--f-display); font-weight: 700; letter-spacing: -.035em; font-size: clamp(40px, 6vw, 88px); line-height: .92; }
.tracks-search-field, .tracks-search-bar input { border-radius: var(--r-1); }

/* --- Messages / DM / community / feed ----------------------------------- */
.msg-row .msg-bubble { background: var(--ox-graphite); color: var(--ox-bone); border: 1px solid var(--ox-line); border-radius: var(--r-1); box-shadow: none; }
.msg-row.mine .msg-bubble { background: var(--ox-bone) !important; color: var(--ox-obsidian); border-color: var(--ox-bone); }
.msg-row.mine .msg-bubble a { color: var(--ox-obsidian); text-decoration: underline; }
.msg-time, .fv3-time, .thread-meta, .comment-meta, .notif-time { font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; color: var(--ox-ash); }
.fv3-card, .fv3-post { border-radius: var(--r-1); }
.fv3-menu-item-danger, .msg-more-menu-danger { color: var(--ox-danger) !important; }
.story-bubble.has-story { background: none !important; border: 1px solid var(--ox-amu); border-radius: 50%; }
.clan-card { background: var(--ox-graphite); }
.notif-row.unread::before { background: var(--ox-amu); }

/* --- Premium: pearl, not gold ----------------------------------------------
   Gold is retired. Premium reads as chrome/pearl everywhere. ------------- */
.prem2-hero { padding: 96px 24px 64px; text-align: left; }
.prem2-logo { border-radius: var(--r-1); background: transparent !important; box-shadow: 0 0 0 1px var(--ox-line-hi); }
.premium-active-until-urgent { color: var(--ox-danger); }

/* --- Generic modal / menu / toast material ----------------------------- */
.modal, .modal-content, .dropdown, .menu, [role="dialog"], [role="menu"], .toast {
    background: var(--ox-ink); border: 1px solid var(--ox-line-hi); border-radius: var(--r-2);
    box-shadow: inset 0 1px 0 var(--glass-top), 0 28px 48px -24px rgba(0,0,0,.9);
}
.error { color: var(--ox-danger); border: 1px solid var(--ox-danger); background: transparent; border-radius: var(--r-1); }
.success, .flash-success { color: var(--ox-success); }
hr { border: 0; border-top: 1px solid var(--ox-line); }

/* --- Scrollbars: hairline ------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--ox-smoke) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--ox-smoke); border-radius: 0; }

/* --- Mobile: composed, not shrunk ------------------------------------------ */
@media (max-width: 768px) {
    .battle-hero, .store-hero, .tracks-hero, .prem2-hero { padding: 56px 16px 32px; }
    .bv-avatar, .vs-avatar { width: 88px; height: 88px; }
    .store-grid { gap: 28px 12px; }
    button, .btn { min-height: 44px; }          /* thumb target */
}
@media (prefers-reduced-motion: reduce) {
    .store-card:hover, .track-card:hover, .bcard:hover { transform: none; }
    .bcard-live-dot { animation: none; }
}


/* ==========================================================================
   PART 3 — Black + controlled neon. Stroke language. Visual Experience.
   One dominant accent per screen. LIME acts, CYAN plays/selects, PINK is
   editorial only. Neon is never a border color and never a default glow.
   ========================================================================== */

/* --- Shape: 8 / 14 / 22 ------------------------------------------------- */
button, .btn, .btn-small, .btn-xs, .ox-cta, .ox-cta-red { border-radius: var(--r-1); font-family: var(--f-util); font-size: 13px; letter-spacing: .01em; text-transform: none; font-weight: 600; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=url], select, textarea { border-radius: var(--r-1); background: var(--ox-ink); box-shadow: none; }
.card, .rail-card, .store-card, .track-card, .bcard, .sc, .scard, .clan-card, .notif-row, .fv3-card, .fv3-post, .msg-card, .playlist-card, .featured-card, .bv-arena, .ox-battle, .store-featured-card { border-radius: var(--r-2); }
.modal, .modal-content, [role="dialog"], .dropdown, .menu, [role="menu"], .toast { border-radius: var(--r-3); }
.store-category-pill, .tracks-chip, [class*="-chip"]:not([class*="avatar"]), [class*="-pill"]:not([class*="avatar"]), .tag, .hashtag { border-radius: var(--r-pill); font-family: var(--f-util); font-size: 12.5px; letter-spacing: 0; text-transform: none; }
.store-card-cover, .track-card-cover, .store-product-cover, .tracks-hero-spot-cover { border-radius: var(--r-1); }
.bv-avatar, .vs-avatar, .bcard-avatar, .profile-avatar { border-radius: var(--r-2); }

/* --- Buttons: Primary lime / Secondary raised / Ghost / Destructive -------- */
button, .btn, .btn-small, .btn-xs, .ox-cta-red, .oxus-composer button[type=submit] {
    background: var(--ox-amu); color: #060708; border: 1px solid var(--ox-amu); box-shadow: none;
}
button:hover, .btn:hover, .btn-small:hover, .btn-xs:hover, .ox-cta-red:hover { background: #CCFF4D; border-color: #CCFF4D; color: #060708; box-shadow: none; }
button:active, .btn:active { background: var(--ox-amu-deep); border-color: var(--ox-amu-deep); }
.btn-secondary, .notif-clear-read-btn, .ox-cta, .tracks-upload-toggle {
    background: var(--ox-graphite); color: var(--ox-bone); border: 1px solid var(--ox-line-hi);
}
.btn-secondary:hover, .notif-clear-read-btn:hover, .ox-cta:hover { background: var(--surface-3); color: var(--ox-bone); border-color: var(--ox-silver); }
.btn-ghost, .btn-tertiary { background: transparent; color: var(--ox-bone); border: 1px solid var(--ox-line-hi); }
.btn-danger, .btn-destructive, button.danger { background: transparent; color: var(--ox-danger); border: 1px solid var(--ox-danger); }
.btn-danger:hover, .btn-destructive:hover, button.danger:hover { background: var(--ox-danger); color: #060708; }
.btn-loading, button[aria-busy=true] { pointer-events: none; opacity: .75; }
.store-category-pill.active, .tracks-chip.active, .tracks-chip.is-active { background: var(--ox-amu); color: #060708; border-color: var(--ox-amu); }
.msg-row.mine .msg-bubble { background: var(--ox-amu) !important; color: #060708; border-color: var(--ox-amu); }
.msg-row.mine .msg-bubble a { color: #060708; }
.ox-tile-play, .track-card-playbtn, .tracks-hero-spot-play, .ox-row:hover .ox-row-play { background: var(--ox-amu); color: #060708; border-color: var(--ox-amu); }
button:disabled { background: var(--ox-smoke); border-color: var(--ox-smoke); color: var(--ox-ash); }

/* --- Cyan: sound + selected navigation -------------------------------------- */
@media (min-width: 769px) {
    .sidebar-link.active::before { background: var(--ox-cyan); width: 2px; }
    .sidebar-link.active, .sidebar-link.active .sidebar-icon { color: var(--ox-cyan); }
}
#oxus-gp .gp-btn.is-on, #oxus-gp .gp-scrub-handle { color: var(--ox-cyan); background-color: var(--ox-cyan); }
#oxus-gp .gp-btn.is-on { background: transparent; }
#oxus-gp .gp-scrub-fill { background: var(--ox-cyan); }
#oxus-gp .gp-play { background: var(--ox-amu); color: #060708; border-radius: var(--r-pill); }
#oxus-gp .gp-play:hover { background: #CCFF4D; box-shadow: none; color: #060708; }
#oxus-gp .gp-cover { border-radius: var(--r-1); }
.is-playing .oxi-play, [data-playing="1"] { color: var(--ox-cyan); }
.bottom-nav a.active, .bottom-nav .active { color: var(--ox-cyan); }

/* --- Focus + selection: always visible, always lime -------------------------- */
:focus-visible { outline: 2px solid var(--ox-amu); outline-offset: 2px; box-shadow: none; }
input:focus, select:focus, textarea:focus { border-color: var(--ox-amu); }
.ox-hero-meta { color: var(--ox-silver); }
.ox-hero-meta::first-letter { color: var(--ox-pink); }

/* --- Headlines: bold, tight, a single painted word -------------------------- */
.ox-hero-title { font-size: clamp(52px, 10vw, 148px); line-height: .88; position: relative; display: inline-block; padding-bottom: .12em; }
.ox-section-head h2 { font-size: clamp(26px, 3.4vw, 48px); }
.ox-util, .ox-hero-artist, .sidebar-group-title { font-family: var(--f-mono); }

/* --- OXUS Stroke Language -------------------------------------------------------
   Vector marks, never bitmap. Used on: hero word, featured frame, section
   divider, one loading accent. Never behind forms, prices, licences, cards. --- */
.ox-stroke { position: absolute; left: -2%; bottom: -.02em; width: 104%; height: .34em; overflow: visible; pointer-events: none; }
.ox-stroke path { fill: none; stroke: var(--ox-amu); stroke-linecap: round; stroke-linejoin: round; }
.ox-stroke .s-main { stroke-width: 7; }
.ox-stroke .s-over { stroke-width: 2; stroke: var(--ox-cyan); opacity: .9; }
.ox-stroke path { stroke-dasharray: 1; stroke-dashoffset: 1; }   /* pathLength=1 set in markup */
.ox-stroke.is-drawn path { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--e-out); }
.ox-stroke.is-drawn .s-over { transition-delay: 220ms; transition-duration: 700ms; }
.ox-divider-stroke { display: block; width: 100%; height: 14px; margin: 8px 0; }
.ox-divider-stroke path { fill: none; stroke: var(--ox-line-hi); stroke-width: 1.5; }

/* --- VISUAL EXPERIENCE PROFILES -------------------------------------------------
   html[data-visual] = performance | balanced | high
   html[data-motion] = reduced (OS preference) | full
   Performance: no decorative motion, no blur, no parallax, strokes static.
   Balanced   : short transitions, strokes draw once, no parallax.
   High       : richer reveals, parallax on hero, hover depth.               --- */
html[data-visual="performance"] *, html[data-visual="performance"] *::before, html[data-visual="performance"] *::after,
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    scroll-behavior: auto !important;
}
html[data-visual="performance"] *, html[data-visual="performance"] *::before, html[data-visual="performance"] *::after {
    transition-duration: 90ms !important; transition-delay: 0s !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; will-change: auto !important;
}
html[data-visual="performance"] body::after { display: none; }
html[data-visual="performance"] .ox-stroke path, html[data-motion="reduced"] .ox-stroke path { stroke-dashoffset: 0 !important; transition: none !important; }
html[data-visual="performance"] .ox-stroke .s-over, html[data-motion="reduced"] .ox-stroke .s-over { display: none; }
html[data-visual="performance"] .store-card:hover, html[data-visual="performance"] .track-card:hover,
html[data-visual="performance"] .bcard:hover { transform: none; }
html[data-visual="performance"] .store-card:hover .store-card-cover img, html[data-visual="performance"] .ox-hero:hover .ox-hero-img { transform: none; }
html[data-visual="performance"] .bcard-live-dot, html[data-visual="performance"] .ox-battle-status i { animation: none; }
html[data-motion="reduced"] .store-card:hover, html[data-motion="reduced"] .track-card:hover { transform: none; }
html[data-motion="reduced"] [data-parallax] { transform: none !important; }

html[data-visual="balanced"] { --t-base: 240ms; --t-cine: 420ms; }
html[data-visual="high"]     { --t-base: 360ms; --t-cine: 780ms; }
html[data-visual="high"] .ox-stroke.is-drawn .s-main { filter: drop-shadow(0 0 6px rgba(182,255,0,.35)); }
html[data-visual="high"] .ox-hero-img { will-change: transform; transition: transform var(--t-cine) var(--e-out); }
html[data-visual="high"] .ox-hero:hover .ox-hero-img { transform: scale(1.045); }
html[data-visual="high"] .store-card:hover .store-card-cover img, html[data-visual="high"] .track-card:hover .track-card-cover { transform: scale(1.04); }
html[data-visual="high"] .ox-section-head, html[data-visual="high"] .ox-row { opacity: 0; transform: translateY(14px); }
html[data-visual="high"] .is-revealed { opacity: 1 !important; transform: none !important; transition: opacity var(--t-cine) var(--e-out), transform var(--t-cine) var(--e-out); }
html[data-visual="high"][data-motion="reduced"] .ox-section-head, html[data-visual="high"][data-motion="reduced"] .ox-row { opacity: 1; transform: none; }

/* Hover effects only where hover exists. Touch never "sticks" a hover state. */
@media (hover: none) {
    .store-card:hover, .track-card:hover, .bcard:hover, .clan-card:hover, .featured-card:hover { transform: none; background: var(--ox-graphite); border-color: var(--ox-line); }
    .store-card:hover .store-card-cover img, .ox-hero:hover .ox-hero-img { transform: none; }
}

/* --- Settings: Visual Experience control ----------------------------------------- */
.vx { border: 1px solid var(--ox-line-hi); border-radius: var(--r-2); background: var(--ox-ink); padding: 20px; margin: 20px 0; }
.vx legend { font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; padding: 0 8px; }
.vx-sub { color: var(--ox-silver); font-size: 14px; margin: 0 0 16px; }
.vx-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vx-opt { position: relative; }
.vx-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.vx-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--ox-line-hi); border-radius: var(--r-2); background: var(--ox-graphite); min-height: 132px; transition: border-color var(--t-base) var(--e-out), background var(--t-base) var(--e-out); }
.vx-card svg { width: 28px; height: 28px; fill: none; stroke: var(--ox-silver); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vx-name { font-weight: 600; font-size: 15px; }
.vx-desc { color: var(--ox-silver); font-size: 13px; line-height: 1.4; }
.vx-opt input:focus-visible + .vx-card { outline: 2px solid var(--ox-amu); outline-offset: 2px; }
.vx-opt input:checked + .vx-card { border-color: var(--ox-amu); background: var(--ox-amu-wash); }
.vx-opt input:checked + .vx-card svg { stroke: var(--ox-amu); }
.vx-opt input:checked + .vx-card .vx-name::after { content: " \00B7  " attr(data-on); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ox-amu); }
.vx-note { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--ox-ash); margin: 14px 0 0; }
@media (max-width: 640px) { .vx-opts { grid-template-columns: 1fr; } .vx-card { min-height: 0; } }

/* Primary CTA must out-rank the secondary .ox-cta rule */
.ox-cta.ox-cta-red { background: var(--ox-amu); color: #060708; border-color: var(--ox-amu); }
.ox-cta.ox-cta-red:hover { background: #CCFF4D; border-color: #CCFF4D; color: #060708; }