/* ═══════════════════════════════════════════════════════════════════════════
   RushX · Calm Bar · v2
   Loaded from header_logged_in.php and header_logged_out.php for every page.

   This file is the source of truth for design tokens, base primitives, and
   the cross-page calm overrides that neutralize decorative noise. Pages
   should compose .rx-* primitives where possible; per-page CSS is allowed
   for layout, but visual primitives should be inherited from here.

   Principle: nothing decorative. Motion communicates state, never delight.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────────
   1. TOKENS
   ──────────────────────────────────────────────────────────────────────────── */
:root {
    /* Surfaces */
    --bg:           #000000;
    --surface-1:    #0A0A0A;
    --surface-2:    #111111;
    --surface-3:    #161616;

    /* Hairlines (single source — pages should not redefine these) */
    --hairline:        rgba(255, 255, 255, 0.06);
    --hairline-strong: rgba(255, 255, 255, 0.10);
    --hairline-active: rgba(255, 255, 255, 0.18);

    /* Text */
    --text:      #FFFFFF;
    --text-dim:  #A3A3A3;
    --text-mute: #5B5D65;

    /* Brand & signal */
    --neon:        #C1F033;
    --neon-bg:     rgba(193, 240, 51, 0.10);
    --neon-border: rgba(193, 240, 51, 0.24);
    --green:       #2EBD85;
    --red:         #F6465D;
    --gold:        #F5A623;
    --indigo:      #6C5CE7;

    /* Motion — tight, almost-invisible */
    --ease:    cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast:  100ms;
    --t-base:  160ms;
    --t-slow:  240ms;

    /* Shadow — single layer, no glow stacks */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.30);

    /* Radius */
    --r-sm:   6px;
    --r-md:   10px;
    --r-lg:   14px;
    --r-xl:   18px;
    --r-pill: 9999px;

    /* Type */
    --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

    /* Layout */
    --content-max: 1280px;
    --content-pad: 24px;

    /* Legacy aliases for code that still references the v1 names. Will be
       removed once migration is complete; for now they map to v2 tokens. */
    --rx-radius-sm: var(--r-sm);
    --rx-radius-md: var(--r-md);
    --rx-radius-lg: var(--r-lg);
    --rx-radius-xl: var(--r-xl);
    --rx-easing-snap:   var(--ease);
    --rx-easing-smooth: var(--ease);
    --rx-easing-power:  var(--ease);
    --rx-dur-fast: var(--t-fast);
    --rx-dur-mid:  var(--t-base);
    --rx-dur-slow: var(--t-slow);
    --rx-glow-neon:  none;
    --rx-glow-green: none;
    --rx-glow-red:   none;
}

/* ────────────────────────────────────────────────────────────────────────────
   2. BODY / RESET BASELINE
   ──────────────────────────────────────────────────────────────────────────── */
body {
    font-family: var(--font-body) !important;
    font-feature-settings: 'cv11' 1, 'ss01' 1, 'tnum' 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tabular numerics on anything that contains numbers */
.tabular,
input[type="number"],
[class*="balance"], [class*="bal-value"],
[class*="amount"], [class*="price"],
[class*="-num"], [class*="-pnl"],
[class*="kpi-val"], [class*="stat-val"], [class*="val-metric"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'cv11' 1;
}

/* Scrollbars — thin, hairline, no gradient */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18); background-clip: padding-box; }
* { scrollbar-color: rgba(255,255,255,0.10) transparent; scrollbar-width: thin; }

/* Selection */
::selection { background: rgba(193, 240, 51, 0.30); color: #FFFFFF; }

/* Buttons inherit text color from their context — prevents the user-agent
   default `buttontext` from rendering dark on dark surfaces. Pages that
   want a specific button color (neon CTA, sell red, etc.) set it explicitly
   and that wins via specificity. */
button {
    color: inherit;
    font-family: inherit;
}

/* Vanilla select caret — neutral grey arrow on dark */
select:not([class*="okx-"]):not([class*="p2p-"]) {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A3A3A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px !important;
}

/* Focus rings — single hairline, no glow stack */
:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; border-radius: 4px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none !important;
    border-color: var(--neon) !important;
    box-shadow: 0 0 0 1px var(--neon) !important;
    transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   3. PRIMITIVES (.rx-*)
   ──────────────────────────────────────────────────────────────────────────── */

/* Card — solid surface, hairline border, no animated gradient borders, no glow */
.rx-card {
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-radius: var(--r-xl);
    padding: 24px;
    transition: border-color var(--t-fast) ease-out;
}
.rx-card.is-interactive:hover { border-color: var(--hairline-strong); }
.rx-card-tight { padding: 16px; }
.rx-card-loose { padding: 32px; }

/* Buttons — single recipe per role, no transform/shadow/filter stack on hover */
.rx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border-radius: var(--r-pill);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    transition:
        background-color var(--t-fast) ease-out,
        border-color var(--t-fast) ease-out,
        color var(--t-fast) ease-out,
        opacity var(--t-fast) ease-out;
    user-select: none;
    white-space: nowrap;
}
.rx-btn:disabled, .rx-btn[disabled], .rx-btn.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.rx-btn-primary { background: var(--neon); color: #000; }
.rx-btn-primary:hover:not(:disabled) { background: #D4FF52; }
.rx-btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--hairline-strong);
    color: var(--text);
}
.rx-btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--hairline-active);
}
.rx-btn-ghost { color: var(--text-dim); }
.rx-btn-ghost:hover:not(:disabled) { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.rx-btn-danger { background: var(--red); color: #FFFFFF; }
.rx-btn-danger:hover:not(:disabled) { background: #FF5566; }
.rx-btn-sm { height: 32px; padding: 0 14px; font-size: 13px; }
.rx-btn-lg { height: 48px; padding: 0 28px; font-size: 15px; }

/* Inputs */
.rx-input, .rx-select, .rx-textarea {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: 0 14px;
    height: 40px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    transition: border-color var(--t-fast) ease-out;
    outline: none;
}
.rx-textarea { padding: 12px 14px; height: auto; min-height: 96px; resize: vertical; }
.rx-input:focus, .rx-select:focus, .rx-textarea:focus { border-color: var(--neon); }
.rx-input::placeholder, .rx-textarea::placeholder { color: var(--text-mute); }

/* Tables */
.rx-table { width: 100%; border-collapse: collapse; }
.rx-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--hairline);
    background: rgba(255, 255, 255, 0.02);
}
.rx-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--hairline);
    font-size: 14px;
    color: var(--text);
}
.rx-table tbody tr { transition: background-color var(--t-fast) ease-out; }
.rx-table tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }

/* Tags / pills */
.rx-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 10px;
    border-radius: var(--r-sm);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-dim);
    border: 1px solid var(--hairline);
    white-space: nowrap;
}
.rx-tag-success { background: rgba(46, 189, 133, 0.10); color: var(--green);  border-color: rgba(46, 189, 133, 0.20); }
.rx-tag-danger  { background: rgba(246, 70,  93, 0.10); color: var(--red);    border-color: rgba(246, 70,  93, 0.20); }
.rx-tag-warn    { background: rgba(245, 166, 35, 0.10); color: var(--gold);   border-color: rgba(245, 166, 35, 0.20); }
.rx-tag-neon    { background: var(--neon-bg);            color: var(--neon);   border-color: var(--neon-border); }

/* Hero — calm, single weight, restrained size */
.rx-hero { padding: 40px 0 32px; }
.rx-hero h1, .rx-hero-title {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.5px;
    color: var(--text);
    margin: 0 0 12px;
}
.rx-hero p, .rx-hero-sub {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-dim);
    max-width: 640px;
    margin: 0;
}
.rx-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

/* Section header */
.rx-section {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 40px 0 16px;
    flex-wrap: wrap;
}
.rx-section h2 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--text);
    margin: 0;
}
.rx-section p { font-size: 13px; color: var(--text-dim); margin: 4px 0 0; line-height: 1.5; }
.rx-section a {
    font-size: 13px; font-weight: 500; color: var(--text-dim); text-decoration: none;
    transition: color var(--t-fast) ease-out;
}
.rx-section a:hover { color: var(--text); }

/* Stat */
.rx-stat-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rx-stat-value {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.4px;
    margin-top: 6px;
}

/* Divider */
.rx-hr { border: 0; border-top: 1px solid var(--hairline); margin: 24px 0; }

/* Skeleton — the only acceptable continuous animation */
.rx-skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--r-sm);
}
.rx-skeleton::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
    animation: rx-skel 1.4s linear infinite;
}
@keyframes rx-skel {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Toast */
.rx-toast {
    background: var(--surface-1);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--r-md);
    padding: 12px 16px;
    color: var(--text);
    font-size: 13px;
    box-shadow: var(--shadow-2);
}
.rx-toast.success { border-left: 3px solid var(--green); }
.rx-toast.error   { border-left: 3px solid var(--red);   }
.rx-toast.info    { border-left: 3px solid var(--indigo); }

/* ────────────────────────────────────────────────────────────────────────────
   4. KILL-SWITCHES — neutralize decorative noise across pages
   ──────────────────────────────────────────────────────────────────────────── */

/* Pulse / live / float — kill any decorative pulse animation regardless of
   page-specific class naming. Catches `.pulse-dot`, `.live-dot`, `.dot`,
   `.pulse`, and any class ending in `-dot`/`-pulse` plus their ::before /
   ::after pseudo-elements. The element itself stays as a static indicator. */
.pulse-dot, .pulse-dot::before, .pulse-dot::after,
.live-dot, .live-dot::before, .live-dot::after,
.lp-eyebrow .pulse, .lp-eyebrow .pulse::before, .lp-eyebrow .pulse::after,
[class$="-eyebrow"] .pulse, [class$="-eyebrow"] .pulse::before, [class$="-eyebrow"] .pulse::after,
[class$="-eyebrow"] .dot, [class$="-eyebrow"] .dot::before, [class$="-eyebrow"] .dot::after,
[class*="-status"] .dot, [class*="-status"] .dot::before, [class*="-status"] .dot::after,
.rx-live::before,
.anim-float, .lp-float,
.rx-flash-up, .rx-flash-down {
    animation: none !important;
    box-shadow: none !important;
}
.pulse-dot::before, .pulse-dot::after,
.live-dot::before, .live-dot::after,
.lp-eyebrow .pulse::before, .lp-eyebrow .pulse::after,
[class$="-eyebrow"] .pulse::before, [class$="-eyebrow"] .pulse::after,
[class$="-eyebrow"] .dot::before, [class$="-eyebrow"] .dot::after,
[class*="-status"] .dot::before, [class*="-status"] .dot::after,
.rx-live::before {
    content: none !important;
}

/* Other decorative animations across pages (paneIn, shimmerBar, etc.) */
.ev-pane.active, .help-pane.active, .set-panel.active {
    animation: none !important;
}

/* Card entrance & hover transforms — disable across-the-board */
.rx-card, .transfer-card, .deposit-card, .funding-card,
.balance-card, .asset-card, .wallet-card,
[class*="bal-card"], [class*="balance-tile"],
.kpi-card, .pillar, .how-card, .mkt-card, .agent, .pf, .thesis,
.trend-card, .drop-card, .pick-card, .ql-card, .ev-hero, .atk-hero,
.mp-hero, .xa-hero, .pr-hero, .tv-hero, .cn-hero, .vc-hero, .sf-hero {
    animation: none !important;
}

/* Cap aggressive hover lift transforms — premium feel uses subtle 1px lift max.
   This neutralizes pages that still set translateY(-3px..-8px) on hover. */
.benefit-card:hover, .feature-card:hover, .live-card:hover, .side-card:hover,
.featured-card:hover, .article-card:hover, .camp-card:hover, .threat:hover,
.sf-stat:hover, .quick-card:hover, .agent:hover, .social:hover,
.mkt-card:hover, .how-card:hover, .trend-card:hover, .drop-card:hover,
.pick-card:hover, .ql-card:hover, .sale-card:hover, .trader-card:hover,
.thesis:hover, .pf:hover, .pillar:hover, .lp-product:hover, .price-card:hover,
.gateway-card:hover, .bot-card:hover, .active-row:hover {
    transform: translateY(-1px) !important;
}

/* Animated gradient borders that reveal on hover — kill the reveal on every
   `*::before` that uses the `mask-composite: exclude` recipe. We can't easily
   detect those by selector, so we target the known classes. */
.mkt-card::before, .agent::before, .pf::before, .trend-card::before,
.pick-card::before, .pillar::before, .how-card::before, .drop-card::before,
.thesis::before, .stat-cell::before, .ql-card::before, .ev-hero::before,
.atk-hero::before, .mp-hero::before, .xa-hero::before, .pr-hero::before,
.tv-hero::before, .vc-hero::before, .sf-hero::before, .stats-card::before,
.feat-card::before, .audits::before, .stats-panel::before,
.score-card::before, .check-card::before, .opt-shell::before,
.rx-hero::before {
    background: none !important;
    -webkit-mask: none !important;
            mask: none !important;
    opacity: 0 !important;
    display: none !important;
}

/* Hero ::after multi-layer radial glows — drop them */
.ev-hero::after, .atk-hero::after, .mp-hero::after, .xa-hero::after,
.pr-hero::after, .tv-hero::after, .vc-hero::after, .sf-hero::after,
.audits::after, .stats-panel::after, .go-live::after, .pitch::before,
.pitch::after, .user-cta::after, .report::after {
    background: none !important;
    display: none !important;
}

/* Page-level fixed ambient gradient — full-viewport repaint on scroll. Kill. */
.light-theme-wrapper::before, .app-wrapper::before, .lp-bg-glow {
    display: none !important;
}

/* Dot grid overlay — purely decorative, kill */
.grid-bg, .lp-grid-bg { display: none !important; }

/* Glassmorphism — replace blur with solid surface for paint cost + clarity */
.feat-card, .stats-card, .lp-float, .mp-banner, .mp-search,
.profile-dropdown, .top-nav, [class*="rx-toast"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Decorative entrance / hover transforms across pages */
.kpi-card:hover, .pillar:hover, .mkt-card:hover, .agent:hover,
.pf:hover, .trend-card:hover, .pick-card:hover, .drop-card:hover,
.thesis:hover, .ql-card:hover, .balance-card:hover, .asset-card:hover,
.wallet-card:hover, .stat-cell:hover, .how-card:hover, .std:hover,
.creators-card .creator-row:hover, .ar-card:hover, .active-row:hover {
    transform: none !important;
}

/* Hero hover lift on social/event/creator cards — calm */
.social:hover, .ev-hero, .atk-hero, .pr-hero, .tv-hero, .mp-hero,
.xa-hero, .vc-hero, .sf-hero, .audits, .stats-panel {
    transform: none !important;
}

/* Hero typography — cap headline to 40px maximum, force single weight, drop
   gradient text on the .accent span. Page-specific giant heroes (60–80px)
   are reduced to a calm 36–40px. */
.ev-hero h1, .atk-hero h1, .mp-hero h1, .xa-hero h1, .pr-hero h1,
.tv-hero h1, .vc-hero h1, .sf-hero h1, .cn-hero h1, .pr-hero h1 {
    font-size: 36px !important;
    font-weight: 700 !important;
    letter-spacing: -0.6px !important;
    line-height: 1.12 !important;
}
.ev-hero h1 strong, .atk-hero h1 strong, .mp-hero h1 strong, .xa-hero h1 strong,
.pr-hero h1 strong, .tv-hero h1 strong, .vc-hero h1 strong, .sf-hero h1 strong,
.cn-hero h1 strong { font-weight: 700 !important; }
.ev-hero h1 .accent, .atk-hero h1 .accent, .mp-hero h1 .accent,
.xa-hero h1 .accent, .pr-hero h1 .accent, .tv-hero h1 .accent,
.vc-hero h1 .accent, .sf-hero h1 .accent, .cn-hero h1 .accent {
    background: none !important;
    -webkit-text-fill-color: var(--text) !important;
    color: var(--text) !important;
}

/* Hero sub-paragraph — 15px max */
.ev-hero p, .atk-hero p, .mp-hero p, .xa-hero p, .pr-hero p,
.tv-hero p, .vc-hero p, .sf-hero p, .cn-hero p {
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: var(--text-dim) !important;
}

/* Hero card padding — reduce from 56–64px to a calm 32px */
.ev-hero, .atk-hero, .mp-hero, .xa-hero, .pr-hero, .tv-hero,
.vc-hero, .audits, .stats-panel, .go-live, .pitch {
    padding: 32px !important;
    border-radius: var(--r-xl) !important;
    background: var(--surface-1) !important;
    border: 1px solid var(--hairline) !important;
    box-shadow: none !important;
}

/* Section heading sizes — force calm */
.sec-head h2, .rx-section h2 {
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: -0.2px !important;
}
.sec-head p, .rx-section p { font-size: 13px !important; color: var(--text-dim) !important; }

/* Eyebrow styling — drop oversized pill, tighten to subtle inline text */
.ev-eyebrow, .atk-eyebrow, .mp-eyebrow, .xa-eyebrow, .pr-eyebrow,
.tv-eyebrow, .vc-eyebrow, .cn-eyebrow, .sf-eyebrow {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-dim) !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 14px !important;
}

/* Cards: kill multi-layer shadows, normalize to a single shadow / no shadow */
.kpi-card, .mkt-card, .agent, .pf, .trend-card, .pick-card, .pillar,
.how-card, .drop-card, .thesis, .ql-card, .stat-cell, .stats-card,
.score-card, .check-card, .opt-shell, .audits, .stats-panel,
.user-cta, .report, .feat-card {
    box-shadow: none !important;
    background: var(--surface-1) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-xl) !important;
}
.kpi-card:hover, .mkt-card:hover, .agent:hover, .pf:hover,
.trend-card:hover, .pick-card:hover, .pillar:hover, .how-card:hover,
.drop-card:hover, .thesis:hover, .ql-card:hover, .stat-cell:hover {
    border-color: var(--hairline-strong) !important;
    box-shadow: none !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   4b. EMPTY / ERROR / LOADING PRIMITIVES
   Unified placeholders so every list, grid, and table renders the same calm
   empty / error / loading shell instead of bespoke "No data" rows.
   ──────────────────────────────────────────────────────────────────────────── */
.rx-empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 56px 24px !important;
    gap: 12px !important;
    color: var(--text-dim) !important;
}
.rx-empty__icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--text-dim) !important;
}
.rx-empty__icon svg, .rx-empty__icon i { width: 20px; height: 20px; }
.rx-empty__title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-main) !important;
    margin: 0 !important;
}
.rx-empty__desc {
    font-size: 13px !important;
    color: var(--text-dim) !important;
    margin: 0 !important;
    max-width: 340px !important;
    line-height: 1.55 !important;
}
.rx-empty__cta {
    margin-top: 8px !important;
    background: transparent !important;
    border: 1px solid var(--hairline-strong) !important;
    color: var(--text-main) !important;
    padding: 8px 16px !important;
    border-radius: var(--r-md) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: border-color 120ms ease, background 120ms ease !important;
}
.rx-empty__cta:hover { border-color: var(--okx-neon); background: rgba(193, 240, 51, 0.06); }
.rx-empty--error .rx-empty__icon {
    background: rgba(246, 70, 93, 0.08) !important;
    border-color: rgba(246, 70, 93, 0.30) !important;
    color: var(--accent-red) !important;
}

/* Inline error banner (form-level, page-level) */
.rx-error-banner {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    background: rgba(246, 70, 93, 0.06);
    border: 1px solid rgba(246, 70, 93, 0.24);
    border-radius: var(--r-md);
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.5;
}
.rx-error-banner svg, .rx-error-banner i {
    width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;
    color: var(--accent-red);
}

/* Table row empty cell — for <tr><td colspan> patterns */
.rx-empty-row td {
    text-align: center !important;
    padding: 56px 24px !important;
    color: var(--text-dim) !important;
    font-size: 13px !important;
    border: none !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   5. ACCESSIBILITY
   ──────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}