/* ==========================================================================
   OXUS v2 — design system layer (Phase 1)
   Loads AFTER style.css and oxus-ui.css. It re-points the legacy tokens at
   the new palette so every existing page inherits the new identity, then
   restyles the shared shell: nav rail, buttons, loader, player bar.
   Rules: red is a signature (active / live / play / action), never a fill
   for large areas. Motion explains state. Corners are sharp.
   ========================================================================== */

:root {
    /* --- Palette ------------------------------------------------------- */
    --oxus-void:     #050505;
    --oxus-black:    #0B0B0C;
    --oxus-graphite: #151516;
    --oxus-steel:    #202022;
    --oxus-white:    #F5F5F2;
    --oxus-silver:   #A6A6A2;
    --oxus-ash:      #8A8A86;   /* 5.7:1 on black (was 3.9:1, failed AA for small text) */
    --oxus-red:      #E50914;   /* fills only: white-on-red 4.8:1 */
    --oxus-red-text: #FF4A52;   /* red as TEXT on dark: 5.9:1 on black */
    --oxus-blood:    #8F080F;
    --oxus-chrome:   #C7C7C3;
    --oxus-line:     rgba(245,245,242,.10);
    --oxus-line-hi:  rgba(245,245,242,.22);

    /* --- Type ---------------------------------------------------------- */
    --f-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;   /* wdth 100-125, wght 800 */
    --f-util:    'Archivo', 'Arial Narrow', system-ui, sans-serif;   /* wdth 62-75, uppercase  */
    --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* --- Spacing: 4px base (4 8 12 16 24 32 48 64 80 96 128 160 192) --- */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
    --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 80px; --s-10: 96px;
    --s-11: 128px; --s-12: 160px; --s-13: 192px;

    /* --- Radius: sharp ------------------------------------------------- */
    --r-0: 0; --r-1: 2px; --r-2: 4px;

    /* --- Motion -------------------------------------------------------- */
    --t-micro: 140ms; --t-base: 260ms; --t-cine: 520ms;
    --e-out: cubic-bezier(.16, 1, .3, 1);

    /* ---- Re-point legacy tokens (style.css / oxus-ui.css) -------------- */
    --bg: var(--oxus-black);
    --panel: var(--oxus-graphite);
    --panel-2: var(--oxus-steel);
    --text: var(--oxus-white);
    --muted: var(--oxus-silver);
    --border: var(--oxus-line);
    --red: var(--oxus-red);
    --red-dark: var(--oxus-blood);
    --accent-dim: rgba(229,9,20,.14);
    --surface-0: var(--oxus-void);
    --surface-1: var(--oxus-graphite);
    --surface-2: #181819;
    --surface-3: var(--oxus-steel);
    --surface-4: #2a2a2d;
    --surface-5: #343438;
    --hairline: var(--oxus-line);
    --hairline-strong: var(--oxus-line-hi);
    --radius-sm: var(--r-1);
    --radius-md: var(--r-1);
    --radius-lg: var(--r-2);
    --radius-xl: var(--r-2);
    /* --radius-pill intentionally untouched: avatars and dots rely on it */
    --shadow-sm: none; --shadow-md: 0 1px 0 var(--oxus-line);
    --shadow-lg: 0 12px 32px -16px rgba(0,0,0,.8); --shadow-xl: var(--shadow-lg);

    /* ---- Re-point oxus-ui.css tokens: acid green -> OXUS red ----------- */
    --ox-bg: var(--oxus-black);
    --ox-surface: var(--oxus-graphite);
    --ox-surface-hi: var(--oxus-steel);
    --ox-border: var(--oxus-line-hi);
    --ox-text: var(--oxus-white);
    --ox-text-2: var(--oxus-silver);
    --ox-accent: var(--oxus-red);
    --ox-accent-ink: #fff;
    --ox-danger: var(--oxus-red);
    --ox-focus: 0 0 0 2px var(--oxus-black), 0 0 0 4px var(--oxus-white);
    --ox-font-display: var(--f-display);
}

/* --- Base ------------------------------------------------------------- */
html body, body button, body input, body select, body textarea {
    font-family: var(--f-util);
    font-stretch: 100%;
}
html body { background: var(--oxus-black); color: var(--oxus-white); -webkit-font-smoothing: antialiased; }

/* Film grain: one fixed layer, no repaint cost, kept under 4% */
body::after {
    content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .035;
    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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Display: big names and titles. Not applied to body copy. */
h1, h2, .ox-display, .page-title {
    font-family: var(--f-display); font-stretch: 112%; font-weight: 800;
    letter-spacing: -.025em; line-height: .98; text-transform: none;
}
h1 { font-size: clamp(40px, 6vw, 72px); }
h2 { font-size: clamp(28px, 3.4vw, 44px); }
h3 { font-family: var(--f-display); font-stretch: 105%; font-weight: 700; letter-spacing: -.01em; }

/* Utility + mono helpers for new markup */
.ox-util { font-family: var(--f-util); font-stretch: 68%; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ox-mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--oxus-silver); }
.ox-chrome-text { background: none; color: var(--oxus-chrome); -webkit-text-fill-color: currentColor; }

/* Links keep a quiet default; red appears on interaction only */
a { transition: color var(--t-micro) linear; }

/* --- Buttons: rectangular, condensed caps, no pill --------------------- */
button, .btn, .btn-small, .btn-xs, .oxus-composer button[type=submit] {
    border-radius: var(--r-1);
    font-family: var(--f-util); font-stretch: 72%; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    background: var(--oxus-red); color: #fff; border: 1px solid var(--oxus-red);
    box-shadow: none;
    transition: background var(--t-micro) linear, border-color var(--t-micro) linear,
                color var(--t-micro) linear, transform var(--t-micro) var(--e-out);
}
button:hover, .btn:hover, .btn-small:hover, .btn-xs:hover {
    background: #fff; color: var(--oxus-void); border-color: #fff;
    box-shadow: none; transform: none;
}
button:active, .btn:active, .btn-small:active { transform: translateY(1px); box-shadow: none; }
.btn-secondary, .notif-clear-read-btn {
    background: transparent; color: var(--oxus-white); border: 1px solid var(--oxus-line-hi);
}
.btn-secondary:hover, .notif-clear-read-btn:hover { background: var(--oxus-white); color: var(--oxus-void); border-color: var(--oxus-white); }
.btn-premium { background: var(--oxus-chrome); color: var(--oxus-void); border-color: var(--oxus-chrome); box-shadow: none; }
.btn-premium:hover { background: #fff; box-shadow: none; }
.oxus-composer button[type=submit]:disabled { background: var(--oxus-steel); border-color: var(--oxus-steel); color: var(--oxus-ash); }

/* Inputs */
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=url], select, textarea, .oxus-composer textarea {
    border-radius: var(--r-1); background: var(--oxus-graphite); border: 1px solid var(--oxus-line-hi);
    color: var(--oxus-white);
}
input:focus, select:focus, textarea:focus { border-color: var(--oxus-white); }
::selection { background: var(--oxus-red); color: #fff; }

/* Unread / live states use the single signal color */
.notif-row.unread { border-color: var(--oxus-red); background: rgba(229,9,20,.06); }

/* --- Desktop nav rail ------------------------------------------------- */
@media (min-width: 769px) {
    .sidebar { background: var(--oxus-void); border-right: 1px solid var(--oxus-line); }
    .sidebar-nav { counter-reset: oxn; }

    .sidebar-group-title {
        font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: .14em;
        color: var(--oxus-ash);
    }
    .sidebar-group + .sidebar-group { border-top: 1px solid var(--oxus-line); }

    .sidebar-link {
        position: relative; height: 38px; border-radius: 0; color: var(--oxus-silver);
        background: transparent; border: 0;
        transition: color var(--t-micro) linear, background var(--t-micro) linear;
    }
    .sidebar-link:hover { background: var(--oxus-graphite); color: var(--oxus-white); }
    .sidebar-link .sidebar-icon { opacity: .75; }
    .sidebar-link:hover .sidebar-icon { opacity: 1; }

    .sidebar-nav .sidebar-label {
        font-family: var(--f-util); font-stretch: 70%; font-size: 15px; font-weight: 700;
        letter-spacing: .09em; text-transform: uppercase;
    }
    /* 01 / ROW numbering — pure CSS, no markup change. Expanded state only. */
    html.sidebar-expanded .sidebar-nav .sidebar-link .sidebar-label::before {
        counter-increment: oxn;
        content: counter(oxn, decimal-leading-zero) " / ";
        font-family: var(--f-mono); font-stretch: 100%; font-size: 10px; font-weight: 500;
        letter-spacing: .02em; color: var(--oxus-ash); margin-right: 2px;
    }
    html.sidebar-expanded .sidebar-nav .sidebar-link.active .sidebar-label::before { color: var(--oxus-red); }

    /* Active: red indicator + stronger type. Never a red fill. */
    .sidebar-link.active { background: var(--oxus-graphite); color: var(--oxus-white); font-weight: 800; }
    .sidebar-link.active::before {
        display: block; content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
        background: var(--oxus-red); border-radius: 0;
        animation: ox-indicator var(--t-base) var(--e-out) both;
    }
    .sidebar-link.active .sidebar-icon { opacity: 1; color: var(--oxus-red); }
    .sidebar-link.active .sidebar-icon svg { stroke-width: 2; }
    @keyframes ox-indicator { from { transform: scaleY(0); } to { transform: scaleY(1); } }

    .sidebar-link.is-cta { border: 1px solid var(--oxus-line-hi); color: var(--oxus-white); }
    .sidebar-link.is-cta:hover { border-color: var(--oxus-red); }
    .sidebar-link.is-minor .sidebar-label { font-size: 13px; font-weight: 600; }
    .sidebar-badge { background: var(--oxus-red); color: #fff; border-radius: var(--r-1); font-family: var(--f-mono); font-size: 10px; }
    .sidebar-bottom { background: var(--oxus-void); border-top: 1px solid var(--oxus-line); }
    .sidebar-logo-label { font-family: var(--f-display); font-stretch: 125%; font-weight: 900; letter-spacing: -.02em; }
    .sidebar-logo-label .dot { color: var(--oxus-red); }
    .sidebar-premium-cta { border-radius: var(--r-1); background: transparent; border: 1px solid var(--oxus-chrome); color: var(--oxus-chrome); box-shadow: none; }
}

/* --- Loader: O > OX > OXU > OXUS --------------------------------------- */
#oxus-loader { background: var(--oxus-void); }
#oxus-loader .oxus-loader-glow, #oxus-loader .oxus-loader-dots,
#oxus-loader .oxus-mark-spin, #oxus-loader .oxus-loader-word { display: none; }
.oxus-loader-wordmark {
    display: flex; font-family: var(--f-display); font-stretch: 125%; font-weight: 900;
    font-size: clamp(72px, 18vw, 200px); line-height: .9; letter-spacing: -.04em; color: var(--oxus-white);
}
.oxus-loader-wordmark span { display: block; clip-path: inset(0 100% 0 0); animation: ox-letter var(--t-cine) var(--e-out) forwards; }
.oxus-loader-wordmark span:nth-child(1) { animation-delay: 60ms; }
.oxus-loader-wordmark span:nth-child(2) { animation-delay: 200ms; }
.oxus-loader-wordmark span:nth-child(3) { animation-delay: 340ms; }
.oxus-loader-wordmark span:nth-child(4) { animation-delay: 480ms; color: var(--oxus-red); }
@keyframes ox-letter { to { clip-path: inset(0 0 0 0); } }
#oxus-loader .oxus-loader-bar { height: 2px; border-radius: 0; background: var(--oxus-graphite); margin-top: 24px; }
#oxus-loader #oxus-loader-bar-fill { background: var(--oxus-red); border-radius: 0; }
#oxus-topbar-progress-fill { background: var(--oxus-red); }

/* --- Persistent player bar -------------------------------------------- */
#oxus-gp .gp-bar { background: var(--oxus-void); border-top: 1px solid var(--oxus-line-hi); border-radius: 0; }
#oxus-gp .gp-cover { border-radius: 0; background: var(--oxus-steel); }
#oxus-gp .gp-title { font-family: var(--f-util); font-stretch: 80%; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: 14px; }
#oxus-gp .gp-artist { font-family: var(--f-mono); font-size: 11px; color: var(--oxus-silver); }
#oxus-gp .gp-btn { border-radius: var(--r-1); background: transparent; color: var(--oxus-silver); border: 0; }
#oxus-gp .gp-btn:hover { color: var(--oxus-white); background: var(--oxus-steel); }
#oxus-gp .gp-btn.is-on { color: var(--oxus-red); }
#oxus-gp .gp-play { border-radius: var(--r-1); background: var(--oxus-red); color: #fff; }
#oxus-gp .gp-play:hover { background: #fff; color: var(--oxus-void); }

/* --- Accessibility ----------------------------------------------------- */
:focus-visible { outline: none; box-shadow: var(--ox-focus); border-radius: var(--r-1); }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
    .oxus-loader-wordmark span { clip-path: none; }
}

/* ==========================================================================
   PHASE 2 — Home
   ========================================================================== */

/* Retire the legacy corner-graffiti motif; texture comes from grain only. */
body.oxus-dna::before { display: none; }

.ox-home { max-width: 1320px; margin: 0 auto; padding: var(--s-6) var(--s-5) var(--s-10); }
.ox-home .rail-card {   /* neutralise legacy card chrome: tilt, panel, border */
    flex: none; background: none; border: 0; border-radius: 0; padding: 0; perspective: none;
    transform: none !important; box-shadow: none !important; color: inherit; text-decoration: none; user-select: auto;
}
.ox-home a { text-decoration: none; }

/* CTA: rectangular, used where a <button> would nest inside an <a> */
.ox-cta {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--s-5);
    font-family: var(--f-util); font-stretch: 72%; font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--oxus-white); border: 1px solid var(--oxus-line-hi); background: transparent; cursor: pointer;
    transition: background var(--t-micro) linear, color var(--t-micro) linear, border-color var(--t-micro) linear;
}
.ox-cta:hover { background: var(--oxus-white); color: var(--oxus-void); border-color: var(--oxus-white); }
.ox-cta-red { background: var(--oxus-red); border-color: var(--oxus-red); color: #fff; }
.ox-cta-red:hover { background: #fff; border-color: #fff; color: var(--oxus-void); }

/* Section scaffolding: asymmetric head, hairline, lots of air */
.ox-section { margin-top: var(--s-10); }
.ox-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); border-top: 1px solid var(--oxus-line-hi); padding-top: var(--s-3); margin-bottom: var(--s-5); }
.ox-section-head h2 { margin: 0; font-size: clamp(28px, 4vw, 56px); text-transform: uppercase; }
.ox-section-head a { color: var(--oxus-silver); font-size: 14px; }
.ox-section-head a:hover { color: var(--oxus-red); }
.ox-section-label { display: flex; justify-content: space-between; padding: 0 0 var(--s-3); border-bottom: 1px solid var(--oxus-line); font-size: 13px; color: var(--oxus-silver); }

/* ---- Feature: 8 cols hero / 4 cols chart ------------------------------ */
.ox-feature { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-6) var(--s-5); position: relative; }
.ox-hero { grid-column: 1 / span 8; position: relative; display: block; min-height: min(72vh, 680px); overflow: hidden; background: var(--oxus-graphite); }
.ox-hero-img { position: absolute; inset: 0; background: var(--oxus-steel) center / cover no-repeat; transition: transform var(--t-cine) var(--e-out); }
.ox-hero:hover .ox-hero-img { transform: scale(1.025); }
/* scrim is functional: guarantees white type stays readable on any artwork */
.ox-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,5,5,.92) 0%, rgba(5,5,5,.35) 45%, rgba(5,5,5,0) 70%); pointer-events: none; }
.ox-hero-meta { position: absolute; z-index: 1; top: var(--s-4); left: var(--s-4); color: var(--oxus-white); }
.ox-hero-body { position: absolute; z-index: 1; left: var(--s-5); right: var(--s-5); bottom: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.ox-hero-artist { font-family: var(--f-util); font-stretch: 70%; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 16px; color: var(--oxus-silver); }
.ox-hero-title { font-family: var(--f-display); font-stretch: 118%; font-weight: 900; letter-spacing: -.035em; line-height: .88; text-transform: uppercase; font-size: clamp(48px, 9vw, 144px); overflow-wrap: anywhere; }
.ox-hero-actions { margin-top: var(--s-4); display: flex; gap: var(--s-3); }
.ox-hero { grid-row: 1; }
.ox-hero-artistlink { grid-column: 1 / span 8; grid-row: 1; justify-self: end; align-self: start; margin: var(--s-4); z-index: 2; color: var(--oxus-white); font-size: 14px; padding: var(--s-2) var(--s-3); background: rgba(5,5,5,.7); border: 1px solid var(--oxus-line-hi); }
.ox-hero-artistlink:hover { background: var(--oxus-red); border-color: var(--oxus-red); }

.ox-chart { grid-column: 9 / span 4; grid-row: 1; align-self: end; }
.ox-row { display: grid; grid-template-columns: 28px 48px 1fr auto 32px; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--oxus-line); transition: background var(--t-micro) linear, padding var(--t-base) var(--e-out); }
.ox-row:hover { background: var(--oxus-graphite); padding-left: var(--s-2); padding-right: var(--s-2); }
.ox-row-cover { width: 48px; height: 48px; background: var(--oxus-steel) center / cover no-repeat; }
.ox-row-text { min-width: 0; display: flex; flex-direction: column; }
.ox-row-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ox-row-artist { font-size: 13px; color: var(--oxus-silver); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ox-row-play { width: 32px; height: 32px; display: grid; place-items: center; font-size: 11px; color: var(--oxus-silver); border: 1px solid var(--oxus-line-hi); transition: all var(--t-micro) linear; }
.ox-row:hover .ox-row-play { background: var(--oxus-red); border-color: var(--oxus-red); color: #fff; }

/* ---- New releases: horizontal strip, varied scale --------------------- */
.ox-strip { display: flex; gap: var(--s-5); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--s-3); scrollbar-width: thin; scrollbar-color: var(--oxus-steel) transparent; }
.ox-home .ox-tile { flex: 0 0 220px; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--s-2); }
.ox-home .ox-tile:nth-child(3n+1) { flex-basis: 300px; }          /* deliberate rhythm, not a uniform grid */
.ox-tile-cover { position: relative; aspect-ratio: 1; background: var(--oxus-steel) center / cover no-repeat; overflow: hidden; }
.ox-tile-play { position: absolute; right: var(--s-3); bottom: var(--s-3); width: 40px; height: 40px; display: grid; place-items: center; background: var(--oxus-red); color: #fff; font-size: 12px; opacity: 0; transform: translateY(6px); transition: opacity var(--t-base) var(--e-out), transform var(--t-base) var(--e-out); }
.ox-tile:hover .ox-tile-play, .ox-tile:focus-visible .ox-tile-play { opacity: 1; transform: none; }
.ox-tile-title { font-family: var(--f-display); font-stretch: 105%; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ox-tile-artist { text-transform: uppercase; }

/* ---- Battles: poster / scoreboard ------------------------------------- */
.ox-battles { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-5); }
.ox-battle { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: var(--s-3); padding: var(--s-6) var(--s-5) var(--s-5); background: var(--oxus-graphite); border: 1px solid var(--oxus-line); color: var(--oxus-white); transition: border-color var(--t-base) var(--e-out); }
.ox-battle:hover { border-color: var(--oxus-red); }
.ox-battle:nth-child(2) { align-self: end; }
.ox-battle-status { position: absolute; top: var(--s-4); left: var(--s-5); display: flex; align-items: center; gap: var(--s-2); color: var(--oxus-white); }
.ox-battle-status i { width: 8px; height: 8px; background: var(--oxus-red); animation: ox-live 1.6s steps(2, jump-none) infinite; }
@keyframes ox-live { 50% { opacity: .25; } }
.ox-battle-side { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.ox-battle-side-b { text-align: right; align-items: flex-end; }
.ox-battle-side img { width: 100%; max-width: 160px; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.15); transition: filter var(--t-base) linear; }
.ox-battle:hover .ox-battle-side img { filter: none; }
.ox-battle-name { font-family: var(--f-util); font-stretch: 70%; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 16px; overflow-wrap: anywhere; }
.ox-battle-pct { font-family: var(--f-display); font-stretch: 112%; font-weight: 900; font-size: clamp(40px, 5vw, 72px); line-height: .9; letter-spacing: -.04em; }
.ox-battle-pct small { font-size: .4em; color: var(--oxus-silver); }
.ox-battle-vs { align-self: center; color: var(--oxus-red); font-size: 22px; }
.ox-battle-bar { grid-column: 1 / -1; height: 3px; background: var(--oxus-steel); }
.ox-battle-bar i { display: block; height: 100%; background: var(--oxus-red); }
.ox-battle-foot { grid-column: 1 / -1; text-align: center; }

/* ---- Index: numbered list instead of icon cards ----------------------- */
.ox-index { display: flex; flex-direction: column; }
.ox-index a { display: grid; grid-template-columns: 56px minmax(120px, 280px) 1fr 24px; align-items: baseline; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--oxus-line); color: var(--oxus-white); transition: padding var(--t-base) var(--e-out), color var(--t-micro) linear; }
.ox-index a:hover { padding-left: var(--s-3); color: var(--oxus-red); }
.ox-index b { font-family: var(--f-display); font-stretch: 112%; font-weight: 800; font-size: clamp(22px, 3vw, 40px); letter-spacing: -.02em; text-transform: uppercase; }
.ox-index em { font-style: normal; color: var(--oxus-silver); font-size: 15px; }
.ox-index i { font-style: normal; text-align: right; }

/* ---- Join + empty ------------------------------------------------------ */
.ox-join { margin-top: var(--s-10); padding: var(--s-8) 0 0; border-top: 1px solid var(--oxus-line-hi); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.ox-join h2 { flex: 1 1 100%; margin: 0 0 var(--s-3); font-size: clamp(32px, 6vw, 88px); text-transform: uppercase; }
.ox-empty { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--s-3); }
.ox-empty h1 { margin: 0; font-size: clamp(56px, 12vw, 160px); font-stretch: 118%; font-weight: 900; }
.ox-empty p { color: var(--oxus-silver); margin: 0 0 var(--s-3); }
.ox-empty-code { color: var(--oxus-red); }

/* ---- Home: tablet / mobile are composed, not shrunk ------------------- */
@media (max-width: 1100px) {
    .ox-hero { grid-column: 1 / -1; min-height: 60vh; }
    .ox-hero-artistlink { grid-column: 1 / -1; }
    .ox-chart { grid-column: 1 / -1; grid-row: auto; }
    .ox-battles { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .ox-home { padding: 0 0 var(--s-9); }
    .ox-feature { gap: var(--s-5); }
    .ox-hero { min-height: calc(var(--vh, 1vh) * 78 - var(--bottomnav-h, 0px)); }  /* immersive artwork */
    .ox-chart, .ox-section, .ox-join { padding-left: var(--s-4); padding-right: var(--s-4); }
    .ox-hero-body { left: var(--s-4); right: var(--s-4); bottom: var(--s-4); }
    .ox-hero-actions .ox-cta { min-height: 52px; flex: 1; }               /* thumb-sized */
    .ox-row { grid-template-columns: 24px 44px 1fr 32px; }
    .ox-row-dur { display: none; }
    .ox-home .ox-tile, .ox-home .ox-tile:nth-child(3n+1) { flex-basis: 62vw; }
    .ox-battle { padding: var(--s-6) var(--s-4) var(--s-4); }
    .ox-index a { grid-template-columns: 36px 1fr 24px; }
    .ox-index em { display: none; }
}

/* ==========================================================================
   PHASE 2b — Discover (explore.php)
   ========================================================================== */
.ox-disc { max-width: 1320px; margin: 0 auto; padding: var(--s-6) var(--s-5) var(--s-10); }
.ox-disc a { text-decoration: none; color: inherit; }
.ox-disc-section { margin-top: var(--s-9); }

/* Search is the page's voice: oversized, unboxed, underlined */
.ox-disc-head { display: flex; flex-direction: column; gap: var(--s-4); }
.ox-disc-search { display: flex; align-items: center; border-bottom: 2px solid var(--oxus-white); transition: border-color var(--t-base) var(--e-out); }
.ox-disc-search:focus-within { border-color: var(--oxus-red); }
.ox-disc-search input[type=text] {
    flex: 1; min-width: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0 0 var(--s-2);
    font-family: var(--f-display); font-stretch: 118%; font-weight: 900; letter-spacing: -.035em; text-transform: uppercase;
    font-size: clamp(48px, 11vw, 152px); line-height: 1; color: var(--oxus-white);
}
.ox-disc-search input[type=text]::placeholder { color: var(--oxus-ash); }
.ox-disc-search input[type=text]:focus { box-shadow: none; outline: none; }
.ox-disc-search button { width: auto; flex: none; background: transparent; border: 0; color: var(--oxus-white); font-size: clamp(28px, 5vw, 64px); padding: 0 var(--s-3); letter-spacing: 0; }
.ox-disc-search button:hover { background: transparent; color: var(--oxus-red); }
.ox-disc-tags { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-5); }
.ox-disc-tags .ox-util { color: var(--oxus-ash); font-size: 13px; }
.ox-disc-tags a { font-family: var(--f-mono); font-size: 13px; color: var(--oxus-silver); transition: color var(--t-micro) linear; }
.ox-disc-tags a:hover { color: var(--oxus-red); }

/* New artists: portraits at different sizes, names large */
.ox-artists { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-5); }
.ox-artist { grid-column: span 3; display: flex; flex-direction: column; gap: var(--s-2); }
.ox-artist:nth-child(5n+1) { grid-column: span 6; }
.ox-artist img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.12); background: var(--oxus-steel); transition: filter var(--t-base) linear; }
.ox-artist:nth-child(5n+1) img { aspect-ratio: 16 / 10; }
.ox-artist:hover img { filter: none; }
.ox-artist-name { font-family: var(--f-display); font-stretch: 112%; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; font-size: clamp(18px, 2.2vw, 30px); line-height: 1; transition: color var(--t-micro) linear; }
.ox-artist:hover .ox-artist-name { color: var(--oxus-red); }

/* Archive mosaic: dense auto-flow, periodic double-size tiles */
.ox-mosaic { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); grid-auto-flow: dense; gap: var(--s-1); }
.ox-mtile { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--oxus-graphite); }
.ox-mtile:nth-child(9n+1), .ox-mtile:nth-child(13n+6) { grid-column: span 2; grid-row: span 2; }
.ox-mtile img, .ox-mtile video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-cine) var(--e-out), filter var(--t-base) linear; filter: grayscale(.35) contrast(1.05); }
.ox-mtile:hover img, .ox-mtile:hover video, .ox-mtile:focus-visible img { transform: scale(1.04); filter: none; }
.ox-mtile::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(to top, rgba(5,5,5,.85), transparent); opacity: 0; transition: opacity var(--t-base) var(--e-out); pointer-events: none; }
.ox-mtile:hover::after, .ox-mtile:focus-visible::after { opacity: 1; }
.ox-mtile-meta { position: absolute; z-index: 1; left: var(--s-3); bottom: var(--s-2); color: var(--oxus-white); opacity: 0; transform: translateY(4px); transition: opacity var(--t-base) var(--e-out), transform var(--t-base) var(--e-out); }
.ox-mtile:hover .ox-mtile-meta, .ox-mtile:focus-visible .ox-mtile-meta { opacity: 1; transform: none; }
.ox-mtile-kind { position: absolute; z-index: 1; top: var(--s-2); left: var(--s-2); padding: 2px 6px; background: var(--oxus-red); color: #fff; }
@media (hover: none) { .ox-mtile-meta, .ox-mtile::after { opacity: 1; transform: none; } }  /* touch: no hover, so always show */

/* Search results */
.ox-disc-tabs { display: flex; gap: var(--s-6); margin-top: var(--s-6); border-bottom: 1px solid var(--oxus-line-hi); }
.ox-disc-tabs a { position: relative; padding: var(--s-3) 0; color: var(--oxus-silver); font-size: 15px; }
.ox-disc-tabs a .ox-mono { margin-left: var(--s-1); }
.ox-disc-tabs a.active { color: var(--oxus-white); }
.ox-disc-tabs a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--oxus-red); }
.ox-results { display: flex; flex-direction: column; }
.ox-result-user { display: grid; grid-template-columns: 40px 56px 1fr auto; align-items: center; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--oxus-line); transition: padding var(--t-base) var(--e-out), background var(--t-micro) linear; }
.ox-result-user:hover { background: var(--oxus-graphite); padding-left: var(--s-3); padding-right: var(--s-3); }
.ox-result-user img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-1); background: var(--oxus-steel); }
.ox-result-name { font-family: var(--f-display); font-stretch: 112%; font-weight: 800; font-size: clamp(20px, 3vw, 36px); letter-spacing: -.02em; text-transform: uppercase; }
.ox-result-post { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) 0; border-bottom: 1px solid var(--oxus-line); }
.ox-result-post:hover .ox-result-text { color: var(--oxus-white); }
.ox-result-author { font-size: 14px; color: var(--oxus-silver); }
.ox-result-text { font-size: 18px; line-height: 1.4; color: var(--oxus-silver); transition: color var(--t-micro) linear; }

/* Branded empty state */
.ox-nosignal { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-9) 0; }
.ox-nosignal .ox-mono { color: var(--oxus-red); }
.ox-nosignal b { font-family: var(--f-display); font-stretch: 118%; font-weight: 900; font-size: clamp(40px, 8vw, 104px); letter-spacing: -.035em; line-height: .9; }
.ox-nosignal em { font-style: normal; color: var(--oxus-silver); }

@media (max-width: 768px) {
    .ox-disc { padding: var(--s-5) var(--s-4) var(--s-9); }
    .ox-artists { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
    .ox-artist, .ox-artist:nth-child(5n+1) { grid-column: span 1; }
    .ox-artist:nth-child(5n+1) { grid-column: 1 / -1; }
    .ox-mosaic { grid-template-columns: repeat(3, 1fr); }
    .ox-disc-tabs { gap: var(--s-4); overflow-x: auto; }
    .ox-result-user { grid-template-columns: 56px 1fr; }
    .ox-result-user > .ox-mono { display: none; }
}

/* ==========================================================================
   PHASE 3 — Music archive (tracks.php). CSS-only: the page's JS (search,
   embeds, inline players, hero colour sampling) keeps its markup contract.
   Everything is scoped to body.ox-tracks.
   ========================================================================== */
body.ox-tracks { --tk-pad: var(--s-5); }

/* ---- Hero: type first, artwork second, no glow/vinyl/chamfer ---------- */
.ox-tracks .tracks-hero { max-width: 1320px; margin: var(--s-6) auto 0; padding: 0 var(--tk-pad); overflow: visible; }
.ox-tracks .tracks-hero-texture, .ox-tracks .tracks-hero-glow, .ox-tracks .tracks-hero-vinyl-disc, .ox-tracks .tracks-hero-icon { display: none; }
.ox-tracks .tracks-hero-inner {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--s-6);
    background: none; border: 0; border-top: 1px solid var(--oxus-line-hi); border-radius: 0; clip-path: none;
    backdrop-filter: none; -webkit-backdrop-filter: none; padding: var(--s-5) 0 0;
}
.ox-tracks .tracks-hero-text { grid-column: 1; grid-row: 1; }
.ox-tracks .tracks-hero-spot-wrap { grid-column: 2; grid-row: 1; justify-self: end; width: 100%; max-width: 420px; }
.ox-tracks .tracks-hero-spot-cover { display: block; position: relative; width: 100%; height: auto; max-width: none; aspect-ratio: 1; border-radius: 0; overflow: hidden; background: var(--oxus-steel); border: 0; box-shadow: none; }
.ox-tracks .tracks-hero-spot-cover img { transition: transform var(--t-cine) var(--e-out); }
.ox-tracks .tracks-hero-spot-cover:hover img { transform: scale(1.03); }
.ox-tracks .tracks-hero-eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--oxus-red); display: flex; align-items: center; gap: var(--s-2); }
.ox-tracks .tracks-hero-eyebrow .oxus-ico { display: none; }
.ox-tracks .tracks-hero-eq i { background: var(--oxus-red); border-radius: 0; }
.ox-tracks .tracks-hero-inner h1 {
    font-family: var(--f-display); font-stretch: 118%; font-weight: 900; letter-spacing: -.04em; line-height: .88;
    text-transform: uppercase; font-size: clamp(48px, 9vw, 144px); margin: var(--s-3) 0 var(--s-4); overflow-wrap: anywhere;
}
.ox-tracks .tracks-hero-sub { font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; color: var(--oxus-silver); text-transform: uppercase; flex-wrap: wrap; }
.ox-tracks .tracks-hero-actions { margin-top: var(--s-5); gap: var(--s-2); }
.ox-tracks .hero-action-btn {
    border-radius: var(--r-1); background: transparent; color: var(--oxus-white); border: 1px solid var(--oxus-line-hi); box-shadow: none;
    font-family: var(--f-util); font-stretch: 72%; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; min-height: 44px; padding: 0 var(--s-5);
    transition: background var(--t-micro) linear, color var(--t-micro) linear, border-color var(--t-micro) linear;
}
.ox-tracks .hero-action-btn:hover { background: var(--oxus-white); color: var(--oxus-void); border-color: var(--oxus-white); }
.ox-tracks .hero-action-primary { background: var(--oxus-red); border-color: var(--oxus-red); color: #fff; }
.ox-tracks .hero-action-primary:hover { background: #fff; border-color: #fff; color: var(--oxus-void); }
.ox-tracks .hero-action-ghost { border-color: transparent; padding: 0 var(--s-2); color: var(--oxus-silver); }

/* ---- Search: same underline voice as Discover ------------------------- */
.ox-tracks .tracks-search-bar { max-width: 1320px; padding: 0 var(--tk-pad); margin-top: var(--s-7); }
.ox-tracks .tracks-search-field { background: transparent; border: 0; border-bottom: 1px solid var(--oxus-line-hi); border-radius: 0; padding: 0 0 var(--s-2); }
.ox-tracks .tracks-search-field:focus-within { background: transparent; border-bottom-color: var(--oxus-red); }
.ox-tracks .tracks-search-field input { font-family: var(--f-util); font-stretch: 80%; font-size: 22px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: transparent; border: 0; box-shadow: none; }
.ox-tracks .tracks-search-recent-chip { border-radius: var(--r-1); font-family: var(--f-mono); font-size: 11px; }

/* ---- List heading, sort, filters -------------------------------------- */
.ox-tracks .tracks-list-heading { max-width: 1320px; margin: var(--s-9) auto 0; padding: 0 var(--tk-pad); }
.ox-tracks .tracks-list-heading h2 { font-size: clamp(32px, 5vw, 72px); text-transform: uppercase; margin: 0; border-top: 1px solid var(--oxus-line-hi); padding-top: var(--s-3); }
.ox-tracks .tracks-sorttabs { max-width: 1320px; margin: var(--s-4) auto 0; padding: 0 var(--tk-pad); display: flex; gap: var(--s-6); border-bottom: 1px solid var(--oxus-line); }
.ox-tracks .tracks-sorttabs a {
    position: relative; background: transparent; border: 0; border-radius: 0; padding: var(--s-3) 0; box-shadow: none;
    font-family: var(--f-util); font-stretch: 72%; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 15px; color: var(--oxus-silver);
}
.ox-tracks .tracks-sorttabs a:hover { color: var(--oxus-white); border: 0; }
.ox-tracks .tracks-sorttabs a.active { background: transparent; color: var(--oxus-white); box-shadow: none; }
.ox-tracks .tracks-sorttabs a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--oxus-red); }
.ox-tracks .tracks-sorttabs .oxus-ico { display: none; }
.ox-tracks .tracks-chip-row { max-width: 1320px; margin: var(--s-4) auto 0; padding: 0 var(--tk-pad); gap: var(--s-2); }
.ox-tracks .tracks-chip-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--oxus-ash); margin-left: var(--s-3); }
.ox-tracks .tracks-chip { border-radius: var(--r-1); background: transparent; border: 1px solid var(--oxus-line); font-family: var(--f-mono); font-size: 11px; color: var(--oxus-silver); transform: none; }
.ox-tracks .tracks-chip:hover { border-color: var(--oxus-white); color: var(--oxus-white); transform: none; }
.ox-tracks .tracks-chip.active { background: transparent; border-color: var(--oxus-red); color: var(--oxus-red); }
.ox-tracks .tracks-chip-clear { margin-left: var(--s-3); }

/* ---- Catalogue rows: replaces the card grid --------------------------- */
.ox-tracks .tracks-card-grid { max-width: 1320px; padding: 0 var(--tk-pad); margin: var(--s-5) auto var(--s-6); display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.ox-tracks .track-card {
    display: grid; grid-template-columns: 48px 88px minmax(0, 1fr); align-items: start; column-gap: var(--s-4);
    background: transparent; border: 0; border-bottom: 1px solid var(--oxus-line); border-radius: 0; padding: var(--s-4) 0; box-shadow: none;
    transform: none !important; transition: background var(--t-micro) linear, padding var(--t-base) var(--e-out);
}
.ox-tracks .track-card:hover { background: var(--oxus-graphite); padding-left: var(--s-3); padding-right: var(--s-3); border-color: var(--oxus-line); }
.ox-tracks .track-card-rank { position: static; background: transparent; backdrop-filter: none; padding: var(--s-2) 0 0; font-family: var(--f-mono); font-size: 12px; font-weight: 500; color: var(--oxus-ash); }
.ox-tracks .track-card:hover .track-card-rank { color: var(--oxus-red); }
.ox-tracks .track-card-cover { width: 88px; margin: 0; border-radius: 0; }
.ox-tracks .track-card-cover-btn { width: 88px; }
.ox-tracks .track-card-playbtn { border-radius: 0; background: var(--oxus-red); }
.ox-tracks .track-card-wave i { background: var(--oxus-red); }
.ox-tracks .track-card-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-5); row-gap: var(--s-1); }
.ox-tracks .track-card-body > * { grid-column: 1 / -1; }
.ox-tracks .track-card-title { grid-column: 1; font-family: var(--f-display); font-stretch: 108%; font-weight: 800; letter-spacing: -.02em; font-size: clamp(20px, 2.4vw, 32px); line-height: 1.05; text-transform: uppercase; white-space: normal; }
.ox-tracks .track-card-title:hover { color: var(--oxus-red); text-decoration: none; }
.ox-tracks .track-card-artist { grid-column: 1; font-family: var(--f-util); font-stretch: 80%; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; color: var(--oxus-silver); }
.ox-tracks .track-card-album { font-style: normal; }
.ox-tracks .track-row-dot { display: none; }
.ox-tracks .track-card-tags { grid-column: 1; margin-top: var(--s-1); }
.ox-tracks .track-card-tag { border-radius: var(--r-1); background: transparent; border: 1px solid var(--oxus-line); font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--oxus-silver); }
.ox-tracks .track-card-stats { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: start; margin: 0; flex-direction: column; align-items: flex-end; gap: var(--s-1); font-family: var(--f-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.ox-tracks .track-card-stats .tl-stat { background: transparent; border: 0; padding: 0; color: var(--oxus-silver); }
.ox-tracks .track-card-player { margin-top: var(--s-3); max-width: 720px; }
.ox-tracks .track-card-footer { margin-top: var(--s-2); font-family: var(--f-mono); font-size: 11px; color: var(--oxus-ash); }
.ox-tracks .track-row-avatar { border-radius: var(--r-1); }

/* Upload FAB: rectangular, red */
.ox-tracks .tracks-fab { border-radius: var(--r-1); background: var(--oxus-red); box-shadow: none; }

@media (max-width: 900px) {
    .ox-tracks .tracks-hero-inner { grid-template-columns: 1fr; }
    .ox-tracks .tracks-hero-spot-wrap { grid-column: 1; grid-row: 1; justify-self: stretch; max-width: none; }
    .ox-tracks .tracks-hero-text { grid-row: 2; }
}
@media (max-width: 768px) {
    body.ox-tracks { --tk-pad: var(--s-4); }
    .ox-tracks .tracks-hero-actions .hero-action-btn { flex: 1 1 auto; min-height: 52px; }
    .ox-tracks .tracks-sorttabs { gap: var(--s-5); overflow-x: auto; }
    .ox-tracks .tracks-chip-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--s-2); }
    .ox-tracks .track-card { grid-template-columns: 72px minmax(0, 1fr); }
    .ox-tracks .track-card-rank { display: none; }
    .ox-tracks .track-card-cover, .ox-tracks .track-card-cover-btn { width: 72px; }
    .ox-tracks .track-card-stats { grid-column: 1; grid-row: auto; flex-direction: row; justify-self: start; gap: var(--s-4); }
}


/* ==========================================================================
   v2.1 — contrast, emblem, battle states, player a11y
   ========================================================================== */
/* Red used as small text must use the lighter text token (AA on dark). */
.ox-tracks .tracks-hero-eyebrow, .ox-nosignal .ox-mono, .ox-empty-code, .ox-battle-vs,
.ox-tracks .tracks-chip.active, .ox-tracks .track-card:hover .track-card-rank,
html.sidebar-expanded .sidebar-nav .sidebar-link.active .sidebar-label::before { color: var(--oxus-red-text); }
.ox-section-head a:hover, .ox-index a:hover, .ox-disc-tags a:hover, .ox-artist:hover .ox-artist-name,
.ox-disc-search button:hover, .ox-tracks .track-card-title:hover { color: var(--oxus-red-text); }

/* Chrome emblem is a 150px opaque bitmap: cap it at nav sizes, never upscale. */
.sidebar-logo img, .oxus-wheel-fab img { width: 40px; height: 40px; max-width: 64px; object-fit: contain; background: #000; }
nav.topbar .logo-mark { width: 32px; height: 32px; object-fit: contain; background: #000; }

/* Battle: no votes is a real state, not 50 / 50. */
.ox-battle-pct { color: var(--oxus-white); }
.ox-battle-foot { color: var(--oxus-silver); }
.ox-battle-status { font-size: 11px; }
.ox-battle-status:not(:has(i)) { color: var(--oxus-silver); }

/* Buttons that are disabled must read as unavailable. */
button:disabled, .btn[aria-disabled=true] { opacity: .5; cursor: not-allowed; }

/* Skip-link target + minimum touch size for icon buttons */
.icon-btn, #oxus-gp .gp-btn { min-width: 44px; min-height: 44px; }


/* ==========================================================================
   PHASE 4a — Battle detail (battle.php). Scoped to .battle-view-2.
   Poster composition: names and numbers carry the tension, not effects.
   ========================================================================== */
.battle-view-2 { max-width: 1100px; margin: 0 auto; padding: var(--s-6) var(--s-5) var(--s-10); }
.battle-view-2 .bv-back { color: var(--oxus-silver); font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; }
.battle-view-2 .bv-back:hover { color: var(--oxus-white); }
.battle-view-2 .bv-title { font-size: clamp(34px, 7vw, 96px); text-transform: uppercase; margin: var(--s-4) 0 var(--s-2); overflow-wrap: anywhere; }
.battle-view-2 .bv-countdown { font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; color: var(--oxus-silver); }
.battle-view-2 .bv-countdown-urgent { color: var(--oxus-red-text); animation: none; }   /* urgency by colour + text, not pulsing */
.battle-view-2 .bv-arena { background: none; border: 0; border-top: 1px solid var(--oxus-line-hi); border-radius: 0; padding: var(--s-6) 0 0; margin-top: var(--s-5); }
.battle-view-2 .bv-arena-glow { display: none; }
.battle-view-2 .bv-grid { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: var(--s-5); align-items: end; }
.battle-view-2 .bv-side { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.battle-view-2 .bv-side:last-child { text-align: right; align-items: flex-end; }
.battle-view-2 .bv-avatar { width: 100%; height: auto; aspect-ratio: 4 / 5; max-width: 340px; border: 0; border-radius: 0; background-size: cover; background-position: center; filter: grayscale(1) contrast(1.12); }
.battle-view-2 .bv-side.winner .bv-avatar { filter: none; }
.battle-view-2 .bv-side.loser .bv-avatar { opacity: .55; }
.battle-view-2 .bv-crown { position: static; transform: none; color: var(--oxus-white); }
.battle-view-2 .bv-winner-label { color: var(--oxus-white); background: var(--oxus-red); padding: 2px var(--s-2); font-size: 13px; }
.battle-view-2 .bv-name { font-family: var(--f-display); font-stretch: 112%; font-weight: 900; letter-spacing: -.03em; text-transform: uppercase; font-size: clamp(22px, 4vw, 48px); line-height: .95; overflow-wrap: anywhere; }
.battle-view-2 .bv-name a { color: inherit; text-decoration: none; }
.battle-view-2 .bv-name a:hover { color: var(--oxus-red-text); }
.battle-view-2 .bv-mid span { background: none; border: 0; box-shadow: none; color: var(--oxus-red-text); font-family: var(--f-util); font-stretch: 70%; font-weight: 800; font-size: 28px; letter-spacing: .1em; }
.battle-view-2 .bv-bar { height: 4px; border-radius: 0; background: var(--oxus-steel); margin-top: var(--s-3); }
.battle-view-2 .bv-bar-fill { border-radius: 0; background: var(--oxus-red); }
.battle-view-2 .vs-pct { font-family: var(--f-display); font-stretch: 112%; font-weight: 900; font-size: clamp(18px, 2.4vw, 28px); color: var(--oxus-white); letter-spacing: -.02em; }
.battle-view-2 .bv-pct-num { font-size: clamp(44px, 8vw, 104px); letter-spacing: -.04em; line-height: .9; }
.battle-view-2 .vs-pct-empty { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--oxus-silver); }
.battle-view-2 .vs-listen-link a { font-family: var(--f-util); font-stretch: 72%; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--oxus-silver); }
.battle-view-2 .vs-listen-link a:hover { color: var(--oxus-white); }

/* Vote: the one unmistakable action */
.battle-view-2 .bv-panel { background: none; border: 0; border-top: 1px solid var(--oxus-line); border-radius: 0; padding: var(--s-5) 0 0; margin-top: var(--s-6); }
.battle-view-2 .battle-vote-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.battle-view-2 .battle-vote-form { margin: 0; }
.battle-view-2 .bv-vote { width: 100%; min-height: 64px; padding: var(--s-3) var(--s-4); font-size: 17px; overflow-wrap: anywhere; }
.battle-view-2 .bv-vote-b { background: transparent; color: var(--oxus-white); border-color: var(--oxus-white); }
.battle-view-2 .bv-vote-b:hover { background: var(--oxus-white); color: var(--oxus-void); }
.battle-view-2 .error { border-left: 3px solid var(--oxus-red); background: var(--oxus-graphite); color: var(--oxus-white); padding: var(--s-3) var(--s-4); border-radius: 0; margin-bottom: var(--s-4); }
.battle-view-2 .success { color: var(--oxus-white); }

@media (max-width: 640px) {
    .battle-view-2 { padding: var(--s-4) var(--s-4) var(--s-9); }
    .battle-view-2 .bv-grid { gap: var(--s-3); }
    .battle-view-2 .bv-mid span { font-size: 18px; }
    .battle-view-2 .battle-vote-actions { grid-template-columns: 1fr; }   /* stacked, full-width thumb targets */
}


/* ==========================================================================
   PHASE 4b — Profile (profile.php). Identity first, numbers second.
   ========================================================================== */
.profile-banner-wrap { border-radius: 0; height: clamp(180px, 28vw, 340px); }
.profile-banner-glow { display: none; }
.profile-banner { filter: grayscale(.4) contrast(1.05); }
.profile-banner-wrap:hover .profile-banner { transform: none; }          /* no zoom-on-hover gimmick */
.profile-banner-scrim { background: linear-gradient(to top, var(--oxus-black) 0%, rgba(11,11,12,.55) 45%, rgba(11,11,12,0) 100%); }

.profile-avatar { border-radius: var(--r-1); box-shadow: none; border: 1px solid var(--oxus-line-hi); }
.profile-avatar-wrap:hover { transform: none; }
.profile-avatar-wrap:hover .profile-avatar { box-shadow: none; }
.profile-display-name { font-family: var(--f-display); font-stretch: 112%; font-weight: 900; letter-spacing: -.035em; line-height: .92;
    text-transform: uppercase; font-size: clamp(32px, 6vw, 72px); overflow-wrap: anywhere; word-break: break-word; }
.profile-username { font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; color: var(--oxus-silver); overflow-wrap: anywhere; }
.profile-actions .btn, .profile-actions button { min-height: 44px; }

/* Primary identity numbers: large, separated by hairlines, not boxed */
.profile-body .panel { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.stats-dashboard { display: flex; flex-wrap: wrap; gap: 0; background: none; border: 0; padding: 0; }
.stats-dashboard .stat-card { background: none; border: 0; border-radius: 0; box-shadow: none; transform: none; }
.stats-dashboard .stat-primary { flex: 1 1 0; min-width: 96px; padding: var(--s-3) var(--s-4) var(--s-3) 0; margin-right: var(--s-4); border-right: 1px solid var(--oxus-line); }
.stats-dashboard .stat-primary:nth-child(4) { border-right: 0; }
.stats-dashboard .stat-primary b { display: block; font-family: var(--f-display); font-stretch: 112%; font-weight: 900; letter-spacing: -.03em; line-height: 1; font-size: clamp(26px, 4vw, 44px); color: var(--oxus-white); }
.stats-dashboard .stat-primary span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--oxus-silver); }
a.stat-card:hover b { color: var(--oxus-red-text); }
/* Secondary numbers: one quiet wrapped line beneath, never competing with identity */
.stats-dashboard .stat-minor { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: var(--s-2); margin: var(--s-3) var(--s-5) 0 0; padding: 0; }
.stats-dashboard .stat-primary ~ .stat-minor:first-of-type { margin-top: var(--s-4); }
.stats-dashboard .stat-minor b { font-family: var(--f-mono); font-size: 13px; font-weight: 700; color: var(--oxus-white); }
.stats-dashboard .stat-minor span { font-family: var(--f-mono); font-size: 11px; color: var(--oxus-silver); }
.profile-bio-text { font-size: clamp(16px, 2vw, 20px); line-height: 1.5; max-width: 62ch; color: var(--oxus-white); overflow-wrap: anywhere; margin-top: var(--s-5); }

/* Tabs: same underline language as the music archive */
.profile-tabs { gap: var(--s-6); border-bottom: 1px solid var(--oxus-line); background: none; padding: 0; border-radius: 0; overflow-x: auto; }
.profile-tab { position: relative; background: none; border: 0; border-radius: 0; padding: var(--s-3) 0; box-shadow: none;
    font-family: var(--f-util); font-stretch: 72%; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 15px; color: var(--oxus-silver); white-space: nowrap; }
.profile-tab:hover { color: var(--oxus-white); }
.profile-tab.active { color: var(--oxus-white); background: none; box-shadow: none; }
.profile-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--oxus-red); }

@media (max-width: 640px) {
    .stats-dashboard .stat-primary { flex: 1 1 40%; border-right: 0; margin-right: 0; border-bottom: 1px solid var(--oxus-line); }
    .profile-actions { width: 100%; }
    .profile-actions .btn, .profile-actions button { flex: 1; }
}


/* ==========================================================================
   PHASE 4c — Notifications + conversation list.
   Rows, not cards. Unread = bar + bold + dot (never colour alone).
   ========================================================================== */
.notif-row[hidden], #notifStatus[hidden] { display: none; }
.notif-list, .convo-list { display: flex; flex-direction: column; gap: 0; }
.notif-row, .convo-row { position: relative; background: none; border: 0; border-bottom: 1px solid var(--oxus-line); border-radius: 0; box-shadow: none; transform: none;
    padding: var(--s-4) var(--s-3); transition: background var(--t-micro) linear; }
.notif-row:hover, .convo-row:hover { background: var(--oxus-graphite); }
.notif-row.unread, .convo-row.unread { background: none; border-color: var(--oxus-line); }
.notif-row.unread::before, .convo-row.unread::before { content: ""; position: absolute; left: 0; top: var(--s-3); bottom: var(--s-3); width: 2px; background: var(--oxus-red); }
.notif-row.unread .notif-message, .convo-row.unread .convo-name { font-weight: 800; }
.notif-unread-mark { width: 8px; height: 8px; background: var(--oxus-red); flex: none; align-self: center; }

/* Monochrome type badges: the type is the icon, not a rainbow of tones */
.notif-badge, .notif-icon-solo { background: var(--oxus-steel); color: var(--oxus-white); border: 1px solid var(--oxus-line-hi); border-radius: var(--r-1); box-shadow: none; }
.notif-avatar, .convo-avatar { border-radius: var(--r-1); }
.notif-link { color: var(--oxus-white); text-decoration: none; overflow-wrap: anywhere; }
.notif-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.notif-time, .convo-time { font-family: var(--f-mono); font-size: 11px; color: var(--oxus-silver); }
.convo-preview { color: var(--oxus-silver); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo-name { font-family: var(--f-display); font-stretch: 108%; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.notif-mark-one-btn, .notif-delete-btn { min-width: 44px; min-height: 44px; background: none; border: 0; color: var(--oxus-silver); }
.notif-mark-one-btn:hover, .notif-delete-btn:hover { background: var(--oxus-steel); color: var(--oxus-white); }

/* Filters: same underline-tab language as the rest of the product */
.notif-filters { display: flex; gap: var(--s-5); overflow-x: auto; border-bottom: 1px solid var(--oxus-line-hi); margin: var(--s-4) 0 0; }
.notif-filter { position: relative; background: none; border: 0; border-radius: 0; color: var(--oxus-silver); padding: var(--s-3) 0; min-height: 44px; white-space: nowrap;
    font-family: var(--f-util); font-stretch: 72%; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 15px; }
.notif-filter:hover { background: none; color: var(--oxus-white); border: 0; }
.notif-filter.is-active { color: var(--oxus-white); }
.notif-filter.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--oxus-red); }
.notif-limit-note { font-family: var(--f-mono); font-size: 11px; margin: var(--s-2) 0 0; }

/* Status bar: visible to everyone; failures are loud and persistent */
.notif-status { margin: var(--s-3) 0 0; padding: var(--s-3) var(--s-4); background: var(--oxus-graphite); border-left: 3px solid var(--oxus-silver); font-size: 14px; }
.notif-status.is-error { border-left-color: var(--oxus-red); color: var(--oxus-white); }


/* Repost indicator: the bare <svg> from icon_svg() has no intrinsic size, so it
   must be constrained here or it fills its container (profile > Repostlar bug). */
.repost-tag { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-2);
    font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--oxus-silver); }
.repost-tag-ico, .repost-tag svg { display: inline-block; width: 14px; height: 14px; flex: none; }
.repost-tag svg { max-width: 14px; max-height: 14px; }
.card-actions .reposted, .fv3-repost.is-active { color: var(--oxus-white); }


/* ==========================================================================
   PHASE 7 — Oxus AI
   ========================================================================== */
.ox-ai { max-width: 1200px; margin: 0 auto; padding: var(--s-6) var(--s-5) var(--s-10); }
.ox-ai-head h1 { font-size: clamp(40px, 8vw, 112px); text-transform: uppercase; margin: 0 0 var(--s-3); }
.ox-ai-sub { max-width: 62ch; color: var(--oxus-silver); margin: 0 0 var(--s-3); }
.ox-ai-meter { margin: 0; color: var(--oxus-white); }
.ox-ai-note { font-size: 13px; color: var(--oxus-silver); max-width: 62ch; }
.ox-ai-note a { color: var(--oxus-white); text-decoration: underline; text-underline-offset: 3px; }
.ox-ai-layout { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: var(--s-6); margin-top: var(--s-6); border-top: 1px solid var(--oxus-line-hi); padding-top: var(--s-5); }
.ox-ai-side { display: flex; flex-direction: column; gap: var(--s-4); }
.ox-ai-convs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ox-ai-convs li { display: flex; align-items: center; border-bottom: 1px solid var(--oxus-line); position: relative; }
.ox-ai-convs li.is-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--oxus-red); }
.ox-ai-convs a { flex: 1; min-width: 0; padding: var(--s-3); color: var(--oxus-white); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ox-ai-convs li.is-active a { font-weight: 800; }
.ox-ai-del { min-width: 44px; min-height: 44px; background: none; border: 0; color: var(--oxus-silver); }
.ox-ai-del:hover { background: var(--oxus-steel); color: var(--oxus-white); border: 0; }
.ox-ai-main { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.ox-ai-log { display: flex; flex-direction: column; gap: var(--s-5); min-height: 280px; max-height: 60vh; overflow-y: auto; padding-right: var(--s-2); }
.ox-ai-msg { display: flex; flex-direction: column; gap: var(--s-1); max-width: 78ch; }
.ox-ai-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.ox-ai-user { align-self: flex-end; text-align: right; }
.ox-ai-user .ox-mono { color: var(--oxus-silver); }
.ox-ai-ai { border-left: 2px solid var(--oxus-line-hi); padding-left: var(--s-4); }
.ox-ai-chips { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.ox-ai-chip { text-align: left; text-transform: none; letter-spacing: 0; font-family: var(--f-util); font-stretch: 100%; font-weight: 500; background: none; color: var(--oxus-white); border: 1px solid var(--oxus-line-hi); padding: var(--s-3) var(--s-4); min-height: 44px; }
.ox-ai-chip:hover { background: var(--oxus-white); color: var(--oxus-void); }
.ox-ai-error { padding: var(--s-3) var(--s-4); background: var(--oxus-graphite); border-left: 3px solid var(--oxus-red); }
.ox-ai-error[hidden] { display: none; }
.ox-ai-form textarea { width: 100%; min-height: 96px; resize: vertical; font-size: 16px; }
.ox-ai-actions { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s-2); }
@media (max-width: 800px) {
    .ox-ai { padding: var(--s-4) var(--s-4) var(--s-9); }
    .ox-ai-layout { grid-template-columns: 1fr; gap: var(--s-5); }
    .ox-ai-log { max-height: 50vh; }
}


/* ==========================================================================
   Push opt-in box (notifications page)
   ========================================================================== */
.push-box { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
    margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border-left: 3px solid var(--oxus-line-hi); background: var(--oxus-graphite); }
.push-text { margin: 0; flex: 1 1 260px; font-size: 14px; color: var(--oxus-white); }
.push-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.push-actions [hidden] { display: none; }
.push-actions button { min-height: 44px; }