/* ============================================================
   ROXEARN — brand layer (dark EV theme)
   Loaded after style.css / ev.css on every user page.
   1. Tokens        5. Dashboard      9.  Motion
   2. Base          6. Packages       10. Responsive
   3. Logo + header 7. Side widgets
   4. App shell     8. Guest landing
   ============================================================ */

/* ── 1. Tokens ── */
:root {
    --bg: #05080f; --bg-2: #0a0f1d; --card: #0c1222; --surface: #111a2e;
    --rb-light: #1c2b52; --rb-pale: rgba(0, 198, 255, .12);
    --text: #e8eeff; --text-2: #a7b3d6; --text-3: #7c89ad; --muted: #56628a;
    --border: rgba(120, 160, 255, .12); --hdr: #070b16; --hdr-border: rgba(0, 198, 255, .14);
    --shadow: 0 10px 30px rgba(0, 0, 0, .45); --shadow-lg: 0 20px 50px rgba(0, 0, 0, .55);
    --gold-glow: rgba(255, 201, 60, .12); --green-pale: rgba(57, 243, 160, .12); --red-pale: rgba(255, 92, 122, .12);

    --rx-ink:      #eef3ff;
    --rx-ink-2:    #13265a;
    --rx-violet:   #3ea8ff;
    --rx-violet-2: #1350d6;
    --rx-coral:    #00c6ff;
    --rx-mint:     #12b886;
    --rx-amber:    #f59e0b;
    --rx-neon:     #00e5ff;
    --rx-volt:     #39f3a0;
    --rx-gold:     #ffd166;
    --rx-line:     rgba(120, 160, 255, .13);
    --rx-glass:    linear-gradient(180deg, rgba(22, 32, 60, .72), rgba(10, 15, 30, .78));
    --rx-grad:      linear-gradient(135deg, #1f6bff 0%, #00c6ff 60%, #39f3c8 100%);
    --rx-grad-ink:  linear-gradient(150deg, #0a1530 0%, #123a8a 60%, #1350d6 100%);
    --rx-grad-volt: linear-gradient(135deg, #00e5ff 0%, #39f3a0 100%);
    --rx-grad-gold: linear-gradient(135deg, #ffd166 0%, #f59e0b 100%);
    --rx-font-d:   'Space Grotesk', 'Sora', sans-serif;
    --rx-mono:     'JetBrains Mono', ui-monospace, monospace;
    --rx-ease:     cubic-bezier(.22, 1, .36, 1);
}

/* Inner pages (ev-pages.css tokens) — html:root outranks that file's :root */
html:root {
    --epg-ink: #eef3ff; --epg-ink2: #a7b3d6; --epg-ink3: #7c89ad;
    --epg-line: rgba(120, 160, 255, .13); --epg-card: #0d1426;
    --epg-sh: 0 12px 30px -12px rgba(0, 0, 0, .6);
    --epg-emer: #3ea8ff; --epg-emer2: #00c6ff; --epg-volt: #00e5ff;
}

/* ── 2. Base ── */
html { color-scheme: dark; background: #05080f; }
body { font-family: 'Plus Jakarta Sans', sans-serif; }
body:not(.auth-page) {
    color: var(--text);
    background:
        radial-gradient(1100px 560px at 90% -10%, rgba(0, 198, 255, .13), transparent 60%),
        radial-gradient(900px 620px at -10% 35%, rgba(31, 107, 255, .14), transparent 62%),
        radial-gradient(700px 500px at 60% 110%, rgba(57, 243, 160, .07), transparent 60%),
        #05080f;
    background-attachment: fixed;
}
/* Faint grid backdrop, faded out towards the bottom */
body:not(.auth-page)::before {
    content: ''; position: fixed; inset: 0; width: auto; height: auto;
    border-radius: 0; filter: none; transform: none; animation: none; opacity: 1; pointer-events: none; z-index: 0;
    background: none;
    background-image: linear-gradient(rgba(120, 160, 255, .055) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(120, 160, 255, .055) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, #000 25%, transparent 75%);
            mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, #000 25%, transparent 75%);
}
body:not(.auth-page)::after { content: none; }
h1, h2, h3, h4, h5 { font-family: var(--rx-font-d); letter-spacing: -0.01em; }
::selection { background: rgba(0, 229, 255, .3); color: #fff; }

/* ── 3. Logo + header ── */
.logo { text-decoration: none; }
.rx-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.rx-logo-mark { width: 32px; height: 32px; flex-shrink: 0; filter: drop-shadow(0 0 12px rgba(0, 198, 255, .55)); }
.rx-logo-txt { font-family: var(--rx-font-d); font-weight: 800; font-size: 19px; color: #fff; letter-spacing: -0.03em; line-height: 1; }
.rx-logo-txt b { font-weight: 800; background: var(--rx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rx-logo-lg .rx-logo-mark { width: 48px; height: 48px; }
.rx-logo-lg .rx-logo-txt { font-size: 28px; }
.rx-logo-light .rx-logo-txt { color: #fff; }

.header {
    padding: 10px 16px;
    background: rgba(5, 8, 15, .72);
    backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--rx-line);
}
.hwb-card { background: rgba(255, 255, 255, .04); border: 1px solid var(--rx-line); border-radius: 14px; box-shadow: none; }
.hwb-icon-wrap { background: var(--rx-grad); border: 0; border-radius: 10px; }
.hwb-icon-wrap i { color: #fff; }
.hwb-label { color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.hwb-amount { color: #fff; font-family: var(--rx-font-d); }

/* ── 4. App shell — main wrapper, bottom nav, support button, sidebar ── */
.rx-main { position: relative; z-index: 5; display: block; min-height: calc(100vh - 64px); }
body.rx-in { padding-bottom: 104px; }
body.rx-guest { padding-bottom: 96px; }

/* Inner pages: one consistent gutter, and undo the old -5rem pull-up */
.rx-main > .container { margin-top: 0; }
.rx-main > .app-container,
.rx-main > .net-app-container,
.rx-main > .sec-app-container { padding: 16px 16px 24px; }
.rx-main > .ord-wrap { margin-top: 16px; }

/* Bottom nav (mobile / tablet) */
.rx-nav {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 1000;
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    height: 66px; padding: 0 6px 8px; max-width: 560px; margin: 0 auto;
    background: rgba(7, 11, 22, .86);
    backdrop-filter: saturate(170%) blur(16px); -webkit-backdrop-filter: saturate(170%) blur(16px);
    border: 1px solid var(--rx-line); border-radius: 24px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .48);
}
/* Neon hairline along the top edge of the nav */
.rx-nav::before {
    content: ''; position: absolute; left: 18%; right: 18%; top: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--rx-neon), transparent);
}
.rx-nav-item {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
    text-decoration: none; color: #6f7ca3; font-size: 10.5px; font-weight: 700; -webkit-tap-highlight-color: transparent;
    transition: color .25s;
}
.rx-nav-ico {
    width: 44px; height: 30px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 17px;
    transition: background .25s, color .25s, transform .3s var(--rx-ease), box-shadow .25s;
}
.rx-nav-item:hover { color: #a9b6dc; }
.rx-nav-item:active .rx-nav-ico { transform: scale(.9); }
.rx-nav-item.on { color: var(--rx-neon); }
.rx-nav-item.on .rx-nav-ico { background: rgba(0, 229, 255, .10); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .22); transform: translateY(-2px); }
/* Glowing dot under the active tab */
.rx-nav-item.on:not(.rx-nav-fab)::after {
    content: ''; position: absolute; bottom: -6px; width: 4px; height: 4px; border-radius: 50%;
    background: var(--rx-neon); box-shadow: 0 0 8px var(--rx-neon);
}
.rx-nav-fab, .rx-nav-fab.on { color: var(--rx-ink); }
.rx-nav-fab .rx-nav-ico,
.rx-nav-fab.on .rx-nav-ico {
    position: relative; width: 56px; height: 56px; border-radius: 19px; margin-top: -30px; font-size: 20px; color: #fff;
    background: var(--rx-grad); border: 4px solid #05080f; transform: none;
    box-shadow: 0 0 0 1px rgba(0, 229, 255, .35), 0 10px 28px rgba(0, 198, 255, .45);
}

.rx-support {
    position: fixed; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 999;
    width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    background: var(--rx-grad); color: #fff; font-size: 18px; text-decoration: none;
    box-shadow: 0 0 0 1px rgba(0, 229, 255, .3), 0 12px 28px rgba(0, 120, 255, .4);
    transition: transform .25s var(--rx-ease);
}
.rx-support:hover { transform: translateY(-3px); }

.nft-sidebar { background: linear-gradient(180deg, #08101f 0%, #050912 100%) !important; border-right: 1px solid var(--rx-line); box-shadow: none !important; }
.nft-sidebar.open { box-shadow: 26px 0 64px -22px rgba(0, 0, 0, .60) !important; }
.evs-guest-ico { display: block; margin-bottom: 10px; }

/* Auth pages (their dark theme lives in style.css under body.auth-page) */
.auth-page-logo a { text-decoration: none; }
body.auth-page::before { width: auto; height: auto; border-radius: 0; background-color: transparent; opacity: 1; }
body.auth-page .rx-logo-txt { color: #fff; }
body.auth-page .modal-icon,
body.auth-page .submit-btn { background: var(--rx-grad); }

/* ── 5. Dashboard ── */
.rx-page { position: relative; z-index: 5; max-width: 560px; margin: 0 auto; padding: 16px 16px 24px; }
.rx-dash { display: flex; flex-direction: column; gap: 18px; }
/* Mobile: both columns flatten into one ordered stack */
.rx-dash .rx-col { display: contents; }
.rx-a-hero { order: 1; } .rx-a-quick { order: 2; } .rx-a-prod { order: 3; } .rx-a-stats { order: 4; }
.rx-a-orders { order: 5; } .rx-a-refer { order: 6; } .rx-a-earn { order: 7; } .rx-a-install { order: 8; }

.rx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.rx-head h3 { font-size: 16px; font-weight: 700; color: #fff; margin: 0; display: flex; align-items: center; gap: 8px; }
.rx-head h3 i { color: var(--rx-neon); font-size: 14px; filter: drop-shadow(0 0 6px rgba(0, 229, 255, .6)); }
.rx-head a { font-size: 12px; font-weight: 700; color: var(--rx-neon); text-decoration: none; }
.rx-head a i { transition: transform .2s; }
.rx-head a:hover i { transform: translateX(3px); }

/* Glass surfaces */
.rx-card, .rx-stat, .rx-refer, .rx-quick, .rx-feat, .rx-step, .rx-land-end, .rx-list {
    background: var(--rx-glass); border: 1px solid var(--rx-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 34px rgba(0, 0, 0, .35);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.rx-card { border-radius: 24px; padding: 16px; }
.rx-chip {
    display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
    background: rgba(57, 243, 160, .12); color: var(--rx-volt); border: 1px solid rgba(57, 243, 160, .25);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Hero — "charging" wallet card with the car in the background */
.rx-hero {
    position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; padding: 20px; color: #fff;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(0, 229, 255, .28), transparent 55%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 16px),
        linear-gradient(145deg, #0a1736 0%, #0b2a6e 55%, #0a55d8 100%);
    border: 1px solid rgba(0, 198, 255, .35);
    box-shadow: 0 0 0 1px rgba(0, 229, 255, .06), 0 24px 60px rgba(0, 110, 255, .28);
}
.rx-hero::before, .rx-hero::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.rx-hero::before { width: 220px; height: 220px; right: -70px; top: -90px; background: radial-gradient(circle, rgba(0, 229, 255, .45), transparent 70%); }
.rx-hero::after  { width: 200px; height: 200px; left: -80px; bottom: -110px; background: radial-gradient(circle, rgba(57, 243, 160, .30), transparent 70%); }
.rx-hero > * { position: relative; z-index: 1; }
.rx-hero > .rx-hero-car {
    position: absolute; z-index: 0; right: -6%; top: 0; bottom: 0; width: 72%; pointer-events: none;
    object-fit: cover; object-position: center 40%; opacity: .5; mix-blend-mode: screen;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 80%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 80%, transparent 100%);
    animation: rxCarDrift 9s ease-in-out infinite alternate;
}
.rx-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rx-hi { font-size: 12px; color: rgba(255, 255, 255, .65); }
.rx-name { font-family: var(--rx-font-d); font-size: 18px; font-weight: 700; margin-top: 2px; }
.rx-code { font-family: var(--rx-mono); font-size: 11px; color: rgba(255, 255, 255, .55); margin-top: 2px; letter-spacing: .04em; }
.rx-pill {
    display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 6px 11px; border-radius: 999px;
    background: rgba(5, 10, 25, .45); border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.rx-pill .d { width: 7px; height: 7px; border-radius: 50%; background: #ff8f8f; }
.rx-pill.on .d { background: #5ef0b8; box-shadow: 0 0 0 3px rgba(94, 240, 184, .25); animation: rxPing 2s ease-out infinite; }
.rx-bal { margin-top: 22px; }
.rx-bal-lbl { font-size: 12px; color: rgba(255, 255, 255, .7); display: flex; align-items: center; gap: 6px; }
.rx-net {
    margin-left: 6px; font-family: var(--rx-mono); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px;
    color: var(--rx-volt); background: rgba(57, 243, 160, .12); border: 1px solid rgba(57, 243, 160, .3);
}
.rx-bal-val {
    font-family: var(--rx-font-d); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin-top: 4px;
    font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(0, 229, 255, .35);
}
.rx-hero-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.rx-hero-mini > div {
    background: rgba(3, 10, 28, .45); border: 1px solid rgba(0, 198, 255, .22); border-radius: 16px; padding: 11px 12px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.rx-hero-mini .v { display: block; font-family: var(--rx-font-d); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.rx-hero-mini .l { display: block; font-size: 11px; color: rgba(255, 255, 255, .6); margin-top: 3px; }

/* Battery-style charge bar: fills once, then a highlight keeps flowing through it */
.rx-charge { position: relative; height: 6px; margin-top: 18px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.rx-charge span {
    display: block; height: 100%; width: 100%; border-radius: inherit; transform-origin: left;
    background: linear-gradient(90deg, #1f6bff 0%, #00e5ff 55%, #39f3a0 100%);
    box-shadow: 0 0 12px rgba(0, 229, 255, .6);
    animation: rxFill 1.6s var(--rx-ease) .3s both;
}
.rx-charge::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
    background-size: 40% 100%; background-repeat: no-repeat;
    animation: rxCharge 2.6s linear 1.9s infinite;
}

.rx-hero-cta { display: flex; gap: 10px; margin-top: 16px; }
.rx-btn {
    position: relative; overflow: hidden; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 14px; border-radius: 14px; font-size: 13px; font-weight: 700; text-decoration: none; border: 0; cursor: pointer;
    transition: transform .2s var(--rx-ease), box-shadow .2s, filter .2s;
}
.rx-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.rx-btn:active { transform: scale(.97); }
.rx-btn-light { background: var(--rx-grad-volt); color: #03121f; box-shadow: 0 8px 24px rgba(0, 229, 255, .3); }
.rx-btn-glass { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .2); color: #fff; }
.rx-btn-grad  { background: var(--rx-grad); color: #fff; box-shadow: 0 10px 24px rgba(31, 107, 255, .35); }

/* Quick actions */
.rx-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px 10px; border-radius: 22px; }
.rx-qa { display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; font-size: 11px; font-weight: 700; color: var(--text-2); text-align: center; }
.rx-qa-ico {
    width: 52px; height: 52px; border-radius: 17px; display: flex; align-items: center; justify-content: center; font-size: 18px;
    background: rgba(0, 198, 255, .08); border: 1px solid rgba(0, 198, 255, .22); color: #5fe3ff;
    box-shadow: inset 0 0 14px rgba(0, 198, 255, .08);
    transition: transform .3s var(--rx-ease), box-shadow .3s;
}
.rx-qa:nth-child(2) .rx-qa-ico { color: var(--rx-coral); }
.rx-qa:nth-child(3) .rx-qa-ico { color: var(--rx-mint); }
.rx-qa:nth-child(4) .rx-qa-ico { color: var(--rx-amber); }
.rx-qa:hover .rx-qa-ico { transform: translateY(-4px); box-shadow: 0 0 18px rgba(0, 229, 255, .35); }
.rx-qa:active .rx-qa-ico { transform: scale(.92); }

/* ── 6. Packages ── */
.rx-tabs { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid transparent; }
/* Sliding pill behind the active tab — positioned by home.js */
.rx-tab-ink {
    position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; z-index: 0;
    background: var(--rx-grad); box-shadow: 0 6px 18px rgba(0, 150, 255, .35);
    transition: transform .4s var(--rx-ease), width .4s var(--rx-ease), background .4s;
}
.rx-tab-ink.vip { background: var(--rx-grad-gold); box-shadow: 0 6px 18px rgba(245, 158, 11, .35); }
.rx-tab {
    position: relative; z-index: 1; border: 0; background: transparent; padding: 8px 18px; border-radius: 999px;
    font-size: 13px; font-weight: 700; color: var(--text-3); cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px; transition: color .3s;
}
.rx-tab.on { color: #fff; }
.rx-tab[data-cat="vip"].on { color: #241500; }
.rx-tab em { font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: inherit; }
.rx-tab.on em { background: rgba(255, 255, 255, .22); }
/* No-JS fallback: paint the active tab directly */
html:not(.rx-js) .rx-tab.on { background: var(--rx-grad); }
html:not(.rx-js) .rx-tab[data-cat="vip"].on { background: var(--rx-grad-gold); }

.rx-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 10px; }
.rx-grid[hidden] { display: none; }

.rx-prod {
    position: relative; overflow: hidden; display: flex; flex-direction: column; text-decoration: none;
    padding: 7px; border-radius: 18px;
    background: rgba(255, 255, 255, .025); border: 1px solid var(--rx-line);
    transform: perspective(700px) rotateX(var(--rx-ry, 0deg)) rotateY(var(--rx-rx, 0deg));
    transition: transform .35s var(--rx-ease), border-color .3s, box-shadow .3s;
}
.rx-prod:hover {
    transform: perspective(700px) rotateX(var(--rx-ry, 0deg)) rotateY(var(--rx-rx, 0deg)) translateY(-4px);
    border-color: rgba(0, 229, 255, .5);
    box-shadow: 0 0 0 1px rgba(0, 229, 255, .15), 0 16px 36px rgba(0, 160, 255, .22);
}
.rx-prod.is-tilting { transition: transform .08s linear, border-color .3s, box-shadow .3s; }
.rx-prod-img {
    position: relative; aspect-ratio: 16 / 10; border-radius: 13px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 80%, rgba(0, 198, 255, .25), #0b1326 70%);
}
.rx-prod-img img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 60%;
    filter: saturate(1.08) contrast(1.04);
    transition: transform .6s var(--rx-ease), filter .4s;
}
.rx-prod:hover .rx-prod-img img { transform: scale(1.09); filter: saturate(1.25) contrast(1.08) brightness(1.06); }
/* Glow that rises from the bottom of the image on hover */
.rx-prod-img::before {
    content: ''; position: absolute; inset: auto 0 0; height: 60%; z-index: 1; pointer-events: none;
    background: linear-gradient(0deg, rgba(0, 229, 255, .35), transparent);
    opacity: 0; transition: opacity .4s;
}
.rx-prod:hover .rx-prod-img::before { opacity: 1; }
/* Bolt badge */
.rx-prod-img::after {
    content: "\f0e7"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; left: 8px; bottom: 8px; z-index: 2; width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 11px;
    color: #fff; background: var(--rx-grad); box-shadow: 0 0 0 3px rgba(255, 255, 255, .7), 0 0 14px rgba(0, 198, 255, .6);
}
.rx-badge {
    position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 10px; font-weight: 800; padding: 4px 9px; border-radius: 999px;
    color: #241500; background: var(--rx-grad-gold); letter-spacing: .03em; box-shadow: 0 4px 14px rgba(245, 158, 11, .45);
}
.rx-prod-body { padding: 9px 5px 3px; }
.rx-prod-name { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-prod-row { display: grid; align-items: center; justify-content: normal; margin-top: 6px; gap: 6px; }
.rx-prod-price { font-family: var(--rx-font-d); font-size: 15px; font-weight: 800; color: var(--rx-neon); }
.rx-prod-price small { font-size: 10px; font-weight: 700; color: var(--text-3); margin-left: 2px; }
.rx-prod-go {
    position: relative; overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; height: 28px; padding: 0 12px; border-radius: 999px;
    font-size: 11px; font-weight: 800; color: #fff; background: var(--rx-grad); box-shadow: 0 4px 14px rgba(0, 150, 255, .35);
    transition: padding .3s var(--rx-ease);
}
.rx-prod-go::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 9px; width: 0; opacity: 0; transition: width .3s, opacity .3s, margin .3s; }
.rx-prod:hover .rx-prod-go::after { width: 10px; opacity: 1; margin-left: 5px; }

/* VIP — gold edition with a recurring shine sweep */
.rx-prod.vip { border-color: rgba(255, 201, 60, .4); background: linear-gradient(180deg, rgba(255, 201, 60, .06), rgba(255, 255, 255, .02)); }
.rx-prod.vip:hover { border-color: rgba(255, 209, 102, .75); box-shadow: 0 0 0 1px rgba(255, 201, 60, .2), 0 16px 36px rgba(245, 158, 11, .22); }
.rx-prod.vip .rx-prod-img::before { background: linear-gradient(0deg, rgba(255, 201, 60, .3), transparent); }
.rx-prod.vip .rx-prod-price { color: var(--rx-gold); }
.rx-prod.vip .rx-prod-go { background: var(--rx-grad-gold); color: #241500; box-shadow: 0 4px 14px rgba(245, 158, 11, .35); }
.rx-prod.vip::after,
.rx-prod-go::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none; z-index: 3;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .28) 50%, transparent 100%);
    transform: translateX(-160%) skewX(-18deg);
}
.rx-prod.vip::after { border-radius: inherit; animation: rxShine 4.5s ease-in-out infinite; }
.rx-prod-go::before { animation: rxShine 3.2s ease-in-out infinite; }
.rx-prod.vip .rx-prod-go::before { animation-delay: .6s; }

.rx-empty { grid-column: 1 / -1; text-align: center; color: var(--text-3); padding: 26px 10px; background: rgba(255, 255, 255, .02); border-radius: 18px; border: 1px dashed rgba(31, 107, 255, .25); }
.rx-empty-sm { padding: 18px 12px; font-size: 12.5px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.rx-empty-sm i { color: var(--rx-violet); }

/* Recent orders */
.rx-orders { display: flex; flex-direction: column; }
.rx-order { display: flex; align-items: center; gap: 12px; padding: 11px 6px; margin: 0 -6px; border-radius: 12px; transition: background .2s; }
.rx-order:hover { background: rgba(255, 255, 255, .03); }
.rx-order + .rx-order { border-top: 1px solid var(--rx-line); }
.rx-order-ico { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(0, 198, 255, .10); color: var(--rx-neon); flex-shrink: 0; }
.rx-order-body { flex: 1; min-width: 0; }
.rx-order-body b { display: block; font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-order-body span { font-size: 11px; color: var(--text-3); }
.rx-order-end { text-align: right; }
.rx-order-end b { display: block; font-size: 12.5px; color: #fff; font-family: var(--rx-font-d); }
.rx-st { display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.rx-st.p { background: rgba(255, 201, 60, .12); color: #ffc93c; }
.rx-st.c { background: rgba(57, 243, 160, .12); color: #39f3a0; }
.rx-st.r { background: rgba(255, 92, 122, .12); color: #ff5c7a; }

/* ── 7. Side widgets ── */
/* Stats */
.rx-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rx-stat { position: relative; overflow: hidden; border-radius: 20px; padding: 13px; transition: transform .3s var(--rx-ease), border-color .3s; }
.rx-stat:hover { transform: translateY(-3px); border-color: rgba(0, 229, 255, .3); }
/* Tone-tinted glow in the corner of each stat */
.rx-stat::after {
    content: ''; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, currentColor, transparent 70%); opacity: .12; transition: opacity .3s;
}
.rx-stat:hover::after { opacity: .22; }
.rx-stat-ico {
    width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 14px; margin-bottom: 10px; border: 1px solid currentColor; transition: transform .4s var(--rx-ease);
}
.rx-stat:hover .rx-stat-ico { transform: rotate(-8deg) scale(1.08); }
.rx-stat .v { font-family: var(--rx-font-d); font-size: 17px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.rx-stat .l { font-size: 11px; color: var(--text-3); margin-top: 2px; font-weight: 600; }
.rx-stat.t-violet { color: #3ea8ff; }
.rx-stat.t-coral  { color: #00e5ff; }
.rx-stat.t-mint   { color: #39f3a0; }
.rx-stat.t-amber  { color: #ffc93c; }
.rx-stat.t-violet .rx-stat-ico { background: rgba(62, 168, 255, .10); box-shadow: 0 0 16px rgba(62, 168, 255, .25); }
.rx-stat.t-coral  .rx-stat-ico { background: rgba(0, 229, 255, .10);  box-shadow: 0 0 16px rgba(0, 229, 255, .25); }
.rx-stat.t-mint   .rx-stat-ico { background: rgba(57, 243, 160, .10); box-shadow: 0 0 16px rgba(57, 243, 160, .25); }
.rx-stat.t-amber  .rx-stat-ico { background: rgba(255, 201, 60, .10); box-shadow: 0 0 16px rgba(255, 201, 60, .22); }

/* Referral */
.rx-refer { position: relative; overflow: hidden; border-radius: 24px; padding: 18px; }
.rx-refer::after {
    content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(0, 198, 255, .18), transparent 70%);
    animation: rxFloat 6s ease-in-out infinite;
}
.rx-refer h4 { margin: 0; font-size: 15px; color: #fff; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rx-refer h4 i { color: var(--rx-coral); }
.rx-refer p { font-size: 12px; color: var(--text-2); margin: 6px 0 14px; line-height: 1.5; }
.rx-link { display: flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, .3); border: 1px solid var(--rx-line); border-radius: 14px; padding: 6px 6px 6px 12px; }
.rx-link input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--rx-mono); font-size: 12px; color: var(--text-2); outline: none; }
.rx-link button { border: 0; width: 38px; height: 38px; border-radius: 11px; background: var(--rx-grad); color: #fff; cursor: pointer; transition: transform .2s var(--rx-ease); }
.rx-link button:hover { transform: scale(1.06); }
.rx-link button:active { transform: scale(.92); }
.rx-share { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.rx-share a { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; border-radius: 13px; font-size: 12px; font-weight: 700; text-decoration: none; transition: transform .2s var(--rx-ease), filter .2s; }
.rx-share a:hover { transform: translateY(-2px); filter: brightness(1.2); }
.rx-share .wa { background: rgba(37, 211, 102, .10); color: #4ee38a; border: 1px solid rgba(37, 211, 102, .25); }
.rx-share .tg { background: rgba(0, 136, 204, .12); color: #5cc6ff; border: 1px solid rgba(0, 136, 204, .3); }

/* Earnings list */
.rx-list { border-radius: 22px; overflow: hidden; }
.rx-card .rx-list { border-radius: 0; margin: 0 -16px -16px; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.rx-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.rx-row + .rx-row { border-top: 1px solid var(--rx-line); }
.rx-row-ico { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rx-row-body { flex: 1; min-width: 0; }
.rx-row-body h5 { margin: 0; font-size: 13px; color: #fff; font-family: inherit; font-weight: 700; }
.rx-row-body p { margin: 2px 0 0; font-size: 11px; color: var(--text-3); }
.rx-row-val { font-family: var(--rx-font-d); font-weight: 700; font-size: 13px; color: #fff; text-align: right; }

/* App install banner */
.rx-install {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; color: #fff;
    background: linear-gradient(135deg, #0b2a6e, #0a55d8 60%, #00a6e0);
    border: 1px solid rgba(0, 229, 255, .3); box-shadow: 0 14px 34px rgba(0, 110, 255, .25);
}
.rx-install-ico { width: 42px; height: 42px; border-radius: 13px; background: rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; animation: rxBob 3s ease-in-out infinite; }
.rx-install-txt { flex: 1; min-width: 0; }
.rx-install-txt h4 { margin: 0; font-size: 14px; }
.rx-install-txt p { margin: 2px 0 0; font-size: 11px; color: rgba(255, 255, 255, .8); }
.rx-install button { border: 0; padding: 9px 14px; border-radius: 12px; background: #0e121d; color: var(--rx-violet); font-weight: 800; font-size: 12px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.rx-install-done { font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ── 8. Guest landing ── */
.rx-land { position: relative; z-index: 5; max-width: 560px; margin: 0 auto; padding: 16px 16px 30px; }
.rx-sec { margin-top: 22px; }
.rx-land-hero {
    position: relative; overflow: hidden; border-radius: 30px; padding: 30px 22px 26px; color: #fff;
    background: var(--rx-grad-ink); border: 1px solid rgba(0, 198, 255, .3); box-shadow: 0 24px 50px rgba(42, 29, 120, .35);
}
.rx-land-hero::before { content: ''; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 198, 255, .55), transparent 70%); animation: rxFloat 7s ease-in-out infinite; }
.rx-land-hero::after { content: ''; position: absolute; left: -90px; bottom: -120px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 184, 255, .6), transparent 70%); animation: rxFloat 8s ease-in-out infinite reverse; }
.rx-land-hero > * { position: relative; z-index: 1; }
.rx-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); }
.rx-land-hero h1 { font-size: 30px; line-height: 1.15; font-weight: 800; margin: 16px 0 10px; }
.rx-land-hero h1 span { background: linear-gradient(135deg, #00e5ff, #39f3a0, #00e5ff); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rxTextFlow 5s linear infinite; }
.rx-land-hero p { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .75); margin: 0; }
.rx-land-cta { display: flex; gap: 10px; margin-top: 22px; }
.rx-feats { display: grid; gap: 12px; }
.rx-feat { display: flex; gap: 14px; align-items: flex-start; border-radius: 20px; padding: 16px; transition: transform .3s var(--rx-ease), border-color .3s; }
.rx-feat:hover { transform: translateY(-3px); border-color: rgba(0, 229, 255, .3); }
.rx-feat-ico { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.rx-feat h4 { margin: 0; font-size: 14px; color: #fff; }
.rx-feat p { margin: 4px 0 0; font-size: 12px; color: var(--text-3); line-height: 1.55; }
.rx-steps { counter-reset: s; display: grid; gap: 10px; }
.rx-step { counter-increment: s; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; }
.rx-step::before { content: counter(s); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--rx-font-d); font-weight: 800; font-size: 13px; color: #fff; background: var(--rx-grad); flex-shrink: 0; }
.rx-step b { display: block; font-size: 13px; color: #fff; }
.rx-step span { font-size: 12px; color: var(--text-3); }
.rx-land-end { text-align: center; padding: 26px 20px; border-radius: 26px; }
.rx-land-end h3 { margin: 12px 0 6px; font-size: 18px; color: #fff; }
.rx-land-end p { margin: 0 0 16px; font-size: 13px; color: var(--text-3); }

/* ── 9. Motion ── */
/* Scroll reveal — only armed once home.js adds html.rx-js, so content never hides without JS.
   Sections fade up; the cards inside a .rx-stagger list pop in one after another
   (.rx-pop is removed again on animationend so hover transforms keep working). */
.rx-js .rx-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--rx-ease), transform .6s var(--rx-ease); }
.rx-js .rx-reveal.is-in { opacity: 1; transform: none; }
.rx-js .rx-stagger:not(.is-in) > * { opacity: 0; }
.rx-pop { animation: rxPop .55s var(--rx-ease) both; animation-delay: calc(var(--rx-i, 0) * 60ms); }

.rx-btn, .rx-share a, .rx-link button { position: relative; overflow: hidden; }

/* Bottom nav rises in on load, FAB keeps a soft pulse ring */
.rx-nav { animation: rxNavIn .6s var(--rx-ease) .2s both; }
.rx-nav-fab .rx-nav-ico::after {
    content: ''; position: absolute; inset: -4px; border-radius: 21px; pointer-events: none;
    border: 2px solid rgba(0, 229, 255, .55); animation: rxRing 2.4s ease-out infinite;
}
.rx-support { animation: rxBob 3.4s ease-in-out infinite; }
.rx-support:hover { animation-play-state: paused; }

/* Click ripple — spawned by home.js */
.rx-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, .35); transform: scale(0); animation: rxRipple .6s ease-out forwards; }

@keyframes rxCharge   { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@keyframes rxFill     { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rxPing     { 0% { box-shadow: 0 0 0 0 rgba(94, 240, 184, .55); } 100% { box-shadow: 0 0 0 8px rgba(94, 240, 184, 0); } }
@keyframes rxCarDrift { from { transform: translateX(0) scale(1.02); } to { transform: translateX(-10px) scale(1.06); } }
@keyframes rxShine    { 0%, 55% { transform: translateX(-160%) skewX(-18deg); } 100% { transform: translateX(320%) skewX(-18deg); } }
@keyframes rxPop      { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes rxNavIn    { from { opacity: 0; transform: translateY(30px); } }
@keyframes rxRing     { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes rxBob      { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes rxFloat    { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-12px, 10px); } }
@keyframes rxTextFlow { to { background-position: 200% center; } }
@keyframes rxRipple   { to { transform: scale(2.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .rx-hero-car, .rx-charge span, .rx-charge::after, .rx-pill.on .d,
    .rx-prod.vip::after, .rx-prod-go::before, .rx-pop,
    .rx-nav, .rx-nav-fab .rx-nav-ico::after, .rx-support, .rx-install-ico,
    .rx-refer::after, .rx-land-hero::before, .rx-land-hero::after, .rx-land-hero h1 span { animation: none; }
    .rx-js .rx-reveal, .rx-js .rx-stagger:not(.is-in) > * { opacity: 1; transform: none; transition: none; }
    .rx-prod, .rx-prod:hover { transform: none; }
}

/* ── 10. Responsive ── */
@media (min-width: 720px) {
    .rx-page, .rx-land { max-width: 720px; }
    .rx-page.rx-dash { max-width: 760px; }
    .rx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rx-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rx-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rx-feat { flex-direction: column; }
    .rx-hero > .rx-hero-car { width: 58%; }
}

/* Desktop: sidebar becomes a permanent left rail, bottom nav goes away, dashboard splits into two columns */
@media (min-width: 1024px) {
    body.rx-in { padding-left: 280px; padding-bottom: 0; }
    body.rx-in .nft-sidebar { left: 0 !important; width: 280px !important; box-shadow: none !important; z-index: 900; }
    body.rx-in .sb-overlay, body.rx-in .evs-close, body.rx-in .hamburger-btn { display: none !important; }
    body.rx-in .rx-nav, body.rx-guest .rx-nav { display: none; }
    body.rx-in .rx-support { bottom: 24px; right: 24px; }
    body.rx-in .header { padding: 12px 28px; }
    body.rx-in .rx-main { padding: 8px 12px 40px; }
    body.rx-guest { padding-bottom: 0; }

    .rx-page.rx-dash {
        max-width: 1180px; padding: 20px 8px 24px;
        display: grid; gap: 20px; align-items: start;
        grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
    }
    .rx-dash .rx-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
    .rx-dash .rx-stats { grid-template-columns: 1fr 1fr; }
    .rx-dash .rx-stat { padding: 16px; }
    .rx-dash .rx-hero { padding: 26px; }
    .rx-dash .rx-bal-val { font-size: 36px; }
    .rx-dash .rx-hero-cta { max-width: 420px; }
    .rx-dash .rx-hero > .rx-hero-car { width: 52%; }
    .rx-dash .rx-qa-ico { box-shadow: none; background: var(--surface); }
    .rx-dash .rx-grid { gap: 12px; }
}

@media (min-width: 1400px) {
    .rx-dash .rx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}