@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Manrope:wght@300..800&display=swap');

        :root {
            --bg-base: #0f172a;
            --bg-card: #1e293b;
            --bg-input: #0f172a;
            --border: #334155;
            --border-soft: rgba(148,163,184,0.10);
            --text: #f8fafc;
            --muted: #64748b;
            --accent: #38bdf8;
            --accent-hover: #0ea5e9;
            /* Second accent — warm pink for emotional/aspirational moments
               (achievements, level-ups, XP/aura gains, friend-of-the-week,
               post-call CTAs). Reserves the cool sky-blue accent for
               neutral primary actions so the two colors carry real
               semantic weight instead of being interchangeable. */
            --accent-warm: #f472b6;
            --accent-warm-hover: #ec4899;
            --accent-warm-glow: rgba(244,114,182,0.30);
            --emerald: #10b981;
            --emerald-dark: #059669;
            --danger: #ef4444;
            --danger-dark: #dc2626;
            --green: #22c55e;
            --btn-radius: 8px;
            --btn-pad-y: 12px;
            --btn-pad-x: 18px;
            --btn-h: 44px;
            /* Type system — display for headlines/logo, body for everything else.
               Variable fonts (Bricolage Grotesque + Manrope) keep payload small
               while giving the full weight range. System fallback covers offline
               + slow-link cases without layout shift. */
            --font-display: 'Bricolage Grotesque', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            --font-body: 'Manrope', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            /* Radius scale — three semantic steps replace the prior ad-hoc 5. */
            --r-sm: 6px;
            --r-md: 12px;
            --r-lg: 16px;
            --r-pill: 999px;
            /* Elevation — layered shadows for real depth instead of flat blurs. */
            --shadow-card: 0 10px 30px -12px rgba(0,0,0,0.6), 0 4px 10px -2px rgba(0,0,0,0.32);
            --shadow-modal: 0 28px 64px -16px rgba(0,0,0,0.72), 0 8px 18px -4px rgba(0,0,0,0.42);
            --shadow-cta: 0 10px 28px -6px rgba(56,189,248,0.42), 0 2px 6px rgba(0,0,0,0.3);
        }
        /* Light theme — inverts surface tokens, keeps the accent/danger
           hues. Toggled via `body.theme-light` (settings panel switch).
           Atmosphere gradients lighten too so the warm/cool ambient
           bloats stay visible on a light canvas. */
        body.theme-light {
            --bg-base: #f8fafc;
            --bg-card: #ffffff;
            --bg-input: #f1f5f9;
            --border: #e2e8f0;
            --border-soft: rgba(15,23,42,0.06);
            --text: #0f172a;
            --muted: #64748b;
            --accent-hover: #0284c7;
            --shadow-card: 0 10px 30px -16px rgba(15,23,42,0.18), 0 2px 6px -2px rgba(15,23,42,0.08);
            --shadow-modal: 0 28px 64px -20px rgba(15,23,42,0.24), 0 6px 14px -4px rgba(15,23,42,0.12);
            --shadow-cta: 0 10px 28px -8px rgba(56,189,248,0.40), 0 2px 6px rgba(15,23,42,0.1);
        }
        body.theme-light {
            background-image:
                radial-gradient(1100px 600px at 85% -8%, rgba(56,189,248,0.10), transparent 60%),
                radial-gradient(900px 520px at -8% 108%, rgba(244,114,182,0.08), transparent 60%);
        }
        /* Light-mode targeted overrides for surfaces whose dark-mode
           values don't translate (low-contrast text, dark backdrops on
           light pages, drop-shadows that disappear on white cards). */
        body.theme-light .aura-chip {
            background: linear-gradient(135deg, rgba(245,158,11,0.20), rgba(168,85,247,0.18));
            border-color: rgba(217,119,6,0.55);
            color: #b45309;  /* amber-700 — readable on light bg */
            box-shadow: 0 0 10px rgba(245,158,11,0.22);
        }
        body.theme-light .aura-chip .aura-chip-icon {
            filter: drop-shadow(0 0 4px rgba(245,158,11,0.55));
        }
        /* Modal overlays — light translucent layer instead of dark blue
           dim so the floating sheet doesn't feel like a black void over
           a white page. */
        body.theme-light .profile-modal,
        body.theme-light .modal-overlay { background-color: rgba(15,23,42,0.32); }
        body.theme-light .profile-card { box-shadow: var(--shadow-modal); }
        /* Card hover border is sky-tinted; in light mode bump opacity so
           it's actually visible against the white surface. */
        body.theme-light .post-card:hover { border-color: rgba(14,165,233,0.55); }
        /* Branding tagline + various muted-text rows need a darker muted
           in light mode for legibility. */
        body.theme-light .branding-tagline,
        body.theme-light .empty-text,
        body.theme-light .acct-list-sub { color: #475569; }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        /* html/body overflow MUST stay scrollable for mobile pull-to-refresh
           to work. Modal scroll-bleed is handled per-modal via the
           `body.modal-open` class added when a full-screen overlay opens. */
        html {
            height: 100%; overflow-y: auto; overscroll-behavior-y: auto;
            /* Lock font scaling on mobile. Without this, Safari iOS and
               older Android Chrome will inflate text in landscape /
               accessibility-zoom modes, breaking the carefully-tuned
               sizes throughout the app. text-size-adjust: 100% honors
               user system zoom but blocks the silent-inflate behavior. */
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }
        body {
            font-family: var(--font-body);
            font-feature-settings: 'ss01', 'cv01', 'cv11';
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            display: flex; justify-content: center; align-items: center;
            min-height: 100vh; background-color: var(--bg-base); color: var(--text);
            /* Atmospheric background — two soft radial bloats (one cool
               sky-blue from the top-right, one warm pink from the bottom-
               left) lift the canvas out of flat-slate mode. Background is
               fixed so the gradients don't scroll with content; very low
               opacity (5-7%) so they read as ambience, not decoration. */
            background-image:
                radial-gradient(1100px 600px at 85% -8%, rgba(56,189,248,0.07), transparent 60%),
                radial-gradient(900px 520px at -8% 108%, rgba(244,114,182,0.05), transparent 60%);
            background-attachment: fixed;
            padding: 20px;
            overflow-x: hidden; overflow-y: auto;
            overscroll-behavior-y: auto;
        }
        /* When a full-screen modal is open, lock body scroll so the modal
           is what scrolls — but keep the lock only while open so PtR
           works the rest of the time. */
        body.modal-open { overflow: hidden; overscroll-behavior: contain; }

        /* Native-tap behavior on every interactive surface.
           - touch-action: manipulation tells the browser this element only
             needs panning + pinch-zoom — it can skip the 300ms wait for a
             potential double-tap-to-zoom. On Android this is the difference
             between "feels like a website" and "feels like an app".
           - -webkit-tap-highlight-color is already transparent on body, but
             repeating here makes it explicit on the things that get tapped
             most so the grey flash doesn't reappear via inherited overrides.
           Selector covers semantic buttons, ARIA buttons, and the inline-
           onclick pattern that this codebase uses heavily on rows and
           cards (.thread-row, .acct-list-row, .settings-card, etc.). */
        button, [role="button"], [onclick],
        .more-row, .more-bug-btn,
        .acct-list-row, .settings-card,
        .lb-tab, .fyp-tab, .store-tabs button {
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }

        /* CSS containment on repeated list items. Each card becomes its
           own layout / paint / style boundary, so scrolling a long list
           (50+ Spotlight posts, 40 badges, 100+ leaderboard entries)
           doesn't trigger reflow on the rest of the modal — only the
           visible cards repaint. Big perceived smoothness win on
           low-end Android devices. `contain: content` = layout + paint
           + style without restricting size. We avoid `contain: strict`
           because items have variable height. */
        .post-card,
        .badge-item,
        .social-item-row,
        .leader-row,
        .notif-item,
        .live-room-row,
        .story-row,
        .reconnect-row,
        .acct-list-row,
        .more-row,
        .inv-item-card {
            contain: content;
        }

        /* Block text selection on chrome/UI surfaces. Without this, a long
           press on a button or header on Android picks up the underlying
           text and pops the system "Copy / Select All" menu, which is the
           single most webview-y giveaway in mobile browsers. Form inputs,
           textareas, and message bubbles still allow selection because we
           only target chrome elements (buttons, navigation, panel
           headers, list-row labels). The .dm-bubble exclusion lets users
           still copy a message if they want to. */
        button, [role="button"],
        .more-row, .more-bug-btn,
        .acct-list-row, .settings-card,
        .profile-header, .more-header, .panel-title, .more-title,
        .more-section-label, .acct-label, .acct-label-danger,
        .lb-tab, .fyp-tab,
        .back-btn, .close-btn, .more-close, .more-back,
        .username-link, .level-chip, .aura-chip, .mini-level-bar,
        .mlb-pill, .badge-grid, .ach-section-title,
        .branding-tagline, h1, .panel-title-text {
            user-select: none;
            -webkit-user-select: none;
        }
        /* Small-screen overrides for body + container live in the consolidated
           mobile @media block at the bottom of this file. */
        .container {
            text-align: center; background: var(--bg-card); padding: 45px 30px;
            border-radius: var(--r-lg); box-shadow: var(--shadow-card);
            width: 100%; max-width: 420px; border: 1px solid var(--border);
            position: relative;
            overflow: hidden;
        }

        /* PHASE 3: improved 1v1 logo typography */
        h1 {
            font-family: var(--font-display);
            font-size: 4.2rem;
            margin-bottom: 24px;
            color: var(--accent);
            user-select: none;
            font-weight: 800;
            letter-spacing: -3px;
            text-shadow: 0 4px 24px rgba(56,189,248,0.28);
        }
        h1 .my-profile-trigger, h1 .friend-trigger {
            color: var(--accent);
            cursor: pointer;
            display: inline-block;
            transition: transform .15s, -webkit-text-stroke-color .12s ease, text-shadow .12s ease;
            /* Default: no outline. The .is-speaking class adds a red
               text-stroke when that side is talking. Speech indicator
               is binary, not analog — left "1" lights when you talk,
               right "1" lights when the partner talks. */
            -webkit-text-stroke: 2px transparent;
        }
        h1 .my-profile-trigger:hover, h1 .friend-trigger:hover { transform: scale(1.1); }
        h1 .my-profile-trigger.is-speaking,
        h1 .friend-trigger.is-speaking {
            -webkit-text-stroke: 2px var(--danger);
            text-shadow: 0 4px 24px rgba(239,68,68,0.35);
        }
        #v-kill-switch { color: var(--accent); transition: color 0.2s ease, transform .12s; display: inline-block; }
        #v-kill-switch.in-call { color: var(--danger); cursor: pointer; }
        #v-kill-switch.in-call:hover { color: var(--danger-dark); transform: scale(1.15); }
        @media (prefers-reduced-motion: reduce) {
            h1 .my-profile-trigger, h1 .friend-trigger, #v-kill-switch {
                transform: none !important;
            }
        }

        .branding-tagline { color: var(--muted); font-size: .8rem; margin-top: -16px; margin-bottom: 28px; letter-spacing: 4px; text-transform: uppercase; font-weight: 600; font-family: var(--font-body); }

        /* PHASE 3: standardized buttons */
        .btn-group { display: flex; flex-direction: column; gap: 12px; }
        button {
            font-size: 15px; font-weight: 600; border: none;
            border-radius: var(--btn-radius); cursor: pointer;
            transition: all 0.15s ease; width: 100%;
            min-height: var(--btn-h);
            padding: var(--btn-pad-y) var(--btn-pad-x);
            font-family: inherit;
            line-height: 1.2;
        }
        button:disabled { background-color: var(--border) !important; color: var(--muted) !important; cursor: not-allowed; }
        .btn-primary, .call-btn {
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
            color: var(--bg-base);
            box-shadow: var(--shadow-cta);
            font-weight: 700;
            letter-spacing: 0.01em;
            transition: transform 0.18s cubic-bezier(.2,.8,.2,1), box-shadow 0.18s ease, filter 0.18s ease;
        }
        .btn-primary:hover, .call-btn:hover {
            filter: brightness(1.06);
            transform: translateY(-1px);
            box-shadow: 0 14px 32px -6px rgba(56,189,248,0.55), 0 2px 8px rgba(0,0,0,0.32);
        }
        .btn-primary:active, .call-btn:active {
            transform: translateY(0);
            box-shadow: 0 4px 12px -4px rgba(56,189,248,0.4);
        }
        .call-btn.searching {
            background-color: var(--border);
            color: var(--danger);
            border: 1px solid var(--danger);
            position: relative;
            animation: call-btn-searching-pulse 2s ease-in-out infinite;
        }
        @keyframes call-btn-searching-pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.40); }
            50%      { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
        }
        /* Animated ellipsis on the "Searching for someone" status text.
           CSS-only — no JS timer needed. Targets .searching-dots which
           toggleMatch() wraps the trailing dots in. */
        .searching-dots::after {
            content: '';
            display: inline-block;
            width: 1.2em;
            text-align: left;
            animation: searching-dots-cycle 1.4s steps(4, end) infinite;
        }
        @keyframes searching-dots-cycle {
            0%   { content: ''; }
            25%  { content: '.'; }
            50%  { content: '..'; }
            75%  { content: '...'; }
            100% { content: ''; }
        }
        .skip-btn { background-color: var(--danger); color: white; display: none; font-weight: 700; box-shadow: 0 4px 14px rgba(239,68,68,0.35); transition: all 0.18s ease; }
        .skip-btn:hover { background-color: var(--danger-dark); box-shadow: 0 6px 18px rgba(239,68,68,0.55); transform: translateY(-1px); }
        .skip-btn:active { transform: translateY(0); }
        .mute-btn { background-color: #475569; color: white; display: none; }
        .mute-btn.muted { background-color: var(--danger-dark); }
        .report-btn {
            background: transparent;
            color: var(--danger);
            border: 1px solid var(--danger);
            display: none;
            font-size: 0.85rem;
            font-weight: 600;
            padding: 8px 14px;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
        }
        /* Hover fill only on devices with real hover (mouse). On touch
           devices, :hover sticks after the first tap and the click then
           needs a second tap to fire — gating with hover-media avoids it. */
        @media (hover: hover) {
            .report-btn:hover { background-color: var(--danger); color: white; }
        }
        .report-btn:active {
            background-color: var(--danger);
            color: white;
            transform: translateY(1px);
        }
        .btn-green { background-color: var(--green); color: white; }
        .btn-green:hover { background-color: #16a34a; }
        .btn-red { background-color: var(--danger); color: white; }
        .btn-red:hover { background-color: var(--danger-dark); }
        .btn-emerald { background-color: var(--emerald); color: white; }
        .btn-emerald:hover { background-color: var(--emerald-dark); }
        .btn-outline { background: none; color: var(--accent); border: 1px solid var(--accent); }
        .btn-outline:hover { background: var(--accent); color: var(--bg-base); }

        /* PHASE 3: prominent online counter */
        #users-online {
            margin-top: 25px;
            font-size: 1rem;
            color: var(--muted);
            font-style: italic;
            min-height: 24px;
        }
        .online-pill {
            display: inline-flex; align-items: center; gap: 8px;
            background: rgba(16,185,129,0.12);
            border: 1px solid rgba(16,185,129,0.4);
            color: var(--emerald);
            padding: 10px 18px; border-radius: 999px;
            font-weight: 700; font-size: 1.05rem; font-style: normal;
        }
        .online-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 4px rgba(16,185,129,0.25); animation: pulse 2s infinite; }
        @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

        /* Call timer — modern monospaced display */
        .call-timer {
            font-size: 2.4rem;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
            color: var(--accent);
            letter-spacing: 3px;
            font-style: normal;
            text-shadow: 0 0 18px rgba(56,189,248,0.35);
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        .call-timer::before {
            content: '';
            width: 9px; height: 9px; border-radius: 50%;
            background: var(--danger);
            box-shadow: 0 0 0 4px rgba(239,68,68,0.18);
            animation: pulse 1.4s infinite;
        }
        /* Long-call heat — applied by startTimer at 5min / 15min
           thresholds. Subtle color shift on the digits + glow tint
           so a call that's stretched on draws the eye. */
        .call-timer.call-timer-warm {
            color: var(--warn,#fbbf24);
            text-shadow: 0 0 18px rgba(245,158,11,0.40);
        }
        .call-timer.call-timer-hot {
            color: var(--danger);
            text-shadow: 0 0 22px rgba(239,68,68,0.55);
        }

        /* Body-class scoped rules — driven by R129's _setTabTitle.
           Hide pre-match interest-pickers while in-call so they don't
           clutter the active conversation surface. They reappear
           automatically once the call ends + class is cleared. */
        /* Visually-hidden — for accessibility-only labels that the
           visual UI conveys via placeholder / icon. Element is removed
           from view but read by screen readers. Used by R215's settings
           form labels, the bug-report textarea label, etc. */
        .visually-hidden {
            position: absolute !important;
            width: 1px; height: 1px;
            padding: 0; margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        /* Skip-to-content link — visually hidden until focused.
           Standard a11y pattern: keyboard users hitting Tab on first
           load see "Skip to Find Match" pop in, can press Enter to
           bypass the header / level bar / interests block. */
        .skip-link {
            position: absolute; top: -9999px; left: -9999px;
            padding: 10px 16px;
            background: var(--accent);
            color: var(--bg-base);
            border-radius: 8px;
            font-weight: 700;
            text-decoration: none;
            z-index: 99999;
        }
        .skip-link:focus {
            top: 12px; left: 12px;
        }

        body.in-call #pre-match-setup,
        body.in-call #priority-queue-pill { display: none !important; }
        body.searching #post-call-card { display: none !important; }

        /* Respect prefers-reduced-motion — strip the moving animations
           we added throughout the call UI (pulses, ticks, ring grows).
           Static states still render; only the *motion* drops.
           R300 — expanded to cover the rest of the arc's animations:
           icebreaker pop-in, XP/aura floats, in-call reactions, daily
           challenge claim bumps, toast slide-ins, skeleton shimmers,
           and the wave-wiggle on partner profile. The call-card
           perk animations (legendaryShimmer, *CardShift, etc.) stay
           on — they're decorative on a static element, not motion-
           inducing. */
        @media (prefers-reduced-motion: reduce) {
            .searching-dots::after,
            .call-btn.searching,
            .reaction-cooldown,
            .aura-chip-pulse,
            .notif-badge-pulse,
            .dm-unread-badge-pulse,
            .call-timer-hot,
            .kbd-flash,
            .wave-sending,
            .reconnect-skeleton,
            .reconnect-skel-avatar,
            .reconnect-skel-line,
            .icebreaker-banner.show,
            .xp-float,
            .floating-emoji,
            .aura-float,
            .toast,
            .skel-line,
            .skeleton-card,
            .lst-speaking-text,
            .wave-btn[class*="wave-sent"] {
                animation: none !important;
            }
            * { transition-duration: 0.01ms !important; }
        }

        /* PROFILE MODAL */
        .profile-modal {
            position: fixed; top: 0; left: 0; width: 100vw;
            /* 100dvh respects the mobile browser's dynamic viewport so the
               sheet's bottom edge sits above Chrome/Safari toolbars instead
               of hiding behind them. 100vh fallback for any UA that doesn't
               support dvh (very old). */
            height: 100vh;
            height: 100dvh;
            background-color: rgba(15,23,42,0.85); backdrop-filter: blur(8px);
            display: flex; justify-content: center; align-items: flex-end;
            z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
        }
        .profile-modal.open { opacity: 1; pointer-events: auto; }

        /* PROFILE VISIBILITY ENFORCEMENT
           data-self="true"  → viewing your own profile  → own-only buttons visible, partner-only hidden
           data-self="false" → viewing another user      → partner-only visible, own-only hidden
           This is a backstop on top of the JS toggles so partial state can't leak. */
        .profile-modal[data-self="false"] #own-profile-shortcuts,
        .profile-modal[data-self="false"] #social-edit-fields,
        .profile-modal[data-self="false"] #save-profile-btn { display: none !important; }
        .profile-modal[data-self="true"]  #partner-quick-actions,
        .profile-modal[data-self="true"]  #profile-report-btn,
        .profile-modal[data-self="true"]  #profile-block-btn,
        .profile-modal[data-self="true"]  #profile-ban-btn { display: none !important; }

        /* Hide scrollbars globally — keep scroll functional */
        * { scrollbar-width: none; -ms-overflow-style: none; }
        *::-webkit-scrollbar { width: 0; height: 0; display: none; }

        .profile-card {
            background-color: var(--bg-card); width: 100%; max-width: 440px;
            border-top-left-radius: 24px; border-top-right-radius: 24px;
            border: 1px solid var(--border); border-bottom: none;
            padding: 30px 30px 24px; text-align: center; transform: translateY(100%);
            transition: transform 0.3s ease; position: relative;
            /* Hint the compositor that transform is the animated property
               (slide-up + swipe-to-dismiss + glow pulse). Keeps it on its
               own GPU layer so animations run at 60fps without repainting
               the underlying card chrome. */
            will-change: transform;
            /* Flex column so an open sub-panel can take flex space and the
               panel's inner .list-container / .settings-grid scroller has a
               definite track to scroll against.
               `height: max-content` is the load-bearing bit for the BARE
               profile view (no sub-panel open): without it, a flex column
               with overflow:auto stretches to its max-height in some
               browsers regardless of content size. With it, the card sums
               its in-flow children's max-content. When a sub-panel is open
               the only in-flow child is that panel, so the card sizes to
               the panel's content — same correct behavior, both modes. */
            display: flex; flex-direction: column;
            height: max-content;
            min-height: 0;
            max-height: 92vh;
            overflow-y: auto;
            align-self: flex-end;
            overscroll-behavior: contain;
        }
        .profile-modal.open .profile-card { transform: translateY(0); }

        /* SUB-PANEL INFLOW TAKEOVER (universal, all viewports).
           When any sub-panel inside the card has .open, JS adds .has-open-panel
           to the card. We then:
             - hand off scrolling: card stops scrolling, the open panel takes over
             - hide profile content (sub-panels are already hidden by default)
             - turn the open panel into an inflow flex child sized to content
               (capped via the card's max-height); its inner scroller does the
               actual scrolling */
        .profile-card.has-open-panel { overflow: hidden; }
        .profile-card.has-open-panel > *:not(.sub-full-panel) {
            display: none;
        }
        .profile-card.has-open-panel > .sub-full-panel.open {
            position: relative;
            inset: auto;
            flex: 1 1 auto;
            min-height: 0;
            height: auto;
            max-height: none;
            overflow: hidden;
            border-radius: 0;
        }

        /* Settings sub-section takeover.
           openSettingsSection() in settings.js opens an .settings-sub-panel
           but leaves #settings-full-panel .open as the back-navigation
           parent. Originally the sub-panel floated over the menu via
           position:absolute + z-index:30; now that open panels are inflow
           flex items, both would render in the card's flex column and the
           Settings menu would show above the open sub-section. Collapse
           the parent menu out of layout while any sub-section is open.
           Uses :has() — supported in all major browsers as of late 2023. */
        .profile-card.has-open-panel:has(> .sub-full-panel.settings-sub-panel.open) > #settings-full-panel.open {
            display: none;
        }

        /* Profile / sub-panel header — title PERFECTLY centered in
           the modal, with action buttons absolutely positioned on the
           sides. Previously space-between left the title visually
           off-center because the back button (when present) is wider
           than nothing on the X side, biasing the title left. */
        .profile-header {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            min-height: 32px;
            padding: 0 36px;
        }
        .profile-header .back-btn {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        .profile-header .close-btn {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        .panel-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; text-align: center; }

        /* ============================================================
           RGB rainbow username for the owner account (@1v1).
           Applied wherever the owner's username appears: profile title,
           friends list, leaderboard, comments, posts, live rooms, etc.
           Class is added to the parent display element directly so it
           survives any inner-span re-rendering / text resets.
           ============================================================ */
        @keyframes rgb-username-shift {
            0%   { background-position:   0% 50%; }
            50%  { background-position: 100% 50%; }
            100% { background-position:   0% 50%; }
        }
        /* Doubled class selector boosts specificity to (0,2,0) so this rule
           beats `.admin-name` / `.mod-name` (0,1,0) even when both have
           !important — without that, source order would let the role color
           win and the username would render solid red/green instead of rainbow. */
        .rgb-username.rgb-username,
        .rgb-username.rgb-username * {
            background-image: linear-gradient(90deg,
                #ef4444, #f59e0b, #facc15, #10b981, #38bdf8, #6366f1, #a855f7, #ec4899, #ef4444
            ) !important;
            background-size: 300% 100% !important;
            background-clip: text !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            animation: rgb-username-shift 6s linear infinite !important;
            font-weight: 800 !important;
            text-shadow: none !important;
        }
        /* Browsers that don't support background-clip:text get a solid
           rainbow-mid color so it's still obvious instead of invisible. */
        @supports not (background-clip: text) {
            .rgb-username.rgb-username, .rgb-username.rgb-username * {
                color: #a855f7 !important;
                -webkit-text-fill-color: #a855f7 !important;
                background: none !important;
            }
        }
        /* When .rgb-username is on a parent that ALSO contains inline badges
           (verified tick, VIP badge, level chip, etc.), the cascading
           `.rgb-username *` rule would clobber their own gradients. Carve
           those badges out so they keep their original look. */
        .rgb-username.rgb-username .verified-tick,
        .rgb-username.rgb-username .trusted-tick,
        .rgb-username.rgb-username .vip-badge,
        .rgb-username.rgb-username .level-chip {
            background-image: none !important;
            background-clip: border-box !important;
            -webkit-background-clip: border-box !important;
            animation: none !important;
            text-shadow: none !important;
        }
        .rgb-username.rgb-username .verified-tick {
            background: var(--accent) !important;
            color: var(--bg-base) !important;
            -webkit-text-fill-color: var(--bg-base) !important;
        }
        .rgb-username.rgb-username .trusted-tick {
            background: var(--emerald) !important;
            color: var(--bg-base) !important;
            -webkit-text-fill-color: var(--bg-base) !important;
        }
        .rgb-username.rgb-username .vip-badge {
            background: linear-gradient(135deg, #a855f7, #ec4899) !important;
            color: white !important;
            -webkit-text-fill-color: white !important;
        }
        .rgb-username.rgb-username .level-chip {
            background: linear-gradient(135deg, var(--accent), #6366f1) !important;
            color: white !important;
            -webkit-text-fill-color: white !important;
        }
        .close-btn { background: none; font-size: 1.5rem; color: var(--muted); cursor: pointer; width: auto; padding: 0; min-height: auto; }
        .close-btn:hover { color: var(--text); }
        /* Back arrow on profile header (partner mode only). Mirrors
           close-btn typography but sits on the LEFT so users can pop
           back to the sub-panel they came from (Leaderboard,
           Achievements, etc.) without hitting × and re-navigating. */
        .back-btn {
            background: none; border: none; cursor: pointer;
            font-size: 1.5rem; color: var(--muted);
            width: auto; padding: 0 8px 0 0; min-height: auto;
            line-height: 1;
        }
        .back-btn:hover { color: var(--text); }

        .avatar-wrapper { width: 120px; height: 120px; margin: 0 auto 25px auto; position: relative; }
        .avatar-circle {
            display: flex; justify-content: center; align-items: center;
            width: 120px; height: 120px; border-radius: 50%;
            border: 3px solid var(--border); background-color: var(--bg-input); overflow: hidden;
        }
        .avatar-circle.clickable { cursor: pointer; }
        .avatar-circle.clickable:hover { border-color: var(--accent); }
        #avatar-image-view { width: 100%; height: 100%; object-fit: cover; }
        .online-badge-on-avatar {
            position: absolute; bottom: 6px; right: 6px;
            width: 22px; height: 22px; border-radius: 50%;
            background: var(--emerald); border: 3px solid var(--bg-card);
            display: none;
        }
        .online-badge-on-avatar.show { display: block; }

        .action-row { display: flex; gap: 12px; margin-bottom: 25px; }
        .action-row > * { flex: 1; }

        /* INPUTS */
        .profile-content { display: flex; flex-direction: column; gap: 18px; text-align: left; }
        .input-group { display: flex; flex-direction: column; gap: 6px; }
        /* Bio textarea — collapsed bubble by default, expands on focus */
        /* Inline counter chip in the "About Me" label row.
           Updates as the user types; tints amber near the cap. */
        .bio-counter {
            margin-left: 8px;
            padding: 1px 8px;
            background: var(--bg-input);
            border: 1px solid var(--border-soft);
            border-radius: 999px;
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--muted);
            font-variant-numeric: tabular-nums;
        }
        .bio-counter.bio-counter-warn { color: var(--warn,#fbbf24); border-color: rgba(245,158,11,0.36); }
        .bio-counter.bio-counter-full { color: var(--danger);      border-color: rgba(239,68,68,0.40); }

        #profile-bio {
            height: 44px;                    /* compact 1-line bubble */
            min-height: 44px;
            line-height: 1.4;
            padding: 11px 14px;
            background: var(--bg-card);
            border: 1.5px solid var(--accent);
            border-radius: 22px;             /* pill on collapse */
            overflow: hidden;
            white-space: nowrap;             /* hide newlines while collapsed */
            text-overflow: ellipsis;
            resize: none;
            transition: height 0.22s ease, border-radius 0.22s ease, white-space 0s linear 0.22s, box-shadow 0.18s;
        }
        #profile-bio:focus,
        #profile-bio.expanded {
            height: 96px;
            border-radius: 12px;             /* squarer when expanded */
            white-space: pre-wrap;
            overflow: auto;
            box-shadow: 0 0 0 3px rgba(56,189,248,0.12);
            transition: height 0.22s ease, border-radius 0.22s ease, white-space 0s linear 0s, box-shadow 0.18s;
        }
        /* Partner profile — read-only bio just shows naturally, not collapsed */
        .profile-modal[data-self="false"] #profile-bio {
            height: auto;
            min-height: 44px;
            border-radius: 12px;
            white-space: pre-wrap;
            overflow: visible;
            transition: none;
        }
        /* Profile sectioning — consistent grouped layout */
        .profile-section { display: flex; flex-direction: column; gap: 8px; }
        .profile-section-label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.08em; margin: 6px 0 4px 0; text-align: left; }
        /* Subtle divider above section labels (except the first) */
        .profile-section + .profile-section .profile-section-label,
        #own-profile-shortcuts > .profile-section + .profile-section .profile-section-label { padding-top: 4px; }
        .profile-section .btn-outline {
            min-height: 44px;
            padding: 10px 16px;
            font-size: 0.92rem;
            font-weight: 600;
            border-radius: 10px;
            transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.12s, box-shadow 0.18s;
        }
        .profile-section .btn-outline:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(56,189,248,0.18); }
        .profile-section .btn-outline:active { transform: translateY(0); }
        /* Save Changes — match the new profile-section button rhythm */
        #save-profile-btn {
            min-height: 44px; padding: 12px 16px; font-size: 0.92rem;
            font-weight: 700; border-radius: 10px;
            transition: background 0.18s, transform 0.12s, box-shadow 0.18s;
        }
        #save-profile-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(56,189,248,0.35); }
        #save-profile-btn:active { transform: translateY(0); }
        label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: bold; }

        input[type="text"], input[type="url"], input[type="search"], textarea {
            background-color: var(--bg-input); border: 1px solid var(--border); color: var(--text);
            padding: 12px; border-radius: var(--btn-radius); font-size: 1rem; outline: none;
            width: 100%; font-family: inherit;
        }
        textarea { resize: none; height: 110px; line-height: 1.4; }
        input:focus, textarea:focus { border-color: var(--accent); }
        textarea[readonly] { opacity: 0.7; cursor: default; }

        /* SUB-PANELS — overlay sheets that take over the card when opened.
           Closed = `display: none` so they contribute no box, no scroll
           geometry. Earlier versions used `position:absolute + visibility:
           hidden + transform: translateY(100%)` for a slide-up animation,
           but transformed absolute descendants contribute their post-
           transform geometry to a scroll container's overflow area (per
           CSS Overflow L3), which created a phantom card-height of
           scrollable dead space below the bare profile. The slide
           animation was already disabled when the .has-open-panel rule
           became universal (see commit 6b4e27f), so dropping the
           transform machinery has no visible regression — just fixes
           the dead-space bug. */
        .sub-full-panel {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-color: var(--bg-card);
            border-top-left-radius: 24px; border-top-right-radius: 24px;
            padding: 30px;
            display: none;
            flex-direction: column;
            z-index: 20; text-align: left;
        }
        .sub-full-panel.open { display: flex; }

        /* Sub-panel slide-in — the small touch that turns "page swap"
           into "Android nav stack". When a panel becomes .open we run a
           one-shot 0.22s animation that fades + slides it in from the
           right (28px offset). After the animation completes the panel
           sits at its natural translateX(0) state, so we don't reintroduce
           the phantom-overflow bug from the old persistent-transform setup
           (see the comment block above .sub-full-panel for context).
           .has-open-panel { overflow: hidden } on the parent clips the
           28px offset cleanly during the brief slide. The cubic-bezier
           is the same easing curve Material uses for forward navigation. */
        @keyframes subPanelSlideIn {
            from { transform: translateX(28px); opacity: 0; }
            to   { transform: translateX(0);    opacity: 1; }
        }
        .sub-full-panel.open {
            animation: subPanelSlideIn 0.22s cubic-bezier(0.4, 0, 0.2, 1);
        }
        @media (prefers-reduced-motion: reduce) {
            .sub-full-panel.open { animation: none; }
        }

        /* ============================================================
           MORE PANEL — bespoke compact menu styling.
           Self-contained .more-* namespace so the existing generic
           panel/button rules don't bleed in. Designed so all rows fit
           on a single phone screen without scrolling for non-admin
           users; admin/mod rows add ~96px which only forces a tiny
           internal scroll on iPhone-SE-class devices.
           ============================================================ */
        .sub-full-panel.more-panel,
        .profile-card.has-open-panel > .sub-full-panel.open.more-panel {
            padding: 14px 16px 18px;
        }

        .more-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 4px 4px 12px;
            flex-shrink: 0;
        }
        .more-title {
            font-size: 1.5rem; font-weight: 800;
            color: var(--accent);
            letter-spacing: -0.01em;
            line-height: 1;
        }
        .more-close {
            background: none; border: none; color: var(--muted);
            width: 32px; height: 32px; min-height: auto;
            border-radius: 8px; padding: 0;
            cursor: pointer; font-size: 1.1rem; line-height: 1;
            display: inline-flex; align-items: center; justify-content: center;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .more-close:hover { background: var(--bg-input); color: var(--text); }
        /* Back arrow on settings sub-section headers — mirrors .more-close
           but sits on the left so users can pop back to Settings home with
           a single tap. Same close action as the X under the hood; the icon
           just communicates the back relationship more clearly. */
        .more-back {
            background: none; border: none; color: var(--muted);
            width: 32px; height: 32px; min-height: auto;
            border-radius: 8px; padding: 0;
            cursor: pointer; font-size: 1.25rem; line-height: 1;
            display: inline-flex; align-items: center; justify-content: center;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .more-back:hover { background: var(--bg-input); color: var(--text); }

        .more-body {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            overscroll-behavior: contain;
            display: flex; flex-direction: column;
            gap: 8px;
        }

        .more-section { display: flex; flex-direction: column; gap: 4px; }
        .more-section-label {
            font-size: 0.64rem;
            font-weight: 800;
            color: var(--muted);
            letter-spacing: 0.14em;
            text-transform: uppercase;
            margin: 4px 4px 2px;
            line-height: 1;
        }

        /* Single contract for every row in the menu — same height, padding,
           icon slot, and font weight, so the menu reads as one consistent
           list rather than a mix of button styles. position:relative +
           overflow:hidden are load-bearing for the Material-style ripple
           effect — JS appends a sized .ripple-effect span at the click
           point and the row clips the expanding circle to its rounded
           rectangle. Without overflow:hidden the circle would bleed
           into adjacent rows. */
        .more-row {
            display: flex; align-items: center;
            gap: 12px;
            width: 100%;
            height: 40px; min-height: 40px;
            padding: 0 14px;
            background: var(--bg-input);
            color: var(--text);
            border: 1px solid var(--border);
            border-radius: 10px;
            font-family: inherit;
            font-size: 0.92rem;
            font-weight: 600;
            cursor: pointer;
            text-align: left;
            position: relative; overflow: hidden;
            transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
        }
        .more-row:hover {
            background: rgba(56,189,248,0.10);
            border-color: rgba(56,189,248,0.6);
            box-shadow: 0 4px 18px rgba(56,189,248,0.18);
        }
        .more-row:active { transform: scale(0.98); }

        .more-row-icon {
            width: 22px; height: 22px;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 1.05rem; line-height: 1;
            flex-shrink: 0;
        }
        .more-row-label { flex: 1; min-width: 0; }

        /* Admin Panel — sleek red. Subtle vertical gradient + inset top
           highlight + soft glow on hover. Reads as serious-tool without
           shouting like a bare flat-red button. */
        .more-row.is-admin {
            background: linear-gradient(180deg, #991b1b 0%, #7f1d1d 100%);
            color: #ffffff;
            border-color: rgba(239, 68, 68, 0.55);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 1px 2px rgba(0, 0, 0, 0.35);
        }
        .more-row.is-admin .more-row-icon {
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
        }
        .more-row.is-admin .more-row-label {
            font-weight: 700;
            letter-spacing: 0.2px;
        }
        .more-row.is-admin:hover {
            background: linear-gradient(180deg, #b91c1c 0%, #991b1b 100%);
            border-color: rgba(248, 113, 113, 0.85);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 4px 16px rgba(239, 68, 68, 0.32);
        }

        /* Bottom-anchored danger row — outside .more-body so it never
           scrolls out of view, even when the body has to scroll. */
        .more-bug-btn {
            display: flex; align-items: center;
            gap: 12px;
            width: 100%;
            height: 40px; min-height: 40px;
            padding: 0 14px;
            margin-top: 10px;
            background: transparent;
            color: var(--danger);
            border: 1px solid rgba(239,68,68,0.4);
            border-radius: 10px;
            font-family: inherit;
            font-size: 0.92rem;
            font-weight: 700;
            cursor: pointer;
            text-align: left;
            flex-shrink: 0;
            position: relative; overflow: hidden;
            transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
        }
        .more-bug-btn:hover {
            background: rgba(239,68,68,0.12);
            border-color: var(--danger);
            box-shadow: 0 4px 18px rgba(239,68,68,0.22);
        }
        .more-bug-btn:active { transform: scale(0.98); }

        /* ===== Premium glow when the More panel is the active sub-panel.
           Selector uses :has() so we don't need to add a body class — when
           #more-full-panel.open exists inside .profile-card, the card gets
           a strong neon-blue halo that pulses gently. Multi-layer box-shadow
           gives depth: a tight 1px ring for definition, a near halo for
           clarity, a mid bloom for atmosphere, and a wide soft cloud for
           "lift". The pulse is subtle (3.2s, ~25% intensity swing) so it
           reads as a polished native-app touch rather than a flashing
           gimmick. Override :has() comes after .profile-card base styles
           so it cleanly takes precedence over any equipped card-glow
           cosmetic while More is open. */
        .profile-card:has(> #more-full-panel.open) {
            box-shadow:
                0 0 0 1px rgba(56,189,248,0.55),
                0 0 18px rgba(56,189,248,0.45),
                0 0 48px rgba(56,189,248,0.30),
                0 0 96px rgba(56,189,248,0.18);
            animation: more-glow-pulse 3.2s ease-in-out infinite;
        }
        @keyframes more-glow-pulse {
            0%, 100% {
                box-shadow:
                    0 0 0 1px rgba(56,189,248,0.55),
                    0 0 18px rgba(56,189,248,0.45),
                    0 0 48px rgba(56,189,248,0.30),
                    0 0 96px rgba(56,189,248,0.18);
            }
            50% {
                box-shadow:
                    0 0 0 1px rgba(56,189,248,0.75),
                    0 0 28px rgba(56,189,248,0.62),
                    0 0 72px rgba(56,189,248,0.42),
                    0 0 130px rgba(56,189,248,0.26);
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .profile-card:has(> #more-full-panel.open) { animation: none; }
        }

        /* ===== Material-style ripple effect.
           JS spawns a .ripple-effect span at the pointer-down point inside
           any element with the .has-ripple class. The span is a full circle
           sized to ~1.5x the longest edge of the host so it always reaches
           the corners on expansion. The CSS animation grows it from
           scale(0) to scale(2.5) while fading opacity 0.35 → 0 over 0.55s,
           which matches the timing/feel of Android's default ripple. The
           host needs position:relative + overflow:hidden — applied
           directly on .more-row / .more-bug-btn / etc. above. The color
           defaults to a translucent accent blue but can be overridden
           per-element via inline background on the .ripple-effect span
           (the JS sets this for is-admin / is-mod rows). */
        .ripple-effect {
            position: absolute;
            border-radius: 50%;
            background: rgba(56, 189, 248, 0.32);
            transform: scale(0);
            opacity: 1;
            pointer-events: none;
            animation: rippleExpand 0.55s ease-out forwards;
            will-change: transform, opacity;
        }

        /* Sticky-hover suppression on touch devices. On Android Chrome
           (and to a lesser degree iOS Safari) :hover fires on tap and
           stays applied until the user taps elsewhere — leaving the
           tapped button visibly "stuck" in its hover state for several
           seconds. Most :hover rules in this codebase shift colors only
           slightly (barely visible), but the heavy box-shadow / glow
           rules below are the noticeable offenders. Resetting them on
           hover-less devices keeps tap-feedback from lingering after
           the press. The ripple + scale(0.98) :active still fire for
           tap-down feedback. */
        @media (hover: none) {
            .more-row:hover, .more-bug-btn:hover {
                background: var(--bg-input);
                border-color: var(--border);
                box-shadow: none;
            }
            .more-row.is-admin:hover {
                /* Mobile: keep the gradient on hover (no glow — touch
                   devices don't have hover states the same way, and we
                   don't want a sticky shadow after a tap). */
                background: linear-gradient(180deg, #991b1b 0%, #7f1d1d 100%);
                border-color: rgba(239, 68, 68, 0.55);
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.06),
                    0 1px 2px rgba(0, 0, 0, 0.35);
            }
            .more-bug-btn:hover {
                background: rgba(239,68,68,0.06);
                border-color: rgba(239,68,68,0.55);
            }
            .badge-item.earned:hover { transform: none; }
        }
        @keyframes rippleExpand {
            to {
                transform: scale(2.5);
                opacity: 0;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .ripple-effect { animation: none; opacity: 0; }
        }

        /* ============================================================
           ACCOUNT SETTINGS PANEL — sleek grouped cards.
           Self-contained .acct-* namespace. Each section (Email,
           Username, Password) is a soft card with a tight label above
           and inline action where the input fits. Danger Zone uses
           a muted yellow outline for Deactivate and a soft red fill
           for Delete so they read distinctly without being shouty.
           ============================================================ */
        .sub-full-panel.acct-panel,
        .profile-card.has-open-panel > .sub-full-panel.open.acct-panel {
            padding: 14px 16px 18px;
        }

        .acct-body {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            overscroll-behavior: contain;
            display: flex; flex-direction: column;
            gap: 14px;
        }

        .acct-group { display: flex; flex-direction: column; gap: 8px; }

        .acct-label {
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--muted);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            padding-left: 4px;
            line-height: 1;
        }
        .acct-label-danger { color: var(--danger); }

        .acct-card {
            display: flex; flex-direction: column;
            gap: 8px;
            padding: 12px;
            background: var(--bg-input);
            border: 1px solid var(--border);
            border-radius: 12px;
        }

        .acct-row { display: flex; gap: 10px; align-items: stretch; }

        /* Email status (icon + dynamic text). The icon sits OUTSIDE
           #settings-email-current so refreshLinkedEmailUI()'s innerHTML
           overwrite leaves it intact. */
        .acct-status-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0 4px 2px;
        }
        .acct-status-icon {
            font-size: 1rem;
            opacity: 0.55;
            flex-shrink: 0;
            line-height: 1;
        }
        .acct-status {
            font-size: 0.85rem;
            color: var(--muted);
            line-height: 1.4;
            flex: 1;
            min-width: 0;
        }
        .acct-status strong { color: var(--text); font-weight: 600; }

        /* Helper hint text below an input/button cluster */
        .acct-hint {
            font-size: 0.75rem;
            color: var(--muted);
            line-height: 1.4;
            padding: 0 4px;
        }

        /* === UNIFIED INTERACTIVE HEIGHTS ===
           Inputs, primary actions, ghost actions, and danger buttons
           all share height 48px. Selects sit at 44px so they read
           visually distinct from buttons but still substantial. */

        .acct-input {
            flex: 1; min-width: 0;
            background: var(--bg-card);
            border: 1px solid var(--border);
            color: var(--text);
            padding: 0 14px;
            height: 48px;
            border-radius: 10px;
            font-size: 0.95rem;
            outline: none;
            font-family: inherit;
            /* In a flex row, flex:1 (basis 0 + grow) sizes the input to fill
               available space. In the column password card, align-items:stretch
               (default on .acct-card) gives full width. No explicit width needed. */
            transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
        }
        .acct-input::placeholder { color: var(--muted); opacity: 0.7; }
        .acct-input:hover { border-color: rgba(56,189,248,0.35); }
        .acct-input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(56,189,248,0.16);
            background: var(--bg-input);
        }

        .acct-action {
            background: var(--accent);
            color: var(--bg-base);
            border: none;
            border-radius: 10px;
            padding: 0 20px;
            height: 48px; min-height: 48px;
            min-width: 100px;
            font-family: inherit;
            font-size: 0.95rem;
            font-weight: 700;
            letter-spacing: -0.005em;
            cursor: pointer;
            flex-shrink: 0;
            /* Override the global `button { width: 100% }` rule — without this,
               the action button claims the full row and the input collapses
               to its min-width:0. Block variant below explicitly re-enables
               width:100% for the Update Password button. */
            width: auto;
            transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
        }
        .acct-action:hover {
            background: var(--accent-hover);
            box-shadow: 0 4px 18px rgba(56,189,248,0.32);
        }
        .acct-action:active { transform: translateY(1px); }
        .acct-action:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; box-shadow: none; }
        .acct-action-block { width: 100%; min-width: 0; }

        /* Log Out — bordered ghost, full-width, 48px to match buttons.
           Sits between Password and Danger Zone as a quiet primary. */
        .acct-logout {
            background: transparent;
            color: var(--text);
            border: 1px solid var(--border);
            border-radius: 10px;
            height: 48px; min-height: 48px;
            font-family: inherit;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
        }
        .acct-logout:hover {
            background: rgba(56,189,248,0.06);
            border-color: rgba(56,189,248,0.5);
            box-shadow: 0 2px 14px rgba(56,189,248,0.15);
        }
        .acct-logout:active { transform: translateY(1px); }

        /* Danger Zone — both buttons share 48px height + premium glow. */
        .acct-deactivate {
            background: transparent;
            color: #fbbf24;
            border: 1px solid rgba(251,191,36,0.55);
            border-radius: 10px;
            height: 48px; min-height: 48px;
            font-family: inherit;
            font-size: 0.95rem;
            font-weight: 700;
            cursor: pointer;
            width: 100%;
            transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
        }
        .acct-deactivate:hover {
            background: rgba(251,191,36,0.1);
            border-color: #fbbf24;
            box-shadow: 0 0 0 3px rgba(251,191,36,0.12), 0 4px 18px rgba(251,191,36,0.22);
        }
        .acct-deactivate:active { transform: translateY(1px); }

        .acct-delete {
            background: rgba(239,68,68,0.14);
            color: #fca5a5;
            border: 1px solid rgba(239,68,68,0.55);
            border-radius: 10px;
            height: 48px; min-height: 48px;
            font-family: inherit;
            font-size: 0.95rem;
            font-weight: 700;
            cursor: pointer;
            width: 100%;
            box-shadow: 0 0 0 0 rgba(239,68,68,0);
            transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease, transform 0.1s ease;
        }
        .acct-delete:hover {
            background: rgba(239,68,68,0.22);
            border-color: var(--danger);
            box-shadow: 0 0 0 3px rgba(239,68,68,0.16), 0 4px 22px rgba(239,68,68,0.32);
        }
        .acct-delete:active { transform: translateY(1px); }

        /* Confirmation panels — keep .delete-confirm-section's display:none
           / .visible toggle, just enhance the look while expanded. */
        .acct-confirm {
            padding: 12px;
            background: var(--bg-input);
            border-radius: 12px;
            border: 1px solid var(--border);
            margin-top: 0;
            gap: 8px;
        }
        .acct-confirm-warn { border-color: rgba(251,191,36,0.4); }
        .acct-confirm-danger { border-color: rgba(239,68,68,0.4); }

        .acct-helper {
            font-size: 0.78rem;
            color: var(--muted);
            line-height: 1.4;
            padding: 2px 4px;
        }
        .acct-helper-danger { color: var(--danger); }

        /* ============================================================
           SETTINGS LIST — single grouped card with internal dividers,
           used by Privacy / Notifications / Audio & Calls. Each row
           = title (+ optional sub) on the left, control on the right.
           ============================================================ */
        .acct-list {
            display: flex; flex-direction: column;
            background: var(--bg-input);
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
        }
        .acct-list-row {
            display: flex; align-items: center;
            gap: 12px;
            padding: 12px 14px;
            border-bottom: 1px solid var(--border);
            min-height: 56px;
        }
        .acct-list-row:last-child { border-bottom: none; }
        .acct-list-text { flex: 1; min-width: 0; }
        .acct-list-title {
            font-size: 0.92rem; font-weight: 600;
            color: var(--text); line-height: 1.3;
        }
        .acct-list-sub {
            font-size: 0.75rem; color: var(--muted);
            margin-top: 3px; line-height: 1.4;
        }

        /* Substantial select inside .acct-list-row — replaces the cramped
           .settings-select. Sized at 44px tall with 160px min-width so it
           reads as a proper control next to the toggle widgets, not an
           afterthought tucked at the row's right edge.

           color-scheme:dark hints to the browser to render the native
           dropdown popup in dark mode (Chrome/Edge/Safari/Firefox all
           honor this). Without it, the dropdown popup falls back to the
           OS theme — on a light-themed OS the options box renders white
           and the page's inherited white text becomes invisible. The
           explicit .acct-select option { background; color } below is a
           belt-and-braces fallback for browsers that ignore color-scheme. */
        .acct-select {
            background: var(--bg-card);
            border: 1px solid var(--border);
            color: var(--text);
            color-scheme: dark;
            padding: 0 38px 0 14px;
            height: 44px;
            min-width: 160px;
            border-radius: 10px;
            font-size: 0.9rem;
            font-weight: 600;
            outline: none;
            flex-shrink: 0;
            font-family: inherit;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%2364748b'><path d='M6 8L2 4h8z'/></svg>");
            background-repeat: no-repeat;
            background-position: right 14px center;
            background-size: 12px;
            transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
        }
        .acct-select option {
            background: var(--bg-card);
            color: var(--text);
        }
        .acct-select:hover {
            border-color: rgba(56,189,248,0.4);
            background-color: rgba(56,189,248,0.04);
        }
        .acct-select:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(56,189,248,0.18);
        }

        /* Range slider inside .acct-list-row */
        .acct-range {
            width: 130px;
            accent-color: var(--accent);
            flex-shrink: 0;
            cursor: pointer;
        }

        .list-container { flex-grow: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; margin-top: 15px; }
        .section-header { font-size: 0.85rem; color: var(--muted); text-transform: uppercase; font-weight: bold; margin-bottom: 10px; }
        .empty-text { font-size: 0.9rem; color: #475569; font-style: italic; }

        /* Leaderboard category tabs (Top Voice / Most Aura / Most
           Calls). Same active-underline pattern as the store tabs but
           a separate class so the two strips can evolve independently. */
        .lb-tabs {
            display: flex; gap: 2px; padding: 2px 4px 8px;
            border-bottom: 1px solid var(--border);
            margin: 0 0 12px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .lb-tabs::-webkit-scrollbar { display: none; }
        .lb-tab {
            flex: 1 1 0;                    /* equal share of the strip */
            text-align: center;
            background: transparent; border: none; cursor: pointer;
            padding: 8px 6px;
            font-family: inherit; font-size: 0.84rem; font-weight: 700;
            color: var(--muted);
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
            white-space: nowrap;
            transition: color 0.15s, border-color 0.15s;
            min-height: auto; line-height: 1.2;
        }
        .lb-tab:hover { color: var(--text); }
        .lb-tab.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
        }

        /* FRIENDS empty state */
        /* Generic empty-state — used by notification, friends, DM
           panels when their list has no items. Icon + title + sub. */
        .empty-state {
            display: flex; flex-direction: column; align-items: center;
            text-align: center; padding: 40px 20px;
            color: var(--muted);
        }
        .empty-state-icon { font-size: 2.6rem; margin-bottom: 10px; opacity: 0.85; filter: drop-shadow(0 0 12px rgba(56,189,248,0.20)); }
        .empty-state-sub  { font-size: 0.86rem; color: var(--muted); max-width: 280px; line-height: 1.5; margin-top: 4px; }

        .empty-state-card {
            text-align: center; padding: 40px 20px;
            display: flex; flex-direction: column; align-items: center; gap: 12px;
        }
        .empty-state-illust { font-size: 4rem; line-height: 1; }
        .empty-state-title { font-size: 1.2rem; font-weight: 700; color: var(--text); }
        .empty-state-desc { font-size: 0.9rem; color: var(--muted); margin-bottom: 8px; }

        /* SOCIAL ROW */
        .social-item-row {
            background-color: var(--bg-input); border: 1px solid var(--border); border-radius: 12px;
            padding: 14px 18px; display: flex; justify-content: space-between; align-items: center;
        }
        .social-item-info { display: flex; align-items: center; gap: 12px; }
        .social-item-avatar-wrap { position: relative; }
        .social-item-avatar { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--accent); object-fit: cover; }
        .online-dot-mini { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--emerald); border: 2px solid var(--bg-input); }
        .social-item-name { font-weight: bold; color: var(--text); font-size: 1rem; }
        .admin-name { color: var(--danger) !important; }
        .mod-name { color: var(--emerald) !important; }
        .social-item-bio { font-size: 0.85rem; color: #94a3b8; margin-top: 2px; }
        .last-seen-text { font-size: 0.72rem; color: var(--muted); margin-top: 1px; }

        .action-sm-btns { display: flex; gap: 8px; }
        .accept-sm-btn { background-color: var(--green); color: white; padding: 8px 14px; font-size: 0.85rem; border-radius: 6px; width: auto; min-height: auto; }
        .decline-sm-btn { background-color: var(--border); color: var(--danger); padding: 8px 14px; font-size: 0.85rem; border-radius: 6px; width: auto; min-height: auto; border: 1px solid var(--danger); }

        /* PHASE 3: Open button is solid vibrant blue */
        .dm-friend-btn {
            background: var(--accent); color: var(--bg-base);
            border: none; border-radius: 6px; padding: 8px 16px;
            font-size: 0.85rem; font-weight: 700; cursor: pointer; width: auto; min-height: auto;
        }
        .dm-friend-btn:hover { background: var(--accent-hover); }

        /* FYP composer */
        .fyp-composer { margin-bottom: 14px; flex-shrink: 0; }
        .fyp-composer textarea { height: 72px; margin-bottom: 8px; }
        .char-count { font-size: 0.75rem; color: var(--muted); text-align: right; margin-bottom: 6px; }
        .char-count.over { color: var(--danger); }
        .compose-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
        .compose-icon-btn { background: var(--bg-input); border: 1px solid var(--border); color: var(--accent); border-radius: 8px; cursor: pointer; padding: 0; width: 40px; height: 40px; min-height: auto; font-size: 1.1rem; }
        .compose-icon-btn:hover { background: var(--border); }

        /* FYP tabs */
        .fyp-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 8px; flex-shrink: 0; }
        .fyp-tab {
            background: none; color: var(--muted); border: none;
            padding: 10px 16px; font-size: .9rem; font-weight: 600;
            cursor: pointer; flex: 1; border-bottom: 3px solid transparent; min-height: auto;
            border-radius: 0;
        }
        .fyp-tab:hover { color: var(--text); }
        .fyp-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: rgba(56,189,248,0.07); }

        /* Skeleton loader */
        .skeleton-card {
            background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px;
            padding: 14px; margin-bottom: 8px;
        }
        .skel-line { background: linear-gradient(90deg, #1e293b 0%, #334155 50%, #1e293b 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite; height: 12px; border-radius: 4px; margin-bottom: 8px; }
        .skel-line.short { width: 40%; }
        .skel-line.med { width: 70%; }
        @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

        /* DM PANEL */
        .dm-messages-list { flex-grow: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; margin-top: 10px; }
        .dm-msg-wrap { display: flex; flex-direction: column; }
        .dm-msg-wrap.sent { align-items: flex-end; }
        .dm-msg-wrap.received { align-items: flex-start; }
        .dm-bubble { max-width: 82%; padding: 9px 14px; border-radius: 16px; font-size: 0.9rem; line-height: 1.45; word-break: break-word; }
        .dm-bubble.sent { background: var(--accent); color: var(--bg-base); border-bottom-right-radius: 4px; }
        .dm-bubble.received { background: var(--border); color: var(--text); border-bottom-left-radius: 4px; }
        .dm-bubble img.dm-image { max-width: 220px; border-radius: 12px; display: block; cursor: zoom-in; }
        .dm-meta { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--muted); margin-top: 3px; padding: 0 6px; }
        .dm-checks { color: var(--muted); }
        .dm-checks.read { color: var(--accent); }
        .voice-msg { display: flex; align-items: center; gap: 8px; min-width: 180px; }
        .voice-play-btn { background: var(--bg-base); color: var(--accent); border: none; border-radius: 50%; width: 32px; height: 32px; min-height: auto; padding: 0; cursor: pointer; font-size: 1rem; }
        .voice-bubble.sent .voice-play-btn { background: var(--bg-base); color: var(--accent); }
        .voice-bubble.received .voice-play-btn { background: var(--accent); color: var(--bg-base); }
        /* Playing pulse — same visual language as the live-room speaking
           ring + the 1v1 call logo VAD outline. Subtle ring breathing
           around the bubble while audio is active. */
        .voice-bubble.is-playing { box-shadow: 0 0 0 2px rgba(56,189,248,0.55), 0 0 22px rgba(56,189,248,0.28); animation: speakingPulse 0.9s ease-in-out infinite; }
        @media (prefers-reduced-motion: reduce) {
            .voice-bubble.is-playing { animation: none; }
        }
        .voice-waveform { flex: 1; height: 22px; display: flex; align-items: center; gap: 2px; }
        .voice-waveform .bar { flex: 1; background: currentColor; opacity: 0.55; border-radius: 1px; }
        .voice-duration { font-size: 0.78rem; font-variant-numeric: tabular-nums; }

        .dm-input-row { display: flex; gap: 8px; margin-top: 12px; align-items: center; flex-shrink: 0; }
        .dm-input-row input { flex: 1; padding: 10px 12px; font-size: 0.9rem; }
        .dm-send-btn, .dm-mic-btn, .dm-image-btn { background: var(--accent); color: var(--bg-base); font-size: 1.1rem; padding: 0; border-radius: 8px; border: none; cursor: pointer; width: 42px; height: 42px; min-height: auto; line-height: 1; flex-shrink: 0; }
        .dm-send-btn:hover, .dm-mic-btn:hover, .dm-image-btn:hover { background: var(--accent-hover); }
        .dm-mic-btn.recording { background: var(--danger); color: white; animation: pulse 1.2s infinite; }

        /* Voice recording UI */
        .voice-record-bar {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 14px; background: var(--bg-input);
            border: 1px solid var(--danger); border-radius: 8px; margin-top: 12px;
        }
        .voice-record-bar .rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: pulse 1s infinite; }
        .voice-record-bar .rec-time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
        .voice-record-bar .rec-bars { flex: 1; display: flex; align-items: center; gap: 2px; height: 22px; }
        .voice-record-bar .rec-bars .b { flex: 1; background: var(--danger); border-radius: 1px; height: 25%; transition: height .1s; }
        .stop-rec-btn { background: var(--danger); color: white; border: none; border-radius: 50%; width: 36px; height: 36px; min-height: auto; padding: 0; cursor: pointer; font-size: 0.95rem; }
        /* Voice-message preview row (DM + Stories).
           Single-line layout — audio takes the available space, the
           duration chip + send/cancel sit to its right. Audio height
           bumped 32px -> 44px because Chrome's native controls need
           ~40px to render play / time / seek / volume / overflow
           without squishing the seek bar away to a dash. min-width:0
           lets the audio actually shrink below content size when the
           row is narrow (without it, native controls force the audio
           wider than the row and overflow). */
        .voice-preview-row { display: flex; flex-wrap: nowrap; gap: 10px; align-items: center; padding: 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; margin-top: 10px; }
        .voice-preview-row audio { flex: 1 1 0; min-width: 0; height: 44px; }
        /* Trim the native audio control to just play + time + seek.
           Volume / mute / overflow get hidden to free up width for the
           seek bar — on narrow rows (mobile, the stories panel) the
           browser's auto-collapse drops the seek bar first, so we have
           to explicitly take the OTHER controls off the line.
           Chromium-only selectors; Safari/Firefox have different shadow
           DOMs and ignore them silently — fine, they collapse less
           aggressively and the unhidden controls still work. */
        .voice-preview-row audio::-webkit-media-controls-overflow-button,
        .voice-preview-row audio::-internal-media-controls-overflow-button,
        .voice-preview-row audio::-webkit-media-controls-mute-button,
        .voice-preview-row audio::-webkit-media-controls-volume-slider,
        .voice-preview-row audio::-webkit-media-controls-volume-control-container,
        .voice-preview-row audio::-webkit-media-controls-volume-control-hover-background {
            display: none !important;
        }
        .voice-preview-row .send-voice-btn { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: var(--bg-base); border: none; border-radius: 50%; width: 40px; height: 40px; min-height: auto; padding: 0; cursor: pointer; font-size: 1rem; box-shadow: 0 6px 16px -4px rgba(56,189,248,0.45); transition: transform 0.18s cubic-bezier(.2,.8,.2,1), filter 0.18s ease; }
        .voice-preview-row .send-voice-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
        .voice-preview-row .cancel-voice-btn { background: none; border: none; color: var(--muted); cursor: pointer; width: auto; min-height: auto; padding: 4px 8px; font-size: 1.2rem; transition: color 0.15s ease; }
        .voice-preview-row .cancel-voice-btn:hover { color: var(--text); }

        /* BELL / NOTIF BADGES */
        .notif-bell-wrap { position: relative; display: inline-block; cursor: pointer; }
        .notif-bell { font-size: 1.4rem; line-height: 1; }
        .notif-badge {
            position: absolute; top: -5px; right: -7px;
            background: var(--danger); color: white; border-radius: 999px;
            min-width: 18px; height: 18px; padding: 0 4px;
            font-size: 0.65rem; font-weight: bold; line-height: 1;
            display: none; align-items: center; justify-content: center;
            font-variant-numeric: tabular-nums;
        }
        /* Growth pulse — fired by updateNotifBadge when the count goes
           up between calls. Same one-shot pattern as the owner-panel
           bell pulse. */
        .notif-badge.notif-badge-pulse { animation: notif-badge-pulse 1.4s ease-out; }
        @keyframes notif-badge-pulse {
            0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
            60%  { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
            100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
        }

        /* NOTIFICATION PANEL */
        .notif-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }
        .clear-all-notifs-btn {
            background: transparent; color: var(--muted);
            border: 1px solid var(--border);
            padding: 6px 12px; border-radius: 999px;
            font-size: 0.78rem; font-weight: 700;
            cursor: pointer; font-family: inherit;
            min-height: auto; width: auto; line-height: 1;
            transition: color 0.15s, border-color 0.15s, background 0.15s;
        }
        .clear-all-notifs-btn:hover {
            color: var(--danger); border-color: rgba(239,68,68,0.5);
            background: rgba(239,68,68,0.06);
        }
        .mark-all-read-btn {
            background: var(--accent); color: var(--bg-base);
            border: none; border-radius: 6px; padding: 8px 14px;
            font-size: 0.82rem; font-weight: 700; cursor: pointer;
            width: auto; min-height: auto;
        }
        .mark-all-read-btn:hover { background: var(--accent-hover); }
        .notif-item { background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
        .notif-item.unread { border-color: var(--accent); }
        .notif-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; cursor: pointer; }
        .notif-body { flex: 1; min-width: 0; }
        .notif-msg { font-size: 0.88rem; color: var(--text); }
        .notif-time { font-size: 0.72rem; color: #475569; margin-top: 2px; }
        .notif-reply-btn {
            background: var(--accent); color: var(--bg-base);
            border: none; border-radius: 6px;
            padding: 8px 14px; font-size: 0.85rem; font-weight: 700;
            cursor: pointer; width: auto; min-height: auto;
        }
        .notif-reply-btn:hover { background: var(--accent-hover); }

        /* FYP POST CARD */
        .post-card { background: var(--bg-input); border: 1px solid var(--border); border-radius: 14px; padding: 16px; position: relative; }
        .post-card:hover { border-color: rgba(56,189,248,0.35); }
        .post-header { display: flex; justify-content: space-between; gap: 10px; }
        /* Allow the username + bio block (the inner div in s-7f8dc0) to
           shrink below its content width so long unbroken bio text wraps
           inside the card instead of stretching it horizontally. */
        .post-header .s-7f8dc0 { flex: 1; min-width: 0; }
        .post-header .s-7f8dc0 > div { flex: 1; min-width: 0; }
        .post-card .social-item-bio {
            overflow-wrap: anywhere;
            word-break: break-word;
            white-space: pre-wrap;
            line-height: 1.45;
        }
        /* Spotlight post image — Instagram-style: card sizes to image, image fits cleanly */
        .post-image {
            display: block;
            margin: 10px auto 0 auto;     /* center horizontally inside card */
            max-width: 100%;              /* never overflow card */
            max-height: 420px;            /* cap tall images so they don't dominate the feed */
            width: auto;
            height: auto;
            object-fit: contain;          /* preserve aspect ratio, no crop */
            border-radius: 12px;
            cursor: zoom-in;
            background: var(--bg-card);   /* blends with card if image has transparency */
        }
        .post-spotify { margin-top: 10px; }
        .post-spotify iframe { width: 100%; height: 80px; border: none; border-radius: 12px; }
        /* Post action row — refined icon buttons. SVG icons replace the
           emoji set (♥ ⭐ 💬 ↗) which rendered as platform-dependent
           coloured glyphs and undermined the rest of the visual system.
           Default state: muted stroke; hover: text; liked: danger fill;
           super-liked: warm-pink fill (matches the second accent). */
        /* Action row tucked into the bottom-right of the card — tight
           gap between the four icons so they read as one cluster, not
           four scattered controls. */
        .post-actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 12px; }
        .post-action-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; width: auto; min-height: auto; transition: color 0.15s ease, transform 0.15s cubic-bezier(.2,.8,.2,1); }
        .post-action-btn:hover { color: var(--text); transform: translateY(-1px); }
        .post-action-btn:active { transform: translateY(0); }
        .post-action-btn .pa-icon { width: 18px; height: 18px; flex-shrink: 0; transition: fill 0.18s ease, stroke 0.18s ease, transform 0.15s ease; }
        .post-action-btn.pa-like.liked { color: var(--danger); }
        .post-action-btn.pa-like.liked .pa-icon { fill: var(--danger); stroke: var(--danger); }
        .post-action-btn.pa-like:active .pa-icon { transform: scale(1.18); }
        .post-action-btn.pa-super.super { color: var(--accent-warm); }
        .post-action-btn.pa-super.super .pa-icon { fill: var(--accent-warm); stroke: var(--accent-warm); }
        .post-action-btn.pa-super:hover { color: var(--accent-warm); }
        .post-comments-section { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; display: none; }
        .post-comments-section.open { display: block; }
        .comment-item { font-size: 0.82rem; color: #94a3b8; margin-bottom: 6px; }
        .comment-item strong { color: var(--accent); }
        .comment-input-row { display: flex; gap: 8px; margin-top: 8px; }
        .comment-input-row input { flex: 1; padding: 7px 10px; font-size: 0.85rem; }
        .comment-send-btn { background: var(--accent); color: var(--bg-base); border: none; border-radius: 7px; padding: 7px 14px; cursor: pointer; font-weight: bold; width: auto; min-height: auto; }
        .post-delete-btn, .comment-delete-btn { background: none; border: none; cursor: pointer; color: var(--muted); padding: 4px; width: auto; min-height: auto; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s ease, transform 0.15s ease; }
        .post-delete-btn:hover, .comment-delete-btn:hover { color: var(--danger); transform: translateY(-1px); }
        .post-delete-btn .pa-icon, .comment-delete-btn .pa-icon { width: 16px; height: 16px; }
        /* Anchor the delete button to the top-right of any deletable
           card (Spotlight posts, Stories rows). The cards have
           position:relative; this lifts the button out of the flex/
           header flow so it doesn't push the rest of the row around.
           z-index keeps it above the card's own content + hover bg.
           Card content gets a tiny right-padding bump so long bios /
           usernames / metadata don't run under the trash icon. */
        .post-card > .post-delete-btn,
        .post-card .post-header > .post-delete-btn,
        .story-row > .post-delete-btn {
            position: absolute;
            top: 8px;
            right: 2px;
            padding: 4px;
            z-index: 2;
        }
        .post-card > .post-delete-btn .pa-icon,
        .post-card .post-header > .post-delete-btn .pa-icon,
        .story-row > .post-delete-btn .pa-icon { width: 14px; height: 14px; }
        .post-card .post-header { padding-right: 32px; }
        /* Story row: bump right-padding so the Play button shifts left
           enough to clear the absolute-positioned trash icon entirely. */
        .story-row { padding-right: 56px; }
        /* DM message delete (sender-only). Sits inline below the bubble
           on the right edge so it's discoverable without crowding the
           bubble itself. Only revealed on hover/focus on hover-capable
           devices; touch users always see it. */
        .dm-delete-btn {
            background: none; border: none; cursor: pointer;
            color: #475569; padding: 2px 4px;
            font-size: 0.85rem; line-height: 1;
            width: auto; min-height: auto;
            margin-top: 2px;
            opacity: 0.55;
            transition: opacity 0.15s, color 0.15s;
        }
        .dm-delete-btn:hover, .dm-delete-btn:active { color: var(--danger); opacity: 1; }
        @media (hover: none) {
            .dm-delete-btn { opacity: 0.75; }
        }

        /* TOAST SYSTEM (Phase 3) */
        .toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
        .toast { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); padding: 12px 20px; border-radius: 12px; font-size: 0.88rem; max-width: 320px; min-width: 200px; box-shadow: 0 6px 24px rgba(0,0,0,0.55); animation: toastIn 0.25s ease; pointer-events: auto; cursor: pointer; }
        .toast.success { border-color: var(--emerald); }
        .toast.error { border-color: var(--danger); }
        .toast.info { border-color: var(--accent); }
        @keyframes toastIn { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform: translateY(0); } }

        /* REPORT MODAL */
        .report-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.82); z-index: 2000; display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
        .report-modal-overlay.open { opacity: 1; pointer-events: auto; }
        .report-modal-card { background: var(--bg-card); border: 1px solid var(--border); border-bottom: none; border-radius: 20px 20px 0 0; width: 100%; max-width: 420px; padding: 24px 20px 32px; transform: translateY(100%); transition: transform 0.28s ease; }
        .report-modal-overlay.open .report-modal-card { transform: translateY(0); }
        .report-modal-title { font-size: 1rem; font-weight: bold; color: var(--text); margin-bottom: 16px; text-align: center; }
        .report-reason-btn { width: 100%; background: var(--bg-input); border: 1px solid var(--border); color: var(--text); padding: 12px 16px; border-radius: 8px; text-align: left; font-size: 0.9rem; cursor: pointer; margin-bottom: 8px; transition: border-color 0.15s; min-height: auto; }
        .report-reason-btn:hover { border-color: var(--danger); color: var(--danger); }
        .report-cancel-btn { width: 100%; background: none; border: none; color: var(--muted); padding: 10px; font-size: 0.85rem; cursor: pointer; margin-top: 4px; min-height: auto; }

        /* SOCIAL LINK CHIPS + ADD BUTTON */
        .social-chip-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; }
        .social-chip-icon { font-size: 1.1rem; flex-shrink: 0; }
        .social-chip-platform { font-weight: 700; color: var(--text); font-size: 0.85rem; min-width: 80px; flex-shrink: 0; text-align: left; }
        .social-chip-url { color: var(--muted); font-size: 0.78rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
        .social-chip-remove { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px 6px; font-size: 1.05rem; width: auto; min-height: auto; flex-shrink: 0; }
        .social-chip-remove:hover { color: var(--danger); }
        .add-link-btn { background: var(--bg-input); color: var(--accent); border: 1px dashed var(--border); border-radius: 8px; padding: 10px 12px; cursor: pointer; font-weight: 600; font-size: 0.88rem; transition: border-color 0.15s, color 0.15s; width: 100%; min-height: auto; }
        .add-link-btn:hover { border-color: var(--accent); color: var(--accent-hover); }
        .platform-picker-row { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: border-color 0.15s; width: 100%; min-height: auto; color: var(--text); text-align: left; font-family: inherit; font-size: 0.9rem; }
        .platform-picker-row:hover { border-color: var(--accent); }
        .platform-picker-row.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
        .platform-picker-row .pp-icon { font-size: 1.2rem; flex-shrink: 0; }
        .platform-picker-row .pp-label { font-weight: 700; }
        .platform-picker-row .pp-tag { margin-left: auto; font-size: 0.72rem; color: var(--muted); }

        /* ============ LIVE ROOM PHASE 1 — Stage / Audience / Chat / Reactions ============ */
        #live-room-view { position: relative; }
        .live-room-header { padding: 4px 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
        #live-room-title-text { font-size: 1.05rem; font-weight: 700; color: var(--text); }
        #live-room-meta { font-size: 0.72rem; color: var(--muted); margin-top: 3px; display: flex; gap: 10px; flex-wrap: wrap; }
        #live-room-meta .lrm-mode-pill { background: rgba(56,189,248,0.15); color: var(--accent); padding: 1px 8px; border-radius: 10px; font-weight: 700; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; }
        #live-room-meta .lrm-mode-pill.approval { background: rgba(251,191,36,0.18); color: #fbbf24; }

        /* Stage tiles (large) */
        /* Stage grid — wraps speaker tiles. No fixed height; content drives
           the box height so name + role both render inside the bordered area
           regardless of how many badges the username has. */
        .live-stage-grid { display: flex; flex-wrap: wrap; gap: 14px; padding: 16px 14px 18px; background: rgba(56,189,248,0.04); border: 1px solid var(--border); border-radius: 12px; align-items: flex-start; justify-content: center; }
        .live-stage-tile { display: block; text-align: center; min-width: 110px; max-width: 160px; position: relative; padding: 0; }
        .live-stage-tile .lst-avatar-wrap { display: block; position: relative; width: 60px; height: 60px; border-radius: 50%; padding: 3px; margin: 0 auto; transition: transform 0.18s ease, box-shadow 0.18s ease; background: var(--border); cursor: pointer; }
        .live-stage-tile .lst-avatar-wrap:hover { transform: scale(1.06); }
        .live-stage-tile .lst-avatar-wrap:active { transform: scale(0.97); }
        .live-stage-tile .lst-avatar-wrap.host { background: linear-gradient(135deg, #f97316, #ef4444); }
        .live-stage-tile .lst-avatar-wrap.speaker { background: linear-gradient(135deg, var(--accent), #6366f1); }
        .live-stage-tile .lst-avatar-wrap.speaking { box-shadow: 0 0 0 3px var(--emerald), 0 0 22px rgba(16,185,129,0.7); animation: speakingPulse 0.9s ease-in-out infinite; }
        .live-stage-tile .lst-avatar { width: 100%; height: 100%; border-radius: 50%; display: block; background: var(--bg-card); object-fit: cover; }
        /* Username — block element under the avatar. Inline-flex children
           (badges/ticks) sit on the same line as the @handle. No max-width
           clipping; the tile's own max-width keeps things tidy. */
        .live-stage-tile .lst-name { display: block; margin-top: 8px; font-size: 0.82rem; color: var(--text); font-weight: 600; line-height: 1.25; word-break: break-word; }
        /* Role pill — small label below the username inside the same tile.
           Stays inside the bordered grid because the grid doesn't constrain
           height anymore. */
        .live-stage-tile .lst-role { display: block; margin-top: 4px; font-size: 0.66rem; color: var(--muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.08em; }
        .live-stage-tile .lst-role.host { color: #f97316; }
        .live-stage-tile .lst-role.speaker { color: var(--accent); }
        .live-stage-tile .lst-speaking-text { display: none; margin-top: 4px; font-size: 0.66rem; color: var(--emerald); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.2; animation: speakingTextPulse 0.9s ease-in-out infinite; }
        .live-stage-tile.speaking .lst-speaking-text { display: block; }
        .live-stage-tile.speaking .lst-role { display: none; }
        .live-stage-tile .lst-mute-icon { position: absolute; bottom: 16px; right: -2px; background: var(--danger); color: white; border-radius: 50%; width: 19px; height: 19px; display: flex; align-items: center; justify-content: center; font-size: 10px; border: 2px solid var(--bg-card); }
        .live-stage-tile .lst-host-actions { display: flex; gap: 4px; margin-top: 4px; }
        .live-stage-tile .lst-host-actions .lst-action { background: var(--bg-input); border: 1px solid var(--border); color: var(--muted); font-size: 0.78rem; padding: 3px 7px; border-radius: 6px; cursor: pointer; min-height: auto; width: auto; font-family: inherit; line-height: 1; transition: border-color 0.15s, color 0.15s, background 0.15s; }
        .live-stage-tile .lst-host-actions .lst-action:hover { color: var(--text); border-color: var(--accent); background: rgba(56,189,248,0.08); }
        .live-stage-tile .lst-host-actions .lst-action.muted { color: var(--danger); border-color: rgba(239,68,68,0.4); }
        @keyframes speakingTextPulse {
            0%, 100% { opacity: 0.7; }
            50%      { opacity: 1; }
        }

        @keyframes speakingPulse {
            0%, 100% { box-shadow: 0 0 0 3px var(--emerald), 0 0 16px rgba(16,185,129,0.5); }
            50%      { box-shadow: 0 0 0 5px var(--emerald), 0 0 28px rgba(16,185,129,0.85); }
        }

        /* Audience grid (small) */
        .live-audience-grid { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 0; }
        .live-audience-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 56px; position: relative; }
        .live-audience-tile .lat-avatar-wrap { position: relative; cursor: pointer; transition: transform 0.18s ease; }
        .live-audience-tile .lat-avatar-wrap:hover { transform: scale(1.08); }
        .live-audience-tile .lat-avatar-wrap:active { transform: scale(0.95); }
        .live-audience-tile .lat-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-card); object-fit: cover; border: 2px solid var(--border); display: block; }
        .live-audience-tile.pending .lat-avatar { border-color: #fbbf24; box-shadow: 0 0 0 2px rgba(251,191,36,0.35); }
        .live-audience-tile .lat-pending-flag { position: absolute; top: -6px; right: -4px; font-size: 0.85rem; }
        .live-audience-tile .lat-name { font-size: 0.65rem; color: var(--muted); max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .live-audience-tile .lat-host-actions { display: flex; gap: 3px; margin-top: 2px; }
        .live-audience-tile .lat-host-actions button { background: var(--bg-input); border: 1px solid var(--border); color: var(--muted); font-size: 0.62rem; padding: 2px 6px; border-radius: 4px; cursor: pointer; min-height: auto; width: auto; font-family: inherit; transition: border-color 0.15s, color 0.15s; line-height: 1; }
        .live-audience-tile .lat-host-actions button:hover { color: var(--text); border-color: var(--accent); }
        .live-audience-tile .lat-host-actions .approve { color: var(--emerald); border-color: rgba(16,185,129,0.4); }
        .live-audience-tile .lat-host-actions .approve:hover { background: rgba(16,185,129,0.12); border-color: var(--emerald); }
        .live-audience-tile .lat-host-actions .decline { color: var(--danger); border-color: rgba(239,68,68,0.4); }
        .live-audience-tile .lat-host-actions .decline:hover { background: rgba(239,68,68,0.12); border-color: var(--danger); }

        /* Empty audience state */
        .live-audience-empty { width: 100%; box-sizing: border-box; padding: 20px 14px; text-align: center; background: var(--bg-card); border: 1px dashed var(--border); border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
        .live-audience-empty .lae-icon { font-size: 1.6rem; opacity: 0.85; }
        .live-audience-empty .lae-title { font-size: 0.85rem; color: var(--text); font-weight: 600; }
        .live-audience-empty .lae-sub { font-size: 0.72rem; color: var(--muted); }

        /* User popover (clickable avatars) */
        .live-user-card { max-width: 360px; padding: 28px 22px 22px; text-align: center; }
        .luc-avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin: 0 auto 10px; display: block; border: 3px solid var(--accent); background: var(--bg-input); }
        .luc-name { font-size: 1.15rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
        .luc-bio { font-size: 0.85rem; color: var(--muted); line-height: 1.4; min-height: 1.2em; margin-bottom: 18px; }
        .luc-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }

        /* Pending list (alternative compact view shown to host) */
        .live-pending-list { display: flex; flex-direction: column; gap: 6px; }
        .live-pending-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.3); border-radius: 8px; }
        .live-pending-row img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
        .live-pending-row .lpr-name { flex: 1; font-size: 0.85rem; color: var(--text); text-align: left; }
        .live-pending-row button { font-size: 0.72rem; padding: 4px 10px; min-height: auto; width: auto; border-radius: 6px; }

        /* Chat */
        .live-chat-messages { background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; padding: 10px 10px; max-height: 140px; min-height: 84px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; }
        .live-chat-msg { font-size: 0.8rem; line-height: 1.4; word-wrap: break-word; text-align: left; padding: 4px 8px; border-radius: 8px; background: rgba(56,189,248,0.04); }
        .live-chat-msg.host-msg { background: rgba(249,115,22,0.07); }
        .live-chat-msg.speaker-msg { background: rgba(16,185,129,0.06); }
        .live-chat-msg .lcm-from { font-weight: 700; color: var(--accent); }
        .live-chat-msg .lcm-from.host { color: #f97316; }
        .live-chat-msg .lcm-from.speaker { color: var(--emerald); }
        .live-chat-msg .lcm-text { color: var(--text); }
        .live-chat-input-row { display: flex; gap: 6px; margin-top: 6px; }
        .live-chat-input-row input { flex: 1; padding: 8px 10px; font-size: 0.85rem; background: var(--bg-input); border: 1px solid var(--border); color: var(--text); border-radius: 8px; outline: none; font-family: inherit; }
        .live-chat-input-row input:focus { border-color: var(--accent); }
        .live-chat-send-btn { background: var(--accent); color: var(--bg-base); border: none; border-radius: 8px; padding: 0 14px; font-weight: 700; cursor: pointer; min-height: auto; width: auto; height: 36px; }

        /* Reactions */
        .live-react-bar { display: flex; gap: 6px; justify-content: center; padding: 8px 0 4px; }
        .react-btn { background: var(--bg-input); border: 1px solid var(--border); color: var(--text); border-radius: 50%; width: 38px; height: 38px; padding: 0; min-height: auto; font-size: 1.1rem; cursor: pointer; transition: transform 0.1s, border-color 0.15s; line-height: 1; }
        .react-btn:hover { transform: scale(1.15); border-color: var(--accent); }
        .react-btn:active { transform: scale(0.95); }

        /* Control bar (mode / mute / raise hand / leave) */
        .live-control-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
        .live-control-bar button { flex: 1 1 90px; min-width: 90px; padding: 8px 10px; font-size: 0.78rem; min-height: auto; }
        .live-control-bar button.live-leave { flex: 1 1 100%; }

        /* Floating emoji */
        @keyframes floatUp {
            0%   { transform: translate(var(--dx, 0), 0) scale(0.85); opacity: 0; }
            12%  { opacity: 1; }
            100% { transform: translate(var(--dx, 0), -200px) scale(1.6); opacity: 0; }
        }
        #live-floating-emoji-area { position: absolute; bottom: 130px; left: 0; right: 0; height: 200px; pointer-events: none; overflow: visible; }
        .floating-emoji { position: absolute; bottom: 0; font-size: 1.9rem; animation: floatUp 1.8s ease-out forwards; pointer-events: none; will-change: transform, opacity; }

        .dm-action-wrap { position: relative; flex: 1; }
        .dm-unread-badge { position: absolute; top: -6px; right: -6px; background: var(--danger); color: white; border-radius: 999px; min-width: 18px; height: 18px; padding: 0 4px; font-size: 0.62rem; font-weight: bold; line-height: 1; display: none; align-items: center; justify-content: center; pointer-events: none; font-variant-numeric: tabular-nums; }
        .dm-unread-badge.dm-unread-badge-pulse { animation: notif-badge-pulse 1.4s ease-out; }

        /* PHASE 3: profile actions stacked under bio */
        .profile-secondary-action { background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px 0; text-align: left; width: auto; min-height: auto; font-size: 0.85rem; }
        .profile-secondary-action.report:hover { color: var(--danger); }
        .profile-secondary-action.block:hover { color: #f87171; }
        /* Danger action stack — Report / Block / Ban share the same red treatment */
        .profile-danger-btn,
        .profile-ban-btn {
            background-color: #7f1d1d;
            color: #fca5a5;
            border: 1px solid var(--danger);
            border-radius: 10px;
            font-size: 0.9rem;
            padding: 12px;
            width: 100%;
            cursor: pointer;
            font-weight: 700;
            min-height: 44px;
            transition: background 0.18s, border-color 0.18s, transform 0.12s, box-shadow 0.18s;
            font-family: inherit;
            line-height: 1;
        }
        .profile-danger-btn:hover,
        .profile-ban-btn:hover {
            background-color: #991b1b;
            border-color: #f87171;
            transform: translateY(-1px);
            box-shadow: 0 4px 14px rgba(239,68,68,0.25);
        }
        .profile-danger-btn:active,
        .profile-ban-btn:active { transform: translateY(0); }
        .username-link { cursor: pointer; }
        /* Hover underline removed — clashed with the gradient/glow
           username styles (legendary gold, aurora, ultra perks) which
           use background-clip: text + transparent fill; the underline
           painted in the parent text color instead of matching the
           gradient and looked broken. */

        /* Search bar in messages */
        .search-bar { position: relative; flex-shrink: 0; }
        .search-bar input { padding-left: 36px; }
        .search-bar::before {
            content: '🔍'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
            font-size: 0.95rem; pointer-events: none; opacity: .7;
        }

        /* Mod panel readability boost */
        #mod-full-panel .social-item-row { font-size: 1rem; padding: 16px 18px; line-height: 1.5; }

        /* Social media link icons on profile view */
        .social-icons-row { display: flex; gap: 10px; flex-wrap: wrap; }
        .social-icon-link {
            display: inline-flex; align-items: center; justify-content: center;
            width: 40px; height: 40px; border-radius: 10px;
            text-decoration: none; font-size: 1.1rem; color: white;
            transition: transform .12s;
        }
        .social-icon-link:hover { transform: scale(1.1); }
        .social-icon-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
        .social-icon-tiktok    { background: #000; border: 1px solid #25F4EE; color: #25F4EE; }
        .social-icon-twitter   { background: #000; }
        .social-icon-youtube   { background: #ff0000; }
        .social-icon-spotify   { background: #1DB954; }

        /* Image viewer modal */
        .image-viewer { position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 3000; display: none; align-items: center; justify-content: center; cursor: zoom-out; padding: 20px; }
        .image-viewer.open { display: flex; }
        .image-viewer img { max-width: 100%; max-height: 100%; border-radius: 8px; }
        /* R264 — explicit close X for sighted users who don't realize the
           backdrop is clickable. Top-right anchored, doesn't intercept the
           backdrop click since the X is its own button (data-stop=1). */
        .image-viewer-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); color: #fff; border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; }
        .image-viewer-close:hover { background: rgba(0,0,0,0.75); }
        .image-viewer-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

        /* Image preview before sending in DM */
        .dm-image-preview { display: flex; gap: 8px; align-items: center; padding: 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; margin-top: 8px; }
        .dm-image-preview img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; }

        /* ============ PHASE 1+2+5 STYLES ============ */
        /* Mood / interest tags */
        .pre-match-card { background: var(--bg-input); border: 1px solid var(--border); border-radius: 14px; padding: 18px 18px 16px; margin-bottom: 16px; text-align: left; }
        .pre-match-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
        .pre-match-label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
        /* Live tag counter — sits inline with the "INTERESTS" label */
        .interests-counter {
            font-size: 0.7rem; font-weight: 700; padding: 2px 8px;
            border-radius: 999px; background: rgba(56,189,248,0.12);
            color: var(--accent); letter-spacing: 0; text-transform: none;
            line-height: 1; min-width: 32px; text-align: center;
            transition: background 0.15s, color 0.15s;
        }
        .interests-counter.full { background: rgba(239,68,68,0.15); color: var(--danger); }
        /* Lighter, smaller "Clear all" — minimal until needed */
        .interests-clear-btn {
            background: none; border: none; color: #64748b;
            font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em;
            padding: 2px 8px; cursor: pointer; border-radius: 6px;
            min-height: auto; width: auto; font-family: inherit;
            text-transform: uppercase; transition: color 0.15s, background 0.15s;
        }
        .interests-clear-btn:hover { color: var(--danger); background: rgba(239,68,68,0.06); }
        /* Omegle-style interests input — clearer tag-vs-input separation */
        .interests-input-wrap {
            display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
            background: var(--bg-card); border: 1.5px solid var(--border);
            border-radius: 12px; padding: 10px 12px; min-height: 48px;
            cursor: text;
            transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
        }
        .interests-input-wrap:hover { border-color: rgba(56,189,248,0.4); background: rgba(56,189,248,0.02); }
        .interests-input-wrap:focus-within {
            border-color: var(--accent);
            box-shadow: 0 0 0 4px rgba(56,189,248,0.15);
            background: rgba(56,189,248,0.03);
        }
        .interests-input-wrap.has-pills #interests-input { border-left: 1px solid var(--border); padding-left: 8px; margin-left: 2px; }
        #interests-pills { display: contents; }

        .interest-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--bg-base); padding: 4px 5px 4px 10px; border-radius: 12px; font-size: 0.78rem; font-weight: 700; line-height: 1; user-select: none; box-shadow: 0 1px 4px rgba(56,189,248,0.25); }
        .interest-pill .pill-x { display: inline-flex; align-items: center; justify-content: center; background: rgba(15,23,42,0.28); color: var(--bg-base); width: 16px; height: 16px; border-radius: 50%; font-size: 0.72rem; cursor: pointer; line-height: 1; transition: background 0.15s; }
        .interest-pill .pill-x:hover { background: rgba(15,23,42,0.55); }
        #interests-input { flex: 1 1 120px; min-width: 100px; background: transparent; border: none; outline: none; color: var(--text); font-size: 0.92rem; padding: 5px 2px; height: auto; min-height: auto; font-family: inherit; }
        #interests-input::placeholder { color: var(--muted); opacity: 0.6; font-style: italic; }
        .interests-hint { font-size: 0.7rem; color: var(--muted); margin-top: 12px; opacity: 0.7; }
        /* iOS-style preference row — title + subtitle, refined typography.
           Reset all properties inherited from the global `label` rule
           (uppercase, letter-spacing, bold) so it reads naturally. */
        .match-anyone-row {
            display: flex; align-items: center; gap: 14px;
            margin-top: 16px; padding: 14px 16px;
            background: var(--bg-card); border: 1px solid var(--border);
            border-radius: 12px; cursor: pointer; user-select: none;
            transition: border-color 0.15s, background 0.15s, transform 0.1s;
            /* Reset global <label> styles */
            text-transform: none !important;
            letter-spacing: 0 !important;
            font-weight: normal !important;
            font-size: 0.92rem !important;
            color: var(--text) !important;
        }
        .match-anyone-row:hover { border-color: rgba(56,189,248,0.5); background: rgba(56,189,248,0.04); }
        .match-anyone-row:active { transform: scale(0.995); }
        .match-anyone-row:has(input:checked) { border-color: var(--accent); background: rgba(56,189,248,0.06); }
        /* Sub-help line under the toggle title — explains the trade-off
           ("Faster matches — partners may not share your interests").
           Smaller + muted so it doesn't compete with the title. */
        .ma-text { display: flex; flex-direction: column; gap: 2px; }
        .ma-help { font-size: 0.72rem; color: var(--muted); }

        .match-anyone-row input[type="checkbox"] {
            appearance: none; -webkit-appearance: none;
            width: 22px; height: 22px; border-radius: 7px;
            border: 1.5px solid var(--border); background: var(--bg-input);
            cursor: pointer; margin: 0; flex-shrink: 0; position: relative;
            transition: border-color 0.15s, background 0.15s;
        }
        .match-anyone-row input[type="checkbox"]:hover { border-color: var(--accent); }
        .match-anyone-row input[type="checkbox"]:checked {
            background: var(--accent); border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(56,189,248,0.18);
        }
        .match-anyone-row input[type="checkbox"]:checked::after {
            content: '✓'; position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
            color: var(--bg-base); font-size: 14px; font-weight: 900; line-height: 1;
        }
        /* Title + subtitle stack */
        .match-anyone-row .ma-text {
            display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0;
            text-transform: none; letter-spacing: 0;
        }
        .match-anyone-row .ma-title {
            font-size: 0.95rem; font-weight: 600; color: var(--text); line-height: 1.2;
        }
        .match-anyone-row .ma-sub {
            color: var(--muted); font-weight: 400; font-size: 0.78rem; line-height: 1.3;
            text-transform: none; letter-spacing: 0;
        }
        /* Disabled Find Match button */
        .call-btn:disabled,
        .call-btn[disabled] { background: var(--border) !important; color: var(--muted) !important; cursor: not-allowed; box-shadow: none; transform: none; }
        .tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
        .tag-chip {
            background: var(--bg-base); color: var(--text); border: 1px solid var(--border);
            padding: 6px 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 600;
            cursor: pointer; transition: all .15s; min-height: auto; width: auto;
        }
        .tag-chip:hover { border-color: var(--accent); }
        .tag-chip.active { background: var(--accent); color: var(--bg-base); border-color: var(--accent); }
        .tag-chip.mood-active { background: var(--emerald); color: var(--bg-base); border-color: var(--emerald); }

        /* Icebreaker banner — more noticeable, gentle glow + entrance */
        .icebreaker-banner {
            background: linear-gradient(135deg, rgba(56,189,248,0.22), rgba(16,185,129,0.18));
            border: 1px solid rgba(56,189,248,0.55);
            border-radius: 14px; padding: 14px 16px; margin-top: 14px;
            font-size: 0.95rem; color: var(--text); line-height: 1.45;
            display: none;
            box-shadow: 0 6px 22px rgba(56,189,248,0.18);
            position: relative;
        }
        .icebreaker-banner.show { display: block; animation: ibPop .4s cubic-bezier(0.34, 1.56, 0.64, 1); }
        @keyframes ibPop {
            0%   { opacity: 0; transform: translateY(-8px) scale(0.96); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        .icebreaker-banner .ib-label { font-size: 0.72rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; margin-bottom: 6px; }
        .icebreaker-banner #icebreaker-text { font-weight: 600; color: var(--text); }
        .shared-tags { font-size: 0.78rem; color: var(--emerald); margin-top: 6px; font-weight: 700; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
        /* R269 — visible chip styling for the per-interest spans introduced
           in R268. Without this they rendered as inline plain text and
           collapsed into one run-on string. */
        .shared-tag-prefix { display: inline-flex; }
        .shared-tag-chip { display: inline-flex; align-items: center; padding: 2px 8px; background: rgba(16,185,129,0.18); border: 1px solid rgba(16,185,129,0.35); border-radius: 999px; color: var(--emerald); font-weight: 700; font-size: 0.72rem; }
        .shared-tag-chip + .shared-tag-chip { margin-left: 0; }
        @media (prefers-reduced-motion: reduce) { .shared-tag-chip { transition: none; } }

        /* Random topic + reactions bar inside call */
        .call-extras-row { display: none; gap: 8px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
        .call-extras-row.show { display: flex; }
        .topic-btn { background: var(--bg-input); color: var(--accent); border: 1px solid var(--accent); border-radius: 8px; padding: 8px 14px; font-size: 0.85rem; font-weight: 600; cursor: pointer; width: auto; min-height: auto; }
        .topic-btn:hover { background: var(--accent); color: var(--bg-base); }
        .reaction-btn { background: var(--bg-input); border: 1px solid var(--border); border-radius: 50%; width: 40px; height: 40px; min-height:auto; padding: 0; cursor: pointer; font-size: 1.2rem; transition: opacity 0.2s, filter 0.2s; }
        .reaction-btn:hover { border-color: var(--accent); transform: scale(1.05); }
        /* Cooldown — applied for ~1.2s after fire so the key-mash
           pattern isn't rewarded with infinite spam. Button stays
           clickable visually but the JS gate eats the press. */
        .reaction-btn.reaction-cooldown { opacity: 0.4; filter: grayscale(0.6); transform: none; }
        /* Keyboard-shortcut feedback flash — fired by the M/N/E
           handlers so the visible button "blinks" when its
           shortcut is pressed. Confirms the action took effect
           even if the button is off-screen. */
        .kbd-flash { animation: kbd-flash 0.6s ease-out; }
        /* Wave button — wiggle while in-flight, gold tint after a
           successful send. Reverted on error in the JS. */
        .wave-sending { animation: wave-wiggle 0.6s ease-in-out infinite; }
        .wave-sent    { color: #fbbf24 !important; }
        @keyframes wave-wiggle {
            0%, 100% { transform: rotate(0); }
            25%      { transform: rotate(-15deg); }
            75%      { transform: rotate(15deg); }
        }
        @keyframes kbd-flash {
            0%   { box-shadow: 0 0 0 0 rgba(56,189,248,0.55); }
            50%  { box-shadow: 0 0 0 6px rgba(56,189,248,0); }
            100% { box-shadow: 0 0 0 0 rgba(56,189,248,0); }
        }
        .topic-display {
            background: var(--bg-input); border: 1px dashed var(--accent);
            border-radius: 10px; padding: 10px 14px; margin-top: 10px;
            font-size: 0.88rem; line-height: 1.4; display: none; text-align: left;
        }
        .topic-display.show { display: block; animation: toastIn .25s ease; }
        /* Inline × dismiss on the topic banner. Floats to the right. */
        .topic-display .topic-dismiss {
            float: right;
            background: transparent;
            border: 1px solid var(--border-soft);
            color: var(--muted);
            width: 22px; height: 22px; padding: 0;
            border-radius: 6px;
            cursor: pointer; line-height: 1;
            font-family: inherit; font-size: 0.95rem;
            margin-left: 8px;
            transition: all 0.12s;
        }
        .topic-display .topic-dismiss:hover { color: var(--text); border-color: var(--accent); }

        /* Reaction floating bubble */
        .reaction-float {
            position: fixed; left: 50%; bottom: 30%; transform: translateX(-50%);
            font-size: 4rem; pointer-events: none; z-index: 5000;
            animation: reactionFly 1.6s forwards;
        }
        @keyframes reactionFly { 0% { opacity: 0; transform: translate(-50%, 30px) scale(.4); } 30% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -120px) scale(1.1); } }

        /* Post-call screen — focused on keeping the conversation going */
        .post-call-card {
            background: var(--bg-input); border: 1px solid var(--border);
            border-radius: 14px; padding: 18px 16px 14px; text-align: left;
            margin-top: 14px; display: none;
        }
        .post-call-card.show { display: block; animation: ibPop .35s cubic-bezier(0.34, 1.56, 0.64, 1); }
        .post-call-title {
            font-size: 0.72rem; font-weight: 800; color: var(--muted);
            text-transform: uppercase; letter-spacing: 0.08em;
            margin-bottom: 4px; text-align: left;
        }
        .post-call-subtitle {
            /* Post-call CTA subtitle — emotional moment ("keep talking
               to people you matched with"), gets warm accent so the
               post-call card doesn't feel like another sky-blue panel. */
            font-size: 1.05rem; font-weight: 700;
            background: linear-gradient(135deg, var(--accent-warm), var(--accent));
            -webkit-background-clip: text; background-clip: text;
            -webkit-text-fill-color: transparent; color: transparent;
            margin-bottom: 14px; text-align: left;
        }
        .reconnect-list { display: flex; flex-direction: column; gap: 8px; }
        .reconnect-row {
            display: flex; gap: 12px; align-items: center;
            padding: 12px; background: var(--bg-card);
            border: 1px solid var(--border); border-radius: 12px;
            transition: border-color 0.15s, transform 0.15s;
        }
        .reconnect-row:hover { border-color: var(--accent); transform: translateY(-1px); }
        /* Reconnect-row skeleton — pulse-shimmer placeholders so the
           "what was your last partner?" lookup feels alive instead of
           blank. Stops auto when the real row replaces it. */
        .reconnect-skeleton { cursor: default; pointer-events: none; opacity: 0.7; }
        .reconnect-skel-avatar {
            width: 48px; height: 48px; border-radius: 50%;
            background: linear-gradient(110deg, var(--bg-card-2,#1a2740) 30%, rgba(255,255,255,0.06) 50%, var(--bg-card-2,#1a2740) 70%);
            background-size: 220% 100%;
            animation: skel-shimmer 1.4s ease-in-out infinite;
            flex-shrink: 0;
        }
        .reconnect-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
        .reconnect-skel-line {
            height: 11px; border-radius: 6px;
            background: linear-gradient(110deg, var(--bg-card-2,#1a2740) 30%, rgba(255,255,255,0.06) 50%, var(--bg-card-2,#1a2740) 70%);
            background-size: 220% 100%;
            animation: skel-shimmer 1.4s ease-in-out infinite;
        }
        .reconnect-skel-line-name { width: 60%; }
        .reconnect-skel-line-sub  { width: 40%; height: 9px; }
        @keyframes skel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
        .reconnect-row .avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--border); }
        .reconnect-row .rr-info { flex: 1; min-width: 0; }
        .reconnect-row .rr-name { font-weight: 700; color: var(--text); font-size: 0.95rem; line-height: 1.2; }
        .reconnect-row .rr-status { font-size: 0.72rem; color: var(--muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
        .reconnect-row .rr-status .rr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); display: inline-block; }
        .reconnect-row .rr-status.online .rr-dot { background: var(--emerald); box-shadow: 0 0 0 3px rgba(16,185,129,0.2); }
        .reconnect-row .rr-status.online { color: var(--emerald); }
        .reconnect-row .rr-actions { display: flex; gap: 6px; flex-shrink: 0; }
        /* Consistent post-call action buttons — same height, radius, padding */
        .pc-action-btn {
            height: 36px; min-height: 36px; padding: 0 14px;
            border-radius: 8px; font-size: 0.85rem; font-weight: 700;
            cursor: pointer; width: auto; border: none;
            display: inline-flex; align-items: center; justify-content: center; gap: 4px;
            transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
            font-family: inherit;
        }
        .pc-action-btn:hover { transform: translateY(-1px); }
        .pc-action-btn:active { transform: translateY(0); }
        .pc-action-btn.dm    { background: var(--accent); color: var(--bg-base); }
        .pc-action-btn.dm:hover    { background: var(--accent-hover); box-shadow: 0 4px 14px rgba(56,189,248,0.35); }
        .pc-action-btn.wave  { background: rgba(251,191,36,0.18); color: #fbbf24; border: 1px solid rgba(251,191,36,0.5); }
        .pc-action-btn.wave:hover  { background: rgba(251,191,36,0.32); box-shadow: 0 4px 14px rgba(251,191,36,0.3); }

        /* Streak + badges in profile */
        .stat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 6px 0 14px; }
        .stat-cell { background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; padding: 10px 6px; text-align: center; }
        .stat-num { font-size: 1.2rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.1; }
        .stat-num.fire { color: #f97316; }
        .stat-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; }
        .badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
        .badge-item {
            position: relative; background: var(--bg-input);
            border: 1.5px solid var(--border); border-radius: 12px;
            padding: 12px 8px 10px; text-align: center;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .badge-item.earned:hover { transform: translateY(-2px); }
        .badge-item.locked { opacity: 0.55; }
        .badge-item.locked .b-emoji { filter: grayscale(0.7); }
        .badge-item .b-emoji { font-size: 1.8rem; line-height: 1; }
        .badge-item .b-label { font-size: 0.72rem; font-weight: 700; color: var(--text); margin-top: 6px; line-height: 1.1; }
        .badge-item .b-desc  { font-size: 0.62rem; color: var(--muted); margin-top: 3px; line-height: 1.2; min-height: 1.5em; }
        /* Earned checkmark badge in top-right corner */
        .badge-item.earned::after {
            content: '✓'; position: absolute; top: -6px; right: -6px;
            width: 20px; height: 20px; border-radius: 50%;
            background: var(--emerald); color: white;
            font-size: 12px; font-weight: 900; line-height: 20px;
            box-shadow: 0 2px 6px rgba(16,185,129,0.4);
        }
        /* Rarity-tinted borders + glow for earned */
        .badge-item.r-common  { /* default */ }
        .badge-item.r-rare      { border-color: #38bdf8; }
        .badge-item.r-epic      { border-color: #a855f7; }
        .badge-item.r-legendary { border-color: #f59e0b; }
        .badge-item.earned.r-common      { box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 4px 12px rgba(0,0,0,0.2); }
        .badge-item.earned.r-rare        { box-shadow: 0 0 0 1px rgba(56,189,248,0.3),  0 0 18px rgba(56,189,248,0.25); }
        .badge-item.earned.r-epic        { box-shadow: 0 0 0 1px rgba(168,85,247,0.35), 0 0 22px rgba(168,85,247,0.3);  }
        .badge-item.earned.r-legendary   { box-shadow: 0 0 0 1px rgba(245,158,11,0.4),  0 0 24px rgba(245,158,11,0.35); animation: legendaryShimmer 4s ease-in-out infinite; }
        @keyframes legendaryShimmer {
            0%,100% { box-shadow: 0 0 0 1px rgba(245,158,11,0.4), 0 0 22px rgba(245,158,11,0.3); }
            50%     { box-shadow: 0 0 0 1px rgba(245,158,11,0.6), 0 0 32px rgba(245,158,11,0.55); }
        }
        /* Rarity label chip */
        .badge-item .b-rarity {
            display: inline-block; margin-top: 6px; padding: 1px 8px;
            border-radius: 999px; font-size: 0.58rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.4;
        }
        .badge-item .b-rarity.r-common    { background: rgba(148,163,184,0.15); color: #94a3b8; }
        .badge-item .b-rarity.r-rare      { background: rgba(56,189,248,0.18);  color: #38bdf8; }
        .badge-item .b-rarity.r-epic      { background: rgba(168,85,247,0.22);  color: #a855f7; }
        .badge-item .b-rarity.r-legendary { background: rgba(245,158,11,0.22);  color: #f59e0b; }
        /* Locked-badge progress bar */
        .badge-progress {
            height: 4px; background: var(--border); border-radius: 999px;
            overflow: hidden; margin-top: 6px;
        }
        .badge-progress > span {
            display: block; height: 100%; background: var(--accent);
            border-radius: 999px; transition: width 0.4s ease;
        }
        .badge-progress-text { font-size: 0.58rem; color: var(--muted); margin-top: 3px; line-height: 1; }

        /* === LEVEL CARD + XP BAR === */
        .level-card {
            background: linear-gradient(135deg, rgba(56,189,248,0.08), rgba(16,185,129,0.05));
            border: 1px solid rgba(56,189,248,0.25); border-radius: 14px;
            padding: 16px 18px; margin-bottom: 14px;
        }
        .level-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
        .level-pill {
            display: inline-flex; align-items: center; gap: 6px;
            background: var(--accent); color: var(--bg-base);
            padding: 6px 14px; border-radius: 999px;
            font-weight: 800; font-size: 0.95rem;
            box-shadow: 0 2px 8px rgba(56,189,248,0.4);
        }
        .level-pill .lv-num { font-size: 1.1rem; }
        .level-xp-text { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
        .level-xp-text strong { color: var(--text); }
        .xp-bar {
            margin-top: 10px; height: 10px; background: var(--bg-input);
            border-radius: 999px; overflow: hidden; border: 1px solid var(--border);
        }
        .xp-bar > span {
            display: block; height: 100%;
            background: linear-gradient(90deg, var(--accent), var(--emerald));
            border-radius: 999px; transition: width 0.5s ease;
            box-shadow: 0 0 12px rgba(56,189,248,0.4);
        }
        .level-reward-line {
            font-size: 0.72rem; color: var(--muted); margin-top: 8px; line-height: 1.3;
        }
        .level-reward-line strong { color: var(--accent); }

        /* === STREAK MULTIPLIER PILL === */
        .multi-pill {
            display: inline-flex; align-items: center; gap: 4px;
            background: rgba(245,158,11,0.15); color: #f59e0b;
            padding: 3px 10px; border-radius: 999px;
            font-size: 0.74rem; font-weight: 700;
        }

        /* === BADGE COUNTER ROW === */
        .badge-counter-row {
            display: flex; justify-content: space-between; align-items: baseline;
            margin: 14px 0 8px;
        }
        .badge-counter-row .bc-label { font-size: 0.85rem; font-weight: 700; color: var(--text); }
        .badge-counter-row .bc-count {
            font-size: 0.78rem; color: var(--muted);
            background: var(--bg-input); padding: 2px 10px; border-radius: 999px;
            border: 1px solid var(--border);
        }

        /* === CHALLENGE CARDS === */
        .challenge-card {
            background: var(--bg-input); border: 1px solid var(--border);
            border-radius: 12px; padding: 14px; margin-bottom: 10px;
            transition: border-color 0.2s, background 0.2s;
        }
        .challenge-card.completed {
            border-color: rgba(16,185,129,0.5);
            background: rgba(16,185,129,0.06);
        }
        .challenge-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
        .challenge-icon { font-size: 1.4rem; }
        .challenge-info { flex: 1; min-width: 0; }
        .challenge-info .ch-title { font-size: 0.88rem; font-weight: 700; color: var(--text); }
        .challenge-info .ch-sub   { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
        .challenge-reward {
            background: rgba(56,189,248,0.15); color: var(--accent);
            padding: 4px 10px; border-radius: 999px;
            font-size: 0.74rem; font-weight: 700; flex-shrink: 0;
        }
        .challenge-card.completed .challenge-reward {
            background: var(--emerald); color: white;
        }
        .ch-progress {
            height: 6px; background: var(--border); border-radius: 999px;
            overflow: hidden; margin-top: 10px;
        }
        .ch-progress > span {
            display: block; height: 100%; background: var(--accent);
            border-radius: 999px; transition: width 0.4s ease;
        }
        .challenge-card.completed .ch-progress > span { background: var(--emerald); }

        /* === DAILY CHALLENGES (rotating schedule + claim flow) === */
        .dc-day-pill {
            display: inline-flex; align-items: center;
            background: rgba(56,189,248,0.15); color: var(--accent);
            padding: 2px 9px; border-radius: 999px;
            font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em;
            text-transform: uppercase; margin-left: 8px; vertical-align: middle;
        }
        .dc-streak-pill {
            display: inline-flex; align-items: center;
            background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(168,85,247,0.18));
            border: 1px solid rgba(245,158,11,0.4); color: #fde68a;
            padding: 2px 9px; border-radius: 999px;
            font-size: 0.66rem; font-weight: 800;
            margin-left: 6px; vertical-align: middle;
        }
        .dc-total {
            font-size: 0.74rem; color: var(--muted); margin: 0 0 8px;
            text-align: right;
        }
        .dc-total strong { color: #fde68a; }
        .dc-card {
            background: var(--bg-input); border: 1px solid var(--border);
            border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
            transition: border-color 0.2s, background 0.2s, transform 0.2s;
        }
        .dc-card.ready {
            border-color: var(--accent);
            background: rgba(56,189,248,0.06);
            box-shadow: 0 0 14px rgba(56,189,248,0.15);
        }
        .dc-card.claimed {
            border-color: rgba(16,185,129,0.45);
            background: rgba(16,185,129,0.04);
            opacity: 0.78;
        }
        .dc-card.special {
            border-color: rgba(245,158,11,0.45);
            background: linear-gradient(135deg, rgba(245,158,11,0.06), rgba(168,85,247,0.05));
        }
        .dc-card.special.ready { box-shadow: 0 0 22px rgba(245,158,11,0.25); }
        .dc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
        .dc-info { flex: 1; min-width: 0; }
        .dc-info .dc-title { font-size: 0.88rem; font-weight: 700; color: var(--text); }
        .dc-info .dc-sub-text { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
        .dc-reward {
            background: rgba(245,158,11,0.14); color: #fde68a;
            padding: 4px 10px; border-radius: 999px;
            font-size: 0.74rem; font-weight: 800; flex-shrink: 0;
            border: 1px solid rgba(245,158,11,0.35);
        }
        .dc-claim-btn {
            background: var(--accent); color: var(--bg-base);
            padding: 6px 12px; border-radius: 999px;
            font-size: 0.74rem; font-weight: 800; flex-shrink: 0;
            border: none; cursor: pointer; font-family: inherit;
            min-height: auto; width: auto; line-height: 1;
            box-shadow: 0 2px 8px rgba(56,189,248,0.35);
            animation: dcClaimBump 1.4s ease-in-out infinite;
        }
        .dc-claim-btn:hover { transform: translateY(-1px); }
        .dc-claim-btn:active { transform: translateY(0); }
        @keyframes dcClaimBump {
            0%, 100% { box-shadow: 0 2px 8px rgba(56,189,248,0.35); }
            50%      { box-shadow: 0 2px 14px rgba(56,189,248,0.6); }
        }
        .dc-claimed-tag {
            background: rgba(16,185,129,0.18); color: var(--emerald);
            padding: 4px 10px; border-radius: 999px;
            font-size: 0.74rem; font-weight: 800; flex-shrink: 0;
            border: 1px solid rgba(16,185,129,0.35);
        }
        .dc-progress {
            height: 6px; background: var(--border); border-radius: 999px;
            overflow: hidden; margin-top: 10px;
        }
        .dc-progress > span {
            display: block; height: 100%;
            background: linear-gradient(90deg, var(--accent), #fbbf24);
            border-radius: 999px; transition: width 0.5s ease;
        }
        .dc-card.claimed .dc-progress > span { background: var(--emerald); }
        /* Sunday-special sub-paths */
        .dc-sub { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
        .dc-sub-row {
            display: grid; grid-template-columns: 1fr 80px 50px;
            align-items: center; gap: 8px;
            font-size: 0.7rem; color: var(--muted);
        }
        .dc-sub-row.sub-complete { color: var(--emerald); }
        .dc-sub-bar {
            height: 4px; background: var(--border); border-radius: 999px; overflow: hidden;
        }
        .dc-sub-bar > span {
            display: block; height: 100%; background: var(--accent);
            border-radius: 999px; transition: width 0.4s ease;
        }
        .dc-sub-row.sub-complete .dc-sub-bar > span { background: var(--emerald); }
        .dc-sub-count { text-align: right; font-weight: 700; }

        /* === MINI LEVEL BAR — sits on the main 1v1 screen === */
        .mini-level-bar {
            display: flex; align-items: center; gap: 12px;
            background: var(--bg-input); border: 1px solid var(--border);
            border-radius: 12px; padding: 8px 14px; margin-bottom: 14px;
            cursor: pointer; transition: border-color 0.15s, background 0.15s;
        }
        .mini-level-bar:hover { border-color: var(--accent); background: rgba(56,189,248,0.05); }
        .mini-level-bar .mlb-pill {
            display: inline-flex; align-items: center; gap: 4px;
            background: var(--accent); color: var(--bg-base);
            padding: 4px 10px; border-radius: 999px;
            font-weight: 800; font-size: 0.78rem; flex-shrink: 0;
            box-shadow: 0 1px 4px rgba(56,189,248,0.35);
        }
        .mini-level-bar .mlb-bar-wrap { flex: 1; min-width: 0; }
        .mini-level-bar .mlb-bar {
            height: 6px; background: var(--border); border-radius: 999px;
            overflow: hidden; margin-bottom: 3px;
        }
        .mini-level-bar .mlb-bar > span {
            display: block; height: 100%;
            background: linear-gradient(90deg, var(--accent), var(--emerald));
            border-radius: 999px; transition: width 0.5s ease;
        }
        .mini-level-bar .mlb-text {
            font-size: 0.68rem; color: var(--muted); text-align: right; line-height: 1;
        }
        .mini-level-bar .mlb-text strong { color: var(--text); }

        /* Aura chip — sits at the right end of the mini level bar */
        .aura-chip {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 4px 10px; border-radius: 999px;
            background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(168,85,247,0.18));
            border: 1px solid rgba(245,158,11,0.45);
            color: #fde68a; font-weight: 800; font-size: 0.78rem; line-height: 1;
            flex-shrink: 0; cursor: default;
            box-shadow: 0 0 10px rgba(245,158,11,0.18);
            transition: transform 0.18s ease;
        }
        .aura-chip:hover { transform: translateY(-1px); }
        /* Pulse fired by renderAuraChip when the balance grows.
           Subtle warm-amber ring + a brief upscale that resolves
           to the resting transform. One-shot. */
        .aura-chip.aura-chip-pulse { animation: aura-chip-pulse 1.4s ease-out; }
        @keyframes aura-chip-pulse {
            0%   { transform: scale(1.0);  box-shadow: 0 0 0 0 rgba(245,158,11,0.55); }
            30%  { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(245,158,11,0); }
            100% { transform: scale(1.0);  box-shadow: 0 0 0 0 rgba(245,158,11,0); }
        }
        .aura-chip .aura-chip-icon { filter: drop-shadow(0 0 4px rgba(245,158,11,0.5)); }
        @keyframes auraChipBump {
            0%   { transform: scale(1);    box-shadow: 0 0 10px rgba(245,158,11,0.18); }
            40%  { transform: scale(1.18); box-shadow: 0 0 22px rgba(245,158,11,0.55); }
            100% { transform: scale(1);    box-shadow: 0 0 10px rgba(245,158,11,0.18); }
        }
        .aura-chip.bumped { animation: auraChipBump 0.55s ease; }
        /* Reuse the xp-float visual but tint amber so aura toasts stand
           apart from XP toasts even though they share the lane. */
        .xp-float.aura-float { color: #fde68a; }

        /* ============================================================
           LEVEL MILESTONE PERKS — all driven by `data-perks` attribute,
           a space-separated list of perk tokens. Apply via JS based on
           the user's current level.
             Lv 5  → "rookie"   (silver avatar frame + Rookie title on profile)
             Lv 10 → "ring"     (pulsing animated ring around avatar)
             Lv 20 → "priority" (server-side queue boost only — no visuals here)
             Lv 25 → "vip"      (VIP badge after username + profile card glow)
             Lv 35 → "veteran"  (Veteran title + stronger profile card glow)
             Lv 50 → "legendary" (gold animated username + sparkle particles)
           ============================================================ */

        /* Lv 5 — silver frame */
        [data-perks~="rookie"].avatar-frame,
        [data-perks~="rookie"] .avatar-circle,
        img[data-perks~="rookie"] {
            box-shadow: 0 0 0 2px #c0c5d0, 0 0 0 4px rgba(192,197,208,0.25);
        }
        /* Title under username — applied via the `.user-title` element on profile */
        .user-title {
            display: none; font-size: 0.78rem; font-weight: 700;
            letter-spacing: 0.04em; text-align: center;
            /* Sits between the avatar and the online-status text. The
               positive top margin separates it from the avatar; bottom
               margin gives breathing room before the online-text row. */
            margin-top: 8px; margin-bottom: 4px;
        }
        .user-title[data-title="rookie"] {
            display: block; color: #c0c5d0;
            text-shadow: 0 1px 4px rgba(192,197,208,0.3);
        }
        .user-title[data-title="rookie"]::before { content: '🥈 '; }
        .user-title[data-title="veteran"] {
            display: block; color: #f59e0b;
            text-shadow: 0 0 8px rgba(245,158,11,0.4);
        }
        .user-title[data-title="veteran"]::before { content: '⚜️ '; }

        /* Lv 10 — pulsing animated ring around avatar */
        @keyframes lv-ring-pulse {
            0%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px rgba(56,189,248,0.4); }
            50%      { box-shadow: 0 0 0 2px var(--accent), 0 0 14px 6px rgba(56,189,248,0.6); }
        }
        [data-perks~="ring"].avatar-frame,
        [data-perks~="ring"] .avatar-circle,
        img[data-perks~="ring"] {
            animation: lv-ring-pulse 2.4s ease-in-out infinite;
            border-color: var(--accent) !important;
        }

        /* === COSMETICS STORE — purchasable perks (distinct from level perks) === */
        /* aqua-glow: cool cyan card glow (200 ✨) */
        .profile-card[data-perks~="aqua-glow"]:not([data-perks~="veteran"]):not([data-perks~="crimson-glow"]) {
            box-shadow: 0 0 0 1px rgba(34,211,238,0.5), 0 0 36px rgba(34,211,238,0.3);
        }
        /* rose-glow: soft pink card glow (250 ✨) */
        .profile-card[data-perks~="rose-glow"]:not([data-perks~="veteran"]):not([data-perks~="crimson-glow"]) {
            box-shadow: 0 0 0 1px rgba(244,114,182,0.5), 0 0 36px rgba(244,114,182,0.3);
        }
        /* crimson-glow: bold red card glow with heartbeat pulse (1300 ✨) */
        .profile-card[data-perks~="crimson-glow"]:not([data-perks~="veteran"]) {
            box-shadow: 0 0 0 1px rgba(239,68,68,0.5), 0 0 40px rgba(239,68,68,0.3);
            animation: crimsonCardPulse 2.4s ease-in-out infinite;
        }
        @keyframes crimsonCardPulse {
            0%, 100% { box-shadow: 0 0 0 1px rgba(239,68,68,0.5), 0 0 40px rgba(239,68,68,0.3); }
            50%      { box-shadow: 0 0 0 1px rgba(239,68,68,0.7), 0 0 60px rgba(239,68,68,0.5); }
        }
        /* aurora-glow: cyan→indigo→pink shifting card glow (2000 ✨).
           Cycles the same hue palette as the Aurora Username gradient
           so a user with both equipped reads as a coordinated set. */
        .profile-card[data-perks~="aurora-glow"]:not([data-perks~="veteran"]) {
            animation: auroraCardShift 6s linear infinite;
        }
        @keyframes auroraCardShift {
            0%   { box-shadow: 0 0 0 1px rgba(34,211,238,0.6),  0 0 50px rgba(34,211,238,0.35); }
            25%  { box-shadow: 0 0 0 1px rgba(129,140,248,0.6), 0 0 50px rgba(129,140,248,0.35); }
            50%  { box-shadow: 0 0 0 1px rgba(236,72,153,0.6),  0 0 50px rgba(236,72,153,0.35); }
            75%  { box-shadow: 0 0 0 1px rgba(244,114,182,0.6), 0 0 50px rgba(244,114,182,0.35); }
            100% { box-shadow: 0 0 0 1px rgba(34,211,238,0.6),  0 0 50px rgba(34,211,238,0.35); }
        }
        /* phoenix-glow: roaring fire halo cycling red → orange → gold
           (8000 ✨ ultra). Faster cadence than Aurora to feel "alive"
           — each beat hits a different ember color. */
        .profile-card[data-perks~="phoenix-glow"]:not([data-perks~="veteran"]) {
            animation: phoenixCardBurn 2.4s ease-in-out infinite;
        }
        @keyframes phoenixCardBurn {
            0%, 100% { box-shadow: 0 0 0 1px rgba(239,68,68,0.7),  0 0 60px rgba(239,68,68,0.5),  0 0 100px rgba(249,115,22,0.3); }
            33%      { box-shadow: 0 0 0 1px rgba(249,115,22,0.7), 0 0 60px rgba(249,115,22,0.5), 0 0 100px rgba(251,191,36,0.3); }
            66%      { box-shadow: 0 0 0 1px rgba(251,191,36,0.7), 0 0 60px rgba(251,191,36,0.5), 0 0 100px rgba(239,68,68,0.3); }
        }
        /* galaxy-glow: deep cosmic halo drifting indigo → violet →
           starlight (8000 ✨ ultra). Slower cadence than Phoenix —
           starfield breathing rather than fire burning. */
        .profile-card[data-perks~="galaxy-glow"]:not([data-perks~="veteran"]) {
            animation: galaxyCardSpace 5s ease-in-out infinite;
        }
        @keyframes galaxyCardSpace {
            0%, 100% { box-shadow: 0 0 0 1px rgba(99,102,241,0.65),  0 0 50px rgba(99,102,241,0.4),  0 0 95px  rgba(168,85,247,0.25); }
            50%      { box-shadow: 0 0 0 1px rgba(168,85,247,0.75), 0 0 60px rgba(168,85,247,0.55), 0 0 110px rgba(255,255,255,0.18); }
        }
        /* frost-glow: glacial cyan → silver → white halo (8000 ✨ ultra).
           Slow ease so the card feels iced over rather than flickering. */
        .profile-card[data-perks~="frost-glow"]:not([data-perks~="veteran"]) {
            animation: frostCardChill 5s ease-in-out infinite;
        }
        @keyframes frostCardChill {
            0%, 100% { box-shadow: 0 0 0 1px rgba(103,232,249,0.7), 0 0 55px rgba(103,232,249,0.45), 0 0 100px rgba(255,255,255,0.22); }
            50%      { box-shadow: 0 0 0 1px rgba(229,231,235,0.75), 0 0 60px rgba(255,255,255,0.55), 0 0 105px rgba(103,232,249,0.28); }
        }
        /* void-glow: violet ↔ crimson corrupted pulse (8000 ✨ ultra).
           3s cadence — slower than Phoenix, faster than Galaxy. Reads
           as ominous breathing rather than fire or starlight. */
        .profile-card[data-perks~="void-glow"]:not([data-perks~="veteran"]) {
            animation: voidCardCorrupt 3s ease-in-out infinite;
        }
        @keyframes voidCardCorrupt {
            0%, 100% { box-shadow: 0 0 0 1px rgba(124,58,237,0.75), 0 0 55px rgba(124,58,237,0.5),  0 0 95px rgba(127,29,29,0.3); }
            50%      { box-shadow: 0 0 0 1px rgba(220,38,38,0.8),   0 0 60px rgba(220,38,38,0.55),  0 0 100px rgba(76,29,149,0.35); }
        }
        /* storm-glow: electric blue/indigo with sudden white-bolt
           flashes (8000 ✨ ultra). Fast 1.8s cadence + irregular
           keyframe stops fake the lightning crackle without JS. */
        .profile-card[data-perks~="storm-glow"]:not([data-perks~="veteran"]) {
            animation: stormCardCrackle 1.8s linear infinite;
        }
        @keyframes stormCardCrackle {
            0%   { box-shadow: 0 0 0 1px rgba(56,189,248,0.7),  0 0 55px rgba(56,189,248,0.4); }
            7%   { box-shadow: 0 0 0 1px rgba(255,255,255,0.95),0 0 80px rgba(255,255,255,0.7); }
            12%  { box-shadow: 0 0 0 1px rgba(56,189,248,0.7),  0 0 55px rgba(56,189,248,0.4); }
            48%  { box-shadow: 0 0 0 1px rgba(99,102,241,0.7),  0 0 55px rgba(99,102,241,0.4); }
            54%  { box-shadow: 0 0 0 1px rgba(255,255,255,0.95),0 0 80px rgba(255,255,255,0.7); }
            60%  { box-shadow: 0 0 0 1px rgba(99,102,241,0.7),  0 0 55px rgba(99,102,241,0.4); }
            100% { box-shadow: 0 0 0 1px rgba(56,189,248,0.7),  0 0 55px rgba(56,189,248,0.4); }
        }
        /* sakura-glow: soft pink ↔ white blossom halo (8000 ✨ ultra).
           Slow 5.5s cadence — chillest of the ultras. Pairs with the
           Sakura set for users who want the rarity without the loud
           visuals of Phoenix or Storm. */
        .profile-card[data-perks~="sakura-glow"]:not([data-perks~="veteran"]) {
            animation: sakuraCardBloom 5.5s ease-in-out infinite;
        }
        @keyframes sakuraCardBloom {
            0%, 100% { box-shadow: 0 0 0 1px rgba(244,114,182,0.65), 0 0 50px rgba(244,114,182,0.4),  0 0 90px  rgba(251,207,232,0.25); }
            50%      { box-shadow: 0 0 0 1px rgba(251,207,232,0.7),  0 0 60px rgba(251,207,232,0.5),  0 0 100px rgba(255,255,255,0.2); }
        }
        /* toxic-glow: radioactive lime → yellow → emerald (8000 ✨
           ultra). 2.8s pulse — faster than Galaxy, slower than
           Phoenix; reads as "I'm hazardous to be near" rather than
           burning or breathing. */
        .profile-card[data-perks~="toxic-glow"]:not([data-perks~="veteran"]) {
            animation: toxicCardPulse 2.8s ease-in-out infinite;
        }
        @keyframes toxicCardPulse {
            0%, 100% { box-shadow: 0 0 0 1px rgba(34,197,94,0.7),   0 0 55px rgba(34,197,94,0.5),  0 0 100px rgba(132,204,22,0.3); }
            33%      { box-shadow: 0 0 0 1px rgba(132,204,22,0.75), 0 0 60px rgba(132,204,22,0.55), 0 0 105px rgba(250,204,21,0.3); }
            66%      { box-shadow: 0 0 0 1px rgba(250,204,21,0.7),  0 0 60px rgba(250,204,21,0.5),  0 0 100px rgba(34,197,94,0.3); }
        }
        /* royal-glow: deep purple ↔ rich gold (8000 ✨ ultra). 4.5s
           slow majestic shift — slowest cadence in the catalog,
           befitting royalty. */
        .profile-card[data-perks~="royal-glow"]:not([data-perks~="veteran"]) {
            animation: royalCardShift 4.5s ease-in-out infinite;
        }
        @keyframes royalCardShift {
            0%, 100% { box-shadow: 0 0 0 1px rgba(124,58,237,0.7),  0 0 55px rgba(124,58,237,0.5),  0 0 100px rgba(251,191,36,0.25); }
            50%      { box-shadow: 0 0 0 1px rgba(251,191,36,0.75), 0 0 60px rgba(251,191,36,0.55), 0 0 100px rgba(124,58,237,0.3); }
        }
        /* lava-glow: molten red / orange / black (8000 ✨ ultra). 3.5s
           churn — slower and meatier than Phoenix's flicker, with
           shadow undertones evoking lava rather than living flame. */
        .profile-card[data-perks~="lava-glow"]:not([data-perks~="veteran"]) {
            animation: lavaCardChurn 3.5s ease-in-out infinite;
        }
        @keyframes lavaCardChurn {
            0%, 100% { box-shadow: 0 0 0 1px rgba(220,38,38,0.7),   0 0 50px rgba(220,38,38,0.5),  0 0 90px rgba(24,24,27,0.4); }
            50%      { box-shadow: 0 0 0 1px rgba(249,115,22,0.75), 0 0 60px rgba(249,115,22,0.55), 0 0 100px rgba(185,28,28,0.4); }
        }
        /* holo-glow: iridescent oil-slick rotating through every hue
           (8000 ✨ ultra). 8s slow rotation — different vibe from
           owner-rgb (rapid rainbow); evokes "hologram sticker". */
        .profile-card[data-perks~="holo-glow"]:not([data-perks~="veteran"]) {
            animation: holoCardShift 8s linear infinite;
        }
        @keyframes holoCardShift {
            0%   { box-shadow: 0 0 0 1px rgba(34,211,238,0.65), 0 0 50px rgba(34,211,238,0.4), 0 0 95px rgba(168,85,247,0.3); }
            25%  { box-shadow: 0 0 0 1px rgba(168,85,247,0.65), 0 0 55px rgba(236,72,153,0.4), 0 0 95px rgba(251,191,36,0.3); }
            50%  { box-shadow: 0 0 0 1px rgba(251,191,36,0.65), 0 0 50px rgba(34,197,94,0.4),  0 0 95px rgba(34,211,238,0.3); }
            75%  { box-shadow: 0 0 0 1px rgba(34,197,94,0.65),  0 0 55px rgba(34,211,238,0.4), 0 0 95px rgba(168,85,247,0.3); }
            100% { box-shadow: 0 0 0 1px rgba(34,211,238,0.65), 0 0 50px rgba(34,211,238,0.4), 0 0 95px rgba(168,85,247,0.3); }
        }
        /* mythic-glow: emerald ↔ gold scaly shimmer (8000 ✨ ultra).
           4s cadence — between Royal and Aurora — evokes dragon
           scales catching light. */
        .profile-card[data-perks~="mythic-glow"]:not([data-perks~="veteran"]) {
            animation: mythicCardShimmer 4s ease-in-out infinite;
        }
        @keyframes mythicCardShimmer {
            0%, 100% { box-shadow: 0 0 0 1px rgba(16,185,129,0.7),  0 0 55px rgba(16,185,129,0.5),  0 0 100px rgba(251,191,36,0.3); }
            50%      { box-shadow: 0 0 0 1px rgba(251,191,36,0.75), 0 0 60px rgba(251,191,36,0.55), 0 0 100px rgba(4,120,87,0.3); }
        }
        /* === LEGENDARY TIER CARD GLOWS (10 sets × 4500 ✨ each).
           Two-stop ease-in-out keyframes — simpler than the ultras'
           three-stop animations. Cadences vary slightly between sets
           so the legendary tier doesn't read as a uniform band. */
        /* sunset-glow: coral ↔ pink dusk (4500 ✨ legendary) */
        .profile-card[data-perks~="sunset-glow"]:not([data-perks~="veteran"]) {
            animation: sunsetCard 4s ease-in-out infinite;
        }
        @keyframes sunsetCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(251,113,133,0.7), 0 0 50px rgba(251,113,133,0.45), 0 0 90px rgba(249,115,22,0.25); }
            50%      { box-shadow: 0 0 0 1px rgba(236,72,153,0.7),  0 0 55px rgba(236,72,153,0.5),  0 0 95px rgba(190,18,60,0.3); }
        }
        /* ocean-glow: teal ↔ deep blue waves (4500 ✨ legendary) */
        .profile-card[data-perks~="ocean-glow"]:not([data-perks~="veteran"]) {
            animation: oceanCard 4.5s ease-in-out infinite;
        }
        @keyframes oceanCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(20,184,166,0.7), 0 0 50px rgba(20,184,166,0.45), 0 0 90px rgba(8,145,178,0.25); }
            50%      { box-shadow: 0 0 0 1px rgba(6,182,212,0.7),  0 0 55px rgba(6,182,212,0.5),   0 0 95px rgba(19,78,74,0.3); }
        }
        /* forest-glow: emerald ↔ lime nature (4500 ✨ legendary) */
        .profile-card[data-perks~="forest-glow"]:not([data-perks~="veteran"]) {
            animation: forestCard 4s ease-in-out infinite;
        }
        @keyframes forestCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(16,185,129,0.7), 0 0 50px rgba(16,185,129,0.45), 0 0 90px rgba(20,83,45,0.3); }
            50%      { box-shadow: 0 0 0 1px rgba(101,163,13,0.7), 0 0 55px rgba(101,163,13,0.5),  0 0 95px rgba(22,163,74,0.3); }
        }
        /* bronze-glow: copper ↔ amber metallic (4500 ✨ legendary) */
        .profile-card[data-perks~="bronze-glow"]:not([data-perks~="veteran"]) {
            animation: bronzeCard 4s ease-in-out infinite;
        }
        @keyframes bronzeCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(180,83,9,0.7),   0 0 50px rgba(180,83,9,0.45),  0 0 90px rgba(120,53,15,0.3); }
            50%      { box-shadow: 0 0 0 1px rgba(217,119,6,0.7),  0 0 55px rgba(217,119,6,0.5),  0 0 95px rgba(202,138,4,0.3); }
        }
        /* silver-glow: white ↔ platinum cold (4500 ✨ legendary) */
        .profile-card[data-perks~="silver-glow"]:not([data-perks~="veteran"]) {
            animation: silverCard 4s ease-in-out infinite;
        }
        @keyframes silverCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.7), 0 0 50px rgba(255,255,255,0.45), 0 0 90px rgba(209,213,219,0.3); }
            50%      { box-shadow: 0 0 0 1px rgba(229,231,235,0.7), 0 0 55px rgba(229,231,235,0.5),  0 0 95px rgba(243,244,246,0.3); }
        }
        /* honey-glow: amber ↔ honey gold warm (4500 ✨ legendary) */
        .profile-card[data-perks~="honey-glow"]:not([data-perks~="veteran"]) {
            animation: honeyCard 4s ease-in-out infinite;
        }
        @keyframes honeyCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(245,158,11,0.7), 0 0 50px rgba(245,158,11,0.45), 0 0 90px rgba(180,83,9,0.3); }
            50%      { box-shadow: 0 0 0 1px rgba(251,191,36,0.7), 0 0 55px rgba(251,191,36,0.5),  0 0 95px rgba(217,119,6,0.3); }
        }
        /* lemon-glow: bright yellow citrus (4500 ✨ legendary) */
        .profile-card[data-perks~="lemon-glow"]:not([data-perks~="veteran"]) {
            animation: lemonCard 4s ease-in-out infinite;
        }
        @keyframes lemonCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(253,224,71,0.7), 0 0 50px rgba(253,224,71,0.45), 0 0 90px rgba(234,179,8,0.3); }
            50%      { box-shadow: 0 0 0 1px rgba(250,204,21,0.7), 0 0 55px rgba(250,204,21,0.5),  0 0 95px rgba(254,240,138,0.3); }
        }
        /* indigo-glow: deep midnight blue (4500 ✨ legendary) */
        .profile-card[data-perks~="indigo-glow"]:not([data-perks~="veteran"]) {
            animation: indigoCard 5s ease-in-out infinite;
        }
        @keyframes indigoCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(67,56,202,0.7),  0 0 50px rgba(67,56,202,0.45),  0 0 90px rgba(30,27,75,0.4); }
            50%      { box-shadow: 0 0 0 1px rgba(79,70,229,0.7),  0 0 55px rgba(79,70,229,0.5),   0 0 95px rgba(55,48,163,0.35); }
        }
        /* lavender-glow: soft lilac (4500 ✨ legendary) */
        .profile-card[data-perks~="lavender-glow"]:not([data-perks~="veteran"]) {
            animation: lavenderCard 5s ease-in-out infinite;
        }
        @keyframes lavenderCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(192,132,252,0.65), 0 0 50px rgba(192,132,252,0.4), 0 0 90px rgba(216,180,254,0.25); }
            50%      { box-shadow: 0 0 0 1px rgba(216,180,254,0.7),  0 0 55px rgba(216,180,254,0.5), 0 0 95px rgba(233,213,255,0.3); }
        }
        /* mint-glow: pale green ↔ teal refreshing (4500 ✨ legendary) */
        .profile-card[data-perks~="mint-glow"]:not([data-perks~="veteran"]) {
            animation: mintCard 4.2s ease-in-out infinite;
        }
        @keyframes mintCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(110,231,183,0.7), 0 0 50px rgba(110,231,183,0.45), 0 0 90px rgba(45,212,191,0.3); }
            50%      { box-shadow: 0 0 0 1px rgba(45,212,191,0.7),  0 0 55px rgba(45,212,191,0.5),   0 0 95px rgba(167,243,208,0.3); }
        }
        /* rose-frame: pink ring on avatars wherever data-perks is set (200 ✨) */
        [data-perks~="rose-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="rose-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="rose-frame"]:not([data-perks~="ring"]) {
            box-shadow: 0 0 0 2px #f472b6, 0 0 0 4px rgba(244,114,182,0.25);
        }
        /* aqua-frame: cyan ring on avatars (250 ✨) */
        [data-perks~="aqua-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="aqua-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="aqua-frame"]:not([data-perks~="ring"]) {
            box-shadow: 0 0 0 2px #22d3ee, 0 0 0 4px rgba(34,211,238,0.25);
        }
        /* crimson-frame: bold red ring with heartbeat pulse (999 ✨).
           Same selector pattern as rose-frame so it applies on every
           avatar surface; same :not(ring) guard so Lv 10 cyan ring
           still wins unless the user disables it from inventory. */
        [data-perks~="crimson-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="crimson-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="crimson-frame"]:not([data-perks~="ring"]) {
            animation: crimsonFramePulse 2.4s ease-in-out infinite;
        }
        @keyframes crimsonFramePulse {
            0%, 100% { box-shadow: 0 0 0 2px #ef4444, 0 0 12px rgba(239,68,68,0.4); }
            50%      { box-shadow: 0 0 0 2px #ef4444, 0 0 22px rgba(239,68,68,0.75); }
        }
        /* aurora-frame: cyan→indigo→pink shifting ring (1800 ✨). Cycles
           the same hue palette as Aurora Card Glow + Aurora Username so
           the three pieces read as a coordinated set. */
        [data-perks~="aurora-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="aurora-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="aurora-frame"]:not([data-perks~="ring"]) {
            animation: auroraFrameShift 6s linear infinite;
        }
        @keyframes auroraFrameShift {
            0%   { box-shadow: 0 0 0 2px #22d3ee, 0 0 14px rgba(34,211,238,0.55); }
            25%  { box-shadow: 0 0 0 2px #818cf8, 0 0 14px rgba(129,140,248,0.55); }
            50%  { box-shadow: 0 0 0 2px #ec4899, 0 0 14px rgba(236,72,153,0.55); }
            75%  { box-shadow: 0 0 0 2px #f472b6, 0 0 14px rgba(244,114,182,0.55); }
            100% { box-shadow: 0 0 0 2px #22d3ee, 0 0 14px rgba(34,211,238,0.55); }
        }
        /* phoenix-frame: living-flame ring flickering red→orange→gold
           (5000 ✨ ultra). 1.6s burn cadence — fastest in the catalog
           so it reads as "on fire" rather than just shifting. */
        [data-perks~="phoenix-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="phoenix-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="phoenix-frame"]:not([data-perks~="ring"]) {
            animation: phoenixFrameBurn 1.6s ease-in-out infinite;
        }
        @keyframes phoenixFrameBurn {
            0%, 100% { box-shadow: 0 0 0 2px #ef4444, 0 0 16px rgba(239,68,68,0.7),  0 0 30px rgba(249,115,22,0.4); }
            33%      { box-shadow: 0 0 0 2px #f97316, 0 0 18px rgba(249,115,22,0.7), 0 0 32px rgba(251,191,36,0.45); }
            66%      { box-shadow: 0 0 0 2px #fbbf24, 0 0 18px rgba(251,191,36,0.7), 0 0 32px rgba(239,68,68,0.4); }
        }
        /* galaxy-frame: starlit indigo→violet ring (5000 ✨ ultra).
           Slow ease — twinkle cadence rather than fire burn. */
        [data-perks~="galaxy-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="galaxy-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="galaxy-frame"]:not([data-perks~="ring"]) {
            animation: galaxyFrameTwinkle 3.5s ease-in-out infinite;
        }
        @keyframes galaxyFrameTwinkle {
            0%, 100% { box-shadow: 0 0 0 2px #6366f1, 0 0 12px rgba(99,102,241,0.55), 0 0 22px rgba(168,85,247,0.3); }
            50%      { box-shadow: 0 0 0 2px #a855f7, 0 0 18px rgba(168,85,247,0.7),  0 0 30px rgba(255,255,255,0.35); }
        }
        /* frost-frame: glacial cyan ↔ silver ring (5000 ✨ ultra). 4s
           ease — slower cadence than Phoenix's burn so the ring feels
           iced over instead of flickering. */
        [data-perks~="frost-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="frost-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="frost-frame"]:not([data-perks~="ring"]) {
            animation: frostFrameChill 4s ease-in-out infinite;
        }
        @keyframes frostFrameChill {
            0%, 100% { box-shadow: 0 0 0 2px #67e8f9, 0 0 14px rgba(103,232,249,0.6), 0 0 22px rgba(229,231,235,0.3); }
            50%      { box-shadow: 0 0 0 2px #ffffff, 0 0 18px rgba(255,255,255,0.7), 0 0 28px rgba(103,232,249,0.4); }
        }
        /* void-frame: violet ↔ crimson corrupted ring (5000 ✨ ultra).
           Same 3s cadence as void-glow so the set reads as one unit. */
        [data-perks~="void-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="void-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="void-frame"]:not([data-perks~="ring"]) {
            animation: voidFrameCorrupt 3s ease-in-out infinite;
        }
        @keyframes voidFrameCorrupt {
            0%, 100% { box-shadow: 0 0 0 2px #7c3aed, 0 0 14px rgba(124,58,237,0.65), 0 0 24px rgba(127,29,29,0.35); }
            50%      { box-shadow: 0 0 0 2px #dc2626, 0 0 18px rgba(220,38,38,0.7),   0 0 28px rgba(76,29,149,0.4); }
        }
        /* storm-frame: electric crackle ring (5000 ✨ ultra). 1.8s with
           irregular flash stops mirroring storm-glow. */
        [data-perks~="storm-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="storm-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="storm-frame"]:not([data-perks~="ring"]) {
            animation: stormFrameCrackle 1.8s linear infinite;
        }
        @keyframes stormFrameCrackle {
            0%   { box-shadow: 0 0 0 2px #38bdf8, 0 0 14px rgba(56,189,248,0.6); }
            7%   { box-shadow: 0 0 0 2px #ffffff, 0 0 22px rgba(255,255,255,0.85); }
            12%  { box-shadow: 0 0 0 2px #38bdf8, 0 0 14px rgba(56,189,248,0.6); }
            48%  { box-shadow: 0 0 0 2px #6366f1, 0 0 14px rgba(99,102,241,0.6); }
            54%  { box-shadow: 0 0 0 2px #ffffff, 0 0 22px rgba(255,255,255,0.85); }
            60%  { box-shadow: 0 0 0 2px #6366f1, 0 0 14px rgba(99,102,241,0.6); }
            100% { box-shadow: 0 0 0 2px #38bdf8, 0 0 14px rgba(56,189,248,0.6); }
        }
        /* sakura-frame: soft pink ↔ white blossom ring (5000 ✨ ultra). */
        [data-perks~="sakura-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="sakura-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="sakura-frame"]:not([data-perks~="ring"]) {
            animation: sakuraFrameBloom 5s ease-in-out infinite;
        }
        @keyframes sakuraFrameBloom {
            0%, 100% { box-shadow: 0 0 0 2px #f472b6, 0 0 14px rgba(244,114,182,0.55), 0 0 22px rgba(251,207,232,0.25); }
            50%      { box-shadow: 0 0 0 2px #fbcfe8, 0 0 18px rgba(251,207,232,0.7),  0 0 28px rgba(255,255,255,0.3); }
        }
        /* toxic-frame: radioactive lime → yellow ring (5000 ✨ ultra).
           2.8s pulse matching toxic-glow so the set reads as one. */
        [data-perks~="toxic-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="toxic-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="toxic-frame"]:not([data-perks~="ring"]) {
            animation: toxicFramePulse 2.8s ease-in-out infinite;
        }
        @keyframes toxicFramePulse {
            0%, 100% { box-shadow: 0 0 0 2px #22c55e, 0 0 14px rgba(34,197,94,0.6),   0 0 22px rgba(132,204,22,0.3); }
            33%      { box-shadow: 0 0 0 2px #84cc16, 0 0 16px rgba(132,204,22,0.65), 0 0 26px rgba(250,204,21,0.35); }
            66%      { box-shadow: 0 0 0 2px #facc15, 0 0 16px rgba(250,204,21,0.6),  0 0 24px rgba(34,197,94,0.3); }
        }
        /* royal-frame: purple ↔ gold ring (5000 ✨ ultra). 4.5s slow
           shift matching royal-glow. */
        [data-perks~="royal-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="royal-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="royal-frame"]:not([data-perks~="ring"]) {
            animation: royalFrameShift 4.5s ease-in-out infinite;
        }
        @keyframes royalFrameShift {
            0%, 100% { box-shadow: 0 0 0 2px #7c3aed, 0 0 14px rgba(124,58,237,0.6), 0 0 24px rgba(251,191,36,0.3); }
            50%      { box-shadow: 0 0 0 2px #fbbf24, 0 0 18px rgba(251,191,36,0.7), 0 0 30px rgba(124,58,237,0.35); }
        }
        /* lava-frame: molten orange/red ring (5000 ✨ ultra). 3.5s
           churn matching lava-glow with shadow undertones. */
        [data-perks~="lava-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="lava-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="lava-frame"]:not([data-perks~="ring"]) {
            animation: lavaFrameChurn 3.5s ease-in-out infinite;
        }
        @keyframes lavaFrameChurn {
            0%, 100% { box-shadow: 0 0 0 2px #dc2626, 0 0 14px rgba(220,38,38,0.6),  0 0 24px rgba(24,24,27,0.4); }
            50%      { box-shadow: 0 0 0 2px #f97316, 0 0 18px rgba(249,115,22,0.7), 0 0 30px rgba(185,28,28,0.4); }
        }
        /* holo-frame: iridescent ring rotating through every hue
           (5000 ✨ ultra). 8s slow rotation matching holo-glow. */
        [data-perks~="holo-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="holo-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="holo-frame"]:not([data-perks~="ring"]) {
            animation: holoFrameShift 8s linear infinite;
        }
        @keyframes holoFrameShift {
            0%   { box-shadow: 0 0 0 2px #22d3ee, 0 0 14px rgba(34,211,238,0.55); }
            25%  { box-shadow: 0 0 0 2px #a855f7, 0 0 14px rgba(168,85,247,0.55); }
            50%  { box-shadow: 0 0 0 2px #fbbf24, 0 0 14px rgba(251,191,36,0.55); }
            75%  { box-shadow: 0 0 0 2px #22c55e, 0 0 14px rgba(34,197,94,0.55); }
            100% { box-shadow: 0 0 0 2px #22d3ee, 0 0 14px rgba(34,211,238,0.55); }
        }
        /* mythic-frame: emerald ↔ gold ring (5000 ✨ ultra). 4s
           shimmer matching mythic-glow. */
        [data-perks~="mythic-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="mythic-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="mythic-frame"]:not([data-perks~="ring"]) {
            animation: mythicFrameShimmer 4s ease-in-out infinite;
        }
        @keyframes mythicFrameShimmer {
            0%, 100% { box-shadow: 0 0 0 2px #10b981, 0 0 14px rgba(16,185,129,0.6), 0 0 24px rgba(251,191,36,0.3); }
            50%      { box-shadow: 0 0 0 2px #fbbf24, 0 0 18px rgba(251,191,36,0.7), 0 0 30px rgba(4,120,87,0.35); }
        }
        /* === LEGENDARY TIER AVATAR FRAMES (10 sets × 2500 ✨ each).
           Cadences mirror the matching card glows. */
        /* sunset-frame */
        [data-perks~="sunset-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="sunset-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="sunset-frame"]:not([data-perks~="ring"]) {
            animation: sunsetFrame 4s ease-in-out infinite;
        }
        @keyframes sunsetFrame {
            0%, 100% { box-shadow: 0 0 0 2px #fb7185, 0 0 14px rgba(251,113,133,0.55), 0 0 24px rgba(249,115,22,0.3); }
            50%      { box-shadow: 0 0 0 2px #ec4899, 0 0 18px rgba(236,72,153,0.65),  0 0 28px rgba(190,18,60,0.3); }
        }
        /* ocean-frame */
        [data-perks~="ocean-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="ocean-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="ocean-frame"]:not([data-perks~="ring"]) {
            animation: oceanFrame 4.5s ease-in-out infinite;
        }
        @keyframes oceanFrame {
            0%, 100% { box-shadow: 0 0 0 2px #14b8a6, 0 0 14px rgba(20,184,166,0.55), 0 0 24px rgba(8,145,178,0.3); }
            50%      { box-shadow: 0 0 0 2px #06b6d4, 0 0 18px rgba(6,182,212,0.65),  0 0 28px rgba(19,78,74,0.35); }
        }
        /* forest-frame */
        [data-perks~="forest-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="forest-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="forest-frame"]:not([data-perks~="ring"]) {
            animation: forestFrame 4s ease-in-out infinite;
        }
        @keyframes forestFrame {
            0%, 100% { box-shadow: 0 0 0 2px #10b981, 0 0 14px rgba(16,185,129,0.55), 0 0 24px rgba(20,83,45,0.3); }
            50%      { box-shadow: 0 0 0 2px #65a30d, 0 0 18px rgba(101,163,13,0.65), 0 0 28px rgba(22,163,74,0.3); }
        }
        /* bronze-frame */
        [data-perks~="bronze-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="bronze-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="bronze-frame"]:not([data-perks~="ring"]) {
            animation: bronzeFrame 4s ease-in-out infinite;
        }
        @keyframes bronzeFrame {
            0%, 100% { box-shadow: 0 0 0 2px #b45309, 0 0 14px rgba(180,83,9,0.55),   0 0 24px rgba(120,53,15,0.3); }
            50%      { box-shadow: 0 0 0 2px #d97706, 0 0 18px rgba(217,119,6,0.65),  0 0 28px rgba(202,138,4,0.3); }
        }
        /* silver-frame */
        [data-perks~="silver-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="silver-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="silver-frame"]:not([data-perks~="ring"]) {
            animation: silverFrame 4s ease-in-out infinite;
        }
        @keyframes silverFrame {
            0%, 100% { box-shadow: 0 0 0 2px #ffffff, 0 0 14px rgba(255,255,255,0.55), 0 0 24px rgba(209,213,219,0.3); }
            50%      { box-shadow: 0 0 0 2px #d1d5db, 0 0 18px rgba(229,231,235,0.65), 0 0 28px rgba(243,244,246,0.3); }
        }
        /* honey-frame */
        [data-perks~="honey-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="honey-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="honey-frame"]:not([data-perks~="ring"]) {
            animation: honeyFrame 4s ease-in-out infinite;
        }
        @keyframes honeyFrame {
            0%, 100% { box-shadow: 0 0 0 2px #f59e0b, 0 0 14px rgba(245,158,11,0.55), 0 0 24px rgba(180,83,9,0.3); }
            50%      { box-shadow: 0 0 0 2px #fbbf24, 0 0 18px rgba(251,191,36,0.65), 0 0 28px rgba(217,119,6,0.3); }
        }
        /* lemon-frame */
        [data-perks~="lemon-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="lemon-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="lemon-frame"]:not([data-perks~="ring"]) {
            animation: lemonFrame 4s ease-in-out infinite;
        }
        @keyframes lemonFrame {
            0%, 100% { box-shadow: 0 0 0 2px #fde047, 0 0 14px rgba(253,224,71,0.55), 0 0 24px rgba(234,179,8,0.3); }
            50%      { box-shadow: 0 0 0 2px #facc15, 0 0 18px rgba(250,204,21,0.65), 0 0 28px rgba(254,240,138,0.3); }
        }
        /* indigo-frame */
        [data-perks~="indigo-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="indigo-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="indigo-frame"]:not([data-perks~="ring"]) {
            animation: indigoFrame 5s ease-in-out infinite;
        }
        @keyframes indigoFrame {
            0%, 100% { box-shadow: 0 0 0 2px #4338ca, 0 0 14px rgba(67,56,202,0.55), 0 0 24px rgba(30,27,75,0.4); }
            50%      { box-shadow: 0 0 0 2px #4f46e5, 0 0 18px rgba(79,70,229,0.65), 0 0 28px rgba(55,48,163,0.35); }
        }
        /* lavender-frame */
        [data-perks~="lavender-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="lavender-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="lavender-frame"]:not([data-perks~="ring"]) {
            animation: lavenderFrame 5s ease-in-out infinite;
        }
        @keyframes lavenderFrame {
            0%, 100% { box-shadow: 0 0 0 2px #c084fc, 0 0 14px rgba(192,132,252,0.55), 0 0 24px rgba(216,180,254,0.3); }
            50%      { box-shadow: 0 0 0 2px #d8b4fe, 0 0 18px rgba(216,180,254,0.65), 0 0 28px rgba(233,213,255,0.3); }
        }
        /* mint-frame */
        [data-perks~="mint-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="mint-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="mint-frame"]:not([data-perks~="ring"]) {
            animation: mintFrame 4.2s ease-in-out infinite;
        }
        @keyframes mintFrame {
            0%, 100% { box-shadow: 0 0 0 2px #6ee7b7, 0 0 14px rgba(110,231,183,0.55), 0 0 24px rgba(45,212,191,0.3); }
            50%      { box-shadow: 0 0 0 2px #2dd4bf, 0 0 18px rgba(45,212,191,0.65),  0 0 28px rgba(167,243,208,0.3); }
        }
        /* aurora-name: cyan-to-pink gradient on @username (400 ✨, hidden when legendary applies) */
        @keyframes aurora-shimmer {
            0%, 100% { background-position: 0% 50%; }
            50%      { background-position: 100% 50%; }
        }
        /* crimson-username: red @name with a slow heartbeat glow (2500 ✨).
           Doubled selector + !important to win against ancestor color
           rules (.lst-name etc.) the same way aurora-username does. */
        .crimson-username.crimson-username {
            color: #ef4444 !important;
            font-weight: 800 !important;
            -webkit-text-fill-color: #ef4444 !important;
            animation: crimsonNamePulse 2.4s ease-in-out infinite !important;
        }
        @keyframes crimsonNamePulse {
            0%, 100% { text-shadow: 0 0 6px rgba(239,68,68,0.45); }
            50%      { text-shadow: 0 0 16px rgba(239,68,68,0.85); }
        }
        /* aqua-username: solid cyan @name, static (300 ✨) */
        .aqua-username.aqua-username {
            color: #22d3ee !important;
            -webkit-text-fill-color: #22d3ee !important;
            font-weight: 800 !important;
        }
        /* rose-username: solid pink @name, static (300 ✨) */
        .rose-username.rose-username {
            color: #f472b6 !important;
            -webkit-text-fill-color: #f472b6 !important;
            font-weight: 800 !important;
        }

        /* Doubled selector boosts specificity so .aurora-username wins
           against ancestor rules like `.live-stage-tile .lst-name`
           that set the username's color directly — without this the
           gradient's `color: transparent` gets overridden and the text
           shows as solid muted/text color. Same trick rgb-username
           uses elsewhere. */
        .aurora-username.aurora-username {
            background-image: linear-gradient(90deg, #22d3ee, #818cf8, #ec4899, #f472b6, #22d3ee) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            font-weight: 800 !important;
            animation: aurora-shimmer 4.5s ease-in-out infinite !important;
        }

        /* phoenix-username: flame-gradient @name (12000 ✨ ultra). Doubled
           selector + !important so it wins against ancestor color rules
           (see aurora-username comment). Faster shimmer than Aurora — the
           text should feel like flickering embers. */
        .phoenix-username.phoenix-username {
            background-image: linear-gradient(90deg, #ef4444, #f97316, #fbbf24, #f97316, #ef4444) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            font-weight: 800 !important;
            animation: phoenixNameBurn 2.4s ease-in-out infinite !important;
            text-shadow: 0 0 8px rgba(249,115,22,0.35);
        }
        @keyframes phoenixNameBurn {
            0%, 100% { background-position: 0% 50%; }
            50%      { background-position: 100% 50%; }
        }

        /* galaxy-username: cosmic indigo→violet→starlight gradient
           (12000 ✨ ultra). Slower shimmer than Phoenix to feel like a
           drifting starfield rather than flickering fire. */
        .galaxy-username.galaxy-username {
            background-image: linear-gradient(90deg, #6366f1, #a855f7, #ffffff, #a855f7, #6366f1) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            font-weight: 800 !important;
            animation: galaxyNameShimmer 5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(168,85,247,0.4);
        }
        @keyframes galaxyNameShimmer {
            0%, 100% { background-position: 0% 50%; }
            50%      { background-position: 100% 50%; }
        }

        /* frost-username: glacial cyan→white→silver shimmer (12000 ✨
           ultra). 4.5s cadence — colder vibe than Aurora's fast cyan→
           pink. */
        .frost-username.frost-username {
            background-image: linear-gradient(90deg, #67e8f9, #ffffff, #e5e7eb, #ffffff, #67e8f9) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            font-weight: 800 !important;
            animation: frostNameShimmer 4.5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(103,232,249,0.4);
        }
        @keyframes frostNameShimmer {
            0%, 100% { background-position: 0% 50%; }
            50%      { background-position: 100% 50%; }
        }

        /* void-username: cursed violet→crimson gradient (12000 ✨
           ultra). Both stops are deliberately bright enough to read on
           the dark UI. Drop-shadow doubles up the ominous feel — the
           text bleeds dark red rather than glowing white. */
        .void-username.void-username {
            background-image: linear-gradient(90deg, #a855f7, #dc2626, #7c3aed, #dc2626, #a855f7) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            font-weight: 800 !important;
            animation: voidNameCorrupt 3.5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(220,38,38,0.5), 0 0 16px rgba(124,58,237,0.4);
        }
        @keyframes voidNameCorrupt {
            0%, 100% { background-position: 0% 50%; }
            50%      { background-position: 100% 50%; }
        }

        /* storm-username: electric blue→white→cyan shimmer (12000 ✨
           ultra). Faster cadence than Frost, with white-bolt flashes
           via the same irregular keyframe trick storm-glow uses. */
        .storm-username.storm-username {
            background-image: linear-gradient(90deg, #38bdf8, #ffffff, #67e8f9, #ffffff, #38bdf8) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            font-weight: 800 !important;
            animation: stormNameCrackle 2.4s linear infinite !important;
            text-shadow: 0 0 10px rgba(56,189,248,0.45);
        }
        @keyframes stormNameCrackle {
            0%   { background-position: 0% 50%;   filter: brightness(1); }
            8%   { background-position: 25% 50%;  filter: brightness(1.5); }
            12%  { background-position: 30% 50%;  filter: brightness(1); }
            50%  { background-position: 100% 50%; filter: brightness(1); }
            58%  { background-position: 75% 50%;  filter: brightness(1.5); }
            62%  { background-position: 70% 50%;  filter: brightness(1); }
            100% { background-position: 0% 50%;   filter: brightness(1); }
        }

        /* sakura-username: soft pink→white→rose shimmer (12000 ✨
           ultra). Chillest of the username ultras — pairs with the
           sakura set's slow-bloom cadence. */
        .sakura-username.sakura-username {
            background-image: linear-gradient(90deg, #f472b6, #fbcfe8, #ffffff, #fbcfe8, #f472b6) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            font-weight: 800 !important;
            animation: sakuraNameBloom 5.5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(244,114,182,0.4);
        }
        @keyframes sakuraNameBloom {
            0%, 100% { background-position: 0% 50%; }
            50%      { background-position: 100% 50%; }
        }

        /* toxic-username: radioactive green → yellow shimmer (12000 ✨
           ultra). 3s cadence — green glow matches the set. */
        .toxic-username.toxic-username {
            background-image: linear-gradient(90deg, #22c55e, #84cc16, #facc15, #84cc16, #22c55e) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            font-weight: 800 !important;
            animation: toxicNamePulse 3s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(132,204,22,0.45);
        }
        @keyframes toxicNamePulse {
            0%, 100% { background-position: 0% 50%; }
            50%      { background-position: 100% 50%; }
        }

        /* royal-username: purple → gold regal gradient (12000 ✨
           ultra). 5s slow majestic shimmer. */
        .royal-username.royal-username {
            background-image: linear-gradient(90deg, #7c3aed, #c084fc, #fbbf24, #fde68a, #7c3aed) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            font-weight: 800 !important;
            animation: royalNameShift 5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(251,191,36,0.4);
        }
        @keyframes royalNameShift {
            0%, 100% { background-position: 0% 50%; }
            50%      { background-position: 100% 50%; }
        }

        /* lava-username: molten red → orange gradient (12000 ✨
           ultra). 3.5s churn matching the set. */
        .lava-username.lava-username {
            background-image: linear-gradient(90deg, #b91c1c, #f97316, #fbbf24, #dc2626, #b91c1c) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            font-weight: 800 !important;
            animation: lavaNameChurn 3.5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(249,115,22,0.45);
        }
        @keyframes lavaNameChurn {
            0%, 100% { background-position: 0% 50%; }
            50%      { background-position: 100% 50%; }
        }

        /* holo-username: iridescent oil-slick gradient (12000 ✨
           ultra). 7s linear rotation cyan → pink → purple → gold →
           green → cyan. */
        .holo-username.holo-username {
            background-image: linear-gradient(90deg, #22d3ee, #ec4899, #a855f7, #fbbf24, #22c55e, #22d3ee) !important;
            background-size: 300% auto !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            font-weight: 800 !important;
            animation: holoNameShift 7s linear infinite !important;
            text-shadow: 0 0 10px rgba(168,85,247,0.4);
        }
        @keyframes holoNameShift {
            0%   { background-position: 0% 50%; }
            100% { background-position: 300% 50%; }
        }

        /* mythic-username: emerald → gold scale gradient (12000 ✨
           ultra). 4.5s shimmer — between Toxic and Royal cadences. */
        .mythic-username.mythic-username {
            background-image: linear-gradient(90deg, #047857, #10b981, #fbbf24, #fde68a, #10b981, #047857) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            font-weight: 800 !important;
            animation: mythicNameShimmer 4.5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(251,191,36,0.4);
        }
        @keyframes mythicNameShimmer {
            0%, 100% { background-position: 0% 50%; }
            50%      { background-position: 100% 50%; }
        }

        /* === LEGENDARY TIER USERNAMES (10 sets × 7500 ✨ each).
           Same doubled-selector + !important pattern as the ultras
           so the gradient wins against ancestor color rules. */
        .sunset-username.sunset-username {
            background-image: linear-gradient(90deg, #fb7185, #f97316, #ec4899, #f97316, #fb7185) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            font-weight: 800 !important;
            animation: sunsetName 4.5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(251,113,133,0.4);
        }
        @keyframes sunsetName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

        .ocean-username.ocean-username {
            background-image: linear-gradient(90deg, #14b8a6, #06b6d4, #0891b2, #06b6d4, #14b8a6) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            font-weight: 800 !important;
            animation: oceanName 5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(20,184,166,0.4);
        }
        @keyframes oceanName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

        .forest-username.forest-username {
            background-image: linear-gradient(90deg, #047857, #10b981, #65a30d, #10b981, #047857) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            font-weight: 800 !important;
            animation: forestName 4.5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(16,185,129,0.4);
        }
        @keyframes forestName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

        .bronze-username.bronze-username {
            background-image: linear-gradient(90deg, #78350f, #b45309, #d97706, #b45309, #78350f) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            font-weight: 800 !important;
            animation: bronzeName 4.5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(180,83,9,0.45);
        }
        @keyframes bronzeName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

        .silver-username.silver-username {
            background-image: linear-gradient(90deg, #d1d5db, #ffffff, #e5e7eb, #ffffff, #d1d5db) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            font-weight: 800 !important;
            animation: silverName 4.5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(255,255,255,0.5);
        }
        @keyframes silverName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

        .honey-username.honey-username {
            background-image: linear-gradient(90deg, #d97706, #f59e0b, #fbbf24, #f59e0b, #d97706) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            font-weight: 800 !important;
            animation: honeyName 4.5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(245,158,11,0.4);
        }
        @keyframes honeyName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

        .lemon-username.lemon-username {
            background-image: linear-gradient(90deg, #eab308, #facc15, #fde047, #facc15, #eab308) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            font-weight: 800 !important;
            animation: lemonName 4s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(250,204,21,0.45);
        }
        @keyframes lemonName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

        .indigo-username.indigo-username {
            background-image: linear-gradient(90deg, #1e1b4b, #4338ca, #4f46e5, #4338ca, #1e1b4b) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            font-weight: 800 !important;
            animation: indigoName 5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(67,56,202,0.5);
        }
        @keyframes indigoName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

        .lavender-username.lavender-username {
            background-image: linear-gradient(90deg, #c084fc, #d8b4fe, #e9d5ff, #d8b4fe, #c084fc) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            font-weight: 800 !important;
            animation: lavenderName 5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(192,132,252,0.4);
        }
        @keyframes lavenderName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

        .mint-username.mint-username {
            background-image: linear-gradient(90deg, #2dd4bf, #6ee7b7, #a7f3d0, #6ee7b7, #2dd4bf) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            font-weight: 800 !important;
            animation: mintName 4.2s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(45,212,191,0.4);
        }
        @keyframes mintName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

        /* === BIO GLOW — recolors the cyan border around #profile-bio
           and the .preview-bio pill in the store preview. For animated
           perks the keyframe drives box-shadow + border-color, which
           overrides the default :focus cyan halo automatically (CSS
           animations win over static cascade values during execution). */
        /* rose-bio: static pink (200 ✨ uncommon) */
        #profile-bio[data-perks~="rose-bio"],
        .preview-bio[data-perks~="rose-bio"] {
            border-color: #f472b6 !important;
        }
        #profile-bio[data-perks~="rose-bio"]:focus,
        #profile-bio[data-perks~="rose-bio"].expanded {
            box-shadow: 0 0 0 3px rgba(244,114,182,0.2) !important;
        }
        .preview-bio[data-perks~="rose-bio"] {
            box-shadow: 0 0 10px rgba(244,114,182,0.3);
        }
        /* crimson-bio: heartbeat pulse (800 ✨ rare) */
        #profile-bio[data-perks~="crimson-bio"],
        .preview-bio[data-perks~="crimson-bio"] {
            border-color: #ef4444 !important;
            animation: bioCrimsonPulse 2.4s ease-in-out infinite;
        }
        @keyframes bioCrimsonPulse {
            0%, 100% { box-shadow: 0 0 8px rgba(239,68,68,0.35); }
            50%      { box-shadow: 0 0 18px rgba(239,68,68,0.65); }
        }
        /* aurora-bio: cyan → indigo → pink shift (4000 ✨ ultra) */
        #profile-bio[data-perks~="aurora-bio"],
        .preview-bio[data-perks~="aurora-bio"] {
            border-color: #22d3ee !important;
            animation: bioAuroraShift 6s linear infinite;
        }
        @keyframes bioAuroraShift {
            0%   { border-color: #22d3ee; box-shadow: 0 0 14px rgba(34,211,238,0.45); }
            25%  { border-color: #818cf8; box-shadow: 0 0 14px rgba(129,140,248,0.45); }
            50%  { border-color: #ec4899; box-shadow: 0 0 14px rgba(236,72,153,0.45); }
            75%  { border-color: #f472b6; box-shadow: 0 0 14px rgba(244,114,182,0.45); }
            100% { border-color: #22d3ee; box-shadow: 0 0 14px rgba(34,211,238,0.45); }
        }
        /* phoenix-bio: fire flicker red → orange → gold (4000 ✨ ultra) */
        #profile-bio[data-perks~="phoenix-bio"],
        .preview-bio[data-perks~="phoenix-bio"] {
            border-color: #ef4444 !important;
            animation: bioPhoenixBurn 2.4s ease-in-out infinite;
        }
        @keyframes bioPhoenixBurn {
            0%, 100% { border-color: #ef4444; box-shadow: 0 0 14px rgba(239,68,68,0.55), 0 0 24px rgba(249,115,22,0.3); }
            33%      { border-color: #f97316; box-shadow: 0 0 14px rgba(249,115,22,0.6), 0 0 24px rgba(251,191,36,0.3); }
            66%      { border-color: #fbbf24; box-shadow: 0 0 14px rgba(251,191,36,0.6), 0 0 24px rgba(239,68,68,0.3); }
        }
        /* galaxy-bio: indigo → violet space drift (4000 ✨ ultra) */
        #profile-bio[data-perks~="galaxy-bio"],
        .preview-bio[data-perks~="galaxy-bio"] {
            border-color: #6366f1 !important;
            animation: bioGalaxySpace 5s ease-in-out infinite;
        }
        @keyframes bioGalaxySpace {
            0%, 100% { border-color: #6366f1; box-shadow: 0 0 14px rgba(99,102,241,0.55), 0 0 28px rgba(168,85,247,0.25); }
            50%      { border-color: #a855f7; box-shadow: 0 0 18px rgba(168,85,247,0.7),  0 0 32px rgba(255,255,255,0.2); }
        }
        /* frost-bio: glacial cyan → silver shimmer (4000 ✨ ultra) */
        #profile-bio[data-perks~="frost-bio"],
        .preview-bio[data-perks~="frost-bio"] {
            border-color: #67e8f9 !important;
            animation: bioFrostChill 4s ease-in-out infinite;
        }
        @keyframes bioFrostChill {
            0%, 100% { border-color: #67e8f9; box-shadow: 0 0 14px rgba(103,232,249,0.55), 0 0 24px rgba(229,231,235,0.25); }
            50%      { border-color: #ffffff; box-shadow: 0 0 18px rgba(255,255,255,0.65), 0 0 28px rgba(103,232,249,0.4); }
        }
        /* void-bio: corrupted violet ↔ crimson pulse (4000 ✨ ultra) */
        #profile-bio[data-perks~="void-bio"],
        .preview-bio[data-perks~="void-bio"] {
            border-color: #7c3aed !important;
            animation: bioVoidCorrupt 3s ease-in-out infinite;
        }
        @keyframes bioVoidCorrupt {
            0%, 100% { border-color: #7c3aed; box-shadow: 0 0 14px rgba(124,58,237,0.65), 0 0 26px rgba(127,29,29,0.35); }
            50%      { border-color: #dc2626; box-shadow: 0 0 18px rgba(220,38,38,0.7),   0 0 30px rgba(76,29,149,0.4); }
        }
        /* storm-bio: electric crackle (4000 ✨ ultra) */
        #profile-bio[data-perks~="storm-bio"],
        .preview-bio[data-perks~="storm-bio"] {
            border-color: #38bdf8 !important;
            animation: bioStormCrackle 1.8s linear infinite;
        }
        @keyframes bioStormCrackle {
            0%   { border-color: #38bdf8; box-shadow: 0 0 14px rgba(56,189,248,0.6); }
            7%   { border-color: #ffffff; box-shadow: 0 0 24px rgba(255,255,255,0.85); }
            12%  { border-color: #38bdf8; box-shadow: 0 0 14px rgba(56,189,248,0.6); }
            48%  { border-color: #6366f1; box-shadow: 0 0 14px rgba(99,102,241,0.6); }
            54%  { border-color: #ffffff; box-shadow: 0 0 24px rgba(255,255,255,0.85); }
            60%  { border-color: #6366f1; box-shadow: 0 0 14px rgba(99,102,241,0.6); }
            100% { border-color: #38bdf8; box-shadow: 0 0 14px rgba(56,189,248,0.6); }
        }
        /* sakura-bio: soft pink blossom drift (4000 ✨ ultra) */
        #profile-bio[data-perks~="sakura-bio"],
        .preview-bio[data-perks~="sakura-bio"] {
            border-color: #f472b6 !important;
            animation: bioSakuraBloom 5.5s ease-in-out infinite;
        }
        @keyframes bioSakuraBloom {
            0%, 100% { border-color: #f472b6; box-shadow: 0 0 14px rgba(244,114,182,0.5), 0 0 26px rgba(251,207,232,0.25); }
            50%      { border-color: #fbcfe8; box-shadow: 0 0 18px rgba(251,207,232,0.7), 0 0 30px rgba(255,255,255,0.25); }
        }
        /* toxic-bio: radioactive border pulse (4000 ✨ ultra) */
        #profile-bio[data-perks~="toxic-bio"],
        .preview-bio[data-perks~="toxic-bio"] {
            border-color: #22c55e !important;
            animation: bioToxicPulse 2.8s ease-in-out infinite;
        }
        @keyframes bioToxicPulse {
            0%, 100% { border-color: #22c55e; box-shadow: 0 0 14px rgba(34,197,94,0.6),  0 0 24px rgba(132,204,22,0.3); }
            33%      { border-color: #84cc16; box-shadow: 0 0 16px rgba(132,204,22,0.65), 0 0 26px rgba(250,204,21,0.35); }
            66%      { border-color: #facc15; box-shadow: 0 0 16px rgba(250,204,21,0.6),  0 0 24px rgba(34,197,94,0.3); }
        }
        /* royal-bio: purple → gold majestic border (4000 ✨ ultra) */
        #profile-bio[data-perks~="royal-bio"],
        .preview-bio[data-perks~="royal-bio"] {
            border-color: #7c3aed !important;
            animation: bioRoyalShift 4.5s ease-in-out infinite;
        }
        @keyframes bioRoyalShift {
            0%, 100% { border-color: #7c3aed; box-shadow: 0 0 14px rgba(124,58,237,0.6), 0 0 26px rgba(251,191,36,0.3); }
            50%      { border-color: #fbbf24; box-shadow: 0 0 18px rgba(251,191,36,0.7), 0 0 30px rgba(124,58,237,0.35); }
        }
        /* lava-bio: molten border with shadow undertones (4000 ✨ ultra) */
        #profile-bio[data-perks~="lava-bio"],
        .preview-bio[data-perks~="lava-bio"] {
            border-color: #dc2626 !important;
            animation: bioLavaChurn 3.5s ease-in-out infinite;
        }
        @keyframes bioLavaChurn {
            0%, 100% { border-color: #dc2626; box-shadow: 0 0 14px rgba(220,38,38,0.6),  0 0 26px rgba(24,24,27,0.4); }
            50%      { border-color: #f97316; box-shadow: 0 0 18px rgba(249,115,22,0.7), 0 0 30px rgba(185,28,28,0.4); }
        }
        /* holo-bio: iridescent border (4000 ✨ ultra) */
        #profile-bio[data-perks~="holo-bio"],
        .preview-bio[data-perks~="holo-bio"] {
            border-color: #22d3ee !important;
            animation: bioHoloShift 8s linear infinite;
        }
        @keyframes bioHoloShift {
            0%   { border-color: #22d3ee; box-shadow: 0 0 14px rgba(34,211,238,0.55); }
            25%  { border-color: #a855f7; box-shadow: 0 0 14px rgba(168,85,247,0.55); }
            50%  { border-color: #fbbf24; box-shadow: 0 0 14px rgba(251,191,36,0.55); }
            75%  { border-color: #22c55e; box-shadow: 0 0 14px rgba(34,197,94,0.55); }
            100% { border-color: #22d3ee; box-shadow: 0 0 14px rgba(34,211,238,0.55); }
        }
        /* mythic-bio: emerald ↔ gold border (4000 ✨ ultra) */
        #profile-bio[data-perks~="mythic-bio"],
        .preview-bio[data-perks~="mythic-bio"] {
            border-color: #10b981 !important;
            animation: bioMythicShimmer 4s ease-in-out infinite;
        }
        @keyframes bioMythicShimmer {
            0%, 100% { border-color: #10b981; box-shadow: 0 0 14px rgba(16,185,129,0.6), 0 0 26px rgba(251,191,36,0.3); }
            50%      { border-color: #fbbf24; box-shadow: 0 0 18px rgba(251,191,36,0.7), 0 0 30px rgba(4,120,87,0.35); }
        }
        /* === LEGENDARY TIER BIO GLOWS (10 sets × 2000 ✨ each).
           Match the matching glow/frame cadence within each set. */
        #profile-bio[data-perks~="sunset-bio"], .preview-bio[data-perks~="sunset-bio"] {
            border-color: #fb7185 !important;
            animation: bioSunset 4s ease-in-out infinite;
        }
        @keyframes bioSunset {
            0%, 100% { border-color: #fb7185; box-shadow: 0 0 14px rgba(251,113,133,0.55), 0 0 26px rgba(249,115,22,0.3); }
            50%      { border-color: #ec4899; box-shadow: 0 0 18px rgba(236,72,153,0.65), 0 0 30px rgba(190,18,60,0.3); }
        }
        #profile-bio[data-perks~="ocean-bio"], .preview-bio[data-perks~="ocean-bio"] {
            border-color: #14b8a6 !important;
            animation: bioOcean 4.5s ease-in-out infinite;
        }
        @keyframes bioOcean {
            0%, 100% { border-color: #14b8a6; box-shadow: 0 0 14px rgba(20,184,166,0.55), 0 0 26px rgba(8,145,178,0.3); }
            50%      { border-color: #06b6d4; box-shadow: 0 0 18px rgba(6,182,212,0.65),  0 0 30px rgba(19,78,74,0.3); }
        }
        #profile-bio[data-perks~="forest-bio"], .preview-bio[data-perks~="forest-bio"] {
            border-color: #10b981 !important;
            animation: bioForest 4s ease-in-out infinite;
        }
        @keyframes bioForest {
            0%, 100% { border-color: #10b981; box-shadow: 0 0 14px rgba(16,185,129,0.55), 0 0 26px rgba(20,83,45,0.3); }
            50%      { border-color: #65a30d; box-shadow: 0 0 18px rgba(101,163,13,0.65), 0 0 30px rgba(22,163,74,0.3); }
        }
        #profile-bio[data-perks~="bronze-bio"], .preview-bio[data-perks~="bronze-bio"] {
            border-color: #b45309 !important;
            animation: bioBronze 4s ease-in-out infinite;
        }
        @keyframes bioBronze {
            0%, 100% { border-color: #b45309; box-shadow: 0 0 14px rgba(180,83,9,0.55),  0 0 26px rgba(120,53,15,0.3); }
            50%      { border-color: #d97706; box-shadow: 0 0 18px rgba(217,119,6,0.65), 0 0 30px rgba(202,138,4,0.3); }
        }
        #profile-bio[data-perks~="silver-bio"], .preview-bio[data-perks~="silver-bio"] {
            border-color: #ffffff !important;
            animation: bioSilver 4s ease-in-out infinite;
        }
        @keyframes bioSilver {
            0%, 100% { border-color: #ffffff; box-shadow: 0 0 14px rgba(255,255,255,0.55), 0 0 26px rgba(209,213,219,0.3); }
            50%      { border-color: #d1d5db; box-shadow: 0 0 18px rgba(229,231,235,0.65), 0 0 30px rgba(243,244,246,0.3); }
        }
        #profile-bio[data-perks~="honey-bio"], .preview-bio[data-perks~="honey-bio"] {
            border-color: #f59e0b !important;
            animation: bioHoney 4s ease-in-out infinite;
        }
        @keyframes bioHoney {
            0%, 100% { border-color: #f59e0b; box-shadow: 0 0 14px rgba(245,158,11,0.55), 0 0 26px rgba(180,83,9,0.3); }
            50%      { border-color: #fbbf24; box-shadow: 0 0 18px rgba(251,191,36,0.65), 0 0 30px rgba(217,119,6,0.3); }
        }
        #profile-bio[data-perks~="lemon-bio"], .preview-bio[data-perks~="lemon-bio"] {
            border-color: #fde047 !important;
            animation: bioLemon 4s ease-in-out infinite;
        }
        @keyframes bioLemon {
            0%, 100% { border-color: #fde047; box-shadow: 0 0 14px rgba(253,224,71,0.55), 0 0 26px rgba(234,179,8,0.3); }
            50%      { border-color: #facc15; box-shadow: 0 0 18px rgba(250,204,21,0.65), 0 0 30px rgba(254,240,138,0.3); }
        }
        #profile-bio[data-perks~="indigo-bio"], .preview-bio[data-perks~="indigo-bio"] {
            border-color: #4338ca !important;
            animation: bioIndigo 5s ease-in-out infinite;
        }
        @keyframes bioIndigo {
            0%, 100% { border-color: #4338ca; box-shadow: 0 0 14px rgba(67,56,202,0.6),  0 0 26px rgba(30,27,75,0.4); }
            50%      { border-color: #4f46e5; box-shadow: 0 0 18px rgba(79,70,229,0.7),  0 0 30px rgba(55,48,163,0.35); }
        }
        #profile-bio[data-perks~="lavender-bio"], .preview-bio[data-perks~="lavender-bio"] {
            border-color: #c084fc !important;
            animation: bioLavender 5s ease-in-out infinite;
        }
        @keyframes bioLavender {
            0%, 100% { border-color: #c084fc; box-shadow: 0 0 14px rgba(192,132,252,0.55), 0 0 26px rgba(216,180,254,0.3); }
            50%      { border-color: #d8b4fe; box-shadow: 0 0 18px rgba(216,180,254,0.65), 0 0 30px rgba(233,213,255,0.3); }
        }
        #profile-bio[data-perks~="mint-bio"], .preview-bio[data-perks~="mint-bio"] {
            border-color: #6ee7b7 !important;
            animation: bioMint 4.2s ease-in-out infinite;
        }
        @keyframes bioMint {
            0%, 100% { border-color: #6ee7b7; box-shadow: 0 0 14px rgba(110,231,183,0.55), 0 0 26px rgba(45,212,191,0.3); }
            50%      { border-color: #2dd4bf; box-shadow: 0 0 18px rgba(45,212,191,0.65),  0 0 30px rgba(167,243,208,0.3); }
        }

        /* === LEGENDARY TIER — 10 MORE SETS (matches existing legendary
           cadence: 2-stop ease-in-out 4-5s). Each set follows the same
           4-rule structure: card-glow / frame / username / bio. */

        /* Twilight — indigo ↔ orange dusk (4.5s) */
        .profile-card[data-perks~="twilight-glow"]:not([data-perks~="veteran"]) { animation: twilightCard 4.5s ease-in-out infinite; }
        @keyframes twilightCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(99,102,241,0.7),  0 0 50px rgba(99,102,241,0.45),  0 0 90px rgba(168,85,247,0.25); }
            50%      { box-shadow: 0 0 0 1px rgba(251,146,60,0.7),  0 0 55px rgba(251,146,60,0.5),   0 0 95px rgba(236,72,153,0.3); }
        }
        [data-perks~="twilight-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="twilight-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="twilight-frame"]:not([data-perks~="ring"]) { animation: twilightFrame 4.5s ease-in-out infinite; }
        @keyframes twilightFrame {
            0%, 100% { box-shadow: 0 0 0 2px #6366f1, 0 0 14px rgba(99,102,241,0.55), 0 0 24px rgba(168,85,247,0.3); }
            50%      { box-shadow: 0 0 0 2px #fb923c, 0 0 18px rgba(251,146,60,0.65), 0 0 28px rgba(236,72,153,0.3); }
        }
        .twilight-username.twilight-username {
            background-image: linear-gradient(90deg, #6366f1, #a855f7, #ec4899, #fb923c, #6366f1) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: twilightName 5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(168,85,247,0.4);
        }
        @keyframes twilightName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        #profile-bio[data-perks~="twilight-bio"], .preview-bio[data-perks~="twilight-bio"] {
            border-color: #6366f1 !important; animation: twilightBio 4.5s ease-in-out infinite;
        }
        @keyframes twilightBio {
            0%, 100% { border-color: #6366f1; box-shadow: 0 0 14px rgba(99,102,241,0.55), 0 0 26px rgba(168,85,247,0.3); }
            50%      { border-color: #fb923c; box-shadow: 0 0 18px rgba(251,146,60,0.65), 0 0 30px rgba(236,72,153,0.3); }
        }

        /* Berry — violet ↔ mulberry (4s) */
        .profile-card[data-perks~="berry-glow"]:not([data-perks~="veteran"]) { animation: berryCard 4s ease-in-out infinite; }
        @keyframes berryCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(109,40,217,0.7),  0 0 50px rgba(109,40,217,0.45), 0 0 90px rgba(190,24,93,0.25); }
            50%      { box-shadow: 0 0 0 1px rgba(190,24,93,0.7),   0 0 55px rgba(190,24,93,0.5),   0 0 95px rgba(76,29,149,0.3); }
        }
        [data-perks~="berry-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="berry-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="berry-frame"]:not([data-perks~="ring"]) { animation: berryFrame 4s ease-in-out infinite; }
        @keyframes berryFrame {
            0%, 100% { box-shadow: 0 0 0 2px #6d28d9, 0 0 14px rgba(109,40,217,0.55), 0 0 24px rgba(190,24,93,0.3); }
            50%      { box-shadow: 0 0 0 2px #be185d, 0 0 18px rgba(190,24,93,0.65),  0 0 28px rgba(76,29,149,0.3); }
        }
        .berry-username.berry-username {
            background-image: linear-gradient(90deg, #4c1d95, #6d28d9, #be185d, #6d28d9, #4c1d95) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: berryName 4.5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(109,40,217,0.4);
        }
        @keyframes berryName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        #profile-bio[data-perks~="berry-bio"], .preview-bio[data-perks~="berry-bio"] {
            border-color: #6d28d9 !important; animation: berryBio 4s ease-in-out infinite;
        }
        @keyframes berryBio {
            0%, 100% { border-color: #6d28d9; box-shadow: 0 0 14px rgba(109,40,217,0.55), 0 0 26px rgba(190,24,93,0.3); }
            50%      { border-color: #be185d; box-shadow: 0 0 18px rgba(190,24,93,0.65),  0 0 30px rgba(76,29,149,0.3); }
        }

        /* Tangerine — pure citrus orange (4s) */
        .profile-card[data-perks~="tangerine-glow"]:not([data-perks~="veteran"]) { animation: tangerineCard 4s ease-in-out infinite; }
        @keyframes tangerineCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(249,115,22,0.7),  0 0 50px rgba(249,115,22,0.45), 0 0 90px rgba(234,88,12,0.25); }
            50%      { box-shadow: 0 0 0 1px rgba(251,146,60,0.75), 0 0 55px rgba(251,146,60,0.55), 0 0 95px rgba(254,215,170,0.3); }
        }
        [data-perks~="tangerine-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="tangerine-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="tangerine-frame"]:not([data-perks~="ring"]) { animation: tangerineFrame 4s ease-in-out infinite; }
        @keyframes tangerineFrame {
            0%, 100% { box-shadow: 0 0 0 2px #f97316, 0 0 14px rgba(249,115,22,0.6), 0 0 24px rgba(234,88,12,0.3); }
            50%      { box-shadow: 0 0 0 2px #fb923c, 0 0 18px rgba(251,146,60,0.7), 0 0 28px rgba(254,215,170,0.3); }
        }
        .tangerine-username.tangerine-username {
            background-image: linear-gradient(90deg, #ea580c, #f97316, #fb923c, #f97316, #ea580c) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: tangerineName 4.5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(249,115,22,0.45);
        }
        @keyframes tangerineName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        #profile-bio[data-perks~="tangerine-bio"], .preview-bio[data-perks~="tangerine-bio"] {
            border-color: #f97316 !important; animation: tangerineBio 4s ease-in-out infinite;
        }
        @keyframes tangerineBio {
            0%, 100% { border-color: #f97316; box-shadow: 0 0 14px rgba(249,115,22,0.55), 0 0 26px rgba(234,88,12,0.3); }
            50%      { border-color: #fb923c; box-shadow: 0 0 18px rgba(251,146,60,0.7),  0 0 30px rgba(254,215,170,0.3); }
        }

        /* Tropical — pink + teal + yellow 3-stop multi-color (5s) */
        .profile-card[data-perks~="tropical-glow"]:not([data-perks~="veteran"]) { animation: tropicalCard 5s ease-in-out infinite; }
        @keyframes tropicalCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(236,72,153,0.7), 0 0 50px rgba(236,72,153,0.5), 0 0 90px rgba(20,184,166,0.25); }
            33%      { box-shadow: 0 0 0 1px rgba(20,184,166,0.7), 0 0 55px rgba(20,184,166,0.5), 0 0 95px rgba(251,191,36,0.25); }
            66%      { box-shadow: 0 0 0 1px rgba(251,191,36,0.7), 0 0 55px rgba(251,191,36,0.5), 0 0 95px rgba(236,72,153,0.25); }
        }
        [data-perks~="tropical-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="tropical-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="tropical-frame"]:not([data-perks~="ring"]) { animation: tropicalFrame 5s ease-in-out infinite; }
        @keyframes tropicalFrame {
            0%, 100% { box-shadow: 0 0 0 2px #ec4899, 0 0 14px rgba(236,72,153,0.6); }
            33%      { box-shadow: 0 0 0 2px #14b8a6, 0 0 14px rgba(20,184,166,0.6); }
            66%      { box-shadow: 0 0 0 2px #fbbf24, 0 0 14px rgba(251,191,36,0.6); }
        }
        .tropical-username.tropical-username {
            background-image: linear-gradient(90deg, #ec4899, #14b8a6, #fbbf24, #14b8a6, #ec4899) !important;
            background-size: 300% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: tropicalName 5s linear infinite !important;
            text-shadow: 0 0 10px rgba(236,72,153,0.4);
        }
        @keyframes tropicalName { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
        #profile-bio[data-perks~="tropical-bio"], .preview-bio[data-perks~="tropical-bio"] {
            border-color: #ec4899 !important; animation: tropicalBio 5s ease-in-out infinite;
        }
        @keyframes tropicalBio {
            0%, 100% { border-color: #ec4899; box-shadow: 0 0 14px rgba(236,72,153,0.55); }
            33%      { border-color: #14b8a6; box-shadow: 0 0 14px rgba(20,184,166,0.55); }
            66%      { border-color: #fbbf24; box-shadow: 0 0 14px rgba(251,191,36,0.55); }
        }

        /* Velvet — magenta luxe shift (4.5s) */
        .profile-card[data-perks~="velvet-glow"]:not([data-perks~="veteran"]) { animation: velvetCard 4.5s ease-in-out infinite; }
        @keyframes velvetCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(134,25,143,0.7),  0 0 50px rgba(134,25,143,0.45), 0 0 90px rgba(217,70,239,0.25); }
            50%      { box-shadow: 0 0 0 1px rgba(217,70,239,0.75), 0 0 55px rgba(217,70,239,0.5),  0 0 95px rgba(131,24,67,0.3); }
        }
        [data-perks~="velvet-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="velvet-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="velvet-frame"]:not([data-perks~="ring"]) { animation: velvetFrame 4.5s ease-in-out infinite; }
        @keyframes velvetFrame {
            0%, 100% { box-shadow: 0 0 0 2px #86198f, 0 0 14px rgba(134,25,143,0.6),  0 0 24px rgba(217,70,239,0.3); }
            50%      { box-shadow: 0 0 0 2px #d946ef, 0 0 18px rgba(217,70,239,0.7),  0 0 28px rgba(131,24,67,0.3); }
        }
        .velvet-username.velvet-username {
            background-image: linear-gradient(90deg, #831843, #86198f, #d946ef, #86198f, #831843) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: velvetName 5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(134,25,143,0.45);
        }
        @keyframes velvetName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        #profile-bio[data-perks~="velvet-bio"], .preview-bio[data-perks~="velvet-bio"] {
            border-color: #86198f !important; animation: velvetBio 4.5s ease-in-out infinite;
        }
        @keyframes velvetBio {
            0%, 100% { border-color: #86198f; box-shadow: 0 0 14px rgba(134,25,143,0.55), 0 0 26px rgba(217,70,239,0.3); }
            50%      { border-color: #d946ef; box-shadow: 0 0 18px rgba(217,70,239,0.7),  0 0 30px rgba(131,24,67,0.3); }
        }

        /* Marble — white/gray slow vein shimmer (6s) */
        .profile-card[data-perks~="marble-glow"]:not([data-perks~="veteran"]) { animation: marbleCard 6s ease-in-out infinite; }
        @keyframes marbleCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(229,231,235,0.7), 0 0 40px rgba(255,255,255,0.4),  0 0 80px rgba(148,163,184,0.25); }
            50%      { box-shadow: 0 0 0 1px rgba(255,255,255,0.85),0 0 55px rgba(255,255,255,0.55), 0 0 95px rgba(209,213,219,0.3); }
        }
        [data-perks~="marble-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="marble-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="marble-frame"]:not([data-perks~="ring"]) { animation: marbleFrame 6s ease-in-out infinite; }
        @keyframes marbleFrame {
            0%, 100% { box-shadow: 0 0 0 2px #e5e7eb, 0 0 14px rgba(229,231,235,0.55); }
            50%      { box-shadow: 0 0 0 2px #ffffff, 0 0 20px rgba(255,255,255,0.85); }
        }
        .marble-username.marble-username {
            background-image: linear-gradient(90deg, #94a3b8, #ffffff, #e5e7eb, #ffffff, #94a3b8) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: marbleName 6s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(255,255,255,0.45);
        }
        @keyframes marbleName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        #profile-bio[data-perks~="marble-bio"], .preview-bio[data-perks~="marble-bio"] {
            border-color: #e5e7eb !important; animation: marbleBio 6s ease-in-out infinite;
        }
        @keyframes marbleBio {
            0%, 100% { border-color: #e5e7eb; box-shadow: 0 0 14px rgba(229,231,235,0.55); }
            50%      { border-color: #ffffff; box-shadow: 0 0 22px rgba(255,255,255,0.8); }
        }

        /* Apricot — soft warm peach (4.5s) */
        .profile-card[data-perks~="apricot-glow"]:not([data-perks~="veteran"]) { animation: apricotCard 4.5s ease-in-out infinite; }
        @keyframes apricotCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(253,186,116,0.7), 0 0 50px rgba(253,186,116,0.45), 0 0 90px rgba(254,215,170,0.25); }
            50%      { box-shadow: 0 0 0 1px rgba(251,146,60,0.7),  0 0 55px rgba(251,146,60,0.5),   0 0 95px rgba(253,186,116,0.3); }
        }
        [data-perks~="apricot-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="apricot-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="apricot-frame"]:not([data-perks~="ring"]) { animation: apricotFrame 4.5s ease-in-out infinite; }
        @keyframes apricotFrame {
            0%, 100% { box-shadow: 0 0 0 2px #fdba74, 0 0 14px rgba(253,186,116,0.6),  0 0 24px rgba(254,215,170,0.3); }
            50%      { box-shadow: 0 0 0 2px #fb923c, 0 0 18px rgba(251,146,60,0.7),   0 0 28px rgba(253,186,116,0.3); }
        }
        .apricot-username.apricot-username {
            background-image: linear-gradient(90deg, #fdba74, #fb923c, #fed7aa, #fb923c, #fdba74) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: apricotName 5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(253,186,116,0.4);
        }
        @keyframes apricotName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        #profile-bio[data-perks~="apricot-bio"], .preview-bio[data-perks~="apricot-bio"] {
            border-color: #fdba74 !important; animation: apricotBio 4.5s ease-in-out infinite;
        }
        @keyframes apricotBio {
            0%, 100% { border-color: #fdba74; box-shadow: 0 0 14px rgba(253,186,116,0.55), 0 0 26px rgba(254,215,170,0.3); }
            50%      { border-color: #fb923c; box-shadow: 0 0 18px rgba(251,146,60,0.7),   0 0 30px rgba(253,186,116,0.3); }
        }

        /* Cinnamon — red-brown spice (4s) */
        .profile-card[data-perks~="cinnamon-glow"]:not([data-perks~="veteran"]) { animation: cinnamonCard 4s ease-in-out infinite; }
        @keyframes cinnamonCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(194,65,12,0.7),  0 0 50px rgba(194,65,12,0.45), 0 0 90px rgba(120,53,15,0.3); }
            50%      { box-shadow: 0 0 0 1px rgba(180,83,9,0.75),  0 0 55px rgba(180,83,9,0.5),   0 0 95px rgba(194,65,12,0.3); }
        }
        [data-perks~="cinnamon-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="cinnamon-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="cinnamon-frame"]:not([data-perks~="ring"]) { animation: cinnamonFrame 4s ease-in-out infinite; }
        @keyframes cinnamonFrame {
            0%, 100% { box-shadow: 0 0 0 2px #c2410c, 0 0 14px rgba(194,65,12,0.6),  0 0 24px rgba(120,53,15,0.3); }
            50%      { box-shadow: 0 0 0 2px #b45309, 0 0 18px rgba(180,83,9,0.7),   0 0 28px rgba(194,65,12,0.3); }
        }
        .cinnamon-username.cinnamon-username {
            background-image: linear-gradient(90deg, #78350f, #c2410c, #b45309, #c2410c, #78350f) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: cinnamonName 4.5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(194,65,12,0.45);
        }
        @keyframes cinnamonName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        #profile-bio[data-perks~="cinnamon-bio"], .preview-bio[data-perks~="cinnamon-bio"] {
            border-color: #c2410c !important; animation: cinnamonBio 4s ease-in-out infinite;
        }
        @keyframes cinnamonBio {
            0%, 100% { border-color: #c2410c; box-shadow: 0 0 14px rgba(194,65,12,0.55), 0 0 26px rgba(120,53,15,0.3); }
            50%      { border-color: #b45309; box-shadow: 0 0 18px rgba(180,83,9,0.7),   0 0 30px rgba(194,65,12,0.3); }
        }

        /* Saffron — gold-yellow spice (4s) */
        .profile-card[data-perks~="saffron-glow"]:not([data-perks~="veteran"]) { animation: saffronCard 4s ease-in-out infinite; }
        @keyframes saffronCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(251,191,36,0.7), 0 0 50px rgba(251,191,36,0.45), 0 0 90px rgba(217,119,6,0.25); }
            50%      { box-shadow: 0 0 0 1px rgba(217,119,6,0.7),  0 0 55px rgba(217,119,6,0.5),   0 0 95px rgba(254,240,138,0.3); }
        }
        [data-perks~="saffron-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="saffron-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="saffron-frame"]:not([data-perks~="ring"]) { animation: saffronFrame 4s ease-in-out infinite; }
        @keyframes saffronFrame {
            0%, 100% { box-shadow: 0 0 0 2px #fbbf24, 0 0 14px rgba(251,191,36,0.6),  0 0 24px rgba(217,119,6,0.3); }
            50%      { box-shadow: 0 0 0 2px #d97706, 0 0 18px rgba(217,119,6,0.7),   0 0 28px rgba(254,240,138,0.3); }
        }
        .saffron-username.saffron-username {
            background-image: linear-gradient(90deg, #d97706, #fbbf24, #fde68a, #fbbf24, #d97706) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: saffronName 4.5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(251,191,36,0.45);
        }
        @keyframes saffronName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        #profile-bio[data-perks~="saffron-bio"], .preview-bio[data-perks~="saffron-bio"] {
            border-color: #fbbf24 !important; animation: saffronBio 4s ease-in-out infinite;
        }
        @keyframes saffronBio {
            0%, 100% { border-color: #fbbf24; box-shadow: 0 0 14px rgba(251,191,36,0.55), 0 0 26px rgba(217,119,6,0.3); }
            50%      { border-color: #d97706; box-shadow: 0 0 18px rgba(217,119,6,0.7),   0 0 30px rgba(254,240,138,0.3); }
        }

        /* Magnolia — cream + soft pink floral (5s) */
        .profile-card[data-perks~="magnolia-glow"]:not([data-perks~="veteran"]) { animation: magnoliaCard 5s ease-in-out infinite; }
        @keyframes magnoliaCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(254,243,199,0.7), 0 0 50px rgba(254,243,199,0.45), 0 0 90px rgba(251,207,232,0.25); }
            50%      { box-shadow: 0 0 0 1px rgba(251,207,232,0.7), 0 0 55px rgba(251,207,232,0.5),  0 0 95px rgba(254,243,199,0.3); }
        }
        [data-perks~="magnolia-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="magnolia-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="magnolia-frame"]:not([data-perks~="ring"]) { animation: magnoliaFrame 5s ease-in-out infinite; }
        @keyframes magnoliaFrame {
            0%, 100% { box-shadow: 0 0 0 2px #fef3c7, 0 0 14px rgba(254,243,199,0.6),  0 0 24px rgba(251,207,232,0.3); }
            50%      { box-shadow: 0 0 0 2px #fbcfe8, 0 0 18px rgba(251,207,232,0.7),  0 0 28px rgba(254,243,199,0.3); }
        }
        .magnolia-username.magnolia-username {
            background-image: linear-gradient(90deg, #fef3c7, #fbcfe8, #ffffff, #fbcfe8, #fef3c7) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: magnoliaName 5.5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(251,207,232,0.4);
        }
        @keyframes magnoliaName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        #profile-bio[data-perks~="magnolia-bio"], .preview-bio[data-perks~="magnolia-bio"] {
            border-color: #fef3c7 !important; animation: magnoliaBio 5s ease-in-out infinite;
        }
        @keyframes magnoliaBio {
            0%, 100% { border-color: #fef3c7; box-shadow: 0 0 14px rgba(254,243,199,0.55), 0 0 26px rgba(251,207,232,0.3); }
            50%      { border-color: #fbcfe8; box-shadow: 0 0 18px rgba(251,207,232,0.7),  0 0 30px rgba(254,243,199,0.3); }
        }

        /* === LEGENDARY TIER — 10 MORE SETS (round 3, 4-5s ease-in-out) === */

        /* Burgundy — deep wine red (4s) */
        .profile-card[data-perks~="burgundy-glow"]:not([data-perks~="veteran"]) { animation: burgundyCard 4s ease-in-out infinite; }
        @keyframes burgundyCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(127,29,29,0.7),  0 0 50px rgba(127,29,29,0.45), 0 0 90px rgba(76,29,149,0.2); }
            50%      { box-shadow: 0 0 0 1px rgba(153,27,27,0.75), 0 0 55px rgba(153,27,27,0.55), 0 0 95px rgba(127,29,29,0.3); }
        }
        [data-perks~="burgundy-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="burgundy-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="burgundy-frame"]:not([data-perks~="ring"]) { animation: burgundyFrame 4s ease-in-out infinite; }
        @keyframes burgundyFrame {
            0%, 100% { box-shadow: 0 0 0 2px #7f1d1d, 0 0 14px rgba(127,29,29,0.6),  0 0 24px rgba(76,29,149,0.25); }
            50%      { box-shadow: 0 0 0 2px #991b1b, 0 0 18px rgba(153,27,27,0.7),  0 0 28px rgba(127,29,29,0.3); }
        }
        .burgundy-username.burgundy-username {
            background-image: linear-gradient(90deg, #4c0519, #7f1d1d, #991b1b, #7f1d1d, #4c0519) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: burgundyName 4.5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(127,29,29,0.45);
        }
        @keyframes burgundyName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        #profile-bio[data-perks~="burgundy-bio"], .preview-bio[data-perks~="burgundy-bio"] {
            border-color: #7f1d1d !important; animation: burgundyBio 4s ease-in-out infinite;
        }
        @keyframes burgundyBio {
            0%, 100% { border-color: #7f1d1d; box-shadow: 0 0 14px rgba(127,29,29,0.55), 0 0 26px rgba(76,29,149,0.25); }
            50%      { border-color: #991b1b; box-shadow: 0 0 18px rgba(153,27,27,0.7),  0 0 30px rgba(127,29,29,0.3); }
        }

        /* Olive — military olive green (4s) */
        .profile-card[data-perks~="olive-glow"]:not([data-perks~="veteran"]) { animation: oliveCard 4s ease-in-out infinite; }
        @keyframes oliveCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(77,124,15,0.7),   0 0 50px rgba(77,124,15,0.45), 0 0 90px rgba(101,163,13,0.25); }
            50%      { box-shadow: 0 0 0 1px rgba(101,163,13,0.75), 0 0 55px rgba(101,163,13,0.5), 0 0 95px rgba(77,124,15,0.3); }
        }
        [data-perks~="olive-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="olive-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="olive-frame"]:not([data-perks~="ring"]) { animation: oliveFrame 4s ease-in-out infinite; }
        @keyframes oliveFrame {
            0%, 100% { box-shadow: 0 0 0 2px #4d7c0f, 0 0 14px rgba(77,124,15,0.6),  0 0 24px rgba(101,163,13,0.3); }
            50%      { box-shadow: 0 0 0 2px #65a30d, 0 0 18px rgba(101,163,13,0.7), 0 0 28px rgba(77,124,15,0.3); }
        }
        .olive-username.olive-username {
            background-image: linear-gradient(90deg, #365314, #4d7c0f, #65a30d, #4d7c0f, #365314) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: oliveName 4.5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(77,124,15,0.45);
        }
        @keyframes oliveName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        #profile-bio[data-perks~="olive-bio"], .preview-bio[data-perks~="olive-bio"] {
            border-color: #4d7c0f !important; animation: oliveBio 4s ease-in-out infinite;
        }
        @keyframes oliveBio {
            0%, 100% { border-color: #4d7c0f; box-shadow: 0 0 14px rgba(77,124,15,0.55), 0 0 26px rgba(101,163,13,0.3); }
            50%      { border-color: #65a30d; box-shadow: 0 0 18px rgba(101,163,13,0.7), 0 0 30px rgba(77,124,15,0.3); }
        }

        /* Steel — cool gray-blue metallic (4s) */
        .profile-card[data-perks~="steel-glow"]:not([data-perks~="veteran"]) { animation: steelCard 4s ease-in-out infinite; }
        @keyframes steelCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(71,85,105,0.7),   0 0 50px rgba(71,85,105,0.45), 0 0 90px rgba(100,116,139,0.25); }
            50%      { box-shadow: 0 0 0 1px rgba(148,163,184,0.7), 0 0 55px rgba(148,163,184,0.5), 0 0 95px rgba(71,85,105,0.3); }
        }
        [data-perks~="steel-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="steel-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="steel-frame"]:not([data-perks~="ring"]) { animation: steelFrame 4s ease-in-out infinite; }
        @keyframes steelFrame {
            0%, 100% { box-shadow: 0 0 0 2px #475569, 0 0 14px rgba(71,85,105,0.6),  0 0 24px rgba(100,116,139,0.3); }
            50%      { box-shadow: 0 0 0 2px #94a3b8, 0 0 18px rgba(148,163,184,0.7), 0 0 28px rgba(71,85,105,0.3); }
        }
        .steel-username.steel-username {
            background-image: linear-gradient(90deg, #64748b, #94a3b8, #cbd5e1, #94a3b8, #64748b) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: steelName 4.5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(148,163,184,0.45);
        }
        @keyframes steelName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        #profile-bio[data-perks~="steel-bio"], .preview-bio[data-perks~="steel-bio"] {
            border-color: #475569 !important; animation: steelBio 4s ease-in-out infinite;
        }
        @keyframes steelBio {
            0%, 100% { border-color: #475569; box-shadow: 0 0 14px rgba(71,85,105,0.55), 0 0 26px rgba(100,116,139,0.3); }
            50%      { border-color: #94a3b8; box-shadow: 0 0 18px rgba(148,163,184,0.7), 0 0 30px rgba(71,85,105,0.3); }
        }

        /* Champagne — pale gold-pink luxe (5s) */
        .profile-card[data-perks~="champagne-glow"]:not([data-perks~="veteran"]) { animation: champagneCard 5s ease-in-out infinite; }
        @keyframes champagneCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(254,243,199,0.7), 0 0 50px rgba(254,243,199,0.45), 0 0 90px rgba(252,165,165,0.2); }
            50%      { box-shadow: 0 0 0 1px rgba(251,191,36,0.65), 0 0 55px rgba(251,191,36,0.45), 0 0 95px rgba(252,165,165,0.25); }
        }
        [data-perks~="champagne-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="champagne-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="champagne-frame"]:not([data-perks~="ring"]) { animation: champagneFrame 5s ease-in-out infinite; }
        @keyframes champagneFrame {
            0%, 100% { box-shadow: 0 0 0 2px #fde68a, 0 0 14px rgba(254,243,199,0.6), 0 0 24px rgba(252,165,165,0.25); }
            50%      { box-shadow: 0 0 0 2px #fbbf24, 0 0 18px rgba(251,191,36,0.65), 0 0 28px rgba(252,165,165,0.3); }
        }
        .champagne-username.champagne-username {
            background-image: linear-gradient(90deg, #fde68a, #fef3c7, #fbbf24, #fef3c7, #fde68a) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: champagneName 5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(254,243,199,0.5);
        }
        @keyframes champagneName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        #profile-bio[data-perks~="champagne-bio"], .preview-bio[data-perks~="champagne-bio"] {
            border-color: #fde68a !important; animation: champagneBio 5s ease-in-out infinite;
        }
        @keyframes champagneBio {
            0%, 100% { border-color: #fde68a; box-shadow: 0 0 14px rgba(254,243,199,0.55), 0 0 26px rgba(252,165,165,0.25); }
            50%      { border-color: #fbbf24; box-shadow: 0 0 18px rgba(251,191,36,0.65), 0 0 30px rgba(252,165,165,0.3); }
        }

        /* Caramel — golden brown (4s) */
        .profile-card[data-perks~="caramel-glow"]:not([data-perks~="veteran"]) { animation: caramelCard 4s ease-in-out infinite; }
        @keyframes caramelCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(146,64,14,0.7),   0 0 50px rgba(146,64,14,0.45), 0 0 90px rgba(180,83,9,0.25); }
            50%      { box-shadow: 0 0 0 1px rgba(217,119,6,0.75),  0 0 55px rgba(217,119,6,0.5),  0 0 95px rgba(146,64,14,0.3); }
        }
        [data-perks~="caramel-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="caramel-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="caramel-frame"]:not([data-perks~="ring"]) { animation: caramelFrame 4s ease-in-out infinite; }
        @keyframes caramelFrame {
            0%, 100% { box-shadow: 0 0 0 2px #92400e, 0 0 14px rgba(146,64,14,0.6),  0 0 24px rgba(180,83,9,0.3); }
            50%      { box-shadow: 0 0 0 2px #d97706, 0 0 18px rgba(217,119,6,0.7),  0 0 28px rgba(146,64,14,0.3); }
        }
        .caramel-username.caramel-username {
            background-image: linear-gradient(90deg, #92400e, #b45309, #d97706, #b45309, #92400e) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: caramelName 4.5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(217,119,6,0.45);
        }
        @keyframes caramelName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        #profile-bio[data-perks~="caramel-bio"], .preview-bio[data-perks~="caramel-bio"] {
            border-color: #92400e !important; animation: caramelBio 4s ease-in-out infinite;
        }
        @keyframes caramelBio {
            0%, 100% { border-color: #92400e; box-shadow: 0 0 14px rgba(146,64,14,0.55), 0 0 26px rgba(180,83,9,0.3); }
            50%      { border-color: #d97706; box-shadow: 0 0 18px rgba(217,119,6,0.7),  0 0 30px rgba(146,64,14,0.3); }
        }

        /* Brick — burnt red-brown (4s) */
        .profile-card[data-perks~="brick-glow"]:not([data-perks~="veteran"]) { animation: brickCard 4s ease-in-out infinite; }
        @keyframes brickCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(127,29,29,0.7),  0 0 50px rgba(127,29,29,0.45), 0 0 90px rgba(120,53,15,0.25); }
            50%      { box-shadow: 0 0 0 1px rgba(185,28,28,0.75), 0 0 55px rgba(185,28,28,0.5),  0 0 95px rgba(127,29,29,0.3); }
        }
        [data-perks~="brick-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="brick-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="brick-frame"]:not([data-perks~="ring"]) { animation: brickFrame 4s ease-in-out infinite; }
        @keyframes brickFrame {
            0%, 100% { box-shadow: 0 0 0 2px #7f1d1d, 0 0 14px rgba(127,29,29,0.6),  0 0 24px rgba(120,53,15,0.3); }
            50%      { box-shadow: 0 0 0 2px #b91c1c, 0 0 18px rgba(185,28,28,0.7),  0 0 28px rgba(127,29,29,0.3); }
        }
        .brick-username.brick-username {
            background-image: linear-gradient(90deg, #7f1d1d, #b91c1c, #c2410c, #b91c1c, #7f1d1d) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: brickName 4.5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(185,28,28,0.45);
        }
        @keyframes brickName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        #profile-bio[data-perks~="brick-bio"], .preview-bio[data-perks~="brick-bio"] {
            border-color: #7f1d1d !important; animation: brickBio 4s ease-in-out infinite;
        }
        @keyframes brickBio {
            0%, 100% { border-color: #7f1d1d; box-shadow: 0 0 14px rgba(127,29,29,0.55), 0 0 26px rgba(120,53,15,0.3); }
            50%      { border-color: #b91c1c; box-shadow: 0 0 18px rgba(185,28,28,0.7),  0 0 30px rgba(127,29,29,0.3); }
        }

        /* Khaki — beige-green neutral (4.5s) */
        .profile-card[data-perks~="khaki-glow"]:not([data-perks~="veteran"]) { animation: khakiCard 4.5s ease-in-out infinite; }
        @keyframes khakiCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(163,163,128,0.7), 0 0 50px rgba(163,163,128,0.45), 0 0 90px rgba(214,211,209,0.2); }
            50%      { box-shadow: 0 0 0 1px rgba(212,203,168,0.7), 0 0 55px rgba(212,203,168,0.5),  0 0 95px rgba(163,163,128,0.3); }
        }
        [data-perks~="khaki-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="khaki-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="khaki-frame"]:not([data-perks~="ring"]) { animation: khakiFrame 4.5s ease-in-out infinite; }
        @keyframes khakiFrame {
            0%, 100% { box-shadow: 0 0 0 2px #a3a380, 0 0 14px rgba(163,163,128,0.6), 0 0 24px rgba(214,211,209,0.25); }
            50%      { box-shadow: 0 0 0 2px #d4cba8, 0 0 18px rgba(212,203,168,0.7), 0 0 28px rgba(163,163,128,0.3); }
        }
        .khaki-username.khaki-username {
            background-image: linear-gradient(90deg, #a3a380, #c2b280, #d4cba8, #c2b280, #a3a380) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: khakiName 5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(212,203,168,0.45);
        }
        @keyframes khakiName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        #profile-bio[data-perks~="khaki-bio"], .preview-bio[data-perks~="khaki-bio"] {
            border-color: #a3a380 !important; animation: khakiBio 4.5s ease-in-out infinite;
        }
        @keyframes khakiBio {
            0%, 100% { border-color: #a3a380; box-shadow: 0 0 14px rgba(163,163,128,0.55), 0 0 26px rgba(214,211,209,0.25); }
            50%      { border-color: #d4cba8; box-shadow: 0 0 18px rgba(212,203,168,0.7),  0 0 30px rgba(163,163,128,0.3); }
        }

        /* Moss — deep dark green (4.5s) */
        .profile-card[data-perks~="moss-glow"]:not([data-perks~="veteran"]) { animation: mossCard 4.5s ease-in-out infinite; }
        @keyframes mossCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(20,83,45,0.75),   0 0 50px rgba(20,83,45,0.5),  0 0 90px rgba(21,128,61,0.3); }
            50%      { box-shadow: 0 0 0 1px rgba(21,128,61,0.75),  0 0 55px rgba(21,128,61,0.55), 0 0 95px rgba(20,83,45,0.35); }
        }
        [data-perks~="moss-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="moss-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="moss-frame"]:not([data-perks~="ring"]) { animation: mossFrame 4.5s ease-in-out infinite; }
        @keyframes mossFrame {
            0%, 100% { box-shadow: 0 0 0 2px #14532d, 0 0 14px rgba(20,83,45,0.65),  0 0 24px rgba(21,128,61,0.3); }
            50%      { box-shadow: 0 0 0 2px #15803d, 0 0 18px rgba(21,128,61,0.75), 0 0 28px rgba(20,83,45,0.3); }
        }
        .moss-username.moss-username {
            background-image: linear-gradient(90deg, #14532d, #166534, #15803d, #166534, #14532d) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: mossName 5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(21,128,61,0.5);
        }
        @keyframes mossName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        #profile-bio[data-perks~="moss-bio"], .preview-bio[data-perks~="moss-bio"] {
            border-color: #14532d !important; animation: mossBio 4.5s ease-in-out infinite;
        }
        @keyframes mossBio {
            0%, 100% { border-color: #14532d; box-shadow: 0 0 14px rgba(20,83,45,0.55),  0 0 26px rgba(21,128,61,0.3); }
            50%      { border-color: #15803d; box-shadow: 0 0 18px rgba(21,128,61,0.75), 0 0 30px rgba(20,83,45,0.3); }
        }

        /* Sunflower — bright sunny yellow (4s) */
        .profile-card[data-perks~="sunflower-glow"]:not([data-perks~="veteran"]) { animation: sunflowerCard 4s ease-in-out infinite; }
        @keyframes sunflowerCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(234,179,8,0.7),  0 0 50px rgba(234,179,8,0.45), 0 0 90px rgba(250,204,21,0.25); }
            50%      { box-shadow: 0 0 0 1px rgba(250,204,21,0.75),0 0 55px rgba(250,204,21,0.55),0 0 95px rgba(234,179,8,0.3); }
        }
        [data-perks~="sunflower-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="sunflower-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="sunflower-frame"]:not([data-perks~="ring"]) { animation: sunflowerFrame 4s ease-in-out infinite; }
        @keyframes sunflowerFrame {
            0%, 100% { box-shadow: 0 0 0 2px #eab308, 0 0 14px rgba(234,179,8,0.6),  0 0 24px rgba(250,204,21,0.3); }
            50%      { box-shadow: 0 0 0 2px #facc15, 0 0 18px rgba(250,204,21,0.75),0 0 28px rgba(234,179,8,0.3); }
        }
        .sunflower-username.sunflower-username {
            background-image: linear-gradient(90deg, #ca8a04, #eab308, #facc15, #eab308, #ca8a04) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: sunflowerName 4.5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(250,204,21,0.45);
        }
        @keyframes sunflowerName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        #profile-bio[data-perks~="sunflower-bio"], .preview-bio[data-perks~="sunflower-bio"] {
            border-color: #eab308 !important; animation: sunflowerBio 4s ease-in-out infinite;
        }
        @keyframes sunflowerBio {
            0%, 100% { border-color: #eab308; box-shadow: 0 0 14px rgba(234,179,8,0.55), 0 0 26px rgba(250,204,21,0.3); }
            50%      { border-color: #facc15; box-shadow: 0 0 18px rgba(250,204,21,0.7), 0 0 30px rgba(234,179,8,0.3); }
        }

        /* Mauve — pinkish purple (4.5s) */
        .profile-card[data-perks~="mauve-glow"]:not([data-perks~="veteran"]) { animation: mauveCard 4.5s ease-in-out infinite; }
        @keyframes mauveCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(190,75,219,0.7), 0 0 50px rgba(190,75,219,0.45), 0 0 90px rgba(192,132,252,0.25); }
            50%      { box-shadow: 0 0 0 1px rgba(192,132,252,0.7),0 0 55px rgba(192,132,252,0.5), 0 0 95px rgba(190,75,219,0.3); }
        }
        [data-perks~="mauve-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="mauve-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="mauve-frame"]:not([data-perks~="ring"]) { animation: mauveFrame 4.5s ease-in-out infinite; }
        @keyframes mauveFrame {
            0%, 100% { box-shadow: 0 0 0 2px #be4bdb, 0 0 14px rgba(190,75,219,0.6),  0 0 24px rgba(192,132,252,0.3); }
            50%      { box-shadow: 0 0 0 2px #c084fc, 0 0 18px rgba(192,132,252,0.7), 0 0 28px rgba(190,75,219,0.3); }
        }
        .mauve-username.mauve-username {
            background-image: linear-gradient(90deg, #86198f, #be4bdb, #c084fc, #be4bdb, #86198f) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: mauveName 5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(190,75,219,0.45);
        }
        @keyframes mauveName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        #profile-bio[data-perks~="mauve-bio"], .preview-bio[data-perks~="mauve-bio"] {
            border-color: #be4bdb !important; animation: mauveBio 4.5s ease-in-out infinite;
        }
        @keyframes mauveBio {
            0%, 100% { border-color: #be4bdb; box-shadow: 0 0 14px rgba(190,75,219,0.55), 0 0 26px rgba(192,132,252,0.3); }
            50%      { border-color: #c084fc; box-shadow: 0 0 18px rgba(192,132,252,0.7), 0 0 30px rgba(190,75,219,0.3); }
        }

        /* === COMMON TIER (10 sets × 4 surfaces).
           Static colors, no animation — distinguishes them from the
           more elaborate higher-tier sets. Same selector pattern as
           aqua/rose. */
        /* Sky #60a5fa */
        .profile-card[data-perks~="sky-glow"]:not([data-perks~="veteran"]) { box-shadow: 0 0 0 1px rgba(96,165,250,0.5), 0 0 36px rgba(96,165,250,0.3); }
        [data-perks~="sky-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="sky-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="sky-frame"]:not([data-perks~="ring"]) { box-shadow: 0 0 0 2px #60a5fa, 0 0 0 4px rgba(96,165,250,0.25); }
        .sky-username.sky-username { color: #60a5fa !important; -webkit-text-fill-color: #60a5fa !important; font-weight: 800 !important; }
        #profile-bio[data-perks~="sky-bio"], .preview-bio[data-perks~="sky-bio"] { border-color: #60a5fa !important; }

        /* Sage #86efac */
        .profile-card[data-perks~="sage-glow"]:not([data-perks~="veteran"]) { box-shadow: 0 0 0 1px rgba(134,239,172,0.5), 0 0 36px rgba(134,239,172,0.3); }
        [data-perks~="sage-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="sage-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="sage-frame"]:not([data-perks~="ring"]) { box-shadow: 0 0 0 2px #86efac, 0 0 0 4px rgba(134,239,172,0.25); }
        .sage-username.sage-username { color: #86efac !important; -webkit-text-fill-color: #86efac !important; font-weight: 800 !important; }
        #profile-bio[data-perks~="sage-bio"], .preview-bio[data-perks~="sage-bio"] { border-color: #86efac !important; }

        /* Coral #fca5a5 */
        .profile-card[data-perks~="coral-glow"]:not([data-perks~="veteran"]) { box-shadow: 0 0 0 1px rgba(252,165,165,0.5), 0 0 36px rgba(252,165,165,0.3); }
        [data-perks~="coral-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="coral-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="coral-frame"]:not([data-perks~="ring"]) { box-shadow: 0 0 0 2px #fca5a5, 0 0 0 4px rgba(252,165,165,0.25); }
        .coral-username.coral-username { color: #fca5a5 !important; -webkit-text-fill-color: #fca5a5 !important; font-weight: 800 !important; }
        #profile-bio[data-perks~="coral-bio"], .preview-bio[data-perks~="coral-bio"] { border-color: #fca5a5 !important; }

        /* Plum #a78bfa */
        .profile-card[data-perks~="plum-glow"]:not([data-perks~="veteran"]) { box-shadow: 0 0 0 1px rgba(167,139,250,0.5), 0 0 36px rgba(167,139,250,0.3); }
        [data-perks~="plum-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="plum-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="plum-frame"]:not([data-perks~="ring"]) { box-shadow: 0 0 0 2px #a78bfa, 0 0 0 4px rgba(167,139,250,0.25); }
        .plum-username.plum-username { color: #a78bfa !important; -webkit-text-fill-color: #a78bfa !important; font-weight: 800 !important; }
        #profile-bio[data-perks~="plum-bio"], .preview-bio[data-perks~="plum-bio"] { border-color: #a78bfa !important; }

        /* Rust #ea580c */
        .profile-card[data-perks~="rust-glow"]:not([data-perks~="veteran"]) { box-shadow: 0 0 0 1px rgba(234,88,12,0.5), 0 0 36px rgba(234,88,12,0.3); }
        [data-perks~="rust-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="rust-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="rust-frame"]:not([data-perks~="ring"]) { box-shadow: 0 0 0 2px #ea580c, 0 0 0 4px rgba(234,88,12,0.25); }
        .rust-username.rust-username { color: #ea580c !important; -webkit-text-fill-color: #ea580c !important; font-weight: 800 !important; }
        #profile-bio[data-perks~="rust-bio"], .preview-bio[data-perks~="rust-bio"] { border-color: #ea580c !important; }

        /* Slate #94a3b8 */
        .profile-card[data-perks~="slate-glow"]:not([data-perks~="veteran"]) { box-shadow: 0 0 0 1px rgba(148,163,184,0.5), 0 0 36px rgba(148,163,184,0.3); }
        [data-perks~="slate-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="slate-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="slate-frame"]:not([data-perks~="ring"]) { box-shadow: 0 0 0 2px #94a3b8, 0 0 0 4px rgba(148,163,184,0.25); }
        .slate-username.slate-username { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; font-weight: 800 !important; }
        #profile-bio[data-perks~="slate-bio"], .preview-bio[data-perks~="slate-bio"] { border-color: #94a3b8 !important; }

        /* Cream #fde68a */
        .profile-card[data-perks~="cream-glow"]:not([data-perks~="veteran"]) { box-shadow: 0 0 0 1px rgba(253,230,138,0.5), 0 0 36px rgba(253,230,138,0.3); }
        [data-perks~="cream-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="cream-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="cream-frame"]:not([data-perks~="ring"]) { box-shadow: 0 0 0 2px #fde68a, 0 0 0 4px rgba(253,230,138,0.25); }
        .cream-username.cream-username { color: #fde68a !important; -webkit-text-fill-color: #fde68a !important; font-weight: 800 !important; }
        #profile-bio[data-perks~="cream-bio"], .preview-bio[data-perks~="cream-bio"] { border-color: #fde68a !important; }

        /* Mocha #b45309 */
        .profile-card[data-perks~="mocha-glow"]:not([data-perks~="veteran"]) { box-shadow: 0 0 0 1px rgba(180,83,9,0.5), 0 0 36px rgba(180,83,9,0.3); }
        [data-perks~="mocha-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="mocha-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="mocha-frame"]:not([data-perks~="ring"]) { box-shadow: 0 0 0 2px #b45309, 0 0 0 4px rgba(180,83,9,0.25); }
        .mocha-username.mocha-username { color: #b45309 !important; -webkit-text-fill-color: #b45309 !important; font-weight: 800 !important; }
        #profile-bio[data-perks~="mocha-bio"], .preview-bio[data-perks~="mocha-bio"] { border-color: #b45309 !important; }

        /* Pearl #e5e7eb — bumped to #f3f4f6 for readability on dark bg */
        .profile-card[data-perks~="pearl-glow"]:not([data-perks~="veteran"]) { box-shadow: 0 0 0 1px rgba(229,231,235,0.5), 0 0 36px rgba(229,231,235,0.3); }
        [data-perks~="pearl-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="pearl-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="pearl-frame"]:not([data-perks~="ring"]) { box-shadow: 0 0 0 2px #e5e7eb, 0 0 0 4px rgba(229,231,235,0.25); }
        .pearl-username.pearl-username { color: #f3f4f6 !important; -webkit-text-fill-color: #f3f4f6 !important; font-weight: 800 !important; text-shadow: 0 0 6px rgba(229,231,235,0.3); }
        #profile-bio[data-perks~="pearl-bio"], .preview-bio[data-perks~="pearl-bio"] { border-color: #e5e7eb !important; }

        /* Periwinkle #818cf8 */
        .profile-card[data-perks~="periwinkle-glow"]:not([data-perks~="veteran"]) { box-shadow: 0 0 0 1px rgba(129,140,248,0.5), 0 0 36px rgba(129,140,248,0.3); }
        [data-perks~="periwinkle-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="periwinkle-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="periwinkle-frame"]:not([data-perks~="ring"]) { box-shadow: 0 0 0 2px #818cf8, 0 0 0 4px rgba(129,140,248,0.25); }
        .periwinkle-username.periwinkle-username { color: #818cf8 !important; -webkit-text-fill-color: #818cf8 !important; font-weight: 800 !important; }
        #profile-bio[data-perks~="periwinkle-bio"], .preview-bio[data-perks~="periwinkle-bio"] { border-color: #818cf8 !important; }

        /* === RARE TIER (10 sets × 4 surfaces).
           Subtle single-color glow pulse — sits between common (no
           animation) and legendary (multi-color animation). Uses a
           --rare-color CSS variable so 4 shared keyframes drive every
           set; each per-set selector sets its own R,G,B triple. */
        @keyframes rareCardPulse {
            0%, 100% { box-shadow: 0 0 0 1px rgba(var(--rare-color),0.5),  0 0 30px rgba(var(--rare-color),0.3); }
            50%      { box-shadow: 0 0 0 1px rgba(var(--rare-color),0.65), 0 0 45px rgba(var(--rare-color),0.5); }
        }
        @keyframes rareFramePulse {
            0%, 100% { box-shadow: 0 0 0 2px rgb(var(--rare-color)), 0 0 8px  rgba(var(--rare-color),0.4); }
            50%      { box-shadow: 0 0 0 2px rgb(var(--rare-color)), 0 0 16px rgba(var(--rare-color),0.7); }
        }
        @keyframes rareNamePulse {
            0%, 100% { text-shadow: 0 0 6px  rgba(var(--rare-color),0.4); }
            50%      { text-shadow: 0 0 14px rgba(var(--rare-color),0.7); }
        }
        @keyframes rareBioPulse {
            0%, 100% { box-shadow: 0 0 8px  rgba(var(--rare-color),0.4); }
            50%      { box-shadow: 0 0 16px rgba(var(--rare-color),0.7); }
        }

        /* Ruby #e11d48 (225,29,72) */
        .profile-card[data-perks~="ruby-glow"]:not([data-perks~="veteran"]) { --rare-color: 225,29,72; animation: rareCardPulse 3s ease-in-out infinite; }
        [data-perks~="ruby-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="ruby-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="ruby-frame"]:not([data-perks~="ring"]) { --rare-color: 225,29,72; animation: rareFramePulse 3s ease-in-out infinite; }
        .ruby-username.ruby-username { --rare-color: 225,29,72; color: rgb(225,29,72) !important; -webkit-text-fill-color: rgb(225,29,72) !important; font-weight: 800 !important; animation: rareNamePulse 3s ease-in-out infinite !important; }
        #profile-bio[data-perks~="ruby-bio"], .preview-bio[data-perks~="ruby-bio"] { --rare-color: 225,29,72; border-color: rgb(225,29,72) !important; animation: rareBioPulse 3s ease-in-out infinite; }

        /* Sapphire #1d4ed8 (29,78,216) */
        .profile-card[data-perks~="sapphire-glow"]:not([data-perks~="veteran"]) { --rare-color: 29,78,216; animation: rareCardPulse 3.2s ease-in-out infinite; }
        [data-perks~="sapphire-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="sapphire-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="sapphire-frame"]:not([data-perks~="ring"]) { --rare-color: 29,78,216; animation: rareFramePulse 3.2s ease-in-out infinite; }
        .sapphire-username.sapphire-username { --rare-color: 29,78,216; color: rgb(29,78,216) !important; -webkit-text-fill-color: rgb(29,78,216) !important; font-weight: 800 !important; animation: rareNamePulse 3.2s ease-in-out infinite !important; }
        #profile-bio[data-perks~="sapphire-bio"], .preview-bio[data-perks~="sapphire-bio"] { --rare-color: 29,78,216; border-color: rgb(29,78,216) !important; animation: rareBioPulse 3.2s ease-in-out infinite; }

        /* Emerald #059669 (5,150,105) */
        .profile-card[data-perks~="emerald-glow"]:not([data-perks~="veteran"]) { --rare-color: 5,150,105; animation: rareCardPulse 3s ease-in-out infinite; }
        [data-perks~="emerald-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="emerald-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="emerald-frame"]:not([data-perks~="ring"]) { --rare-color: 5,150,105; animation: rareFramePulse 3s ease-in-out infinite; }
        .emerald-username.emerald-username { --rare-color: 5,150,105; color: rgb(5,150,105) !important; -webkit-text-fill-color: rgb(5,150,105) !important; font-weight: 800 !important; animation: rareNamePulse 3s ease-in-out infinite !important; }
        #profile-bio[data-perks~="emerald-bio"], .preview-bio[data-perks~="emerald-bio"] { --rare-color: 5,150,105; border-color: rgb(5,150,105) !important; animation: rareBioPulse 3s ease-in-out infinite; }

        /* Amethyst #7e22ce (126,34,206) */
        .profile-card[data-perks~="amethyst-glow"]:not([data-perks~="veteran"]) { --rare-color: 126,34,206; animation: rareCardPulse 3s ease-in-out infinite; }
        [data-perks~="amethyst-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="amethyst-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="amethyst-frame"]:not([data-perks~="ring"]) { --rare-color: 126,34,206; animation: rareFramePulse 3s ease-in-out infinite; }
        .amethyst-username.amethyst-username { --rare-color: 126,34,206; color: rgb(126,34,206) !important; -webkit-text-fill-color: rgb(126,34,206) !important; font-weight: 800 !important; animation: rareNamePulse 3s ease-in-out infinite !important; }
        #profile-bio[data-perks~="amethyst-bio"], .preview-bio[data-perks~="amethyst-bio"] { --rare-color: 126,34,206; border-color: rgb(126,34,206) !important; animation: rareBioPulse 3s ease-in-out infinite; }

        /* Onyx — color #6b7280 (107,114,128) bumped from #4b5563 for
           visibility on the dark UI. Keeps the moody/dark feel but
           reads clearly. */
        .profile-card[data-perks~="onyx-glow"]:not([data-perks~="veteran"]) { --rare-color: 107,114,128; animation: rareCardPulse 3.5s ease-in-out infinite; }
        [data-perks~="onyx-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="onyx-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="onyx-frame"]:not([data-perks~="ring"]) { --rare-color: 107,114,128; animation: rareFramePulse 3.5s ease-in-out infinite; }
        .onyx-username.onyx-username { --rare-color: 107,114,128; color: rgb(107,114,128) !important; -webkit-text-fill-color: rgb(107,114,128) !important; font-weight: 800 !important; animation: rareNamePulse 3.5s ease-in-out infinite !important; }
        #profile-bio[data-perks~="onyx-bio"], .preview-bio[data-perks~="onyx-bio"] { --rare-color: 107,114,128; border-color: rgb(107,114,128) !important; animation: rareBioPulse 3.5s ease-in-out infinite; }

        /* Garnet #9f1239 (159,18,57) */
        .profile-card[data-perks~="garnet-glow"]:not([data-perks~="veteran"]) { --rare-color: 159,18,57; animation: rareCardPulse 3s ease-in-out infinite; }
        [data-perks~="garnet-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="garnet-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="garnet-frame"]:not([data-perks~="ring"]) { --rare-color: 159,18,57; animation: rareFramePulse 3s ease-in-out infinite; }
        .garnet-username.garnet-username { --rare-color: 159,18,57; color: rgb(159,18,57) !important; -webkit-text-fill-color: rgb(159,18,57) !important; font-weight: 800 !important; animation: rareNamePulse 3s ease-in-out infinite !important; }
        #profile-bio[data-perks~="garnet-bio"], .preview-bio[data-perks~="garnet-bio"] { --rare-color: 159,18,57; border-color: rgb(159,18,57) !important; animation: rareBioPulse 3s ease-in-out infinite; }

        /* Jade #0d9488 (13,148,136) */
        .profile-card[data-perks~="jade-glow"]:not([data-perks~="veteran"]) { --rare-color: 13,148,136; animation: rareCardPulse 3s ease-in-out infinite; }
        [data-perks~="jade-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="jade-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="jade-frame"]:not([data-perks~="ring"]) { --rare-color: 13,148,136; animation: rareFramePulse 3s ease-in-out infinite; }
        .jade-username.jade-username { --rare-color: 13,148,136; color: rgb(13,148,136) !important; -webkit-text-fill-color: rgb(13,148,136) !important; font-weight: 800 !important; animation: rareNamePulse 3s ease-in-out infinite !important; }
        #profile-bio[data-perks~="jade-bio"], .preview-bio[data-perks~="jade-bio"] { --rare-color: 13,148,136; border-color: rgb(13,148,136) !important; animation: rareBioPulse 3s ease-in-out infinite; }

        /* Topaz #d97706 (217,119,6) */
        .profile-card[data-perks~="topaz-glow"]:not([data-perks~="veteran"]) { --rare-color: 217,119,6; animation: rareCardPulse 3s ease-in-out infinite; }
        [data-perks~="topaz-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="topaz-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="topaz-frame"]:not([data-perks~="ring"]) { --rare-color: 217,119,6; animation: rareFramePulse 3s ease-in-out infinite; }
        .topaz-username.topaz-username { --rare-color: 217,119,6; color: rgb(217,119,6) !important; -webkit-text-fill-color: rgb(217,119,6) !important; font-weight: 800 !important; animation: rareNamePulse 3s ease-in-out infinite !important; }
        #profile-bio[data-perks~="topaz-bio"], .preview-bio[data-perks~="topaz-bio"] { --rare-color: 217,119,6; border-color: rgb(217,119,6) !important; animation: rareBioPulse 3s ease-in-out infinite; }

        /* Magenta #d946ef (217,70,239) */
        .profile-card[data-perks~="magenta-glow"]:not([data-perks~="veteran"]) { --rare-color: 217,70,239; animation: rareCardPulse 2.8s ease-in-out infinite; }
        [data-perks~="magenta-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="magenta-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="magenta-frame"]:not([data-perks~="ring"]) { --rare-color: 217,70,239; animation: rareFramePulse 2.8s ease-in-out infinite; }
        .magenta-username.magenta-username { --rare-color: 217,70,239; color: rgb(217,70,239) !important; -webkit-text-fill-color: rgb(217,70,239) !important; font-weight: 800 !important; animation: rareNamePulse 2.8s ease-in-out infinite !important; }
        #profile-bio[data-perks~="magenta-bio"], .preview-bio[data-perks~="magenta-bio"] { --rare-color: 217,70,239; border-color: rgb(217,70,239) !important; animation: rareBioPulse 2.8s ease-in-out infinite; }

        /* Cobalt — color #2563eb (37,99,235) bumped from #1e3a8a for
           visibility on the dark UI. */
        .profile-card[data-perks~="cobalt-glow"]:not([data-perks~="veteran"]) { --rare-color: 37,99,235; animation: rareCardPulse 3.5s ease-in-out infinite; }
        [data-perks~="cobalt-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="cobalt-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="cobalt-frame"]:not([data-perks~="ring"]) { --rare-color: 37,99,235; animation: rareFramePulse 3.5s ease-in-out infinite; }
        .cobalt-username.cobalt-username { --rare-color: 37,99,235; color: rgb(37,99,235) !important; -webkit-text-fill-color: rgb(37,99,235) !important; font-weight: 800 !important; animation: rareNamePulse 3.5s ease-in-out infinite !important; }
        #profile-bio[data-perks~="cobalt-bio"], .preview-bio[data-perks~="cobalt-bio"] { --rare-color: 37,99,235; border-color: rgb(37,99,235) !important; animation: rareBioPulse 3.5s ease-in-out infinite; }

        /* === ULTRA TIER — 10 NEW PREMIUM SETS ===
           More elaborate effects than the original ultras: corona
           rings, sparkle bursts, spinning vortex, foam crashes,
           ghostly fades. */

        /* === ECLIPSE — black core + bright corona ring (5s majestic) === */
        .profile-card[data-perks~="eclipse-glow"]:not([data-perks~="veteran"]) { animation: eclipseCard 5s ease-in-out infinite; }
        @keyframes eclipseCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(15,23,42,0.95), 0 0 35px rgba(251,191,36,0.45),  0 0 95px rgba(255,255,255,0.18); }
            50%      { box-shadow: 0 0 0 1px rgba(15,23,42,0.95), 0 0 60px rgba(255,255,255,0.65), 0 0 130px rgba(251,191,36,0.4); }
        }
        [data-perks~="eclipse-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="eclipse-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="eclipse-frame"]:not([data-perks~="ring"]) { animation: eclipseFrame 5s ease-in-out infinite; }
        @keyframes eclipseFrame {
            0%, 100% { box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px rgba(251,191,36,0.6),  0 0 22px rgba(255,255,255,0.25); }
            50%      { box-shadow: 0 0 0 2px #0f172a, 0 0 0 5px rgba(255,255,255,0.85), 0 0 32px rgba(251,191,36,0.45); }
        }
        .eclipse-username.eclipse-username {
            color: #f1f5f9 !important; -webkit-text-fill-color: #f1f5f9 !important; font-weight: 800 !important;
            animation: eclipseName 5s ease-in-out infinite !important;
        }
        @keyframes eclipseName {
            0%, 100% { text-shadow: 0 0 8px rgba(251,191,36,0.6),  0 0 16px rgba(15,23,42,0.95); }
            50%      { text-shadow: 0 0 16px rgba(255,255,255,0.85), 0 0 28px rgba(251,191,36,0.55); }
        }
        #profile-bio[data-perks~="eclipse-bio"], .preview-bio[data-perks~="eclipse-bio"] {
            border-color: #0f172a !important; animation: eclipseBio 5s ease-in-out infinite;
        }
        @keyframes eclipseBio {
            0%, 100% { box-shadow: 0 0 0 1px rgba(251,191,36,0.5),  0 0 18px rgba(251,191,36,0.4),  0 0 30px rgba(255,255,255,0.18); }
            50%      { box-shadow: 0 0 0 1px rgba(255,255,255,0.7), 0 0 26px rgba(255,255,255,0.6), 0 0 38px rgba(251,191,36,0.45); }
        }

        /* === PRISM — 5-stop geometric color snap (3.5s) === */
        .profile-card[data-perks~="prism-glow"]:not([data-perks~="veteran"]) { animation: prismCard 3.5s linear infinite; }
        @keyframes prismCard {
            0%   { box-shadow: 0 0 0 1px rgba(34,211,238,0.7),  0 0 55px rgba(34,211,238,0.5); }
            20%  { box-shadow: 0 0 0 1px rgba(236,72,153,0.7),  0 0 55px rgba(236,72,153,0.5); }
            40%  { box-shadow: 0 0 0 1px rgba(250,204,21,0.7),  0 0 55px rgba(250,204,21,0.5); }
            60%  { box-shadow: 0 0 0 1px rgba(34,197,94,0.7),   0 0 55px rgba(34,197,94,0.5); }
            80%  { box-shadow: 0 0 0 1px rgba(168,85,247,0.7),  0 0 55px rgba(168,85,247,0.5); }
            100% { box-shadow: 0 0 0 1px rgba(34,211,238,0.7),  0 0 55px rgba(34,211,238,0.5); }
        }
        [data-perks~="prism-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="prism-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="prism-frame"]:not([data-perks~="ring"]) { animation: prismFrame 3.5s linear infinite; }
        @keyframes prismFrame {
            0%   { box-shadow: 0 0 0 2px #22d3ee, 0 0 14px rgba(34,211,238,0.6); }
            20%  { box-shadow: 0 0 0 2px #ec4899, 0 0 14px rgba(236,72,153,0.6); }
            40%  { box-shadow: 0 0 0 2px #facc15, 0 0 14px rgba(250,204,21,0.6); }
            60%  { box-shadow: 0 0 0 2px #22c55e, 0 0 14px rgba(34,197,94,0.6); }
            80%  { box-shadow: 0 0 0 2px #a855f7, 0 0 14px rgba(168,85,247,0.6); }
            100% { box-shadow: 0 0 0 2px #22d3ee, 0 0 14px rgba(34,211,238,0.6); }
        }
        .prism-username.prism-username {
            background-image: linear-gradient(90deg, #22d3ee, #ec4899, #facc15, #22c55e, #a855f7, #22d3ee) !important;
            background-size: 300% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: prismName 3.5s linear infinite !important;
            text-shadow: 0 0 10px rgba(168,85,247,0.4);
        }
        @keyframes prismName {
            0%   { background-position: 0% 50%; }
            100% { background-position: 300% 50%; }
        }
        #profile-bio[data-perks~="prism-bio"], .preview-bio[data-perks~="prism-bio"] {
            border-color: #22d3ee !important; animation: prismBio 3.5s linear infinite;
        }
        @keyframes prismBio {
            0%   { border-color: #22d3ee; box-shadow: 0 0 14px rgba(34,211,238,0.6); }
            20%  { border-color: #ec4899; box-shadow: 0 0 14px rgba(236,72,153,0.6); }
            40%  { border-color: #facc15; box-shadow: 0 0 14px rgba(250,204,21,0.6); }
            60%  { border-color: #22c55e; box-shadow: 0 0 14px rgba(34,197,94,0.6); }
            80%  { border-color: #a855f7; box-shadow: 0 0 14px rgba(168,85,247,0.6); }
            100% { border-color: #22d3ee; box-shadow: 0 0 14px rgba(34,211,238,0.6); }
        }

        /* === DIAMOND — brilliant white with sparkle bursts (2.5s) === */
        .profile-card[data-perks~="diamond-glow"]:not([data-perks~="veteran"]) { animation: diamondCard 2.5s ease-in-out infinite; }
        @keyframes diamondCard {
            0%   { box-shadow: 0 0 0 1px rgba(255,255,255,0.7),   0 0 30px rgba(255,255,255,0.4),  0 0 60px rgba(186,230,253,0.2); }
            8%   { box-shadow: 0 0 0 1px rgba(255,255,255,0.95),  0 0 50px rgba(255,255,255,0.85), 0 0 90px rgba(255,255,255,0.5); }
            14%  { box-shadow: 0 0 0 1px rgba(255,255,255,0.7),   0 0 30px rgba(255,255,255,0.4),  0 0 60px rgba(186,230,253,0.2); }
            56%  { box-shadow: 0 0 0 1px rgba(255,255,255,0.95),  0 0 50px rgba(255,255,255,0.85), 0 0 90px rgba(255,255,255,0.5); }
            62%  { box-shadow: 0 0 0 1px rgba(255,255,255,0.7),   0 0 30px rgba(255,255,255,0.4),  0 0 60px rgba(186,230,253,0.2); }
            100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.7),   0 0 30px rgba(255,255,255,0.4),  0 0 60px rgba(186,230,253,0.2); }
        }
        [data-perks~="diamond-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="diamond-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="diamond-frame"]:not([data-perks~="ring"]) { animation: diamondFrame 2.5s ease-in-out infinite; }
        @keyframes diamondFrame {
            0%   { box-shadow: 0 0 0 2px #ffffff, 0 0 12px rgba(255,255,255,0.55); }
            8%   { box-shadow: 0 0 0 2px #ffffff, 0 0 24px rgba(255,255,255,0.95); }
            14%  { box-shadow: 0 0 0 2px #ffffff, 0 0 12px rgba(255,255,255,0.55); }
            56%  { box-shadow: 0 0 0 2px #ffffff, 0 0 24px rgba(255,255,255,0.95); }
            62%  { box-shadow: 0 0 0 2px #ffffff, 0 0 12px rgba(255,255,255,0.55); }
            100% { box-shadow: 0 0 0 2px #ffffff, 0 0 12px rgba(255,255,255,0.55); }
        }
        .diamond-username.diamond-username {
            background-image: linear-gradient(90deg, #ffffff, #e0f2fe, #ffffff, #e0f2fe, #ffffff) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: diamondName 2.5s ease-in-out infinite !important;
        }
        @keyframes diamondName {
            0%   { background-position: 0% 50%;   text-shadow: 0 0 6px rgba(255,255,255,0.4); }
            8%   { background-position: 30% 50%;  text-shadow: 0 0 18px rgba(255,255,255,0.95); }
            14%  { background-position: 35% 50%;  text-shadow: 0 0 6px rgba(255,255,255,0.4); }
            56%  { background-position: 100% 50%; text-shadow: 0 0 18px rgba(255,255,255,0.95); }
            62%  { background-position: 105% 50%; text-shadow: 0 0 6px rgba(255,255,255,0.4); }
            100% { background-position: 200% 50%; text-shadow: 0 0 6px rgba(255,255,255,0.4); }
        }
        #profile-bio[data-perks~="diamond-bio"], .preview-bio[data-perks~="diamond-bio"] {
            border-color: #ffffff !important; animation: diamondBio 2.5s ease-in-out infinite;
        }
        @keyframes diamondBio {
            0%   { box-shadow: 0 0 12px rgba(255,255,255,0.5); }
            8%   { box-shadow: 0 0 26px rgba(255,255,255,0.95); }
            14%  { box-shadow: 0 0 12px rgba(255,255,255,0.5); }
            56%  { box-shadow: 0 0 26px rgba(255,255,255,0.95); }
            62%  { box-shadow: 0 0 12px rgba(255,255,255,0.5); }
            100% { box-shadow: 0 0 12px rgba(255,255,255,0.5); }
        }

        /* === STARDUST — slow twinkle with irregular gold flashes (6s) === */
        .profile-card[data-perks~="stardust-glow"]:not([data-perks~="veteran"]) { animation: stardustCard 6s ease-in-out infinite; }
        @keyframes stardustCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(30,27,75,0.7),    0 0 40px rgba(251,191,36,0.3); }
            12%      { box-shadow: 0 0 0 1px rgba(251,191,36,0.85), 0 0 70px rgba(251,191,36,0.7); }
            18%      { box-shadow: 0 0 0 1px rgba(30,27,75,0.7),    0 0 40px rgba(251,191,36,0.3); }
            45%      { box-shadow: 0 0 0 1px rgba(30,27,75,0.7),    0 0 50px rgba(255,255,255,0.5); }
            72%      { box-shadow: 0 0 0 1px rgba(251,191,36,0.85), 0 0 70px rgba(251,191,36,0.7); }
            78%      { box-shadow: 0 0 0 1px rgba(30,27,75,0.7),    0 0 40px rgba(251,191,36,0.3); }
        }
        [data-perks~="stardust-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="stardust-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="stardust-frame"]:not([data-perks~="ring"]) { animation: stardustFrame 6s ease-in-out infinite; }
        @keyframes stardustFrame {
            0%, 100% { box-shadow: 0 0 0 2px #1e1b4b, 0 0 12px rgba(251,191,36,0.4); }
            12%      { box-shadow: 0 0 0 2px #fbbf24, 0 0 22px rgba(251,191,36,0.85); }
            18%      { box-shadow: 0 0 0 2px #1e1b4b, 0 0 12px rgba(251,191,36,0.4); }
            45%      { box-shadow: 0 0 0 2px #ffffff, 0 0 18px rgba(255,255,255,0.6); }
            72%      { box-shadow: 0 0 0 2px #fbbf24, 0 0 22px rgba(251,191,36,0.85); }
            78%      { box-shadow: 0 0 0 2px #1e1b4b, 0 0 12px rgba(251,191,36,0.4); }
        }
        .stardust-username.stardust-username {
            background-image: linear-gradient(90deg, #1e1b4b, #fbbf24, #ffffff, #fbbf24, #1e1b4b) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: stardustName 6s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(251,191,36,0.4);
        }
        @keyframes stardustName {
            0%, 100% { background-position: 0% 50%; }
            50%      { background-position: 100% 50%; }
        }
        #profile-bio[data-perks~="stardust-bio"], .preview-bio[data-perks~="stardust-bio"] {
            border-color: #fbbf24 !important; animation: stardustBio 6s ease-in-out infinite;
        }
        @keyframes stardustBio {
            0%, 100% { border-color: #fbbf24; box-shadow: 0 0 14px rgba(251,191,36,0.5); }
            12%      { border-color: #ffffff; box-shadow: 0 0 24px rgba(255,255,255,0.8); }
            18%      { border-color: #fbbf24; box-shadow: 0 0 14px rgba(251,191,36,0.5); }
            72%      { border-color: #ffffff; box-shadow: 0 0 24px rgba(255,255,255,0.8); }
            78%      { border-color: #fbbf24; box-shadow: 0 0 14px rgba(251,191,36,0.5); }
        }

        /* === INFERNO — DARK fire (black + crimson + ember) (3s) === */
        .profile-card[data-perks~="inferno-glow"]:not([data-perks~="veteran"]) { animation: infernoCard 3s ease-in-out infinite; }
        @keyframes infernoCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(127,29,29,0.85), 0 0 50px rgba(220,38,38,0.5),  0 0 90px rgba(0,0,0,0.6); }
            33%      { box-shadow: 0 0 0 1px rgba(220,38,38,0.85), 0 0 55px rgba(249,115,22,0.5), 0 0 95px rgba(127,29,29,0.5); }
            66%      { box-shadow: 0 0 0 1px rgba(249,115,22,0.7), 0 0 50px rgba(220,38,38,0.55), 0 0 90px rgba(0,0,0,0.6); }
        }
        [data-perks~="inferno-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="inferno-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="inferno-frame"]:not([data-perks~="ring"]) { animation: infernoFrame 3s ease-in-out infinite; }
        @keyframes infernoFrame {
            0%, 100% { box-shadow: 0 0 0 2px #7f1d1d, 0 0 14px rgba(220,38,38,0.6),  0 0 24px rgba(0,0,0,0.5); }
            33%      { box-shadow: 0 0 0 2px #dc2626, 0 0 16px rgba(249,115,22,0.6), 0 0 26px rgba(127,29,29,0.5); }
            66%      { box-shadow: 0 0 0 2px #f97316, 0 0 16px rgba(220,38,38,0.6),  0 0 24px rgba(0,0,0,0.5); }
        }
        .inferno-username.inferno-username {
            background-image: linear-gradient(90deg, #7f1d1d, #dc2626, #f97316, #dc2626, #7f1d1d) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: infernoName 3s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(127,29,29,0.6), 0 0 18px rgba(0,0,0,0.5);
        }
        @keyframes infernoName {
            0%, 100% { background-position: 0% 50%; }
            50%      { background-position: 100% 50%; }
        }
        #profile-bio[data-perks~="inferno-bio"], .preview-bio[data-perks~="inferno-bio"] {
            border-color: #7f1d1d !important; animation: infernoBio 3s ease-in-out infinite;
        }
        @keyframes infernoBio {
            0%, 100% { border-color: #7f1d1d; box-shadow: 0 0 14px rgba(220,38,38,0.55), 0 0 26px rgba(0,0,0,0.55); }
            50%      { border-color: #f97316; box-shadow: 0 0 18px rgba(249,115,22,0.65), 0 0 30px rgba(127,29,29,0.5); }
        }

        /* === MERCURY — liquid chrome metal (4s) === */
        .profile-card[data-perks~="mercury-glow"]:not([data-perks~="veteran"]) { animation: mercuryCard 4s ease-in-out infinite; }
        @keyframes mercuryCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(241,245,249,0.85), 0 0 40px rgba(203,213,225,0.5),  0 0 90px rgba(100,116,139,0.3); }
            50%      { box-shadow: 0 0 0 1px rgba(255,255,255,0.95), 0 0 55px rgba(255,255,255,0.65), 0 0 100px rgba(148,163,184,0.4); }
        }
        [data-perks~="mercury-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="mercury-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="mercury-frame"]:not([data-perks~="ring"]) { animation: mercuryFrame 4s ease-in-out infinite; }
        @keyframes mercuryFrame {
            0%, 100% { box-shadow: 0 0 0 2px #cbd5e1, 0 0 14px rgba(203,213,225,0.65), 0 0 24px rgba(100,116,139,0.3); }
            50%      { box-shadow: 0 0 0 2px #ffffff, 0 0 22px rgba(255,255,255,0.85), 0 0 32px rgba(148,163,184,0.4); }
        }
        .mercury-username.mercury-username {
            background-image: linear-gradient(90deg, #94a3b8, #ffffff, #cbd5e1, #ffffff, #94a3b8) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: mercuryName 4s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(255,255,255,0.5);
        }
        @keyframes mercuryName {
            0%, 100% { background-position: 0% 50%; }
            50%      { background-position: 100% 50%; }
        }
        #profile-bio[data-perks~="mercury-bio"], .preview-bio[data-perks~="mercury-bio"] {
            border-color: #cbd5e1 !important; animation: mercuryBio 4s ease-in-out infinite;
        }
        @keyframes mercuryBio {
            0%, 100% { border-color: #cbd5e1; box-shadow: 0 0 14px rgba(203,213,225,0.55), 0 0 26px rgba(100,116,139,0.3); }
            50%      { border-color: #ffffff; box-shadow: 0 0 22px rgba(255,255,255,0.8),  0 0 32px rgba(148,163,184,0.4); }
        }

        /* === VORTEX — spinning rainbow rotation (4.5s linear) === */
        .profile-card[data-perks~="vortex-glow"]:not([data-perks~="veteran"]) { animation: vortexCard 4.5s linear infinite; }
        @keyframes vortexCard {
            0%   { box-shadow: 0 0 0 1px rgba(239,68,68,0.7),  0 0 50px rgba(239,68,68,0.5); }
            16%  { box-shadow: 0 0 0 1px rgba(251,191,36,0.7), 0 0 50px rgba(251,191,36,0.5); }
            32%  { box-shadow: 0 0 0 1px rgba(34,197,94,0.7),  0 0 50px rgba(34,197,94,0.5); }
            48%  { box-shadow: 0 0 0 1px rgba(34,211,238,0.7), 0 0 50px rgba(34,211,238,0.5); }
            64%  { box-shadow: 0 0 0 1px rgba(99,102,241,0.7), 0 0 50px rgba(99,102,241,0.5); }
            80%  { box-shadow: 0 0 0 1px rgba(236,72,153,0.7), 0 0 50px rgba(236,72,153,0.5); }
            100% { box-shadow: 0 0 0 1px rgba(239,68,68,0.7),  0 0 50px rgba(239,68,68,0.5); }
        }
        [data-perks~="vortex-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="vortex-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="vortex-frame"]:not([data-perks~="ring"]) { animation: vortexFrame 4.5s linear infinite; }
        @keyframes vortexFrame {
            0%   { box-shadow: 0 0 0 2px #ef4444, 0 0 14px rgba(239,68,68,0.6); }
            16%  { box-shadow: 0 0 0 2px #fbbf24, 0 0 14px rgba(251,191,36,0.6); }
            32%  { box-shadow: 0 0 0 2px #22c55e, 0 0 14px rgba(34,197,94,0.6); }
            48%  { box-shadow: 0 0 0 2px #22d3ee, 0 0 14px rgba(34,211,238,0.6); }
            64%  { box-shadow: 0 0 0 2px #6366f1, 0 0 14px rgba(99,102,241,0.6); }
            80%  { box-shadow: 0 0 0 2px #ec4899, 0 0 14px rgba(236,72,153,0.6); }
            100% { box-shadow: 0 0 0 2px #ef4444, 0 0 14px rgba(239,68,68,0.6); }
        }
        .vortex-username.vortex-username {
            background-image: linear-gradient(90deg, #ef4444, #fbbf24, #22c55e, #22d3ee, #6366f1, #ec4899, #ef4444) !important;
            background-size: 400% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: vortexName 4.5s linear infinite !important;
        }
        @keyframes vortexName {
            0%   { background-position: 0% 50%; }
            100% { background-position: 400% 50%; }
        }
        #profile-bio[data-perks~="vortex-bio"], .preview-bio[data-perks~="vortex-bio"] {
            border-color: #ef4444 !important; animation: vortexBio 4.5s linear infinite;
        }
        @keyframes vortexBio {
            0%   { border-color: #ef4444; box-shadow: 0 0 14px rgba(239,68,68,0.6); }
            16%  { border-color: #fbbf24; box-shadow: 0 0 14px rgba(251,191,36,0.6); }
            32%  { border-color: #22c55e; box-shadow: 0 0 14px rgba(34,197,94,0.6); }
            48%  { border-color: #22d3ee; box-shadow: 0 0 14px rgba(34,211,238,0.6); }
            64%  { border-color: #6366f1; box-shadow: 0 0 14px rgba(99,102,241,0.6); }
            80%  { border-color: #ec4899; box-shadow: 0 0 14px rgba(236,72,153,0.6); }
            100% { border-color: #ef4444; box-shadow: 0 0 14px rgba(239,68,68,0.6); }
        }

        /* === SOLAR — golden corona that EXPANDS and contracts (3.5s) === */
        .profile-card[data-perks~="solar-glow"]:not([data-perks~="veteran"]) { animation: solarCard 3.5s ease-in-out infinite; }
        @keyframes solarCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(245,158,11,0.85), 0 0 35px rgba(245,158,11,0.5),  0 0 70px rgba(251,191,36,0.3); }
            50%      { box-shadow: 0 0 0 1px rgba(251,191,36,0.95), 0 0 80px rgba(251,191,36,0.75), 0 0 150px rgba(254,240,138,0.4); }
        }
        [data-perks~="solar-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="solar-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="solar-frame"]:not([data-perks~="ring"]) { animation: solarFrame 3.5s ease-in-out infinite; }
        @keyframes solarFrame {
            0%, 100% { box-shadow: 0 0 0 2px #f59e0b, 0 0 14px rgba(245,158,11,0.6), 0 0 22px rgba(251,191,36,0.4); }
            50%      { box-shadow: 0 0 0 2px #fbbf24, 0 0 28px rgba(251,191,36,0.85), 0 0 42px rgba(254,240,138,0.5); }
        }
        .solar-username.solar-username {
            background-image: linear-gradient(90deg, #f59e0b, #fbbf24, #fde68a, #fbbf24, #f59e0b) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: solarName 3.5s ease-in-out infinite !important;
        }
        @keyframes solarName {
            0%, 100% { background-position: 0% 50%;   text-shadow: 0 0 8px rgba(245,158,11,0.5); }
            50%      { background-position: 100% 50%; text-shadow: 0 0 22px rgba(251,191,36,0.85); }
        }
        #profile-bio[data-perks~="solar-bio"], .preview-bio[data-perks~="solar-bio"] {
            border-color: #f59e0b !important; animation: solarBio 3.5s ease-in-out infinite;
        }
        @keyframes solarBio {
            0%, 100% { border-color: #f59e0b; box-shadow: 0 0 14px rgba(245,158,11,0.55), 0 0 26px rgba(251,191,36,0.3); }
            50%      { border-color: #fbbf24; box-shadow: 0 0 28px rgba(251,191,36,0.85), 0 0 44px rgba(254,240,138,0.5); }
        }

        /* === TIDAL — wave crash with white-foam flashes (4s) === */
        .profile-card[data-perks~="tidal-glow"]:not([data-perks~="veteran"]) { animation: tidalCard 4s ease-in-out infinite; }
        @keyframes tidalCard {
            0%   { box-shadow: 0 0 0 1px rgba(8,145,178,0.7),   0 0 50px rgba(8,145,178,0.5); }
            22%  { box-shadow: 0 0 0 1px rgba(255,255,255,0.95), 0 0 80px rgba(255,255,255,0.7); }
            28%  { box-shadow: 0 0 0 1px rgba(8,145,178,0.7),   0 0 50px rgba(8,145,178,0.5); }
            72%  { box-shadow: 0 0 0 1px rgba(255,255,255,0.95), 0 0 80px rgba(255,255,255,0.7); }
            78%  { box-shadow: 0 0 0 1px rgba(8,145,178,0.7),   0 0 50px rgba(8,145,178,0.5); }
            100% { box-shadow: 0 0 0 1px rgba(8,145,178,0.7),   0 0 50px rgba(8,145,178,0.5); }
        }
        [data-perks~="tidal-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="tidal-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="tidal-frame"]:not([data-perks~="ring"]) { animation: tidalFrame 4s ease-in-out infinite; }
        @keyframes tidalFrame {
            0%   { box-shadow: 0 0 0 2px #0891b2, 0 0 14px rgba(8,145,178,0.6); }
            22%  { box-shadow: 0 0 0 2px #ffffff, 0 0 24px rgba(255,255,255,0.9); }
            28%  { box-shadow: 0 0 0 2px #0891b2, 0 0 14px rgba(8,145,178,0.6); }
            72%  { box-shadow: 0 0 0 2px #ffffff, 0 0 24px rgba(255,255,255,0.9); }
            78%  { box-shadow: 0 0 0 2px #0891b2, 0 0 14px rgba(8,145,178,0.6); }
            100% { box-shadow: 0 0 0 2px #0891b2, 0 0 14px rgba(8,145,178,0.6); }
        }
        .tidal-username.tidal-username {
            background-image: linear-gradient(90deg, #0891b2, #ffffff, #06b6d4, #ffffff, #0891b2) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: tidalName 4s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(6,182,212,0.45);
        }
        @keyframes tidalName {
            0%, 100% { background-position: 0% 50%; }
            50%      { background-position: 100% 50%; }
        }
        #profile-bio[data-perks~="tidal-bio"], .preview-bio[data-perks~="tidal-bio"] {
            border-color: #0891b2 !important; animation: tidalBio 4s ease-in-out infinite;
        }
        @keyframes tidalBio {
            0%   { border-color: #0891b2; box-shadow: 0 0 14px rgba(8,145,178,0.6); }
            22%  { border-color: #ffffff; box-shadow: 0 0 26px rgba(255,255,255,0.85); }
            28%  { border-color: #0891b2; box-shadow: 0 0 14px rgba(8,145,178,0.6); }
            72%  { border-color: #ffffff; box-shadow: 0 0 26px rgba(255,255,255,0.85); }
            78%  { border-color: #0891b2; box-shadow: 0 0 14px rgba(8,145,178,0.6); }
            100% { border-color: #0891b2; box-shadow: 0 0 14px rgba(8,145,178,0.6); }
        }

        /* === PHANTOM — ethereal ghost fade (5s, opacity-driven) === */
        .profile-card[data-perks~="phantom-glow"]:not([data-perks~="veteran"]) { animation: phantomCard 5s ease-in-out infinite; }
        @keyframes phantomCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(216,180,254,0.7),  0 0 55px rgba(216,180,254,0.5),  0 0 100px rgba(255,255,255,0.2); }
            50%      { box-shadow: 0 0 0 1px rgba(216,180,254,0.15), 0 0 25px rgba(216,180,254,0.12), 0 0 60px  rgba(255,255,255,0.05); }
        }
        [data-perks~="phantom-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="phantom-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="phantom-frame"]:not([data-perks~="ring"]) { animation: phantomFrame 5s ease-in-out infinite; }
        @keyframes phantomFrame {
            0%, 100% { box-shadow: 0 0 0 2px rgba(216,180,254,0.85), 0 0 18px rgba(216,180,254,0.6); }
            50%      { box-shadow: 0 0 0 2px rgba(216,180,254,0.2),  0 0 8px  rgba(216,180,254,0.1); }
        }
        .phantom-username.phantom-username {
            color: #d8b4fe !important; -webkit-text-fill-color: #d8b4fe !important; font-weight: 800 !important;
            animation: phantomName 5s ease-in-out infinite !important;
        }
        @keyframes phantomName {
            0%, 100% { opacity: 1;   text-shadow: 0 0 12px rgba(216,180,254,0.6),  0 0 22px rgba(255,255,255,0.3); }
            50%      { opacity: 0.4; text-shadow: 0 0 6px  rgba(216,180,254,0.25), 0 0 12px rgba(255,255,255,0.1); }
        }
        #profile-bio[data-perks~="phantom-bio"], .preview-bio[data-perks~="phantom-bio"] {
            border-color: #d8b4fe !important; animation: phantomBio 5s ease-in-out infinite;
        }
        @keyframes phantomBio {
            0%, 100% { border-color: rgba(216,180,254,0.95); box-shadow: 0 0 18px rgba(216,180,254,0.55); }
            50%      { border-color: rgba(216,180,254,0.25); box-shadow: 0 0 6px  rgba(216,180,254,0.15); }
        }

        /* === ULTRA TIER — 10 MORE PREMIUM SETS (creative one-offs) === */

        /* === HEARTBEAT — pink-red double-pulse EKG rhythm (1.5s lub-DUB) === */
        .profile-card[data-perks~="heartbeat-glow"]:not([data-perks~="veteran"]) { animation: heartbeatCard 1.5s ease-in-out infinite; }
        @keyframes heartbeatCard {
            0%   { box-shadow: 0 0 0 1px rgba(244,63,94,0.6),  0 0 30px rgba(244,63,94,0.35); }
            8%   { box-shadow: 0 0 0 1px rgba(225,29,72,0.95), 0 0 70px rgba(225,29,72,0.85); }
            16%  { box-shadow: 0 0 0 1px rgba(244,63,94,0.6),  0 0 30px rgba(244,63,94,0.35); }
            24%  { box-shadow: 0 0 0 1px rgba(225,29,72,0.95), 0 0 70px rgba(225,29,72,0.85); }
            32%  { box-shadow: 0 0 0 1px rgba(244,63,94,0.6),  0 0 30px rgba(244,63,94,0.35); }
            100% { box-shadow: 0 0 0 1px rgba(244,63,94,0.6),  0 0 30px rgba(244,63,94,0.35); }
        }
        [data-perks~="heartbeat-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="heartbeat-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="heartbeat-frame"]:not([data-perks~="ring"]) { animation: heartbeatFrame 1.5s ease-in-out infinite; }
        @keyframes heartbeatFrame {
            0%   { box-shadow: 0 0 0 2px #f43f5e, 0 0 10px rgba(244,63,94,0.5); }
            8%   { box-shadow: 0 0 0 2px #e11d48, 0 0 22px rgba(225,29,72,0.95); }
            16%  { box-shadow: 0 0 0 2px #f43f5e, 0 0 10px rgba(244,63,94,0.5); }
            24%  { box-shadow: 0 0 0 2px #e11d48, 0 0 22px rgba(225,29,72,0.95); }
            32%  { box-shadow: 0 0 0 2px #f43f5e, 0 0 10px rgba(244,63,94,0.5); }
            100% { box-shadow: 0 0 0 2px #f43f5e, 0 0 10px rgba(244,63,94,0.5); }
        }
        .heartbeat-username.heartbeat-username {
            color: #e11d48 !important; -webkit-text-fill-color: #e11d48 !important; font-weight: 800 !important;
            animation: heartbeatName 1.5s ease-in-out infinite !important;
        }
        @keyframes heartbeatName {
            0%   { text-shadow: 0 0 6px rgba(244,63,94,0.45); }
            8%   { text-shadow: 0 0 18px rgba(225,29,72,0.95); }
            16%  { text-shadow: 0 0 6px rgba(244,63,94,0.45); }
            24%  { text-shadow: 0 0 18px rgba(225,29,72,0.95); }
            32%  { text-shadow: 0 0 6px rgba(244,63,94,0.45); }
            100% { text-shadow: 0 0 6px rgba(244,63,94,0.45); }
        }
        #profile-bio[data-perks~="heartbeat-bio"], .preview-bio[data-perks~="heartbeat-bio"] {
            border-color: #f43f5e !important; animation: heartbeatBio 1.5s ease-in-out infinite;
        }
        @keyframes heartbeatBio {
            0%   { box-shadow: 0 0 8px rgba(244,63,94,0.4); }
            8%   { box-shadow: 0 0 24px rgba(225,29,72,0.95); }
            16%  { box-shadow: 0 0 8px rgba(244,63,94,0.4); }
            24%  { box-shadow: 0 0 24px rgba(225,29,72,0.95); }
            32%  { box-shadow: 0 0 8px rgba(244,63,94,0.4); }
            100% { box-shadow: 0 0 8px rgba(244,63,94,0.4); }
        }

        /* === DISCO — rapid 8-color spotlight rotation (1.8s linear) === */
        .profile-card[data-perks~="disco-glow"]:not([data-perks~="veteran"]) { animation: discoCard 1.8s linear infinite; }
        @keyframes discoCard {
            0%    { box-shadow: 0 0 0 1px rgba(239,68,68,0.7),  0 0 50px rgba(239,68,68,0.5); }
            12.5% { box-shadow: 0 0 0 1px rgba(245,158,11,0.7), 0 0 50px rgba(245,158,11,0.5); }
            25%   { box-shadow: 0 0 0 1px rgba(250,204,21,0.7), 0 0 50px rgba(250,204,21,0.5); }
            37.5% { box-shadow: 0 0 0 1px rgba(34,197,94,0.7),  0 0 50px rgba(34,197,94,0.5); }
            50%   { box-shadow: 0 0 0 1px rgba(34,211,238,0.7), 0 0 50px rgba(34,211,238,0.5); }
            62.5% { box-shadow: 0 0 0 1px rgba(99,102,241,0.7), 0 0 50px rgba(99,102,241,0.5); }
            75%   { box-shadow: 0 0 0 1px rgba(168,85,247,0.7), 0 0 50px rgba(168,85,247,0.5); }
            87.5% { box-shadow: 0 0 0 1px rgba(236,72,153,0.7), 0 0 50px rgba(236,72,153,0.5); }
            100%  { box-shadow: 0 0 0 1px rgba(239,68,68,0.7),  0 0 50px rgba(239,68,68,0.5); }
        }
        [data-perks~="disco-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="disco-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="disco-frame"]:not([data-perks~="ring"]) { animation: discoFrame 1.8s linear infinite; }
        @keyframes discoFrame {
            0%    { box-shadow: 0 0 0 2px #ef4444, 0 0 14px rgba(239,68,68,0.6); }
            12.5% { box-shadow: 0 0 0 2px #f59e0b, 0 0 14px rgba(245,158,11,0.6); }
            25%   { box-shadow: 0 0 0 2px #facc15, 0 0 14px rgba(250,204,21,0.6); }
            37.5% { box-shadow: 0 0 0 2px #22c55e, 0 0 14px rgba(34,197,94,0.6); }
            50%   { box-shadow: 0 0 0 2px #22d3ee, 0 0 14px rgba(34,211,238,0.6); }
            62.5% { box-shadow: 0 0 0 2px #6366f1, 0 0 14px rgba(99,102,241,0.6); }
            75%   { box-shadow: 0 0 0 2px #a855f7, 0 0 14px rgba(168,85,247,0.6); }
            87.5% { box-shadow: 0 0 0 2px #ec4899, 0 0 14px rgba(236,72,153,0.6); }
            100%  { box-shadow: 0 0 0 2px #ef4444, 0 0 14px rgba(239,68,68,0.6); }
        }
        .disco-username.disco-username {
            background-image: linear-gradient(90deg, #ef4444, #f59e0b, #facc15, #22c55e, #22d3ee, #6366f1, #a855f7, #ec4899, #ef4444) !important;
            background-size: 400% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: discoName 1.8s linear infinite !important;
        }
        @keyframes discoName {
            0%   { background-position: 0% 50%; }
            100% { background-position: 400% 50%; }
        }
        #profile-bio[data-perks~="disco-bio"], .preview-bio[data-perks~="disco-bio"] {
            border-color: #ef4444 !important; animation: discoBio 1.8s linear infinite;
        }
        @keyframes discoBio {
            0%    { border-color: #ef4444; box-shadow: 0 0 14px rgba(239,68,68,0.6); }
            12.5% { border-color: #f59e0b; box-shadow: 0 0 14px rgba(245,158,11,0.6); }
            25%   { border-color: #facc15; box-shadow: 0 0 14px rgba(250,204,21,0.6); }
            37.5% { border-color: #22c55e; box-shadow: 0 0 14px rgba(34,197,94,0.6); }
            50%   { border-color: #22d3ee; box-shadow: 0 0 14px rgba(34,211,238,0.6); }
            62.5% { border-color: #6366f1; box-shadow: 0 0 14px rgba(99,102,241,0.6); }
            75%   { border-color: #a855f7; box-shadow: 0 0 14px rgba(168,85,247,0.6); }
            87.5% { border-color: #ec4899; box-shadow: 0 0 14px rgba(236,72,153,0.6); }
            100%  { border-color: #ef4444; box-shadow: 0 0 14px rgba(239,68,68,0.6); }
        }

        /* === BLACKOUT — pitch-black core with sharp white outline (3s) === */
        .profile-card[data-perks~="blackout-glow"]:not([data-perks~="veteran"]) {
            background-color: rgba(0,0,0,0.35);
            animation: blackoutCard 3s ease-in-out infinite;
        }
        @keyframes blackoutCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,0.95), 0 0 0 2px rgba(255,255,255,0.5),  0 0 30px rgba(255,255,255,0.2); }
            50%      { box-shadow: 0 0 0 1px rgba(0,0,0,0.95), 0 0 0 2px rgba(255,255,255,0.95), 0 0 50px rgba(255,255,255,0.4); }
        }
        [data-perks~="blackout-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="blackout-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="blackout-frame"]:not([data-perks~="ring"]) { animation: blackoutFrame 3s ease-in-out infinite; }
        @keyframes blackoutFrame {
            0%, 100% { box-shadow: 0 0 0 2px #000000, 0 0 0 3px rgba(255,255,255,0.5),  0 0 12px rgba(255,255,255,0.2); }
            50%      { box-shadow: 0 0 0 2px #000000, 0 0 0 3px rgba(255,255,255,0.95), 0 0 22px rgba(255,255,255,0.5); }
        }
        .blackout-username.blackout-username {
            color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-weight: 800 !important;
            animation: blackoutName 3s ease-in-out infinite !important;
        }
        @keyframes blackoutName {
            0%, 100% { text-shadow: 0 0 8px rgba(0,0,0,0.95),  0 0 16px rgba(255,255,255,0.3); }
            50%      { text-shadow: 0 0 14px rgba(0,0,0,0.95), 0 0 24px rgba(255,255,255,0.7); }
        }
        #profile-bio[data-perks~="blackout-bio"], .preview-bio[data-perks~="blackout-bio"] {
            background-color: rgba(0,0,0,0.4);
            border-color: #ffffff !important;
            animation: blackoutBio 3s ease-in-out infinite;
        }
        @keyframes blackoutBio {
            0%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,0.95), 0 0 12px rgba(255,255,255,0.3); }
            50%      { box-shadow: 0 0 0 1px rgba(0,0,0,0.95), 0 0 22px rgba(255,255,255,0.7); }
        }

        /* === COMET — bright streak racing across (3s linear) === */
        .profile-card[data-perks~="comet-glow"]:not([data-perks~="veteran"]) { animation: cometCard 3s linear infinite; }
        @keyframes cometCard {
            0%   { box-shadow: 0 0 0 1px rgba(56,189,248,0.5), 50px 0 60px -10px rgba(255,255,255,0.7), 0 0 30px rgba(56,189,248,0.4); }
            50%  { box-shadow: 0 0 0 1px rgba(56,189,248,0.5), -50px 0 60px -10px rgba(255,255,255,0.7), 0 0 30px rgba(56,189,248,0.4); }
            100% { box-shadow: 0 0 0 1px rgba(56,189,248,0.5), 50px 0 60px -10px rgba(255,255,255,0.7), 0 0 30px rgba(56,189,248,0.4); }
        }
        [data-perks~="comet-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="comet-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="comet-frame"]:not([data-perks~="ring"]) { animation: cometFrame 3s linear infinite; }
        @keyframes cometFrame {
            0%   { box-shadow: 0 0 0 2px #38bdf8, 14px 0 18px -4px rgba(255,255,255,0.85); }
            25%  { box-shadow: 0 0 0 2px #38bdf8, 0 14px 18px -4px rgba(255,255,255,0.85); }
            50%  { box-shadow: 0 0 0 2px #38bdf8, -14px 0 18px -4px rgba(255,255,255,0.85); }
            75%  { box-shadow: 0 0 0 2px #38bdf8, 0 -14px 18px -4px rgba(255,255,255,0.85); }
            100% { box-shadow: 0 0 0 2px #38bdf8, 14px 0 18px -4px rgba(255,255,255,0.85); }
        }
        .comet-username.comet-username {
            background-image: linear-gradient(90deg, #38bdf8 0%, #38bdf8 20%, #ffffff 50%, #38bdf8 80%, #38bdf8 100%) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: cometName 3s linear infinite !important;
            text-shadow: 0 0 10px rgba(255,255,255,0.5);
        }
        @keyframes cometName {
            0%   { background-position: 200% 50%; }
            100% { background-position: 0% 50%; }
        }
        #profile-bio[data-perks~="comet-bio"], .preview-bio[data-perks~="comet-bio"] {
            border-color: #38bdf8 !important; animation: cometBio 3s linear infinite;
        }
        @keyframes cometBio {
            0%   { box-shadow: 30px 0 25px -8px rgba(255,255,255,0.7), 0 0 12px rgba(56,189,248,0.5); }
            50%  { box-shadow: -30px 0 25px -8px rgba(255,255,255,0.7), 0 0 12px rgba(56,189,248,0.5); }
            100% { box-shadow: 30px 0 25px -8px rgba(255,255,255,0.7), 0 0 12px rgba(56,189,248,0.5); }
        }

        /* === GLITCH — RGB chromatic aberration / VHS feel (1.6s steps) === */
        .profile-card[data-perks~="glitch-glow"]:not([data-perks~="veteran"]) { animation: glitchCard 1.6s steps(8, end) infinite; }
        @keyframes glitchCard {
            0%   { box-shadow: 4px 0 0 rgba(239,68,68,0.6),  -4px 0 0 rgba(34,211,238,0.6),  0 0 30px rgba(168,85,247,0.4); }
            12%  { box-shadow: -4px 0 0 rgba(239,68,68,0.6),  4px 0 0 rgba(34,211,238,0.6),  0 0 30px rgba(168,85,247,0.4); }
            25%  { box-shadow: 0 4px 0 rgba(239,68,68,0.6),   0 -4px 0 rgba(34,211,238,0.6), 0 0 30px rgba(168,85,247,0.4); }
            38%  { box-shadow: 6px -2px 0 rgba(239,68,68,0.7),-6px 2px 0 rgba(34,211,238,0.7),0 0 30px rgba(168,85,247,0.4); }
            50%  { box-shadow: -6px 2px 0 rgba(239,68,68,0.7),6px -2px 0 rgba(34,211,238,0.7),0 0 30px rgba(168,85,247,0.4); }
            62%  { box-shadow: 4px 0 0 rgba(239,68,68,0.6),  -4px 0 0 rgba(34,211,238,0.6),  0 0 30px rgba(168,85,247,0.4); }
            75%  { box-shadow: 0 0 0 1px rgba(168,85,247,0.5), 0 0 40px rgba(168,85,247,0.5); }
            88%  { box-shadow: 8px 0 0 rgba(239,68,68,0.7),  -8px 0 0 rgba(34,211,238,0.7),  0 0 30px rgba(168,85,247,0.4); }
            100% { box-shadow: 4px 0 0 rgba(239,68,68,0.6),  -4px 0 0 rgba(34,211,238,0.6),  0 0 30px rgba(168,85,247,0.4); }
        }
        [data-perks~="glitch-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="glitch-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="glitch-frame"]:not([data-perks~="ring"]) { animation: glitchFrame 1.6s steps(8, end) infinite; }
        @keyframes glitchFrame {
            0%   { box-shadow: 0 0 0 2px #a855f7, 3px 0 0 rgba(239,68,68,0.6),  -3px 0 0 rgba(34,211,238,0.6); }
            25%  { box-shadow: 0 0 0 2px #a855f7, -3px 0 0 rgba(239,68,68,0.6), 3px 0 0 rgba(34,211,238,0.6); }
            50%  { box-shadow: 0 0 0 2px #a855f7, 0 3px 0 rgba(239,68,68,0.6),  0 -3px 0 rgba(34,211,238,0.6); }
            75%  { box-shadow: 0 0 0 2px #a855f7, 5px -2px 0 rgba(239,68,68,0.7),-5px 2px 0 rgba(34,211,238,0.7); }
            100% { box-shadow: 0 0 0 2px #a855f7, 3px 0 0 rgba(239,68,68,0.6),  -3px 0 0 rgba(34,211,238,0.6); }
        }
        .glitch-username.glitch-username {
            color: #a855f7 !important; -webkit-text-fill-color: #a855f7 !important; font-weight: 800 !important;
            animation: glitchName 1.6s steps(8, end) infinite !important;
        }
        @keyframes glitchName {
            0%   { text-shadow: 3px 0 0 rgba(239,68,68,0.85), -3px 0 0 rgba(34,211,238,0.85); }
            25%  { text-shadow: -3px 0 0 rgba(239,68,68,0.85), 3px 0 0 rgba(34,211,238,0.85); }
            50%  { text-shadow: 0 3px 0 rgba(239,68,68,0.85), 0 -3px 0 rgba(34,211,238,0.85); }
            75%  { text-shadow: 5px -2px 0 rgba(239,68,68,0.9), -5px 2px 0 rgba(34,211,238,0.9); }
            100% { text-shadow: 3px 0 0 rgba(239,68,68,0.85), -3px 0 0 rgba(34,211,238,0.85); }
        }
        #profile-bio[data-perks~="glitch-bio"], .preview-bio[data-perks~="glitch-bio"] {
            border-color: #a855f7 !important; animation: glitchBio 1.6s steps(8, end) infinite;
        }
        @keyframes glitchBio {
            0%   { box-shadow: 3px 0 0 rgba(239,68,68,0.6),  -3px 0 0 rgba(34,211,238,0.6); }
            25%  { box-shadow: -3px 0 0 rgba(239,68,68,0.6), 3px 0 0 rgba(34,211,238,0.6); }
            50%  { box-shadow: 0 3px 0 rgba(239,68,68,0.6),  0 -3px 0 rgba(34,211,238,0.6); }
            75%  { box-shadow: 5px -2px 0 rgba(239,68,68,0.7),-5px 2px 0 rgba(34,211,238,0.7); }
            100% { box-shadow: 3px 0 0 rgba(239,68,68,0.6),  -3px 0 0 rgba(34,211,238,0.6); }
        }

        /* === GLITCH-STYLE VARIATIONS (3 sets) ===
           Same stepped chromatic-aberration technique as Glitch — RGB
           offset shadows + steps() timing — varied by palette and
           cadence. */

        /* === STATIC — TV-noise jitter, fastest of the variants
           (1.2s steps(10), gray base + occasional red/white signal
           loss) === */
        .profile-card[data-perks~="static-glow"]:not([data-perks~="veteran"]) { animation: staticCard 1.2s steps(10, end) infinite; }
        @keyframes staticCard {
            0%   { box-shadow: 2px 0 0 rgba(239,68,68,0.5),  -2px 0 0 rgba(255,255,255,0.5),  0 0 25px rgba(156,163,175,0.4); }
            10%  { box-shadow: -2px 0 0 rgba(239,68,68,0.5), 2px 0 0 rgba(255,255,255,0.5),  0 0 25px rgba(156,163,175,0.4); }
            20%  { box-shadow: 1px 1px 0 rgba(239,68,68,0.5),-1px -1px 0 rgba(255,255,255,0.5),0 0 25px rgba(156,163,175,0.4); }
            30%  { box-shadow: 3px 0 0 rgba(239,68,68,0.7),  -3px 0 0 rgba(255,255,255,0.7),  0 0 35px rgba(255,255,255,0.5); }
            40%  { box-shadow: 0 2px 0 rgba(239,68,68,0.5),  0 -2px 0 rgba(255,255,255,0.5),  0 0 25px rgba(156,163,175,0.4); }
            50%  { box-shadow: -1px 0 0 rgba(239,68,68,0.5), 1px 0 0 rgba(255,255,255,0.5),  0 0 25px rgba(156,163,175,0.4); }
            60%  { box-shadow: 2px -1px 0 rgba(239,68,68,0.5),-2px 1px 0 rgba(255,255,255,0.5),0 0 25px rgba(156,163,175,0.4); }
            70%  { box-shadow: 5px 0 0 rgba(239,68,68,0.85),-5px 0 0 rgba(255,255,255,0.85), 0 0 50px rgba(239,68,68,0.6); }
            80%  { box-shadow: 1px 0 0 rgba(239,68,68,0.5),  -1px 0 0 rgba(255,255,255,0.5),  0 0 25px rgba(156,163,175,0.4); }
            90%  { box-shadow: -2px 1px 0 rgba(239,68,68,0.5),2px -1px 0 rgba(255,255,255,0.5),0 0 25px rgba(156,163,175,0.4); }
            100% { box-shadow: 2px 0 0 rgba(239,68,68,0.5),  -2px 0 0 rgba(255,255,255,0.5),  0 0 25px rgba(156,163,175,0.4); }
        }
        [data-perks~="static-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="static-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="static-frame"]:not([data-perks~="ring"]) { animation: staticFrame 1.2s steps(10, end) infinite; }
        @keyframes staticFrame {
            0%   { box-shadow: 0 0 0 2px #9ca3af, 2px 0 0 rgba(239,68,68,0.6),  -2px 0 0 rgba(255,255,255,0.7); }
            20%  { box-shadow: 0 0 0 2px #9ca3af, -2px 0 0 rgba(239,68,68,0.6), 2px 0 0 rgba(255,255,255,0.7); }
            40%  { box-shadow: 0 0 0 2px #9ca3af, 0 2px 0 rgba(239,68,68,0.6),  0 -2px 0 rgba(255,255,255,0.7); }
            60%  { box-shadow: 0 0 0 2px #9ca3af, 1px 1px 0 rgba(239,68,68,0.6),-1px -1px 0 rgba(255,255,255,0.7); }
            70%  { box-shadow: 0 0 0 2px #ffffff, 4px 0 0 rgba(239,68,68,0.85),-4px 0 0 rgba(255,255,255,0.85); }
            80%  { box-shadow: 0 0 0 2px #9ca3af, -2px 0 0 rgba(239,68,68,0.6), 2px 0 0 rgba(255,255,255,0.7); }
            100% { box-shadow: 0 0 0 2px #9ca3af, 2px 0 0 rgba(239,68,68,0.6),  -2px 0 0 rgba(255,255,255,0.7); }
        }
        .static-username.static-username {
            color: #9ca3af !important; -webkit-text-fill-color: #9ca3af !important; font-weight: 800 !important;
            animation: staticName 1.2s steps(10, end) infinite !important;
        }
        @keyframes staticName {
            0%   { text-shadow: 2px 0 0 rgba(239,68,68,0.85),  -2px 0 0 rgba(255,255,255,0.85); }
            20%  { text-shadow: -2px 0 0 rgba(239,68,68,0.85), 2px 0 0 rgba(255,255,255,0.85); }
            40%  { text-shadow: 0 2px 0 rgba(239,68,68,0.85),  0 -2px 0 rgba(255,255,255,0.85); }
            70%  { text-shadow: 5px 0 0 rgba(239,68,68,0.95),  -5px 0 0 rgba(255,255,255,0.95); }
            100% { text-shadow: 2px 0 0 rgba(239,68,68,0.85),  -2px 0 0 rgba(255,255,255,0.85); }
        }
        #profile-bio[data-perks~="static-bio"], .preview-bio[data-perks~="static-bio"] {
            border-color: #9ca3af !important; animation: staticBio 1.2s steps(10, end) infinite;
        }
        @keyframes staticBio {
            0%   { box-shadow: 2px 0 0 rgba(239,68,68,0.5),  -2px 0 0 rgba(255,255,255,0.6); }
            20%  { box-shadow: -2px 0 0 rgba(239,68,68,0.5), 2px 0 0 rgba(255,255,255,0.6); }
            40%  { box-shadow: 0 2px 0 rgba(239,68,68,0.5),  0 -2px 0 rgba(255,255,255,0.6); }
            70%  { box-shadow: 5px 0 0 rgba(239,68,68,0.8),  -5px 0 0 rgba(255,255,255,0.8); }
            100% { box-shadow: 2px 0 0 rgba(239,68,68,0.5),  -2px 0 0 rgba(255,255,255,0.6); }
        }

        /* === PIXEL — chunky 8-bit retro snaps (1.4s steps(6),
           lime/magenta/cyan palette with bigger offsets) === */
        .profile-card[data-perks~="pixel-glow"]:not([data-perks~="veteran"]) { animation: pixelCard 1.4s steps(6, end) infinite; }
        @keyframes pixelCard {
            0%   { box-shadow: 5px 0 0 rgba(34,197,94,0.7),  -5px 0 0 rgba(236,72,153,0.7),  0 0 35px rgba(34,197,94,0.5); }
            16%  { box-shadow: -5px 0 0 rgba(34,197,94,0.7), 5px 0 0 rgba(236,72,153,0.7),   0 0 35px rgba(236,72,153,0.5); }
            33%  { box-shadow: 5px 0 0 rgba(236,72,153,0.7), -5px 0 0 rgba(34,211,238,0.7),  0 0 35px rgba(34,211,238,0.5); }
            50%  { box-shadow: 0 5px 0 rgba(34,211,238,0.7), 0 -5px 0 rgba(34,197,94,0.7),   0 0 35px rgba(34,197,94,0.5); }
            66%  { box-shadow: -5px 0 0 rgba(34,211,238,0.7),5px 0 0 rgba(236,72,153,0.7),   0 0 35px rgba(236,72,153,0.5); }
            83%  { box-shadow: 0 -5px 0 rgba(236,72,153,0.7),0 5px 0 rgba(34,197,94,0.7),    0 0 35px rgba(34,211,238,0.5); }
            100% { box-shadow: 5px 0 0 rgba(34,197,94,0.7),  -5px 0 0 rgba(236,72,153,0.7),  0 0 35px rgba(34,197,94,0.5); }
        }
        [data-perks~="pixel-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="pixel-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="pixel-frame"]:not([data-perks~="ring"]) { animation: pixelFrame 1.4s steps(6, end) infinite; }
        @keyframes pixelFrame {
            0%   { box-shadow: 0 0 0 2px #22c55e, 4px 0 0 rgba(236,72,153,0.7),  -4px 0 0 rgba(34,211,238,0.7); }
            16%  { box-shadow: 0 0 0 2px #ec4899, 4px 0 0 rgba(34,211,238,0.7),  -4px 0 0 rgba(34,197,94,0.7); }
            33%  { box-shadow: 0 0 0 2px #22d3ee, 0 4px 0 rgba(34,197,94,0.7),   0 -4px 0 rgba(236,72,153,0.7); }
            50%  { box-shadow: 0 0 0 2px #22c55e, -4px 0 0 rgba(236,72,153,0.7), 4px 0 0 rgba(34,211,238,0.7); }
            66%  { box-shadow: 0 0 0 2px #ec4899, 0 -4px 0 rgba(34,211,238,0.7), 0 4px 0 rgba(34,197,94,0.7); }
            83%  { box-shadow: 0 0 0 2px #22d3ee, 4px 0 0 rgba(236,72,153,0.7),  -4px 0 0 rgba(34,197,94,0.7); }
            100% { box-shadow: 0 0 0 2px #22c55e, 4px 0 0 rgba(236,72,153,0.7),  -4px 0 0 rgba(34,211,238,0.7); }
        }
        .pixel-username.pixel-username {
            color: #22c55e !important; -webkit-text-fill-color: #22c55e !important; font-weight: 800 !important;
            font-family: 'Courier New', monospace !important;
            animation: pixelName 1.4s steps(6, end) infinite !important;
        }
        @keyframes pixelName {
            0%   { color: #22c55e !important; -webkit-text-fill-color: #22c55e !important; text-shadow: 4px 0 0 rgba(236,72,153,0.85), -4px 0 0 rgba(34,211,238,0.85); }
            33%  { color: #ec4899 !important; -webkit-text-fill-color: #ec4899 !important; text-shadow: 0 4px 0 rgba(34,197,94,0.85),   0 -4px 0 rgba(34,211,238,0.85); }
            66%  { color: #22d3ee !important; -webkit-text-fill-color: #22d3ee !important; text-shadow: -4px 0 0 rgba(236,72,153,0.85),4px 0 0 rgba(34,197,94,0.85); }
            100% { color: #22c55e !important; -webkit-text-fill-color: #22c55e !important; text-shadow: 4px 0 0 rgba(236,72,153,0.85), -4px 0 0 rgba(34,211,238,0.85); }
        }
        #profile-bio[data-perks~="pixel-bio"], .preview-bio[data-perks~="pixel-bio"] {
            border-color: #22c55e !important; animation: pixelBio 1.4s steps(6, end) infinite;
        }
        @keyframes pixelBio {
            0%   { border-color: #22c55e; box-shadow: 4px 0 0 rgba(236,72,153,0.7),  -4px 0 0 rgba(34,211,238,0.7); }
            33%  { border-color: #ec4899; box-shadow: 0 4px 0 rgba(34,197,94,0.7),   0 -4px 0 rgba(34,211,238,0.7); }
            66%  { border-color: #22d3ee; box-shadow: -4px 0 0 rgba(236,72,153,0.7), 4px 0 0 rgba(34,197,94,0.7); }
            100% { border-color: #22c55e; box-shadow: 4px 0 0 rgba(236,72,153,0.7),  -4px 0 0 rgba(34,211,238,0.7); }
        }

        /* === VAPORGLITCH — vaporwave pink/cyan glitch (1.8s steps(8),
           hot pink + electric cyan offsets) === */
        .profile-card[data-perks~="vaporglitch-glow"]:not([data-perks~="veteran"]) { animation: vaporglitchCard 1.8s steps(8, end) infinite; }
        @keyframes vaporglitchCard {
            0%   { box-shadow: 4px 0 0 rgba(236,72,153,0.7),  -4px 0 0 rgba(34,211,238,0.7),  0 0 35px rgba(244,114,182,0.4); }
            12%  { box-shadow: -4px 0 0 rgba(236,72,153,0.7), 4px 0 0 rgba(34,211,238,0.7),   0 0 35px rgba(244,114,182,0.4); }
            25%  { box-shadow: 0 4px 0 rgba(236,72,153,0.7),  0 -4px 0 rgba(34,211,238,0.7),  0 0 35px rgba(244,114,182,0.4); }
            38%  { box-shadow: 6px -2px 0 rgba(236,72,153,0.8),-6px 2px 0 rgba(34,211,238,0.8),0 0 35px rgba(244,114,182,0.4); }
            50%  { box-shadow: -6px 2px 0 rgba(236,72,153,0.8),6px -2px 0 rgba(34,211,238,0.8),0 0 35px rgba(244,114,182,0.4); }
            62%  { box-shadow: 4px 0 0 rgba(236,72,153,0.7),  -4px 0 0 rgba(34,211,238,0.7),  0 0 35px rgba(244,114,182,0.4); }
            75%  { box-shadow: 0 0 0 1px rgba(244,114,182,0.6), 0 0 50px rgba(236,72,153,0.5); }
            88%  { box-shadow: 8px 0 0 rgba(236,72,153,0.85), -8px 0 0 rgba(34,211,238,0.85), 0 0 35px rgba(244,114,182,0.4); }
            100% { box-shadow: 4px 0 0 rgba(236,72,153,0.7),  -4px 0 0 rgba(34,211,238,0.7),  0 0 35px rgba(244,114,182,0.4); }
        }
        [data-perks~="vaporglitch-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="vaporglitch-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="vaporglitch-frame"]:not([data-perks~="ring"]) { animation: vaporglitchFrame 1.8s steps(8, end) infinite; }
        @keyframes vaporglitchFrame {
            0%   { box-shadow: 0 0 0 2px #ec4899, 3px 0 0 rgba(244,114,182,0.7),  -3px 0 0 rgba(34,211,238,0.7); }
            25%  { box-shadow: 0 0 0 2px #ec4899, -3px 0 0 rgba(244,114,182,0.7), 3px 0 0 rgba(34,211,238,0.7); }
            50%  { box-shadow: 0 0 0 2px #ec4899, 0 3px 0 rgba(244,114,182,0.7),  0 -3px 0 rgba(34,211,238,0.7); }
            75%  { box-shadow: 0 0 0 2px #ec4899, 5px -2px 0 rgba(244,114,182,0.8),-5px 2px 0 rgba(34,211,238,0.8); }
            100% { box-shadow: 0 0 0 2px #ec4899, 3px 0 0 rgba(244,114,182,0.7),  -3px 0 0 rgba(34,211,238,0.7); }
        }
        .vaporglitch-username.vaporglitch-username {
            color: #ec4899 !important; -webkit-text-fill-color: #ec4899 !important; font-weight: 800 !important;
            animation: vaporglitchName 1.8s steps(8, end) infinite !important;
        }
        @keyframes vaporglitchName {
            0%   { text-shadow: 3px 0 0 rgba(244,114,182,0.9), -3px 0 0 rgba(34,211,238,0.9); }
            25%  { text-shadow: -3px 0 0 rgba(244,114,182,0.9), 3px 0 0 rgba(34,211,238,0.9); }
            50%  { text-shadow: 0 3px 0 rgba(244,114,182,0.9),  0 -3px 0 rgba(34,211,238,0.9); }
            75%  { text-shadow: 5px -2px 0 rgba(244,114,182,0.95), -5px 2px 0 rgba(34,211,238,0.95); }
            100% { text-shadow: 3px 0 0 rgba(244,114,182,0.9), -3px 0 0 rgba(34,211,238,0.9); }
        }
        #profile-bio[data-perks~="vaporglitch-bio"], .preview-bio[data-perks~="vaporglitch-bio"] {
            border-color: #ec4899 !important; animation: vaporglitchBio 1.8s steps(8, end) infinite;
        }
        @keyframes vaporglitchBio {
            0%   { box-shadow: 3px 0 0 rgba(244,114,182,0.7),  -3px 0 0 rgba(34,211,238,0.7); }
            25%  { box-shadow: -3px 0 0 rgba(244,114,182,0.7), 3px 0 0 rgba(34,211,238,0.7); }
            50%  { box-shadow: 0 3px 0 rgba(244,114,182,0.7),  0 -3px 0 rgba(34,211,238,0.7); }
            75%  { box-shadow: 5px -2px 0 rgba(244,114,182,0.8),-5px 2px 0 rgba(34,211,238,0.8); }
            100% { box-shadow: 3px 0 0 rgba(244,114,182,0.7),  -3px 0 0 rgba(34,211,238,0.7); }
        }

        /* === LIQUID GOLD — flowing molten gold ripple (5s slow) === */
        .profile-card[data-perks~="liquidgold-glow"]:not([data-perks~="veteran"]) { animation: liquidgoldCard 5s ease-in-out infinite; }
        @keyframes liquidgoldCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(180,83,9,0.7),   0 0 50px rgba(245,158,11,0.5),  0 0 90px rgba(251,191,36,0.3); }
            33%      { box-shadow: 0 0 0 1px rgba(245,158,11,0.85), 0 0 60px rgba(251,191,36,0.6),  0 0 100px rgba(254,240,138,0.35); }
            66%      { box-shadow: 0 0 0 1px rgba(251,191,36,0.85), 0 0 60px rgba(254,240,138,0.55), 0 0 95px rgba(245,158,11,0.35); }
        }
        [data-perks~="liquidgold-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="liquidgold-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="liquidgold-frame"]:not([data-perks~="ring"]) { animation: liquidgoldFrame 5s ease-in-out infinite; }
        @keyframes liquidgoldFrame {
            0%, 100% { box-shadow: 0 0 0 2px #b45309, 0 0 14px rgba(245,158,11,0.6),  0 0 24px rgba(251,191,36,0.35); }
            33%      { box-shadow: 0 0 0 2px #f59e0b, 0 0 18px rgba(251,191,36,0.7),  0 0 28px rgba(254,240,138,0.4); }
            66%      { box-shadow: 0 0 0 2px #fbbf24, 0 0 18px rgba(254,240,138,0.65), 0 0 28px rgba(245,158,11,0.4); }
        }
        .liquidgold-username.liquidgold-username {
            background-image: linear-gradient(90deg, #b45309, #f59e0b, #fbbf24, #fde68a, #fbbf24, #f59e0b, #b45309) !important;
            background-size: 300% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: liquidgoldName 5s linear infinite !important;
            text-shadow: 0 0 10px rgba(245,158,11,0.5);
        }
        @keyframes liquidgoldName {
            0%   { background-position: 0% 50%; }
            100% { background-position: 300% 50%; }
        }
        #profile-bio[data-perks~="liquidgold-bio"], .preview-bio[data-perks~="liquidgold-bio"] {
            border-color: #f59e0b !important; animation: liquidgoldBio 5s ease-in-out infinite;
        }
        @keyframes liquidgoldBio {
            0%, 100% { border-color: #b45309; box-shadow: 0 0 14px rgba(245,158,11,0.55), 0 0 26px rgba(251,191,36,0.3); }
            33%      { border-color: #f59e0b; box-shadow: 0 0 18px rgba(251,191,36,0.7),  0 0 30px rgba(254,240,138,0.4); }
            66%      { border-color: #fbbf24; box-shadow: 0 0 18px rgba(254,240,138,0.65),0 0 30px rgba(245,158,11,0.4); }
        }

        /* === MATRIX — bright digital code-green pulse (2.4s) === */
        .profile-card[data-perks~="matrix-glow"]:not([data-perks~="veteran"]) { animation: matrixCard 2.4s ease-in-out infinite; }
        @keyframes matrixCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(34,197,94,0.65), 0 0 40px rgba(34,197,94,0.4),  0 0 80px rgba(0,0,0,0.4); }
            50%      { box-shadow: 0 0 0 1px rgba(34,197,94,0.95), 0 0 70px rgba(34,197,94,0.85), 0 0 110px rgba(74,222,128,0.5); }
        }
        [data-perks~="matrix-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="matrix-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="matrix-frame"]:not([data-perks~="ring"]) { animation: matrixFrame 2.4s ease-in-out infinite; }
        @keyframes matrixFrame {
            0%, 100% { box-shadow: 0 0 0 2px #22c55e, 0 0 12px rgba(34,197,94,0.6); }
            50%      { box-shadow: 0 0 0 2px #4ade80, 0 0 24px rgba(74,222,128,0.95); }
        }
        .matrix-username.matrix-username {
            color: #4ade80 !important; -webkit-text-fill-color: #4ade80 !important; font-weight: 800 !important;
            font-family: 'Courier New', monospace !important;
            animation: matrixName 2.4s ease-in-out infinite !important;
        }
        @keyframes matrixName {
            0%, 100% { text-shadow: 0 0 8px rgba(34,197,94,0.6),  0 0 16px rgba(0,0,0,0.4); }
            50%      { text-shadow: 0 0 16px rgba(74,222,128,0.95),0 0 28px rgba(34,197,94,0.7); }
        }
        #profile-bio[data-perks~="matrix-bio"], .preview-bio[data-perks~="matrix-bio"] {
            border-color: #22c55e !important; animation: matrixBio 2.4s ease-in-out infinite;
        }
        @keyframes matrixBio {
            0%, 100% { border-color: #22c55e; box-shadow: 0 0 12px rgba(34,197,94,0.55); }
            50%      { border-color: #4ade80; box-shadow: 0 0 24px rgba(74,222,128,0.85); }
        }

        /* === BUBBLE — soft iridescent pastel shimmer (5s slow) === */
        .profile-card[data-perks~="bubble-glow"]:not([data-perks~="veteran"]) { animation: bubbleCard 5s ease-in-out infinite; }
        @keyframes bubbleCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(244,114,182,0.55), 0 0 40px rgba(244,114,182,0.35), 0 0 80px rgba(147,197,253,0.25); }
            33%      { box-shadow: 0 0 0 1px rgba(147,197,253,0.55), 0 0 45px rgba(147,197,253,0.4),  0 0 85px rgba(216,180,254,0.3); }
            66%      { box-shadow: 0 0 0 1px rgba(216,180,254,0.55), 0 0 45px rgba(216,180,254,0.4),  0 0 85px rgba(244,114,182,0.3); }
        }
        [data-perks~="bubble-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="bubble-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="bubble-frame"]:not([data-perks~="ring"]) { animation: bubbleFrame 5s ease-in-out infinite; }
        @keyframes bubbleFrame {
            0%, 100% { box-shadow: 0 0 0 2px #f472b6, 0 0 12px rgba(244,114,182,0.5); }
            33%      { box-shadow: 0 0 0 2px #93c5fd, 0 0 12px rgba(147,197,253,0.5); }
            66%      { box-shadow: 0 0 0 2px #d8b4fe, 0 0 12px rgba(216,180,254,0.5); }
        }
        .bubble-username.bubble-username {
            background-image: linear-gradient(90deg, #f472b6, #93c5fd, #d8b4fe, #fde68a, #93c5fd, #f472b6) !important;
            background-size: 300% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: bubbleName 5s ease-in-out infinite !important;
            text-shadow: 0 0 10px rgba(216,180,254,0.4);
        }
        @keyframes bubbleName {
            0%, 100% { background-position: 0% 50%; }
            50%      { background-position: 300% 50%; }
        }
        #profile-bio[data-perks~="bubble-bio"], .preview-bio[data-perks~="bubble-bio"] {
            border-color: #f472b6 !important; animation: bubbleBio 5s ease-in-out infinite;
        }
        @keyframes bubbleBio {
            0%, 100% { border-color: #f472b6; box-shadow: 0 0 14px rgba(244,114,182,0.5); }
            33%      { border-color: #93c5fd; box-shadow: 0 0 14px rgba(147,197,253,0.5); }
            66%      { border-color: #d8b4fe; box-shadow: 0 0 14px rgba(216,180,254,0.5); }
        }

        /* === HEAVEN — divine white-gold light beams (4s) === */
        .profile-card[data-perks~="heaven-glow"]:not([data-perks~="veteran"]) { animation: heavenCard 4s ease-in-out infinite; }
        @keyframes heavenCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(254,240,138,0.7), 0 0 40px rgba(255,255,255,0.5),  0 0 80px rgba(251,191,36,0.4),  0 0 120px rgba(255,255,255,0.2); }
            50%      { box-shadow: 0 0 0 1px rgba(255,255,255,0.95),0 0 70px rgba(255,255,255,0.85), 0 0 130px rgba(251,191,36,0.6), 0 0 180px rgba(254,240,138,0.4); }
        }
        [data-perks~="heaven-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="heaven-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="heaven-frame"]:not([data-perks~="ring"]) { animation: heavenFrame 4s ease-in-out infinite; }
        @keyframes heavenFrame {
            0%, 100% { box-shadow: 0 0 0 2px #fde68a, 0 0 14px rgba(255,255,255,0.6),  0 0 24px rgba(251,191,36,0.4); }
            50%      { box-shadow: 0 0 0 2px #ffffff, 0 0 30px rgba(255,255,255,0.95), 0 0 50px rgba(251,191,36,0.7); }
        }
        .heaven-username.heaven-username {
            background-image: linear-gradient(90deg, #ffffff, #fde68a, #fbbf24, #fde68a, #ffffff) !important;
            background-size: 200% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: heavenName 4s ease-in-out infinite !important;
        }
        @keyframes heavenName {
            0%, 100% { background-position: 0% 50%;   text-shadow: 0 0 10px rgba(255,255,255,0.7), 0 0 20px rgba(251,191,36,0.4); }
            50%      { background-position: 100% 50%; text-shadow: 0 0 22px rgba(255,255,255,0.95),0 0 40px rgba(251,191,36,0.7); }
        }
        #profile-bio[data-perks~="heaven-bio"], .preview-bio[data-perks~="heaven-bio"] {
            border-color: #fde68a !important; animation: heavenBio 4s ease-in-out infinite;
        }
        @keyframes heavenBio {
            0%, 100% { border-color: #fde68a; box-shadow: 0 0 14px rgba(255,255,255,0.55), 0 0 28px rgba(251,191,36,0.4); }
            50%      { border-color: #ffffff; box-shadow: 0 0 26px rgba(255,255,255,0.85), 0 0 44px rgba(251,191,36,0.7); }
        }

        /* === SYNTH — vaporwave hot magenta + electric cyan (3s) === */
        .profile-card[data-perks~="synth-glow"]:not([data-perks~="veteran"]) { animation: synthCard 3s ease-in-out infinite; }
        @keyframes synthCard {
            0%, 100% { box-shadow: 0 0 0 1px rgba(236,72,153,0.7), 0 0 50px rgba(236,72,153,0.5),  0 0 90px rgba(34,211,238,0.3); }
            50%      { box-shadow: 0 0 0 1px rgba(34,211,238,0.7), 0 0 50px rgba(34,211,238,0.5),  0 0 90px rgba(236,72,153,0.3); }
        }
        [data-perks~="synth-frame"]:not([data-perks~="ring"]).avatar-frame,
        [data-perks~="synth-frame"]:not([data-perks~="ring"]) .avatar-circle,
        img[data-perks~="synth-frame"]:not([data-perks~="ring"]) { animation: synthFrame 3s ease-in-out infinite; }
        @keyframes synthFrame {
            0%, 100% { box-shadow: 0 0 0 2px #ec4899, 0 0 14px rgba(236,72,153,0.6),  0 0 24px rgba(34,211,238,0.3); }
            50%      { box-shadow: 0 0 0 2px #22d3ee, 0 0 18px rgba(34,211,238,0.7),  0 0 28px rgba(236,72,153,0.4); }
        }
        .synth-username.synth-username {
            background-image: linear-gradient(90deg, #ec4899, #f472b6, #22d3ee, #67e8f9, #22d3ee, #ec4899) !important;
            background-size: 300% auto !important;
            -webkit-background-clip: text !important; background-clip: text !important;
            -webkit-text-fill-color: transparent !important; color: transparent !important;
            font-weight: 800 !important;
            animation: synthName 3s linear infinite !important;
            text-shadow: 0 0 10px rgba(236,72,153,0.5);
        }
        @keyframes synthName {
            0%   { background-position: 0% 50%; }
            100% { background-position: 300% 50%; }
        }
        #profile-bio[data-perks~="synth-bio"], .preview-bio[data-perks~="synth-bio"] {
            border-color: #ec4899 !important; animation: synthBio 3s ease-in-out infinite;
        }
        @keyframes synthBio {
            0%, 100% { border-color: #ec4899; box-shadow: 0 0 14px rgba(236,72,153,0.6),  0 0 26px rgba(34,211,238,0.3); }
            50%      { border-color: #22d3ee; box-shadow: 0 0 18px rgba(34,211,238,0.7),  0 0 30px rgba(236,72,153,0.4); }
        }

        /* === DM CHAT BUBBLES — direction-agnostic ===
           data-perks is stamped on each individual .dm-bubble at render
           time (dm.js renderDMMessages): sent bubbles use the local
           user's equippedPerks, received bubbles use the partner's
           (fetched on /api/dm open + latched from receive-dm socket
           payloads). One CSS rule paints both directions, so a partner
           with aqua-bubble shows up aqua to you too. !important wins
           over the default `.dm-bubble.sent { background: var(--accent) }`. */

        /* Common (250) — solid color tints */
        .dm-bubble[data-perks~="aqua-bubble"]  { background: #22d3ee !important; color: #0f172a !important; }
        .dm-bubble[data-perks~="rose-bubble"]  { background: #f472b6 !important; color: #1e1b3a !important; }
        .dm-bubble[data-perks~="sky-bubble"]   { background: #7dd3fc !important; color: #0f172a !important; }
        .dm-bubble[data-perks~="coral-bubble"] { background: #fb7185 !important; color: #1e1b3a !important; }
        .dm-bubble[data-perks~="plum-bubble"]  { background: #9333ea !important; color: #faf5ff !important; }

        /* Rare (1500) — saturated jewel tones with a slow opacity pulse */
        .dm-bubble[data-perks~="ruby-bubble"]     { background: #ef4444 !important; color: #fff !important; animation: bubblePulse 2.4s ease-in-out infinite; }
        .dm-bubble[data-perks~="sapphire-bubble"] { background: #2563eb !important; color: #fff !important; animation: bubblePulse 2.4s ease-in-out infinite; }
        .dm-bubble[data-perks~="emerald-bubble"]  { background: #059669 !important; color: #fff !important; animation: bubblePulse 2.4s ease-in-out infinite; }
        .dm-bubble[data-perks~="amethyst-bubble"] { background: #7c3aed !important; color: #fff !important; animation: bubblePulse 2.4s ease-in-out infinite; }
        .dm-bubble[data-perks~="onyx-bubble"]     { background: #1f2937 !important; color: #f8fafc !important; box-shadow: 0 0 0 1px rgba(203,213,225,0.4); }
        @keyframes bubblePulse {
            0%, 100% { filter: brightness(1); }
            50%      { filter: brightness(1.15); }
        }

        /* Legendary (7500) — static gradients */
        .dm-bubble[data-perks~="sunset-bubble"] { background: linear-gradient(135deg, #fb7185, #f472b6) !important; color: #1e1b3a !important; }
        .dm-bubble[data-perks~="ocean-bubble"]  { background: linear-gradient(135deg, #14b8a6, #1e40af) !important; color: #fff !important; }
        .dm-bubble[data-perks~="forest-bubble"] { background: linear-gradient(135deg, #047857, #84cc16) !important; color: #fff !important; }
        .dm-bubble[data-perks~="bronze-bubble"] { background: linear-gradient(135deg, #b45309, #f59e0b) !important; color: #fff !important; }
        .dm-bubble[data-perks~="silver-bubble"] { background: linear-gradient(135deg, #f1f5f9, #94a3b8) !important; color: #0f172a !important; }

        /* Ultra (15000) — animated gradients + special effects */
        .dm-bubble[data-perks~="aurora-bubble"] {
            background: linear-gradient(90deg, #22d3ee, #a78bfa, #f472b6, #a78bfa, #22d3ee) !important;
            background-size: 300% 100% !important;
            color: #fff !important;
            animation: bubbleAurora 6s linear infinite;
        }
        @keyframes bubbleAurora { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

        .dm-bubble[data-perks~="phoenix-bubble"] {
            background: linear-gradient(90deg, #dc2626, #f97316, #fbbf24, #f97316, #dc2626) !important;
            background-size: 300% 100% !important;
            color: #fff !important;
            animation: bubblePhoenix 4s linear infinite;
        }
        @keyframes bubblePhoenix { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

        .dm-bubble[data-perks~="glitch-bubble"] {
            background: #1f2937 !important;
            color: #fff !important;
            animation: bubbleGlitch 1.6s steps(8, end) infinite;
        }
        @keyframes bubbleGlitch {
            0%   { text-shadow: 2px 0 0 rgba(244,67,67,0.8), -2px 0 0 rgba(34,211,238,0.8); }
            25%  { text-shadow: -2px 0 0 rgba(244,67,67,0.8), 2px 0 0 rgba(34,211,238,0.8); }
            50%  { text-shadow: 0 2px 0 rgba(244,67,67,0.8),  0 -2px 0 rgba(34,211,238,0.8); }
            75%  { text-shadow: 3px -1px 0 rgba(244,67,67,0.85), -3px 1px 0 rgba(34,211,238,0.85); }
            100% { text-shadow: 2px 0 0 rgba(244,67,67,0.8), -2px 0 0 rgba(34,211,238,0.8); }
        }

        .dm-bubble[data-perks~="holo-bubble"] {
            background: linear-gradient(90deg, #22d3ee, #f472b6, #fbbf24, #84cc16, #22d3ee) !important;
            background-size: 400% 100% !important;
            color: #0f172a !important;
            animation: bubbleHolo 8s linear infinite;
        }
        @keyframes bubbleHolo { 0% { background-position: 0% 50%; } 100% { background-position: 400% 50%; } }

        .dm-bubble[data-perks~="void-bubble"] {
            background: linear-gradient(135deg, #5b21b6, #991b1b) !important;
            color: #fff !important;
            animation: bubbleVoid 3.5s ease-in-out infinite;
        }
        @keyframes bubbleVoid {
            0%, 100% { background: linear-gradient(135deg, #5b21b6, #991b1b) !important; box-shadow: 0 0 12px rgba(91,33,182,0.45); }
            50%      { background: linear-gradient(135deg, #991b1b, #5b21b6) !important; box-shadow: 0 0 22px rgba(153,27,27,0.55); }
        }

        /* === DM CHAT BUBBLES — round 2 (66 SKUs) — full theme parity ===
           Generated alongside the round-2 SKUs in server.js. Same
           direction-agnostic .dm-bubble[data-perks~="X"] selector;
           rare uses the shared bubblePulse keyframe, every ultra has
           its own signature animation matching its sibling cosmetic
           set (defined inline below). */
        .dm-bubble[data-perks~="sage-bubble"] { background: #65a30d !important; color: #fff !important; }
        .dm-bubble[data-perks~="rust-bubble"] { background: #c2410c !important; color: #fff !important; }
        .dm-bubble[data-perks~="slate-bubble"] { background: #64748b !important; color: #fff !important; }
        .dm-bubble[data-perks~="cream-bubble"] { background: #fde68a !important; color: #0f172a !important; }
        .dm-bubble[data-perks~="mocha-bubble"] { background: #92400e !important; color: #fff !important; }
        .dm-bubble[data-perks~="pearl-bubble"] { background: #e2e8f0 !important; color: #0f172a !important; }
        .dm-bubble[data-perks~="periwinkle-bubble"] { background: #818cf8 !important; color: #fff !important; }
        .dm-bubble[data-perks~="crimson-bubble"] { background: #dc2626 !important; color: #fff !important; animation: bubblePulse 2.4s ease-in-out infinite; }
        .dm-bubble[data-perks~="garnet-bubble"] { background: #9f1239 !important; color: #fff !important; animation: bubblePulse 2.4s ease-in-out infinite; }
        .dm-bubble[data-perks~="jade-bubble"] { background: #14b8a6 !important; color: #fff !important; animation: bubblePulse 2.4s ease-in-out infinite; }
        .dm-bubble[data-perks~="topaz-bubble"] { background: #f59e0b !important; color: #fff !important; animation: bubblePulse 2.4s ease-in-out infinite; }
        .dm-bubble[data-perks~="magenta-bubble"] { background: #ec4899 !important; color: #fff !important; animation: bubblePulse 2.4s ease-in-out infinite; }
        .dm-bubble[data-perks~="cobalt-bubble"] { background: #1d4ed8 !important; color: #fff !important; animation: bubblePulse 2.4s ease-in-out infinite; }
        .dm-bubble[data-perks~="honey-bubble"] { background: linear-gradient(135deg, #f59e0b, #fbbf24) !important; color: #1e1b3a !important; }
        .dm-bubble[data-perks~="lemon-bubble"] { background: linear-gradient(135deg, #fde047, #facc15) !important; color: #0f172a !important; }
        .dm-bubble[data-perks~="indigo-bubble"] { background: linear-gradient(135deg, #1e1b4b, #4338ca) !important; color: #fff !important; }
        .dm-bubble[data-perks~="lavender-bubble"] { background: linear-gradient(135deg, #c4b5fd, #a78bfa) !important; color: #1e1b3a !important; }
        .dm-bubble[data-perks~="mint-bubble"] { background: linear-gradient(135deg, #6ee7b7, #14b8a6) !important; color: #0f172a !important; }
        .dm-bubble[data-perks~="twilight-bubble"] { background: linear-gradient(135deg, #4338ca, #f97316) !important; color: #fff !important; }
        .dm-bubble[data-perks~="berry-bubble"] { background: linear-gradient(135deg, #6b21a8, #be185d) !important; color: #fff !important; }
        .dm-bubble[data-perks~="tangerine-bubble"] { background: linear-gradient(135deg, #f97316, #fb923c) !important; color: #fff !important; }
        .dm-bubble[data-perks~="tropical-bubble"] { background: linear-gradient(135deg, #f472b6, #14b8a6) !important; color: #fff !important; }
        .dm-bubble[data-perks~="velvet-bubble"] { background: linear-gradient(135deg, #be185d, #fbbf24) !important; color: #fff !important; }
        .dm-bubble[data-perks~="marble-bubble"] { background: linear-gradient(135deg, #f1f5f9, #cbd5e1) !important; color: #0f172a !important; }
        .dm-bubble[data-perks~="apricot-bubble"] { background: linear-gradient(135deg, #fed7aa, #fb923c) !important; color: #1e1b3a !important; }
        .dm-bubble[data-perks~="cinnamon-bubble"] { background: linear-gradient(135deg, #9a3412, #f97316) !important; color: #fff !important; }
        .dm-bubble[data-perks~="saffron-bubble"] { background: linear-gradient(135deg, #d97706, #fbbf24) !important; color: #1e1b3a !important; }
        .dm-bubble[data-perks~="magnolia-bubble"] { background: linear-gradient(135deg, #fef3c7, #f9a8d4) !important; color: #1e1b3a !important; }
        .dm-bubble[data-perks~="burgundy-bubble"] { background: linear-gradient(135deg, #7f1d1d, #b91c1c) !important; color: #fff !important; }
        .dm-bubble[data-perks~="olive-bubble"] { background: linear-gradient(135deg, #65a30d, #4d7c0f) !important; color: #fff !important; }
        .dm-bubble[data-perks~="steel-bubble"] { background: linear-gradient(135deg, #64748b, #475569) !important; color: #fff !important; }
        .dm-bubble[data-perks~="champagne-bubble"] { background: linear-gradient(135deg, #fef3c7, #fda4af) !important; color: #1e1b3a !important; }
        .dm-bubble[data-perks~="caramel-bubble"] { background: linear-gradient(135deg, #92400e, #f59e0b) !important; color: #fff !important; }
        .dm-bubble[data-perks~="brick-bubble"] { background: linear-gradient(135deg, #991b1b, #7c2d12) !important; color: #fff !important; }
        .dm-bubble[data-perks~="khaki-bubble"] { background: linear-gradient(135deg, #a3a380, #78716c) !important; color: #fff !important; }
        .dm-bubble[data-perks~="moss-bubble"] { background: linear-gradient(135deg, #14532d, #166534) !important; color: #fff !important; }
        .dm-bubble[data-perks~="sunflower-bubble"] { background: linear-gradient(135deg, #facc15, #f59e0b) !important; color: #1e1b3a !important; }
        .dm-bubble[data-perks~="mauve-bubble"] { background: linear-gradient(135deg, #d8b4fe, #c084fc) !important; color: #1e1b3a !important; }
        /* Each ultra below has its own signature animation matching its
           sibling frame/glow set. Effect families: gradient flow, color
           cycle, stepped jitter, scale pulse, opacity fade, box-shadow
           halo, sparkle burst. */

        /* galaxy — indigo-violet drift + starlit text glow */
        .dm-bubble[data-perks~="galaxy-bubble"] {
            background: linear-gradient(90deg, #1e1b4b, #7c3aed, #1e1b4b) !important;
            background-size: 300% 100% !important;
            color: #fff !important;
            text-shadow: 0 0 8px rgba(167,139,250,0.6);
            animation: bubbleGalaxy 7s linear infinite;
        }
        @keyframes bubbleGalaxy { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

        /* frost — crystalline cyan-silver shimmer */
        .dm-bubble[data-perks~="frost-bubble"] {
            background: linear-gradient(135deg, #22d3ee, #cbd5e1) !important;
            background-size: 200% 100% !important;
            color: #0f172a !important;
            animation: bubbleFrost 4s ease-in-out infinite alternate;
        }
        @keyframes bubbleFrost {
            0%   { background-position: 0% 50%;   box-shadow: 0 0 10px rgba(186,230,253,0.4); }
            100% { background-position: 100% 50%; box-shadow: 0 0 18px rgba(186,230,253,0.8); }
        }

        /* storm — constant electric-blue gradient flow + sudden white lightning flashes */
        .dm-bubble[data-perks~="storm-bubble"] {
            background: linear-gradient(90deg, #1e3a8a, #3b82f6, #1e40af, #3b82f6, #1e3a8a) !important;
            background-size: 300% 100% !important;
            color: #fff !important;
            animation: bubbleStormFlow 3s linear infinite, bubbleStormFlash 4s linear infinite;
        }
        @keyframes bubbleStormFlow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
        @keyframes bubbleStormFlash {
            0%, 90%, 100% { box-shadow: 0 0 8px rgba(59,130,246,0.4); filter: brightness(1); }
            93%           { box-shadow: 0 0 30px rgba(255,255,255,0.95); filter: brightness(1.5); }
            96%           { box-shadow: 0 0 8px rgba(59,130,246,0.4); filter: brightness(1); }
        }

        /* sakura — soft pink/white petal wash */
        .dm-bubble[data-perks~="sakura-bubble"] {
            background: linear-gradient(135deg, #fce7f3, #f472b6, #fbcfe8) !important;
            background-size: 200% 100% !important;
            color: #1e1b3a !important;
            animation: bubbleSakura 5s ease-in-out infinite alternate;
        }
        @keyframes bubbleSakura { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

        /* toxic — radioactive green↔yellow pulse + halo */
        .dm-bubble[data-perks~="toxic-bubble"] {
            background: #84cc16 !important;
            color: #0f172a !important;
            animation: bubbleToxic 2s ease-in-out infinite;
        }
        @keyframes bubbleToxic {
            0%, 100% { background: #84cc16; box-shadow: 0 0 12px rgba(132,204,22,0.55); }
            50%      { background: #facc15; box-shadow: 0 0 22px rgba(250,204,21,0.7); }
        }

        /* royal — purple-gold majestic shift */
        .dm-bubble[data-perks~="royal-bubble"] {
            background: linear-gradient(135deg, #581c87, #fbbf24) !important;
            background-size: 200% 100% !important;
            color: #fff !important;
            animation: bubbleRoyal 5s ease-in-out infinite alternate;
        }
        @keyframes bubbleRoyal { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

        /* lava — red→amber→shadow churn */
        .dm-bubble[data-perks~="lava-bubble"] {
            background: linear-gradient(90deg, #7f1d1d, #f97316, #fbbf24, #7f1d1d) !important;
            background-size: 400% 100% !important;
            color: #fff !important;
            animation: bubbleLava 5s linear infinite;
        }
        @keyframes bubbleLava { 0% { background-position: 0% 50%; } 100% { background-position: 400% 50%; } }

        /* mythic — emerald-and-gold dragon-scale shimmer */
        .dm-bubble[data-perks~="mythic-bubble"] {
            background: linear-gradient(135deg, #047857, #fbbf24) !important;
            background-size: 200% 100% !important;
            color: #fff !important;
            animation: bubbleMythic 4s ease-in-out infinite alternate;
        }
        @keyframes bubbleMythic { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

        /* eclipse — constant dark drift + pulsing bright corona */
        .dm-bubble[data-perks~="eclipse-bubble"] {
            background: linear-gradient(90deg, #0f172a, #1e293b, #0f172a) !important;
            background-size: 300% 100% !important;
            color: #fef3c7 !important;
            animation: bubbleEclipseShift 4s linear infinite, bubbleEclipseCorona 2.5s ease-in-out infinite;
        }
        @keyframes bubbleEclipseShift { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
        @keyframes bubbleEclipseCorona {
            0%, 100% { box-shadow: 0 0 0 1px rgba(250,204,21,0.5),  0 0 20px rgba(250,204,21,0.4); }
            50%      { box-shadow: 0 0 0 2px rgba(254,240,138,0.95), 0 0 36px rgba(254,240,138,0.7); }
        }

        /* prism — geometric stepped multi-hue refraction */
        .dm-bubble[data-perks~="prism-bubble"] {
            background: #ef4444 !important;
            color: #fff !important;
            animation: bubblePrism 1.6s steps(7, end) infinite;
        }
        @keyframes bubblePrism {
            0%   { background: #ef4444; }
            14%  { background: #f97316; }
            28%  { background: #facc15; }
            42%  { background: #84cc16; }
            57%  { background: #22d3ee; }
            71%  { background: #a78bfa; }
            85%  { background: #ec4899; }
            100% { background: #ef4444; }
        }

        /* diamond — constant brilliant shimmer + periodic sparkle bursts */
        .dm-bubble[data-perks~="diamond-bubble"] {
            background: linear-gradient(105deg, #f8fafc 30%, #ffffff 50%, #cbd5e1 70%, #f8fafc) !important;
            background-size: 200% 100% !important;
            color: #0f172a !important;
            animation: bubbleDiamondShimmer 3s linear infinite, bubbleDiamondSparkle 2s ease-in-out infinite;
        }
        @keyframes bubbleDiamondShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
        @keyframes bubbleDiamondSparkle {
            0%, 30%, 60%, 100% { box-shadow: 0 0 8px rgba(255,255,255,0.5); filter: brightness(1); }
            15%                { box-shadow: 0 0 28px rgba(255,255,255,1), 0 0 40px rgba(186,230,253,0.7); filter: brightness(1.2); }
            45%                { box-shadow: 0 0 8px rgba(255,255,255,0.5); filter: brightness(1); }
        }

        /* stardust — constant cosmic-night drift + twinkling gold text */
        .dm-bubble[data-perks~="stardust-bubble"] {
            background: linear-gradient(90deg, #0f172a, #1e1b4b, #0f172a) !important;
            background-size: 200% 100% !important;
            color: #fbbf24 !important;
            animation: bubbleStardustBg 5s linear infinite, bubbleStardustTwinkle 2.5s ease-in-out infinite;
        }
        @keyframes bubbleStardustBg { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
        @keyframes bubbleStardustTwinkle {
            0%, 100% { text-shadow: 0 0 8px rgba(251,191,36,0.55); }
            50%      { text-shadow: 0 0 16px rgba(254,240,138,1), 0 0 26px rgba(251,191,36,0.7); }
        }

        /* inferno — smoldering crimson + ember + shadow */
        .dm-bubble[data-perks~="inferno-bubble"] {
            background: linear-gradient(135deg, #0c0a09, #7f1d1d, #0c0a09) !important;
            background-size: 200% 100% !important;
            color: #fef3c7 !important;
            animation: bubbleInferno 3.5s ease-in-out infinite alternate;
        }
        @keyframes bubbleInferno {
            0%   { background-position: 0% 50%;   box-shadow: 0 0 14px rgba(220,38,38,0.5); }
            100% { background-position: 100% 50%; box-shadow: 0 0 22px rgba(248,113,113,0.7); }
        }

        /* mercury — liquid chrome shimmer */
        .dm-bubble[data-perks~="mercury-bubble"] {
            background: linear-gradient(90deg, #94a3b8, #f1f5f9, #cbd5e1, #94a3b8) !important;
            background-size: 300% 100% !important;
            color: #0f172a !important;
            animation: bubbleMercury 4s linear infinite;
        }
        @keyframes bubbleMercury { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

        /* vortex — fast spinning rainbow rotation via hue-rotate */
        .dm-bubble[data-perks~="vortex-bubble"] {
            background: conic-gradient(from 0deg, #ef4444, #f97316, #facc15, #84cc16, #22d3ee, #a78bfa, #ec4899, #ef4444) !important;
            color: #fff !important;
            animation: bubbleVortex 4.5s linear infinite;
        }
        @keyframes bubbleVortex { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }

        /* solar — constant breathing corona + halo pulse */
        .dm-bubble[data-perks~="solar-bubble"] {
            background: radial-gradient(circle at 50% 50%, #fde047 20%, #fbbf24 55%, #f59e0b 90%) !important;
            background-size: 200% 200% !important;
            color: #1e1b3a !important;
            animation: bubbleSolarBreath 3.5s ease-in-out infinite, bubbleSolarHalo 3.5s ease-in-out infinite;
        }
        @keyframes bubbleSolarBreath {
            0%, 100% { background-size: 150% 150%; }
            50%      { background-size: 240% 240%; }
        }
        @keyframes bubbleSolarHalo {
            0%, 100% { box-shadow: 0 0 14px rgba(251,191,36,0.5),  0 0 24px rgba(254,240,138,0.3); }
            50%      { box-shadow: 0 0 28px rgba(251,191,36,0.95), 0 0 48px rgba(254,240,138,0.7); }
        }

        /* tidal — constant blue wave flow + foam crash flash */
        .dm-bubble[data-perks~="tidal-bubble"] {
            background: linear-gradient(90deg, #1e40af, #0ea5e9, #38bdf8, #0ea5e9, #1e40af) !important;
            background-size: 300% 100% !important;
            color: #fff !important;
            animation: bubbleTidalWave 4s linear infinite, bubbleTidalFoam 5s ease-in-out infinite;
        }
        @keyframes bubbleTidalWave { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
        @keyframes bubbleTidalFoam {
            0%, 80%, 100% { box-shadow: 0 0 10px rgba(56,189,248,0.4); filter: brightness(1); }
            85%           { box-shadow: 0 0 30px rgba(255,255,255,0.95); filter: brightness(1.3); }
            90%           { box-shadow: 0 0 10px rgba(56,189,248,0.4); filter: brightness(1); }
        }

        /* phantom — ethereal opacity fade */
        .dm-bubble[data-perks~="phantom-bubble"] {
            background: linear-gradient(135deg, #475569, #cbd5e1) !important;
            color: #fff !important;
            animation: bubblePhantom 5s ease-in-out infinite;
        }
        @keyframes bubblePhantom {
            0%, 100% { opacity: 1; }
            50%      { opacity: 0.55; }
        }

        /* heartbeat — pink-red double-pulse EKG via transform scale */
        .dm-bubble[data-perks~="heartbeat-bubble"] {
            background: linear-gradient(135deg, #ec4899, #dc2626) !important;
            color: #fff !important;
            transform-origin: center;
            animation: bubbleHeartbeat 1.5s ease-in-out infinite;
        }
        @keyframes bubbleHeartbeat {
            0%, 30%, 60%, 100% { transform: scale(1);    box-shadow: 0 0 12px rgba(236,72,153,0.45); }
            15%                { transform: scale(1.04); box-shadow: 0 0 22px rgba(236,72,153,0.75); }
            45%                { transform: scale(1.02); box-shadow: 0 0 16px rgba(236,72,153,0.6); }
        }

        /* disco — rapid 8-color spotlight rotation */
        .dm-bubble[data-perks~="disco-bubble"] {
            background: #ef4444 !important;
            color: #fff !important;
            animation: bubbleDisco 1.2s steps(8, end) infinite;
        }
        @keyframes bubbleDisco {
            0%   { background: #ef4444; }
            12%  { background: #f97316; }
            25%  { background: #facc15; }
            37%  { background: #84cc16; }
            50%  { background: #22d3ee; }
            62%  { background: #6366f1; }
            75%  { background: #a78bfa; }
            87%  { background: #ec4899; }
            100% { background: #ef4444; }
        }

        /* blackout — constant deep-shadow drift + sharp white outline pulse */
        .dm-bubble[data-perks~="blackout-bubble"] {
            background: linear-gradient(135deg, #0f172a, #1e293b, #0f172a) !important;
            background-size: 200% 100% !important;
            color: #fff !important;
            animation: bubbleBlackoutBg 4s ease-in-out infinite alternate, bubbleBlackoutOutline 2.5s ease-in-out infinite;
        }
        @keyframes bubbleBlackoutBg { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
        @keyframes bubbleBlackoutOutline {
            0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.5), 0 0 14px rgba(255,255,255,0.2); }
            50%      { box-shadow: 0 0 0 2px rgba(255,255,255,1),   0 0 28px rgba(255,255,255,0.6); }
        }

        /* comet — bright streak racing across via gradient sweep */
        .dm-bubble[data-perks~="comet-bubble"] {
            background: linear-gradient(90deg, #0f172a, #22d3ee 30%, #fff5f5 50%, #22d3ee 70%, #0f172a) !important;
            background-size: 200% 100% !important;
            color: #fff !important;
            animation: bubbleComet 3s linear infinite;
        }
        @keyframes bubbleComet { 0% { background-position: 200% 50%; } 100% { background-position: 0% 50%; } }

        /* liquidgold — molten gold ripple flow */
        .dm-bubble[data-perks~="liquidgold-bubble"] {
            background: linear-gradient(90deg, #b45309, #f59e0b, #fbbf24, #fde68a, #fbbf24, #f59e0b, #b45309) !important;
            background-size: 300% 100% !important;
            color: #fff !important;
            animation: bubbleLiquidgold 5s linear infinite;
        }
        @keyframes bubbleLiquidgold { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

        /* matrix — constant scrolling code-green flow + glowing text */
        .dm-bubble[data-perks~="matrix-bubble"] {
            background: linear-gradient(90deg, #022c22, #064e3b, #14532d, #064e3b, #022c22) !important;
            background-size: 300% 100% !important;
            color: #4ade80 !important;
            text-shadow: 0 0 10px rgba(74,222,128,0.8);
            animation: bubbleMatrixFlow 4s linear infinite, bubbleMatrixGlow 2s ease-in-out infinite;
        }
        @keyframes bubbleMatrixFlow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
        @keyframes bubbleMatrixGlow {
            0%, 100% { box-shadow: 0 0 12px rgba(34,197,94,0.4); }
            50%      { box-shadow: 0 0 24px rgba(34,197,94,0.85); }
        }

        /* heaven — constant white-gold radiance flow + divine beam pulse */
        .dm-bubble[data-perks~="heaven-bubble"] {
            background: linear-gradient(90deg, #fef3c7, #fde68a, #fbbf24, #fde68a, #fef3c7) !important;
            background-size: 300% 100% !important;
            color: #1e1b3a !important;
            animation: bubbleHeavenFlow 5s linear infinite, bubbleHeavenBeam 3.5s ease-in-out infinite;
        }
        @keyframes bubbleHeavenFlow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
        @keyframes bubbleHeavenBeam {
            0%, 100% { box-shadow: 0 0 14px rgba(254,240,138,0.5),   0 0 28px rgba(251,191,36,0.3); }
            50%      { box-shadow: 0 0 28px rgba(254,240,138,0.95),  0 0 48px rgba(251,191,36,0.7); }
        }

        /* synth — vaporwave hot-pink + electric-cyan flow */
        .dm-bubble[data-perks~="synth-bubble"] {
            background: linear-gradient(90deg, #ec4899, #a78bfa, #22d3ee, #a78bfa, #ec4899) !important;
            background-size: 300% 100% !important;
            color: #fff !important;
            animation: bubbleSynth 4s ease-in-out infinite;
        }
        @keyframes bubbleSynth {
            0%, 100% { background-position: 0% 50%; }
            50%      { background-position: 300% 50%; }
        }

        /* static — fast TV-noise jitter (5 steps) */
        .dm-bubble[data-perks~="static-bubble"] {
            background: #1f2937 !important;
            color: #fff !important;
            animation: bubbleStatic 0.5s steps(5, end) infinite;
        }
        @keyframes bubbleStatic {
            0%   { background: #1f2937; text-shadow: none; }
            20%  { background: #374151; text-shadow: 1px 0 0 rgba(239,68,68,0.5); }
            40%  { background: #4b5563; }
            60%  { background: #1f2937; text-shadow: -1px 0 0 rgba(59,130,246,0.5); }
            80%  { background: #6b7280; }
            100% { background: #1f2937; text-shadow: none; }
        }

        /* pixel — chunky 8-bit retro snaps */
        .dm-bubble[data-perks~="pixel-bubble"] {
            background: #84cc16 !important;
            color: #fff !important;
            font-family: monospace, monospace;
            animation: bubblePixel 1.4s steps(6, end) infinite;
        }
        @keyframes bubblePixel {
            0%   { background: #84cc16; }
            16%  { background: #ec4899; }
            33%  { background: #22d3ee; }
            50%  { background: #fbbf24; }
            66%  { background: #a78bfa; }
            83%  { background: #84cc16; }
            100% { background: #84cc16; }
        }

        /* vaporglitch — vaporwave pink+cyan stepped chromatic glitch */
        .dm-bubble[data-perks~="vaporglitch-bubble"] {
            background: linear-gradient(90deg, #ec4899, #22d3ee) !important;
            background-size: 200% 100% !important;
            color: #fff !important;
            animation: bubbleVaporglitch 1.8s steps(8, end) infinite;
        }
        @keyframes bubbleVaporglitch {
            0%   { background-position: 0% 50%;   text-shadow: 2px 0 0 rgba(244,114,182,0.7), -2px 0 0 rgba(34,211,238,0.7); }
            50%  { background-position: 50% 50%;  text-shadow: -2px 0 0 rgba(244,114,182,0.7), 2px 0 0 rgba(34,211,238,0.7); }
            100% { background-position: 100% 50%; text-shadow: 2px 0 0 rgba(244,114,182,0.7), -2px 0 0 rgba(34,211,238,0.7); }
        }

        /* === OWNER (@1v1) — animated RGB profile glow + avatar ring ===
           Applied via the 'owner-rgb' data-perks token added in
           applyLevelPerksToProfile. Highest-priority card / ring effect:
           uses !important to win over any level (veteran) or purchased
           (aqua/crimson) glows that may also be on the data-perks list. */
        @keyframes owner-rgb-card {
            0%   { box-shadow: 0 0 0 1px rgba(239,68,68,0.7),  0 0 50px rgba(239,68,68,0.4); }
            14%  { box-shadow: 0 0 0 1px rgba(245,158,11,0.7), 0 0 50px rgba(245,158,11,0.4); }
            28%  { box-shadow: 0 0 0 1px rgba(250,204,21,0.7), 0 0 50px rgba(250,204,21,0.4); }
            42%  { box-shadow: 0 0 0 1px rgba(16,185,129,0.7), 0 0 50px rgba(16,185,129,0.4); }
            57%  { box-shadow: 0 0 0 1px rgba(56,189,248,0.7), 0 0 50px rgba(56,189,248,0.4); }
            71%  { box-shadow: 0 0 0 1px rgba(99,102,241,0.7), 0 0 50px rgba(99,102,241,0.4); }
            85%  { box-shadow: 0 0 0 1px rgba(168,85,247,0.7), 0 0 50px rgba(168,85,247,0.4); }
            100% { box-shadow: 0 0 0 1px rgba(236,72,153,0.7), 0 0 50px rgba(236,72,153,0.4); }
        }
        @keyframes owner-rgb-ring {
            0%   { box-shadow: 0 0 0 3px #ef4444, 0 0 18px rgba(239,68,68,0.7); }
            14%  { box-shadow: 0 0 0 3px #f59e0b, 0 0 18px rgba(245,158,11,0.7); }
            28%  { box-shadow: 0 0 0 3px #facc15, 0 0 18px rgba(250,204,21,0.7); }
            42%  { box-shadow: 0 0 0 3px #10b981, 0 0 18px rgba(16,185,129,0.7); }
            57%  { box-shadow: 0 0 0 3px #38bdf8, 0 0 18px rgba(56,189,248,0.7); }
            71%  { box-shadow: 0 0 0 3px #6366f1, 0 0 18px rgba(99,102,241,0.7); }
            85%  { box-shadow: 0 0 0 3px #a855f7, 0 0 18px rgba(168,85,247,0.7); }
            100% { box-shadow: 0 0 0 3px #ec4899, 0 0 18px rgba(236,72,153,0.7); }
        }
        .profile-card[data-perks~="owner-rgb"] {
            animation: owner-rgb-card 6s linear infinite !important;
        }
        [data-perks~="owner-rgb"].avatar-frame,
        [data-perks~="owner-rgb"] .avatar-circle,
        img[data-perks~="owner-rgb"] {
            animation: owner-rgb-ring 6s linear infinite !important;
            border-color: transparent !important;
        }
        /* owner-rgb bio: animated rainbow border around #profile-bio +
           the store-preview .preview-bio. !important so it wins over
           any regular bio-glow perk @1v1 might have purchased — the
           owner ring is exclusive to the owner and outranks paid sets.
           Same 6s cadence as owner-rgb-card so all three surfaces
           (card / ring / bio) cycle in lockstep. */
        @keyframes owner-rgb-bio {
            0%   { border-color: #ef4444; box-shadow: 0 0 14px rgba(239,68,68,0.5),  0 0 26px rgba(239,68,68,0.2); }
            14%  { border-color: #f59e0b; box-shadow: 0 0 14px rgba(245,158,11,0.5), 0 0 26px rgba(245,158,11,0.2); }
            28%  { border-color: #facc15; box-shadow: 0 0 14px rgba(250,204,21,0.5), 0 0 26px rgba(250,204,21,0.2); }
            42%  { border-color: #10b981; box-shadow: 0 0 14px rgba(16,185,129,0.5), 0 0 26px rgba(16,185,129,0.2); }
            57%  { border-color: #38bdf8; box-shadow: 0 0 14px rgba(56,189,248,0.5), 0 0 26px rgba(56,189,248,0.2); }
            71%  { border-color: #6366f1; box-shadow: 0 0 14px rgba(99,102,241,0.5), 0 0 26px rgba(99,102,241,0.2); }
            85%  { border-color: #a855f7; box-shadow: 0 0 14px rgba(168,85,247,0.5), 0 0 26px rgba(168,85,247,0.2); }
            100% { border-color: #ec4899; box-shadow: 0 0 14px rgba(236,72,153,0.5), 0 0 26px rgba(236,72,153,0.2); }
        }
        #profile-bio[data-perks~="owner-rgb"],
        .preview-bio[data-perks~="owner-rgb"] {
            animation: owner-rgb-bio 6s linear infinite !important;
        }

        /* === STORE PANEL === */
        .store-balance-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 10px 16px; margin: 0 0 10px;
            background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(168,85,247,0.10));
            border-bottom: 1px solid var(--border);
        }
        .store-balance-label { font-size: 0.78rem; color: var(--muted); }
        .store-balance-amount { font-size: 1.1rem; font-weight: 800; color: #fde68a; }
        /* Tab strip above the grid — one button per category. Scrolls
           horizontally on narrow screens (when more tabs land than fit
           in the modal width). The bottom border is the resting state;
           the active tab repaints it cyan to read like an underline. */
        .store-tabs-wrap {
            display: flex; align-items: stretch; gap: 0;
            border-bottom: 1px solid var(--border);
            margin-bottom: 10px;
            position: relative;
        }
        .store-tabs {
            display: flex; gap: 4px; padding: 2px 4px 8px;
            overflow-x: auto; -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            flex: 1; min-width: 0;
            scroll-behavior: smooth;
        }
        .store-tabs::-webkit-scrollbar { display: none; }
        /* Arrow buttons flank the tab strip on each end. Visible on
           desktop where there's no touch swipe; tappable on mobile too
           but mostly redundant there. Faded out when at the scroll
           edge so users get a visual cue they're at the start/end. */
        .store-tabs-arrow {
            background: transparent; border: none; cursor: pointer;
            padding: 0 8px;
            font-family: inherit; font-size: 1.4rem; font-weight: 800;
            color: var(--muted); line-height: 1;
            min-height: auto; min-width: 28px; width: 28px;
            display: flex; align-items: center; justify-content: center;
            transition: color 0.15s, opacity 0.15s;
            flex: 0 0 auto;
        }
        .store-tabs-arrow:hover { color: var(--accent); }
        .store-tabs-arrow.at-edge {
            opacity: 0.25; cursor: default; pointer-events: none;
        }
        .store-tab {
            background: transparent; border: none; cursor: pointer;
            padding: 8px 12px;
            font-family: inherit; font-size: 0.82rem; font-weight: 700;
            color: var(--muted);
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
            display: inline-flex; align-items: center; gap: 6px;
            white-space: nowrap;
            transition: color 0.15s, border-color 0.15s;
            min-height: auto; line-height: 1.2;
        }
        .store-tab:hover { color: var(--text); }
        .store-tab.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
        }
        .store-tab-count {
            background: rgba(148,163,184,0.18); color: var(--muted);
            padding: 1px 7px; border-radius: 999px;
            font-size: 0.66rem; font-weight: 800;
            min-width: 18px; text-align: center;
        }
        .store-tab.active .store-tab-count {
            background: rgba(56,189,248,0.22); color: var(--accent);
        }

        /* Denser grid + tighter cards — with tabs splitting the catalog
           into chunks of ~5-9 items, the previous wide cards left a lot
           of vertical waste. minmax(128px) lets two cards fit on the
           narrowest profile-modal width, three on tablets+. */
        .store-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
            gap: 10px; padding: 0 4px;
        }
        .store-item {
            background: var(--bg-input); border: 1px solid var(--border);
            border-radius: 12px; padding: 12px 10px 10px; text-align: center;
            display: flex; flex-direction: column; align-items: center; gap: 5px;
            position: relative;
            transition: border-color 0.2s, transform 0.2s, background 0.2s, opacity 0.2s;
        }
        .store-item.affordable { border-color: rgba(56,189,248,0.4); }
        .store-item.affordable:hover { transform: translateY(-2px); border-color: var(--accent); }
        /* Owned cards fade back so the eye lands on what's still
           buyable. Sort already pushes them to the bottom of the tab. */
        .store-item.owned {
            border-color: rgba(16,185,129,0.45);
            background: rgba(16,185,129,0.04);
            opacity: 0.55;
        }
        .store-item.owned:hover { opacity: 1; }
        .store-item.locked { opacity: 0.7; }
        /* Rarity pill — small chip in the top-right corner of the card.
           Same color scheme as the inventory pills (rarity-common ...
           rarity-ultra), and rarity-ultra inherits the animated gradient
           from the inventory rule via the shared selector below. */
        .store-item-rarity {
            position: absolute; top: 7px; right: 7px;
            font-size: 0.58rem; font-weight: 800; text-transform: uppercase;
            letter-spacing: 0.06em; padding: 1px 6px; border-radius: 999px;
            line-height: 1.4;
        }
        .store-item-rarity.rarity-common    { background: rgba(148,163,184,0.18); color: #cbd5e1; }
        .store-item-rarity.rarity-uncommon  { background: rgba(16,185,129,0.18); color: var(--emerald); }
        .store-item-rarity.rarity-rare      { background: rgba(56,189,248,0.18); color: var(--accent); }
        .store-item-rarity.rarity-epic      { background: rgba(168,85,247,0.18); color: #c084fc; }
        .store-item-rarity.rarity-legendary { background: rgba(245,158,11,0.18); color: #fde68a; }
        /* rarity-ultra on the store card pill reuses the animated
           fire→cosmic gradient already defined for the inventory pill. */
        .store-item-rarity.rarity-ultra {
            background-image:
                linear-gradient(90deg, #ef4444, #f97316, #fbbf24, #a855f7, #6366f1, #ef4444),
                linear-gradient(90deg, rgba(239,68,68,0.22), rgba(249,115,22,0.20), rgba(168,85,247,0.22), rgba(99,102,241,0.22), rgba(239,68,68,0.22));
            background-size: 300% auto, 300% auto;
            background-clip: text, padding-box;
            -webkit-background-clip: text, padding-box;
            -webkit-text-fill-color: transparent;
            color: transparent;
            border: 1px solid rgba(255,255,255,0.18);
            font-weight: 900;
            animation: rarityUltraPill 3.5s linear infinite;
        }
        .store-item.rarity-ultra {
            border: 1px solid transparent;
            background:
                linear-gradient(var(--bg-input), var(--bg-input)) padding-box,
                linear-gradient(135deg, #ef4444, #f97316, #a855f7, #6366f1) border-box;
            box-shadow: 0 0 14px rgba(239,68,68,0.18), 0 0 22px rgba(168,85,247,0.18);
        }
        .store-item-icon { font-size: 1.5rem; line-height: 1; min-height: 28px; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
        .store-item-icon-img { width: 32px; height: 32px; object-fit: contain; display: block; }
        .store-item-name { font-weight: 800; font-size: 0.78rem; color: var(--text); line-height: 1.2; }
        .store-item-desc {
            font-size: 0.66rem; color: var(--muted); line-height: 1.32; min-height: 26px;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .store-item-price { font-size: 0.74rem; font-weight: 800; color: #fde68a; margin-top: 1px; }
        .store-buy-btn {
            background: var(--accent); color: var(--bg-base);
            padding: 6px 12px; border-radius: 999px;
            font-size: 0.74rem; font-weight: 800; border: none; cursor: pointer;
            font-family: inherit; min-height: auto; width: auto; line-height: 1;
            box-shadow: 0 2px 8px rgba(56,189,248,0.35);
        }
        .store-buy-btn:hover:not(:disabled) { transform: translateY(-1px); }
        .store-buy-btn:disabled { background: var(--bg-card); color: var(--muted); cursor: not-allowed; box-shadow: none; }
        .store-owned-tag {
            background: rgba(16,185,129,0.18); color: var(--emerald);
            padding: 5px 12px; border-radius: 999px;
            font-size: 0.74rem; font-weight: 800; border: 1px solid rgba(16,185,129,0.35);
        }
        .store-fineprint {
            margin-top: 14px; padding: 10px 4px 0;
            font-size: 0.7rem; color: var(--muted); text-align: center; opacity: 0.85;
        }
        .store-actions-row {
            display: flex; justify-content: flex-end;
            padding: 0 4px 8px;
        }
        .store-inventory-btn {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 6px 12px; font-size: 0.78rem; font-weight: 700;
            min-height: auto; width: auto;
        }
        .store-inv-count-pill {
            display: inline-flex; align-items: center;
            background: rgba(56,189,248,0.18); color: var(--accent);
            padding: 1px 7px; border-radius: 999px; font-weight: 800;
            font-size: 0.68rem;
        }

        /* === STORE LIVE PREVIEW MODAL === */
        .store-preview-modal {
            position: fixed; inset: 0;
            background: rgba(15,23,42,0.85); backdrop-filter: blur(8px);
            display: none; align-items: center; justify-content: center;
            z-index: 1500; padding: 20px;
            opacity: 0;
            transition: opacity 0.25s ease;
        }
        .store-preview-modal.open { display: flex; opacity: 1; }
        .store-preview-shell {
            width: 100%; max-width: 420px;
            background: var(--bg-card);
            border: 1px solid rgba(245,158,11,0.55);
            border-radius: 18px;
            box-shadow: 0 0 32px rgba(245,158,11,0.22), 0 12px 40px rgba(0,0,0,0.5);
            transform: translateY(24px) scale(0.96);
            transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
            display: flex; flex-direction: column;
            overflow: hidden;
            max-height: 90vh;
        }
        .store-preview-modal.open .store-preview-shell { transform: translateY(0) scale(1); }
        .store-preview-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 14px 18px;
            border-bottom: 1px solid var(--border);
            background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(168,85,247,0.05));
        }
        .store-preview-title { font-size: 0.95rem; font-weight: 800; color: var(--text); }
        .store-preview-title span { color: #fde68a; }
        .store-preview-stage {
            padding: 18px 14px;
            background:
                radial-gradient(circle at 50% 0%, rgba(245,158,11,0.06), transparent 60%),
                var(--bg-base);
            display: flex; justify-content: center;
        }
        /* Mock DM thread for bubble previews. Mirrors the real
           .dm-messages-list layout (column flex, rows aligned to one
           side). Width-clamped so the bubble sits centered in the modal
           rather than spanning edge-to-edge. */
        .store-preview-bubble-stage {
            width: 100%; max-width: 360px;
            display: flex; flex-direction: column; gap: 10px;
            padding: 10px 4px 16px;
        }
        .store-preview-bubble-stage .dm-msg-wrap.sent     { align-items: flex-end; }
        .store-preview-bubble-stage .dm-msg-wrap.received { align-items: flex-start; }
        /* Doubled selector to win against base .profile-card sizing/positioning
           rules. The preview card sits inline inside the modal, no slide-up
           transform, no max-height clamp, no overflow scroll. */
        .preview-card.preview-card {
            transform: none !important;
            position: relative !important;
            align-self: stretch !important;
            width: 100% !important;
            max-width: 360px !important;
            min-height: 0 !important;
            max-height: none !important;
            height: auto !important;
            overflow: visible !important;
            margin: 0 auto !important;
            border-radius: 16px !important;
            border: 1px solid var(--border) !important;
            padding: 28px 22px 24px !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 10px !important;
        }
        .preview-avatar-wrap { display: flex; justify-content: center; }
        .preview-card .preview-avatar-circle {
            width: 96px; height: 96px; border-radius: 50%;
            overflow: hidden; display: block;
            border: 2px solid var(--border); position: relative;
            background: var(--bg-input);
        }
        .preview-card .preview-avatar-circle img {
            width: 100%; height: 100%; object-fit: cover; display: block;
        }
        .preview-card .preview-username {
            text-align: center; font-size: 1.15rem; font-weight: 800;
            color: var(--accent); margin: 4px 0 6px; line-height: 1.2;
        }
        .preview-card .preview-bio {
            text-align: center; font-size: 0.82rem; color: var(--muted);
            padding: 8px 16px; background: var(--bg-input);
            border: 1px solid var(--border); border-radius: 999px;
            max-width: 100%;
        }
        .store-preview-footer {
            padding: 12px 16px 14px;
            border-top: 1px solid var(--border);
            background: var(--bg-card);
        }
        .store-preview-hint {
            font-size: 0.7rem; color: var(--muted); text-align: center;
            margin-bottom: 10px; opacity: 0.85;
        }
        .store-preview-actions {
            display: flex; gap: 8px;
        }
        .store-preview-actions button { flex: 1; padding: 10px 14px; }

        /* Store card Preview button — small text-style sibling of Buy */
        .store-preview-btn {
            background: transparent;
            color: var(--muted);
            border: 1px solid var(--border);
            padding: 5px 10px; border-radius: 999px;
            font-size: 0.7rem; font-weight: 700;
            cursor: pointer; font-family: inherit;
            min-height: auto; width: auto; line-height: 1;
            transition: color 0.15s, border-color 0.15s, background 0.15s;
            margin-bottom: 4px;
        }
        .store-preview-btn:hover {
            color: var(--accent);
            border-color: var(--accent);
            background: rgba(56,189,248,0.06);
        }

        /* === INVENTORY PANEL === */
        .inv-empty {
            text-align: center; padding: 32px 14px;
            display: flex; flex-direction: column; align-items: center; gap: 6px;
        }
        .inv-empty-icon { font-size: 2.4rem; opacity: 0.85; }
        .inv-empty-title { font-size: 1rem; font-weight: 800; color: var(--text); }
        .inv-empty-sub { font-size: 0.78rem; color: var(--muted); }
        .inv-category { margin-bottom: 16px; }
        .inv-category-label {
            font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.06em; color: var(--muted);
            margin: 0 4px 8px; padding-bottom: 4px;
            border-bottom: 1px solid var(--border);
        }
        .inv-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 10px;
        }
        .inv-item {
            background: var(--bg-input); border: 1px solid var(--border);
            border-radius: 12px; padding: 12px 10px; text-align: center;
            display: flex; flex-direction: column; align-items: center; gap: 5px;
            position: relative; transition: border-color 0.2s, transform 0.2s, background 0.2s;
        }
        .inv-item:hover { transform: translateY(-2px); border-color: var(--accent); }
        .inv-item.equipped {
            border-color: rgba(16,185,129,0.55);
            background: rgba(16,185,129,0.05);
            box-shadow: 0 0 14px rgba(16,185,129,0.15);
        }
        .inv-item-icon { font-size: 1.7rem; line-height: 1; min-height: 30px; display: flex; align-items: center; justify-content: center; }
        .inv-item-icon-img { width: 32px; height: 32px; object-fit: contain; display: block; }
        .inv-item-name { font-weight: 800; font-size: 0.82rem; color: var(--text); }
        .inv-item-rarity {
            font-size: 0.62rem; font-weight: 800; text-transform: uppercase;
            letter-spacing: 0.06em; padding: 1px 7px; border-radius: 999px;
        }
        .inv-item-rarity.rarity-common    { background: rgba(148,163,184,0.18); color: #cbd5e1; }
        .inv-item-rarity.rarity-uncommon  { background: rgba(16,185,129,0.18); color: var(--emerald); }
        .inv-item-rarity.rarity-rare      { background: rgba(56,189,248,0.18); color: var(--accent); }
        .inv-item-rarity.rarity-epic      { background: rgba(168,85,247,0.18); color: #c084fc; }
        .inv-item-rarity.rarity-legendary { background: rgba(245,158,11,0.18); color: #fde68a; }
        /* rarity-ultra: animated fire→cosmic gradient pill — tinted
           background slides through ember + violet stops while a bright
           gradient slides through the "ULTRA" text. Faster cadence than
           the username shimmers so it catches the eye in the inventory
           grid. Dual background trick (clip: text + padding-box) lets a
           single element animate both surfaces in lockstep. */
        .inv-item-rarity.rarity-ultra {
            background-image:
                linear-gradient(90deg, #ef4444, #f97316, #fbbf24, #a855f7, #6366f1, #ef4444),
                linear-gradient(90deg, rgba(239,68,68,0.22), rgba(249,115,22,0.20), rgba(168,85,247,0.22), rgba(99,102,241,0.22), rgba(239,68,68,0.22));
            background-size: 300% auto, 300% auto;
            background-clip: text, padding-box;
            -webkit-background-clip: text, padding-box;
            -webkit-text-fill-color: transparent;
            color: transparent;
            border: 1px solid rgba(255,255,255,0.18);
            font-weight: 900;
            animation: rarityUltraPill 3.5s linear infinite;
        }
        @keyframes rarityUltraPill {
            0%   { background-position: 0% 50%, 0% 50%; }
            100% { background-position: 300% 50%, 300% 50%; }
        }
        /* inv-item.rarity-ultra: card itself glows fire→cosmic when
           equipped panel houses an ultra item. Distinctive border
           combining red+purple so ultra items pop in the inventory grid
           even before you read the rarity pill. */
        .inv-item.rarity-ultra {
            border: 1px solid transparent;
            background:
                linear-gradient(var(--bg-input), var(--bg-input)) padding-box,
                linear-gradient(135deg, #ef4444, #f97316, #a855f7, #6366f1) border-box;
            box-shadow: 0 0 18px rgba(239,68,68,0.18), 0 0 28px rgba(168,85,247,0.18);
        }
        .inv-item.rarity-ultra:hover {
            transform: translateY(-2px);
            box-shadow: 0 0 22px rgba(239,68,68,0.35), 0 0 32px rgba(168,85,247,0.3);
        }
        .inv-item.rarity-ultra.equipped {
            background:
                linear-gradient(rgba(16,185,129,0.05), rgba(16,185,129,0.05)) padding-box,
                linear-gradient(135deg, #ef4444, #f97316, #a855f7, #6366f1) border-box;
            box-shadow: 0 0 20px rgba(239,68,68,0.25), 0 0 30px rgba(168,85,247,0.25), 0 0 14px rgba(16,185,129,0.2);
        }
        .inv-equipped-tag {
            font-size: 0.66rem; font-weight: 800; color: var(--emerald);
            background: rgba(16,185,129,0.15); padding: 2px 8px; border-radius: 999px;
            border: 1px solid rgba(16,185,129,0.35);
        }
        .inv-equip-btn, .inv-unequip-btn {
            padding: 6px 12px; border-radius: 999px;
            font-size: 0.74rem; font-weight: 800; border: none; cursor: pointer;
            font-family: inherit; min-height: auto; width: auto; line-height: 1;
            transition: transform 0.15s, box-shadow 0.15s;
        }
        .inv-equip-btn {
            background: var(--accent); color: var(--bg-base);
            box-shadow: 0 2px 8px rgba(56,189,248,0.35);
        }
        .inv-equip-btn:hover { transform: translateY(-1px); }
        .inv-unequip-btn {
            background: var(--bg-card); color: var(--muted);
            border: 1px solid var(--border);
        }
        .inv-unequip-btn:hover { color: var(--danger); border-color: rgba(239,68,68,0.5); }

        /* Level Reward tag — replaces the equip button on auto-applied
           level perks. Amber/gold accent so it's visually distinct from
           the blue "Equip" / green "✓ Equipped" pills. */
        .inv-source-tag {
            font-size: 0.66rem; font-weight: 800;
            padding: 5px 10px; border-radius: 999px;
            text-align: center; letter-spacing: 0.02em;
        }
        .inv-level-tag {
            background: linear-gradient(135deg, rgba(245,158,11,0.16), rgba(168,85,247,0.12));
            color: #fde68a;
            border: 1px solid rgba(245,158,11,0.4);
        }
        .inv-item.is-level-reward {
            background: linear-gradient(180deg, rgba(245,158,11,0.04), rgba(168,85,247,0.04));
            border-color: rgba(245,158,11,0.35);
        }
        .inv-item.is-level-reward.equipped {
            border-color: rgba(245,158,11,0.55);
            box-shadow: 0 0 14px rgba(245,158,11,0.2);
            background: linear-gradient(180deg, rgba(245,158,11,0.08), rgba(168,85,247,0.06));
        }

        /* Lv 25 / 35 — profile card glow (subtle vs strong) */
        .profile-card[data-perks~="vip"]:not([data-perks~="veteran"]) {
            box-shadow: 0 0 0 1px rgba(168,85,247,0.4), 0 0 30px rgba(168,85,247,0.18);
        }
        .profile-card[data-perks~="veteran"] {
            box-shadow: 0 0 0 1px rgba(245,158,11,0.5), 0 0 50px rgba(245,158,11,0.28), 0 0 80px rgba(168,85,247,0.15);
            animation: veteranCardPulse 5s ease-in-out infinite;
        }
        @keyframes veteranCardPulse {
            0%, 100% { box-shadow: 0 0 0 1px rgba(245,158,11,0.5), 0 0 50px rgba(245,158,11,0.28), 0 0 80px rgba(168,85,247,0.15); }
            50%      { box-shadow: 0 0 0 1px rgba(245,158,11,0.7), 0 0 70px rgba(245,158,11,0.4),  0 0 100px rgba(168,85,247,0.22); }
        }

        /* Lv 25 — VIP badge after username */
        .vip-badge {
            display: inline-flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, #a855f7, #ec4899);
            color: white; padding: 2px 8px; border-radius: 999px;
            font-size: 0.6rem; font-weight: 900; letter-spacing: 0.08em;
            margin-left: 6px; vertical-align: middle; line-height: 1.2;
            box-shadow: 0 2px 6px rgba(168,85,247,0.4);
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        }

        /* Lv 50 — Legendary gold animated username with sparkle particles */
        @keyframes lv-legendary-shimmer {
            0%, 100% { background-position: 0% 50%; }
            50%      { background-position: 100% 50%; }
        }
        @keyframes lv-sparkle-1 {
            0%   { opacity: 0; transform: translate(0, 0)   scale(0.4) rotate(0deg); }
            30%  { opacity: 1; transform: translate(-6px, -6px) scale(1) rotate(120deg); }
            70%  { opacity: 1; transform: translate(-10px, -10px) scale(0.8) rotate(240deg); }
            100% { opacity: 0; transform: translate(-14px, -14px) scale(0.4) rotate(360deg); }
        }
        @keyframes lv-sparkle-2 {
            0%   { opacity: 0; transform: translate(0, 0)  scale(0.4) rotate(0deg); }
            40%  { opacity: 1; transform: translate(8px, -4px) scale(0.9) rotate(-120deg); }
            80%  { opacity: 1; transform: translate(12px, -2px) scale(0.7) rotate(-240deg); }
            100% { opacity: 0; transform: translate(16px, 0) scale(0.4) rotate(-360deg); }
        }
        .legendary-username {
            position: relative; display: inline-block;
            background-image: linear-gradient(90deg,
                #fbbf24, #fef3c7, #f59e0b, #fef08a, #d97706, #fbbf24
            );
            background-size: 300% 100%;
            background-clip: text; -webkit-background-clip: text;
            -webkit-text-fill-color: transparent; color: transparent;
            font-weight: 900;
            animation: lv-legendary-shimmer 3.5s ease-in-out infinite;
            text-shadow: 0 0 12px rgba(245,158,11,0.5);
            padding: 0 2px;
        }
        .legendary-username::before,
        .legendary-username::after {
            content: '✨'; position: absolute; top: -2px;
            font-size: 0.7em; -webkit-text-fill-color: initial; color: #fef3c7;
            pointer-events: none;
            text-shadow: 0 0 6px #fbbf24;
        }
        .legendary-username::before {
            left: -8px;
            animation: lv-sparkle-1 2.2s ease-in-out infinite;
        }
        .legendary-username::after {
            right: -8px;
            animation: lv-sparkle-2 2.6s ease-in-out infinite 0.4s;
        }

        /* Priority queue indicator on the matching screen */
        .priority-queue-pill {
            display: none; align-items: center; justify-content: center; gap: 6px;
            background: linear-gradient(135deg, #f59e0b, #ec4899);
            color: white; font-weight: 700; font-size: 0.78rem;
            padding: 6px 12px; border-radius: 999px;
            margin: 0 auto 12px; max-width: 220px; width: max-content;
            box-shadow: 0 4px 14px rgba(245,158,11,0.4);
            animation: priorityPulse 2s ease-in-out infinite;
        }
        .priority-queue-pill.show { display: inline-flex; }
        @keyframes priorityPulse {
            0%, 100% { box-shadow: 0 4px 14px rgba(245,158,11,0.4); transform: scale(1); }
            50%      { box-shadow: 0 4px 22px rgba(245,158,11,0.65); transform: scale(1.03); }
        }

        /* === SMALL LEVEL CHIP — used next to usernames === */
        .level-chip {
            display: inline-block; vertical-align: middle;
            font-size: 0.62rem; font-weight: 800; line-height: 1;
            color: white;
            background: linear-gradient(135deg, var(--accent), #6366f1);
            padding: 3px 7px; border-radius: 999px;
            margin-left: 6px; letter-spacing: 0.02em;
            box-shadow: 0 1px 3px rgba(56,189,248,0.3);
        }

        /* === FLOATING +XP TOAST === */
        @keyframes xpFloat {
            0%   { opacity: 0; transform: translate(-50%, 0) scale(0.8); }
            15%  { opacity: 1; transform: translate(-50%, -10px) scale(1.05); }
            85%  { opacity: 1; transform: translate(-50%, -50px) scale(1); }
            100% { opacity: 0; transform: translate(-50%, -90px) scale(0.95); }
        }
        .xp-float-wrap {
            position: fixed; top: 18%; left: 50%;
            display: flex; flex-direction: column; align-items: center; gap: 6px;
            pointer-events: none; z-index: 2000;
        }
        .xp-float {
            /* Warm accent leads into emerald — emotional / aspirational
               moment (XP gain) gets the warm pink rather than the cool
               sky-blue used everywhere else. Sets the second-color
               story without recoloring the rest of the app. */
            background: linear-gradient(135deg, var(--accent-warm), var(--emerald));
            color: white; font-weight: 800; font-size: 1rem;
            padding: 8px 16px; border-radius: 999px;
            box-shadow: 0 8px 24px -4px var(--accent-warm-glow), 0 4px 10px rgba(0,0,0,0.4);
            animation: xpFloat 2.4s ease-out forwards;
            white-space: nowrap;
        }
        .xp-float .xp-source { font-size: 0.7rem; opacity: 0.9; margin-left: 6px; font-weight: 600; }

        /* === LEVEL UP MODAL — full overlay celebration === */
        @keyframes levelUpBurst {
            0%   { opacity: 0; transform: scale(0.5) rotate(-8deg); }
            50%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
            100% { opacity: 1; transform: scale(1) rotate(0); }
        }
        @keyframes levelUpGlow {
            0%, 100% { box-shadow: 0 0 60px rgba(56,189,248,0.5), 0 0 120px rgba(168,85,247,0.3); }
            50%      { box-shadow: 0 0 100px rgba(56,189,248,0.8), 0 0 180px rgba(168,85,247,0.55); }
        }
        .levelup-overlay {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.85); backdrop-filter: blur(10px);
            display: none; align-items: center; justify-content: center;
            z-index: 3000; padding: 20px;
        }
        .levelup-overlay.open { display: flex; }
        .levelup-card {
            background: linear-gradient(135deg, #1e293b, #0f172a);
            border: 2px solid var(--accent); border-radius: 24px;
            padding: 40px 32px; max-width: 380px; width: 100%;
            text-align: center; position: relative;
            animation: levelUpBurst 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
                       levelUpGlow 2.4s ease-in-out infinite;
        }
        .levelup-card .lu-emoji { font-size: 4rem; line-height: 1; margin-bottom: 8px; }
        .levelup-card .lu-title {
            font-size: 1.6rem; font-weight: 900; margin-bottom: 4px;
            background: linear-gradient(90deg, var(--accent), #a855f7, #ec4899);
            background-size: 200% 100%;
            -webkit-background-clip: text; background-clip: text;
            color: transparent;
            animation: rgb-username-shift 3s linear infinite;
        }
        .levelup-card .lu-sub { color: var(--muted); font-size: 0.92rem; margin-bottom: 20px; }
        .levelup-card .lu-level {
            /* Warm-pink -> sky gradient — emotional moment ("you leveled
               up") gets the second-accent color story instead of the
               default sky/emerald. */
            display: inline-block; font-size: 3rem; font-weight: 900;
            background: linear-gradient(135deg, var(--accent-warm), var(--accent));
            -webkit-background-clip: text; background-clip: text;
            color: transparent; line-height: 1; margin: 4px 0;
        }
        .levelup-card .lu-reward {
            background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3);
            border-radius: 10px; padding: 10px 14px; margin: 16px 0;
            color: #f59e0b; font-size: 0.88rem; font-weight: 600;
        }
        .levelup-card .lu-btn {
            background: var(--accent); color: var(--bg-base);
            border: none; border-radius: 10px; padding: 12px 24px;
            font-weight: 700; font-size: 0.95rem; cursor: pointer; width: 100%;
            margin-top: 8px;
        }
        .levelup-card .lu-btn:hover { background: var(--accent-hover); }

        /* Section headers in achievements */
        .ach-section-title {
            font-size: 0.78rem; color: var(--muted); text-transform: uppercase;
            letter-spacing: 0.08em; font-weight: 700; margin: 16px 0 8px;
        }

        /* Verified / Trusted badge */
        .verified-tick { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--bg-base); width: 16px; height: 16px; border-radius: 50%; font-size: 0.7rem; font-weight: 900; margin-left: 4px; vertical-align: middle; }
        .trusted-tick  { display: inline-flex; align-items: center; justify-content: center; background: var(--emerald); color: var(--bg-base); width: 16px; height: 16px; border-radius: 50%; font-size: 0.7rem; font-weight: 900; margin-left: 4px; vertical-align: middle; }

        /* Leaderboard rows */
        .leader-row { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; }
        .leader-rank { font-weight: 800; color: var(--muted); font-size: 1rem; min-width: 24px; text-align: center; }
        .leader-rank.gold { color: #fbbf24; }
        .leader-rank.silver { color: #d1d5db; }
        .leader-rank.bronze { color: #cd7f32; }

        /* Friend of the Week — warm-pink + sky gradient since this is
           the most "about you" celebratory ribbon in the app. Carried
           the second-accent color story so it stands out from generic
           emerald accents. */
        .fotw-card {
            background: linear-gradient(135deg, rgba(244,114,182,0.18), rgba(56,189,248,0.18));
            border: 1px solid rgba(244,114,182,0.5);
            border-radius: 12px; padding: 14px; margin-bottom: 12px;
        }
        .fotw-label { font-size: 0.7rem; color: var(--accent-warm); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; }

        /* Super-like star */
        .super-like-btn { background: none; border: none; color: var(--muted); font-size: 0.95rem; cursor: pointer; padding: 0 4px; width: auto; min-height: auto; }
        .super-like-btn:hover, .super-like-btn.super { color: #fbbf24; }

        /* Stories — full-width Post CTA at the top of the panel.
           Replaces the legacy avatar strip (which duplicated the cards
           below and didn't scale beyond a handful of stories). */
        .stories-post-btn { width: 100%; margin: 14px 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
        .stories-post-btn .btn-icon { width: 18px; height: 18px; flex-shrink: 0; }
        /* Legacy strip rules — kept for any cached DOM that still has
           .story-bubble around; new renders don't emit these elements. */
        .stories-strip { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 14px; }
        .story-bubble {
            flex-shrink: 0; width: 68px; cursor: pointer; text-align: center;
            transition: transform 0.15s ease;
        }
        .story-bubble:hover { transform: translateY(-2px); }
        .story-avatar-ring {
            width: 60px; height: 60px; border-radius: 50%; padding: 3px;
            background: linear-gradient(135deg, var(--accent), var(--emerald));
            transition: box-shadow 0.2s;
        }
        .story-avatar-ring.listened { background: var(--border); }
        .story-avatar-ring img { width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--bg-card); object-fit: cover; }
        .story-name { font-size: 0.72rem; color: var(--text); margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
        .story-add { background: var(--bg-input); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--accent); border: 1px dashed var(--accent); }
        /* Playing state — pulse the ring */
        .story-bubble.playing .story-avatar-ring,
        .story-row.playing .story-row-avatar { box-shadow: 0 0 0 3px var(--emerald), 0 0 18px rgba(16,185,129,0.6); animation: speakingPulse 0.9s ease-in-out infinite; }
        .story-bubble.playing .story-name { color: var(--emerald); }
        /* Story list rows — calm card with the Play button anchored
           on the right. Username + flat metadata line ("Xs · N listens
           · Yh left") in the middle. No pill backgrounds — they were
           creating a stack of competing chips. */
        .story-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 14px; transition: border-color 0.15s, transform 0.15s; position: relative; }
        .story-row:hover { border-color: var(--accent); }
        .story-row-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--border); cursor: pointer; transition: transform 0.15s; }
        .story-row-avatar:hover { transform: scale(1.06); }
        .story-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
        .story-row-name { font-weight: 700; color: var(--text); font-size: 0.95rem; cursor: pointer; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .story-row-name:hover { color: var(--accent); }
        .story-row-meta {
            font-size: 0.78rem; color: var(--muted); line-height: 1.2;
            display: flex; align-items: center; gap: 6px;
            flex-wrap: nowrap; white-space: nowrap;
        }
        .story-row-meta > * { flex-shrink: 0; }
        .story-row-meta .meta-expires { color: #fbbf24; font-weight: 600; }
        .story-play-btn {
            background: linear-gradient(135deg, var(--accent), var(--accent-hover));
            color: var(--bg-base);
            border: none;
            border-radius: 50%;
            width: 40px; height: 40px;
            font-weight: 700; font-size: 0.95rem;
            cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center;
            min-height: auto; padding: 0;
            box-shadow: 0 6px 16px -4px rgba(56,189,248,0.45);
            transition: transform 0.18s cubic-bezier(.2,.8,.2,1), filter 0.18s ease;
            flex-shrink: 0;
        }
        .story-play-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
        .story-play-btn:active { transform: translateY(0); }
        .story-row.playing .story-play-btn { background: linear-gradient(135deg, var(--emerald), var(--emerald-dark)); box-shadow: 0 6px 16px -4px rgba(16,185,129,0.5); }

        /* Live rooms */
        .live-room-row {
            display: flex; align-items: center; gap: 10px;
            background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px;
            padding: 12px 14px;
        }
        .live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: pulse 1.4s infinite; flex-shrink: 0; }
        .live-pill { background: var(--danger); color: white; font-weight: 700; font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; letter-spacing: 1px; }

        /* Wave button on profile */
        .wave-btn {
            background: rgba(251,191,36,0.14); color: #fbbf24;
            border: 1.5px solid rgba(251,191,36,0.5);
            border-radius: 10px; padding: 12px 16px;
            font-weight: 700; font-size: 0.92rem;
            cursor: pointer; min-height: 44px; width: 100%;
            transition: background 0.18s, border-color 0.18s, transform 0.12s, box-shadow 0.18s;
            font-family: inherit;
        }
        .wave-btn:hover { background: rgba(251,191,36,0.24); border-color: #fbbf24; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(251,191,36,0.22); }
        .wave-btn:active { transform: translateY(0); }
        /* Polished partner-action stack — Wave + Share Profile */
        #partner-quick-actions { gap: 10px !important; }
        #share-profile-btn {
            min-height: 44px; padding: 12px 16px;
            font-size: 0.92rem; font-weight: 600;
            border-radius: 10px;
            transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.12s, box-shadow 0.18s;
        }
        #share-profile-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(56,189,248,0.22); }
        #share-profile-btn:active { transform: translateY(0); }

        /* ===== SETTINGS ===== */
        .settings-sub-panel { z-index: 30; }
        .settings-grid { display: flex; flex-direction: column; gap: 10px; flex-grow: 1; overflow-y: auto; overscroll-behavior: contain; margin-top: 15px; }
        .settings-card { background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: border-color 0.15s; }
        .settings-card:hover { border-color: var(--accent); }
        .settings-card-label { font-weight: bold; color: var(--text); font-size: 0.95rem; }
        .settings-card-desc { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
        .settings-card-arrow { color: var(--muted); font-size: 1.4rem; line-height: 1; }
        .settings-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); gap: 12px; }
        .settings-item:last-child { border-bottom: none; }
        .settings-item-label { font-weight: 600; color: var(--text); font-size: 0.9rem; }
        .settings-item-desc { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
        .settings-section-label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; font-weight: bold; margin: 18px 0 6px 0; letter-spacing: 0.05em; }
        /* Toggle switch */
        .toggle-switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
        .toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
        .toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: 26px; transition: background 0.2s; }
        .toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 4px; top: 4px; background: white; border-radius: 50%; transition: transform 0.2s; }
        .toggle-switch input:checked + .toggle-slider { background: var(--emerald); }
        .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
        /* Settings inputs */
        .settings-select { background: var(--bg-input); border: 1px solid var(--border); color: var(--text); color-scheme: dark; padding: 8px 10px; border-radius: 8px; font-size: 0.85rem; outline: none; flex-shrink: 0; font-family: inherit; }
        .settings-select:focus { border-color: var(--accent); }
        .settings-select option { background: var(--bg-card); color: var(--text); }
        /* Belt-and-braces: any other native <select> in the app (Bug Report,
           Send Feedback dropdowns) also gets the dark dropdown popup. */
        select { color-scheme: dark; }
        select option { background: var(--bg-card); color: var(--text); }
        .settings-range { width: 110px; accent-color: var(--accent); flex-shrink: 0; }
        .settings-input { background: var(--bg-input); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: 8px; font-size: 0.9rem; outline: none; width: 100%; font-family: inherit; }
        .settings-input:focus { border-color: var(--accent); }
        .btn-save-setting { background: var(--accent); color: var(--bg-base); padding: 10px; border-radius: 8px; font-weight: bold; width: 100%; border: none; cursor: pointer; font-size: 0.9rem; }
        .btn-save-setting:hover { background: var(--accent-hover); }
        .btn-delete-account { background: #7f1d1d; color: #fca5a5; border: 1px solid var(--danger); border-radius: 8px; font-size: 0.9rem; padding: 12px; width: 100%; cursor: pointer; font-weight: bold; }
        .btn-delete-account:hover { background: #991b1b; }
        .delete-confirm-section { display: none; flex-direction: column; gap: 10px; margin-top: 12px; }
        .delete-confirm-section.visible { display: flex; }
        /* ============================================================
           NATIVE CONFIRM MODAL — replaces every window.confirm/alert.
           Same dark theme as the rest of the app. Used via:
             showConfirmModal({ title, message, confirmText, danger, ...
                                onConfirm, onCancel })
             showAlertModal({ title, message })
           ============================================================ */
        @keyframes ncmIn {
            from { opacity: 0; transform: scale(0.95) translateY(8px); }
            to   { opacity: 1; transform: scale(1) translateY(0); }
        }
        .native-confirm-overlay {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.82);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            /* Center the card vertically — keeps every confirm/cancel
               popup in the same predictable position over the profile
               modal. (Earlier we anchored to flex-start to dodge fast-
               tap overlap with the source button; the bouncy enter
               animation + 60ms focus delay on the confirm button is
               enough to make accidental double-clicks miss now.) */
            display: flex; align-items: center; justify-content: center;
            padding: 20px;
            z-index: 4000;
            opacity: 1; visibility: hidden; pointer-events: none;
        }
        .native-confirm-overlay.open {
            visibility: visible; pointer-events: auto;
        }
        .native-confirm-card {
            background: linear-gradient(180deg, var(--bg-card), #182238);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 28px 24px 22px;
            width: 100%; max-width: 380px;
            text-align: center;
            position: relative;
            box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(56,189,248,0.08);
            animation: ncmIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .native-confirm-close {
            position: absolute; top: 12px; right: 14px;
            background: none; border: none; color: var(--muted);
            font-size: 1.3rem; cursor: pointer;
            width: 32px; height: 32px; min-height: auto;
            border-radius: 8px; padding: 0;
            transition: background 0.15s, color 0.15s;
        }
        .native-confirm-close:hover { background: var(--bg-input); color: var(--text); }
        .ncm-title {
            font-size: 1.15rem; font-weight: 800; color: var(--text);
            margin: 4px 0 8px; line-height: 1.3;
        }
        .ncm-message {
            font-size: 0.92rem; color: var(--muted); line-height: 1.55;
            margin-bottom: 22px; white-space: pre-wrap; word-wrap: break-word;
        }
        .ncm-actions {
            display: flex; gap: 10px; justify-content: stretch;
        }
        .ncm-btn {
            flex: 1; padding: 12px 16px;
            border-radius: 10px; border: none; cursor: pointer;
            font-weight: 700; font-size: 0.95rem; font-family: inherit;
            min-height: 46px;
            transition: background 0.15s, transform 0.08s;
        }
        .ncm-btn:active { transform: translateY(1px); }
        .ncm-btn-cancel {
            background: var(--bg-input); color: var(--muted);
            border: 1px solid var(--border);
        }
        .ncm-btn-cancel:hover { background: #1a2540; color: var(--text); }
        .ncm-btn-confirm {
            background: var(--accent); color: var(--bg-base);
        }
        .ncm-btn-confirm:hover { background: var(--accent-hover); }
        /* Danger variant — red confirm button for destructive actions */
        .ncm-btn-confirm.danger {
            background: var(--danger); color: white;
        }
        .ncm-btn-confirm.danger:hover { background: var(--danger-dark); }
        /* Single-button alert mode (no Cancel) */
        .native-confirm-card.alert-only .ncm-btn-cancel { display: none; }

        /* ============================================================
           NOTIFICATIONS PANEL — action buttons (Accept/Decline/Wave back/Reply)
           ============================================================ */
        .notif-actions {
            display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0;
        }
        .notif-action-btn {
            border: none; cursor: pointer; font-family: inherit;
            font-weight: 700; font-size: 0.78rem;
            padding: 7px 12px; border-radius: 7px;
            min-height: 34px; width: auto;
            transition: background 0.15s, transform 0.08s;
        }
        .notif-action-btn:active { transform: translateY(1px); }
        .notif-action-btn.accept { background: var(--green); color: white; }
        .notif-action-btn.accept:hover { background: #16a34a; }
        .notif-action-btn.decline { background: var(--bg-input); color: var(--danger); border: 1px solid var(--danger); }
        .notif-action-btn.decline:hover { background: rgba(239,68,68,0.1); }
        .notif-action-btn.primary { background: var(--accent); color: var(--bg-base); }
        .notif-action-btn.primary:hover { background: var(--accent-hover); }
        .notif-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }

        /* ============================================================
           MOBILE — single consolidated breakpoint at 900px.
           Why 900 (not 768): some Android devices with low DPR report
           CSS widths in the 640-768 range and would otherwise miss
           these overrides. iPad portrait (768) also benefits from the
           bottom-sheet treatment.

           Goals:
             - Full-bleed layout (no awkward centered cards)
             - Bottom-sheet profile modal that flexes to its content
               (capped at 92dvh) — no dead space below short panels
             - Sub-panels become inflow flex children so their inner
               .list-container / .settings-grid scroller actually has
               a definite height to scroll against (fixes "More panel
               can't scroll")
             - 44-52px tap targets, 16px inputs (no iOS zoom-on-focus)
             - 100dvh viewport (no iOS URL-bar jump)
             - Safe-area-inset on top + bottom

           No !important needed: the dueling 768 + 900 blocks that
           required them are gone, so the cascade resolves cleanly
           via specificity alone. The card uses display:flex so its
           children (the open sub-panel + its inner scroller) form a
           proper flex chain with min-height:0 — this is what makes
           the inner scrollers work.
           ============================================================ */
        @media (max-width: 900px) {
            /* Body — anchor content to top, allow scroll, respect notch */
            body {
                padding: 0;
                align-items: stretch;
                justify-content: flex-start;
                overflow-x: hidden;
                overflow-y: auto;
                -webkit-tap-highlight-color: transparent;
                padding-top: env(safe-area-inset-top, 0);
                padding-bottom: env(safe-area-inset-bottom, 0);
            }

            /* Main 1v1 screen — full-bleed, full-height with dvh fallback.
               Flex column + justify-content:center vertically centers the
               pre-match content (logo, level bar, interests, Find Match,
               online pill) within the viewport. Auto-degrades safely
               when a state is taller than the viewport (in-call, long
               post-call reconnect list): once content >= container,
               justify-content has no extra space to distribute and
               everything flows top-down naturally, with the body's
               overflow-y:auto handling the scroll. */
            .container {
                max-width: 100%;
                width: 100%;
                min-height: 100vh;
                min-height: 100dvh;
                border-radius: 0;
                border: none;
                box-shadow: none;
                padding: 28px 20px 32px;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            h1 { font-size: 3.4rem; margin-bottom: 14px; letter-spacing: -1.5px; }
            .branding-tagline { font-size: 0.78rem; margin-top: -8px; margin-bottom: 22px; }

            .mini-level-bar { padding: 10px 14px; }
            .pre-match-card { padding: 16px; margin-bottom: 14px; border-radius: 14px; }
            .interests-input-wrap { padding: 10px 12px; min-height: 50px; }

            /* Buttons — touch-friendly */
            button { min-height: 48px; }
            .btn-group { gap: 10px; }
            .call-btn, .skip-btn, .mute-btn { min-height: 52px; font-size: 1rem; }

            /* 16px on every editable control = no iOS zoom-on-focus */
            input, select, textarea, #profile-bio, #interests-input { font-size: 16px; }

            /* Profile modal — floating sheet with breathing room on all
               sides so the card's glow halo and rounded corners stay
               fully visible (was edge-to-edge before, which clipped the
               side/bottom halo and read as flat). 14px gutter L/R, plus
               safe-area-aware top/bottom so notched devices don't lose
               part of the card under the system UI. align-items still
               flex-end so the card weights toward the bottom (sheet
               feel), not centered. */
            .profile-modal {
                align-items: flex-end;
                justify-content: center;
                padding: 14px;
                padding-top: max(14px, env(safe-area-inset-top));
                /* Bigger bottom gutter on mobile so the sheet doesn't kiss
                   the Chrome/Safari URL bar when it's visible. With 100dvh
                   on the modal the sheet already sits within the visible
                   viewport — the extra 12px on top of safe-area-inset gives
                   a clear visual gap between the sheet edge and the
                   browser toolbar. */
                padding-bottom: max(20px, calc(env(safe-area-inset-bottom) + 8px));
            }

            /* Profile card — mobile-specific tweaks. Flex chain + sizing
               (display:flex, height:max-content, min-height:0, max-height
               with dvh below) live in the base styles; here we just
               adjust width, radius, padding. All four corners rounded
               (was 20-20-0-0) so the card reads as a floating sheet now
               that the modal pads on all sides. Safe-area gutters moved
               to .profile-modal so the card padding can stay tight and
               consistent — the modal-level padding keeps the card off
               the system UI on notched devices. max-height accounts for
               the modal's 14px+14px top/bottom padding so 92dvh worth
               of content still fits without overflow. */
            .profile-card {
                max-width: 540px;
                width: 100%;
                max-height: calc(100dvh - 28px);
                border-radius: 22px;
                border: none;
                padding: 18px 18px 22px;
                -webkit-overflow-scrolling: touch;
            }

            /* Drag-handle affordance at the top of the bottom sheet */
            .profile-card::before {
                content: '';
                align-self: center;
                flex-shrink: 0;
                width: 36px; height: 4px;
                margin: 0 0 14px;
                background: var(--border);
                border-radius: 999px;
                opacity: 0.55;
            }

            /* Open sub-panel padding override — tighter on phones to
               maximize usable area. Universal .has-open-panel rules live
               in the base styles. The More panel keeps its own tighter
               padding via the .more-panel rule below. */
            .profile-card.has-open-panel > .sub-full-panel.open {
                padding: 4px 4px 12px;
            }
            .profile-card.has-open-panel > .sub-full-panel.open.more-panel,
            .profile-card.has-open-panel > .sub-full-panel.open.acct-panel {
                padding: 10px 14px 14px;
            }

            /* ===== More panel — phone polish.
               Bumps every interactive row to 54px min-height so they meet
               the 48–56px thumb-target sweet spot. Tightens section gaps
               and pushes the title up a notch so the menu feels bigger
               and more deliberate. Bug-report row gets a soft red wash so
               it stays visually distinct from the neutral rows above
               without looking shouty. Card sizes to content (no forced
               92dvh) so the blue halo has room to breathe above and
               below — was full-height before, which clipped the top/
               bottom of the glow against the modal padding. */
            .more-title { font-size: 1.65rem; }
            .more-section { gap: 6px; }
            .more-section-label {
                font-size: 0.7rem;
                margin: 6px 4px 2px;
                letter-spacing: 0.16em;
            }
            .more-body { gap: 10px; }
            .more-row,
            .more-bug-btn {
                height: 54px; min-height: 54px;
                padding: 0 16px;
                gap: 14px;
                border-radius: 12px;
                font-size: 1rem;
            }
            .more-row-icon {
                width: 26px; height: 26px;
                font-size: 1.2rem;
            }
            .more-bug-btn {
                margin-top: 14px;
                background: rgba(239,68,68,0.06);
                border-color: rgba(239,68,68,0.55);
                font-weight: 800;
                letter-spacing: 0.01em;
            }
            /* Slightly stronger close target on phones */
            .more-close { width: 36px; height: 36px; font-size: 1.15rem; }

            .panel-title { font-size: 1.4rem; }

            /* Avatar smaller on mobile so the page above stays compact */
            .avatar-wrapper { width: 96px; height: 96px; margin-bottom: 18px; }
            .avatar-circle { width: 96px; height: 96px; }
            .online-badge-on-avatar { width: 18px; height: 18px; bottom: 4px; right: 4px; }

            /* Action row (My Friends / Messages) */
            .action-row { gap: 10px; margin-bottom: 18px; }
            .action-row > * { min-height: 50px; }

            .profile-section .btn-outline { min-height: 50px; font-size: 0.95rem; padding: 12px 14px; }

            /* DM panel */
            .dm-input-row { gap: 6px; padding: 6px 0; }
            .dm-input-row input { padding: 12px 14px; min-height: 46px; }
            .dm-send-btn, .dm-mic-btn, .dm-image-btn { width: 46px; height: 46px; min-height: 46px; }

            /* Bump tiny icon-only tap targets to native-friendly hit
               areas (Android Material spec: 48dp, iOS HIG: 44pt). The
               glyphs stay visually small — only the click region grows
               via padding + min-width/height. Without this, deleting a
               post / comment or tapping a feed action requires pixel-
               accurate aim on a phone screen. */
            .post-delete-btn, .comment-delete-btn {
                padding: 8px;
                min-height: 38px; min-width: 38px;
            }
            .post-action-btn {
                padding: 8px 6px;
                min-height: 40px;
            }
            .comment-send-btn {
                padding: 10px 16px;
                min-height: 40px;
            }
            .dm-bubble { max-width: 86%; font-size: 0.95rem; padding: 10px 14px; }

            /* Live rooms */
            .live-stage-grid { gap: 10px; justify-content: center; }
            .live-audience-grid { gap: 8px; }
            .live-control-bar { gap: 6px; flex-wrap: wrap; }
            .live-control-bar button { font-size: 0.85rem; padding: 10px 12px; min-height: 44px; }

            /* Spotlight */
            .fyp-composer textarea { height: 80px; }
            .post-card { padding: 14px; }
            .post-image { max-height: 380px; }

            /* Stories */
            .stories-strip { gap: 10px; padding: 4px 2px; }
            .story-bubble .story-avatar-ring { width: 60px; height: 60px; }

            /* Settings */
            .settings-grid { gap: 8px; }
            .settings-card { padding: 16px 18px; }
            .settings-item { padding: 14px 0; }

            /* Bottom-sheet style for Report / Add Link / Bug / Feedback modals */
            .report-modal-overlay { padding: 0; align-items: flex-end; }
            .report-modal-card {
                max-width: 100%;
                width: 100%;
                border-radius: 18px 18px 0 0;
                padding: 22px 20px 28px;
                padding-bottom: max(28px, env(safe-area-inset-bottom));
            }

            /* Toasts — top of viewport, full-width with side margin */
            .toast-wrap {
                top: max(12px, env(safe-area-inset-top));
                left: 12px;
                right: 12px;
                bottom: auto;
                transform: none;
            }
            .toast { max-width: 100%; min-width: 0; font-size: 0.92rem; }

            .xp-float-wrap { top: max(14%, env(safe-area-inset-top)); }

            /* Level-up modal */
            .levelup-card { padding: 32px 24px; max-width: 100%; }
            .levelup-card .lu-emoji { font-size: 3.5rem; }
            .levelup-card .lu-title { font-size: 1.4rem; }
            .levelup-card .lu-level { font-size: 2.6rem; }

            .live-user-card { padding: 24px 18px 18px; }
            .match-anyone-row { padding: 12px 14px; gap: 12px; }
            #more-full-panel .profile-section { gap: 6px; }

            /* Belt-and-braces — never bleed sideways */
            .container, .profile-card, .sub-full-panel { overflow-x: hidden; }
        }

        /* Even smaller phones (≤380px — iPhone SE etc.) */
        @media (max-width: 380px) {
            h1 { font-size: 3rem; }
            .container { padding: 24px 16px 28px; }
            .profile-card { padding: 16px 14px 22px; }
            .avatar-wrapper, .avatar-circle { width: 88px; height: 88px; }
        }

        /* === DESKTOP — let the app breathe.
           On wide screens the 420px-wide phone column looks like a
           kiosk app pinned to a void. Above 1024px the container
           expands toward 640px and the logo grows so the brand mark
           reads as a real piece of typography instead of a pinned
           badge. Mobile (default) stays exactly as before. */
        @media (min-width: 1024px) {
            body { padding: 40px 20px; }
            .container {
                max-width: 640px;
                padding: 56px 44px;
            }
            h1 {
                font-size: 5.4rem;
                letter-spacing: -4px;
                margin-bottom: 28px;
            }
            .branding-tagline {
                font-size: 0.85rem;
                letter-spacing: 5px;
                margin-bottom: 32px;
            }
        }
        @media (min-width: 1400px) {
            .container {
                max-width: 720px;
                padding: 64px 56px;
            }
            h1 {
                font-size: 6rem;
                letter-spacing: -4.5px;
            }
        }