/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a, button, input, select, textarea { touch-action: manipulation; -ms-touch-action: manipulation; }

/* ─── Design Tokens — Dark (default) ─────────────────────── */
:root {
    --bg:       #08060e;
    --bg2:      #0e0b18;
    --bg3:      #151122;
    --bg4:      #1d182e;
    --bg5:      #25203a;

    --gold:     #9b6dff;
    --gold-dim: #7c50d4;
    --gold-lg:  #b88aff;
    --gold-glow:rgba(155,109,255,.12);

    --accent:   #9b6dff;
    --accent2:  #22c55e;

    --warn:     #f59e0b;
    --danger:   #ef4444;
    --info:     #3b82f6;

    /* Role colors for conversation surfaces (messages / disputes / support).
       One hue per participant role, overridden per theme where the default
       clashes with the theme accent or fails AA contrast. */
    --role-admin:   #ef4444;
    --role-support: #6c8fff;
    --role-seller:  #fbbf24;
    --role-buyer:   #38bdf8;

    --text:     #e8e2f2;
    --text2:    #a99cc4;
    --muted:    #8c7eaa;

    --border:   #1a1428;
    --border2:  #262038;

    --radius:   2px;
    --radius-sm: 1px;
    --radius-lg: 4px;
    --shadow:   0 12px 60px rgba(0,0,0,.8), 0 0 0 1px rgba(155,109,255,.04);
    --shadow-sm:0 2px 14px rgba(0,0,0,.6);

    --card-bw:   1px;
    --btn-radius: var(--radius);
    --input-radius: var(--radius-sm);
    --heading-weight: 400;
    --body-weight: 300;
    --btn-transform: none;
    --btn-letter: 0;
    --heading-letter: 0;

    --nav-h:         54px;
    --bottom-nav-h:  58px;

    --font: 'Helvetica Neue', 'Segoe UI', -apple-system, 'Inter', 'Roboto', Arial, sans-serif;
    --font-heading: 'Didot', 'Bodoni MT', 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    --mono: 'Courier New', 'Lucida Console', monospace;

    --bg-glow1: rgba(155,109,255,.05);
    --bg-glow2: rgba(34,197,94,.03);

    --banner-overlay: rgba(0,0,0,.55);
    --banner-border-blend: 1;
    /* Text stroke/shadow DISABLED globally on every theme — the 4-way
       stroke + soft drop made titles and body text hard to read. Each
       theme now relies on its own contrast (+ the subtle reading plate).
       Text over arbitrary profile-banner images keeps its own stroke
       via .pd-has-banner, the only place a halo is still needed. */
    --text-outline: none;
}

/* ─── Legacy light alias (defensive fallback only — no valid theme key
       targets it; safe_theme_for_request() rejects both selectors) ──── */
[data-theme="light"] {
    --bg:       #f0f8ff;
    --bg2:      #ffffff;
    --bg3:      #e8f4fc;
    --bg4:      #d8ecf8;
    --bg5:      #c8e4f4;

    --gold:     #0369a1;
    --gold-dim: #075985;
    --gold-lg:  #0ea5e9;
    --gold-glow:rgba(3,105,161,.12);

    --accent:   #0369a1;
    --accent2:  #0891b2;

    --warn:     #d97706;
    --danger:   #dc2626;
    --info:     #4f46e5;

    --text:     #0c1a28;
    --text2:    #2a5070;
    --muted:    #6090b0;

    --border:   #c8dce8;
    --border2:  #b0ccdc;

    --shadow:   0 8px 48px rgba(0,0,0,.08);
    --shadow-sm:0 2px 12px rgba(0,0,0,.05);

    --bg-glow1: rgba(3,105,161,.06);
    --bg-glow2: rgba(8,145,178,.04);

    --banner-overlay: rgba(255,255,255,.65);
    --text-outline: none;
}

/* ─── Base ────────────────────────────────────────────────── */
html { font-size: 15px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    background: var(--bg);
    background-image:
        radial-gradient(ellipse at 50% 0%, var(--bg-glow1) 0%, transparent 45%);
    color: var(--text);
    font-family: var(--font);
    font-weight: var(--body-weight);
    font-size: 14px;
    line-height: 1.65;
    min-height: 100vh;
    padding-bottom: var(--bottom-nav-h);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: .03em;
    font-feature-settings: 'liga' 1, 'kern' 1;
    text-rendering: optimizeLegibility;
    -webkit-text-stroke: 0;
}
h1, h2, h3, h4, h5, h6 { text-shadow: var(--text-outline); }
.card { text-shadow: var(--text-outline); }

/* Readability — apply the 4-way stroke ONLY where it matters: headings,
   prose paragraphs/strong/em, links, and list items inside cards. The
   previous rule plastered the stroke onto every <div>/<span>/<small>/
   <label>/<td>, which on mobile turned 10-11px utility text into a blurry
   smear. Form controls and buttons keep their own backgrounds — exempt. */
.card,
.card > p, .card > h1, .card > h2, .card > h3, .card > h4, .card > h5, .card > h6,
.card p, .card strong, .card em, .card b, .card i,
.card a, .card li,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
    text-shadow: var(--text-outline);
}
.card button, .card .btn,
.card input, .card select, .card textarea {
    text-shadow: none !important;
}
/* Mobile: stroke is too noisy at small sizes — disable on body text under
   600px and rely on theme contrast + drop-shadow on name styles instead. */
@media (max-width: 600px) {
    html { font-size: 16px; }
    body { font-size: 15px; line-height: 1.55; letter-spacing: .015em; }
    /* iOS zooms inputs whose font-size is <16px — pin to 16px on mobile. */
    input, select, textarea { font-size: 16px !important; }
    .card p, .card strong, .card em, .card b, .card i,
    .card a, .card li {
        text-shadow: none;
    }
    /* ── Mobile legibility floor ─────────────────────────────────────
       Dozens of small UI bits (badges, labels, button captions, role
       chips, leaderboard stats) sit at 9–11px in the desktop sheet.
       At phone DPI those collapse into illegible smudges, especially
       on AMOLED/OLED themes where --muted is a low-contrast violet.
       Floor everything that the desktop sheet shrinks below 12px back
       up to 12-13px on mobile, and lift muted text contrast. */
    .btn-sm, .badge, .pill, .chip,
    .bn-label, .du-role, .lb-stats, .lb-name,
    .nav-badge, .sidebar-box ul li a,
    .empty-state-body, .muted, small,
    figcaption, caption,
    [class*="-label"], [class*="-caption"],
    [class*="-meta"] {
        font-size: 12px !important;
        line-height: 1.45 !important;
        letter-spacing: .01em;
    }
    .btn-sm { min-height: 36px; padding: 8px 14px; }
    /* Lift muted text contrast on mobile — the desktop muted shade is
       tuned for 14"+ screens at arm's length, but phones held close
       expose it as low-contrast gray. Force at least 80% opacity of
       --text wherever --muted is used for sub-200px text. */
    .card .muted, .card small,
    .card [class*="-meta"], .card [class*="-caption"],
    .card figcaption {
        color: var(--text2, var(--text)) !important;
        opacity: .92;
    }
    /* Tap targets — nav links and inline actions sometimes ship at
       18-22px row heights, which fail iOS HIG and feel "broken". */
    .bottom-nav a, .drawer-nav a, .nav a, .pagination a {
        min-height: 40px;
    }
}
/* Animated/gradient username styles use background-clip:text which kills
   text-shadow. Wrap them with a filter drop-shadow so they stay legible. */
.card [class*="name-anim-"],
.card [class*="name-plain-"],
.card .username,
.card .legacy-name-overlay span {
    filter: drop-shadow(0 0 1px rgba(0,0,0,.9))
            drop-shadow(0 1px 2px rgba(0,0,0,.7));
}
[data-theme="light"] .card [class*="name-anim-"],
[data-theme="light"] .card [class*="name-plain-"],
[data-theme="light"] .card .username,
[data-theme="light"] .card .legacy-name-overlay span {
    filter: drop-shadow(0 0 1px rgba(255,255,255,.95))
            drop-shadow(0 1px 2px rgba(255,255,255,.8));
}

/* Text selection — a clearly visible highlight on ANY theme. Uses a fixed
   deep brand-violet with white text (≈9.7:1, well above WCAG AA) rather than
   the per-theme accent, so selected words stay readable even on bright-accent
   themes (neon-mint, matrix-acid, etc.) where white-on-accent would vanish. */
::selection      { background: #6d28d9; color: #fff; text-shadow: none; }
::-moz-selection { background: #6d28d9; color: #fff; text-shadow: none; }

/* Inline highlight (<mark>): a self-contained, readable chip on every
   theme — its own light background with near-black text, and the card
   text-outline stroke explicitly removed so highlighted words stay crisp
   instead of getting a muddy black halo. */
mark, .card mark {
    background: #ffe27a;
    color: #1a1206;
    text-shadow: none !important;
    padding: 0 .2em;
    border-radius: 2px;
}

/* Readability floor: small helper/muted text inside cards uses the
   mid-contrast token (--text2) instead of the dim --muted, so captions,
   labels and metadata stay legible on every theme at every screen size
   (the mobile sheet already did this — this extends it to desktop). */
.card .muted, .card small,
.card [class*="-meta"], .card [class*="-caption"], .card figcaption {
    color: var(--text2);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--heading-weight);
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga' 1, 'kern' 1;
    letter-spacing: .03em;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--gold-lg); text-decoration: none; }
img { max-width: 100%; display: block; }

/* ============================================================
   Reading plate — a subtle, theme-tuned panel that sits behind
   running text so copy stays crisp on EVERY theme, even over the
   background glows / busy surfaces. Block text gets a faint
   backing with NO added padding (so there is ZERO layout shift
   anywhere) plus a small radius. Both dark and light themes use a
   faint DARK tint: on dark themes it deepens behind light text; on
   the 7 light themes a tiny dark tint stays visible on white cards
   (a 50% white plate would vanish on #fff) while costing almost no
   contrast against the dark text. Controls, badges, nav, code,
   inputs and headings keep their own surfaces and are not targeted.
   Lists are limited to CLASSLESS prose lists (ul/ol:not([class]))
   so structural component lists (timelines, tag chips, nav-as-li)
   are never plated. Pure CSS — Tor / no-JS safe.
   The :root default is listed first so the equal-specificity
   light-theme list below overrides it for those themes only. */
:root { --read-plate: rgba(0,0,0,.15); }
[data-theme="light"],
[data-theme="toys-r-us"],
[data-theme="paper-cream"],
[data-theme="linen-sage"],
[data-theme="arctic-ice"],
[data-theme="canvas-rust"],
[data-theme="bone-china"] { --read-plate: rgba(0,0,0,.05); }

.card p, .card dd, .card dt, .card blockquote,
.card ul:not([class]) > li, .card ol:not([class]) > li,
.content-area > p {
    background: var(--read-plate);
    border-radius: 5px;
}
/* Empty spacer paragraphs shouldn't render a stray bar. */
.card p:empty { background: none; }

/* ─── Announcement bar ───────────────────────────────────── */
.announcement-bar {
    background: rgba(155,109,255,.04);
    border-bottom: 1px solid rgba(155,109,255,.1);
    color: var(--gold);
    text-align: center;
    padding: 9px 20px;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .15em;
    text-transform: uppercase;
}

/* ─── Top navigation ──────────────────────────────────────── */
/* Topnav scaled to match the welcome banner / .main-wrap (max-width 1120px
   + 14px horizontal padding). Keeps the bar visually aligned with the page
   content on every device — on mobile the max-width is naturally a no-op
   so the bar fills the viewport, and on desktop it sits as a centered
   island that lines up edge-for-edge with the welcome card below it. */
.topnav {
    position: sticky;
    top: 0;
    z-index: 200;
    height: var(--nav-h);
    background: var(--bg2);
    border-bottom: 1px solid rgba(155,109,255,.06);
    box-shadow: 0 1px 0 rgba(0,0,0,.4);
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 12px;
    max-width: 1148px;     /* 1120 (main-wrap) + 14*2 (padding) */
    margin: 0 auto;
    box-sizing: border-box;
}

.topnav-brand a {
    font-size: 11px;
    font-weight: 400;
    color: var(--gold);
    letter-spacing: .35em;
    text-transform: uppercase;
    text-decoration: none;
}

.topnav-spacer { flex: 1; }

.topnav-links {
    display: none;
    gap: 2px;
    align-items: center;
}
.topnav-links a {
    color: var(--text2);
    padding: 7px 12px;
    border-radius: 0;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .2s;
    white-space: nowrap;
}
.topnav-links a:hover  { color: var(--gold); background: transparent; }
.topnav-links a.active { color: var(--gold); }
.topnav-links a.admin-link { color: var(--warn); }

.topnav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.topnav-balance {
    background: transparent;
    border: 1px solid rgba(155,109,255,.18);
    color: var(--gold);
    font-weight: 400;
    font-size: 11px;
    font-family: var(--mono);
    padding: 5px 16px;
    border-radius: 0;
    white-space: nowrap;
    letter-spacing: .06em;
}

.bal-menu-wrap { position: relative; display: inline-block; }
.bal-menu-overlay { display:none; position:fixed; inset:0; z-index:998; }
.bal-menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg3);
    border: 1px solid var(--border);
    min-width: 150px;
    z-index: 999;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.bal-menu-item {
    display: block;
    padding: 10px 16px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s;
    white-space: nowrap;
}
.bal-menu-item:hover { background: var(--bg4); }
.bal-menu-cb:checked ~ .bal-menu-overlay { display:block; }
.bal-menu-cb:checked ~ .bal-menu-dropdown { display:block; }

.icon-btn {
    position: relative;
    width: 36px; height: 36px;
    border-radius: 0;
    background: transparent;
    border: 1px solid var(--border2);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    color: var(--text2);
    transition: border-color .2s, color .2s;
}
.icon-btn:hover {
    background: transparent;
    border-color: rgba(155,109,255,.3);
    color: var(--gold);
}

.icon-btn .notif {
    position: absolute;
    top: 1px; right: 1px;
    width: 14px; height: 14px;
    background: var(--danger);
    color: #fff;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bg2);
}

/* ─── Hamburger ───────────────────────────────────────────── */
.hamburger {
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid var(--border2);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 5px;
    cursor: pointer;
    transition: border-color .15s;
}
.hamburger:hover { border-color: var(--gold); }
.hamburger span {
    display: block;
    width: 17px; height: 1.5px;
    background: var(--text2);
    border-radius: 2px;
    transition: background .15s;
}
.hamburger:hover span { background: var(--gold); }

/* ─── CSS-only drawer toggle ──────────────────────────────── */
.menu-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
    pointer-events: none;
}

/* ─── Drawer overlay ──────────────────────────────────────── */
.drawer-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.88);
    z-index: 300;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}
.menu-toggle-input:checked ~ .drawer-overlay { display: block; }
.menu-toggle-input:checked ~ .drawer { transform: translateX(0); }
.drawer.open { transform: translateX(0); }
.drawer-overlay.open { display: block; }

/* ─── Drawer ──────────────────────────────────────────────── */
.drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 272px;
    background: var(--bg2);
    border-right: 1px solid var(--border);
    box-shadow: 4px 0 40px rgba(0,0,0,.6), 1px 0 0 rgba(232,184,75,.08);
    z-index: 400;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.drawer-header {
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.drawer-header .brand {
    font-size: 14px;
    font-weight: 800;
    color: var(--gold);
    letter-spacing: .1em;
    text-transform: uppercase;
    text-shadow: 0 0 16px rgba(232,184,75,.4);
}
.drawer-close {
    width: 30px; height: 30px;
    background: var(--bg3);
    border: 1px solid var(--border2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--muted);
    font-size: 14px;
    transition: color .15s, border-color .15s;
}
.drawer-close:hover { color: var(--text); border-color: var(--text2); }

.drawer-user {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(232,184,75,.06), transparent);
    display: flex;
    align-items: center;
    gap: 12px;
}
.drawer-user .du-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--bg4);
    border: 2px solid rgba(232,184,75,.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    overflow: hidden;
}
.drawer-user .du-avatar img { width: 42px; height: 42px; object-fit: cover; border-radius: 50%; }
.drawer-user .du-name    { font-weight: 700; font-size: 14px; color: var(--text); }
.drawer-user .du-balance { color: var(--gold); font-size: 12px; font-weight: 700; font-family: var(--mono); margin-top: 1px; }
.drawer-user .du-role    { color: var(--muted); font-size: 11px; margin-top: 2px; }

.drawer-nav { flex: 1; padding: 6px 0; }
/* Per-section colour coding. Each .drawer-group sets its own --section colour
   from a THEME variable (never a hardcoded hex), so the drawer recolours with
   every theme while each section stays visually distinct. The default below is
   a graceful fallback for any section without a colour modifier. */
.drawer-group { --section: var(--accent); }
.drawer-group--nav     { --section: var(--accent); }
.drawer-group--account { --section: var(--accent2); }
.drawer-group--seller  { --section: var(--gold); }
.drawer-group--sell    { --section: var(--success, var(--accent2)); }
.drawer-group--admin   { --section: var(--warn); }
.drawer-group--support { --section: var(--info); }
.drawer-group--profile { --section: var(--text2); }
.drawer-nav-section {
    padding: 14px 16px 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--section, var(--muted));
    font-weight: 800;
}
.drawer-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: var(--section, var(--text2));
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
    border-left: 2px solid transparent;
}
/* Hover/active deepen the same section colour with a faint tint so the colour
   stays readable on every theme without color-mix(). */
.drawer-nav a:hover {
    background: var(--bg3);
    color: var(--section, var(--text));
    border-left-color: var(--section, transparent);
}
.drawer-nav a.active {
    color: var(--section, var(--gold));
    border-left-color: var(--section, var(--gold));
    background: var(--bg3);
    font-weight: 700;
}
.drawer-nav a .nav-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.drawer-nav a .nav-badge {
    margin-left: auto;
    background: var(--danger);
    color: #fff;
    border-radius: 99px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 700;
}
.drawer-nav a.nav-danger { color: var(--danger); }
.drawer-nav a.nav-warn   { color: var(--warn); }

.drawer-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
}

/* ─── Bottom nav ──────────────────────────────────────────── */
.bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--bottom-nav-h);
    background: var(--bg2);
    border-top: 1px solid var(--border);
    box-shadow: 0 -1px 0 rgba(232,184,75,.07);
    display: flex;
    z-index: 200;
}
.bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--muted);
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    transition: color .15s;
    position: relative;
}
.bottom-nav a.active { color: var(--gold); }
.bottom-nav a:hover  { color: var(--text2); }
.bottom-nav a .bn-icon { font-size: 19px; line-height: 1; }
.bottom-nav a .bn-notif {
    position: absolute;
    top: 6px;
    right: calc(50% - 18px);
    width: 16px; height: 16px;
    background: var(--danger);
    color: #fff;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bg2);
}

/* ─── Page layout ─────────────────────────────────────────── */
.main-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 18px 14px 20px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.sidebar {
    width: 210px;
    flex-shrink: 0;
    display: none;
}
.content-area { flex: 1; min-width: 0; }

/* ─── Sidebar ─────────────────────────────────────────────── */
.sidebar-box {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 14px;
}
.sidebar-box h3 {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--gold);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.sidebar-box ul { list-style: none; }
.sidebar-box ul li { padding: 5px 0; border-bottom: 1px solid var(--border); }
.sidebar-box ul li:last-child { border-bottom: none; }
.sidebar-box ul li a { color: var(--text2); font-size: 13px; transition: color .15s; }
.sidebar-box ul li a:hover { color: var(--gold); }
.rank { color: var(--muted); font-size: 11px; margin-right: 4px; }
.seller-badge { color: var(--gold); }

.leaderboard { display:flex; flex-direction:column; gap:4px; }
.lb-row {
    display:flex; align-items:center; gap:8px; padding:8px 10px;
    border-radius:8px; text-decoration:none; color:var(--text);
    transition: background .15s, transform .1s;
    border:1px solid transparent;
}
.lb-row:hover { background:var(--bg3); transform:translateX(2px); }
.lb-top { background:rgba(212,175,55,.04); border:1px solid rgba(212,175,55,.12); }
.lb-top:hover { background:rgba(212,175,55,.1); }
.lb-rank { font-size:16px; min-width:26px; text-align:center; flex-shrink:0; }
.lb-info { flex:1; min-width:0; overflow:hidden; }
.lb-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-stats { display:flex; gap:8px; font-size:11px; color:var(--muted); margin-top:2px; flex-wrap:wrap; }
.lb-stats span { white-space:nowrap; }
.balance-box .balance { font-size: 22px; font-weight: 800; color: var(--accent2); font-family: var(--mono); }

/* ─── Cards ───────────────────────────────────────────────── */
.card {
    background: var(--bg2);
    border: var(--card-bw) solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 18px;
    position: relative;
    overflow: visible;
    min-width: 0;
}
.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(155,109,255,.12), transparent);
    overflow: hidden;
}
.card h2 {
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--gold);
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

/* ─── Flash messages ──────────────────────────────────────── */
.flash {
    padding: 13px 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
}

/* ─── Forms ───────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-group label {
    display: block;
    margin-bottom: 7px;
    color: var(--text2);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.form-group input[type=text],
.form-group input[type=password],
.form-group input[type=email],
.form-group input[type=number],
.form-group select,
.form-group textarea {
    width: 100%;
    background: var(--bg3);
    border: 1px solid var(--border2);
    color: var(--text);
    padding: 11px 14px;
    border-radius: var(--input-radius);
    font-size: 14px;
    font-family: var(--font);
    transition: border-color .2s, box-shadow .2s;
    appearance: none;
    -webkit-appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(232,184,75,.15);
}
.form-group select option { background: var(--bg3); color: var(--text); }
.form-group textarea { min-height: 100px; resize: vertical; line-height: 1.6; }

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 24px;
    border-radius: var(--btn-radius);
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    font-family: var(--font);
    letter-spacing: var(--btn-letter, .12em);
    text-transform: var(--btn-transform, uppercase);
    transition: all .25s;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    min-height: 42px;
}
.btn:hover { filter: none; text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[disabled] {
    opacity: .3;
    cursor: not-allowed;
    filter: none;
    transform: none;
}

.btn-primary {
    background: var(--gold);
    color: #050402;
    border-color: transparent;
    box-shadow: none;
    font-weight: 600;
}
.btn-primary:hover {
    background: var(--gold-lg);
    box-shadow: 0 2px 20px rgba(155,109,255,.25);
}
.btn-success {
    background: var(--accent2);
    color: #040d06;
    border-color: transparent;
    box-shadow: none;
    font-weight: 600;
}
.btn-danger  { background: transparent; color: var(--danger); border-color: var(--danger); box-shadow: none; }
.btn-warn    { background: transparent; color: var(--warn);   border-color: var(--warn);   box-shadow: none; }
.btn-ghost {
    background: transparent;
    color: var(--text2);
    border-color: var(--border2);
}
.btn-ghost:hover { background: transparent; border-color: rgba(155,109,255,.25); color: var(--gold); }

.btn-sm  { padding: 7px 14px; font-size: 9px; min-height: 32px; letter-spacing: .1em; }
.btn-lg  { padding: 15px 36px; font-size: 11px; }
.btn-block { display: flex; width: 100%; }

/* ─── Tables ──────────────────────────────────────────────── */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 500px;
}
.data-table th {
    background: var(--bg3);
    color: var(--gold);
    text-align: left;
    padding: 10px 14px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
/* Key/value tables (config/status pages): 2 columns, no header row */
table.kv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.kv-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.kv-table tr:last-child td { border-bottom: none; }
.kv-table td:first-child {
    color: var(--muted);
    white-space: nowrap;
    width: 180px;
}
.data-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(232,184,75,.04); }

/* ─── Status badges ───────────────────────────────────────── */
.badge {
    background: var(--danger);
    color: #fff;
    border-radius: 99px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 700;
}
.status-badge {
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    display: inline-block;
}
.status-pending   { background: rgba(240,160,48,.14);  color: var(--warn); }
.status-finalized { background: rgba(34,212,120,.12);  color: var(--accent2); }
.status-dispute   { background: rgba(232,68,68,.12);   color: var(--danger); }
.status-open      { background: rgba(232,184,75,.14);  color: var(--gold); }
.status-closed    { background: rgba(100,80,48,.2);    color: var(--muted); }
.status-refunded  { background: rgba(240,160,48,.14);  color: var(--warn); }

/* ─── Role badge ──────────────────────────────────────────── */
.role-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(232,184,75,.12);
    border: 1px solid rgba(232,184,75,.25);
    color: var(--gold);
}
.role-badge-admin {
    background: linear-gradient(135deg, rgba(220,38,38,.18), rgba(251,191,36,.15));
    border: 1px solid rgba(220,38,38,.5);
    color: var(--role-admin, #ef4444);
    text-shadow: none;
}
.role-badge-support {
    background: rgba(108,143,255,.14);
    border: 1px solid rgba(108,143,255,.45);
    color: var(--role-support, #6c8fff);
    text-shadow: none;
}
.role-badge-seller {
    background: rgba(251,191,36,.12);
    border: 1px solid rgba(251,191,36,.45);
    color: var(--role-seller, #fbbf24);
    text-shadow: none;
}
.role-badge-buyer {
    background: rgba(56,189,248,.10);
    border: 1px solid rgba(56,189,248,.35);
    color: var(--role-buyer, #38bdf8);
    text-shadow: none;
}
.role-badge-admin {
    animation: admin-badge-glow 2s ease-in-out infinite;
}
@keyframes admin-badge-glow {
    0%, 100% { box-shadow: 0 0 4px rgba(220,38,38,.2); }
    50%      { box-shadow: 0 0 10px rgba(220,38,38,.4), 0 0 20px rgba(220,38,38,.15); }
}

/* ─── Seller tier badges ──────────────────────────────────── */
.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 9px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
}
.tier-platinum { background: rgba(220,230,245,.12); color: #d0e0f8; border: 1px solid rgba(200,220,245,.25); }
.tier-gold     { background: rgba(232,184,75,.14);  color: var(--gold); border: 1px solid rgba(232,184,75,.3); }
.tier-silver   { background: rgba(160,175,195,.12); color: #b0c0d8; border: 1px solid rgba(160,175,195,.25); }
.tier-bronze   { background: rgba(200,130,70,.12);  color: #d08040; border: 1px solid rgba(200,130,70,.25); }

/* ─── Product grid ────────────────────────────────────────── */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.product-grid.list-view {
    grid-template-columns: 1fr;
    gap: 8px;
}
.product-grid.list-view .product-card {
    flex-direction: row;
    align-items: stretch;
    min-height: 100px;
}
.product-grid.list-view .product-card img,
.product-grid.list-view .product-card .no-img {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    height: 110px;
    aspect-ratio: unset;
    object-fit: cover;
    font-size: 32px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    align-self: stretch;
}
.product-grid.list-view .product-card .pc-body {
    gap: 3px;
    padding: 10px 12px;
    justify-content: center;
}
.product-grid.list-view .product-card .pc-title {
    font-size: 14px;
    font-weight: 700;
    -webkit-line-clamp: 2;
    white-space: normal;
}
.product-grid.list-view .product-card .pc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    order: -1;
}
.product-grid.list-view .product-card .pc-seller {
    font-size: 12px;
}
.product-grid.list-view .product-card .pc-footer {
    margin-top: 6px;
    flex-wrap: wrap;
    gap: 6px;
}

.product-card {
    position: relative;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
    transition: border-color .3s;
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    border-color: rgba(155,109,255,.25);
}
.product-card.featured { border-color: rgba(155,109,255,.2); }

.product-card .featured-tag {
    position: absolute; top: 0; left: 0; right: 0;
    background: var(--gold);
    color: #050402;
    padding: 3px 10px;
    border-radius: 0;
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    z-index: 3;
    text-align: center;
}

.product-card .pc-banner {
    height: 8px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.banner-pick {
    padding: 8px;
    border: 2px solid var(--border);
    border-radius: 8px;
    transition: border-color .2s, box-shadow .2s;
}
label:has(.banner-radio:checked) .banner-pick {
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(212,175,55,.25);
}
.product-card.pc-has-banner {
    position: relative;
}
.product-card.pc-has-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, transparent 30%, var(--bg) 100%);
    opacity: .35;
    pointer-events: none;
    z-index: 0;
}
.product-card.pc-has-banner .pc-body {
    position: relative;
    z-index: 1;
    background: var(--bg2);
    background: var(--banner-overlay);
    border-radius: 0 0 10px 10px;
    padding: 10px;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.product-card.pc-has-banner img,
.product-card.pc-has-banner .no-img {
    position: relative;
    z-index: 1;
}
.card.pd-has-banner {
    position: relative;
}
.card.pd-has-banner > *:not(.legacy-name-overlay) {
    position: relative;
    z-index: 2;
}
.card.pd-has-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bg2);
    background: var(--banner-overlay);
    border-radius: inherit;
    z-index: 0;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.card.pd-has-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;
    background: linear-gradient(135deg, var(--bg) 0%, transparent 60%);
    opacity: .35;
    pointer-events: none;
}
/* Bright cosmetic backgrounds (Forest Mist, Royal Gold, Arctic Aurora,
   Lavender Dream, Diamond Refraction, etc.) can make a single soft
   text-shadow disappear into the gradient. Use a 4-direction 1px BLACK
   stroke + a soft blurred shadow underneath so every glyph stays
   readable regardless of how light or saturated the pixels behind it
   are. !important locks in the contrast even when a theme overrides
   --text-outline (light themes flip it to white). Paired with the
   inline `color:#fff !important` set in profile.php's banner paint
   block so EVERY descendant (username, role/tier badges, tagline,
   stat labels, join date, online indicator, muted text) inherits a
   high-contrast white-on-stroked-black look on any background. */
.card.pd-has-banner,
.card.pd-has-banner * {
    text-shadow:
        -1px -1px 0 rgba(0,0,0,.9),
         1px -1px 0 rgba(0,0,0,.9),
        -1px  1px 0 rgba(0,0,0,.9),
         1px  1px 0 rgba(0,0,0,.9),
         0 2px 6px rgba(0,0,0,.7) !important;
}
/* Buttons / form controls inside the banner: drop the stroke (button
   labels already have their own bg) but keep them readable via a soft
   inner shadow + their own background fill. Without this exemption,
   the universal stroke above turned every "Send Message"/"Follow"
   button label into a noisy outline. */
.card.pd-has-banner button,
.card.pd-has-banner .btn,
.card.pd-has-banner input,
.card.pd-has-banner select,
.card.pd-has-banner textarea {
    text-shadow: 0 1px 2px rgba(0,0,0,.4) !important;
}
.card.pd-has-banner .role-badge,
.card.pd-has-banner .tier-badge {
    text-shadow: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.card.pd-has-banner .profile-info .username {
    text-shadow:
        -1px -1px 0 rgba(0,0,0,.95),
         1px -1px 0 rgba(0,0,0,.95),
        -1px  1px 0 rgba(0,0,0,.95),
         1px  1px 0 rgba(0,0,0,.95),
         0 0 18px rgba(0,0,0,.6) !important;
}

details.card-collapse { border: 1px solid var(--border); border-radius: var(--radius, 10px); background: var(--bg2); }
details.card-collapse summary {
    cursor: pointer;
    padding: 14px 18px;
    font-weight: 700;
    font-size: 15px;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    color: var(--text);
}
details.card-collapse summary::-webkit-details-marker { display: none; }
details.card-collapse summary::after {
    content: '▸';
    margin-left: auto;
    font-size: 13px;
    color: var(--muted);
    transition: transform .15s ease;
}
details.card-collapse[open] summary::after { transform: rotate(90deg); }
details.card-collapse .card-collapse-body { padding: 0 18px 18px; }
details.review-collapse summary { list-style: none; }
details.review-collapse summary::-webkit-details-marker { display: none; }
details.review-collapse summary:hover { background: var(--bg3); border-radius: var(--radius); }
details.review-collapse .review-toggle-icon { transition: transform .15s ease; display: inline-block; }
details.review-collapse[open] .review-toggle-icon { transform: rotate(90deg); }
details.review-collapse[open] .review-preview-text { display: none; }

.legacy-name-card > *:not(.legacy-name-overlay) {
    position: relative;
    z-index: 1;
}
.legacy-name-overlay {
    position: absolute;
    top: -100%;
    left: -100%;
    right: -100%;
    bottom: -100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    transform: rotate(-30deg);
}
.legacy-name-overlay-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 2px 12px;
    padding: 0;
}
.legacy-name-overlay span {
    display: inline-block;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(251, 191, 36, .09);
    text-shadow: 0 0 4px rgba(251, 191, 36, .02);
    user-select: none;
    line-height: 1.6;
}
.card.pd-has-banner .legacy-name-overlay span {
    color: rgba(251, 191, 36, .14);
    text-shadow: 0 0 10px rgba(251, 191, 36, .06);
}

@keyframes banner-shift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@keyframes banner-pulse-glow {
    0%, 100% { box-shadow: 0 0 8px var(--banner-glow, rgba(255,255,255,.1)); }
    50%      { box-shadow: 0 0 22px var(--banner-glow, rgba(255,255,255,.3)); }
}
@keyframes banner-hue-rotate {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}
@keyframes banner-flicker {
    0%, 100% { opacity: 1; }
    92%      { opacity: 1; }
    93%      { opacity: .7; }
    94%      { opacity: 1; }
    96%      { opacity: .8; }
    97%      { opacity: 1; }
}
@keyframes banner-scan {
    0%   { background-position: 0% 0%; }
    100% { background-position: 0% 100%; }
}
@keyframes banner-breathe {
    0%, 100% { border-color: var(--banner-color1, rgba(255,255,255,.15)); }
    50%      { border-color: var(--banner-color2, rgba(255,255,255,.4)); }
}

.banner-anim-shift { background-size: 200% 200%; animation: banner-shift 6s ease infinite; }
.banner-anim-pulse { animation: banner-pulse-glow 3s ease-in-out infinite; }
.banner-anim-hue   { animation: banner-hue-rotate 12s linear infinite; }
.banner-anim-flicker { animation: banner-flicker 4s steps(1) infinite; }
.banner-anim-scan  { background-size: 100% 400%; animation: banner-scan 8s linear infinite; }
.banner-anim-breathe { animation: banner-breathe 4s ease-in-out infinite; }
.banner-anim-shift.banner-anim-pulse {
    background-size: 200% 200%;
    animation: banner-shift 6s ease infinite, banner-pulse-glow 3s ease-in-out infinite;
}
.banner-anim-shift.banner-anim-breathe {
    background-size: 200% 200%;
    animation: banner-shift 6s ease infinite, banner-breathe 4s ease-in-out infinite;
}
.banner-anim-shift.banner-anim-flicker {
    background-size: 200% 200%;
    animation: banner-shift 6s ease infinite, banner-flicker 4s steps(1) infinite;
}
.banner-anim-hue.banner-anim-pulse {
    animation: banner-hue-rotate 12s linear infinite, banner-pulse-glow 3s ease-in-out infinite;
}

@keyframes pbg-shimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes pbg-pulse {
    0%, 100% { opacity: .92; }
    50%      { opacity: 1; }
}
@keyframes pbg-glow {
    0%, 100% { box-shadow: inset 0 0 30px rgba(255,255,255,.03); }
    50%      { box-shadow: inset 0 0 60px rgba(255,255,255,.08); }
}
@keyframes pbg-drift {
    0%   { background-position: 0% 0%; }
    25%  { background-position: 50% 100%; }
    50%  { background-position: 100% 50%; }
    75%  { background-position: 50% 0%; }
    100% { background-position: 0% 0%; }
}
@keyframes pbg-aurora {
    0%   { background-position: 0% 50%; filter: brightness(1); }
    33%  { background-position: 50% 0%; filter: brightness(1.08); }
    66%  { background-position: 100% 50%; filter: brightness(.95); }
    100% { background-position: 0% 50%; filter: brightness(1); }
}
@keyframes pbg-flare {
    0%, 100% { filter: brightness(1) saturate(1); }
    50%      { filter: brightness(1.15) saturate(1.3); }
}
@keyframes pbg-warp {
    0%   { background-size: 200% 200%; background-position: 0% 0%; }
    25%  { background-size: 250% 250%; background-position: 100% 0%; }
    50%  { background-size: 200% 200%; background-position: 100% 100%; }
    75%  { background-size: 250% 250%; background-position: 0% 100%; }
    100% { background-size: 200% 200%; background-position: 0% 0%; }
}
@keyframes pbg-ember {
    0%, 100% { box-shadow: inset 0 -20px 40px rgba(255,80,0,.05), inset 0 0 0 transparent; }
    50%      { box-shadow: inset 0 -20px 40px rgba(255,80,0,.12), inset 0 20px 40px rgba(255,120,0,.04); }
}
@keyframes pbg-wave {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
@keyframes pbg-hue-cycle {
    0%   { filter: hue-rotate(0deg) brightness(1); }
    50%  { filter: hue-rotate(30deg) brightness(1.05); }
    100% { filter: hue-rotate(0deg) brightness(1); }
}
@keyframes pbg-lightning {
    0%, 100% { opacity: 1; filter: brightness(1); }
    48%      { opacity: 1; filter: brightness(1); }
    49%      { opacity: .85; filter: brightness(1.4); }
    51%      { opacity: 1; filter: brightness(1); }
    72%      { opacity: 1; filter: brightness(1); }
    73%      { opacity: .9; filter: brightness(1.2); }
    74%      { opacity: 1; filter: brightness(1); }
}

.pbg-shimmer   { background-size: 300% 300%; animation: pbg-shimmer 8s ease infinite; }
.pbg-pulse     { animation: pbg-pulse 4s ease-in-out infinite; }
.pbg-glow      { animation: pbg-glow 5s ease-in-out infinite; }
.pbg-drift     { background-size: 200% 200%; animation: pbg-drift 12s ease infinite; }
.pbg-aurora    { background-size: 300% 300%; animation: pbg-aurora 10s ease infinite; }
.pbg-flare     { animation: pbg-flare 6s ease-in-out infinite; }
.pbg-warp      { animation: pbg-warp 15s ease infinite; }
.pbg-ember     { animation: pbg-ember 3s ease-in-out infinite; }
.pbg-wave      { background-size: 200% 100%; animation: pbg-wave 6s linear infinite; }
.pbg-hue       { animation: pbg-hue-cycle 10s ease infinite; }
.pbg-lightning { animation: pbg-lightning 8s ease infinite; }
.pbg-shimmer.pbg-pulse { background-size: 300% 300%; animation: pbg-shimmer 8s ease infinite, pbg-pulse 4s ease-in-out infinite; }
.pbg-shimmer.pbg-glow  { background-size: 300% 300%; animation: pbg-shimmer 8s ease infinite, pbg-glow 5s ease-in-out infinite; }
.pbg-drift.pbg-flare   { background-size: 200% 200%; animation: pbg-drift 12s ease infinite, pbg-flare 6s ease-in-out infinite; }
.pbg-drift.pbg-glow    { background-size: 200% 200%; animation: pbg-drift 12s ease infinite, pbg-glow 5s ease-in-out infinite; }
.pbg-aurora.pbg-glow   { background-size: 300% 300%; animation: pbg-aurora 10s ease infinite, pbg-glow 5s ease-in-out infinite; }
.pbg-warp.pbg-pulse    { animation: pbg-warp 15s ease infinite, pbg-pulse 4s ease-in-out infinite; }
.pbg-warp.pbg-glow     { animation: pbg-warp 15s ease infinite, pbg-glow 5s ease-in-out infinite; }
.pbg-wave.pbg-flare    { background-size: 200% 100%; animation: pbg-wave 6s linear infinite, pbg-flare 6s ease-in-out infinite; }
.pbg-hue.pbg-pulse     { animation: pbg-hue-cycle 10s ease infinite, pbg-pulse 4s ease-in-out infinite; }
.pbg-hue.pbg-glow      { animation: pbg-hue-cycle 10s ease infinite, pbg-glow 5s ease-in-out infinite; }
.pbg-ember.pbg-glow    { animation: pbg-ember 3s ease-in-out infinite, pbg-glow 5s ease-in-out infinite; }
.pbg-ember.pbg-pulse   { animation: pbg-ember 3s ease-in-out infinite, pbg-pulse 4s ease-in-out infinite; }
.pbg-lightning.pbg-glow { animation: pbg-lightning 8s ease infinite, pbg-glow 5s ease-in-out infinite; }
.pbg-lightning.pbg-pulse { animation: pbg-lightning 8s ease infinite, pbg-pulse 4s ease-in-out infinite; }
.pbg-wave.pbg-glow     { background-size: 200% 100%; animation: pbg-wave 6s linear infinite, pbg-glow 5s ease-in-out infinite; }
.pbg-wave.pbg-pulse    { background-size: 200% 100%; animation: pbg-wave 6s linear infinite, pbg-pulse 4s ease-in-out infinite; }
.pbg-aurora.pbg-flare  { background-size: 300% 300%; animation: pbg-aurora 10s ease infinite, pbg-flare 6s ease-in-out infinite; }
.pbg-shimmer.pbg-flare { background-size: 300% 300%; animation: pbg-shimmer 8s ease infinite, pbg-flare 6s ease-in-out infinite; }
.pbg-warp.pbg-flare    { animation: pbg-warp 15s ease infinite, pbg-flare 6s ease-in-out infinite; }
.pbg-hue.pbg-flare     { animation: pbg-hue-cycle 10s ease infinite, pbg-flare 6s ease-in-out infinite; }
.pbg-hue.pbg-shimmer   { background-size: 300% 300%; animation: pbg-hue-cycle 10s ease infinite, pbg-shimmer 8s ease infinite; }

@keyframes lbg-plasma {
    0%   { background-position: 0% 50%; filter: brightness(1) contrast(1); }
    25%  { background-position: 50% 0%; filter: brightness(1.1) contrast(1.05); }
    50%  { background-position: 100% 50%; filter: brightness(1) contrast(1.1); }
    75%  { background-position: 50% 100%; filter: brightness(1.05) contrast(1); }
    100% { background-position: 0% 50%; filter: brightness(1) contrast(1); }
}
@keyframes lbg-wormhole {
    0%   { background-size: 200% 200%; background-position: 0% 0%; filter: hue-rotate(0deg); }
    33%  { background-size: 300% 300%; background-position: 100% 100%; filter: hue-rotate(20deg); }
    66%  { background-size: 200% 200%; background-position: 50% 0%; filter: hue-rotate(-10deg); }
    100% { background-size: 200% 200%; background-position: 0% 0%; filter: hue-rotate(0deg); }
}
@keyframes lbg-matrix {
    0%   { background-position: 0% 0%; }
    100% { background-position: 0% 300%; }
}
@keyframes lbg-fire {
    0%, 100% { filter: brightness(1) saturate(1.1); box-shadow: 0 0 15px rgba(255,80,0,.15); }
    50%      { filter: brightness(1.15) saturate(1.4); box-shadow: 0 0 25px rgba(255,120,0,.25); }
}
@keyframes lbg-prismatic {
    0%   { filter: hue-rotate(0deg) brightness(1); }
    25%  { filter: hue-rotate(90deg) brightness(1.05); }
    50%  { filter: hue-rotate(180deg) brightness(1); }
    75%  { filter: hue-rotate(270deg) brightness(1.05); }
    100% { filter: hue-rotate(360deg) brightness(1); }
}
@keyframes lbg-glitch {
    0%, 100% { transform: none; filter: none; }
    20%      { transform: skewX(-2deg); filter: hue-rotate(90deg); }
    21%      { transform: none; filter: none; }
    44%      { transform: skewX(1deg) translateX(-1px); filter: saturate(2); }
    45%      { transform: none; filter: none; }
    70%      { transform: skewX(-1deg); filter: brightness(1.3); }
    71%      { transform: none; filter: none; }
}
@keyframes lbg-neon-flicker {
    0%, 100% { box-shadow: 0 0 8px var(--banner-glow, rgba(0,255,255,.2)), inset 0 0 20px rgba(0,255,255,.03); }
    10%      { box-shadow: 0 0 20px var(--banner-glow, rgba(0,255,255,.5)), inset 0 0 30px rgba(0,255,255,.08); }
    12%      { box-shadow: 0 0 5px var(--banner-glow, rgba(0,255,255,.1)), inset 0 0 10px rgba(0,255,255,.02); }
    50%      { box-shadow: 0 0 25px var(--banner-glow, rgba(0,255,255,.4)), inset 0 0 40px rgba(0,255,255,.06); }
    52%      { box-shadow: 0 0 8px var(--banner-glow, rgba(0,255,255,.15)), inset 0 0 15px rgba(0,255,255,.03); }
}
@keyframes lbg-hologram {
    0%   { background-position: 0% 50%; filter: brightness(1) contrast(1) hue-rotate(0deg); }
    33%  { background-position: 100% 0%; filter: brightness(1.1) contrast(1.05) hue-rotate(15deg); }
    66%  { background-position: 50% 100%; filter: brightness(.95) contrast(1.1) hue-rotate(-10deg); }
    100% { background-position: 0% 50%; filter: brightness(1) contrast(1) hue-rotate(0deg); }
}

.lbg-plasma    { background-size: 400% 400%; animation: lbg-plasma 8s ease infinite; }
.lbg-wormhole  { animation: lbg-wormhole 12s ease infinite; }
.lbg-matrix    { background-size: 100% 600%; animation: lbg-matrix 4s linear infinite; }
.lbg-fire      { animation: lbg-fire 3s ease-in-out infinite; }
.lbg-prismatic { animation: lbg-prismatic 8s linear infinite; }
.lbg-glitch    { animation: lbg-glitch 6s ease infinite; }
.lbg-neon      { animation: lbg-neon-flicker 5s ease infinite; }
.lbg-hologram  { background-size: 300% 300%; animation: lbg-hologram 10s ease infinite; }
.lbg-plasma.lbg-fire      { background-size: 400% 400%; animation: lbg-plasma 8s ease infinite, lbg-fire 3s ease-in-out infinite; }
.lbg-wormhole.lbg-prismatic { animation: lbg-wormhole 12s ease infinite, lbg-prismatic 8s linear infinite; }
.lbg-hologram.lbg-glitch  { background-size: 300% 300%; animation: lbg-hologram 10s ease infinite, lbg-glitch 6s ease infinite; }
.lbg-matrix.lbg-neon      { background-size: 100% 600%; animation: lbg-matrix 4s linear infinite, lbg-neon-flicker 5s ease infinite; }

.product-card img {
    width: 100%; aspect-ratio: 4/3; object-fit: cover;
    background: var(--bg3);
}
.product-card .no-img {
    width: 100%; aspect-ratio: 4/3;
    background: var(--bg3);
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 40px;
}

.product-card .pc-body { padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.product-card .pc-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}
.product-card .pc-title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: var(--radius);
}
.product-card .pc-footer,
.product-card .pc-footer .btn,
.product-card .pc-footer form,
.product-card .pc-footer button,
.product-card .pc-seller a {
    position: relative;
    z-index: 1;
}
.product-card .pc-seller {
    color: var(--muted);
    font-size: 11px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    line-height: 1.6;
    padding: 4px 0 2px;
}
.product-card .pc-seller-name a {
    font-weight: 600;
    color: var(--text2);
}
.product-card .pc-seller-badges {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
}
.product-card .pc-seller-pgp {
    font-size: 11px;
    text-decoration: none;
    opacity: .8;
}
.product-card .pc-seller-pgp:hover { opacity: 1; }
.product-card .pc-price  {
    color: var(--gold);
    font-weight: 400;
    font-size: 15px;
    font-family: var(--mono);
    margin-top: auto;
    padding-top: 6px;
    letter-spacing: .02em;
}
.product-card .pc-type   { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.product-card .pc-btn    { width: 100%; text-align: center; font-size: 12px; padding: 8px; min-height: 36px; }

/* ── Product card rating ── */
.pc-rating { font-size: 12px; color: var(--text2); display: flex; gap: 4px; align-items: center; }

/* ── Product card meta tags ── */
.pc-tag {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 99px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--bg4);
    color: var(--muted);
    border: 1px solid var(--border2);
}
.pc-tag-featured { background: rgba(232,184,75,.14); color: var(--gold); border-color: rgba(232,184,75,.25); }

/* ─── Vendor banner (product detail page) ─────────────────── */
.vendor-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 4px);
}
.vendor-banner-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg4);
    border: 2px solid var(--border2);
    font-size: 22px;
    text-decoration: none;
}
.vendor-banner-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vendor-banner-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vendor-banner-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}
.vendor-banner-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    letter-spacing: .02em;
}
.vendor-banner-name:hover { color: var(--accent); }
.vendor-banner-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 9px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
}
.vbt-verified {
    background: rgba(74,222,128,.1);
    border: 1px solid rgba(74,222,128,.3);
    color: #22c55e;
}
.vbt-badge {
    background: rgba(251,191,36,.1);
    border: 1px solid rgba(251,191,36,.3);
    color: var(--warn);
}
.vendor-banner-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}
.vendor-banner-stat {
    font-size: 12px;
    color: var(--text2);
    white-space: nowrap;
}
.vendor-banner-stat .muted {
    color: var(--muted);
}
@media (max-width: 480px) {
    .vendor-banner { gap: 10px; padding: 12px; }
    .vendor-banner-avatar { width: 40px; height: 40px; font-size: 18px; }
    .vendor-banner-name { font-size: 14px; }
    .vendor-banner-meta { gap: 4px 10px; }
    .vendor-banner-stat { font-size: 11px; }
}

/* ─── Category pills ──────────────────────────────────────── */
.category-pills {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 16px;
}
.category-pills::-webkit-scrollbar { display: none; }
.category-pill {
    flex-shrink: 0;
    padding: 6px 16px;
    border-radius: 99px;
    background: var(--bg3);
    border: 1px solid var(--border2);
    color: var(--text2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
    transition: all .15s;
    white-space: nowrap;
}
.category-pill:hover { border-color: var(--gold); color: var(--gold); }
.category-pill.active {
    background: linear-gradient(135deg, #c09030, #e8b848);
    border-color: transparent;
    color: #080705;
}

/* ─── Search bar ──────────────────────────────────────────── */
.search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    align-items: center;
}
.search-bar input {
    flex: 1;
    background: var(--bg3);
    border: 1px solid var(--border2);
    color: var(--text);
    padding: 11px 18px;
    border-radius: 99px;
    font-size: 14px;
    font-family: var(--font);
    transition: border-color .2s, box-shadow .2s;
}
.search-bar input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(232,184,75,.14);
}
.search-bar input::placeholder { color: var(--muted); }
.search-bar button {
    padding: 11px 20px;
    border-radius: 99px;
    background: linear-gradient(135deg, #c09030, #e8b848);
    color: #080705;
    border: none;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    min-height: 44px;
    transition: filter .15s;
    font-family: var(--font);
    letter-spacing: .02em;
}
.search-bar button:hover { filter: brightness(1.1); }

/* ─── Marketplace hero ────────────────────────────────────── */
.mp-hero {
    background: linear-gradient(135deg, var(--bg2), var(--bg3));
    border: 1px solid rgba(232,184,75,.15);
    border-radius: var(--radius);
    padding: 28px 20px 22px;
    margin-bottom: 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.mp-hero::before {
    content: '';
    position: absolute;
    top: -60px; left: 50%;
    transform: translateX(-50%);
    width: 300px; height: 120px;
    background: radial-gradient(ellipse, rgba(232,184,75,.1) 0%, transparent 70%);
    pointer-events: none;
}
.mp-hero-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; }

/* ─── Category icon grid ──────────────────────────────────── */
.mp-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
}
.mp-cat {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 99px;
    text-decoration: none;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    transition: all .15s;
    white-space: nowrap;
}
.mp-cat:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-glow); }
.mp-cat.active { background: var(--gold-glow); border-color: rgba(232,184,75,.4); color: var(--gold); font-weight: 700; }
.mp-cat-icon { font-size: 14px; line-height: 1; }
.mp-cat-label { font-size: 12px; }

/* ─── Stats row ───────────────────────────────────────────── */
.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.stat-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,184,75,.3), transparent);
}
.stat-card .sv {
    font-size: 22px;
    font-weight: 800;
    color: var(--gold);
    font-family: var(--mono);
    text-shadow: 0 0 14px rgba(232,184,75,.4);
}
.stat-card .sl {
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 4px;
}

/* ─── Admin stat grid ─────────────────────────────────────── */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.admin-stat {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.admin-stat::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,184,75,.25), transparent);
}
.admin-stat .stat-val {
    font-size: 22px;
    font-weight: 800;
    font-family: var(--mono);
    color: var(--gold);
}
.admin-stat .stat-label {
    font-size: 10px;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 4px;
}

/* ─── Dashboard welcome ───────────────────────────────────── */
.welcome-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 30px 26px;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
}
.welcome-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(155,109,255,.3), transparent);
}
.welcome-card::after {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 200px; height: 200px;
    background: radial-gradient(ellipse, rgba(155,109,255,.03) 0%, transparent 70%);
    pointer-events: none;
}
.welcome-card .wc-label {
    color: var(--muted);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.welcome-card .wc-name  {
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 16px;
    color: var(--text);
    letter-spacing: .04em;
}
.welcome-card .wc-balance-label {
    color: var(--muted);
    font-size: 9px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .18em;
}
.welcome-card .wc-balance {
    font-size: 28px;
    font-weight: 300;
    color: var(--gold);
    font-family: var(--mono);
    letter-spacing: .04em;
}

/* ─── Chat / Messages ─────────────────────────────────────── */
.chat-wrap { display: flex; gap: 12px; }
.chat-threads {
    width: 100%;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.chat-thread-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: background .15s;
}
.chat-thread-item:hover { background: var(--bg3); }
.chat-thread-item.unread { background: var(--gold-glow); }
.chat-thread-item .ct-name { font-weight: 600; font-size: 14px; }
.chat-thread-item .ct-preview { color: var(--muted); font-size: 12px; margin-top: 2px; }
.chat-thread-item .ct-time { color: var(--muted); font-size: 11px; margin-left: auto; white-space: nowrap; }

/* ─── Ultra-Luxury Splash Screen ─────────────────────────── */
.splash-body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.splash-scene {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #06040c;
    position: relative;
    overflow: hidden;
}
.splash-scene::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(155,109,255,.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(155,109,255,.03) 0%, transparent 40%);
    pointer-events: none;
}
.splash-mono-bg {
    position: absolute;
    inset: 0;
    opacity: .025;
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            transparent 18px,
            rgba(155,109,255,.5) 18px,
            rgba(155,109,255,.5) 19px,
            transparent 19px,
            transparent 36px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent 0px,
            transparent 18px,
            rgba(155,109,255,.5) 18px,
            rgba(155,109,255,.5) 19px,
            transparent 19px,
            transparent 36px
        );
    pointer-events: none;
}
/* ─── Splash / auth gate — couture edition ─────────────── */
/* Self-hosted (same-origin, no external calls) couture typefaces.
   Playfair Display = high-contrast Didone for the wordmark;
   Jost = geometric grotesque for labels/buttons. font-display:swap +
   serif/sans fallbacks keep TOR "safest" (fonts disabled) graceful. */
@font-face {
    font-family: "LX Playfair";
    font-style: normal; font-weight: 400; font-display: swap;
    src: url("/assets/fonts/playfair-400.woff2") format("woff2");
}
@font-face {
    font-family: "LX Playfair";
    font-style: normal; font-weight: 600; font-display: swap;
    src: url("/assets/fonts/playfair-600.woff2") format("woff2");
}
@font-face {
    font-family: "LX Jost";
    font-style: normal; font-weight: 400; font-display: swap;
    src: url("/assets/fonts/jost-400.woff2") format("woff2");
}
@font-face {
    font-family: "LX Jost";
    font-style: normal; font-weight: 500; font-display: swap;
    src: url("/assets/fonts/jost-500.woff2") format("woff2");
}
.gate-body {
    margin: 0; padding: 0;
    overflow-x: hidden;
    background: #0b0a08;
    --lx-bg: #0b0a08;
    --lx-ink: #f1e9d8;
    --lx-ink-soft: rgba(241,233,216,.70);
    --lx-gold: #c6a86b;
    --lx-gold-lt: #e6cf99;
    --lx-line: rgba(198,168,107,.30);
    --lx-serif: "LX Playfair","Didot","Bodoni MT","Hoefler Text",Garamond,Georgia,"Times New Roman",serif;
    --lx-sans: "LX Jost","Futura","Century Gothic","Gill Sans","Helvetica Neue",Arial,sans-serif;
}
.gate-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 22px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(125% 80% at 50% -8%, rgba(198,168,107,.10), transparent 55%),
        radial-gradient(90% 60% at 50% 112%, rgba(198,168,107,.05), transparent 60%),
        #0b0a08;
}
/* faint vignette to frame the composition */
.gate-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(70% 55% at 50% 40%, transparent 58%, rgba(0,0,0,.55) 100%);
}
.gate-term {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 430px;
    text-align: center;
    background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0) 42%);
    border: 1px solid var(--lx-line);
    animation: gateRise .9s cubic-bezier(.2,.7,.2,1) both;
}
/* inset hairline frame — luxury invitation motif */
.gate-term::before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(198,168,107,.16);
    pointer-events: none;
}
@keyframes gateRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.gate-pad { padding: 46px 40px 34px; }

/* monogram emblem */
.gate-monogram {
    width: 66px; height: 66px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--lx-gold);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(198,168,107,.07), inset 0 0 0 1px rgba(198,168,107,.18);
    font-family: var(--lx-serif);
    font-weight: 600;
    font-size: 25px;
    letter-spacing: .06em;
    color: var(--lx-gold-lt);
    padding-left: .06em;
}

/* Uploaded site logo on the splash (replaces the text monogram). */
.gate-logo-img {
    display: block;
    margin: 0 auto 22px;
    max-width: 78%;
    max-height: 100px;
    object-fit: contain;
}

/* wordmark */
.gate-brand-name {
    display: block;
    margin: 0;
    font-family: var(--lx-serif);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.18;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--lx-ink);
    word-break: break-word;
    padding-left: .26em;
}

/* divider: fading gold lines around a small diamond */
.gate-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 20px 0 15px;
}
.gate-rule::before, .gate-rule::after { content: ""; height: 1px; width: 54px; }
.gate-rule::before { background: linear-gradient(90deg, transparent, var(--lx-gold)); }
.gate-rule::after  { background: linear-gradient(90deg, var(--lx-gold), transparent); }
.gate-rule i { width: 5px; height: 5px; background: var(--lx-gold); transform: rotate(45deg); flex: none; }

.gate-tagline {
    display: block;
    font-family: var(--lx-sans);
    font-size: 11px;
    letter-spacing: .30em;
    text-transform: uppercase;
    color: var(--lx-ink-soft);
    text-decoration: none;
    padding-left: .34em;
}
.gate-tagline:hover { color: var(--lx-gold-lt); }

.gate-block { margin-top: 26px; }
.gate-label {
    font-family: var(--lx-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .26em;
    color: var(--lx-gold);
    margin-bottom: 10px;
    text-align: center;
    padding-left: .26em;
}
.gate-onion {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--lx-ink-soft);
    word-break: break-all;
    line-height: 1.7;
    background: rgba(0,0,0,.30);
    border: 1px solid var(--lx-line);
    padding: 12px 14px;
    text-align: center;
}
.gate-note {
    margin-top: 22px;
    background: rgba(255,255,255,.02);
    border: 1px solid var(--lx-line);
    padding: 14px 16px;
    font-family: var(--lx-sans);
    font-size: 12px;
    color: rgba(241,233,216,.78);
    line-height: 1.7;
    text-align: left;
}
.gate-note-tag {
    display: block;
    font-size: 10px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--lx-gold);
    margin-bottom: 7px;
}
.gate-note-body { word-break: break-word; overflow-wrap: break-word; }
.gate-note-body a { color: var(--lx-gold-lt); text-decoration: underline; }

.gate-error {
    margin-top: 22px;
    font-family: var(--lx-sans);
    font-size: 12px;
    letter-spacing: .04em;
    color: #e7b4a6;
    background: rgba(150,60,45,.12);
    border: 1px solid rgba(180,90,70,.40);
    padding: 12px 14px;
    text-align: left;
}

.gate-form { margin-top: 26px; }
.gate-challenge { border: 1px solid var(--lx-line); padding: 20px; }
.gate-captcha-img {
    background: #0c0b09;
    border: 1px solid var(--lx-line);
    padding: 10px;
    text-align: center;
}
.gate-captcha-img img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.gate-input-row {
    display: block;
    margin-top: 18px;
    border-bottom: 1px solid rgba(198,168,107,.35);
    transition: border-color .2s;
}
.gate-input-row:focus-within { border-bottom-color: var(--lx-gold-lt); }
.gate-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--lx-ink);
    font-family: var(--lx-sans);
    font-size: 15px;
    letter-spacing: .14em;
    text-align: center;
    padding: 8px 0;
}
.gate-input::placeholder { color: rgba(241,233,216,.42); letter-spacing: .06em; text-transform: none; }

.gate-enter {
    width: 100%;
    margin-top: 26px;
    padding: 15px;
    padding-left: calc(15px + .34em);
    background: var(--lx-gold);
    color: #1a1510;
    border: 1px solid var(--lx-gold);
    font-family: var(--lx-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .34em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .25s, color .25s, border-color .25s;
}
.gate-enter:hover { background: transparent; color: var(--lx-gold-lt); border-color: var(--lx-gold-lt); }
.gate-enter:active { transform: translateY(1px); }

.gate-foot {
    margin-top: 24px;
    font-family: var(--lx-sans);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: rgba(241,233,216,.55);
    padding-left: .22em;
}

/* ============================================================
   Toys-R-Us themed splash — scoped to the gate (index.php only)
   Bright, playful, fully no-JS / Tor-safe (no external assets)
   ============================================================ */
.gate-toys.gate-body {
    --lx-ink: #15347a;
    --lx-ink-soft: #3a5aa8;
    --lx-gold: #1f6fe0;
    --lx-gold-lt: #0a4fc0;
    --lx-line: rgba(31,111,224,.30);
    --tru-red: #e8362d;
    --tru-orange: #d35f00;
    --tru-green: #138a36;
    --tru-blue: #0089cf;
    --tru-purple: #8e44ad;
    --tru-yellow: #ffd200;
    --lx-serif: "Baloo 2","Comic Sans MS","Chalkboard SE","Trebuchet MS","Segoe UI",system-ui,sans-serif;
    --lx-sans:  "Baloo 2","Comic Sans MS","Chalkboard SE","Trebuchet MS","Segoe UI",system-ui,sans-serif;
    background: #1f6fe0;
}
.gate-toys .gate-screen {
    background:
        radial-gradient(circle at 16% 20%, rgba(255,255,255,.20) 0 13px, transparent 14px),
        radial-gradient(circle at 80% 14%, rgba(255,255,255,.16) 0 9px,  transparent 10px),
        radial-gradient(circle at 88% 70%, rgba(255,255,255,.18) 0 15px, transparent 16px),
        radial-gradient(circle at 10% 82%, rgba(255,255,255,.14) 0 11px, transparent 12px),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.07) 0 6px,  transparent 7px),
        radial-gradient(140% 100% at 50% -12%, #59a2ff, transparent 60%),
        linear-gradient(180deg, #2f7ff0 0%, #1356c8 100%);
}
.gate-toys .gate-grid { background: none; }
.gate-toys .gate-term {
    background: #ffffff;
    border: 3px solid var(--tru-yellow);
    border-radius: 28px;
    box-shadow: 0 16px 0 rgba(8,42,116,.22), 0 34px 70px rgba(0,0,0,.30);
}
.gate-toys .gate-term::before {
    inset: 11px;
    border: 2px dashed rgba(31,111,224,.32);
    border-radius: 19px;
}
.gate-toys .gate-monogram {
    position: relative;
    border: none;
    border-radius: 22px;
    background: linear-gradient(160deg, #3a8bff, #1356c8);
    box-shadow: 0 7px 0 #0a3d96, 0 0 0 4px var(--tru-yellow);
    color: #fff;
    font-weight: 800;
    font-size: 30px;
    padding-left: 0;
}
.gate-toys .gate-monogram::after {
    content: "";
    position: absolute;
    top: -10px; right: -10px;
    width: 28px; height: 28px;
    background: var(--tru-yellow);
    box-shadow: 0 2px 0 #d9a400;
    clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.gate-toys .gate-brand-name {
    font-weight: 800;
    font-size: 33px;
    letter-spacing: .015em;
    text-transform: uppercase;
    padding-left: 0;
}
.gate-toys .gate-letter { display: inline-block; }
.gate-toys .gate-letter:nth-child(5n+1) { color: var(--tru-red); }
.gate-toys .gate-letter:nth-child(5n+2) { color: var(--tru-orange); }
.gate-toys .gate-letter:nth-child(5n+3) { color: var(--tru-green); }
.gate-toys .gate-letter:nth-child(5n+4) { color: var(--tru-blue); }
.gate-toys .gate-letter:nth-child(5n+5) { color: var(--tru-purple); }
.gate-toys .gate-rule i { background: var(--tru-yellow); transform: rotate(45deg); }
.gate-toys .gate-rule::before { background: linear-gradient(90deg, transparent, var(--tru-yellow)); }
.gate-toys .gate-rule::after  { background: linear-gradient(90deg, var(--tru-yellow), transparent); }
.gate-toys .gate-tagline { color: #1f6fe0; font-weight: 700; }
.gate-toys .gate-tagline:hover { color: #0a4fc0; }
.gate-toys .gate-label { color: #1f6fe0; font-weight: 800; }
.gate-toys .gate-onion {
    background: #eef4ff;
    color: #1f3a78;
    border: 1px solid rgba(31,111,224,.25);
    border-radius: 12px;
}
.gate-toys .gate-note {
    background: #fff7da;
    border: 1px solid var(--tru-yellow);
    border-radius: 14px;
    color: #5a4a10;
}
.gate-toys .gate-note-tag { color: #d98a00; }
.gate-toys .gate-note-body a { color: #0a4fc0; }
.gate-toys .gate-error {
    color: #b3261e;
    background: #ffe3e0;
    border: 1px solid #f7b1ab;
    border-radius: 12px;
}
.gate-toys .gate-challenge {
    border: 2px solid rgba(31,111,224,.22);
    border-radius: 16px;
    background: #f7faff;
}
.gate-toys .gate-captcha-img {
    background: #fff;
    border: 1px solid rgba(31,111,224,.20);
    border-radius: 10px;
}
.gate-toys .gate-input-row { border-bottom: none; }
.gate-toys .gate-input { color: #ffffff; background: #15347a; border: 2px solid #1f6fe0; border-radius: 10px; padding: 10px 12px; }
.gate-toys .gate-input:focus { border-color: var(--tru-orange); }
.gate-toys .gate-input::placeholder { color: rgba(255,255,255,.6); }
.gate-toys .gate-enter {
    background: var(--tru-red);
    color: #fff;
    border: none;
    border-radius: 40px;
    box-shadow: 0 6px 0 #a8160f;
    font-weight: 800;
    letter-spacing: .14em;
    font-size: 14px;
}
.gate-toys .gate-enter:hover {
    background: #ff4a40;
    color: #fff;
    border: none;
    box-shadow: 0 6px 0 #a8160f;
}
.gate-toys .gate-enter:active { transform: translateY(3px); box-shadow: 0 3px 0 #a8160f; }
.gate-toys .gate-foot { color: #15347a; }
.gate-toys .gate-field label { color: #1f6fe0; font-weight: 800; }
.gate-toys .gate-field input { color: #ffffff; background: #15347a; border: 2px solid rgba(31,111,224,.6); border-radius: 10px; padding: 10px 12px; }
.gate-toys .gate-field input:focus { border-color: var(--tru-orange); }
.gate-toys .gate-field input::placeholder { color: rgba(255,255,255,.6); }
.gate-toys .gate-field textarea { color: #ffffff; background: #15347a; border: 2px solid rgba(31,111,224,.6); border-radius: 10px; padding: 10px 12px; }
.gate-toys .gate-field textarea:focus { border-color: var(--tru-orange); }
.gate-toys .gate-field textarea::placeholder { color: rgba(255,255,255,.6); }
.gate-toys .gate-flash-danger  { color: #b3261e; background: #ffe3e0; border: 1px solid #f7b1ab; border-radius: 12px; }
.gate-toys .gate-flash-warn    { color: #8a5a00; background: #fff3cf; border: 1px solid #f2cf63; border-radius: 12px; }
.gate-toys .gate-flash-success { color: #136b2e; background: #def5e3; border: 1px solid #9adcab; border-radius: 12px; }
.gate-toys .gate-links { border-top: 2px dashed rgba(31,111,224,.30); }
.gate-toys .gate-links p { color: #3a5aa8; }
.gate-toys .gate-links a { color: #0a4fc0; font-weight: 700; }
.gate-toys .gate-links a:hover { color: #15347a; }
@media (max-width: 520px) {
    .gate-toys .gate-brand-name { font-size: 27px; }
}

/* login-specific fields */
.gate-field { margin-top: 18px; text-align: left; }
.gate-field label {
    display: block;
    font-family: var(--lx-sans);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .24em;
    color: var(--lx-gold);
    margin-bottom: 8px;
}
.gate-field input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(198,168,107,.35);
    padding: 8px 0;
    color: var(--lx-ink);
    font-family: var(--lx-sans);
    font-size: 15px;
    letter-spacing: .04em;
    outline: none;
    transition: border-color .2s;
}
.gate-field input:focus { border-bottom-color: var(--lx-gold-lt); }
.gate-field textarea {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(198,168,107,.35);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--lx-ink);
    font-family: var(--lx-sans);
    font-size: 14px;
    letter-spacing: .04em;
    line-height: 1.5;
    outline: none;
    resize: vertical;
    transition: border-color .2s;
}
.gate-field textarea:focus { border-color: var(--lx-gold-lt); }
.gate-hint {
    margin-top: 5px;
    font-family: var(--lx-sans);
    font-size: 10px;
    letter-spacing: .03em;
    color: var(--lx-ink-soft);
    line-height: 1.5;
}
.gate-hint a { color: var(--lx-gold-lt); text-decoration: none; }
.gate-hint a:hover { text-decoration: underline; }
.gate-toys .gate-hint { color: rgba(31,111,224,.70); }
.gate-toys .gate-hint a { color: #0a4fc0; }

.gate-flash {
    margin-top: 18px;
    font-family: var(--lx-sans);
    font-size: 12px;
    line-height: 1.6;
    padding: 12px 14px;
    letter-spacing: .02em;
    text-align: left;
}
.gate-flash a { text-decoration: underline; color: inherit; }
.gate-flash-danger  { color: #e7b4a6; background: rgba(150,60,45,.12); border: 1px solid rgba(180,90,70,.40); }
.gate-flash-warn    { color: #e6cf99; background: rgba(150,120,45,.12); border: 1px solid rgba(180,150,70,.40); }
.gate-flash-success { color: #bfe6c2; background: rgba(60,130,80,.12); border: 1px solid rgba(90,170,110,.40); }

.gate-links {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--lx-line);
    text-align: center;
}
.gate-links p { margin: 0 0 8px; font-family: var(--lx-sans); font-size: 11px; letter-spacing: .04em; color: var(--lx-ink-soft); }
.gate-links p:last-child { margin-bottom: 0; }
.gate-links a { color: var(--lx-gold-lt); text-decoration: none; }
.gate-links a:hover { color: var(--lx-ink); text-decoration: underline; }

@media (max-width: 480px) {
    .gate-pad { padding: 36px 24px 28px; }
    .gate-brand-name { font-size: 24px; letter-spacing: .20em; padding-left: .20em; }
    .gate-monogram { width: 58px; height: 58px; font-size: 23px; }
    .gate-logo-img { max-height: 78px; max-width: 82%; }
}
@media (prefers-reduced-motion: reduce) {
    .gate-term { animation: none; }
}

/* ─── Login / Register pages (reuse splash scene) ───────── */
.splash-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #06040c;
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(155,109,255,.05) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(155,109,255,.02) 0%, transparent 40%);
    position: relative;
}
.splash-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .02;
    background-image:
        repeating-linear-gradient(45deg, transparent 0px, transparent 18px, rgba(155,109,255,.5) 18px, rgba(155,109,255,.5) 19px, transparent 19px, transparent 36px),
        repeating-linear-gradient(-45deg, transparent 0px, transparent 18px, rgba(155,109,255,.5) 18px, rgba(155,109,255,.5) 19px, transparent 19px, transparent 36px);
    pointer-events: none;
}
.splash-card {
    background: rgba(14,11,24,.88);
    border: 1px solid rgba(155,109,255,.12);
    border-radius: 0;
    padding: 44px 36px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 40px 100px rgba(0,0,0,.8);
    position: relative;
    overflow: hidden;
}
.splash-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(155,109,255,.4), transparent);
}
.splash-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(155,109,255,.15), transparent);
}
.splash-card h1 {
    font-size: 12px;
    font-weight: 400;
    color: #9b6dff;
    text-align: center;
    letter-spacing: .4em;
    text-transform: uppercase;
    text-indent: .4em;
    margin-bottom: 4px;
}
.splash-card .sub {
    text-align: center;
    color: rgba(155,109,255,.35);
    font-size: 10px;
    letter-spacing: .08em;
    margin-bottom: 32px;
}
.splash-wrap, .splash-body, .splash-scene {
    --text:     rgba(232,226,242,.9);
    --text2:    rgba(232,226,242,.7);
    --muted:    rgba(155,109,255,.45);
    --gold:     #9b6dff;
    --gold-dim: #7c50d4;
    --accent:   #9b6dff;
    --accent2:  rgba(155,109,255,.7);
    --bg:       #06040c;
    --bg2:      rgba(14,11,24,.85);
    --bg3:      rgba(21,17,34,.8);
    --bg4:      rgba(37,32,58,.6);
    --border:   rgba(155,109,255,.15);
    --border2:  rgba(155,109,255,.2);
    --warn:     #f59e0b;
    --danger:   #ef4444;
    --info:     #3b82f6;
    --text-outline: none;
}
.splash-card, .splash-card * {
    color: rgba(232,226,242,.85);
}
.splash-card h1 { color: #9b6dff; }
.splash-card label { color: rgba(155,109,255,.6); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.splash-card input[type="text"],
.splash-card input[type="password"],
.splash-card input[type="number"],
.splash-card select,
.splash-card textarea {
    background: rgba(0,0,0,.3);
    border: 1px solid rgba(155,109,255,.15);
    color: rgba(232,226,242,.9);
    border-radius: 4px;
}
.splash-card input:focus,
.splash-card textarea:focus {
    border-color: rgba(155,109,255,.4);
    outline: none;
}
.splash-card a { color: #9b6dff; }
.splash-card a:hover { color: #b88aff; }
.splash-card .flash { color: #fff; }
.splash-card p { color: rgba(155,109,255,.45); }
.splash-card .muted { color: rgba(155,109,255,.4); }
.splash-card .btn-primary {
    background: rgba(155,109,255,.12);
    border: 1px solid rgba(155,109,255,.3);
    color: #9b6dff;
}
.splash-card .btn-primary:hover {
    background: rgba(155,109,255,.2);
    border-color: rgba(155,109,255,.5);
}
.splash-card pre {
    background: rgba(0,0,0,.4) !important;
    border-color: rgba(155,109,255,.15) !important;
    color: rgba(232,226,242,.85) !important;
}

/* CAPTCHA (used on login/register too) */
.captcha-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: rgba(155,109,255,.02);
    border: 1px solid rgba(155,109,255,.08);
    border-radius: 0;
    margin-bottom: 24px;
}
.captcha-chars {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    background: rgba(0,0,0,.3);
    border-radius: 0;
    letter-spacing: 6px;
    user-select: none;
    border: 1px solid rgba(155,109,255,.06);
}

/* ─── Profile page ────────────────────────────────────────── */
.profile-header {
    display: flex;
    /* Stack avatar above info and center both horizontally so the
       pic lines up with the (already centered) username + badges +
       tagline below it. Previously was flex-direction:row which
       parked the avatar on the left while the info sat
       text-align:center in the remaining space — making the centered
       text visually offset relative to the card. */
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 22px 20px;
    background: linear-gradient(135deg, #111008, var(--bg2));
    border: 1px solid rgba(232,184,75,.18);
    border-radius: var(--radius);
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}
.profile-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--gold-lg), transparent);
}
.profile-avatar {
    width: 68px; height: 68px;
    border-radius: 50%;
    background: var(--bg4);
    border: 2px solid rgba(232,184,75,.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 30px;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(232,184,75,.2);
}
.profile-avatar img { width: 68px; height: 68px; object-fit: cover; border-radius: 50%; }
.profile-info .username { font-size: 20px; font-weight: 800; color: var(--text); text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.profile-info .user-role {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--gold);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 4px;
}
.profile-info .join-date { color: var(--muted); font-size: 12px; margin-top: 4px; }

/* ─── muted helper ────────────────────────────────────────── */
.muted { color: var(--muted); }

/* ─── Site footer ─────────────────────────────────────────── */
.site-footer {
    text-align: center;
    padding: 20px;
    font-size: 12px;
    color: var(--muted);
    border-top: 1px solid var(--border);
    margin-top: 20px;
    letter-spacing: .04em;
}

/* ─── Hide elements only needed on large screens ─ */
.topnav-only-lg { display: none !important; }

/* ─── Responsive: show sidebar & desktop nav on wide screens ─ */
@media (min-width: 768px) {
    .sidebar { display: block; }
    .topnav-links {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .topnav-links::-webkit-scrollbar { display: none; }
    .topnav { flex-wrap: nowrap; }
    .hamburger { display: flex !important; }
    .bottom-nav { display: none; }
    body { padding-bottom: 0; }
    .topnav-only-lg { display: flex !important; }
}
@media (min-width: 768px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .product-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1400px) {
    .product-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ─── Order timeline ──────────────────────────────────────── */
.order-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin: 20px 0;
    overflow-x: auto;
}
.ot-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 64px;
}
.ot-circle,
.ot-dot {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bg3);
    border: 2px solid var(--border2);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    color: var(--muted);
    transition: all .25s;
    flex-shrink: 0;
}
.ot-step.done .ot-circle, .ot-step.done .ot-dot { background: rgba(232,184,75,.12); border-color: var(--gold); color: var(--gold); }
.ot-step.active .ot-circle, .ot-step.active .ot-dot {
    background: linear-gradient(135deg, #c09030, #e8b848);
    border-color: transparent;
    color: #080705;
    box-shadow: 0 0 16px rgba(232,184,75,.4);
}
.ot-label {
    font-size: 10px;
    color: var(--muted);
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.3;
}
.ot-step.done .ot-label  { color: var(--text2); }
.ot-step.active .ot-label { color: var(--gold); }
.ot-time { font-size: 10px; color: var(--muted); text-align: center; }
.ot-line {
    flex: 1;
    height: 2px;
    background: var(--border2);
    margin-bottom: 36px;
    min-width: 20px;
    transition: background .25s;
}
.ot-line.done { background: linear-gradient(90deg, #c09030, #e8b848); }

/* ─── CSS-only image gallery ──────────────────────────────── */
.img-gallery  { display: flex; flex-direction: column; position: relative; }
.gallery-radio { display: none; }
.gallery-main {
    position: relative;
    width: 100%;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg3);
    margin-bottom: 8px;
    border: 1px solid var(--border);
    aspect-ratio: 4/3;
}
.gallery-slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; transition: opacity .35s ease;
    pointer-events: none;
}
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-slide:first-of-type { opacity: 1; }
#gi0:checked ~ .gallery-main .gallery-slide { opacity: 0; }
#gi0:checked ~ .gallery-main .gallery-slide:nth-child(1) { opacity: 1; }
#gi1:checked ~ .gallery-main .gallery-slide { opacity: 0; }
#gi1:checked ~ .gallery-main .gallery-slide:nth-child(2) { opacity: 1; }
#gi2:checked ~ .gallery-main .gallery-slide { opacity: 0; }
#gi2:checked ~ .gallery-main .gallery-slide:nth-child(3) { opacity: 1; }
#gi3:checked ~ .gallery-main .gallery-slide { opacity: 0; }
#gi3:checked ~ .gallery-main .gallery-slide:nth-child(4) { opacity: 1; }
.gallery-thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.gallery-thumbs label img {
    border-radius: 6px;
    border: 2px solid var(--border2);
    transition: border-color .15s;
    cursor: pointer;
}
.gallery-thumbs label:hover img { border-color: var(--gold); }
#gi0:checked ~ .gallery-thumbs label:nth-child(1) img,
#gi1:checked ~ .gallery-thumbs label:nth-child(2) img,
#gi2:checked ~ .gallery-thumbs label:nth-child(3) img,
#gi3:checked ~ .gallery-thumbs label:nth-child(4) img { border-color: var(--gold); }

/* also style video thumbs */
.gallery-thumbs label > div {
    transition: border-color .15s;
    cursor: pointer;
}
.gallery-thumbs label:hover > div { border-color: var(--gold); }
#gi0:checked ~ .gallery-thumbs label:nth-child(1) > div,
#gi1:checked ~ .gallery-thumbs label:nth-child(2) > div,
#gi2:checked ~ .gallery-thumbs label:nth-child(3) > div,
#gi3:checked ~ .gallery-thumbs label:nth-child(4) > div { border-color: var(--gold); }

/* also handle video slides */
.gallery-slide video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }

/* ─── Lightbox (CSS-only, :target based) ─────────────────── */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
}
.lightbox:target {
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-backdrop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.92);
    padding: 20px;
}
.lightbox-backdrop img,
.lightbox-backdrop video {
    max-width: 95vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.lightbox-close {
    position: absolute;
    top: 16px;
    right: 24px;
    font-size: 36px;
    color: #fff;
    text-decoration: none;
    z-index: 100000;
    line-height: 1;
    opacity: .8;
    transition: opacity .15s;
}
.lightbox-close:hover { opacity: 1; color: #fff; }
/* main gallery photo is itself the expand affordance */
.gallery-slide-img { cursor: zoom-in; }
.gallery-zoom-badge {
    position: absolute; bottom: 8px; right: 8px;
    background: rgba(0,0,0,.6); color: #fff;
    padding: 3px 8px; border-radius: 4px; font-size: 11px;
    pointer-events: none;
}
/* only the currently-shown slide should receive clicks */
#gi0:checked ~ .gallery-main .gallery-slide:nth-child(1),
#gi1:checked ~ .gallery-main .gallery-slide:nth-child(2),
#gi2:checked ~ .gallery-main .gallery-slide:nth-child(3),
#gi3:checked ~ .gallery-main .gallery-slide:nth-child(4) { pointer-events: auto; }

/* ─── Dispute accordion ───────────────────────────────────── */
[id^="dispute-"] { display: none; }
[id^="dispute-"]:target { display: block; }

/* ─── QR code ─────────────────────────────────────────────── */
.qr-img {
    width: 180px; height: 180px;
    border-radius: var(--radius-sm);
    background: #fff;
    padding: 8px;
    border: 2px solid rgba(232,184,75,.25);
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

/* ─── PGP key block ───────────────────────────────────────── */
.pgp-key {
    font-family: var(--mono);
    font-size: 10px;
    background: var(--bg3);
    border: 1px solid var(--border2);
    border-radius: var(--radius-sm);
    padding: 12px;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-wrap: break-word;
    color: var(--text2);
    max-height: 300px;
    overflow-x: auto;
    overflow-y: auto;
    line-height: 1.45;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* ─── Staff page ──────────────────────────────────────────── */
.staff-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
}
.staff-card:last-child { border-bottom: none; }
.staff-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--bg4);
    border: 2px solid rgba(232,184,75,.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    overflow: hidden;
}
.staff-avatar img { width: 52px; height: 52px; object-fit: cover; }

/* ─── Seller's corner ─────────────────────────────────────── */
.sellers-grid {
    display: grid;
    gap: 12px;
}
@media (min-width: 640px) { .sellers-grid { grid-template-columns: 1fr 1fr; } }
.sellers-stat {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.sellers-stat::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,184,75,.3), transparent);
}
.sellers-stat .sv {
    font-size: 26px;
    font-weight: 800;
    color: var(--gold);
    font-family: var(--mono);
    text-shadow: 0 0 14px rgba(232,184,75,.4);
}
.sellers-stat .sl { font-size: 11px; color: var(--muted); margin-top: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }

/* ─── Admin analytics bar charts ─────────────────────────── */
.bar-chart { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: flex; align-items: center; gap: 12px; }
.bar-label { width: 100px; font-size: 12px; color: var(--text2); text-align: right; flex-shrink: 0; }
.bar-track { flex: 1; background: var(--bg3); border-radius: 4px; height: 8px; overflow: hidden; border: 1px solid var(--border); }
.bar-fill  { height: 100%; background: linear-gradient(90deg, #c09030, #e8b848); border-radius: 4px; min-width: 2px; }
.bar-value { font-size: 12px; color: var(--muted); font-family: var(--mono); width: 50px; }

/* ─── Misc helpers ────────────────────────────────────────── */
.text-gold    { color: var(--gold); }
.text-success { color: var(--accent2); }
.text-danger  { color: var(--danger); }
.text-muted   { color: var(--muted); }
.font-mono    { font-family: var(--mono); }
.text-sm      { font-size: 12px; }
.text-xs      { font-size: 11px; }
.fw-700       { font-weight: 700; }
.fw-800       { font-weight: 800; }

/* ─── Chat bubbles ────────────────────────────────────────── */
.chat-msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 84%;
}
.chat-msg.sent {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.chat-msg.recv {
    align-self: flex-start;
}
.cm-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--bg4);
    border: 1.5px solid var(--border2);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    overflow: hidden;
    color: var(--muted);
    font-weight: 700;
    letter-spacing: 0;
}
.cm-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cm-content { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sent .cm-content { align-items: flex-end; }
.recv .cm-content { align-items: flex-start; }
.cm-name {
    font-size: 11px;
    color: var(--text2);
    font-weight: 700;
    padding: 0 4px;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.cm-bubble {
    padding: 10px 15px;
    border-radius: 18px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: -.003em;
    overflow-wrap: break-word;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    max-width: 100%;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
.cm-bubble a { text-decoration: underline; text-underline-offset: 2px; }
.sent .cm-bubble {
    background: linear-gradient(135deg, #c09030 0%, #e8b848 60%, #d4a030 100%);
    color: #080705;
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 12px rgba(232,184,75,.35);
    font-weight: 500;
}
.recv .cm-bubble {
    background: var(--bg3);
    border: 1px solid var(--border2);
    color: var(--text);
    border-bottom-left-radius: 4px;
}
.cm-time {
    font-size: 11px;
    color: var(--muted);
    padding: 0 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}
/* Read receipts under your own sent messages: muted single-tick for "Sent",
   accent-tinted double-tick for "Read". Inline so it sits on the same line
   as the timestamp without breaking the existing flex layout. */
.cm-receipt        { font-size: 11px; }
.cm-receipt-sent   { color: var(--muted); }
.cm-receipt-read   { color: var(--accent, #6c8fff); font-weight: 600; }

/* ─── Role-coded conversation accents ─────────────────────────
   Sender name, avatar ring and a bubble edge accent all follow the
   per-theme --role-* tokens, on every conversation surface
   (direct/order messages, dispute threads, support tickets).
   Pure CSS — works with zero JavaScript. */
.chat-msg.role-admin   .cm-avatar { border-color: var(--role-admin); }
.chat-msg.role-support .cm-avatar { border-color: var(--role-support); }
.chat-msg.role-seller  .cm-avatar { border-color: var(--role-seller); }
.chat-msg.role-buyer   .cm-avatar { border-color: var(--role-buyer); }
.chat-msg.role-admin   .cm-name   { color: var(--role-admin); }
.chat-msg.role-support .cm-name   { color: var(--role-support); }
.chat-msg.role-seller  .cm-name   { color: var(--role-seller); }
.chat-msg.role-buyer   .cm-name   { color: var(--role-buyer); }
/* Received bubbles: role accent on the left edge */
.chat-msg.recv.role-admin   .cm-bubble { border-left: 3px solid var(--role-admin); }
.chat-msg.recv.role-support .cm-bubble { border-left: 3px solid var(--role-support); }
.chat-msg.recv.role-seller  .cm-bubble { border-left: 3px solid var(--role-seller); }
.chat-msg.recv.role-buyer   .cm-bubble { border-left: 3px solid var(--role-buyer); }
/* Sent bubbles sit on the right, so the accent flips to the right edge */
.chat-msg.sent.role-admin   .cm-bubble { border-right: 3px solid var(--role-admin); }
.chat-msg.sent.role-support .cm-bubble { border-right: 3px solid var(--role-support); }
.chat-msg.sent.role-seller  .cm-bubble { border-right: 3px solid var(--role-seller); }
.chat-msg.sent.role-buyer   .cm-bubble { border-right: 3px solid var(--role-buyer); }

/* Support-ticket replies (block layout, not chat bubbles) */
.ticket-reply {
    background: var(--bg3);
    border-radius: 8px;
    padding: 12px;
    border-left: 3px solid var(--border2);
}
.ticket-reply.mine { background: var(--gold-glow); }
.ticket-reply .tr-author { font-weight: 700; }
.ticket-reply.role-admin   { border-left-color: var(--role-admin); }
.ticket-reply.role-support { border-left-color: var(--role-support); }
.ticket-reply.role-seller  { border-left-color: var(--role-seller); }
.ticket-reply.role-buyer   { border-left-color: var(--role-buyer); }
.ticket-reply.role-admin   .tr-author { color: var(--role-admin); }
.ticket-reply.role-support .tr-author { color: var(--role-support); }
.ticket-reply.role-seller  .tr-author { color: var(--role-seller); }
.ticket-reply.role-buyer   .tr-author { color: var(--role-buyer); }

/* ─── Deposit confirmation progress ───────────────────────── */
.conf-bar-track {
    height: 6px;
    background: var(--bg4);
    border-radius: 99px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.conf-bar-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #c09030, #e8b848);
    transition: width .4s ease;
}

/* ═══════════════════════════════════════════════════════════
   25 BRAND-NEW THEMES (Apr 2026 release)
   Replaces the 30 originals; OLED Pack continues below unchanged.
   Each block overrides CSS custom properties; applied via
   data-theme="<key>" on <html>.
   ═══════════════════════════════════════════════════════════ */

/* 1 ── Midnight Velvet — deep plum-black with violet velvet & burnished gold */
[data-theme="midnight-velvet"] {
    --bg:       #0a0612; --bg2: #120a1e; --bg3: #1a0f2c; --bg4: #22143a; --bg5: #2c1a48;
    --gold:     #d4a84a; --gold-dim: #896d30; --gold-lg: #ffe263; --gold-glow: rgba(212,168,74,0.16);
    --accent:   #d4a84a; --accent2: #9b6dff;
    --warn:     #f0a030; --danger: #e84444; --info: #5898f0;
    --text:     #f0e8ff; --text2: #a090c8; --muted: #5a4878;
    --border:   #1a0f2c; --border2: #22143a;
    --shadow:   0 8px 56px rgba(0,0,0,0.78), 0 0 0 1px rgba(212,168,74,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.55);
    --bg-glow1: rgba(212,168,74,0.06); --bg-glow2: rgba(155,109,255,0.04);
}

/* 2 ── Crimson Noir — film-noir black with crimson & ivory */
[data-theme="crimson-noir"] {
    --bg:       #060000; --bg2: #120000; --bg3: #1c0608; --bg4: #260a10; --bg5: #320e16;
    --gold:     #c4082c; --gold-dim: #7f051c; --gold-lg: #ff0a3b; --gold-glow: rgba(196,8,44,0.16);
    --accent:   #c4082c; --accent2: #f0e6d2;
    --warn:     #f0a030; --danger: #e84444; --info: #5898f0;
    --text:     #f8eee0; --text2: #c08070; --muted: #6a3838;
    --border:   #1c0608; --border2: #260a10;
    --shadow:   0 8px 56px rgba(0,0,0,0.78), 0 0 0 1px rgba(196,8,44,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.55);
    --bg-glow1: rgba(196,8,44,0.06); --bg-glow2: rgba(240,230,210,0.04);
}

/* 3 ── Emerald Obsidian — polished black with jade & champagne */
[data-theme="emerald-obsidian"] {
    --bg:       #020806; --bg2: #06120c; --bg3: #0a1c14; --bg4: #102818; --bg5: #18341e;
    --gold:     #00d495; --gold-dim: #008960; --gold-lg: #00ffc9; --gold-glow: rgba(0,212,149,0.16);
    --accent:   #00d495; --accent2: #e8c870;
    --warn:     #f0a030; --danger: #e84444; --info: #5898f0;
    --text:     #e8f8ec; --text2: #80b894; --muted: #406050;
    --border:   #0a1c14; --border2: #102818;
    --shadow:   0 8px 56px rgba(0,0,0,0.78), 0 0 0 1px rgba(0,212,149,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.55);
    --bg-glow1: rgba(0,212,149,0.06); --bg-glow2: rgba(232,200,112,0.04);
}

/* 4 ── Cobalt Deep — black with electric cobalt & silver */
[data-theme="cobalt-deep"] {
    --bg:       #000610; --bg2: #040d20; --bg3: #081834; --bg4: #0c2248; --bg5: #102d5c;
    --gold:     #2a72ff; --gold-dim: #1b4aa5; --gold-lg: #3899ff; --gold-glow: rgba(42,114,255,0.16);
    --accent:   #2a72ff; --accent2: #c0d8f0;
    --warn:     #f0a030; --danger: #e84444; --info: #5898f0;
    --text:     #e0e8f8; --text2: #7090c0; --muted: #385878;
    --border:   #081834; --border2: #0c2248;
    --shadow:   0 8px 56px rgba(0,0,0,0.78), 0 0 0 1px rgba(42,114,255,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.55);
    --bg-glow1: rgba(42,114,255,0.06); --bg-glow2: rgba(192,216,240,0.04);
}

/* 5 ── Burgundy Chamber — wine & cream with antique brass */
[data-theme="burgundy-chamber"] {
    --bg:       #0c0408; --bg2: #18080c; --bg3: #240c12; --bg4: #301018; --bg5: #3c1820;
    --gold:     #b8843c; --gold-dim: #775527; --gold-lg: #f8b251; --gold-glow: rgba(184,132,60,0.16);
    --accent:   #b8843c; --accent2: #f0e0c0;
    --warn:     #f0a030; --danger: #e84444; --info: #5898f0;
    --text:     #f4e4d0; --text2: #c89878; --muted: #785840;
    --border:   #240c12; --border2: #301018;
    --shadow:   0 8px 56px rgba(0,0,0,0.78), 0 0 0 1px rgba(184,132,60,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.55);
    --bg-glow1: rgba(184,132,60,0.06); --bg-glow2: rgba(240,224,192,0.04);
}

/* 6 ── Forest Cathedral — deep forest with sage & warm amber */
[data-theme="forest-cathedral"] {
    --bg:       #020a04; --bg2: #061508; --bg3: #0c200e; --bg4: #122814; --bg5: #18341a;
    --gold:     #88aa70; --gold-dim: #586e48; --gold-lg: #b7e597; --gold-glow: rgba(136,170,112,0.16);
    --accent:   #88aa70; --accent2: #d4a040;
    --warn:     #f0a030; --danger: #e84444; --info: #5898f0;
    --text:     #e8f4d8; --text2: #88a878; --muted: #506848;
    --border:   #0c200e; --border2: #122814;
    --shadow:   0 8px 56px rgba(0,0,0,0.78), 0 0 0 1px rgba(136,170,112,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.55);
    --bg-glow1: rgba(136,170,112,0.06); --bg-glow2: rgba(212,160,64,0.04);
}

/* 7 ── Amber Hearth — warm dark with amber firelight & cream */
[data-theme="amber-hearth"] {
    --bg:       #100a04; --bg2: #1c130a; --bg3: #281c10; --bg4: #342416; --bg5: #402c1c;
    --gold:     #ffa040; --gold-dim: #a56829; --gold-lg: #ffd856; --gold-glow: rgba(255,160,64,0.16);
    --accent:   #ffa040; --accent2: #f4dcb0;
    --warn:     #f0a030; --danger: #e84444; --info: #5898f0;
    --text:     #fff0d8; --text2: #d8a878; --muted: #886040;
    --border:   #281c10; --border2: #342416;
    --shadow:   0 8px 56px rgba(0,0,0,0.78), 0 0 0 1px rgba(255,160,64,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.55);
    --bg-glow1: rgba(255,160,64,0.06); --bg-glow2: rgba(244,220,176,0.04);
}

/* 8 ── Plum Twilight — soft plum night with lavender & gold */
[data-theme="plum-twilight"] {
    --bg:       #0a0410; --bg2: #14081e; --bg3: #1e0e2c; --bg4: #28163c; --bg5: #32204a;
    --gold:     #c890e8; --gold-dim: #825d96; --gold-lg: #ffc2ff; --gold-glow: rgba(200,144,232,0.16);
    --accent:   #c890e8; --accent2: #e8c050;
    --warn:     #f0a030; --danger: #e84444; --info: #5898f0;
    --text:     #f4e8f8; --text2: #b098c8; --muted: #604878;
    --border:   #1e0e2c; --border2: #28163c;
    --shadow:   0 8px 56px rgba(0,0,0,0.78), 0 0 0 1px rgba(200,144,232,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.55);
    --bg-glow1: rgba(200,144,232,0.06); --bg-glow2: rgba(232,192,80,0.04);
}

/* 9 ── Tokyo Rain — rain-slicked navy with neon pink & ice cyan */
[data-theme="tokyo-rain"] {
    --bg:       #02060e; --bg2: #060c1c; --bg3: #0c142a; --bg4: #121c3c; --bg5: #18244e;
    --gold:     #ff2d8a; --gold-dim: #a51d59; --gold-lg: #ff3cba; --gold-glow: rgba(255,45,138,0.16);
    --accent:   #ff2d8a; --accent2: #00e0ff;
    --warn:     #f0a030; --danger: #e84444; --info: #5898f0;
    --text:     #e8f0ff; --text2: #6088b0; --muted: #304858;
    --border:   #0c142a; --border2: #121c3c;
    --shadow:   0 8px 56px rgba(0,0,0,0.78), 0 0 0 1px rgba(255,45,138,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.55);
    --bg-glow1: rgba(255,45,138,0.06); --bg-glow2: rgba(0,224,255,0.04);
}

/* 10 ── Matrix Acid — pure black with acid-green terminal glow */
[data-theme="matrix-acid"] {
    --bg:       #000400; --bg2: #020a01; --bg3: #041002; --bg4: #061804; --bg5: #0a2008;
    --gold:     #44ff00; --gold-dim: #2ca500; --gold-lg: #5bff00; --gold-glow: rgba(68,255,0,0.16);
    --accent:   #44ff00; --accent2: #00ff88;
    --warn:     #f0a030; --danger: #e84444; --info: #5898f0;
    --text:     #d8ffd0; --text2: #60a060; --muted: #305030;
    --border:   #041002; --border2: #061804;
    --shadow:   0 8px 56px rgba(0,0,0,0.78), 0 0 0 1px rgba(68,255,0,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.55);
    --bg-glow1: rgba(68,255,0,0.06); --bg-glow2: rgba(0,255,136,0.04);
}

/* 11 ── Synthwave Sunset — purple-blue with hot pink & neon orange */
[data-theme="synthwave-sunset"] {
    --bg:       #100620; --bg2: #1c0a32; --bg3: #281044; --bg4: #341858; --bg5: #40206c;
    --gold:     #ff508a; --gold-dim: #a53459; --gold-lg: #ff6cba; --gold-glow: rgba(255,80,138,0.16);
    --accent:   #ff508a; --accent2: #ffaa30;
    --warn:     #f0a030; --danger: #e84444; --info: #5898f0;
    --text:     #ffe8f0; --text2: #c898d8; --muted: #785880;
    --border:   #281044; --border2: #341858;
    --shadow:   0 8px 56px rgba(0,0,0,0.78), 0 0 0 1px rgba(255,80,138,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.55);
    --bg-glow1: rgba(255,80,138,0.06); --bg-glow2: rgba(255,170,48,0.04);
}

/* 12 ── Void Magenta — absolute void with magenta & violet pulse */
[data-theme="void-magenta"] {
    --bg:       #020004; --bg2: #08020c; --bg3: #100614; --bg4: #18081e; --bg5: #200a28;
    --gold:     #ff00b0; --gold-dim: #a50072; --gold-lg: #ff00ed; --gold-glow: rgba(255,0,176,0.16);
    --accent:   #ff00b0; --accent2: #a050ff;
    --warn:     #f0a030; --danger: #e84444; --info: #5898f0;
    --text:     #f8e8f8; --text2: #c068c0; --muted: #602060;
    --border:   #100614; --border2: #18081e;
    --shadow:   0 8px 56px rgba(0,0,0,0.78), 0 0 0 1px rgba(255,0,176,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.55);
    --bg-glow1: rgba(255,0,176,0.06); --bg-glow2: rgba(160,80,255,0.04);
}

/* 00 ── Toys R Us — bright sky-blue with primary-colour pops (default) */
[data-theme="toys-r-us"] {
    --bg:       #e8f3ff; --bg2: #ffffff; --bg3: #d7e8fb; --bg4: #bfdbf6; --bg5: #a4cbf1;
    --gold:     #1f6fe0; --gold-dim: #0a4fc0; --gold-lg: #3a8bff; --gold-glow: rgba(31,111,224,0.22);
    --accent:   #1f6fe0; --accent2: #e8362d;
    --warn:     #d35f00; --danger: #e8362d; --info: #0089cf;
    --text:     #15347a; --text2: #3a5aa8; --muted: #7088b8;
    --border:   #cfe0f7; --border2: #b6d5f4;
    --shadow:   0 8px 56px rgba(8,42,116,0.16), 0 0 0 1px rgba(31,111,224,0.07);
    --shadow-sm:0 2px 14px rgba(8,42,116,0.10);
    --bg-glow1: rgba(31,111,224,0.09); --bg-glow2: rgba(255,210,0,0.10);
    /* Toys R Us brand palette — matches the splash/login gate */
    --tru-red:#e8362d; --tru-orange:#d35f00; --tru-green:#138a36;
    --tru-blue:#0089cf; --tru-purple:#8e44ad; --tru-yellow:#ffd200;
    /* Surface tokens so the dark variant shares every shape, only colours change */
    --tru-panel:#ffffff; --tru-field:#f7faff;
    --tru-dash:rgba(31,111,224,.30); --tru-shadow-rgb:8,42,116;
    --tru-nav:#1f3a78; --tru-brand:#1f6fe0;
    --tru-row-hover:rgba(31,111,224,.07);
    --tru-sec-text:#1153c0; --tru-sec-hover-bg:#fff7da; --tru-sec-hover-text:#0a3d96;
}

/* ── Toys R Us (Dark) — same playful brand on a deep-navy night ── */
[data-theme="toys-r-us-dark"] {
    --bg:       #060c1c; --bg2: #0c1530; --bg3: #132044; --bg4: #1c2c58; --bg5: #26386c;
    --gold:     #3a8bff; --gold-dim: #1f6fe0; --gold-lg: #5ba3ff; --gold-glow: rgba(58,139,255,0.22);
    --accent:   #3a8bff; --accent2: #ff4a40;
    --warn:     #f0a030; --danger: #ff4a40; --info: #38b6ff;
    --text:     #e6f0ff; --text2: #9bb6e8; --muted: #5e78a8;
    --border:   #16264c; --border2: #20335f;
    --shadow:   0 8px 56px rgba(0,0,0,0.78), 0 0 0 1px rgba(58,139,255,0.07);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.55);
    --bg-glow1: rgba(58,139,255,0.09); --bg-glow2: rgba(255,210,0,0.10);
    /* Toys R Us brand palette — brightened for dark surfaces */
    --tru-red:#ff4a40; --tru-orange:#ff8a3c; --tru-green:#28b85a;
    --tru-blue:#38b6ff; --tru-purple:#b06be0; --tru-yellow:#ffd200;
    /* Surface tokens — identical shapes to the light theme, dark colours */
    --tru-panel:#0c1530; --tru-field:#0a1326;
    --tru-dash:rgba(58,139,255,.32); --tru-shadow-rgb:0,0,0;
    --tru-nav:#cfe0ff; --tru-brand:#5ba3ff;
    --tru-row-hover:rgba(58,139,255,.12);
    --tru-sec-text:#8fc2ff; --tru-sec-hover-bg:#1c2c58; --tru-sec-hover-text:#dcebff;
}

[data-theme="paper-cream"] {
    --bg:       #faf6ec; --bg2: #f4eedc; --bg3: #ede4c8; --bg4: #e4d6b0; --bg5: #d8c498;
    --gold:     #2a1808; --gold-dim: #1b0f05; --gold-lg: #38200a; --gold-glow: rgba(42,24,8,0.16);
    --accent:   #2a1808; --accent2: #b8843c;
    --warn:     #d97706; --danger: #dc2626; --info: #4f46e5;
    --text:     #1a0c00; --text2: #5c4828; --muted: #8c7858;
    --border:   #ede4c8; --border2: #e4d6b0;
    --shadow:   0 8px 56px rgba(0,0,0,0.10), 0 0 0 1px rgba(42,24,8,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.07);
    --bg-glow1: rgba(42,24,8,0.06); --bg-glow2: rgba(184,132,60,0.04);
}

/* 14 ── Linen Sage — soft linen with herbal sage & walnut */
[data-theme="linen-sage"] {
    --bg:       #f4ede0; --bg2: #ede4cc; --bg3: #e0d4b4; --bg4: #d4c498; --bg5: #c4b078;
    --gold:     #6c8050; --gold-dim: #465334; --gold-lg: #91ac6c; --gold-glow: rgba(108,128,80,0.16);
    --accent:   #6c8050; --accent2: #80583a;
    --warn:     #d97706; --danger: #dc2626; --info: #4f46e5;
    --text:     #2c2418; --text2: #685c40; --muted: #988868;
    --border:   #e0d4b4; --border2: #d4c498;
    --shadow:   0 8px 56px rgba(0,0,0,0.10), 0 0 0 1px rgba(108,128,80,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.07);
    --bg-glow1: rgba(108,128,80,0.06); --bg-glow2: rgba(128,88,58,0.04);
}

/* 15 ── Arctic Ice — glacier white-blue with slate & ice cyan */
[data-theme="arctic-ice"] {
    --bg:       #f0faff; --bg2: #e0f0fc; --bg3: #c8e4f8; --bg4: #a8d0ec; --bg5: #88bce0;
    --gold:     #487090; --gold-dim: #2e485d; --gold-lg: #6197c2; --gold-glow: rgba(72,112,144,0.16);
    --accent:   #487090; --accent2: #00a4c4;
    --warn:     #d97706; --danger: #dc2626; --info: #4f46e5;
    --text:     #08182c; --text2: #487090; --muted: #88a4c0;
    --border:   #c8e4f8; --border2: #a8d0ec;
    --shadow:   0 8px 56px rgba(0,0,0,0.10), 0 0 0 1px rgba(72,112,144,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.07);
    --bg-glow1: rgba(72,112,144,0.06); --bg-glow2: rgba(0,164,196,0.04);
}

/* 16 ── Canvas Rust — warm canvas with iron rust & deep teal */
[data-theme="canvas-rust"] {
    --bg:       #f4ecdc; --bg2: #ecdfc4; --bg3: #dccca0; --bg4: #cab880; --bg5: #b4a060;
    --gold:     #b85428; --gold-dim: #77361a; --gold-lg: #f87136; --gold-glow: rgba(184,84,40,0.16);
    --accent:   #b85428; --accent2: #2c8c8c;
    --warn:     #d97706; --danger: #dc2626; --info: #4f46e5;
    --text:     #2c1808; --text2: #6c5028; --muted: #988050;
    --border:   #dccca0; --border2: #cab880;
    --shadow:   0 8px 56px rgba(0,0,0,0.10), 0 0 0 1px rgba(184,84,40,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.07);
    --bg-glow1: rgba(184,84,40,0.06); --bg-glow2: rgba(44,140,140,0.04);
}

/* 17 ── Bone China — polished bone-white with navy & gold trim */
[data-theme="bone-china"] {
    --bg:       #f8f4ec; --bg2: #f0e8d8; --bg3: #e4d8c0; --bg4: #d4c4a0; --bg5: #c0ac80;
    --gold:     #1a2848; --gold-dim: #101a2e; --gold-lg: #233661; --gold-glow: rgba(26,40,72,0.16);
    --accent:   #1a2848; --accent2: #b08840;
    --warn:     #d97706; --danger: #dc2626; --info: #4f46e5;
    --text:     #1a1408; --text2: #58503c; --muted: #8c8068;
    --border:   #e4d8c0; --border2: #d4c4a0;
    --shadow:   0 8px 56px rgba(0,0,0,0.10), 0 0 0 1px rgba(26,40,72,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.07);
    --bg-glow1: rgba(26,40,72,0.06); --bg-glow2: rgba(176,136,64,0.04);
}

/* 18 ── Mossy Stone — damp moss-stone with sage & burnt amber */
[data-theme="mossy-stone"] {
    --bg:       #0a0c08; --bg2: #141810; --bg3: #1e2418; --bg4: #283020; --bg5: #323c28;
    --gold:     #8aa860; --gold-dim: #596d3e; --gold-lg: #bae281; --gold-glow: rgba(138,168,96,0.16);
    --accent:   #8aa860; --accent2: #d49040;
    --warn:     #f0a030; --danger: #e84444; --info: #5898f0;
    --text:     #e0e8d4; --text2: #889878; --muted: #586848;
    --border:   #1e2418; --border2: #283020;
    --shadow:   0 8px 56px rgba(0,0,0,0.78), 0 0 0 1px rgba(138,168,96,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.55);
    --bg-glow1: rgba(138,168,96,0.06); --bg-glow2: rgba(212,144,64,0.04);
}

/* 19 ── Coral Tide — deep teal lagoon with coral & cream foam */
[data-theme="coral-tide"] {
    --bg:       #001818; --bg2: #002828; --bg3: #003838; --bg4: #004848; --bg5: #005858;
    --gold:     #ff6b6b; --gold-dim: #a54545; --gold-lg: #ff9090; --gold-glow: rgba(255,107,107,0.16);
    --accent:   #ff6b6b; --accent2: #f4e8d4;
    --warn:     #f0a030; --danger: #e84444; --info: #5898f0;
    --text:     #e0fff8; --text2: #80b8b8; --muted: #487878;
    --border:   #003838; --border2: #004848;
    --shadow:   0 8px 56px rgba(0,0,0,0.78), 0 0 0 1px rgba(255,107,107,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.55);
    --bg-glow1: rgba(255,107,107,0.06); --bg-glow2: rgba(244,232,212,0.04);
}

/* 20 ── Sandstorm Dusk — warm sand at dusk with rust & cool slate */
[data-theme="sandstorm-dusk"] {
    --bg:       #18120a; --bg2: #281c10; --bg3: #382818; --bg4: #483420; --bg5: #584028;
    --gold:     #d8884c; --gold-dim: #8c5831; --gold-lg: #ffb766; --gold-glow: rgba(216,136,76,0.16);
    --accent:   #d8884c; --accent2: #687888;
    --warn:     #f0a030; --danger: #e84444; --info: #5898f0;
    --text:     #f4e0c4; --text2: #b8a078; --muted: #786848;
    --border:   #382818; --border2: #483420;
    --shadow:   0 8px 56px rgba(0,0,0,0.78), 0 0 0 1px rgba(216,136,76,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.55);
    --bg-glow1: rgba(216,136,76,0.06); --bg-glow2: rgba(104,120,136,0.04);
}

/* 21 ── Boreal Frost — frozen northern slate with ice & deep pine */
[data-theme="boreal-frost"] {
    --bg:       #08101c; --bg2: #101c2c; --bg3: #1c2a3c; --bg4: #28384c; --bg5: #34485c;
    --gold:     #88c0d8; --gold-dim: #587c8c; --gold-lg: #b7ffff; --gold-glow: rgba(136,192,216,0.16);
    --accent:   #88c0d8; --accent2: #50887c;
    --warn:     #f0a030; --danger: #e84444; --info: #5898f0;
    --text:     #e0eaf4; --text2: #80a0bc; --muted: #486878;
    --border:   #1c2a3c; --border2: #28384c;
    --shadow:   0 8px 56px rgba(0,0,0,0.78), 0 0 0 1px rgba(136,192,216,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.55);
    --bg-glow1: rgba(136,192,216,0.06); --bg-glow2: rgba(80,136,124,0.04);
}

/* 22 ── Dragonfruit — tropical magenta with electric lime */
[data-theme="dragonfruit"] {
    --bg:       #1c0414; --bg2: #2c0820; --bg3: #3c1030; --bg4: #4c184c; --bg5: #5c2068;
    --gold:     #f04090; --gold-dim: #9c295d; --gold-lg: #ff56c2; --gold-glow: rgba(240,64,144,0.16);
    --accent:   #f04090; --accent2: #b0e040;
    --warn:     #f0a030; --danger: #e84444; --info: #5898f0;
    --text:     #ffe8f4; --text2: #d098b8; --muted: #885870;
    --border:   #3c1030; --border2: #4c184c;
    --shadow:   0 8px 56px rgba(0,0,0,0.78), 0 0 0 1px rgba(240,64,144,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.55);
    --bg-glow1: rgba(240,64,144,0.06); --bg-glow2: rgba(176,224,64,0.04);
}

/* 23 ── Blacksmith — gunmetal forge with orange flame & cream */
[data-theme="blacksmith"] {
    --bg:       #0c0c0e; --bg2: #181820; --bg3: #242430; --bg4: #303040; --bg5: #3c3c50;
    --gold:     #ff7028; --gold-dim: #a5481a; --gold-lg: #ff9736; --gold-glow: rgba(255,112,40,0.16);
    --accent:   #ff7028; --accent2: #f0e8d8;
    --warn:     #f0a030; --danger: #e84444; --info: #5898f0;
    --text:     #e8e8f0; --text2: #98a0b0; --muted: #586068;
    --border:   #242430; --border2: #303040;
    --shadow:   0 8px 56px rgba(0,0,0,0.78), 0 0 0 1px rgba(255,112,40,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.55);
    --bg-glow1: rgba(255,112,40,0.06); --bg-glow2: rgba(240,232,216,0.04);
}

/* 24 ── Royal Obsidian — polished obsidian with royal blue & gold */
[data-theme="royal-obsidian"] {
    --bg:       #020410; --bg2: #060a20; --bg3: #0c1430; --bg4: #142048; --bg5: #1c2c60;
    --gold:     #2840c4; --gold-dim: #1a297f; --gold-lg: #3656ff; --gold-glow: rgba(40,64,196,0.16);
    --accent:   #2840c4; --accent2: #f4c860;
    --warn:     #f0a030; --danger: #e84444; --info: #5898f0;
    --text:     #e8eef8; --text2: #8090c0; --muted: #485878;
    --border:   #0c1430; --border2: #142048;
    --shadow:   0 8px 56px rgba(0,0,0,0.78), 0 0 0 1px rgba(40,64,196,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.55);
    --bg-glow1: rgba(40,64,196,0.06); --bg-glow2: rgba(244,200,96,0.04);
}

/* 25 ── Neon Mint — pure black with neon mint & soft cyan */
[data-theme="neon-mint"] {
    --bg:       #000604; --bg2: #00100a; --bg3: #001a14; --bg4: #002820; --bg5: #00342a;
    --gold:     #50ffc0; --gold-dim: #34a57c; --gold-lg: #6cffff; --gold-glow: rgba(80,255,192,0.16);
    --accent:   #50ffc0; --accent2: #80e8d8;
    --warn:     #f0a030; --danger: #e84444; --info: #5898f0;
    --text:     #d8ffec; --text2: #5cb098; --muted: #2c7060;
    --border:   #001a14; --border2: #002820;
    --shadow:   0 8px 56px rgba(0,0,0,0.78), 0 0 0 1px rgba(80,255,192,0.05);
    --shadow-sm:0 2px 14px rgba(0,0,0,0.55);
    --bg-glow1: rgba(80,255,192,0.06); --bg-glow2: rgba(128,232,216,0.04);
}


/* ── Btn-primary contrast helper for light themes ── */
[data-theme="paper-cream"]  .btn-primary,
[data-theme="linen-sage"]   .btn-primary,
[data-theme="arctic-ice"]   .btn-primary,
[data-theme="canvas-rust"]  .btn-primary,
[data-theme="bone-china"]   .btn-primary {
    background: var(--gold);
    color: #fff;
    box-shadow: 0 2px 12px var(--gold-glow);
}

/* ── Toys R Us — chunky 3D primary button, like the splash "Enter" ── */
[data-theme="toys-r-us"] .btn-primary,
[data-theme="toys-r-us-dark"] .btn-primary {
    background: linear-gradient(160deg,#2a72d8,#1153c0);
    color:#fff; border:none;
    box-shadow: 0 5px 0 #0a3d96, 0 8px 18px rgba(8,42,116,.26);
    font-weight:800; letter-spacing:.03em;
}
[data-theme="toys-r-us"] .btn-primary:hover,
[data-theme="toys-r-us-dark"] .btn-primary:hover {
    background: linear-gradient(160deg,#3179e0,#1860cc);
    box-shadow: 0 5px 0 #0a3d96, 0 10px 22px rgba(8,42,116,.30);
}
[data-theme="toys-r-us"] .btn-primary:active,
[data-theme="toys-r-us-dark"] .btn-primary:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #0a3d96, 0 4px 10px rgba(8,42,116,.26);
}
@media (prefers-reduced-motion: reduce) {
    [data-theme="toys-r-us"] .btn-primary:active,
    [data-theme="toys-r-us-dark"] .btn-primary:active { transform: none; }
}
/* Playful brand highlights — yellow accent rule + red secondary buttons */
[data-theme="toys-r-us"] .btn-secondary,
[data-theme="toys-r-us-dark"] .btn-secondary {
    border-color: var(--tru-yellow);
}
[data-theme="toys-r-us"] .gate-rule i,
[data-theme="toys-r-us"] hr,
[data-theme="toys-r-us-dark"] .gate-rule i,
[data-theme="toys-r-us-dark"] hr { border-color: var(--tru-yellow); }

/* ── Chat-bubble accents for the new themes ── */
[data-theme="toys-r-us"]        .sent .cm-bubble { background: linear-gradient(135deg,#3a8bff,#1356c8); color:#fff; }
[data-theme="toys-r-us-dark"]   .sent .cm-bubble { background: linear-gradient(135deg,#3a8bff,#1356c8); color:#fff; }
[data-theme="midnight-velvet"]  .sent .cm-bubble { background: linear-gradient(135deg,#7c50d4,#9b6dff); color:#0a0612; }
[data-theme="crimson-noir"]     .sent .cm-bubble { background: linear-gradient(135deg,#8b0a1c,#c4082c); color:#f8eee0; }
[data-theme="emerald-obsidian"] .sent .cm-bubble { background: linear-gradient(135deg,#008866,#00d495); color:#020806; }
[data-theme="cobalt-deep"]      .sent .cm-bubble { background: linear-gradient(135deg,#1e50c4,#2a72ff); color:#fff; }
[data-theme="burgundy-chamber"] .sent .cm-bubble { background: linear-gradient(135deg,#8b5a28,#b8843c); color:#f4e4d0; }
[data-theme="forest-cathedral"] .sent .cm-bubble { background: linear-gradient(135deg,#5c7848,#88aa70); color:#020a04; }
[data-theme="amber-hearth"]     .sent .cm-bubble { background: linear-gradient(135deg,#cc7028,#ffa040); color:#100a04; }
[data-theme="plum-twilight"]    .sent .cm-bubble { background: linear-gradient(135deg,#9866c0,#c890e8); color:#0a0410; }
[data-theme="tokyo-rain"]       .sent .cm-bubble { background: linear-gradient(135deg,#c41868,#ff2d8a); color:#fff; }
[data-theme="matrix-acid"]      .sent .cm-bubble { background: linear-gradient(135deg,#22b300,#44ff00); color:#000400; }
[data-theme="synthwave-sunset"] .sent .cm-bubble { background: linear-gradient(135deg,#c8306c,#ff508a); color:#fff; }
[data-theme="void-magenta"]     .sent .cm-bubble { background: linear-gradient(135deg,#c00088,#ff00b0); color:#fff; }
[data-theme="paper-cream"]      .sent .cm-bubble { background: linear-gradient(135deg,#1a0c00,#2a1808); color:#faf6ec; }
[data-theme="linen-sage"]       .sent .cm-bubble { background: linear-gradient(135deg,#4c5c38,#6c8050); color:#f4ede0; }
[data-theme="arctic-ice"]       .sent .cm-bubble { background: linear-gradient(135deg,#2c5070,#487090); color:#fff; }
[data-theme="canvas-rust"]      .sent .cm-bubble { background: linear-gradient(135deg,#883a18,#b85428); color:#f4ecdc; }
[data-theme="bone-china"]       .sent .cm-bubble { background: linear-gradient(135deg,#0c1830,#1a2848); color:#fff; }
[data-theme="mossy-stone"]      .sent .cm-bubble { background: linear-gradient(135deg,#5c7840,#8aa860); color:#0a0c08; }
[data-theme="coral-tide"]       .sent .cm-bubble { background: linear-gradient(135deg,#cc4848,#ff6b6b); color:#001818; }
[data-theme="sandstorm-dusk"]   .sent .cm-bubble { background: linear-gradient(135deg,#a85c2c,#d8884c); color:#18120a; }
[data-theme="boreal-frost"]     .sent .cm-bubble { background: linear-gradient(135deg,#5890a8,#88c0d8); color:#08101c; }
[data-theme="dragonfruit"]      .sent .cm-bubble { background: linear-gradient(135deg,#c02868,#f04090); color:#fff; }
[data-theme="blacksmith"]       .sent .cm-bubble { background: linear-gradient(135deg,#cc4818,#ff7028); color:#fff; }
[data-theme="royal-obsidian"]   .sent .cm-bubble { background: linear-gradient(135deg,#1828a8,#2840c4); color:#fff; }
[data-theme="neon-mint"]        .sent .cm-bubble { background: linear-gradient(135deg,#28d098,#50ffc0); color:#000604; }

/* ── Per-theme role-color overrides ───────────────────────────
   Light themes get darker shades for AA contrast on pale surfaces;
   dark themes whose accent collides with a default role hue get that
   one role shifted so roles stay visually distinct from the chrome. */
[data-theme="light"],
[data-theme="toys-r-us"],
[data-theme="paper-cream"],
[data-theme="linen-sage"],
[data-theme="arctic-ice"],
[data-theme="canvas-rust"],
[data-theme="bone-china"] {
    --role-admin:   #b91c1c;
    --role-support: #1d4ed8;
    --role-seller:  #92600a;
    --role-buyer:   #0e7490;
}
/* Red-accent themes — soften admin away from the theme's own red */
[data-theme="crimson-noir"]   { --role-admin: #ff8a70; }
[data-theme="stealth"]        { --role-admin: #ff9a80; }
[data-theme="toys-r-us-dark"] { --role-admin: #ff8a80; }
[data-theme="coral-tide"]     { --role-admin: #ff9a8a; }
/* Blue-accent themes — lighten support away from the theme blue */
[data-theme="cobalt-deep"]    { --role-support: #9db9ff; }
[data-theme="royal-obsidian"] { --role-support: #9db9ff; }
[data-theme="carbon"]         { --role-support: #a8c4ff; }
[data-theme="abyssal"]        { --role-support: #9fb4ff; --role-buyer: #7ee8ff; }
/* Cyan-accent themes — brighten buyer away from the theme cyan */
[data-theme="tokyo-rain"]     { --role-buyer: #7ee8ff; }
[data-theme="vantablack"]     { --role-buyer: #7ee8ff; }
[data-theme="boreal-frost"]   { --role-buyer: #a8e0ff; }
/* Gold/amber-accent themes — shift seller off the theme gold */
[data-theme="midnight-velvet"]  { --role-seller: #ffcf5c; }
[data-theme="burgundy-chamber"] { --role-seller: #ffcf5c; }
[data-theme="amber-hearth"]     { --role-seller: #ffe066; }
[data-theme="sandstorm-dusk"]   { --role-seller: #ffd24d; }
[data-theme="synthwave-sunset"] { --role-seller: #ffe066; }
[data-theme="true-black"]       { --role-seller: #ff9d4d; }

/* ═══════════════════════════════════════════════════════════
   Group-based structural overrides for the 25 new themes.
   Mirrors the typography table in themes.php so the picker
   preview matches the actual page chrome.
   ═══════════════════════════════════════════════════════════ */

/* Sharp / brutalist (matrix-acid, tokyo-rain, void-magenta, blacksmith) */
[data-theme="matrix-acid"],
[data-theme="tokyo-rain"],
[data-theme="void-magenta"],
[data-theme="blacksmith"] {
    --radius: 0; --radius-sm: 0; --radius-lg: 0;
    --btn-radius: 0; --input-radius: 0; --card-bw: 1px;
}
[data-theme="matrix-acid"] {
    --btn-transform: uppercase; --btn-letter: .16em;
    --heading-weight: 400; --body-weight: 300;
}
[data-theme="matrix-acid"] .card { border-color: var(--accent); box-shadow: 0 0 12px rgba(68,255,0,.08); }
[data-theme="matrix-acid"] .btn  { border: 1px solid var(--accent); font-family: 'Courier New', monospace; }
[data-theme="matrix-acid"] h1, [data-theme="matrix-acid"] h2, [data-theme="matrix-acid"] h3 {
    font-family: 'Courier New', monospace; font-weight: 400; text-transform: uppercase; }
[data-theme="matrix-acid"] input, [data-theme="matrix-acid"] textarea, [data-theme="matrix-acid"] select {
    font-family: 'Courier New', monospace; border-color: rgba(68,255,0,.3); }

[data-theme="tokyo-rain"] {
    --btn-transform: uppercase; --btn-letter: .14em;
    --heading-weight: 700; --body-weight: 400;
}
[data-theme="tokyo-rain"] .btn { border-width: 1px; }
[data-theme="tokyo-rain"] h1, [data-theme="tokyo-rain"] h2, [data-theme="tokyo-rain"] h3 {
    font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

[data-theme="void-magenta"] {
    --btn-transform: uppercase; --btn-letter: .14em;
    --heading-weight: 700; --body-weight: 400;
}
[data-theme="void-magenta"] .card { border-color: rgba(255,0,176,.25); box-shadow: 0 0 16px rgba(255,0,176,.08); }
[data-theme="void-magenta"] h1, [data-theme="void-magenta"] h2, [data-theme="void-magenta"] h3 {
    text-transform: uppercase; letter-spacing: .08em; }

[data-theme="blacksmith"] {
    --btn-transform: uppercase; --btn-letter: .12em;
    --heading-weight: 800; --body-weight: 700;
}
[data-theme="blacksmith"] .card { border-left: 3px solid var(--accent); }
[data-theme="blacksmith"] h1, [data-theme="blacksmith"] h2, [data-theme="blacksmith"] h3 {
    font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }

/* Editorial / serif (crimson-noir, burgundy-chamber, forest-cathedral, amber-hearth, paper-cream, linen-sage, bone-china, royal-obsidian) */
[data-theme="crimson-noir"],
[data-theme="burgundy-chamber"],
[data-theme="forest-cathedral"],
[data-theme="amber-hearth"],
[data-theme="paper-cream"],
[data-theme="linen-sage"],
[data-theme="bone-china"],
[data-theme="royal-obsidian"] {
    --radius: 4px; --radius-sm: 4px; --radius-lg: 6px;
}
[data-theme="crimson-noir"] h1, [data-theme="crimson-noir"] h2, [data-theme="crimson-noir"] h3,
[data-theme="burgundy-chamber"] h1, [data-theme="burgundy-chamber"] h2, [data-theme="burgundy-chamber"] h3,
[data-theme="forest-cathedral"] h1, [data-theme="forest-cathedral"] h2, [data-theme="forest-cathedral"] h3,
[data-theme="amber-hearth"] h1, [data-theme="amber-hearth"] h2, [data-theme="amber-hearth"] h3,
[data-theme="paper-cream"] h1, [data-theme="paper-cream"] h2, [data-theme="paper-cream"] h3,
[data-theme="linen-sage"] h1, [data-theme="linen-sage"] h2, [data-theme="linen-sage"] h3,
[data-theme="bone-china"] h1, [data-theme="bone-china"] h2, [data-theme="bone-china"] h3,
[data-theme="royal-obsidian"] h1, [data-theme="royal-obsidian"] h2, [data-theme="royal-obsidian"] h3 {
    font-family: Georgia, 'Times New Roman', serif;
}
[data-theme="bone-china"] {
    --btn-transform: uppercase; --btn-letter: .08em; --heading-weight: 700;
}
[data-theme="royal-obsidian"] {
    --btn-transform: uppercase; --btn-letter: .08em; --heading-weight: 700;
}

/* Toys R Us — playful, bold & rounded */
[data-theme="toys-r-us"],
[data-theme="toys-r-us-dark"] {
    --radius: 12px; --radius-sm: 10px; --radius-lg: 18px;
    --btn-radius: 99px; --input-radius: 10px;
    --heading-weight: 800; --body-weight: 500;
}
[data-theme="toys-r-us"] h1, [data-theme="toys-r-us"] h2, [data-theme="toys-r-us"] h3,
[data-theme="toys-r-us-dark"] h1, [data-theme="toys-r-us-dark"] h2, [data-theme="toys-r-us-dark"] h3 {
    font-weight: 800; letter-spacing: .01em;
}
/* In-site boxes mirror the splash/login gate panel (.gate-term):
   white card, chunky yellow border, big rounded corners, an offset
   3D drop-shadow, and a dashed blue inner border. Scoped to this theme. */
[data-theme="toys-r-us"] .card:not(.pd-has-banner),
[data-theme="toys-r-us-dark"] .card:not(.pd-has-banner) {
    background: var(--tru-panel);
    border: 3px solid var(--tru-yellow);
    border-radius: 24px;
    box-shadow: 0 12px 0 rgba(var(--tru-shadow-rgb),.16), 0 26px 50px rgba(0,0,0,.16);
}
/* Dashed blue inner border — excluded from profile banner cards, whose
   ::before is a legibility overlay (.card.pd-has-banner::before). */
[data-theme="toys-r-us"] .card:not(.pd-has-banner)::before,
[data-theme="toys-r-us-dark"] .card:not(.pd-has-banner)::before {
    content: '';
    position: absolute;
    inset: 9px;
    top: 9px; left: 9px; right: 9px; bottom: 9px;
    height: auto;
    width: auto;
    background: none;
    border: 2px dashed var(--tru-dash);
    border-radius: 16px;
    pointer-events: none;
}
/* Form boxes echo the gate's rounded blue-outlined fields
   (.gate-challenge): soft tint, blue border, orange focus. */
[data-theme="toys-r-us"] input[type="text"],
[data-theme="toys-r-us"] input[type="password"],
[data-theme="toys-r-us"] input[type="email"],
[data-theme="toys-r-us"] input[type="number"],
[data-theme="toys-r-us"] input[type="search"],
[data-theme="toys-r-us"] input[type="url"],
[data-theme="toys-r-us"] textarea,
[data-theme="toys-r-us"] select,
[data-theme="toys-r-us-dark"] input[type="text"],
[data-theme="toys-r-us-dark"] input[type="password"],
[data-theme="toys-r-us-dark"] input[type="email"],
[data-theme="toys-r-us-dark"] input[type="number"],
[data-theme="toys-r-us-dark"] input[type="search"],
[data-theme="toys-r-us-dark"] input[type="url"],
[data-theme="toys-r-us-dark"] textarea,
[data-theme="toys-r-us-dark"] select {
    background: var(--tru-field);
    border: 2px solid var(--tru-dash);
    border-radius: 12px;
}
[data-theme="toys-r-us"] input[type="text"]:focus,
[data-theme="toys-r-us"] input[type="password"]:focus,
[data-theme="toys-r-us"] input[type="email"]:focus,
[data-theme="toys-r-us"] input[type="number"]:focus,
[data-theme="toys-r-us"] input[type="search"]:focus,
[data-theme="toys-r-us"] input[type="url"]:focus,
[data-theme="toys-r-us"] textarea:focus,
[data-theme="toys-r-us"] select:focus,
[data-theme="toys-r-us-dark"] input[type="text"]:focus,
[data-theme="toys-r-us-dark"] input[type="password"]:focus,
[data-theme="toys-r-us-dark"] input[type="email"]:focus,
[data-theme="toys-r-us-dark"] input[type="number"]:focus,
[data-theme="toys-r-us-dark"] input[type="search"]:focus,
[data-theme="toys-r-us-dark"] input[type="url"]:focus,
[data-theme="toys-r-us-dark"] textarea:focus,
[data-theme="toys-r-us-dark"] select:focus {
    border-color: var(--tru-orange);
    outline: none;
}
/* GATE-PAGE GUARD — splash/login/recover/2FA/appeal always use the fixed
   gate-toys palette, but they still set data-theme from the cookie, so the
   toys-r-us input skin above (equal specificity, later in the file than the
   .gate-toys field rules) repainted gate fields with --tru-field. On the
   LIGHT toys-r-us theme that is #f7faff behind the gate's WHITE input text —
   invisible typing on /login, /recover, /recover_login, /totp_2fa and the
   splash captcha. Re-assert the gate field skin at 3-class specificity so no
   theme's element-level input rules can repaint gate fields. Keep in
   lockstep with the .gate-toys .gate-input / .gate-field rules (~2360-2390). */
.gate-toys.gate-body .gate-input,
.gate-toys.gate-body .gate-field input,
.gate-toys.gate-body .gate-field textarea {
    color: #ffffff;
    background: #15347a;
    border-radius: 10px;
    font-family: var(--lx-sans); /* matrix-acid's element-level Courier rule otherwise ties in */
}
.gate-toys.gate-body .gate-input { border: 2px solid #1f6fe0; }
.gate-toys.gate-body .gate-field input,
.gate-toys.gate-body .gate-field textarea { border: 2px solid rgba(31,111,224,.6); }
.gate-toys.gate-body .gate-input:focus,
.gate-toys.gate-body .gate-field input:focus,
.gate-toys.gate-body .gate-field textarea:focus { border-color: var(--tru-orange); outline: none; }

/* Recovery-code copy box (recover.php success screen). The code lives in a
   REAL, VISIBLE, readonly textarea — the only copy source that is reliable on
   Tor Browser (hidden helpers copy empty; async clipboard can hang). Kept at
   3-class specificity like the GATE-PAGE GUARD above so element-level theme
   input skins (e.g. [data-theme="toys-r-us"] textarea) can never repaint it.
   Both the textarea and the button start display:none INLINE and are revealed
   by JS, so no-JS users keep the tap-to-select code div and never see a dead
   button ([hidden] would lose to these display declarations). */
.gate-toys.gate-body .gate-code-ta {
    width: 100%;
    box-sizing: border-box;
    background: #f4f7ff;
    border: 1px solid rgba(31,111,224,.28);
    border-radius: 12px;
    padding: 12px 10px;
    margin: 0 0 8px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 20px;
    letter-spacing: 2px;
    font-weight: 700;
    line-height: 1.3;
    color: #1f3a78;
    text-align: center;
    white-space: pre;
    overflow-x: auto;
    resize: none;
    cursor: text;
}
.gate-toys.gate-body .gate-code-ta:focus { border-color: var(--tru-orange); outline: none; }
.gate-copy-btn {
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: #1f6fe0;
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    font-family: inherit;
}
.gate-copy-btn:hover  { background: #3a86ff; }
.gate-copy-btn:active { transform: translateY(1px); }

/* ============================================================
   Toys-R-Us — COMPLETE in-site redesign to match the splash gate.
   Light bubbly-blue page, bright white panels with yellow + dashed
   borders, chunky 3D buttons, playful rounded nav / tables / pills.
   Dark navy text is kept on light surfaces for AA contrast, so the
   page stays readable site-wide. No-JS / Tor-safe; motion gated.
   ============================================================ */
/* CRITICAL readability: this is a LIGHT theme, but it inherited the
   default BLACK 4-way text-outline stroke (tuned for dark themes),
   which halos the dark navy text into a blurry smear. Dark text on
   white / light-blue is already high-contrast, so drop the stroke
   entirely — both the shared var and the hardcoded mobile shadow. */
[data-theme="toys-r-us"] { --text-outline: none; }
@media (max-width: 600px) {
    [data-theme="toys-r-us"] .card p,
    [data-theme="toys-r-us"] .card strong,
    [data-theme="toys-r-us"] .card em,
    [data-theme="toys-r-us"] .card b,
    [data-theme="toys-r-us"] .card i,
    [data-theme="toys-r-us"] .card a,
    [data-theme="toys-r-us"] .card li { text-shadow: none; }
}
[data-theme="toys-r-us"] body {
    background: #cfe4ff;
    background-image:
        radial-gradient(circle at 14% 14%, rgba(255,255,255,.75) 0 11px, transparent 12px),
        radial-gradient(circle at 86% 10%, rgba(255,255,255,.60) 0 7px,  transparent 8px),
        radial-gradient(circle at 92% 60%, rgba(255,255,255,.65) 0 13px, transparent 14px),
        radial-gradient(circle at 7%  74%, rgba(255,255,255,.55) 0 9px,  transparent 10px),
        radial-gradient(circle at 45% 90%, rgba(255,255,255,.50) 0 6px,  transparent 7px),
        linear-gradient(180deg, #e6f2ff 0%, #bcdcff 100%);
    background-attachment: fixed;
}
/* Dark variant — identical bubble pattern, deep-navy palette */
[data-theme="toys-r-us-dark"] body {
    background: #060c1c;
    background-image:
        radial-gradient(circle at 14% 14%, rgba(58,139,255,.14) 0 11px, transparent 12px),
        radial-gradient(circle at 86% 10%, rgba(58,139,255,.10) 0 7px,  transparent 8px),
        radial-gradient(circle at 92% 60%, rgba(58,139,255,.12) 0 13px, transparent 14px),
        radial-gradient(circle at 7%  74%, rgba(58,139,255,.09) 0 9px,  transparent 10px),
        radial-gradient(circle at 45% 90%, rgba(58,139,255,.08) 0 6px,  transparent 7px),
        linear-gradient(180deg, #0a1430 0%, #060c1c 100%);
    background-attachment: fixed;
}

/* Top navigation — white bar with a chunky yellow underline */
[data-theme="toys-r-us"] .topnav,
[data-theme="toys-r-us-dark"] .topnav {
    background: var(--tru-panel);
    border-bottom: 3px solid var(--tru-yellow);
    box-shadow: 0 4px 0 rgba(var(--tru-shadow-rgb),.10);
}
[data-theme="toys-r-us"] .topnav-brand a,
[data-theme="toys-r-us-dark"] .topnav-brand a {
    color: var(--tru-brand); font-weight: 800; letter-spacing: .18em;
}
[data-theme="toys-r-us"] .topnav-bar,
[data-theme="toys-r-us-dark"] .topnav-bar {
    background: var(--tru-panel);
    border-bottom: 3px solid var(--tru-yellow);
}
[data-theme="toys-r-us"] .topnav-bar .topnav-links .topnav-logout,
[data-theme="toys-r-us-dark"] .topnav-bar .topnav-links .topnav-logout {
    background: linear-gradient(90deg, transparent 0, var(--tru-panel) 18px, var(--tru-panel) 100%);
}
[data-theme="toys-r-us"] .topnav-links a,
[data-theme="toys-r-us-dark"] .topnav-links a { color: var(--tru-nav); }
[data-theme="toys-r-us"] .topnav-links a.admin-link,
[data-theme="toys-r-us-dark"] .topnav-links a.admin-link { color: var(--warn); }
[data-theme="toys-r-us"] .topnav-links a.active,
[data-theme="toys-r-us"] .topnav-links a:hover,
[data-theme="toys-r-us-dark"] .topnav-links a.active,
[data-theme="toys-r-us-dark"] .topnav-links a:hover { color: var(--tru-red); }

/* Mobile bottom nav — white with a yellow top edge */
[data-theme="toys-r-us"] .bottom-nav,
[data-theme="toys-r-us-dark"] .bottom-nav {
    background: var(--tru-panel);
    border-top: 3px solid var(--tru-yellow);
    box-shadow: 0 -4px 0 rgba(var(--tru-shadow-rgb),.08);
}
[data-theme="toys-r-us"] .bottom-nav a,
[data-theme="toys-r-us-dark"] .bottom-nav a { color: var(--tru-nav); }
[data-theme="toys-r-us"] .bottom-nav a.active,
[data-theme="toys-r-us-dark"] .bottom-nav a.active { color: var(--tru-red); }

/* Sidebar boxes echo the white card panel look */
[data-theme="toys-r-us"] .sidebar-box,
[data-theme="toys-r-us-dark"] .sidebar-box {
    background: var(--tru-panel);
    border: 2px solid var(--tru-yellow);
    border-radius: 18px;
    box-shadow: 0 8px 0 rgba(var(--tru-shadow-rgb),.10);
    color: var(--text);
}
[data-theme="toys-r-us"] .sidebar-box h3,
[data-theme="toys-r-us-dark"] .sidebar-box h3 { color: var(--tru-brand); }

/* Data tables — rounded yellow-bordered shell with a bold blue header */
[data-theme="toys-r-us"] .table-scroll,
[data-theme="toys-r-us-dark"] .table-scroll {
    border: 2px solid var(--tru-yellow);
    border-radius: 18px;
}
[data-theme="toys-r-us"] .data-table,
[data-theme="toys-r-us-dark"] .data-table { color: var(--text); }
[data-theme="toys-r-us"] .data-table th,
[data-theme="toys-r-us-dark"] .data-table th {
    background: linear-gradient(180deg, #3a8bff, #1356c8);
    color: #ffffff;
    border-bottom: none;
}
[data-theme="toys-r-us"] .data-table tr:hover td,
[data-theme="toys-r-us-dark"] .data-table tr:hover td { background: var(--tru-row-hover); }
/* Round inner cells so the collapsed table matches the rounded yellow
   shell (overflow-x:auto must stay for wide-table scrolling on mobile). */
[data-theme="toys-r-us"] .data-table th:first-child,
[data-theme="toys-r-us-dark"] .data-table th:first-child { border-top-left-radius: 16px; }
[data-theme="toys-r-us"] .data-table th:last-child,
[data-theme="toys-r-us-dark"] .data-table th:last-child  { border-top-right-radius: 16px; }
[data-theme="toys-r-us"] .data-table tr:last-child td:first-child,
[data-theme="toys-r-us-dark"] .data-table tr:last-child td:first-child { border-bottom-left-radius: 16px; }
[data-theme="toys-r-us"] .data-table tr:last-child td:last-child,
[data-theme="toys-r-us-dark"] .data-table tr:last-child td:last-child  { border-bottom-right-radius: 16px; }

/* Flash / alert banners — rounded with a soft offset shadow */
[data-theme="toys-r-us"] .flash,
[data-theme="toys-r-us-dark"] .flash {
    border-radius: 16px;
    box-shadow: 0 6px 0 rgba(var(--tru-shadow-rgb),.10);
}

/* Secondary / state buttons — rounded chunky pills like the gate's Enter */
[data-theme="toys-r-us"] .btn-secondary,
[data-theme="toys-r-us-dark"] .btn-secondary {
    background: var(--tru-panel); color: var(--tru-sec-text);
    border: 2px solid var(--tru-yellow);
    box-shadow: 0 4px 0 rgba(var(--tru-shadow-rgb),.14);
    font-weight: 800;
}
[data-theme="toys-r-us"] .btn-secondary:hover,
[data-theme="toys-r-us-dark"] .btn-secondary:hover { background: var(--tru-sec-hover-bg); color: var(--tru-sec-hover-text); }
[data-theme="toys-r-us"] .btn-success,
[data-theme="toys-r-us-dark"] .btn-success {
    background: linear-gradient(160deg, #1aa84a, #0f7c34); color: #fff; border: none;
    box-shadow: 0 5px 0 #0a5021, 0 8px 18px rgba(var(--tru-shadow-rgb),.22); font-weight: 800;
}
[data-theme="toys-r-us"] .btn-danger,
[data-theme="toys-r-us-dark"] .btn-danger {
    background: linear-gradient(160deg, #ff4a40, #d8261d); color: #fff; border: none;
    box-shadow: 0 5px 0 #a8160f, 0 8px 18px rgba(var(--tru-shadow-rgb),.22); font-weight: 800;
}
[data-theme="toys-r-us"] .btn-success:active,
[data-theme="toys-r-us"] .btn-danger:active,
[data-theme="toys-r-us-dark"] .btn-success:active,
[data-theme="toys-r-us-dark"] .btn-danger:active { transform: translateY(3px); }
@media (prefers-reduced-motion: reduce) {
    [data-theme="toys-r-us"] .btn-success:active,
    [data-theme="toys-r-us"] .btn-danger:active,
    [data-theme="toys-r-us-dark"] .btn-success:active,
    [data-theme="toys-r-us-dark"] .btn-danger:active { transform: none; }
}

/* Badges & status pills — rounder, bolder, slight 3D lift */
[data-theme="toys-r-us"] .badge,
[data-theme="toys-r-us-dark"] .badge { box-shadow: 0 2px 0 rgba(var(--tru-shadow-rgb),.18); }
[data-theme="toys-r-us"] .status-pill,
[data-theme="toys-r-us"] .status-badge,
[data-theme="toys-r-us-dark"] .status-pill,
[data-theme="toys-r-us-dark"] .status-badge { font-weight: 800; }

/* Soft / rounded (plum-twilight, coral-tide, dragonfruit) */
[data-theme="plum-twilight"],
[data-theme="coral-tide"],
[data-theme="dragonfruit"] {
    --radius: 14px; --radius-sm: 12px; --radius-lg: 18px;
    --btn-radius: 99px;
}
[data-theme="dragonfruit"] {
    --heading-weight: 800; --body-weight: 600;
}

/* Cyber-pop (synthwave-sunset, neon-mint) */
[data-theme="synthwave-sunset"] {
    --radius: 12px; --radius-sm: 10px; --radius-lg: 14px;
    --btn-radius: 8px; --btn-transform: uppercase; --btn-letter: .1em;
    --heading-weight: 800; --body-weight: 600;
}
[data-theme="synthwave-sunset"] .card { box-shadow: 0 0 24px rgba(255,80,138,.10); }
[data-theme="synthwave-sunset"] h1, [data-theme="synthwave-sunset"] h2, [data-theme="synthwave-sunset"] h3 {
    font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    background: linear-gradient(135deg, #ff508a 0%, #ffaa30 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
[data-theme="neon-mint"] {
    --btn-transform: uppercase; --btn-letter: .08em;
    --heading-weight: 600;
}
[data-theme="neon-mint"] .card { box-shadow: 0 0 18px rgba(80,255,192,.06); }

/* Polished cards for premium dark themes (midnight-velvet, emerald-obsidian, cobalt-deep) */
[data-theme="midnight-velvet"] .card,
[data-theme="emerald-obsidian"] .card,
[data-theme="cobalt-deep"] .card {
    background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(0,0,0,.18));
    border: 1px solid rgba(255,255,255,.06);
}
[data-theme="midnight-velvet"] .btn-primary {
    background: linear-gradient(180deg, #d4a84a 0%, #a8841f 100%);
    color: #1a0e08; text-shadow: 0 1px 0 rgba(255,255,255,.15);
    box-shadow: 0 6px 18px rgba(212,168,74,.30), 0 1px 0 rgba(255,255,255,.18) inset;
}
[data-theme="midnight-velvet"] h1, [data-theme="midnight-velvet"] h2 {
    background: linear-gradient(135deg, #f0d96a 0%, #d4a84a 50%, #a8841f 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
[data-theme="emerald-obsidian"] .btn-primary {
    background: linear-gradient(135deg, #00d495 0%, #008866 100%); color: #020806;
    box-shadow: 0 6px 18px rgba(0,212,149,.28);
}
[data-theme="cobalt-deep"] .btn-primary {
    background: linear-gradient(135deg, #2a72ff 0%, #1e50c4 100%); color: #fff;
    box-shadow: 0 6px 18px rgba(42,114,255,.30);
}

/* ── Shop Title Tags (marketplace cards) ── */
.shop-title-tag {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: .03em;
    vertical-align: middle;
    white-space: nowrap;
}
.shop-title-common {
    background: rgba(148,163,184,.12);
    color: #94a3b8;
    border: 1px solid rgba(148,163,184,.2);
}
.shop-title-uncommon {
    background: rgba(74,222,128,.1);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,.25);
}
.shop-title-rare {
    background: rgba(108,143,255,.1);
    color: #6c8fff;
    border: 1px solid rgba(108,143,255,.25);
    animation: title-rare-glow 2s ease-in-out infinite;
}
.shop-title-legendary {
    background: linear-gradient(135deg, rgba(251,191,36,.15), rgba(245,158,11,.1));
    color: #fbbf24;
    border: 1px solid rgba(251,191,36,.35);
    animation: title-legendary-glow 1.5s ease-in-out infinite;
}

/* ── Profile Title Display (rarity-based) ── */
.profile-title-common {
    color: #94a3b8;
    font-weight: 600;
}
.profile-title-uncommon {
    color: #4ade80;
    font-weight: 600;
}
.profile-title-rare {
    font-weight: 700;
    background: linear-gradient(90deg, #6c8fff, #a78bfa, #6c8fff);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: title-shimmer 3s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(108,143,255,.3));
}
.profile-title-legendary {
    font-weight: 800;
    letter-spacing: .06em;
    background: linear-gradient(90deg, #fbbf24, #f59e0b, #fcd34d, #fbbf24);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: title-shimmer 2s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(251,191,36,.4));
}

@keyframes title-rare-glow {
    0%, 100% { box-shadow: 0 0 3px rgba(108,143,255,.15); }
    50%      { box-shadow: 0 0 8px rgba(108,143,255,.35); }
}
@keyframes title-legendary-glow {
    0%, 100% { box-shadow: 0 0 4px rgba(251,191,36,.2); }
    50%      { box-shadow: 0 0 12px rgba(251,191,36,.45); }
}
@keyframes title-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: -100% 50%; }
}

/* ── Animated Accent Effects (profile) ── */
.accent-pulse {
    animation: accent-pulse 2s ease-in-out infinite;
}
.accent-breathe {
    animation: accent-breathe 3s ease-in-out infinite;
}
.accent-flicker {
    animation: accent-flicker 1.5s steps(8, end) infinite;
}

@keyframes accent-pulse {
    0%, 100% { box-shadow: 0 0 8px var(--user-accent); }
    50%      { box-shadow: 0 0 20px var(--user-accent), 0 0 40px color-mix(in srgb, var(--user-accent) 40%, transparent); }
}
@keyframes accent-breathe {
    0%, 100% { border-color: var(--user-accent); box-shadow: 0 0 6px color-mix(in srgb, var(--user-accent) 30%, transparent); }
    50%      { border-color: color-mix(in srgb, var(--user-accent) 60%, white); box-shadow: 0 0 16px var(--user-accent), 0 0 30px color-mix(in srgb, var(--user-accent) 25%, transparent); }
}
@keyframes accent-flicker {
    0%, 100% { opacity: 1; box-shadow: 0 0 10px var(--user-accent); }
    10%  { opacity: .85; }
    20%  { opacity: 1; box-shadow: 0 0 18px var(--user-accent); }
    40%  { opacity: .9; }
    60%  { opacity: 1; box-shadow: 0 0 14px var(--user-accent); }
    80%  { opacity: .92; box-shadow: 0 0 6px var(--user-accent); }
}

/* ── Accent batch (July 2026): 7 slow/smooth animated ring effects +
   4 static duotone rings. Design rules (Tor-safe, calm aesthetic):
   every cycle ≥ 3s, ease-in-out only, low amplitude, NO steps()/strobe.
   All keyed on --user-accent so they follow the equipped accent colour.
   The duotone "ring" classes use constant single-keyframe animations
   on purpose: CSS animations override the inline border/box-shadow the
   profile renderer emits, whereas a plain class rule (or a pseudo-
   element, clipped by .profile-avatar's overflow:hidden) would not. */
.accent-spectrum     { animation: accent-spectrum     14s ease-in-out infinite; }
.accent-crossfade    { animation: accent-crossfade     6s ease-in-out infinite; }
.accent-halo-breathe { animation: accent-halo-breathe  7s ease-in-out infinite; }
.accent-shimmer-soft { animation: accent-shimmer-soft  5s ease-in-out infinite; }
.accent-ember-drift  { animation: accent-ember-drift   9s ease-in-out infinite; }
.accent-tide-drift   { animation: accent-tide-drift    9s ease-in-out infinite; }
.accent-aurora-drift { animation: accent-aurora-drift 12s ease-in-out infinite; }

@keyframes accent-spectrum {
    0%, 100% { border-color: var(--user-accent); box-shadow: 0 0 12px var(--user-accent); }
    20%      { border-color: #f9a8d4; box-shadow: 0 0 12px #f9a8d4; }
    40%      { border-color: #fcd34d; box-shadow: 0 0 12px #fcd34d; }
    60%      { border-color: #86efac; box-shadow: 0 0 12px #86efac; }
    80%      { border-color: #93c5fd; box-shadow: 0 0 12px #93c5fd; }
}
@keyframes accent-crossfade {
    0%, 100% { border-color: var(--user-accent); box-shadow: 0 0 10px var(--user-accent); }
    50%      { border-color: color-mix(in srgb, var(--user-accent) 45%, #a78bfa); box-shadow: 0 0 14px color-mix(in srgb, var(--user-accent) 45%, #a78bfa); }
}
@keyframes accent-halo-breathe {
    0%, 100% { box-shadow: 0 0 8px var(--user-accent), 0 0 0 color-mix(in srgb, var(--user-accent) 0%, transparent); }
    50%      { box-shadow: 0 0 16px var(--user-accent), 0 0 34px color-mix(in srgb, var(--user-accent) 35%, transparent); }
}
@keyframes accent-shimmer-soft {
    0%, 100% { border-color: var(--user-accent); box-shadow: 0 0 8px var(--user-accent); }
    50%      { border-color: color-mix(in srgb, var(--user-accent) 65%, #ffffff); box-shadow: 0 0 14px color-mix(in srgb, var(--user-accent) 60%, #ffffff); }
}
@keyframes accent-ember-drift {
    0%, 100% { border-color: var(--user-accent); box-shadow: 0 0 10px var(--user-accent); }
    50%      { border-color: color-mix(in srgb, var(--user-accent) 50%, #fb923c); box-shadow: 0 0 15px color-mix(in srgb, var(--user-accent) 50%, #fb923c); }
}
@keyframes accent-tide-drift {
    0%, 100% { border-color: var(--user-accent); box-shadow: 0 0 10px var(--user-accent); }
    50%      { border-color: color-mix(in srgb, var(--user-accent) 50%, #38bdf8); box-shadow: 0 0 15px color-mix(in srgb, var(--user-accent) 50%, #38bdf8); }
}
@keyframes accent-aurora-drift {
    0%, 100% { border-color: var(--user-accent); box-shadow: 0 0 10px var(--user-accent); }
    33%      { border-color: color-mix(in srgb, var(--user-accent) 55%, #34d399); box-shadow: 0 0 14px color-mix(in srgb, var(--user-accent) 55%, #34d399); }
    66%      { border-color: color-mix(in srgb, var(--user-accent) 55%, #a78bfa); box-shadow: 0 0 14px color-mix(in srgb, var(--user-accent) 55%, #a78bfa); }
}

/* Static duotone rings — visually motionless (identical endpoints);
   the animation exists only to beat the inline box-shadow. */
.accent-grad-ring-violet { animation: accent-ring-violet 4s linear infinite; }
.accent-grad-ring-cyan   { animation: accent-ring-cyan   4s linear infinite; }
.accent-grad-ring-rose   { animation: accent-ring-rose   4s linear infinite; }
.accent-grad-ring-gold   { animation: accent-ring-gold   4s linear infinite; }
@keyframes accent-ring-violet { 0%, 100% { box-shadow: 0 0 10px var(--user-accent), 0 0 24px 4px rgba(167,139,250,.5); } }
@keyframes accent-ring-cyan   { 0%, 100% { box-shadow: 0 0 10px var(--user-accent), 0 0 24px 4px rgba(103,232,249,.5); } }
@keyframes accent-ring-rose   { 0%, 100% { box-shadow: 0 0 10px var(--user-accent), 0 0 24px 4px rgba(251,113,133,.5); } }
@keyframes accent-ring-gold   { 0%, 100% { box-shadow: 0 0 10px var(--user-accent), 0 0 24px 4px rgba(234,179,8,.55); } }

.mp-pagination {
    margin-top: 18px;
    padding: 16px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.mp-pagination-info {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: .03em;
}
.mp-pagination-pages {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}
.mp-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text);
    text-decoration: none;
    transition: all .15s ease;
    cursor: pointer;
}
.mp-page-btn:hover {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}
.mp-page-active {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
    pointer-events: none;
}
.mp-page-disabled {
    opacity: .35;
    pointer-events: none;
    cursor: default;
}
.mp-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 36px;
    font-size: 14px;
    color: var(--muted);
    letter-spacing: .15em;
}
@media (max-width: 600px) {
    .mp-page-btn { min-width: 32px; height: 32px; font-size: 12px; padding: 0 7px; }
    .mp-pagination { padding: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   FORUM
   ═══════════════════════════════════════════════════════════ */

.forum-header {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    margin-bottom: 16px;
}
.forum-stats-bar {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 12px;
    padding: 8px 14px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.forum-stats-bar span::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    margin-right: 6px;
    vertical-align: middle;
    opacity: .5;
}

.forum-categories-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.forum-cat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text);
    transition: border-color .2s, background .2s;
}
.forum-cat-card:hover {
    border-color: var(--gold-dim);
    background: var(--bg3);
}
.forum-cat-icon {
    font-size: 28px;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg3);
    border-radius: 10px;
    border: 1px solid var(--border2);
}
.forum-cat-info {
    flex: 1;
    min-width: 0;
}
.forum-cat-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--gold);
    letter-spacing: .02em;
}
.forum-cat-desc {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.forum-cat-meta {
    display: flex;
    gap: 12px;
    font-size: 10px;
    color: var(--muted);
    margin-top: 4px;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.forum-cat-latest {
    flex-shrink: 0;
    text-align: right;
    max-width: 180px;
}
@media (max-width: 600px) {
    .forum-cat-latest { display: none; }
    .forum-cat-card { padding: 10px 14px; gap: 10px; }
    .forum-cat-icon { width: 36px; height: 36px; font-size: 22px; }
}
.forum-cat-label {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--muted);
    white-space: nowrap;
}

.forum-thread-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.forum-thread-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    transition: border-color .2s, background .2s;
}
.forum-thread-row:hover {
    border-color: var(--gold-dim);
    background: var(--bg3);
}
.forum-thread-row.pinned {
    border-left: 3px solid var(--gold);
}
.forum-thread-row.announcement {
    background: rgba(155,109,255,.04);
    border-color: rgba(155,109,255,.2);
}
.forum-thread-avatar {
    flex-shrink: 0;
}
.forum-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--bg3);
    border: 1px solid var(--border2);
}
.forum-thread-info {
    flex: 1;
    min-width: 0;
}
.forum-thread-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.forum-thread-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px;
    flex-wrap: wrap;
}
.forum-thread-stats {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: 11px;
    color: var(--muted);
}
@media (max-width: 600px) {
    .forum-thread-row { padding: 10px 12px; gap: 8px; }
    .forum-thread-avatar { display: none; }
    .forum-thread-title { font-size: 13px; }
}

.forum-tag {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.forum-tag-pin { color: var(--gold); }
.forum-tag-lock { opacity: .6; }
.forum-tag-announce {
    background: rgba(155,109,255,.12);
    color: var(--gold);
    border: 1px solid rgba(155,109,255,.2);
}

.forum-thread-header {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 16px;
}
.forum-mod-actions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.forum-posts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.forum-post {
    display: flex;
    gap: 16px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    scroll-margin-top: 80px;
}
.forum-post.forum-post-op {
    border-color: rgba(155,109,255,.15);
}
.forum-post:target {
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(155,109,255,.1);
}
.forum-post-sidebar {
    flex-shrink: 0;
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.forum-post-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: var(--bg3);
    border: 2px solid var(--border2);
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
}
.forum-post-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.forum-post-username {
    font-weight: 700;
    font-size: 12px;
    color: var(--gold);
    text-decoration: none;
    word-break: break-all;
}
.forum-post-username:hover {
    text-decoration: underline;
}
.forum-op-badge {
    font-size: 8px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--gold);
    color: var(--bg);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.forum-post-content {
    flex: 1;
    min-width: 0;
}
.forum-post-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}
.forum-post-body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.forum-post-body code {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 12px;
    font-family: var(--mono);
}
.forum-quote {
    border-left: 3px solid var(--gold-dim);
    padding: 6px 12px;
    margin: 8px 0;
    background: var(--bg3);
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    color: var(--text2);
    font-style: italic;
}
.forum-post-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.forum-reactions-bar {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.forum-react-btn {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2px 8px;
    font-size: 13px;
    cursor: pointer;
    color: var(--muted);
    transition: border-color .2s, background .2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.forum-react-btn:hover {
    border-color: var(--gold-dim);
    background: var(--bg4);
}
.forum-react-btn.active {
    border-color: var(--gold);
    background: rgba(155,109,255,.1);
}
.forum-react-btn.has-count {
    padding: 2px 10px 2px 8px;
}
.forum-react-btn span {
    font-size: 11px;
    font-weight: 700;
    color: var(--text2);
}
.forum-post-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.forum-action-btn {
    background: none;
    border: none;
    font-size: 11px;
    color: var(--muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color .2s;
}
.forum-action-btn:hover {
    color: var(--gold);
}
.forum-edit-details {
    display: inline;
}
.forum-edit-form {
    margin-top: 8px;
}
.forum-reply-box {
    margin-top: 20px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
}
.forum-formatting-help {
    display: flex;
    gap: 10px;
    font-size: 10px;
    color: var(--muted);
    margin-bottom: 6px;
    font-family: var(--mono);
    letter-spacing: .02em;
}
.forum-formatting-help span {
    background: var(--bg3);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
}
@media (max-width: 600px) {
    .forum-post { flex-direction: column; gap: 10px; padding: 12px; }
    .forum-post-sidebar {
        width: auto;
        flex-direction: row;
        gap: 8px;
        align-items: center;
    }
    .forum-post-avatar { width: 36px; height: 36px; font-size: 16px; }
    .forum-post-sidebar > div { display: none; }
    .forum-reply-box { padding: 14px; }
    .forum-formatting-help { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE OVERRIDES
   ═══════════════════════════════════════════════════════════ */

html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

@media (max-width: 767px) {
    .main-wrap {
        padding: 10px 8px 14px;
        gap: 12px;
    }

    .card {
        padding: 14px 12px;
        margin-bottom: 12px;
    }
    .card h2 {
        font-size: 9px;
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

    .welcome-card {
        padding: 18px 14px;
        margin-bottom: 12px;
    }
    .welcome-card .wc-name {
        font-size: 16px;
    }
    .welcome-card .wc-balance {
        font-size: 20px;
    }

    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .stat-card {
        padding: 10px 8px;
    }
    .stat-card .sv {
        font-size: 16px;
    }
    .stat-card .sl {
        font-size: 9px;
    }

    .topnav {
        padding: 0 8px;
        gap: 6px;
        height: 48px;
        max-width: none;   /* on small viewports the bar fills edge-to-edge */
        margin: 0;
    }
    .topnav-brand a {
        font-size: 9px;
        letter-spacing: .2em;
    }
    .topnav-actions {
        gap: 4px;
    }
    .topnav-balance {
        font-size: 10px;
        padding: 4px 8px;
    }
    .icon-btn {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
    .icon-btn .notif {
        width: 12px;
        height: 12px;
        font-size: 8px;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .product-card .pc-body {
        padding: 8px;
        gap: 3px;
    }
    .product-card .pc-title {
        font-size: 11px;
    }
    .product-card .pc-price {
        font-size: 12px;
    }
    .product-card .pc-seller {
        font-size: 10px;
    }
    .product-card .pc-btn {
        font-size: 10px;
        padding: 6px;
        min-height: 30px;
    }
    .product-grid.list-view .product-card img,
    .product-grid.list-view .product-card .no-img {
        width: 80px;
        min-width: 80px;
        max-width: 80px;
        height: 80px;
    }

    .profile-header {
        flex-direction: column;
        text-align: center;
        padding: 16px 12px;
        gap: 10px;
    }
    .profile-avatar {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }
    .profile-avatar img {
        width: 56px;
        height: 56px;
    }
    .profile-info .username {
        font-size: 16px;
    }

    .search-bar {
        flex-direction: column;
        gap: 6px;
    }
    .search-bar input {
        width: 100%;
        padding: 10px 14px;
        font-size: 13px;
    }
    .search-bar button {
        width: 100%;
        min-height: 40px;
    }

    .mp-hero {
        padding: 16px 12px 14px;
    }

    .mp-cats {
        gap: 4px;
    }
    .mp-cat {
        padding: 4px 8px;
        font-size: 11px;
    }

    .admin-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .admin-stat {
        padding: 10px 8px;
    }
    .admin-stat .stat-val {
        font-size: 16px;
    }

    .chat-thread-item {
        padding: 10px 12px;
        gap: 8px;
    }
    .chat-thread-item .ct-name {
        font-size: 13px;
    }

    .form-group input[type=text],
    .form-group input[type=password],
    .form-group input[type=email],
    .form-group input[type=number],
    .form-group select,
    .form-group textarea {
        padding: 10px 12px;
        font-size: 13px;
    }

    .btn {
        padding: 10px 16px;
        font-size: 9px;
        min-height: 38px;
    }
    .btn-lg {
        padding: 12px 24px;
        font-size: 10px;
    }

    .order-timeline {
        gap: 0;
        margin: 12px 0;
    }
    .ot-step {
        min-width: 48px;
    }
    .ot-circle, .ot-dot {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
    .ot-label {
        font-size: 8px;
    }

    .bottom-nav {
        height: 52px;
    }
    .bottom-nav a {
        font-size: 9px;
        gap: 2px;
    }
    .bottom-nav a .bn-icon {
        font-size: 16px;
    }
    body {
        padding-bottom: 52px;
    }

    .drawer {
        width: 260px;
    }

    .splash-card {
        padding: 28px 18px;
    }
    .splash-brand-name {
        font-size: 11px;
        letter-spacing: .25em;
    }
    .splash-outer {
        gap: 20px;
    }

    .data-table {
        font-size: 12px;
    }
    .data-table th {
        padding: 8px 10px;
        font-size: 9px;
    }
    .data-table td {
        padding: 8px 10px;
    }

    .announcement-bar {
        padding: 6px 12px;
        font-size: 9px;
    }

    .category-pills {
        gap: 5px;
    }
    .category-pill {
        padding: 5px 12px;
        font-size: 11px;
    }

    .site-footer {
        padding: 14px 12px;
        font-size: 11px;
    }

    .sellers-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 380px) {
    .product-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .stats-row {
        grid-template-columns: 1fr;
    }
    .topnav-brand a {
        font-size: 8px;
        letter-spacing: .15em;
    }
    .topnav-balance {
        font-size: 9px;
        padding: 3px 6px;
    }
    .splash-brand-name {
        font-size: 10px;
        letter-spacing: .18em;
    }
}

/* ═══════════════════════════════════════════════════════════
   TASK 10: Onboarding Walkthrough (CSS-only, 5 steps)
   ═══════════════════════════════════════════════════════════ */
.onboard-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.82);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.onboard-card {
    background: var(--bg); border: 2px solid var(--gold);
    border-radius: var(--radius-lg); width: 100%; max-width: 440px;
    box-shadow: 0 0 40px rgba(212,175,55,.2);
    overflow: hidden;
}
.onboard-header {
    background: linear-gradient(135deg, rgba(212,175,55,.12), rgba(108,143,255,.08));
    border-bottom: 1px solid var(--border);
    padding: 18px 20px 14px;
    text-align: center;
}
.onboard-header h3 { margin: 0 0 4px; font-size: 18px; color: var(--gold); }
.onboard-header p  { margin: 0; font-size: 12px; color: var(--muted); }

.onboard-radio { display: none; }

.onboard-steps { position: relative; min-height: 220px; }
.onboard-step {
    position: absolute; inset: 0;
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
    padding: 20px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.onboard-step .ob-icon { font-size: 36px; text-align: center; margin-bottom: 10px; }
.onboard-step .ob-title { font-size: 15px; font-weight: 700; text-align: center; margin-bottom: 6px; }
.onboard-step .ob-desc  { font-size: 13px; color: var(--muted); text-align: center; line-height: 1.6; }

#ob-s1:checked ~ .onboard-steps .onboard-step:nth-child(1),
#ob-s2:checked ~ .onboard-steps .onboard-step:nth-child(2),
#ob-s3:checked ~ .onboard-steps .onboard-step:nth-child(3),
#ob-s4:checked ~ .onboard-steps .onboard-step:nth-child(4),
#ob-s5:checked ~ .onboard-steps .onboard-step:nth-child(5) {
    opacity: 1; pointer-events: auto;
}

.onboard-dots {
    display: flex; justify-content: center; gap: 8px;
    padding: 12px 20px;
}
.onboard-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--border2); transition: all .25s; cursor: pointer;
}
#ob-s1:checked ~ .onboard-footer .onboard-dot:nth-child(1),
#ob-s2:checked ~ .onboard-footer .onboard-dot:nth-child(2),
#ob-s3:checked ~ .onboard-footer .onboard-dot:nth-child(3),
#ob-s4:checked ~ .onboard-footer .onboard-dot:nth-child(4),
#ob-s5:checked ~ .onboard-footer .onboard-dot:nth-child(5) {
    background: var(--gold); transform: scale(1.3);
}

.onboard-nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px 16px; gap: 8px;
}
.onboard-nav label {
    padding: 8px 20px; border-radius: 8px; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all .2s;
}
.onboard-nav .ob-prev {
    background: var(--bg3); color: var(--muted); border: 1px solid var(--border);
}
.onboard-nav .ob-next {
    background: linear-gradient(135deg, #c09030, #e8b848); color: #080705;
    border: none; font-weight: 700;
}

.onboard-prev-wrap, .onboard-next-wrap { display: none; }
#ob-s1:checked ~ .onboard-footer .ob-nav-2 .onboard-prev-wrap,
#ob-s2:checked ~ .onboard-footer .ob-nav-3 .onboard-prev-wrap,
#ob-s3:checked ~ .onboard-footer .ob-nav-4 .onboard-prev-wrap,
#ob-s4:checked ~ .onboard-footer .ob-nav-5 .onboard-prev-wrap { display: none; }

#ob-s2:checked ~ .onboard-footer .ob-nav-2 .onboard-prev-wrap,
#ob-s3:checked ~ .onboard-footer .ob-nav-3 .onboard-prev-wrap,
#ob-s4:checked ~ .onboard-footer .ob-nav-4 .onboard-prev-wrap,
#ob-s5:checked ~ .onboard-footer .ob-nav-5 .onboard-prev-wrap { display: block; }

#ob-s1:checked ~ .onboard-footer .ob-nav-1 .onboard-next-wrap,
#ob-s2:checked ~ .onboard-footer .ob-nav-2 .onboard-next-wrap,
#ob-s3:checked ~ .onboard-footer .ob-nav-3 .onboard-next-wrap,
#ob-s4:checked ~ .onboard-footer .ob-nav-4 .onboard-next-wrap { display: block; }

#ob-s1:checked ~ .onboard-footer .ob-nav-1,
#ob-s2:checked ~ .onboard-footer .ob-nav-2,
#ob-s3:checked ~ .onboard-footer .ob-nav-3,
#ob-s4:checked ~ .onboard-footer .ob-nav-4,
#ob-s5:checked ~ .onboard-footer .ob-nav-5 { display: flex; }
.ob-nav-1,.ob-nav-2,.ob-nav-3,.ob-nav-4,.ob-nav-5 { display: none; }

.onboard-dismiss {
    display: none; text-align: center; padding: 0 20px 16px;
}
#ob-s5:checked ~ .onboard-footer .onboard-dismiss { display: block; }

/* ═══════════════════════════════════════════════════════════
   Account Completion Progress Bar
   ═══════════════════════════════════════════════════════════ */
.acct-progress {
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 10px;
}
.acct-progress-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
}
.acct-progress-header span:first-child {
    font-size: 13px; font-weight: 700; color: var(--text);
}
.acct-progress-header span:last-child {
    font-size: 12px; font-weight: 800; color: var(--gold);
    font-family: var(--mono);
}
.acct-bar {
    height: 6px; background: var(--bg4); border-radius: 99px;
    overflow: hidden; margin-bottom: 10px;
}
.acct-bar-fill {
    height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, #c09030, #e8b848);
    transition: width .4s ease;
}
.acct-checklist {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
}
.acct-check-item {
    font-size: 11px; display: flex; align-items: center; gap: 6px;
    color: var(--muted); padding: 3px 0;
}
.acct-check-item.done { color: var(--accent2); }
.acct-check-item .aci-icon { font-size: 12px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   Mobile sticky action bar (product page purchase)
   ═══════════════════════════════════════════════════════════ */
.mobile-sticky-bar {
    display: none;
}
@media (max-width: 767px) {
    .mobile-sticky-bar {
        display: flex; position: fixed; bottom: 0; left: 0; right: 0;
        z-index: 900;
        background: linear-gradient(180deg, rgba(8,7,5,.95), var(--bg));
        border-top: 1px solid var(--gold);
        padding: 10px 16px; gap: 12px; align-items: center;
        box-shadow: 0 -8px 32px rgba(0,0,0,.6);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .mobile-sticky-bar .msb-price {
        font-size: 17px; font-weight: 800; color: var(--accent2);
        white-space: nowrap;
        text-shadow: 0 0 12px rgba(74,222,128,.15);
    }
    .mobile-sticky-bar .msb-btn {
        flex: 1;
        background: linear-gradient(135deg, #c09030, #e8b848);
        color: #080705; font-weight: 700; font-size: 14px;
        border: none; border-radius: 10px; padding: 13px 18px;
        text-align: center; cursor: pointer; text-decoration: none;
        box-shadow: 0 2px 12px rgba(155,109,255,.3);
        letter-spacing: .02em;
    }
    .mobile-sticky-bar .msb-btn:active {
        transform: scale(.97);
    }
    .mobile-sticky-bar ~ * { padding-bottom: 0; }
    body:has(.mobile-sticky-bar) { padding-bottom: 72px; }
}

.qty-touch {
    display: inline-flex; align-items: center; gap: 0;
    border: 1.5px solid var(--border2); border-radius: 10px;
    overflow: hidden; background: var(--bg3);
}
.qty-touch .qty-btn {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg2); border: none; color: var(--text);
    font-size: 20px; font-weight: 700; cursor: pointer;
    transition: background .15s, color .15s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.qty-touch .qty-btn:hover { background: rgba(155,109,255,.1); color: var(--gold); }
.qty-touch .qty-btn:active { background: rgba(155,109,255,.2); transform: scale(.95); }
.qty-touch .qty-input {
    width: 56px; text-align: center; border: none; background: transparent;
    color: var(--text); font-size: 16px; font-weight: 700;
    font-family: var(--mono); padding: 10px 0;
    -moz-appearance: textfield;
}
.qty-touch .qty-input::-webkit-outer-spin-button,
.qty-touch .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.purchase-form .btn-success.btn-lg {
    min-height: 50px;
    font-size: 15px;
    border-radius: 10px;
    letter-spacing: .02em;
}

/* ═══════════════════════════════════════════════════════════
   Address Book Page
   ═══════════════════════════════════════════════════════════ */
.addr-card {
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: 10px; padding: 14px 16px;
    display: flex; flex-direction: column; gap: 8px;
}
.addr-card.is-default { border-color: var(--gold); }
.addr-card .addr-label {
    font-weight: 700; font-size: 14px; display: flex;
    align-items: center; gap: 8px;
}
.addr-card .addr-text {
    font-size: 13px; color: var(--muted); white-space: pre-line;
    line-height: 1.5;
}
.addr-card .addr-actions {
    display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════
   Enhanced Order Timeline
   ═══════════════════════════════════════════════════════════ */
@keyframes ot-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(232,184,75,.4); }
    50%     { box-shadow: 0 0 0 10px rgba(232,184,75,0); }
}
@keyframes ot-glow {
    0%,100% { opacity: .6; }
    50%     { opacity: 1; }
}
.ot-step.active .ot-dot,
.ot-step.active .ot-circle {
    animation: ot-pulse 2s ease-in-out infinite;
}
.ot-step.active .ot-label {
    animation: ot-glow 2s ease-in-out infinite;
}
.ot-step.done .ot-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid rgba(232,184,75,.2);
}
.ot-dot, .ot-circle { position: relative; }
.ot-line {
    position: relative;
}
.ot-line.done::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(232,184,75,.3), rgba(232,184,75,.08));
    filter: blur(4px);
    border-radius: 2px;
}

@media (max-width: 480px) {
    .order-timeline {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 0;
        margin: 12px 0;
        overflow: visible;
    }
    .ot-step {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        min-width: 0;
        width: 100%;
        padding: 6px 0;
    }
    .ot-dot, .ot-circle {
        width: 32px; height: 32px;
        font-size: 13px;
        flex-shrink: 0;
    }
    .ot-label {
        text-align: left;
        font-size: 12px;
        flex: 1;
    }
    .ot-time {
        font-size: 11px;
        text-align: right;
        white-space: nowrap;
        margin-left: auto;
    }
    .ot-line {
        width: 2px;
        height: 16px;
        min-width: 2px;
        margin-left: 15px;
        margin-bottom: 0;
    }
}

/* ═══════════════════════════════════════════════════════════
   Marketplace Filter Panel
   ═══════════════════════════════════════════════════════════ */
.mp-filter-panel {
    border-top: 1px solid var(--border);
    padding-top: 0;
}
.mp-filter-toggle {
    cursor: pointer;
    padding: 10px 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text2);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}
.mp-filter-toggle::-webkit-details-marker { display: none; }
.mp-filter-toggle::after {
    content: '▸';
    font-size: 12px;
    color: var(--muted);
    transition: transform .2s;
}
.mp-filter-panel[open] > .mp-filter-toggle::after {
    transform: rotate(90deg);
}
.mp-filter-label {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}
.mp-filter-select {
    width: 100%;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
}
.mp-filter-price {
    width: 80px;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 13px;
}
.mp-active-filters {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.mp-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(155,109,255,.1);
    border: 1px solid rgba(155,109,255,.2);
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.mp-filter-chip:hover {
    background: rgba(200,56,56,.12);
    border-color: rgba(200,56,56,.3);
    color: var(--danger);
}

.mp-tier-radios {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.mp-tier-radio {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 5px 10px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text2);
    transition: background .15s, border-color .15s, color .15s;
}
.mp-tier-radio input[type="radio"] {
    display: none;
}
.mp-tier-radio:hover {
    border-color: var(--gold-dim);
    color: var(--text);
}
.mp-tier-radio.checked,
.mp-tier-radio:has(input:checked) {
    background: rgba(155,109,255,.15);
    border-color: var(--gold);
    color: var(--gold);
    font-weight: 600;
}

@media (max-width: 600px) {
    .mp-filter-price { width: 70px; padding: 6px; font-size: 12px; }
    .mp-filter-select { font-size: 12px; padding: 6px 8px; }
    .mp-tier-radio { padding: 4px 8px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   Welcome / Getting Started Guide Cards
   ═══════════════════════════════════════════════════════════ */
.welcome-guide-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    transition: border-color .2s, box-shadow .2s;
    position: relative;
}
.welcome-guide-card:hover {
    border-color: rgba(155,109,255,.25);
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.wgc-num {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #c09030, #e8b848);
    color: #080705;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.wgc-icon {
    font-size: 28px;
    flex-shrink: 0;
    width: 40px;
    text-align: center;
    line-height: 1;
    padding-top: 2px;
}
.wgc-body { flex: 1; min-width: 0; }
.wgc-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 4px;
}
.wgc-desc {
    font-size: 13px;
    color: var(--text2);
    line-height: 1.55;
}

@media (max-width: 480px) {
    .welcome-guide-card { padding: 12px; gap: 10px; }
    .wgc-icon { font-size: 22px; width: 30px; }
    .wgc-title { font-size: 14px; }
    .wgc-desc { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   Mobile Order Flow Improvements
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .order-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .purchase-form .form-group label {
        font-size: 13px;
    }
    .purchase-form textarea {
        font-size: 14px;
        min-height: 80px;
    }
    .purchase-form .btn-lg {
        padding: 14px 20px;
        font-size: 14px;
        min-height: 48px;
    }

    .checkout-confirm-card {
        padding: 14px !important;
        border-radius: 10px !important;
    }
    .checkout-confirm-card .btn {
        min-height: 44px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .purchase-form .form-group {
        margin-bottom: 14px;
    }
    .purchase-form select,
    .purchase-form input[type="text"],
    .purchase-form input[type="number"] {
        font-size: 14px;
        padding: 10px 12px;
        min-height: 44px;
    }

    .qty-touch .qty-btn {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }
    .qty-touch .qty-input {
        width: 60px;
        font-size: 18px;
    }

    .checkout-confirm-card {
        padding: 12px !important;
    }
}

@media (max-width: 375px) {
    .card { padding: 10px !important; }

    .status-badge {
        font-size: 10px;
        padding: 3px 8px;
    }

    .welcome-guide-card { padding: 10px; gap: 8px; }
    .wgc-icon { font-size: 20px; width: 26px; }
    .wgc-title { font-size: 13px; }
    .wgc-desc { font-size: 11px; }
    .wgc-num { width: 20px; height: 20px; font-size: 9px; top: -6px; left: -6px; }

    .purchase-form .btn-lg {
        padding: 14px 16px;
        font-size: 14px;
        min-height: 48px;
    }
}

/* ─── Shopping Cart ─────────────────────────────────────── */
.cart-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.cart-count{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;font-size:11px;font-weight:700;min-width:22px;height:22px;border-radius:11px;padding:0 6px;}
.cart-seller-group{margin-bottom:14px;padding:0;overflow:hidden;}
.cart-seller-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;background:var(--bg3);border-bottom:1px solid var(--border);}
.cart-item{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);align-items:flex-start;}
.cart-item:last-of-type{border-bottom:none;}
.cart-item-unavailable{opacity:.45;position:relative;}
.cart-item-check{display:flex;align-items:flex-start;flex-shrink:0;padding-top:12px;}
.cart-item-img{flex-shrink:0;width:72px;height:72px;border-radius:10px;overflow:hidden;background:var(--bg3);display:block;}
.cart-item-img img{width:100%;height:100%;object-fit:cover;}
.cart-item-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:28px;opacity:.4;}
.cart-item-details{flex:1;min-width:0;}
.cart-item-title{font-weight:700;font-size:14px;color:var(--text);text-decoration:none;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cart-item-title:hover{color:var(--accent);}
.cart-item-variant{font-size:12px;color:var(--muted);margin-top:2px;}
.cart-item-price-mobile{display:none;}
.cart-item-warn{font-size:11px;margin-top:4px;font-weight:600;color:var(--warn);}
.cart-item-error{color:var(--danger);}
.cart-item-actions{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap;}
.cart-qty{display:inline-flex;align-items:center;gap:0;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--bg3);}
.cart-qty-btn{background:transparent;border:none;color:var(--text);width:32px;height:32px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.cart-qty-btn:hover:not(:disabled){background:var(--accent);color:#fff;}
.cart-qty-btn:disabled{opacity:.3;cursor:not-allowed;}
.cart-qty-val{min-width:28px;text-align:center;font-weight:700;font-size:14px;padding:0 2px;}
.cart-remove-btn{background:none;border:none;color:var(--danger);font-size:12px;cursor:pointer;padding:4px 8px;border-radius:6px;font-weight:600;opacity:.7;transition:opacity .15s;}
.cart-remove-btn:hover{opacity:1;background:rgba(239,68,68,.1);}
.cart-item-total{text-align:right;flex-shrink:0;min-width:90px;padding-top:10px;}
.cart-item-line-total{font-weight:800;color:var(--accent2);font-size:15px;}
.cart-item-unit{font-size:11px;color:var(--muted);margin-top:2px;}
.cart-item-addr{padding:6px 16px 12px 16px;border-bottom:1px solid var(--border);}
.cart-global-addr{margin-bottom:14px;padding:16px;}
.cart-summary{position:sticky;bottom:0;z-index:10;margin-top:8px;}
.cart-summary-inner{background:var(--bg2);border:2px solid var(--accent2);border-radius:var(--radius);padding:18px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;box-shadow:0 -4px 20px rgba(0,0,0,.3);}
.cart-summary-rows{flex:1;min-width:200px;}
.cart-summary-row{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;color:var(--muted);}
.cart-summary-total{font-size:18px;font-weight:800;color:var(--text);padding:8px 0 4px;border-top:1px solid var(--border);margin-top:4px;}
.cart-checkout-btn{min-width:200px;font-size:16px;font-weight:800;padding:14px 28px;letter-spacing:.02em;border-radius:10px;}

@media(max-width:600px){
    .cart-item{flex-wrap:wrap;gap:10px;padding:12px;}
    .cart-item-img{width:56px;height:56px;border-radius:8px;}
    .cart-item-total{display:none;}
    .cart-item-price-mobile{display:block;font-size:13px;font-weight:700;color:var(--accent2);margin-top:3px;}
    .cart-seller-header{padding:10px 12px;flex-wrap:wrap;}
    .cart-summary-inner{flex-direction:column;padding:14px;}
    .cart-checkout-btn{width:100%;min-width:unset;}
    .cart-item-addr{padding:6px 12px 10px;}
    .cart-global-addr{padding:12px;}
    .cart-item-check{padding-top:8px;}
}

/* ─── Badge Icons — Premium Badge System ────────────────── */
@keyframes bi-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes bi-shimmer{0%{background-position:200% center}100%{background-position:-200% center}}
@keyframes bi-glow{0%,100%{filter:drop-shadow(0 0 3px var(--bi-glow,transparent))}50%{filter:drop-shadow(0 0 10px var(--bi-glow,transparent))}}
@keyframes bi-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes bi-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes bi-flicker{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes bi-breathe{0%,100%{box-shadow:0 0 4px var(--bi-glow,transparent)}50%{box-shadow:0 0 16px var(--bi-glow,transparent),0 0 30px var(--bi-glow2,transparent)}}
@keyframes bi-rgb{0%{filter:drop-shadow(0 0 6px #ff0000) hue-rotate(0deg)}33%{filter:drop-shadow(0 0 8px #00ff00) hue-rotate(120deg)}66%{filter:drop-shadow(0 0 8px #0000ff) hue-rotate(240deg)}100%{filter:drop-shadow(0 0 6px #ff0000) hue-rotate(360deg)}}
@keyframes bi-spin-inner{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes bi-ring-pulse{0%,100%{box-shadow:inset 0 0 3px var(--bi-glow,transparent)}50%{box-shadow:inset 0 0 8px var(--bi-glow,transparent),inset 0 0 14px var(--bi-glow2,transparent)}}

.bi{display:inline-flex;align-items:center;justify-content:center;font-weight:900;line-height:1;flex-shrink:0;vertical-align:middle;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s;}
.bi:hover{transform:scale(1.18);z-index:2;}
.bi-sm{width:22px;height:22px;font-size:0;border-radius:5px;}
.bi-md{width:30px;height:30px;font-size:0;border-radius:6px;}
.bi-lg{width:40px;height:40px;font-size:0;border-radius:8px;}
.bi-xl{width:52px;height:52px;font-size:0;border-radius:10px;}
.bi-circle{border-radius:50%!important;}
.bi-hex{clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);}
.bi-shield{clip-path:polygon(50% 0%,100% 10%,100% 60%,50% 100%,0% 60%,0% 10%);}
.bi-diamond{clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);}

.bi-phantom{background:linear-gradient(180deg,#e2e8f0,#94a3b8,#64748b,#94a3b8,#e2e8f0);--bi-glow:#cbd5e1;animation:bi-flicker 2s ease-in-out infinite,bi-float 3s ease-in-out infinite;}
.bi-venom{background:linear-gradient(160deg,#022c22,#065f46,#10b981,#34d399,#10b981,#065f46);--bi-glow:#10b981;animation:bi-pulse 2s ease-in-out infinite,bi-glow 2.5s ease-in-out infinite;}
.bi-ironcross{background:linear-gradient(145deg,#374151,#6b7280,#9ca3af,#6b7280,#374151);--bi-glow:#9ca3af;border:1px solid #6b728066;animation:bi-float 4s ease-in-out infinite,bi-breathe 3s ease-in-out infinite;}
.bi-hellfire{background:linear-gradient(180deg,#450a0a,#dc2626,#ef4444,#f97316,#fbbf24);--bi-glow:#ef4444;--bi-glow2:#f97316;animation:bi-flicker 1s ease-in-out infinite,bi-breathe 2s ease-in-out infinite;}
.bi-frostfang{background:linear-gradient(135deg,#082f49,#0ea5e9,#7dd3fc,#bae6fd,#7dd3fc,#0ea5e9,#082f49);--bi-glow:#0ea5e9;--bi-glow2:#7dd3fc;background-size:200% 100%;animation:bi-shimmer 4s linear infinite,bi-float 3s ease-in-out infinite;}
.bi-hexmark{background:linear-gradient(135deg,#0a000a,#1e1b4b,#4338ca,#6366f1,#4338ca,#1e1b4b);--bi-glow:#6366f1;--bi-glow2:#4338ca;animation:bi-pulse 2.5s ease-in-out infinite,bi-breathe 3s ease-in-out infinite;}
.bi-bloodmoon{background:radial-gradient(circle at 60% 40%,#fecaca 5%,#dc2626 25%,#7f1d1d 50%,#1a0000 80%);--bi-glow:#dc2626;--bi-glow2:#7f1d1d;animation:bi-glow 2s ease-in-out infinite,bi-breathe 4s ease-in-out infinite;}
.bi-dragonscale{background:linear-gradient(135deg,#7f1d1d,#dc2626,#f97316,#fbbf24,#f97316,#dc2626,#7f1d1d);--bi-glow:#f97316;--bi-glow2:#dc2626;background-size:200% 100%;animation:bi-shimmer 3s linear infinite,bi-glow 2.5s ease-in-out infinite;}
.bi-voideye{background:radial-gradient(circle at 50% 50%,#000 15%,#1e1b4b 35%,#4c1d95 50%,#7c3aed 65%,#4c1d95 80%,#1e1b4b);--bi-glow:#7c3aed;--bi-glow2:#4c1d95;animation:bi-pulse 3s ease-in-out infinite,bi-breathe 2s ease-in-out infinite;}
.bi-maelstrom{background:conic-gradient(from 0deg,#ff0000,#ff8800,#ffff00,#00ff00,#0088ff,#8800ff,#ff00ff,#ff0000);--bi-glow:#fff;--bi-glow2:#ff000044;animation:bi-rgb 4s linear infinite,bi-float 3s ease-in-out infinite;}
.bi-omega{background:linear-gradient(135deg,#0a0a0a,#1a0000,#6b0000,#dc2626,#ff4444,#dc2626,#6b0000,#1a0000);--bi-glow:#dc2626;--bi-glow2:#ff4444;background-size:200% 100%;animation:bi-shimmer 3s linear infinite,bi-breathe 2s ease-in-out infinite;}
.bi-eternal{background:linear-gradient(135deg,#0a0a0a,#78350f,#9b6dff,#fef3c7,#fff,#fef3c7,#9b6dff,#78350f,#0a0a0a);--bi-glow:#9b6dff;--bi-glow2:#fef3c7;background-size:200% 100%;animation:bi-shimmer 2.5s linear infinite,bi-pulse 3s ease-in-out infinite,bi-breathe 2s ease-in-out infinite;}
.bi-sovereign{background:linear-gradient(135deg,#1a0500,#7c2d12,#dc2626,#f97316,#fbbf24,#f97316,#dc2626,#7c2d12);--bi-glow:#fbbf24;--bi-glow2:#dc2626;background-size:200% 100%;animation:bi-shimmer 2s linear infinite,bi-glow 2s ease-in-out infinite,bi-float 3s ease-in-out infinite;}
.bi-singularity{background:radial-gradient(circle at 50% 50%,#fff 3%,#9b6dff 10%,#7c3aed 25%,#1e1b4b 45%,#000 70%);--bi-glow:#9b6dff;--bi-glow2:#7c3aed;animation:bi-pulse 2s ease-in-out infinite,bi-breathe 1.5s ease-in-out infinite,bi-float 4s ease-in-out infinite;}
.bi-godslayer{background:linear-gradient(135deg,#1a0800,#7c2d12,#dc2626,#f97316,#fbbf24,#fff,#fbbf24,#f97316,#dc2626,#7c2d12,#1a0800);--bi-glow:#fbbf24;--bi-glow2:#dc2626;border:2px solid #fbbf24aa;background-size:300% 100%;animation:bi-shimmer 2s linear infinite,bi-breathe 1.5s ease-in-out infinite,bi-pulse 2.5s ease-in-out infinite;}

/* ════════════════════════════════════════════════════════════════════════
   PHASE 3 — OLED PACK (#17, $100 unlock)
   6 pure-black premium themes built for OLED displays. Gated server-side
   via users.unlocked_oled_themes; CSS here applies once the user's html
   element carries one of the data-theme keys below.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Carbon — industrial pure-black with electric blue (engineering luxe) ── */
[data-theme="carbon"] {
    --bg:#000; --bg2:#050507; --bg3:#0c0c10; --bg4:#14141a; --bg5:#1c1c24;
    --gold:#6ec1ff; --gold-dim:#4080c0; --gold-lg:#a0d8ff; --gold-glow:rgba(110,193,255,.18);
    --accent:#6ec1ff; --accent2:#c0d4e8;
    --warn:#f0a040; --danger:#ff5050; --info:#6ec1ff; --success:#40e0a0;
    --text:#e8eef5; --text2:#8090a0; --muted:#485060;
    --border:#1a1f28; --border2:#232a36;
    --shadow:0 16px 64px rgba(0,0,0,.95), 0 0 0 1px rgba(110,193,255,.05) inset;
    --shadow-sm:0 4px 18px rgba(0,0,0,.8);
    --bg-glow1:rgba(110,193,255,.05); --bg-glow2:rgba(192,212,232,.03);
    --card-bg:linear-gradient(180deg, var(--bg2), var(--bg3));
    --card-bw:1px;
    --radius:4px; --radius-sm:2px; --radius-lg:6px;
    --btn-radius:4px; --input-radius:2px;
    --btn-transform:uppercase; --btn-letter:.14em;
    --heading-weight:500; --body-weight:300;
}
[data-theme="carbon"] .card {
    background: linear-gradient(180deg, var(--bg2), var(--bg3));
    border: 1px solid rgba(110,193,255,.08);
    box-shadow: 0 8px 32px rgba(0,0,0,.7), 0 0 0 1px rgba(110,193,255,.04) inset;
}
[data-theme="carbon"] .btn-primary {
    background: linear-gradient(180deg, #1a3548, #0a1a26);
    border: 1px solid rgba(110,193,255,.4);
    color: #e8eef5;
    box-shadow: 0 0 18px rgba(110,193,255,.25), 0 1px 0 rgba(255,255,255,.06) inset;
}

/* ── Onyx — glossy true-black with electric mint (futuristic premium) ── */
[data-theme="onyx"] {
    --bg:#000; --bg2:#0c0c0e; --bg3:#14141a; --bg4:#1d1d26; --bg5:#252531;
    --gold:#00e5a0; --gold-dim:#008e60; --gold-lg:#80f0c8; --gold-glow:rgba(0,229,160,.22);
    --accent:#00e5a0; --accent2:#b8b8c8;
    --warn:#ffc855; --danger:#ff4d6d; --info:#7adfff; --success:#00e5a0;
    --text:#ddffee; --text2:#90a8a0; --muted:#506058;
    --border:#1f1f28; --border2:#2a2a36;
    --shadow:0 20px 80px rgba(0,0,0,.95), 0 0 0 1px rgba(0,229,160,.06) inset;
    --shadow-sm:0 6px 24px rgba(0,0,0,.85);
    --bg-glow1:rgba(0,229,160,.08); --bg-glow2:rgba(184,184,200,.04);
    --card-bg:linear-gradient(135deg, #0c0c0e, #14141a);
    --card-bw:1px;
    --radius:12px; --radius-sm:8px; --radius-lg:18px;
    --btn-radius:10px; --input-radius:8px;
    --btn-transform:none; --btn-letter:.04em;
    --heading-weight:600; --body-weight:400;
}
[data-theme="onyx"] .card {
    background: linear-gradient(135deg, #0c0c0e 0%, #14141a 100%);
    border: 1px solid rgba(0,229,160,.1);
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 48px rgba(0,0,0,.7), 0 0 0 1px rgba(0,229,160,.06) inset;
}
[data-theme="onyx"] .btn-primary {
    background: linear-gradient(135deg, #00e5a0, #00a070);
    color: #001810;
    border: none;
    box-shadow: 0 0 24px rgba(0,229,160,.4);
}

/* ── True Black — minimal with rich gold accents (OLED luxury) ── */
[data-theme="true-black"] {
    --bg:#000; --bg2:#050402; --bg3:#0c0a06; --bg4:#14110a; --bg5:#1a160d;
    --gold:#ffd166; --gold-dim:#a08040; --gold-lg:#ffe6a0; --gold-glow:rgba(255,209,102,.2);
    --accent:#ffd166; --accent2:#f0e8d0;
    --warn:#f0a040; --danger:#ff6655; --info:#a0c8d8; --success:#88d098;
    --text:#f8e8c0; --text2:#a09478; --muted:#605640;
    --border:#1a160a; --border2:#241e10;
    --shadow:0 24px 96px rgba(0,0,0,.95), 0 0 0 1px rgba(255,209,102,.04) inset;
    --shadow-sm:0 4px 18px rgba(0,0,0,.8);
    --bg-glow1:rgba(255,209,102,.04); --bg-glow2:rgba(240,232,208,.025);
    --card-bg:linear-gradient(180deg, #050402, #0a0805);
    --card-bw:1px;
    --radius:2px; --radius-sm:0; --radius-lg:3px;
    --btn-radius:2px; --input-radius:0;
    --btn-transform:uppercase; --btn-letter:.18em;
    --heading-weight:200; --body-weight:300;
}
[data-theme="true-black"] .card {
    background: linear-gradient(180deg, #050402, #0a0805);
    border: 1px solid rgba(255,209,102,.07);
    box-shadow: 0 12px 40px rgba(0,0,0,.7);
}
[data-theme="true-black"] .btn-primary {
    background: transparent;
    border: 1px solid rgba(255,209,102,.6);
    color: #ffd166;
    text-shadow: 0 0 8px rgba(255,209,102,.4);
}

/* ── Vantablack — deepest void with magenta + cyan dual-neon (sci-fi premium) ── */
[data-theme="vantablack"] {
    --bg:#000; --bg2:#050308; --bg3:#0a0612; --bg4:#10081a; --bg5:#180c24;
    --gold:#ff00aa; --gold-dim:#a00060; --gold-lg:#ff80d0; --gold-glow:rgba(255,0,170,.25);
    --accent:#ff00aa; --accent2:#00d4ff;
    --warn:#ffa040; --danger:#ff3060; --info:#00d4ff; --success:#00ff88;
    --text:#f0e8ff; --text2:#a090b0; --muted:#604870;
    --border:#1a0c20; --border2:#241230;
    --shadow:0 24px 96px rgba(0,0,0,.95), 0 0 32px rgba(255,0,170,.08) inset;
    --shadow-sm:0 8px 32px rgba(255,0,170,.15);
    --bg-glow1:rgba(255,0,170,.06); --bg-glow2:rgba(0,212,255,.05);
    --card-bg:linear-gradient(135deg, #050308, #0a0612);
    --card-bw:1px;
    --radius:8px; --radius-sm:4px; --radius-lg:12px;
    --btn-radius:6px; --input-radius:4px;
    --btn-transform:uppercase; --btn-letter:.12em;
    --heading-weight:700; --body-weight:400;
}
[data-theme="vantablack"] .card {
    background: linear-gradient(135deg, #050308 0%, #0a0612 100%);
    border: 1px solid rgba(255,0,170,.15);
    box-shadow: 0 12px 48px rgba(0,0,0,.7),
                0 0 24px rgba(255,0,170,.08) inset,
                0 0 24px rgba(0,212,255,.05) inset;
}
[data-theme="vantablack"] .btn-primary {
    background: linear-gradient(135deg, #ff00aa, #00d4ff);
    color: #000;
    border: none;
    box-shadow: 0 0 32px rgba(255,0,170,.5);
    font-weight: 700;
}

/* ── Stealth — tactical black with red-alert accents (operator-grade) ── */
[data-theme="stealth"] {
    --bg:#000; --bg2:#050505; --bg3:#0a0a0a; --bg4:#101010; --bg5:#161616;
    --gold:#ff3030; --gold-dim:#a01010; --gold-lg:#ff8080; --gold-glow:rgba(255,48,48,.2);
    --accent:#ff3030; --accent2:#404040;
    --warn:#ffaa30; --danger:#ff3030; --info:#909090; --success:#60d060;
    --text:#e0e0e0; --text2:#808080; --muted:#404040;
    --border:#181818; --border2:#222;
    --shadow:0 16px 64px rgba(0,0,0,.95);
    --shadow-sm:0 4px 16px rgba(0,0,0,.8);
    --bg-glow1:rgba(255,48,48,.04); --bg-glow2:rgba(64,64,64,.06);
    --card-bg:#0a0a0a;
    --card-bw:1px;
    --radius:0; --radius-sm:0; --radius-lg:0;
    --btn-radius:0; --input-radius:0;
    --btn-transform:uppercase; --btn-letter:.2em;
    --heading-weight:700; --body-weight:400;
    font-family: 'Courier New', monospace;
}
[data-theme="stealth"] body, [data-theme="stealth"] .card, [data-theme="stealth"] .btn {
    font-family: 'Courier New', 'Consolas', monospace;
}
[data-theme="stealth"] .card {
    background: #0a0a0a;
    border: 1px solid #1c1c1c;
    border-left: 2px solid rgba(255,48,48,.5);
    box-shadow: 0 8px 32px rgba(0,0,0,.8);
}
[data-theme="stealth"] .btn-primary {
    background: #1a0606;
    border: 1px solid rgba(255,48,48,.6);
    color: #ff3030;
    text-shadow: 0 0 6px rgba(255,48,48,.6);
}

/* ── Abyssal — deep-sea pure-black with bioluminescent cyan glow ── */
[data-theme="abyssal"] {
    --bg:#000; --bg2:#00060e; --bg3:#000c1a; --bg4:#001426; --bg5:#001c33;
    --gold:#00f0ff; --gold-dim:#0088a0; --gold-lg:#80faff; --gold-glow:rgba(0,240,255,.2);
    --accent:#00f0ff; --accent2:#4060ff;
    --warn:#40c0ff; --danger:#ff4080; --info:#00f0ff; --success:#00ffaa;
    --text:#d8f4ff; --text2:#608090; --muted:#304858;
    --border:#001c2c; --border2:#002438;
    --shadow:0 24px 96px rgba(0,0,0,.95), 0 0 64px rgba(0,240,255,.05) inset;
    --shadow-sm:0 6px 24px rgba(0,40,60,.85);
    --bg-glow1:rgba(0,240,255,.05); --bg-glow2:rgba(64,96,255,.03);
    --card-bg:linear-gradient(180deg, #00060e, #000c1a);
    --card-bw:1px;
    --radius:14px; --radius-sm:8px; --radius-lg:20px;
    --btn-radius:10px; --input-radius:8px;
    --btn-transform:none; --btn-letter:.03em;
    --heading-weight:500; --body-weight:300;
}
[data-theme="abyssal"] .card {
    background: linear-gradient(180deg, #00060e 0%, #000c1a 100%);
    border: 1px solid rgba(0,240,255,.08);
    backdrop-filter: blur(6px);
    box-shadow: 0 16px 64px rgba(0,0,0,.8), 0 0 32px rgba(0,240,255,.05) inset;
}
[data-theme="abyssal"] .btn-primary {
    background: linear-gradient(135deg, #00f0ff, #4060ff);
    color: #001824;
    border: none;
    box-shadow: 0 0 32px rgba(0,240,255,.4);
}

/* ════════════════════════════════════════════════════════════════════════
   THEME OVERLAYS — pure-CSS animated background layers (no JS, no images).
   Auto-applied to themes via [data-theme] selectors below. Disabled when
   prefers-reduced-motion is set.
   ════════════════════════════════════════════════════════════════════════ */
[data-theme="carbon"] body::before,
[data-theme="onyx"] body::before,
[data-theme="true-black"] body::before,
[data-theme="vantablack"] body::before,
[data-theme="stealth"] body::before,
[data-theme="abyssal"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    will-change: transform, opacity, background-position;
}
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none !important; }
}

/* Overlay 1: MIST — true-black soft drifting glow */
[data-theme="true-black"] body::before {
    background:
        radial-gradient(circle at 20% 30%, var(--bg-glow1), transparent 40%),
        radial-gradient(circle at 80% 70%, var(--bg-glow2), transparent 40%);
    animation: ovl-mist 60s ease-in-out infinite alternate;
    opacity: .85;
}
@keyframes ovl-mist {
    0%   { transform: translate3d(0,0,0); }
    100% { transform: translate3d(3%,2%,0); }
}

/* Overlay 2: PARTICLES — onyx slow-drifting dots */
[data-theme="onyx"] body::before {
    background-image: radial-gradient(circle, rgba(0,229,160,.4) 1px, transparent 1.5px);
    background-size: 80px 80px;
    background-position: 0 0;
    opacity: .25;
    animation: ovl-particles 90s linear infinite;
}
@keyframes ovl-particles {
    0%   { background-position: 0 0; }
    100% { background-position: 80px 240px; }
}

/* Overlay 3: GRID — carbon engineering blueprint (static) */
[data-theme="carbon"] body::before {
    background-image:
        linear-gradient(rgba(110,193,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(110,193,255,.05) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: .8;
}

/* Overlay 4: SCANLINES — vantablack & stealth CRT effect */
[data-theme="vantablack"] body::before {
    background: repeating-linear-gradient(
        0deg, transparent 0, transparent 2px,
        rgba(255,255,255,.018) 2px, rgba(255,255,255,.018) 3px
    );
    opacity: .7;
}
[data-theme="stealth"] body::before {
    background: repeating-linear-gradient(
        0deg, transparent 0, transparent 3px,
        rgba(255,48,48,.018) 3px, rgba(255,48,48,.018) 4px
    );
    opacity: .8;
}

/* Overlay 5: EMBERS — abyssal slow rising bioluminescence */
[data-theme="abyssal"] body::before {
    background-image:
        radial-gradient(circle, rgba(0,240,255,.32) 1px, transparent 2px),
        radial-gradient(circle, rgba(0,240,255,.18) 1px, transparent 2px);
    background-size: 140px 140px, 220px 220px;
    background-position: 0 0, 80px 60px;
    opacity: .35;
    animation: ovl-embers 30s linear infinite;
}
@keyframes ovl-embers {
    0%   { background-position: 0 100vh, 80px calc(100vh + 60px); }
    100% { background-position: 0 -100vh, 80px calc(-100vh + 60px); }
}

/* Keep body content above the overlay layer. */
body > * { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   Phase 3 Batch 1B+ — 15 NEW overlays (rain, smoke, hex, circuit, stars,
   snow, dust, fog, glitch, cells, waves, flames, leaves, lightning, void)
   plus name gradients, typing indicators, chat-join announces, profile
   backgrounds, signature line, storefront banner, pinned listing styles.
   All pure CSS (no JS), respects prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

/* Common overlay base — non-interactive, sits over the body */
body.has-overlay { position: relative; isolation: isolate; }
body.has-overlay::before {
    content: ""; position: fixed; inset: 0; z-index: 0;
    pointer-events: none; opacity: .55;
}
body.has-overlay > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
    body.has-overlay::before { animation: none !important; }
}

/* 1. Rain — vertical streaks */
body.ovl-rain::before {
    background:
      repeating-linear-gradient(95deg, transparent 0 8px,
        rgba(180,210,255,.06) 8px 9px, transparent 9px 22px);
    animation: ovl-rain-fall 1.2s linear infinite;
}
@keyframes ovl-rain-fall { from { background-position: 0 0; } to { background-position: 0 22px; } }

/* 2. Smoke — drifting low haze */
body.ovl-smoke::before {
    background:
      radial-gradient(ellipse 90% 30% at 50% 100%, rgba(120,120,140,.18), transparent 70%),
      radial-gradient(ellipse 50% 20% at 30% 80%, rgba(80,80,120,.12), transparent 70%);
    animation: ovl-smoke-drift 22s ease-in-out infinite alternate;
}
@keyframes ovl-smoke-drift { from { transform: translateX(-3%); } to { transform: translateX(3%); } }

/* 3. Hex — honeycomb lattice */
body.ovl-hex::before {
    background:
      radial-gradient(circle at 0 0,    transparent 18px, rgba(255,255,255,.04) 19px, transparent 20px) 0 0/40px 70px,
      radial-gradient(circle at 40px 0, transparent 18px, rgba(255,255,255,.04) 19px, transparent 20px) 0 0/40px 70px;
    opacity: .35;
}

/* 4. Circuit — pcb traces */
body.ovl-circuit::before {
    background:
      linear-gradient(90deg, transparent 49.5%, rgba(0,200,255,.07) 50%, transparent 50.5%) 0 0/80px 80px,
      linear-gradient(0deg,  transparent 49.5%, rgba(0,200,255,.07) 50%, transparent 50.5%) 0 0/80px 80px,
      radial-gradient(circle at 0 0,     rgba(0,200,255,.18) 2px, transparent 3px) 0 0/80px 80px;
    opacity: .45;
}

/* 5. Stars — twinkling field */
body.ovl-stars::before {
    background:
      radial-gradient(1.5px 1.5px at 23px 41px,  rgba(255,255,255,.7) 50%, transparent 51%),
      radial-gradient(1px 1px at 137px 89px,    rgba(255,255,255,.5) 50%, transparent 51%),
      radial-gradient(2px 2px at 233px 211px,   rgba(200,220,255,.6) 50%, transparent 51%),
      radial-gradient(1px 1px at 311px 137px,   rgba(255,255,255,.4) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 67px 251px, rgba(220,200,255,.6) 50%, transparent 51%);
    background-size: 360px 320px;
    animation: ovl-stars-twinkle 5s ease-in-out infinite alternate;
}
@keyframes ovl-stars-twinkle { from { opacity: .35; } to { opacity: .7; } }

/* 6. Snow — drifting flakes */
body.ovl-snow::before {
    background:
      radial-gradient(1.5px 1.5px at 30px 30px, rgba(255,255,255,.6), transparent),
      radial-gradient(2px 2px at 100px 80px,    rgba(255,255,255,.4), transparent),
      radial-gradient(1.5px 1.5px at 170px 140px, rgba(255,255,255,.5), transparent);
    background-size: 220px 220px;
    animation: ovl-snow-fall 18s linear infinite;
}
@keyframes ovl-snow-fall { from { background-position: 0 0; } to { background-position: 0 220px; } }

/* 7. Dust — warm motes drifting */
body.ovl-dust::before {
    background:
      radial-gradient(2px 2px at 50px 60px,  rgba(220,180,120,.4), transparent),
      radial-gradient(1.5px 1.5px at 150px 120px, rgba(200,160,100,.3), transparent),
      radial-gradient(2px 2px at 240px 200px, rgba(220,180,120,.35), transparent);
    background-size: 320px 280px;
    animation: ovl-dust-drift 24s ease-in-out infinite alternate;
}
@keyframes ovl-dust-drift { from { transform: translate(-2%, -1%); } to { transform: translate(2%, 1%); } }

/* 8. Fog — full-screen breathing haze */
body.ovl-fog::before {
    background:
      radial-gradient(ellipse 60% 40% at 30% 50%, rgba(220,220,240,.12), transparent 70%),
      radial-gradient(ellipse 60% 40% at 70% 60%, rgba(200,200,220,.10), transparent 70%);
    animation: ovl-fog-breathe 14s ease-in-out infinite alternate;
}
@keyframes ovl-fog-breathe { from { opacity: .45; } to { opacity: .75; } }

/* 9. Glitch — chromatic aberration scan bars */
body.ovl-glitch::before {
    background:
      repeating-linear-gradient(0deg, transparent 0 3px,
        rgba(255,0,180,.04) 3px 4px, transparent 4px 7px,
        rgba(0,200,255,.04) 7px 8px, transparent 8px 12px);
    animation: ovl-glitch-shift 3s steps(8) infinite;
}
@keyframes ovl-glitch-shift {
    0%,100% { transform: translateX(0); }
    25%     { transform: translateX(-1px); }
    50%     { transform: translateX(1px); }
    75%     { transform: translateX(-2px); }
}

/* 10. Cells — biological dot pattern */
body.ovl-cells::before {
    background:
      radial-gradient(circle at 25% 25%, rgba(80,200,140,.10) 18px, transparent 19px) 0 0/80px 80px,
      radial-gradient(circle at 75% 75%, rgba(60,180,120,.08) 14px, transparent 15px) 0 0/80px 80px;
    opacity: .65;
}

/* 11. Waves — soft horizontal bands */
body.ovl-waves::before {
    background:
      repeating-linear-gradient(180deg, transparent 0 30px,
        rgba(80,160,220,.06) 30px 32px, transparent 32px 64px);
    animation: ovl-waves-roll 9s ease-in-out infinite alternate;
}
@keyframes ovl-waves-roll { from { background-position: 0 0; } to { background-position: 0 16px; } }

/* 12. Flames — bottom heat shimmer */
body.ovl-flames::before {
    background:
      radial-gradient(ellipse 80% 30% at 30% 100%, rgba(255,140,60,.16), transparent 70%),
      radial-gradient(ellipse 60% 25% at 70% 100%, rgba(255,100,40,.14), transparent 70%);
    animation: ovl-flames-flicker 2.4s ease-in-out infinite alternate;
}
@keyframes ovl-flames-flicker { from { opacity: .55; transform: scaleY(.98); } to { opacity: .85; transform: scaleY(1.04); } }

/* 13. Leaves — autumnal organic specks */
body.ovl-leaves::before {
    background:
      radial-gradient(3px 2px at 60px 80px,   rgba(120,180,80,.4), transparent),
      radial-gradient(2px 3px at 180px 130px, rgba(100,160,60,.35), transparent),
      radial-gradient(3px 2px at 280px 220px, rgba(140,200,90,.3), transparent);
    background-size: 360px 320px;
    animation: ovl-leaves-fall 28s linear infinite;
}
@keyframes ovl-leaves-fall { from { background-position: 0 0; } to { background-position: 30px 320px; } }

/* 14. Lightning — periodic flash */
body.ovl-lightning::before {
    background: rgba(180,200,255,.0);
    animation: ovl-lightning-flash 11s ease-out infinite;
}
@keyframes ovl-lightning-flash {
    0%, 92%, 96%, 100% { background: rgba(180,200,255,0); }
    93%                { background: rgba(220,230,255,.18); }
    94%                { background: rgba(180,200,255,.05); }
    95%                { background: rgba(200,215,255,.12); }
}

/* 15. Void — pure black gradient sink (OLED) */
body.ovl-void::before {
    background:
      radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,.6) 100%);
    opacity: .8;
}

/* ── Existing 5 overlays from Batch 1A (kept) ───────────────────────── */
body.ovl-mist::before {
    background:
      radial-gradient(ellipse 60% 40% at 30% 30%, rgba(255,255,255,.04), transparent 70%),
      radial-gradient(ellipse 50% 30% at 70% 70%, rgba(255,255,255,.03), transparent 70%);
    animation: ovl-mist-drift 18s ease-in-out infinite alternate;
}
@keyframes ovl-mist-drift { from { transform: translate(-2%, -1%); } to { transform: translate(2%, 1%); } }

body.ovl-particles::before {
    background:
      radial-gradient(2px 2px at 40px 60px, rgba(255,255,255,.3), transparent),
      radial-gradient(1px 1px at 120px 140px, rgba(255,255,255,.2), transparent),
      radial-gradient(2px 2px at 220px 180px, rgba(255,255,255,.25), transparent);
    background-size: 280px 240px;
    animation: ovl-particles-float 24s linear infinite;
}
@keyframes ovl-particles-float { from { background-position: 0 0; } to { background-position: 280px 240px; } }

body.ovl-grid::before {
    background:
      linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,.04) 50%, transparent 50.5%) 0 0/40px 40px,
      linear-gradient(0deg,  transparent 49.5%, rgba(255,255,255,.04) 50%, transparent 50.5%) 0 0/40px 40px;
    opacity: .5;
}

body.ovl-scanlines::before {
    background:
      repeating-linear-gradient(0deg, transparent 0 2px,
        rgba(0,255,150,.05) 2px 3px, transparent 3px 5px);
    opacity: .6;
}

body.ovl-embers::before {
    background:
      radial-gradient(2px 2px at 80px 120px, rgba(255,120,40,.5), transparent),
      radial-gradient(2px 2px at 200px 220px, rgba(255,80,20,.4), transparent),
      radial-gradient(1px 1px at 320px 80px,  rgba(255,160,80,.3), transparent);
    background-size: 380px 320px;
    animation: ovl-embers-rise 16s linear infinite;
}
@keyframes ovl-embers-rise { from { background-position: 0 320px; } to { background-position: 0 0; } }

/* ═══════════════════════════════════════════════════════════════════════
   Name gradients — applied to .username-html via inline css_value.
   These classes provide additional themed presets beyond the inline styles.
   ═══════════════════════════════════════════════════════════════════════ */
.username-html { font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════
   Typing indicators — 20 variants (animated dots, no JS)
   ═══════════════════════════════════════════════════════════════════════ */
.typing-indicator {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 12px;
    background: var(--bg3); color: var(--muted);
    font-size: 11px; margin: 4px 0;
}
.typing-indicator .ti-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent); display: inline-block;
}
.typing-indicator .ti-label { margin-left: 6px; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .typing-indicator .ti-dot { animation: none !important; } }

.ti-dots .ti-dot:nth-child(1) { animation: ti-dots 1.2s infinite; }
.ti-dots .ti-dot:nth-child(2) { animation: ti-dots 1.2s infinite .2s; }
.ti-dots .ti-dot:nth-child(3) { animation: ti-dots 1.2s infinite .4s; }
@keyframes ti-dots { 0%,80%,100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.ti-pulse .ti-dot { animation: ti-pulse 1s infinite ease-in-out; }
.ti-pulse .ti-dot:nth-child(2) { animation-delay: .15s; }
.ti-pulse .ti-dot:nth-child(3) { animation-delay: .3s; }
@keyframes ti-pulse { 0%,100% { transform: scale(.8); opacity: .5; } 50% { transform: scale(1.4); opacity: 1; } }

.ti-wave .ti-dot { animation: ti-wave 1.4s infinite ease-in-out; }
.ti-wave .ti-dot:nth-child(2) { animation-delay: .2s; }
.ti-wave .ti-dot:nth-child(3) { animation-delay: .4s; }
@keyframes ti-wave { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.ti-spin .ti-dot { animation: ti-spin 1.6s infinite linear; transform-origin: center; }
@keyframes ti-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.ti-flash .ti-dot { animation: ti-flash 1s infinite; }
.ti-flash .ti-dot:nth-child(2) { animation-delay: .33s; }
.ti-flash .ti-dot:nth-child(3) { animation-delay: .66s; }
@keyframes ti-flash { 0%,100% { opacity: .2; } 50% { opacity: 1; box-shadow: 0 0 6px currentColor; } }

.ti-bounce .ti-dot { animation: ti-bounce 1s infinite ease; }
.ti-bounce .ti-dot:nth-child(2) { animation-delay: .15s; }
.ti-bounce .ti-dot:nth-child(3) { animation-delay: .3s; }
@keyframes ti-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px) scale(1.1); } }

.ti-glow .ti-dot { animation: ti-glow 1.4s infinite ease-in-out; }
@keyframes ti-glow { 0%,100% { box-shadow: 0 0 0 currentColor; } 50% { box-shadow: 0 0 12px currentColor; } }

.ti-fade .ti-dot { animation: ti-fade 1.6s infinite; }
.ti-fade .ti-dot:nth-child(2) { animation-delay: .2s; }
.ti-fade .ti-dot:nth-child(3) { animation-delay: .4s; }
@keyframes ti-fade { 0%,100% { opacity: 0; } 50% { opacity: 1; } }

.ti-rainbow .ti-dot { animation: ti-rainbow 3s infinite linear; }
@keyframes ti-rainbow { 0% { background: #ff5050; } 33% { background: #50ff80; } 66% { background: #5080ff; } 100% { background: #ff5050; } }

.ti-laser .ti-dot { animation: ti-laser 1.4s infinite linear; transform-origin: left center; }
@keyframes ti-laser { 0% { transform: scaleX(.3); } 50% { transform: scaleX(1.6); } 100% { transform: scaleX(.3); } }

.ti-shake .ti-dot { animation: ti-shake .4s infinite; }
@keyframes ti-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }

.ti-fire .ti-dot { background: linear-gradient(180deg,#ffeb3b,#ff5722); animation: ti-fire 1s infinite; }
@keyframes ti-fire { 0%,100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-3px) scaleY(1.4); } }

.ti-ice .ti-dot { background: #80c8ff; animation: ti-ice 2s infinite; }
@keyframes ti-ice { 0%,100% { box-shadow: 0 0 0 #80c8ff; } 50% { box-shadow: 0 0 8px #80c8ff; } }

.ti-stripe .ti-dot { width: 14px; height: 3px; border-radius: 1px; animation: ti-stripe 1.2s infinite; }
.ti-stripe .ti-dot:nth-child(2) { animation-delay: .15s; }
.ti-stripe .ti-dot:nth-child(3) { animation-delay: .3s; }
@keyframes ti-stripe { 0%,100% { transform: scaleX(.3); opacity: .5; } 50% { transform: scaleX(1); opacity: 1; } }

.ti-square .ti-dot { border-radius: 1px; animation: ti-square 1.5s infinite; }
@keyframes ti-square { 0%,100% { transform: rotate(0); } 50% { transform: rotate(180deg); } }

.ti-orbit .ti-dot:nth-child(1) { animation: ti-orbit 1.4s infinite linear; }
.ti-orbit .ti-dot:nth-child(2) { animation: ti-orbit 1.4s infinite linear .47s; }
.ti-orbit .ti-dot:nth-child(3) { animation: ti-orbit 1.4s infinite linear .94s; }
@keyframes ti-orbit { from { transform: rotate(0) translateX(4px) rotate(0); } to { transform: rotate(360deg) translateX(4px) rotate(-360deg); } }

.ti-neon .ti-dot { background: #ff00aa; animation: ti-neon 1.2s infinite; }
@keyframes ti-neon { 0%,100% { box-shadow: 0 0 4px #ff00aa, 0 0 12px #ff00aa inset; } 50% { box-shadow: 0 0 12px #ff00aa, 0 0 24px #ff00aa; } }

.ti-matrix .ti-dot { background: #00ff88; font-family: monospace; animation: ti-matrix 1s infinite; }
@keyframes ti-matrix { 0%,100% { opacity: .3; } 50% { opacity: 1; box-shadow: 0 0 6px #00ff88; } }

.ti-gold .ti-dot { background: linear-gradient(180deg,#ffd700,#b8860b); animation: ti-glow 1.4s infinite; }

.ti-stealth .ti-dot { background: rgba(255,255,255,.3); animation: ti-fade 2s infinite; }

/* ═══════════════════════════════════════════════════════════════════════
   Chat-join announcements — 20 styled banners
   ═══════════════════════════════════════════════════════════════════════ */
.chat-join-announce {
    display: block; margin: 8px 0; padding: 6px 14px;
    border-radius: 14px; text-align: center;
    font-size: 12px; font-weight: 600;
    background: var(--bg3); color: var(--muted);
    animation: cja-fade-in .6s ease-out;
}
@media (prefers-reduced-motion: reduce) { .chat-join-announce { animation: none !important; } }
@keyframes cja-fade-in { from { opacity: 0; } to { opacity: 1; } }

.cja-fade { animation: cja-fade-in .6s ease-out; }
.cja-poof { background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.08), rgba(255,255,255,0)); animation: cja-poof .8s ease-out; }
@keyframes cja-poof { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.cja-slide { animation: cja-slide .5s ease-out; }
@keyframes cja-slide { from { transform: translateX(-30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.cja-bounce { animation: cja-bounce .8s; }
@keyframes cja-bounce { 0% { transform: translateY(-30px); opacity: 0; } 60% { transform: translateY(8px); opacity: 1; } 100% { transform: translateY(0); } }

.cja-glow { background: linear-gradient(135deg, var(--accent), transparent); color: #fff; box-shadow: 0 0 20px var(--accent); }
.cja-fire { background: linear-gradient(90deg, #ff5722, #ffeb3b, #ff5722); background-size: 200% 100%; color: #fff; animation: cja-fire 2s infinite; }
@keyframes cja-fire { 0%,100% { background-position: 0 0; } 50% { background-position: 100% 0; } }

.cja-ice { background: linear-gradient(135deg, #80c8ff, #b0e0ff); color: #003360; }
.cja-gold { background: linear-gradient(135deg, #ffd700, #b8860b); color: #1a0e00; font-weight: 800; box-shadow: 0 4px 16px rgba(212,175,55,.4); }
.cja-neon { background: #000; color: #ff00aa; border: 1px solid #ff00aa; box-shadow: 0 0 12px #ff00aa, inset 0 0 12px rgba(255,0,170,.2); }
.cja-vip { background: linear-gradient(135deg, #4a148c, #7b1fa2); color: #fff; border: 2px solid #ffd700; }
.cja-stealth { background: rgba(0,0,0,.6); color: rgba(255,255,255,.5); border: 1px dashed rgba(255,255,255,.2); }
.cja-rainbow { background: linear-gradient(90deg, #ff5050, #ffeb3b, #50ff80, #50a0ff, #a050ff); color: #fff; font-weight: 800; }
.cja-matrix { background: #000; color: #00ff88; font-family: monospace; border: 1px solid #00ff88; }
.cja-royal { background: linear-gradient(135deg, #311b92, #4527a0); color: #ffd700; border: 1px solid #ffd700; }
.cja-blood { background: linear-gradient(135deg, #b71c1c, #7f0000); color: #fff; }
.cja-ocean { background: linear-gradient(135deg, #0277bd, #01579b); color: #e0f7ff; }
.cja-forest { background: linear-gradient(135deg, #1b5e20, #2e7d32); color: #c8f5d0; }
.cja-sunset { background: linear-gradient(135deg, #ff5722, #e91e63); color: #fff; }
.cja-galaxy { background: linear-gradient(135deg, #1a0033, #4a148c, #1a0033); color: #f0d4ff; }
.cja-pulse { animation: cja-pulse 1.5s infinite ease-in-out; }
@keyframes cja-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* ═══════════════════════════════════════════════════════════════════════
   Signature line — italic muted footer under chat msgs / news posts
   ═══════════════════════════════════════════════════════════════════════ */
.signature-line {
    display: block; margin-top: 6px; padding-top: 6px;
    border-top: 1px dashed var(--border);
    font-size: 11px; font-style: italic; color: var(--muted);
    opacity: .8;
}

/* ═══════════════════════════════════════════════════════════════════════
   Storefront banner + theme override (Batch 3)
   ═══════════════════════════════════════════════════════════════════════ */
.storefront-banner-wrap {
    margin: -16px -16px 16px -16px;
    border-radius: 8px 8px 0 0; overflow: hidden;
    max-height: 220px;
}
.storefront-banner {
    width: 100%; height: auto; display: block;
    object-fit: cover; max-height: 220px;
}
.storefront-pinned-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    background: var(--accent); color: var(--bg);
    font-size: 10px; font-weight: 700; letter-spacing: .04em;
    margin-right: 6px; vertical-align: middle;
}
.listing-card.is-pinned {
    border: 1px solid var(--accent);
    box-shadow: 0 4px 16px rgba(0,0,0,.15), 0 0 0 1px var(--accent) inset;
}

/* ═══════════════════════════════════════════════════════════════════════
   Phase 4 — UX batch (16 features chosen from the 30-idea brainstorm)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Smooth theme crossfade (#4) ────────────────────────────────────── */
body, .card, .btn, input, textarea, select,
.status-badge, .status-pill, .topnav, .sidebar, .nav-bottom {
    transition: background-color .25s ease, color .25s ease,
                border-color .25s ease, box-shadow .25s ease;
}

/* ── Density toggle (#3) ────────────────────────────────────────────── */
[data-density="compact"] {
    --gap: 8px;  --card-pad: 10px;
    font-size: 13px; line-height: 1.55;
}
[data-density="compact"] .card { padding: var(--card-pad); }
[data-density="compact"] .topnav { height: 46px; }
[data-density="compact"] .nav-bottom { height: 50px; }

[data-density="comfortable"] { --gap: 14px; --card-pad: 16px; }

[data-density="spacious"] {
    --gap: 22px; --card-pad: 22px;
    font-size: 15px; line-height: 1.85;
}
[data-density="spacious"] .card { padding: var(--card-pad); }

/* ── Page-load pulse (#10) ──────────────────────────────────────────── */
@keyframes cardPulseIn {
    0%   { box-shadow: 0 0 0 0 var(--gold-glow); }
    50%  { box-shadow: 0 0 0 6px var(--gold-glow); }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.card { animation: cardPulseIn .6s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .card { animation: none; }
    body, .card, .btn, input, textarea, select { transition: none !important; }
}

/* ── Status-pill consistency pass (#6) ──────────────────────────────── */
.status-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; line-height: 1.4; white-space: nowrap;
    border: 1px solid transparent;
}
.status-pill.s-pending,
.status-pill.s-paid       { background: rgba(245,158,11,.12); color: var(--warn);   border-color: rgba(245,158,11,.3); }
.status-pill.s-shipped,
.status-pill.s-delivered  { background: rgba(59,130,246,.12); color: var(--info);   border-color: rgba(59,130,246,.3); }
.status-pill.s-finalized,
.status-pill.s-paid-out   { background: rgba(34,197,94,.12);  color: var(--accent2);border-color: rgba(34,197,94,.3); }
.status-pill.s-dispute    { background: rgba(239,68,68,.12);  color: var(--danger); border-color: rgba(239,68,68,.3); }
.status-pill.s-refunded   { background: rgba(245,158,11,.12); color: var(--warn);   border-color: rgba(245,158,11,.3); }
.status-pill.s-cancelled,
.status-pill.s-closed     { background: rgba(110,95,138,.18); color: var(--muted);  border-color: rgba(110,95,138,.3); }

/* ── Online dot (#19) ───────────────────────────────────────────────── */
.online-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    vertical-align: middle; margin-right: 4px; flex-shrink: 0;
}
.online-dot.is-online  { background: var(--accent2); box-shadow: 0 0 6px var(--accent2); }
.online-dot.is-offline { background: var(--muted);   opacity: .55; }

/* ── Empty-state component (#8) ─────────────────────────────────────── */
.empty-state {
    text-align: center; padding: 44px 20px 36px;
    background: var(--bg2); border: 1px dashed var(--border2);
    border-radius: var(--radius-lg); color: var(--text2);
}
.empty-state-icon  { font-size: 48px; line-height: 1; margin-bottom: 14px; opacity: .85; }
.empty-state-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.empty-state-body  { font-size: 13px; color: var(--muted); max-width: 420px; margin: 0 auto 16px; line-height: 1.6; }
.empty-state-cta   { margin-top: 8px; }

/* ── Tag chips (#14) ────────────────────────────────────────────────── */
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.tag-chip {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 600; text-decoration: none;
    background: hsla(var(--chip-h, 270), 50%, 50%, .12);
    color: hsl(var(--chip-h, 270), 70%, 75%);
    border: 1px solid hsla(var(--chip-h, 270), 50%, 50%, .25);
    transition: all .15s ease;
}
.tag-chip:hover { background: hsla(var(--chip-h, 270), 50%, 50%, .22); }
.tag-chip.is-active {
    background: hsla(var(--chip-h, 270), 70%, 50%, .35);
    color: var(--text); border-color: hsla(var(--chip-h, 270), 70%, 60%, .6);
}

/* ── Compact order-timeline strip (#13) — used by render_order_timeline()
       in places that DON'T already render the full ot-step/ot-line stepper
       (e.g. buyer's order list rows, dispute side-panel, future widgets).
       Pre-existing .order-timeline rules at top of file are unchanged. ─── */
.order-timeline-strip {
    list-style: none; padding: 0; margin: 16px 0;
    display: flex; flex-wrap: wrap; gap: 0;
    background: var(--bg2); border: 1px solid var(--border2);
    border-radius: var(--radius-lg); overflow: hidden;
}
.order-timeline-strip li {
    flex: 1 1 140px; padding: 14px 12px;
    text-align: center; position: relative;
    border-right: 1px solid var(--border);
}
.order-timeline-strip li:last-child { border-right: none; }
.order-timeline-strip .ot-icon { display: block; font-size: 22px; margin-bottom: 6px; }
.order-timeline-strip .ot-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.order-timeline-strip time { font-family: var(--mono); font-size: 11px; color: var(--text2); }
.order-timeline-strip time.muted { color: var(--muted); }
.order-timeline-strip li.is-done { background: rgba(34,197,94,.06); }
.order-timeline-strip li.is-done .ot-icon { filter: none; }
.order-timeline-strip li.is-todo { opacity: .55; }
.order-timeline-strip li.is-todo .ot-icon { filter: grayscale(.7); }

/* ── First-login tour (#29) — CSS-only 3-card stepper ──────────────── */
.first-login-tour {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%);
    z-index: 1000; max-width: 460px; width: 92vw;
    background: var(--bg2); border: 1px solid var(--border2);
    border-radius: var(--radius-lg); box-shadow: var(--shadow);
    padding: 0; overflow: hidden;
}
.first-login-tour::before {
    content: ''; position: fixed; left:0; top:0; right:0; bottom:0;
    background: rgba(0,0,0,.55); z-index: -1;
}
.tour-input { position: absolute; opacity: 0; pointer-events: none; }
.tour-step  { display: none; padding: 28px 24px 22px; }
.first-login-tour .tour-input[value="1"]:checked ~ .tour-step.s1,
.first-login-tour .tour-input[value="2"]:checked ~ .tour-step.s2,
.first-login-tour .tour-input[value="3"]:checked ~ .tour-step.s3 { display: block; }
.tour-step h3 { font-size: 18px; margin-bottom: 8px; }
.tour-step p  { color: var(--text2); font-size: 13px; line-height: 1.7; margin-bottom: 14px; }
.tour-nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 24px; background: var(--bg3); border-top: 1px solid var(--border);
}
.tour-dots { display: flex; gap: 6px; }
.tour-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .5; }
.first-login-tour .tour-input[value="1"]:checked ~ .tour-nav .tour-dots span:nth-child(1),
.first-login-tour .tour-input[value="2"]:checked ~ .tour-nav .tour-dots span:nth-child(2),
.first-login-tour .tour-input[value="3"]:checked ~ .tour-nav .tour-dots span:nth-child(3) { background: var(--accent); opacity: 1; }
/* Stepper Back/Next/Done visibility — all controls rendered, CSS shows the right pair. */
.first-login-tour .tour-back-2,
.first-login-tour .tour-back-3,
.first-login-tour .tour-next-1,
.first-login-tour .tour-next-2,
.first-login-tour .tour-done-3 { display: none; }
.first-login-tour .tour-input[value="1"]:checked ~ .tour-nav .tour-next-1 { display: inline-block; }
.first-login-tour .tour-input[value="2"]:checked ~ .tour-nav .tour-back-2,
.first-login-tour .tour-input[value="2"]:checked ~ .tour-nav .tour-next-2 { display: inline-block; }
.first-login-tour .tour-input[value="3"]:checked ~ .tour-nav .tour-back-3,
.first-login-tour .tour-input[value="3"]:checked ~ .tour-nav .tour-done-3 { display: inline-block; }
.tour-nav-btn { padding: 6px 14px; font-size: 12px; font-weight: 700;
    border-radius: var(--radius); border: 1px solid var(--border2);
    background: var(--bg4); color: var(--text); cursor: pointer; text-decoration: none; }
.tour-nav-btn:hover { background: var(--bg5); }
.tour-nav-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Header search bar (#18) ────────────────────────────────────────── */
.header-search {
    display: flex; align-items: center; gap: 6px;
    background: var(--bg3); border: 1px solid var(--border2);
    border-radius: 999px; padding: 4px 6px 4px 12px;
    max-width: 320px; flex: 1 1 200px;
}
.header-search input {
    flex: 1; min-width: 0; background: transparent; border: 0;
    color: var(--text); font-size: 13px; padding: 4px 0; outline: none;
}
.header-search button {
    background: var(--accent); color: #fff; border: 0;
    border-radius: 999px; padding: 4px 12px; font-size: 12px;
    font-weight: 700; cursor: pointer;
}
@media (max-width: 540px) { .header-search { max-width: 100%; } }

/* ── Listing FAQ (#28) ──────────────────────────────────────────────── */
.listing-faq { margin: 18px 0; }
.listing-faq-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.faq-item {
    background: var(--bg2); border: 1px solid var(--border2);
    border-radius: var(--radius); margin-bottom: 8px; padding: 0;
}
.faq-item summary {
    cursor: pointer; padding: 12px 14px;
    font-weight: 600; color: var(--text); font-size: 14px;
    list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::after { content: '＋'; color: var(--muted); font-weight: 400; }
.faq-item[open] summary::after { content: '−'; }
.faq-item .faq-answer {
    padding: 0 14px 12px; color: var(--text2); font-size: 13px; line-height: 1.7;
}

/* ── Draft restored banner (#22) ────────────────────────────────────── */
.draft-banner {
    background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3);
    color: var(--warn); padding: 10px 14px; border-radius: var(--radius);
    margin-bottom: 14px; font-size: 13px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.draft-banner a { color: var(--warn); font-weight: 700; }

/* ── Ask-the-seller block (#24) ─────────────────────────────────────── */
.ask-seller-form {
    background: var(--bg2); border: 1px solid var(--border2);
    border-radius: var(--radius); padding: 14px; margin: 16px 0;
}
.ask-seller-form textarea {
    width: 100%; min-height: 72px; background: var(--bg3);
    border: 1px solid var(--border2); color: var(--text);
    padding: 8px 10px; border-radius: var(--radius); font-size: 13px;
    font-family: inherit; resize: vertical; margin-bottom: 8px;
}
.questions-public { margin-top: 18px; }
.questions-public .q-item {
    padding: 10px 0; border-top: 1px solid var(--border);
}
.questions-public .q-q { color: var(--text); font-weight: 600; font-size: 13px; }
.questions-public .q-a { color: var(--text2); font-size: 13px; margin-top: 4px; padding-left: 14px; border-left: 2px solid var(--accent); }

/* ── Print stylesheet (#20) ─────────────────────────────────────────── */
@media print {
    .topnav, .sidebar, .nav-bottom, .header-search, .first-login-tour,
    .btn, form, footer, .draft-banner, .empty-state-cta,
    .ask-seller-form, .ot-icon { display: none !important; }
    body {
        background: #fff !important; color: #000 !important;
        padding: 0 !important; margin: 0 !important;
    }
    .card {
        background: #fff !important; color: #000 !important;
        border: 1px solid #ccc !important; box-shadow: none !important;
        page-break-inside: avoid; animation: none !important;
    }
    a { color: #000 !important; text-decoration: underline; }
    .status-pill { border: 1px solid #999 !important; color: #000 !important; background: #f5f5f5 !important; }
    .order-timeline-strip { border: 1px solid #ccc !important; }
    .order-timeline-strip li { background: #fff !important; opacity: 1 !important; }
    /* Existing .order-timeline (orders.php) prints with default colors. */
    .ot-line { background: #ccc !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   ── Universal responsive guards (Apr 30 2026) ──
   Cross-cutting rules so nothing overflows or gets hidden on small devices.
   Applied last so they win cascade ties without needing !important.
   ════════════════════════════════════════════════════════════════════════ */

/* Never let any block force a horizontal page scroll. */
html, body { max-width: 100vw; overflow-x: hidden; }

/* Media: always scale down, never break layout. */
img, video, iframe, svg, canvas { max-width: 100%; height: auto; }

/* Long URLs / onion addresses / hashes inside cards must wrap, not overflow. */
.card, .sidebar-box, .topnav, .empty-state, .ask-seller-form, .draft-banner,
.faq-item, .listing-faq, .questions-public, .first-login-tour, .ot-step {
    word-wrap: break-word; overflow-wrap: anywhere;
}
pre, code { white-space: pre-wrap; word-break: break-word; max-width: 100%; }

/* Tables: tap to scroll horizontally rather than blowing the page width. */
.table-scroll, .data-table-wrap, .responsive-table-wrap { overflow-x: auto; max-width: 100%; }
table.responsive { display: block; overflow-x: auto; max-width: 100%; }

/* Inputs/textareas: full-width on every screen, never wider than container. */
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], input[type="url"], input[type="tel"], textarea, select {
    max-width: 100%; box-sizing: border-box;
}

/* Tag chip rows + question-answer rows must wrap. */
.listing-tags, .chip-row, .tag-row, .pill-row, .filter-chips, .badge-row {
    display: flex; flex-wrap: wrap; gap: 6px;
}

/* ── Phone-sized devices (≤ 480px) ────────────────────────────────────── */
@media (max-width: 480px) {
    /* Tour popup: cap height so it always fits + scrolls inside if needed. */
    .first-login-tour {
        width: 96vw; max-width: 96vw; max-height: 90vh;
        overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    .tour-step  { padding: 22px 16px 16px; }
    .tour-step h3 { font-size: 16px; }
    .tour-nav   { padding: 10px 14px; flex-wrap: wrap; gap: 8px; row-gap: 8px; }
    .tour-nav > span:last-child { flex-wrap: wrap; gap: 6px !important; }
    .tour-nav-btn { padding: 8px 12px; font-size: 13px; min-height: 36px; }

    /* Header search: stack and grow full-width to never push other nav off. */
    .header-search { max-width: 100%; flex-basis: 100%; order: 99; }
    .header-search input { font-size: 14px; } /* prevent iOS zoom on focus */

    /* Buttons need a finger-friendly tap target on touch screens. */
    .btn, .tour-nav-btn, .faq-item summary, .draft-banner a {
        min-height: 36px; touch-action: manipulation;
    }

    /* FAQ details: add breathing room + larger tap area for the summary. */
    .faq-item summary { padding: 14px 12px; font-size: 14px; }
    .faq-item .faq-answer { padding: 0 12px 14px; }

    /* Ask-seller form: shrink padding so textarea has more room. */
    .ask-seller-form { padding: 12px; }
    .ask-seller-form textarea { font-size: 14px; min-height: 80px; }

    /* Draft banner: stack message and "Discard" link vertically. */
    .draft-banner { flex-wrap: wrap; gap: 6px; padding: 10px 12px; }

    /* Empty-state: smaller hero icon so it doesn't dominate the card. */
    .empty-state { padding: 32px 16px; }
    .empty-state-icon { font-size: 40px; }

    /* Order timeline strip already has overflow-x; ensure it does on mobile. */
    .order-timeline-strip, .order-timeline { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Q&A public block: smaller borders, tighter padding. */
    .questions-public .q-item { padding: 8px 0; }
    .questions-public .q-a { padding-left: 10px; }
}

/* ── Very small phones (≤ 360px) — last-line defense ─────────────────── */
@media (max-width: 360px) {
    .tour-step h3 { font-size: 15px; }
    .tour-step p, .tour-nav-btn { font-size: 12px; }
    .tour-step  { padding: 18px 12px 12px; }
    .tour-nav   { padding: 8px 10px; }
}

/* ── Reveal anything that was hidden behind the menu-toggle drawer ────
   Defense for a previously-reported bug: if JS is disabled (which is the
   default for this site) the topnav-links and sidebar should still appear
   on wide screens. Already handled in <noscript> + media queries earlier;
   re-asserting here so a stale stylesheet on the VPS doesn't hide them. */
@media (min-width: 768px) {
    .topnav-links { display: flex !important; }
    .sidebar      { display: block !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   Storefront theme override picker — visual swatch grid (CSS-only).
   Each .st-swatch carries data-theme="X" so the [data-theme="X"]
   variable rules higher up in this file apply to its descendants;
   that's how each tile renders in its own colours without JS.
   ───────────────────────────────────────────────────────────────────── */
.storefront-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 4px;
}
.st-tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px;
    border: 2px solid var(--border, rgba(255,255,255,.12));
    border-radius: var(--radius-lg);
    background: var(--bg2, rgba(255,255,255,.03));
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
    position: relative;
}
.st-tile:hover { transform: translateY(-1px); border-color: var(--accent, #d4af37); }
.st-tile input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
    width: 0; height: 0;
}
/* Selected = either PHP-rendered class OR :has(:checked) for instant feedback */
.st-tile--selected,
.st-tile:has(input[type="radio"]:checked) {
    border-color: var(--accent, #d4af37);
    box-shadow: 0 0 0 2px rgba(212,175,55,.35), 0 0 16px rgba(212,175,55,.25);
}
.st-tile--selected::after,
.st-tile:has(input[type="radio"]:checked)::after {
    content: "✓";
    position: absolute; top: 4px; right: 6px;
    font-size: 12px; font-weight: 700;
    color: var(--accent, #d4af37);
    line-height: 1;
}
/* The swatch — uses theme vars from data-theme attribute */
.st-swatch {
    display: flex; flex-direction: column; gap: 3px;
    height: 64px;
    padding: 5px;
    border-radius: 6px;
    background: var(--bg, #0a0612);
    border: 1px solid var(--border, rgba(255,255,255,.1));
    overflow: hidden;
}
.st-bar { display: block; border-radius: 3px; }
.st-bar--header {
    height: 8px;
    background: linear-gradient(90deg, var(--accent, #d4af37), var(--accent2, var(--accent, #d4af37)));
    flex-shrink: 0;
}
.st-bar--card {
    flex: 1;
    background: var(--bg2, rgba(255,255,255,.04));
    border: 1px solid var(--border, rgba(255,255,255,.08));
    display: flex; align-items: center; gap: 4px;
    padding: 0 5px;
}
.st-dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
}
.st-dot--accent  { background: var(--accent,  #d4af37); }
.st-dot--accent2 { background: var(--accent2, var(--accent, #d4af37)); }
.st-dot--text    { background: var(--text,    #f0e8d8); opacity: .55; }
.st-bar--btn {
    height: 14px;
    background: var(--accent, #d4af37);
    color: var(--bg, #0a0612);
    font-size: 9px; font-weight: 700;
    text-align: center; line-height: 14px;
    flex-shrink: 0;
}
/* "use visitor's theme" tile — diagonal-stripe ∅ swatch */
.st-swatch--off {
    background:
      repeating-linear-gradient(45deg,
        rgba(255,255,255,.04) 0 6px,
        rgba(255,255,255,.08) 6px 12px);
    align-items: center; justify-content: center;
    color: var(--muted, #888); font-size: 24px;
}
.st-swatch--off .st-x { line-height: 1; opacity: .8; }
.st-label {
    font-size: 11px; font-weight: 600;
    color: var(--text, currentColor);
    text-align: center;
    line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
}
.st-label small { font-size: 9px; }

@media (max-width: 480px) {
    .storefront-theme-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
    .st-swatch { height: 54px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Secondary sticky nav bar — sits right below the .topnav (which now
   only carries the brand + actions). This keeps the primary nav from
   being squeezed beside the logo, and stays persistently visible on
   scroll. Hidden on mobile (<768px) where the hamburger drawer +
   bottom-nav take over.
   ───────────────────────────────────────────────────────────────────── */
.topnav-bar {
    display: none;                 /* shown via media query below */
    position: sticky;
    top: var(--nav-h);             /* sits flush under the topnav */
    z-index: 199;                  /* one below .topnav (200) so the
                                      logo bar always wins shadow stack */
    background: var(--bg2);
    border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
    box-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.topnav-bar .topnav-links {
    max-width: 1148px;
    margin: 0 auto;
    padding: 0 14px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.topnav-bar .topnav-links::-webkit-scrollbar { display: none; }

/* ─── Sticky Logout (right edge of secondary nav) ──────────────────
   Users were losing the Logout link when the nav row overflowed
   horizontally and they had no idea they could scroll. Pinning it
   to the right edge with position:sticky keeps it visible at all
   times. The `«` chevrons + left-side gradient fade act as a
   visual hint that other links scroll beneath it — equivalent of
   a "scroll ←" indicator. Pure CSS so it works in TOR without JS. */
.topnav-bar .topnav-links {
    position: relative;
}
.topnav-bar .topnav-links .topnav-logout {
    position: sticky;
    right: 0;
    margin-left: auto;
    padding-left: 26px;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0) 0,
        var(--bg2) 18px,
        var(--bg2) 100%
    );
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.topnav-bar .topnav-links .topnav-logout::before {
    content: "«";
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    margin-right: 2px;
    opacity: .85;
    animation: topnav-logout-hint 2s ease-in-out infinite;
}
@keyframes topnav-logout-hint {
    0%, 100% { transform: translateX(0); opacity: .55; }
    50%      { transform: translateX(-3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .topnav-bar .topnav-links .topnav-logout::before { animation: none; opacity: .8; }
}

@media (min-width: 768px) {
    .topnav-bar { display: block; }
}
@media (max-width: 767px) {
    .topnav-bar { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   Hamburger reliability fixes — the previous markup let other elements
   occasionally land above the label and steal the click. Lift it above
   the new .topnav-bar (z=199) and the topnav itself (z=200), and add
   touch-action so iOS Safari doesn't swallow the first tap as a scroll
   gesture. The label needs explicit position:relative for z-index to
   apply.
   ───────────────────────────────────────────────────────────────────── */
.hamburger {
    position: relative;
    z-index: 250;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.hamburger:active { transform: scale(.96); }

/* qty-btn rendered as <a> (no-JS plus/minus on product page) needs the
   anchor underline killed and disabled state visualized. */
.qty-touch a.qty-btn { text-decoration: none; color: var(--text); }
.qty-touch .qty-btn--disabled {
    opacity: .35;
    pointer-events: none;
    cursor: not-allowed;
}

/* === BADGES_V2 START — 50 unique online-badge classes === */
.bi-v2-stardust{background:radial-gradient(circle at 30% 30%,#fef3c7,#fbbf24 55%,#78350f);animation:bi-shimmer 3s linear infinite;background-size:200% 200%;}
.bi-v2-supernova{background:radial-gradient(circle,#fff 5%,#fde047 25%,#f97316 55%,#7f1d1d);animation:bi-pulse 2s ease-in-out infinite,bi-glow 2.5s ease-in-out infinite;}
.bi-v2-comet{background:linear-gradient(90deg,#0c4a6e,#0ea5e9,#7dd3fc,#fff,#7dd3fc,#0ea5e9,#0c4a6e);animation:bi-shimmer 1.8s linear infinite;background-size:300% 100%;}
.bi-v2-galaxy{background:conic-gradient(from 90deg,#1e1b4b,#7c3aed,#ec4899,#f97316,#7c3aed,#1e1b4b);animation:bi-spin-inner 8s linear infinite;}
.bi-v2-meteor{background:linear-gradient(135deg,#1a0500,#7c2d12,#f97316,#fbbf24,#fff);animation:bi-shimmer 2.4s linear infinite;background-size:200% 200%;}
.bi-v2-luna{background:radial-gradient(circle at 35% 35%,#f1f5f9,#cbd5e1 50%,#475569);animation:bi-float 3.5s ease-in-out infinite,bi-glow 4s ease-in-out infinite;--bi-glow:#cbd5e1;}
.bi-v2-helios{background:radial-gradient(circle,#fff7ed 0%,#fde047 30%,#f97316 65%,#9a3412 100%);animation:bi-spin-inner 12s linear infinite,bi-glow 2s ease-in-out infinite;--bi-glow:#fbbf24;}
.bi-v2-prism{background:linear-gradient(90deg,#ef4444,#f97316,#fbbf24,#22c55e,#06b6d4,#6366f1,#a855f7,#ef4444);animation:bi-shimmer 2.5s linear infinite;background-size:300% 100%;}
.bi-v2-thunder{background:linear-gradient(180deg,#fef08a,#facc15,#f59e0b,#451a03);animation:bi-flicker 0.9s ease-in-out infinite;--bi-glow:#facc15;}
.bi-v2-pyre{background:linear-gradient(180deg,#7f1d1d,#dc2626,#f97316,#fbbf24);animation:bi-flicker 1s ease-in-out infinite,bi-breathe 2s ease-in-out infinite;--bi-glow:#f97316;}
.bi-v2-frost{background:linear-gradient(135deg,#082f49,#0ea5e9,#7dd3fc,#bae6fd,#7dd3fc,#0ea5e9);animation:bi-shimmer 4s linear infinite;background-size:200% 100%;--bi-glow:#7dd3fc;}
.bi-v2-tide{background:linear-gradient(180deg,#0c4a6e,#0284c7,#38bdf8,#bae6fd);animation:bi-float 3s ease-in-out infinite,bi-pulse 2.5s ease-in-out infinite;--bi-glow:#38bdf8;}
.bi-v2-tsunami{background:linear-gradient(135deg,#0c0a3e,#1e3a8a,#0ea5e9,#67e8f9,#0ea5e9,#1e3a8a);animation:bi-shimmer 3s linear infinite,bi-breathe 3s ease-in-out infinite;background-size:200% 100%;}
.bi-v2-cyclone{background:conic-gradient(from 0deg,#1f2937,#6b7280,#e5e7eb,#6b7280,#1f2937);animation:bi-spin-inner 4s linear infinite;}
.bi-v2-magma{background:radial-gradient(circle at 50% 80%,#fef3c7 0%,#f97316 25%,#dc2626 50%,#7f1d1d 75%,#1a0500 100%);animation:bi-glow 2s ease-in-out infinite,bi-breathe 2.5s ease-in-out infinite;--bi-glow:#f97316;--bi-glow2:#dc2626;}
.bi-v2-crystal{background:linear-gradient(135deg,#67e8f9,#a5f3fc,#fff,#a5f3fc,#67e8f9,#06b6d4);animation:bi-shimmer 2.8s linear infinite;background-size:200% 200%;--bi-glow:#67e8f9;}
.bi-v2-allseeing{background:radial-gradient(circle at 50% 50%,#fef3c7 5%,#a855f7 25%,#581c87 60%,#0a0a0a 100%);animation:bi-pulse 3s ease-in-out infinite,bi-glow 4s ease-in-out infinite;--bi-glow:#a855f7;}
.bi-v2-mariposa{background:linear-gradient(135deg,#831843,#ec4899,#f9a8d4,#fbcfe8,#f9a8d4,#ec4899);animation:bi-shimmer 3s linear infinite,bi-float 2.5s ease-in-out infinite;background-size:200% 100%;}
.bi-v2-wyvern{background:linear-gradient(135deg,#022c22,#065f46,#10b981,#fde047,#10b981,#065f46);animation:bi-shimmer 3s linear infinite,bi-glow 2.5s ease-in-out infinite;background-size:200% 100%;--bi-glow:#10b981;--bi-glow2:#fde047;}
.bi-v2-mythic{background:linear-gradient(135deg,#fce7f3,#fbcfe8,#a5f3fc,#bfdbfe,#fbcfe8,#fce7f3);animation:bi-shimmer 4s linear infinite,bi-pulse 3s ease-in-out infinite;background-size:300% 100%;border:2px solid #f9a8d4aa;}
.bi-v2-emerald{background:radial-gradient(circle at 30% 30%,#a7f3d0 0%,#10b981 35%,#065f46 75%,#022c22 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 8px #10b98166;}
.bi-v2-sapphire{background:radial-gradient(circle at 30% 30%,#bfdbfe 0%,#3b82f6 35%,#1e3a8a 75%,#172554 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 8px #3b82f666;}
.bi-v2-ruby{background:radial-gradient(circle at 30% 30%,#fecaca 0%,#dc2626 35%,#7f1d1d 75%,#450a0a 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 8px #dc262666;}
.bi-v2-topaz{background:radial-gradient(circle at 30% 30%,#fef3c7 0%,#fbbf24 35%,#92400e 80%,#451a03 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 8px #fbbf2466;}
.bi-v2-amethyst{background:radial-gradient(circle at 30% 30%,#e9d5ff 0%,#a855f7 35%,#581c87 75%,#2e1065 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 10px #a855f766;}
.bi-v2-onyx{background:radial-gradient(circle at 30% 30%,#475569 0%,#1e293b 50%,#020617 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 6px #00000099;border:1px solid #334155;}
.bi-v2-pearl{background:radial-gradient(circle at 30% 30%,#fff 0%,#f1f5f9 40%,#cbd5e1 80%,#94a3b8 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 8px #cbd5e166;}
.bi-v2-jade{background:radial-gradient(circle at 35% 35%,#bbf7d0 0%,#34d399 40%,#047857 80%,#064e3b 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 6px #34d39966;}
.bi-v2-citrine{background:linear-gradient(135deg,#fef3c7,#fde047,#eab308,#a16207,#713f12);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 6px #eab30866;}
.bi-v2-amber{background:radial-gradient(circle at 30% 30%,#fed7aa 0%,#fb923c 40%,#9a3412 80%,#431407 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 8px #fb923c66;}
.bi-v2-coral{background:radial-gradient(circle at 30% 30%,#fed7d7 0%,#fb7185 40%,#be123c 80%,#4c0519 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 8px #fb718566;}
.bi-v2-turquoise{background:radial-gradient(circle at 30% 30%,#a5f3fc 0%,#06b6d4 40%,#155e75 80%,#083344 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 10px #06b6d466;}
.bi-v2-opal{background:linear-gradient(135deg,#fce7f3,#a5f3fc,#fef3c7,#bbf7d0,#fce7f3);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 8px #fce7f388;background-size:200% 200%;}
.bi-v2-obsidian{background:linear-gradient(135deg,#020617,#1e293b,#475569,#1e293b,#020617);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 6px #00000099;border:1px solid #1e293b;}
.bi-v2-moonstone{background:radial-gradient(circle at 35% 35%,#fff 5%,#e0e7ff 30%,#a5b4fc 65%,#4338ca 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 10px #a5b4fc88;}
.bi-v2-sunstone{background:radial-gradient(circle at 30% 30%,#fef3c7 0%,#f59e0b 40%,#9a3412 80%,#431407 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 8px #f59e0b66;}
.bi-v2-bloodstone{background:radial-gradient(circle at 30% 30%,#0f1f0a 0%,#166534 30%,#7f1d1d 65%,#450a0a 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 6px #7f1d1d88;}
.bi-v2-malachite{background:linear-gradient(135deg,#022c22,#047857,#10b981,#047857,#022c22,#047857);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 6px #10b98166;background-size:200% 100%;}
.bi-v2-rosequartz{background:radial-gradient(circle at 30% 30%,#fff,#fbcfe8 40%,#f472b6 80%,#9d174d 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 8px #f472b666;}
.bi-v2-tigereye{background:linear-gradient(180deg,#451a03,#a16207,#fbbf24,#a16207,#451a03);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 6px #fbbf2466;background-size:100% 200%;}
.bi-v2-gold{background:linear-gradient(180deg,#fde68a,#fbbf24,#a16207);border:1px solid #fbbf2488;}
.bi-v2-silver{background:linear-gradient(180deg,#f1f5f9,#cbd5e1,#64748b);border:1px solid #94a3b888;}
.bi-v2-bronze{background:linear-gradient(180deg,#fed7aa,#c2410c,#7c2d12);border:1px solid #c2410c88;}
.bi-v2-platinum{background:linear-gradient(180deg,#fff,#e2e8f0,#94a3b8);border:1px solid #cbd5e1aa;}
.bi-v2-copper{background:linear-gradient(180deg,#fed7aa,#ea580c,#7c2d12);border:1px solid #ea580c88;}
.bi-v2-iron{background:linear-gradient(180deg,#94a3b8,#475569,#1e293b);border:1px solid #47556988;}
.bi-v2-steel{background:linear-gradient(180deg,#cbd5e1,#64748b,#1e293b);border:1px solid #64748baa;}
.bi-v2-cobalt{background:linear-gradient(180deg,#bfdbfe,#2563eb,#1e3a8a);border:1px solid #2563eb88;}
.bi-v2-zinc{background:linear-gradient(180deg,#e4e4e7,#71717a,#27272a);border:1px solid #71717a88;}
.bi-v2-graphite{background:linear-gradient(180deg,#52525b,#27272a,#09090b);border:1px solid #3f3f4688;}
/* === BADGES_V2 END === */

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 6 — BADGE_ICON HYBRID TIER (20 gems w/ premium animations)
   Adds animation to the previously-static gem badge classes so they
   visually qualify for the hybrid tier alongside the misc metals.
   ═══════════════════════════════════════════════════════════════════════ */
.bi-v2-emerald{background:radial-gradient(circle at 30% 30%,#a7f3d0,#10b981 50%,#064e3b)!important;animation:bi-pulse 2.4s ease-in-out infinite,bi-glow 3s ease-in-out infinite;--bi-glow:#10b981;}
.bi-v2-sapphire{background:radial-gradient(circle at 35% 30%,#bfdbfe,#3b82f6 45%,#1e3a8a)!important;background-size:200% 200%;animation:bi-breathe 3s ease-in-out infinite,bi-shimmer 4s linear infinite;--bi-glow:#3b82f6;--bi-glow2:#bfdbfe;}
.bi-v2-ruby{background:radial-gradient(circle at 30% 30%,#fecaca,#ef4444 45%,#7f1d1d)!important;animation:bi-pulse 2s ease-in-out infinite,bi-glow 2.5s ease-in-out infinite;--bi-glow:#ef4444;}
.bi-v2-topaz{background:radial-gradient(circle at 35% 30%,#fde68a,#f59e0b 45%,#78350f)!important;background-size:200% 200%;animation:bi-shimmer 3.2s linear infinite,bi-float 4s ease-in-out infinite;--bi-glow:#f59e0b;}
.bi-v2-pearl{background:radial-gradient(circle at 30% 30%,#fff,#f1f5f9 40%,#cbd5e1)!important;animation:bi-float 3.6s ease-in-out infinite,bi-breathe 4s ease-in-out infinite;--bi-glow:#e2e8f0;--bi-glow2:#fff;}
.bi-v2-jade{background:radial-gradient(circle at 30% 30%,#86efac,#16a34a 50%,#14532d)!important;animation:bi-pulse 2.8s ease-in-out infinite,bi-breathe 3.5s ease-in-out infinite;--bi-glow:#16a34a;}
.bi-v2-citrine{background:linear-gradient(135deg,#fef3c7,#fde047,#facc15,#fde047,#fef3c7)!important;background-size:200% 200%;animation:bi-shimmer 2.6s linear infinite,bi-glow 3s ease-in-out infinite;--bi-glow:#facc15;}
.bi-v2-amber{background:radial-gradient(circle at 35% 30%,#fef3c7,#f59e0b 45%,#7c2d12)!important;animation:bi-glow 2.4s ease-in-out infinite,bi-breathe 3s ease-in-out infinite;--bi-glow:#f59e0b;--bi-glow2:#fbbf24;}
.bi-v2-coral{background:radial-gradient(circle at 30% 30%,#fed7aa,#fb7185 50%,#9f1239)!important;animation:bi-pulse 2.2s ease-in-out infinite,bi-glow 2.8s ease-in-out infinite;--bi-glow:#fb7185;}
.bi-v2-sunstone{background:radial-gradient(circle at 50% 50%,#fef3c7 5%,#fbbf24 30%,#f97316 60%,#7c2d12)!important;animation:bi-spin-inner 10s linear infinite,bi-glow 2.5s ease-in-out infinite;--bi-glow:#fbbf24;}
.bi-v2-malachite{background:linear-gradient(135deg,#064e3b,#10b981,#064e3b,#16a34a,#064e3b)!important;background-size:200% 100%;animation:bi-shimmer 4s linear infinite,bi-pulse 3s ease-in-out infinite;--bi-glow:#10b981;}
.bi-v2-rosequartz{background:radial-gradient(circle at 30% 30%,#fce7f3,#f9a8d4 45%,#9d174d)!important;animation:bi-breathe 3.2s ease-in-out infinite,bi-glow 3.5s ease-in-out infinite;--bi-glow:#f9a8d4;--bi-glow2:#fce7f3;}
.bi-v2-amethyst{background:radial-gradient(circle at 30% 30%,#e9d5ff,#a855f7 45%,#581c87)!important;animation:bi-pulse 2.6s ease-in-out infinite,bi-glow 3s ease-in-out infinite;--bi-glow:#a855f7;}
.bi-v2-onyx{background:radial-gradient(circle at 35% 30%,#475569,#1e293b 45%,#020617)!important;animation:bi-breathe 4s ease-in-out infinite,bi-flicker 5s ease-in-out infinite;--bi-glow:#475569;--bi-glow2:#1e293b;}
.bi-v2-turquoise{background:radial-gradient(circle at 30% 30%,#a5f3fc,#06b6d4 45%,#164e63)!important;background-size:200% 200%;animation:bi-shimmer 3.4s linear infinite,bi-float 3s ease-in-out infinite;--bi-glow:#06b6d4;}
.bi-v2-opal{background:conic-gradient(from 0deg,#fbcfe8,#a5f3fc,#bbf7d0,#fef9c3,#fbcfe8)!important;background-size:200% 200%;animation:bi-rgb 5s linear infinite,bi-shimmer 3s linear infinite;--bi-glow:#fff;}
.bi-v2-obsidian{background:radial-gradient(circle at 30% 30%,#1f2937,#0a0a0a 50%,#000)!important;animation:bi-flicker 3s ease-in-out infinite,bi-glow 4s ease-in-out infinite;--bi-glow:#374151;--bi-glow2:#1f2937;}
.bi-v2-moonstone{background:radial-gradient(circle at 35% 30%,#f1f5f9,#cbd5e1 40%,#64748b)!important;background-size:200% 200%;animation:bi-float 3s ease-in-out infinite,bi-glow 3.5s ease-in-out infinite,bi-shimmer 4s linear infinite;--bi-glow:#cbd5e1;--bi-glow2:#f1f5f9;}
.bi-v2-bloodstone{background:radial-gradient(circle at 30% 30%,#fca5a5,#dc2626 35%,#450a0a 70%,#1a0000)!important;animation:bi-flicker 1.8s ease-in-out infinite,bi-pulse 2.5s ease-in-out infinite,bi-glow 3s ease-in-out infinite;--bi-glow:#dc2626;}
.bi-v2-tigereye{background:linear-gradient(135deg,#451a03,#92400e,#f59e0b,#fbbf24,#f59e0b,#92400e,#451a03)!important;background-size:200% 100%;animation:bi-shimmer 3s linear infinite,bi-glow 2.8s ease-in-out infinite;--bi-glow:#f59e0b;--bi-glow2:#fbbf24;}
/* === BADGES_V2_HYBRID END === */


/* ═══════════════════════════════════════════════════════════════════════
   PHASE 6 — SIGNATURE LINE STYLES (50 sig-* classes)
   20 animated · 20 hybrid · 10 misc. Applies via .signature-line.sig-X
   when a user has equipped_signature_id set. Wins via specificity.
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes sig-shimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
@keyframes sig-pulse-soft { 0%,100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes sig-glow-soft { 0%,100% { text-shadow: 0 0 3px var(--sig-glow,transparent); } 50% { text-shadow: 0 0 9px var(--sig-glow,transparent), 0 0 14px var(--sig-glow2,transparent); } }
@keyframes sig-flicker { 0%,18%,22%,25%,53%,57%,100% { opacity:1; } 20%,24%,55% { opacity:.55; } }
@keyframes sig-hue-rotate { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
@keyframes sig-fade { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes sig-marquee { 0% { background-position: 100% center; } 100% { background-position: -100% center; } }
@keyframes sig-rainbow { 0% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(180deg); } 100% { filter: hue-rotate(360deg); } }

/* Shared base for all premium signatures (animated + hybrid). Plain misc
   sigs only get the color — inherit the muted italic from .signature-line.
   Note: profile.php applies sig-* class to the inline-styled signature div,
   so we need !important on color/font to win against inline color. */
[class*=" sig-"], [class^="sig-"] {
    font-style: italic;
    font-weight: 500;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
}

/* ─── ANIMATED tier (20) — single-effect ─────────────────────────────── */
.sig-block-speed       { color:#67e8f9!important; animation:sig-glow-soft 2.6s ease-in-out infinite; --sig-glow:#22d3ee; }
.sig-sealed-receipt    { color:#fde047!important; animation:sig-glow-soft 2.8s ease-in-out infinite; --sig-glow:#facc15; }
.sig-private-craft     { color:#86efac!important; animation:sig-pulse-soft 2.2s ease-in-out infinite; }
.sig-soft-wallet       { color:#93c5fd!important; animation:sig-fade 3s ease-in-out infinite; }
.sig-trust-trade       { background:linear-gradient(90deg,#cbd5e1,#fff,#cbd5e1,#fff,#cbd5e1)!important; background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent!important; animation:sig-shimmer 3.2s linear infinite; }
.sig-quiet-marketing   { color:#c4b5fd!important; animation:sig-pulse-soft 2.6s ease-in-out infinite; }
.sig-twice-a-week      { color:#fda4af!important; animation:sig-glow-soft 2.4s ease-in-out infinite; --sig-glow:#fb7185; }
.sig-cycle-price       { color:#fbbf24!important; animation:sig-glow-soft 2.6s ease-in-out infinite; --sig-glow:#f59e0b; }
.sig-network-manners   { color:#5eead4!important; animation:sig-pulse-soft 2.4s ease-in-out infinite; }
.sig-reliable-posture  { background:linear-gradient(90deg,#94a3b8,#e2e8f0,#94a3b8)!important; background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent!important; animation:sig-shimmer 3.6s linear infinite; }
.sig-no-subpoena       { color:#fca5a5!important; animation:sig-flicker 3s ease-in-out infinite; }
.sig-early-always      { color:#a3e635!important; animation:sig-glow-soft 2.5s ease-in-out infinite; --sig-glow:#84cc16; }
.sig-plain-to-cipher   { background:linear-gradient(90deg,#a7f3d0,#d1fae5,#a7f3d0)!important; background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent!important; animation:sig-shimmer 3s linear infinite; }
.sig-address-contract  { color:#fdba74!important; animation:sig-pulse-soft 2.2s ease-in-out infinite; }
.sig-block-witness     { color:#a5b4fc!important; animation:sig-glow-soft 2.8s ease-in-out infinite; --sig-glow:#818cf8; }
.sig-be-delivery       { background:linear-gradient(90deg,#fbcfe8,#fff,#fbcfe8)!important; background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent!important; animation:sig-shimmer 3.4s linear infinite; }
.sig-big-silence       { color:#cbd5e1!important; animation:sig-fade 3.2s ease-in-out infinite; }
.sig-first-to-ship     { color:#7dd3fc!important; animation:sig-pulse-soft 2s ease-in-out infinite; }
.sig-made-up-mind      { color:#fef08a!important; animation:sig-glow-soft 2.4s ease-in-out infinite; --sig-glow:#facc15; }
.sig-order-resume      { background:linear-gradient(90deg,#c4b5fd,#e9d5ff,#c4b5fd)!important; background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent!important; animation:sig-shimmer 3s linear infinite; }

/* ─── HYBRID tier (20) — multi-effect, premium ───────────────────────── */
.sig-confirmation-count { background:linear-gradient(90deg,#fbbf24,#fde047,#fff,#fde047,#fbbf24)!important; background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent!important; animation:sig-shimmer 2.6s linear infinite, sig-glow-soft 3s ease-in-out infinite; --sig-glow:#fbbf24; text-shadow:0 0 4px rgba(251,191,36,.4)!important; }
.sig-clean-quiet-square { color:#fff!important; animation:sig-glow-soft 2.4s ease-in-out infinite, sig-flicker 5s ease-in-out infinite; --sig-glow:#a5f3fc; --sig-glow2:#67e8f9; }
.sig-opinion-warranty   { background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e,#06b6d4,#6366f1,#a855f7,#ef4444)!important; background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent!important; animation:sig-shimmer 4s linear infinite, sig-rainbow 6s linear infinite; }
.sig-slow-network       { color:#7dd3fc!important; animation:sig-pulse-soft 2s ease-in-out infinite, sig-glow-soft 2.4s ease-in-out infinite; --sig-glow:#0ea5e9; --sig-glow2:#38bdf8; }
.sig-test-then-trust    { background:linear-gradient(90deg,#fde68a,#fbbf24,#f59e0b,#fbbf24,#fde68a)!important; background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent!important; animation:sig-shimmer 2.8s linear infinite, sig-glow-soft 3s ease-in-out infinite; --sig-glow:#f59e0b; }
.sig-always-arrives     { color:#86efac!important; animation:sig-glow-soft 2.4s ease-in-out infinite, sig-pulse-soft 2.6s ease-in-out infinite; --sig-glow:#22c55e; --sig-glow2:#86efac; }
.sig-black-box          { color:#dc2626!important; animation:sig-flicker 2.4s ease-in-out infinite, sig-glow-soft 2.8s ease-in-out infinite; --sig-glow:#7f1d1d; --sig-glow2:#dc2626; }
.sig-escrow-closes      { background:linear-gradient(90deg,#7c3aed,#a855f7,#c084fc,#a855f7,#7c3aed)!important; background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent!important; animation:sig-shimmer 3s linear infinite, sig-pulse-soft 2.4s ease-in-out infinite; }
.sig-no-fine-print      { color:#4ade80!important; animation:sig-glow-soft 2s ease-in-out infinite, sig-pulse-soft 2.5s ease-in-out infinite; --sig-glow:#16a34a; --sig-glow2:#4ade80; text-shadow:0 0 6px rgba(74,222,128,.5)!important; }
.sig-real-and-real      { background:linear-gradient(90deg,#ef4444,#f59e0b,#fbbf24,#22c55e,#06b6d4,#6366f1,#a855f7,#ef4444)!important; background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent!important; animation:sig-shimmer 3.5s linear infinite, sig-rainbow 8s linear infinite; }
.sig-correct-caution    { color:#fbbf24!important; animation:sig-flicker 3.2s ease-in-out infinite, sig-glow-soft 2.6s ease-in-out infinite; --sig-glow:#f59e0b; --sig-glow2:#fde047; }
.sig-twice-read         { background:linear-gradient(90deg,#ec4899,#f472b6,#fbcfe8,#f472b6,#ec4899)!important; background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent!important; animation:sig-shimmer 2.8s linear infinite, sig-pulse-soft 2.4s ease-in-out infinite; }
.sig-soft-handshake     { background:linear-gradient(90deg,#f9a8d4,#c4b5fd,#a5b4fc,#c4b5fd,#f9a8d4)!important; background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent!important; animation:sig-shimmer 3.4s linear infinite, sig-glow-soft 3s ease-in-out infinite; --sig-glow:#c4b5fd; }
.sig-ledger-truth       { background:linear-gradient(90deg,#78350f,#f59e0b,#fbbf24,#fef3c7,#fbbf24,#f59e0b,#78350f)!important; background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent!important; animation:sig-shimmer 2.5s linear infinite, sig-glow-soft 3s ease-in-out infinite; --sig-glow:#fbbf24; text-shadow:0 0 5px rgba(251,191,36,.4)!important; }
.sig-block-counter      { color:#67e8f9!important; animation:sig-pulse-soft 2.2s ease-in-out infinite, sig-glow-soft 2.6s ease-in-out infinite; --sig-glow:#06b6d4; --sig-glow2:#67e8f9; text-shadow:0 0 4px rgba(103,232,249,.5)!important; }
.sig-sign-in-silence    { background:linear-gradient(90deg,#fef3c7,#fff,#fef3c7,#fbbf24,#fef3c7)!important; background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent!important; animation:sig-shimmer 3s linear infinite, sig-flicker 4s ease-in-out infinite; }
.sig-escrow-only        { background:linear-gradient(90deg,#7f1d1d,#dc2626,#fb7185,#dc2626,#7f1d1d)!important; background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent!important; animation:sig-shimmer 2.8s linear infinite, sig-glow-soft 3s ease-in-out infinite; --sig-glow:#fb7185; }
.sig-doors-stay         { color:#bae6fd!important; animation:sig-glow-soft 2.6s ease-in-out infinite, sig-pulse-soft 3s ease-in-out infinite; --sig-glow:#0ea5e9; --sig-glow2:#7dd3fc; text-shadow:0 0 4px rgba(125,211,252,.5)!important; }
.sig-first-review       { background:linear-gradient(90deg,#ef4444,#f59e0b,#fbbf24,#22c55e,#06b6d4,#a855f7,#ef4444)!important; background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent!important; animation:sig-shimmer 3.6s linear infinite, sig-glow-soft 2.8s ease-in-out infinite; --sig-glow:#fff; }
.sig-proof-of-ship      { background:linear-gradient(90deg,#0d9488,#5eead4,#a7f3d0,#5eead4,#0d9488)!important; background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent!important; animation:sig-shimmer 3s linear infinite, sig-glow-soft 2.6s ease-in-out infinite; --sig-glow:#5eead4; text-shadow:0 0 5px rgba(94,234,212,.4)!important; }

/* ─── MISC tier (10) — solid color, no animation ─────────────────────── */
.sig-just-ship         { color:#94a3b8!important; }
.sig-period-           { color:#fbbf24!important; }
.sig-sealed-twice      { color:#f9a8d4!important; }
.sig-tracking-truth    { color:#86efac!important; }
.sig-pgp-or-bust       { color:#a5b4fc!important; }
.sig-stealth-grade     { color:#cbd5e1!important; }
.sig-drop-confirmed    { color:#fda4af!important; }
.sig-not-for-sale      { color:#fca5a5!important; }
.sig-encrypted-receipt { color:#67e8f9!important; }
.sig-wire-first        { color:#fbcfe8!important; }
/* === SIGNATURES END === */

/* === ONLINE BADGES V2 — 25 picker variants (free, /shop?type=online_badge) ===
   Each variant only paints when .is-online is present. .is-offline always
   wins by virtue of the variant rules requiring .is-online together. */

@keyframes od-pulse   { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.35);opacity:.55;} }
@keyframes od-ripple  { 0%{box-shadow:0 0 0 0 var(--od-c,#10b981);} 70%{box-shadow:0 0 0 7px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }
@keyframes od-spin    { from{transform:rotate(0);} to{transform:rotate(360deg);} }
@keyframes od-blink   { 0%,100%{opacity:1;} 50%{opacity:.25;} }
@keyframes od-flicker { 0%,18%,22%,25%,53%,57%,100%{opacity:1;filter:none;} 20%,24%,55%{opacity:.55;filter:brightness(1.4);} }
@keyframes od-breath  { 0%,100%{opacity:.35;transform:scale(.85);} 50%{opacity:.95;transform:scale(1.05);} }
@keyframes od-scan    { 0%{background-position:0 0;} 100%{background-position:0 8px;} }

.online-dot.od-v1.is-online  { background:#22c55e; box-shadow:0 0 6px #22c55e; }
.online-dot.od-v2.is-online  { background:#10b981; box-shadow:0 0 8px #10b981; animation:od-pulse 1.6s ease-in-out infinite; }
.online-dot.od-v3.is-online  { background:#06b6d4; box-shadow:0 0 8px #06b6d4; animation:od-pulse 1.6s ease-in-out infinite; }
.online-dot.od-v4.is-online  { background:#ec4899; box-shadow:0 0 8px #ec4899; animation:od-pulse 1.6s ease-in-out infinite; }
.online-dot.od-v5.is-online  { background:#fbbf24; box-shadow:0 0 8px #fbbf24; animation:od-pulse 1.6s ease-in-out infinite; }
.online-dot.od-v6.is-online  { background:transparent; border:2px solid #10b981; width:10px; height:10px; box-shadow:inset 0 0 0 2px #0a0a0a; }
.online-dot.od-v7.is-online  { --od-c:#3b82f6; background:#3b82f6; animation:od-ripple 1.8s ease-out infinite; }
.online-dot.od-v8.is-online  { --od-c:#f472b6; background:#f472b6; animation:od-ripple 1.8s ease-out infinite; }
.online-dot.od-v9.is-online  { background:transparent; border:2px solid #22c55e; width:10px; height:10px; box-shadow:0 0 0 1px #0a0a0a, 0 0 0 3px #22c55e88; }
.online-dot.od-v10.is-online { background:#22c55e; border-radius:0; width:9px; height:9px; box-shadow:1px 1px 0 #14532d; }
.online-dot.od-v11.is-online { background:#a855f7; border-radius:0; width:9px; height:9px; transform:rotate(45deg); box-shadow:0 0 6px #a855f7; }
.online-dot.od-v12.is-online { background:#fbbf24; width:11px; height:11px; border-radius:0; box-shadow:0 0 8px #fbbf24; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.online-dot.od-v13.is-online { background:#fb7185; width:11px; height:10px; border-radius:0; box-shadow:0 0 6px #fb7185; clip-path:polygon(50% 100%,0 38%,18% 12%,50% 30%,82% 12%,100% 38%); }
.online-dot.od-v14.is-online { background:#34d399; width:11px; height:10px; border-radius:0; box-shadow:0 0 6px #34d399; clip-path:polygon(50% 0,100% 100%,0 100%); }
.online-dot.od-v15.is-online { background:#5eead4; width:11px; height:10px; border-radius:0; box-shadow:0 0 6px #5eead4; clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.online-dot.od-v16.is-online { background:conic-gradient(from 0deg,#ef4444,#f97316,#fbbf24,#22c55e,#06b6d4,#6366f1,#a855f7,#ef4444); width:10px; height:10px; animation:od-spin 3s linear infinite; box-shadow:0 0 6px rgba(255,255,255,.3); }
.online-dot.od-v17.is-online { background:radial-gradient(circle at 50% 70%,#fef3c7,#f97316 55%,#7f1d1d); box-shadow:0 0 6px #f97316; animation:od-flicker 1.2s ease-in-out infinite; }
.online-dot.od-v18.is-online { background:radial-gradient(circle at 35% 35%,#fff,#a5f3fc 55%,#0ea5e9); box-shadow:0 0 8px #67e8f9; }
.online-dot.od-v19.is-online { background:#facc15; box-shadow:0 0 8px #facc15, 0 0 14px #fde047; animation:od-flicker 0.9s ease-in-out infinite; }
.online-dot.od-v20.is-online { background:#e5e7eb; opacity:.6; box-shadow:0 0 6px #cbd5e1; animation:od-breath 2.4s ease-in-out infinite; }
.online-dot.od-v21.is-online { background:#ec4899; box-shadow:0 0 4px #ec4899, 0 0 10px #f472b6, 0 0 16px #f9a8d4; }
.online-dot.od-v22.is-online { background:#22d3ee; box-shadow:0 0 4px #22d3ee, 0 0 10px #67e8f9, 0 0 16px #a5f3fc; }
.online-dot.od-v23.is-online { background:#22c55e; box-shadow:0 0 6px #22c55e; background-image:linear-gradient(transparent 50%, rgba(0,0,0,.35) 50%); background-size:100% 3px; animation:od-scan 0.8s linear infinite; }
.online-dot.od-v24.is-online { background:#0a0a0a; border:2px solid #facc15; width:10px; height:10px; box-shadow:0 0 8px #facc15; }
.online-dot.od-v25.is-online { background:radial-gradient(circle,#fff 10%,#fde047 30%,#f97316 65%,#7f1d1d 100%); width:11px; height:11px; box-shadow:0 0 8px #fbbf24, 0 0 14px #f97316; animation:od-pulse 1.4s ease-in-out infinite; }

/* Reduced-motion: kill animations on online dots */
@media (prefers-reduced-motion: reduce) {
    .online-dot[class*="od-v"] { animation: none !important; }
}
/* === ONLINE BADGES V2 END === */

/* === ONLINE BADGES V2 — variants 26-50 (paid, $10 each via shop_items) === */
@keyframes od-shimmer { 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} }

.online-dot.od-v26.is-online { background:#c084fc; box-shadow:0 0 8px #c084fc; animation:od-pulse 1.6s ease-in-out infinite; }
.online-dot.od-v27.is-online { background:#86efac; box-shadow:0 0 8px #86efac; animation:od-pulse 1.6s ease-in-out infinite; }
.online-dot.od-v28.is-online { background:#dc2626; box-shadow:0 0 8px #dc2626; animation:od-pulse 1.6s ease-in-out infinite; }
.online-dot.od-v29.is-online { background:#6366f1; box-shadow:0 0 8px #6366f1; animation:od-pulse 1.6s ease-in-out infinite; }
.online-dot.od-v30.is-online { background:#fb923c; box-shadow:0 0 8px #fb923c; animation:od-pulse 1.6s ease-in-out infinite; }
.online-dot.od-v31.is-online { background:#f472b6; border-radius:0; width:9px; height:9px; box-shadow:1px 1px 0 #831843; }
.online-dot.od-v32.is-online { background:#22d3ee; border-radius:0; width:9px; height:9px; box-shadow:1px 1px 0 #155e75; }
.online-dot.od-v33.is-online { background:#a3e635; border-radius:0; width:9px; height:9px; box-shadow:1px 1px 0 #365314; }
.online-dot.od-v34.is-online { background:#ef4444; border-radius:0; width:9px; height:9px; transform:rotate(45deg); box-shadow:0 0 6px #ef4444; }
.online-dot.od-v35.is-online { background:#3b82f6; border-radius:0; width:9px; height:9px; transform:rotate(45deg); box-shadow:0 0 6px #3b82f6; }
.online-dot.od-v36.is-online { background:#10b981; border-radius:0; width:9px; height:9px; transform:rotate(45deg); box-shadow:0 0 6px #10b981; }
.online-dot.od-v37.is-online { background:transparent; border:2px solid #fbbf24; width:10px; height:10px; box-shadow:0 0 0 1px #0a0a0a, 0 0 0 4px rgba(251,191,36,.4); }
.online-dot.od-v38.is-online { background:transparent; border:2px solid #d1d5db; width:10px; height:10px; box-shadow:0 0 0 1px #0a0a0a, 0 0 0 4px rgba(209,213,219,.4); }
.online-dot.od-v39.is-online { background:transparent; border:2px solid #fb7185; width:10px; height:10px; box-shadow:0 0 0 1px #0a0a0a, 0 0 0 4px rgba(251,113,133,.4); }
.online-dot.od-v40.is-online { --od-c:#a855f7; background:#a855f7; animation:od-ripple 1.8s ease-out infinite; }
.online-dot.od-v41.is-online { --od-c:#fbbf24; background:#fbbf24; animation:od-ripple 1.8s ease-out infinite; }
.online-dot.od-v42.is-online { --od-c:#34d399; background:#34d399; animation:od-ripple 1.8s ease-out infinite; }
.online-dot.od-v43.is-online { background:#22d3ee; width:11px; height:11px; border-radius:0; box-shadow:0 0 8px #22d3ee; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.online-dot.od-v44.is-online { background:#ec4899; width:11px; height:11px; border-radius:0; box-shadow:0 0 8px #ec4899; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.online-dot.od-v45.is-online { background:#fbbf24; width:11px; height:10px; border-radius:0; box-shadow:0 0 6px #fbbf24; clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.online-dot.od-v46.is-online { background:#a855f7; width:11px; height:10px; border-radius:0; box-shadow:0 0 6px #a855f7; clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.online-dot.od-v47.is-online { background:conic-gradient(from 0deg,#7c3aed,#ec4899,#06b6d4,#7c3aed); width:11px; height:11px; animation:od-spin 6s linear infinite; box-shadow:0 0 8px #a855f7; }
.online-dot.od-v48.is-online { background:radial-gradient(circle at 50% 50%,#fff,#fde047 25%,#f97316 55%,#7f1d1d); width:11px; height:11px; box-shadow:0 0 10px #fbbf24, 0 0 16px #f97316; animation:od-flicker 1.2s ease-in-out infinite; }
.online-dot.od-v49.is-online { background:linear-gradient(90deg,#06b6d4,#22c55e,#a855f7,#ec4899,#06b6d4); background-size:300% 100%; width:11px; height:10px; border-radius:5px; animation:od-shimmer 3s linear infinite; box-shadow:0 0 6px rgba(168,85,247,.45); }
.online-dot.od-v50.is-online { background:#000; border:2px solid #a855f7; width:11px; height:11px; box-shadow:0 0 8px #a855f7, inset 0 0 4px #a855f7; }
/* === ONLINE BADGES V2 paid set END === */

/* Nav "✍ N typing" pill pulse — drives attention to the server-rendered
   typing notice in the topnav/drawer chat link. Pure CSS, runs without JS. */
@keyframes nav-typing-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: .55; transform: scale(.94); }
}
/* Floating chat-bubble typing flash — overlays the "💬 Chat" footer bubble
   when at least one user is typing in global chat. Pure CSS. */
.wop-typing-flash {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 6px; padding: 1px 7px; border-radius: 10px;
    font-size: 10px; font-weight: 800; letter-spacing: .01em;
    color: #fff; background: linear-gradient(135deg,#5b3fd0,#3b6fd8);
    border: 1px solid rgba(255,255,255,.25);
    box-shadow: 0 2px 8px rgba(91,63,208,.45);
    animation: nav-typing-pulse 1.2s ease-in-out infinite;
}

/* ──────────────────────────────────────────────────────────────────
   Smoothness pass — global polish layer, gated on prefers-reduced-motion.
   Adds tactile feedback, buttery theme transitions, momentum scrolling,
   page fade-in, and smoother focus. All rules are additive and respect
   the user's OS-level reduced-motion preference (TOR-friendly, no JS).
   ────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    /* Buttery theme crossfade — when data-theme flips, color/background/
       border tween instead of snapping. Scoped to props that actually
       change with theme so animation cost stays cheap. */
    html, body, .card, .btn, .nav, .topnav, .sidebar-box,
    .bottom-nav, .drawer, .pill, .badge, .chip, input, select, textarea {
        transition: background-color .28s cubic-bezier(.4,0,.2,1),
                    color            .28s cubic-bezier(.4,0,.2,1),
                    border-color     .28s cubic-bezier(.4,0,.2,1),
                    box-shadow       .28s cubic-bezier(.4,0,.2,1);
    }
    /* Tactile press — every clickable surface dips 1–2% on :active so
       taps feel real on touch devices instead of dead. */
    .btn:active, a.btn:active,
    .card[role="button"]:active, .pill:active, .chip:active,
    .bottom-nav a:active, .drawer-nav a:active {
        transform: scale(.97);
        transition: transform .08s ease-out;
    }
    /* Hover lift on cards that are interactive (links/buttons inside). */
    .card:has(a:hover):not(.no-lift),
    .card:has(button:hover):not(.no-lift) {
        transform: translateY(-1px);
        box-shadow: 0 6px 22px rgba(0,0,0,.18);
        transition: transform .18s ease-out, box-shadow .18s ease-out;
    }
    /* First-paint page fade — main content slides in 6px and fades
       once per navigation. Cheap, GPU-only, no layout shift. */
    main, .container > .card:first-child {
        animation: page-fade-in .32s cubic-bezier(.2,.7,.3,1) both;
    }
    @keyframes page-fade-in {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: none; }
    }
}
/* Smooth scrolling + iOS momentum — applied regardless of motion pref
   because they're scroll mechanics, not animations. overscroll-behavior
   contains rubber-banding so drawer/sidebar opens don't scroll the page
   behind them. */
html { scroll-behavior: smooth; }
body, .drawer, .scroll, [class*="-scroll"] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
/* Tighter focus ring — visible, not jarring. Replaces the browser's
   default blue outline with a theme-aware ring + small offset. */
:focus-visible {
    outline: 2px solid var(--accent2, #6c8fff);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Honor reduced motion — kill every transition/animation we added
   above plus the existing pulse/fade animations. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:  0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior:     auto !important;
    }
}

/* ── Hybrid duotone icons (purple + blue, red accents) ──────────────
   Inline SVG replacements for emoji, injected by ic_filter_html().
   Fixed palette (does NOT inherit theme colours) so icons stay
   consistent across all 31 themes. Static + JS-free + reduced-motion
   safe. */
.ic{
    display:inline-flex;align-items:center;justify-content:center;
    width:1.05em;height:1.05em;vertical-align:-0.18em;line-height:0;
    flex-shrink:0;
    --ic-line:#5b73ff;   /* blue / indigo line */
    --ic-soft:#a855f7;   /* soft purple fill   */
    --ic-accent:#ef4444; /* hint of red        */
}
.ic svg{width:100%;height:100%;display:block;overflow:visible}
.ic .d0{fill:none;stroke:var(--ic-line);stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
.ic .d1{fill:var(--ic-soft);opacity:.28;stroke:none}
.ic-accent .d0{stroke:var(--ic-accent)}
.ic-accent .d1{fill:var(--ic-accent);opacity:.22}

/* ─── Content-fit safeguards ──────────────────────────────────
   Keep long, unbroken strings (usernames, URLs, PGP blocks) from
   bursting out of rounded content panels, and let flex children
   shrink instead of forcing horizontal overflow. */
.forum-header, .forum-cat-card, .forum-thread-header, .forum-post,
.forum-reply-box, .onboard-card, .acct-progress, .welcome-guide-card,
.st-tile, .card {
    overflow-wrap: break-word;
    word-break: break-word;
}
.forum-post, .forum-cat-card, .welcome-guide-card { min-width: 0; }
.forum-post > *, .forum-cat-card > *, .welcome-guide-card > * { min-width: 0; }
.st-tile { overflow: hidden; }