/*
 * NORYX DESIGN SYSTEM — FOUNDATION v1.2.0
 * Date: 2026-10-07
 *
 * Scope: canonical visual primitives/tokens only.
 * Passive by default: this file does not style legacy Sahtout selectors.
 * Components take effect only when explicit nx-* hooks are added to markup.
 *
 * Contract:
 * - Structural palette is NORYX.
 * - Semantic/exception colors keep their meaning and do not follow theme accent.
 * - All nx-matrix surfaces use Gaussian/backdrop blur.
 * - No !important strategy.
 * - Header/Footer are shell subsystems and are not forced into content-panel geometry.
 */

:root {
    /* BUILD 02: shared sources of structural color and repeated paint recipes. */
    --nx-accent-rgb: 8,184,253;
    --nx-border-outer-rgb: 47,120,168;
    --nx-border-inner-rgb: 16,59,89;
    --nx-surface-rgb: 3,10,17;
    --nx-interaction-rgb: 0,33,89;
    --nx-primary-background: linear-gradient(180deg, var(--nx-cta-primary-top) 0%, var(--nx-cta-primary-mid) 50%, var(--nx-cta-primary-bottom) 100%);
    --nx-frame-corners: linear-gradient(var(--nx-accent), var(--nx-accent)) left top / var(--nx-corner-length) var(--nx-corner-thickness), linear-gradient(var(--nx-accent), var(--nx-accent)) left top / var(--nx-corner-thickness) var(--nx-corner-length), linear-gradient(var(--nx-accent), var(--nx-accent)) right top / var(--nx-corner-length) var(--nx-corner-thickness), linear-gradient(var(--nx-accent), var(--nx-accent)) right top / var(--nx-corner-thickness) var(--nx-corner-length), linear-gradient(var(--nx-accent), var(--nx-accent)) left bottom / var(--nx-corner-length) var(--nx-corner-thickness), linear-gradient(var(--nx-accent), var(--nx-accent)) left bottom / var(--nx-corner-thickness) var(--nx-corner-length), linear-gradient(var(--nx-accent), var(--nx-accent)) right bottom / var(--nx-corner-length) var(--nx-corner-thickness), linear-gradient(var(--nx-accent), var(--nx-accent)) right bottom / var(--nx-corner-thickness) var(--nx-corner-length);

    /* ==========================================================
       1) CORE STRUCTURAL PALETTE
       ========================================================== */
    --nx-accent: rgb(var(--nx-accent-rgb));
    --nx-border-outer: rgb(var(--nx-border-outer-rgb));
    --nx-border-inner: rgb(var(--nx-border-inner-rgb));
    --nx-surface-base: rgb(var(--nx-surface-rgb));
    --nx-interaction-deep: rgb(var(--nx-interaction-rgb));

    --nx-text-primary: #FFFFFF;
    --nx-text-content: #D8DCE3;
    --nx-text-muted: #73829D;

    /* ==========================================================
       2) SURFACE HIERARCHY
       Matrix > Subpanel/Control > Card > Micro
       ========================================================== */
    --nx-surface-matrix: rgba(3, 10, 17, .82);
    --nx-surface-subpanel: rgba(3, 10, 17, .55);
    --nx-surface-control: rgba(3, 10, 17, .35);
    --nx-surface-card: rgba(3, 10, 17, .75);
    --nx-surface-micro: rgba(3, 10, 17, .50);
    --nx-surface-elevated: rgba(3, 10, 17, .95);

    --nx-accent-bg-soft: rgba(8, 184, 253, .07);
    --nx-accent-bg-hover: rgba(8, 184, 253, .10);
    --nx-accent-bg-active: rgba(8, 184, 253, .15);
    --nx-accent-glow-soft: rgba(8, 184, 253, .18);
    --nx-accent-glow: rgba(8, 184, 253, .30);

    /* ==========================================================
       3) BLUR / SHADOW / FRAME
       ========================================================== */
    --nx-blur-matrix: 8px;
    --nx-blur-glass: 4px;
    --nx-blur-modal-backdrop: 4px;

    --nx-shadow-matrix:
        0 20px 40px -12px rgba(0, 0, 0, .80),
        inset 0 0 60px rgba(0, 0, 0, .25);
    --nx-shadow-card-hover: 0 0 18px rgba(8, 184, 253, .10);
    --nx-shadow-focus:
        0 0 0 1px rgba(8, 184, 253, .18),
        0 0 12px rgba(8, 184, 253, .18);

    --nx-frame-width: 1px;
    --nx-frame-inner-inset: 5px;
    --nx-corner-length: 18px;
    --nx-corner-thickness: 2px;

    /* ==========================================================
       4) TYPOGRAPHY
       Current approved working stack; centralized so it can change later.
       ========================================================== */
    --nx-font-display: 'Cinzel', serif;
    --nx-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --nx-title-shadow:
        0 2px 4px rgba(3, 10, 17, .50),
        0 0 5px rgba(3, 10, 17, .22);

    /* ==========================================================
       5) PRIMARY CTA
       ========================================================== */
    --nx-cta-primary-top: #0F86FC;
    --nx-cta-primary-mid: #1BB1EC;
    --nx-cta-primary-bottom: #0D90FD;
    --nx-cta-primary-text: #030A11;

    /* ==========================================================
       6) SEMANTIC REGISTRY — NEVER RE-THEME BY STRUCTURAL BATCH
       ========================================================== */

    /* Content categories */
    --nx-sem-update: #2ECC71;
    --nx-sem-event: #3498DB;
    --nx-sem-maintenance: #E74C3C;
    --nx-sem-other: #9B59B6;

    /* State/status */
    --nx-sem-success: #22C55E;
    --nx-sem-danger: #EF4444;
    --nx-sem-warning: #F2CF5B;
    --nx-sem-info: #3498DB;
    --nx-sem-online: #22C55E;
    --nx-sem-offline: #EF4444;

    /* IMPORTANT + economy/currency */
    --nx-sem-important: #F2CF5B;
    --nx-sem-points: #F2CF5B;
    --nx-sem-points-light: #F6D478;
    --nx-sem-points-dark: #C9A227;
    --nx-sem-points-deep: #8A6A14;
    --nx-sem-points-text-dark: #1A1200;
    --nx-sem-token: #8B5CF6;
    --nx-sem-money-gold: #FFD700;
    --nx-sem-money-silver: #C0C0C0;
    --nx-sem-money-copper: #B87333;

    /* Ranking podium */
    --nx-sem-rank-1: #F2CF5B;
    --nx-sem-rank-2: #C0C0C0;
    --nx-sem-rank-3: #CD7F32;

    /* Ranking mode identity */
    --nx-sem-mode-solo: #F2CF5B;
    --nx-sem-mode-solo-dark: #C9A227;
    --nx-sem-mode-2v2: #EF4444;
    --nx-sem-mode-2v2-dark: #B91C1C;
    --nx-sem-mode-3v3: #22C55E;
    --nx-sem-mode-3v3-dark: #15803D;
    --nx-sem-mode-5v5: #8B5CF6;
    --nx-sem-mode-5v5-dark: #6D28D9;

    /* Factions — preserve original semantic identity */
    --nx-sem-alliance-text: #60A5FA;
    --nx-sem-alliance-bar: #2563EB;
    --nx-sem-horde-text: #F87171;
    --nx-sem-horde-bar: #DC2626;

    /* WoW item quality — stable mappings found consistently for 0..5 */
    --nx-item-poor: #9D9D9D;
    --nx-item-common: #FFFFFF;
    --nx-item-uncommon: #1EFF00;
    --nx-item-rare: #0070DD;
    --nx-item-epic: #A335EE;
    --nx-item-legendary: #FF8000;
    /* Quality 6/7 remain intentionally un-tokenized in Foundation v1:
       the legacy source contains conflicting mappings and they require a
       dedicated semantic decision rather than an invented normalization. */

    /* WoW class colors */
    --nx-class-warrior: #C69B6D;
    --nx-class-paladin: #F48CBA;
    --nx-class-hunter: #AAD372;
    --nx-class-rogue: #FFF468;
    --nx-class-priest: #FFFFFF;
    --nx-class-death-knight: #C41E3A;
    --nx-class-shaman: #0070DD;
    --nx-class-mage: #3FC7EB;
    --nx-class-warlock: #8788EE;
    --nx-class-druid: #FF7C0A;

    /* ==========================================================
       7) PAGE SHELL / SPACING
       The approved top breathing room is mirrored below the Matrix.
       Migrated pages may override the token only when a documented
       page-specific exception exists.
       ========================================================== */
    --nx-page-gap: 2rem;
    --nx-page-gap-mobile: 1.5rem;
    --nx-page-gutter: 1rem;

    /* ==========================================================
       8) SHELL TOKENS
       Header/Footer may use their own surface contract.
       ========================================================== */
    --nx-header-surface: rgba(3, 10, 17, .96);
    --nx-header-border-alpha: .25;
    --nx-footer-surface-start: rgba(3, 10, 17, .95);
    --nx-footer-surface-end: rgba(3, 10, 17, .98);
}

/* ============================================================
   PAGE SHELL — vertical rhythm + viewport fill

   Contract:
   - Header -> Matrix keeps the page/family approved top gap.
   - Matrix -> Footer uses the same gap as its minimum.
   - When content is shorter than the viewport, the page shell absorbs
     the remaining vertical space below its content. The Footer keeps
     its natural height and finishes at the viewport edge.
   - Long pages grow naturally; no fixed pixel viewport correction and
     no JavaScript geometry measurement are used.
   ============================================================ */
body.nx-ds-page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.nx-page-shell {
    box-sizing: border-box;
    flex: 1 0 auto;
    min-height: auto;
    padding-block: var(--nx-page-gap);
    padding-inline: var(--nx-page-gutter);
}

/* Legacy Sahtout footer owns margin-top: 4rem. Once a page opts into
   the DS page shell, that legacy margin must not add a second gap.
   The footer never stretches to fill a short viewport; the page does. */
body.nx-ds-page footer.wow-footer {
    flex: 0 0 auto;
    margin-top: 0;
}

/* ============================================================
   MATRIX — canonical large content surface
   Every matrix gets Gaussian/backdrop blur.
   ============================================================ */
.nx-matrix {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
}
/* Existing component paint, shared with legacy ADMIN markup. */
.nx-matrix,
:where(.nx-admin-page) :is(.panel, .wow-panel, .ap-card, .panel-gold-corners, .panel-corners) {
    background: var(--nx-surface-matrix);
    border: var(--nx-frame-width) solid var(--nx-border-outer);
    box-shadow: var(--nx-shadow-matrix);
    backdrop-filter: blur(var(--nx-blur-matrix));
    -webkit-backdrop-filter: blur(var(--nx-blur-matrix));
}


.nx-matrix::before {
    content: '';
    position: absolute;
    inset: var(--nx-frame-inner-inset);
    border: var(--nx-frame-width) solid var(--nx-border-inner);
    pointer-events: none;
    z-index: 0;
}

.nx-matrix::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        var(--nx-frame-corners);
    background-repeat: no-repeat;
}

.nx-matrix > * {
    position: relative;
    z-index: 1;
}

/* Middle box inside a matrix. */
.nx-subpanel {
    position: relative;
    box-sizing: border-box;
    background: var(--nx-surface-subpanel);
    border: var(--nx-frame-width) solid var(--nx-border-inner);
}

/* Toolbars / tab wrappers / filters that sit above matrix content. */
.nx-control-panel {
    position: relative;
    box-sizing: border-box;
    background: var(--nx-surface-control);
    border: var(--nx-frame-width) solid var(--nx-border-inner);
}

/* Repeated small content unit. */
.nx-card {
    position: relative;
    box-sizing: border-box;
    background: var(--nx-surface-card);
    border: var(--nx-frame-width) solid var(--nx-border-inner);
    transition:
        border-color .20s ease,
        box-shadow .20s ease,
        background-color .20s ease,
        transform .20s ease;
}

.nx-card:hover {
    border-color: var(--nx-accent);
    box-shadow: var(--nx-shadow-card-hover);
}

/* Small local surface: metadata, compact status, input-like wrappers. */
.nx-micro-surface {
    background: var(--nx-surface-micro);
    border: var(--nx-frame-width) solid var(--nx-border-inner);
}

/* Elevated surface: tooltip/modal/dialog. */
.nx-elevated {
    background: var(--nx-surface-elevated);
    border: var(--nx-frame-width) solid var(--nx-border-outer);
    box-shadow: var(--nx-shadow-matrix);
    backdrop-filter: blur(var(--nx-blur-glass));
    -webkit-backdrop-filter: blur(var(--nx-blur-glass));
}

/* ============================================================
   TITLES
   Default page title has NO icon. Icons are an explicit variant.
   ============================================================ */
.nx-page-title {
    margin: 0;
    font-weight: 900;
    letter-spacing: .02em;
}
/* Existing component paint, shared with legacy ADMIN markup. */
.nx-page-title,
:where(.nx-admin-page) :is(.wow-title, .coming-soon-title, .text-gold-gradient, .stat-number) {
    color: var(--nx-text-primary);
    background: none;
    font-family: var(--nx-font-display);
    text-shadow: var(--nx-title-shadow);
}


.nx-page-title__icon,
.nx-section-title__icon {
    color: var(--nx-accent);
}

.nx-section-title {
    font-weight: 700;
}
/* Existing component paint, shared with legacy ADMIN markup. */
.nx-section-title,
:where(.nx-admin-page) .section-title {
    color: var(--nx-text-primary);
    font-family: var(--nx-font-display);
}


.nx-body-copy {
    color: var(--nx-text-content);
    font-family: var(--nx-font-body);
}

.nx-muted {
    color: var(--nx-text-muted);
}

/* ============================================================
   TABS / NAV CONTROLS
   Structural default. Semantic tabs override with semantic vars.
   ============================================================ */
.nx-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.nx-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--nx-surface-control);
    border: 1px solid var(--nx-border-inner);
    color: var(--nx-text-primary);
    text-decoration: none;
    transition: .20s ease;
}

.nx-tab > i,
.nx-tab > svg {
    color: var(--nx-accent);
}

.nx-tab:hover {
    background: var(--nx-accent-bg-hover);
    border-color: var(--nx-border-outer);
    color: var(--nx-accent);
}

.nx-tab[aria-selected='true'],
.nx-tab.is-active {
    background: var(--nx-accent-bg-active);
    border-color: var(--nx-accent);
    color: var(--nx-accent);
    box-shadow:
        inset 0 0 0 1px rgba(var(--nx-accent-rgb), .12),
        0 0 14px rgba(var(--nx-accent-rgb), .10);
}

.nx-tab:focus-visible {
    outline: 2px solid var(--nx-accent);
    outline-offset: 2px;
}

.nx-tab[disabled],
.nx-tab.is-disabled {
    opacity: .60;
    cursor: not-allowed;
    pointer-events: none;
}

/* Semantic category tabs. */
.nx-tab--update { --nx-tab-sem: var(--nx-sem-update); --nx-tab-sem-bg: rgba(46,204,113,.12); --nx-tab-sem-bg-hover: rgba(46,204,113,.22); --nx-tab-sem-border: rgba(46,204,113,.30); --nx-tab-sem-border-hover: rgba(46,204,113,.60); --nx-tab-sem-glow: rgba(46,204,113,.40); }
.nx-tab--event { --nx-tab-sem: var(--nx-sem-event); --nx-tab-sem-bg: rgba(52,152,219,.12); --nx-tab-sem-bg-hover: rgba(52,152,219,.22); --nx-tab-sem-border: rgba(52,152,219,.30); --nx-tab-sem-border-hover: rgba(52,152,219,.60); --nx-tab-sem-glow: rgba(52,152,219,.40); }
.nx-tab--maintenance { --nx-tab-sem: var(--nx-sem-maintenance); --nx-tab-sem-bg: rgba(231,76,60,.12); --nx-tab-sem-bg-hover: rgba(231,76,60,.22); --nx-tab-sem-border: rgba(231,76,60,.30); --nx-tab-sem-border-hover: rgba(231,76,60,.60); --nx-tab-sem-glow: rgba(231,76,60,.40); }
.nx-tab--other { --nx-tab-sem: var(--nx-sem-other); --nx-tab-sem-bg: rgba(155,89,182,.12); --nx-tab-sem-bg-hover: rgba(155,89,182,.22); --nx-tab-sem-border: rgba(155,89,182,.30); --nx-tab-sem-border-hover: rgba(155,89,182,.60); --nx-tab-sem-glow: rgba(155,89,182,.40); }

.nx-tab--update,
.nx-tab--event,
.nx-tab--maintenance,
.nx-tab--other {
    color: var(--nx-tab-sem);
    border-color: var(--nx-tab-sem-border);
    background: var(--nx-tab-sem-bg);
}

.nx-tab--update:hover,
.nx-tab--event:hover,
.nx-tab--maintenance:hover,
.nx-tab--other:hover {
    color: var(--nx-tab-sem);
    border-color: var(--nx-tab-sem-border-hover);
    background: var(--nx-tab-sem-bg-hover);
}

.nx-tab--update[aria-selected='true'],
.nx-tab--event[aria-selected='true'],
.nx-tab--maintenance[aria-selected='true'],
.nx-tab--other[aria-selected='true'],
.nx-tab--update.is-active,
.nx-tab--event.is-active,
.nx-tab--maintenance.is-active,
.nx-tab--other.is-active {
    background: var(--nx-tab-sem);
    border-color: var(--nx-tab-sem);
    color: #FFFFFF;
    box-shadow: 0 0 30px var(--nx-tab-sem-glow);
}

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.nx-input,
.nx-select,
.nx-textarea {
    box-sizing: border-box;
    font: inherit;
    transition: border-color .20s ease, box-shadow .20s ease, background .20s ease;
}
/* Existing component paint, shared with legacy ADMIN markup. */
.nx-input, .nx-select, .nx-textarea,
:where(.nx-admin-page) :is(.input-dark, .wow-input, .wow-select, .wow-textarea, .ap-input) {
    background: var(--nx-surface-micro);
    border: 1px solid var(--nx-border-inner);
    color: var(--nx-text-primary);
}


.nx-input::placeholder,
.nx-textarea::placeholder {
    color: var(--nx-text-muted);
    opacity: 1;
}

.nx-input:focus,
.nx-select:focus,
.nx-textarea:focus,
.nx-input:focus-visible,
.nx-select:focus-visible,
.nx-textarea:focus-visible {
    outline: none;
    border-color: var(--nx-accent);
    box-shadow: var(--nx-shadow-focus);
}

.nx-input:disabled,
.nx-select:disabled,
.nx-textarea:disabled {
    opacity: .60;
    cursor: not-allowed;
}

.nx-field--error .nx-input,
.nx-field--error .nx-select,
.nx-field--error .nx-textarea {
    border-color: var(--nx-sem-danger);
}

.nx-field--success .nx-input,
.nx-field--success .nx-select,
.nx-field--success .nx-textarea {
    border-color: var(--nx-sem-success);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.nx-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    box-sizing: border-box;
    border: 1px solid transparent;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: .20s ease;
}

.nx-button:focus-visible {
    outline: 2px solid var(--nx-accent);
    outline-offset: 2px;
}

.nx-button:disabled,
.nx-button.is-disabled,
.nx-button.is-processing {
    opacity: .60;
    cursor: not-allowed;
}

.nx-button--primary {
}
/* Existing component paint, shared with legacy ADMIN markup. */
.nx-button--primary,
:where(.nx-admin-page) .btn-gold {
    background: var(--nx-primary-background);
    color: var(--nx-cta-primary-text);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.28),
        inset 0 -8px 14px rgba(0,0,0,.25),
        0 8px 24px rgba(var(--nx-border-outer-rgb), .30);
}


.nx-button--primary:hover {
    filter: brightness(1.07);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.40),
        inset 0 -8px 14px rgba(0,0,0,.25),
        0 12px 32px rgba(var(--nx-accent-rgb), .32);
}

.nx-button--secondary {
}
/* Existing component paint, shared with legacy ADMIN markup. */
.nx-button--secondary,
:where(.nx-admin-page) .btn-iron {
    background: rgba(var(--nx-surface-rgb), .70);
    border-color: var(--nx-accent);
    color: var(--nx-text-primary);
    box-shadow: inset 0 -8px 14px rgba(var(--nx-interaction-rgb), .40),
        0 0 8px rgba(var(--nx-border-outer-rgb), .25);
}


.nx-button--secondary > i,
.nx-button--secondary > svg {
    color: var(--nx-accent);
}

.nx-button--secondary:hover {
    box-shadow:
        inset 0 -8px 14px rgba(var(--nx-interaction-rgb), .40),
        0 0 16px rgba(var(--nx-border-outer-rgb), .50);
}

/* Navigation-return variant. Deliberately lighter than CTA/action
   buttons; it must not redefine the base weight of every button. */
.nx-button--return {
    font-weight: 400;
}

.nx-button--danger {
    background: rgba(239,68,68,.12);
    border-color: rgba(239,68,68,.50);
    color: #FCA5A5;
}

.nx-button--success {
    background: rgba(34,197,94,.12);
    border-color: rgba(34,197,94,.50);
    color: #86EFAC;
}

/* ============================================================
   TABLES
   ============================================================ */
.nx-table-shell {
    overflow-x: auto;
    border: 1px solid var(--nx-border-inner);
}

.nx-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--nx-text-content);
}

.nx-table th {
    background: var(--nx-surface-base);
    border-bottom: 1px solid var(--nx-border-inner);
    color: var(--nx-accent);
    text-align: left;
}

.nx-table td {
    border-bottom: 1px solid rgba(var(--nx-border-inner-rgb), .55);
}

.nx-table tbody tr {
    background: rgba(var(--nx-surface-rgb), .40);
    transition: background-color .20s ease;
}

.nx-table tbody tr:hover {
    background: var(--nx-accent-bg-active);
}

/* Podium semantics override generic table-row states.
   Specificity intentionally outranks the generic .nx-table tbody tr rules so
   semantic placement always wins without !important. */
.nx-table tbody tr.nx-rank-1 {
    background: linear-gradient(135deg, rgba(242,207,82,.35), rgba(201,162,39,.25), rgba(242,207,82,.35));
    border-left: 4px solid var(--nx-sem-rank-1);
    box-shadow: inset 0 0 30px rgba(242,207,82,.15);
    transition: all .30s ease-in-out;
}

.nx-table tbody tr.nx-rank-1:hover {
    background: linear-gradient(135deg, rgba(242,207,82,.50), rgba(201,162,39,.40), rgba(242,207,82,.50));
    filter: brightness(1.10);
    box-shadow: 0 0 40px rgba(242,207,82,.20);
}

.nx-table tbody tr.nx-rank-2 {
    background: linear-gradient(135deg, rgba(192,192,192,.30), rgba(160,160,160,.20), rgba(192,192,192,.30));
    border-left: 4px solid var(--nx-sem-rank-2);
    box-shadow: inset 0 0 30px rgba(192,192,192,.10);
    transition: all .30s ease-in-out;
}

.nx-table tbody tr.nx-rank-2:hover {
    background: linear-gradient(135deg, rgba(192,192,192,.45), rgba(160,160,160,.35), rgba(192,192,192,.45));
    filter: brightness(1.10);
    box-shadow: 0 0 40px rgba(192,192,192,.15);
}

.nx-table tbody tr.nx-rank-3 {
    background: linear-gradient(135deg, rgba(205,127,50,.35), rgba(180,100,30,.25), rgba(205,127,50,.35));
    border-left: 4px solid var(--nx-sem-rank-3);
    box-shadow: inset 0 0 30px rgba(205,127,50,.10);
    transition: all .30s ease-in-out;
}

.nx-table tbody tr.nx-rank-3:hover {
    background: linear-gradient(135deg, rgba(205,127,50,.50), rgba(180,100,30,.40), rgba(205,127,50,.50));
    filter: brightness(1.10);
    box-shadow: 0 0 40px rgba(205,127,50,.15);
}

/* ============================================================
   BADGES / SEMANTIC CHIPS
   ============================================================ */
.nx-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid currentColor;
}

.nx-badge--important,
.nx-badge--points {
    color: var(--nx-sem-important);
    background: rgba(242,207,82,.15);
    border-color: rgba(201,162,39,.30);
}

.nx-badge--token {
    color: var(--nx-sem-token);
    background: rgba(139,92,246,.12);
    border-color: rgba(139,92,246,.35);
}

.nx-badge--update {
    color: var(--nx-sem-update);
    background: rgba(46,204,113,.12);
    border-color: rgba(46,204,113,.30);
}

.nx-badge--event {
    color: var(--nx-sem-event);
    background: rgba(52,152,219,.12);
    border-color: rgba(52,152,219,.30);
}

.nx-badge--maintenance {
    color: var(--nx-sem-maintenance);
    background: rgba(231,76,60,.12);
    border-color: rgba(231,76,60,.30);
}

.nx-badge--other {
    color: var(--nx-sem-other);
    background: rgba(155,89,182,.12);
    border-color: rgba(155,89,182,.30);
}

.nx-badge--online,
.nx-badge--success {
    color: #4ADE80;
    background: linear-gradient(180deg, rgba(34,197,94,.22), rgba(22,163,74,.12));
    border-color: rgba(74,222,128,.35);
}

.nx-badge--offline,
.nx-badge--danger {
    color: #F87171;
    background: linear-gradient(180deg, rgba(239,68,68,.22), rgba(185,28,28,.12));
    border-color: rgba(248,113,113,.35);
}

/* ============================================================
   ALERTS
   ============================================================ */
.nx-alert {
    border: 1px solid var(--nx-border-inner);
    background: var(--nx-surface-subpanel);
    color: var(--nx-text-content);
}

.nx-alert--success {
    border-color: rgba(34,197,94,.45);
    background: rgba(34,197,94,.12);
}

.nx-alert--error {
    border-color: rgba(239,68,68,.45);
    background: rgba(239,68,68,.12);
}

.nx-alert--warning {
    border-color: rgba(201,162,39,.35);
    background: rgba(242,207,82,.12);
}

.nx-alert--info {
    border-color: rgba(52,152,219,.45);
    background: rgba(52,152,219,.12);
}

/* ============================================================
   MODALS
   ============================================================ */
.nx-modal-backdrop {
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(var(--nx-blur-modal-backdrop));
    -webkit-backdrop-filter: blur(var(--nx-blur-modal-backdrop));
}

.nx-modal-dialog {
    position: relative;
    background: var(--nx-surface-elevated);
    border: 1px solid var(--nx-border-outer);
    box-shadow: var(--nx-shadow-matrix);
}

.nx-modal-dialog::before {
    content: '';
    position: absolute;
    inset: var(--nx-frame-inner-inset);
    border: 1px solid var(--nx-border-inner);
    pointer-events: none;
}

/* ============================================================
   MODE IDENTITY HELPERS — semantic, not structural theme
   ============================================================ */
.nx-mode-chip {
    border: 1px solid currentColor;
}

.nx-mode--solo {
    color: var(--nx-sem-mode-solo);
    border-color: rgba(242,207,82,.40);
    background: linear-gradient(135deg, rgba(242,207,82,.15), rgba(201,162,39,.08));
}

.nx-mode--2v2 {
    color: var(--nx-sem-mode-2v2);
    border-color: rgba(239,68,68,.40);
    background: linear-gradient(135deg, rgba(239,68,68,.15), rgba(185,28,28,.08));
}

.nx-mode--3v3 {
    color: var(--nx-sem-mode-3v3);
    border-color: rgba(34,197,94,.40);
    background: linear-gradient(135deg, rgba(34,197,94,.15), rgba(21,128,61,.08));
}

.nx-mode--5v5 {
    color: var(--nx-sem-mode-5v5);
    border-color: rgba(139,92,246,.40);
    background: linear-gradient(135deg, rgba(139,92,246,.15), rgba(109,40,217,.08));
}

@media (max-width: 767px) {
    .nx-page-shell {
        padding-block: var(--nx-page-gap-mobile);
    }
}

/* ============================================================
   ACCESSIBILITY / REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .nx-card,
    .nx-tab,
    .nx-button,
    .nx-table tbody tr {
        transition-duration: .01ms;
    }
}

/* Shared component adapters: ADMIN adopts NORYX paint; page geometry remains local. */
.nx-admin-page { background: var(--nx-surface-base); color: var(--nx-text-content); }
:where(.nx-admin-page) :is(.wow-title, .coming-soon-title, .text-gold-gradient, .stat-number) { -webkit-text-fill-color: currentColor; background-clip: border-box; -webkit-background-clip: border-box; }
:where(.nx-admin-page) :is(.input-dark, .wow-input, .wow-select, .wow-textarea, .ap-input):focus { outline: none; border-color: var(--nx-accent); box-shadow: var(--nx-shadow-focus); }
:where(.nx-admin-page) :is(.input-dark, .wow-input, .wow-textarea, .ap-input)::placeholder { color: var(--nx-text-muted); }
:where(.nx-admin-page) :is(.table-dark, .wow-table, .table-wow, .ap-table) th { background: var(--nx-surface-control); color: var(--nx-accent); border-bottom-color: var(--nx-border-outer); }
:where(.nx-admin-page) :is(.table-dark, .wow-table, .table-wow, .ap-table) td { background: var(--nx-surface-subpanel); color: var(--nx-text-content); border-bottom-color: var(--nx-border-inner); }
:where(.nx-admin-page) :is(.table-dark, .wow-table, .table-wow, .ap-table) tr:hover td { background: var(--nx-accent-bg-hover); }

/* Paint utilities extracted from repeated ADMIN utility consumers. Global tokens only. */
.nx-u-99e7385088 { color: var(--nx-text-muted); }
.nx-u-b4d0fd057d { color: var(--nx-accent); }
.nx-u-6af4a9ecbb { color: var(--nx-text-content); }
.nx-u-faf2b08f95 { color: var(--nx-text-muted); }
.nx-u-1f0279b0aa { color: rgba(var(--nx-border-outer-rgb), 0.5); }
.nx-u-545e202c45 { color: var(--nx-text-content); }
.nx-u-9f26469b10 { background: var(--nx-accent); }
.nx-u-c5e0ad189d { color: var(--nx-text-muted); }
.nx-u-23a4417938 { color: rgba(var(--nx-border-outer-rgb), 0.4); }
.nx-u-c245947f23 { border-color: rgba(var(--nx-border-outer-rgb), 0.3); }
.nx-u-550bbe4591 { background: rgba(var(--nx-accent-rgb), 0.05); }
.nx-u-0969ef4835 { border-color: rgba(var(--nx-border-outer-rgb), 0.1); }
.nx-u-cf9ebfe441:hover { color: var(--nx-accent); }
.nx-u-43e5f94dcb { border-color: rgba(var(--nx-border-outer-rgb), .1); }
.nx-u-0ef915016c { color: var(--nx-text-content); }
.nx-u-850c4c856c { color: rgba(var(--nx-accent-rgb), 0.3); }
.nx-u-f105742ace { background: rgba(var(--nx-surface-rgb), 0.4); }
.nx-u-8f347975db { border-color: rgba(var(--nx-border-outer-rgb), 0.08); }
.nx-u-7b2d173df1 { border-color: var(--nx-accent); }
.nx-u-e8216b2c07 { color: var(--nx-text-content); }
.nx-u-3739757454 { background: var(--nx-surface-base); }
.nx-u-ec0c2f2a7d { --tw-gradient-via: var(--nx-accent); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); }
.nx-u-da08f860fc { --tw-gradient-via: var(--nx-cta-primary-mid); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); }
.nx-u-02f464f75d { --tw-gradient-to: var(--nx-cta-primary-bottom); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.nx-u-69e93def5d { --tw-gradient-from: rgba(var(--nx-surface-rgb), 0.92); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.nx-u-42987c0387 { --tw-gradient-to: rgba(var(--nx-surface-rgb), 0.9); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.nx-u-ff7cd7d01b { border-color: rgba(var(--nx-border-outer-rgb), .22); }
.nx-u-3bdd19b1da { filter: drop-shadow(0 0 12px rgba(var(--nx-accent-rgb), .35)) drop-shadow(0 2px 4px rgba(0,0,0,.8)); }
.nx-u-ac8cb0efb4 { background: rgba(var(--nx-surface-rgb), 0.6); }
.nx-u-8fe7b5ce44 { border-color: rgba(var(--nx-border-outer-rgb), .15); }
.nx-u-568b6485ce { background: rgba(var(--nx-surface-rgb), 0.8); }
.nx-u-dc2fdc67a3:hover { border-color: rgba(var(--nx-border-outer-rgb), 0.4); }
.nx-u-94bbc69779 { color: var(--nx-text-primary); }
.nx-u-4cba110568 { color: var(--nx-text-muted); }
.nx-u-c24ffa17ff { background: rgba(var(--nx-surface-rgb), 0.5); }
.nx-u-56b68f8869 { --tw-gradient-from: var(--nx-cta-primary-top); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.nx-u-33e562a4a2 { color: var(--nx-cta-primary-text); }
.nx-u-58bb34b227 { background: none; color: var(--nx-text-primary); -webkit-text-fill-color: currentColor; }
.nx-u-d8a089c01f { border-color: rgba(var(--nx-border-outer-rgb), 0.22); }
.nx-u-b18bf6aaa9 { filter: drop-shadow(0 0 12px rgba(var(--nx-accent-rgb), .15)) drop-shadow(0 2px 4px rgba(0,0,0,.8)); }
.nx-u-b2914ea0f7 { background: rgba(var(--nx-surface-rgb), 0.8); }
.nx-u-029694ff41:focus { border-color: var(--nx-accent); }
.nx-u-ec1433ea88:focus { box-shadow: 0 0 10px rgba(var(--nx-accent-rgb), .2); }
.nx-u-efc58fcb56:focus { background: rgba(var(--nx-surface-rgb), 0.9); }
.nx-u-4919ae4fc5 { border-color: rgba(var(--nx-border-outer-rgb), 0.2); }
.nx-u-b0bea91b3b:hover { background: rgba(var(--nx-surface-rgb), 0.7); }
.nx-u-080eb8244b { background: rgba(var(--nx-surface-rgb), 0.9); }
.nx-u-58562743a4 { background: rgba(var(--nx-border-outer-rgb), 0.1); }
.nx-u-6f89e1cd28 { border-color: rgba(var(--nx-border-outer-rgb), 0.3); }
.nx-u-694aaf7c25:hover { background: rgba(var(--nx-accent-rgb), 0.15); }
.nx-u-ef61cf1c5c:hover { border-color: var(--nx-accent); }
.nx-u-c56e31a695::-webkit-scrollbar-thumb { background: rgba(var(--nx-accent-rgb), 0.3); }
.nx-u-ab07ade119::-webkit-scrollbar-thumb:hover { background: rgba(var(--nx-accent-rgb), 0.5); }
.nx-u-e37d358db2 { --tw-gradient-from: rgba(var(--nx-accent-rgb), 0.15); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.nx-u-f9010d6ba8 { --tw-gradient-to: rgba(var(--nx-accent-rgb), 0.04); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.nx-u-eb5c45afaa { border-bottom-color: var(--nx-accent); }
.nx-u-879ed7a5cf { box-shadow: inset 0 -2px 20px rgba(var(--nx-accent-rgb), 0.05); }
.nx-u-3a02be5cf5:hover { color: var(--nx-text-content); }
.nx-u-480dcb0b62:hover { background: rgba(var(--nx-accent-rgb), 0.08); }
.nx-u-b89dda93f6:hover { border-bottom-color: rgba(var(--nx-border-outer-rgb), 0.3); }
.group:hover .nx-u-12ec66bee7 { color: var(--nx-accent); }
.nx-u-287dc2ad6f { border-color: rgba(var(--nx-border-outer-rgb), 0.15); }
.nx-u-dcdb341897:hover { background: rgba(var(--nx-accent-rgb), 0.05); }
.nx-u-49c6dd21f9 { border-color: rgba(var(--nx-border-outer-rgb), 0.05); }
.nx-u-37d0e578cd { border-color: rgba(var(--nx-border-outer-rgb), .2); }
.nx-u-3cb6a4a734 { color: var(--nx-text-content); }
.nx-u-952f32dfb6 { background: rgba(var(--nx-surface-rgb), 0.95); }
.nx-u-83cffa2093 { border-color: rgba(var(--nx-border-outer-rgb), .3); }
.nx-u-fc2c4d8396:hover { background: rgba(var(--nx-accent-rgb), .15); }
.nx-u-b1fc9cd26d:hover { box-shadow: 0 0 15px rgba(var(--nx-accent-rgb), .2); }
.nx-u-1f16a0fc15:hover { box-shadow: 0 0 20px rgba(var(--nx-accent-rgb), .2); }
.nx-u-575738a61a { --tw-gradient-via: rgba(var(--nx-accent-rgb), .4); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); }
.nx-u-0650dc2d1a { background: rgba(var(--nx-accent-rgb), .1); }
.nx-u-666ec55652 { --tw-gradient-from: var(--nx-surface-base); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.nx-u-3a9c6ae2d5 { --tw-gradient-via: var(--nx-surface-base); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); }
.nx-u-b261f46b33 { --tw-gradient-to: var(--nx-surface-base); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.nx-u-c156220ba9 { border-color: rgba(var(--nx-border-outer-rgb), .22); }
.nx-u-cc29418e85 { --tw-gradient-from: rgba(var(--nx-accent-rgb), .12); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.nx-u-cea9f5e5fc { --tw-gradient-to: rgba(var(--nx-accent-rgb), .04); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.nx-u-27dafff38c { filter: drop-shadow(0 0 8px rgba(var(--nx-accent-rgb), .5)); }
.nx-u-cff6f9bc80:hover { background: rgba(var(--nx-accent-rgb), .08); }
.nx-u-b2de4daedb:hover { border-color: rgba(var(--nx-border-outer-rgb), .4); }
.nx-u-d35cf11c76 { color: rgba(var(--nx-accent-rgb), .6); }

/* Shared control/nav states consumed by multiple settings screens. */
.nx-control-accent { accent-color: var(--nx-accent); }
.nx-nav-active-glow { text-shadow: 0 0 12px rgba(var(--nx-accent-rgb), .3); }
@media (max-width: 767.98px) {
 .nx-nav-active-mobile-border { border-left-color: var(--nx-accent); }
 .nx-nav-mobile-divider { border-bottom-color: rgba(var(--nx-border-outer-rgb), .1); }
}