/* ========================================
           DESIGN SYSTEM - CSS VARIABLES
           ======================================== */
        :root {
            --font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            /* Background Layers */
            --bg-base: #0f0f10;
            --bg-primary: #0f0f10;
            --bg-elevated: #18181b;
            --bg-subtle: #27272a;
            --bg-accent: #3f3f46;
            --bg-hover: #303036;

            /* Text Colors */
            --text-primary: #fafafa;
            --text-secondary: #a1a1aa;
            --text-muted: #71717a;
            --text-inverse: #09090b;

            /* Brand & Accent - Hot Pink */
            --accent-primary: #ff2d9a;
            --accent-hover: #ff5ab3;
            --accent-muted: rgba(255, 45, 154, 0.18);
            --brand-hot-pink: #ff2d9a;
            --success: #22c55e;
            --success-muted: rgba(34, 197, 94, 0.12);
            --error: #ef4444;
            --error-muted: rgba(239, 68, 68, 0.12);
            --info: #3b82f6;
            --info-muted: rgba(59, 130, 246, 0.12);

            /* Borders */
            --border-subtle: rgba(255,255,255,0.06);
            --border-default: rgba(255,255,255,0.1);
            --border-strong: rgba(255,255,255,0.16);
            --border-focus: rgba(255, 45, 154, 0.5);

            /* Spacing */
            --space-1: 0.25rem;
            --space-2: 0.5rem;
            --space-3: 0.75rem;
            --space-4: 1rem;
            --space-5: 1.25rem;
            --space-6: 1.5rem;
            --space-8: 2rem;

            /* Radius */
            --radius-sm: 6px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-xl: 16px;
            --radius-full: 9999px;

            /* Shadows */
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
            --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
            --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
            --shadow-xl: 0 20px 40px rgba(0,0,0,0.7);

            /* Transitions */
            --transition-fast: 150ms ease;
            --transition-normal: 200ms ease;
            --transition-slow: 300ms ease;

            /* Layout */
            --page-max-width: 1280px;
            --characters-sidebar-width: 208px;
            --characters-toolbar-offset: 59px;
            --characters-mobile-toolbar-height: 42px;
            --characters-mobile-toolbar-top-nudge: 2px;
            /* Main app shell has desktop body/container paddings + bottom status bar; keep sidebar
               within that remaining viewport so the document itself does not become scrollable. */
            --characters-desktop-bottom-offset: 125px;
        }

        /* ========================================
           CUSTOM ALERT MODAL
           ======================================== */
        .alert-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 20120;
            opacity: 0;
            visibility: hidden;
            transition: opacity 200ms ease, visibility 200ms ease;
        }
        .alert-modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        .alert-modal {
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-xl);
            padding: 0;
            min-width: 320px;
            max-width: 90%;
            width: 400px;
            box-shadow: var(--shadow-xl);
            transform: scale(0.95) translateY(-10px);
            transition: transform 200ms ease;
            overflow: hidden;
        }
        .alert-modal-overlay.active .alert-modal {
            transform: scale(1) translateY(0);
        }
        .moderation-report-overlay {
            position: fixed;
            inset: 0;
            z-index: 20070;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px;
            background:
                radial-gradient(circle at 50% 42%, rgba(45, 212, 191, 0.10), transparent 18rem),
                rgba(0, 0, 0, 0.76);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        .moderation-report-sheet {
            width: min(520px, 100%);
            max-height: min(760px, calc(100vh - 28px));
            overflow: auto;
            background: var(--bg-elevated);
            color: var(--text-primary);
            border: 1px solid var(--border-default);
            border-radius: 8px;
            box-shadow: var(--shadow-xl);
            padding: 18px;
            display: grid;
            gap: 14px;
        }
        .moderation-report-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }
        .moderation-report-head h3 {
            margin: 0;
            font-size: 1rem;
            letter-spacing: 0;
        }
        .moderation-report-head p {
            margin: 4px 0 0;
            color: var(--text-muted);
            font-size: 0.82rem;
            line-height: 1.35;
        }
        .moderation-report-close {
            width: 34px;
            height: 34px;
            border-radius: 8px;
            border: 1px solid var(--border-default);
            background: transparent;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 1.2rem;
            line-height: 1;
        }
        .moderation-report-reasons {
            display: grid;
            gap: 8px;
        }
        .moderation-report-reason {
            width: 100%;
            min-height: 48px;
            border: 1px solid var(--border-default);
            border-radius: 8px;
            background: var(--bg-subtle);
            color: var(--text-primary);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 10px 12px;
            cursor: pointer;
            font: inherit;
            font-weight: 700;
            text-align: left;
        }
        .moderation-report-reason:hover,
        .moderation-report-reason.is-selected {
            border-color: var(--accent-primary);
            background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-subtle) 88%);
        }
        .moderation-report-reason strong {
            flex: 0 0 auto;
            font-size: 0.64rem;
            color: #ef4444;
            letter-spacing: 0.03em;
        }
        .moderation-report-note {
            display: grid;
            gap: 6px;
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text-secondary);
        }
        .moderation-report-note textarea {
            width: 100%;
            min-height: 82px;
            resize: vertical;
            border: 1px solid var(--border-default);
            border-radius: 8px;
            background: var(--bg-primary);
            color: var(--text-primary);
            padding: 10px;
            font: inherit;
            font-size: 0.9rem;
            line-height: 1.45;
        }
        .moderation-report-admin-check {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.86rem;
            font-weight: 700;
            color: var(--text-secondary);
        }
        .moderation-report-admin-check[hidden] {
            display: none;
        }
        .moderation-report-admin-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 12px;
            border: 1px solid rgba(239, 68, 68, 0.38);
            border-radius: 8px;
            background: rgba(239, 68, 68, 0.08);
        }
        .moderation-report-admin-actions[hidden] {
            display: none;
        }
        .moderation-report-admin-actions div {
            display: grid;
            gap: 2px;
            min-width: 0;
        }
        .moderation-report-admin-actions strong {
            color: #fca5a5;
            font-size: 0.76rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .moderation-report-admin-actions span {
            color: var(--text-secondary);
            font-size: 0.82rem;
            line-height: 1.35;
        }
        .moderation-report-admin-disable {
            flex: 0 0 auto;
            border-color: rgba(239, 68, 68, 0.55);
            color: #fecaca;
        }
        .moderation-report-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }
        .saucepan-recovery-viewer-overlay {
            position: fixed;
            inset: 0;
            background:
                radial-gradient(circle at 50% 42%, rgba(96, 165, 250, 0.10), transparent 18rem),
                rgba(0, 0, 0, 0.88);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 20060;
            padding: 0;
        }
        .saucepan-recovery-viewer-overlay.active {
            display: flex;
        }
        .saucepan-recovery-viewer-dialog {
            width: min(1100px, 100vw);
            height: 100vh;
            height: 100dvh;
            background: #101317;
            color: #e5e7eb;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 0;
            box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .saucepan-recovery-viewer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 12px 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.02);
        }
        .saucepan-recovery-viewer-header-actions {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            flex-shrink: 0;
        }
        .saucepan-recovery-viewer-title {
            font-size: 0.92rem;
            font-weight: 700;
            color: #f9fafb;
        }
        .saucepan-recovery-viewer-select {
            appearance: none;
            border: 1px solid rgba(244, 114, 182, 0.3);
            background: rgba(244, 114, 182, 0.14);
            color: #fce7f3;
            border-radius: 9px;
            padding: 6px 10px;
            cursor: pointer;
            font-weight: 700;
            font-size: 0.68rem;
            letter-spacing: 0.035em;
            text-transform: uppercase;
        }
        .saucepan-recovery-viewer-select:disabled {
            opacity: 0.56;
            cursor: default;
        }
        .saucepan-recovery-viewer-close {
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: #181d23;
            color: #f3f4f6;
            border-radius: 9px;
            padding: 6px 10px;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.72rem;
        }
        .saucepan-recovery-viewer-body {
            padding: 0;
            overflow: hidden;
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
        }
        .saucepan-recovery-viewer-tabs {
            display: flex;
            align-items: stretch;
            gap: 0.2rem;
            padding: 0 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            background: rgba(255, 255, 255, 0.02);
            overflow-x: auto;
            scrollbar-width: none;
            flex: 0 0 auto;
            min-height: 40px;
        }
        .saucepan-recovery-viewer-tabs::-webkit-scrollbar {
            display: none;
        }
        .saucepan-recovery-viewer-tab {
            appearance: none;
            border: none;
            box-shadow: inset 0 -2px 0 transparent;
            background: transparent;
            color: #94a3b8;
            border-radius: 0;
            padding: 10px 10px 9px;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            cursor: pointer;
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            white-space: nowrap;
            line-height: 1;
        }
        .saucepan-recovery-viewer-tab.active {
            background: transparent;
            box-shadow: inset 0 -2px 0 rgba(96, 165, 250, 0.72);
            color: #eff6ff;
        }
        .saucepan-recovery-viewer-section {
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            flex: 1 1 auto;
            min-height: 0;
            overflow: auto;
        }
        .saucepan-recovery-viewer-section:first-child {
            border-top: 0;
        }
        .saucepan-recovery-viewer-section-title {
            padding: 16px 20px 0;
            font-size: 0.74rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #93c5fd;
        }
        .saucepan-recovery-viewer-summary,
        .saucepan-recovery-viewer-judge,
        .saucepan-recovery-viewer-content {
            margin: 0;
            padding: 14px;
            white-space: pre-wrap;
            word-break: break-word;
            font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
            font-size: 0.88rem;
            line-height: 1.5;
            color: #e5e7eb;
            background: transparent;
        }
        .saucepan-recovery-viewer-summary {
            font-size: 0.86rem;
            color: #e5e7eb;
        }
        .saucepan-recovery-viewer-judge {
            font-size: 0.78rem;
            color: #cbd5e1;
        }
        @media (max-width: 700px) {
            .saucepan-recovery-viewer-header {
                gap: 8px;
                padding: 8px 10px;
            }
            .saucepan-recovery-viewer-header-actions {
                gap: 0.32rem;
            }
            .saucepan-recovery-viewer-title {
                font-size: 0.84rem;
            }
            .saucepan-recovery-viewer-select,
            .saucepan-recovery-viewer-close {
                padding: 5px 8px;
                font-size: 0.64rem;
                border-radius: 8px;
            }
            .saucepan-recovery-viewer-tabs {
                gap: 0.08rem;
                padding: 0 10px;
                min-height: 34px;
            }
            .saucepan-recovery-viewer-tab {
                padding: 8px 8px 7px;
                font-size: 0.62rem;
                letter-spacing: 0.02em;
            }
            .saucepan-recovery-viewer-summary,
            .saucepan-recovery-viewer-judge,
            .saucepan-recovery-viewer-content {
                padding: 10px;
                font-size: 0.78rem;
                line-height: 1.42;
            }
            .saucepan-recovery-viewer-judge {
                font-size: 0.72rem;
            }
        }
        .saucepan-recovery-candidate.is-clickable {
            cursor: pointer;
        }
        .saucepan-recovery-candidate.is-clickable:hover {
            border-color: rgba(255, 255, 255, 0.16);
        }
        .alert-modal-header {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-4) var(--space-5);
            border-bottom: 1px solid var(--border-subtle);
        }
        .alert-modal-icon {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }
        .alert-modal-icon svg {
            width: 100%;
            height: 100%;
        }
        .alert-modal-icon.success {
            color: var(--success);
        }
        .alert-modal-icon.error {
            color: var(--error);
        }
        .alert-modal-icon.info {
            color: var(--info);
        }
        .alert-modal-icon.warning {
            color: var(--accent-primary);
        }
        .alert-modal-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }
        .alert-modal-body {
            padding: var(--space-5);
            color: var(--text-secondary);
            font-size: 0.9375rem;
            line-height: 1.5;
            white-space: pre-line;
        }
        .alert-modal-link {
            display: block;
            margin-top: var(--space-4);
            color: var(--brand-hot-pink);
            font-weight: 700;
            overflow-wrap: anywhere;
            text-decoration: none;
        }
        .alert-modal-link:hover {
            text-decoration: underline;
        }
        .alert-modal-code {
            display: inline-block;
            margin: var(--space-4) 0;
            padding: 8px 10px;
            border: 1px solid rgba(255, 105, 180, 0.42);
            border-radius: var(--radius-sm);
            background: rgba(255, 105, 180, 0.12);
            color: var(--brand-hot-pink);
            font-family: var(--font-mono, monospace);
            font-size: 1rem;
            font-weight: 800;
            overflow-wrap: anywhere;
        }
        .alert-modal-footer {
            display: flex;
            justify-content: flex-end;
            padding: var(--space-4) var(--space-5);
            border-top: 1px solid var(--border-subtle);
            background: var(--bg-subtle);
        }
        .alert-modal-btn {
            padding: 0.625rem 1.25rem;
            font-size: 0.875rem;
            font-weight: 500;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
            border: none;
            font-family: inherit;
        }
        .alert-modal-btn.confirm {
            background: var(--accent-primary);
            color: white;
        }
        .alert-modal-btn.confirm:hover {
            background: var(--accent-hover);
        }
        .alert-modal-btn.cancel {
            background: transparent;
            color: var(--text-secondary);
            border: 1px solid var(--border-default);
            margin-right: var(--space-2);
        }
        .alert-modal-btn.cancel:hover {
            background: var(--bg-accent);
            color: var(--text-primary);
        }

        /* Confirmation modal variant */
        .alert-modal.confirm .alert-modal-btn.confirm {
            background: var(--error);
        }
        .alert-modal.confirm .alert-modal-btn.confirm:hover {
            background: #dc2626;
        }

        /* Toast variant - for non-blocking notifications */
        .alert-toast {
            position: relative;
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-lg);
            padding: var(--space-4) var(--space-5);
            display: flex;
            align-items: center;
            gap: var(--space-3);
            box-shadow: var(--shadow-lg);
            z-index: 22001;
            transform: translateX(120%);
            opacity: 0;
            transition:
                transform 300ms ease,
                opacity 220ms ease;
            max-width: 360px;
            will-change: transform, opacity;
        }
        .alert-toast.show {
            transform: translateX(0);
            opacity: 1;
        }
        .alert-toast.is-hiding {
            transform: translateX(120%);
            opacity: 0;
        }
        .alert-toast-icon {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
        }
        .alert-toast-icon svg {
            width: 100%;
            height: 100%;
        }
        .alert-toast.success .alert-toast-icon { color: var(--success); }
        .alert-toast.error .alert-toast-icon { color: var(--error); }
        .alert-toast.info .alert-toast-icon { color: var(--info); }
        .alert-toast.warning .alert-toast-icon { color: var(--accent-primary); }
        .alert-toast.credits-earned-toast {
            border-color: color-mix(in srgb, #f4c95d 52%, var(--border-default) 48%);
            background: color-mix(in srgb, var(--bg-elevated) 88%, #f4c95d 12%);
        }
        .alert-toast.credits-earned-toast .alert-toast-icon {
            color: #f4c95d;
        }
        .alert-toast.credits-earned-toast .alert-toast-message {
            display: grid;
            align-items: start;
            gap: 2px;
            font-weight: 800;
        }
        .alert-toast.credits-earned-toast .credits-toast-label {
            color: var(--text-primary);
            font-size: 0.92rem;
            line-height: 1.12;
        }
        .alert-toast.credits-earned-toast .credits-toast-amount {
            color: #f4c95d;
            font-size: 0.68rem;
            gap: 0.16em;
            justify-self: start;
            line-height: 1;
        }
        .alert-toast.credits-earned-toast .credits-toast-amount .credit-coin-icon {
            --coin-size: 0.78em;
        }
        .alert-toast-message {
            flex: 1 1 auto;
            min-width: 0;
            font-size: 0.875rem;
            color: var(--text-primary);
            line-height: 1.4;
        }
        .alert-toast-close {
            flex: 0 0 auto;
            margin-left: auto;
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 0;
            font-size: 1.25rem;
            line-height: 1;
            touch-action: manipulation;
        }
        .alert-toast-close:hover {
            color: var(--text-primary);
        }

        @media (max-width: 640px) {
            #toastContainer {
                left: 12px !important;
                right: 12px !important;
                bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
                align-items: stretch !important;
                z-index: 22000 !important;
            }
            .alert-toast {
                max-width: none;
                width: 100%;
                border-radius: 14px;
                padding: 14px 10px 14px 16px;
                transform: translate3d(0, calc(100% + 24px), 0);
            }
            .alert-toast.show {
                transform: translate3d(0, 0, 0);
            }
            .alert-toast.is-hiding {
                transform: translate3d(0, calc(100% + 24px), 0);
            }
            .alert-toast-message {
                font-size: 0.9rem;
            }
            .alert-toast-close {
                width: 42px;
                height: 42px;
                margin: -8px -4px -8px auto;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border-radius: 999px;
                font-size: 1.8rem;
            }
        }

        /* ========================================
           BASE STYLES
           ======================================== */
        * { box-sizing: border-box; margin: 0; padding: 0; }

        /* Android/iOS touch: remove default tap highlight flash on tappable elements */
        @media (hover: none) and (pointer: coarse) {
            *, *::before, *::after {
                -webkit-tap-highlight-color: transparent;
            }
        }

        html {
            height: 100%;
        }
        
        body {
            font-family: var(--font-sans);
            background: var(--bg-base);
            color: var(--text-primary);
            min-height: calc(100vh - 10rem);
            min-height: calc(100dvh - 10rem);
            padding: 4.5rem 1rem 5.5rem 1rem;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            position: relative;
        }
        body.circles-view-active,
        body.user-profile-view-active,
        body.credits-view-active {
            padding-bottom: 1rem;
        }

        /* Prevent iOS/Safari tap flash + accidental text/image selection on any image tap */
        img {
            -webkit-tap-highlight-color: transparent;
            -webkit-user-select: none;
            user-select: none;
            -webkit-user-drag: none;
            user-drag: none;
        }
        
        /* Mobile: Fixed viewport container to prevent address bar auto-hide */
        @media (max-width: 768px) {
            html {
                height: 100%;
                height: 100dvh; /* Use dynamic viewport height */
                overflow: hidden;
                position: fixed;
                width: 100%;
                touch-action: none; /* Prevent pull-to-refresh and overscroll */
            }
            
            body {
                height: 100%;
                height: 100dvh;
                overflow: hidden;
                position: fixed;
                width: 100%;
                padding: 0;
                margin: 0;
                touch-action: none;
            }
            
            /* Create scrollable content wrapper - all content goes inside this */
            /* Match original body padding: 4.0rem top (for top-bar), 5.5rem bottom (for browser-status-bar) */
            .mobile-scroll-container {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                overflow-y: auto;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
                padding: 4.0rem 1rem 5.5rem 1rem;
                box-sizing: border-box;
                /* Allow horizontal panning within nested overflow containers (e.g., admin grids on mobile). */
                touch-action: pan-x pan-y;
                overscroll-behavior: contain; /* Prevent pull-to-refresh */
            }
            body.circles-view-active .mobile-scroll-container,
            body.user-profile-view-active .mobile-scroll-container,
            body.credits-view-active .mobile-scroll-container {
                padding-bottom: calc(env(safe-area-inset-bottom) + 0.75rem);
            }
            
        }
        
        /* On smaller mobile screens: minimal L/R padding for more horizontal space */
        @media (max-width: 640px) {
            .mobile-scroll-container {
                padding: 4.0rem 2px 5rem 2px;
            }
            
            /* Fixed elements are already outside scroll container, ensure they stay fixed */
            .top-bar {
                position: fixed !important;
                z-index: 100;
            }
            
            .browser-status-bar {
                position: fixed !important;
                z-index: 100;
            }
            
            /* Toast container should be relative to viewport, not scroll container */
            #toastContainer {
                position: fixed !important;
            }
            
            /* Modals should also be relative to viewport */
            .modal-overlay,
            .alert-modal-overlay,
            .login-loading-overlay {
                position: fixed !important;
            }
            
            /* Stream overlay should also be fixed and constrain width so stream header can wrap */
            .stream-overlay {
                position: fixed !important;
                max-width: 100vw;
                box-sizing: border-box;
            }
        }

        /* Wall view hides the bottom status bar, so drop reserved bottom space.
           This prevents a large dead zone above the mobile keyboard. */
        body.wall-view-active {
            background: #1a1a1c;
            color: #e8e8ea;
        }

        body.wall-view-active #viewWall {
            --wall-bg: #1a1a1c;
            --wall-paper: #252528;
            --wall-ink: #e8e8ea;
            --wall-muted: #9a9aa0;
            --wall-line: rgba(255, 255, 255, 0.2);
            --wall-body: #c4c4c8;
            --wall-attach: #a0a0a8;
            background: var(--wall-bg);
            color: var(--wall-ink);
        }

        @media (max-width: 768px) {
            body.wall-circle-mobile-shell-active #viewWall {
                position: fixed !important;
                inset: 0 !important;
                z-index: 22050 !important;
                display: block !important;
                width: 100vw !important;
                height: 100dvh !important;
                background: #05060a;
            }

            body.wall-circle-mobile-shell-active .top-bar {
                z-index: 0 !important;
                pointer-events: none !important;
            }
        }

        body.wall-view-active #viewWall .wall-app,
        body.wall-view-active #viewWall .wall-scroll,
        body.wall-view-active #viewWall .wall-page {
            background: var(--wall-bg);
            color: var(--wall-ink);
        }

        body.wall-view-active #viewWall .wall-list-wrap,
        body.wall-view-active #viewWall .wall-list-blocker,
        body.wall-view-active #viewWall .wall-post-main,
        body.wall-view-active #viewWall .wall-thread-wrap,
        body.wall-view-active #viewWall .wall-thread-attachment,
        body.wall-view-active #viewWall .wall-compose-wrap,
        body.wall-view-active #viewWall .wall-options-menu,
        body.wall-view-active #viewWall .wall-comment {
            background: var(--wall-paper);
            color: var(--wall-ink);
            border-color: var(--wall-line);
        }

        body.wall-view-active #viewWall input,
        body.wall-view-active #viewWall textarea,
        body.wall-view-active #viewWall select {
            background: rgba(0, 0, 0, 0.22);
            color: var(--wall-ink);
            border-color: var(--wall-line);
        }

        body.wall-view-active #viewWall input::placeholder,
        body.wall-view-active #viewWall textarea::placeholder {
            color: var(--wall-muted);
        }

        @media (max-width: 768px) {
            body.wall-view-active .mobile-scroll-container {
                padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
            }
            body.taxonomy-view-active .mobile-scroll-container {
                padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
                padding-left: 10px;
                padding-right: 10px;
            }
        }

        .view-taxonomy {
            width: 100%;
            min-height: 0;
        }

        .view-taxonomy .tagverse-layout {
            min-height: 0;
        }
        .view-taxonomy .tag-sidebar {
            width: min(403px, 32vw);
            flex: 0 0 min(403px, 32vw);
        }
        .view-taxonomy .tag-sidebar-content {
            padding-bottom: var(--space-4);
        }
        .view-taxonomy.tagverse-home-active .tag-sidebar {
            display: none;
        }
        .view-taxonomy.tagverse-home-active .tagverse-layout {
            display: block;
        }
        .view-taxonomy.tagverse-home-active .tagverse-main-pane {
            height: 100%;
        }
        body.taxonomy-view-active .mobile-scroll-container {
            background:
                radial-gradient(circle at 18% 0%, rgba(245, 158, 11, 0.14), transparent 28rem),
                radial-gradient(circle at 82% 4%, rgba(45, 212, 191, 0.11), transparent 24rem),
                rgba(0, 0, 0, 0.06);
        }
        body.taxonomy-view-active .mobile-scroll-container > .container,
        .view-taxonomy.tagverse-home-active,
        .view-taxonomy.tagverse-home-active .tagverse-layout,
        .view-taxonomy.tagverse-home-active .tagverse-main-pane,
        .view-taxonomy.tagverse-home-active .taxonomy-definition-card {
            background: transparent;
        }
        .tagverse-main-pane {
            min-height: 0;
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        .taxonomy-facet-block {
            margin-bottom: 12px;
        }
        .taxonomy-facet-heading-btn {
            width: 100%;
            border: 0;
            background: transparent;
            color: inherit;
            padding: 0;
            margin: 0;
            text-align: left;
            cursor: pointer;
        }
        .taxonomy-facet-heading-line {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .taxonomy-facet-heading-line .tag-sidebar-heading,
        .taxonomy-facet-heading-line .tag-drawer-section-heading {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .taxonomy-facet-count {
            flex: 0 0 auto;
            color: var(--text-muted);
            font-size: 0.58rem;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
        }
        .taxonomy-sidebar-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            padding: 3px 0 1px;
        }
        .taxonomy-sidebar-cloud .tag-cloud-item {
            --scale: 1;
            appearance: none;
            border: 1px solid rgba(45, 212, 191, calc(0.12 + var(--heat) * 0.38));
            border-radius: 999px;
            background:
                linear-gradient(135deg, rgba(45, 212, 191, calc(0.05 + var(--heat) * 0.18)), rgba(56, 189, 248, calc(0.02 + var(--heat) * 0.12))),
                rgba(0, 0, 0, 0.18);
            color: rgba(230, 255, 250, calc(0.55 + var(--heat) * 0.45));
            font-size: calc(0.64rem * var(--scale));
            font-weight: 850;
            line-height: 1.02;
            min-height: calc(23px * var(--scale));
            max-width: 100%;
            padding: calc(4px * var(--scale)) calc(7px * var(--scale));
        }
        .taxonomy-sidebar-cloud .tag-cloud-item:hover {
            border-color: rgba(45, 212, 191, 0.7);
            color: #f8fffb;
        }
        .taxonomy-sidebar-cloud .tag-cloud-item.active {
            border-color: rgba(94, 234, 212, 0.72);
            background: rgba(45, 212, 191, 0.16);
            color: #d9fff8;
        }
        .taxonomy-sidebar-cloud .tag-cloud-item.is-definition-missing,
        #taxonomyTagDrawer .tag-cloud-item.is-definition-missing,
        #taxonomyTagDrawer .tag-drawer-item.is-definition-missing,
        .tagverse-home-cloud-item.is-definition-missing,
        .tagverse-home-category-item.is-definition-missing {
            border-style: dashed;
        }
        .taxonomy-sidebar-cloud .tag-cloud-item.is-definition-missing,
        .taxonomy-sidebar-cloud .tag-cloud-item.is-hidden-tag,
        #taxonomyTagDrawer .tag-cloud-item.is-definition-missing,
        #taxonomyTagDrawer .tag-cloud-item.is-hidden-tag,
        #taxonomyTagDrawer .tag-drawer-item.is-definition-missing,
        #taxonomyTagDrawer .tag-drawer-item.is-hidden-tag,
        .tagverse-home-cloud-item.is-definition-missing,
        .tagverse-home-cloud-item.is-hidden-tag,
        .tagverse-home-category-item.is-definition-missing,
        .tagverse-home-category-item.is-hidden-tag {
            opacity: 0.48;
            filter: saturate(0.55);
        }
        .taxonomy-sidebar-cloud .tag-cloud-item.is-definition-missing:hover,
        .taxonomy-sidebar-cloud .tag-cloud-item.is-hidden-tag:hover,
        #taxonomyTagDrawer .tag-cloud-item.is-definition-missing:hover,
        #taxonomyTagDrawer .tag-cloud-item.is-hidden-tag:hover,
        #taxonomyTagDrawer .tag-drawer-item.is-definition-missing:hover,
        #taxonomyTagDrawer .tag-drawer-item.is-hidden-tag:hover,
        .tagverse-home-cloud-item.is-definition-missing:hover,
        .tagverse-home-cloud-item.is-hidden-tag:hover,
        .tagverse-home-category-item.is-definition-missing:hover,
        .tagverse-home-category-item.is-hidden-tag:hover {
            opacity: 0.62;
        }
        .taxonomy-sidebar-cloud .tag-cloud-label {
            max-width: 154px;
        }
        .taxonomy-browse-mode-toggle {
            display: flex;
            align-items: center;
            gap: 0.22rem;
            margin: 0 0 0.54rem;
            padding: 0.18rem;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.18);
        }
        .taxonomy-browse-mode-toggle button {
            appearance: none;
            flex: 1 1 0;
            min-width: 0;
            border: 0;
            border-radius: 999px;
            background: transparent;
            color: var(--text-muted);
            font-size: 0.66rem;
            font-weight: 900;
            letter-spacing: 0.04em;
            line-height: 1;
            text-transform: uppercase;
            padding: 0.36rem 0.42rem;
            cursor: pointer;
        }
        .taxonomy-browse-mode-toggle button.active {
            background: rgba(45, 212, 191, 0.16);
            color: #5eead4;
        }
        .taxonomy-definition-card {
            position: relative;
            --taxonomy-header-overlay-top: 74px;
            overflow: hidden;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            width: 100%;
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
        }
        .taxonomy-definition-card::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
                linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
            background-size: 34px 34px;
            mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25), transparent 18%);
        }
        .taxonomy-article-hero {
            position: sticky;
            top: 0;
            z-index: 3;
            padding: 0.58rem 0.85rem 0.48rem;
            border-bottom: 1px solid var(--border-subtle);
            background: rgba(24, 24, 27, 0.98);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
            overflow: visible;
        }
        .taxonomy-title-line {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
            min-width: 0;
        }
        .taxonomy-title-copy {
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 0.56rem;
            flex-wrap: wrap;
        }
        .taxonomy-title-back-btn {
            appearance: none;
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.32rem;
            width: 2rem;
            height: 2rem;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: #5eead4;
            font-size: 0;
            letter-spacing: 0;
            line-height: 1;
            padding: 0;
            cursor: pointer;
        }
        .taxonomy-title-back-icon {
            display: block;
            width: 1.38rem;
            height: 1.38rem;
            flex: 0 0 auto;
        }
        .taxonomy-title-back-text {
            display: none;
        }
        .taxonomy-title-back-btn:hover {
            color: #d9fff8;
        }
        .taxonomy-article-title-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: var(--space-2);
            align-items: end;
            margin-top: 0.28rem;
        }
        .taxonomy-article-title {
            margin: 0;
            font-size: clamp(1.55rem, 3.6vw, 2.45rem);
            line-height: 1;
            letter-spacing: -0.035em;
            overflow-wrap: anywhere;
        }
        .taxonomy-job-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.34rem;
            border: 1px solid rgba(45, 212, 191, 0.38);
            border-radius: 999px;
            background: rgba(45, 212, 191, 0.12);
            color: #5eead4;
            font-size: 0.66rem;
            font-weight: 900;
            letter-spacing: 0.06em;
            line-height: 1;
            padding: 0.28rem 0.48rem;
            text-transform: uppercase;
        }
        .taxonomy-job-badge em {
            color: var(--text-muted);
            font-style: normal;
            letter-spacing: 0.02em;
            text-transform: none;
        }
        .taxonomy-job-badge--failed {
            border-color: rgba(248, 113, 113, 0.48);
            background: rgba(248, 113, 113, 0.13);
            color: #fecaca;
        }
        .taxonomy-job-spinner {
            width: 0.58rem;
            height: 0.58rem;
            border: 2px solid rgba(45, 212, 191, 0.24);
            border-top-color: #5eead4;
            border-radius: 999px;
            animation: taxonomyJobSpin 0.75s linear infinite;
        }
        @keyframes taxonomyJobSpin {
            to { transform: rotate(360deg); }
        }
        .taxonomy-title-actions {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            flex: 0 0 auto;
        }
        .taxonomy-title-actions .tag-drawer-toggle-icon,
        .taxonomy-discussion-toggle-icon {
            display: inline-block;
            width: 1.08rem;
            height: 1.08rem;
            flex: 0 0 auto;
        }
        .taxonomy-meta-toggle {
            appearance: none;
            border: 0;
            background: transparent;
            color: var(--text-muted);
            width: 18px;
            height: 28px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            cursor: pointer;
            font-size: 1.15rem;
            font-weight: 800;
            line-height: 1;
            padding: 0;
        }
        .taxonomy-meta-toggle:hover {
            color: var(--text-primary);
        }
        .taxonomy-discussion-toggle {
            appearance: none;
            display: inline-flex;
            align-items: center;
            gap: 0.32rem;
            min-height: 28px;
            border: 1px solid rgba(45, 212, 191, 0.28);
            border-radius: 999px;
            background: rgba(45, 212, 191, 0.08);
            color: #a7fff2;
            font-size: 0.68rem;
            font-weight: 900;
            line-height: 1;
            padding: 0.36rem 0.5rem;
            cursor: pointer;
        }
        .taxonomy-discussion-toggle:hover,
        .taxonomy-discussion-toggle[aria-expanded="true"] {
            border-color: rgba(45, 212, 191, 0.62);
            background: rgba(45, 212, 191, 0.16);
            color: #ecfffb;
        }
        .taxonomy-discussion-toggle.has-discussion-count {
            border-color: rgba(251, 191, 36, 0.64);
            background:
                linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(45, 212, 191, 0.12)),
                rgba(0, 0, 0, 0.12);
            color: #fff7d6;
            box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.08), 0 8px 24px rgba(251, 191, 36, 0.13);
        }
        .taxonomy-discussion-count-badge {
            display: none;
            min-width: 1.08rem;
            height: 1.08rem;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            background: rgba(251, 191, 36, 0.24);
            color: #fff7d6;
            font-size: 0.62rem;
            font-weight: 950;
            padding: 0 0.24rem;
        }
        .taxonomy-meta-scrim {
            position: absolute;
            inset: 0;
            z-index: 2;
            display: none;
            background:
                radial-gradient(circle at 50% 42%, rgba(45, 212, 191, 0.10), transparent 18rem),
                rgba(0, 0, 0, 0.62);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            cursor: default;
        }
        .taxonomy-meta-scrim.open {
            display: block;
        }
        .taxonomy-meta-grid {
            position: absolute;
            top: calc(100% + 7px);
            right: 0;
            z-index: 20;
            display: none;
            flex-direction: column;
            flex-wrap: nowrap;
            gap: 0.35rem;
            min-width: 230px;
            max-width: min(80vw, 320px);
            background: rgba(15, 15, 16, 0.98);
            border: 1px solid var(--border-default);
            border-radius: 13px;
            box-shadow: var(--shadow-lg);
            padding: 0.52rem;
        }
        .taxonomy-meta-grid.open {
            display: flex;
        }
        .taxonomy-meta-cell {
            min-width: 0;
            background: var(--bg-subtle);
            border: 1px solid var(--border-subtle);
            border-radius: 9px;
            padding: 0.36rem 0.48rem;
        }
        .taxonomy-meta-cell span {
            display: block;
            color: var(--text-muted);
            font-size: 0.54rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin: 0 0 0.12rem;
        }
        .taxonomy-meta-cell strong {
            color: var(--text-primary);
            font-size: 0.7rem;
            font-weight: 700;
            text-decoration: none;
            overflow-wrap: anywhere;
        }
        .taxonomy-meta-action {
            appearance: none;
            width: 100%;
            border: 1px solid rgba(45, 212, 191, 0.34);
            border-radius: 10px;
            background: rgba(45, 212, 191, 0.10);
            color: var(--text-primary);
            font-size: 0.72rem;
            font-weight: 850;
            letter-spacing: 0.03em;
            padding: 0.5rem 0.58rem;
            text-align: left;
            cursor: pointer;
        }
        .taxonomy-meta-action:hover {
            border-color: rgba(45, 212, 191, 0.62);
            background: rgba(45, 212, 191, 0.16);
        }
        .taxonomy-meta-action:disabled {
            opacity: 0.62;
            cursor: wait;
        }
        .taxonomy-definition-modal {
            position: fixed;
            inset: 0;
            z-index: 10020;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }
        .taxonomy-definition-modal.open {
            display: flex;
        }
        .taxonomy-definition-modal-backdrop {
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 50% 42%, rgba(45, 212, 191, 0.10), transparent 18rem),
                rgba(0, 0, 0, 0.84);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        .taxonomy-definition-modal-panel {
            position: relative;
            z-index: 1;
            width: min(560px, 100%);
            max-height: min(88vh, 720px);
            overflow-y: auto;
            border: 1px solid var(--border-default);
            border-radius: 18px;
            background:
                radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.14), transparent 18rem),
                var(--bg-elevated);
            box-shadow: var(--shadow-lg);
            padding: 1rem;
        }
        .taxonomy-definition-confirm-panel {
            width: min(430px, 100%);
        }
        .taxonomy-definition-modal-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 0.8rem;
        }
        .taxonomy-definition-modal-kicker {
            color: #5eead4;
            font-size: 0.64rem;
            font-weight: 900;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin-bottom: 0.18rem;
        }
        .taxonomy-definition-modal h2 {
            margin: 0;
            font-size: 1.3rem;
            letter-spacing: -0.03em;
        }
        .taxonomy-definition-modal-close {
            appearance: none;
            border: 0;
            background: transparent;
            color: var(--text-muted);
            font-size: 1.6rem;
            line-height: 1;
            cursor: pointer;
        }
        .taxonomy-definition-confirm-copy {
            margin: -0.18rem 0 0.35rem;
            color: var(--text-muted);
            font-size: 0.9rem;
            line-height: 1.45;
        }
        .taxonomy-definition-field {
            display: grid;
            gap: 0.32rem;
            margin-bottom: 0.72rem;
        }
        .taxonomy-definition-field span {
            color: var(--text-muted);
            font-size: 0.68rem;
            font-weight: 850;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .taxonomy-definition-field select,
        .taxonomy-definition-field textarea {
            width: 100%;
            box-sizing: border-box;
            border: 1px solid var(--border-default);
            border-radius: 12px;
            background: rgba(0, 0, 0, 0.22);
            color: var(--text-primary);
            font: inherit;
            font-size: 0.86rem;
            padding: 0.62rem 0.7rem;
            outline: none;
        }
        .taxonomy-definition-field textarea {
            resize: vertical;
            min-height: 130px;
            line-height: 1.45;
        }
        .taxonomy-definition-field select:focus,
        .taxonomy-definition-field textarea:focus {
            border-color: rgba(45, 212, 191, 0.62);
            box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12);
        }
        .taxonomy-definition-modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.5rem;
            margin-top: 0.86rem;
        }
        .taxonomy-definition-run-btn {
            appearance: none;
            border: 1px solid rgba(45, 212, 191, 0.55);
            border-radius: 999px;
            background: #5eead4;
            color: #111;
            font-size: 0.8rem;
            font-weight: 900;
            padding: 0.54rem 0.9rem;
            cursor: pointer;
        }
        .taxonomy-definition-run-btn--update {
            background: transparent;
            color: var(--text-primary);
        }
        .taxonomy-definition-run-btn:disabled,
        .taxonomy-definition-field select:disabled,
        .taxonomy-definition-field textarea:disabled,
        .taxonomy-definition-modal-close:disabled {
            opacity: 0.55;
            cursor: wait;
        }
        .taxonomy-definition-job-status {
            min-height: 1.2rem;
            margin-top: 0.72rem;
            color: var(--text-muted);
            font-size: 0.78rem;
            line-height: 1.4;
        }
        .taxonomy-definition-job-status[data-tone="running"] {
            color: #5eead4;
        }
        .taxonomy-definition-job-status[data-tone="success"] {
            color: var(--success);
        }
        .taxonomy-definition-job-status[data-tone="error"] {
            color: var(--error);
        }
        .taxonomy-definition-progress {
            display: none;
            height: 4px;
            margin-top: 0.58rem;
            overflow: hidden;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
        }
        .taxonomy-definition-progress.active {
            display: block;
        }
        .taxonomy-definition-progress-bar {
            width: 38%;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, rgba(45, 212, 191, 0.16), #5eead4, rgba(56, 189, 248, 0.45));
            animation: taxonomyDefinitionProgress 1.1s ease-in-out infinite;
        }
        @keyframes taxonomyDefinitionProgress {
            0% { transform: translateX(-110%); }
            100% { transform: translateX(280%); }
        }
        .taxonomy-section-stack {
            position: relative;
            z-index: 1;
            background: transparent;
            --taxonomy-heading-body-gap: 0.12rem;
            --taxonomy-body-font-size: 0.9rem;
            --taxonomy-body-line-height: 1.48;
            --taxonomy-paragraph-gap: 0.46rem;
            padding: 0.34rem 0.85rem 1rem;
        }
        .taxonomy-section {
            padding: 0.62rem 0 0.22rem;
            margin-top: 0.78rem;
            display: block;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
        }
        .taxonomy-section:first-child {
            border-top: 0;
            margin-top: 0;
        }
        .taxonomy-section--inline {
            padding-top: 0.28rem;
            margin-top: 0.36rem;
        }
        .taxonomy-section--inline:first-child {
            padding-top: 0.08rem;
        }
        .taxonomy-section h2 {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0.42rem;
            margin: 0.1rem 0 var(--taxonomy-heading-body-gap);
            color: #5eead4;
            font-size: 0.845rem;
            font-weight: 900;
            letter-spacing: 0.1em;
            text-align: left;
            text-transform: uppercase;
        }
        .taxonomy-section--inline h2:not(:first-of-type) {
            margin-top: 1rem;
        }
        .taxonomy-section--nearby-tags h2 {
            color: #7dd3fc;
        }
        .taxonomy-section--rabbit-holes h2 {
            color: #fbbf24;
        }
        .taxonomy-section-body {
            min-width: 0;
            color: var(--text-secondary);
            font-size: var(--taxonomy-body-font-size);
            line-height: var(--taxonomy-body-line-height);
        }
        .taxonomy-section-body p {
            margin: 0 0 var(--taxonomy-paragraph-gap);
        }
        .taxonomy-section-body p:last-child {
            margin-bottom: 0;
        }
        .taxonomy-canonical-summary {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
            gap: 0.32rem;
            margin: 0 0 12px;
            color: rgba(255, 255, 255, 0.48);
            font-size: 0.68rem;
            font-style: italic;
            line-height: 1.35;
            text-align: left;
        }
        .taxonomy-canonical-summary b {
            color: rgba(94, 234, 212, 0.72);
            font-size: 0.56rem;
            font-style: normal;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .taxonomy-canonical-summary i {
            color: rgba(255, 255, 255, 0.24);
            font-style: normal;
        }
        .taxonomy-canonical-summary-tag.is-current {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: underline;
            text-decoration-color: rgba(94, 234, 212, 0.86);
            text-decoration-thickness: 2px;
            text-underline-offset: 3px;
        }
        .taxonomy-attention-grabber {
            position: relative;
            color: var(--text-primary);
            font-size: 0.92rem;
            line-height: 1.38;
            font-weight: 800;
            padding: 0.18rem 0 0.42rem;
            margin: 0.18rem 0 0.46rem;
            border-bottom: 1px solid rgba(45, 212, 191, 0.22);
        }
        .taxonomy-character-rail {
            margin: 0.42rem 0 0.68rem;
            padding: 0.58rem;
            border: 1px solid rgba(45, 212, 191, 0.16);
            border-radius: 16px;
            background:
                radial-gradient(circle at top left, rgba(45, 212, 191, 0.12), transparent 42%),
                rgba(3, 7, 18, 0.42);
            box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
        }
        .taxonomy-character-rail-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.85rem;
            margin-bottom: 0.5rem;
        }
        .taxonomy-character-rail-head div {
            min-width: 0;
            display: block;
        }
        .taxonomy-character-rail-head span {
            color: rgba(255, 255, 255, 0.54);
            font-size: 0.62rem;
            font-weight: 900;
            letter-spacing: 0.13em;
            text-transform: uppercase;
        }
        .taxonomy-character-rail-head strong {
            color: var(--text-primary);
            font-size: 0.86rem;
            font-weight: 900;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .taxonomy-empty-definition {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.85rem;
            margin: 0.48rem 0 0.12rem;
            padding: 0.9rem 0.95rem;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.045);
        }
        .taxonomy-empty-definition.is-generating {
            border-color: rgba(45, 212, 191, 0.18);
            background:
                linear-gradient(135deg, rgba(45, 212, 191, 0.08), rgba(56, 189, 248, 0.04)),
                rgba(255, 255, 255, 0.04);
        }
        .taxonomy-empty-definition-copy {
            min-width: 0;
            display: grid;
            gap: 0.18rem;
        }
        .taxonomy-empty-definition strong {
            color: rgba(255, 255, 255, 0.84);
            font-size: 0.88rem;
            font-weight: 850;
        }
        .taxonomy-empty-definition-copy span {
            color: #99f6e4;
            font-size: 0.74rem;
            font-weight: 750;
        }
        .taxonomy-empty-definition-action {
            flex: 0 0 auto;
            border: 1px solid rgba(94, 234, 212, 0.32);
            border-radius: 999px;
            background: rgba(20, 184, 166, 0.14);
            color: #99f6e4;
            font-size: 0.72rem;
            font-weight: 900;
            padding: 0.42rem 0.72rem;
            cursor: pointer;
        }
        .taxonomy-empty-definition-action:hover {
            background: rgba(20, 184, 166, 0.23);
            color: #fff;
        }
        .taxonomy-empty-definition-loading {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            gap: 0.38rem;
            border: 1px solid rgba(94, 234, 212, 0.28);
            border-radius: 999px;
            background: rgba(20, 184, 166, 0.12);
            color: #99f6e4;
            font-size: 0.72rem;
            font-weight: 900;
            line-height: 1;
            padding: 0.42rem 0.72rem;
            cursor: wait;
            user-select: none;
        }
        .taxonomy-character-rail-viewall {
            flex: 0 0 auto;
            border: 1px solid rgba(94, 234, 212, 0.28);
            border-radius: 999px;
            background: rgba(20, 184, 166, 0.12);
            color: #99f6e4;
            font-size: 0.68rem;
            font-weight: 900;
            padding: 0.34rem 0.62rem;
            cursor: pointer;
            transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
        }
        .taxonomy-character-rail-viewall:hover {
            border-color: rgba(94, 234, 212, 0.5);
            background: rgba(20, 184, 166, 0.2);
            color: #fff;
        }
        .taxonomy-character-rail-viewall:active {
            transform: scale(0.98);
        }
        .taxonomy-character-rail-track {
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: minmax(86px, 102px);
            gap: 0.48rem;
            overflow-x: auto;
            overflow-y: hidden;
            padding: 0.04rem 0.04rem 0.18rem;
            scroll-snap-type: x proximity;
            -webkit-overflow-scrolling: touch;
        }
        .taxonomy-character-rail-track::-webkit-scrollbar {
            height: 6px;
        }
        .taxonomy-character-rail-track::-webkit-scrollbar-thumb {
            border-radius: 999px;
            background: rgba(94, 234, 212, 0.24);
        }
        .taxonomy-character-rail-card {
            min-width: 0;
            display: grid;
            gap: 0.34rem;
            border: 0;
            border-radius: 13px;
            background: rgba(255, 255, 255, 0.055);
            color: var(--text-primary);
            padding: 0.34rem;
            text-align: left;
            cursor: pointer;
            scroll-snap-align: start;
            transition: background var(--transition-fast), transform var(--transition-fast);
        }
        .taxonomy-character-rail-card:hover {
            background: rgba(255, 255, 255, 0.09);
            transform: translateY(-1px);
        }
        .taxonomy-character-rail-avatar {
            display: block;
            aspect-ratio: 3 / 4;
            overflow: hidden;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.08);
        }
        .taxonomy-character-rail-avatar img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }
        .taxonomy-character-rail-name {
            min-height: 2.15em;
            color: rgba(255, 255, 255, 0.86);
            font-size: 0.68rem;
            font-weight: 800;
            line-height: 1.08;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .taxonomy-character-rail-card--skeleton {
            cursor: default;
            pointer-events: none;
        }
        .taxonomy-character-rail-card--skeleton span,
        .taxonomy-character-rail-card--skeleton em {
            display: block;
            border-radius: 10px;
            background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.14), rgba(255,255,255,0.06));
            background-size: 220% 100%;
            animation: taxonomyRailShimmer 1.2s ease-in-out infinite;
        }
        .taxonomy-character-rail-card--skeleton span {
            aspect-ratio: 3 / 4;
        }
        .taxonomy-character-rail-card--skeleton em {
            height: 0.72rem;
            width: 86%;
        }
        @keyframes taxonomyRailShimmer {
            0% { background-position: 120% 0; }
            100% { background-position: -120% 0; }
        }
        .taxonomy-list {
            display: grid;
            gap: 0.16rem;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .taxonomy-list li {
            position: relative;
            padding: 0.26rem 0.5rem 0.26rem 1.02rem;
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.14);
        }
        .taxonomy-list li::before {
            content: "";
            position: absolute;
            left: calc(0.42rem - 6px);
            top: 0.92em;
            width: 5px;
            height: 5px;
            background: #5eead4;
            border-radius: 999px;
        }
        .taxonomy-related-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.32rem;
        }
        .taxonomy-related-tags > span:not(.taxonomy-inline-tag-link):not(.taxonomy-inline-tag-text) {
            border: 1px solid var(--border-default);
            border-radius: var(--radius-full);
            background: rgba(100, 190, 240, 0.08);
            color: var(--text-secondary);
            padding: 0.22rem 0.48rem;
            font-size: 0.68rem;
            font-weight: 700;
        }
        .taxonomy-related-tags .taxonomy-inline-tag-link,
        .taxonomy-related-tags .taxonomy-inline-tag-text {
            font-size: 0.68rem;
            padding: 0.22rem 0.48rem;
        }
        .taxonomy-related-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
            gap: 0.52rem;
        }
        .taxonomy-related-item {
            appearance: none;
            display: block;
            width: 100%;
            text-align: left;
            min-width: 0;
            border: 1px solid rgba(56, 189, 248, 0.24);
            border-radius: 12px;
            background:
                linear-gradient(135deg, rgba(56, 189, 248, 0.13), rgba(45, 212, 191, 0.07)),
                rgba(0, 0, 0, 0.18);
            padding: 0.46rem 0.56rem;
        }
        .taxonomy-related-item[data-tag-slug] {
            color: inherit;
            cursor: pointer;
        }
        .taxonomy-related-item[data-tag-slug]:hover,
        .taxonomy-related-item[data-tag-slug]:focus-visible {
            border-color: rgba(56, 189, 248, 0.56);
            background:
                linear-gradient(135deg, rgba(56, 189, 248, 0.20), rgba(45, 212, 191, 0.12)),
                rgba(0, 0, 0, 0.22);
            outline: none;
        }
        .taxonomy-related-item strong {
            color: #7dd3fc;
            font-size: 0.78rem;
        }
        .taxonomy-section--rabbit-holes .taxonomy-related-item {
            border-color: rgba(251, 191, 36, 0.25);
            background:
                linear-gradient(135deg, rgba(251, 191, 36, 0.13), rgba(45, 212, 191, 0.06)),
                rgba(0, 0, 0, 0.18);
        }
        .taxonomy-section--rabbit-holes .taxonomy-related-item[data-tag-slug]:hover,
        .taxonomy-section--rabbit-holes .taxonomy-related-item[data-tag-slug]:focus-visible {
            border-color: rgba(251, 191, 36, 0.58);
            background:
                linear-gradient(135deg, rgba(251, 191, 36, 0.20), rgba(45, 212, 191, 0.10)),
                rgba(0, 0, 0, 0.22);
        }
        .taxonomy-section--rabbit-holes .taxonomy-inline-tag-link {
            border-color: rgba(251, 191, 36, 0.46);
            background:
                linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(45, 212, 191, 0.10)),
                rgba(3, 7, 18, 0.42);
            color: #fbbf24;
        }
        .taxonomy-inline-tag-link {
            display: inline-flex;
            align-items: center;
            max-width: 100%;
            border: 1px solid rgba(45, 212, 191, 0.42);
            border-radius: 999px;
            background:
                linear-gradient(135deg, rgba(45, 212, 191, 0.2), rgba(14, 165, 233, 0.14)),
                rgba(3, 7, 18, 0.42);
            color: #5eead4;
            font-size: 0.86rem;
            font-weight: 950;
            line-height: 1;
            letter-spacing: 0.015em;
            padding: 0.2rem 0.46rem;
            text-decoration: none;
        }
        .taxonomy-inline-tag-link[data-tag-slug] {
            cursor: pointer;
        }
        .taxonomy-inline-tag-link[data-tag-slug]:hover,
        .taxonomy-inline-tag-link[data-tag-slug]:focus-visible {
            border-color: rgba(125, 211, 252, 0.72);
            background:
                linear-gradient(135deg, rgba(125, 211, 252, 0.24), rgba(45, 212, 191, 0.18)),
                rgba(3, 7, 18, 0.5);
            color: #e0ffff;
            outline: none;
        }
        .taxonomy-inline-tag-link.is-definition-missing {
            border-style: dashed;
            opacity: 0.72;
            filter: saturate(0.65);
        }
        .taxonomy-inline-tag-link.is-definition-missing:hover,
        .taxonomy-inline-tag-link.is-definition-missing:focus-visible {
            opacity: 0.92;
        }
        .taxonomy-inline-tag-text.is-unresolved {
            color: #7dd3fc;
            font-size: 0.86rem;
            font-weight: 850;
            line-height: 1;
        }
        .taxonomy-unresolved-term {
            color: #7dd3fc;
            font-size: 0.78rem;
            font-weight: 850;
        }
        .taxonomy-section-body p .taxonomy-inline-tag-link,
        .taxonomy-section-body p .taxonomy-inline-tag-text,
        .taxonomy-list .taxonomy-inline-tag-link,
        .taxonomy-list .taxonomy-inline-tag-text,
        .taxonomy-question-item .taxonomy-inline-tag-link {
            margin: 0 0.08rem;
            vertical-align: baseline;
        }
        .taxonomy-question-item .taxonomy-inline-tag-text {
            margin: 0 0.08rem;
            vertical-align: baseline;
        }
        .taxonomy-related-item span:not(.taxonomy-inline-tag-link):not(.taxonomy-inline-tag-text) {
            display: block;
            margin-top: 0.12rem;
            color: var(--text-secondary);
            font-size: 0.77rem;
            line-height: 1.38;
        }
        .taxonomy-question-list {
            display: grid;
            gap: 0.38rem;
        }
        .taxonomy-question-item {
            border-left: 2px solid rgba(45, 212, 191, 0.45);
            background: rgba(0, 0, 0, 0.12);
            border-radius: 0 10px 10px 0;
            padding: 0.42rem 0.55rem;
        }
        .taxonomy-question-item strong {
            display: block;
            color: var(--text-primary);
            font-size: 0.82rem;
            line-height: 1.36;
            margin-bottom: 0.18rem;
        }
        .taxonomy-question-item > span {
            display: block;
            color: var(--text-secondary);
            font-size: 0.78rem;
            line-height: 1.42;
        }
        .taxonomy-empty-state,
        .taxonomy-error-state,
        .taxonomy-loading-state {
            border: 1px solid var(--border-default);
            background: var(--bg-elevated);
            border-radius: var(--radius-lg);
            padding: var(--space-5);
            color: var(--text-secondary);
        }
        .taxonomy-loading-state {
            min-height: min(320px, 62vh);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.48rem;
            border: 0;
            border-radius: 0;
            background:
                radial-gradient(circle at 50% 42%, rgba(45, 212, 191, 0.12), transparent 18rem),
                rgba(0, 0, 0, 0.08);
            text-align: center;
        }
        .taxonomy-loading-state strong {
            color: var(--text-primary);
            font-size: 1rem;
            font-weight: 950;
        }
        .taxonomy-loading-state em {
            color: var(--text-muted);
            font-size: 0.78rem;
            font-style: normal;
        }
        .taxonomy-discussion-scrim {
            position: fixed;
            inset: 0;
            z-index: 1240;
            background: rgba(0, 0, 0, 0);
            pointer-events: none;
            transition: background 180ms ease;
        }
        .taxonomy-discussion-scrim.active {
            background: rgba(0, 0, 0, 0.48);
            pointer-events: auto;
        }
        .taxonomy-discussion-drawer {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 1241;
            width: min(460px, 94vw);
            transform: translateX(105%);
            transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
            pointer-events: none;
        }
        .taxonomy-discussion-drawer.open {
            transform: translateX(0);
            pointer-events: auto;
        }
        #entityDiscussionRoot .taxonomy-discussion-scrim {
            z-index: 15040;
        }
        #entityDiscussionRoot .taxonomy-discussion-drawer {
            z-index: 15041;
        }
        .taxonomy-discussion-panel {
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
            border-left: 1px solid rgba(45, 212, 191, 0.22);
            background:
                radial-gradient(circle at 18% 0%, rgba(45, 212, 191, 0.12), transparent 18rem),
                radial-gradient(circle at 86% 8%, rgba(125, 211, 252, 0.10), transparent 16rem),
                rgba(9, 14, 20, 0.98);
            box-shadow: -24px 0 72px rgba(0, 0, 0, 0.42);
            color: var(--text-primary);
        }
        .taxonomy-discussion-body-surface {
            position: relative;
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            isolation: isolate;
        }
        .taxonomy-discussion-panel--character-backdrop .taxonomy-discussion-body-surface::before,
        .taxonomy-discussion-panel--character-backdrop .taxonomy-discussion-body-surface::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
        }
        .taxonomy-discussion-panel--character-backdrop .taxonomy-discussion-body-surface::before {
            background-image:
                linear-gradient(180deg, rgba(3, 7, 18, 0.22), rgba(3, 7, 18, 0.72)),
                var(--taxonomy-buzz-character-bg);
            background-position: center 22%;
            background-size: cover;
            background-repeat: no-repeat;
            filter: none;
            -webkit-filter: none;
            opacity: 0.48;
            transform: none;
        }
        .taxonomy-discussion-panel--character-backdrop .taxonomy-discussion-body-surface::after {
            z-index: 1;
            background:
                radial-gradient(circle at 18% 6%, rgba(45, 212, 191, 0.16), transparent 17rem),
                radial-gradient(circle at 92% 16%, rgba(125, 211, 252, 0.12), transparent 16rem),
                linear-gradient(180deg, rgba(3, 7, 18, 0.32), rgba(3, 7, 18, 0.78) 62%, rgba(3, 7, 18, 0.92)),
                rgba(3, 7, 18, 0.22);
            box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.55);
        }
        .taxonomy-discussion-panel--character-backdrop .taxonomy-buzz-gifts,
        .taxonomy-discussion-panel--character-backdrop .taxonomy-discussion-list,
        .taxonomy-discussion-panel--character-backdrop .taxonomy-discussion-compose {
            position: relative;
            z-index: 2;
        }
        .taxonomy-discussion-panel--character-backdrop .taxonomy-buzz-gifts {
            background:
                linear-gradient(180deg, rgba(5, 12, 20, 0.88), rgba(5, 12, 20, 0.76));
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
        }
        .taxonomy-discussion-panel--character-backdrop .taxonomy-discussion-compose {
            background:
                linear-gradient(180deg, rgba(5, 12, 20, 0.92), rgba(3, 7, 18, 0.96));
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow: 0 -16px 42px rgba(0, 0, 0, 0.30);
        }
        .taxonomy-discussion-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.75rem;
            padding: 0.9rem 1rem 0.72rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }
        .taxonomy-buzz-head {
            align-items: center;
        }
        .taxonomy-buzz-head-copy {
            min-width: 0;
            flex: 1 1 auto;
        }
        .taxonomy-buzz-head-avatar {
            width: 42px;
            height: 42px;
            flex: 0 0 42px;
            border-radius: 12px;
            overflow: hidden;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(94, 234, 212, 0.28);
            background: rgba(94, 234, 212, 0.10);
            color: #ccfbf1;
            font-size: 0.82rem;
            font-weight: 950;
            letter-spacing: 0.04em;
        }
        .taxonomy-buzz-head-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .taxonomy-discussion-head span {
            display: block;
            color: #5eead4;
            font-size: 0.64rem;
            font-weight: 950;
            letter-spacing: 0.12em;
            line-height: 1;
            margin-bottom: 0.28rem;
            text-transform: uppercase;
        }
        .taxonomy-discussion-head h2 {
            margin: 0;
            font-size: 1.25rem;
            line-height: 1;
            letter-spacing: -0.035em;
        }
        .taxonomy-discussion-head p {
            margin: 0.36rem 0 0;
            color: var(--text-muted);
            font-size: 0.76rem;
            line-height: 1.35;
        }
        .taxonomy-buzz-character-title .char-name {
            margin: 0;
            font-size: 1.25rem;
            line-height: 1;
            letter-spacing: -0.035em;
        }
        .taxonomy-buzz-character-row {
            margin-top: 0.38rem;
            display: flex;
            align-items: center;
            gap: 0.38rem;
            flex-wrap: wrap;
        }
        .taxonomy-buzz-character-row .char-chatname,
        .taxonomy-buzz-character-row .char-creator,
        .taxonomy-buzz-character-row .char-creator span {
            display: inline-flex;
            align-items: center;
            margin: 0;
            color: var(--text-muted);
            font-size: 0.76rem;
            font-weight: 750;
            letter-spacing: 0;
            line-height: 1.15;
            text-transform: none;
        }
        .taxonomy-buzz-character-row .char-chatname {
            color: #d9fff8;
            font-weight: 800;
        }
        .taxonomy-buzz-character-row .char-creator-link {
            display: inline-flex;
            align-items: center;
            max-width: 12rem;
            min-height: 1.38rem;
            margin-left: 0.24rem;
            padding: 0.18rem 0.48rem;
            border: 1px solid rgba(94, 234, 212, 0.30);
            border-radius: 999px;
            background: rgba(94, 234, 212, 0.10);
            color: #ccfbf1;
            font-size: 0.72rem;
            font-weight: 900;
            line-height: 1;
            text-decoration: none;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-transform: none;
        }
        .taxonomy-buzz-character-row .char-creator-link:hover {
            border-color: rgba(94, 234, 212, 0.62);
            background: rgba(94, 234, 212, 0.18);
            color: #f0fdfa;
        }
        .taxonomy-discussion-close {
            appearance: none;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: var(--text-muted);
            width: 44px;
            height: 44px;
            flex: 0 0 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.55rem;
            font-weight: 500;
            line-height: 0.82;
            padding: 0;
            cursor: pointer;
            transition: color var(--transition-fast), transform var(--transition-fast);
        }
        .taxonomy-discussion-close:hover {
            color: var(--text-primary);
            transform: scale(1.05);
        }
        .taxonomy-discussion-list {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            display: grid;
            align-content: start;
            gap: 0.56rem;
            padding: 0.78rem 1rem;
        }
        .taxonomy-buzz-gifts {
            display: flex;
            align-items: center;
            gap: 0.66rem;
            padding: 0.66rem 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(3, 7, 18, 0.28);
        }
        .taxonomy-buzz-gifts-row {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 0.38rem;
            overflow-x: auto;
            scrollbar-width: none;
        }
        .taxonomy-buzz-gifts-row::-webkit-scrollbar {
            display: none;
        }
        .taxonomy-buzz-gift-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.22rem;
            min-height: 1.8rem;
            flex: 0 0 auto;
            border: 1px solid rgba(94, 234, 212, 0.22);
            border-radius: 999px;
            background: rgba(94, 234, 212, 0.08);
            color: #d9fff8;
            padding: 0.22rem 0.5rem 0.22rem 0.32rem;
            font-size: 0.72rem;
            font-weight: 950;
            line-height: 1;
        }
        .taxonomy-buzz-gift-emoji {
            font-size: 1rem;
            line-height: 1;
        }
        .taxonomy-buzz-gift-empty {
            display: inline-flex;
            align-items: center;
            min-height: 1.8rem;
            max-width: 100%;
            flex: 0 1 auto;
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: 999px;
            background: rgba(3, 7, 18, 0.64);
            color: rgba(255, 255, 255, 0.90);
            font-size: 0.74rem;
            font-weight: 820;
            line-height: 1.25;
            padding: 0.36rem 0.58rem;
            white-space: normal;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.62);
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
        }
        .taxonomy-buzz-gift-send {
            appearance: none;
            border: 1px solid rgba(251, 113, 133, 0.38);
            border-radius: 999px;
            background: rgba(251, 113, 133, 0.12);
            color: #ffe4ec;
            display: inline-flex;
            align-items: center;
            gap: 0.38rem;
            min-height: 2rem;
            padding: 0.36rem 0.66rem;
            font-size: 0.7rem;
            font-weight: 950;
            letter-spacing: 0.04em;
            line-height: 1;
            text-transform: uppercase;
            white-space: nowrap;
            cursor: pointer;
        }
        .taxonomy-buzz-gift-send:hover {
            border-color: rgba(251, 113, 133, 0.72);
            background: rgba(251, 113, 133, 0.20);
        }
        .taxonomy-buzz-gift-send:disabled {
            opacity: 0.78;
            cursor: wait;
        }
        .taxonomy-buzz-gift-loading-spinner {
            width: 0.82rem;
            height: 0.82rem;
            border: 2px solid rgba(255, 228, 236, 0.32);
            border-top-color: #ffe4ec;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            flex: 0 0 auto;
        }
        .taxonomy-discussion-comment {
            position: relative;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            background: rgba(0, 0, 0, 0.18);
            padding: 0.62rem 0.7rem;
        }
        .taxonomy-discussion-comment.is-original {
            border-color: rgba(45, 212, 191, 0.28);
            background: rgba(45, 212, 191, 0.08);
        }
        .taxonomy-discussion-comment.is-suggest-edit {
            border-color: rgba(251, 191, 36, 0.28);
            background:
                linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(45, 212, 191, 0.035)),
                rgba(0, 0, 0, 0.18);
        }
        .taxonomy-buzz-gift-comment {
            border: 0;
            background: transparent;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.1rem 0.12rem;
        }
        .taxonomy-buzz-gift-comment .taxonomy-buzz-gift-event {
            flex: 1 1 auto;
            min-width: 0;
        }
        .taxonomy-buzz-delete-btn {
            appearance: none;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: rgba(248, 113, 113, 0.78);
            width: 1.8rem;
            height: 1.8rem;
            flex: 0 0 1.8rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left: auto;
            padding: 0;
            font-size: 1.25rem;
            line-height: 1;
            cursor: pointer;
        }
        .taxonomy-buzz-delete-btn:hover {
            background: rgba(248, 113, 113, 0.10);
            color: #fecaca;
        }
        .taxonomy-buzz-comment-actions {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.28rem;
        }
        .taxonomy-buzz-like-btn {
            appearance: none;
            border: 0;
            border-radius: 999px;
            background: transparent;
            color: rgba(148, 163, 184, 0.86);
            min-width: 1.8rem;
            height: 1.8rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.22rem;
            padding: 0 0.42rem;
            font-size: 0.74rem;
            font-weight: 900;
            line-height: 1;
            cursor: pointer;
        }
        .taxonomy-buzz-like-btn i {
            font-size: 0.78rem;
        }
        .taxonomy-buzz-like-btn:hover {
            background: rgba(45, 212, 191, 0.10);
            color: #99f6e4;
        }
        .taxonomy-buzz-like-btn.is-liked {
            color: #5eead4;
            background: rgba(20, 184, 166, 0.12);
        }
        .taxonomy-buzz-like-btn:disabled {
            cursor: not-allowed;
            opacity: 0.52;
        }
        .taxonomy-buzz-like-btn.is-loading {
            opacity: 0.7;
        }
        .taxonomy-buzz-gift-comment .taxonomy-buzz-comment-actions {
            flex: 0 0 auto;
            margin-left: auto;
        }
        .taxonomy-discussion-comment:not(.taxonomy-buzz-gift-comment):has(.taxonomy-buzz-comment-actions),
        .taxonomy-discussion-comment:not(.taxonomy-buzz-gift-comment):has(.taxonomy-buzz-delete-btn) {
            padding-right: 5.4rem;
        }
        .taxonomy-discussion-comment:not(.taxonomy-buzz-gift-comment) > .taxonomy-buzz-comment-actions {
            position: absolute;
            top: 0.36rem;
            right: 0.12rem;
        }
        .taxonomy-discussion-comment:not(.taxonomy-buzz-gift-comment) > .taxonomy-buzz-delete-btn {
            position: absolute;
            top: 0.36rem;
            right: 0.12rem;
        }
        .taxonomy-discussion-comment-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.38rem;
            margin-bottom: 0.28rem;
        }
        .taxonomy-discussion-comment-meta strong {
            color: #ccfbf1;
            font-size: 0.72rem;
            font-weight: 900;
        }
        .taxonomy-discussion-comment-meta .taxonomy-discussion-author-link {
            color: #ccfbf1;
            font-size: 0.72rem;
            font-weight: 900;
        }
        .taxonomy-discussion-comment-meta span,
        .taxonomy-discussion-comment-meta em {
            color: var(--text-muted);
            font-size: 0.64rem;
            font-style: normal;
            font-weight: 750;
        }
        .taxonomy-discussion-comment-meta em {
            color: #7dd3fc;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }
        .taxonomy-discussion-comment-meta .taxonomy-discussion-kind {
            border: 1px solid rgba(251, 191, 36, 0.24);
            border-radius: 999px;
            background: rgba(251, 191, 36, 0.10);
            color: #fbbf24;
            padding: 0.12rem 0.36rem;
        }
        .taxonomy-discussion-comment p {
            margin: 0;
            color: var(--text-secondary);
            font-size: 0.88rem;
            line-height: 1.42;
            overflow-wrap: anywhere;
        }
        .taxonomy-discussion-comment p.taxonomy-buzz-gift-event {
            display: flex;
            align-items: center;
            gap: 0.32rem;
            color: #ffe4ec;
            font-weight: 800;
            font-size: 0.82rem;
        }
        .taxonomy-buzz-gift-event-emoji {
            width: 1.24rem;
            height: 1.24rem;
            flex: 0 0 auto;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(251, 113, 133, 0.16);
            font-size: 0.86rem;
            line-height: 1;
            margin-right: 0.24rem;
        }
        .taxonomy-buzz-gift-event b {
            display: inline-flex;
            align-items: center;
            min-height: 1.5rem;
            padding: 0.14rem 0.48rem 0.14rem 0.18rem;
            border: 1px solid rgba(251, 113, 133, 0.24);
            border-radius: 999px;
            background: rgba(251, 113, 133, 0.10);
            color: #fb7185;
            line-height: 1;
        }
        .taxonomy-buzz-gift-event em {
            color: var(--text-muted);
            font-size: 0.72rem;
            font-style: normal;
            font-weight: 750;
        }
        .taxonomy-discussion-empty,
        .taxonomy-discussion-loading,
        .taxonomy-discussion-error {
            border: 1px dashed rgba(45, 212, 191, 0.22);
            border-radius: 14px;
            padding: 0.8rem;
            color: var(--text-muted);
            font-size: 0.84rem;
            line-height: 1.42;
        }
        .taxonomy-discussion-empty {
            border-style: solid;
            border-color: rgba(45, 212, 191, 0.36);
            background:
                linear-gradient(135deg, rgba(45, 212, 191, 0.10), rgba(251, 113, 133, 0.08)),
                rgba(3, 7, 18, 0.66);
            color: rgba(255, 255, 255, 0.90);
            font-weight: 820;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.62);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 28px rgba(0, 0, 0, 0.22);
        }
        .taxonomy-discussion-error {
            border-color: rgba(248, 113, 113, 0.36);
            color: #fecaca;
        }
        .taxonomy-discussion-compose {
            flex: 0 0 auto;
            display: grid;
            gap: 0.54rem;
            padding: 0.76rem 1rem 0.9rem;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(3, 7, 18, 0.42);
        }
        .taxonomy-discussion-input-wrap {
            position: relative;
            min-width: 0;
        }
        .taxonomy-discussion-compose textarea {
            width: 100%;
            min-height: 5.8rem;
            max-height: 13rem;
            resize: vertical;
            border: 1px solid rgba(255, 255, 255, 0.20);
            border-radius: 13px;
            background: rgba(2, 6, 23, 0.76);
            color: #ffffff;
            font: inherit;
            font-size: 0.86rem;
            line-height: 1.42;
            padding: 0.66rem 0.72rem;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.24);
        }
        .taxonomy-discussion-compose textarea::placeholder {
            color: rgba(248, 250, 252, 0.84);
            opacity: 1;
        }
        .taxonomy-discussion-input-wrap textarea {
            padding-top: 2.34rem;
        }
        .taxonomy-discussion-kind-toggle {
            position: absolute;
            top: 0.48rem;
            right: 0.5rem;
            display: inline-flex;
            align-items: center;
            gap: 2px;
            padding: 2px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 999px;
            background: rgba(3, 7, 18, 0.84);
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
        }
        .taxonomy-discussion-kind-toggle button {
            appearance: none;
            min-height: 1.42rem;
            border: 0;
            border-radius: 999px;
            background: transparent;
            color: var(--text-muted);
            font-size: 0.62rem;
            font-weight: 900;
            line-height: 1;
            padding: 0.28rem 0.48rem;
            cursor: pointer;
        }
        .taxonomy-discussion-kind-toggle button.active {
            background: rgba(251, 191, 36, 0.16);
            color: #fef3c7;
        }
        .taxonomy-discussion-compose textarea:focus {
            outline: none;
            border-color: rgba(45, 212, 191, 0.62);
            box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.08);
        }
        .taxonomy-discussion-compose-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.7rem;
        }
        .taxonomy-discussion-compose-row span {
            color: var(--text-muted);
            font-size: 0.68rem;
            line-height: 1.3;
        }
        .taxonomy-discussion-compose-row button {
            appearance: none;
            border: 1px solid rgba(45, 212, 191, 0.42);
            border-radius: 999px;
            background: rgba(45, 212, 191, 0.16);
            color: #d9fff8;
            font-size: 0.72rem;
            font-weight: 950;
            letter-spacing: 0.05em;
            line-height: 1;
            padding: 0.52rem 0.72rem;
            text-transform: uppercase;
            cursor: pointer;
        }
        .taxonomy-discussion-compose-row button:disabled {
            opacity: 0.58;
            cursor: wait;
        }
        .taxonomy-buzz-gift-modal-scrim {
            position: absolute;
            inset: 0;
            z-index: 2;
            background: rgba(0, 0, 0, 0.58);
        }
        .taxonomy-buzz-gift-modal {
            position: absolute;
            left: 1rem;
            right: 1rem;
            top: 50%;
            z-index: 3;
            transform: translateY(-50%);
            max-height: min(78vh, 720px);
            overflow: hidden;
            border: 1px solid rgba(94, 234, 212, 0.24);
            border-radius: 18px;
            background:
                radial-gradient(circle at 16% 0%, rgba(251, 113, 133, 0.16), transparent 15rem),
                rgba(8, 13, 20, 0.98);
            box-shadow: 0 22px 70px rgba(0, 0, 0, 0.52);
            display: flex;
            flex-direction: column;
            min-height: 0;
        }
        .taxonomy-buzz-gift-modal-head {
            flex: 0 0 auto;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.8rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding: 0.84rem 0.84rem 0.72rem;
        }
        .taxonomy-buzz-gift-modal-head span {
            display: block;
            color: #fb7185;
            font-size: 0.64rem;
            font-weight: 950;
            letter-spacing: 0.12em;
            line-height: 1;
            margin-bottom: 0.25rem;
            text-transform: uppercase;
        }
        .taxonomy-buzz-gift-modal-head h3 {
            margin: 0;
            color: var(--text-primary);
            font-size: 1.1rem;
            line-height: 1;
            letter-spacing: -0.03em;
        }
        .taxonomy-buzz-gift-modal-head button {
            appearance: none;
            border: 0;
            background: transparent;
            color: var(--text-muted);
            font-size: 2.1rem;
            line-height: 0.8;
            cursor: pointer;
        }
        .taxonomy-buzz-gift-modal-body {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 0.84rem;
        }
        .taxonomy-buzz-gift-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.5rem;
        }
        .taxonomy-buzz-gift-option {
            appearance: none;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.045);
            color: var(--text-primary);
            display: grid;
            grid-template-columns: 2.2rem minmax(0, 1fr);
            gap: 0.5rem;
            align-items: center;
            min-height: 4.6rem;
            padding: 0.55rem;
            text-align: left;
            cursor: pointer;
        }
        .taxonomy-buzz-gift-option:hover {
            border-color: rgba(251, 113, 133, 0.52);
            background: rgba(251, 113, 133, 0.10);
        }
        .taxonomy-buzz-gift-option:disabled {
            opacity: 0.62;
            cursor: wait;
        }
        .taxonomy-buzz-gift-option.is-submitting {
            opacity: 1;
            border-color: rgba(251, 113, 133, 0.68);
            background: rgba(251, 113, 133, 0.12);
        }
        .taxonomy-buzz-gift-option-emoji {
            width: 2.2rem;
            height: 2.2rem;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(94, 234, 212, 0.10);
            font-size: 1.3rem;
        }
        .taxonomy-buzz-gift-option-spinner {
            width: 1.14rem;
            height: 1.14rem;
            border: 2px solid rgba(255, 255, 255, 0.24);
            border-top-color: #fb7185;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        .taxonomy-buzz-gift-option-copy {
            min-width: 0;
            display: grid;
            gap: 0.18rem;
        }
        .taxonomy-buzz-gift-option-copy strong {
            color: #fff;
            font-size: 0.82rem;
            font-weight: 950;
            line-height: 1.05;
        }
        .taxonomy-buzz-gift-option-copy em {
            color: var(--text-muted);
            font-size: 0.68rem;
            font-style: normal;
            font-weight: 650;
            line-height: 1.22;
        }
        .taxonomy-buzz-gift-option-status {
            color: #ffe4ec;
            font-size: 0.68rem;
            font-weight: 900;
            line-height: 1.1;
        }
        .taxonomy-loading-spinner {
            width: 30px;
            height: 30px;
            border: 2px solid rgba(45, 212, 191, 0.18);
            border-top-color: #5eead4;
            border-radius: 999px;
            animation: taxonomyLoadingSpin 0.8s linear infinite;
        }
        @keyframes taxonomyLoadingSpin {
            to { transform: rotate(360deg); }
        }
        .tagverse-home {
            --tagverse-home-toolbar-offset: max(0px, calc(clamp(0.85rem, 2.3vw, 1.5rem) - 20px));
            min-height: 100%;
            padding: var(--tagverse-home-toolbar-offset) clamp(0.8rem, 3vw, 2rem) 2rem;
            background: transparent;
            text-align: center;
        }
        .tagverse-home-toolbar {
            position: sticky;
            top: var(--tagverse-home-toolbar-offset);
            z-index: 12;
            width: min(760px, 100%);
            margin: 0 auto 0.82rem;
            padding: 0.56rem 0.68rem 0.62rem;
            border: 1px solid rgba(45, 212, 191, 0.16);
            border-radius: 18px;
            background:
                radial-gradient(circle at 18% 0%, rgba(45, 212, 191, 0.10), transparent 18rem),
                rgba(8, 13, 18, 0.94);
            box-shadow: 0 16px 45px rgba(0, 0, 0, 0.24);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        .tagverse-home-hero {
            max-width: none;
            margin: 0 auto 0.52rem;
        }
        .tagverse-home-hero h1 {
            margin: 0;
            color: var(--text-primary);
            font-size: clamp(2rem, 5vw, 4rem);
            line-height: 0.92;
            letter-spacing: -0.06em;
        }
        .tagverse-home-controls {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: center;
            gap: 0.38rem;
            max-width: none;
            margin: 0 auto;
        }
        .tagverse-home-filter-wrap {
            position: relative;
            flex: 1 1 320px;
            max-width: 560px;
            min-width: min(280px, 100%);
        }
        .tagverse-home-controls .tag-filter-input {
            width: 100%;
            min-width: 0;
            text-align: center;
        }
        .tagverse-home-options {
            position: relative;
            flex: 0 0 auto;
            z-index: 8;
        }
        .tagverse-home-options-toggle {
            appearance: none;
            width: 1.7rem;
            height: 2.3rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: var(--text-secondary);
            font-size: 1.52rem;
            font-weight: 1000;
            line-height: 1;
            cursor: pointer;
            text-shadow: 0 0 12px rgba(45, 212, 191, 0.22);
        }
        .tagverse-home-options-toggle:hover,
        .tagverse-home-options.open .tagverse-home-options-toggle {
            color: #5eead4;
            background: transparent;
        }
        .tagverse-home-options-menu {
            position: absolute;
            top: calc(100% + 0.5rem);
            right: 0;
            width: min(230px, calc(100vw - 2rem));
            display: none;
            padding: 0.65rem;
            border: 1px solid rgba(45, 212, 191, 0.18);
            border-radius: 18px;
            background: rgba(9, 14, 20, 0.96);
            box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
            text-align: left;
        }
        .tagverse-home-options.open .tagverse-home-options-menu {
            display: block;
        }
        .tagverse-home-options-label {
            margin: 0.12rem 0 0.32rem;
            color: var(--text-muted);
            font-size: 0.64rem;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .tagverse-home-options-menu .taxonomy-browse-mode-toggle,
        .tagverse-home-options-menu .tagverse-home-mode-toggle {
            width: 100%;
            margin: 0 0 0.58rem;
        }
        .tagverse-home-options-menu .taxonomy-browse-mode-toggle:last-child,
        .tagverse-home-options-menu .tagverse-home-mode-toggle:last-child {
            margin-bottom: 0;
        }
        .taxonomy-browse-options {
            display: flex;
            justify-content: flex-end;
            margin: -0.18rem 0 0.42rem;
            z-index: 10;
        }
        .taxonomy-browse-options .taxonomy-browse-options-toggle {
            width: 1.45rem;
            height: 1.65rem;
            font-size: 1.34rem;
        }
        .taxonomy-browse-options .taxonomy-browse-options-menu {
            top: calc(100% + 0.28rem);
            width: min(218px, calc(100vw - 2rem));
        }
        .taxonomy-sort-toggle {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.12rem;
            padding: 0.12rem 0.14rem 0.12rem 0.2rem;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.18);
            cursor: pointer;
        }
        .taxonomy-sort-glyph {
            width: 1.04rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: rgba(148, 163, 184, 0.76);
        }
        .taxonomy-sort-glyph svg {
            width: 0.86rem;
            height: 0.86rem;
            display: block;
        }
        .taxonomy-sort-toggle button {
            appearance: none;
            width: 2.05rem;
            height: 1.72rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 0;
            border-radius: 999px;
            background: transparent;
            color: rgba(148, 163, 184, 0.9);
            cursor: pointer;
            transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
        }
        .taxonomy-sort-toggle button:hover {
            color: #d9fff8;
            transform: translateY(-1px);
        }
        .taxonomy-sort-toggle button.active {
            background: rgba(45, 212, 191, 0.16);
            color: #5eead4;
        }
        .taxonomy-sort-token {
            display: block;
            font-size: 0.58rem;
            font-weight: 950;
            letter-spacing: 0.02em;
            line-height: 1;
        }
        .taxonomy-sort-toggle--sidebar button,
        .taxonomy-sort-toggle--drawer button {
            width: 2.05rem;
            height: 1.65rem;
        }
        .taxonomy-sort-toggle--sidebar .taxonomy-sort-glyph,
        .taxonomy-sort-toggle--drawer .taxonomy-sort-glyph {
            width: 1.02rem;
        }
        .taxonomy-sort-toggle--sidebar .taxonomy-sort-glyph svg,
        .taxonomy-sort-toggle--drawer .taxonomy-sort-glyph svg {
            width: 0.88rem;
            height: 0.88rem;
        }
        .taxonomy-sort-toggle--sidebar .taxonomy-sort-token,
        .taxonomy-sort-toggle--drawer .taxonomy-sort-token {
            font-size: 0.68rem;
        }
        .tag-filter-bar > .taxonomy-sort-toggle {
            margin: 0;
        }
        .taxonomy-sidebar-options-mount .taxonomy-sort-toggle {
            margin: 0;
        }
        .taxonomy-sidebar-options-mount {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            gap: 0.24rem;
        }
        .tag-filter-bar .taxonomy-browse-options,
        .taxonomy-sidebar-options-mount .taxonomy-browse-options {
            align-items: center;
            margin: 0;
        }
        #taxonomyTagDrawerBody .tag-filter-toolbar {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        #taxonomyTagDrawerBody .tag-filter-bar {
            flex: 1 1 auto;
            min-width: 0;
            margin-bottom: 0;
        }
        #taxonomyTagDrawerBody .taxonomy-browse-options .taxonomy-browse-options-toggle {
            height: 2rem;
        }
        .tagverse-home-mode-toggle {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.18);
            padding: 0.18rem;
        }
        .tagverse-home-mode-toggle button {
            appearance: none;
            border: 0;
            border-radius: 999px;
            background: transparent;
            color: var(--text-muted);
            font-size: 0.72rem;
            font-weight: 900;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            padding: 0.42rem 0.62rem;
            cursor: pointer;
        }
        .tagverse-home-mode-toggle button.active {
            background: rgba(45, 212, 191, 0.16);
            color: #5eead4;
        }
        .tagverse-home-cloud {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 0.42rem;
            max-width: 1180px;
            margin: 0 auto;
        }
        .tagverse-home-cloud-item {
            --heat: 0.4;
            --scale: 1;
            appearance: none;
            display: inline-flex;
            align-items: baseline;
            border: 1px solid rgba(45, 212, 191, calc(0.12 + var(--heat) * 0.38));
            border-radius: 999px;
            background:
                linear-gradient(135deg, rgba(45, 212, 191, calc(0.05 + var(--heat) * 0.18)), rgba(245, 158, 11, calc(0.02 + var(--heat) * 0.12))),
                rgba(0, 0, 0, 0.18);
            color: rgba(230, 255, 250, calc(0.55 + var(--heat) * 0.45));
            font-size: calc(0.74rem * var(--scale));
            font-weight: 900;
            line-height: 1;
            padding: calc(0.26rem * var(--scale)) calc(0.46rem * var(--scale));
            cursor: pointer;
            transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
        }
        .tagverse-home-cloud-item:hover {
            transform: translateY(-1px);
            border-color: rgba(45, 212, 191, 0.7);
            color: #f8fffb;
        }
        .tagverse-home-categories {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: center;
            gap: 0.55rem;
            max-width: 1180px;
            margin: 0 auto;
        }
        .tagverse-home-category {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.3rem;
            max-width: 100%;
            border: 1px solid rgba(255, 255, 255, 0.055);
            border-radius: 16px;
            background: rgba(0, 0, 0, 0.12);
            padding: 0.42rem 0.5rem;
        }
        .tagverse-home-category h2 {
            flex: 0 0 auto;
            margin: 0 0.18rem 0 0;
            color: var(--accent-primary);
            font-size: 0.68rem;
            font-weight: 950;
            letter-spacing: 0.09em;
            text-transform: uppercase;
        }
        .tagverse-home-category-cloud {
            display: inline-flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.26rem;
        }
        .tagverse-home-category-item {
            --heat: 0.4;
            --scale: 1;
            appearance: none;
            display: inline-flex;
            align-items: baseline;
            border: 1px solid rgba(56, 189, 248, calc(0.08 + var(--heat) * 0.28));
            border-radius: 999px;
            background: rgba(56, 189, 248, calc(0.035 + var(--heat) * 0.12));
            color: rgba(220, 242, 255, calc(0.6 + var(--heat) * 0.36));
            font-size: calc(0.74rem * var(--scale));
            font-weight: 900;
            line-height: 1;
            padding: calc(0.26rem * var(--scale)) calc(0.46rem * var(--scale));
            cursor: pointer;
        }
        .tagverse-home-category-item:hover {
            border-color: rgba(56, 189, 248, 0.64);
            color: #f2fbff;
        }
        .tagverse-debug-footer {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.35rem;
            margin: 1rem auto 0;
            max-width: 980px;
            color: var(--text-muted);
            font-size: 0.68rem;
        }
        .tagverse-debug-footer span {
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.16);
            padding: 0.24rem 0.48rem;
        }
        #taxonomyTagDrawer .tag-drawer-body {
            padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
        }
        @media (max-width: 768px) {
            #taxonomyTagDrawer {
                height: min(92dvh, calc(100dvh - 44px));
                max-height: min(92dvh, calc(100dvh - 44px));
            }
        }
        .taxonomy-drawer-cloud-title {
            color: var(--accent-primary);
            font-size: 0.62rem;
            font-weight: 800;
            letter-spacing: 0.09em;
            text-transform: uppercase;
            margin: 0 0 6px;
        }
        @media (min-width: 769px) {
            .view-taxonomy .tag-drawer-toggle {
                display: none;
            }
        }

        /* Desktop: mobile-scroll-container is just a normal wrapper (no special styling) */
        @media (min-width: 769px) {
            .mobile-scroll-container {
                display: block;
                position: static;
                overflow: visible;
                padding: 0;
                height: auto;
            }
            
            /* Ensure desktop has normal scrolling */
            html {
                overflow: visible;
                position: static;
            }
            
            body {
                overflow: visible;
                position: relative;
            }
        }

        /* ========================================
           TOP NAVIGATION BAR
           ======================================== */
        .top-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background: rgba(15, 15, 16, 0.96);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
            border-bottom: 1px solid var(--border-subtle);
            padding: 0;
            display: flex;
            align-items: center;
            z-index: 900;
        }

        /* Keep app header consistently dark over wall light mode while preserving glass blur. */
        body.wall-view-active .top-bar {
            background: #000 !important;
            border-bottom-color: rgba(255, 255, 255, 0.14);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

        .top-bar-inner {
            width: 100%;
            max-width: var(--page-max-width);
            margin: 0 auto;
            padding: 0 var(--space-2);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .top-bar-left {
            display: flex;
            align-items: center;
            gap: var(--space-5);
        }

        .top-bar-right {
            display: flex;
            align-items: center;
            gap: var(--space-3);
        }

        .top-creator-policy-link {
            display: none;
            align-items: center;
            justify-content: center;
            height: 28px;
            padding: 0 10px;
            border: 1px solid rgba(255, 45, 154, 0.42);
            border-radius: 6px;
            background: rgba(255, 45, 154, 0.11);
            color: #ffd7ee;
            font-size: 0.74rem;
            font-weight: 850;
            line-height: 1;
            text-decoration: none;
            white-space: nowrap;
            transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
        }

        .top-header-link-icon {
            display: none;
        }

        .top-header-link-label {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 0;
        }

        .top-how-works-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 28px;
            padding: 0 10px;
            border: 1px solid rgba(59, 130, 246, 0.38);
            border-radius: 6px;
            background: rgba(59, 130, 246, 0.1);
            color: #bfdbfe;
            font-size: 0.74rem;
            font-weight: 850;
            line-height: 1;
            text-decoration: none;
            white-space: nowrap;
            transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
        }

        .top-creator-policy-link:hover {
            background: rgba(255, 45, 154, 0.18);
            border-color: rgba(255, 90, 179, 0.68);
            color: #ffffff;
            transform: translateY(-1px);
        }

        .top-how-works-link:hover {
            background: rgba(59, 130, 246, 0.18);
            border-color: rgba(96, 165, 250, 0.64);
            color: #ffffff;
            transform: translateY(-1px);
        }

        .top-discord-link {
            display: inline-flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 5px;
            min-width: 50px;
            height: 28px;
            padding: 0 8px;
            border: 1px solid rgba(88, 101, 242, 0.46);
            border-radius: 6px;
            background: rgba(88, 101, 242, 0.13);
            color: #e7eaff;
            text-decoration: none;
            line-height: 1;
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
            transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
        }

        .top-discord-link:hover {
            background: rgba(88, 101, 242, 0.22);
            border-color: rgba(126, 139, 255, 0.68);
            transform: translateY(-1px);
        }

        .top-discord-kicker {
            display: block;
            white-space: nowrap;
        }

        .top-discord-icon {
            display: block;
            order: 2;
            color: #ffffff;
            font-size: 0.92rem;
            line-height: 1;
        }

        .top-discord-kicker {
            order: 1;
            color: #ffffff;
            font-size: 0.66rem;
            font-weight: 850;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        .top-discord-label {
            display: none;
        }

        .app-title {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 1.125rem;
            font-weight: 600;
            color: #ffffff;
            text-decoration: none;
            letter-spacing: -0.02em;
        }

        .app-title-stack {
            display: inline-flex;
            flex-direction: column;
            align-items: flex-end;
            line-height: 1;
        }

        .app-title-text {
            line-height: 1.1;
        }

        /* Tiny version label under the logo without affecting layout/padding */
        .app-logo {
            position: relative;
            display: inline-block;
            line-height: 0;
            transform: translateY(-2px);
        }
        .app-version {
            position: relative;
            left: auto;
            top: auto;
            transform: none;
            margin-top: -2px;
            font-size: 7px;
            line-height: 1;
            letter-spacing: 0.02em;
            color: #000000;
            font-weight: 700;
            background: #ffeb3b;
            padding: 1px 4px;
            border-radius: 2px;
            pointer-events: none;
            user-select: none;
            white-space: nowrap;
        }
        .app-version-note {
            position: absolute;
            left: 50%;
            top: 100%;
            transform: translateX(-50%);
            margin-top: 9px;
            font-size: 6px;
            line-height: 1;
            letter-spacing: 0.02em;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.74);
            pointer-events: none;
            user-select: none;
            white-space: nowrap;
        }
        .app-title:hover {
            color: #ffffff;
        }
        .app-title-text {
            display: block;
        }
        /* Logo image: zoomed + cropped in a fixed viewport */
        .app-logo-img-wrap {
            display: inline-block;
            width: 34px;
            height: 34px;
            overflow: hidden;
            border-radius: 4px;
            flex-shrink: 0;
            line-height: 0;
        }
        .app-logo-img-wrap .app-title-icon {
            display: block;
            width: 48px;
            height: 48px;
            margin: -7px 0 0 -7px;
            object-fit: cover;
            object-position: center;
        }
        .app-title-icon {
            display: block;
            width: 24px;
            height: 24px;
            fill: none;
            stroke: var(--brand-hot-pink);
            stroke-width: 2;
        }
        .app-title-icon path {
            stroke: var(--brand-hot-pink);
        }

        /* Navigation Tabs */
        .desktop-header-nav {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        .nav-tabs {
            display: flex;
            align-items: center;
            gap: 2px;
            background: var(--bg-subtle);
            padding: 3px;
            border-radius: var(--radius-md);
        }

        .nav-tab {
            padding: 0.375rem 0.5rem;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text-secondary);
            background: transparent;
            border: none;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: color var(--transition-fast), background-color var(--transition-fast);
            white-space: nowrap;
        }

        .nav-tab:hover {
            color: var(--text-primary);
        }

        .nav-tab.active {
            color: #ffffff;
            background:
                linear-gradient(180deg, rgba(255, 45, 154, 0.24), rgba(255, 45, 154, 0.14)),
                var(--bg-elevated);
            box-shadow:
                inset 0 0 0 1px rgba(255, 45, 154, 0.34),
                0 4px 12px rgba(255, 45, 154, 0.12),
                var(--shadow-sm);
        }
        .nav-tab.active:hover {
            color: #ffffff;
            background:
                linear-gradient(180deg, rgba(255, 45, 154, 0.3), rgba(255, 45, 154, 0.18)),
                var(--bg-elevated);
        }
        .nav-tab.nav-tab-icon-only {
            padding: 0.375rem 0.375rem;
            min-width: auto;
        }
        .nav-tab.nav-tab-icon-only i {
            display: block;
            font-size: 1rem;
        }
        .nav-tab.nav-tab-creator-tools {
            color: #60a5fa;
            font-weight: 800;
            letter-spacing: 0.02em;
        }
        .nav-tab.nav-tab-creator-tools:hover,
        .nav-tab.nav-tab-creator-tools.active,
        .nav-tab.nav-tab-creator-tools.active:hover {
            color: #93c5fd;
        }

        .nav-tools-dropdown {
            position: relative;
            flex: 0 0 auto;
        }

        .nav-tools-trigger {
            appearance: none;
            -webkit-appearance: none;
            border: 1px solid rgba(59, 130, 246, 0.5);
            border-radius: var(--radius-sm);
            background:
                linear-gradient(180deg, rgba(59, 130, 246, 0.24), rgba(37, 99, 235, 0.18)),
                rgba(59, 130, 246, 0.12);
            color: #bfdbfe;
            min-height: 28px;
            padding: 0.1rem 0.48rem;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-family: inherit;
            font-size: 0.82rem;
            font-weight: 900;
            letter-spacing: 0.08em;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
        }

        .nav-tools-trigger:hover,
        .nav-tools-dropdown.open .nav-tools-trigger {
            border-color: rgba(96, 165, 250, 0.76);
            background:
                linear-gradient(180deg, rgba(96, 165, 250, 0.3), rgba(37, 99, 235, 0.22)),
                rgba(59, 130, 246, 0.16);
            color: #ffffff;
            box-shadow: 0 6px 14px rgba(59, 130, 246, 0.18);
        }

        .nav-tools-trigger.active {
            border-color: rgba(147, 197, 253, 0.82);
            background:
                linear-gradient(180deg, rgba(96, 165, 250, 0.34), rgba(37, 99, 235, 0.24)),
                rgba(59, 130, 246, 0.18);
            color: #ffffff;
            box-shadow: 0 7px 16px rgba(59, 130, 246, 0.24);
        }

        .nav-tools-arrow {
            color: currentColor;
            font-size: calc(1em + 3pt);
            line-height: 0.8;
            transition: transform var(--transition-fast);
        }

        .nav-tools-dropdown.open .nav-tools-arrow {
            transform: rotate(180deg);
        }

        .nav-tools-menu {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            right: auto;
            z-index: 930;
            min-width: 180px;
            padding: 6px;
            display: none;
            flex-direction: column;
            gap: 2px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-xl);
        }

        .nav-tools-dropdown.open .nav-tools-menu {
            display: flex;
            animation: fadeIn var(--transition-fast);
        }

        .nav-tools-item {
            width: 100%;
            border: none;
            border-radius: var(--radius-sm);
            background: transparent;
            color: var(--text-secondary);
            padding: 9px 10px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: inherit;
            font-size: 0.86rem;
            font-weight: 750;
            line-height: 1.15;
            text-align: left;
            text-decoration: none;
            white-space: nowrap;
            cursor: pointer;
            transition: background-color var(--transition-fast), color var(--transition-fast);
        }

        .nav-tools-item:hover,
        .nav-tools-item.active {
            background: color-mix(in srgb, #3b82f6 15%, var(--bg-subtle) 85%);
            color: #dbeafe;
        }

        .nav-tools-item-title {
            flex: 1 1 auto;
            min-width: 0;
        }

        .nav-add-dropdown {
            position: relative;
            flex: 0 0 auto;
        }

        .nav-add-trigger {
            appearance: none;
            -webkit-appearance: none;
            border: 1px solid color-mix(in srgb, #facc15 68%, var(--border-subtle) 32%);
            border-radius: var(--radius-sm);
            background:
                linear-gradient(180deg, rgba(250, 204, 21, 0.92), rgba(234, 179, 8, 0.9)),
                #facc15;
            color: #241600;
            min-height: 28px;
            padding: 0.1rem 0.48rem;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-family: inherit;
            font-size: 0.82rem;
            font-weight: 900;
            letter-spacing: 0.08em;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
        }

        .nav-add-trigger:hover,
        .nav-add-dropdown.open .nav-add-trigger {
            border-color: color-mix(in srgb, #fde047 82%, var(--border-subtle) 18%);
            background:
                linear-gradient(180deg, rgba(253, 224, 71, 0.98), rgba(250, 204, 21, 0.94)),
                #fde047;
            color: #1f1300;
            box-shadow: 0 6px 14px rgba(250, 204, 21, 0.18);
        }

        .nav-add-trigger.active {
            border-color: #fde047;
            background:
                linear-gradient(180deg, rgba(250, 204, 21, 1), rgba(234, 179, 8, 0.96)),
                #facc15;
            color: #211400;
            box-shadow: 0 7px 16px rgba(250, 204, 21, 0.24);
        }

        .nav-add-arrow {
            color: currentColor;
            font-size: calc(1em + 3pt);
            line-height: 0.8;
            transition: transform var(--transition-fast);
        }

        .nav-add-dropdown.open .nav-add-arrow {
            transform: rotate(180deg);
        }

        .nav-add-menu {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            right: auto;
            z-index: 930;
            min-width: 212px;
            padding: 6px;
            display: none;
            flex-direction: column;
            gap: 2px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-xl);
        }

        .nav-add-dropdown.open .nav-add-menu {
            display: flex;
            animation: fadeIn var(--transition-fast);
        }

        .nav-add-item {
            width: 100%;
            border: none;
            border-radius: var(--radius-sm);
            background: transparent;
            color: var(--text-secondary);
            padding: 9px 10px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: inherit;
            font-size: 0.86rem;
            font-weight: 700;
            line-height: 1.15;
            text-align: left;
            cursor: pointer;
            white-space: nowrap;
            transition: background-color var(--transition-fast), color var(--transition-fast);
        }

        .nav-add-item:hover,
        .nav-add-item.active {
            background: color-mix(in srgb, var(--brand-hot-pink) 12%, var(--bg-subtle) 88%);
            color: var(--text-primary);
        }

        .nav-add-item-title {
            flex: 1 1 auto;
            min-width: 0;
        }

        .nav-add-item-title .scope-vault-lock {
            margin: 0 0.16em;
        }

        .nav-add-item-vault .nav-vault-accent,
        .mobile-section-nav-item-upload .nav-vault-accent,
        .mobile-section-nav-action-add .nav-vault-accent {
            display: inline-flex;
            align-items: center;
            gap: 0.18em;
            color: #facc15;
            font-weight: 800;
        }

        .nav-add-item-vault .scope-vault-lock,
        .mobile-section-nav-item-upload .scope-vault-lock,
        .mobile-section-nav-action-add .scope-vault-lock {
            color: currentColor;
            margin: 0;
        }

        .mobile-section-nav {
            display: none;
            position: relative;
            align-items: center;
            min-width: 0;
        }
        .mobile-section-nav-trigger {
            appearance: none;
            -webkit-appearance: none;
            border: none;
            background: transparent;
            color: var(--text-primary);
            padding: 0;
            display: inline-flex;
            align-items: center;
            gap: 2px;
            font-family: inherit;
            font-size: calc(1.14rem + 1.5pt);
            font-weight: 700;
            line-height: 1.05;
            letter-spacing: 0.01em;
            cursor: pointer;
            max-width: clamp(130px, 44vw, 220px);
            min-width: 0;
        }
        .mobile-section-nav-label {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-bottom: 4px;
            text-decoration: underline;
            text-decoration-color: rgba(255, 45, 154, 0.9);
            text-decoration-thickness: 1.5px;
            text-underline-offset: calc(0.14em + 1px);
        }
        .mobile-section-nav-trigger:hover .mobile-section-nav-label,
        .mobile-section-nav-trigger:focus-visible .mobile-section-nav-label,
        .mobile-section-nav-trigger:active .mobile-section-nav-label,
        .mobile-section-nav.open .mobile-section-nav-label {
            text-decoration: underline;
            text-decoration-color: rgba(255, 45, 154, 0.9);
            text-decoration-thickness: 1.5px;
            text-underline-offset: calc(0.14em + 1px);
        }
        .mobile-section-nav-arrow {
            color: var(--accent-primary);
            font-size: calc(1em + 3pt);
            font-weight: 800;
            line-height: 1;
            transition: transform var(--transition-fast), color var(--transition-fast);
            flex: 0 0 auto;
            margin-left: 1px;
        }
        .mobile-section-nav.open .mobile-section-nav-arrow {
            transform: rotate(180deg);
            color: var(--accent-hover);
        }
        .mobile-section-nav-menu {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            transform: none;
            z-index: 920;
            width: max-content;
            min-width: 196px;
            max-width: calc(100vw - 28px);
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-xl);
            padding: 7px;
            display: none;
        }
        .mobile-section-nav.open .mobile-section-nav-menu {
            display: block;
            animation: fadeIn var(--transition-fast);
        }
        .mobile-section-nav-group-label {
            padding: 6px 11px 4px;
            color: color-mix(in srgb, var(--text-muted) 82%, var(--brand-hot-pink) 18%);
            font-size: 0.62rem;
            font-weight: 900;
            letter-spacing: 0.08em;
            line-height: 1;
            text-transform: uppercase;
        }
        .mobile-section-nav-divider {
            height: 1px;
            margin: 6px 6px;
            background: var(--border-subtle);
        }
        .mobile-section-nav-item {
            width: 100%;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            text-align: left;
            padding: 8px 9px;
            border-radius: var(--radius-sm);
            font-family: inherit;
            font-size: calc(0.98rem + 0pt);
            font-weight: 600;
            line-height: 1.15;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
        }
        .mobile-section-nav-item-icon {
            width: 1.1em;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            flex: 0 0 auto;
        }
        .mobile-section-nav-item-text {
            flex: 1 1 auto;
            min-width: 0;
        }
        .mobile-section-nav-item-admin {
            font-weight: 700;
        }
        .mobile-section-nav-item-creator-policy {
            color: #ffd7ee;
            font-weight: 800;
        }
        .mobile-section-nav-item-how-works {
            color: #bfdbfe;
            font-weight: 800;
        }
        .mobile-section-nav-item:hover,
        .mobile-section-nav-item.active {
            background: var(--bg-subtle);
            color: var(--text-primary);
        }
        .mobile-section-nav-item-creator-tools {
            color: #60a5fa;
            font-weight: 850;
            letter-spacing: 0.02em;
        }
        .mobile-section-nav-item-creator-tools:hover,
        .mobile-section-nav-item-creator-tools.active {
            color: #93c5fd;
        }
        .mobile-section-nav-item:hover .mobile-section-nav-item-icon,
        .mobile-section-nav-item.active .mobile-section-nav-item-icon {
            color: var(--text-primary);
        }
        .mobile-section-nav-actions {
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        .mobile-section-nav-action-group {
            display: grid;
            grid-template-columns: 28px max-content;
            gap: 5px;
            align-items: stretch;
            width: max-content;
            max-width: 100%;
            padding: 7px 4px;
        }
        .mobile-section-nav-action-group + .mobile-section-nav-action-group {
            border-top: 1px solid var(--border-subtle);
        }
        .mobile-section-nav-badge-heading {
            display: flex;
            align-items: stretch;
            justify-content: center;
            min-width: 0;
            padding: 1px 0;
        }
        .mobile-section-nav-section-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            padding: 3px 0;
            border-radius: var(--radius-sm);
            font-size: calc(0.64rem + 3pt);
            font-weight: 950;
            letter-spacing: 0;
            line-height: 1;
            text-transform: uppercase;
            writing-mode: vertical-rl;
            transform: rotate(180deg);
        }
        .mobile-section-nav-section-badge-add {
            border: 1px solid color-mix(in srgb, #facc15 68%, var(--border-subtle) 32%);
            background:
                linear-gradient(180deg, rgba(250, 204, 21, 0.92), rgba(234, 179, 8, 0.9)),
                #facc15;
            color: #241600;
            box-shadow: 0 7px 16px rgba(250, 204, 21, 0.18);
        }
        .mobile-section-nav-section-badge-tools {
            border: 1px solid rgba(59, 130, 246, 0.5);
            background:
                linear-gradient(180deg, rgba(59, 130, 246, 0.24), rgba(37, 99, 235, 0.18)),
                rgba(59, 130, 246, 0.12);
            color: #bfdbfe;
        }
        .mobile-section-nav-section-badge-browse {
            border: 1px solid color-mix(in srgb, var(--brand-hot-pink) 48%, var(--border-subtle) 52%);
            background:
                linear-gradient(180deg, color-mix(in srgb, var(--brand-hot-pink) 20%, transparent 80%), rgba(255, 45, 154, 0.06)),
                rgba(255, 45, 154, 0.08);
            color: #f0abfc;
        }
        .mobile-section-nav-action-list {
            display: flex;
            min-width: 0;
            width: max-content;
            max-width: 100%;
            flex-direction: column;
            justify-content: center;
            gap: 4px;
        }
        .mobile-section-nav-action-list .mobile-section-nav-item {
            white-space: nowrap;
        }
        .mobile-section-nav-action {
            min-height: 34px;
            padding: 8px 9px;
            align-items: center;
            justify-content: flex-start;
            flex-direction: row;
            gap: 8px;
            border: 1px solid transparent;
            font-size: calc(0.94rem + 0pt);
            font-weight: 750;
            line-height: 1.15;
            text-align: left;
        }
        .mobile-section-nav-action .mobile-section-nav-item-text {
            width: auto;
            overflow-wrap: normal;
        }
        .mobile-section-nav-action-add {
            color: #fde68a;
            border-color: transparent;
            background: transparent;
        }
        .mobile-section-nav-action-tools {
            color: #bfdbfe;
            border-color: transparent;
            background: transparent;
        }
        .mobile-section-nav-action-group-browse .mobile-section-nav-item {
            color: #f5b7e3;
            background: transparent;
            box-shadow: none;
            font-weight: 700;
        }
        .mobile-section-nav-action-add:hover {
            border-color: transparent;
            background: transparent;
            color: #fef3c7;
        }
        .mobile-section-nav-action-add.active {
            border-color: rgba(250, 204, 21, 0.36);
            background: rgba(250, 204, 21, 0.1);
            color: #fef3c7;
        }
        .mobile-section-nav-action-tools:hover {
            border-color: transparent;
            background: transparent;
            color: #dbeafe;
        }
        .mobile-section-nav-action-tools.active {
            border-color: rgba(96, 165, 250, 0.34);
            background: rgba(59, 130, 246, 0.12);
            color: #dbeafe;
        }
        .mobile-section-nav-action-group-browse .mobile-section-nav-item:hover {
            background: transparent;
            box-shadow: none;
            color: #ffd7ee;
        }
        .mobile-section-nav-action-group-browse .mobile-section-nav-item.active {
            background: rgba(255, 45, 154, 0.12);
            box-shadow: inset 0 0 0 1px rgba(255, 45, 154, 0.34);
            color: #ffd7ee;
        }
        .mobile-section-nav-action-group-browse .mobile-section-nav-item:hover .mobile-section-nav-item-icon,
        .mobile-section-nav-action-group-browse .mobile-section-nav-item.active .mobile-section-nav-item-icon {
            color: #ffd7ee;
        }
        .mobile-section-nav.nav-mode-add .mobile-section-nav-label,
        .mobile-section-nav.nav-mode-add .mobile-section-nav-trigger:hover .mobile-section-nav-label,
        .mobile-section-nav.nav-mode-add .mobile-section-nav-trigger:focus-visible .mobile-section-nav-label,
        .mobile-section-nav.nav-mode-add .mobile-section-nav-trigger:active .mobile-section-nav-label,
        .mobile-section-nav.nav-mode-add.open .mobile-section-nav-label {
            text-decoration-color: rgba(250, 204, 21, 0.95);
        }
        .mobile-section-nav.nav-mode-add .mobile-section-nav-arrow,
        .mobile-section-nav.nav-mode-add.open .mobile-section-nav-arrow {
            color: #facc15;
        }
        .mobile-section-nav.nav-mode-tools .mobile-section-nav-label,
        .mobile-section-nav.nav-mode-tools .mobile-section-nav-trigger:hover .mobile-section-nav-label,
        .mobile-section-nav.nav-mode-tools .mobile-section-nav-trigger:focus-visible .mobile-section-nav-label,
        .mobile-section-nav.nav-mode-tools .mobile-section-nav-trigger:active .mobile-section-nav-label,
        .mobile-section-nav.nav-mode-tools.open .mobile-section-nav-label {
            text-decoration-color: rgba(96, 165, 250, 0.95);
        }
        .mobile-section-nav.nav-mode-tools .mobile-section-nav-arrow,
        .mobile-section-nav.nav-mode-tools.open .mobile-section-nav-arrow {
            color: #60a5fa;
        }
        .characters-perf-lab-controls {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.625rem;
            padding: 0.625rem;
            border: 1px solid var(--border-default);
            border-radius: var(--radius-md);
            background: var(--bg-subtle);
            color: var(--text-secondary);
            font-size: 0.82rem;
        }
        .characters-perf-lab-title {
            color: var(--text-primary);
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .characters-perf-lab-toggle {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.3rem 0.45rem;
            border-radius: var(--radius-sm);
            background: var(--bg-elevated);
            cursor: pointer;
            user-select: none;
        }
        .characters-perf-lab-toggle input {
            accent-color: var(--accent-primary);
        }
        .characters-perf-lab-action {
            border: 1px solid var(--border-default);
            border-radius: var(--radius-sm);
            background: var(--bg-elevated);
            color: var(--text-primary);
            font: inherit;
            font-weight: 700;
            padding: 0.35rem 0.55rem;
            cursor: pointer;
        }
        .characters-perf-lab-action:hover {
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }
        .characters-perf-lab-path {
            margin-left: auto;
            color: var(--text-muted);
            font-family: var(--font-mono);
            font-size: 0.75rem;
        }
        body.characters-perf-lab-active.characters-perf-lab-hide-grid #charactersContent {
            display: none !important;
        }
        body.characters-perf-lab-active.characters-perf-lab-hide-tags #tagSidebar,
        body.characters-perf-lab-active.characters-perf-lab-hide-tags #tagFilterChips,
        body.characters-perf-lab-active.characters-perf-lab-hide-tags #tagDrawerToggle {
            display: none !important;
        }
        .top-bar-icon-btn {
            display: none; /* Hide old icon button - using tabs now */
        }

        /* ========================================
           BROWSER STATUS BAR (Bottom)
           ======================================== */
        .browser-status-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: auto;
            min-height: 40px;
            background: rgba(15, 15, 16, 0.96);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.20);
            border-top: 1px solid var(--border-subtle);
            padding: 0;
            display: flex;
            align-items: center;
            z-index: 100;
            gap: var(--space-3);
        }
        .browser-status-bar.hidden {
            display: none;
        }
        .browser-status-inner {
            width: 100%;
            max-width: var(--page-max-width);
            margin: 0 auto;
            padding: 4px var(--space-4);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-3);
        }
        .browser-status-left {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            flex: 1;
            min-width: 0;
        }
        .browser-status-right {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            flex-shrink: 0;
        }
        /* Consolidated icon group */
        .browser-status-icons {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
        /* Browser Type Indicators */
        .browser-indicator {
            font-size: 0.8125rem;
            font-weight: 600;
            color: var(--text-muted);
            display: none;
            align-items: center;
            justify-content: center;
            margin-right: 2px;
            flex-shrink: 0;
            line-height: 1;
        }
        .browser-indicator.active {
            display: flex;
        }
        .browser-indicator.launching {
            color: var(--accent-primary);
            animation: pulse 1.2s ease-in-out infinite;
        }
        .browser-indicator-ui.active {
            color: var(--success);
        }
        .browser-indicator-extraction.active {
            color: var(--info);
        }
        .browser-computer-icon {
            width: 22px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .browser-computer-icon svg {
            width: 20px;
            height: 15px;
            fill: var(--text-muted);
            transition: fill var(--transition-fast);
        }
        .browser-computer-icon.open svg {
            fill: var(--success);
        }
        .browser-computer-icon.closed svg {
            fill: var(--error);
        }
        .browser-computer-icon.launching svg {
            fill: var(--accent-primary);
            animation: pulse 1.2s ease-in-out infinite;
        }
        .browser-tabs-count {
            display: none;
            align-items: center;
            gap: 3px;
            font-size: 0.75rem;
            color: var(--text-secondary);
            white-space: nowrap;
            flex-shrink: 0;
        }
        .browser-tabs-count svg {
            width: 15px;
            height: 15px;
            fill: currentColor;
        }
        .browser-status-text-container {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-width: 0;
            gap: 2px;
        }
        .browser-status-text {
            font-size: 0.75rem;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: visible;
            max-width: none;
            min-width: 0;
            line-height: 1.2;
        }
        .browser-action-text {
            font-size: 0.6875rem;
            color: var(--accent-primary);
            white-space: nowrap;
            overflow: visible;
            max-width: none;
            min-width: 0;
            line-height: 1.2;
            display: none;
        }
        .browser-action-text.active {
            display: block;
        }
        .browser-snapshot-text {
            font-size: 0.625rem;
            color: var(--text-secondary);
            white-space: nowrap;
            overflow: visible;
            max-width: none;
            min-width: 0;
            line-height: 1.2;
            margin-right: 8px;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(0.8); }
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .browser-status-right button {
            padding: 0.375rem 0.75rem;
            font-size: 0.8125rem;
            height: auto;
            min-height: 28px;
        }

        /* Proxy/VPN Toggle - Icon based */
        .proxy-toggle,
        .vpn-toggle {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: 0.8125rem;
            padding: 0.375rem 0.625rem;
        }
        .proxy-toggle-label,
        .vpn-toggle-label {
            display: none; /* Hide text, use icon */
        }
        .proxy-toggle-icon,
        .vpn-toggle-icon {
            width: 16px;
            height: 16px;
            fill: var(--text-muted);
            transition: fill var(--transition-fast);
            cursor: pointer;
        }
        .vpn-toggle-icon.loading {
            animation: spin 1s linear infinite;
            cursor: wait;
        }
        .proxy-toggle-icon.enabled,
        .vpn-toggle-icon.enabled {
            fill: var(--success);
        }
        .vpn-toggle--readonly {
            cursor: default;
            pointer-events: none;
        }
        .vpn-toggle--readonly .vpn-toggle-icon {
            cursor: default;
        }
        .proxy-toggle-switch,
        .vpn-toggle-switch {
            display: none; /* Hide toggle switch for compact view */
        }
        .proxy-toggle-status,
        .vpn-toggle-status {
            display: none; /* Hide OFF/ON text */
        }
        
        /* ========================================
           AUTH UI (Login/Logout)
           ======================================== */
        .auth-section {
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
        .auth-login-btn {
            padding: 0.375rem 0.75rem;
            font-size: 0.8125rem;
            font-weight: 500;
            color: var(--text-secondary);
            background: transparent;
            border: 1px solid var(--border-default);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
        }
        .auth-login-btn:hover {
            background: var(--bg-subtle);
            border-color: var(--border-strong);
            color: var(--text-primary);
        }
        .auth-user {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: 0.25rem 0.5rem 0.25rem 0.75rem;
            background: var(--bg-subtle);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
        }
        .auth-user-info {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
        .auth-user-name {
            font-size: 0.8125rem;
            font-weight: 500;
            color: var(--text-primary);
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .auth-user-type {
            font-size: 0.6875rem;
            color: var(--text-muted);
        }
        .auth-logout-btn {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
            color: var(--text-muted);
            background: transparent;
            border: 1px solid transparent;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
        }
        .auth-logout-btn:hover {
            color: var(--error);
            background: var(--error-muted);
            border-color: rgba(239, 68, 68, 0.2);
        }
        .auth-divider {
            width: 1px;
            height: 24px;
            background: var(--border-default);
            margin: 0 var(--space-2);
        }

        /* ========================================
           USER SWITCHER DROPDOWN
           ======================================== */
        .user-switcher {
            position: relative;
        }
        .user-switcher-trigger {
            display: flex;
            align-items: center;
            gap: 2px;
            padding: 0.125rem 0.125rem 0.125rem 0.375rem;
            background: transparent;
            border: 1px solid var(--border-default);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
            font-size: 0.8125rem;
            color: var(--text-secondary);
            min-width: 0;
            max-width: 100%;
            position: relative;
            z-index: 901;
        }
        .user-switcher.loading .user-switcher-trigger {
            display: none;
        }
        .user-switcher.loading .trigger-loading-indicator {
            display: inline-flex;
        }
        .user-switcher-trigger:hover {
            background: var(--bg-subtle);
            border-color: var(--border-strong);
        }
        .user-switcher-trigger.active {
            border-color: var(--accent-primary);
            background: var(--accent-muted);
        }
        .user-switcher-info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 1px;
            flex: 1;
            min-width: 0;
            margin: 0;
            padding: 0;
        }
        .user-switcher-name {
            color: var(--text-primary);
            font-weight: 500;
            font-size: 0.8125rem;
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: var(--space-1);
            margin: 0;
            padding: 0;
        }
        .user-switcher-stats {
            font-size: 0.6875rem;
            color: var(--text-muted);
        }
        .user-switcher-trigger .user-switcher-item-info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: 3px;
            line-height: 1.2;
            min-width: 0;
            overflow: hidden;
        }
        .user-switcher-trigger .user-switcher-item-info,
        .user-switcher-trigger .user-switcher-item-name,
        .user-switcher-trigger .user-switcher-item-stats,
        .user-switcher-trigger .user-switcher-item-stat,
        .user-switcher-trigger .user-switcher-arrow {
            pointer-events: none;
        }
        .user-switcher-trigger .user-switcher-item-name {
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 1.2;
        }
        .user-switcher-trigger .user-switcher-item-stats {
            font-size: 0.6875rem;
            line-height: 1.2;
        }
        .user-switcher-arrow {
            font-size: 0.625rem;
            color: var(--text-muted);
            transition: transform var(--transition-fast);
            margin-left: 2px;
            padding: 0;
        }
        .user-switcher.open .user-switcher-arrow {
            transform: rotate(180deg);
        }
        .user-switcher-dropdown {
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-lg);
            width: min(252px, calc(100vw - 16px));
            min-width: 0;
            max-height: 360px;
            overflow-y: auto;
            box-shadow: var(--shadow-xl);
            z-index: 900;
            display: none;
        }
        .user-switcher.open .user-switcher-dropdown {
            display: block;
            animation: fadeIn var(--transition-fast);
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .user-switcher-trigger .user-switcher-role-icon {
            margin-left: var(--space-1);
        }
        .user-switcher-header {
            padding: var(--space-3) var(--space-4);
            border-bottom: 1px solid var(--border-subtle);
        }
        .user-switcher-header h4 {
            margin: 0;
            font-size: 0.75rem;
            color: var(--text-muted);
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .user-switcher-item {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-2) var(--space-4);
            cursor: pointer;
            transition: background var(--transition-fast);
            border-bottom: 1px solid var(--border-subtle);
            position: relative;
        }
        .user-switcher-item:last-child {
            border-bottom: none;
        }
        .user-switcher-item:hover {
            background: var(--bg-subtle);
        }
        .user-switcher-about-link {
            display: block;
            width: 100%;
            border: 0;
            border-top: 1px solid var(--border-subtle);
            background: transparent;
            color: var(--text-muted);
            font-size: 0.75rem;
            font-weight: 500;
            line-height: 1.2;
            text-align: left;
            text-decoration: none;
            padding: 0.35rem var(--space-4);
            cursor: pointer;
            transition: background var(--transition-fast), color var(--transition-fast);
        }
        .user-switcher-about-link:hover {
            background: var(--bg-subtle);
            color: var(--text-secondary);
        }
        .user-switcher-discord-menu-link {
            display: none;
            color: #b8c0ff;
            font-weight: 700;
        }
        .user-switcher-discord-menu-link:hover {
            color: #ffffff;
        }
        .user-switcher-legal-links {
            display: flex;
            align-items: center;
            gap: 10px;
            border-top: 1px solid var(--border-subtle);
            padding: 0.45rem var(--space-4) 0.5rem;
        }
        .user-switcher-legal-links a {
            color: var(--text-muted);
            font-size: 0.72rem;
            font-weight: 600;
            line-height: 1.2;
            text-decoration: none;
        }
        .user-switcher-legal-links a:hover {
            color: var(--text-secondary);
            text-decoration: underline;
            text-underline-offset: 0.16em;
        }
        .user-switcher-item.current {
            background: var(--accent-muted);
        }
        .user-switcher-item-active-badge {
            position: absolute;
            top: 4px;
            left: 4px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--success);
            box-shadow: 0 0 4px var(--success);
        }
        .user-switcher-item-info {
            flex: 1;
            min-width: 0;
        }
        .user-switcher-item-name {
            color: var(--text-primary);
            font-weight: 500;
            font-size: 0.875rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }
        .user-switcher-role-inline,
        .user-switcher-role-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0 0 0 var(--space-1);
            font-size: 0.625rem;
            flex-shrink: 0;
        }
        .user-switcher-role-inline i,
        .user-switcher-role-icon i {
            font-size: 0.625rem;
        }
        i.user-switcher-role-icon.admin,
        .user-switcher-role-icon.admin {
            color: #86efac !important;
        }
        i.user-switcher-role-icon.anon,
        .user-switcher-role-icon.anon {
            color: #6b7280 !important;
        }
        .user-switcher-anon-section {
            border-top: 1px solid var(--border-subtle);
            margin-top: var(--space-1);
        }
        .user-switcher-anon-trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: var(--space-2) var(--space-3);
            font-size: 0.8rem;
            color: var(--text-muted);
            background: var(--bg-subtle);
            border: none;
            cursor: pointer;
            text-align: left;
        }
        .user-switcher-anon-trigger:hover {
            color: var(--text-primary);
            background: var(--bg-hover);
        }
        .user-switcher-anon-trigger-arrow {
            font-size: 0.6rem;
            transition: transform var(--transition-fast);
        }
        .user-switcher-anon-section:not(.collapsed) .user-switcher-anon-trigger-arrow {
            transform: rotate(180deg);
        }
        .user-switcher-anon-section.collapsed .user-switcher-anon-list {
            display: none;
        }
        .user-switcher-anon-list {
            max-height: 200px;
            overflow-y: auto;
        }
        .user-switcher-role-badge {
            display: inline-flex;
            align-items: center;
            padding: 1px 5px;
            font-size: 0.625rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            border-radius: var(--radius-sm);
            background: var(--bg-accent);
            color: var(--text-muted);
            margin-left: var(--space-1);
        }
        .user-switcher-item-email {
            color: var(--text-muted);
            font-size: 0.75rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top: 2px;
        }
        .user-switcher-item-check {
            color: var(--accent-primary);
            font-size: 1rem;
            opacity: 0;
            transition: opacity var(--transition-fast);
        }
        .user-switcher-item.current .user-switcher-item-check {
            opacity: 1;
        }
        .user-switcher-logout-btn {
            padding: 0.25rem 0.5rem;
            font-size: 0.6875rem;
            font-weight: 500;
            color: var(--text-muted);
            background: transparent;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
            margin-left: auto;
        }
        .user-switcher-logout-btn:hover {
            background: var(--bg-accent);
            color: var(--text-primary);
            border-color: var(--border-default);
        }
        .user-switcher-item-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            font-size: 0.625rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .user-switcher-item-badge.active {
            background: var(--success-muted);
            color: var(--success);
        }
        .user-switcher-empty {
            padding: var(--space-6);
            text-align: center;
            color: var(--text-muted);
            font-size: 0.875rem;
        }
        .user-switcher-overlay {
            position: fixed;
            top: 56px;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 650;
            background: rgba(6, 10, 20, 0.52);
            opacity: 0;
            visibility: hidden;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            transition: opacity 160ms ease, visibility 160ms ease;
            pointer-events: none;
        }
        .user-switcher-overlay.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        .user-switcher-overlay.mobile-section-nav-overlay {
            background: rgba(6, 10, 20, 0.52);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            transition: opacity 160ms ease, visibility 160ms ease;
        }

        .view-transition-overlay {
            position: fixed;
            top: 56px;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 5000;
            background: rgba(12, 12, 14, 0.94);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .view-transition-overlay.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        .view-transition-spinner {
            width: 32px;
            height: 32px;
            border: 3px solid rgba(255, 255, 255, 0.26);
            border-top-color: #ff2d9a;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        /* User switcher loading state */
        .user-switcher-loading {
            padding: var(--space-4);
            text-align: center;
            color: var(--text-muted);
            font-size: 0.875rem;
        }
        .user-switcher-loading::before {
            content: '';
            display: inline-block;
            width: 14px;
            height: 14px;
            border: 2px solid var(--border-default);
            border-top-color: var(--accent-primary);
            border-radius: 50%;
            margin-right: 8px;
            vertical-align: middle;
            animation: spin 0.8s linear infinite;
        }

        /* User switcher auth section (logged-in user or login prompt) */
        .user-switcher-auth-section {
            padding: var(--space-3) var(--space-4);
            border-bottom: 1px solid var(--border-subtle);
        }
        .user-switcher-auth-logged-in {
            display: flex;
            align-items: center;
            gap: var(--space-3);
        }
        .user-switcher-auth-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--accent-muted);
            color: var(--accent-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 0.875rem;
            flex-shrink: 0;
        }
        .user-switcher-auth-info {
            flex: 1;
            min-width: 0;
        }
        .user-switcher-auth-name {
            color: var(--text-primary);
            font-weight: 500;
            font-size: 0.875rem;
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
        .user-switcher-auth-name .check {
            color: var(--accent-primary);
            font-size: 0.875rem;
        }
        .user-switcher-auth-provider {
            color: var(--text-muted);
            font-size: 0.75rem;
        }
        .user-switcher-auth-logout {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--text-secondary);
            background: var(--bg-subtle);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
        }
        .user-switcher-auth-logout:hover {
            background: var(--bg-accent);
            color: var(--text-primary);
        }
        /* Auth section active/current state */
        .user-switcher-auth-logged-in.current {
            background: var(--accent-muted);
            border-radius: var(--radius-md);
            margin: var(--space-2);
            padding: var(--space-2);
        }
        .user-switcher-auth-logged-in:hover:not(.current) {
            background: var(--bg-subtle);
            border-radius: var(--radius-md);
        }
        .user-switcher-auth-not-logged-in {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
        }
        .user-switcher-auth-status {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            color: var(--text-muted);
            font-size: 0.75rem;
        }
        .user-switcher-auth-status svg {
            width: 20px;
            height: 20px;
            opacity: 0.6;
        }
        .user-switcher-auth-actions {
            display: flex;
            gap: 6px;
        }
        .user-switcher-auth-login-btn {
            flex: 1;
            padding: 0.4rem 0.5rem;
            font-size: calc(0.75rem + 4pt - 3px);
            font-weight: 500;
            color: var(--text-inverse);
            background: var(--accent-primary);
            border: none;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: background var(--transition-fast);
            text-decoration: none;
            text-align: center;
        }
        .user-switcher-auth-login-btn:hover {
            background: var(--accent-hover);
        }
        .user-switcher-auth-register-btn {
            flex: 1;
            padding: 0.4rem 0.5rem;
            font-size: calc(0.75rem + 4pt - 3px);
            font-weight: 500;
            color: var(--text-secondary);
            background: var(--bg-subtle);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
            text-decoration: none;
            text-align: center;
        }
        .user-switcher-auth-register-btn:hover {
            background: var(--bg-accent);
            color: var(--text-primary);
        }

        /* User switcher section header */
        .user-switcher-section-header {
            padding: var(--space-2) var(--space-4);
            background: var(--bg-subtle);
        }
        .user-switcher-section-header h4 {
            margin: 0;
            font-size: 0.625rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-weight: 600;
        }

        /* User switcher item stats */
        .user-switcher-item-stats {
            display: flex;
            gap: var(--space-2);
            font-size: 0.6875rem;
            color: var(--text-muted);
        }
        .user-switcher-item-stat {
            display: flex;
            align-items: center;
            gap: 2px;
        }
        .user-switcher-item-stat .count {
            font-weight: 500;
        }
        .credit-amount {
            display: inline-flex;
            align-items: center;
            gap: 0.24em;
            white-space: nowrap;
        }
        .credit-coin-icon {
            --coin-size: 0.88em;
            position: relative;
            display: inline-block;
            width: var(--coin-size);
            height: var(--coin-size);
            flex: 0 0 var(--coin-size);
            border-radius: 50%;
            background:
                radial-gradient(circle at 32% 28%, #fff7b8 0 12%, transparent 13%),
                linear-gradient(135deg, #ffe47a 0%, #f5b942 48%, #d9901f 100%);
            border: 1px solid rgba(121, 77, 13, 0.42);
            box-shadow:
                inset 0 1px 1px rgba(255, 255, 255, 0.75),
                inset 0 -1px 1px rgba(95, 56, 6, 0.36),
                0 0 0 1px rgba(255, 236, 150, 0.18);
            vertical-align: -0.08em;
        }
        .credit-coin-icon::before {
            content: "";
            position: absolute;
            inset: 2px;
            border-radius: 50%;
            border: 1px solid rgba(255, 247, 184, 0.55);
        }
        .credit-coin-icon::after {
            content: "";
            position: absolute;
            top: 23%;
            left: 27%;
            width: 22%;
            height: 22%;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.72);
        }
        .user-switcher-credit-trigger-stat {
            color: #f4c95d;
            font-weight: 700;
        }
        .user-switcher-credit-trigger-stat .credit-coin-icon {
            --coin-size: 0.92em;
        }
        .user-switcher-credits-panel {
            border-top: 1px solid var(--border-subtle);
            background: color-mix(in srgb, var(--bg-elevated) 90%, #f4c95d 10%);
            padding: 0.5rem var(--space-3);
            cursor: pointer;
            transition: background var(--transition-fast);
        }
        .user-switcher-credits-panel:hover,
        .user-switcher-credits-panel:focus-visible {
            background: color-mix(in srgb, var(--bg-elevated) 84%, #f4c95d 16%);
        }
        .user-switcher-credits-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
        }
        .user-switcher-credits-title {
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
            min-width: 0;
        }
        .user-switcher-credits-title > span {
            color: var(--text-muted);
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0;
        }
        .user-switcher-credits-title strong {
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 0.28rem;
            color: var(--text-primary);
            font-size: 1rem;
            font-weight: 800;
            line-height: 1;
        }
        .user-switcher-credits-title small {
            display: inline-flex;
            align-items: center;
            gap: 0.18rem;
            color: var(--text-muted);
            font-size: 0.68rem;
            font-weight: 750;
            line-height: 1;
        }
        .user-switcher-credits-balance .credit-coin-icon {
            --coin-size: 0.82em;
        }
        .user-switcher-credits-today {
            color: var(--text-muted);
        }
        .user-switcher-credits-today .credit-coin-icon {
            --coin-size: 0.78em;
        }
        .user-switcher-credits-refresh {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.75rem;
            height: 1.75rem;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: var(--bg-subtle);
            color: var(--text-muted);
            cursor: pointer;
            font-size: 0.74rem;
            font-weight: 700;
            line-height: 1;
            padding: 0;
            transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
        }
        .user-switcher-credits-refresh:hover {
            background: var(--bg-hover);
            border-color: var(--border-default);
            color: var(--text-primary);
        }

        .view-circles,
        .view-user-profile,
        .view-credits {
            min-height: 0;
        }
        .circles-page-shell,
        .user-profile-page {
            width: min(1180px, calc(100% - 4rem));
            margin: -1.625rem auto 0;
            padding: 0.45rem 0 0.9rem;
        }
        .circles-page-header,
        .user-profile-header {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            padding: 0.1rem 0 1.15rem;
        }
        .user-profile-header {
            display: grid;
            grid-template-columns: 1fr;
            align-items: stretch;
            gap: 0.8rem;
        }
        .user-profile-shell {
            display: grid;
            grid-template-columns: minmax(158px, 220px) minmax(0, 1fr);
            gap: 0.85rem;
            align-items: start;
            min-width: 0;
        }
        .user-profile-main {
            min-width: 0;
        }
        .user-profile-sidebar {
            position: sticky;
            top: 4.75rem;
            display: grid;
            align-content: start;
            gap: 0.55rem;
            min-width: 0;
            padding-top: 0.18rem;
        }
        .user-profile-sidebar-label {
            display: block;
            color: rgba(255, 255, 255, 0.44);
            font-size: 0.58rem;
            font-weight: 900;
            letter-spacing: 0;
            line-height: 1;
            text-transform: uppercase;
        }
        .user-profile-sidebar-nav {
            display: grid;
            gap: 3px;
            min-width: 0;
        }
        .user-profile-sidebar-link {
            display: grid;
            grid-template-columns: 18px minmax(0, 1fr);
            align-items: center;
            gap: 7px;
            min-height: 34px;
            border: 1px solid transparent;
            border-left: 3px solid transparent;
            border-radius: 0;
            background: transparent;
            color: rgba(255, 255, 255, 0.74);
            font-size: 0.7rem;
            font-weight: 900;
            line-height: 1;
            padding: 0 8px 0 7px;
            text-decoration: none;
            text-transform: uppercase;
        }
        .user-profile-sidebar-link i {
            color: rgba(255, 255, 255, 0.64);
            font-size: 0.78rem;
            text-align: center;
        }
        .user-profile-sidebar-link span {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .user-profile-sidebar-link:hover,
        .user-profile-sidebar-link:focus-visible {
            border-color: rgba(255, 255, 255, 0.10);
            border-left-color: rgba(244, 114, 182, 0.62);
            background: rgba(255, 255, 255, 0.055);
            color: rgba(255, 255, 255, 0.92);
            outline: none;
        }
        .user-profile-sidebar-link.is-active {
            border-color: rgba(255, 255, 255, 0.10);
            border-left-color: var(--brand-hot-pink);
            background: rgba(244, 114, 182, 0.11);
            color: #fff;
        }
        .user-profile-sidebar-link.is-active i,
        .user-profile-sidebar-link.is-active span {
            color: #fff;
        }
        .user-profile-mobile-rail {
            display: none;
        }
        .user-profile-header-main {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: flex-start;
            gap: 1rem;
            min-width: 0;
        }
        .user-profile-identity {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            min-width: 0;
        }
        .circles-page-header > div,
        .user-profile-header-main,
        .user-profile-identity,
        .user-profile-title {
            min-width: 0;
        }
        .circles-page-header p,
        .user-profile-title p {
            margin: 0 0 0.15rem;
            color: var(--text-muted);
            font-size: 0.68rem;
            font-weight: 850;
            letter-spacing: 0;
            line-height: 1.15;
            text-transform: uppercase;
        }
        .user-profile-title {
            display: grid;
            justify-items: start;
            text-align: left;
            flex: 1 1 auto;
        }
        .user-profile-title > * {
            justify-self: start;
            padding-inline-start: 0;
            text-align: left;
            text-indent: 0;
        }
        .circles-page-header h1,
        .user-profile-title h1 {
            margin: 0;
            color: var(--text-primary);
            font-size: 2rem;
            font-weight: 850;
            letter-spacing: 0;
            line-height: 1.05;
            overflow-wrap: anywhere;
        }
        .circles-page-header span,
        .user-profile-title span,
        .circle-detail-description {
            color: var(--text-muted);
            font-size: 0.82rem;
            font-weight: 700;
            line-height: 1.35;
        }
        .user-profile-title-eyebrow-row {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            min-width: 0;
            max-width: 100%;
        }
        .user-profile-title-settings {
            display: none;
            align-items: center;
            justify-content: center;
            width: 1.75rem;
            height: 1.75rem;
            min-width: 1.75rem;
            border: 1px solid color-mix(in srgb, #55c7a6 42%, var(--border-default) 58%);
            border-radius: 999px;
            background: color-mix(in srgb, var(--bg-elevated) 84%, #55c7a6 16%);
            color: #95e7cb;
            font-size: 0.78rem;
            line-height: 1;
            text-decoration: none;
        }
        .user-profile-title-settings:hover,
        .user-profile-title-settings:focus-visible {
            border-color: color-mix(in srgb, #95e7cb 62%, var(--border-default) 38%);
            background: color-mix(in srgb, var(--bg-hover) 76%, #55c7a6 24%);
            color: var(--text-primary);
            outline: none;
        }
        .circles-profile-link,
        .circle-detail-actions a,
        .circle-detail-actions button,
        .user-profile-actions a,
        .user-profile-actions button,
        .circle-create-page-actions a,
        .circle-create-page-form button,
        .circles-create-form button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            min-height: 2.4rem;
            border: 1px solid var(--border-default);
            border-radius: 8px;
            background: var(--bg-elevated);
            color: var(--text-primary);
            cursor: pointer;
            font-size: 0.82rem;
            font-weight: 850;
            line-height: 1;
            padding: 0 0.85rem;
            text-decoration: none;
            transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
            white-space: nowrap;
        }
        .circles-profile-link:hover,
        .circle-detail-actions a:hover,
        .circle-detail-actions button:hover,
        .user-profile-actions a:hover,
        .user-profile-actions button:hover,
        .circle-create-page-actions a:hover,
        .circle-create-page-form button:hover,
        .circles-create-form button:hover {
            background: var(--bg-hover);
            border-color: color-mix(in srgb, #55c7a6 45%, var(--border-default) 55%);
            transform: translateY(-1px);
        }
        .circles-page-header .circles-profile-link,
        .circle-detail-actions,
        .user-profile-actions {
            margin-left: auto;
        }
        .circle-detail-actions,
        .user-profile-actions {
            display: grid;
            align-items: start;
            justify-content: flex-end;
            gap: 0.5rem;
            justify-items: end;
        }
        .user-profile-nav-slot,
        .user-profile-context-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.5rem;
            flex-wrap: wrap;
        }
        .user-profile-nav-slot {
            min-height: 2.4rem;
        }
        .user-profile-tabs {
            display: inline-flex;
            align-items: center;
            gap: 0.22rem;
            margin: 0;
            padding: 0.22rem;
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: var(--bg-elevated);
        }
        .user-profile-tabs a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.42rem;
            min-height: 2.2rem;
            min-width: 6.6rem;
            border: 1px solid transparent;
            border-radius: 7px;
            color: var(--text-muted);
            font-size: 0.78rem;
            font-weight: 850;
            line-height: 1;
            padding: 0 0.75rem;
            text-decoration: none;
            transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
        }
        .user-profile-tabs a.active {
            border-color: color-mix(in srgb, #55c7a6 42%, var(--border-default) 58%);
            background: color-mix(in srgb, var(--bg-surface) 76%, #55c7a6 24%);
            color: var(--text-primary);
        }
        .user-profile-tabs i {
            color: #95e7cb;
            font-size: 0.78rem;
        }
        .user-profile-section-menu {
            display: none;
            position: relative;
            width: 100%;
        }
        .user-profile-section-menu[open] {
            z-index: 120;
        }
        .user-profile-section-menu-backdrop {
            display: none;
        }
        .user-profile-section-menu summary {
            position: relative;
            z-index: 122;
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.6rem;
            width: 100%;
            min-height: 2.3rem;
            border: 1px solid var(--border-default);
            border-radius: 8px;
            background: var(--bg-elevated);
            color: var(--text-primary);
            cursor: pointer;
            font-size: 0.82rem;
            font-weight: 850;
            line-height: 1;
            list-style: none;
            padding: 0 0.72rem;
            transition: background var(--transition-fast), border-color var(--transition-fast);
        }
        .user-profile-section-menu summary::-webkit-details-marker {
            display: none;
        }
        .user-profile-section-menu summary:hover,
        .user-profile-section-menu[open] summary {
            background: var(--bg-hover);
            border-color: color-mix(in srgb, #55c7a6 45%, var(--border-default) 55%);
        }
        .user-profile-section-menu summary > span {
            display: inline-flex;
            align-items: center;
            gap: 0.46rem;
            min-width: 0;
        }
        .user-profile-section-menu summary i {
            color: #95e7cb;
            font-size: 0.8rem;
        }
        .user-profile-section-menu summary b {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .user-profile-section-menu-list {
            position: absolute;
            top: calc(100% + 0.35rem);
            left: 0;
            right: 0;
            z-index: 123;
            display: grid;
            gap: 0.18rem;
            padding: 0.35rem;
            border: 1px solid var(--border-default);
            border-radius: 8px;
            background: #18181b;
            background-clip: padding-box;
            box-shadow: 0 18px 42px rgba(0, 0, 0, 0.58);
        }
        .user-profile-actions .user-profile-section-menu-list a {
            justify-content: flex-start;
            width: 100%;
            min-height: 2.05rem;
            border: 1px solid transparent;
            border-radius: 7px;
            background: transparent;
            color: var(--text-muted);
            font-size: 0.78rem;
            padding: 0 0.62rem;
        }
        .user-profile-actions .user-profile-section-menu-list a:hover,
        .user-profile-actions .user-profile-section-menu-list a.active {
            background: color-mix(in srgb, #18181b 78%, #55c7a6 22%);
            border-color: color-mix(in srgb, #55c7a6 38%, var(--border-default) 62%);
            color: var(--text-primary);
            transform: none;
        }
        .user-profile-section-menu-list i {
            color: #95e7cb;
            font-size: 0.78rem;
            width: 0.95rem;
        }
        .user-profile-actions .user-profile-section-menu-list a.user-profile-section-menu-settings {
            margin-top: 0.22rem;
            border-top-color: color-mix(in srgb, var(--border-default) 78%, #95e7cb 22%);
        }
        .circles-create-form {
            display: grid;
            gap: 0.55rem;
            margin: 0 0 1rem;
            padding: 0.75rem;
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: color-mix(in srgb, var(--bg-elevated) 78%, var(--bg-surface) 22%);
        }
        .circles-create-form > div {
            display: grid;
            grid-template-columns: minmax(160px, 0.7fr) minmax(180px, 1fr);
            gap: 0.55rem;
        }
        .circles-create-form > div:last-child {
            grid-template-columns: repeat(3, minmax(120px, 1fr)) auto;
        }
        .circles-create-form input,
        .circles-create-form select {
            width: 100%;
            min-height: 2.35rem;
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: var(--bg-surface);
            color: var(--text-primary);
            font: inherit;
            font-size: 0.84rem;
            font-weight: 700;
            padding: 0 0.72rem;
        }
        .circles-grid-section,
        .circle-detail-panel,
        .user-profile-panel {
            display: grid;
            gap: 0.6rem;
            margin-top: 0.9rem;
        }
        .circles-section-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
        }
        .circles-section-heading h2 {
            margin: 0;
            color: var(--text-primary);
            font-size: 0.95rem;
            font-weight: 850;
            letter-spacing: 0;
            line-height: 1.1;
        }
        .circles-section-heading span {
            color: var(--text-muted);
            font-size: 0.76rem;
            font-weight: 850;
        }
        .circle-talk-panel-actions {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.48rem;
        }
        .circle-talk-panel-actions a {
            display: inline-flex;
            align-items: center;
            min-height: 1.7rem;
            border: 1px solid color-mix(in srgb, #55c7a6 42%, var(--border-subtle) 58%);
            border-radius: 8px;
            color: #95e7cb;
            font-size: 0.68rem;
            font-weight: 900;
            line-height: 1;
            padding: 0 0.52rem;
            text-decoration: none;
        }
        .circle-wall-surface {
            position: relative;
            z-index: 1;
            display: grid;
            gap: 0.72rem;
            margin: 0 13px 13px;
            padding: 12px 14px;
            border: 1px solid rgba(255, 255, 255, 0.11);
            border-radius: 12px;
            background: rgba(18, 18, 21, 0.72);
        }
        .circle-wall-surface-heading {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 0.75rem;
        }
        .circle-wall-surface-heading h2 {
            margin: 0;
            color: #f4f4f5;
            font-size: 1rem;
            font-weight: 900;
            line-height: 1.05;
        }
        .circle-wall-surface-heading span {
            display: block;
            margin-top: 0.18rem;
            color: rgba(255, 255, 255, 0.58);
            font-size: 0.7rem;
            font-weight: 780;
            line-height: 1.15;
        }
        .circle-wall-new-post {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            gap: 0;
            width: 1.86rem;
            min-height: 1.86rem;
            min-width: 1.86rem;
            border: 1px solid rgba(244, 114, 182, 0.62);
            border-radius: 999px;
            background: rgba(236, 72, 153, 0.34);
            color: #ffffff;
            cursor: pointer;
            font-size: 0.74rem;
            font-weight: 900;
            line-height: 1;
            list-style: none;
            padding: 0;
            text-decoration: none;
            white-space: nowrap;
        }
        .circle-wall-new-post i {
            color: #ffffff;
            font-size: 0.78rem;
            line-height: 1;
        }
        .circle-wall-new-post-plus {
            position: relative;
            display: inline-block;
            width: 0.86rem;
            height: 0.86rem;
            flex: 0 0 auto;
            transform: translateY(-1.5px);
        }
        .circle-wall-new-post-plus::before,
        .circle-wall-new-post-plus::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            display: block;
            border-radius: 999px;
            background: #ffffff;
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
            transform: translate(-50%, -50%);
        }
        .circle-wall-new-post-plus::before {
            width: 0.86rem;
            height: 0.22rem;
        }
        .circle-wall-new-post-plus::after {
            width: 0.22rem;
            height: 0.86rem;
        }
        .circle-wall-new-post:focus-visible,
        .circle-wall-new-post:hover {
            border-color: rgba(244, 114, 182, 0.92);
            background: rgba(236, 72, 153, 0.48);
            color: #ffffff;
            outline: none;
            box-shadow: 0 8px 18px rgba(236, 72, 153, 0.16);
        }
        .circle-wall-new-post .circle-wall-new-post-chevron {
            font-size: 0.56rem;
            opacity: 0.84;
        }
        .circle-wall-post-list {
            position: relative;
            display: grid;
            gap: 0.5rem;
        }
        .circle-wall-post-card {
            display: grid;
            grid-template-columns: 4px minmax(0, 1fr);
            gap: 0;
            min-height: 0;
            border: 0;
            border-radius: 0;
            background: #202024;
            color: inherit;
            overflow: hidden;
            padding: 0;
            text-decoration: none;
            transition: background 160ms ease;
        }
        .circle-wall-post-card.is-unread {
            background: #2c2617;
        }
        .circle-wall-post-card.is-pinned {
            background: #281d26;
        }
        .circle-wall-post-card.is-pinned.is-unread {
            background: #30211f;
        }
        .circle-wall-post-card:hover,
        .circle-wall-post-card:focus-visible {
            background: #26262a;
            outline: none;
        }
        .circle-wall-post-card.is-unread:hover,
        .circle-wall-post-card.is-unread:focus-visible {
            background: #332c1a;
        }
        .circle-wall-post-card.is-pinned:hover,
        .circle-wall-post-card.is-pinned:focus-visible {
            background: #302330;
        }
        .circle-wall-post-card.is-pinned.is-unread:hover,
        .circle-wall-post-card.is-pinned.is-unread:focus-visible {
            background: #382724;
        }
        .circle-wall-post-accent {
            min-height: 100%;
            background: rgba(255, 255, 255, 0.10);
        }
        .circle-wall-post-card.is-unread .circle-wall-post-accent {
            background: #fbbf24;
        }
        .circle-wall-post-card.is-pinned .circle-wall-post-accent {
            background: #f472b6;
        }
        .circle-wall-post-icon {
            display: grid;
            place-items: center;
            width: 34px;
            height: 34px;
            border: 1px solid rgba(85, 199, 166, 0.42);
            border-radius: 8px;
            background: rgba(85, 199, 166, 0.12);
            color: #d7fff1;
        }
        .circle-wall-post-body {
            display: grid;
            gap: 0.38rem;
            min-width: 0;
            padding: 0.72rem 0.84rem 0.66rem;
        }
        .circle-wall-post-header {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 0.75rem;
            align-items: start;
            min-width: 0;
        }
        .circle-wall-post-meta-line {
            display: inline-flex;
            align-items: center;
            gap: 0.38rem;
            min-width: 0;
            white-space: nowrap;
        }
        .circle-wall-post-type,
        .circle-wall-post-pinned,
        .circle-wall-post-unread {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            min-height: 1.08rem;
            border: 0;
            border-radius: 0;
            background: rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.66);
            font-size: 0.64rem;
            font-weight: 760;
            line-height: 1;
            padding: 0 0.34rem;
            text-transform: uppercase;
        }
        .circle-wall-post-pinned {
            background: rgba(236, 72, 153, 0.28);
            color: #fbcfe8;
        }
        .circle-wall-post-unread {
            background: rgba(251, 191, 36, 0.24);
            color: #fde68a;
        }
        .circle-wall-post-author {
            overflow: hidden;
            color: rgba(255, 255, 255, 0.64);
            font-size: 0.76rem;
            font-weight: 660;
            line-height: 1.2;
            text-overflow: ellipsis;
        }
        .circle-wall-post-date {
            color: rgba(255, 255, 255, 0.52);
            font-size: 0.78rem;
            font-weight: 660;
            line-height: 1.1;
            white-space: nowrap;
        }
        .circle-wall-post-title-row {
            display: grid;
            min-width: 0;
        }
        .circle-wall-post-title-row strong {
            display: -webkit-box;
            overflow: hidden;
            color: #f5f5f6;
            font-size: 1.02rem;
            font-weight: 720;
            line-height: 1.22;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        .circle-wall-post-body p {
            display: -webkit-box;
            margin: 0;
            overflow: hidden;
            color: rgba(255, 255, 255, 0.72);
            font-size: 0.9rem;
            font-weight: 500;
            line-height: 1.36;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
        }
        .circle-wall-post-rendered {
            display: grid;
            gap: 0.42rem;
            min-width: 0;
            color: rgba(255, 255, 255, 0.72);
            font-size: 0.9rem;
            font-weight: 500;
            line-height: 1.36;
        }
        .circle-wall-post-rendered .circle-wall-post-preview {
            margin: 0;
        }
        .circle-wall-inline-link {
            color: #93c5fd;
            text-decoration: underline;
            text-underline-offset: 2px;
            overflow-wrap: anywhere;
        }
        .circle-wall-inline-underline {
            text-decoration: underline;
            text-underline-offset: 2px;
        }
        .circle-wall-inline-code {
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.10);
            color: #e5e7eb;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            font-size: 0.86em;
            padding: 0.04rem 0.26rem;
        }
        .circle-wall-markdown-quote {
            display: grid;
            gap: 0.16rem;
            margin: 0;
            border-left: 3px solid rgba(147, 197, 253, 0.62);
            color: rgba(255, 255, 255, 0.68);
            padding: 0.04rem 0 0.04rem 0.58rem;
        }
        .circle-wall-markdown-list {
            display: grid;
            gap: 0.12rem;
            margin: 0;
            color: rgba(255, 255, 255, 0.72);
            padding-left: 1.05rem;
        }
        .circle-wall-inline-image-block {
            position: relative;
            display: block;
            width: min(100%, 330px);
            height: 108px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.06);
        }
        .circle-wall-inline-image-block img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .circle-wall-inline-image-block.is-loading img {
            opacity: 0;
        }
        .circle-wall-inline-image-block.is-loading::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 48%, transparent 100%),
                rgba(255, 255, 255, 0.06);
            transform: translateX(-100%);
            animation: circleWallImageLoadingSweep 1.08s ease-in-out infinite;
        }
        @keyframes circleWallImageLoadingSweep {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        .circle-wall-inline-image-block.is-error {
            display: none;
        }
        .circle-wall-post-footer {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 0.8rem;
            align-items: center;
            min-width: 0;
        }
        .circle-wall-post-context {
            overflow: hidden;
            color: rgba(255, 255, 255, 0.42);
            font-size: 0.76rem;
            font-weight: 680;
            line-height: 1.1;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .circle-wall-post-metrics {
            display: inline-flex;
            align-items: center;
            justify-self: end;
            gap: 0.78rem;
            color: rgba(255, 255, 255, 0.58);
            font-size: 0.84rem;
            font-weight: 680;
            line-height: 1;
            white-space: nowrap;
        }
        .circle-wall-post-metrics span {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
        }
        .circle-wall-post-metrics i {
            font-size: 0.96rem;
        }
        .circle-wall-empty-state {
            border: 1px dashed rgba(255, 255, 255, 0.16);
            border-radius: 9px;
            background: rgba(255, 255, 255, 0.045);
            color: rgba(255, 255, 255, 0.58);
            font-size: 0.82rem;
            font-weight: 760;
            padding: 1rem;
        }
        .circle-profile-toolbar-action.is-active {
            border-color: rgba(244, 114, 182, 0.66);
            background: linear-gradient(135deg, rgba(236, 72, 153, 0.9), rgba(244, 114, 182, 0.7));
            color: #180711;
            box-shadow: 0 8px 22px rgba(236, 72, 153, 0.18);
        }
        .circle-profile-toolbar-action.is-active i,
        .circle-profile-toolbar-action.is-active span {
            color: #180711;
        }
        .circle-wall-post-row {
            min-height: 0;
        }
        .system-wall-surface {
            gap: 0.78rem;
        }
        .system-wall-feed-heading {
            position: sticky;
            top: 0;
            z-index: 18;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 0.8rem;
            margin: 0 -0.12rem;
            padding: 0.24rem 0.12rem 0.44rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.09);
            background: rgba(8, 10, 15, 0.94);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
        }
        .system-wall-feed-column {
            display: grid;
            align-content: start;
            gap: 0.62rem;
            min-width: 0;
        }
        .system-wall-heading-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.55rem;
            min-width: 0;
        }
        .system-wall-controls {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0.42rem;
            min-width: 0;
        }
        .system-wall-read-filter {
            display: inline-flex;
            align-items: center;
            gap: 0.16rem;
            min-height: 2.28rem;
            border: 1px solid rgba(255, 255, 255, 0.13);
            border-radius: 9px;
            background: rgba(255, 255, 255, 0.055);
            padding: 0.16rem;
        }
        .system-wall-read-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 1.86rem;
            border: 0;
            border-radius: 7px;
            background: transparent;
            color: rgba(255, 255, 255, 0.66);
            cursor: pointer;
            font-size: 0.76rem;
            font-weight: 920;
            line-height: 1;
            padding: 0 0.62rem;
        }
        .system-wall-read-btn:hover,
        .system-wall-read-btn:focus-visible {
            color: #ffffff;
            outline: none;
        }
        .system-wall-read-btn.is-active {
            background: #f4f4f5;
            color: #151518;
        }
        .system-wall-sort-menu {
            position: relative;
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
        }
        .system-wall-sort-menu summary {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            min-width: 42px;
            height: 38px;
            min-height: 38px;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: var(--brand-hot-pink);
            cursor: pointer;
            font-size: 0.82rem;
            font-weight: 900;
            line-height: 1;
            list-style: none;
            padding: 0;
            user-select: none;
        }
        .system-wall-sort-menu summary::-webkit-details-marker {
            display: none;
        }
        .system-wall-sort-menu summary:hover,
        .system-wall-sort-menu summary:focus-visible {
            color: color-mix(in srgb, var(--brand-hot-pink) 78%, white 22%);
            outline: none;
        }
        .system-wall-sort-btn-text {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            clip-path: inset(50%);
            white-space: nowrap;
        }
        .system-wall-sort-menu .system-wall-sort-btn-badge {
            position: absolute;
            left: 50%;
            top: -3px;
            transform: translateX(-50%);
            display: block;
            max-width: 46px;
            margin-top: 0;
            padding: 1px 4px;
            border: 1px solid color-mix(in srgb, var(--brand-hot-pink) 38%, transparent 62%);
            border-radius: 999px;
            background: color-mix(in srgb, var(--brand-hot-pink) 16%, rgba(12, 13, 18, 0.82) 84%);
            color: #fff;
            font-size: 0.49rem;
            font-weight: 850;
            line-height: 1;
            letter-spacing: 0;
            white-space: nowrap;
            text-align: center;
            pointer-events: none;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
        }
        .system-wall-sort-btn-icon {
            display: block;
            width: 28px;
            height: 28px;
            stroke: currentColor;
            stroke-width: 2.2;
            stroke-linecap: round;
            stroke-linejoin: round;
            fill: none;
        }
        .system-wall-sort-options {
            position: absolute;
            right: 0;
            top: calc(100% + 0.28rem);
            z-index: 28;
            display: grid;
            gap: 0.18rem;
            min-width: 10.4rem;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 9px;
            background: #1d1d22;
            box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
            padding: 0.32rem;
        }
        .system-wall-sort-options button {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            min-height: 2.12rem;
            border: 0;
            border-radius: 7px;
            background: transparent;
            color: rgba(255, 255, 255, 0.72);
            cursor: pointer;
            font-size: 0.84rem;
            font-weight: 860;
            padding: 0 0.66rem;
            text-align: left;
        }
        .system-wall-sort-options button:hover,
        .system-wall-sort-options button:focus-visible,
        .system-wall-sort-options button.is-active {
            background: rgba(244, 114, 182, 0.18);
            color: #fff1f8;
            outline: none;
        }
        .system-wall-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 248px;
            align-items: start;
            gap: 0.68rem;
            min-width: 0;
            box-sizing: border-box;
            padding-right: 0.58rem;
        }
        .system-wall-grid.is-single-feed {
            grid-template-columns: minmax(0, 1fr);
            padding-right: 0.58rem;
        }
        .system-wall-section {
            display: grid;
            gap: 0.52rem;
            min-width: 0;
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 10px;
            background: rgba(18, 18, 22, 0.68);
            padding: 0.62rem;
        }
        @media (min-width: 901px) {
            .circle-profile-shell.circle-surface-wall .system-wall-feed-section {
                border: 0;
                border-radius: 0;
                background: transparent;
                padding: 0;
            }
        }
        .system-wall-section-head {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: start;
            gap: 0.55rem;
            min-width: 0;
        }
        .system-wall-section-head h3 {
            margin: 0;
            color: #f4f4f5;
            font-size: 0.82rem;
            font-weight: 940;
            line-height: 1.08;
            text-transform: uppercase;
        }
        .system-wall-section-head span {
            display: block;
            margin-top: 0.15rem;
            color: rgba(255, 255, 255, 0.48);
            font-size: 0.62rem;
            font-weight: 760;
            line-height: 1.18;
        }
        .system-wall-section-head b {
            color: rgba(255, 255, 255, 0.52);
            font-size: 0.78rem;
            font-weight: 920;
            line-height: 1;
        }
        .system-wall-section--latest .circle-wall-post-list {
            gap: 0.44rem;
        }
        .system-wall-live-card {
            --circle-accent: #55c7a6;
            --circle-accent-soft: rgba(85, 199, 166, 0.18);
            --circle-accent-faint: rgba(85, 199, 166, 0.08);
            position: relative;
            display: grid;
            grid-template-columns: 46px minmax(0, 1fr) minmax(132px, 230px);
            gap: 0.78rem;
            align-items: center;
            min-width: 0;
            min-height: 5.7rem;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.09);
            border-radius: 10px;
            background: rgba(14, 15, 20, 0.78);
            color: inherit;
            padding: 0.66rem 0.74rem;
            text-decoration: none;
            transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
        }
        .system-wall-live-card:not(.has-media) {
            grid-template-columns: 46px minmax(0, 1fr);
        }
        .system-wall-live-card[data-tone="2"] {
            --circle-accent: #7dd3fc;
            --circle-accent-soft: rgba(125, 211, 252, 0.18);
            --circle-accent-faint: rgba(125, 211, 252, 0.08);
        }
        .system-wall-live-card[data-tone="3"] {
            --circle-accent: #f0abfc;
            --circle-accent-soft: rgba(240, 171, 252, 0.16);
            --circle-accent-faint: rgba(240, 171, 252, 0.07);
        }
        .system-wall-live-card[data-tone="4"] {
            --circle-accent: #facc15;
            --circle-accent-soft: rgba(250, 204, 21, 0.16);
            --circle-accent-faint: rgba(250, 204, 21, 0.07);
        }
        .system-wall-live-card[data-tone="5"] {
            --circle-accent: #fb7185;
            --circle-accent-soft: rgba(251, 113, 133, 0.16);
            --circle-accent-faint: rgba(251, 113, 133, 0.07);
        }
        .system-wall-live-card[data-tone="6"] {
            --circle-accent: #a7f3d0;
            --circle-accent-soft: rgba(167, 243, 208, 0.16);
            --circle-accent-faint: rgba(167, 243, 208, 0.07);
        }
        .system-wall-live-card::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 1.42rem;
            width: 1px;
            background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.16), transparent);
            pointer-events: none;
        }
        .system-wall-live-card.is-circle-source {
            border-color: color-mix(in srgb, var(--circle-accent) 30%, rgba(255, 255, 255, 0.08) 70%);
            background:
                linear-gradient(90deg, var(--circle-accent-faint), transparent 42%),
                rgba(14, 15, 20, 0.82);
        }
        .system-wall-live-card:hover,
        .system-wall-live-card:focus-visible {
            border-color: color-mix(in srgb, var(--circle-accent) 48%, rgba(255, 255, 255, 0.16) 52%);
            background:
                linear-gradient(90deg, var(--circle-accent-soft), transparent 48%),
                rgba(20, 22, 28, 0.9);
            outline: none;
            transform: translateY(-1px);
        }
        .system-wall-live-rail {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            min-width: 0;
        }
        .system-wall-live-avatar {
            position: relative;
            display: grid;
            place-items: center;
            width: 42px;
            height: 42px;
            overflow: hidden;
            border: 1px solid color-mix(in srgb, var(--circle-accent) 52%, rgba(255, 255, 255, 0.20) 48%);
            border-radius: 9px;
            background:
                radial-gradient(circle at 50% 42%, var(--circle-accent-soft), transparent 58%),
                rgba(8, 10, 15, 0.95);
            color: color-mix(in srgb, var(--circle-accent) 72%, white 28%);
            font-size: 0.68rem;
            font-weight: 950;
            line-height: 1;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
        }
        .system-wall-live-avatar.is-loading::before,
        .system-wall-live-media.is-loading::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.16) 48%, transparent 100%),
                rgba(255, 255, 255, 0.06);
            transform: translateX(-100%);
            animation: circleWallImageLoadingSweep 1.08s ease-in-out infinite;
            pointer-events: none;
        }
        .system-wall-live-avatar.is-loading img,
        .system-wall-live-media.is-loading img {
            opacity: 0;
        }
        .system-wall-live-avatar img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .system-wall-live-body {
            display: grid;
            gap: 0.32rem;
            min-width: 0;
        }
        .system-wall-live-media {
            position: relative;
            display: block;
            justify-self: end;
            width: min(100%, 230px);
            height: 5rem;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 8px;
            background:
                radial-gradient(circle at 72% 18%, var(--circle-accent-soft), transparent 36%),
                rgba(255, 255, 255, 0.055);
        }
        .system-wall-live-media.is-error {
            display: none;
        }
        .system-wall-live-media img,
        .system-wall-live-media .circle-wall-inline-image-block,
        .system-wall-live-media .circle-wall-inline-image-block img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .system-wall-live-media .circle-wall-inline-image-block {
            max-width: none;
            margin: 0;
            border: 0;
            border-radius: 0;
        }
        .system-wall-event-card {
            grid-template-columns: 7.2rem minmax(0, 1fr);
            gap: 0.86rem;
            min-height: 6.2rem;
            border-color: rgba(132, 204, 22, 0.20);
            background:
                linear-gradient(90deg, rgba(132, 204, 22, 0.10), transparent 54%),
                rgba(11, 16, 13, 0.86);
        }
        .system-wall-event-card.has-media,
        .system-wall-event-card:not(.has-media) {
            grid-template-columns: 7.2rem minmax(0, 1fr);
        }
        .system-wall-event-card::before {
            display: none;
        }
        .system-wall-event-card.is-creator-event {
            border-color: rgba(56, 189, 248, 0.24);
            background:
                linear-gradient(90deg, rgba(56, 189, 248, 0.10), transparent 54%),
                rgba(10, 15, 20, 0.86);
        }
        .system-wall-event-card:hover,
        .system-wall-event-card:focus-visible {
            background:
                linear-gradient(90deg, rgba(132, 204, 22, 0.16), transparent 58%),
                rgba(15, 22, 18, 0.94);
        }
        .system-wall-event-card.is-creator-event:hover,
        .system-wall-event-card.is-creator-event:focus-visible {
            background:
                linear-gradient(90deg, rgba(56, 189, 248, 0.16), transparent 58%),
                rgba(13, 20, 28, 0.94);
        }
        .system-wall-event-visual {
            position: relative;
            display: grid;
            place-items: center;
            width: 100%;
            height: 5rem;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 8px;
            background:
                radial-gradient(circle at 62% 18%, rgba(132, 204, 22, 0.22), transparent 42%),
                rgba(255, 255, 255, 0.06);
            color: rgba(236, 253, 245, 0.82);
            font-size: 1rem;
            font-weight: 950;
            line-height: 1;
        }
        .is-creator-event .system-wall-event-visual {
            background:
                radial-gradient(circle at 62% 18%, rgba(56, 189, 248, 0.22), transparent 42%),
                rgba(255, 255, 255, 0.06);
        }
        .system-wall-event-visual.is-loading::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 48%, transparent 100%),
                rgba(255, 255, 255, 0.06);
            transform: translateX(-100%);
            animation: circleWallImageLoadingSweep 1.08s ease-in-out infinite;
            pointer-events: none;
        }
        .system-wall-event-visual img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .system-wall-event-visual.is-loading img {
            opacity: 0;
        }
        .system-wall-event-visual > span {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
        }
        .system-wall-event-subtitle {
            display: block;
            min-width: 0;
            color: rgba(255, 255, 255, 0.70);
            font-size: 0.78rem;
            font-weight: 760;
            line-height: 1.24;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .system-wall-event-metrics {
            display: inline-flex;
            align-items: center;
            gap: 0.46rem;
            flex: 0 0 auto;
        }
        .system-wall-event-metrics span {
            display: inline-flex;
            align-items: baseline;
            gap: 0.24rem;
            min-height: 1.42rem;
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 7px;
            background: rgba(255, 255, 255, 0.055);
            color: rgba(255, 255, 255, 0.66);
            padding: 0 0.38rem;
        }
        .system-wall-event-metrics b {
            color: #f8fafc;
            font-size: 0.78rem;
            font-weight: 920;
        }
        .system-wall-event-metrics em {
            color: rgba(255, 255, 255, 0.54);
            font-size: 0.62rem;
            font-style: normal;
            font-weight: 840;
            text-transform: uppercase;
        }
        .system-wall-live-banner {
            position: relative;
            display: block;
            height: 34px;
            overflow: hidden;
            border-radius: 7px;
            background:
                radial-gradient(circle at 78% -20%, var(--circle-accent-soft) 0 28%, transparent 30%),
                linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
        }
        .system-wall-live-banner img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.66;
        }
        .system-wall-live-banner::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(5, 6, 10, 0.22), rgba(5, 6, 10, 0.62));
            pointer-events: none;
        }
        .system-wall-live-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.28rem 0.46rem;
            min-width: 0;
            color: rgba(255, 255, 255, 0.58);
            font-size: 0.68rem;
            font-weight: 790;
            line-height: 1.15;
        }
        .system-wall-live-type {
            display: inline-flex;
            align-items: center;
            min-height: 1.18rem;
            border: 1px solid color-mix(in srgb, var(--circle-accent) 38%, rgba(255, 255, 255, 0.10) 62%);
            border-radius: 4px;
            background: color-mix(in srgb, var(--circle-accent) 16%, rgba(255, 255, 255, 0.04) 84%);
            color: color-mix(in srgb, var(--circle-accent) 74%, white 26%);
            font-size: 0.58rem;
            font-weight: 950;
            line-height: 1;
            padding: 0 0.28rem;
            text-transform: uppercase;
        }
        .system-wall-live-source {
            min-width: 0;
            color: color-mix(in srgb, var(--circle-accent) 58%, white 42%);
            font-weight: 930;
            overflow-wrap: anywhere;
        }
        .system-wall-live-author {
            color: #39e6f2;
            font-weight: 880;
        }
        .system-wall-live-date {
            margin-left: auto;
            color: rgba(255, 255, 255, 0.52);
            font-weight: 840;
            white-space: nowrap;
        }
        .system-wall-live-card strong {
            display: block;
            min-width: 0;
            color: #f4f4f5;
            font-size: 0.96rem;
            font-weight: 910;
            line-height: 1.16;
            overflow-wrap: anywhere;
        }
        .system-wall-live-preview {
            display: -webkit-box;
            overflow: hidden;
            color: rgba(255, 255, 255, 0.66);
            font-size: 0.78rem;
            font-weight: 620;
            line-height: 1.32;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        .system-wall-live-preview.circle-wall-post-rendered.is-activity {
            display: flex;
            align-items: center;
            gap: 0.42rem;
            min-width: 0;
            overflow: hidden;
            white-space: nowrap;
            -webkit-line-clamp: initial;
        }
        .system-wall-live-preview.circle-wall-post-rendered.is-activity .circle-wall-post-rendered-line {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .system-wall-live-preview.circle-wall-post-rendered.is-activity .circle-wall-inline-image-block {
            flex: 0 0 58px;
            width: 58px;
            height: 42px;
            margin: 0;
        }
        .system-wall-live-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.62rem;
            min-width: 0;
            color: rgba(255, 255, 255, 0.44);
            font-size: 0.66rem;
            font-weight: 830;
            line-height: 1;
        }
        .system-wall-live-metrics {
            display: inline-flex;
            align-items: center;
            gap: 0.62rem;
            flex: 0 0 auto;
            color: rgba(255, 255, 255, 0.58);
            font-size: 0.76rem;
            font-weight: 850;
        }
        .system-wall-live-metrics span {
            display: inline-flex;
            align-items: center;
            gap: 0.24rem;
        }
        .circle-wall-buzz-card {
            grid-template-columns: 34px minmax(0, 1fr);
            gap: 0.66rem;
            background: #241b24;
            padding: 0.68rem;
        }
        .circle-wall-buzz-card .circle-wall-post-body {
            padding: 0;
        }
        .circle-wall-buzz-card:hover,
        .circle-wall-buzz-card:focus-visible {
            background: #2c222d;
        }
        .circle-wall-buzz-card.is-unread {
            background: #1f2934;
        }
        .circle-wall-buzz-icon {
            border-color: rgba(244, 114, 182, 0.42);
            background: rgba(244, 114, 182, 0.16);
            color: #ffd6e9;
        }
        .circle-wall-buzz-icon.is-image,
        .system-wall-buzz-rail .wall-buzz-preview-visual.is-image {
            position: relative;
            overflow: hidden;
            border-color: rgba(244, 114, 182, 0.48);
            background: rgba(244, 114, 182, 0.16);
            color: #ffd6e9;
            padding: 0;
        }
        .wall-buzz-activity-fallback {
            position: relative;
            z-index: 0;
            display: grid;
            place-items: center;
            width: 100%;
            height: 100%;
            color: inherit;
            font-size: 0.56rem;
            font-weight: 950;
            line-height: 1;
        }
        .circle-wall-buzz-icon.is-image img,
        .system-wall-buzz-rail .wall-buzz-preview-visual.is-image img {
            position: absolute;
            inset: 0;
            z-index: 1;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .circle-wall-buzz-icon.is-initials,
        .system-wall-buzz-rail .wall-buzz-preview-visual.is-initials {
            font-size: 0.54rem;
            font-weight: 950;
        }
        .system-wall-buzz-rail {
            display: flex;
            flex: 0 0 248px;
            flex-direction: column;
            align-self: stretch;
            width: 248px;
            min-width: 0;
            min-height: 0;
            position: static;
            top: auto;
            max-height: none;
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.16);
            border-radius: 8px;
            background: rgba(5, 7, 17, 0.92);
            color: #e8e8ea;
        }
        .system-wall-buzz-rail .wall-buzz-rail-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            border-bottom: 1px solid rgba(148, 163, 184, 0.14);
            padding: 10px 10px 8px;
        }
        .system-wall-buzz-rail .wall-buzz-rail-head h2 {
            margin: 0;
            color: #e8e8ea;
            font-size: 0.74rem;
            font-weight: 900;
            letter-spacing: 0.07em;
            line-height: 1.1;
            text-transform: uppercase;
        }
        .system-wall-buzz-rail .wall-buzz-rail-head p {
            margin: 3px 0 0;
            color: #9a9aa0;
            font-size: 0.66rem;
            font-weight: 800;
            line-height: 1.2;
        }
        .system-wall-buzz-rail .wall-buzz-rail-link {
            appearance: none;
            -webkit-appearance: none;
            flex: 0 0 auto;
            border: 0;
            background: transparent;
            color: #f4d35e;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.66rem;
            font-weight: 900;
            letter-spacing: 0.04em;
            line-height: 1;
            padding: 2px 0;
            text-transform: uppercase;
        }
        .system-wall-buzz-rail .wall-buzz-rail-list {
            flex: 1 1 auto;
            min-height: 0;
            list-style: none;
            margin: 0;
            overflow-y: auto;
            padding: 0;
        }
        .system-wall-buzz-rail .wall-buzz-preview-item {
            display: grid;
            grid-template-columns: 38px minmax(0, 1fr);
            gap: 8px;
            align-items: center;
            min-width: 0;
            border-top: 1px solid rgba(148, 163, 184, 0.12);
            color: inherit;
            cursor: pointer;
            padding: 8px 10px;
            text-decoration: none;
        }
        .system-wall-buzz-rail .wall-buzz-preview-item:first-child {
            border-top: 0;
        }
        .system-wall-buzz-rail .wall-buzz-preview-item:hover {
            background: rgba(96, 200, 195, 0.08);
        }
        .system-wall-buzz-rail .wall-buzz-preview-item:focus-visible {
            outline: 2px solid #f4d35e;
            outline-offset: -2px;
        }
        .system-wall-buzz-rail .wall-buzz-preview-visual {
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            min-width: 38px;
            border: 1px solid rgba(244, 114, 182, 0.34);
            border-radius: 8px;
            background: rgba(244, 114, 182, 0.14);
            color: #ffd6e9;
            font-size: 0.5rem;
            font-weight: 950;
            line-height: 1;
        }
        .system-wall-buzz-rail .wall-buzz-preview-visual.is-tag {
            border-color: rgba(96, 200, 195, 0.38);
            background: rgba(96, 200, 195, 0.13);
            color: #baf7ef;
        }
        .system-wall-buzz-rail .wall-buzz-preview-body {
            display: grid;
            gap: 3px;
            min-width: 0;
        }
        .system-wall-buzz-rail .wall-buzz-preview-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            min-width: 0;
        }
        .system-wall-buzz-rail .wall-buzz-preview-kind {
            color: #d34fd5;
            font-size: 0.55rem;
            font-weight: 900;
            letter-spacing: 0.05em;
            line-height: 1;
            text-transform: uppercase;
        }
        .system-wall-buzz-rail .wall-buzz-preview-time {
            flex: 0 0 auto;
            color: #9a9aa0;
            font-size: 0.62rem;
            font-weight: 850;
            line-height: 1;
        }
        .system-wall-buzz-rail .wall-buzz-preview-headline,
        .system-wall-buzz-rail .wall-buzz-preview-snippet,
        .system-wall-buzz-rail .wall-buzz-preview-state {
            margin: 0;
        }
        .system-wall-buzz-rail .wall-buzz-preview-headline {
            display: -webkit-box;
            overflow: hidden;
            color: #9a9aa0;
            font-size: 0.72rem;
            font-weight: 750;
            line-height: 1.22;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        .system-wall-buzz-rail .wall-buzz-preview-headline strong {
            color: #39e6f2;
            font-weight: 900;
            text-decoration-color: rgba(57, 230, 242, 0.72);
            text-decoration-line: underline;
            text-decoration-style: dotted;
            text-underline-offset: 2px;
        }
        .system-wall-buzz-rail .wall-buzz-preview-headline .wall-buzz-preview-author-link {
            color: #39e6f2;
            font-weight: 900;
            text-decoration-color: rgba(57, 230, 242, 0.72);
            text-decoration-line: underline;
            text-decoration-style: dotted;
            text-underline-offset: 2px;
        }
        .system-wall-buzz-rail .wall-buzz-preview-headline b {
            color: #e8e8ea;
            font-weight: 900;
        }
        .system-wall-buzz-rail .wall-buzz-preview-snippet {
            display: -webkit-box;
            overflow: hidden;
            color: #9a9aa0;
            font-size: 0.68rem;
            font-weight: 520;
            line-height: 1.24;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        .system-wall-buzz-rail .wall-buzz-preview-state {
            padding: 12px 10px;
            color: #9a9aa0;
            font-size: 0.72rem;
            font-weight: 800;
        }
        .system-wall-buzz-rail .wall-buzz-preview-state.is-error {
            color: #fb7185;
        }
        .circle-wall-compose-surface,
        .circle-wall-compose-host {
            min-width: 0;
        }
        .circle-wall-compose-host[data-wall-host-mounting="1"] .wall-app {
            visibility: hidden;
        }
        [data-wall-host-mounting="1"] .wall-app {
            visibility: hidden;
        }
        [data-wall-host-mounting="1"] .wall-boot-overlay {
            display: none !important;
        }
        .circle-wall-compose-surface .system-wall-feed-heading h2 {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .circle-wall-compose-surface .system-wall-feed-heading span {
            display: none;
        }
        .circle-wall-compose-host .wall-boot-overlay {
            display: none !important;
        }
        .circle-wall-compose-host .wall-app,
        .circle-wall-compose-host .wall-scroll {
            width: 100%;
            min-width: 0;
        }
        .circle-wall-compose-host .wall-scroll {
            max-height: none;
        }
        .system-wall-mobile-views {
            display: none;
        }
        .system-wall-fresh-surface {
            padding: 12px 14px 16px;
        }
        .system-wall-grid--fresh {
            padding-right: 0;
        }
        .system-wall-fresh-host {
            min-width: 0;
        }
        .system-wall-fresh-host .fresh-feed-root {
            max-width: none;
            margin: 0;
        }
        .system-wall-fresh-host .fresh-page-title {
            display: none;
        }
        .system-wall-fresh-host .fresh-floating-toolbar {
            top: 0;
            z-index: 5;
        }
        .circles-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
            gap: 0.65rem;
        }
        .circle-default-visual {
            --circle-accent: #55c7a6;
            --circle-accent-soft: rgba(85, 199, 166, 0.28);
            --circle-accent-faint: rgba(85, 199, 166, 0.12);
            --circle-sky: #173a46;
            --circle-horizon: #14222c;
            position: relative;
            display: block;
        }
        .circle-default-visual[data-tone="2"] {
            --circle-accent: #7dd3fc;
            --circle-accent-soft: rgba(125, 211, 252, 0.28);
            --circle-accent-faint: rgba(125, 211, 252, 0.12);
            --circle-sky: #17324f;
            --circle-horizon: #121d31;
        }
        .circle-default-visual[data-tone="3"] {
            --circle-accent: #f0abfc;
            --circle-accent-soft: rgba(240, 171, 252, 0.26);
            --circle-accent-faint: rgba(240, 171, 252, 0.11);
            --circle-sky: #3c2544;
            --circle-horizon: #211729;
        }
        .circle-default-visual[data-tone="4"] {
            --circle-accent: #facc15;
            --circle-accent-soft: rgba(250, 204, 21, 0.24);
            --circle-accent-faint: rgba(250, 204, 21, 0.11);
            --circle-sky: #3f3820;
            --circle-horizon: #201d14;
        }
        .circle-default-visual[data-tone="5"] {
            --circle-accent: #fb7185;
            --circle-accent-soft: rgba(251, 113, 133, 0.24);
            --circle-accent-faint: rgba(251, 113, 133, 0.10);
            --circle-sky: #432430;
            --circle-horizon: #21151c;
        }
        .circle-default-visual[data-tone="6"] {
            --circle-accent: #a7f3d0;
            --circle-accent-soft: rgba(167, 243, 208, 0.24);
            --circle-accent-faint: rgba(167, 243, 208, 0.10);
            --circle-sky: #203c31;
            --circle-horizon: #13251f;
        }
        .circle-default-banner {
            position: relative;
            display: block;
            overflow: hidden;
            height: 100%;
            border-radius: inherit;
            background:
                radial-gradient(circle at 72% -12%, color-mix(in srgb, var(--circle-accent) 38%, white 6%) 0 16%, transparent 17%),
                linear-gradient(180deg, color-mix(in srgb, var(--circle-sky) 84%, var(--circle-accent) 16%), var(--circle-horizon));
        }
        .circle-banner-image,
        .circle-profile-image {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
        .circle-default-banner:has(.circle-banner-image) {
            background: #111113;
        }
        .circle-default-banner:has(.circle-banner-image)::before,
        .circle-default-banner:has(.circle-banner-image)::after,
        .circle-default-banner:has(.circle-banner-image) .circle-default-moon,
        .circle-default-banner:has(.circle-banner-image) .circle-default-pillar,
        .circle-default-avatar:has(.circle-profile-image) .circle-default-avatar-ring,
        .circle-default-avatar:has(.circle-profile-image) .circle-default-avatar-core,
        .circle-default-avatar:has(.circle-profile-image) .circle-default-avatar-dot {
            display: none;
        }
        .circle-default-banner::before,
        .circle-default-banner::after {
            content: "";
            position: absolute;
            pointer-events: none;
        }
        .circle-default-banner::before {
            left: -8%;
            right: -8%;
            bottom: -10%;
            height: 50%;
            background:
                linear-gradient(152deg, transparent 0 18%, rgba(0, 0, 0, 0.46) 18.5% 54%, transparent 54.5%),
                linear-gradient(24deg, transparent 0 22%, rgba(0, 0, 0, 0.34) 22.5% 60%, transparent 60.5%),
                linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.34));
        }
        .circle-default-banner::after {
            left: 18%;
            right: 8%;
            top: 55%;
            height: 2px;
            background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--circle-accent) 72%, white 8%), transparent);
            box-shadow:
                0 16px 0 rgba(255, 255, 255, 0.05),
                0 -24px 0 rgba(255, 255, 255, 0.04);
        }
        .circle-default-moon,
        .circle-default-pillar {
            position: absolute;
            pointer-events: none;
        }
        .circle-default-moon {
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--circle-accent) 70%, white 12%);
            background: rgba(4, 8, 14, 0.58);
            box-shadow:
                inset 0 0 22px rgba(0, 0, 0, 0.36),
                0 0 24px var(--circle-accent-faint);
        }
        .circle-default-moon--large {
            top: 18%;
            left: 18%;
            width: 4.2rem;
            height: 4.2rem;
        }
        .circle-default-moon--small {
            top: 24%;
            right: 10%;
            width: 2.1rem;
            height: 2.1rem;
            opacity: 0.9;
        }
        .circle-default-pillar {
            bottom: 32%;
            width: 0.28rem;
            border-radius: 999px;
            background: color-mix(in srgb, var(--circle-accent) 64%, white 8%);
            opacity: 0.46;
            box-shadow: 0 0 18px var(--circle-accent-soft);
        }
        .circle-default-pillar--one {
            left: 34%;
            height: 62%;
        }
        .circle-default-pillar--two {
            left: 39%;
            height: 76%;
        }
        .circle-default-pillar--three {
            left: 44%;
            height: 52%;
        }
        .circle-default-avatar {
            position: absolute;
            display: grid;
            place-items: center;
            border: 2px solid color-mix(in srgb, var(--circle-accent) 72%, white 14%);
            border-radius: 10px;
            background:
                radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--circle-accent) 18%, transparent), transparent 42%),
                rgba(8, 12, 20, 0.96);
            box-shadow:
                0 18px 44px rgba(0, 0, 0, 0.44),
                inset 0 0 42px rgba(255, 255, 255, 0.035);
        }
        .circle-default-avatar-ring,
        .circle-default-avatar-core,
        .circle-default-avatar-dot {
            position: absolute;
            border-radius: 999px;
            pointer-events: none;
        }
        .circle-default-avatar-ring {
            inset: 22%;
            border: 4px solid color-mix(in srgb, var(--circle-accent) 82%, white 8%);
            box-shadow: 0 0 18px var(--circle-accent-soft);
        }
        .circle-default-avatar-core {
            width: 22%;
            height: 22%;
            background: color-mix(in srgb, var(--circle-accent) 68%, #22c55e 32%);
        }
        .circle-default-avatar-dot {
            right: 18%;
            top: 48%;
            width: 13%;
            height: 13%;
            background: color-mix(in srgb, var(--circle-accent) 62%, white 38%);
            box-shadow: 0 0 10px var(--circle-accent-soft);
        }
        .circle-card,
        .circles-empty-state,
        .circle-member-row,
        .circle-activity-row,
        .user-profile-overview-card,
        .user-profile-claim,
        .user-profile-stats > div {
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: var(--bg-elevated);
        }
        .circle-card {
            display: grid;
            grid-template-rows: auto 1fr;
            min-height: 14.6rem;
            overflow: hidden;
            padding: 0;
            color: inherit;
            text-decoration: none;
            cursor: pointer;
            transition:
                border-color 160ms ease,
                background 160ms ease,
                transform 160ms ease;
        }
        .circle-card-visual {
            height: 8.4rem;
            border-radius: 8px 8px 0 0;
        }
        .circle-card-visual .circle-default-avatar {
            left: 0.72rem;
            bottom: -2.15rem;
            width: 4.4rem;
            height: 4.4rem;
        }
        .circle-card-body {
            display: grid;
            align-content: start;
            padding: 2.65rem 0.78rem 0.78rem;
        }
        .circle-card:hover,
        .circle-card:focus-visible {
            border-color: color-mix(in srgb, #95e7cb 45%, var(--border-subtle) 55%);
            background: color-mix(in srgb, #95e7cb 7%, var(--bg-elevated) 93%);
            transform: translateY(-1px);
            outline: none;
        }
        .circle-card-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.65rem;
        }
        .circle-card strong,
        .circle-member-row strong,
        .circle-activity-row strong,
        .user-profile-claim strong {
            display: block;
            color: var(--text-primary);
            font-size: 0.94rem;
            font-weight: 850;
            line-height: 1.15;
            overflow-wrap: anywhere;
        }
        .circle-card span,
        .circle-member-row small,
        .circle-activity-row small,
        .user-profile-claim span {
            color: var(--text-muted);
            font-size: 0.73rem;
            font-weight: 750;
            line-height: 1.3;
        }
        .circle-activity-row p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            margin: 0.18rem 0 0;
            color: var(--text-muted);
            font-size: 0.76rem;
            font-weight: 650;
            line-height: 1.28;
        }
        .circle-card b {
            display: inline-flex;
            border: 1px solid color-mix(in srgb, #55c7a6 45%, var(--border-subtle) 55%);
            border-radius: 999px;
            color: #95e7cb;
            flex: 0 0 auto;
            font-size: 0.66rem;
            font-weight: 900;
            padding: 0.2rem 0.42rem;
            text-transform: uppercase;
        }
        .circle-card p {
            margin: 0.55rem 0 0;
            color: var(--text-muted);
            font-size: 0.8rem;
            font-weight: 650;
            line-height: 1.35;
        }
        .circle-card-compact {
            min-height: 11.8rem;
        }
        .circle-card-compact .circle-card-visual {
            height: 6.4rem;
        }
        .circle-card-compact .circle-default-avatar {
            width: 3.55rem;
            height: 3.55rem;
            bottom: -1.7rem;
        }
        .circle-card-compact .circle-card-body {
            padding-top: 2.2rem;
        }
        .circle-card-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: fit-content;
            min-height: 1.9rem;
            margin-top: 0.62rem;
            border: 1px solid color-mix(in srgb, #55c7a6 45%, var(--border-subtle) 55%);
            border-radius: 8px;
            color: #95e7cb;
            font-size: 0.68rem;
            font-weight: 900;
            line-height: 1;
            padding: 0 0.58rem;
        }
        .circles-empty-state {
            min-height: 3.2rem;
            display: grid;
            place-items: center;
            color: var(--text-muted);
            font-size: 0.84rem;
            font-weight: 750;
            padding: 0.8rem;
        }
        .circle-detail-description {
            margin: -0.55rem 0 0.85rem;
            max-width: 760px;
        }
        .circle-detail-hero {
            position: relative;
            display: grid;
            align-items: center;
            min-height: clamp(9.2rem, 15vw, 11.8rem);
            overflow: hidden;
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: var(--bg-elevated);
            box-shadow: 0 22px 56px rgba(0, 0, 0, 0.22);
        }
        .circle-detail-hero::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background:
                linear-gradient(90deg, rgba(8, 10, 15, 0.96) 0%, rgba(8, 10, 15, 0.82) 44%, rgba(8, 10, 15, 0.54) 100%),
                linear-gradient(0deg, rgba(8, 10, 15, 0.32), rgba(8, 10, 15, 0.18));
        }
        .circle-detail-visual {
            position: absolute;
            inset: 0;
            z-index: auto;
            height: 100%;
            border-radius: 8px;
            opacity: 0.86;
        }
        .circle-detail-visual .circle-default-banner {
            position: absolute;
            inset: 0;
        }
        .circle-detail-visual .circle-default-avatar {
            z-index: 3;
            left: 1rem;
            top: 50%;
            bottom: auto;
            width: clamp(5rem, 8vw, 6.35rem);
            height: clamp(5rem, 8vw, 6.35rem);
            border-radius: 12px;
            transform: translateY(-50%);
        }
        .circle-detail-hero-content {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 0.8rem;
            align-items: center;
            padding: 1rem 1rem 1rem clamp(6.7rem, 10vw, 8.15rem);
        }
        .circle-detail-title-block {
            display: grid;
            min-width: 0;
            gap: 0.42rem;
        }
        .circle-detail-title-block p {
            margin: 0;
            color: color-mix(in srgb, #95e7cb 62%, white 38%);
            font-size: 0.68rem;
            font-weight: 850;
            letter-spacing: 0;
            line-height: 1;
            text-transform: uppercase;
        }
        .circle-detail-title-block h1 {
            margin: 0;
            color: var(--text-primary);
            font-size: clamp(1.6rem, 2.8vw, 2.2rem);
            font-weight: 900;
            letter-spacing: 0;
            line-height: 0.98;
            overflow-wrap: anywhere;
        }
        .circle-detail-title-block em {
            color: rgba(255, 255, 255, 0.78);
            font-size: 0.84rem;
            font-style: normal;
            font-weight: 650;
            line-height: 1.4;
        }
        .circle-detail-title-block em {
            display: -webkit-box;
            max-width: 56rem;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        .circle-detail-stat-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem;
            align-items: stretch;
        }
        .circle-detail-stat-strip > span {
            display: grid;
            gap: 0.12rem;
            min-width: 5.6rem;
            min-height: 2.58rem;
            justify-content: start;
            align-content: center;
            border: 1px solid rgba(255, 255, 255, 0.13);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.07);
            padding: 0.34rem 0.56rem;
        }
        .circle-detail-stat-strip > span > strong {
            color: #ffffff;
            font-size: 0.86rem;
            font-weight: 860;
            line-height: 1;
            overflow-wrap: anywhere;
        }
        .circle-detail-stat-strip > span > small {
            color: rgba(255, 255, 255, 0.54);
            font-size: 0.58rem;
            font-weight: 850;
            letter-spacing: 0;
            line-height: 1;
            text-transform: uppercase;
        }
        .circle-admin-link {
            justify-self: end;
            align-self: start;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 1.85rem;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.08);
            color: var(--text-primary);
            font-size: 0.72rem;
            font-weight: 900;
            line-height: 1;
            padding: 0 0.68rem;
            text-decoration: none;
        }
        .circle-admin-link:hover,
        .circle-admin-link:focus-visible {
            border-color: #95e7cb;
            outline: none;
        }
        .circle-profile-shell {
            width: min(100% - 2.4rem, var(--page-max-width));
            height: calc(100dvh - 76px);
            min-height: 0;
            display: grid;
            grid-template-columns: calc(var(--characters-sidebar-width) + 50px) minmax(0, 1fr);
            gap: var(--space-3);
            align-items: stretch;
            overflow: hidden;
        }
        .circle-profile-main {
            height: 100%;
            min-width: 0;
            min-height: 0;
        }
        .circle-profile-stage {
            position: relative;
            height: 100%;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            scrollbar-gutter: stable;
        }
        .circle-profile-stage > .circle-profile-bg {
            display: none;
        }
        .circle-profile-bg,
        .circle-profile-bg-image,
        .circle-profile-bg-gradient,
        .circle-profile-bg-effect,
        .circle-profile-bg-sheen {
            position: absolute;
            inset: 0;
            pointer-events: none;
            border-radius: inherit;
        }
        .circle-profile-bg {
            overflow: hidden;
            z-index: 0;
        }
        .circle-profile-bg-image {
            background:
                radial-gradient(circle at 74% 4%, rgba(244, 114, 182, 0.18), transparent 28%),
                radial-gradient(circle at 26% 86%, rgba(45, 212, 191, 0.13), transparent 34%),
                linear-gradient(145deg, rgba(10, 12, 20, 0.98), rgba(22, 10, 20, 0.82) 54%, rgba(6, 13, 20, 0.94));
        }
        .circle-profile-bg-image img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            opacity: 0.9;
            filter: saturate(1.06) contrast(1.03);
        }
        .circle-profile-bg-gradient {
            background:
                linear-gradient(90deg, rgba(8, 10, 15, 0.62) 0%, rgba(8, 10, 15, 0.36) 48%, rgba(8, 10, 15, 0.12) 100%),
                linear-gradient(180deg, rgba(8, 10, 15, 0.04), rgba(8, 10, 15, 0.48));
        }
        .circle-profile-bg-effect {
            opacity: 0.18;
            background-image:
                radial-gradient(circle, rgba(255, 255, 255, 0.34) 0 1px, transparent 1.5px),
                radial-gradient(circle, rgba(244, 114, 182, 0.24) 0 1px, transparent 1.5px);
            background-size: 92px 92px, 147px 147px;
            background-position: 18px 28px, 74px 12px;
        }
        .circle-profile-bg-sheen {
            background:
                radial-gradient(circle at 82% 20%, rgba(244, 114, 182, 0.12), transparent 18rem),
                radial-gradient(circle at 20% 88%, rgba(45, 212, 191, 0.10), transparent 16rem);
        }
        .circle-profile-content {
            position: relative;
            z-index: 1;
            display: grid;
            align-content: start;
            gap: 6px;
            min-height: 0;
            padding: 0;
        }
        .circle-profile-shell.circle-surface-wall .circle-profile-content {
            min-height: 0;
            background: transparent;
        }
        .circle-profile-shell.circle-surface-wall .circle-wall-surface {
            min-height: 0;
            margin: 0;
            padding: 10px 0.75rem 0 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-sizing: border-box;
        }
        .circle-profile-mobile-modal-head,
        .circle-profile-mobile-rail,
        .circle-profile-mobile-meta {
            display: none;
        }
        .circle-profile-toolbar {
            position: sticky;
            top: 0;
            z-index: 6;
            container-type: inline-size;
            display: grid;
            grid-template-columns: minmax(140px, 1fr) auto minmax(0, 1fr);
            align-items: center;
            min-height: 42px;
            padding: 4px 13px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.10);
            background: rgba(5, 6, 10, 0.94);
        }
        .circle-profile-toolbar-identity {
            grid-column: 1;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }
        .circle-profile-toolbar-avatar {
            display: grid;
            place-items: center;
            width: 25px;
            height: 25px;
            flex: 0 0 25px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.07);
            color: #fff;
            font-size: 0.56rem;
            font-weight: 900;
        }
        .circle-profile-toolbar-avatar img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .circle-profile-toolbar-avatar .creator-profile-modal-avatar-placeholder-inner {
            font-size: 0.56rem;
            font-weight: 900;
        }
        .circle-profile-toolbar-identity strong {
            display: inline-flex;
            align-items: center;
            max-width: clamp(132px, 18vw, 260px);
            height: 33px;
            overflow: hidden;
            color: #fff;
            font-size: 1rem;
            font-weight: 820;
            letter-spacing: 0;
            line-height: 33px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .circle-profile-toolbar-actions {
            grid-column: 3;
            justify-self: end;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-width: 0;
            white-space: nowrap;
        }
        .circle-profile-toolbar-action,
        .circle-profile-sort-trigger {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-height: 32px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.9);
            cursor: pointer;
            font: inherit;
            font-size: 0.7rem;
            font-weight: 820;
            line-height: 1;
            padding: 0 10px;
            text-decoration: none;
        }
        .circle-profile-page-tab-pills {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 34px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
            padding: 2px;
        }
        .circle-profile-page-tab {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-height: 28px;
            border: 0;
            border-radius: 999px;
            background: transparent;
            color: rgba(255, 255, 255, 0.66);
            cursor: default;
            font: inherit;
            font-size: 0.72rem;
            font-weight: 840;
            line-height: 1;
            padding: 0 12px;
        }
        .circle-profile-page-tab.is-active {
            background: linear-gradient(135deg, rgba(236, 72, 153, 0.96), rgba(244, 114, 182, 0.76));
            color: #150711;
            box-shadow: 0 8px 22px rgba(236, 72, 153, 0.18);
        }
        .circle-profile-page-tab strong {
            font-weight: 900;
        }
        .circle-profile-stage .circle-detail-hero {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 104px minmax(0, 1fr);
            grid-template-areas:
                "avatar copy"
                "avatar stats";
            gap: 7px 13px;
            align-items: end;
            min-height: 136px;
            padding: 6px 10px 10px;
            border: 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 0;
            background: #05060a;
            box-shadow: none;
        }
        .circle-profile-stage .circle-detail-hero > .circle-profile-bg {
            z-index: 0;
        }
        .circle-profile-stage .circle-detail-hero > .circle-profile-mobile-meta,
        .circle-profile-stage .circle-detail-hero > .circle-profile-page-avatar,
        .circle-profile-stage .circle-detail-hero > .circle-detail-hero-content,
        .circle-profile-stage .circle-detail-hero > .circle-detail-stat-strip {
            position: relative;
            z-index: 1;
        }
        .circle-profile-stage .circle-detail-hero::after {
            display: none;
        }
        .circle-profile-page-avatar {
            grid-area: avatar;
            display: grid;
            place-items: center;
            width: 104px;
            aspect-ratio: 1;
            align-self: end;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 13px;
            background: rgba(255, 255, 255, 0.06);
            box-shadow: 0 13px 30px rgba(0, 0, 0, 0.34);
        }
        .circle-profile-page-avatar img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .circle-profile-page-avatar .creator-profile-modal-avatar-placeholder-inner {
            color: rgba(255, 255, 255, 0.9);
            font-size: 1.4rem;
            font-weight: 850;
        }
        .circle-profile-stage .circle-detail-hero-content {
            grid-area: copy;
            min-width: 0;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
            align-items: start;
            align-content: end;
            justify-items: start;
            max-width: 760px;
            padding: 0;
            text-align: left;
        }
        .circle-profile-stage .circle-detail-title-block {
            display: grid;
            gap: 4px;
            min-width: 0;
            justify-items: start;
        }
        .circle-profile-page-kicker {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
            color: color-mix(in srgb, var(--brand-hot-pink) 48%, white 52%);
            font-size: 0.62rem;
            font-weight: 800;
            letter-spacing: 0;
            line-height: 1;
        }
        .circle-profile-page-source-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 20px;
            padding: 0 8px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.84);
            font-size: 0.64rem;
            font-weight: 850;
            line-height: 1;
        }
        .circle-profile-page-source-on {
            color: rgba(255, 255, 255, 0.56);
            font-size: 0.9em;
            font-weight: 750;
        }
        .circle-profile-stage .circle-detail-title-block h1 {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            max-width: 100%;
            margin: 0;
            color: #ffffff;
            font-family: var(--font-sans);
            font-size: 1.68rem;
            font-weight: 520;
            letter-spacing: 0;
            line-height: 1.05;
            overflow-wrap: anywhere;
            text-align: left;
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.34);
        }
        .circle-profile-stage .circle-detail-title-block em {
            display: -webkit-box;
            max-width: 68ch;
            margin: 0;
            overflow: hidden;
            color: rgba(255, 255, 255, 0.88);
            font-size: 0.76rem;
            font-style: normal;
            font-weight: 650;
            line-height: 1.45;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }
        .circle-profile-stage .circle-detail-stat-strip {
            grid-area: stats;
            display: flex;
            flex-wrap: nowrap;
            align-items: stretch;
            gap: 0;
            max-width: 100%;
            overflow: visible;
            align-self: start;
            margin-top: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
        }
        .circle-profile-stage .circle-detail-stat-strip .circle-detail-stat {
            flex: 0 1 auto;
            display: grid;
            gap: 2px;
            align-content: center;
            min-width: 0;
            min-height: 32px;
            padding: 0 11px;
            border: 0;
            border-left: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 0;
            background: transparent;
        }
        .circle-profile-stage .circle-detail-stat-strip .circle-detail-stat:first-child {
            border-left: 0;
            padding-left: 0;
        }
        .circle-profile-stage .circle-detail-stat strong {
            overflow: hidden;
            color: #ffffff;
            font-size: 0.9rem;
            font-weight: 850;
            font-variant-numeric: tabular-nums;
            line-height: 1;
            text-overflow: ellipsis;
        }
        .circle-profile-stage .circle-detail-stat span {
            color: rgba(255, 255, 255, 0.70);
            font-size: 0.6rem;
            font-weight: 720;
            line-height: 1.15;
        }
        .circle-profile-stage .circle-admin-link {
            min-height: 32px;
            border-color: rgba(255, 255, 255, 0.18);
            background: rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.7rem;
            font-weight: 820;
            padding: 0 10px;
        }
        .circle-profile-home,
        .circle-profile-settings-panel,
        .circle-profile-settings-private {
            position: relative;
            z-index: 1;
            margin: 0 13px 13px;
            padding: 12px 14px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.11);
            background: rgba(6, 8, 13, 0.44);
        }
        .circle-profile-settings-panel,
        .circle-profile-settings-private {
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
        }
        .circle-profile-settings-panel .circle-admin-form {
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
        }
        .circle-profile-home .circle-member-list {
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        }
        .circle-profile-content > .circle-admin-panel {
            margin: 0 13px 13px;
        }
        .circle-profile-sidebar {
            position: relative;
            display: grid;
            grid-template-rows: auto minmax(0, 1fr);
            gap: 10px;
            height: 100%;
            min-height: 0;
            max-height: none;
            min-width: 0;
            overflow-y: hidden;
            overflow-x: hidden;
            border: 0;
            border-radius: 0;
            background: transparent;
            padding: 0 2px 0 0;
            scrollbar-gutter: stable;
        }
        .circle-profile-sidebar-nav-wrap {
            display: grid;
            gap: 6px;
            min-width: 0;
        }
        .circle-profile-sidebar-label {
            display: block;
            color: rgba(255, 255, 255, 0.44);
            font-size: 0.66rem;
            font-weight: 900;
            letter-spacing: 0;
            line-height: 1;
            text-transform: uppercase;
        }
        .circle-profile-sidebar-nav {
            display: grid;
            gap: 3px;
            min-width: 0;
        }
        .circle-profile-sidebar-nav-link {
            display: grid;
            grid-template-columns: 18px minmax(0, 1fr);
            align-items: center;
            gap: 7px;
            min-height: 33px;
            border: 1px solid transparent;
            border-left: 3px solid transparent;
            border-radius: 0;
            background: transparent;
            color: rgba(255, 255, 255, 0.74);
            font-size: 0.76rem;
            font-weight: 900;
            line-height: 1;
            padding: 0 8px 0 7px;
            text-decoration: none;
            text-transform: uppercase;
        }
        .circle-profile-sidebar-nav-link i {
            color: rgba(255, 255, 255, 0.64);
            font-size: 0.86rem;
            text-align: center;
        }
        .circle-profile-sidebar-nav-link span {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .circle-profile-sidebar-nav-link:hover,
        .circle-profile-sidebar-nav-link:focus-visible {
            border-color: rgba(255, 255, 255, 0.10);
            border-left-color: rgba(244, 114, 182, 0.62);
            background: rgba(255, 255, 255, 0.055);
            color: rgba(255, 255, 255, 0.92);
            outline: none;
        }
        .circle-profile-sidebar-nav-link.is-active {
            border-color: rgba(255, 255, 255, 0.10);
            border-left-color: var(--brand-hot-pink);
            background: rgba(244, 114, 182, 0.11);
            color: #fff;
        }
        .circle-profile-sidebar-nav-link.is-active i,
        .circle-profile-sidebar-nav-link.is-active span {
            color: #fff;
        }
        .circle-profile-sidebar-activity {
            display: grid;
            grid-template-rows: auto minmax(0, 1fr);
            gap: 8px;
            min-height: 0;
            overflow: hidden;
            border-top: 1px solid rgba(255, 255, 255, 0.10);
            padding-top: 9px;
        }
        .circle-profile-sidebar-section-head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 8px;
            min-width: 0;
        }
        .circle-profile-sidebar-section-head h2 {
            margin: 0;
            color: rgba(255, 255, 255, 0.78);
            font-size: 0.76rem;
            font-weight: 900;
            letter-spacing: 0;
            line-height: 1;
            text-transform: uppercase;
        }
        .circle-profile-sidebar-section-head span {
            color: rgba(255, 255, 255, 0.46);
            font-size: 0.72rem;
            font-weight: 850;
            line-height: 1;
        }
        .circle-profile-sidebar-activity .circle-activity-list {
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            align-content: start;
            align-items: start;
            gap: 2px;
            padding-right: 2px;
        }
        .circle-profile-sidebar-activity .circle-activity-row {
            display: grid;
            grid-template-columns: 22px minmax(0, 1fr);
            align-items: center;
            gap: 7px;
            min-height: 38px;
            border-top: 0;
            border-right: 0;
            border-bottom: 0;
            border-left: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 0;
            background: transparent;
            padding: 5px 4px 5px 7px;
        }
        .circle-profile-sidebar-activity .circle-activity-row > div {
            display: grid;
            gap: 2px;
            min-width: 0;
        }
        .circle-profile-sidebar-activity .circle-activity-row > span {
            width: 22px;
            height: 22px;
            border-radius: 4px;
            font-size: 0.76rem;
        }
        .circle-profile-sidebar-activity .circle-activity-row strong {
            font-size: 0.8rem;
            line-height: 1.15;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .circle-profile-sidebar-activity .circle-activity-row small {
            font-size: 0.68rem;
            line-height: 1.25;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .circle-profile-sidebar-activity .circle-activity-row p {
            display: none;
        }
        .circle-profile-sidebar-activity .circles-empty-state {
            min-height: 0;
            border-radius: 0;
            background: transparent;
            padding: 8px 0;
            text-align: left;
        }
        .circle-sidebar-circle-list {
            display: grid;
            align-content: start;
            gap: 0.34rem;
            min-width: 0;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 2px;
        }
        .circle-sidebar-circle-row {
            display: grid;
            grid-template-columns: 32px minmax(0, 1fr) auto;
            align-items: center;
            gap: 0.5rem;
            min-width: 0;
            min-height: 3.05rem;
            padding: 0.42rem 0.48rem;
            border: 1px solid rgba(255, 255, 255, 0.09);
            border-radius: 7px;
            background: rgba(255, 255, 255, 0.04);
            color: rgba(255, 255, 255, 0.78);
            text-decoration: none;
        }
        .circle-sidebar-circle-row:hover,
        .circle-sidebar-circle-row:focus-visible {
            border-color: rgba(94, 234, 212, 0.34);
            background: rgba(94, 234, 212, 0.08);
            color: #fff;
            outline: none;
        }
        .circle-sidebar-circle-avatar {
            display: grid;
            place-items: center;
            width: 32px;
            height: 32px;
            overflow: hidden;
            border: 1px solid rgba(94, 234, 212, 0.34);
            border-radius: 8px;
            background: rgba(94, 234, 212, 0.09);
        }
        .circle-sidebar-circle-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .circle-sidebar-circle-avatar .creator-profile-modal-avatar-placeholder-inner {
            font-size: 0.8rem;
            font-weight: 900;
        }
        .circle-sidebar-circle-copy {
            display: grid;
            gap: 0.12rem;
            min-width: 0;
        }
        .circle-sidebar-circle-copy strong,
        .circle-sidebar-circle-copy small,
        .circle-sidebar-circle-copy em {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .circle-sidebar-circle-copy strong {
            color: rgba(255, 255, 255, 0.94);
            font-size: 0.8rem;
            font-weight: 900;
            line-height: 1.05;
        }
        .circle-sidebar-circle-copy small,
        .circle-sidebar-circle-copy em {
            color: rgba(255, 255, 255, 0.54);
            font-size: 0.66rem;
            font-style: normal;
            font-weight: 740;
            line-height: 1.1;
        }
        .circle-sidebar-circle-count {
            color: rgba(255, 255, 255, 0.68);
            font-size: 0.74rem;
            font-weight: 900;
            line-height: 1;
            font-variant-numeric: tabular-nums;
        }
        @media (min-width: 769px) {
            body.circles-view-active:has(.circle-profile-shell) {
                overflow: hidden;
            }
            body.circles-view-active:has(.circle-profile-shell) .mobile-scroll-container {
                position: fixed;
                inset: 0;
                overflow: hidden;
                padding: calc(4rem + 2px) 1rem 1rem 1rem;
                box-sizing: border-box;
            }
            body.circles-view-active:has(.circle-profile-shell) .mobile-scroll-container > .container {
                width: min(100%, var(--page-max-width));
                max-width: var(--page-max-width);
                height: 100%;
                min-height: 0;
                display: flex;
                flex-direction: column;
                margin: 0 auto;
                padding: 0;
            }
            body.circles-view-active:has(.circle-profile-shell) #viewCircles.view-circles.active {
                flex: 1 1 auto;
                min-height: 0;
                height: 100%;
                display: flex !important;
                flex-direction: column;
            }
            body.circles-view-active:has(.circle-profile-shell) #viewCircles #circlesPageRoot {
                flex: 1 1 auto;
                min-height: 0;
                height: 100%;
                display: flex;
                flex-direction: column;
            }
            body.circles-view-active:has(.circle-profile-shell) #viewCircles .circle-profile-shell {
                flex: 1 1 auto;
                width: 100%;
                height: 100% !important;
                min-height: 0;
                margin: 0;
                padding: 0;
                grid-template-columns: calc(var(--characters-sidebar-width) + 50px) minmax(0, 1fr);
                gap: var(--space-3);
            }
            body.circles-view-active:has(.circle-profile-shell) #viewCircles .circle-profile-sidebar {
                border: 0;
                border-radius: 0;
                background: transparent;
                padding: 0 2px 0 0;
                box-shadow: none;
            }
            body.circles-view-active:has(.circle-profile-shell) #viewCircles .circle-profile-stage {
                border: 0;
                border-radius: 0;
                background: transparent;
                box-shadow: none;
            }
            body.circles-view-active:has(.circle-profile-shell) #viewCircles .circle-profile-bg,
            body.circles-view-active:has(.circle-profile-shell) #viewCircles .circle-profile-bg-image,
            body.circles-view-active:has(.circle-profile-shell) #viewCircles .circle-profile-bg-gradient {
                border-radius: inherit;
            }
            body.circles-view-active:has(.circle-profile-shell) #viewCircles .circle-profile-content {
                min-height: 0;
                gap: 5px;
            }
            body.user-profile-view-active:has(#viewUserProfile .circle-profile-shell) {
                overflow: hidden;
            }
            body.user-profile-view-active:has(#viewUserProfile .circle-profile-shell) .mobile-scroll-container {
                position: fixed;
                inset: 0;
                overflow: hidden;
                padding: calc(4rem + 2px) 1rem 1rem 1rem;
                box-sizing: border-box;
            }
            body.user-profile-view-active:has(#viewUserProfile .circle-profile-shell) .mobile-scroll-container > .container {
                width: min(100%, var(--page-max-width));
                max-width: var(--page-max-width);
                height: 100%;
                min-height: 0;
                display: flex;
                flex-direction: column;
                margin: 0 auto;
                padding: 0;
            }
            body.user-profile-view-active:has(#viewUserProfile .circle-profile-shell) #viewUserProfile.view-user-profile.active {
                flex: 1 1 auto;
                min-height: 0;
                height: 100%;
                display: flex !important;
                flex-direction: column;
            }
            body.user-profile-view-active:has(#viewUserProfile .circle-profile-shell) #viewUserProfile #userProfilePageRoot {
                flex: 1 1 auto;
                min-height: 0;
                height: 100%;
                display: flex;
                flex-direction: column;
            }
            body.user-profile-view-active:has(#viewUserProfile .circle-profile-shell) #viewUserProfile .circle-profile-shell {
                flex: 1 1 auto;
                width: 100%;
                height: 100% !important;
                min-height: 0;
                margin: 0;
                padding: 0;
                grid-template-columns: calc(var(--characters-sidebar-width) + 50px) minmax(0, 1fr);
                gap: var(--space-3);
            }
            body.user-profile-view-active:has(#viewUserProfile .circle-profile-shell) #viewUserProfile .circle-profile-sidebar {
                border: 0;
                border-radius: 0;
                background: transparent;
                padding: 0 2px 0 0;
                box-shadow: none;
            }
            body.user-profile-view-active:has(#viewUserProfile .circle-profile-shell) #viewUserProfile .circle-profile-stage {
                border: 0;
                border-radius: 0;
                background: transparent;
                box-shadow: none;
            }
            body.user-profile-view-active:has(#viewUserProfile .circle-profile-shell) #viewUserProfile .circle-profile-content {
                min-height: 0;
                gap: 5px;
            }
        }
        .circle-admin-page-head {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 1rem;
        }
        .circle-admin-page-head > div {
            display: grid;
            gap: 0.22rem;
            min-width: 0;
        }
        .circle-admin-page-head a {
            color: #95e7cb;
            font-size: 0.74rem;
            font-weight: 850;
            line-height: 1;
            text-decoration: none;
        }
        .circle-admin-page-head h1 {
            margin: 0;
            color: var(--text-primary);
            font-size: clamp(1.45rem, 2.7vw, 2.05rem);
            font-weight: 900;
            letter-spacing: 0;
            line-height: 1;
        }
        .circle-admin-page-head span {
            color: var(--text-muted);
            font-size: 0.86rem;
            font-weight: 760;
            line-height: 1.2;
        }
        .circle-image-edit {
            position: absolute;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.34rem;
            min-height: 1.85rem;
            border: 1px solid color-mix(in srgb, #95e7cb 40%, rgba(255, 255, 255, 0.16) 60%);
            border-radius: 8px;
            background: rgba(12, 16, 22, 0.82);
            color: var(--text-primary);
            cursor: pointer;
            font: inherit;
            font-size: 0.68rem;
            font-weight: 900;
            line-height: 1;
            padding: 0 0.58rem;
        }
        .circle-image-edit:hover,
        .circle-image-edit:focus-visible {
            border-color: #95e7cb;
            background: rgba(18, 25, 30, 0.94);
            outline: none;
        }
        .circle-image-edit--banner {
            top: 0.65rem;
            right: 0.65rem;
        }
        .circle-image-edit--profile {
            left: 1.5rem;
            top: calc(clamp(5.2rem, 9vw, 6.8rem) - 1.45rem);
        }
        .circle-detail-hero .circle-detail-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            align-items: flex-start;
            gap: 0.5rem;
            margin-left: 0;
        }
        .circle-detail-hero .circle-social-action {
            border-color: color-mix(in srgb, #55c7a6 52%, var(--border-default) 48%);
            background: color-mix(in srgb, var(--bg-elevated) 76%, #55c7a6 24%);
            color: var(--text-primary);
        }
        .circle-detail-layout,
        .user-profile-layout {
            display: grid;
            grid-template-columns: minmax(260px, 0.75fr) minmax(320px, 1.25fr);
            gap: 0.9rem;
            align-items: start;
        }
        .circle-detail-layout--hub {
            grid-template-columns: minmax(240px, 0.8fr) minmax(240px, 0.8fr) minmax(280px, 1.1fr);
        }
        .circle-detail-layout--two {
            grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.75fr);
        }
        .circle-assets-empty {
            min-height: 10rem;
            display: grid;
            place-items: center;
            gap: 0.4rem;
            border: 1px dashed color-mix(in srgb, #55c7a6 32%, var(--border-subtle) 68%);
            border-radius: 8px;
            background:
                radial-gradient(circle at 50% 24%, rgba(85, 199, 166, 0.10), transparent 9rem),
                color-mix(in srgb, var(--bg-surface) 82%, #55c7a6 18%);
            color: var(--text-muted);
            padding: 1rem;
            text-align: center;
        }
        .circle-assets-empty i {
            color: #95e7cb;
            font-size: 1.35rem;
        }
        .circle-assets-empty strong {
            color: var(--text-secondary);
            font-size: 0.86rem;
            font-weight: 850;
        }
        .circle-social-card,
        .circle-admin-invite-btn {
            min-height: 3.2rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            border: 1px solid color-mix(in srgb, #55c7a6 42%, var(--border-subtle) 58%);
            border-radius: 8px;
            background: color-mix(in srgb, var(--bg-elevated) 78%, #55c7a6 22%);
            color: var(--text-primary);
            font-size: 0.88rem;
            font-weight: 900;
            line-height: 1;
            padding: 0 0.9rem;
            text-decoration: none;
        }
        .circle-social-card i {
            color: #95e7cb;
        }
        .circle-admin-invite-btn {
            width: 100%;
            min-height: 2.4rem;
            cursor: pointer;
            font-family: inherit;
        }
        .circle-admin-panel {
            margin-top: 0.85rem;
        }
        .circle-admin-tabs {
            display: inline-flex;
            align-items: center;
            gap: 1rem;
            width: fit-content;
            max-width: 100%;
            margin-bottom: 0.58rem;
            border: 0;
            border-radius: 0;
            background: transparent;
            overflow: visible;
        }
        .circle-admin-tabs button {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.44rem;
            min-height: 2.05rem;
            border: 0;
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            font: inherit;
            font-size: 0.74rem;
            font-weight: 900;
            line-height: 1;
            padding: 0 0.08rem 0.38rem;
            text-transform: uppercase;
        }
        .circle-admin-tabs button::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0.1rem;
            left: 0;
            height: 2px;
            border-radius: 999px;
            background: transparent;
        }
        .circle-admin-tabs button i {
            color: currentColor;
            font-size: 0.86rem;
            line-height: 1;
        }
        .circle-admin-tabs button span {
            color: currentColor;
            line-height: 1;
            white-space: nowrap;
        }
        .circle-admin-tabs button:hover,
        .circle-admin-tabs button:focus-visible {
            color: color-mix(in srgb, var(--brand-hot-pink) 70%, white 30%);
            outline: none;
        }
        .circle-admin-tabs button.is-active {
            background: transparent;
            color: color-mix(in srgb, var(--brand-hot-pink) 78%, white 22%);
        }
        .circle-admin-tabs button.is-active::after {
            background: var(--brand-hot-pink);
        }
        .circle-admin-form-heading {
            margin-bottom: 0.08rem;
        }
        .circle-admin-form-heading h2 {
            font-size: 1rem;
        }
        .circle-admin-heading-save {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 2rem;
            border: 1px solid color-mix(in srgb, var(--brand-hot-pink) 58%, var(--border-default) 42%);
            border-radius: 8px;
            background: color-mix(in srgb, var(--brand-hot-pink) 58%, var(--bg-elevated) 42%);
            color: #ffffff;
            cursor: pointer;
            font: inherit;
            font-size: 0.74rem;
            font-weight: 900;
            line-height: 1;
            padding: 0 0.76rem;
        }
        .circle-admin-form,
        .circle-admin-fields,
        .circle-admin-media-grid,
        .circle-admin-image-card {
            display: grid;
            min-width: 0;
        }
        .circle-admin-form {
            gap: 0.58rem;
            padding: 0.62rem;
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: color-mix(in srgb, var(--bg-elevated) 86%, var(--bg-surface) 14%);
        }
        .circle-admin-settings-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.72fr);
            gap: 0.6rem;
            align-items: stretch;
            min-width: 0;
        }
        .circle-admin-fields {
            gap: 0.48rem;
        }
        .circle-admin-text-fields {
            align-content: start;
        }
        .circle-admin-fields label {
            display: grid;
            gap: 0.26rem;
            min-width: 0;
        }
        .circle-admin-fields label > span {
            color: var(--text-muted);
            font-size: 0.64rem;
            font-weight: 850;
            line-height: 1;
            text-transform: uppercase;
        }
        .circle-admin-fields input,
        .circle-admin-fields textarea,
        .circle-admin-fields select,
        .circle-member-controls select {
            width: 100%;
            min-height: 2.05rem;
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: var(--bg-surface);
            color: var(--text-primary);
            font: inherit;
            font-size: 0.76rem;
            font-weight: 740;
            padding: 0 0.56rem;
        }
        .circle-admin-fields textarea {
            min-height: 4.25rem;
            padding-top: 0.52rem;
            line-height: 1.3;
            resize: vertical;
        }
        .circle-admin-choice-column {
            display: grid;
            align-content: start;
            gap: 0.42rem;
            min-width: 0;
        }
        .circle-admin-choice-group {
            min-width: 0;
            margin: 0;
            padding: 0.46rem;
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: color-mix(in srgb, var(--bg-surface) 86%, #55c7a6 14%);
        }
        .circle-admin-choice-group legend {
            padding: 0 0.16rem;
            color: var(--text-muted);
            font-size: 0.62rem;
            font-weight: 880;
            line-height: 1;
            text-transform: uppercase;
        }
        .circle-admin-choice-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.32rem;
            padding-top: 0.28rem;
        }
        .circle-admin-choice-pill {
            display: inline-flex;
            min-width: 0;
            cursor: pointer;
        }
        .circle-admin-choice-pill span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 1.72rem;
            border: 1px solid color-mix(in srgb, #55c7a6 24%, var(--border-subtle) 76%);
            border-radius: 999px;
            background: color-mix(in srgb, var(--bg-elevated) 82%, var(--bg-surface) 18%);
            color: var(--text-muted);
            font-size: 0.66rem;
            font-weight: 850;
            line-height: 1;
            padding: 0 0.58rem;
            white-space: nowrap;
            transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
        }
        .circle-admin-choice-pill input:checked + span {
            border-color: color-mix(in srgb, #95e7cb 64%, var(--border-default) 36%);
            background: color-mix(in srgb, #55c7a6 28%, var(--bg-elevated) 72%);
            color: var(--text-primary);
        }
        .circle-admin-choice-pill input:focus-visible + span {
            outline: 2px solid color-mix(in srgb, #95e7cb 72%, white 28%);
            outline-offset: 2px;
        }
        .circle-admin-choice-pill input:disabled + span {
            cursor: not-allowed;
            opacity: 0.58;
        }
        .circle-admin-select-grid,
        .circle-admin-media-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.55rem;
        }
        .circle-admin-media-grid {
            grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr);
            align-items: start;
        }
        .circle-admin-actions,
        .circle-admin-image-actions,
        .circle-membership-actions,
        .circle-member-controls {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.45rem;
            flex-wrap: wrap;
        }
        .circle-admin-actions button,
        .circle-admin-image-actions button,
        .circle-membership-actions button,
        .circle-member-controls button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 2.15rem;
            border: 1px solid color-mix(in srgb, #55c7a6 45%, var(--border-default) 55%);
            border-radius: 8px;
            background: color-mix(in srgb, var(--bg-elevated) 82%, #55c7a6 18%);
            color: var(--text-primary);
            cursor: pointer;
            font: inherit;
            font-size: 0.78rem;
            font-weight: 850;
            line-height: 1;
            padding: 0 0.75rem;
        }
        .circle-admin-actions button:disabled,
        .circle-admin-heading-save:disabled,
        .circle-admin-invite-row button:disabled,
        .circle-admin-image-actions button:disabled,
        .circle-membership-actions button:disabled,
        .circle-member-controls button:disabled,
        .circle-member-controls select:disabled {
            cursor: not-allowed;
            opacity: 0.58;
        }
        .circle-admin-invite-panel {
            display: grid;
            gap: 0.55rem;
            margin-top: 0;
            padding: 0.68rem;
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: color-mix(in srgb, var(--bg-elevated) 88%, #55c7a6 12%);
        }
        .circle-admin-invite-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.75rem;
        }
        .circle-admin-invite-head div {
            display: grid;
            gap: 0.16rem;
            min-width: 0;
        }
        .circle-admin-invite-head strong {
            color: var(--text-primary);
            font-size: 0.86rem;
            font-weight: 900;
            line-height: 1.1;
        }
        .circle-admin-invite-head span,
        .circle-admin-invite-panel p {
            color: var(--text-muted);
            font-size: 0.68rem;
            font-weight: 760;
            line-height: 1.25;
        }
        .circle-admin-invite-head > span {
            flex: 0 0 auto;
            min-height: 1.45rem;
            display: inline-flex;
            align-items: center;
            border: 1px solid color-mix(in srgb, #55c7a6 34%, var(--border-subtle) 66%);
            border-radius: 999px;
            background: color-mix(in srgb, var(--bg-surface) 84%, #55c7a6 16%);
            color: var(--text-secondary);
            font-size: 0.62rem;
            font-weight: 880;
            padding: 0 0.5rem;
            text-transform: uppercase;
        }
        .circle-admin-invite-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto auto;
            gap: 0.42rem;
            min-width: 0;
        }
        .circle-admin-invite-row input {
            min-width: 0;
            width: 100%;
            min-height: 2.15rem;
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: var(--bg-surface);
            color: var(--text-secondary);
            font: inherit;
            font-size: 0.72rem;
            font-weight: 740;
            padding: 0 0.62rem;
        }
        .circle-admin-invite-row button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.38rem;
            min-height: 2.15rem;
            border: 1px solid color-mix(in srgb, #55c7a6 45%, var(--border-default) 55%);
            border-radius: 8px;
            background: color-mix(in srgb, var(--bg-elevated) 82%, #55c7a6 18%);
            color: var(--text-primary);
            cursor: pointer;
            font: inherit;
            font-size: 0.74rem;
            font-weight: 850;
            line-height: 1;
            padding: 0 0.7rem;
        }
        .circle-admin-invite-panel p {
            margin: 0;
        }
        .circle-admin-error {
            border: 1px solid color-mix(in srgb, #fb7185 38%, var(--border-subtle) 62%);
            border-radius: 8px;
            background: color-mix(in srgb, var(--bg-elevated) 86%, #fb7185 14%);
            color: color-mix(in srgb, #fecdd3 76%, var(--text-primary) 24%);
            font-size: 0.76rem;
            font-weight: 780;
            line-height: 1.25;
            padding: 0.55rem 0.62rem;
        }
        .circle-admin-image-card {
            position: relative;
            gap: 0.58rem;
            padding: 0.68rem;
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: color-mix(in srgb, var(--bg-elevated) 88%, var(--bg-surface) 12%);
            overflow: hidden;
        }
        .circle-admin-image-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.65rem;
        }
        .circle-admin-image-card-head strong {
            color: var(--text-primary);
            font-size: 0.85rem;
            font-weight: 900;
            line-height: 1.1;
        }
        .circle-admin-image-card-head span {
            color: var(--text-muted);
            font-size: 0.66rem;
            font-weight: 850;
            line-height: 1;
            text-transform: uppercase;
        }
        .circle-admin-image-preview {
            position: relative;
            display: block;
            width: 100%;
            border: 1px solid color-mix(in srgb, #55c7a6 36%, var(--border-subtle) 64%);
            border-radius: 8px;
            background: var(--bg-surface);
            cursor: pointer;
            overflow: hidden;
            padding: 0;
        }
        .circle-admin-image-preview.is-loading::before,
        .user-settings-avatar-preview.is-loading::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 2;
            background:
                radial-gradient(circle at 50% 50%, rgba(149, 231, 203, 0.12), transparent 7rem),
                rgba(12, 12, 14, 0.78);
            pointer-events: none;
        }
        .circle-admin-image-preview.is-loading::after,
        .user-settings-avatar-preview.is-loading::after {
            content: "";
            position: absolute;
            left: calc(50% - 1rem);
            top: calc(50% - 1rem);
            z-index: 3;
            width: 2rem;
            height: 2rem;
            border: 2px solid color-mix(in srgb, #95e7cb 20%, transparent);
            border-top-color: #95e7cb;
            border-radius: 999px;
            animation: user-settings-saving-spin 0.82s linear infinite;
            pointer-events: none;
        }
        .circle-admin-image-preview--banner {
            aspect-ratio: 10 / 3;
        }
        .circle-admin-image-preview--profile {
            width: min(12rem, 100%);
            aspect-ratio: 1;
            justify-self: start;
        }
        .circle-admin-image-preview > img,
        .circle-admin-image-preview .circle-admin-image-default {
            display: block;
            width: 100%;
            height: 100%;
        }
        .circle-admin-image-preview > img {
            object-fit: cover;
        }
        .circle-admin-image-default--banner .circle-default-avatar {
            display: none;
        }
        .circle-admin-image-default--profile {
            border-radius: 8px;
        }
        .circle-admin-image-default--profile .circle-default-banner {
            display: none;
        }
        .circle-admin-image-default--profile .circle-default-avatar {
            position: relative;
            inset: auto;
            width: 100%;
            height: 100%;
            border-radius: 8px;
        }
        .circle-admin-image-blocker {
            position: absolute;
            inset: 0;
            z-index: 8;
            display: none;
            place-items: center;
            padding: 0.9rem;
            border-radius: inherit;
            background: rgba(12, 12, 14, 0.86);
            pointer-events: auto;
        }
        .circle-admin-image-blocker.is-active,
        .circle-admin-image-card.is-saving .circle-admin-image-blocker {
            display: grid;
        }
        .circle-admin-image-card.is-saving > :not(.circle-admin-image-blocker) {
            pointer-events: none;
        }
        .circle-image-cropper-stage {
            width: 100%;
            height: auto;
        }
        .circle-image-cropper-stage--banner {
            aspect-ratio: 10 / 3;
        }
        .circle-image-cropper-stage--profile {
            width: min(18rem, 100%);
            aspect-ratio: 1;
        }
        .user-profile-layout--about {
            grid-template-columns: 1fr;
        }
        .circle-member-list,
        .circle-activity-list,
        .user-profile-claims {
            display: grid;
            gap: 0.45rem;
        }
        .circle-talk-composer {
            display: grid;
            gap: 0.45rem;
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: color-mix(in srgb, var(--bg-elevated) 88%, #55c7a6 12%);
            padding: 0.62rem;
        }
        .circle-talk-composer textarea {
            width: 100%;
            min-height: 5.2rem;
            resize: vertical;
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: var(--bg-surface);
            color: var(--text-primary);
            font: inherit;
            font-size: 0.82rem;
            line-height: 1.35;
            padding: 0.62rem;
            outline: none;
        }
        .circle-talk-composer textarea:focus {
            border-color: color-mix(in srgb, #95e7cb 58%, var(--border-subtle) 42%);
        }
        .circle-talk-composer-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.6rem;
        }
        .circle-talk-composer-footer small {
            color: var(--text-muted);
            font-size: 0.72rem;
            font-weight: 750;
        }
        .circle-talk-composer-footer button {
            min-height: 2.15rem;
            border: 1px solid color-mix(in srgb, #55c7a6 48%, var(--border-subtle) 52%);
            border-radius: 8px;
            background: color-mix(in srgb, #55c7a6 16%, var(--bg-elevated) 84%);
            color: var(--text-primary);
            font: inherit;
            font-size: 0.78rem;
            font-weight: 850;
            padding: 0 0.8rem;
        }
        .circle-talk-composer-footer button:disabled,
        .circle-talk-composer textarea:disabled {
            opacity: 0.62;
        }
        .circle-talk-empty-action {
            display: flex;
            justify-content: flex-start;
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: color-mix(in srgb, var(--bg-elevated) 88%, #55c7a6 12%);
            padding: 0.62rem;
        }
        .circle-talk-empty-action.circle-talk-wall-link {
            align-items: center;
            width: fit-content;
            min-height: 2.15rem;
            border-color: color-mix(in srgb, #55c7a6 48%, var(--border-subtle) 52%);
            background: color-mix(in srgb, #55c7a6 16%, var(--bg-elevated) 84%);
            color: var(--text-primary);
            font-size: 0.78rem;
            font-weight: 850;
            line-height: 1;
            padding: 0 0.8rem;
            text-decoration: none;
        }
        .circle-talk-empty-action a,
        .circle-talk-empty-action button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 2.15rem;
            border: 1px solid color-mix(in srgb, #55c7a6 48%, var(--border-subtle) 52%);
            border-radius: 8px;
            background: color-mix(in srgb, #55c7a6 16%, var(--bg-elevated) 84%);
            color: var(--text-primary);
            cursor: pointer;
            font: inherit;
            font-size: 0.78rem;
            font-weight: 850;
            line-height: 1;
            padding: 0 0.8rem;
            text-decoration: none;
        }
        .user-profile-claims {
            grid-template-columns: repeat(auto-fill, minmax(166px, 184px));
            justify-content: start;
            gap: 0.62rem;
        }
        .circle-member-row,
        .circle-activity-row,
        .user-profile-claim {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            min-height: 3.4rem;
            color: inherit;
            padding: 0.55rem 0.65rem;
            text-decoration: none;
        }
        .circle-member-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 0.52rem;
            min-height: 3.05rem;
            padding: 0.45rem 0.55rem;
            cursor: pointer;
            transition: background var(--transition-fast), border-color var(--transition-fast);
        }
        .circle-member-row:hover,
        .circle-member-row:focus-visible {
            border-color: color-mix(in srgb, #55c7a6 42%, var(--border-default) 58%);
            background: color-mix(in srgb, var(--bg-elevated) 84%, #55c7a6 10%);
            outline: none;
        }
        .circle-admin-members-panel {
            display: grid;
            gap: 0.55rem;
            padding: 0.62rem;
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: color-mix(in srgb, var(--bg-elevated) 86%, var(--bg-surface) 14%);
        }
        .circle-admin-member-list {
            gap: 0.42rem;
        }
        .circle-member-row--admin {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 0.52rem;
        }
        .circle-member-row--self {
            border-color: color-mix(in srgb, #55c7a6 34%, var(--border-subtle) 66%);
        }
        .circle-member-row--creator {
            background:
                linear-gradient(90deg, rgba(236, 72, 153, 0.08), transparent 55%),
                var(--bg-elevated);
        }
        .circle-member-row--admin[data-membership-status="pending"] {
            border-color: color-mix(in srgb, var(--brand-hot-pink) 40%, var(--border-subtle) 60%);
            background: color-mix(in srgb, var(--bg-elevated) 78%, var(--brand-hot-pink) 10%);
        }
        .circle-member-row--admin[data-membership-status="banned"] {
            border-color: color-mix(in srgb, #fb7185 36%, var(--border-subtle) 64%);
            opacity: 0.78;
        }
        .circle-member-main {
            display: flex;
            align-items: center;
            gap: 0.54rem;
            flex: 1 1 auto;
            min-width: 0;
            color: inherit;
            text-decoration: none;
        }
        .circle-member-main > div {
            display: grid;
            gap: 0.12rem;
            min-width: 0;
        }
        .user-profile-creator-card {
            display: grid;
            grid-template-columns: 5.4rem minmax(0, 1fr);
            align-items: center;
            gap: 0.86rem;
            min-height: 7rem;
            padding: 0.74rem;
            overflow: hidden;
            background:
                linear-gradient(135deg, rgba(85, 199, 166, 0.1), transparent 46%),
                var(--bg-elevated);
            transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
        }
        .user-profile-creator-card.creators-directory-card {
            position: relative;
            display: block;
            width: min(100%, 184px);
            min-height: 0;
            aspect-ratio: 3 / 4;
            padding: 0;
            border: 0;
            border-radius: 8px;
            background: #111827;
            color: #ffffff;
            box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
        }
        .user-profile-creator-card:hover,
        .user-profile-creator-card:focus-visible {
            background: color-mix(in srgb, var(--bg-elevated) 86%, #55c7a6 14%);
            border-color: color-mix(in srgb, #55c7a6 42%, var(--border-default) 58%);
            outline: none;
            transform: translateY(-1px);
        }
        .user-profile-creator-card.creators-directory-card:hover,
        .user-profile-creator-card.creators-directory-card:focus-visible {
            background: #111827;
            border-color: transparent;
            box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
            outline: none;
            transform: translateY(-1px);
        }
        .user-profile-creator-card.creators-directory-card:hover .creators-directory-image,
        .user-profile-creator-card.creators-directory-card:focus-visible .creators-directory-image {
            transform: scale(1.035);
        }
        .user-profile-creator-card-media {
            display: block;
        }
        .user-profile-creator-image-fallback {
            background:
                linear-gradient(135deg, rgba(29, 155, 240, 0.28), rgba(244, 114, 182, 0.22) 52%, rgba(15, 23, 42, 0.94)),
                #111827;
        }
        .user-profile-creator-card-shade {
            background:
                linear-gradient(180deg, rgba(3, 7, 18, 0.03) 0%, rgba(3, 7, 18, 0.20) 34%, rgba(3, 7, 18, 0.91) 100%),
                linear-gradient(90deg, rgba(3, 7, 18, 0.40), transparent 58%);
        }
        .user-profile-creator-card .creators-directory-card-source {
            color: #fbcfe8;
            font-size: 0.62rem;
            font-weight: 850;
            line-height: 1;
        }
        .user-profile-creator-verified-badge {
            position: static;
            width: 18px;
            height: 18px;
            flex: 0 0 18px;
            margin-top: 0;
            font-size: 0.54rem;
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.16) inset,
                0 0 12px rgba(29, 155, 240, 0.30),
                0 6px 14px rgba(0, 0, 0, 0.28);
        }
        .user-profile-creator-card-copy.creators-directory-card-copy {
            gap: 6px;
            padding: 12px;
        }
        .user-profile-creator-name-row {
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            max-width: 100%;
        }
        .user-profile-creator-name.creators-directory-name {
            display: block;
            flex: 0 1 auto;
            min-width: 0;
            max-width: calc(100% - 24px);
            font-size: 1.08rem;
            line-height: 1.16;
            text-decoration: none;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .user-profile-creator-stat-strip.creators-directory-stat-strip {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 4px;
        }
        .user-profile-creator-stat-strip.creators-directory-stat-strip span {
            padding: 5px 4px;
        }
        .user-profile-creator-stat-strip.creators-directory-stat-strip strong {
            font-size: 0.72rem;
        }
        .user-profile-creator-stat-strip.creators-directory-stat-strip em {
            font-size: 0.48rem;
        }
        .user-profile-creator-avatar {
            position: relative;
            display: grid;
            place-items: center;
            width: 5.4rem;
            height: 5.4rem;
            border: 1px solid color-mix(in srgb, #55c7a6 40%, var(--border-default) 60%);
            border-radius: 8px;
            background: color-mix(in srgb, #18181b 72%, #55c7a6 28%);
            color: var(--text-primary);
            overflow: hidden;
            font-size: 1.55rem;
            font-weight: 900;
            line-height: 1;
        }
        .user-profile-creator-avatar img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }
        .user-profile-creator-avatar b {
            color: inherit;
            font: inherit;
        }
        .user-profile-creator-main {
            min-width: 0;
            display: grid;
            gap: 0.26rem;
        }
        .user-profile-creator-topline {
            display: inline-flex;
            align-items: center;
            gap: 0.34rem;
            min-width: 0;
        }
        .user-profile-creator-source {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            max-width: 100%;
            min-height: 1.12rem;
            padding: 0 0.38rem;
            border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, var(--border-subtle) 72%);
            border-radius: 999px;
            background: color-mix(in srgb, var(--accent-primary) 10%, #18181b 90%);
            color: color-mix(in srgb, var(--text-primary) 78%, var(--accent-primary) 22%);
            font-size: 0.58rem;
            font-weight: 900;
            line-height: 1;
            text-transform: uppercase;
        }
        .creator-profile-identity-verified-icon--profile-card {
            width: 17px;
            height: 17px;
            flex: 0 0 17px;
            font-size: 0.52rem;
            box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.22);
        }
        .user-profile-creator-card strong {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .user-profile-creator-title {
            display: -webkit-box;
            min-width: 0;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            color: var(--text-muted);
            font-size: 0.74rem;
            font-weight: 720;
            line-height: 1.25;
        }
        .user-profile-creator-metrics {
            display: flex;
            flex-wrap: wrap;
            gap: 0.28rem;
            min-width: 0;
            margin-top: 0.04rem;
        }
        .user-profile-creator-metrics span {
            display: inline-flex;
            align-items: center;
            min-height: 1.1rem;
            padding: 0 0.34rem;
            border-radius: 999px;
            background: color-mix(in srgb, #18181b 80%, var(--text-primary) 8%);
            color: var(--text-muted);
            font-size: 0.6rem;
            font-weight: 820;
            line-height: 1;
        }
        .circle-member-avatar,
        .circle-activity-row > span,
        .user-profile-avatar {
            display: grid;
            place-items: center;
            width: 2.12rem;
            height: 2.12rem;
            border: 1px solid color-mix(in srgb, #55c7a6 45%, var(--border-default) 55%);
            border-radius: 8px;
            background: color-mix(in srgb, var(--bg-elevated) 84%, #55c7a6 16%);
            color: var(--text-primary);
            flex: 0 0 auto;
            font-size: 0.82rem;
            font-weight: 900;
            overflow: hidden;
        }
        .circle-member-avatar img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .circle-member-main small {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.18rem;
        }
        .circle-member-label,
        .circle-member-flag {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 1.02rem;
            border-radius: 3px;
            background: color-mix(in srgb, var(--bg-surface) 82%, white 7%);
            color: var(--text-muted);
            font-size: 0.56rem;
            font-weight: 900;
            letter-spacing: 0;
            line-height: 1;
            padding: 0 0.3rem;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .circle-member-label--creator {
            background: color-mix(in srgb, var(--brand-hot-pink) 30%, var(--bg-elevated) 70%);
            color: color-mix(in srgb, #ffd6eb 78%, var(--text-primary) 22%);
        }
        .circle-member-label--role {
            background: color-mix(in srgb, #111827 74%, #55c7a6 18%);
            color: color-mix(in srgb, #d6f7ee 72%, var(--text-muted) 28%);
        }
        .circle-member-side {
            display: grid;
            align-content: start;
            justify-items: end;
            gap: 0.26rem;
            min-width: max-content;
        }
        .circle-member-flags {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.18rem;
            line-height: 1;
        }
        .circle-member-flag--owner {
            background: color-mix(in srgb, #facc15 30%, var(--bg-elevated) 70%);
            color: color-mix(in srgb, #fef3c7 82%, var(--text-primary) 18%);
        }
        .circle-member-flag--you {
            background: color-mix(in srgb, #55c7a6 28%, var(--bg-elevated) 72%);
            color: color-mix(in srgb, #d9fff4 82%, var(--text-primary) 18%);
        }
        .circle-member-controls {
            flex: 0 0 auto;
        }
        .circle-member-status-pill {
            display: inline-flex;
            align-items: center;
            min-height: 1.72rem;
            border: 1px solid color-mix(in srgb, #fb7185 36%, var(--border-subtle) 64%);
            border-radius: 999px;
            background: color-mix(in srgb, var(--bg-surface) 82%, #fb7185 12%);
            color: color-mix(in srgb, #fecdd3 76%, var(--text-primary) 24%);
            font-size: 0.64rem;
            font-weight: 900;
            line-height: 1;
            padding: 0 0.52rem;
        }
        .circle-member-controls select {
            width: 6.8rem;
            min-height: 1.95rem;
            font-size: 0.72rem;
            padding: 0 0.45rem;
        }
        .circle-member-controls button {
            min-height: 1.95rem;
            font-size: 0.72rem;
            padding: 0 0.55rem;
        }
        .user-profile-avatar {
            width: 4.2rem;
            height: 4.2rem;
            font-size: 1.45rem;
            overflow: hidden;
        }
        .user-profile-avatar img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .user-profile-overview-card {
            display: grid;
            grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.7fr);
            align-items: center;
            gap: 1rem;
            min-width: 0;
            margin: 0 0 0.9rem;
            padding: 1.05rem 1.2rem;
        }
        .user-profile-overview-primary {
            display: grid;
            gap: 0.32rem;
            min-width: 0;
        }
        .user-profile-overview-primary span {
            color: var(--text-muted);
            font-size: 0.78rem;
            font-weight: 850;
            letter-spacing: 0;
            line-height: 1;
            text-transform: uppercase;
        }
        .user-profile-overview-primary strong {
            color: var(--text-primary);
            font-size: clamp(1.55rem, 3vw, 2.25rem);
            font-weight: 900;
            line-height: 1;
            overflow-wrap: anywhere;
        }
        .user-profile-overview-primary em {
            color: var(--text-muted);
            font-size: 0.78rem;
            font-style: normal;
            font-weight: 720;
            line-height: 1.25;
        }
        .user-profile-stats {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0.65rem;
            margin-bottom: 0.9rem;
        }
        .user-profile-header-stats {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            justify-content: stretch;
            gap: 0.7rem;
            margin: 0;
            width: 100%;
        }
        .user-profile-overview-card .user-profile-stats {
            margin-bottom: 0;
        }
        .user-profile-stats > div {
            display: grid;
            gap: 0.2rem;
            min-height: 4.2rem;
            padding: 0.65rem 0.75rem;
        }
        .user-profile-stats span {
            color: var(--text-muted);
            font-size: 0.72rem;
            font-weight: 800;
            line-height: 1.15;
            overflow-wrap: anywhere;
        }
        .user-profile-stats strong {
            color: var(--text-primary);
            font-size: 1.3rem;
            font-weight: 900;
            line-height: 1;
        }
        .user-profile-header-stats > div {
            display: grid;
            align-items: center;
            gap: 0.18rem;
            min-height: 4rem;
            padding: 0.7rem 0.85rem;
            border-radius: 8px;
            background: color-mix(in srgb, var(--bg-elevated) 82%, var(--bg-surface) 18%);
        }
        .user-profile-header-stats span {
            font-size: 0.72rem;
            font-weight: 850;
            line-height: 1.05;
            text-transform: uppercase;
        }
        .user-profile-header-stats strong {
            font-size: 1.42rem;
            line-height: 1;
        }
        .circles-card-grid-compact {
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 14.5rem));
            justify-content: start;
            align-items: start;
            gap: 0.55rem;
        }
        .circle-card-compact {
            min-height: 11.8rem;
        }
        .user-circles-page {
            display: grid;
            gap: 0.8rem;
        }
        .user-circles-panel-heading > div {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.5rem;
        }
        .user-circles-create-link,
        .circle-create-page-form button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            min-height: 2.2rem;
            border: 1px solid color-mix(in srgb, #55c7a6 45%, var(--border-default) 55%);
            border-radius: 8px;
            background: color-mix(in srgb, var(--bg-elevated) 82%, #55c7a6 18%);
            color: var(--text-primary);
            cursor: pointer;
            font-size: 0.82rem;
            font-weight: 850;
            line-height: 1;
            padding: 0 0.85rem;
            text-decoration: none;
            transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
            white-space: nowrap;
        }
        .user-circles-create-link:hover,
        .circle-create-page-form button:hover {
            background: color-mix(in srgb, var(--bg-hover) 76%, #55c7a6 24%);
            transform: translateY(-1px);
        }
        .circle-create-page-form button:disabled {
            cursor: wait;
            opacity: 0.72;
            transform: none;
        }
        .user-circles-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 0.9rem;
            align-items: start;
        }
        .user-circles-admin-panel {
            display: grid;
            gap: 0.5rem;
            padding: 0.72rem;
        }
        .user-circles-admin-list {
            display: grid;
            gap: 0.34rem;
            min-width: 0;
        }
        .user-circle-admin-row {
            display: grid;
            grid-template-columns: minmax(260px, 1fr) minmax(7.5rem, auto) auto;
            align-items: center;
            gap: 0.65rem;
            min-width: 0;
            min-height: 3.45rem;
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: color-mix(in srgb, var(--bg-elevated) 88%, var(--bg-surface) 12%);
            padding: 0.42rem 0.5rem;
        }
        .user-circle-admin-main {
            display: grid;
            grid-template-columns: 2.35rem minmax(0, 1fr);
            align-items: center;
            gap: 0.58rem;
            min-width: 0;
            color: inherit;
            text-decoration: none;
        }
        .user-circle-admin-avatar {
            display: grid;
            place-items: center;
            width: 2.35rem;
            height: 2.35rem;
            overflow: hidden;
            border: 1px solid color-mix(in srgb, #55c7a6 40%, var(--border-default) 60%);
            border-radius: 7px;
            background: color-mix(in srgb, var(--bg-elevated) 82%, #55c7a6 18%);
            color: var(--text-primary);
            font-size: 0.68rem;
            font-weight: 900;
        }
        .user-circle-admin-avatar img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .user-circle-admin-copy {
            display: grid;
            gap: 0.2rem;
            min-width: 0;
        }
        .user-circle-admin-copy strong {
            min-width: 0;
            overflow: hidden;
            color: var(--text-primary);
            font-size: 0.9rem;
            font-weight: 900;
            line-height: 1.08;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .user-circle-admin-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.24rem;
            min-width: 0;
        }
        .user-circle-admin-meta span {
            display: inline-flex;
            align-items: center;
            min-height: 1.08rem;
            border-radius: 999px;
            background: color-mix(in srgb, var(--bg-surface) 82%, #55c7a6 10%);
            color: var(--text-muted);
            font-size: 0.58rem;
            font-weight: 850;
            line-height: 1;
            padding: 0 0.36rem;
            white-space: nowrap;
        }
        .user-circle-admin-copy small {
            min-width: 0;
            overflow: hidden;
            color: var(--text-muted);
            font-size: 0.68rem;
            font-weight: 700;
            line-height: 1.18;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .user-circle-admin-updated {
            color: var(--text-muted);
            font-size: 0.66rem;
            font-weight: 760;
            line-height: 1;
            text-align: right;
            white-space: nowrap;
        }
        .user-circle-admin-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.28rem;
            flex-wrap: wrap;
        }
        .user-circle-admin-actions a,
        .user-circle-admin-actions button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 1.82rem;
            border: 1px solid color-mix(in srgb, #55c7a6 36%, var(--border-default) 64%);
            border-radius: 7px;
            background: color-mix(in srgb, var(--bg-elevated) 84%, #55c7a6 12%);
            color: var(--text-primary);
            cursor: pointer;
            font: inherit;
            font-size: 0.68rem;
            font-weight: 850;
            line-height: 1;
            padding: 0 0.55rem;
            text-decoration: none;
            white-space: nowrap;
        }
        .user-profile-private-state {
            margin-top: 0;
        }
        .user-circle-create-page {
            display: grid;
            gap: 0.8rem;
        }
        .user-circle-create-panel {
            max-width: none;
        }
        .circle-create-page-form {
            position: relative;
            display: grid;
            gap: 0.62rem;
        }
        .circle-create-page-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
            gap: 0.68rem;
            align-items: start;
            min-width: 0;
        }
        .circle-create-page-core,
        .circle-create-media-column {
            display: grid;
            gap: 0.58rem;
            min-width: 0;
        }
        .circle-create-settings-grid {
            grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.76fr);
            padding: 0.62rem;
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: color-mix(in srgb, var(--bg-elevated) 86%, var(--bg-surface) 14%);
        }
        .circle-create-page-form label {
            display: grid;
            gap: 0.32rem;
            min-width: 0;
        }
        .circle-create-page-form label > span {
            color: var(--text-muted);
            font-size: 0.68rem;
            font-weight: 850;
            line-height: 1;
            text-transform: uppercase;
        }
        .circle-create-page-form input,
        .circle-create-page-form textarea,
        .circle-create-page-form select {
            width: 100%;
            min-height: 2.05rem;
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: var(--bg-elevated);
            color: var(--text-primary);
            font: inherit;
            font-size: 0.78rem;
            font-weight: 700;
            padding: 0 0.58rem;
        }
        .circle-create-page-form textarea {
            min-height: 4.25rem;
            padding-top: 0.52rem;
            resize: vertical;
        }
        .circle-create-page-form .circle-admin-choice-pill input,
        .circle-create-page-form .circle-create-approval-toggle input {
            width: auto;
            min-height: 0;
            padding: 0;
        }
        .circle-create-page-form .circle-admin-choice-pill {
            display: inline-flex;
            gap: 0;
        }
        .circle-create-access-group {
            display: grid;
            gap: 0.38rem;
        }
        .circle-create-access-list {
            padding-top: 0.28rem;
        }
        .circle-create-approval-toggle {
            display: flex;
            align-items: center;
            gap: 0.42rem;
            min-height: 1.72rem;
            margin-top: 0.1rem;
            padding: 0 0.12rem;
            color: var(--text-secondary);
            font-size: 0.68rem;
            font-weight: 820;
            line-height: 1.1;
        }
        .circle-create-approval-toggle input {
            accent-color: #55c7a6;
            flex: 0 0 auto;
        }
        .circle-create-approval-toggle input:disabled + span {
            color: var(--text-muted);
        }
        .circle-create-image-card {
            padding: 0.58rem;
        }
        .circle-create-image-card .circle-admin-image-preview--profile,
        .circle-create-image-card .circle-image-cropper-stage--profile {
            width: min(10.5rem, 100%);
        }
        .circle-create-page-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.55rem;
        }
        .circle-create-page-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.55rem;
            flex-wrap: wrap;
        }
        .circle-create-page-actions a {
            min-width: 5.5rem;
            background: var(--bg-elevated);
            color: var(--text-muted);
        }
        .circle-create-page-actions button {
            min-width: 8.8rem;
        }
        .user-profile-about-me p {
            margin: 0;
            color: var(--text-secondary);
            font-size: 0.9rem;
            font-weight: 650;
            line-height: 1.45;
            overflow-wrap: anywhere;
        }
        .user-profile-settings {
            display: grid;
            gap: 0.8rem;
        }
        .user-settings-form {
            margin-top: 0;
            position: relative;
            overflow: hidden;
        }
        .user-settings-heading {
            align-items: center;
        }
        .user-settings-tabs {
            display: inline-flex;
            width: fit-content;
            max-width: 100%;
            gap: 0.22rem;
            padding: 0.22rem;
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: color-mix(in srgb, var(--bg-elevated) 84%, var(--bg-surface) 16%);
        }
        .user-settings-tabs button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.42rem;
            min-height: 2.15rem;
            min-width: 7.2rem;
            border: 1px solid transparent;
            border-radius: 7px;
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            font: inherit;
            font-size: 0.78rem;
            font-weight: 850;
            line-height: 1;
            padding: 0 0.72rem;
        }
        .user-settings-tabs button.active {
            border-color: color-mix(in srgb, #55c7a6 42%, var(--border-default) 58%);
            background: color-mix(in srgb, var(--bg-surface) 76%, #55c7a6 24%);
            color: var(--text-primary);
        }
        .user-settings-tabs i {
            color: #95e7cb;
            font-size: 0.78rem;
        }
        .user-settings-save,
        .user-settings-inline-action,
        .user-settings-avatar-actions button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 2.15rem;
            border: 1px solid color-mix(in srgb, #55c7a6 45%, var(--border-default) 55%);
            border-radius: 8px;
            background: color-mix(in srgb, var(--bg-elevated) 82%, #55c7a6 18%);
            color: var(--text-primary);
            cursor: pointer;
            font: inherit;
            font-size: 0.78rem;
            font-weight: 850;
            line-height: 1;
            padding: 0 0.75rem;
        }
        .user-settings-save:disabled,
        .user-settings-avatar-actions button:disabled {
            cursor: not-allowed;
            opacity: 0.58;
        }
        .user-settings-account-panel,
        .user-settings-avatar-panel {
            display: grid;
            gap: 0.7rem;
            max-width: 860px;
        }
        .user-settings-avatar-section,
        .user-settings-fields {
            display: grid;
            gap: 0.7rem;
            min-width: 0;
        }
        .user-settings-avatar-section {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
        }
        .user-settings-avatar-drop {
            display: grid;
            place-items: center;
            gap: 0.42rem;
            min-height: 17rem;
            padding: 0.9rem;
            border: 1px dashed color-mix(in srgb, #55c7a6 48%, var(--border-default) 52%);
            border-radius: 8px;
            background: color-mix(in srgb, var(--bg-elevated) 84%, #55c7a6 10%);
            color: var(--text-muted);
            cursor: pointer;
            text-align: center;
            transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
        }
        .user-settings-avatar-drop:hover,
        .user-settings-avatar-drop.is-dragging {
            border-color: #95e7cb;
            background: color-mix(in srgb, var(--bg-elevated) 74%, #55c7a6 20%);
            transform: translateY(-1px);
        }
        .user-settings-avatar-drop.is-disabled {
            cursor: not-allowed;
            opacity: 0.62;
            transform: none;
        }
        .user-settings-avatar-drop strong {
            color: var(--text-primary);
            font-size: 0.94rem;
            font-weight: 900;
            line-height: 1.1;
        }
        .user-settings-avatar-drop span {
            max-width: 16rem;
            color: var(--text-muted);
            font-size: 0.76rem;
            font-weight: 720;
            line-height: 1.25;
        }
        .user-settings-avatar-preview {
            position: relative;
            display: grid;
            place-items: center;
            width: min(13rem, 74vw);
            aspect-ratio: 1;
            border: 1px solid color-mix(in srgb, #55c7a6 42%, var(--border-default) 58%);
            border-radius: 8px;
            background: color-mix(in srgb, #18181b 72%, #55c7a6 28%);
            color: var(--text-primary);
            overflow: hidden;
            font-size: 3rem;
            font-weight: 900;
            line-height: 1;
        }
        .user-settings-avatar-preview img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .user-settings-cropper-stage {
            display: block;
            width: min(32rem, 100%);
            height: clamp(18rem, 44vh, 28rem);
            border: 1px solid color-mix(in srgb, #55c7a6 42%, var(--border-default) 58%);
            border-radius: 8px;
            background: #111113;
            overscroll-behavior: contain;
            touch-action: none;
            overflow: hidden;
        }
        .user-settings-cropper-stage > img {
            display: block;
            max-width: 100%;
            opacity: 0;
        }
        .user-settings-cropper-stage cropper-canvas {
            display: block;
            width: 100%;
            height: 100%;
            background: #111113;
            touch-action: none;
        }
        .user-settings-cropper-stage cropper-image,
        .user-settings-cropper-stage cropper-selection {
            touch-action: none;
        }
        .user-settings-cropper-stage cropper-selection {
            --theme-color: rgba(149, 231, 203, 0.72);
        }
        .user-settings-cropper-stage.circle-image-cropper-stage {
            width: 100%;
            max-width: 40rem;
            height: auto;
            min-height: 0;
            aspect-ratio: 10 / 3;
        }
        .user-settings-cropper-stage.circle-image-cropper-stage--banner {
            aspect-ratio: 10 / 3;
        }
        .user-settings-cropper-stage.circle-image-cropper-stage--profile {
            width: min(18rem, 100%);
            aspect-ratio: 1;
        }
        .user-settings-fields label {
            display: grid;
            gap: 0.32rem;
            min-width: 0;
        }
        .user-settings-fields label > span {
            color: var(--text-muted);
            font-size: 0.68rem;
            font-weight: 850;
            line-height: 1;
            text-transform: uppercase;
        }
        .user-settings-fields input,
        .user-settings-fields textarea {
            width: 100%;
            min-height: 2.4rem;
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: var(--bg-elevated);
            color: var(--text-primary);
            font: inherit;
            font-size: 0.86rem;
            font-weight: 700;
            padding: 0 0.72rem;
        }
        .user-settings-password-input {
            -webkit-text-security: disc;
            text-security: disc;
        }
        .user-settings-fields textarea {
            min-height: 8.4rem;
            padding-top: 0.68rem;
            line-height: 1.35;
            resize: vertical;
        }
        .user-settings-fields input:disabled,
        .user-settings-fields textarea:disabled {
            cursor: not-allowed;
            opacity: 0.58;
        }
        .user-settings-password-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.6rem;
        }
        .user-settings-avatar-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.45rem;
            flex-wrap: wrap;
        }
        .user-settings-panel-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.45rem;
            flex-wrap: wrap;
            padding-top: 0.2rem;
        }
        .user-settings-note,
        .user-settings-error {
            color: var(--text-muted);
            font-size: 0.76rem;
            font-weight: 720;
            line-height: 1.3;
        }
        .user-settings-error {
            color: #fda4af;
        }
        .user-settings-avatar-blocker {
            position: absolute;
            inset: 0;
            z-index: 10;
            display: none;
            place-items: center;
            padding: 1rem;
            border-radius: inherit;
            background: rgba(12, 12, 14, 0.86);
            pointer-events: auto;
        }
        .user-settings-avatar-blocker.is-active,
        .user-settings-avatar-section.is-saving .user-settings-avatar-blocker {
            display: grid;
        }
        .user-settings-avatar-section.is-saving > :not(.user-settings-avatar-blocker) {
            pointer-events: none;
        }
        .user-settings-saving-overlay {
            position: absolute;
            inset: 0;
            z-index: 12;
            display: none;
            place-items: center;
            min-height: 100%;
            padding: 1.2rem;
            border-radius: inherit;
            background: rgba(12, 12, 14, 0.88);
            pointer-events: auto;
        }
        .user-settings-saving-overlay.is-active {
            display: grid;
        }
        .user-settings-saving-content {
            display: grid;
            place-items: center;
            gap: 0.58rem;
            max-width: 18rem;
            color: var(--text-primary);
            text-align: center;
        }
        .user-settings-saving-spinner {
            width: 3.2rem;
            height: 3.2rem;
            border: 3px solid color-mix(in srgb, #95e7cb 18%, transparent);
            border-top-color: #95e7cb;
            border-radius: 999px;
            animation: user-settings-saving-spin 0.82s linear infinite;
        }
        .user-settings-saving-content strong {
            font-size: 0.98rem;
            font-weight: 900;
            line-height: 1.15;
        }
        .user-settings-saving-content span {
            color: var(--text-muted);
            font-size: 0.78rem;
            font-weight: 740;
            line-height: 1.35;
        }
        @keyframes user-settings-saving-spin {
            to {
                transform: rotate(360deg);
            }
        }
        .user-profile-inline-link {
            color: inherit;
            font: inherit;
            font-weight: inherit;
            text-decoration-line: underline;
            text-decoration-style: dotted;
            text-decoration-color: color-mix(in srgb, var(--accent-primary) 68%, transparent);
            text-underline-offset: 0.16em;
        }
        .user-profile-inline-link:hover,
        .user-profile-inline-link:focus-visible {
            color: var(--accent-primary);
            text-decoration-style: solid;
        }
        .taxonomy-discussion-author-link,
        .char-community-pulse-author-link,
        .circle-activity-author-link {
            color: inherit;
            font-weight: 850;
        }
        @media (max-width: 1080px) {
            .user-profile-header-main {
                grid-template-columns: minmax(0, 1fr) auto;
            }
            .user-profile-actions {
                margin-left: auto;
                width: auto;
                justify-items: end;
            }
            .user-profile-header-stats {
                width: 100%;
            }
        }
        @media (max-width: 760px) {
            .circles-page-shell,
            .user-profile-page {
                width: min(100% - 1rem, 720px);
                margin-top: -0.9375rem;
                padding: 0.25rem 0 0.65rem;
            }
            .user-profile-shell {
                display: block;
            }
            .user-profile-sidebar {
                display: none;
            }
            .user-profile-mobile-rail {
                position: sticky;
                top: 0;
                z-index: 60;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: 5px;
                min-height: 42px;
                margin: 0 -0.5rem 0.55rem;
                padding: 3px 8px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.10);
                background: rgba(5, 6, 10, 0.96);
                overflow-x: auto;
                scrollbar-width: none;
            }
            .user-profile-mobile-rail::-webkit-scrollbar {
                display: none;
            }
            .user-profile-mobile-action {
                display: grid;
                place-items: center;
                align-content: center;
                flex: 0 0 46px;
                gap: 2px;
                width: 46px;
                min-width: 46px;
                height: 36px;
                min-height: 36px;
                border: 1px solid rgba(255, 255, 255, 0.16);
                border-radius: 8px;
                background: rgba(255, 255, 255, 0.06);
                color: rgba(255, 255, 255, 0.78);
                font: inherit;
                line-height: 1;
                padding: 2px 3px;
                text-align: center;
                text-decoration: none;
            }
            .user-profile-mobile-action i {
                color: rgba(255, 255, 255, 0.9);
                font-size: 0.9rem;
                line-height: 1;
            }
            .user-profile-mobile-action span {
                display: block;
                max-width: 100%;
                overflow: hidden;
                font-size: 0.48rem;
                font-weight: 900;
                letter-spacing: 0;
                text-overflow: ellipsis;
                text-transform: uppercase;
                white-space: nowrap;
            }
            .user-profile-mobile-action.is-active {
                border-color: rgba(244, 114, 182, 0.74);
                background: linear-gradient(135deg, rgba(236, 72, 153, 0.94), rgba(244, 114, 182, 0.74));
                color: #160712;
                box-shadow: 0 8px 20px rgba(236, 72, 153, 0.18);
            }
            .user-profile-mobile-action.is-active i,
            .user-profile-mobile-action.is-active span {
                color: #160712;
            }
            .circles-page-header,
            .user-profile-header {
                align-items: center;
                gap: 0.5rem;
                padding-bottom: 0.7rem;
            }
            .user-profile-identity {
                gap: 0.55rem;
            }
            .user-profile-title,
            .user-profile-title > * {
                justify-items: start;
                justify-self: start;
                text-align: left;
                text-indent: 0;
            }
            .user-profile-title-eyebrow-row {
                width: 100%;
                justify-content: space-between;
            }
            .user-profile-title-settings {
                display: inline-flex;
            }
            .circles-page-header h1,
            .user-profile-title h1 {
                font-size: 1.45rem;
            }
            .circle-detail-actions,
            .user-profile-actions {
                margin-left: 0;
            }
            .user-profile-header-main {
                grid-template-columns: minmax(0, 1fr) minmax(10.5rem, 12.8rem);
                align-items: center;
            }
            .user-profile-actions {
                grid-template-columns: minmax(0, 1fr);
                width: 100%;
                justify-content: stretch;
                justify-items: stretch;
            }
            .user-profile-nav-slot {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                width: 100%;
                min-height: 0;
                justify-content: stretch;
            }
            .user-profile-section-menu {
                display: block;
            }
            .user-profile-section-menu[open] .user-profile-section-menu-backdrop {
                position: fixed;
                inset: 0;
                z-index: 121;
                display: block;
                background: rgba(0, 0, 0, 0.55);
            }
            .user-profile-tabs {
                display: none;
            }
            .user-profile-tabs a {
                min-width: 0;
                min-height: 2.15rem;
                padding: 0 0.5rem;
            }
            .circles-create-form > div,
            .circles-create-form > div:last-child,
            .circle-detail-layout,
            .user-profile-layout,
            .user-circles-layout,
            .circle-create-page-layout,
            .circle-create-settings-grid,
            .circle-create-page-grid,
            .user-settings-password-grid,
            .circle-admin-settings-grid,
            .circle-admin-select-grid,
            .circle-admin-media-grid,
            .circle-admin-invite-row {
                grid-template-columns: 1fr;
            }
            .circle-admin-tabs {
                width: 100%;
                max-width: 100%;
                gap: 1.05rem;
                overflow-x: auto;
                overflow-y: hidden;
                padding: 0 0.12rem 0.15rem;
                scrollbar-width: none;
                -webkit-overflow-scrolling: touch;
            }
            .circle-admin-tabs::-webkit-scrollbar {
                display: none;
            }
            .circle-admin-tabs button {
                flex: 0 0 auto;
                min-height: 2.05rem;
                font-size: 0.72rem;
                padding-bottom: 0.4rem;
            }
            .user-settings-tabs {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                width: 100%;
            }
            .user-settings-tabs button {
                min-width: 0;
                padding: 0 0.5rem;
            }
            .user-settings-avatar-drop {
                min-height: 13.5rem;
                padding: 0.7rem;
            }
            .user-settings-avatar-preview {
                width: min(10.8rem, 72vw);
            }
            .user-settings-cropper-stage {
                width: 100%;
                height: min(72vw, 20rem);
            }
            .user-settings-cropper-stage.circle-image-cropper-stage {
                height: auto;
                max-width: 100%;
            }
            .user-settings-cropper-stage.circle-image-cropper-stage--banner {
                aspect-ratio: 10 / 3;
            }
            .user-settings-cropper-stage.circle-image-cropper-stage--profile {
                width: min(18rem, 100%);
                aspect-ratio: 1;
            }
            .user-circles-panel-heading > div {
                gap: 0.35rem;
            }
            .user-circles-create-link {
                min-width: 0;
                min-height: 2rem;
                padding: 0 0.6rem;
            }
            .user-profile-overview-card {
                grid-template-columns: 1fr;
                gap: 0.58rem;
                margin-bottom: 0.55rem;
                padding: 0.65rem;
            }
            .user-profile-overview-primary {
                gap: 0.18rem;
            }
            .user-profile-overview-primary span {
                font-size: 0.64rem;
            }
            .user-profile-overview-primary strong {
                font-size: 1.3rem;
            }
            .user-profile-overview-primary em {
                font-size: 0.68rem;
            }
            .user-profile-stats {
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 0.45rem;
                margin-bottom: 0.55rem;
            }
            .user-profile-stats > div {
                min-height: 3.35rem;
                padding: 0.48rem 0.55rem;
            }
            .user-profile-stats span {
                font-size: 0.64rem;
                line-height: 1.1;
            }
            .user-profile-stats strong {
                font-size: 1.05rem;
            }
            .user-profile-header-stats {
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 0.35rem;
                margin-bottom: 0;
            }
            .user-profile-header-stats > div {
                min-height: 3.2rem;
                padding: 0.4rem 0.42rem;
            }
            .user-profile-header-stats span {
                font-size: 0.56rem;
                overflow-wrap: anywhere;
            }
            .user-profile-header-stats strong {
                font-size: 0.82rem;
            }
            @media (max-width: 560px) {
                .user-profile-header-main {
                    grid-template-columns: 1fr;
                }
                .user-profile-actions {
                    order: -1;
                }
            }
            .circles-create-form button,
            .circle-detail-actions a,
            .circle-detail-actions button,
            .user-profile-actions a,
            .user-profile-actions button,
            .circle-create-page-actions a,
            .circle-create-page-actions button {
                min-width: 0;
            }
            .circles-card-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.45rem;
            }
            .user-circle-admin-row {
                grid-template-columns: minmax(0, 1fr);
                align-items: start;
                gap: 0.42rem;
            }
            .user-circle-admin-updated {
                text-align: left;
            }
            .user-circle-admin-actions {
                justify-content: flex-start;
            }
            .user-circle-admin-copy small {
                white-space: normal;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
            .circle-card {
                min-height: 12.2rem;
                padding: 0;
            }
            .circle-card-visual {
                height: 6.4rem;
            }
            .circle-card-visual .circle-default-avatar {
                left: 0.55rem;
                bottom: -1.75rem;
                width: 3.55rem;
                height: 3.55rem;
                border-radius: 9px;
            }
            .circle-card-body {
                padding: 2.15rem 0.56rem 0.62rem;
            }
            .circle-card-head {
                gap: 0.42rem;
            }
            .circle-card strong,
            .circle-member-row strong,
            .circle-activity-row strong,
            .user-profile-claim strong {
                font-size: 0.82rem;
            }
            .circle-card span,
            .circle-member-row small,
            .circle-activity-row small,
            .user-profile-claim span {
                font-size: 0.64rem;
            }
            .circle-card p {
                display: -webkit-box;
                margin-top: 0.35rem;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                font-size: 0.68rem;
                line-height: 1.25;
            }
            .circle-detail-hero {
                border-radius: 8px;
                min-height: 10.6rem;
            }
            .circle-detail-visual {
                height: 100%;
            }
            .circle-detail-visual .circle-default-avatar {
                left: 0.72rem;
                top: 50%;
                bottom: auto;
                width: 4.2rem;
                height: 4.2rem;
                border-radius: 11px;
                transform: translateY(-50%);
            }
            .circle-detail-hero-content {
                grid-template-columns: 1fr;
                gap: 0.5rem;
                padding: 0.76rem 0.72rem 0.76rem 5.45rem;
            }
            .circle-detail-title-block h1 {
                font-size: 1.45rem;
            }
            .circle-detail-title-block em {
                font-size: 0.74rem;
                -webkit-line-clamp: 2;
            }
            .circle-detail-stat-strip {
                gap: 0.28rem;
            }
            .circle-detail-stat-strip span {
                min-width: 4.1rem;
                min-height: 2.08rem;
                padding: 0.28rem 0.38rem;
            }
            .circle-detail-stat-strip strong {
                font-size: 0.72rem;
            }
            .circle-detail-stat-strip small {
                font-size: 0.5rem;
            }
            .circle-admin-link {
                justify-self: start;
                min-height: 1.7rem;
                font-size: 0.66rem;
                padding: 0 0.55rem;
            }
            .circle-admin-page-head h1 {
                font-size: 1.42rem;
            }
            .circle-detail-hero .circle-detail-actions {
                justify-content: flex-start;
            }
            .circle-detail-layout--hub,
            .circle-detail-layout--two {
                grid-template-columns: 1fr;
            }
            .circle-profile-shell {
                position: fixed;
                inset: 0;
                z-index: 15000;
                width: 100vw;
                height: 100dvh;
                min-height: 100dvh;
                display: block;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background: #05060a;
            }
            .circle-profile-sidebar {
                display: none;
            }
            .circle-profile-main {
                height: 100%;
                width: 100%;
                padding-top: calc(100px + env(safe-area-inset-top));
                box-sizing: border-box;
            }
            .circle-profile-stage {
                height: 100%;
                min-height: 0;
                border-radius: 0;
                border: 0;
                border-inline: 0;
                background:
                    linear-gradient(180deg, rgba(8, 10, 15, 0.66), rgba(8, 10, 15, 0.76)),
                    rgba(8, 10, 15, 0.72);
                box-shadow: none;
            }
            .circle-profile-bg,
            .circle-profile-bg-image,
            .circle-profile-bg-gradient,
            .circle-profile-bg-effect,
            .circle-profile-bg-sheen {
                border-radius: 0;
            }
            .circle-profile-content {
                min-height: 100%;
                gap: 0;
            }
            body.user-profile-view-active #viewUserProfile .circle-profile-content.user-profile-content {
                box-sizing: border-box;
                padding: 0 8px 18px;
            }
            body.user-profile-view-active #viewUserProfile .user-profile-surface-settings .circle-profile-content.user-profile-content {
                padding-inline: 12px;
            }
            body.user-profile-view-active #viewUserProfile .user-profile-surface-settings .user-profile-settings {
                max-width: 100%;
            }
            body.user-profile-view-active #viewUserProfile .user-profile-surface-settings .user-settings-form {
                margin-top: 8px;
            }
            .circle-profile-toolbar {
                display: none;
            }
            .circle-profile-mobile-modal-head {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 15020;
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                align-items: center;
                min-height: calc(48px + env(safe-area-inset-top));
                padding: calc(4px + env(safe-area-inset-top)) 8px 4px 12px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.10);
                background: #05060a;
            }
            .circle-profile-mobile-identity {
                display: inline-flex;
                align-items: center;
                gap: 9px;
                min-width: 0;
            }
            .circle-profile-mobile-avatar {
                display: grid;
                place-items: center;
                width: 34px;
                height: 34px;
                flex: 0 0 34px;
                overflow: hidden;
                border: 1px solid rgba(255, 255, 255, 0.16);
                border-radius: 999px;
                background: rgba(255, 255, 255, 0.07);
                color: #fff;
                font-size: 0.68rem;
                font-weight: 900;
            }
            .circle-profile-mobile-avatar img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .circle-profile-mobile-avatar .creator-profile-modal-avatar-placeholder-inner {
                font-size: 0.68rem;
                font-weight: 900;
            }
            .circle-profile-mobile-close {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 42px;
                height: 42px;
                flex: 0 0 42px;
                border: 0;
                border-radius: 0;
                background: transparent;
                color: rgba(255, 255, 255, 0.9);
                font-size: 2.35rem;
                font-weight: 500;
                line-height: 0.82;
                text-decoration: none;
                transform: translateX(7px);
            }
            .circle-profile-mobile-title {
                display: grid;
                justify-items: start;
                min-width: 0;
                line-height: 1;
            }
            .circle-profile-mobile-title span {
                color: rgba(255, 255, 255, 0.54);
                font-size: 0.58rem;
                font-weight: 850;
                text-transform: uppercase;
            }
            .circle-profile-mobile-title strong {
                max-width: 68vw;
                overflow: hidden;
                color: #fff;
                font-size: clamp(1.05rem, 4.6vw, 1.42rem);
                font-weight: 850;
                line-height: 1;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .circle-profile-mobile-rail {
                position: fixed;
                top: calc(56px + env(safe-area-inset-top));
                left: 0;
                right: 0;
                z-index: 15015;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: 16px;
                box-sizing: border-box;
                min-height: 40px;
                overflow-x: auto;
                overflow-y: hidden;
                padding: 2px 46px 4px 12px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.10);
                background: rgba(5, 6, 10, 0.96);
                scrollbar-width: none;
                -webkit-overflow-scrolling: touch;
            }
            .circle-profile-mobile-rail::-webkit-scrollbar {
                display: none;
            }
            .circle-profile-mobile-action {
                position: relative;
                display: inline-flex;
                flex: 0 0 auto;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                gap: 6px;
                min-width: 0;
                height: 32px;
                min-height: 32px;
                border: 0;
                border-radius: 0;
                background: transparent;
                color: rgba(255, 255, 255, 0.64);
                cursor: pointer;
                font: inherit;
                line-height: 1;
                padding: 1px 2px 4px;
                text-align: center;
                text-decoration: none;
            }
            .circle-profile-mobile-action::after {
                content: "";
                position: absolute;
                right: 0;
                bottom: 2px;
                left: 0;
                height: 2px;
                border-radius: 999px;
                background: transparent;
            }
            .circle-profile-mobile-action i {
                color: currentColor;
                font-size: 0.94rem;
                line-height: 1;
            }
            .circle-profile-mobile-action span {
                display: block;
                max-width: 8.8rem;
                overflow: hidden;
                font-size: 0.7rem;
                font-weight: 900;
                letter-spacing: 0;
                line-height: 1;
                text-align: center;
                text-overflow: ellipsis;
                text-transform: uppercase;
                white-space: nowrap;
            }
            .circle-profile-mobile-action--post {
                position: absolute;
                top: 6px;
                right: 8px;
                z-index: 1;
                display: grid;
                place-items: center;
                flex: 0 0 28px;
                width: 28px;
                min-width: 28px;
                height: 28px;
                min-height: 28px;
                margin-left: auto;
                border-bottom-color: transparent;
                border-radius: 8px;
                background: rgba(244, 114, 182, 0.14);
                color: color-mix(in srgb, var(--brand-hot-pink) 78%, white 22%);
                box-shadow: none;
                padding: 0;
            }
            .circle-profile-mobile-action--post::after {
                display: none;
            }
            .circle-profile-mobile-action--post i {
                color: color-mix(in srgb, var(--brand-hot-pink) 78%, white 22%);
                font-size: 0.88rem;
                font-weight: 900;
                line-height: 1;
                transform: translateY(0);
            }
            .circle-profile-mobile-action--post span {
                display: none;
            }
            .circle-profile-mobile-action--more {
                order: -20;
                justify-content: center;
                gap: 0;
                width: 32px;
                min-width: 32px;
                margin-right: 0;
            }
            .circle-profile-mobile-action--more i {
                font-size: 1.05rem;
            }
            .circle-profile-mobile-action--more span {
                position: absolute;
                width: 1px;
                height: 1px;
                overflow: hidden;
                clip: rect(0 0 0 0);
                clip-path: inset(50%);
                white-space: nowrap;
            }
            .circle-profile-mobile-action--more.is-open {
                color: color-mix(in srgb, var(--brand-hot-pink) 72%, white 28%);
            }
            .circle-profile-mobile-action--more.is-open::after {
                background: rgba(244, 114, 182, 0.78);
            }
            .circle-profile-mobile-action--settings {
                justify-content: center;
                gap: 0;
                width: 32px;
                min-width: 32px;
                flex-basis: 32px;
                margin-left: auto;
                padding-right: 0;
                padding-left: 0;
            }
            .circle-profile-mobile-action--settings i {
                font-size: 1.05rem;
            }
            .circle-profile-mobile-action--settings span {
                position: absolute;
                width: 1px;
                height: 1px;
                overflow: hidden;
                clip: rect(0 0 0 0);
                clip-path: inset(50%);
                white-space: nowrap;
            }
            .circle-profile-mobile-action.is-active {
                background: transparent;
                color: color-mix(in srgb, var(--brand-hot-pink) 78%, white 22%);
                box-shadow: none;
            }
            .circle-profile-mobile-action.is-active::after {
                background: var(--brand-hot-pink);
            }
            .circle-profile-mobile-action.is-active i,
            .circle-profile-mobile-action.is-active span {
                color: color-mix(in srgb, var(--brand-hot-pink) 78%, white 22%);
            }
            .circle-profile-mobile-aside-scrim {
                position: fixed;
                inset: 0;
                z-index: 15016;
                border: 0;
                background: rgba(0, 0, 0, 0);
                padding: 0;
                pointer-events: none;
                transition: background 300ms ease;
            }
            .circle-profile-mobile-aside-scrim.is-open {
                background:
                    radial-gradient(circle at 50% 42%, rgba(45, 212, 191, 0.08), transparent 18rem),
                    rgba(0, 0, 0, 0.72);
                pointer-events: auto;
            }
            .circle-profile-mobile-aside {
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 15017;
                display: flex;
                flex-direction: column;
                height: min(92dvh, calc(100dvh - 44px));
                max-height: min(92dvh, calc(100dvh - 44px));
                overflow: hidden;
                border: 1px solid rgba(255, 255, 255, 0.14);
                border-bottom: 0;
                border-radius: 12px 12px 0 0;
                background: var(--bg-elevated, #111114);
                box-shadow: 0 18px 48px rgba(0, 0, 0, 0.46);
                transform: translateY(100%);
                transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1);
            }
            .circle-profile-mobile-aside.is-open {
                transform: translateY(0);
            }
            .circle-profile-mobile-aside[hidden],
            .circle-profile-mobile-aside-scrim[hidden] {
                display: none;
            }
            .circle-profile-mobile-aside-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.10);
                padding: 10px 12px;
            }
            .circle-profile-mobile-aside-head h2 {
                margin: 0;
                color: #fff;
                font-size: 0.86rem;
                font-weight: 920;
                line-height: 1;
                text-transform: uppercase;
            }
            .circle-profile-mobile-aside-head span {
                display: block;
                margin-top: 3px;
                color: rgba(255, 255, 255, 0.52);
                font-size: 0.64rem;
                font-weight: 850;
                line-height: 1;
            }
            .circle-profile-mobile-aside-head button {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 34px;
                height: 34px;
                border: 0;
                background: transparent;
                color: rgba(255, 255, 255, 0.86);
                font-size: 1.7rem;
                line-height: 1;
            }
            .circle-profile-mobile-aside-body {
                display: grid;
                gap: 12px;
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
                padding: 10px 12px 12px;
                -webkit-overflow-scrolling: touch;
            }
            body.circle-profile-mobile-aside-open {
                overflow: visible !important;
            }
            .circle-profile-mobile-menu-panel {
                display: grid;
                gap: 10px;
                min-height: 0;
            }
            .circle-profile-mobile-aside .circle-profile-sidebar-activity {
                display: grid;
                min-height: auto;
                max-height: none;
                overflow: visible;
                border-top: 0;
                padding-top: 0;
            }
            .circle-profile-mobile-aside .circle-profile-sidebar-activity .circle-activity-list,
            .circle-profile-mobile-aside .circle-sidebar-circle-list {
                max-height: none;
                overflow: visible;
            }
            .circle-profile-mobile-aside .system-wall-buzz-rail {
                display: grid;
                width: 100%;
                max-height: none;
                border-radius: 8px;
            }
            .circle-profile-stage .circle-detail-hero {
                display: grid;
                grid-template-columns: 74px minmax(0, 1fr);
                grid-template-areas:
                    "avatar copy"
                    "stats stats";
                align-items: start;
                gap: 7px 9px;
                min-height: 0;
                padding: 10px 10px 8px;
                overflow: hidden;
                border-bottom: 0;
                background: #05060a;
            }
            .circle-profile-mobile-meta {
                position: absolute;
                top: 7px;
                right: 10px;
                z-index: 3;
                display: inline-flex;
                align-items: center;
                justify-content: flex-end;
                max-width: calc(100% - 96px);
                color: rgba(255, 255, 255, 0.82);
                font-size: 0.78rem;
                font-weight: 900;
                letter-spacing: 0.02em;
                line-height: 1;
                text-align: right;
                text-transform: uppercase;
            }
            .circle-profile-page-avatar {
                grid-area: avatar;
                width: 74px;
                height: 74px;
                aspect-ratio: 1;
                align-self: start;
                border: 1px solid rgba(255, 255, 255, 0.18);
                border-radius: 12px;
                background:
                    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.10), transparent 9rem),
                    rgba(255, 255, 255, 0.05);
                box-shadow: 0 10px 24px rgba(0, 0, 0, 0.30);
            }
            .circle-profile-page-avatar img {
                object-fit: cover;
                object-position: center;
            }
            .circle-profile-page-avatar .creator-profile-modal-avatar-placeholder-inner {
                font-size: 1.25rem;
            }
            .circle-profile-stage .circle-detail-hero-content {
                position: relative;
                z-index: 2;
                grid-area: copy;
                grid-template-columns: 1fr;
                gap: 5px;
                margin: 0;
                max-width: none;
                padding: 0;
                background: transparent;
                border-radius: 0;
            }
            .circle-profile-stage .circle-detail-title-block {
                gap: 5px;
            }
            .circle-profile-page-kicker {
                display: none;
            }
            .circle-profile-stage .circle-detail-title-block h1 {
                font-size: clamp(1.34rem, 6.4vw, 1.86rem);
                line-height: 1.02;
                max-width: 100%;
            }
            .circle-profile-stage .circle-detail-title-block em {
                font-size: 0.72rem;
                line-height: 1.34;
                color: rgba(255, 255, 255, 0.82);
                -webkit-line-clamp: 2;
            }
            .circle-profile-stage .circle-detail-stat-strip {
                grid-area: stats;
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 1px;
                width: 100%;
                max-width: 100%;
                overflow: hidden;
                border: 1px solid rgba(255, 255, 255, 0.13);
                border-radius: 10px;
                background: rgba(255, 255, 255, 0.08);
                margin-top: 1px;
                scrollbar-width: none;
            }
            .circle-profile-stage .circle-detail-stat-strip::-webkit-scrollbar {
                display: none;
            }
            .circle-profile-stage .circle-detail-stat-strip .circle-detail-stat,
            .circle-profile-stage .circle-detail-stat-strip .circle-detail-stat:first-child {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                align-content: center;
                align-items: start;
                justify-items: start;
                gap: 3px;
                min-width: 0;
                width: 100%;
                min-height: 43px;
                padding: 6px 7px;
                border: 0;
                border-left: 1px solid rgba(255, 255, 255, 0.10);
                background: rgba(5, 8, 14, 0.7);
            }
            .circle-profile-stage .circle-detail-stat-strip .circle-detail-stat:nth-child(3n + 1) {
                border-left: 0;
            }
            .circle-profile-stage .circle-detail-stat-strip .circle-detail-stat:nth-child(n + 4) {
                border-top: 1px solid rgba(255, 255, 255, 0.10);
            }
            .circle-profile-stage .circle-detail-stat-strip .circle-detail-stat > strong,
            .circle-profile-stage .circle-detail-stat-strip .circle-detail-stat > span {
                min-width: 0;
                min-height: 0;
                padding: 0;
                border: 0;
                background: transparent;
            }
            .circle-profile-stage .circle-detail-stat strong {
                max-width: 100%;
                font-size: 0.74rem;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .circle-profile-stage .circle-detail-stat span {
                font-size: 0.52rem;
                color: rgba(255, 255, 255, 0.62);
            }
            .circle-profile-stage .circle-admin-link {
                justify-self: start;
                min-height: 30px;
                padding: 0 9px;
                font-size: 0.68rem;
            }
            .circle-profile-activity {
                margin-inline: 8px;
                padding: 12px;
                border-radius: 10px;
            }
            .circle-profile-shell.circle-surface-wall .circle-detail-hero {
                display: none;
            }
            .circle-profile-shell.circle-surface-wall .circle-profile-content {
                min-height: 100%;
                background: #1a1a1c;
            }
            .circle-profile-shell.circle-surface-wall .circle-wall-surface {
                min-height: 100%;
                margin: 0;
                padding: 0 8px 18px;
                border: 0;
                border-radius: 0;
                background: #1a1a1c;
            }
            .circle-wall-surface-heading {
                display: none;
            }
            .circle-wall-surface-heading.system-wall-feed-heading {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                gap: 0.42rem;
                top: 0;
                z-index: 18;
                margin: 0 -8px;
                padding: 3px 8px 6px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.10);
                background: rgba(26, 26, 28, 0.96);
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }
            .system-wall-feed-heading > div:first-child {
                display: none;
            }
            .circle-wall-compose-surface .system-wall-feed-heading > div:first-child {
                display: grid;
            }
            .circle-wall-compose-surface .circle-wall-surface-heading.system-wall-feed-heading {
                margin-right: -14px;
                margin-left: -14px;
                padding-top: 6px;
                padding-right: 14px;
                padding-bottom: 8px;
                padding-left: 14px;
            }
            .circle-wall-compose-surface .system-wall-feed-heading h2 {
                font-size: 0.92rem;
            }
            .circle-profile-shell.circle-surface-wall .circle-wall-compose-surface {
                padding-right: 14px;
                padding-left: 14px;
            }
            .system-wall-heading-actions {
                justify-content: flex-end;
                width: auto;
                margin-left: auto;
            }
            .system-wall-controls {
                justify-content: flex-end;
            }
            .system-wall-controls {
                display: flex;
                width: auto;
                gap: 0.42rem;
            }
            .system-wall-read-filter {
                justify-content: flex-start;
                min-width: auto;
                min-height: 2.28rem;
            }
            .system-wall-read-btn {
                flex: 0 0 auto;
                min-width: auto;
                min-height: 1.86rem;
                padding-inline: 0.62rem;
                font-size: 0.76rem;
            }
            .system-wall-sort-menu summary {
                width: 42px;
                min-width: 42px;
                height: 38px;
                min-height: 38px;
                padding: 0;
            }
            .system-wall-sort-options {
                position: fixed;
                top: 7.35rem;
                right: max(0.75rem, env(safe-area-inset-right));
                left: max(0.75rem, env(safe-area-inset-left));
                z-index: 80;
                box-sizing: border-box;
                min-width: 0;
                max-width: calc(100vw - 1.5rem);
            }
            .system-wall-sort-options button {
                min-height: 2.35rem;
                font-size: 0.86rem;
                padding-inline: 0.82rem;
            }
            .system-wall-mobile-views {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: clamp(2.2rem, 15vw, 4.6rem);
                max-width: calc(100% - 54px);
                overflow-x: auto;
                padding: 0 0 0.1rem;
                scrollbar-width: none;
                -webkit-overflow-scrolling: touch;
            }
            .system-wall-mobile-views::-webkit-scrollbar {
                display: none;
            }
            .system-wall-mobile-views a {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                flex: 0 0 auto;
                min-width: 8.5rem;
                min-height: 2.28rem;
                border-bottom: 3px solid transparent;
                color: rgba(255, 255, 255, 0.62);
                font-size: 0.78rem;
                font-weight: 920;
                line-height: 1;
                padding: 0 0.35rem 0.58rem;
                text-align: center;
                text-decoration: none;
                text-transform: uppercase;
            }
            .system-wall-mobile-views a.is-active {
                border-bottom-color: #f472b6;
                color: #ffffff;
            }
            .system-wall-grid {
                grid-template-columns: minmax(0, 1fr);
                gap: 0.5rem;
                padding-right: 0;
            }
            .system-wall-grid > .system-wall-buzz-rail {
                display: none;
            }
            .system-wall-buzz-rail {
                position: static;
                top: auto;
                width: 100%;
                max-height: none;
            }
            .system-wall-section {
                border-radius: 8px;
                background: transparent;
                padding: 0;
            }
            .system-wall-live-card {
                grid-template-columns: 40px minmax(0, 1fr);
                gap: 0.54rem;
                padding: 0.52rem 0.56rem;
            }
            .system-wall-live-card.has-media {
                grid-template-columns: 40px minmax(0, 1fr);
            }
            .system-wall-live-card.has-media .system-wall-live-media {
                grid-column: 2;
                justify-self: stretch;
                width: 100%;
                height: 4.2rem;
                margin-top: 0.08rem;
            }
            .system-wall-event-card,
            .system-wall-event-card.has-media,
            .system-wall-event-card:not(.has-media) {
                grid-template-columns: 5.2rem minmax(0, 1fr);
            }
            .system-wall-event-visual {
                height: 4.3rem;
            }
            .system-wall-event-metrics {
                width: 100%;
                flex-wrap: wrap;
            }
            .system-wall-live-card::before {
                left: 1.26rem;
            }
            .system-wall-live-avatar {
                width: 36px;
                height: 36px;
                border-radius: 8px;
                font-size: 0.62rem;
            }
            .system-wall-live-banner {
                height: 28px;
            }
            .system-wall-live-date {
                margin-left: 0;
            }
            .system-wall-live-card strong {
                font-size: 0.9rem;
            }
            .system-wall-section-head {
                padding: 0 0.1rem;
            }
            .system-wall-section-head h3 {
                font-size: 0.72rem;
            }
            .system-wall-section-head span {
                display: none;
            }
            .circle-wall-post-list {
                gap: 0.42rem;
            }
            .circle-wall-post-card {
                grid-template-columns: 4px minmax(0, 1fr);
                gap: 0;
                border: 0;
                border-radius: 0;
                background: #202024;
                padding: 0;
            }
            .circle-wall-post-card.is-unread {
                background: #2c2617;
            }
            .circle-wall-post-body {
                gap: 0.32rem;
                padding: 0.62rem 0.68rem;
            }
            .circle-wall-post-header {
                grid-template-columns: minmax(0, 1fr) auto;
                gap: 0.48rem;
            }
            .circle-wall-post-meta-line {
                gap: 0.28rem;
            }
            .circle-wall-post-type,
            .circle-wall-post-pinned,
            .circle-wall-post-unread {
                min-height: 1.12rem;
                font-size: 0.68rem;
                padding: 0 0.32rem;
            }
            .circle-wall-post-author,
            .circle-wall-post-date {
                font-size: 0.76rem;
            }
            .circle-wall-post-title-row strong {
                font-size: 0.99rem;
                font-weight: 700;
            }
            .circle-wall-post-metrics {
                font-size: 0.78rem;
            }
            .circle-wall-post-metrics i {
                font-size: 0.92rem;
            }
            .circle-wall-post-body p {
                font-size: 0.87rem;
            }
            .circle-wall-buzz-card {
                grid-template-columns: 34px minmax(0, 1fr);
                gap: 0.6rem;
                padding: 0.62rem;
            }
            .circle-wall-buzz-card .circle-wall-post-body {
                padding: 0;
            }
            .circle-profile-mobile-section {
                justify-self: end;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 6px;
                min-height: 2rem;
                border: 1px solid rgba(255, 255, 255, 0.16);
                border-radius: 999px;
                background: rgba(255, 255, 255, 0.08);
                color: rgba(255, 255, 255, 0.75);
                font: inherit;
                font-size: 0.68rem;
                font-weight: 900;
                line-height: 1;
                padding: 0 0.82rem;
                text-transform: uppercase;
            }
            .circle-profile-mobile-section.is-active {
                border-color: rgba(244, 114, 182, 0.74);
                background: linear-gradient(135deg, rgba(236, 72, 153, 0.96), rgba(244, 114, 182, 0.76));
                color: #150711;
            }
            .circle-profile-mobile-section strong {
                font-weight: 950;
            }
            .circle-image-edit {
                min-height: 1.65rem;
                font-size: 0.62rem;
                padding: 0 0.44rem;
            }
            .circle-image-edit--banner {
                top: 0.48rem;
                right: 0.48rem;
            }
            .circle-image-edit--profile {
                left: 1.08rem;
                top: 3.94rem;
            }
            .circle-admin-form,
            .circle-admin-members-panel,
            .circle-admin-image-card {
                padding: 0.6rem;
            }
            .circle-admin-tabs {
                width: calc(100% - 16px);
                margin-inline: 8px;
            }
            .circle-admin-tabs button {
                flex: 1 1 0;
                min-width: 0;
                padding-inline: 0.45rem;
            }
            .circle-admin-actions,
            .circle-admin-image-actions,
            .circle-membership-actions,
            .circle-member-controls {
                justify-content: flex-start;
            }
            .circle-member-row {
                grid-template-columns: minmax(0, 1fr) auto;
                align-items: center;
                gap: 0.36rem;
                min-height: 2.62rem;
                padding: 0.36rem 0.44rem;
            }
            .circle-member-controls {
                width: auto;
                justify-content: flex-end;
                gap: 0.28rem;
            }
            .circle-member-row--admin {
                grid-template-columns: 1fr;
                align-items: flex-start;
            }
            .circle-member-row--admin .circle-member-controls {
                width: 100%;
                justify-content: flex-start;
            }
            .circle-member-main {
                gap: 0.44rem;
            }
            .circle-member-main > div {
                gap: 0.08rem;
            }
            .circle-member-avatar {
                width: 1.92rem;
                height: 1.92rem;
                border-radius: 7px;
                font-size: 0.74rem;
            }
            .circle-member-controls select {
                flex: 1 1 8rem;
            }
            .circle-member-row:not(.circle-member-row--admin) .circle-member-controls button {
                min-height: 1.62rem;
                padding: 0 0.42rem;
                font-size: 0.66rem;
            }
            .circle-member-label,
            .circle-member-flag {
                min-height: 0.94rem;
                padding: 0 0.26rem;
                font-size: 0.48rem;
            }
            .circle-assets-empty {
                min-height: 6.8rem;
            }
            .user-profile-page .circles-card-grid-compact,
            .user-profile-claims {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.42rem;
            }
            .user-profile-claims {
                grid-template-columns: repeat(2, minmax(0, min(166px, calc((100vw - 28px) / 2))));
                justify-content: space-between;
            }
            .user-profile-page .circle-card-compact {
                min-height: 10.8rem;
                padding: 0;
            }
            .user-profile-claim {
                align-items: flex-start;
                flex-direction: column;
                gap: 0.22rem;
                justify-content: center;
                min-height: 3.05rem;
                padding: 0.48rem 0.55rem;
            }
            .user-profile-creator-card {
                display: grid;
                grid-template-columns: 1fr;
                align-items: start;
                gap: 0.46rem;
                min-height: 0;
                padding: 0.54rem;
            }
            .user-profile-claims .user-profile-creator-card.creators-directory-card {
                width: 100%;
                min-width: 0;
                min-height: 0;
                padding: 0;
            }
            .user-profile-claims .user-profile-creator-card-copy.creators-directory-card-copy {
                gap: 5px;
                padding: 9px;
            }
            .user-profile-claims .user-profile-creator-name.creators-directory-name {
                font-size: 0.94rem;
                line-height: 1.14;
            }
            .user-profile-claims .user-profile-creator-verified-badge {
                width: 16px;
                height: 16px;
                flex-basis: 16px;
                font-size: 0.48rem;
            }
            .user-profile-claims .user-profile-creator-card .creators-directory-card-source {
                font-size: 0.56rem;
            }
            .user-profile-claims .user-profile-creator-stat-strip.creators-directory-stat-strip {
                gap: 4px;
            }
            .user-profile-claims .user-profile-creator-stat-strip.creators-directory-stat-strip span {
                padding: 4px 5px;
            }
            .user-profile-creator-avatar {
                width: 100%;
                height: auto;
                aspect-ratio: 1 / 1;
                border-radius: 8px;
            }
            .user-profile-creator-main {
                gap: 0.18rem;
            }
            .user-profile-creator-source {
                min-height: 1rem;
                padding: 0 0.3rem;
                font-size: 0.52rem;
            }
            .creator-profile-identity-verified-icon--profile-card {
                width: 14px;
                height: 14px;
                flex-basis: 14px;
                font-size: 0.42rem;
            }
            .user-profile-creator-card strong {
                font-size: 0.76rem;
            }
            .user-profile-creator-title {
                font-size: 0.62rem;
            }
            .user-profile-creator-metrics {
                gap: 0.2rem;
            }
            .user-profile-creator-metrics span {
                min-height: 0.95rem;
                padding: 0 0.26rem;
                font-size: 0.52rem;
            }
        }
        .credits-profile-page {
            width: min(1460px, calc(100% - 4rem));
            margin: -1.625rem auto 0;
            padding: 0.45rem 0 0.9rem;
        }
        .credits-profile-header {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.9rem;
            padding: 0.1rem 0 1.35rem;
        }
        .credits-profile-avatar {
            display: grid;
            place-items: center;
            width: 4.9rem;
            height: 4.9rem;
            border: 1px solid color-mix(in srgb, #f4c95d 50%, var(--border-default) 50%);
            border-radius: 8px;
            background: color-mix(in srgb, var(--bg-elevated) 84%, #55c7a6 16%);
            color: var(--text-primary);
            flex: 0 0 auto;
            font-size: 1.55rem;
            font-weight: 850;
            line-height: 1;
        }
        .credits-profile-identity {
            display: grid;
            gap: 0.16rem;
            min-width: 0;
        }
        .credits-profile-identity p,
        .credits-section-title-row p {
            margin: 0;
            color: var(--text-muted);
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0;
            line-height: 1.15;
            text-transform: uppercase;
        }
        .credits-profile-identity h1 {
            margin: 0;
            color: var(--text-primary);
            font-size: 2rem;
            font-weight: 850;
            letter-spacing: 0;
            line-height: 1.05;
            overflow-wrap: anywhere;
        }
        .credits-profile-identity span {
            color: var(--text-muted);
            font-size: 0.76rem;
            font-weight: 700;
            line-height: 1.25;
        }
        .credits-profile-actions {
            position: relative;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.5rem;
            flex: 0 0 auto;
            margin-left: auto;
        }
        .credits-page-refresh {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.55rem;
            border: 1px solid var(--border-default);
            border-radius: 8px;
            background: var(--bg-elevated);
            color: var(--text-primary);
            cursor: pointer;
            flex: 0 0 auto;
            font-size: 0.82rem;
            font-weight: 800;
            line-height: 1;
            padding: 0.68rem 0.9rem;
            transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
            white-space: nowrap;
        }
        .credits-page-refresh i {
            color: var(--text-muted);
            font-size: 0.72rem;
        }
        .credits-page-refresh:hover {
            background: var(--bg-hover);
            border-color: color-mix(in srgb, #f4c95d 45%, var(--border-default) 55%);
            transform: translateY(-1px);
        }
        .credits-profile-section {
            display: grid;
            gap: 0.62rem;
        }
        .credits-info-section {
            position: relative;
            flex: 0 0 auto;
            overflow: visible;
        }
        .credits-info-section--balance {
            display: none;
            grid-column: 1 / -1;
        }
        .credits-info-section summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            min-height: 2.45rem;
            padding: 0 0.78rem;
            border: 1px solid var(--border-default);
            border-radius: 8px;
            background: var(--bg-elevated);
            color: var(--text-primary);
            cursor: pointer;
            font-size: 0.78rem;
            font-weight: 850;
            line-height: 1;
            list-style: none;
            white-space: nowrap;
            transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
        }
        .credits-info-section summary:hover {
            background: var(--bg-hover);
            border-color: color-mix(in srgb, #f4c95d 45%, var(--border-default) 55%);
            transform: translateY(-1px);
        }
        .credits-info-section[open] summary {
            border-color: color-mix(in srgb, #f4c95d 52%, var(--border-default) 48%);
        }
        .credits-info-section summary::-webkit-details-marker {
            display: none;
        }
        .credits-info-section summary > span {
            display: inline-flex;
            align-items: center;
            gap: 0.46rem;
            min-width: 0;
        }
        .credits-info-section summary > span i {
            color: #f4c95d;
            font-size: 0.82rem;
        }
        .credits-info-label-short {
            display: none;
        }
        .credits-info-chevron {
            color: var(--text-muted);
            font-size: 0.7rem;
            transition: transform var(--transition-fast);
        }
        .credits-info-section[open] .credits-info-chevron {
            transform: rotate(180deg);
        }
        .credits-info-section.credits-info-section--balance summary {
            display: inline-flex;
            min-height: 0;
            min-width: 0;
            width: auto;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: #f4c95d;
            font-size: 0.68rem;
            font-weight: 850;
            line-height: 1.1;
            text-decoration-line: underline;
            text-decoration-style: dotted;
            text-decoration-thickness: 1px;
            text-underline-offset: 0.16em;
        }
        .credits-info-section.credits-info-section--balance summary:hover,
        .credits-info-section.credits-info-section--balance[open] summary {
            background: transparent;
            border-color: transparent;
            color: #ffd95f;
            transform: none;
        }
        .credits-info-body {
            position: absolute;
            top: calc(100% + 0.5rem);
            right: 0;
            z-index: 30;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.52rem;
            width: min(720px, calc(100vw - 2rem));
            padding: 0.72rem;
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: color-mix(in srgb, var(--bg-elevated) 94%, black 6%);
            box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
        }
        .credits-info-body--categories,
        .credits-info-body--guide {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            width: min(680px, calc(100vw - 2rem));
        }
        .credits-info-body > div {
            display: grid;
            gap: 0.28rem;
            min-width: 0;
            padding: 0.65rem 0.72rem;
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: color-mix(in srgb, #18181b 82%, #f4c95d 8%);
        }
        .credits-info-category {
            display: grid;
            gap: 0.48rem;
            min-width: 0;
            padding: 0.65rem 0.72rem;
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: color-mix(in srgb, #18181b 82%, #f4c95d 8%);
        }
        .credits-info-purpose {
            grid-column: 1 / -1;
            min-width: 0;
            padding: 0.72rem 0.78rem;
            border: 1px solid color-mix(in srgb, #f4c95d 32%, var(--border-subtle) 68%);
            border-radius: 8px;
            background: color-mix(in srgb, #18181b 76%, #f4c95d 12%);
        }
        .credits-info-earn-title {
            grid-column: 1 / -1;
            margin: 0.04rem 0 -0.18rem;
            color: var(--text-primary);
            font-size: 0.82rem;
            font-weight: 900;
            letter-spacing: 0;
            line-height: 1.1;
        }
        .credits-info-category h4 {
            margin: 0;
            color: #f4c95d;
            font-size: 0.68rem;
            font-weight: 950;
            letter-spacing: 0.04em;
            line-height: 1;
            text-transform: uppercase;
        }
        .credits-info-category > div {
            display: grid;
            gap: 0.18rem;
            min-width: 0;
        }
        .credits-info-body strong {
            color: var(--text-primary);
            font-size: 0.78rem;
            font-weight: 850;
            line-height: 1.12;
        }
        .credits-info-body span {
            color: var(--text-muted);
            font-size: 0.72rem;
            font-weight: 700;
            line-height: 1.35;
        }
        .credits-section-title-row {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 1rem;
            min-width: 0;
        }
        .credits-section-title-row h2 {
            margin: 0.12rem 0 0;
            color: var(--text-primary);
            font-size: 1.22rem;
            font-weight: 900;
            letter-spacing: 0;
            line-height: 1;
        }
        .credits-section-title-row > strong {
            color: #f4c95d;
            flex: 0 0 auto;
            font-size: 1.16rem;
            font-weight: 900;
            line-height: 1;
            text-align: right;
        }
        .credits-balance-card {
            display: grid;
            grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.85fr);
            align-items: center;
            gap: 1.4rem;
            min-width: 0;
            padding: 1.45rem 2rem;
        }
        .credits-balance-primary {
            display: grid;
            gap: 0.42rem;
            min-width: 0;
        }
        .credits-balance-primary > span {
            color: var(--text-muted);
            font-size: 0.8rem;
            font-weight: 850;
            letter-spacing: 0;
            line-height: 1;
            text-transform: uppercase;
        }
        .credits-balance-primary > strong {
            color: #f4c95d;
            font-size: clamp(2.15rem, 4.2vw, 3.35rem);
            font-weight: 900;
            letter-spacing: 0;
            line-height: 0.95;
            overflow-wrap: anywhere;
        }
        .credits-summary-stats {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            min-width: 0;
        }
        .credits-summary-stat {
            display: flex;
            align-items: center;
            gap: 0.72rem;
            min-width: 0;
            padding: 0.28rem 1.75rem;
            border-left: 1px solid var(--border-subtle);
        }
        .credits-summary-stat:first-child {
            border-left: 0;
        }
        .credits-summary-stat > div {
            display: grid;
            gap: 0.38rem;
            min-width: 0;
        }
        .credits-summary-stat span:not(.credits-summary-icon) {
            color: var(--text-muted);
            font-size: 0.86rem;
            font-weight: 700;
            line-height: 1.05;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .credits-summary-stat strong {
            color: var(--text-primary);
            font-size: 1.12rem;
            font-weight: 850;
            line-height: 1;
            overflow-wrap: anywhere;
        }
        .credits-balance-amount {
            align-items: baseline;
        }
        .credits-balance-amount .credit-coin-icon {
            --coin-size: 0.78em;
        }
        .credits-summary-amount .credit-coin-icon {
            --coin-size: 0.84em;
        }
        .credits-summary-icon {
            display: inline-grid;
            place-items: center;
            width: 1.28rem;
            height: 1.28rem;
            flex: 0 0 1.28rem;
            color: var(--credits-summary-icon-color, #f4c95d);
            font-size: 0.95rem;
        }
        .credits-summary-icon--green {
            --credits-summary-icon-color: #8fe59a;
        }
        .credits-summary-icon--rose {
            --credits-summary-icon-color: #ff6d83;
        }
        .credits-summary-icon--purple {
            --credits-summary-icon-color: #aa8cff;
        }
        .credits-profile-metrics {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0.5rem;
        }
        .credits-balance-card,
        .credits-profile-panel,
        .credits-profile-metrics > div,
        .credits-rule-row,
        .credits-activity-row,
        .credits-activity-empty,
        .credits-empty-state {
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            background: var(--bg-elevated);
        }
        .credits-profile-metrics > div {
            min-width: 0;
            padding: 0.58rem 0.65rem;
        }
        .credits-profile-metrics span,
        .credits-section-head span,
        .credits-rule-foot,
        .credits-activity-row span,
        .credits-activity-empty,
        .credits-empty-state {
            color: var(--text-muted);
        }
        .credits-profile-metrics span {
            display: block;
            font-size: 0.66rem;
            font-weight: 750;
            line-height: 1.2;
            margin-bottom: 0.22rem;
        }
        .credits-profile-metrics strong {
            color: var(--text-primary);
            display: block;
            font-size: 0.98rem;
            font-weight: 850;
            line-height: 1.1;
            overflow-wrap: anywhere;
        }
        .credits-profile-panels {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 0.58rem;
            align-items: start;
        }
        .credits-mobile-tabs {
            display: none;
        }
        .credits-mobile-tab-row {
            display: none;
        }
        .credits-profile-panel {
            display: grid;
            gap: 0.5rem;
            min-width: 0;
            padding: 1.45rem 1.65rem 1.05rem;
        }
        .credits-section-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.55rem;
        }
        .credits-section-head h3 {
            margin: 0;
            color: var(--text-muted);
            font-size: 0.82rem;
            font-weight: 850;
            letter-spacing: 0;
            line-height: 1.15;
            text-transform: uppercase;
        }
        .credits-section-head span {
            flex-shrink: 0;
            font-size: 0.66rem;
            font-weight: 750;
        }
        .credits-rule-list,
        .credits-activity-list {
            display: grid;
            gap: 0.2rem;
        }
        .credits-rule-row {
            display: grid;
            grid-template-columns: 2.1rem minmax(150px, 1.05fr) minmax(120px, 0.8fr) max-content;
            align-items: center;
            gap: 0.52rem;
            min-height: 2.62rem;
            min-width: 0;
            padding: 0.32rem 0.42rem;
        }
        .credits-rule-row.capped {
            border-color: color-mix(in srgb, var(--warning) 52%, var(--border-subtle) 48%);
        }
        .credits-reason-icon {
            --credits-icon-color: var(--text-muted);
            --credits-icon-bg: color-mix(in srgb, #18181b 82%, var(--text-muted) 18%);
            --credits-icon-border: var(--border-subtle);
            display: grid;
            place-items: center;
            width: 1.95rem;
            height: 1.95rem;
            border: 1px solid var(--credits-icon-border);
            border-radius: 7px;
            background: var(--credits-icon-bg);
            color: var(--credits-icon-color);
            flex: 0 0 1.95rem;
            line-height: 1;
        }
        .credits-reason-icon i {
            font-size: 0.92rem;
        }
        .credits-reason-icon--rose {
            --credits-icon-color: #ff8ba1;
            --credits-icon-bg: rgba(255, 80, 112, 0.11);
            --credits-icon-border: rgba(255, 80, 112, 0.28);
        }
        .credits-reason-icon--blue {
            --credits-icon-color: #9bd6ff;
            --credits-icon-bg: rgba(75, 166, 230, 0.11);
            --credits-icon-border: rgba(75, 166, 230, 0.28);
        }
        .credits-reason-icon--green {
            --credits-icon-color: #9be58f;
            --credits-icon-bg: rgba(94, 206, 111, 0.11);
            --credits-icon-border: rgba(94, 206, 111, 0.28);
        }
        .credits-reason-icon--purple {
            --credits-icon-color: #aa8cff;
            --credits-icon-bg: rgba(138, 100, 255, 0.12);
            --credits-icon-border: rgba(138, 100, 255, 0.32);
        }
        .credits-reason-icon--gold {
            --credits-icon-color: #f4c95d;
            --credits-icon-bg: rgba(244, 201, 93, 0.1);
            --credits-icon-border: rgba(244, 201, 93, 0.3);
        }
        .credits-rule-name {
            display: grid;
            gap: 0.22rem;
            min-width: 0;
        }
        .credits-rule-name span,
        .credits-activity-row strong {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .credits-rule-name span {
            color: var(--text-primary);
            font-size: 0.82rem;
            font-weight: 800;
            line-height: 1;
        }
        .credits-rule-name strong {
            display: inline-flex;
            align-items: center;
            gap: 0.2rem;
            color: #f4c95d;
            font-size: 0.68rem;
            font-weight: 850;
            line-height: 1;
        }
        .credits-rule-each {
            color: #f4c95d;
        }
        .credits-rule-amount .credit-coin-icon,
        .credits-rule-cap-amount .credit-coin-icon,
        .credits-activity-amount .credit-coin-icon {
            --coin-size: 0.86em;
        }
        .credits-rule-progress {
            position: relative;
            min-width: 0;
            height: 0.5rem;
            overflow: hidden;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
        }
        .credits-rule-progress span {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #f4c95d, #ffd95f);
            box-shadow: 0 0 10px rgba(244, 201, 93, 0.24);
        }
        .credits-rule-row > b,
        .credits-activity-row b {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.2rem;
            color: #f4c95d;
            flex-shrink: 0;
            font-size: 0.82rem;
            font-weight: 850;
            line-height: 1;
            text-align: right;
        }
        .credits-rule-cap-divider {
            color: var(--text-muted);
            font-weight: 850;
        }
        .credits-activity-row {
            display: grid;
            grid-template-columns: 2.1rem minmax(0, 1fr) auto max-content;
            align-items: center;
            gap: 0.5rem;
            min-height: 2.42rem;
            min-width: 0;
            padding: 0.28rem 0.42rem;
        }
        .credits-activity-row strong {
            color: var(--text-primary);
            font-size: 0.82rem;
            font-weight: 800;
            line-height: 1;
        }
        .credits-activity-row span {
            font-size: 0.74rem;
            font-weight: 700;
            line-height: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .credits-activity-row b {
            text-align: right;
        }
        .credits-activity-empty {
            padding: 0.55rem 0.65rem;
            font-size: 0.76rem;
            font-weight: 700;
        }
        .credits-empty-state {
            padding: 1rem;
            font-size: 0.9rem;
            font-weight: 700;
            line-height: 1.45;
        }
        .credits-profile-page-empty {
            padding-top: 0.45rem;
        }
        .user-profile-page--credits .credits-profile-section {
            margin-top: 0.22rem;
        }
        .user-profile-page--credits .circle-detail-hero:has(.credits-info-section[open]) {
            overflow: visible;
            z-index: 120;
        }
        .user-profile-page--credits .circle-detail-hero:has(.credits-info-section[open]) .user-profile-context-actions {
            position: relative;
            z-index: 122;
        }
        .user-profile-page--credits .credits-info-section[open] {
            z-index: 123;
        }
        .user-profile-page--credits .credits-info-section[open] .credits-info-body {
            z-index: 124;
        }
        @media (max-width: 1040px) {
            .credits-profile-panels {
                grid-template-columns: 1fr;
            }
            .credits-balance-card {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
            .credits-info-body {
                grid-template-columns: 1fr;
                width: min(420px, calc(100vw - 1.5rem));
            }
        }
        @media (max-width: 860px) {
            .credits-profile-metrics {
                grid-template-columns: 1fr;
            }
            .credits-profile-page {
                width: min(100% - 1rem, 1120px);
                padding-top: 0.25rem;
                padding-bottom: 0.65rem;
                margin-top: -0.9375rem;
            }
        }
        @media (max-width: 860px) {
            .credits-profile-page {
                width: min(100% - 1rem, 1120px);
                padding-top: 0.25rem;
                padding-bottom: 0.65rem;
                margin-top: -0.9375rem;
            }
            .user-profile-page--credits .user-profile-header-stats,
            .user-profile-page--credits .user-profile-context-actions {
                display: none;
            }
            .credits-profile-header {
                display: grid;
                grid-template-columns: 3.65rem minmax(0, 1fr);
                align-items: center;
                gap: 0.55rem 0.7rem;
                padding: 0.05rem 0 0.65rem;
            }
            .credits-profile-actions {
                display: none;
            }
            .credits-profile-avatar {
                width: 3.65rem;
                height: 3.65rem;
                font-size: 1.25rem;
            }
            .credits-profile-identity {
                grid-column: 2;
                grid-row: 1;
                justify-self: start;
                align-self: center;
                gap: 0.08rem;
            }
            .credits-profile-identity p {
                font-size: 0.62rem;
            }
            .credits-profile-identity h1 {
                font-size: 1.42rem;
            }
            .credits-profile-identity span {
                display: none;
            }
            .credits-page-refresh {
                align-self: center;
                height: 2.65rem;
                margin-left: 0;
                min-width: 2.7rem;
                padding: 0 0.72rem;
            }
            .credits-info-section summary {
                min-height: 2.65rem;
                padding: 0 0.72rem;
                font-size: 0.76rem;
            }
            .credits-info-body {
                gap: 0.36rem;
                padding: 0.62rem;
            }
            .credits-info-body > div {
                gap: 0.18rem;
                padding: 0.52rem 0.58rem;
            }
            .credits-info-body strong {
                font-size: 0.72rem;
            }
            .credits-info-body span {
                font-size: 0.66rem;
                line-height: 1.28;
            }
            .credits-profile-section {
                gap: 0.52rem;
            }
            .credits-balance-card {
                grid-template-columns: minmax(110px, 1.45fr) repeat(3, minmax(52px, 0.72fr));
                gap: 0;
                padding: 0.75rem 0.65rem;
            }
            .credits-balance-primary {
                gap: 0.2rem;
                padding-right: 0.5rem;
            }
            .credits-balance-primary > span {
                font-size: 0.58rem;
            }
            .credits-balance-primary > strong {
                font-size: clamp(1.45rem, 8vw, 1.85rem);
                line-height: 0.95;
                white-space: nowrap;
            }
            .credits-summary-stats {
                display: contents;
            }
            .credits-summary-stat:first-child {
                border-left: 1px solid var(--border-subtle);
                padding-left: 0.48rem;
            }
            .credits-summary-stat {
                display: grid;
                align-content: center;
                justify-items: start;
                gap: 0.12rem;
                min-height: 3.05rem;
                padding: 0 0.38rem;
                border-left: 1px solid var(--border-subtle);
            }
            .credits-summary-icon {
                width: 0.95rem;
                height: 0.95rem;
                flex-basis: 0.95rem;
                font-size: 0.72rem;
            }
            .credits-summary-stat span:not(.credits-summary-icon) {
                max-width: 5.5rem;
                font-size: 0.56rem;
                line-height: 1.05;
                white-space: normal;
            }
            .credits-summary-stat strong {
                font-size: 0.74rem;
                line-height: 1;
                white-space: nowrap;
            }
            .credits-info-section--balance {
                display: block;
                align-self: start;
                margin-top: -0.08rem;
            }
            .credits-info-section--balance .credits-info-body {
                position: static;
                width: 100%;
                margin-top: 0.48rem;
                padding: 0.5rem;
                box-shadow: none;
            }
            .credits-info-section--balance .credits-info-body--categories,
            .credits-info-section--balance .credits-info-body--guide {
                grid-template-columns: 1fr;
            }
            .credits-mobile-tab-row {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                align-items: center;
                gap: 0.42rem;
                min-width: 0;
            }
            .credits-mobile-tabs {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.22rem;
                padding: 0.22rem;
                border: 1px solid var(--border-subtle);
                border-radius: 8px;
                background: var(--bg-elevated);
            }
            .credits-mobile-tabs button {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 0.36rem;
                min-width: 0;
                height: 2.25rem;
                border: 1px solid transparent;
                border-radius: 7px;
                background: transparent;
                color: var(--text-muted);
                cursor: pointer;
                font-size: 0.76rem;
                font-weight: 850;
                line-height: 1;
                padding: 0 0.5rem;
            }
            .credits-mobile-tabs button.active {
                border-color: color-mix(in srgb, #f4c95d 40%, var(--border-default) 60%);
                background: color-mix(in srgb, #18181b 76%, #f4c95d 24%);
                color: var(--text-primary);
            }
            .credits-mobile-tabs button i {
                color: #f4c95d;
                font-size: 0.75rem;
            }
            .credits-mobile-tabs button b {
                color: #f4c95d;
                font-size: 0.68rem;
                font-weight: 900;
                line-height: 1;
            }
            .credits-page-refresh--mobile {
                width: 2.7rem;
                min-width: 2.7rem;
                height: 2.7rem;
                padding: 0;
            }
            .credits-page-refresh--mobile span {
                display: none;
            }
            .credits-profile-panels {
                display: block;
            }
            .credits-profile-panels[data-mobile-active-panel="daily"] .credits-profile-panel--recent,
            .credits-profile-panels[data-mobile-active-panel="recent"] .credits-profile-panel--daily {
                display: none;
            }
            .credits-profile-panel {
                gap: 0.45rem;
                padding: 0.7rem 0.65rem 0.75rem;
            }
            .credits-rule-list,
            .credits-activity-list {
                gap: 0.22rem;
            }
            .credits-reason-icon {
                width: 1.75rem;
                height: 1.75rem;
                flex-basis: 1.75rem;
            }
            .credits-reason-icon i {
                font-size: 0.82rem;
            }
            .credits-rule-row {
                grid-template-columns: 1.85rem minmax(0, 1fr) max-content;
                grid-template-rows: auto auto;
                gap: 0.16rem 0.46rem;
                min-height: 3.05rem;
                padding: 0.38rem 0.42rem;
            }
            .credits-rule-row .credits-reason-icon {
                grid-column: 1;
                grid-row: 1 / 3;
                align-self: center;
            }
            .credits-rule-name {
                grid-column: 2;
                grid-row: 1;
                gap: 0.15rem;
            }
            .credits-rule-name span {
                font-size: 0.78rem;
            }
            .credits-rule-name strong {
                font-size: 0.62rem;
            }
            .credits-rule-row > b {
                grid-column: 3;
                grid-row: 1;
                font-size: 0.75rem;
            }
            .credits-rule-progress {
                grid-column: 2 / 4;
                grid-row: 2;
                height: 0.4rem;
                margin-top: 0.15rem;
            }
            .credits-activity-row {
                grid-template-columns: 1.85rem minmax(0, 1fr) max-content;
                grid-template-rows: auto auto;
                gap: 0.1rem 0.46rem;
                min-height: 3rem;
                padding: 0.42rem 0.48rem;
            }
            .credits-activity-row .credits-reason-icon {
                grid-column: 1;
                grid-row: 1 / 3;
                align-self: center;
            }
            .credits-activity-row strong {
                grid-column: 2;
                grid-row: 1;
                font-size: 0.82rem;
                line-height: 1.05;
            }
            .credits-activity-row b {
                grid-column: 3;
                grid-row: 1;
                align-self: start;
                font-size: 0.8rem;
                text-align: right;
            }
            .credits-activity-row span {
                grid-column: 2 / 4;
                grid-row: 2;
                justify-self: end;
                max-width: 100%;
                font-size: 0.6rem;
                line-height: 1;
                text-align: right;
                white-space: nowrap;
            }
        }
        @media (max-width: 520px) {
            .credits-profile-page {
                width: calc(100% - 0.75rem);
                padding-top: 0.2rem;
                padding-bottom: 0.55rem;
            }
            .credits-profile-header {
                grid-template-columns: 3.35rem minmax(0, 1fr);
                gap: 0.5rem 0.6rem;
            }
            .credits-profile-avatar {
                width: 3.35rem;
                height: 3.35rem;
                font-size: 1.18rem;
            }
            .credits-profile-identity h1 {
                font-size: 1.35rem;
            }
            .credits-page-refresh {
                height: 2.5rem;
                padding: 0 0.64rem;
                font-size: 0.78rem;
            }
            .credits-page-refresh span {
                display: none;
            }
            .credits-info-section summary {
                min-width: 4.4rem;
                padding: 0 0.58rem;
            }
            .credits-info-label-full {
                display: none;
            }
            .credits-info-label-short {
                display: inline;
            }
            .credits-balance-card {
                grid-template-columns: minmax(100px, 1.3fr) repeat(3, minmax(48px, 0.7fr));
                padding: 0.68rem 0.55rem;
            }
            .credits-balance-primary > strong {
                font-size: 1.55rem;
            }
            .credits-summary-stat {
                min-height: 2.8rem;
                padding: 0 0.28rem;
            }
            .credits-summary-stat:first-child {
                padding-left: 0.34rem;
            }
            .credits-summary-stat span:not(.credits-summary-icon) {
                font-size: 0.52rem;
            }
            .credits-summary-stat strong {
                font-size: 0.68rem;
            }
            .credits-profile-panel {
                padding: 0.65rem 0.55rem 0.7rem;
            }
        }
        @media (max-width: 370px) {
            .credits-page-refresh {
                min-width: 2.4rem;
                padding: 0;
            }
            .credits-info-section summary {
                min-width: 2.65rem;
                padding: 0;
            }
            .credits-info-section summary > span {
                gap: 0;
            }
            .credits-info-section summary > span::after {
                content: "?";
                color: var(--text-primary);
                font-weight: 900;
                margin-left: 0.15rem;
            }
            .credits-info-section summary > span {
                font-size: 0;
            }
            .credits-info-section summary > span i {
                font-size: 0.78rem;
            }
            .credits-info-chevron {
                display: none;
            }
            .credits-balance-card {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 0.48rem;
            }
            .credits-balance-primary {
                grid-column: 1 / -1;
                display: flex;
                align-items: baseline;
                justify-content: space-between;
                padding: 0 0 0.48rem;
                border-bottom: 1px solid var(--border-subtle);
            }
            .credits-info-section--balance {
                grid-column: 1 / -1;
                grid-row: 2;
            }
            .credits-summary-stat {
                grid-row: 3;
            }
            .credits-summary-stat,
            .credits-summary-stat:first-child {
                min-height: 0;
                padding: 0;
                border-left: 0;
            }
        }

        /* Stats in trigger (counts) */
        .user-switcher-stats {
            font-size: 0.6875rem;
            color: var(--text-secondary);
            margin-top: 2px;
        }

        /* Login status indicator classes for trigger */
        .user-switcher-trigger.logged-in {
            border-color: rgba(34, 197, 94, 0.3);
            background: rgba(34, 197, 94, 0.05);
        }
        .user-switcher-trigger.anonymous {
            border-color: var(--border-default);
            background: var(--bg-subtle);
        }
        .user-switcher-trigger.anonymous .user-switcher-type {
            color: var(--text-muted);
        }
        .user-switcher-trigger.anonymous .user-switcher-item-name {
            font-size: calc(0.6875rem - 2px);
        }
        .user-switcher-trigger.anonymous .user-switcher-item-stats {
            font-size: 0.6875rem;
        }

        /* ========================================
           CUSTOM SCROLLBAR
           ======================================== */
        ::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: var(--bg-accent);
            border-radius: 2px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--text-muted);
        }
        ::-webkit-scrollbar-corner {
            background: transparent;
        }

        /* ========================================
           RESPONSIVE STYLES
           ======================================== */
        @media (max-width: 980px) {
            .top-creator-policy-link {
                display: none;
            }
            .top-discord-link {
                display: none;
            }
            .user-switcher-discord-menu-link {
                display: block;
            }
        }

        @media (max-width: 768px) {
            .top-bar-inner {
                position: relative;
            }
            .top-bar-left {
                gap: var(--space-2);
                min-width: 0;
                flex: 1 1 auto;
            }
            .top-bar-right {
                gap: 6px;
                margin-left: clamp(10px, 3vw, 18px);
            }
            .top-how-works-link,
            .top-creator-policy-link {
                display: inline-flex;
                position: relative;
                flex: 0 0 auto;
                min-width: 28px;
                width: 28px;
                height: 28px;
                padding: 0;
                border-radius: 999px;
                transform: none;
            }
            .top-how-works-link:hover,
            .top-creator-policy-link:hover {
                transform: translateY(-1px);
            }
            .top-header-link-label {
                display: none;
            }
            .top-header-link-icon {
                display: block;
                color: #ffffff;
                font-size: 0.88rem;
                line-height: 1;
            }
            .app-title-text {
                display: none;
            }
            .desktop-header-nav {
                display: none;
            }
            .nav-tabs {
                display: none;
            }
            .mobile-section-nav {
                display: inline-flex;
                position: relative;
                left: auto;
                transform: none;
                z-index: 901;
            }
            .top-discord-link {
                display: inline-flex;
                position: relative;
                left: auto;
                top: auto;
                z-index: 902;
                flex: 0 0 auto;
                min-width: 28px;
                width: 28px;
                height: 28px;
                padding: 0;
                border-radius: 999px;
                transform: none;
            }
            .top-discord-link:hover {
                transform: translateY(-1px);
            }
            .top-discord-kicker,
            .top-discord-label {
                display: none;
            }
            .top-discord-icon {
                display: block;
                color: #ffffff;
                font-size: 0.92rem;
                line-height: 1;
            }
            .app-title {
                position: relative;
                width: 34px;
                height: 38px;
                justify-content: center;
                gap: 0;
            }
            .app-logo {
                transform: translateY(-4px);
            }
            .app-title-stack {
                position: absolute;
                left: 50%;
                top: 28px;
                margin: 0;
                transform: translateX(-50%);
                align-items: center;
                pointer-events: none;
            }
            .app-version {
                margin-top: 0;
                padding: 0 3px;
                font-size: 6px;
                line-height: 1.05;
            }
        }
        @media (max-width: 640px) {
            body {
                padding: 4.5rem 2px 5rem 2px;
            }
            .top-bar,
            .top-bar-inner {
                padding: 0 6px;
            }
            .top-bar-inner {
                position: relative;
            }
            .top-bar-left {
                gap: var(--space-2);
                min-width: 0;
                flex: 1 1 auto;
            }
            .top-bar-right {
                gap: 6px;
                margin-left: clamp(8px, 2.5vw, 14px);
            }
            .app-title {
                font-size: 1rem;
            }
            .app-title-text {
                display: none;
            }
            .app-title-icon {
                display: block;
                width: 24px;
                height: 24px;
            }
            .desktop-header-nav {
                display: none;
            }
            .nav-tabs {
                display: none;
            }
            .mobile-section-nav {
                display: inline-flex;
                position: relative;
                left: auto;
                transform: none;
                z-index: 901;
            }
            .mobile-section-nav-trigger {
                font-size: calc(1.2rem + 1.5pt);
                max-width: clamp(122px, 40vw, 190px);
            }
            .mobile-section-nav-item {
                font-size: calc(1.04rem + 0pt);
            }
            .user-switcher-trigger {
                padding: 0.125rem 0.125rem 0.125rem 0.375rem;
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 2px;
            }
            .user-switcher-info {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 0;
                flex: 1;
                min-width: 0;
            }
            .user-switcher-name {
                max-width: 100%;
                font-size: 0.6875rem;
                font-weight: 600;
                line-height: 1.1;
            }
            .user-switcher-trigger .user-switcher-item-name {
                max-width: 72px;
            }
            .user-switcher-stats {
                font-size: 0.5625rem;
            }
            .user-switcher-trigger .user-switcher-item-stats {
                font-size: 0.625rem;
            }
            .user-switcher-auth-actions {
                gap: 6px;
            }
            .user-switcher-auth-login-btn,
            .user-switcher-auth-register-btn {
                padding: 0.35rem 0.4rem;
                font-size: calc(0.6875rem + 4pt - 3px);
            }
            .user-switcher-auth-status {
                font-size: 0.6875rem;
            }
            .user-switcher-arrow {
                margin-left: 2px;
            }
            .user-switcher-overlay {
                background: rgba(6, 10, 20, 0.52);
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }
            .container {
                padding: var(--space-1) 2px;
                margin: 0;
                border-radius: var(--radius-lg);
            }
        .extract-panel {
            position: relative;
            padding: var(--space-2) 2px;
            margin-left: 0;
            margin-right: 0;
            border-radius: var(--radius-sm);
        }
        .extract-top-row {
            display: flex;
            align-items: flex-start;
            gap: var(--space-2);
            margin-bottom: var(--space-2);
            flex-direction: row;
            justify-content: flex-start;
            position: relative;
        }
        .front-extraction-list-anchor {
            order: 1;
            flex: 0 0 auto;
        }
        .extract-top-main {
            flex: 1 1 auto;
            min-width: 0;
            order: 2;
        }
        .front-extraction-list-toggle-btn {
            order: 1;
            flex: 0 0 auto;
        }
        .extract-via-section {
            margin-left: 0;
            margin-right: 0;
        }
	            .extract-input-row {
	                flex-wrap: wrap;
	                gap: var(--space-2);
	                align-items: stretch;
	            }
	            .front-extraction-list-toggle-btn {
	                order: 1;
	                flex: 0 0 auto;
	            }
	            .extract-url-field {
	                order: 2;
	                flex: 1 1 0;
	                min-width: 0;
	            }
	            #extractCharacterV2Btn {
	                order: 3;
	                flex: 1 1 100%;
	                width: 100%;
	            }
	            #extractQueueHideBtn {
	                order: 4;
	                flex: 1 1 100%;
	                width: 100%;
	            }
	            .extract-input-row > .extract-url-field input {
	                width: 100%;
	            }
	            .extract-input-row.extract-input-row--loading {
	                flex-direction: row;
	                align-items: center;
	                gap: var(--space-2);
                    flex-wrap: nowrap;
	            }
	            .extract-input-row.extract-input-row--loading input {
	                width: auto;
	                flex: 1;
	                min-width: 0;
	            }
	            .extract-input-row.extract-input-row--loading button {
	                display: none;
	            }
            .extract-input-row.extract-input-row--loading::after {
                content: '';
                width: 1rem;
                height: 1rem;
                border: 2px solid var(--border-default);
	                border-top-color: var(--accent-primary);
	                border-radius: 50%;
	                animation: extract-btn-spin 0.7s linear infinite;
	                flex-shrink: 0;
	                margin-right: 2px;
	            }
            .extract-queue-prompt {
                align-items: center;
                flex-direction: row;
                justify-content: space-between;
                gap: 10px;
            }
            .extract-queue-prompt-main {
                min-width: 0;
                flex: 1 1 auto;
            }
            .extract-queue-another-link {
                align-self: auto;
                flex: 0 0 auto;
            }
            .extract-input-row.extract-input-row--queue-expanded {
                top: auto;
                left: 10px;
                right: 10px;
                bottom: 10px;
                transform: none;
                width: auto;
                max-width: none;
                padding: 0.85rem 0.85rem 0.9rem;
                border-radius: 18px;
                row-gap: 0.65rem;
                box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
            }
            .extract-input-row.extract-input-row--queue-expanded .extract-queue-composer-header {
                margin-bottom: 0.12rem;
                padding-right: 2.35rem;
                gap: 0.08rem;
            }
            .extract-input-row.extract-input-row--queue-expanded .extract-queue-composer-title {
                font-size: 0.7rem;
                letter-spacing: 0.06em;
            }
            .extract-input-row.extract-input-row--queue-expanded .extract-queue-composer-subtitle {
                font-size: 0.69rem;
                line-height: 1.2;
                max-width: 26ch;
            }
            .extract-input-row.extract-input-row--queue-expanded .extract-url-field {
                flex: 1 1 100%;
            }
            .extract-input-row.extract-input-row--queue-expanded input {
                width: 100%;
                flex: 1 1 100%;
                min-width: 0;
                min-height: 2.6rem;
                font-size: 0.79rem;
                padding-top: 0.62rem;
                padding-bottom: 0.62rem;
            }
            .extract-input-row.extract-input-row--queue-expanded .extract-options-toggle {
                width: 2rem;
                min-width: 2rem;
                max-width: 2rem;
                height: 2rem;
            }
            .extract-input-row.extract-input-row--queue-expanded #extractCharacterV2Btn {
                width: 100%;
                flex: 1 1 100%;
                min-height: 2.6rem;
                font-size: 0.82rem;
                border-radius: 12px;
            }
            .extract-input-row.extract-input-row--queue-expanded #extractQueueHideBtn {
                top: 8px;
                right: 8px;
                width: 30px;
                min-width: 30px;
                height: 30px;
                flex: 0 0 auto;
                font-size: 0.96rem;
                border-radius: 9px;
                border-color: rgba(148, 163, 184, 0.22);
                background: rgba(15, 23, 42, 0.72);
            }
	            /* Browser Status Bar - Mobile */
	            .browser-status-bar {
	                padding: 3px 2px;
	                gap: var(--space-2);
	                min-height: 36px;
            }
            .browser-status-left {
                gap: var(--space-2);
            }
            .browser-status-icons {
                gap: 6px;
            }
            .browser-computer-icon {
                width: 20px;
                height: 15px;
            }
            .browser-computer-icon svg {
                width: 18px;
                height: 14px;
            }
            .browser-tabs-count {
                font-size: 0.6875rem;
            }
            .browser-tabs-count svg {
                width: 15px;
                height: 15px;
            }
            .browser-status-text-container {
                gap: 1px;
            }
            .browser-status-text {
                font-size: 0.6875rem;
                overflow: visible;
                max-width: none;
                min-width: 0;
            }
            .browser-action-text {
                font-size: 0.625rem;
                flex: 1;
            }
            .browser-status-right {
                gap: var(--space-1);
            }
            .browser-status-right button {
                padding: 0.25rem 0.5rem;
                font-size: 0.6875rem;
            }
            .proxy-toggle,
            .vpn-toggle {
                padding: 0.25rem;
            }
            .proxy-toggle-icon,
            .vpn-toggle-icon {
                width: 15px;
                height: 15px;
            }
        }

        @media (max-width: 400px) {
            body {
                padding: 4rem 2px 5rem 2px;
            }
            .container {
                padding: var(--space-1) 2px;
            }
            .app-title {
                font-size: 0.9375rem;
            }
            .mobile-section-nav-trigger {
                font-size: calc(1.02rem + 1.5pt);
                max-width: clamp(110px, 44vw, 168px);
            }
            .mobile-section-nav-item {
                font-size: calc(0.94rem + 0pt);
            }
            .character-grid {
                gap: var(--space-1);
                margin-left: 0;
                margin-right: 0;
            }
            .extract-panel {
                padding: var(--space-2) 2px;
                margin-left: 0;
                margin-right: 0;
                border-radius: 0;
            }
            .extract-via-section {
                margin-left: 0;
                margin-right: 0;
            }
            .sessions-bar {
                margin-left: 0;
                margin-right: 0;
            }
        }

        /* ========================================
           MAIN CONTAINER & VIEWS
           ======================================== */
        .container {
            background: transparent;
            padding: var(--space-3) var(--space-3);
            border-radius: var(--radius-xl);
            width: 100%;
            max-width: var(--page-max-width);
            margin: 0 auto;
            border: none;
        }

        /* View containers */
        .view-extract,
        .view-characters,
        .view-fresh,
        .view-creators {
            display: none;
        }
        .view-extract.active,
        .view-characters.active,
        .view-fresh.active,
        .view-creators.active {
            display: block;
        }
        .view-extract {
            max-width: 800px;
            margin: 0 auto;
            width: 100%;
        }

        .extract-realtime-overlay {
            position: absolute;
            top: 0.45rem;
            right: 0.55rem;
            z-index: 2;
            pointer-events: none;
        }
        .extract-realtime-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.28rem;
            padding: 0.16rem 0.42rem;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.12);
            background: rgba(15, 23, 42, 0.72);
            color: rgba(226, 232, 240, 0.88);
            font-size: 0.58rem;
            font-weight: 600;
            letter-spacing: 0.015em;
            text-transform: lowercase;
            line-height: 1;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
            white-space: nowrap;
        }
        .extract-realtime-badge::before {
            content: '';
            width: 0.34rem;
            height: 0.34rem;
            border-radius: 50%;
            background: #94a3b8;
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
        }
        .extract-realtime-badge[data-state="live"] {
            border-color: rgba(34, 197, 94, 0.18);
            color: rgba(220, 252, 231, 0.92);
            background: rgba(20, 41, 28, 0.74);
        }
        .extract-realtime-badge[data-state="live"]::before {
            background: #22c55e;
        }
        .extract-realtime-badge[data-state="connecting"],
        .extract-realtime-badge[data-state="reconnecting"] {
            border-color: rgba(96, 165, 250, 0.18);
            color: rgba(219, 234, 254, 0.9);
            background: rgba(16, 29, 51, 0.74);
        }
        .extract-realtime-badge[data-state="connecting"]::before,
        .extract-realtime-badge[data-state="reconnecting"]::before {
            background: #60a5fa;
        }
        .extract-realtime-badge[data-state="polling"] {
            border-color: rgba(245, 158, 11, 0.18);
            color: rgba(254, 243, 199, 0.92);
            background: rgba(57, 39, 8, 0.74);
        }
        .extract-realtime-badge[data-state="polling"]::before {
            background: #f59e0b;
        }
        @media (max-width: 640px) {
            .extract-realtime-overlay {
                top: 0.32rem;
                right: 0.35rem;
            }
            .extract-realtime-badge {
                font-size: 0.54rem;
                padding: 0.14rem 0.38rem;
            }
        }

        h1 {
            margin: 0 0 var(--space-4);
            color: var(--accent-primary);
            text-align: center;
            font-size: 1.5rem;
            font-weight: 600;
        }
        h2 {
            color: var(--text-primary);
            font-size: 1rem;
            font-weight: 600;
            margin: var(--space-6) 0 var(--space-3);
        }
        h3 {
            color: var(--text-primary);
            font-size: 0.9375rem;
            font-weight: 600;
            margin: 0 0 var(--space-3);
        }

        /* Extract Title */
        .extract-title {
            color: var(--text-primary);
            font-size: 1rem;
            font-weight: 600;
            margin: 0;
            flex: 1;
        }

        /* ========================================
           BUTTONS
           ======================================== */
        .buttons {
            display: flex;
            gap: var(--space-2);
            flex-wrap: wrap;
            margin-bottom: var(--space-4);
        }
        button {
            padding: 0.5rem 1rem;
            color: white;
            border: none;
            border-radius: var(--radius-md);
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all var(--transition-fast);
            font-family: inherit;
        }
        .btn-primary {
            background: var(--accent-primary);
        }
        .btn-primary:hover {
            background: var(--accent-hover);
        }
        .btn-success {
            background: var(--success);
            color: var(--text-inverse);
        }
        .btn-success:hover {
            background: #16a34a;
        }
        .extract-btn {
            position: relative;
            min-width: 6rem;
            min-height: 3rem;
            padding-top: 0;
            padding-bottom: 0;
        }
        .extract-queue-hide-inline {
            min-width: 5.25rem;
            white-space: nowrap;
        }
        .extract-btn-spinner {
            display: none;
            width: 1rem;
            height: 1rem;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: extract-btn-spin 0.7s linear infinite;
        }
        .extract-btn.extract-btn-loading .extract-btn-text {
            visibility: hidden;
        }
        .extract-btn.extract-btn-loading .extract-btn-spinner {
            display: inline-block;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -0.5rem;
            margin-top: -0.5rem;
        }
        @keyframes extract-btn-spin {
            to { transform: rotate(360deg); }
        }
        .btn-secondary {
            background: var(--bg-subtle);
            color: var(--text-secondary);
        }
        .btn-secondary:hover {
            background: var(--bg-accent);
            color: var(--text-primary);
        }
        .btn-danger {
            background: var(--error);
        }
        .btn-danger:hover {
            background: #dc2626;
        }
        .btn-small {
            padding: 0.3125rem 0.625rem;
            font-size: 0.8125rem;
        }
        .btn-large {
            padding: 0.75rem 1.5rem;
            font-size: 1rem;
        }
        button:disabled {
            background: var(--bg-subtle) !important;
            color: var(--text-muted) !important;
            cursor: not-allowed;
        }

        /* ========================================
           STATUS & RESULT BOXES
           ======================================== */
        #status {
            margin-top: var(--space-3);
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-sm);
            background: var(--info-muted);
            border: 1px solid rgba(59, 130, 246, 0.2);
            color: var(--text-secondary);
            font-size: 0.75rem;
            display: none;
            max-height: 120px;
            overflow-y: auto;
        }

        #result {
            margin-top: var(--space-3);
            padding: var(--space-3);
            border-radius: var(--radius-sm);
            display: none;
            text-align: left;
            font-size: 0.75rem;
            max-height: 150px;
            overflow-y: auto;
        }
        .result-box.success {
            background: var(--success-muted);
            border: 1px solid rgba(34, 197, 94, 0.2);
            display: block;
        }
        .result-box.error {
            background: var(--error-muted);
            border: 1px solid rgba(239, 68, 68, 0.2);
            display: block;
        }

        /* ========================================
           SESSIONS SELECTOR
           ======================================== */
        .sessions-dropdown {
            position: relative;
        }
        .sessions-dropdown-mini {
            width: 100%;
        }
        .sessions-dropdown-trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
            width: 100%;
            max-width: 200px;
            padding: 0.5rem var(--space-2);
            background: var(--bg-subtle);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
            font-size: 0.8125rem;
            position: relative;
            z-index: 120;
        }
        .sessions-dropdown.open .sessions-dropdown-trigger {
            z-index: 140;
        }
        .sessions-dropdown-trigger:hover {
            border-color: var(--border-strong);
            background: var(--bg-hover);
        }
        .sessions-dropdown-trigger.active {
            border-color: var(--accent-primary);
            background: var(--accent-muted);
        }
        .sessions-dropdown-current {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            flex: 1;
            min-width: 0;
            overflow: hidden;
        }
        .sessions-dropdown-current .email {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.8125rem; /* 2pt smaller than default */
            min-width: 0;
        }
        .sessions-dropdown-current .email {
            color: var(--text-primary);
            font-weight: 500;
        }
        .sessions-dropdown-current .time {
            color: var(--text-muted);
            font-size: 0.8125rem;
        }
        .sessions-dropdown-arrow {
            font-size: 0.625rem;
            color: var(--text-muted);
            transition: transform var(--transition-fast);
            flex-shrink: 0;
        }
        .sessions-dropdown.open .sessions-dropdown-arrow {
            transform: rotate(180deg);
        }

        /* Desktop dropdown */
        .sessions-dropdown-content {
            position: absolute;
            top: calc(100% + 6px);
            left: auto;
            right: 0;
            width: 100%;
            min-width: 400px;
            max-width: 600px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-lg);
            max-height: 400px;
            overflow-y: auto;
            box-shadow: var(--shadow-xl);
            z-index: 142;
            opacity: 0;
            visibility: hidden;
            transition: opacity 150ms ease, visibility 150ms ease;
            will-change: opacity, visibility;
        }
        .sessions-list {
            max-height: inherit;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .sessions-dropdown.open .sessions-dropdown-content {
            opacity: 1;
            visibility: visible;
        }
        .sessions-dropdown-content .sessions-modal-close {
            display: none;
            position: absolute;
            top: 8px;
            right: 8px;
            width: 40px;
            height: 40px;
            background: var(--bg-elevated);
            border: none;
            border-radius: 50%;
            color: var(--text-primary);
            font-size: 2.1rem;
            line-height: 1;
            font-weight: 500;
            cursor: pointer;
            z-index: 1;
            align-items: center;
            justify-content: center;
            transition: all var(--transition-fast);
            flex-shrink: 0;
            margin-left: var(--space-3);
            box-shadow: var(--shadow-sm);
            padding: 0;
        }
        .sessions-dropdown-content .sessions-modal-close:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
            transform: scale(1.05);
            box-shadow: var(--shadow-md);
        }

        /* Sessions Overlay - base styles */
        .sessions-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(6, 10, 20, 0.48);
            z-index: 141;
            opacity: 0;
            visibility: hidden;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            transition: opacity 200ms ease, visibility 200ms ease, background 200ms ease;
        }
        .sessions-dropdown.open .sessions-overlay {
            opacity: 1;
            visibility: visible;
            background: rgba(6, 10, 20, 0.64);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

        /* Sessions Dropdown Header */
        .sessions-dropdown-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-2) var(--space-3);
            border-bottom: 1px solid var(--border-subtle);
            gap: var(--space-2);
        }
        .sessions-header-title {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-primary);
            flex: 1;
        }
        .sessions-dropdown-header h4 {
            margin: 0;
            font-size: 0.75rem;
            color: var(--text-secondary);
            font-weight: 500;
        }

        /* Mobile - centered modal for session picker */
        @media (max-width: 768px) {
            .sessions-dropdown {
                width: auto;
                position: static;
            }
            .sessions-dropdown-content {
                position: fixed;
                top: 50%;
                left: 50%;
                right: auto;
                transform: translate(-50%, -48%) scale(0.98);
                width: min(560px, calc(100vw - 24px));
                max-width: calc(100vw - 24px);
                min-width: 0;
                height: 66vh;
                min-height: 66vh;
                max-height: 66vh;
                box-sizing: border-box;
                border-radius: 12px;
                transition: opacity 150ms ease, visibility 150ms ease, transform 180ms ease;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                padding-top: 56px;
            }
            .sessions-dropdown.open .sessions-dropdown-content {
                transform: translate(-50%, -50%) scale(1);
            }
            .sessions-list {
                max-height: none;
                height: 100%;
            }
            .sessions-dropdown-content .sessions-modal-close {
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }
            .extract-via-section {
                flex-wrap: nowrap;
                position: relative;
            }
            .extract-via-header {
                white-space: nowrap;
                font-size: 0.75rem;
                flex-shrink: 0;
            }
            .sessions-bar {
                width: 100%;
                flex: 1;
            }
            .sessions-dropdown-trigger {
                width: auto;
            }
            .sessions-sheet-handle {
                display: none;
            }
            .sessions-overlay {
                background: rgba(6, 10, 20, 0.68);
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }
        }
        @media (min-width: 769px) {
            .sessions-sheet-handle { display: none; }
            .sessions-overlay { background: transparent; }
        }

        /* Extract via Section */
        .extract-via-section {
            margin-top: var(--space-4);
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: var(--space-2);
        }
        .extract-via-header {
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--text-primary);
            white-space: nowrap;
            position: relative;
            z-index: 101;
        }
        .extract-hint-toggle {
            border: 1px solid var(--border-default);
            background: var(--bg-subtle);
            color: var(--text-muted);
            width: 18px;
            height: 18px;
            min-width: 18px;
            min-height: 18px;
            aspect-ratio: 1 / 1;
            border-radius: 999px;
            font-size: 0.75rem;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 0;
            appearance: none;
            -webkit-appearance: none;
        }
        .extract-hint-toggle:hover {
            color: var(--text-primary);
        }
        .extract-hint {
            flex-basis: 100%;
            margin-top: var(--space-2);
            color: var(--text-muted);
            font-size: 0.75rem;
            text-align: center;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height var(--transition-fast), opacity var(--transition-fast);
        }
        .extract-hint.open {
            max-height: 200px;
            opacity: 1;
        }

        /* About View */
        .view-about {
            display: none;
            padding: var(--space-2) 0 var(--space-8);
        }
        .view-about.active { display: block; }
        /* Admin View */
        .view-admin {
            display: none;
            padding: 0 0 var(--space-6);
        }
        .view-admin.active { display: block; }
        .admin-content {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 var(--space-4);
            color: var(--text-primary);
            font-size: 0.9rem;
        }
        .admin-denied {
            color: var(--error);
            font-weight: 600;
            padding: var(--space-6);
            text-align: center;
            background: var(--error-muted);
            border-radius: var(--radius-md);
            margin: var(--space-4) 0;
        }
        .admin-panels { padding: 0; }
        .admin-section-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-3);
            margin-bottom: var(--space-4);
        }
        .admin-section-bar-left {
            display: flex;
            align-items: center;
            gap: var(--space-3);
        }
        .admin-tabs-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-3);
            margin-bottom: var(--space-3);
        }
        .admin-browser-dropdown {
            position: relative;
        }
        .admin-browser-dropdown-trigger {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            font-size: 0.85rem;
            background: var(--bg-elevated);
            color: var(--text-primary);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-sm);
            cursor: pointer;
        }
        .admin-browser-dropdown-trigger:hover {
            border-color: var(--border-strong);
            background: var(--bg-hover);
        }
        .admin-browser-dropdown-trigger[aria-expanded="true"] {
            border-color: var(--accent-primary);
            background: var(--accent-muted);
        }
        .admin-browser-dropdown-arrow { font-size: 0.65rem; opacity: 0.8; }
        .admin-browser-dropdown-overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 999;
        }
        .admin-browser-dropdown.admin-browser-dropdown-open .admin-browser-dropdown-overlay { display: block; }
        .admin-browser-dropdown-content {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 4px;
            min-width: 180px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            z-index: 13000;
            overflow: hidden;
        }
        .admin-browser-dropdown.admin-browser-dropdown-open .admin-browser-dropdown-content { display: block; }
        .admin-browser-dropdown-item {
            display: block;
            width: 100%;
            padding: 10px 14px;
            text-align: left;
            font-size: 0.9rem;
            background: none;
            border: none;
            color: var(--text-primary);
            cursor: pointer;
        }
        .admin-browser-dropdown-item:hover {
            background: var(--bg-hover);
        }
        .admin-browser-dropdown-item:disabled {
            color: var(--text-muted);
            cursor: not-allowed;
            opacity: 0.8;
        }
        .admin-browser-dropdown-item:disabled:hover {
            background: transparent;
        }
        .admin-section-label {
            font-size: 0.8rem;
            color: var(--text-muted);
        }
        .admin-section-select {
            font-size: 0.85rem;
            padding: 4px 8px;
            border-radius: var(--radius-sm);
            background: var(--bg-elevated);
            color: var(--text-primary);
            border: 1px solid var(--border-default);
            min-width: 160px;
        }
        .admin-section {
            display: none;
            min-width: 0;
        }
        .admin-section.active {
            display: block;
        }
        
        /* Admin Tabs - Replacing Dropdown */
        .admin-tabs {
            display: flex;
            gap: var(--space-1);
            margin-bottom: 0;
            border-bottom: 1px solid var(--border-subtle);
            padding-bottom: 0;
        }
        .admin-tab {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--text-secondary);
            background: transparent;
            border: none;
            border-radius: var(--radius-md) var(--radius-md) 0 0;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .admin-tab:hover {
            color: var(--text-primary);
            background: var(--bg-hover);
        }
        .admin-tab.active {
            color: var(--brand-hot-pink);
            background: var(--bg-elevated);
            border-bottom: 2px solid var(--brand-hot-pink);
        }
        .admin-tab-icon {
            width: 18px;
            height: 18px;
            opacity: 0.8;
        }
        .admin-tab.active .admin-tab-icon {
            opacity: 1;
        }
        .admin-tab-text {
            display: inline-block;
        }

        .admin-account-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: var(--space-3);
        }
        .admin-card-account-tool {
            padding: var(--space-4);
        }
        .admin-account-card-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: var(--space-3);
            margin-bottom: var(--space-3);
        }
        .admin-account-card-head .admin-card-title {
            margin: 0 0 4px;
        }
        .admin-account-card-head .admin-muted {
            margin: 0;
            line-height: 1.45;
        }
        .admin-account-card-head-actions {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: var(--space-2);
        }
        .admin-creator-admin-total {
            display: inline-flex;
            align-items: center;
            min-height: 30px;
            padding: 5px 9px;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-full);
            background: var(--bg-subtle);
            color: var(--text-secondary);
            font-size: 0.78rem;
            font-weight: 800;
            white-space: nowrap;
        }
        .admin-account-commandbar {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: var(--space-2);
            margin-bottom: var(--space-2);
        }
        .admin-account-commandbar--creator {
            grid-template-columns: auto minmax(0, 1fr) auto;
        }
        .admin-account-commandbar--creator-link {
            grid-template-columns: minmax(0, 1fr);
            margin-bottom: 6px;
        }
        .admin-account-input {
            min-width: 0;
            width: 100%;
            padding: 8px 10px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border-default);
            background: var(--bg-base);
            color: var(--text-primary);
            font-size: 0.85rem;
        }
        .admin-account-select {
            min-width: 112px;
            padding: 8px 10px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border-default);
            background: var(--bg-base);
            color: var(--text-primary);
            font-size: 0.85rem;
            font-weight: 700;
        }
        .admin-account-select:focus {
            outline: none;
            border-color: var(--brand-hot-pink);
            box-shadow: 0 0 0 2px rgba(255, 105, 180, 0.16);
        }
        .admin-account-input:focus {
            outline: none;
            border-color: var(--brand-hot-pink);
            box-shadow: 0 0 0 2px rgba(255, 105, 180, 0.16);
        }
        .admin-account-status {
            min-height: 20px;
            margin: 6px 0 var(--space-2);
            font-size: 0.8rem;
            color: var(--text-muted);
        }
        .admin-account-status[data-tone="ok"] { color: var(--success); }
        .admin-account-status[data-tone="warn"] { color: var(--warning, #f59e0b); }
        .admin-account-status[data-tone="error"] { color: var(--error); }
        .admin-account-user-card {
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
            background: var(--bg-base);
            padding: var(--space-3);
        }
        .admin-account-user-card.is-disabled {
            border-color: rgba(239, 68, 68, 0.35);
            background: var(--error-muted);
        }
        .admin-account-user-main {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: var(--space-2);
            margin-bottom: var(--space-2);
        }
        .admin-account-user-main strong {
            min-width: 0;
            overflow-wrap: anywhere;
        }
        .admin-account-user-main code,
        .admin-account-creator-cell code {
            color: var(--text-muted);
            font-size: 0.72rem;
            overflow-wrap: anywhere;
        }
        .admin-account-pills,
        .admin-account-counts {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: var(--space-2);
        }
        .admin-account-pills > span,
        .admin-account-counts > span {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            border-radius: var(--radius-full);
            background: var(--bg-subtle);
            color: var(--text-secondary);
            font-size: 0.75rem;
        }
        .admin-account-kv {
            display: grid;
            grid-template-columns: max-content minmax(0, 1fr);
            gap: 6px var(--space-3);
            font-size: 0.78rem;
        }
        .admin-account-kv span {
            color: var(--text-muted);
        }
        .admin-account-kv strong {
            min-width: 0;
            font-weight: 500;
            overflow-wrap: anywhere;
        }
        .admin-account-user-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: var(--space-3);
        }
        .admin-account-user-actions .admin-btn-compact {
            min-width: 128px;
        }
        .admin-account-table-wrap {
            margin-top: var(--space-2);
        }
        .admin-table-account-creators th.sortable {
            cursor: pointer;
            user-select: none;
        }
        .admin-table-account-creators th.sortable:hover {
            color: var(--text-primary);
        }
        .admin-table-account-creators th.sortable.asc::after {
            content: ' ▴';
            font-size: 0.6rem;
            opacity: 0.7;
        }
        .admin-table-account-creators th.sortable.desc::after {
            content: ' ▾';
            font-size: 0.6rem;
            opacity: 0.7;
        }
        .admin-account-creator-cell {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }
        .admin-account-creator-cell a {
            color: var(--text-primary);
            font-weight: 600;
            text-decoration: none;
        }
        .admin-account-creator-cell a:hover {
            color: var(--brand-hot-pink);
        }
        .admin-creator-block-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
        }
        .admin-creator-block-actions .admin-btn-compact {
            min-width: 86px;
        }
        .admin-creator-control-state {
            display: flex;
            flex-direction: column;
            gap: 3px;
            min-width: 0;
        }
        .admin-creator-control-detail {
            color: var(--text-muted);
            font-size: 0.74rem;
            line-height: 1.25;
            max-width: 240px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .admin-creator-control-detail a {
            color: var(--brand-hot-pink);
            text-decoration: none;
        }
        .admin-creator-control-detail a:hover {
            text-decoration: underline;
        }
        .admin-creator-control-legacy code {
            width: max-content;
        }
        .admin-creator-control-select {
            min-width: 170px;
        }
        .admin-creator-control-redirect {
            min-width: min(220px, 100%);
        }
        .admin-card-account-tool--wide {
            grid-column: 1 / -1;
        }
        .admin-creator-admin-tabs-card {
            padding: 10px 12px;
        }
        .admin-creator-admin-subtabs {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
        }
        .admin-creator-admin-subtab {
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: var(--bg-subtle);
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 0.82rem;
            font-weight: 700;
            min-height: 34px;
            padding: 7px 12px;
        }
        .admin-creator-admin-subtab:hover {
            color: var(--text-primary);
            border-color: rgba(255, 255, 255, 0.18);
        }
        .admin-creator-admin-subtab.active {
            background: rgba(255, 71, 137, 0.14);
            border-color: rgba(255, 71, 137, 0.36);
            color: var(--text-primary);
        }
        .admin-creator-overview-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
            gap: 8px;
            margin: var(--space-2) 0;
        }
        .admin-creator-overview-stat {
            display: grid;
            gap: 4px;
            min-height: 96px;
            padding: 12px;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: rgba(255, 255, 255, 0.025);
        }
        .admin-creator-overview-stat span {
            color: var(--text-secondary);
            font-size: 0.76rem;
            font-weight: 800;
            line-height: 1.2;
            text-transform: uppercase;
        }
        .admin-creator-overview-stat strong {
            color: var(--text-primary);
            font-size: 1.55rem;
            line-height: 1;
        }
        .admin-creator-overview-stat small {
            color: var(--text-muted);
            font-size: 0.76rem;
            line-height: 1.25;
        }
        .admin-creator-overview-stat[data-tone="ok"] {
            border-color: rgba(67, 209, 127, 0.28);
            background: rgba(67, 209, 127, 0.07);
        }
        .admin-creator-overview-stat[data-tone="warn"] {
            border-color: rgba(255, 196, 87, 0.28);
            background: rgba(255, 196, 87, 0.07);
        }
        .admin-creator-overview-stat[data-tone="error"] {
            border-color: rgba(255, 71, 137, 0.3);
            background: rgba(255, 71, 137, 0.075);
        }
        .admin-creator-overview-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
            gap: 12px;
            margin-top: var(--space-2);
        }
        .admin-creator-overview-row h4 {
            margin: 0 0 8px;
            color: var(--text-secondary);
            font-size: 0.78rem;
            font-weight: 800;
            text-transform: uppercase;
        }
        .admin-creator-overview-attention,
        .admin-creator-overview-breakdown {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .admin-creator-overview-chip,
        .admin-creator-overview-source-row {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 6px 9px;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: var(--bg-subtle);
            color: var(--text-secondary);
            font-size: 0.78rem;
            line-height: 1.25;
        }
        .admin-creator-overview-chip strong,
        .admin-creator-overview-source-row strong {
            color: var(--text-primary);
        }
        .admin-creator-overview-chip[data-tone="ok"] {
            border-color: rgba(67, 209, 127, 0.26);
            color: rgba(186, 247, 210, 0.95);
        }
        .admin-creator-overview-chip[data-tone="warn"] {
            border-color: rgba(255, 196, 87, 0.3);
            color: rgba(255, 226, 165, 0.95);
        }
        .admin-creator-overview-chip[data-tone="error"] {
            border-color: rgba(255, 71, 137, 0.34);
            color: rgba(255, 188, 211, 0.96);
        }
        .admin-creator-overview-source-row {
            width: 100%;
            justify-content: space-between;
        }
        @media (max-width: 760px) {
            .admin-creator-overview-row {
                grid-template-columns: 1fr;
            }
            .admin-creator-overview-source-row {
                align-items: flex-start;
                flex-direction: column;
                gap: 4px;
            }
        }
        .admin-creator-admin-pager {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
            margin: var(--space-2) 0 0;
            color: var(--text-muted);
            font-size: 0.78rem;
        }
        .admin-creator-admin-pager-left,
        .admin-creator-admin-pager-pages {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
        }
        .admin-creator-admin-page-link {
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: var(--bg-subtle);
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 0.75rem;
            font-weight: 700;
            min-width: 30px;
            padding: 4px 8px;
        }
        .admin-creator-admin-page-link:hover {
            color: var(--text-primary);
            border-color: rgba(255, 255, 255, 0.18);
        }
        .admin-creator-admin-page-link.active {
            background: rgba(255, 71, 137, 0.14);
            border-color: rgba(255, 71, 137, 0.36);
            color: var(--text-primary);
        }
        .admin-creator-queue-state {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin: 0 0 var(--space-2);
            color: var(--text-muted);
            font-size: 0.78rem;
        }
        .admin-creator-queue-state span {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-full);
            background: var(--bg-subtle);
            color: var(--text-secondary);
            white-space: nowrap;
        }
        .admin-creator-queue-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .admin-creator-queue-actions .admin-btn-compact {
            min-width: 72px;
        }

        .view-creator-tools {
            min-height: calc(100vh - 92px);
            color: var(--text-primary);
        }
        .creator-tools-page {
            width: min(1240px, calc(100% - 32px));
            margin: 0 auto;
            padding: 0 0 42px;
        }
        .creator-tools-hero {
            margin-bottom: var(--space-3);
        }
        .creator-tools-toolbar {
            z-index: 8;
        }
        .creator-tools-summary {
            justify-content: stretch;
            flex: 1 1 auto;
            width: 100%;
        }
        #viewCreatorTools .creator-tools-summary-hero {
            display: grid;
            grid-template-columns: minmax(0, 1fr) max-content;
            grid-template-areas:
                "brand account"
                "section section";
            align-items: start;
            gap: 4px 12px;
            width: 100%;
            min-width: 0;
        }
        body.creator-tools-manage-surface-active #viewCreatorTools .creator-tools-summary-hero {
            grid-template-areas:
                "brand account"
                "section section"
                "manage-controls manage-controls";
        }
        #viewCreatorTools .creator-tools-summary-title-wrap {
            display: contents;
        }
        #viewCreatorTools .creator-tools-summary-title {
            font-size: clamp(0.62rem, 1vw, 0.78rem);
            font-weight: 900;
            letter-spacing: 0;
        }
        #viewCreatorTools .creator-tools-section-title {
            grid-area: section;
            margin: 0;
            color: var(--text-primary);
            font-size: clamp(1.04rem, 2.24vw, 1.82rem);
            font-weight: 950;
            letter-spacing: 0;
            line-height: 1.08;
        }
        .creator-tools-hero-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-3);
            min-width: 0;
        }
        #viewCreatorTools .creator-tools-title-wrap {
            grid-area: brand;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
        }
        .creator-tools-kicker {
            color: var(--brand-hot-pink);
            font-size: 0.78rem;
            font-weight: 800;
            text-transform: uppercase;
        }
        .creator-tools-hero h1 {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 9px;
            margin: 0;
            font-size: clamp(1.85rem, 3vw, 2.55rem);
            font-weight: 950;
            line-height: 1.08;
            letter-spacing: 0;
        }
        .creator-tools-version-badge {
            display: inline-flex;
            align-items: center;
            min-height: clamp(13px, 1.25vw, 16px);
            padding: 0 clamp(3px, 0.4vw, 4px);
            border: 1px solid rgba(45, 212, 191, 0.4);
            border-radius: 5px;
            background: rgba(45, 212, 191, 0.12);
            color: #5eead4;
            font-size: clamp(0.5rem, 0.82vw, 0.68rem);
            font-weight: 900;
            line-height: 1;
        }
        .creator-tools-hero p {
            max-width: 940px;
            margin: 0;
            color: var(--text-secondary);
            font-size: 0.9rem;
            line-height: 1.42;
        }
        .creator-tools-policy-tab-active .creator-tools-hero p,
        .creator-tools-changelog-tab-active .creator-tools-hero p {
            display: none;
        }
        .creator-tools-options {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--space-2);
            margin-bottom: var(--space-3);
        }
        .creator-tools-option {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: 5px;
            padding: 12px;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: var(--bg-elevated);
            color: var(--text-primary);
            text-align: left;
        }
        .creator-tools-option span {
            font-size: 0.98rem;
            font-weight: 800;
        }
        .creator-tools-option small {
            color: var(--text-muted);
            font-size: 0.8rem;
        }
        .creator-tools-option-points {
            display: grid;
            gap: 3px;
            line-height: 1.28;
        }
        .creator-tools-option-points span {
            display: block;
            font-size: inherit;
            font-weight: 600;
        }
        .creator-tools-option .creator-tools-option-verified {
            color: #22c55e;
            font-weight: 850;
        }
        .creator-tools-option.is-active {
            border-color: rgba(16, 185, 129, 0.45);
            background: rgba(16, 185, 129, 0.08);
        }
        .creator-tools-option.is-disabled {
            opacity: 0.78;
            cursor: not-allowed;
        }
        .creator-tools-option.is-disabled small {
            color: var(--text-secondary);
        }
        .creator-tools-panel {
            margin-bottom: var(--space-3);
            padding: var(--space-4);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
            background: var(--bg-elevated);
        }
        .creator-tools-running-banner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-3);
            margin-bottom: var(--space-3);
            padding: 10px 12px;
            border: 1px solid rgba(245, 158, 11, 0.45);
            border-radius: var(--radius-md);
            background: rgba(245, 158, 11, 0.12);
            color: var(--warning, #f59e0b);
            font-size: 0.86rem;
        }
        .creator-tools-running-banner strong {
            color: var(--warning, #f59e0b);
            font-weight: 900;
            white-space: nowrap;
        }
        .creator-tools-running-banner span {
            color: var(--text-primary);
            text-align: right;
            overflow-wrap: anywhere;
        }
        .creator-tools-workspace {
            display: grid;
            grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
            align-items: start;
            gap: var(--space-3);
        }
        .creator-tools-account-bar {
            display: grid;
            grid-template-columns: max-content minmax(0, 1fr);
            align-items: stretch;
            gap: var(--space-2);
            margin-top: var(--space-3);
        }
        .creator-tools-account-label {
            display: inline-flex;
            align-items: center;
            min-height: 40px;
            padding: 0 11px;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: rgba(255, 255, 255, 0.035);
            color: var(--text-muted);
            font-size: 0.76rem;
            font-weight: 900;
            letter-spacing: 0;
            text-transform: uppercase;
        }
        .creator-tools-mobile-sidebar-row {
            display: none;
        }
        .creator-tools-sidebar-toggle {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 40px;
            padding: 0 14px;
            border: 1px solid var(--border-default);
            border-radius: var(--radius-sm);
            background: var(--bg-base);
            color: var(--text-primary);
            font: inherit;
            font-size: 0.84rem;
            font-weight: 900;
            cursor: pointer;
        }
        .creator-tools-sidebar-toggle-icon {
            display: grid;
            gap: 3px;
            width: 16px;
            flex: 0 0 16px;
        }
        .creator-tools-sidebar-toggle-icon span {
            display: block;
            height: 2px;
            border-radius: 999px;
            background: currentColor;
        }
        .creator-tools-sidebar-backdrop {
            display: none;
        }
        .creator-tools-mobile-tabs {
            display: none;
        }
        .creator-tools-mobile-tab {
            min-height: 40px;
            padding: 0 12px;
            border: 1px solid var(--border-default);
            border-radius: var(--radius-sm);
            background: var(--bg-base);
            color: var(--text-secondary);
            font: inherit;
            font-size: 0.84rem;
            font-weight: 900;
            cursor: pointer;
        }
        .creator-tools-mobile-tab.is-active {
            border-color: rgba(255, 105, 180, 0.55);
            background: rgba(255, 105, 180, 0.14);
            color: var(--text-primary);
        }
        .creator-tools-main-panel {
            display: grid;
            gap: 8px;
            min-width: 0;
        }
        .creator-tools-main-surface,
        .creator-tools-manage-surface {
            display: grid;
            align-content: start;
            gap: 8px;
            min-width: 0;
        }
        .creator-tools-main-surface[hidden],
        .creator-tools-manage-surface[hidden] {
            display: none !important;
        }
        .creator-tools-manage-inline-mount {
            display: grid;
            min-width: 0;
        }
        .creator-tools-manage-surface .creator-tools-action-dialog {
            width: 100%;
            max-height: none;
            overflow: visible;
            padding: 0;
            gap: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            overscroll-behavior: auto;
        }
        .creator-tools-manage-surface .creator-tools-inline-manage-sticky {
            position: sticky;
            top: 0;
            z-index: 4;
            display: grid;
            gap: 10px;
            padding: 12px;
            border-bottom: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm) var(--radius-sm) 0 0;
            background: color-mix(in srgb, var(--bg-elevated) 96%, #000 4%);
            box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
        }
        .creator-tools-manage-surface .creator-tools-action-scroll {
            gap: 8px;
            overflow: visible;
            padding: 0;
            overscroll-behavior: auto;
        }
        .creator-tools-account-actions {
            display: grid;
            grid-template-columns: minmax(0, 1fr) max-content;
            align-items: stretch;
            gap: var(--space-2);
        }
        #viewCreatorTools .creator-tools-account-status-row {
            grid-area: account;
            justify-self: end;
            display: inline-flex;
            align-items: center;
            min-height: 16px;
            max-width: 100%;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: var(--text-secondary);
            font-size: 0.7rem;
            font-weight: 820;
            line-height: 1.1;
            text-align: right;
            white-space: normal;
        }
        #viewCreatorTools .creator-tools-account-status-row[data-state="anonymous"] {
            color: #facc15;
        }
        #viewCreatorTools .creator-tools-account-status-row[data-state="authenticated"] {
            color: var(--text-primary);
        }
        .creator-tools-manage-header-controls {
            grid-area: manage-controls;
            display: none;
            grid-template-columns: minmax(0, 1fr) max-content;
            align-items: center;
            gap: 6px;
            min-width: 0;
            padding: 2px 5px;
            border: 1px solid color-mix(in srgb, var(--border-subtle) 72%, var(--brand-hot-pink) 28%);
            border-radius: 7px;
            background: color-mix(in srgb, var(--bg-elevated) 86%, var(--brand-hot-pink) 14%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }
        .creator-tools-manage-header-controls.is-active:not([hidden]) {
            display: grid;
        }
        .creator-tools-selected-profile {
            min-width: 0;
            margin: 0;
            color: color-mix(in srgb, var(--brand-hot-pink) 72%, white 28%);
            font-size: 0.62rem;
            font-weight: 900;
            line-height: 1.15;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #viewCreatorTools #creatorToolsActionModalSubtitle.creator-tools-selected-profile {
            color: color-mix(in srgb, var(--brand-hot-pink) 72%, white 28%);
            font-size: 0.62rem;
            font-weight: 900;
            line-height: 1.1;
        }
        .creator-tools-manage-header-controls .creator-tools-manage-tabs {
            padding: 2px;
        }
        .creator-tools-manage-header-controls .creator-tools-manage-tabs button {
            min-height: 24px;
            padding: 0 8px;
            border-radius: 5px;
            font-size: 0.62rem;
        }
        .creator-tools-page-tabs {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            gap: 3px;
            padding: 3px;
            border: 1px solid color-mix(in srgb, var(--border-subtle) 74%, var(--brand-hot-pink) 26%);
            border-radius: 999px;
            background: color-mix(in srgb, var(--bg-subtle) 88%, transparent 12%);
        }
        .creator-tools-page-tab,
        .creator-tools-policy-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            min-height: 26px;
            padding: 0 11px;
            border: 0;
            border-radius: 999px;
            background: transparent;
            color: var(--text-secondary);
            box-shadow: none;
            font-size: 0.68rem;
            font-weight: 820;
            letter-spacing: 0;
            line-height: 1;
            text-decoration: none;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .creator-tools-page-tab.is-active {
            background: color-mix(in srgb, var(--brand-hot-pink) 18%, var(--bg-subtle) 82%);
            color: color-mix(in srgb, var(--brand-hot-pink) 72%, white 28%);
        }
        .creator-tools-page-tab:hover,
        .creator-tools-policy-link:hover {
            background: color-mix(in srgb, var(--brand-hot-pink) 11%, transparent 89%);
            color: var(--text-primary);
        }
        .creator-tools-drawer-trigger {
            grid-area: drawer-trigger;
            display: none;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-width: 0;
            min-height: 34px;
            padding: 0 10px;
            border: 1px solid color-mix(in srgb, var(--brand-hot-pink) 48%, var(--border-subtle) 52%);
            border-radius: 10px;
            background: color-mix(in srgb, var(--brand-hot-pink) 14%, var(--bg-subtle) 86%);
            color: var(--text-primary);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
            font: inherit;
            font-size: 0.74rem;
            font-weight: 880;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
        }
        .creator-tools-drawer-trigger:hover,
        .creator-tools-drawer-trigger:focus-visible,
        .creator-tools-drawer-trigger[aria-expanded="true"] {
            outline: none;
            border-color: color-mix(in srgb, var(--brand-hot-pink) 72%, var(--border-subtle) 28%);
            background: color-mix(in srgb, var(--brand-hot-pink) 20%, var(--bg-subtle) 80%);
        }
        .creator-tools-drawer-trigger-icon {
            display: inline-grid;
            gap: 3px;
            width: 14px;
            flex: 0 0 14px;
        }
        .creator-tools-drawer-trigger-icon span {
            display: block;
            height: 2px;
            border-radius: 2px;
            background: currentColor;
        }
        .creator-tools-profiles-banner {
            display: none;
        }
        .creator-tools-profiles-banner-title,
        .creator-tools-profiles-banner-meta {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .creator-tools-page-select {
            display: none;
        }
        .creator-tools-page-dropdown {
            display: none !important;
        }
        .creator-tools-page-dropdown-btn.admin-dropdown-btn {
            width: 126px;
            min-width: 0;
            height: 34px;
            border-radius: 10px;
            border: 1px solid color-mix(in srgb, var(--brand-hot-pink) 34%, var(--border-subtle) 66%);
            background: linear-gradient(
                180deg,
                color-mix(in srgb, var(--bg-subtle) 84%, #1a1b23 16%),
                color-mix(in srgb, var(--bg-subtle) 94%, #0f1015 6%)
            );
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
            color: var(--text-primary);
            padding: 7px 30px 7px 10px;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0;
            line-height: 1.1;
            white-space: nowrap;
        }
        .creator-tools-page-dropdown-btn.admin-dropdown-btn::after {
            right: 11px;
            border-top-color: rgba(235, 239, 246, 0.62);
            transform: translateY(-40%);
        }
        .creator-tools-page-dropdown-btn.admin-dropdown-btn:hover,
        .creator-tools-page-dropdown-btn.admin-dropdown-btn:focus,
        .creator-tools-page-dropdown-btn.admin-dropdown-btn:focus-visible,
        .creator-tools-page-dropdown-btn.admin-dropdown-btn:active {
            outline: none;
            border-color: color-mix(in srgb, var(--brand-hot-pink) 46%, var(--border-subtle) 54%);
            background: linear-gradient(
                180deg,
                color-mix(in srgb, var(--bg-subtle) 74%, rgba(255, 105, 180, 0.16) 26%),
                color-mix(in srgb, var(--bg-subtle) 90%, #0f1015 10%)
            );
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }
        .creator-tools-page-dropdown-text {
            display: inline-block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle;
        }
        .creator-tools-page-dropdown .admin-dropdown-menu {
            left: auto;
            right: 0;
            z-index: 80;
            min-width: 100%;
            border-radius: 10px;
            padding: 5px;
        }
        .creator-tools-page-dropdown .admin-dropdown-menu button {
            font-size: 0.77rem;
            font-weight: 700;
            padding: 7px 8px;
        }
        .creator-tools-page-panel[hidden] {
            display: none !important;
        }
        .creator-tools-policy-mount {
            min-width: 0;
        }
        .creator-tools-policy-mount .creator-policy-page {
            display: grid;
            gap: var(--space-4);
            width: 100%;
            max-width: 760px;
            margin-top: 0;
            margin-right: auto;
            margin-left: auto;
            padding-top: 0;
            padding-bottom: var(--space-6);
            text-align: left;
        }
        .creator-tools-policy-mount .creator-policy-header h1 {
            margin-bottom: var(--space-2);
            color: var(--text-primary);
            font-size: clamp(1.55rem, 4vw, 2.4rem);
            font-weight: 900;
            line-height: 1.08;
            letter-spacing: 0;
        }
        .creator-tools-policy-mount .creator-policy-floating-cta {
            display: none;
        }
        .creator-tools-tab-loading,
        .creator-tools-changelog-card {
            padding: var(--space-4);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
            background: var(--bg-elevated);
        }
        .creator-tools-tab-loading {
            color: var(--text-secondary);
            font-weight: 800;
        }
        .creator-tools-changelog-panel {
            width: 100%;
            max-width: 760px;
            margin-right: auto;
            margin-left: auto;
        }
        .creator-tools-changelog-card {
            display: grid;
            gap: var(--space-3);
        }
        .creator-tools-changelog-version {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            color: var(--text-muted);
            font-size: 0.78rem;
            font-weight: 900;
            text-transform: uppercase;
        }
        .creator-tools-changelog-version span {
            padding: 3px 7px;
            border: 1px solid rgba(255, 105, 180, 0.45);
            border-radius: var(--radius-sm);
            color: var(--brand-hot-pink);
        }
        .creator-tools-changelog-card h2 {
            margin: 0;
            font-size: clamp(1.25rem, 2vw, 1.65rem);
            line-height: 1.14;
            letter-spacing: 0;
        }
        .creator-tools-changelog-card p {
            margin: 0;
            color: var(--text-secondary);
            line-height: 1.55;
        }
        .creator-tools-changelog-card ul {
            display: grid;
            gap: 9px;
            margin: 0;
            padding-left: 18px;
            color: var(--text-primary);
            line-height: 1.45;
        }
        .creator-tools-changelog-note {
            padding-top: var(--space-2);
            border-top: 1px solid var(--border-subtle);
        }
        .creator-tools-history-panel {
            min-width: 0;
        }
        .creator-tools-sidebar {
            position: sticky;
            top: 12px;
            max-height: calc(100dvh - 24px);
            overflow-y: auto;
            align-content: start;
            gap: 10px;
            padding: 10px;
            background: rgba(8, 10, 16, 0.86);
        }
        .creator-tools-sidebar-close {
            display: none;
        }
        @media (min-width: 769px) {
            body.creator-tools-view-active {
                overflow: hidden;
                --characters-toolbar-offset: 0px;
            }
            body.creator-tools-view-active .mobile-scroll-container {
                position: fixed;
                inset: 0;
                overflow: hidden;
                -webkit-overflow-scrolling: touch;
                padding: calc(4rem - 4px) 1rem 1rem 1rem;
                box-sizing: border-box;
            }
            body.creator-tools-view-active .mobile-scroll-container > .container {
                height: 100%;
                min-height: 0;
                padding-top: 0;
                padding-bottom: 0;
                display: flex;
                flex-direction: column;
            }
            body.creator-tools-view-active #viewCreatorTools.view-creator-tools.active {
                flex: 1 1 auto;
                min-height: 0;
                height: 100%;
                padding-bottom: 0;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-page {
                display: grid;
                grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
                grid-template-rows: auto auto minmax(0, 1fr);
                column-gap: 12px;
                width: 100%;
                max-width: none;
                height: 100%;
                min-height: 0;
                padding: 0;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-toolbar {
                grid-column: 2;
                grid-row: 1;
                position: sticky;
                top: 0;
                margin-bottom: 0;
                padding: 8px 0 4px;
            }
            body.creator-tools-view-active #viewCreatorTools #creatorToolsMainTabPanel.is-active {
                display: contents;
            }
            body.creator-tools-view-active #viewCreatorTools #creatorToolsMainTabPanel.is-active .creator-tools-workspace {
                display: contents;
            }
            body.creator-tools-view-active #viewCreatorTools #creatorToolsOngoingSection.creator-tools-sidebar {
                grid-column: 1;
                grid-row: 1 / 4;
                position: static;
                top: auto;
                height: 100%;
                max-height: none;
                min-height: 0;
                margin-bottom: 0;
                overflow-y: auto;
                border-radius: 0;
                border-right: 1px solid var(--border-subtle);
            }
            body.creator-tools-view-active #viewCreatorTools #creatorToolsRunningBanner {
                grid-column: 2;
                grid-row: 2;
                margin: 0 0 10px;
            }
            body.creator-tools-view-active #viewCreatorTools #creatorToolsMainPanel {
                grid-column: 2;
                grid-row: 3;
                min-height: 0;
                overflow-x: hidden;
                overflow-y: auto;
                padding-right: 0;
                scrollbar-gutter: stable;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-policy-tab-panel.is-active,
            body.creator-tools-view-active #viewCreatorTools .creator-tools-changelog-panel.is-active {
                grid-column: 2;
                grid-row: 2 / 4;
                min-height: 0;
                overflow-x: hidden;
                overflow-y: auto;
                padding-right: 0;
                scrollbar-gutter: stable;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-policy-mount .creator-policy-page,
            body.creator-tools-view-active #viewCreatorTools .creator-tools-changelog-panel {
                max-width: 820px;
            }
        }
        .creator-tools-step-tabs {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 6px;
        }
        .creator-tools-step-tab {
            min-height: 34px;
            padding: 0 10px;
            border: 1px solid var(--border-default);
            border-radius: var(--radius-sm);
            background: var(--bg-base);
            color: var(--text-secondary);
            font-size: 0.78rem;
            font-weight: 900;
            line-height: 1;
            cursor: pointer;
        }
        .creator-tools-step-tab.is-active {
            border-color: rgba(255, 105, 180, 0.5);
            background: rgba(255, 105, 180, 0.12);
            color: var(--text-primary);
        }
        .creator-tools-step-tab:disabled,
        .creator-tools-step-tab.is-disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }
        .creator-tools-step-panel {
            margin-bottom: 0;
        }
        .creator-tools-main-subheader {
            display: flex;
            align-items: center;
            min-height: 38px;
            padding: 0 2px;
        }
        .creator-tools-main-subheader h2 {
            margin: 0;
            color: var(--text-primary);
            font-size: 1.08rem;
            font-weight: 920;
            letter-spacing: 0;
            line-height: 1.1;
        }
        .creator-tools-inline-manage-dialog #creatorToolsActionModalTitle {
            display: none;
        }
        .creator-tools-form-head {
            margin-bottom: var(--space-3);
        }
        .creator-tools-form-head h2 {
            margin: 0 0 6px;
            font-size: 1.15rem;
            letter-spacing: 0;
        }
        .creator-tools-form-head p {
            margin: 0;
            color: var(--text-secondary);
            line-height: 1.45;
        }
        .creator-tools-form {
            display: grid;
            gap: var(--space-3);
        }
        .creator-tools-claim-mode {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 6px;
        }
        .creator-tools-claim-mode button {
            min-height: 32px;
            padding: 0 10px;
            border: 1px solid var(--border-default);
            border-radius: var(--radius-sm);
            background: var(--bg-base);
            color: var(--text-secondary);
            font: inherit;
            font-size: 0.76rem;
            font-weight: 900;
            cursor: pointer;
        }
        .creator-tools-claim-mode button.is-active {
            border-color: rgba(255, 105, 180, 0.56);
            background: rgba(255, 105, 180, 0.14);
            color: var(--text-primary);
        }
        .creator-tools-field {
            display: grid;
            gap: 7px;
            color: var(--text-secondary);
            font-size: 0.84rem;
            font-weight: 700;
        }
        .creator-tools-field input,
        .creator-tools-field select,
        .creator-tools-field textarea {
            width: 100%;
            min-width: 0;
            padding: 10px 12px;
            border: 1px solid var(--border-default);
            border-radius: var(--radius-sm);
            background: var(--bg-base);
            color: var(--text-primary);
            font: inherit;
            font-weight: 500;
        }
        .creator-tools-field textarea {
            resize: vertical;
            line-height: 1.45;
        }
        .creator-tools-field input:focus,
        .creator-tools-field select:focus,
        .creator-tools-field textarea:focus {
            outline: none;
            border-color: var(--brand-hot-pink);
            box-shadow: 0 0 0 2px rgba(255, 105, 180, 0.16);
        }
        .creator-tools-field input[aria-invalid="true"],
        .creator-tools-field textarea[aria-invalid="true"] {
            border-color: var(--error);
            box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.14);
        }
        .creator-tools-field-hint {
            color: var(--text-muted);
            font-size: 0.76rem;
            font-weight: 600;
            line-height: 1.35;
        }
        .creator-tools-field-error {
            min-height: 1.05rem;
            color: var(--error);
            font-size: 0.76rem;
            font-weight: 700;
            line-height: 1.35;
        }
        .creator-tools-source-preview {
            display: grid;
            gap: 5px;
            padding: 10px 12px;
            border: 1px solid rgba(16, 185, 129, 0.36);
            border-radius: var(--radius-sm);
            background: rgba(16, 185, 129, 0.08);
        }
        .creator-tools-source-preview span {
            color: var(--text-muted);
            font-size: 0.68rem;
            font-weight: 800;
            line-height: 1;
            text-transform: uppercase;
        }
        .creator-tools-source-preview a {
            min-width: 0;
            color: var(--brand-hot-pink);
            font-size: 0.88rem;
            font-weight: 800;
            overflow-wrap: anywhere;
            text-decoration: none;
        }
        .creator-tools-status {
            min-height: 22px;
            color: var(--text-muted);
            font-size: 0.84rem;
        }
        .creator-tools-status[data-tone="ok"] { color: var(--success); }
        .creator-tools-status[data-tone="warn"] { color: var(--warning, #f59e0b); }
        .creator-tools-status[data-tone="error"] { color: var(--error); }
        .creator-tools-archive-offer {
            display: grid;
            grid-template-columns: minmax(0, 1fr) max-content;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border: 1px solid rgba(59, 130, 246, 0.38);
            border-radius: var(--radius-sm);
            background: rgba(59, 130, 246, 0.1);
            color: color-mix(in srgb, var(--info) 70%, white 30%);
            font-size: 0.82rem;
            font-weight: 780;
            line-height: 1.35;
        }
        .creator-tools-archive-offer .creator-tools-secondary-btn {
            min-height: 32px;
            white-space: nowrap;
        }
        .creator-tools-actions {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2);
        }
        .creator-tools-check-row {
            display: grid;
            grid-template-columns: max-content minmax(0, 1fr);
            align-items: stretch;
            gap: var(--space-2);
        }
        .creator-tools-primary-btn,
        .creator-tools-secondary-btn {
            min-height: 40px;
            padding: 0 14px;
            border-radius: var(--radius-sm);
            border: 1px solid transparent;
            font-weight: 800;
            cursor: pointer;
        }
        .creator-tools-primary-btn {
            background: var(--brand-hot-pink);
            color: #fff;
        }
        .creator-tools-secondary-btn {
            border-color: var(--border-default);
            background: var(--bg-base);
            color: var(--text-primary);
        }
        .creator-tools-danger-btn {
            min-height: 40px;
            padding: 0 14px;
            border: 1px solid rgba(239, 68, 68, 0.5);
            border-radius: var(--radius-sm);
            background: rgba(239, 68, 68, 0.14);
            color: #fecaca;
            font-weight: 850;
            cursor: pointer;
        }
        .creator-tools-danger-btn:hover {
            border-color: rgba(248, 113, 113, 0.78);
            background: rgba(239, 68, 68, 0.22);
            color: #ffffff;
        }
        .creator-tools-primary-btn:disabled,
        .creator-tools-secondary-btn:disabled,
        .creator-tools-danger-btn:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }
        .creator-tools-code-box {
            display: grid;
            gap: 4px;
            min-width: 0;
            padding: 7px 10px;
            border: 1px solid rgba(16, 185, 129, 0.42);
            border-radius: var(--radius-sm);
            background: rgba(16, 185, 129, 0.08);
        }
        .creator-tools-code-box span {
            color: var(--text-muted);
            font-size: 0.68rem;
            font-weight: 800;
            line-height: 1;
            text-transform: uppercase;
        }
        .creator-tools-code-box.is-disabled {
            border-color: var(--border-default);
            background: rgba(148, 163, 184, 0.08);
        }
        .creator-tools-code-box.is-disabled code {
            color: var(--text-muted);
        }
        .creator-tools-code-box code {
            display: block;
            min-width: 0;
            color: var(--text-primary);
            overflow-wrap: anywhere;
            font-size: 0.98rem;
            font-weight: 700;
        }
        .creator-tools-verify-panel {
            display: grid;
            gap: var(--space-3);
        }
        .creator-tools-verify-failure {
            display: grid;
            gap: 4px;
            padding: 12px;
            border: 1px solid rgba(245, 158, 11, 0.5);
            border-radius: var(--radius-sm);
            background: rgba(245, 158, 11, 0.12);
            color: var(--warning, #f59e0b);
        }
        .creator-tools-verify-failure strong {
            color: var(--warning, #f59e0b);
            font-size: 0.92rem;
            font-weight: 900;
            text-transform: uppercase;
        }
        .creator-tools-verify-failure span {
            color: var(--text-primary);
            font-size: 0.86rem;
            line-height: 1.42;
        }
        .creator-tools-verify-callout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) max-content;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-3);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: var(--bg-base);
        }
        .creator-tools-verify-callout p {
            margin: 0;
            color: var(--text-secondary);
            line-height: 1.45;
        }
        .creator-tools-history-head {
            display: grid;
            gap: 10px;
            margin-top: 0;
        }
        .creator-tools-drawer-handle {
            display: none;
        }
        .creator-tools-history-title-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
        }
        .creator-tools-history-title-copy {
            display: grid;
            min-width: 0;
            gap: 2px;
        }
        .creator-tools-history-head h3 {
            margin: 0;
            color: var(--text-primary);
            font-size: 0.88rem;
            font-weight: 950;
            letter-spacing: 0;
            text-transform: uppercase;
        }
        .creator-tools-sidebar-counts {
            color: var(--text-muted);
            font-size: 0.66rem;
            font-weight: 760;
            line-height: 1;
            white-space: nowrap;
        }
        .creator-tools-history-clear {
            padding: 0;
            border: 0;
            background: transparent;
            color: var(--text-muted);
            font: inherit;
            font-size: 0.72rem;
            font-weight: 800;
            cursor: pointer;
        }
        .creator-tools-history-clear:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }
        .creator-tools-history-clear:not(:disabled):hover {
            color: var(--brand-hot-pink);
        }
        .creator-tools-sidebar-nav {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 4px;
            padding: 4px;
            border: 1px solid color-mix(in srgb, var(--border-subtle) 78%, var(--brand-hot-pink) 22%);
            border-radius: var(--radius-sm);
            background: rgba(255, 255, 255, 0.03);
        }
        .creator-tools-sidebar-nav + .creator-tools-history-title-row {
            padding-top: 2px;
        }
        .creator-tools-sidebar-nav .creator-tools-page-tab {
            min-width: 0;
            width: 100%;
            min-height: 30px;
            padding: 0 7px;
            border-radius: 6px;
            font-size: 0.68rem;
            font-weight: 880;
            text-align: center;
        }
        .creator-tools-sidebar-nav .creator-tools-page-tab.is-active {
            background: color-mix(in srgb, var(--brand-hot-pink) 20%, var(--bg-subtle) 80%);
            color: color-mix(in srgb, var(--brand-hot-pink) 72%, white 28%);
        }
        .creator-tools-sidebar-stacks {
            display: grid;
            align-content: start;
            gap: 10px;
        }
        .creator-tools-sidebar-stack {
            display: grid;
            align-content: start;
            gap: 0;
            overflow: hidden;
            padding: 0;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: rgba(255, 255, 255, 0.025);
        }
        .creator-tools-sidebar-stack[hidden] {
            display: none;
        }
        .creator-tools-sidebar-stack h4 {
            margin: 0;
            padding: 8px 10px;
            border-bottom: 1px solid var(--border-subtle);
            background: rgba(251, 191, 36, 0.16);
            color: #facc15;
            font-size: 0.72rem;
            font-weight: 900;
            letter-spacing: 0;
            text-transform: uppercase;
        }
        .creator-tools-in-progress-stack h4 {
            background: rgba(251, 191, 36, 0.16);
            color: #facc15;
        }
        .creator-tools-verified-stack h4 {
            background: rgba(45, 212, 191, 0.13);
            color: #5eead4;
        }
        .creator-tools-sidebar-stack:nth-child(2) h4 {
            background: rgba(45, 212, 191, 0.13);
            color: #5eead4;
        }
        .creator-tools-sidebar-stack:nth-child(3) h4 {
            background: rgba(45, 212, 191, 0.13);
            color: #5eead4;
        }
        .creator-tools-in-progress-stack h4 {
            background: rgba(251, 191, 36, 0.16);
            color: #facc15;
        }
        .creator-tools-verified-stack h4 {
            background: rgba(45, 212, 191, 0.13);
            color: #5eead4;
        }
        .creator-tools-claim-stack {
            padding: 12px;
        }
        .creator-tools-claim-another {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            width: 100%;
            min-height: 34px;
            margin: 0;
            padding: 0 10px;
            border: 1px solid rgba(255, 105, 180, 0.52);
            border-radius: var(--radius-sm);
            background: rgba(255, 105, 180, 0.14);
            color: var(--text-primary);
            font: inherit;
            font-size: 0.76rem;
            font-weight: 900;
            cursor: pointer;
        }
        .creator-tools-claim-another i {
            font-size: 0.72rem;
            line-height: 1;
        }
        .creator-tools-claim-another:hover,
        .creator-tools-claim-another:focus-visible {
            border-color: rgba(255, 105, 180, 0.78);
            background: rgba(255, 105, 180, 0.2);
            outline: none;
        }
        .creator-tools-sidebar-stack p {
            margin: 0;
            padding: 10px 12px 0;
            color: var(--text-muted);
            font-size: 0.8rem;
            line-height: 1.35;
        }
        .creator-tools-empty {
            padding: 9px;
            border: 1px dashed var(--border-subtle);
            border-radius: var(--radius-sm);
            color: var(--text-muted);
            font-size: 0.76rem;
            text-align: center;
        }
        .creator-tools-smallprint {
            font-size: 0.84rem;
        }
        .creator-tools-request-list {
            display: grid;
            gap: 6px;
            padding: 8px;
        }
        .creator-tools-request-card {
            display: grid;
            gap: 5px;
            padding: 8px;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: var(--bg-base);
        }
        .creator-tools-compact-request {
            grid-template-columns: minmax(0, 1fr);
            align-items: start;
        }
        .creator-tools-compact-main {
            display: grid;
            gap: 4px;
            min-width: 0;
        }
        .creator-tools-compact-top {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
            min-width: 0;
        }
        .creator-tools-compact-name {
            flex: 1 1 auto;
            min-width: 0;
            color: var(--text-primary);
            font-size: 0.82rem;
            font-weight: 850;
            line-height: 1.15;
            overflow-wrap: anywhere;
        }
        .creator-tools-compact-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            align-self: flex-start;
            flex: 0 1 230px;
            max-width: min(64%, 230px);
            min-width: 0;
            min-height: 22px;
            padding: 3px 8px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.055);
            color: var(--text-secondary);
            font-size: 0.64rem;
            font-weight: 850;
            line-height: 1.12;
            overflow: visible;
            overflow-wrap: anywhere;
            text-align: center;
            white-space: normal;
        }
        .creator-tools-compact-badge[data-tone="ok"] {
            border-color: rgba(45, 212, 191, 0.42);
            background: rgba(45, 212, 191, 0.12);
            color: #8cf3df;
        }
        .creator-tools-compact-badge[data-tone="working"] {
            border-color: rgba(96, 165, 250, 0.42);
            background: rgba(59, 130, 246, 0.13);
            color: #bfdbfe;
        }
        .creator-tools-compact-badge[data-tone="warn"] {
            border-color: rgba(245, 158, 11, 0.5);
            background: rgba(245, 158, 11, 0.13);
            color: #fcd34d;
        }
        .creator-tools-compact-badge[data-tone="danger"] {
            border-color: rgba(248, 113, 113, 0.52);
            background: rgba(248, 113, 113, 0.13);
            color: #fecaca;
        }
        .creator-tools-compact-badge[data-tone="redirect"] {
            border-color: rgba(255, 105, 180, 0.46);
            background: rgba(255, 105, 180, 0.13);
            color: #ffb3d9;
        }
        .creator-tools-compact-badge[data-tone="pending"] {
            border-color: rgba(148, 163, 184, 0.36);
            background: rgba(148, 163, 184, 0.12);
            color: #d8dee9;
        }
        .creator-tools-compact-meta {
            display: grid;
            gap: 2px;
            color: var(--text-muted);
            font-size: 0.7rem;
            font-weight: 700;
            line-height: 1.25;
        }
        .creator-tools-compact-meta span {
            min-width: 0;
            overflow: visible;
            overflow-wrap: anywhere;
            text-overflow: clip;
            white-space: normal;
        }
        .creator-tools-compact-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 2px;
        }
        .creator-tools-compact-actions .creator-tools-primary-btn,
        .creator-tools-compact-actions .creator-tools-secondary-btn,
        .creator-tools-compact-actions .creator-tools-danger-btn,
        .creator-tools-compact-actions .creator-tools-status-change {
            width: auto;
            min-height: 26px;
            padding: 0 8px;
            font-size: 0.68rem;
        }
        .creator-tools-request-card.is-clickable {
            cursor: pointer;
        }
        .creator-tools-request-card.is-clickable:hover,
        .creator-tools-request-card.is-clickable:focus-visible {
            border-color: rgba(255, 105, 180, 0.42);
            outline: none;
        }
        .creator-tools-request-card.is-selected {
            border-color: rgba(255, 105, 180, 0.62);
            background: rgba(255, 105, 180, 0.09);
        }
        .creator-tools-request-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: var(--space-2);
        }
        .creator-tools-request-title {
            min-width: 0;
            font-weight: 800;
            font-size: 0.9rem;
            overflow-wrap: anywhere;
        }
        .creator-tools-request-summary {
            display: flex;
            flex-wrap: wrap;
            gap: 4px 8px;
            color: var(--text-muted);
            font-size: 0.78rem;
            font-weight: 700;
        }
        .creator-tools-request-meta {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
            margin: 0;
        }
        .creator-tools-history-panel .creator-tools-request-meta {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .creator-tools-request-meta div {
            min-width: 0;
        }
        .creator-tools-request-meta dt {
            margin: 0 0 3px;
            color: var(--text-muted);
            font-size: 0.68rem;
            font-weight: 800;
            line-height: 1;
            text-transform: uppercase;
        }
        .creator-tools-request-meta dd {
            min-width: 0;
            margin: 0;
            color: var(--text-secondary);
            font-size: 0.82rem;
            overflow-wrap: anywhere;
        }
        .creator-tools-badge {
            display: inline-flex;
            align-items: center;
            padding: 3px 8px;
            border-radius: var(--radius-full);
            background: var(--bg-subtle);
            color: var(--text-secondary);
            font-size: 0.74rem;
            font-weight: 800;
            white-space: nowrap;
        }
        .creator-tools-request-card code {
            color: var(--text-secondary);
            overflow-wrap: anywhere;
        }
        .creator-tools-request-links {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2);
            font-size: 0.82rem;
        }
        .creator-tools-request-links a {
            color: var(--brand-hot-pink);
            text-decoration: none;
        }
        .creator-tools-state {
            display: grid;
            grid-template-columns: minmax(0, 1fr) max-content;
            align-items: center;
            gap: 6px 8px;
            padding: 8px 10px;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: rgba(255, 255, 255, 0.035);
        }
        .creator-tools-state.is-chosen {
            border-color: rgba(45, 212, 191, 0.28);
            background: rgba(45, 212, 191, 0.07);
        }
        .creator-tools-state-title {
            color: var(--text-primary);
            font-size: 0.82rem;
            font-weight: 850;
        }
        .creator-tools-state-main {
            display: grid;
            gap: 2px;
            min-width: 0;
        }
        .creator-tools-state-label {
            color: var(--text-muted);
            font-size: 0.62rem;
            font-weight: 900;
            line-height: 1;
        }
        .creator-tools-status-change {
            min-height: 30px;
            padding: 0 10px;
            border: 1px solid rgba(255, 45, 154, 0.58);
            border-radius: var(--radius-sm);
            background: var(--brand-hot-pink);
            color: #ffffff;
            font-size: 0.74rem;
            font-weight: 850;
            cursor: pointer;
            white-space: nowrap;
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
        }
        .creator-tools-status-change:hover {
            border-color: rgba(255, 90, 179, 0.85);
            background: var(--accent-hover);
        }
        .creator-tools-state-detail {
            grid-column: 1 / -1;
            display: flex;
            flex-wrap: wrap;
            gap: 5px 8px;
            color: var(--text-muted);
            font-size: 0.76rem;
            line-height: 1.35;
        }
        .creator-tools-state-detail a {
            color: var(--brand-hot-pink);
            overflow-wrap: anywhere;
            text-decoration: none;
        }
        .creator-tools-inline-code {
            color: var(--brand-hot-pink);
            font-family: var(--font-mono, monospace);
            font-weight: 800;
            overflow-wrap: anywhere;
        }
        .creator-tools-manage-tabs {
            display: inline-grid;
            grid-auto-flow: column;
            justify-self: end;
            flex: 0 0 auto;
            gap: 3px;
            padding: 3px;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: var(--bg-base);
        }
        .creator-tools-manage-tabs button {
            min-height: 30px;
            padding: 0 10px;
            border: 0;
            border-radius: 6px;
            background: transparent;
            color: var(--text-muted);
            font: inherit;
            font-size: 0.76rem;
            font-weight: 850;
            cursor: pointer;
            white-space: nowrap;
        }
        .creator-tools-manage-tabs button.is-active {
            background: var(--brand-hot-pink);
            color: #fff;
        }
        .creator-tools-manage-tabs-strip {
            display: none;
        }
        .creator-tools-manage-tabs-mobile {
            display: none;
        }
        .creator-tools-manage-panel {
            display: none;
        }
        .creator-tools-manage-panel.is-active {
            display: grid;
            gap: var(--space-3);
        }
        .creator-tools-profile-text[hidden],
        .creator-tools-profile-text:not(.is-active) {
            display: none;
        }
        .creator-tools-profile-text {
            gap: 12px;
            padding: 12px;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: rgba(255, 255, 255, 0.035);
        }
        .creator-tools-profile-text-head,
        .creator-tools-profile-text-row-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
        }
        .creator-tools-profile-text-head span,
        .creator-tools-profile-text-row-head span {
            color: var(--text-secondary);
            font-size: 0.82rem;
            font-weight: 900;
        }
        .creator-tools-help {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            margin-left: 4px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
            color: var(--text-muted);
            font-size: 0.68rem;
            font-weight: 900;
            line-height: 1;
            cursor: help;
            vertical-align: 1px;
        }
        .creator-tools-help:hover,
        .creator-tools-help:focus-visible {
            border-color: rgba(255, 105, 180, 0.52);
            color: var(--text-primary);
            outline: none;
        }
        .creator-tools-profile-text-head small {
            display: block;
            margin-top: 3px;
            color: var(--text-muted);
            font-size: 0.74rem;
            font-weight: 650;
            line-height: 1.3;
        }
        .creator-tools-style-toggle {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: var(--text-secondary);
            font-size: 0.78rem;
            font-weight: 850;
            white-space: nowrap;
            cursor: pointer;
        }
        .creator-tools-style-toggle input {
            width: 16px;
            height: 16px;
            accent-color: var(--brand-hot-pink);
        }
        .creator-tools-profile-text-row {
            display: grid;
            gap: 8px;
        }
        .creator-tools-load-original {
            justify-self: start;
            min-height: 28px;
            padding: 0 9px;
            border: 1px solid var(--border-default);
            border-radius: var(--radius-sm);
            background: var(--bg-base);
            color: var(--text-secondary);
            font: inherit;
            font-size: 0.74rem;
            font-weight: 850;
            cursor: pointer;
        }
        .creator-tools-load-original[hidden] {
            display: none;
        }
        .creator-tools-load-original:disabled {
            opacity: 0.48;
            cursor: not-allowed;
        }
        .creator-tools-profile-text-row textarea,
        .creator-tools-profile-text-row input {
            width: 100%;
            min-width: 0;
            padding: 10px 12px;
            border: 1px solid var(--border-default);
            border-radius: var(--radius-sm);
            background: var(--bg-base);
            color: var(--text-primary);
            font: inherit;
            font-size: 0.84rem;
            font-weight: 550;
            line-height: 1.45;
        }
        .creator-tools-profile-text-row textarea {
            resize: vertical;
        }
        .creator-tools-profile-text-row textarea:focus,
        .creator-tools-profile-text-row input:focus {
            outline: none;
            border-color: var(--brand-hot-pink);
            box-shadow: 0 0 0 2px rgba(255, 105, 180, 0.16);
        }
        .creator-tools-profile-text-row textarea[aria-invalid="true"],
        .creator-tools-profile-text-row input[aria-invalid="true"] {
            border-color: var(--error);
            box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.14);
        }
        .creator-tools-segmented {
            display: inline-grid;
            grid-auto-flow: column;
            gap: 2px;
            padding: 2px;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: var(--bg-base);
        }
        .creator-tools-segmented button {
            min-height: 28px;
            padding: 0 9px;
            border: 0;
            border-radius: 6px;
            background: transparent;
            color: var(--text-muted);
            font: inherit;
            font-size: 0.74rem;
            font-weight: 850;
            cursor: pointer;
        }
        .creator-tools-segmented button.is-active {
            background: var(--brand-hot-pink);
            color: #fff;
        }
        .creator-tools-action-modal {
            position: fixed;
            inset: 0;
            z-index: 16000;
            align-items: center;
            justify-content: center;
            padding: 20px;
            overscroll-behavior: contain;
            touch-action: auto;
        }
        .creator-tools-action-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.68);
            touch-action: none;
        }
        .creator-tools-action-dialog {
            position: relative;
            display: grid;
            gap: var(--space-3);
            width: min(760px, 100%);
            max-height: calc(100dvh - 40px);
            overflow: auto;
            padding: var(--space-4);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-md);
            background: var(--bg-elevated);
            box-shadow: var(--shadow-lg);
            overscroll-behavior: contain;
        }
        #creatorToolsActionModal .creator-tools-action-dialog {
            grid-template-rows: auto minmax(0, 1fr);
            overflow: hidden;
        }
        .creator-tools-action-scroll {
            display: grid;
            align-content: start;
            gap: var(--space-3);
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            padding-right: 4px;
            overscroll-behavior: contain;
            touch-action: pan-y;
            -webkit-overflow-scrolling: touch;
        }
        .creator-tools-action-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-3);
        }
        .creator-tools-action-head > div:first-child {
            min-width: 0;
        }
        .creator-tools-action-head h2 {
            margin: 0 0 4px;
            font-size: 1.2rem;
            letter-spacing: 0;
        }
        .creator-tools-action-head p {
            margin: 0;
            color: var(--text-secondary);
            font-size: 0.8rem;
            font-weight: 760;
            line-height: 1.25;
            overflow-wrap: anywhere;
        }
        .creator-tools-inline-manage-dialog #creatorToolsActionModalSubtitle {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            max-width: 100%;
            min-height: 30px;
            padding: 4px 9px;
            border: 1px solid color-mix(in srgb, var(--brand-hot-pink) 44%, var(--border-subtle) 56%);
            border-radius: 999px;
            background: color-mix(in srgb, var(--brand-hot-pink) 13%, var(--bg-subtle) 87%);
            color: var(--text-primary);
            font-size: 0.78rem;
            font-weight: 900;
            line-height: 1.15;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }
        .creator-tools-action-close {
            width: 44px;
            height: 44px;
            flex: 0 0 44px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: var(--text-primary);
            font-size: 2.55rem;
            font-weight: 500;
            line-height: 0.82;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color var(--transition-fast), transform var(--transition-fast);
        }
        .creator-tools-action-close:hover {
            color: var(--text-primary);
            transform: scale(1.05);
        }
        @media (min-width: 769px) {
            #creatorToolsActionModal .creator-tools-action-dialog {
                width: min(780px, calc(100vw - 40px));
                height: min(720px, calc(100dvh - 40px));
                max-height: none;
            }
            #creatorToolsActionModal .creator-tools-inline-manage-sticky {
                flex: 0 0 auto;
            }
        }
        .creator-tools-anon-gate-dialog {
            width: min(540px, 100%);
        }
        .creator-tools-restore-dialog {
            width: min(560px, 100%);
        }
        .creator-tools-restore-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--space-3);
        }
        .creator-tools-restore-fieldset {
            display: grid;
            gap: var(--space-2);
            min-width: 0;
            margin: 0;
            padding: var(--space-3);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-sm);
            background: var(--bg-secondary);
        }
        .creator-tools-restore-fieldset legend {
            padding: 0 4px;
            color: var(--text-secondary);
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0;
            text-transform: uppercase;
        }
        .creator-tools-restore-choice {
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 34px;
            color: var(--text-primary);
            font-size: 0.9rem;
            font-weight: 700;
        }
        .creator-tools-restore-choice input {
            width: 16px;
            height: 16px;
            flex: 0 0 16px;
            margin: 0;
        }
        .creator-tools-restore-redirect {
            display: grid;
            gap: 6px;
            color: var(--text-secondary);
            font-size: 0.82rem;
            font-weight: 800;
        }
        .creator-tools-restore-redirect[hidden] {
            display: none;
        }
        .creator-tools-restore-redirect input {
            width: 100%;
            min-height: 42px;
            padding: 10px 12px;
            border: 1px solid var(--border-default);
            border-radius: var(--radius-sm);
            background: var(--bg-primary);
            color: var(--text-primary);
            font: inherit;
        }
        .admin-creator-restore-select,
        .admin-creator-restore-redirect {
            width: min(100%, 220px);
            margin: 2px 0;
        }
        .admin-creator-restore-redirect[hidden] {
            display: none;
        }
        .creator-tools-anon-gate-actions {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--space-2);
        }
        .creator-tools-anon-gate-actions .creator-tools-primary-btn,
        .creator-tools-anon-gate-actions .creator-tools-secondary-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            text-decoration: none;
        }
        .creator-tools-anon-gate-note {
            margin: -4px 0 0;
            color: var(--text-muted);
            font-size: 0.8rem;
            font-weight: 650;
            line-height: 1.35;
        }
        @media (max-width: 768px) {
            .creator-tools-page {
                width: min(100% - 20px, 980px);
                padding-top: 0;
            }
            .creator-tools-toolbar {
                position: sticky;
                top: 0;
                z-index: 30;
                margin-bottom: 10px;
                padding: 6px 0 8px;
                background: color-mix(in srgb, var(--bg-primary) 88%, transparent 12%);
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }
            .creator-tools-summary-hero {
                display: grid;
                grid-template-columns: minmax(0, 1fr) max-content;
                grid-template-areas:
                    "brand account"
                    "section drawer-trigger";
                align-items: start;
                gap: 4px 8px;
            }
            .creator-tools-summary-title-wrap {
                display: contents;
            }
            .creator-tools-title-wrap {
                grid-area: brand;
                justify-content: flex-start;
                min-width: 0;
            }
            .creator-tools-section-title {
                grid-area: section;
                display: block;
                min-width: 0;
                overflow: hidden;
                text-align: left;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 1.35rem;
            }
            .creator-tools-summary-title {
                font-size: 0.61rem;
                white-space: nowrap;
            }
            .creator-tools-version-badge {
                min-height: 12px;
                padding: 0 4px;
                font-size: 0.48rem;
            }
            .creator-tools-options {
                grid-template-columns: 1fr;
            }
            .creator-tools-running-banner {
                display: flex;
                flex-direction: column;
                align-items: stretch;
            }
            .creator-tools-workspace {
                display: block;
                position: relative;
            }
            .creator-tools-running-banner span {
                text-align: left;
            }
            .creator-tools-hero-top {
                gap: var(--space-2);
                align-items: flex-start;
                flex-direction: column;
            }
            .creator-tools-page-tabs {
                display: none;
            }
            .creator-tools-page-tab,
            .creator-tools-hero-top .creator-tools-policy-link {
                flex: 1 1 0;
                min-height: 34px;
                padding: 0 9px;
                font-size: 0.74rem;
            }
            .creator-tools-account-bar {
                grid-template-columns: max-content minmax(0, 1fr);
                gap: var(--space-2);
            }
            .creator-tools-account-label {
                grid-column: 1 / -1;
                min-height: 30px;
                justify-content: center;
                padding: 0 10px;
                font-size: 0.7rem;
            }
            .creator-tools-sidebar-toggle {
                display: inline-flex;
                grid-area: profile-list;
                min-width: 0;
                min-height: 34px;
                padding: 0 9px;
                border-color: rgba(255, 105, 180, 0.52);
                background: rgba(255, 105, 180, 0.14);
                font-size: 0.72rem;
                box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
            }
            .creator-tools-sidebar-toggle::before {
                content: "<-";
                font-weight: 950;
            }
            .creator-tools-sidebar-toggle-icon {
                display: none;
            }
            .creator-tools-page-select {
                grid-area: section-select;
                display: block;
                width: min(32vw, 118px);
                min-height: 34px;
                padding: 0 8px;
                border: 1px solid color-mix(in srgb, var(--border-subtle) 74%, var(--brand-hot-pink) 26%);
                border-radius: var(--radius-sm);
                background: var(--bg-base);
                color: var(--text-primary);
                font: inherit;
                font-size: 0.72rem;
                font-weight: 850;
            }
            .creator-tools-account-status-row {
                grid-area: account;
                justify-self: end;
                max-width: none;
                min-height: 0;
                padding: 0;
                border: 0;
                border-radius: 0;
                background: transparent;
                font-size: 0.66rem;
                line-height: 1.15;
                text-align: right;
            }
            .creator-tools-account-status-row[data-state="anonymous"],
            .creator-tools-account-status-row[data-state="authenticated"] {
                border: 0;
                background: transparent;
            }
            .creator-tools-account-actions {
                grid-template-columns: 1fr;
            }
            .creator-tools-sidebar-backdrop {
                position: fixed;
                inset: 0;
                z-index: 15950;
                display: block;
                border: 0;
                background: rgba(0, 0, 0, 0.58);
                opacity: 0;
                pointer-events: none;
                visibility: hidden;
                transition: opacity var(--transition-fast), visibility var(--transition-fast);
            }
            .creator-tools-page.is-sidebar-open .creator-tools-sidebar-backdrop {
                opacity: 1;
                pointer-events: auto;
                visibility: visible;
            }
            #creatorToolsOngoingSection.creator-tools-sidebar {
                position: fixed;
                inset: 0 auto 0 0;
                z-index: 16000;
                width: min(86vw, 340px);
                max-height: none;
                overflow-y: auto;
                border-radius: 0 var(--radius-md) var(--radius-md) 0;
                box-shadow: 18px 0 44px rgba(0, 0, 0, 0.38);
                transform: translateX(-105%);
                transition: transform var(--transition-fast);
            }
            .creator-tools-page.is-sidebar-open #creatorToolsOngoingSection.creator-tools-sidebar {
                transform: translateX(0);
            }
            .creator-tools-sidebar-close {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-height: 30px;
                padding: 0 9px;
                border: 1px solid var(--border-default);
                border-radius: var(--radius-sm);
                background: var(--bg-base);
                color: var(--text-secondary);
                font: inherit;
                font-size: 0.76rem;
                font-weight: 850;
                cursor: pointer;
            }
            body.creator-tools-sidebar-open {
                overflow: hidden;
            }
            .creator-tools-step-tabs {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 6px;
            }
            .creator-tools-step-tab {
                min-height: 34px;
                padding: 0 7px;
                font-size: 0.68rem;
                line-height: 1.05;
            }
            .creator-tools-main-subheader {
                min-height: 34px;
            }
            .creator-tools-main-subheader h2 {
                font-size: 0.98rem;
            }
            .creator-tools-panel {
                padding: var(--space-3);
            }
            .creator-tools-actions,
            .creator-tools-check-row,
            .creator-tools-archive-offer,
            .creator-tools-verify-callout,
            .creator-tools-request-top,
            .creator-tools-profile-text-head,
            .creator-tools-profile-text-row-head {
                display: flex;
                flex-direction: column;
                align-items: stretch;
            }
            .creator-tools-style-toggle,
            .creator-tools-segmented {
                align-self: flex-start;
            }
            .creator-tools-action-head {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                gap: 8px;
            }
            .creator-tools-manage-tabs {
                width: 100%;
                grid-auto-flow: column;
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .creator-tools-manage-tabs button {
                min-height: 28px;
                padding: 0 7px;
                font-size: 0.66rem;
            }
            .creator-tools-manage-header-controls.is-active:not([hidden]) {
                display: block;
                padding: 1px 0 0;
                border: 0;
                border-radius: 0;
                background: transparent;
                box-shadow: none;
            }
            .creator-tools-selected-profile {
                color: color-mix(in srgb, var(--brand-hot-pink) 78%, white 22%);
                font-size: 0.65rem;
                line-height: 1.1;
            }
            #viewCreatorTools #creatorToolsActionModalSubtitle.creator-tools-selected-profile {
                color: color-mix(in srgb, var(--brand-hot-pink) 78%, white 22%);
                font-size: 0.58rem;
                line-height: 1.08;
            }
            .creator-tools-manage-tabs-desktop {
                display: none;
            }
            .creator-tools-manage-tabs-strip {
                display: grid;
                position: sticky;
                top: 68px;
                z-index: 45;
                align-self: start;
                justify-self: stretch;
                margin: 0;
                padding: 0;
                background: var(--bg-primary);
            }
            .creator-tools-manage-tabs-mobile {
                display: grid;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-manage-surface .creator-tools-action-scroll {
                gap: 4px;
            }
            .creator-tools-request-meta {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .creator-tools-primary-btn,
            .creator-tools-secondary-btn,
            .creator-tools-danger-btn {
                width: 100%;
            }
            .creator-tools-compact-actions .creator-tools-primary-btn,
            .creator-tools-compact-actions .creator-tools-secondary-btn,
            .creator-tools-compact-actions .creator-tools-danger-btn,
            .creator-tools-compact-actions .creator-tools-status-change {
                width: auto;
            }
            .creator-tools-state {
                grid-template-columns: 1fr;
            }
            .creator-tools-status-change {
                width: 100%;
            }
            .creator-tools-action-modal {
                align-items: flex-end;
                padding: 0;
            }
            .creator-tools-action-dialog {
                width: 100%;
                max-height: calc(100dvh - 18px);
                border-radius: var(--radius-md) var(--radius-md) 0 0;
            }
            .creator-tools-restore-grid {
                grid-template-columns: 1fr;
            }
            #creatorToolsActionModal .creator-tools-action-dialog {
                height: calc(100dvh - 18px);
            }
            .creator-tools-action-scroll {
                padding-right: 0;
            }
        }
        
        /* Browser Actions */
        .admin-browser-actions {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            margin-bottom: 0;
            padding: var(--space-2) var(--space-3);
            background: var(--bg-elevated);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
        }
        .admin-browser-label {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-right: var(--space-2);
        }
        .admin-browser-btn {
            padding: 4px 12px;
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--text-primary);
            background: var(--bg-subtle);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .admin-browser-btn:hover:not(:disabled) {
            background: var(--bg-hover);
            border-color: var(--border-strong);
        }
        .admin-browser-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .admin-browser-btn-danger:hover:not(:disabled) {
            background: var(--error-muted);
            color: var(--error);
            border-color: var(--error);
        }
        
        /* Sessions Section */
        .admin-sessions-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-3);
            margin-bottom: var(--space-2);
            flex-wrap: wrap;
        }
        .admin-sessions-title {
            flex: 1;
            min-width: 0;
        }
        .admin-sessions-title .admin-card-title {
            margin: 0 0 2px 0;
            padding: 0;
            border: none;
            font-size: 0.95rem;
        }
        .admin-sessions-subtitle {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin: 0;
        }
        .admin-sessions-actions {
            display: flex;
            gap: var(--space-2);
            flex-shrink: 0;
            align-items: center;
        }
        /* Compact toolbar buttons */
        .admin-btn-compact {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 10px;
            font-size: 0.75rem;
            font-weight: 500;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border-default);
            background: var(--bg-subtle);
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .admin-btn-compact:hover:not(:disabled) {
            background: var(--bg-hover);
            border-color: var(--border-strong);
        }
        .admin-btn-compact:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .admin-btn-compact-icon {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
        }
        .admin-btn-save-all {
            background: var(--success);
            color: #fff;
            border-color: var(--success);
        }
        .admin-btn-save-all:hover:not(:disabled) {
            background: #16a34a;
            border-color: #16a34a;
        }
        .admin-btn-refresh {
            background: var(--bg-subtle);
            color: var(--text-secondary);
        }
        .admin-btn-run-now {
            border-color: rgba(236, 72, 153, 0.44);
            background: rgba(236, 72, 153, 0.12);
            color: #f9a8d4;
        }
        .admin-btn-run-now:hover:not(:disabled) {
            border-color: rgba(236, 72, 153, 0.66);
            background: rgba(236, 72, 153, 0.18);
        }
        .admin-btn-warning {
            border-color: rgba(245, 158, 11, 0.42);
            background: rgba(245, 158, 11, 0.12);
            color: var(--warning, #f59e0b);
        }
        .admin-btn-danger {
            border-color: rgba(248, 113, 113, 0.38);
            color: #fecaca;
            background: rgba(248, 113, 113, 0.10);
        }
        .admin-btn-danger:hover:not(:disabled) {
            border-color: rgba(248, 113, 113, 0.62);
            background: rgba(248, 113, 113, 0.16);
        }
        
        /* Sessions Table */
        .admin-table-sessions {
            font-size: 0.82rem;
        }
        .admin-table-sessions th {
            font-weight: 600;
            color: var(--text-muted);
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            padding: 0.42rem 0.45rem;
        }
        .admin-table-sessions th.sortable {
            cursor: pointer;
            user-select: none;
        }
        .admin-table-sessions th.sortable:hover {
            color: var(--text-primary);
        }
        .admin-table-sessions th.sortable.asc::after {
            content: ' ▴';
            font-size: 0.6rem;
            opacity: 0.7;
        }
        .admin-table-sessions th.sortable.desc::after {
            content: ' ▾';
            font-size: 0.6rem;
            opacity: 0.7;
        }
        .admin-table-wrap .admin-table.admin-table-sessions td {
            padding: 0.28rem 0.45rem;
        }
        .admin-table-sessions .col-session { width: 100px; min-width: 92px; max-width: 124px; }
        .admin-table-sessions .col-email { min-width: 100px; max-width: 160px; }
        .admin-table-sessions .col-status { width: 115px; min-width: 115px; }
        .admin-table-sessions .col-created { width: 140px; min-width: 140px; }
        .admin-table-sessions .col-verified { width: 140px; min-width: 140px; }
        .admin-table-sessions .col-visibility { width: 100px; min-width: 100px; }
        .admin-table-sessions .col-purpose { width: 110px; min-width: 110px; }
        .admin-table-sessions .col-actions { width: 62px; min-width: 62px; text-align: center; }
        
        /* Session Row Styling */
        .admin-session-row {
            transition: background-color 0.2s ease;
        }
        .admin-session-row:hover {
            background: var(--bg-hover);
        }
        .admin-session-row.modified {
            background: var(--accent-muted);
        }
        .admin-session-row.row-degraded {
            background: rgba(239, 68, 68, 0.14);
        }
        .admin-session-row.row-degraded:hover {
            background: rgba(239, 68, 68, 0.2);
        }
        .admin-session-row.row-degraded.modified {
            background: rgba(239, 68, 68, 0.24);
        }
        .admin-session-row.row-public {
            border-left: 2px solid var(--success);
        }
        .admin-session-row.row-private {
            border-left: 2px solid var(--text-muted);
        }
        
        /* Session ID */
        .session-id {
            font-family: var(--font-mono, monospace);
            font-size: 0.76rem;
            color: var(--text-primary);
        }
        .admin-table-sessions .col-session .session-id {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .admin-table-sessions .col-email .session-email {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        /* Session Email */
        .session-email {
            display: block;
            font-weight: 500;
        }
        .session-username {
            display: block;
            font-size: 0.68rem;
            color: var(--text-muted);
        }
        
        /* Custom dropdown (replaces native select) */
        .admin-custom-dropdown {
            position: relative;
            width: 100%;
            min-width: 0;
        }
        .admin-dropdown-trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            min-height: 28px;
            padding: 4px 8px;
            font-size: 0.78rem;
            color: var(--text-primary);
            background: var(--bg-base);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-sm);
            cursor: pointer;
            text-align: left;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
        .admin-dropdown-trigger:hover {
            border-color: var(--border-strong);
        }
        .admin-custom-dropdown.is-open .admin-dropdown-trigger {
            border-color: var(--brand-hot-pink);
            box-shadow: 0 0 0 1px var(--brand-hot-pink);
        }
        .admin-dropdown-value {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .admin-dropdown-arrow {
            flex-shrink: 0;
            width: 0;
            height: 0;
            margin-left: 6px;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 5px solid var(--text-muted);
            transition: transform 0.2s ease;
        }
        .admin-custom-dropdown.is-open .admin-dropdown-arrow {
            transform: rotate(180deg);
            border-top-color: var(--brand-hot-pink);
        }
        .admin-dropdown-list {
            position: absolute;
            z-index: 10000;
            top: 100%;
            left: 0;
            min-width: 100%;
            width: max-content;
            max-width: 280px;
            margin-top: 2px;
            padding: 4px 0;
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            max-height: 220px;
            overflow-y: auto;
            display: none;
        }
        .admin-custom-dropdown.is-open .admin-dropdown-list {
            display: block;
        }
        /* Fixed positioning when open so list is not clipped by table overflow */
        .admin-custom-dropdown.is-open .admin-dropdown-list.admin-dropdown-list-fixed {
            position: fixed;
            margin-top: 0;
            z-index: 10001;
        }
        .admin-dropdown-option {
            padding: 10px 12px;
            font-size: 0.9rem;
            color: var(--text-primary);
            cursor: pointer;
            transition: background 0.1s ease;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .admin-dropdown-option:hover {
            background: var(--bg-hover);
        }
        .admin-dropdown-option[aria-selected="true"] {
            background: var(--accent-muted);
            color: var(--brand-hot-pink);
            font-weight: 500;
        }
        
        /* Status Badge */
        .admin-status-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: var(--radius-full);
            font-size: 0.75rem;
            font-weight: 500;
        }
        .admin-status-badge.unknown {
            background: var(--bg-subtle);
            color: var(--text-muted);
        }
        .admin-status-badge.logged_in {
            background: var(--success-muted);
            color: var(--success);
        }
        .admin-status-badge.degraded {
            background: var(--error-muted);
            color: var(--error);
        }
        
        .admin-session-actions {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
        }
        .admin-btn-reverify,
        .admin-btn-delete {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            padding: 0;
            border: none;
            border-radius: var(--radius-sm);
            cursor: pointer;
            background: transparent;
            color: var(--text-muted);
            transition: all 0.15s ease;
        }
        .admin-btn-reverify:hover {
            background: var(--info-muted);
            color: var(--info);
        }
        .admin-btn-delete:hover {
            background: var(--error-muted);
            color: var(--error);
        }
        .admin-session-row.action-busy .admin-session-actions button {
            opacity: 0.6;
            cursor: not-allowed;
        }
        .btn-icon-small {
            width: 12px;
            height: 12px;
        }
        
        /* Loading State */
        .admin-loading-row td {
            padding: var(--space-6) !important;
        }
        .admin-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            color: var(--text-muted);
            font-size: 0.9rem;
        }
        .admin-loading-spinner {
            width: 20px;
            height: 20px;
            border: 2px solid var(--border-default);
            border-top-color: var(--brand-hot-pink);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        
        /* Legend */
        .admin-sessions-legend {
            display: flex;
            gap: var(--space-4);
            margin-top: var(--space-4);
            padding-top: var(--space-3);
            border-top: 1px solid var(--border-subtle);
            flex-wrap: wrap;
        }
        .admin-legend-item {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: 0.8rem;
            color: var(--text-muted);
        }
        .admin-legend-badge {
            padding: 2px 8px;
            font-size: 0.65rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border-radius: var(--radius-full);
        }
        .admin-legend-badge.public {
            background: var(--success-muted);
            color: var(--success);
        }
        .admin-legend-badge.private {
            background: var(--bg-subtle);
            color: var(--text-muted);
        }
        .admin-legend-badge.modified {
            background: var(--accent-muted);
            color: var(--brand-hot-pink);
        }
        .admin-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-6);
        }
        @media (max-width: 900px) {
            .admin-cards { grid-template-columns: 1fr; }
        }
        .admin-card {
            background: var(--bg-elevated);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            padding: var(--space-5);
            box-shadow: var(--shadow-sm);
            min-width: 0;
            overflow: visible; /* allow custom dropdown lists to show */
        }
        .admin-card-title-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
            margin: 0 0 var(--space-4);
            padding-bottom: var(--space-3);
            border-bottom: 1px solid var(--border-subtle);
        }
        .admin-card-title-row .admin-card-title {
            margin: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        .admin-card-title {
            font-size: 1rem;
            font-weight: 600;
            margin: 0 0 var(--space-4);
            padding-bottom: var(--space-3);
            border-bottom: 1px solid var(--border-subtle);
            color: var(--brand-hot-pink);
        }
        .admin-vpn-wipe-btn {
            flex-shrink: 0;
            padding: 4px 10px;
            font-size: 0.75rem;
            border-radius: var(--radius-sm);
            background: var(--bg-subtle);
            color: var(--text-secondary);
            border: 1px solid var(--border-default);
            cursor: pointer;
        }
        .admin-vpn-wipe-btn:not(:disabled):hover {
            background: var(--error-muted);
            color: var(--error);
            border-color: var(--error);
        }
        .admin-vpn-wipe-btn:disabled,
        .admin-vpn-wipe-btn.admin-vpn-wipe-btn--disabled {
            opacity: 0.5;
            cursor: not-allowed;
            color: var(--text-muted);
        }
        .admin-card-block {
            margin-bottom: var(--space-5);
        }
        .admin-card-block:last-child { margin-bottom: 0; }
        .admin-card-subtitle {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            margin: 0 0 var(--space-2);
        }
        .admin-table-wrap {
            overflow-x: auto;
            margin-bottom: 0;
            border-radius: var(--radius-md);
            border: 1px solid var(--border-subtle);
            background: var(--bg-base);
            min-width: 0;
            width: 100%;
        }
        .admin-table-wrap table.admin-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.8rem;
        }
        .admin-table-wrap .admin-table th,
        .admin-table-wrap .admin-table td {
            padding: var(--space-2) var(--space-3);
            text-align: left;
            border-bottom: 1px solid var(--border-subtle);
        }
        .admin-table-wrap .admin-table tr:last-child td { border-bottom: none; }
        .admin-table-wrap .admin-table th {
            color: var(--text-muted);
            font-weight: 500;
            background: var(--bg-subtle);
        }
        .admin-table-wrap .admin-table td .admin-status-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: var(--radius-full);
            font-size: 0.75rem;
            font-weight: 500;
        }
        .admin-table-wrap .admin-table td .admin-status-badge.logged_in {
            background: var(--success-muted);
            color: var(--success);
        }
        .admin-table-wrap .admin-table td .admin-status-badge.degraded {
            background: var(--error-muted);
            color: var(--error);
        }
        .admin-table-wrap .admin-table td .admin-status-select {
            font-size: 0.8rem;
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            background: var(--bg-subtle);
            color: var(--text-primary);
            border: 1px solid var(--border-default);
        }
        .admin-table-wrap .admin-table .admin-public-session-delete {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left: var(--space-2);
            padding: 4px 8px;
            font-size: 1rem;
            line-height: 1;
            min-width: 28px;
            border-radius: var(--radius-sm);
            background: var(--bg-subtle);
            color: var(--text-secondary);
            border: 1px solid var(--border-default);
            cursor: pointer;
        }
        .admin-table-wrap .admin-table .admin-public-session-delete:hover {
            background: var(--error-muted);
            color: var(--error);
            border-color: var(--error);
        }
        .admin-table-wrap .admin-table .admin-muted {
            font-size: 0.75rem;
            color: var(--text-muted);
        }
        .admin-card-scrapes { grid-column: 1 / -1; }
        .admin-card-moderation {
            grid-column: 1 / -1;
        }
        .admin-moderation-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 14px;
        }
        .admin-moderation-header .admin-card-title {
            margin-bottom: 4px;
        }
        .admin-moderation-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        .admin-moderation-filter {
            min-height: 32px;
            border: 1px solid var(--border-default);
            border-radius: 8px;
            background: var(--bg-primary);
            color: var(--text-primary);
            padding: 4px 8px;
            font-size: 0.82rem;
            font-weight: 700;
        }
        .admin-table-wrap-moderation {
            max-height: min(68vh, 720px);
        }
        .admin-table-moderation td {
            vertical-align: top;
        }
        .admin-moderation-target {
            display: grid;
            gap: 4px;
            min-width: 220px;
            max-width: 520px;
        }
        .admin-moderation-target strong {
            color: var(--text-primary);
            font-size: 0.84rem;
            line-height: 1.3;
        }
        .admin-moderation-target-link {
            color: var(--text-primary);
            font-size: 0.84rem;
            font-weight: 800;
            line-height: 1.3;
            text-decoration: none;
        }
        .admin-moderation-target-link:hover,
        .admin-moderation-target-link:focus-visible {
            color: var(--accent-primary);
            text-decoration: underline;
            text-underline-offset: 2px;
        }
        .admin-moderation-target span {
            color: var(--text-secondary);
            font-size: 0.75rem;
            line-height: 1.35;
        }
        .admin-moderation-target code {
            color: var(--text-muted);
            font-size: 0.67rem;
            white-space: normal;
            word-break: break-word;
        }
        .admin-moderation-state {
            display: inline-flex;
            align-items: center;
            min-height: 22px;
            border-radius: 999px;
            padding: 2px 8px;
            font-size: 0.68rem;
            font-weight: 800;
            text-transform: uppercase;
            background: var(--bg-subtle);
            color: var(--text-secondary);
            border: 1px solid var(--border-default);
        }
        .admin-moderation-state-queued {
            color: #f59e0b;
            border-color: rgba(245, 158, 11, 0.45);
        }
        .admin-moderation-state-quarantined {
            color: #ef4444;
            border-color: rgba(239, 68, 68, 0.48);
        }
        .admin-moderation-state-blocked {
            color: #f8fafc;
            background: #111827;
            border-color: #111827;
        }
        .admin-moderation-state-visible {
            color: #22c55e;
            border-color: rgba(34, 197, 94, 0.5);
        }
        .admin-moderation-severe {
            display: inline-flex;
            margin-left: 6px;
            color: #ef4444;
            font-size: 0.62rem;
            font-weight: 900;
            letter-spacing: 0.03em;
        }
        .admin-moderation-action-row {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            min-width: 190px;
        }
        .admin-moderation-action {
            border: 1px solid var(--border-default);
            border-radius: 7px;
            background: var(--bg-primary);
            color: var(--text-primary);
            padding: 5px 7px;
            font-size: 0.68rem;
            font-weight: 800;
            cursor: pointer;
        }
        .admin-moderation-action:hover:not(:disabled) {
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }
        .admin-moderation-action:disabled {
            opacity: 0.6;
            cursor: wait;
        }
        .admin-scrapes-toolbar {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
            margin-bottom: var(--space-3);
            padding-bottom: var(--space-3);
            border-bottom: 1px solid var(--border-subtle);
        }
        .admin-scrapes-controls {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--space-3);
        }
        .admin-auto-extractor-controls {
            width: 100%;
            align-items: stretch;
            gap: var(--space-2);
        }
        .admin-auto-extractor-controls-main,
        .admin-auto-extractor-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            width: 100%;
            gap: var(--space-3);
        }
        .admin-auto-extractor-filters {
            width: 100%;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            padding: var(--space-2);
            background: rgba(255, 255, 255, 0.02);
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
        }
        .admin-auto-extractor-filters-head {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            justify-content: space-between;
            gap: var(--space-2);
        }
        .admin-auto-extractor-filters-head .admin-scrapes-input-hint {
            flex-basis: auto;
            margin-top: 0;
        }
        .admin-auto-extractor-source-sorts {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 8px var(--space-2);
        }
        .admin-auto-extractor-source-sort {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.78rem;
            color: var(--text-secondary);
        }
        .admin-auto-extractor-source-sort-input {
            width: 14px;
            height: 14px;
            accent-color: var(--brand-hot-pink);
        }
        .admin-auto-extractor-threshold-row {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-3);
        }
        .admin-auto-extractor-threshold-item {
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-width: 180px;
        }
        .admin-auto-extractor-threshold-toggle {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .admin-auto-extractor-threshold-check {
            width: 14px;
            height: 14px;
            accent-color: var(--brand-hot-pink);
        }
        .admin-scrapes-control {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            flex-wrap: nowrap;
        }
        .admin-scrapes-input-hint {
            flex-basis: 100%;
            font-size: 0.65rem;
            color: var(--text-muted);
            margin-top: -4px;
        }
        .admin-scrapes-control-num {
            min-width: 140px;
        }
        .admin-scrapes-control-toggle {
            min-width: 150px;
        }
        .admin-scrapes-toggle {
            width: 16px;
            height: 16px;
            accent-color: var(--brand-hot-pink);
        }
        .admin-scrapes-trigger-label {
            font-size: 0.8rem;
            color: var(--text-muted);
            white-space: nowrap;
        }
        .admin-scrapes-trigger-select,
        .admin-scrapes-trigger-input {
            font-size: 0.85rem;
            padding: 6px 10px;
            border-radius: var(--radius-sm);
            background: var(--bg-elevated);
            color: var(--text-primary);
            border: 1px solid var(--border-default);
        }
        .admin-scrapes-trigger-input:disabled,
        .admin-scrapes-trigger-select:disabled {
            opacity: 0.45;
            color: var(--text-muted);
            background: var(--bg-subtle);
            cursor: not-allowed;
        }
        #adminScrapeUser.admin-scrapes-trigger-select { min-width: 180px; }
        .admin-scrapes-trigger-input { width: 5rem; }
        #adminJannyScrapePanel .admin-scrapes-control { min-width: 180px; }
        #adminJannyScrapePanel .admin-scrapes-trigger-select { min-width: 220px; }
        #adminJannyScrapePanel input.admin-scrapes-trigger-input[type="text"] { width: min(360px, 100%); }
        #adminJannyScrapePanel .admin-scrapes-controls {
            align-items: flex-start;
        }
        #adminJannyScrapePanel .admin-janny-runmode-help {
            width: 100%;
            min-width: 100%;
            padding-top: calc(var(--space-1) * 0.5);
        }
        #adminJannyScrapePanel .admin-janny-runmode-help .admin-scrapes-input-hint {
            margin-top: 0;
        }
        #adminJannyScrapePanel .admin-scrapes-log-body {
            min-height: 160px;
            max-height: 320px;
            white-space: pre-wrap;
            font-family: var(--font-mono, monospace);
            font-size: 0.75rem;
            line-height: 1.35;
        }
        #adminSaucepanExtractPanel .admin-scrapes-control { min-width: 180px; }
        #adminSaucepanExtractPanel input.admin-scrapes-trigger-input[type="text"] { width: min(360px, 100%); }
        #adminSaucepanExtractPanel .admin-scrapes-controls {
            align-items: flex-start;
        }
        #adminSaucepanExtractPanel .admin-scrapes-log-body {
            min-height: 160px;
            max-height: 320px;
            white-space: pre-wrap;
            font-family: var(--font-mono, monospace);
            font-size: 0.75rem;
            line-height: 1.35;
        }
        #adminSaucepanCreatorPanel .admin-scrapes-control { min-width: 180px; }
        #adminSaucepanCreatorPanel input.admin-scrapes-trigger-input[type="text"] { width: min(360px, 100%); }
        #adminSaucepanCreatorPanel .admin-scrapes-controls {
            align-items: flex-start;
        }
        #adminSaucepanCreatorPanel .admin-scrapes-log-body {
            min-height: 160px;
            max-height: 320px;
            white-space: pre-wrap;
            font-family: var(--font-mono, monospace);
            font-size: 0.75rem;
            line-height: 1.35;
        }
        #adminSaucepanCreatorPanel .admin-saucepan-browser .admin-scrapes-log-body,
        #adminSaucepanCreatorPanel .admin-saucepan-browser-detail {
            white-space: normal;
            font-family: inherit;
            font-size: 0.85rem;
            line-height: 1.45;
        }
        #adminSaucepanBrowserPanel .admin-scrapes-log-body {
            min-height: 0;
            max-height: none;
            white-space: normal;
            font-family: inherit;
            font-size: 0.85rem;
            line-height: 1.45;
        }
        .admin-saucepan-browser {
            display: grid;
            grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
            gap: 12px;
            align-items: start;
        }
        .admin-saucepan-browser-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-height: 720px;
            overflow-y: auto;
            padding-right: 4px;
        }
        .admin-saucepan-browser-item {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            border: 1px solid var(--border-default);
            background: var(--bg-elevated);
            border-radius: 12px;
            padding: 10px 12px;
            cursor: pointer;
            transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
        }
        .admin-saucepan-browser-item-media {
            width: 58px;
            height: 76px;
            border-radius: 10px;
            overflow: hidden;
            flex-shrink: 0;
            background: var(--bg-subtle);
            border: 1px solid var(--border-subtle);
        }
        .admin-saucepan-browser-item-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .admin-saucepan-browser-item-main {
            min-width: 0;
            flex: 1;
        }
        .admin-saucepan-browser-item:hover {
            border-color: color-mix(in srgb, var(--brand-hot-pink) 30%, var(--border-strong) 70%);
            background: color-mix(in srgb, var(--bg-elevated) 70%, var(--bg-subtle) 30%);
            transform: translateY(-1px);
        }
        .admin-saucepan-browser-item.is-active {
            border-color: color-mix(in srgb, var(--brand-hot-pink) 42%, var(--border-strong) 58%);
            background: color-mix(in srgb, var(--bg-elevated) 55%, var(--brand-hot-pink) 8%);
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
        }
        .admin-saucepan-browser-name {
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.2;
            margin-bottom: 4px;
        }
        .admin-saucepan-browser-meta,
        .admin-saucepan-browser-submeta {
            font-size: 0.72rem;
            color: var(--text-muted);
            line-height: 1.35;
        }
        .admin-saucepan-browser-detail {
            display: flex;
            flex-direction: column;
            gap: 12px;
            min-width: 0;
        }
        .admin-saucepan-browser-empty {
            padding: 18px;
            border: 1px dashed var(--border-default);
            border-radius: 12px;
            color: var(--text-muted);
            background: var(--bg-subtle);
        }
        .admin-saucepan-browser-card {
            border: 1px solid var(--border-default);
            border-radius: 14px;
            padding: 14px 16px;
            background: var(--bg-elevated);
            color: var(--text-primary);
        }
        .admin-saucepan-browser-card h4 {
            margin: 0 0 8px;
            font-size: 0.92rem;
            color: var(--text-primary);
        }
        .admin-saucepan-browser-card--hero {
            overflow: hidden;
        }
        .admin-saucepan-browser-hero {
            display: grid;
            grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
            gap: 16px;
            align-items: stretch;
        }
        .admin-saucepan-browser-hero-media {
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid var(--border-subtle);
            background: var(--bg-subtle);
            min-height: 220px;
        }
        .admin-saucepan-browser-hero-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .admin-saucepan-browser-hero-copy {
            display: flex;
            flex-direction: column;
            gap: 10px;
            justify-content: center;
        }
        .admin-saucepan-browser-hero-kicker {
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-muted);
            font-weight: 700;
        }
        .admin-saucepan-browser-hero-copy h3 {
            margin: 0;
            font-size: 1.15rem;
            color: var(--text-primary);
        }
        .admin-saucepan-browser-hero-copy p {
            margin: 0;
            color: var(--text-secondary);
            line-height: 1.5;
        }
        .admin-saucepan-browser-header {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 10px;
            align-items: flex-start;
        }
        .admin-saucepan-browser-header-title {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }
        .admin-saucepan-browser-header-title h3 {
            margin: 0;
            font-size: 1.05rem;
            color: var(--text-primary);
        }
        .admin-saucepan-browser-header-title code {
            font-size: 0.72rem;
            color: var(--text-muted);
        }
        .admin-saucepan-browser-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .admin-saucepan-browser-badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 8px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--brand-hot-pink) 14%, var(--bg-subtle) 86%);
            color: var(--text-primary);
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .admin-saucepan-browser-inline-badge {
            display: inline-flex;
            align-items: center;
            padding: 3px 8px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.06);
            color: var(--text-secondary);
            font-size: 0.68rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            vertical-align: middle;
        }
        .admin-saucepan-browser-inline-badge.is-good {
            background: rgba(34, 197, 94, 0.14);
            color: #86efac;
        }
        .admin-saucepan-browser-inline-badge.is-warn {
            background: rgba(245, 158, 11, 0.14);
            color: #fcd34d;
        }
        .admin-saucepan-browser-inline-badge.is-dim {
            background: rgba(148, 163, 184, 0.12);
            color: var(--text-muted);
        }
        .admin-saucepan-browser-view-tabs {
            display: inline-flex;
            gap: 4px;
            padding: 4px;
            border: 1px solid var(--border-subtle);
            border-radius: 999px;
            background: var(--bg-elevated);
            align-self: flex-start;
        }
        .admin-saucepan-browser-view-tab {
            border: none;
            background: transparent;
            color: var(--text-muted);
            font-size: 0.76rem;
            font-weight: 700;
            padding: 6px 12px;
            border-radius: 999px;
            cursor: pointer;
        }
        .admin-saucepan-browser-view-tab.active {
            background: var(--accent-primary);
            color: var(--text-inverse);
        }
        .admin-saucepan-browser-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }
        .admin-saucepan-browser-field {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .admin-saucepan-browser-field-label {
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--text-muted);
        }
        .admin-saucepan-browser-field-value,
        .admin-saucepan-browser-field-value a {
            color: var(--text-primary);
            word-break: break-word;
        }
        .admin-saucepan-browser-chip-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .admin-saucepan-browser-chip {
            display: inline-flex;
            align-items: center;
            padding: 5px 10px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid var(--border-subtle);
            color: var(--text-primary);
            font-size: 0.76rem;
        }
        .admin-saucepan-browser-chip.is-fandom {
            background: rgba(236, 72, 153, 0.12);
            border-color: rgba(236, 72, 153, 0.24);
        }
        .admin-saucepan-browser-link-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 10px;
        }
        .admin-saucepan-browser-link-card {
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 12px;
            border-radius: 12px;
            border: 1px solid var(--border-default);
            background: var(--bg-subtle);
            color: var(--text-primary);
            text-decoration: none;
        }
        .admin-saucepan-browser-link-card:hover {
            border-color: var(--border-strong);
            background: var(--bg-hover);
        }
        .admin-saucepan-browser-link-title {
            font-weight: 700;
        }
        .admin-saucepan-browser-link-subtitle {
            font-size: 0.72rem;
            color: var(--text-muted);
            word-break: break-all;
        }
        .admin-saucepan-browser-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            gap: 12px;
        }
        .admin-saucepan-browser-image-card {
            display: flex;
            flex-direction: column;
            border: 1px solid var(--border-default);
            border-radius: 14px;
            overflow: hidden;
            text-decoration: none;
            background: var(--bg-subtle);
            color: var(--text-primary);
            min-width: 0;
        }
        .admin-saucepan-browser-image-card:hover {
            border-color: var(--border-strong);
            transform: translateY(-1px);
        }
        .admin-saucepan-browser-image-wrap {
            aspect-ratio: 3 / 4;
            background: rgba(12, 20, 28, 0.9);
        }
        .admin-saucepan-browser-image-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .admin-saucepan-browser-image-meta {
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .admin-saucepan-browser-image-title {
            font-weight: 700;
            color: var(--text-primary);
        }
        .admin-saucepan-browser-image-subtitle,
        .admin-saucepan-browser-image-links {
            font-size: 0.74rem;
            color: var(--text-muted);
        }
        .admin-saucepan-browser-image-description {
            font-size: 0.76rem;
            color: var(--text-secondary);
            line-height: 1.4;
        }
        .admin-saucepan-browser-run-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .admin-saucepan-browser-run-item {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: flex-start;
            padding: 10px 12px;
            border-radius: 10px;
            background: var(--bg-subtle);
            border: 1px solid var(--border-subtle);
        }
        .admin-saucepan-browser-run-meta {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 6px;
        }
        .admin-saucepan-browser-section pre {
            margin: 0;
            white-space: pre-wrap;
            word-break: break-word;
            font-family: var(--font-mono, monospace);
            font-size: 0.74rem;
            line-height: 1.42;
            max-height: 420px;
            overflow: auto;
            padding: 12px;
            border-radius: 10px;
            background: rgba(12, 20, 28, 0.92);
            color: #eff7ff;
        }
        .admin-saucepan-browser-section-empty {
            color: var(--text-muted);
            font-style: italic;
        }
        @media (max-width: 768px) {
            #adminJannyScrapePanel .admin-scrapes-controls {
                gap: var(--space-2);
            }
            #adminJannyScrapePanel .admin-scrapes-control {
                width: 100%;
                min-width: 0;
                align-items: flex-start;
                flex-wrap: wrap;
            }
            #adminJannyScrapePanel .admin-scrapes-trigger-select,
            #adminJannyScrapePanel .admin-scrapes-trigger-input,
            #adminJannyScrapePanel input.admin-scrapes-trigger-input[type="text"] {
                width: 100%;
                min-width: 0;
            }
            #adminJannyScrapePanel .admin-scrapes-control-toggle {
                flex-direction: row;
                align-items: center;
            }
            #adminJannyScrapePanel .admin-scrapes-control-toggle .admin-scrapes-input-hint {
                flex-basis: 100%;
                margin-top: 0;
            }
            #adminSaucepanExtractPanel .admin-scrapes-controls {
                gap: var(--space-2);
            }
            #adminSaucepanExtractPanel .admin-scrapes-control {
                width: 100%;
                min-width: 0;
                align-items: flex-start;
                flex-wrap: wrap;
            }
            #adminSaucepanExtractPanel .admin-scrapes-trigger-input,
            #adminSaucepanExtractPanel input.admin-scrapes-trigger-input[type="text"] {
                width: 100%;
                min-width: 0;
            }
            #adminSaucepanExtractPanel .admin-scrapes-control-toggle {
                flex-direction: row;
                align-items: center;
            }
            #adminSaucepanExtractPanel .admin-scrapes-control-toggle .admin-scrapes-input-hint {
                flex-basis: 100%;
                margin-top: 0;
            }
            .admin-bg-extract-grid {
                grid-template-columns: 1fr;
            }
            .admin-bg-extract-active-card,
            .admin-bg-extract-recent-card,
            .admin-bg-extract-preview-card {
                grid-column: 1;
            }
            #adminBgExtractV2Panel .admin-scrapes-control {
                width: 100%;
                min-width: 0;
                align-items: flex-start;
                flex-wrap: wrap;
            }
            #adminBgExtractV2Panel .admin-scrapes-trigger-input,
            #adminBgExtractV2Panel .admin-scrapes-trigger-select {
                width: 100%;
                min-width: 0;
            }
            .admin-saucepan-browser {
                grid-template-columns: 1fr;
            }
            .admin-saucepan-browser-item {
                align-items: center;
            }
            .admin-saucepan-browser-list {
                max-height: 260px;
            }
            .admin-saucepan-browser-hero {
                grid-template-columns: 1fr;
            }
            .admin-saucepan-browser-gallery {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .admin-saucepan-browser-grid {
                grid-template-columns: 1fr;
            }
            .admin-saucepan-browser-run-item {
                flex-direction: column;
            }
            .admin-saucepan-browser-run-meta {
                justify-content: flex-start;
            }
        }
        .admin-scrapes-view-bar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--space-3);
            margin: 8px 0 12px;
        }
        .admin-dropdown {
            position: relative;
            display: inline-flex;
            align-items: center;
        }
        .admin-dropdown-btn {
            appearance: none;
            border: 1px solid var(--border-default);
            background: var(--bg-elevated);
            color: var(--text-primary);
            padding: 6px 28px 6px 10px;
            border-radius: var(--radius-sm);
            font-size: 0.85rem;
            line-height: 1;
            cursor: pointer;
            position: relative;
            min-width: 110px;
            text-align: left;
        }
        .admin-dropdown-btn::after {
            content: '';
            position: absolute;
            right: 10px;
            top: 50%;
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 6px solid var(--text-muted);
            transform: translateY(-35%);
        }
        .admin-dropdown-menu {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            z-index: 20;
            background: var(--bg-primary);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
            padding: 6px;
            display: none;
            min-width: 160px;
        }
        .admin-dropdown-btn,
        .admin-dropdown-menu {
            background-color: var(--bg-primary);
        }
        .admin-dropdown.open .admin-dropdown-menu {
            display: block;
        }
        .admin-dropdown-menu button {
            width: 100%;
            text-align: left;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            padding: 6px 8px;
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: 0.82rem;
        }
        .admin-dropdown-menu button:hover,
        .admin-dropdown-menu button.active {
            background: var(--bg-subtle);
            color: var(--text-primary);
        }
        .admin-scrapes-run-btn { padding: 6px 14px; font-size: 0.85rem; }
        .admin-scrapes-subtabs-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
            margin: 2px 0 var(--space-3);
        }
        .admin-scrape-profile-grid-toolbar {
            display: none;
            align-items: center;
            gap: var(--space-2);
            margin-left: auto;
            min-width: 0;
        }
        .admin-scrape-profile-grid-toolbar.is-visible {
            display: inline-flex;
        }
        .admin-scrapes-refresh-btn {
            width: 34px;
            height: 34px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            font-size: 0.8rem;
            line-height: 1;
        }
        .admin-scrapes-refresh-btn svg {
            display: block;
        }
        .admin-scrapes-status-row {
            min-height: 20px;
        }
        .admin-scrapes-status {
            font-size: 0.8rem;
            color: var(--text-muted);
        }
        .admin-scrapes-status--loading {
            color: var(--brand-hot-pink);
            font-weight: 500;
        }
        .admin-scrapes-summary {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-bottom: var(--space-2);
        }
        .admin-scrapes-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
        }
        .admin-scrapes-panel {
            border: 1px solid var(--border-subtle);
            background: var(--bg-elevated);
            border-radius: var(--radius-lg);
            padding: var(--space-2);
            margin-bottom: var(--space-3);
        }
        .admin-scrapes-tabs {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: var(--space-2);
            border-bottom: 1px solid var(--border-subtle);
            padding-bottom: 6px;
            margin-bottom: 6px;
        }
        .admin-scrapes-tab {
            border: 1px solid var(--border-subtle);
            background: var(--bg-subtle);
            color: var(--text-secondary);
            font-size: 0.72rem;
            padding: 4px 10px;
            border-radius: var(--radius-sm);
            cursor: pointer;
        }
        .admin-scrapes-tab.active {
            background: var(--bg-primary);
            color: var(--text-primary);
            border-color: var(--border-default);
        }
        .admin-scrapes-tab-meta {
            font-size: 0.7rem;
            color: var(--text-muted);
            margin: 0 0 8px;
            line-height: 1.35;
        }
        .admin-scrapes-tab-panels {
            min-height: 240px;
            overflow: hidden;
        }
        .admin-scrapes-tab-panel {
            display: none;
        }
        .admin-scrapes-tab-panel.active {
            display: block;
        }
        .admin-scrapes-subtabs {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 3px;
            border: 1px solid var(--border-subtle);
            background: var(--bg-subtle);
            border-radius: var(--radius-full);
            margin: 0;
        }
        .admin-scrapes-subtab {
            border: none;
            background: transparent;
            color: var(--text-secondary);
            font-size: 0.75rem;
            font-weight: 600;
            padding: 0.35rem 0.7rem;
            border-radius: var(--radius-full);
            cursor: pointer;
            transition: background var(--transition-fast), color var(--transition-fast);
            letter-spacing: 0.02em;
        }
        .admin-scrapes-subtab.active {
            background: var(--accent-primary);
            color: var(--text-inverse);
        }
        .admin-scrapes-subpanel {
            display: none;
        }
        .admin-scrapes-subpanel.active {
            display: block;
        }
        .admin-scrapes-log-body {
            height: 100%;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 2px;
            padding-right: 4px;
        }
        .admin-table-wrap-scrapes {
            max-height: 240px;
            overflow-y: auto;
        }
        .admin-scrapes-log {
            border: 1px solid var(--border-subtle);
            background: var(--bg-subtle);
            border-radius: var(--radius-lg);
            padding: var(--space-3);
            margin-bottom: var(--space-3);
        }
        .admin-auto-scraper-grid {
            display: grid;
            /* Cap the runs column width so long unbroken errors can't push the live log off-canvas. */
            grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
            gap: var(--space-3);
            align-items: start;
        }
        .admin-auto-scraper-log,
        .admin-auto-scraper-runs {
            min-width: 0;
        }
        .admin-auto-scraper-runs {
            border: 1px solid var(--border-subtle);
            background: var(--bg-subtle);
            border-radius: var(--radius-lg);
            padding: var(--space-3);
        }
        .admin-auto-scraper-runs-body {
            max-height: 420px;
            overflow-y: auto;
            padding-right: 4px;
        }
        .admin-auto-extractor-grid {
            display: grid;
            grid-template-columns: minmax(0, 50%) minmax(0, 1fr);
            gap: var(--space-3);
            align-items: start;
        }
        .admin-auto-extractor-log,
        .admin-auto-extractor-runs {
            min-width: 0;
        }
        .admin-auto-extractor-runs {
            border: 1px solid var(--border-subtle);
            background: var(--bg-subtle);
            border-radius: var(--radius-lg);
            padding: var(--space-3);
        }
        .admin-auto-extractor-runs-body {
            max-height: 420px;
            overflow-y: auto;
            overflow-x: auto;
            padding-right: 4px;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-x pan-y;
        }
        .admin-auto-extractor-runs-list {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 560px;
        }
        .admin-auto-extractor-runs-header {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-muted);
        }
        .admin-auto-extractor-runs-row {
            display: grid;
            grid-template-columns: 28px 176px 52px 32px 32px 32px 40px;
            gap: 6px;
            font-size: 0.7rem;
            align-items: start;
            border-radius: var(--radius-sm);
            padding: 3px 6px;
            background: rgba(255, 255, 255, 0.03);
        }
        .admin-auto-extractor-runs-cell--icon {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .admin-auto-extractor-runs-cell {
            color: var(--text-secondary);
            white-space: nowrap;
        }
        .admin-auto-extractor-runs-cell--wrap {
            white-space: normal;
            word-break: break-word;
        }
        .admin-auto-extractor-runs-status {
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.04em;
        }
        .admin-auto-extractor-runs-status--error { color: var(--error); }
        .admin-auto-extractor-runs-status--warn { color: var(--accent-primary); }
        .admin-auto-extractor-runs-status--completed { color: var(--success); }
        .admin-auto-extractor-runs-status--running,
        .admin-auto-extractor-runs-status--initiated { color: var(--brand-hot-pink); }
        .admin-bg-extract-controls {
            align-items: flex-start;
        }
        .admin-bg-extract-source-sorts-control {
            min-width: min(320px, 100%);
        }
        #adminBgExtractSourceSorts {
            width: min(260px, 100%);
        }
        .admin-bg-extract-grid {
            display: grid;
            grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
            gap: var(--space-3);
            align-items: start;
        }
        .admin-bg-extract-summary {
            border: 1px solid var(--border-subtle);
            background: var(--bg-subtle);
            border-radius: var(--radius-lg);
            padding: var(--space-3);
            display: grid;
            grid-template-columns: 1fr;
            gap: 6px;
            min-width: 0;
        }
        .admin-bg-extract-summary-item {
            display: grid;
            grid-template-columns: 96px minmax(0, 1fr);
            gap: 8px;
            align-items: baseline;
            font-size: 0.74rem;
            min-width: 0;
        }
        .admin-bg-extract-summary-label {
            color: var(--text-muted);
            white-space: nowrap;
        }
        .admin-bg-extract-summary-value {
            color: var(--text-secondary);
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .admin-bg-extract-active-card,
        .admin-bg-extract-recent-card,
        .admin-bg-extract-preview-card {
            min-width: 0;
            margin-bottom: 0;
        }
        .admin-bg-extract-active-card {
            grid-column: 2;
        }
        .admin-bg-extract-recent-card {
            grid-column: 1 / -1;
        }
        .admin-bg-extract-preview-card {
            grid-column: 1 / -1;
        }
        .admin-bg-extract-grid .admin-scrapes-log-body {
            max-height: 300px;
        }
        .admin-bg-extract-preview-card .admin-scrapes-log-body {
            overflow: auto;
            align-items: stretch;
        }
        .admin-bg-extract-preview-table {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 760px;
        }
        .admin-bg-extract-preview-row {
            display: grid;
            grid-template-columns: minmax(240px, 2.2fr) minmax(96px, 0.9fr) 82px 72px 72px minmax(132px, 1fr);
            gap: 8px;
            align-items: center;
            padding: 6px 8px;
            border-radius: var(--radius-sm);
            background: rgba(255, 255, 255, 0.03);
            font-size: 0.72rem;
            min-height: 36px;
        }
        .admin-bg-extract-preview-row--head {
            position: sticky;
            top: 0;
            z-index: 1;
            background: var(--bg-subtle);
            color: var(--text-muted);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }
        .admin-bg-extract-preview-cell {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: var(--text-secondary);
        }
        .admin-bg-extract-preview-cell--number {
            text-align: right;
            font-variant-numeric: tabular-nums;
        }
        .admin-bg-extract-preview-cell--character {
            display: grid;
            grid-template-columns: 24px minmax(0, 1fr);
            gap: 8px;
            align-items: center;
        }
        .admin-bg-extract-preview-rank {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border-radius: var(--radius-sm);
            background: var(--bg-elevated);
            color: var(--text-muted);
            font-size: 0.68rem;
            font-variant-numeric: tabular-nums;
        }
        .admin-bg-extract-preview-name-wrap {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 1px;
        }
        .admin-bg-extract-preview-name,
        .admin-bg-extract-preview-subline {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .admin-bg-extract-preview-name {
            color: var(--text-primary);
            font-weight: 600;
        }
        .admin-bg-extract-preview-subline {
            color: var(--text-muted);
            font-size: 0.68rem;
        }
        .admin-scrapes-log-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
            margin-bottom: var(--space-2);
        }
        .admin-scrapes-log-title {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        .admin-scrapes-log-meta {
            font-size: 0.7rem;
            color: var(--text-muted);
        }
        .admin-scrapes-log-actions {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
        }
        .admin-scrapes-clear-btn {
            padding: 4px 10px;
            font-size: 0.75rem;
        }
        .admin-scrapes-log-body {
            max-height: 240px;
            height: auto;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 2px;
            padding-right: 4px;
        }
        .admin-auto-scraper-log .admin-scrapes-log-body {
            max-height: 420px;
        }
        .admin-auto-extractor-log .admin-scrapes-log-body {
            max-height: 420px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-x pan-y;
            /* Allow children to exceed width so horizontal scrolling works (flex would otherwise shrink-to-fit). */
            align-items: flex-start;
        }
        .admin-ae-scroll-x {
            /* No overflow handling here — let parent .admin-scrapes-log-body be the
               single scroll container for both axes. Nested horizontal+vertical scroll
               containers break touch scrolling on iOS. */
            width: 100%;
            max-width: 100%;
        }
        .admin-auto-extractor-log .admin-ae-root {
            /* Enforce a minimum content width so mobile can scroll sideways
               instead of overlapping/wrapping awkwardly. */
            min-width: 420px;
        }
        .admin-auto-extractor-stream-mount {
            margin-top: var(--space-3);
            width: 100%;
        }
        /* Auto Extractor live view (Run -> Characters -> Phases) */
        .admin-ae-root {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .admin-ae-run {
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: var(--radius-lg);
            background: rgba(255, 255, 255, 0.02);
            padding: 6px;
        }
        .admin-ae-run--active {
            border-color: rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.03);
        }
        .admin-ae-run-summary {
            cursor: pointer;
            list-style: none;
            padding: 0;
            color: var(--text-secondary);
        }
        .admin-ae-run-summary::-webkit-details-marker { display: none; }
        .admin-ae-run-body {
            margin-top: 8px;
        }
        .admin-ae-run-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 4px;
        }
        .admin-ae-run-title {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }
        .admin-ae-run-title-row {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }
        .admin-ae-run-badge {
            font-size: 0.65rem;
            padding: 2px 8px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.10);
            background: rgba(255, 255, 255, 0.06);
            color: var(--text-secondary);
            white-space: nowrap;
            flex-shrink: 0;
        }
        .admin-ae-run-tag {
            font-weight: 650;
            font-size: 0.8rem;
            color: var(--text-primary);
            word-break: break-word;
        }
        .admin-ae-run-pill {
            font-size: 0.65rem;
            padding: 2px 8px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.10);
            background: rgba(255, 255, 255, 0.04);
            color: var(--text-muted);
            white-space: nowrap;
            flex-shrink: 0;
        }
        .admin-ae-run-meta {
            font-size: 0.7rem;
            color: var(--text-muted);
            font-variant-numeric: tabular-nums;
        }
        .admin-ae-run-right {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }
        .admin-ae-run-time {
            font-size: 0.7rem;
            color: var(--text-muted);
            font-variant-numeric: tabular-nums;
        }
        .admin-ae-run-status {
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .admin-ae-run-stats {
            font-size: 0.72rem;
            color: var(--text-secondary);
            padding: 6px 0 10px 0;
            font-variant-numeric: tabular-nums;
        }
        .admin-ae-run-stats--compact {
            padding: 0;
            font-size: 0.7rem;
            color: var(--text-muted);
        }
        .admin-ae-char-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .admin-ae-run-args {
            margin: 6px 0 10px 0;
        }
        .admin-ae-run-args--inline {
            margin: 0;
        }
        .admin-ae-run-title-row .admin-ae-run-args-body {
            margin-top: 8px;
        }
        .admin-ae-run-args-summary {
            cursor: pointer;
            list-style: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--text-muted);
            font-size: 0.72rem;
            padding: 4px 0;
        }
        .admin-ae-run-args-summary::-webkit-details-marker { display: none; }
        .admin-ae-run-args-icon {
            width: 18px;
            height: 18px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.10);
            background: rgba(255, 255, 255, 0.04);
            color: var(--text-secondary);
            font-weight: 700;
            line-height: 1;
            user-select: none;
        }
        .admin-ae-run-args-body {
            margin-top: 6px;
            padding: 8px 10px;
            border-radius: var(--radius-md);
            border: 1px solid rgba(255, 255, 255, 0.06);
            background: rgba(0, 0, 0, 0.12);
            display: flex;
            flex-direction: column;
            gap: 6px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-x pan-y;
        }
        .admin-ae-run-args-line {
            font-size: 0.7rem;
            color: var(--text-secondary);
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        .admin-ae-run-args-k {
            color: var(--text-muted);
            margin-right: 6px;
        }
        .admin-ae-run-args-v {
            font-size: 0.7rem;
        }
        .admin-ae-char {
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: var(--radius-md);
            background: rgba(0, 0, 0, 0.12);
        }
        .admin-ae-char-summary {
            cursor: pointer;
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 6px 10px;
        }
        .admin-ae-elapsed {
            font-size: 0.62rem;
            color: var(--text-muted);
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        .admin-ae-target-badge {
            font-size: 0.8rem;
            padding: 1px 8px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.10);
            background: rgba(0, 255, 140, 0.12);
            color: var(--success);
            font-weight: 700;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .admin-ae-run-badge--running {
            background: rgba(255, 255, 255, 0.04);
            color: var(--text-muted);
        }
        .admin-ae-char-summary::-webkit-details-marker { display: none; }
        .admin-ae-char-left {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }
        .admin-ae-char-right {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }
        .admin-ae-dot {
            width: 8px;
            height: 8px;
            border-radius: 999px;
            display: inline-block;
            background: rgba(255, 255, 255, 0.18);
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.04);
        }
        .admin-ae-dot.admin-scrapes-log-status--initiated { background: var(--brand-hot-pink); }
        .admin-ae-dot.admin-scrapes-log-status--completed { background: var(--success); }
        .admin-ae-dot.admin-scrapes-log-status--warn { background: var(--accent-primary); }
        .admin-ae-dot.admin-scrapes-log-status--error { background: var(--error); }
        .admin-ae-char-id {
            font-size: 0.72rem;
            color: var(--text-primary);
        }
        .admin-ae-phase-pill {
            font-size: 0.65rem;
            padding: 2px 6px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.10);
            background: rgba(255, 255, 255, 0.04);
            color: var(--text-secondary);
            text-transform: lowercase;
            white-space: nowrap;
        }
        .admin-ae-phase-pill--idle {
            opacity: 0.7;
        }
        .admin-ae-char-time {
            font-size: 0.68rem;
            color: var(--text-muted);
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        .admin-ae-link {
            font-size: 0.68rem;
            color: var(--text-secondary);
            text-decoration: underline;
            text-underline-offset: 2px;
            white-space: nowrap;
        }
        .admin-ae-char-status {
            font-size: 0.65rem;
            font-weight: 750;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .admin-ae-char-status.admin-scrapes-log-status--initiated { color: var(--brand-hot-pink); }
        .admin-ae-char-status.admin-scrapes-log-status--completed { color: var(--success); }
        .admin-ae-char-status.admin-scrapes-log-status--warn { color: var(--accent-primary); }
        .admin-ae-char-status.admin-scrapes-log-status--error { color: var(--error); }
        .admin-ae-status-icon {
            width: 18px;
            height: 18px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.10);
            background: rgba(255, 255, 255, 0.04);
            color: var(--text-secondary);
            font-size: 0.72rem;
            font-weight: 800;
            line-height: 1;
            flex-shrink: 0;
            user-select: none;
        }
        .admin-ae-status-icon--done {
            color: var(--success);
            border-color: rgba(255, 255, 255, 0.14);
            background: rgba(255, 255, 255, 0.05);
        }
        .admin-ae-status-icon--warn {
            color: var(--accent-primary);
        }
        .admin-ae-status-icon--error {
            color: var(--error);
        }
        .admin-ae-status-icon--loading {
            position: relative;
            color: transparent;
        }
        .admin-ae-status-icon--loading::before {
            content: '';
            width: 10px;
            height: 10px;
            border-radius: 999px;
            border: 2px solid rgba(255, 255, 255, 0.22);
            border-top-color: var(--brand-hot-pink);
            animation: admin-ae-spin 0.8s linear infinite;
        }
        @keyframes admin-ae-spin {
            to { transform: rotate(360deg); }
        }
        .admin-ae-char-body {
            padding: 0 10px 10px 10px;
        }
        .admin-ae-phasebar {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 4px;
            padding: 8px 0 10px 0;
        }
        .admin-ae-phase-seg {
            height: 7px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        .admin-ae-phase-seg--done {
            background: rgba(255, 255, 255, 0.18);
        }
        .admin-ae-phase-seg--current {
            background: var(--brand-hot-pink);
            border-color: rgba(255, 255, 255, 0.12);
        }
        .admin-ae-events {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .admin-ae-event-row,
        .admin-ae-raw-row {
            grid-template-columns: 58px 56px 1fr;
        }
        .admin-ae-event-row {
            background: rgba(255, 255, 255, 0.02);
        }
        .admin-ae-raw {
            margin-top: 10px;
        }
        .admin-ae-raw-summary {
            cursor: pointer;
            list-style: none;
            font-size: 0.75rem;
            color: var(--text-muted);
            padding: 6px 2px;
        }
        .admin-ae-raw-summary::-webkit-details-marker { display: none; }
        .admin-ae-raw-body {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .admin-ae-raw-row {
            background: rgba(255, 255, 255, 0.02);
        }
        .admin-scrapes-log-row {
            display: grid;
            grid-template-columns: 72px 70px 1fr;
            gap: 6px;
            font-size: 0.7rem;
            align-items: start;
            border-radius: var(--radius-sm);
            padding: 3px 6px;
            background: rgba(255, 255, 255, 0.03);
        }
        .admin-scrapes-log-group > summary,
        .admin-scrapes-log-subgroup-wrapper > summary {
            cursor: pointer;
            list-style: none;
            position: relative;
            padding-left: 18px;
        }
        .admin-scrapes-log-group > summary::-webkit-details-marker,
        .admin-scrapes-log-subgroup-wrapper > summary::-webkit-details-marker {
            display: none;
        }
        .admin-scrapes-log-group > summary::before,
        .admin-scrapes-log-subgroup-wrapper > summary::before {
            content: '▸';
            position: absolute;
            left: 6px;
            top: 6px;
            font-size: 0.7rem;
            color: var(--text-muted);
            transition: transform 0.15s ease;
        }
        .admin-scrapes-log-group[open] > summary::before,
        .admin-scrapes-log-subgroup-wrapper[open] > summary::before {
            transform: rotate(90deg);
        }
        .admin-scrapes-log-subgroup-wrapper {
            margin-top: 2px;
        }
        .admin-scrapes-log-subgroup {
            background: rgba(255, 255, 255, 0.04);
        }
        .admin-scrapes-log-subrow {
            padding-left: 20px;
        }
        .admin-scrapes-log-group-body {
            margin-left: 10px;
            padding-left: 6px;
            border-left: 1px solid rgba(255, 255, 255, 0.06);
        }
        @media (max-width: 900px) {
            .admin-auto-extractor-controls-main,
            .admin-auto-extractor-actions,
            .admin-auto-extractor-threshold-row {
                gap: var(--space-2);
            }
            .admin-auto-extractor-source-sorts {
                grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            }
            .admin-auto-extractor-threshold-item {
                min-width: 150px;
            }
            .admin-auto-scraper-grid {
                grid-template-columns: minmax(0, 1fr);
            }
            .admin-auto-scraper-log .admin-scrapes-log-body,
            .admin-auto-scraper-runs-body {
                max-height: 300px;
            }
            .admin-auto-extractor-grid {
                grid-template-columns: minmax(0, 1fr);
            }
            .admin-auto-extractor-log .admin-scrapes-log-body,
            .admin-auto-extractor-runs-body {
                max-height: 300px;
            }
        }
        .admin-scrapes-log-time {
            color: var(--text-muted);
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        .admin-scrapes-log-status {
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.04em;
        }
        .admin-scrapes-log-status--error { color: var(--error); }
        .admin-scrapes-log-status--warn { color: var(--accent-primary); }
        .admin-scrapes-log-status--completed { color: var(--success); }
        .admin-scrapes-log-status--initiated,
        .admin-scrapes-log-status--running { color: var(--brand-hot-pink); }
        .admin-scrapes-log-message {
            color: var(--text-secondary);
            line-height: 1.3;
            word-break: break-word;
            overflow-wrap: anywhere;
        }
        .admin-scrapes-log-empty {
            font-size: 0.75rem;
            color: var(--text-muted);
            padding: 6px 0;
        }
        .admin-scrapes-grid-toolbar { display: none; }
        .admin-scrapes-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 8px;
            margin-bottom: var(--space-3);
        }
        .admin-scrapes-card {
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
            cursor: pointer;
            border-radius: var(--radius-lg);
            background: transparent;
            border: 1px solid transparent;
            padding: 2px;
            transition: border-color 0.15s, transform 0.15s;
        }
        .admin-scrapes-card:hover {
            border-color: var(--border-subtle);
            transform: translateY(-2px);
        }
        .admin-scrapes-card:focus {
            outline: 2px solid var(--brand-hot-pink);
            outline-offset: 2px;
        }
        .admin-scrapes-card-media {
            position: relative;
            border-radius: var(--radius-lg);
            overflow: hidden;
            background: var(--bg-subtle);
            aspect-ratio: 3 / 4;
        }
        .admin-scrapes-card-avatar {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .admin-scrapes-card-avatar-placeholder {
            width: 100%;
            height: 100%;
            background: var(--bg-base);
        }
        .admin-scrapes-card-name {
            font-size: 0.68rem;
            font-weight: 600;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: var(--text-primary);
            margin: 0;
        }
        .admin-scrapes-card-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.58rem;
            color: var(--text-muted);
        }
        .admin-profile-creators-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: var(--space-3);
        }
        .admin-profile-creator-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            background: var(--bg-subtle);
            padding: 8px 10px;
            text-decoration: none;
            color: inherit;
            transition: border-color 0.15s, transform 0.15s, background 0.15s;
        }
        .admin-profile-creator-row:hover {
            border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border-subtle));
            transform: translateY(-1px);
            background: rgba(255, 255, 255, 0.04);
        }
        .admin-profile-creator-row:focus {
            outline: 2px solid var(--brand-hot-pink);
            outline-offset: 2px;
        }
        .admin-profile-creator-left {
            min-width: 0;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            flex: 1 1 auto;
        }
        .admin-profile-creator-avatar-wrap {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            overflow: hidden;
            background: var(--bg-base);
            flex: 0 0 auto;
        }
        .admin-profile-creator-avatar {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .admin-profile-creator-main {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .admin-profile-creator-name {
            font-size: 0.78rem;
            font-weight: 650;
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .admin-profile-creator-sub {
            font-size: 0.63rem;
            color: var(--text-muted);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .admin-profile-creator-stats {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 8px 10px;
            min-width: 340px;
            flex: 0 0 auto;
        }
        .admin-profile-creator-stat {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 0.62rem;
            color: var(--text-muted);
            line-height: 1.25;
            white-space: nowrap;
        }
        .admin-profile-creator-stat strong {
            font-size: 0.68rem;
            color: var(--text-primary);
            font-weight: 650;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        .creators-page {
            width: 100%;
            max-width: none;
            margin: 0;
        }
        .creators-browse-layout {
            display: flex;
            gap: var(--space-3);
            align-items: flex-start;
        }
        .creators-main-pane {
            flex: 1;
            min-width: 0;
        }
        .creator-profile-page-host {
            display: none;
            min-width: 0;
        }
        .creator-profile-page-host.is-active {
            display: block;
        }
        .creators-page.creator-profile-page-active .creators-toolbar,
        .creators-page.creator-profile-page-active #creatorsTagFilterChips,
        .creators-page.creator-profile-page-active #creatorsList,
        .creators-page.creator-profile-page-active #creatorsLoadState {
            display: none !important;
        }
        .creators-page .tag-filter-chips {
            margin: 3px 0 5px;
            max-width: none;
            justify-content: flex-start;
            padding-bottom: 0;
        }
        .creators-page .tag-chip {
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-left: 3px solid var(--accent-primary);
            box-shadow: var(--shadow-sm);
        }
        .creators-page .tag-chip-clear {
            background: var(--bg-elevated);
            border-color: var(--border-default);
            color: var(--text-secondary);
            box-shadow: var(--shadow-sm);
        }
        .creators-page .tag-chip-dismiss {
            color: var(--text-secondary);
        }
        @media (min-width: 769px) {
            .view-creators .creators-browse-layout {
                align-items: flex-start;
            }
            .view-creators.active .creators-page,
            .view-creators.active .creators-main-pane {
                min-height: 0;
            }
            .view-creators.active .creators-list {
                max-height: calc(100vh - var(--characters-toolbar-offset) - var(--characters-desktop-bottom-offset) - 70px);
                max-height: calc(100dvh - var(--characters-toolbar-offset) - var(--characters-desktop-bottom-offset) - 70px);
                min-height: 220px;
                overflow-y: auto;
                overscroll-behavior: contain;
                padding-right: 2px;
                scrollbar-gutter: stable;
            }
            .view-creators.active .creators-table-wrap {
                overflow: visible;
            }
            .view-creators.active .creator-profile-page-host.is-active {
                flex: 1 1 auto;
                min-height: 0;
                display: flex;
                flex-direction: column;
                overflow-y: hidden;
                overflow-x: hidden;
                overscroll-behavior: contain;
            }
            .view-creators #creatorsTagSidebar {
                width: calc(var(--characters-sidebar-width) + 50px);
                position: sticky;
                top: var(--characters-toolbar-offset);
                height: auto;
                max-height: calc(100vh - var(--characters-toolbar-offset) - var(--characters-desktop-bottom-offset));
                max-height: calc(100dvh - var(--characters-toolbar-offset) - var(--characters-desktop-bottom-offset));
                overflow-y: auto;
            }
        }
        .creators-toolbar {
            --characters-toolbar-pill-min-height: 1.55rem;
            --characters-toolbar-pill-padding-y: 0.18rem;
            --characters-toolbar-pill-padding-x: 0.55rem;
            display: flex;
            align-items: center;
            gap: var(--space-3);
            position: sticky;
            top: var(--characters-toolbar-offset);
            z-index: 5;
            padding: 2px 0 6px;
            background: transparent;
        }
        @media (min-width: 769px) {
            .creators-toolbar {
                padding-bottom: 11px;
            }
        }
        .creators-summary {
            min-height: var(--characters-toolbar-pill-min-height);
            display: flex;
            justify-content: flex-start;
            flex: 0 1 auto;
            min-width: 0;
        }
        .creators-summary-hero {
            width: auto;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            text-align: left;
            line-height: 1.2;
            position: relative;
            padding-top: 0;
        }
        .creators-summary-title-wrap {
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            flex-wrap: nowrap;
        }
        .creators-summary-title {
            display: none;
        }
        .creators-section-tabs {
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
            gap: 2px;
            padding: 1px;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-full);
            background: var(--bg-subtle);
        }
        .creators-section-tab {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: var(--characters-toolbar-pill-min-height);
            border: 0;
            border-radius: var(--radius-full);
            background: transparent;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0;
            line-height: 1;
            padding: var(--characters-toolbar-pill-padding-y) 0.58rem;
            text-transform: none;
            white-space: nowrap;
            transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
        }
        .creators-section-tab:hover {
            color: var(--text-primary);
        }
        .creators-section-tab.is-active {
            background: var(--accent-primary);
            color: var(--text-inverse);
        }
        .creators-summary-total-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 3px 8px;
            border: 1px solid color-mix(in srgb, var(--brand-hot-pink) 50%, var(--border-subtle) 50%);
            border-radius: 999px;
            background: color-mix(in srgb, var(--brand-hot-pink) 14%, transparent 86%);
            color: var(--text-primary);
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            white-space: nowrap;
        }
        .creators-summary-updated {
            position: absolute;
            top: -8px;
            left: 0;
            right: 0;
            text-align: center;
            white-space: nowrap;
            font-size: 0.62rem;
            color: var(--text-muted);
            letter-spacing: 0.01em;
            pointer-events: none;
        }
        .creators-source-tabs {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px;
            border: 1px solid color-mix(in srgb, var(--border-subtle) 76%, var(--brand-hot-pink) 24%);
            border-radius: 999px;
            background: color-mix(in srgb, var(--bg-subtle) 90%, transparent 10%);
            flex: 0 0 auto;
        }
        .creators-source-tab {
            border: 0;
            background: transparent;
            color: var(--text-secondary);
            border-radius: 999px;
            padding: 6px 12px;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            white-space: nowrap;
            cursor: pointer;
            transition: background var(--transition-fast), color var(--transition-fast);
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }
        .creators-source-tab-label {
            display: inline-block;
        }
        .creators-source-tab-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 1.65rem;
            padding: 2px 7px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
            color: inherit;
            font-size: 0.66em;
            font-weight: 800;
            letter-spacing: 0.02em;
            line-height: 1;
            font-variant-numeric: tabular-nums;
        }
        .creators-source-tab:hover {
            color: var(--text-primary);
        }
        .creators-source-tab.is-active {
            background: color-mix(in srgb, var(--brand-hot-pink) 18%, var(--bg-subtle) 82%);
            color: color-mix(in srgb, var(--brand-hot-pink) 74%, white 26%);
        }
        .creators-source-tab.is-active .creators-source-tab-count {
            background: color-mix(in srgb, var(--brand-hot-pink) 22%, rgba(255, 255, 255, 0.08));
        }
        .creators-directory-source-summary {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            flex: 0 0 auto;
            color: var(--text-secondary);
        }
        .creators-directory-source-summary span {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 28px;
            padding: 0 10px;
            border: 1px solid color-mix(in srgb, var(--border-subtle) 76%, #62d3c3 24%);
            border-radius: 999px;
            background: color-mix(in srgb, var(--bg-subtle) 88%, transparent 12%);
            font-size: 0.7rem;
            font-weight: 760;
            letter-spacing: 0.02em;
            white-space: nowrap;
        }
        .creators-directory-source-summary b {
            color: var(--text-primary);
            font-weight: 800;
        }
        .creators-directory-section {
            min-width: 0;
        }
        .creators-directory-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
            gap: 12px;
            align-items: stretch;
            padding-bottom: 8px;
        }
        .creators-directory-card {
            position: relative;
            min-width: 0;
            min-height: 282px;
            aspect-ratio: 3 / 4;
            display: block;
            overflow: hidden;
            border: 0;
            border-radius: 8px;
            background: #111827;
            color: #ffffff;
            text-decoration: none;
            box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
            transition: transform var(--transition-fast), box-shadow var(--transition-fast);
        }
        .creators-loading-section {
            pointer-events: none;
        }
        .creators-directory-character-shimmer {
            min-width: 0;
        }
        .creators-directory-character-shimmer.skeleton-shimmer::after {
            z-index: 4;
            pointer-events: none;
        }
        .creators-directory-card-link {
            cursor: pointer;
        }
        .creators-directory-card-link:hover,
        .creators-directory-card-link:focus-visible {
            transform: translateY(-1px);
            box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
            outline: none;
        }
        .creators-directory-card-link:hover .creators-directory-image,
        .creators-directory-card-link:focus-visible .creators-directory-image {
            transform: scale(1.035);
        }
        .creators-directory-card-link:focus-visible {
            outline: none;
        }
        .creators-directory-card-media,
        .creators-directory-image,
        .creators-directory-image-fallback,
        .creators-directory-card-shade {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }
        .creators-directory-card-media {
            overflow: hidden;
        }
        .creators-directory-image {
            display: block;
            object-fit: cover;
            z-index: 1;
            transform: scale(1.01);
            transition: transform 220ms ease;
        }
        .creators-directory-image[hidden] {
            display: none;
        }
        .creators-directory-image-fallback {
            display: flex;
            align-items: center;
            justify-content: center;
            background:
                linear-gradient(135deg, rgba(16, 185, 129, 0.30), rgba(244, 114, 182, 0.26) 52%, rgba(15, 23, 42, 0.94)),
                #111827;
            color: rgba(255, 255, 255, 0.86);
            font-size: 2.35rem;
            font-weight: 880;
            line-height: 1;
            text-transform: uppercase;
            z-index: 0;
        }
        .creators-directory-card-shade {
            z-index: 2;
            background:
                linear-gradient(180deg, rgba(3, 7, 18, 0.02) 0%, rgba(3, 7, 18, 0.18) 34%, rgba(3, 7, 18, 0.90) 100%),
                linear-gradient(90deg, rgba(3, 7, 18, 0.42), transparent 58%);
            pointer-events: none;
        }
        .creators-directory-card-source {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 3;
            display: inline-flex;
            align-items: center;
            min-height: 22px;
            max-width: calc(100% - 20px);
            padding: 0 8px;
            border-radius: 999px;
            border: 1px solid rgba(244, 114, 182, 0.42);
            background: rgba(5, 8, 14, 0.78);
            color: #fbcfe8;
            font-size: 0.62rem;
            font-weight: 850;
            letter-spacing: 0;
            line-height: 1;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .creators-directory-card-source.is-saucepan {
            border-color: rgba(98, 211, 195, 0.52);
            color: #b8fff3;
        }
        .creators-directory-rank-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
            width: fit-content;
            min-height: 16px;
            max-width: 100%;
            padding: 1px 5px 1px 2px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 4px;
            background: rgba(8, 12, 20, 0.78);
            color: #ffffff;
            font-size: 0.54rem;
            font-weight: 820;
            letter-spacing: 0;
            line-height: 1;
            overflow-wrap: anywhere;
            text-align: center;
            white-space: nowrap;
            box-shadow: 0 5px 12px rgba(0, 0, 0, 0.22);
        }
        .creators-directory-rank-badge i {
            display: inline-grid;
            place-items: center;
            flex: 0 0 auto;
            width: 12px;
            height: 12px;
            border-radius: 3px;
            background: rgba(255, 255, 255, 0.13);
            color: currentColor;
            font-size: 0.47rem;
            line-height: 1;
        }
        .creators-directory-rank-badge span {
            display: block;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .creators-directory-rank-badge.is-dark {
            border-color: rgba(248, 113, 113, 0.58);
            background: rgba(127, 29, 29, 0.58);
            color: #fecaca;
        }
        .creators-directory-rank-badge.is-power {
            border-color: rgba(244, 114, 182, 0.58);
            background: rgba(157, 23, 77, 0.52);
            color: #fce7f3;
        }
        .creators-directory-rank-badge.is-adult {
            border-color: rgba(251, 146, 60, 0.62);
            background: rgba(154, 52, 18, 0.54);
            color: #ffedd5;
        }
        .creators-directory-rank-badge.is-wild {
            border-color: rgba(52, 211, 153, 0.56);
            background: rgba(6, 95, 70, 0.54);
            color: #d1fae5;
        }
        .creators-directory-rank-badge.is-arcane {
            border-color: rgba(125, 211, 252, 0.58);
            background: rgba(12, 74, 110, 0.54);
            color: #e0f2fe;
        }
        .creators-directory-rank-badge.is-story {
            border-color: rgba(167, 139, 250, 0.58);
            background: rgba(76, 29, 149, 0.54);
            color: #ede9fe;
        }
        .creators-directory-rank-badge.is-warm {
            border-color: rgba(251, 191, 36, 0.62);
            background: rgba(146, 64, 14, 0.52);
            color: #fef3c7;
        }
        .creators-directory-rank-badge.is-edge {
            border-color: rgba(45, 212, 191, 0.58);
            background: rgba(19, 78, 74, 0.56);
            color: #ccfbf1;
        }
        .creators-directory-rank-badge.is-street {
            border-color: rgba(148, 163, 184, 0.58);
            background: rgba(30, 41, 59, 0.62);
            color: #e2e8f0;
        }
        .creators-directory-card-copy {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 3;
            display: grid;
            gap: 4px;
            min-width: 0;
            padding: 14px 14px 9px;
        }
        .creators-directory-name {
            color: #ffffff;
            font-family: "Space Grotesk", "Jura", var(--font-sans);
            font-size: 1.34rem;
            font-weight: 800;
            line-height: 1.18;
            letter-spacing: 0;
            padding-bottom: 0.04em;
            background: linear-gradient(180deg, #ffffff 0%, #fff7fb 48%, #cbd5e1 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.58));
        }
        .creators-directory-specialty-row {
            display: flex;
            justify-content: flex-start;
            min-width: 0;
            margin-top: -3px;
        }
        .creators-directory-card-blurb {
            min-width: 0;
            height: 2.56em;
            margin: 0;
            color: rgba(255, 255, 255, 0.80);
            font-size: 0.78rem;
            font-weight: 560;
            line-height: 1.28;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.44);
        }
        .creators-directory-stat-strip {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 5px;
            min-width: 0;
        }
        .creators-directory-stat-strip span {
            min-width: 0;
            padding: 4px 6px;
            border: 1px solid rgba(255, 255, 255, 0.13);
            border-radius: 6px;
            background: rgba(5, 8, 14, 0.62);
        }
        .creators-directory-stat-strip strong,
        .creators-directory-stat-strip em {
            display: block;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .creators-directory-stat-strip strong {
            color: #ffffff;
            font-size: 0.82rem;
            font-weight: 860;
            font-variant-numeric: tabular-nums;
            line-height: 1;
        }
        .creators-directory-stat-strip em {
            color: rgba(255, 255, 255, 0.62);
            font-size: 0.54rem;
            font-style: normal;
            font-weight: 820;
            letter-spacing: 0;
            line-height: 1;
            margin-top: 1px;
            text-transform: uppercase;
        }
        .creator-classes-layout {
            align-items: start;
        }
        @media (min-width: 769px) {
            body.creator-classes-view-active {
                overflow: hidden;
                --characters-toolbar-offset: 0px;
            }
            body.creator-classes-view-active .mobile-scroll-container {
                position: fixed;
                inset: 0;
                overflow: hidden;
                -webkit-overflow-scrolling: touch;
                padding: calc(4rem - 16px) 1rem 1rem 1rem;
                box-sizing: border-box;
            }
            body.creator-classes-view-active .mobile-scroll-container > .container {
                height: 100%;
                min-height: 0;
                padding-top: 0;
                padding-bottom: 0;
                display: flex;
                flex-direction: column;
            }
            .view-creator-classes.active {
                flex: 1 1 auto;
                height: 100%;
                min-height: 0;
                margin-top: 0;
            }
            .view-creator-classes .characters-browse-layout {
                height: 100%;
                min-height: 0;
                align-items: stretch;
            }
            .view-creator-classes .tag-sidebar {
                position: static;
                top: auto;
                height: auto;
                max-height: none;
                min-height: 0;
                overflow-y: auto;
            }
            .view-creator-classes .creator-classes-main-pane {
                height: 100%;
                min-height: 0;
                overflow-y: auto;
                overflow-x: hidden;
                overscroll-behavior: contain;
                padding-right: 2px;
                scrollbar-gutter: stable;
            }
        }
        .creator-classes-main-pane {
            --creator-classes-floating-title-height: 46px;
            --creator-classes-floating-title-offset: 7px;
            --creator-classes-anchor-offset: calc(var(--creator-classes-floating-title-height) + var(--creator-classes-floating-title-offset) + 10px);
            display: grid;
            gap: 18px;
            align-content: start;
            min-width: 0;
            padding-bottom: 36px;
        }
        .creator-classes-mobile-topbar {
            display: none;
        }
        .creator-classes-floating-title {
            position: sticky;
            top: var(--creator-classes-floating-title-offset);
            z-index: 7;
            height: 0;
            opacity: 0;
            overflow: visible;
            pointer-events: none;
            transform: translateY(-8px);
            transition:
                opacity 160ms ease,
                transform 160ms ease;
        }
        .creator-classes-main-pane.has-floating-title .creator-classes-floating-title {
            opacity: 1;
            transform: translateY(0);
        }
        .creator-classes-floating-title-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: var(--creator-classes-floating-title-height);
            width: 100%;
            padding: 0 16px;
            border: 0;
            border-radius: 0;
            background: rgba(10, 12, 18, 0.98);
            color: var(--text-primary);
            box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
            font-family: "Space Grotesk", "Jura", var(--font-sans);
            font-size: 1.22rem;
            font-weight: 880;
            line-height: 1;
            pointer-events: auto;
        }
        .creator-classes-floating-title-inner > span {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .creator-classes-floating-drawer-btn {
            display: none;
        }
        .creator-classes-sidebar {
            padding: 12px 10px;
        }
        .creator-classes-sidebar-inner {
            display: grid;
            gap: 12px;
        }
        .creator-classes-sidebar-title {
            display: block;
            margin: 0;
            padding: 0 4px;
            color: var(--text-muted);
            font-size: 0.66rem;
            font-weight: 860;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .creator-classes-sidebar-nav {
            display: grid;
            gap: 10px;
        }
        .creator-classes-sidebar-group {
            display: grid;
            gap: 5px;
            padding: 0 0 10px;
            border-bottom: 1px solid var(--border-subtle);
        }
        .creator-classes-sidebar-group:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }
        .creator-classes-category-link,
        .creator-classes-class-link {
            color: inherit;
            text-decoration: none;
        }
        .creator-classes-category-link {
            display: flex;
            align-items: center;
            min-height: 30px;
            padding: 0 7px;
            border-radius: 6px;
            color: var(--text-primary);
            font-size: 0.9rem;
            font-weight: 860;
            letter-spacing: 0;
            text-transform: uppercase;
        }
        .creator-classes-category-link:hover,
        .creator-classes-category-link:focus-visible {
            background: color-mix(in srgb, var(--brand-hot-pink) 14%, transparent);
            color: color-mix(in srgb, var(--brand-hot-pink) 72%, white 28%);
            outline: none;
        }
        .creator-classes-sidebar-links {
            display: grid;
            gap: 2px;
        }
        .creator-classes-class-link {
            display: flex;
            align-items: center;
            gap: 7px;
            min-height: 27px;
            min-width: 0;
            padding: 0 7px;
            border-radius: 6px;
            color: var(--text-secondary);
            font-size: 0.78rem;
            font-weight: 650;
            line-height: 1;
        }
        .creator-classes-class-link i {
            width: 13px;
            flex: 0 0 13px;
            color: color-mix(in srgb, var(--brand-hot-pink) 62%, var(--text-muted));
            font-size: 0.72rem;
            text-align: center;
        }
        .creator-classes-class-link span {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .creator-classes-class-link:hover,
        .creator-classes-class-link:focus-visible {
            background: color-mix(in srgb, var(--text-primary) 7%, transparent);
            color: var(--text-primary);
            outline: none;
        }
        .creator-classes-hero {
            display: grid;
            gap: 10px;
            padding: 18px;
            border: 1px solid color-mix(in srgb, var(--border-subtle) 78%, var(--brand-hot-pink) 22%);
            border-radius: 8px;
            background:
                linear-gradient(135deg, rgba(236, 72, 153, 0.13), transparent 42%),
                linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 94%, transparent), color-mix(in srgb, var(--bg-subtle) 94%, transparent));
            box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
        }
        .creator-classes-kicker {
            color: color-mix(in srgb, var(--brand-hot-pink) 78%, white 22%);
            font-size: 0.72rem;
            font-weight: 900;
            letter-spacing: 0.08em;
            line-height: 1;
            text-transform: uppercase;
        }
        .creator-classes-hero h1 {
            margin: 0;
            color: var(--text-primary);
            font-family: "Space Grotesk", "Jura", var(--font-sans);
            font-size: 3.4rem;
            font-weight: 880;
            letter-spacing: 0;
            line-height: 0.98;
        }
        .creator-classes-hero p {
            width: 100%;
            max-width: none;
            margin: 0;
            color: var(--text-secondary);
            font-size: 0.98rem;
            font-weight: 520;
            line-height: 1.55;
        }
        .creator-classes-hero-stats {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
            width: min(100%, 460px);
            margin-top: 2px;
        }
        .creator-classes-hero-stats span {
            min-width: 0;
            padding: 8px 10px;
            border: 1px solid rgba(255, 255, 255, 0.11);
            border-radius: 7px;
            background: rgba(5, 8, 14, 0.44);
        }
        .creator-classes-hero-stats strong,
        .creator-classes-hero-stats em {
            display: block;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .creator-classes-hero-stats strong {
            color: var(--text-primary);
            font-size: 1.14rem;
            font-weight: 900;
            line-height: 1;
        }
        .creator-classes-hero-stats em {
            margin-top: 4px;
            color: var(--text-muted);
            font-size: 0.62rem;
            font-style: normal;
            font-weight: 820;
            letter-spacing: 0.04em;
            line-height: 1;
            text-transform: uppercase;
        }
        .creator-class-category-section {
            display: grid;
            gap: 12px;
            scroll-margin-top: var(--creator-classes-anchor-offset, 54px);
        }
        .creator-class-category-head {
            display: grid;
            gap: 4px;
            padding: 2px 2px 0;
        }
        .creator-class-category-head span {
            color: color-mix(in srgb, var(--brand-hot-pink) 68%, var(--text-muted));
            font-size: 0.66rem;
            font-weight: 880;
            letter-spacing: 0.08em;
            line-height: 1;
            text-transform: uppercase;
        }
        .creator-class-category-head h2 {
            margin: 0;
            color: var(--text-primary);
            font-family: "Space Grotesk", "Jura", var(--font-sans);
            font-size: 1.45rem;
            font-weight: 840;
            letter-spacing: 0;
            line-height: 1.08;
        }
        .creator-class-category-head p {
            max-width: 760px;
            margin: 0;
            color: var(--text-secondary);
            font-size: 0.84rem;
            font-weight: 540;
            line-height: 1.45;
        }
        .creator-class-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
            gap: 12px;
            align-items: stretch;
        }
        .creator-class-card {
            --creator-class-tone: var(--brand-hot-pink);
            display: grid;
            grid-template-rows: auto auto 1fr auto auto;
            gap: 11px;
            min-width: 0;
            padding: 14px;
            border: 1px solid color-mix(in srgb, var(--border-subtle) 76%, var(--creator-class-tone) 24%);
            border-radius: 8px;
            background:
                linear-gradient(145deg, color-mix(in srgb, var(--creator-class-tone) 14%, transparent), transparent 46%),
                color-mix(in srgb, var(--bg-elevated) 92%, transparent);
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
            scroll-margin-top: var(--creator-classes-anchor-offset, 54px);
            transition:
                border-color var(--transition-fast),
                background var(--transition-fast),
                box-shadow var(--transition-fast);
        }
        .creator-class-card.is-dark { --creator-class-tone: #f87171; }
        .creator-class-card.is-power { --creator-class-tone: #f472b6; }
        .creator-class-card.is-adult { --creator-class-tone: #fb923c; }
        .creator-class-card.is-wild { --creator-class-tone: #34d399; }
        .creator-class-card.is-arcane { --creator-class-tone: #7dd3fc; }
        .creator-class-card.is-story { --creator-class-tone: #a78bfa; }
        .creator-class-card.is-warm { --creator-class-tone: #fbbf24; }
        .creator-class-card.is-edge { --creator-class-tone: #2dd4bf; }
        .creator-class-card.is-street { --creator-class-tone: #94a3b8; }
        .creator-class-card-head {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }
        .creator-class-card-icon {
            display: inline-grid;
            place-items: center;
            width: 38px;
            height: 38px;
            flex: 0 0 38px;
            border: 1px solid color-mix(in srgb, var(--creator-class-tone) 60%, rgba(255, 255, 255, 0.12));
            border-radius: 8px;
            background: color-mix(in srgb, var(--creator-class-tone) 17%, rgba(5, 8, 14, 0.62));
            color: color-mix(in srgb, var(--creator-class-tone) 76%, white 24%);
            box-shadow: 0 8px 18px color-mix(in srgb, var(--creator-class-tone) 18%, transparent);
        }
        .creator-class-card-icon i {
            font-size: 1rem;
            line-height: 1;
        }
        .creator-class-card-title-wrap {
            display: grid;
            gap: 3px;
            min-width: 0;
        }
        .creator-class-card-title-wrap h3 {
            margin: 0;
            color: var(--text-primary);
            font-family: "Space Grotesk", "Jura", var(--font-sans);
            font-size: 1.14rem;
            font-weight: 840;
            letter-spacing: 0;
            line-height: 1.08;
        }
        .creator-class-card-subtitle {
            margin: 0;
            color: color-mix(in srgb, var(--creator-class-tone) 62%, var(--text-secondary));
            font-size: 0.72rem;
            font-weight: 760;
            line-height: 1.2;
        }
        .creator-class-signals {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 6px;
        }
        .creator-class-signal {
            min-width: 0;
            padding: 6px 7px;
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 7px;
            background: rgba(5, 8, 14, 0.38);
        }
        .creator-class-signal em,
        .creator-class-signal strong {
            display: block;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .creator-class-signal em {
            color: var(--text-muted);
            font-size: 0.675rem;
            font-style: normal;
            font-weight: 840;
            letter-spacing: 0.06em;
            line-height: 1;
            text-transform: uppercase;
        }
        .creator-class-signal strong {
            margin-top: 4px;
            color: var(--text-primary);
            font-size: 0.845rem;
            font-weight: 820;
            line-height: 1.14;
            overflow: visible;
            text-overflow: clip;
            white-space: normal;
        }
        .creator-class-description {
            margin: 0;
            color: var(--text-secondary);
            font-size: 0.84rem;
            font-weight: 520;
            line-height: 1.52;
        }
        .creator-class-tags {
            display: grid;
            gap: 6px;
        }
        .creator-class-ranks {
            display: grid;
            gap: 7px;
            align-self: end;
        }
        .creator-class-tags h4,
        .creator-class-ranks h4 {
            margin: 0;
            color: var(--text-muted);
            font-size: 0.765rem;
            font-weight: 900;
            letter-spacing: 0.08em;
            line-height: 1;
            text-transform: uppercase;
        }
        .creator-class-tag-list {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            min-width: 0;
        }
        .creator-class-tag {
            display: inline-flex;
            align-items: center;
            min-width: 0;
            max-width: 100%;
            padding: 4px 7px;
            border: 1px solid color-mix(in srgb, var(--creator-class-tone) 24%, rgba(255, 255, 255, 0.10));
            border-radius: 6px;
            background: color-mix(in srgb, var(--creator-class-tone) 8%, rgba(5, 8, 14, 0.42));
            color: color-mix(in srgb, var(--creator-class-tone) 52%, var(--text-secondary));
            font-size: 0.745rem;
            font-weight: 720;
            line-height: 1;
        }
        .creator-class-rank-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-template-rows: repeat(4, auto);
            grid-auto-flow: column;
            gap: 4px;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .creator-class-rank-tier {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            column-gap: 9px;
            row-gap: 3px;
            min-width: 0;
            padding: 5px 7px;
            border: 1px solid color-mix(in srgb, var(--creator-class-tone) 30%, rgba(255, 255, 255, 0.10));
            border-radius: 6px;
            background: color-mix(in srgb, var(--creator-class-tone) 9%, rgba(5, 8, 14, 0.46));
            text-align: left;
            scroll-margin-top: var(--creator-classes-anchor-offset, 54px);
            transition:
                border-color var(--transition-fast),
                background var(--transition-fast),
                box-shadow var(--transition-fast);
        }
        .creator-class-card.is-anchor-target,
        .creator-class-rank-tier.is-anchor-target {
            border-color: color-mix(in srgb, var(--creator-class-tone) 84%, #facc15 16%);
            background:
                linear-gradient(135deg, color-mix(in srgb, var(--creator-class-tone) 32%, rgba(250, 204, 21, 0.24)), transparent 58%),
                color-mix(in srgb, var(--creator-class-tone) 24%, rgba(5, 8, 14, 0.62));
            box-shadow:
                0 0 0 2px rgba(250, 204, 21, 0.72),
                0 0 0 6px color-mix(in srgb, var(--creator-class-tone) 28%, transparent),
                0 18px 42px color-mix(in srgb, var(--creator-class-tone) 22%, rgba(0, 0, 0, 0.34));
            animation: creatorClassAnchorPulse 950ms ease-in-out 2;
        }
        @keyframes creatorClassAnchorPulse {
            0%, 100% {
                filter: brightness(1);
                transform: translateY(0);
            }
            50% {
                filter: brightness(1.22);
                transform: translateY(-2px);
                box-shadow:
                    0 0 0 3px rgba(250, 204, 21, 0.96),
                    0 0 0 9px color-mix(in srgb, var(--creator-class-tone) 42%, transparent),
                    0 22px 52px color-mix(in srgb, var(--creator-class-tone) 34%, rgba(0, 0, 0, 0.42));
            }
        }
        .creator-class-rank-number,
        .creator-class-rank-title {
            display: block;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .creator-class-rank-number {
            color: color-mix(in srgb, var(--creator-class-tone) 74%, white 26%);
            font-size: 0.705rem;
            font-weight: 900;
            line-height: 1;
            min-width: 14px;
            text-align: right;
        }
        .creator-class-rank-title {
            color: var(--text-primary);
            font-size: 0.745rem;
            font-weight: 760;
            line-height: 1.1;
            overflow: visible;
            text-overflow: clip;
            white-space: normal;
        }
        .creator-classes-drawer-scrim {
            position: fixed;
            inset: 0;
            z-index: 999;
            background: rgba(0, 0, 0, 0);
            opacity: 0;
            pointer-events: none;
            transition:
                opacity 220ms ease,
                background 220ms ease;
        }
        .creator-classes-drawer-scrim.active {
            background: rgba(0, 0, 0, 0.72);
            opacity: 1;
            pointer-events: auto;
        }
        .creator-classes-drawer {
            position: fixed;
            inset: 0 auto 0 0;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            width: min(86vw, 334px);
            max-width: 100%;
            background: var(--bg-elevated);
            border-right: 1px solid color-mix(in srgb, var(--brand-hot-pink) 36%, var(--border-subtle) 64%);
            box-shadow: 18px 0 44px rgba(0, 0, 0, 0.44);
            transform: translateX(-100%);
            transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
        }
        .creator-classes-drawer.open {
            transform: translateX(0);
        }
        .creator-classes-drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex: 0 0 auto;
            min-height: 58px;
            padding: 12px 14px;
            border-bottom: 1px solid var(--border-subtle);
        }
        .creator-classes-drawer-header span {
            color: var(--text-primary);
            font-family: "Space Grotesk", "Jura", var(--font-sans);
            font-size: 1.08rem;
            font-weight: 860;
            line-height: 1;
        }
        .creator-classes-drawer-close {
            appearance: none;
            border: 1px solid color-mix(in srgb, var(--brand-hot-pink) 46%, var(--border-subtle) 54%);
            border-radius: 999px;
            background: rgba(5, 8, 14, 0.72);
            color: #fbcfe8;
            cursor: pointer;
            font-size: 0.66rem;
            font-weight: 820;
            line-height: 1;
            padding: 6px 9px;
        }
        .creator-classes-drawer-body {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            padding: 12px 12px 18px;
            -webkit-overflow-scrolling: touch;
        }
        body.creator-classes-drawer-open {
            overflow: hidden;
        }
        @media (max-width: 768px) {
            body.creator-classes-view-active .creator-classes-layout {
                display: block;
            }
            body.creator-classes-view-active .creator-classes-sidebar {
                display: none;
                position: static;
                width: auto;
                max-height: none;
                margin: 0;
                padding: 0;
                overflow: visible;
            }
            .creator-classes-main-pane {
                --creator-classes-floating-title-height: 40px;
                --creator-classes-floating-title-offset: -8px;
                --creator-classes-anchor-offset: 108px;
            }
            .creator-classes-mobile-topbar {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                margin: -10px 0 8px;
            }
            .creator-classes-drawer-toggle {
                appearance: none;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 7px;
                min-height: 32px;
                padding: 0 11px;
                border: 1px solid color-mix(in srgb, var(--brand-hot-pink) 52%, var(--border-subtle) 48%);
                border-radius: 999px;
                background: rgba(5, 8, 14, 0.72);
                color: #fbcfe8;
                cursor: pointer;
                font-size: 0.72rem;
                font-weight: 860;
                line-height: 1;
                letter-spacing: 0;
            }
            .creator-classes-drawer-toggle i {
                font-size: 0.76rem;
                line-height: 1;
            }
            .creator-classes-floating-title {
                top: var(--creator-classes-floating-title-offset);
            }
            .creator-classes-floating-title-inner {
                min-height: var(--creator-classes-floating-title-height);
                width: 100%;
                padding: 0 10px 0 12px;
                font-size: 1.08rem;
            }
            .creator-classes-floating-drawer-btn {
                appearance: none;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 6px;
                flex: 0 0 auto;
                min-height: 28px;
                padding: 0 9px;
                border: 1px solid color-mix(in srgb, var(--brand-hot-pink) 46%, rgba(255, 255, 255, 0.14));
                border-radius: 999px;
                background: rgba(236, 72, 153, 0.16);
                color: #fbcfe8;
                cursor: pointer;
                font-family: var(--font-sans);
                font-size: 0.68rem;
                font-weight: 850;
                letter-spacing: 0;
                line-height: 1;
            }
            .creator-classes-floating-drawer-btn i {
                font-size: 0.68rem;
                line-height: 1;
            }
            .creator-classes-sidebar-inner {
                gap: 8px;
            }
            .creator-classes-sidebar-title {
                padding: 0 2px;
            }
            .creator-classes-sidebar-nav {
                display: flex;
                gap: 8px;
                overflow-x: auto;
                padding: 0 0 4px;
                scroll-snap-type: x proximity;
                scrollbar-width: thin;
            }
            .creator-classes-sidebar-group {
                flex: 0 0 220px;
                gap: 4px;
                padding: 8px;
                border: 1px solid var(--border-subtle);
                border-radius: 8px;
                background: color-mix(in srgb, var(--bg-subtle) 90%, transparent);
                scroll-snap-align: start;
            }
            .creator-classes-sidebar-group:last-child {
                padding-bottom: 8px;
            }
            .creator-classes-category-link {
                min-height: 28px;
                padding: 0 6px;
                font-size: 0.84rem;
            }
            .creator-classes-class-link {
                min-height: 26px;
                padding: 0 6px;
                font-size: 0.76rem;
            }
            .creator-classes-drawer .creator-classes-sidebar-inner {
                gap: 12px;
            }
            .creator-classes-drawer .creator-classes-sidebar-nav {
                display: grid;
                gap: 10px;
                overflow: visible;
                padding: 0;
                scroll-snap-type: none;
            }
            .creator-classes-drawer .creator-classes-sidebar-group {
                display: grid;
                flex: none;
                gap: 5px;
                padding: 0 0 10px;
                border: 0;
                border-bottom: 1px solid var(--border-subtle);
                border-radius: 0;
                background: transparent;
                scroll-snap-align: none;
            }
            .creator-classes-drawer .creator-classes-sidebar-group:last-child {
                border-bottom: 0;
                padding-bottom: 0;
            }
            .creator-classes-drawer .creator-classes-category-link {
                min-height: 32px;
                padding: 0 8px;
                font-size: 0.86rem;
            }
            .creator-classes-drawer .creator-classes-class-link {
                min-height: 30px;
                padding: 0 8px;
                font-size: 0.78rem;
            }
            .creator-classes-main-pane {
                gap: 14px;
                padding-bottom: 24px;
            }
            .creator-classes-hero {
                gap: 9px;
                margin-top: -21px;
                padding: 14px;
            }
            .creator-classes-hero h1 {
                font-size: 2.35rem;
                line-height: 1;
            }
            .creator-classes-hero p {
                font-size: 0.88rem;
                line-height: 1.46;
            }
            .creator-classes-hero-stats {
                width: 100%;
            }
            .creator-classes-hero-stats span {
                padding: 7px 7px;
            }
            .creator-classes-hero-stats strong {
                font-size: 1rem;
            }
            .creator-classes-hero-stats em {
                font-size: 0.54rem;
                letter-spacing: 0.02em;
            }
            .creator-class-category-section {
                gap: 10px;
                scroll-margin-top: var(--creator-classes-anchor-offset, 108px);
            }
            .creator-class-category-head h2 {
                font-size: 1.24rem;
            }
            .creator-class-card-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }
            .creator-class-card {
                gap: 10px;
                padding: 12px;
                scroll-margin-top: var(--creator-classes-anchor-offset, 108px);
            }
            .creator-class-card-title-wrap h3 {
                font-size: 1.06rem;
            }
            .creator-class-signals {
                grid-template-columns: 1fr;
            }
            .creator-class-description {
                font-size: 0.81rem;
                line-height: 1.48;
            }
            .creator-class-rank-list {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .creator-class-rank-tier {
                grid-template-columns: auto minmax(0, 1fr);
                align-items: center;
                text-align: left;
            }
        }
        .creator-profile-content-source-first {
            gap: 14px;
        }
        .creator-profile-source-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            padding: 10px 12px;
            border: 1px solid color-mix(in srgb, var(--border-subtle) 78%, var(--brand-hot-pink) 22%);
            border-radius: 12px;
            background: color-mix(in srgb, var(--bg-subtle) 88%, transparent 12%);
        }
        .creator-profile-source-toolbar-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            min-width: 0;
            color: var(--text-secondary);
            font-size: 0.78rem;
            font-weight: 600;
        }
        .creator-profile-source-pill {
            display: inline-flex;
            align-items: center;
            padding: 4px 8px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--brand-hot-pink) 16%, transparent 84%);
            color: color-mix(in srgb, var(--brand-hot-pink) 72%, white 28%);
            font-size: 0.66rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .creator-profile-about-source-first {
            padding-top: 0;
        }
        .creator-profile-about-html-source-first {
            padding-top: 0;
        }
        .creator-profile-bots-collapsed {
            border: 1px solid var(--border-subtle);
            border-radius: 12px;
            background: color-mix(in srgb, var(--bg-subtle) 90%, transparent 10%);
            overflow: hidden;
        }
        .creator-profile-materials-shell {
            padding: 12px 14px 14px;
        }
        .creator-profile-bots-head-source-first {
            margin-bottom: 12px;
        }
        .creator-profile-material-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }
        .creator-material-tab {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 34px;
            padding: 0 12px;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--border-subtle) 78%, white 22%);
            background: rgba(255, 255, 255, 0.04);
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 0.78rem;
            font-weight: 700;
        }
        .creator-material-tab:hover {
            color: var(--text-primary);
            border-color: color-mix(in srgb, var(--border-subtle) 45%, white 55%);
        }
        .creator-material-tab.is-active {
            background: color-mix(in srgb, var(--brand-hot-pink) 18%, transparent 82%);
            color: color-mix(in srgb, var(--brand-hot-pink) 72%, white 28%);
            border-color: color-mix(in srgb, var(--brand-hot-pink) 36%, white 64%);
        }
        .creator-material-tab-count {
            color: inherit;
            opacity: 0.76;
            font-variant-numeric: tabular-nums;
        }
        .creator-profile-bots-summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 12px 14px;
            cursor: pointer;
            list-style: none;
            font-weight: 700;
            letter-spacing: 0.03em;
        }
        .creator-profile-bots-summary::-webkit-details-marker {
            display: none;
        }
        .creator-profile-bots-collapsed .creator-profile-bots-grid,
        .creator-profile-bots-collapsed .creator-profile-bots-footer {
            padding-left: 14px;
            padding-right: 14px;
            padding-bottom: 14px;
        }
        .creators-controls {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        .creators-tag-filters {
            max-width: 820px;
            margin: 0 auto 8px;
            min-height: 0;
        }
        .creators-tag-filters-inner {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 6px;
            max-height: 96px;
            overflow-y: auto;
            padding-right: 2px;
        }
        .creators-tag-chip {
            border: 1px solid color-mix(in srgb, var(--border-subtle) 72%, var(--brand-hot-pink) 28%);
            background: color-mix(in srgb, var(--bg-subtle) 88%, transparent 12%);
            border-radius: 999px;
            color: var(--text-secondary);
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 0.68rem;
            font-weight: 600;
            letter-spacing: 0.01em;
            line-height: 1;
            padding: 5px 10px;
            cursor: pointer;
            transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
        }
        .creators-tag-chip:hover {
            color: var(--text-primary);
            border-color: color-mix(in srgb, var(--brand-hot-pink) 45%, var(--border-subtle) 55%);
            background: color-mix(in srgb, var(--brand-hot-pink) 12%, var(--bg-subtle) 88%);
        }
        .creators-tag-chip.is-active {
            color: color-mix(in srgb, var(--brand-hot-pink) 78%, white);
            border-color: color-mix(in srgb, var(--brand-hot-pink) 75%, var(--border-subtle) 25%);
            background: color-mix(in srgb, var(--brand-hot-pink) 18%, var(--bg-subtle) 82%);
        }
        .creators-tag-chip-count {
            opacity: 0.8;
            font-variant-numeric: tabular-nums;
        }
        .creators-tag-clear {
            border: 0;
            background: transparent;
            color: var(--text-muted);
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            padding: 5px 6px;
            cursor: pointer;
        }
        .creators-tag-clear:hover {
            color: var(--text-primary);
        }
        .creators-tag-active {
            margin-top: 5px;
            text-align: center;
            font-size: 0.62rem;
            color: color-mix(in srgb, var(--text-muted) 76%, var(--brand-hot-pink) 24%);
            letter-spacing: 0.015em;
        }
        .creators-tag-empty {
            text-align: center;
            color: var(--text-muted);
            font-size: 0.72rem;
            padding: 4px 0;
        }
        .view-creators button,
        .view-creators [role="button"],
        .view-creators [data-href] {
            -webkit-tap-highlight-color: transparent;
        }
        .creators-controls.creators-controls-mobile {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 6px;
            flex: 0 0 auto;
            width: auto;
            max-width: none;
            margin-left: auto;
        }
        .creators-mobile-sort-row {
            display: flex;
            align-items: center;
            gap: 6px;
            width: auto;
            order: 2;
        }
        .creators-toolbar-source-tabs {
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
            order: 0;
        }
        .creators-toolbar-source-tabs[hidden] {
            display: none !important;
        }
        .creators-toolbar-source-tabs .creators-source-tabs {
            margin: 0;
        }
        .creators-toolbar-source-tabs .creators-source-tab {
            padding: 5px 10px;
            letter-spacing: 0.02em;
        }
        .creators-source-dropdown.admin-dropdown {
            display: none;
            position: relative;
            width: 82px;
        }
        .creators-source-dropdown .creators-source-dropdown-btn.admin-dropdown-btn {
            width: 100%;
            min-height: 30px;
            border-radius: 999px;
            border-color: color-mix(in srgb, var(--border-subtle) 72%, var(--brand-hot-pink) 28%);
            background: color-mix(in srgb, var(--bg-subtle) 90%, transparent 10%);
            color: var(--text-primary);
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0;
            padding: 3px 20px 3px 9px;
        }
        .creators-source-dropdown .admin-dropdown-menu {
            left: auto;
            right: 0;
            min-width: 126px;
            border-radius: 14px;
            z-index: 44;
        }
        .creators-source-dropdown .admin-dropdown-menu button {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            font-size: 0.74rem;
            font-weight: 700;
            white-space: nowrap;
        }
        .creators-source-dropdown-count {
            color: var(--text-muted);
            font-size: 0.68em;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
        }
        .creators-mobile-sort-row .creators-mobile-dropdown.admin-dropdown {
            flex: 0 0 auto;
        }
        #creatorsTagDrawerToggle.creators-tag-filter-btn {
            order: 1;
        }
        .creators-sort-dir-toggle {
            order: 1;
            flex: 0 0 auto;
            width: 30px;
            min-width: 0;
            min-height: 38px;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            color: var(--brand-hot-pink);
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: 0;
            padding: 0 2px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            line-height: 1;
        }
        .creators-sort-dir-toggle:hover {
            color: color-mix(in srgb, var(--brand-hot-pink) 78%, white 22%);
        }
        .creators-sort-dir-toggle:active {
            color: var(--brand-hot-pink);
        }
        .creators-sort-dir-toggle:focus-visible {
            outline: 2px solid color-mix(in srgb, var(--brand-hot-pink) 65%, transparent 35%);
            outline-offset: 2px;
            border-radius: 4px;
        }
        .creators-sort-dir-icon {
            display: block;
            line-height: 1;
        }
        .creators-mobile-field {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
            flex: 1 1 0;
        }
        .creators-mobile-field-direction {
            flex: 0 0 122px;
            max-width: 142px;
        }
        .creators-mobile-field-label {
            font-size: 0.6rem;
            font-weight: 700;
            color: var(--text-muted);
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }
        .creators-mobile-dropdown.admin-dropdown {
            display: block;
            width: 100%;
        }
        .creators-mobile-dropdown.creators-source-dropdown.admin-dropdown {
            display: none;
            width: 82px;
        }
        .creators-mobile-dropdown:not(.creators-sort-dropdown) .admin-dropdown-btn {
            width: 100%;
            min-width: 0;
            border-radius: 12px;
            border: 1px solid color-mix(in srgb, var(--brand-hot-pink) 38%, var(--border-subtle) 62%);
            background: linear-gradient(
                180deg,
                color-mix(in srgb, var(--bg-subtle) 84%, #1a1b23 16%),
                color-mix(in srgb, var(--bg-subtle) 94%, #0f1015 6%)
            );
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
            color: var(--text-primary);
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            padding: 8px 30px 8px 10px;
        }
        .creators-mobile-dropdown:not(.creators-sort-dropdown) .admin-dropdown-btn::after {
            border-top-color: var(--text-muted);
            right: 11px;
        }
        .creators-mobile-dropdown:not(.creators-sort-dropdown) .admin-dropdown-menu {
            width: 100%;
            min-width: 0;
            left: 0;
            right: auto;
            border-radius: 12px;
            padding: 5px;
            z-index: 40;
        }
        .creators-mobile-dropdown:not(.creators-sort-dropdown) .admin-dropdown-menu button {
            font-size: 0.78rem;
            padding: 8px 9px;
        }
        .creators-controls label {
            font-size: 0.72rem;
            color: var(--text-muted);
            font-weight: 600;
        }
        .creators-controls select {
            appearance: none;
            -webkit-appearance: none;
            border: 1px solid var(--border-default);
            background: var(--bg-subtle);
            color: var(--text-primary);
            border-radius: var(--radius-sm);
            font-size: 0.72rem;
            font-weight: 600;
            padding: 6px 9px;
        }
        .creators-controls select:focus {
            outline: none;
            border-color: var(--accent-primary);
        }
        .creators-list {
            display: block;
            margin-bottom: var(--space-3);
            min-height: 0;
        }
        .creators-ranking-section + .creators-ranking-section {
            margin-top: 18px;
        }
        .creators-ranking-section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin: 0 0 8px;
        }
        .creators-ranking-section-title {
            margin: 0;
            font-size: 0.82rem;
            line-height: 1;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-primary);
        }
        .creators-ranking-section-total {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 34px;
            padding: 3px 8px;
            border-radius: 999px;
            border: 1px solid var(--border-subtle);
            background: color-mix(in srgb, var(--bg-subtle) 86%, transparent 14%);
            color: var(--text-secondary);
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.03em;
        }
        .creators-table-wrap {
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            background: var(--bg-subtle);
            overflow: hidden;
            max-width: none;
            margin: 0;
        }
        .creators-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }
        .creators-table thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: color-mix(in srgb, var(--bg-subtle) 82%, #111 18%);
            border-bottom: 1px solid var(--border-subtle);
            padding: 8px 10px;
            text-align: center;
        }
        .creators-table thead th.creators-col-active {
            background: color-mix(in srgb, var(--brand-hot-pink) 16%, var(--bg-subtle));
        }
        .creators-table thead th.col-creator {
            width: 45%;
        }
        .creators-table thead th.col-num {
            width: 11%;
        }
        .creators-sort-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            width: 100%;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            text-transform: uppercase;
            color: var(--text-muted);
            background: transparent;
            border: none;
            padding: 0;
            cursor: pointer;
        }
        .creators-col-label {
            display: inline-block;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            text-transform: uppercase;
            color: var(--text-muted);
        }
        .creators-sort-btn:hover {
            color: var(--text-primary);
        }
        .creators-sort-btn.is-active {
            color: var(--brand-hot-pink);
        }
        .creators-sort-indicator {
            font-size: 0.66rem;
            opacity: 0.9;
            line-height: 1;
        }
        .creators-table-row {
            transition: background 0.15s ease;
        }
        .creators-table-row--skeleton {
            pointer-events: none;
            position: relative;
            overflow: hidden;
        }
        .creators-table-row--skeleton.skeleton-shimmer::after {
            z-index: 4;
            pointer-events: none;
        }
        .creators-table-row--skeleton .creators-cell {
            height: 58px;
        }
        .creators-skeleton-avatar {
            background: color-mix(in srgb, var(--bg-base) 72%, var(--bg-subtle) 28%);
        }
        .creators-skeleton-main {
            width: min(320px, 100%);
            gap: 5px;
        }
        .creators-skeleton-name,
        .creators-skeleton-sub,
        .creators-skeleton-tags span,
        .creators-skeleton-number,
        .creators-skeleton-mobile-stats span,
        .creators-skeleton-mobile-stats strong {
            display: block;
            background: color-mix(in srgb, var(--bg-elevated) 78%, white 3%);
            border-radius: 6px;
        }
        .creators-skeleton-name {
            width: 62%;
            height: 14px;
        }
        .creators-skeleton-sub {
            width: 74%;
            height: 10px;
        }
        .creators-skeleton-tags {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
        }
        .creators-skeleton-tags span {
            width: 54px;
            height: 15px;
            border-radius: 999px;
        }
        .creators-skeleton-number {
            width: 46px;
            height: 16px;
            margin: 0 auto;
        }
        .creators-skeleton-mobile-stats span {
            width: 58px;
            height: 10px;
        }
        .creators-skeleton-mobile-stats strong {
            width: 42px;
            height: 13px;
        }
        .creators-table-row:not(:last-child) {
            border-bottom: 1px solid var(--border-subtle);
        }
        .creators-table-row-link {
            cursor: pointer;
        }
        .creators-table-row-link .creators-cell {
            position: relative;
        }
        .creators-cell-open-link {
            position: absolute;
            inset: 0;
            z-index: 3;
            display: block;
            color: transparent;
            text-decoration: none;
        }
        .creators-table-row-link:hover {
            background: rgba(255, 255, 255, 0.03);
        }
        .creators-table-row-link:focus-visible {
            outline: 2px solid var(--brand-hot-pink);
            outline-offset: -2px;
        }
        @media (hover: none) and (pointer: coarse) {
            .creators-sort-dir-toggle:focus-visible,
            .creators-table-row-link:focus-visible {
                outline: none;
            }
        }
        .creators-cell {
            padding: 5px 10px;
            vertical-align: middle;
        }
        .creators-cell-num {
            text-align: center;
            font-size: 0.84rem;
            color: var(--text-muted);
        }
        .creators-cell-num.creators-col-active {
            background: color-mix(in srgb, var(--brand-hot-pink) 12%, transparent);
        }
        .creators-cell-num strong {
            font-size: 0.96rem;
            color: var(--text-primary);
            font-weight: 680;
            font-variant-numeric: tabular-nums;
        }
        .creators-cell-num.creators-col-active strong {
            color: color-mix(in srgb, var(--brand-hot-pink) 72%, white);
        }
        .creators-row-left {
            min-width: 0;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex: 1 1 auto;
        }
        .creators-profile-link {
            max-width: 100%;
            border-radius: var(--radius-sm);
            color: inherit;
            text-decoration: none;
        }
        .creators-profile-link:hover .creators-name {
            color: var(--text-primary);
            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-underline-offset: 3px;
        }
        .creators-profile-link:focus-visible {
            outline: 2px solid var(--brand-hot-pink);
            outline-offset: 3px;
        }
        .creators-avatar-wrap {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            overflow: hidden;
            background: var(--bg-base);
            flex: 0 0 auto;
        }
        .creators-avatar {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .creators-main {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .creators-name {
            font-size: 0.94rem;
            font-weight: 680;
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .creators-sub {
            font-size: 0.64rem;
            color: var(--text-muted);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .creators-top-tags {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px;
            margin-top: 2px;
        }
        .creators-top-tag {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 1px 6px;
            border: 1px solid color-mix(in srgb, var(--border-subtle) 70%, var(--accent-primary) 30%);
            background: color-mix(in srgb, var(--bg-subtle) 86%, transparent 14%);
            border-radius: 999px;
            color: var(--text-secondary);
            font-size: calc(0.56rem + 2pt);
            line-height: 1.2;
            max-width: 100%;
        }
        .creators-top-tag.is-active {
            border-color: color-mix(in srgb, var(--accent-primary) 72%, transparent);
            background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
            color: var(--text-primary);
        }
        .creators-top-tag-label {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 130px;
        }
        .creators-top-tag-count {
            color: var(--text-muted);
            font-variant-numeric: tabular-nums;
            font-size: calc(0.54rem + 2pt);
        }
        .creators-mobile-stats {
            display: none;
        }
        .creators-mobile-stat {
            min-width: 0;
        }
        .creators-load-state {
            min-height: 20px;
            font-size: 0.75rem;
            color: var(--text-muted);
            text-align: center;
            padding: 8px 0 10px;
        }
        .creators-scroll-sentinel {
            width: 100%;
            height: 1px;
        }
        .modal-content.creator-profile-modal {
            max-width: 860px;
            max-height: min(84vh, 100dvh);
            background: transparent;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        .modal-content.creator-profile-modal .modal-header {
            padding: 10px 12px;
            min-height: 46px;
            gap: 8px;
            align-items: center;
            background: var(--bg-elevated);
            border-bottom: 1px solid var(--border-subtle);
        }
        @media (min-width: 769px) {
            .modal-content.creator-profile-modal .modal-header {
                padding: 4px 10px;
                min-height: 0;
            }
        }
        .modal-content.creator-profile-modal .modal-header h2 {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 1.125rem;
            line-height: 1.2;
            font-weight: 700;
            min-width: 0;
            flex: 1 1 auto;
            white-space: normal;
            overflow-wrap: anywhere;
            word-break: break-word;
        }
        .creator-profile-modal-title-text {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .modal-content.creator-profile-modal .modal-close {
            margin-left: 0;
            flex: 0 0 auto;
            align-self: center;
        }
        .creator-profile-modal-title-wrap {
            display: flex;
            align-items: center;
            gap: 9px;
            min-width: 0;
            flex: 1 1 auto;
        }
        .creator-modal-source-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 20px;
            padding: 0 7px;
            border-radius: 999px;
            font-size: 0.64rem;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            vertical-align: middle;
        }
        .creator-modal-source-badge-saucepan {
            background: color-mix(in srgb, var(--brand-hot-pink) 18%, transparent 82%);
            color: color-mix(in srgb, var(--brand-hot-pink) 74%, white 26%);
            border: 1px solid color-mix(in srgb, var(--brand-hot-pink) 34%, white 66%);
        }
        .creator-profile-modal-header-actions {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex: 0 0 auto;
            margin-left: auto;
        }
        .content-flag-btn {
            appearance: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            min-width: 28px;
            border-radius: 999px;
            border: 0;
            background: transparent;
            color: #dc2626;
            cursor: pointer;
            line-height: 1;
            padding: 0;
            opacity: 1;
            transition: color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
        }
        .content-flag-btn:hover {
            background: transparent;
            color: #ef4444;
            opacity: 1;
            transform: translateY(-1px);
        }
        .content-flag-btn:disabled {
            cursor: wait;
            opacity: 0.46;
        }
        .content-flag-btn svg {
            width: 18px;
            height: 18px;
            line-height: 1;
        }
        .creator-profile-moderation-flag {
            position: static;
            width: 26px;
            height: 26px;
            min-width: 26px;
            z-index: 1;
            filter: none;
        }
        .creator-profile-moderation-flag svg {
            width: 18px;
            height: 18px;
        }
        .creator-profile-header-refresh {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-height: 28px;
            padding: 0 9px;
            border-color: rgba(45, 212, 191, 0.44);
            background: rgba(45, 212, 191, 0.12);
            color: #ccfbf1;
            font-size: 0.68rem;
            font-weight: 850;
            line-height: 1;
            white-space: nowrap;
        }
        .creator-profile-header-refresh:disabled {
            cursor: wait;
            opacity: 0.72;
        }
        .entity-discussion-btn {
            appearance: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.42rem;
            min-height: 34px;
            border: 1px solid rgba(45, 212, 191, 0.36);
            border-radius: 999px;
            background: rgba(45, 212, 191, 0.10);
            color: #9ffbed;
            font-size: 0.78rem;
            font-weight: 900;
            line-height: 1;
            padding: 0.46rem 0.72rem;
            cursor: pointer;
            white-space: nowrap;
        }
        .entity-discussion-btn:hover,
        .entity-discussion-btn.has-comments {
            border-color: rgba(45, 212, 191, 0.68);
            background: rgba(45, 212, 191, 0.18);
            color: #ecfffb;
        }
        .entity-discussion-btn.is-compact {
            min-width: 34px;
            padding: 0.44rem 0.62rem;
        }
        .creator-profile-modal-header-actions .entity-discussion-btn {
            min-height: 28px;
            gap: 0.3rem;
            padding: 0 9px;
            font-size: 0.68rem;
        }
        .creator-profile-modal-header-actions .entity-discussion-btn.is-compact {
            min-width: 28px;
            padding: 0 9px;
        }
        .creator-profile-modal-header-actions .entity-discussion-btn i {
            font-size: 0.74rem;
        }
        .entity-discussion-btn i {
            font-size: 0.9rem;
            line-height: 1;
        }
        .creator-profile-modal-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            overflow: hidden;
            background: linear-gradient(145deg, rgba(62, 76, 103, 0.92), rgba(32, 43, 60, 0.9));
            border: 1px solid rgba(255, 255, 255, 0.22);
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .creator-profile-modal-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .creator-profile-modal-avatar-placeholder-inner {
            display: inline-flex;
            width: 100%;
            height: 100%;
            align-items: center;
            justify-content: center;
            font-size: 0.66rem;
            font-weight: 700;
            letter-spacing: 0.03em;
            color: rgba(240, 247, 255, 0.95);
            text-transform: uppercase;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
            background:
                radial-gradient(circle at 28% 26%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 54%),
                linear-gradient(145deg, rgba(84, 107, 148, 0.9), rgba(39, 58, 85, 0.95));
        }
        .creator-profile-missing-state {
            margin: auto;
            width: min(520px, calc(100% - 24px));
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: var(--radius-lg);
            background: linear-gradient(180deg, rgba(24, 27, 35, 0.95), rgba(18, 22, 30, 0.95));
            padding: 18px 16px;
        }
        .creator-profile-missing-copy {
            margin-bottom: var(--space-3);
            line-height: 1.45;
            color: var(--text-primary);
        }
        .creator-profile-missing-btn {
            margin-bottom: var(--space-2);
        }
        .creator-profile-retrieving-live {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin: 0 auto 8px;
            padding: 4px 10px;
            border: 1px solid rgba(147, 197, 253, 0.35);
            border-radius: 999px;
            background: rgba(59, 130, 246, 0.08);
            color: #bfdbfe;
            font-size: 0.75rem;
            letter-spacing: 0.01em;
            font-weight: 600;
        }
        .creator-profile-retrieving-live.is-hidden {
            display: none;
        }
        .creator-profile-retrieving-spinner {
            width: 12px;
            height: 12px;
            border: 2px solid rgba(191, 219, 254, 0.35);
            border-top-color: #93c5fd;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            flex: 0 0 auto;
        }
        .creator-profile-retrieving-timer {
            font-variant-numeric: tabular-nums;
            color: #dbeafe;
            min-width: 2.5ch;
            text-align: right;
        }
        .creator-profile-retrieve-status {
            min-height: 19px;
            font-size: 0.85rem;
            color: #9aa4b2;
            margin-bottom: 8px;
        }
        .creator-profile-retrieve-status.is-hidden {
            display: none;
            min-height: 0;
            margin-bottom: 0;
        }
        .creator-profile-retrieve-status.is-running { color: #93c5fd; }
        .creator-profile-retrieve-status.is-success { color: #6ee7b7; }
        .creator-profile-retrieve-status.is-warn { color: #fbbf24; }
        .creator-profile-retrieve-status.is-error { color: #fca5a5; }
        .creator-profile-retrieve-status.is-muted { color: #9aa4b2; }
        .modal-content.creator-profile-modal .modal-body {
            position: relative;
            padding: 0;
            overflow-y: auto;
            min-height: 0;
            height: 100%;
            max-height: none;
            display: flex;
            flex-direction: column;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-y;
        }
        .modal-content.creator-profile-modal .modal-body.creator-profile-refresh-blocked {
            overflow: hidden;
            overscroll-behavior: none;
            touch-action: none;
        }
        .creator-profile-refresh-overlay {
            position: absolute;
            inset: 0;
            z-index: 80;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 18px;
            background:
                linear-gradient(180deg, rgba(7, 10, 16, 0.74) 0%, rgba(7, 10, 16, 0.82) 100%),
                rgba(4, 7, 12, 0.54);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        .creator-profile-refresh-overlay.is-active {
            display: flex;
        }
        .creator-profile-refresh-overlay-card {
            width: min(100%, 360px);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 18px 18px 16px;
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(15, 19, 28, 0.94);
            box-shadow: 0 20px 56px rgba(0, 0, 0, 0.35);
            text-align: center;
        }
        .creator-profile-refresh-overlay-spinner {
            width: 24px;
            height: 24px;
            border: 2px solid rgba(255, 255, 255, 0.18);
            border-top-color: rgba(236, 72, 153, 0.95);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        .creator-profile-refresh-overlay-title {
            font-size: 0.98rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            color: rgba(255, 255, 255, 0.98);
        }
        .creator-profile-refresh-overlay-message {
            font-size: 0.86rem;
            line-height: 1.45;
            color: rgba(255, 255, 255, 0.72);
        }
        .creator-profile-stage {
            position: relative;
            /* Keep creator stage aligned with site-level font token; templates can override in ShadowRoot. */
            font-family: var(--font-sans);
            isolation: isolate;
            contain: paint;
            transform: translateZ(0);
            border-radius: var(--radius-lg);
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(15, 15, 18, 0.78);
            min-height: 100%;
            flex: 1 0 auto;
        }
        .creator-profile-bg {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            border-radius: var(--radius-lg);
            overflow: hidden;
            isolation: isolate;
            contain: paint;
            transform: translateZ(0);
        }
        .creator-profile-bg-image {
            position: absolute;
            inset: -1px;
            border-radius: var(--radius-lg);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 1;
            z-index: 0;
        }
        .creator-profile-bg-effect {
            position: absolute;
            inset: 0;
            opacity: 0.55;
            mix-blend-mode: color-dodge;
            z-index: 1;
            overflow: hidden;
            contain: paint;
            transform: translateZ(0);
            backface-visibility: hidden;
        }
        .creator-profile-bg-gradient {
            position: absolute;
            inset: -1px;
            border-radius: var(--radius-lg);
            filter: none;
            opacity: 0.92;
            z-index: 2;
        }
        .creator-profile-bg-effect img {
            display: block;
            width: 140%;
            height: 140%;
            object-fit: cover;
            transform: translate3d(-8%, -10%, 0) scale(1.02);
            animation: creatorBgDrift 24s ease-in-out infinite alternate;
            backface-visibility: hidden;
            will-change: transform, opacity;
        }
        #creatorProfileModal.active .creator-profile-bg-image {
            filter: none !important;
        }
        #creatorProfileModal.active .creator-profile-bg-effect {
            mix-blend-mode: normal !important;
            opacity: 0.22 !important;
        }
        #creatorProfileModal.active .creator-profile-bg-effect img {
            animation: none !important;
            transform: none !important;
            will-change: auto !important;
        }
        #creatorProfileModal.active .creator-profile-bg-sheen {
            display: none !important;
        }
        body.alert-modal-open #creatorProfileModal .creator-profile-bg-effect img {
            animation: none !important;
            transform: none !important;
            will-change: auto !important;
        }
        body.alert-modal-open #creatorProfileModal,
        body.alert-modal-open #creatorProfileModal *,
        body.alert-modal-open #creatorProfileModal *::before,
        body.alert-modal-open #creatorProfileModal *::after {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            filter: none !important;
            transition: none !important;
            will-change: auto !important;
        }
        body.alert-modal-open #creatorProfileModal .modal-content,
        body.alert-modal-open #creatorProfileModal .creator-profile-stage,
        body.alert-modal-open #creatorProfileModal .creator-profile-bg,
        body.alert-modal-open #creatorProfileModal .creator-profile-bg-effect,
        body.alert-modal-open #creatorProfileModal .creator-profile-bg-effect img {
            transform: none !important;
        }
        body.alert-modal-open #creatorProfileModal .creator-profile-bg-effect {
            opacity: 0 !important;
            mix-blend-mode: normal !important;
        }
        body.alert-modal-open #creatorProfileModal .creator-profile-bg-sheen {
            display: none !important;
        }

        /* Janitor's "stars" effect reads closer as a static overlay rather than a drifting texture. */
        .creator-profile-stage[data-effect="stars"] .creator-profile-bg-effect {
            opacity: 0.62;
            mix-blend-mode: screen;
        }
        .creator-profile-stage[data-effect="stars"][data-has-bg="1"] .creator-profile-bg-effect {
            opacity: 0.50;
        }
        .creator-profile-stage[data-effect="stars"] .creator-profile-bg-effect img {
            width: 100%;
            height: 100%;
            transform: none;
            animation: none;
            object-fit: cover;
        }
        .creator-profile-stage[data-effect="stars"] .creator-profile-bg-sheen {
            opacity: 0;
        }
        .creator-profile-stage[data-effect="stars"] .creator-profile-bg-gradient { filter: none; }
        .creator-profile-stage[data-effect="stars"][data-has-bg="1"] .creator-profile-bg-gradient { opacity: 0.35; }
        /* Stars-only profiles often rely on a warm/cool gradient overlay; keep it visible. */
        .creator-profile-stage[data-effect="stars"]:not([data-has-bg="1"]) .creator-profile-bg-gradient { opacity: 0.55; }
        .creator-profile-stage[data-effect="stars"] {
            /* Stars-only profiles tend to look best without extra "modal chrome" overlays. */
            background: transparent;
        }
        .creator-profile-stage[data-effect="stars"] .creator-profile-content {
            backdrop-filter: none;
            /* Keep text readable without "smearing" the star field. */
            background: rgba(0, 0, 0, 0.12);
        }

        /* When a profile has a real background image, keep the gradient overlay lighter so it doesn't hide it. */
        .creator-profile-stage[data-has-bg="1"] .creator-profile-bg-gradient {
            opacity: 0.45;
        }

        /* Leaves should feel like an overlay, not replace the background image. */
        .creator-profile-stage[data-effect="autumnLeaves"] .creator-profile-bg-effect {
            opacity: 0.38;
            mix-blend-mode: screen;
        }
        .creator-profile-stage[data-effect="autumnLeaves"][data-has-bg="1"] .creator-profile-bg-effect {
            opacity: 0.28;
        }
        .creator-profile-stage[data-effect="autumnLeaves"][data-has-bg="1"] .creator-profile-bg-gradient {
            opacity: 0.32;
        }
        .creator-profile-stage[data-effect="timeWarp"] .creator-profile-bg-effect {
            opacity: 0.36;
            mix-blend-mode: screen;
        }
        .creator-profile-stage[data-effect="timeWarp"][data-has-bg="1"] .creator-profile-bg-effect {
            opacity: 0.18;
            mix-blend-mode: normal;
        }
        .creator-profile-stage[data-effect="timeWarp"] .creator-profile-bg-effect img {
            width: 100%;
            height: 100%;
            transform: none;
            animation: none;
        }
        @keyframes creatorBgDrift {
            0% { transform: translate3d(-10%, -12%, 0) scale(1.02); opacity: 0.62; }
            100% { transform: translate3d(-2%, -4%, 0) scale(1.08); opacity: 0.48; }
        }
        .creator-profile-bg-sheen {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 30% 10%, rgba(255,255,255,0.20), rgba(255,255,255,0.00) 55%),
                        radial-gradient(circle at 80% 40%, rgba(255,255,255,0.10), rgba(255,255,255,0.00) 50%);
            opacity: 0.75;
            z-index: 3;
        }
        .creator-profile-content {
            position: relative;
            z-index: 1;
            padding: var(--space-4);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        .creator-profile-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 10px;
        }
        .creator-profile-head-left {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            flex: 1 1 auto;
        }
        .creator-profile-avatar-wrap {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            overflow: hidden;
            background: var(--bg-subtle);
            flex: 0 0 auto;
        }
        .creator-profile-avatar {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .creator-profile-identity {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .creator-profile-name {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .creator-profile-sub {
            font-size: 0.72rem;
            color: var(--text-muted);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .creator-profile-open-btn {
            font-size: 0.74rem;
            white-space: nowrap;
            text-decoration: none;
        }
        .creator-profile-stats {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px 10px;
            margin-bottom: 12px;
            padding: 8px 10px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: var(--radius-md);
            background: rgba(0, 0, 0, 0.28);
        }
        .creator-profile-source-actions {
            margin-left: auto;
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 2px;
        }
        .creator-profile-stat {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.68rem;
            color: rgba(255, 255, 255, 0.84);
            font-weight: 560;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
            white-space: nowrap;
        }
        .creator-profile-stat strong {
            color: #ffffff;
            font-size: 0.76rem;
            font-weight: 720;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
            font-variant-numeric: tabular-nums;
        }
        .creator-profile-source-btn {
            margin-left: 0;
            width: 26px;
            height: 26px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.28);
            background: rgba(255, 255, 255, 0.08);
            color: var(--text-primary);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-size: 0.72rem;
            line-height: 1;
            transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
        }
        .creator-profile-source-btn:hover {
            background: rgba(255, 255, 255, 0.14);
            border-color: rgba(255, 255, 255, 0.42);
            transform: translateY(-1px);
        }
        .creator-profile-source-btn:focus-visible {
            outline: 2px solid rgba(96, 165, 250, 0.7);
            outline-offset: 2px;
        }
        .creator-profile-section-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin: 0 0 10px;
            padding-bottom: 6px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.16);
        }
        .creator-profile-section-head h3 {
            margin: 0;
            color: #ffffff;
            font-size: 0.76rem;
            font-weight: 760;
            letter-spacing: 0.09em;
            text-transform: uppercase;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
        }
        .creator-profile-about-head-main {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            min-width: 0;
        }
        .creator-profile-about-mode-toggle {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: rgba(255, 255, 255, 0.06);
        }
        .creator-profile-about-mode-btn {
            border: 0;
            background: transparent;
            color: rgba(255, 255, 255, 0.72);
            font-size: 0.62rem;
            font-weight: 750;
            line-height: 1;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            padding: 5px 9px;
            border-radius: 999px;
            cursor: pointer;
            transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
        }
        .creator-profile-about-mode-btn:hover {
            color: #ffffff;
        }
        .creator-profile-about-mode-btn.active {
            background: color-mix(in srgb, var(--brand-hot-pink) 18%, rgba(255,255,255,0.04) 82%);
            color: color-mix(in srgb, var(--brand-hot-pink) 34%, white 66%);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
        }
        .creator-profile-about-mode-btn:focus-visible {
            outline: 2px solid rgba(96, 165, 250, 0.7);
            outline-offset: 2px;
        }
        .creator-profile-about-jump {
            border: 0;
            background: transparent;
            color: rgba(255, 255, 255, 0.82);
            font-size: 0.66rem;
            font-weight: 640;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            padding: 2px 0;
        }
        .creator-profile-about-jump i {
            font-size: 0.6rem;
        }
        .creator-profile-about-jump:hover {
            color: #ffffff;
        }
        .creator-profile-about-jump:focus-visible {
            outline: 2px solid rgba(96, 165, 250, 0.7);
            outline-offset: 2px;
            border-radius: 3px;
        }
        .creator-profile-about-html {
            color: var(--text-primary);
            line-height: 1.6;
            font-size: 0.86rem;
            word-break: break-word;
        }
        .creator-profile-about-shadow-host {
            display: block;
            /* Allow template bios to render their own decorative layers; stage still clips overall. */
            overflow: visible;
            position: relative;
            z-index: 1;
        }
        .creator-profile-about-html p {
            margin: 0 0 0.75rem;
        }
        .creator-profile-about-html p:last-child {
            margin-bottom: 0;
        }
        .creator-profile-about-html img {
            display: block;
            max-width: 100%;
            height: auto;
            border-radius: var(--radius-sm);
            margin: 0.4rem 0;
        }
        .creator-profile-about-html a {
            color: var(--accent-primary);
            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-underline-offset: 2px;
            word-break: break-word;
        }
        .creator-profile-about-html hr {
            border: none;
            border-top: 1px solid var(--border-subtle);
            margin: 0.85rem 0;
        }
        .creator-sauce-source-shell {
            display: block;
            padding: 14px;
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
        }
        .creator-sauce-source-inner {
            display: grid;
            gap: 14px;
        }
        .creator-sauce-source-hero {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: 14px;
            align-items: start;
        }
        .creator-sauce-source-avatar {
            width: 88px;
            height: 88px;
            border-radius: 22px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24);
        }
        .creator-sauce-source-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .creator-sauce-source-copy {
            min-width: 0;
            display: grid;
            gap: 6px;
            align-content: start;
        }
        .creator-sauce-source-title-row {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .creator-sauce-source-title {
            color: #fff;
            font-size: 1.08rem;
            font-weight: 780;
            line-height: 1.15;
        }
        .creator-sauce-source-handle {
            color: rgba(255, 255, 255, 0.72);
            font-size: 0.76rem;
            font-weight: 650;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }
        .creator-sauce-source-subtitle {
            color: rgba(255, 255, 255, 0.92);
            font-size: 0.9rem;
            line-height: 1.35;
        }
        .creator-sauce-source-stats {
            color: rgba(255, 255, 255, 0.74);
            font-size: 0.78rem;
            line-height: 1.4;
        }
        .creator-sauce-source-badges,
        .creator-sauce-source-counts,
        .creator-sauce-source-links {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
        }
        .creator-sauce-source-badge {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
            flex: 0 0 auto;
        }
        .creator-sauce-source-badge img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .creator-sauce-source-count,
        .creator-sauce-source-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 32px;
            padding: 0 11px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.05);
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.72rem;
            font-weight: 650;
            letter-spacing: 0.04em;
            text-decoration: none;
        }
        .creator-sauce-source-link:hover {
            border-color: rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.08);
        }
        .creator-sauce-source-link img {
            width: 18px;
            height: 18px;
            object-fit: contain;
            display: block;
        }
        .creator-sauce-source-description {
            padding-top: 2px;
            color: rgba(255, 255, 255, 0.92);
        }
        .creator-sauce-source-description p:last-child {
            margin-bottom: 0;
        }
        .creator-sauce-source-media-strip {
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: minmax(132px, 180px);
            gap: 10px;
            overflow-x: auto;
            padding-bottom: 6px;
        }
        .creator-sauce-source-media-card {
            border-radius: 16px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            min-height: 120px;
        }
        .creator-sauce-source-media-card img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            aspect-ratio: 1 / 1;
        }
        .creator-profile-empty {
            color: var(--text-muted);
            font-style: italic;
        }
        @media (max-width: 700px) {
            .creator-sauce-source-hero {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            .creator-sauce-source-avatar {
                width: 78px;
                height: 78px;
                border-radius: 18px;
            }
            .creator-sauce-source-media-strip {
                grid-auto-columns: minmax(118px, 150px);
            }
            .creator-sauce-source-count,
            .creator-sauce-source-link {
                min-height: 30px;
                padding: 0 10px;
                font-size: 0.68rem;
            }
        }

        .creator-profile-bots {
            margin-top: 14px;
        }
        .creator-profile-bots-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin: 0 0 10px;
            padding-bottom: 6px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.16);
        }
        .creator-profile-bots-head h3 {
            margin: 0;
            color: #ffffff;
            font-size: 0.76rem;
            font-weight: 760;
            letter-spacing: 0.09em;
            text-transform: uppercase;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
        }
        .creator-profile-bots-head-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 8px;
            min-width: 0;
        }
        .creator-profile-page-list-tools {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-width: 0;
        }
        .creator-profile-availability-dropdown {
            position: relative;
            display: inline-flex;
            flex: 0 0 auto;
        }
        .creator-profile-availability-dropdown[hidden] {
            display: none !important;
        }
        .creator-profile-availability-btn.admin-dropdown-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-height: 30px;
            min-width: 0;
            padding: 0 10px;
            border: 1px solid #f472b6;
            border-radius: 999px;
            background: #9d174d;
            color: #ffffff;
            box-shadow: 0 6px 18px rgba(157, 23, 77, 0.34);
            font-size: 0.7rem;
            font-weight: 840;
            letter-spacing: 0.01em;
            line-height: 1;
            white-space: nowrap;
        }
        .creator-profile-availability-btn.admin-dropdown-btn:hover,
        .creator-profile-availability-btn.admin-dropdown-btn:focus,
        .creator-profile-availability-btn.admin-dropdown-btn:focus-visible,
        .creator-profile-availability-btn.admin-dropdown-btn:active {
            border-color: #f9a8d4;
            background: #be185d;
            color: #ffffff;
            box-shadow: 0 8px 22px rgba(190, 24, 93, 0.38);
        }
        .creator-profile-availability-btn.admin-dropdown-btn::after {
            display: none;
        }
        .creator-profile-availability-dot {
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: #f9a8d4;
            box-shadow: 0 0 0 2px rgba(249, 168, 212, 0.20);
        }
        .creator-profile-availability-chevron {
            font-size: 0.58rem;
            opacity: 0.88;
        }
        .creator-profile-availability-dropdown .admin-dropdown-menu {
            left: auto;
            right: 0;
            min-width: 148px;
            z-index: 58;
        }
        .creator-profile-queue-unextracted,
        .creator-profile-basket-add {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-height: 30px;
            padding: 0 10px;
            border: 1px solid #5eead4;
            border-radius: 999px;
            background: #0f766e;
            color: #ffffff;
            box-shadow: 0 6px 18px rgba(15, 118, 110, 0.32);
            cursor: pointer;
            font-size: 0.66rem;
            font-weight: 820;
            letter-spacing: 0.04em;
            line-height: 1;
            text-transform: uppercase;
            white-space: nowrap;
            transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
        }
        .creator-profile-basket-add {
            border-color: #f472b6;
            background: #db2777;
            color: #ffffff;
            box-shadow: 0 6px 18px rgba(219, 39, 119, 0.34);
            font-size: 0.72rem;
            letter-spacing: 0.01em;
            text-transform: none;
        }
        .creator-profile-basket-add-label-short {
            display: none;
        }
        .creator-profile-queue-unextracted[hidden],
        .creator-profile-basket-add[hidden] {
            display: none !important;
        }
        .creator-profile-queue-unextracted:hover:not(:disabled) {
            background: #14b8a6;
            border-color: #99f6e4;
            color: #ffffff;
        }
        .creator-profile-basket-add:hover:not(:disabled) {
            background: #ec4899;
            border-color: #f9a8d4;
            color: #fff;
        }
        .creator-profile-queue-unextracted:disabled,
        .creator-profile-basket-add:disabled {
            cursor: default;
            opacity: 0.72;
            filter: grayscale(0.18);
        }
        .creator-profile-bots-meta {
            font-size: 0.74rem;
            color: rgba(255, 255, 255, 0.72);
            white-space: nowrap;
        }
        @media (max-width: 640px) {
            .creator-profile-bots-head {
                align-items: flex-start;
                flex-wrap: wrap;
            }
            .creator-profile-bots-head-actions {
                width: 100%;
                justify-content: flex-start;
            }
            .creator-profile-bots-meta {
                flex: 1 1 100%;
                white-space: normal;
            }
            .creator-profile-modal-header-actions {
                gap: 6px;
            }
            .creator-profile-header-refresh {
                min-height: 30px;
                padding: 0 10px;
                font-size: 0.72rem;
            }
        }
        .creator-profile-bots-grid {
            min-height: 40px;
        }
        .creator-bots-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, 140px);
            gap: 8px;
            justify-content: flex-start;
        }
        .creator-bot-row {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 0;
            border-radius: var(--radius-md);
            border: 1px solid rgba(255, 255, 255, 0.10);
            background: rgba(0, 0, 0, 0.26);
            cursor: pointer;
            transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
            overflow: hidden;
            color: inherit;
            text-decoration: none;
        }
        .creator-bot-row:hover {
            background: rgba(0, 0, 0, 0.28);
            border-color: rgba(255, 255, 255, 0.18);
            transform: translateY(-1px);
        }
        .creator-bot-row:focus {
            outline: none;
        }
        .creator-bot-row:focus-visible {
            outline: 2px solid rgba(96, 165, 250, 0.7);
            outline-offset: 2px;
        }
        .creator-bot-media {
            width: 100%;
        }
        .creator-bot-avatar-wrap {
            width: 100%;
            aspect-ratio: 3 / 4;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.06);
            position: relative;
            border-radius: 0;
        }
        .creator-bot-avatar {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .creator-bot-nsfw {
            position: absolute;
            left: 5px;
            top: 5px;
            background: rgba(239, 68, 68, 0.95);
            color: #fff;
            font-size: 0.52rem;
            font-weight: 750;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            padding: 2px 5px;
            border-radius: 999px;
        }
        .creator-bot-db-flag {
            position: absolute;
            right: 6px;
            top: 6px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            border: none;
            box-shadow: none;
        }
        .creator-bot-db-flag.is-available {
            background: #22c55e;
        }
        .creator-bot-db-flag.is-missing {
            background: #ef4444;
        }
        .creator-bot-name {
            min-width: 0;
            font-size: 0.7rem;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.92);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 0 7px;
        }
        .creator-bot-stats {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            padding: 0 7px 7px;
        }
        .creator-bot-stat {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            min-width: 0;
            font-size: 0.64rem;
            color: rgba(255, 255, 255, 0.60);
            font-variant-numeric: tabular-nums;
        }
        .creator-bot-stat strong {
            font-size: 0.66rem;
            font-weight: 750;
            color: rgba(255, 255, 255, 0.92);
            font-variant-numeric: tabular-nums;
        }
        .creator-bot-stat-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.70);
            font-size: 0.6rem;
            line-height: 1;
        }
        .creator-profile-content-skeleton-list {
            pointer-events: none;
        }
        .creator-profile-bot-skeleton {
            cursor: default;
            border-color: rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.045);
            box-shadow: none;
        }
        .creator-profile-bot-skeleton:hover {
            transform: none;
            border-color: rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.045);
        }
        .creator-profile-bot-skeleton.skeleton-shimmer::after,
        .creator-profile-material-skeleton.skeleton-shimmer::after {
            z-index: 2;
            pointer-events: none;
        }
        .creator-profile-bot-skeleton-media {
            width: 100%;
            aspect-ratio: 3 / 4;
            background: rgba(255, 255, 255, 0.07);
        }
        .creator-profile-bot-skeleton-copy {
            display: grid;
            gap: 8px;
            padding: 0 8px 8px;
        }
        .creator-profile-bot-skeleton-title {
            width: 76%;
            height: 12px;
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.11);
        }
        .creator-profile-bot-skeleton-stats {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 7px;
        }
        .creator-profile-bot-skeleton-stats span {
            height: 11px;
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.08);
        }
        .creator-materials-list {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 10px;
        }
        .creator-material-row {
            display: grid;
            grid-template-columns: 80px minmax(0, 1fr);
            gap: 12px;
            align-items: start;
            padding: 10px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.10);
            background: rgba(0, 0, 0, 0.22);
            color: inherit;
            text-decoration: none;
        }
        .creator-material-row:hover {
            border-color: rgba(255, 255, 255, 0.18);
            background: rgba(0, 0, 0, 0.28);
        }
        .creator-profile-material-skeleton {
            cursor: default;
            border-color: rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.045);
        }
        .creator-profile-material-skeleton:hover {
            border-color: rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.045);
        }
        .creator-profile-material-skeleton-thumb {
            width: 80px;
            height: 106px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.08);
        }
        .creator-profile-material-skeleton-copy {
            display: grid;
            gap: 9px;
            min-width: 0;
        }
        .creator-profile-material-skeleton-kicker,
        .creator-profile-material-skeleton-title,
        .creator-profile-material-skeleton-line {
            border-radius: 7px;
            background: rgba(255, 255, 255, 0.09);
        }
        .creator-profile-material-skeleton-kicker {
            width: 82px;
            height: 20px;
            border-radius: 999px;
        }
        .creator-profile-material-skeleton-title {
            width: min(260px, 82%);
            height: 18px;
        }
        .creator-profile-material-skeleton-line {
            width: 100%;
            height: 13px;
        }
        .creator-profile-material-skeleton-line.is-short {
            width: 62%;
        }
        .creator-material-media {
            width: 80px;
        }
        .creator-material-thumb {
            width: 80px;
            height: 106px;
            border-radius: 10px;
            object-fit: cover;
            display: block;
            background: rgba(255, 255, 255, 0.06);
        }
        .creator-material-thumb-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.05rem;
            font-weight: 800;
            color: rgba(255, 255, 255, 0.72);
        }
        .creator-material-copy {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .creator-material-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
        .creator-material-type {
            display: inline-flex;
            align-items: center;
            min-height: 22px;
            padding: 0 8px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.74);
            font-size: 0.67rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .creator-material-link {
            color: rgba(255, 255, 255, 0.68);
            font-size: 0.72rem;
        }
        .creator-material-name {
            font-size: 0.92rem;
            font-weight: 760;
            color: rgba(255, 255, 255, 0.95);
            line-height: 1.3;
        }
        .creator-material-desc {
            color: rgba(255, 255, 255, 0.72);
            font-size: 0.78rem;
            line-height: 1.45;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .creator-material-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            color: rgba(255, 255, 255, 0.60);
            font-size: 0.72rem;
            font-variant-numeric: tabular-nums;
        }
        .creator-profile-bots-footer {
            display: flex;
            justify-content: center;
            padding-top: 10px;
        }
        .creator-profile-bots-loadmore {
            font-size: 0.78rem;
            padding: 0.45rem 0.9rem;
            border-color: #f472b6;
            background: #be185d;
            color: #ffffff;
            box-shadow: 0 8px 22px rgba(190, 24, 93, 0.34);
            opacity: 1;
        }
        .creator-profile-bots-scroll-sentinel {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 0.55rem;
            width: 100%;
            min-height: 52px;
            color: rgba(255, 255, 255, 0.54);
            font-size: 0.72rem;
            font-weight: 760;
            letter-spacing: 0.02em;
        }
        .creator-profile-bots-scroll-sentinel.is-active {
            display: flex;
        }
        .creator-profile-bots-scroll-sentinel:not(.is-loading) {
            opacity: 0;
        }
        @media (max-width: 900px) {
            .creator-material-row {
                grid-template-columns: 64px minmax(0, 1fr);
            }
            .creator-material-thumb {
                width: 64px;
                height: 84px;
            }
            .creator-profile-material-skeleton-thumb {
                width: 64px;
                height: 84px;
            }
            .admin-scrape-profile-grid-toolbar {
                width: 100%;
                justify-content: space-between;
                margin-left: 0;
            }
            .admin-scrape-profile-grid-toolbar .admin-scrapes-control {
                min-width: 0;
            }
            .admin-scrapes-pager--inline {
                width: 100%;
                justify-content: flex-end;
            }
            .admin-profile-creator-row {
                align-items: flex-start;
                flex-direction: column;
            }
            .admin-profile-creator-stats {
                width: 100%;
                min-width: 0;
                justify-content: flex-start;
            }
            .creators-table-wrap {
                border: none;
                background: transparent;
                overflow: visible;
            }
            .creators-table {
                display: block;
                border-collapse: collapse;
                border-spacing: 0;
            }
            .creators-table thead {
                display: none;
            }
            .creators-table,
            .creators-table tr {
                display: block;
                width: 100%;
            }
            .creators-table tbody {
                display: flex;
                flex-direction: column;
                gap: 8px;
                width: 100%;
            }
            .creators-table td {
                display: block;
                width: 100%;
            }
            .creators-table-row {
                display: block;
                border: 1px solid var(--border-subtle);
                border-radius: var(--radius-lg);
                background: var(--bg-subtle);
                padding: 6px 10px;
            }
            .creators-table-row:not(:last-child) {
                border-bottom: 1px solid var(--border-subtle);
            }
            .creators-cell {
                padding: 0;
            }
            .creators-cell-creator {
                margin-bottom: 1px;
            }
            .creators-mobile-stats {
                margin-top: 4px;
                padding-top: 4px;
                border-top: 1px solid rgba(255, 255, 255, 0.08);
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 3px 7px;
            }
            .creators-mobile-stat {
                display: flex;
                align-items: baseline;
                justify-content: space-between;
                text-align: left;
                gap: 6px;
                padding: 1px 0;
                min-width: 0;
            }
            .creators-mobile-stat.is-active {
                padding: 2px 6px;
                border-radius: 8px;
                border: 1px solid color-mix(in srgb, var(--brand-hot-pink) 46%, transparent);
                background: color-mix(in srgb, var(--brand-hot-pink) 16%, transparent);
            }
            .creators-mobile-stat span {
                font-size: 0.6rem;
                color: var(--text-muted);
                text-transform: uppercase;
                letter-spacing: 0.04em;
                white-space: nowrap;
            }
            .creators-mobile-stat.is-active span {
                color: color-mix(in srgb, var(--brand-hot-pink) 68%, white);
            }
            .creators-mobile-stat strong {
                font-size: 0.86rem;
                color: var(--text-primary);
                font-weight: 700;
                font-variant-numeric: tabular-nums;
            }
            .creators-mobile-stat.is-active strong {
                color: color-mix(in srgb, var(--brand-hot-pink) 78%, white);
            }
            .creators-name {
                font-size: 1.02rem;
                line-height: 1.2;
            }
            .creators-top-tag-label {
                max-width: 96px;
            }
            .creators-table .creators-cell.creators-cell-num,
            .creators-table-row > td.creators-cell.creators-cell-num {
                display: none !important;
            }
            .creators-toolbar {
                position: static;
                top: auto;
                z-index: auto;
                align-items: center;
                flex-direction: row;
                gap: var(--space-3);
                padding: 2px 0 11px;
            }
            .creators-summary {
                width: auto;
                min-height: var(--characters-toolbar-pill-min-height);
            }
            .creators-summary-hero {
                padding-top: 0;
                gap: 8px;
            }
            .creators-summary-title-wrap {
                gap: 6px;
            }
            .creators-summary-total-badge {
                padding: 2px 7px;
                font-size: 0.62rem;
            }
            .creators-summary-title {
                font-size: clamp(1.18rem, 7.4vw, 1.65rem);
            }
            .creators-summary-updated {
                top: -10px;
                left: 0;
                right: 0;
                text-align: center;
                font-size: 0.56rem;
            }
            .creators-controls {
                width: auto;
                justify-content: flex-start;
            }
            .creators-controls.creators-controls-mobile {
                display: inline-flex;
                width: auto;
                max-width: none;
                justify-content: flex-end;
                gap: 6px;
                margin: 0 0 0 auto;
            }
            .creators-page .tag-filter-chips {
                justify-content: flex-end;
                margin: -9px 0 5px;
                max-width: 100%;
            }
            .creators-tag-filters {
                width: 100%;
                margin: 0 auto 8px;
            }
            .creators-tag-filters-inner {
                justify-content: flex-start;
                flex-wrap: nowrap;
                max-height: none;
                overflow-x: auto;
                overflow-y: hidden;
                padding-bottom: 2px;
                scrollbar-width: thin;
            }
            .creators-tag-chip {
                flex: 0 0 auto;
                white-space: nowrap;
            }
            .creators-tag-active {
                text-align: left;
                font-size: 0.58rem;
            }
            .creator-profile-head {
                flex-direction: column;
            }
            .creator-bots-list {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 6px;
                justify-content: stretch;
            }
            .creator-bot-row {
                min-width: 0;
            }
            .creator-bot-avatar-wrap {
                width: 100%;
            }
        }
        @media (min-width: 769px) and (max-width: 900px) {
            .creators-toolbar {
                justify-content: space-between;
                align-items: center;
                flex-direction: row;
                gap: var(--space-3);
                padding: 2px 0 11px;
                background: transparent;
                box-shadow: none;
                border-bottom: 0;
                backdrop-filter: none;
            }
            .creators-summary {
                justify-content: flex-start;
            }
            .creators-summary-hero {
                align-items: center;
                justify-content: space-between;
                flex-direction: row;
                text-align: left;
                gap: 12px;
                padding-top: 0;
            }
            .creators-summary-updated {
                position: absolute;
                top: -8px;
                left: 0;
                right: 0;
                text-align: center;
                white-space: nowrap;
                font-size: 0.62rem;
            }
            .creators-controls.creators-controls-mobile {
                display: inline-flex;
            }
            .creators-page .tag-filter-chips {
                justify-content: flex-end;
                margin: -9px 0 5px;
            }
        }
        @media (max-width: 420px) {
            .creators-mobile-stats {
                gap: 3px 6px;
            }
            .creators-cell-creator {
                margin-bottom: 0;
            }
        }
        @media (min-width: 901px) {
            .creator-bots-list {
                grid-template-columns: repeat(auto-fill, 140px);
                gap: 10px;
            }
        }
        /* Fullscreen above everything (incl. top/bottom bars on iOS) - modal is outside scroll container */
        .admin-scrape-char-modal {
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed !important;
            inset: 0;
            z-index: 10002;
            padding: var(--space-4);
            background: rgba(0, 0, 0, 0.7);
        }
        .admin-scrape-char-modal .modal-content { max-width: 480px; width: 100%; }
        .admin-scrape-char-detail { font-size: 0.85rem; }
        .admin-scrape-char-detail p { margin: 0 0 var(--space-2); }
        .admin-scrape-char-detail code { font-size: 0.75rem; word-break: break-all; }
        .admin-scrape-char-url { word-break: break-all; }
        .admin-scrape-char-modal-footer {
            padding-top: var(--space-3);
            border-top: 1px solid var(--border-subtle);
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2);
        }
        .admin-table-scrapes { font-size: 0.7rem; }
        .admin-table-scrapes th,
        .admin-table-scrapes td {
            padding: 2px var(--space-2);
            white-space: nowrap;
        }
        .admin-table-runs th,
        .admin-table-runs td {
            padding: 2px 6px;
        }
        .admin-table-runs td[data-label="Error"] {
            max-width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .admin-table-scrapes .admin-scrapes-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .admin-table-scrapes .admin-scrapes-id { font-family: var(--font-mono, monospace); font-size: 0.65rem; }
        .admin-table-scrapes .admin-scrapes-date { font-size: 0.65rem; color: var(--text-muted); }
        .admin-scrapes-pager {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            margin: 0 0 var(--space-2) 0;
            font-size: 0.78rem;
        }
        .admin-scrapes-pager--inline {
            margin: 0;
        }
        .admin-scrapes-pager .admin-scrapes-prev,
        .admin-scrapes-pager .admin-scrapes-next {
            padding: 4px 9px;
            font-size: 0.85rem;
            line-height: 1;
            min-width: 34px;
        }
        .admin-scrapes-pager-left {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .admin-scrapes-pager-pages {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .admin-scrapes-page-link {
            border: 1px solid rgba(255, 255, 255, 0.10);
            background: rgba(255, 255, 255, 0.04);
            color: var(--text-secondary);
            padding: 4px 8px;
            border-radius: 999px;
            cursor: pointer;
            font-size: 0.75rem;
            font-weight: 650;
            min-width: 28px;
        }
        .admin-scrapes-page-link:hover {
            background: rgba(255, 255, 255, 0.07);
            color: var(--text-primary);
        }
        .admin-scrapes-page-link.active {
            background: var(--accent-primary);
            border-color: rgba(255, 255, 255, 0.16);
            color: var(--text-inverse);
        }
        .admin-scrapes-page-ellipsis {
            color: var(--text-muted);
            padding: 0 2px;
            user-select: none;
        }
        .admin-vpn-section { margin-top: var(--space-4); }
        .admin-vpn-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
            margin-bottom: var(--space-2);
        }
        .admin-vpn-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .admin-vpn-header .admin-card-title { margin: 0; }
        .admin-vpn-warning-wrap { margin-bottom: var(--space-1); }
        .admin-vpn-warning {
            margin: 0 0 var(--space-2);
            padding: var(--space-1) var(--space-2);
            background: var(--error-muted);
            color: var(--error);
            border-radius: var(--radius-sm);
            font-size: 0.8rem;
            font-weight: 500;
        }
        .admin-vpn-config-source {
            margin: 0 0 var(--space-1);
            font-family: var(--font-mono);
            font-size: 0.75rem;
            color: var(--text-muted);
            word-break: break-all;
        }
        .admin-vpn-intro {
            margin: 0 0 var(--space-2);
            color: var(--text-muted);
            font-size: 0.82rem;
        }
        .admin-vpn-view-tabs {
            display: inline-flex;
            gap: 4px;
            margin-bottom: var(--space-2);
            padding: 3px;
            border: 1px solid var(--border-subtle);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.02);
        }
        .admin-vpn-view-tab {
            border: none;
            background: transparent;
            color: var(--text-muted);
            font-size: 0.76rem;
            font-weight: 650;
            padding: 5px 10px;
            border-radius: 999px;
            cursor: pointer;
        }
        .admin-vpn-view-tab:hover {
            color: var(--text-primary);
        }
        .admin-vpn-view-tab.active {
            color: var(--text-inverse);
            background: var(--accent-primary);
        }
        .admin-vpn-view-panel {
            display: none;
        }
        .admin-vpn-view-panel.active {
            display: block;
        }
        .admin-vpn-tabs {
            display: flex;
            gap: 2px;
            margin-bottom: var(--space-2);
            border-bottom: 1px solid var(--border-subtle);
        }
        .admin-vpn-tab {
            padding: 6px 14px;
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--text-muted);
            background: transparent;
            border: none;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
            cursor: pointer;
            border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        }
        .admin-vpn-tab:hover { color: var(--text-primary); }
        .admin-vpn-tab.active {
            color: var(--brand-hot-pink, var(--text-primary));
            border-bottom-color: var(--brand-hot-pink, var(--accent));
        }
        .admin-vpn-panel {
            display: none;
        }
        .admin-vpn-panel.active {
            display: block;
        }
        .admin-vpn-panel-head {
            margin-bottom: var(--space-1);
            display: flex;
            justify-content: flex-end;
        }
        .admin-vpn-panel-head .admin-vpn-wipe-btn { font-size: 0.7rem; padding: 2px 8px; }
        .admin-table-wrap-vpn { margin-top: 0; }
        .admin-table-wrap .admin-table.admin-table-vpn {
            font-size: 0.78rem;
        }
        .admin-table-wrap .admin-table.admin-table-vpn th,
        .admin-table-wrap .admin-table.admin-table-vpn td {
            padding: 4px var(--space-2);
        }
        .admin-table-wrap .admin-table.admin-table-vpn th {
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }
        .admin-table-wrap .admin-table.admin-table-vpn .admin-vpn-status-select {
            font-size: 0.75rem;
            padding: 2px 6px;
            min-height: 26px;
        }
        .admin-table-wrap .admin-table.admin-table-vpn .admin-vpn-save {
            padding: 2px 8px;
            font-size: 0.75rem;
        }
        .admin-vpn-wipe-both { font-weight: 600; font-size: 0.75rem; padding: 4px 10px; }
        .admin-vpn-history-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
            margin-bottom: var(--space-2);
        }
        .admin-vpn-history-intro {
            margin: 0;
            color: var(--text-muted);
            font-size: 0.78rem;
        }
        .admin-vpn-quicktest-status {
            display: inline-block;
            margin: -2px 0 var(--space-2);
            white-space: pre-line;
            line-height: 1.35;
        }
        .admin-vpn-history-summary {
            display: grid;
            grid-template-columns: repeat(5, minmax(90px, 1fr));
            gap: var(--space-1);
            margin-bottom: var(--space-2);
        }
        .admin-vpn-history-metric {
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: rgba(255, 255, 255, 0.02);
            padding: 8px 10px;
        }
        .admin-vpn-history-metric-label {
            display: block;
            color: var(--text-muted);
            font-size: 0.66rem;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }
        .admin-vpn-history-metric-value {
            display: block;
            margin-top: 2px;
            color: var(--text-primary);
            font-size: 0.86rem;
            font-weight: 700;
        }
        .admin-vpn-history-chart {
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            padding: 8px 10px;
            margin-bottom: var(--space-2);
            background: rgba(255, 255, 255, 0.02);
        }
        .admin-vpn-history-chart-empty {
            margin: 0;
            color: var(--text-muted);
            font-size: 0.78rem;
        }
        .admin-vpn-bars {
            display: grid;
            grid-template-columns: repeat(var(--vpn-bar-count, 1), minmax(0, 1fr));
            align-items: end;
            gap: 1px;
            min-height: 68px;
            min-width: var(--vpn-bars-min-width, 0px);
        }
        .admin-vpn-bars-axis {
            position: relative;
            height: 18px;
            margin-top: 6px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            min-width: var(--vpn-bars-min-width, 0px);
        }
        .admin-vpn-bars-axis-label {
            position: absolute;
            top: 2px;
            transform: translateX(-50%);
            font-size: 0.62rem;
            color: var(--text-muted);
            white-space: nowrap;
            font-family: var(--font-mono);
        }
        .admin-vpn-bars-axis-label.start {
            transform: none;
        }
        .admin-vpn-bars-axis-label.end {
            transform: translateX(-100%);
        }
        .admin-vpn-bar {
            min-height: 2px;
            border-radius: 2px 2px 0 0;
            opacity: 0.96;
        }
        .admin-vpn-bar--healthy { background: #166534; }
        .admin-vpn-bar--uncertain { background: #86efac; }
        .admin-vpn-bar--error { background: #ef4444; }
        .admin-vpn-bar--recovered { background: #22c55e; }
        .admin-vpn-bar--idle { background: rgba(255, 255, 255, 0.14); }
        .admin-vpn-bars-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 8px;
            color: var(--text-muted);
            font-size: 0.68rem;
        }
        .admin-vpn-bars-legend span::before {
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 2px;
            margin-right: 5px;
            vertical-align: -1px;
            background: currentColor;
        }
        .admin-vpn-bars-legend .healthy { color: #166534; }
        .admin-vpn-bars-legend .uncertain { color: #86efac; }
        .admin-vpn-bars-legend .error { color: #ef4444; }
        .admin-vpn-bars-legend .recovered { color: #22c55e; }
        .admin-vpn-history-events {
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: rgba(255, 255, 255, 0.02);
            max-height: 280px;
            overflow: auto;
        }
        .admin-vpn-history-events-empty {
            margin: 0;
            padding: 10px;
            color: var(--text-muted);
            font-size: 0.78rem;
        }
        .admin-vpn-history-event {
            display: grid;
            grid-template-columns: 110px 64px 80px 1fr;
            gap: 8px;
            align-items: start;
            padding: 8px 10px;
            border-bottom: 1px solid var(--border-subtle);
            font-size: 0.73rem;
        }
        .admin-vpn-history-event:last-child {
            border-bottom: none;
        }
        .admin-vpn-history-event-time {
            color: var(--text-muted);
            font-family: var(--font-mono);
        }
        .admin-vpn-history-event-role {
            color: var(--text-secondary);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }
        .admin-vpn-history-event-status {
            font-weight: 700;
            font-size: 0.66rem;
            padding: 2px 6px;
            border-radius: 999px;
            text-align: center;
            border: 1px solid transparent;
            background: rgba(255, 255, 255, 0.06);
            color: var(--text-secondary);
        }
        .admin-vpn-history-event-status.error {
            color: #ef4444;
            border-color: rgba(239, 68, 68, 0.35);
            background: rgba(239, 68, 68, 0.12);
        }
        .admin-vpn-history-event-status.uncertain {
            color: #166534;
            border-color: rgba(134, 239, 172, 0.45);
            background: rgba(134, 239, 172, 0.22);
        }
        .admin-vpn-history-event-status.recovered {
            color: #14532d;
            border-color: rgba(34, 197, 94, 0.45);
            background: rgba(34, 197, 94, 0.2);
        }
        .admin-vpn-history-event-message {
            color: var(--text-primary);
            line-height: 1.35;
            word-break: break-word;
        }
        .admin-vpn-history-event-meta {
            display: block;
            margin-top: 2px;
            color: var(--text-muted);
            font-family: var(--font-mono);
            font-size: 0.66rem;
        }

        .admin-workers-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: var(--space-2);
            margin-bottom: var(--space-2);
        }
        .admin-workers-actions {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        .admin-workers-target-select {
            min-width: 240px;
            max-width: 360px;
            height: 32px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border-subtle);
            background: rgba(255, 255, 255, 0.04);
            color: var(--text-primary);
            padding: 0 8px;
            font-size: 0.75rem;
        }
        .admin-workers-last-updated {
            color: var(--text-muted);
            font-size: 0.72rem;
        }
        .admin-workers-intro {
            margin: 0 0 var(--space-2);
            color: var(--text-muted);
            font-size: 0.78rem;
        }
        .admin-workers-warnings {
            display: grid;
            gap: 6px;
            margin-bottom: var(--space-2);
        }
        .admin-workers-warning-item {
            background: rgba(239, 68, 68, 0.12);
            border: 1px solid rgba(239, 68, 68, 0.35);
            color: #fecaca;
            border-radius: var(--radius-sm);
            padding: 6px 8px;
            font-size: 0.75rem;
        }
        .admin-workers-warning-ok {
            background: rgba(34, 197, 94, 0.1);
            border: 1px solid rgba(34, 197, 94, 0.35);
            color: #bbf7d0;
            border-radius: var(--radius-sm);
            padding: 6px 8px;
            font-size: 0.75rem;
        }
        .admin-workers-stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: var(--space-2);
            margin-bottom: var(--space-2);
        }
        .admin-workers-metric {
            border: 1px solid var(--border-subtle);
            background: rgba(255, 255, 255, 0.03);
            border-radius: var(--radius-sm);
            padding: 8px 10px;
            display: flex;
            flex-direction: column;
            gap: 3px;
            min-height: 70px;
        }
        .admin-workers-metric-label {
            color: var(--text-muted);
            font-size: 0.68rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .admin-workers-metric-value {
            color: var(--text-primary);
            font-size: 0.95rem;
            line-height: 1.2;
        }
        .admin-workers-metric-hint {
            color: var(--text-muted);
            font-size: 0.68rem;
            line-height: 1.25;
        }
        .admin-workers-details {
            display: grid;
            gap: var(--space-2);
        }
        .admin-workers-detail-tabs {
            display: inline-flex;
            gap: 6px;
            padding: 3px;
            border: 1px solid var(--border-subtle);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.03);
            width: fit-content;
            max-width: 100%;
            flex-wrap: wrap;
        }
        .admin-workers-detail-tab {
            border: 0;
            border-radius: 999px;
            padding: 6px 10px;
            background: transparent;
            color: var(--text-muted);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            cursor: pointer;
            transition: background var(--transition-fast), color var(--transition-fast);
        }
        .admin-workers-detail-tab.is-active {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-primary);
        }
        .admin-workers-detail-block {
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: rgba(255, 255, 255, 0.02);
            padding: 10px;
        }
        .admin-workers-detail-block h4 {
            margin: 0 0 8px;
            font-size: 0.8rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .admin-workers-chip-row {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 8px;
        }
        .admin-workers-vpn-action {
            border: 1px solid color-mix(in srgb, var(--border-default) 78%, var(--text-primary) 22%);
            border-radius: var(--radius-sm);
            background: color-mix(in srgb, var(--bg-elevated) 88%, white 12%);
            color: var(--text-primary) !important;
            padding: 6px 10px;
            font-size: 0.72rem;
            font-weight: 700;
            line-height: 1.2;
            cursor: pointer;
            transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
        }
        .admin-workers-vpn-action:hover:not(:disabled) {
            background: color-mix(in srgb, var(--bg-hover) 82%, white 18%);
            border-color: color-mix(in srgb, var(--border-strong) 70%, var(--text-primary) 30%);
            color: var(--text-primary) !important;
            transform: translateY(-1px);
        }
        .admin-workers-vpn-action:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        .admin-workers-vpn-tabs {
            display: inline-flex;
            gap: 6px;
            margin: 0 0 10px;
            padding: 3px;
            border: 1px solid var(--border-subtle);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.03);
        }
        .admin-workers-vpn-tab {
            border: 0;
            border-radius: 999px;
            padding: 6px 10px;
            background: transparent;
            color: var(--text-muted);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            cursor: pointer;
        }
        .admin-workers-vpn-tab.is-active {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-primary);
        }
        .admin-workers-vpn-panel {
            min-width: 0;
        }
        .admin-workers-chip {
            border: 1px solid var(--border-subtle);
            border-radius: 999px;
            padding: 2px 8px;
            font-size: 0.7rem;
            color: var(--text-secondary);
            background: rgba(255, 255, 255, 0.04);
        }
        .admin-workers-meta-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 6px 12px;
            font-size: 0.74rem;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }
        .admin-workers-sample-group {
            margin-bottom: 8px;
            font-size: 0.72rem;
            color: var(--text-secondary);
        }
        .admin-workers-sample-group:last-child {
            margin-bottom: 0;
        }
        .admin-workers-sample-row {
            margin-top: 4px;
            font-family: var(--font-mono);
            font-size: 0.66rem;
            color: var(--text-muted);
            word-break: break-word;
        }
        .admin-workers-vpn-scroll {
            max-height: 320px;
            overflow: auto;
        }
        .admin-table-workers .admin-status-badge.ok {
            color: #bbf7d0;
            border-color: rgba(34, 197, 94, 0.35);
            background: rgba(34, 197, 94, 0.14);
        }
        .admin-table-workers .admin-status-badge.failed {
            color: #fecaca;
            border-color: rgba(239, 68, 68, 0.35);
            background: rgba(239, 68, 68, 0.14);
        }

        /* Admin mobile-friendly */
        @media (max-width: 640px) {
            .view-admin { padding: 0 0 var(--space-4); }
            .admin-content { padding: 0 2px; }
            .admin-panels { padding: 0; }
            .admin-tabs-row {
                gap: var(--space-2);
                margin-bottom: var(--space-2);
            }
            .admin-tabs {
                gap: 0;
                margin: 0 0 var(--space-2);
                padding: 0;
                border-bottom: none;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            .admin-tab {
                padding: var(--space-2) var(--space-3);
                white-space: nowrap;
                border-radius: 0;
            }
            .admin-tab.active {
                background: var(--bg-elevated);
                border-bottom: 2px solid var(--brand-hot-pink);
            }
            .admin-tab-text { display: none; }
            .admin-tab-icon { width: 20px; height: 20px; }
            
            .admin-sessions-header {
                margin: 0 0 var(--space-2);
                padding: 0;
            }
            .admin-sessions-actions {
                width: 100%;
                margin-top: var(--space-2);
                gap: var(--space-1);
            }
            .admin-btn-compact {
                padding: 6px 10px;
                font-size: 0.75rem;
            }
            .admin-btn-compact-icon {
                width: 12px;
                height: 12px;
            }
            .admin-account-commandbar {
                grid-template-columns: 1fr;
            }
            .admin-account-card-head {
                flex-direction: column;
                align-items: stretch;
            }
            .admin-account-card-head-actions {
                justify-content: space-between;
            }
            .admin-account-user-main {
                flex-direction: column;
                align-items: flex-start;
            }
            .admin-account-kv {
                grid-template-columns: 1fr;
                gap: 2px;
            }
            .admin-account-user-actions {
                justify-content: stretch;
            }
            .admin-account-user-actions .admin-btn-compact {
                width: 100%;
            }
            
            .admin-table-wrap {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                border-radius: var(--radius-sm);
                margin: 0;
            }
            
            /* Sessions table: same as desktop on mobile, horizontal scroll when narrow */
            .admin-table-wrap .admin-table.admin-table-sessions {
                min-width: 820px;
            }
            
            /* Legend */
            .admin-sessions-legend {
                margin: var(--space-3) 0 0;
                padding: var(--space-2) 0;
            }
            
            .admin-card { padding: var(--space-2) 2px; }
            .admin-card-title { font-size: 0.9rem; margin-bottom: var(--space-1); padding-bottom: var(--space-1); }
            .admin-card-block { margin-bottom: var(--space-2); }
            .admin-card-subtitle { font-size: 0.7rem; margin-bottom: var(--space-1); }
            .admin-vpn-warning { margin-bottom: var(--space-1); padding: var(--space-1) var(--space-2); font-size: 0.8rem; }
            .admin-vpn-view-tabs {
                width: 100%;
                justify-content: space-between;
            }
            .admin-vpn-view-tab {
                flex: 1 1 0;
                text-align: center;
                padding: 6px 8px;
            }
            .admin-vpn-history-head {
                flex-direction: column;
                align-items: flex-start;
            }
            .admin-vpn-history-summary {
                display: flex;
                grid-template-columns: none;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                gap: 8px;
                margin-right: -2px;
                padding-bottom: 4px;
            }
            .admin-vpn-history-summary .admin-vpn-history-metric {
                flex: 0 0 auto;
                min-width: 138px;
            }
            .admin-vpn-history-chart {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            .admin-vpn-bars,
            .admin-vpn-bars-axis {
                min-width: var(--vpn-bars-min-width, 560px);
            }
            .admin-vpn-history-event {
                grid-template-columns: 1fr;
                gap: 4px;
                padding: 8px;
            }
            .admin-vpn-history-event-time {
                font-size: 0.7rem;
            }
            .admin-vpn-history-event-role {
                font-size: 0.66rem;
            }
            .admin-vpn-history-event-status {
                justify-self: start;
            }
            .admin-table-wrap {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                border-radius: var(--radius-sm);
                padding: 0 2px;
            }
            .admin-table-wrap .admin-table th,
            .admin-table-wrap .admin-table td {
                padding: 2px 4px;
                font-size: 0.75rem;
            }
            .admin-table-wrap .admin-table th { display: none; }
            .admin-table-wrap .admin-table tr {
                display: block;
                border-bottom: 1px solid var(--border-subtle);
                padding: 4px 0;
            }
            .admin-table-wrap .admin-table tr:last-child { border-bottom: none; }
            .admin-table-wrap .admin-table td {
                display: flex;
                align-items: center;
                gap: var(--space-1);
                padding: 2px 0;
                border: none;
            }
            .admin-table-wrap .admin-table td::before {
                content: attr(data-label);
                font-weight: 600;
                color: var(--text-muted);
                min-width: 4rem;
                flex-shrink: 0;
                font-size: 0.7rem;
            }
            .admin-table-wrap .admin-table td[data-label="Action"] {
                flex-wrap: wrap;
                gap: var(--space-1);
            }
            /* VPN table: single line per row, no labels, 3 columns side by side */
            .admin-table-wrap .admin-table-vpn th { display: none; }
            .admin-table-wrap .admin-table-vpn tbody tr {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: center;
                gap: 6px;
                padding: 3px 0;
                border-bottom: 1px solid var(--border-subtle);
            }
            .admin-table-wrap .admin-table-vpn tbody tr:last-child { border-bottom: none; }
            .admin-table-wrap .admin-table-vpn tbody td {
                display: block;
                padding: 0;
                border: none;
                flex: 0 1 auto;
                min-width: 0;
            }
            .admin-table-wrap .admin-table-vpn tbody td::before {
                content: none;
                display: none;
            }
            .admin-table-wrap .admin-table-vpn tbody td:first-child {
                flex: 1 1 0;
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 0.7rem;
            }
            .admin-table-wrap .admin-table-vpn tbody td:nth-child(2) {
                flex: 0 0 auto;
            }
            .admin-table-wrap .admin-table-vpn tbody td:nth-child(3) {
                flex: 0 0 auto;
            }
            .admin-table-wrap .admin-table-vpn .admin-vpn-status-select {
                min-height: 32px;
                padding: 2px 6px;
                font-size: 0.75rem;
            }
            .admin-table-wrap .admin-table-vpn .admin-vpn-save {
                min-height: 32px;
                padding: 4px 8px;
                font-size: 0.75rem;
            }
            .admin-table-wrap .admin-table .admin-status-select,
            .admin-table-wrap .admin-table .admin-vpn-status-select {
                min-height: 32px;
                padding: 4px 6px;
                font-size: 0.8rem;
            }
            .admin-table-wrap .admin-table .admin-vpn-save,
            .admin-table-wrap .admin-table .admin-make-public {
                min-height: 32px;
                padding: 6px 10px;
                font-size: 0.8rem;
            }
            .admin-table-wrap .admin-table .admin-public-session-delete {
                min-width: 32px;
                min-height: 32px;
                padding: 6px;
            }
            /* Sessions table: keep table layout on mobile (scroll horizontally, same as desktop) */
            .admin-table-wrap .admin-table.admin-table-sessions thead {
                display: table-header-group;
            }
            .admin-table-wrap .admin-table.admin-table-sessions tbody tr {
                display: table-row;
                padding: 0;
            }
            .admin-table-wrap .admin-table.admin-table-sessions td {
                display: table-cell;
                padding: var(--space-2) var(--space-3);
            }
            .admin-table-wrap .admin-table.admin-table-sessions td::before {
                content: none;
                display: none;
            }
            .admin-table-wrap .characters-empty { padding: var(--space-1) 4px; font-size: 0.8rem; }
        }

        .about-content {
            max-width: 860px;
            width: 100%;
            margin: 0 auto;
            padding: 0 var(--space-4);
            box-sizing: border-box;
            color: var(--text-primary);
            font-size: 0.95rem;
            line-height: 1.6;
        }
        .about-content h1 {
            font-size: 1.4rem;
            margin: 0 0 var(--space-4);
            color: var(--brand-hot-pink);
        }
        .about-section {
            margin-bottom: var(--space-6);
        }
        .about-content h2 {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--brand-hot-pink);
            margin: 0 0 var(--space-2);
        }
        .about-content p {
            margin: 0 0 var(--space-3);
            color: #c9cdda;
        }
        .about-content strong {
            color: #ffffff;
        }
        .about-content b {
            color: #ffffff;
            font-weight: 700;
        }
        .about-content .creator-policy-page {
            display: grid;
            gap: var(--space-4);
            width: 100%;
            max-width: 760px;
            min-width: 0;
            margin: 0 auto;
            padding-bottom: var(--space-6);
            text-align: left;
        }
        .creator-policy-floating-cta {
            position: fixed;
            top: 74px;
            right: 18px;
            z-index: 1200;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 26px;
            max-width: min(160px, calc(100vw - 36px));
            padding: 0 9px;
            border: 1px solid rgba(255, 45, 154, 0.45);
            border-radius: var(--radius-sm);
            background: rgba(255, 45, 154, 0.18);
            color: #fff;
            box-shadow: var(--shadow-sm);
            font-size: 0.64rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            line-height: 1.1;
            text-align: center;
            text-decoration: none;
        }
        .creator-policy-floating-cta:hover {
            border-color: rgba(255, 45, 154, 0.72);
            background: rgba(255, 45, 154, 0.28);
            color: #fff;
            text-decoration: none;
        }
        .creator-policy-apology-banner {
            border: 1px solid rgba(59, 130, 246, 0.32);
            border-radius: var(--radius-md);
            background: rgba(59, 130, 246, 0.1);
            padding: var(--space-3) var(--space-6);
            box-shadow: var(--shadow-md);
        }
        .creator-policy-apology-kicker {
            margin: 0 0 var(--space-2);
            color: #93c5fd;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }
        .creator-policy-apology-banner h2 {
            margin: 0 0 var(--space-3);
            color: var(--text-primary);
            font-size: clamp(1.55rem, 4vw, 2.45rem);
            line-height: 1.08;
            letter-spacing: 0;
            text-transform: none;
        }
        .creator-policy-apology-banner p {
            margin: 0 0 var(--space-3);
            color: #d8dae3;
            line-height: 1.55;
        }
        .creator-policy-apology-banner .creator-policy-apology-lead {
            max-width: 760px;
            color: var(--text-primary);
            font-size: 1rem;
            font-weight: 600;
        }
        .creator-policy-apology-banner h2 + .creator-policy-apology-lead {
            font-size: 1.12rem;
        }
        .creator-policy-apology-banner .creator-policy-apology-emphasis {
            max-width: 760px;
            color: var(--text-primary);
            font-size: 1rem;
            font-weight: 900;
            line-height: 1.55;
        }
        .creator-policy-apology-banner p:last-child {
            margin-bottom: 0;
        }
        .creator-policy-panel.creator-policy-creator-note {
            border-color: rgba(255, 45, 154, 0.52);
            background: rgba(255, 45, 154, 0.08);
            box-shadow: 0 0 0 1px rgba(255, 45, 154, 0.12), var(--shadow-sm);
        }
        .how-datacat-works-page .creator-policy-header {
            border-color: rgba(59, 130, 246, 0.3);
            background: rgba(59, 130, 246, 0.08);
        }
        .how-datacat-works-page .creator-policy-creator-note {
            border-color: rgba(59, 130, 246, 0.42);
            background: rgba(59, 130, 246, 0.08);
            box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.12), var(--shadow-sm);
        }
        .creator-policy-creator-note a {
            color: #fff;
            font-weight: 800;
            text-decoration-color: rgba(255, 45, 154, 0.7);
            text-underline-offset: 3px;
        }
        .creator-policy-creator-note a:hover {
            color: var(--accent-hover);
        }
        .creator-policy-sorry-line {
            color: var(--text-primary);
            font-weight: 900;
        }
        .creator-policy-header,
        .creator-policy-panel {
            min-width: 0;
            border: 1px solid var(--border-default);
            border-radius: var(--radius-md);
            background: rgba(24, 24, 27, 0.78);
            padding: var(--space-2) var(--space-6) var(--space-3);
            box-shadow: var(--shadow-sm);
        }
        .creator-policy-header {
            background: rgba(255, 45, 154, 0.08);
            border-color: rgba(255, 45, 154, 0.24);
        }
        .about-content .creator-policy-header h1 {
            margin-bottom: var(--space-2);
            color: var(--text-primary);
            font-size: clamp(1.55rem, 4vw, 2.4rem);
            font-weight: 900;
            line-height: 1.08;
        }
        .creator-policy-subtitle {
            max-width: 680px;
            color: var(--text-secondary);
            font-size: 1.05rem;
        }
        .creator-policy-principle,
        .creator-policy-boundary {
            margin-top: var(--space-3);
            padding: var(--space-3) var(--space-4);
            border: 1px solid rgba(255, 45, 154, 0.24);
            border-left: 4px solid var(--brand-hot-pink);
            border-radius: var(--radius-sm);
            background: rgba(255, 45, 154, 0.09);
            color: var(--text-primary);
            line-height: 1.55;
        }
        .creator-policy-boundary {
            border-color: rgba(34, 197, 94, 0.28);
            border-left-color: var(--success);
            background: rgba(34, 197, 94, 0.08);
        }
        .creator-policy-highlight {
            margin-top: var(--space-3);
            padding: var(--space-3) var(--space-4);
            border: 1px solid rgba(59, 130, 246, 0.28);
            border-left: 4px solid var(--info);
            border-radius: var(--radius-sm);
            background: rgba(59, 130, 246, 0.09);
            color: var(--text-primary);
            font-weight: 600;
            line-height: 1.55;
        }
        .creator-policy-attribution-box {
            margin-top: var(--space-3);
            padding: var(--space-3) var(--space-4);
            border: 1px solid rgba(255, 45, 154, 0.24);
            border-left: 4px solid var(--brand-hot-pink);
            border-radius: var(--radius-sm);
            background: rgba(255, 45, 154, 0.09);
            color: var(--text-primary);
            font-weight: 600;
            line-height: 1.55;
        }
        .creator-policy-panel h2 {
            margin: 0 0 var(--space-3);
            font-size: 1.15rem;
            font-weight: 900;
            line-height: 1.2;
            letter-spacing: 0.08em;
        }
        .creator-policy-action-row {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-3);
            margin: var(--space-3) 0;
        }
        .creator-policy-primary-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 40px;
            padding: 0 var(--space-4);
            border: 1px solid rgba(255, 45, 154, 0.4);
            border-radius: var(--radius-md);
            background: var(--accent-muted);
            color: var(--text-primary);
            font-weight: 700;
            text-decoration: none;
        }
        .creator-policy-primary-link:hover {
            border-color: rgba(255, 45, 154, 0.7);
            background: rgba(255, 45, 154, 0.24);
            color: #fff;
            text-decoration: none;
        }
        .creator-policy-secondary-link {
            border-color: rgba(59, 130, 246, 0.34);
            background: rgba(59, 130, 246, 0.1);
        }
        .creator-policy-secondary-link:hover {
            border-color: rgba(96, 165, 250, 0.62);
            background: rgba(59, 130, 246, 0.2);
        }
        .creator-policy-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--space-4);
            margin-top: var(--space-3);
        }
        .creator-policy-card {
            min-width: 0;
            border: 1px solid var(--border-default);
            border-radius: var(--radius-md);
            background: rgba(39, 39, 42, 0.58);
            padding: var(--space-3) var(--space-4);
        }
        .creator-policy-card h3 {
            margin: 0 0 var(--space-2);
            color: var(--text-primary);
            font-size: 0.95rem;
            font-weight: 900;
        }
        .creator-policy-control-grid .creator-policy-card {
            border-color: rgba(255, 45, 154, 0.18);
        }
        .creator-policy-access-table-wrap {
            margin: var(--space-4) 0;
            max-width: 100%;
            overflow-x: auto;
            border: 1px solid var(--border-default);
            border-radius: var(--radius-md);
            background: rgba(15, 15, 16, 0.42);
        }
        .creator-policy-access-table {
            width: 100%;
            min-width: 560px;
            border-collapse: collapse;
            color: var(--text-primary);
        }
        .creator-policy-access-table th,
        .creator-policy-access-table td {
            padding: var(--space-2) var(--space-4);
            border-bottom: 1px solid var(--border-subtle);
            text-align: left;
            vertical-align: top;
            line-height: 1.45;
        }
        .creator-policy-access-table th {
            color: var(--brand-hot-pink);
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            background: rgba(255, 45, 154, 0.08);
        }
        .creator-policy-access-table td {
            color: #d8dae3;
            font-size: 0.9rem;
        }
        .creator-policy-access-table td:last-child {
            width: 34%;
            color: var(--text-primary);
            font-weight: 700;
        }
        .creator-policy-options-table td:first-child {
            width: 28%;
            color: var(--text-primary);
            font-weight: 800;
        }
        .creator-policy-options-table td:last-child {
            width: auto;
            font-weight: 600;
        }
        .creator-policy-access-table tr:last-child td {
            border-bottom: 0;
        }
        .creator-policy-list {
            columns: 2;
            column-gap: var(--space-8);
            margin: 0 0 var(--space-4);
            padding-left: 1.1rem;
            color: #d8dae3;
        }
        .creator-policy-list li {
            break-inside: avoid;
            margin-bottom: var(--space-1);
        }
        .creator-policy-closing {
            border-color: rgba(59, 130, 246, 0.26);
        }
        .creator-policy-fineprint {
            color: var(--text-muted);
            font-size: 0.86rem;
        }
        .creator-policy-page p {
            margin-top: 0;
            margin-bottom: var(--space-4);
            line-height: 1.62;
        }
        .creator-policy-page p + p {
            margin-top: var(--space-2);
        }
        .creator-policy-page p:last-child {
            margin-bottom: 0;
        }
        @media (max-width: 640px) {
            .view-about {
                padding-top: 0;
            }
            .about-content {
                padding: 0 var(--space-3);
                font-size: 0.9rem;
            }
            .about-content h1 { font-size: 1.2rem; }
            .about-content .creator-policy-page {
                gap: var(--space-3);
                max-width: 100%;
            }
            .creator-policy-apology-banner,
            .creator-policy-header,
            .creator-policy-panel {
                padding: var(--space-1) var(--space-3) var(--space-2);
            }
            .about-content .creator-policy-header h1 {
                font-size: 1.45rem;
            }
            .creator-policy-panel h2 {
                font-size: 1.05rem;
                letter-spacing: 0.05em;
            }
            .creator-policy-grid {
                grid-template-columns: 1fr;
            }
            .creator-policy-list {
                columns: 1;
            }
            .creator-policy-action-row {
                margin-bottom: 0;
            }
            .creator-policy-primary-link {
                width: 100%;
            }
            .creator-policy-access-table-wrap {
                overflow-x: visible;
                border: 0;
                background: transparent;
            }
            .creator-policy-access-table,
            .creator-policy-access-table tbody,
            .creator-policy-access-table tr,
            .creator-policy-access-table td {
                display: block;
                width: 100%;
                min-width: 0;
            }
            .creator-policy-access-table {
                border-collapse: separate;
                border-spacing: 0;
            }
            .creator-policy-access-table thead {
                display: none;
            }
            .creator-policy-access-table tr {
                margin-bottom: var(--space-3);
                border: 1px solid var(--border-default);
                border-radius: var(--radius-md);
                background: rgba(15, 15, 16, 0.45);
                overflow: hidden;
            }
            .creator-policy-access-table th,
            .creator-policy-access-table td {
                padding: var(--space-2) var(--space-3);
            }
            .creator-policy-options-table td:first-child {
                width: auto;
                padding-bottom: var(--space-1);
                border-bottom: 0;
                color: var(--brand-hot-pink);
                font-size: 0.78rem;
                letter-spacing: 0.08em;
                text-transform: uppercase;
            }
            .creator-policy-options-table td:last-child {
                width: auto;
                padding-top: 0;
                border-bottom: 0;
                font-size: 0.88rem;
                font-weight: 600;
            }
            .creator-policy-floating-cta {
                top: 66px;
                right: 10px;
                min-height: 24px;
                max-width: min(140px, calc(100vw - 20px));
                padding: 0 7px;
                font-size: 0.58rem;
            }
        }

        /* Sessions Bar */
        .sessions-bar {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: var(--space-2);
        }

        /* Sessions Group Headers */
        .sessions-group-header {
            padding: var(--space-1) var(--space-3);
            font-size: 0.625rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            background: var(--bg-subtle);
            border-bottom: 1px solid var(--border-subtle);
            position: sticky;
            top: 0;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
        }
        .sessions-group-header button {
            text-transform: none;
        }
        .sessions-public-list-header {
            margin-top: var(--space-2);
        }
        .sessions-group-meta {
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
        .sessions-group-count {
            font-size: 0.7rem;
            color: var(--text-muted);
            text-transform: none;
            letter-spacing: 0.02em;
        }

        /* Session Options */
        .sessions-option {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-2) var(--space-3);
            cursor: pointer;
            border-bottom: 1px solid var(--border-subtle);
            transition: background var(--transition-fast);
            min-height: 40px;
            position: relative;
        }
        @media (max-width: 640px) {
            .sessions-option {
                min-height: 44px;
                padding: var(--space-2) var(--space-3);
            }
        }
        .sessions-option:last-child {
            border-bottom: none;
        }
        .sessions-option:hover {
            background: var(--bg-subtle);
        }
        .sessions-option.selected {
            background: var(--accent-muted);
        }
        .sessions-option.active {
            background: var(--success-muted);
        }
        .sessions-option-info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
            flex: 1;
            min-width: 0;
        }
        .sessions-option-email {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            min-width: 0;
        }
        .sessions-option-email-text {
            font-size: 0.8125rem; /* 2pt smaller */
            font-weight: 600;
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%;
        }
        .sessions-option-time {
            font-size: 0.6875rem;
            color: var(--text-muted);
            white-space: nowrap;
        }
        .sessions-option-badges {
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }
        .sessions-indicator {
            position: absolute;
            top: 4px;
            left: 4px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--success);
            box-shadow: 0 0 4px var(--success);
        }
        .sessions-badge {
            padding: 0.1875rem 0.5rem;
            border-radius: var(--radius-full);
            font-size: 0.6875rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }
        .sessions-badge.active {
            background: var(--success-muted);
            color: var(--success);
        }
        .sessions-badge.selected {
            background: var(--accent-muted);
            color: var(--accent-primary);
        }
        .sessions-badge.auto {
            background: var(--bg-subtle);
            color: var(--text-muted);
        }
        .sessions-badge.manual {
            background: var(--accent-muted);
            color: var(--accent-primary);
        }
        .sessions-badge.visibility-public {
            background: rgba(34, 197, 94, 0.1);
            color: rgb(34, 197, 94);
        }
        .sessions-badge.visibility-private {
            background: var(--bg-subtle);
            color: var(--text-muted);
        }
        .sessions-badge.degraded {
            background: rgba(248, 113, 113, 0.16);
            color: #f87171;
        }
        .sessions-loading {
            padding: var(--space-4);
            text-align: center;
            color: var(--text-muted);
            font-size: 0.875rem;
        }
        .sessions-loading::before {
            content: '';
            display: inline-block;
            width: 14px;
            height: 14px;
            border: 2px solid var(--border-default);
            border-top-color: var(--accent-primary);
            border-radius: 50%;
            margin-right: 8px;
            vertical-align: middle;
            animation: spin 0.8s linear infinite;
        }
        .trigger-loading-indicator {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: var(--radius-md);
        }
        .trigger-loading-spinner {
            width: 16px;
            height: 16px;
            border: 2px solid var(--border-default);
            border-top-color: var(--accent-primary);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        .user-switcher-loading-text {
            font-size: 0.8rem;
            color: var(--text-muted);
            padding: 0.125rem 0.5rem;
        }
        #userSwitcherLoadingIndicator {
            width: auto;
            height: auto;
            min-width: 80px;
            padding: 0.25rem 0.375rem;
            border: 1px solid var(--border-default);
            background: transparent;
            border-radius: var(--radius-md);
            gap: var(--space-2);
        }
        #sessionsTriggerLoadingIndicator {
            display: none;
            width: auto;
            height: auto;
            gap: var(--space-2);
        }
        .sessions-loading-text {
            font-size: 0.8rem;
            color: var(--text-muted);
        }
        /* Generic loading text with spinner on left */
        .loading-text-with-spinner {
            color: var(--text-muted);
            font-size: 0.875rem;
        }
        .loading-text-with-spinner::before {
            content: '';
            display: inline-block;
            width: 12px;
            height: 12px;
            border: 2px solid var(--border-default);
            border-top-color: var(--accent-primary);
            border-radius: 50%;
            margin-right: 6px;
            vertical-align: middle;
            animation: spin 0.8s linear infinite;
        }
        /* Hide content inside trigger when loading, show loading indicator */
        .extract-via-section.loading #sessionsTriggerLoadingIndicator {
            display: inline-flex;
        }
        .extract-via-section.loading .sessions-dropdown-current,
        .extract-via-section.loading .sessions-dropdown-arrow {
            display: none;
        }
        .extract-via-section.loading .extract-hint-toggle,
        .extract-via-section.loading #extractHint {
            display: none;
        }
        .sessions-option-actions {
            display: flex;
            align-items: center;
            gap: var(--space-1);
            opacity: 1;
            transition: opacity var(--transition-fast);
            flex-wrap: wrap;
            justify-content: flex-end;
            padding-right: 0.25rem;
        }
        .sessions-option:hover .sessions-option-actions {
            opacity: 1;
        }
        @media (max-width: 640px) {
            .sessions-option-actions { opacity: 1; }
        }
        .sessions-btn-action {
            padding: 0.125rem 0.375rem;
            font-size: 1rem;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-sm);
            background: var(--bg-subtle);
            color: var(--text-secondary);
            border: none;
            cursor: pointer;
            transition: all var(--transition-fast);
        }
        .sessions-btn-action:hover {
            background: var(--success-muted);
            color: var(--success);
        }
        .sessions-btn-action.delete:hover {
            background: var(--error-muted);
            color: var(--error);
        }
        .sessions-btn-action[disabled] {
            opacity: 0.45;
            cursor: not-allowed;
            pointer-events: none;
        }

        .public-feed-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            padding: 0.1rem 0.25rem;
            border-radius: 0.75rem;
            background: transparent;
            border: none;
            font-size: 0.6875rem;
            color: var(--text-muted);
            user-select: none;
            cursor: pointer;
            transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
            max-width: 180px;
            margin-right: 0.25rem;
        }
        .public-feed-toggle:hover {
            border-color: var(--border-default);
            color: var(--text-secondary);
        }
        .public-feed-toggle .public-feed-text {
            display: inline-flex;
            flex-direction: column;
            line-height: 1.05;
        }
        .public-feed-toggle .toggle-switch {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            align-self: center;
        }
        .public-feed-toggle input {
            display: none;
        }
        .public-feed-toggle .toggle-pill {
            position: relative;
            width: 26px;
            height: 14px;
            background: rgba(148, 163, 184, 0.6);
            border: none;
            border-radius: 999px;
            transition: background 180ms ease;
            flex-shrink: 0;
        }
        .public-feed-toggle .toggle-pill::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 10px;
            height: 10px;
            border-radius: 999px;
            background: #fff;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
            transition: transform 180ms ease;
        }
        .public-feed-toggle input:checked + .toggle-pill {
            background: var(--accent-primary);
        }
        .public-feed-toggle input:checked + .toggle-pill::after {
            transform: translateX(12px);
        }

        /* Empty State */
        .no-sessions {
            color: var(--text-muted);
            text-align: center;
            padding: var(--space-8);
            font-size: 0.875rem;
        }

        /* ========================================
           TOAST NOTIFICATIONS
           ======================================== */
        .login-detected-toast {
            position: fixed;
            bottom: 70px;
            right: var(--space-4);
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            color: var(--text-primary);
            padding: var(--space-4);
            border-radius: var(--radius-lg);
            font-size: 0.875rem;
            display: flex;
            align-items: center;
            gap: var(--space-3);
            animation: slideInRight var(--transition-slow) ease;
            z-index: 1000;
            box-shadow: var(--shadow-lg);
        }
        .login-detected-toast .icon {
            font-size: 1.25rem;
            color: var(--success);
        }
        @keyframes slideInRight {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        /* Login Loading Overlay */
        .login-loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                radial-gradient(circle at 50% 42%, rgba(45, 212, 191, 0.08), transparent 18rem),
                rgba(0, 0, 0, 0.88);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            display: none;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: var(--space-4);
            z-index: 2000;
        }
        .login-loading-overlay.active {
            display: flex !important;
        }
        .login-loading-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid var(--bg-subtle);
            border-top-color: var(--accent-primary);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .login-loading-text {
            color: var(--text-secondary);
            font-size: 0.9375rem;
        }

        /* User Switch Loading Overlay */
        .user-switch-loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                radial-gradient(circle at 50% 42%, rgba(45, 212, 191, 0.08), transparent 18rem),
                rgba(15, 15, 16, 0.98);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            display: none;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: var(--space-5);
            z-index: 9999;
        }
        .user-switch-loading-overlay.active {
            display: flex;
            animation: fadeIn var(--transition-normal);
        }
        .user-switch-loading-spinner {
            width: 48px;
            height: 48px;
            border: 4px solid var(--bg-subtle);
            border-top-color: var(--accent-primary);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        .user-switch-loading-content {
            text-align: center;
        }
        .user-switch-loading-title {
            color: var(--text-primary);
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: var(--space-2);
        }
        .user-switch-loading-message {
            color: var(--text-secondary);
            font-size: 0.9375rem;
        }
        .user-switch-loading-details {
            color: var(--text-muted);
            font-size: 0.8125rem;
            margin-top: var(--space-2);
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
        .user-switch-loading-details::before {
            content: '';
            width: 6px;
            height: 6px;
            background: var(--accent-primary);
            border-radius: 50%;
            animation: pulse 1.5s ease-in-out infinite;
        }
        .user-switch-loading-user {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            margin-top: var(--space-4);
            padding: var(--space-3) var(--space-5);
            background: var(--bg-subtle);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
        }
        .user-switch-loading-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--accent-muted);
            color: var(--accent-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 0.875rem;
        }
        .user-switch-loading-user-info {
            text-align: left;
        }
        .user-switch-loading-user-name {
            color: var(--text-primary);
            font-weight: 500;
            font-size: 0.9375rem;
        }
        .user-switch-loading-user-type {
            color: var(--text-muted);
            font-size: 0.75rem;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(0.8); }
        }

        /* Tags */
        .tag {
            display: inline-flex;
            align-items: center;
            padding: 0.1875rem 0.5rem;
            border-radius: var(--radius-full);
            font-size: 0.6875rem;
            font-weight: 500;
            background: var(--bg-subtle);
            color: var(--text-secondary);
        }

        /* Browser status active session indicator */
        .browser-active-session {
            font-size: 0.75rem;
            color: var(--success);
            margin-left: var(--space-2);
        }

        /* Action status indicator */
        .action-status {
            font-size: 0.8125rem;
            margin-left: var(--space-2);
            padding: 0.125rem 0.5rem;
            border-radius: var(--radius-sm);
            background: var(--info-muted);
        }

        /* Instructions */
        .instructions {
            color: var(--text-secondary);
            margin-bottom: var(--space-4);
            line-height: 1.6;
            font-size: 0.875rem;
        }
        .instructions ol {
            text-align: left;
            padding-left: var(--space-6);
            margin: 0;
        }
        
        /* ========================================
           STREAM OVERLAY
           ======================================== */
        .stream-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                radial-gradient(circle at 50% 42%, rgba(45, 212, 191, 0.08), transparent 18rem),
                rgba(15, 15, 16, 0.86);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            z-index: 1000;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: var(--space-4);
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-y;
            overscroll-behavior: contain;
        }
        .stream-overlay.active { display: flex; }
        .stream-overlay.stream-overlay--embedded {
            position: static;
            top: auto;
            left: auto;
            right: auto;
            bottom: auto;
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            z-index: auto;
            display: block;
            align-items: stretch;
            justify-content: flex-start;
            padding: 0;
        }
        .stream-overlay.stream-overlay--embedded .stream-wrapper {
            max-width: none;
            width: 100%;
        }
        .stream-overlay.stream-overlay--embedded #browserCanvas {
            width: 100%;
            height: auto;
            max-height: min(70vh, 760px);
        }

        .stream-wrapper {
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-xl);
            width: 100%;
            max-width: 1300px;
            min-width: 0; /* allow shrink so header can wrap on narrow viewports */
            overflow: hidden;
            flex: 0 0 auto;
        }

        .stream-header {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-4);
            background: var(--bg-subtle);
            border-bottom: 1px solid var(--border-subtle);
        }
        /* Row 1: title left, Cancel button right - never wrap */
        .stream-header-row1 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
            min-width: 0;
            flex-wrap: nowrap;
        }
        .stream-header-row1 h3 {
            margin: 0;
            flex: 1 1 auto;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .stream-header h3 {
            margin: 0;
            color: var(--text-primary);
            font-size: 0.875rem;
            font-weight: 600;
            line-height: 1.3;
        }
        .stream-header-actions {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: var(--space-2);
            flex-shrink: 0;
            margin-left: auto;
        }
        .stream-header-row1 .stream-cancel-btn,
        .stream-header-row1 .stream-save-session-btn {
            flex-shrink: 0;
        }
        .stream-save-session-btn {
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
            padding: 0.45rem 0.7rem;
            font-size: 0.8125rem;
            font-weight: 600;
        }
	        .stream-status {
	            display: flex;
	            align-items: center;
	            gap: var(--space-2);
	            color: var(--text-secondary);
	            font-size: 0.75rem;
	            min-width: 0;
	        }
	        .stream-mode-badge {
	            display: inline-flex;
	            align-items: center;
	            padding: 1px 6px;
	            border-radius: 999px;
	            font-size: 0.625rem;
	            line-height: 1.2;
	            border: 1px solid rgba(255, 255, 255, 0.10);
	            background: rgba(255, 255, 255, 0.06);
	            color: var(--text-muted);
	            font-variant-numeric: tabular-nums;
	            white-space: nowrap;
	        }
	        .stream-mode-badge.live {
	            color: var(--success);
	            border-color: rgba(34, 197, 94, 0.35);
	            background: rgba(34, 197, 94, 0.10);
	        }
	        .stream-mode-badge.snapshot {
	            color: var(--accent-primary);
	            border-color: rgba(245, 158, 11, 0.35);
	            background: rgba(245, 158, 11, 0.10);
	        }
        .stream-input-status {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1rem;
            min-width: 1rem;
            height: 1rem;
            font-size: 0.625rem;
            line-height: 1;
            color: var(--text-muted);
            border-radius: 999px;
            border: 1px solid transparent;
            background: transparent;
            opacity: 0;
            transition: opacity var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
        }
        .stream-input-status::before { content: ''; }
        .stream-input-status.active { opacity: 1; }
        .stream-input-status.pending {
            color: var(--accent-primary);
            border-color: rgba(245, 158, 11, 0.35);
            background: rgba(245, 158, 11, 0.10);
        }
        .stream-input-status.pending::before { content: '>'; }
        .stream-input-status.error {
            color: #f87171;
            border-color: rgba(248, 113, 113, 0.4);
            background: rgba(248, 113, 113, 0.10);
        }
        .stream-input-status.error::before {
            content: '!';
            font-weight: 700;
        }
	        .stream-metrics {
	            color: var(--text-muted);
	            font-variant-numeric: tabular-nums;
	            font-size: 0.5625rem; /* 2pt smaller than status (0.75rem) */
	            line-height: 1.3;
	        }
        .stream-metrics.stale {
            color: var(--accent-primary);
        }
        .stream-status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--text-muted);
        }
        .stream-status-dot.connected { background: var(--success); }
        .stream-status-dot.streaming {
            background: var(--success);
            animation: streamPulse 1.5s infinite;
        }
        @keyframes streamPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }

        .stream-retry-btn {
            margin-left: var(--space-1);
            padding: 2px 8px;
            font-size: 0.6875rem;
            background: var(--accent-primary);
            color: var(--bg-primary);
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .stream-retry-btn:hover:not(:disabled) { opacity: 0.9; }
        .stream-retry-btn:disabled { opacity: 0.5; cursor: not-allowed; }

        .stream-proxy-icon {
            width: 14px;
            height: 14px;
            fill: var(--text-muted);
            transition: fill var(--transition-fast);
            cursor: pointer;
        }

        /* Stream status row - contains status, icons, and metrics */
        .stream-status-row {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            flex-wrap: wrap;
        }

        /* Stream icons container */
        .stream-status-icons {
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }

        .stream-icon {
            width: 14px;
            height: 14px;
            fill: var(--text-muted);
            transition: fill var(--transition-fast);
        }
        .stream-icon.enabled {
            fill: var(--success);
        }
        .stream-proxy-icon.enabled {
            fill: var(--success);
        }

        .stream-container {
            position: relative;
            background: transparent;
            border: none;
            overflow: visible;
        }

        #browserCanvas {
            display: block;
            cursor: default;
            max-width: 100%;
            max-height: calc(100vh - 80px);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-xl);
            background: var(--bg-base);
        }

        .stream-loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: var(--text-secondary);
            font-size: 1rem;
            pointer-events: none;
        }


        .btn-stream {
            background: var(--info);
        }
        .btn-stream:hover { background: #2563eb; }
        .btn-stream.active { background: var(--success); color: var(--text-inverse); }
        .btn-stream[disabled],
        .btn-danger[disabled] {
            opacity: 0.45;
            cursor: not-allowed;
            pointer-events: none;
        }

        /* Crop overlay */
        .crop-overlay {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            background: #000;
            border-top: 1px solid #222;
            z-index: 10;
            pointer-events: none;
        }
        .crop-overlay.hidden { display: none; }
        .crop-handle {
            position: absolute;
            top: -10px;
            left: 0;
            right: 0;
            height: 10px;
            cursor: ns-resize;
            background: linear-gradient(to bottom, rgba(40, 40, 40, 0.8), transparent);
            pointer-events: auto;
        }
        .crop-handle:hover {
            background: linear-gradient(to bottom, rgba(60, 60, 60, 0.9), transparent);
        }
        .crop-label {
            position: absolute;
            top: -25px;
            right: 10px;
            color: var(--accent-primary);
            font-size: 0.75rem;
            pointer-events: none;
        }

        /* Stream Tabs */
        .stream-tabs {
            display: flex;
            align-items: center;
            gap: 2px;
            padding: var(--space-2) var(--space-3);
            background: var(--bg-subtle);
            width: 100%;
            overflow-x: auto;
        }
        .stream-tab {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: 0.5rem var(--space-3);
            background: var(--bg-subtle);
            border: 1px solid var(--border-subtle);
            border-bottom: none;
            border-radius: var(--radius-md) var(--radius-md) 0 0;
            color: var(--text-secondary);
            font-size: 0.8125rem;
            cursor: pointer;
            max-width: 200px;
            transition: all var(--transition-fast);
        }
        .stream-tab:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }
        .stream-tab.active {
            background: var(--bg-elevated);
            color: var(--text-primary);
        }
        .stream-tab-title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 140px;
        }
        .stream-tab-close {
            font-size: 0.875rem;
            color: var(--text-muted);
            cursor: pointer;
            padding: 0 var(--space-1);
            border-radius: var(--radius-sm);
            transition: all var(--transition-fast);
        }
        .stream-tab-close:hover {
            background: var(--error);
            color: white;
        }
        .stream-tab-new {
            padding: 0.5rem var(--space-3);
            background: transparent;
            border: 1px dashed var(--border-default);
            border-radius: var(--radius-md);
            color: var(--accent-primary);
            font-size: 1rem;
            cursor: pointer;
            transition: all var(--transition-fast);
        }
        .stream-tab-new:hover {
            background: var(--accent-muted);
            border-color: var(--accent-primary);
        }
        .stream-tab-ip {
            padding: 0.5rem var(--space-3);
            background: transparent;
            border: 1px dashed var(--border-default);
            border-radius: var(--radius-md);
            color: var(--success);
            font-size: 0.75rem;
            cursor: pointer;
            transition: all var(--transition-fast);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .stream-tab-ip:hover {
            background: var(--success-muted);
            border-color: var(--success);
        }
        .stream-tab-ip svg {
            width: 14px;
            height: 14px;
            fill: currentColor;
        }
        .stream-tab-label {
            font-size: 0.625rem;
            color: var(--text-muted);
            background: var(--bg-accent);
            padding: 0.1rem 0.375rem;
            border-radius: var(--radius-sm);
        }

        /* ========================================
           EXTRACT PANEL
           ======================================== */
        .extract-panel {
            background: var(--bg-subtle);
            padding: var(--space-5);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-subtle);
        }
        .extract-announcement {
            margin: 0 0 var(--space-1);
            padding: 10px 12px;
            border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 55%, var(--border-subtle) 45%);
            border-radius: var(--radius-md);
            background: color-mix(in srgb, var(--warning, #f59e0b) 14%, transparent 86%);
            color: var(--warning, #f59e0b);
            font-size: 0.8rem;
            font-weight: 400;
            text-align: left;
            line-height: 1.25;
            position: relative;
        }
        .extract-announcement__text {
            display: block;
            padding-right: 28px; /* space for close button */
        }
        .extract-announcement__text strong {
            font-weight: 700;
        }
        .extract-announcement__text a,
        .extract-announcement__text a:visited {
            color: color-mix(in srgb, var(--warning, #f59e0b) 32%, var(--text-primary) 68%);
            font-weight: 600;
            text-decoration: underline;
            text-decoration-thickness: 1.5px;
            text-decoration-color: color-mix(in srgb, var(--warning, #f59e0b) 60%, transparent 40%);
            text-underline-offset: 2px;
        }
        .extract-announcement__text a:hover {
            color: color-mix(in srgb, var(--warning, #f59e0b) 18%, var(--text-primary) 82%);
            text-decoration-color: color-mix(in srgb, var(--warning, #f59e0b) 82%, transparent 18%);
        }
        .extract-announcement__text a:focus-visible {
            outline: 2px solid color-mix(in srgb, var(--warning, #f59e0b) 72%, transparent 28%);
            outline-offset: 2px;
            border-radius: 2px;
        }
        .extract-announcement__close {
            position: absolute;
            top: 50%;
            right: 8px;
            transform: translateY(-50%);
            background: transparent;
            border: 0;
            color: inherit;
            font-size: 1rem;
            font-weight: 700;
            line-height: 1;
            padding: 4px 6px;
            border-radius: 4px;
            opacity: 0.85;
            cursor: pointer;
        }
        .extract-announcement__close:hover {
            opacity: 1;
            background: color-mix(in srgb, var(--warning, #f59e0b) 14%, transparent 86%);
        }
        .extract-announcement__close:focus-visible {
            outline: 2px solid color-mix(in srgb, var(--warning, #f59e0b) 65%, transparent 35%);
            outline-offset: 2px;
        }
        .frontpage-announcements {
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
            margin-bottom: var(--space-1);
        }
        .frontpage-announcements:empty {
            display: none;
        }
        .view-announcements {
            padding: var(--space-4) 0;
        }
        .announcements-page-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin: 0 0 var(--space-4);
            color: var(--text-primary);
        }
        .announcements-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-4);
        }
        .announcement-card {
            padding: var(--space-4);
            border-radius: var(--radius-md);
            border: 1px solid var(--border-subtle);
            background: var(--bg-subtle);
        }
        .announcement-card-meta {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-bottom: var(--space-2);
        }
        .announcement-card-body {
            font-size: 0.875rem;
            line-height: 1.5;
            color: var(--text-primary);
        }
        .announcement-card-body p { margin: 0 0 var(--space-2); }
        .announcement-card-body p:last-child { margin-bottom: 0; }
        .admin-card-features {
            margin-bottom: var(--space-4);
        }
        .admin-card-tags .admin-announcements-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-3);
            margin-bottom: var(--space-3);
        }
        .admin-tag-taxonomy-header-actions {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            flex-shrink: 0;
        }
        .admin-tag-taxonomy-status {
            display: inline-flex;
            align-items: center;
            min-height: 28px;
            padding: 4px 10px;
            border-radius: 999px;
            border: 1px solid var(--border-subtle);
            background: var(--bg-subtle);
            color: var(--text-muted);
            font-size: 0.76rem;
            font-weight: 700;
            white-space: nowrap;
        }
        .admin-tag-taxonomy-status[data-tone="ready"] {
            color: var(--success);
            background: var(--success-muted);
            border-color: rgba(74, 222, 128, 0.3);
        }
        .admin-tag-taxonomy-status[data-tone="running"],
        .admin-tag-taxonomy-status[data-tone="loading"] {
            color: #22d3ee;
            background: rgba(34, 211, 238, 0.12);
            border-color: rgba(34, 211, 238, 0.35);
        }
        .admin-tag-taxonomy-status[data-tone="error"] {
            color: var(--error);
            background: var(--error-muted);
            border-color: rgba(248, 113, 113, 0.35);
        }
        .admin-tag-taxonomy-subtitle {
            margin: 0 0 var(--space-2);
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-muted);
        }
        .admin-tag-taxonomy-active {
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
            background: var(--bg-base);
            padding: var(--space-3);
            margin-bottom: var(--space-3);
        }
        .admin-tag-taxonomy-active.is-running {
            border-color: rgba(34, 211, 238, 0.42);
            background: linear-gradient(135deg, rgba(34, 211, 238, 0.10), rgba(20, 184, 166, 0.06));
            border-left: 4px solid #22d3ee;
            box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.10), 0 14px 40px rgba(0, 0, 0, 0.18);
        }
        .admin-tag-taxonomy-active-empty {
            display: flex;
            flex-direction: column;
            gap: 2px;
            color: var(--text-muted);
            font-size: 0.8rem;
        }
        .admin-tag-taxonomy-active-empty strong {
            color: var(--text-primary);
            font-size: 0.88rem;
        }
        .admin-tag-taxonomy-active-main {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            margin-bottom: var(--space-2);
        }
        .admin-tag-taxonomy-active-main strong {
            display: block;
            color: #e5fbff;
            font-size: 0.9rem;
        }
        .admin-tag-taxonomy-active-main span:not(.admin-tag-taxonomy-pulse) {
            display: block;
            margin-top: 2px;
            color: var(--text-muted);
            font-size: 0.78rem;
        }
        .admin-tag-taxonomy-pulse {
            width: 10px;
            height: 10px;
            border-radius: 999px;
            background: #22d3ee;
            box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.6);
            animation: adminTagPulse 1.4s ease-out infinite;
            flex-shrink: 0;
        }
        @keyframes adminTagPulse {
            0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.6); }
            70% { box-shadow: 0 0 0 8px rgba(34, 211, 238, 0); }
            100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
        }
        .admin-tag-taxonomy-active code,
        .admin-tag-taxonomy-active pre {
            display: block;
            margin: var(--space-2) 0 0;
            font-size: 0.7rem;
            color: var(--text-muted);
            white-space: pre-wrap;
            word-break: break-word;
        }
        .admin-tag-taxonomy-active pre {
            max-height: 92px;
            overflow: auto;
            padding: var(--space-2);
            border-radius: var(--radius-sm);
            background: rgba(0, 0, 0, 0.24);
            color: #b9f6e2;
        }
        .admin-tag-taxonomy-active em {
            display: block;
            margin-top: var(--space-2);
            color: var(--text-muted);
            font-size: 0.76rem;
            font-style: normal;
        }
        .admin-tag-taxonomy-controls {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
            align-items: start;
            margin-bottom: 0;
        }
        .admin-tag-taxonomy-view-toggle {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            margin-bottom: var(--space-3);
            padding: 3px;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
            background: var(--bg-subtle);
        }
        .admin-tag-taxonomy-view-toggle button {
            min-width: 108px;
            min-height: 30px;
            padding: 5px 12px;
            border: 0;
            border-radius: calc(var(--radius-md) - 3px);
            background: transparent;
            color: var(--text-muted);
            font-size: 0.76rem;
            font-weight: 800;
            letter-spacing: 0;
            cursor: pointer;
        }
        .admin-tag-taxonomy-view-toggle button.is-active {
            background: var(--bg-base);
            color: var(--text-primary);
            box-shadow: inset 0 0 0 1px var(--border-default);
        }
        .admin-tag-taxonomy-panel {
            width: 100%;
            padding: var(--space-3);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
            background: rgba(255, 255, 255, 0.012);
            margin-bottom: var(--space-3);
        }
        .admin-tag-taxonomy-panel[hidden] {
            display: none !important;
        }
        .admin-tag-taxonomy-panel-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: var(--space-3);
            margin-bottom: var(--space-3);
        }
        .admin-tag-taxonomy-panel-head strong {
            display: block;
            color: var(--text-primary);
            font-size: 0.92rem;
            line-height: 1.2;
        }
        .admin-tag-taxonomy-panel-head span {
            display: block;
            margin-top: 2px;
            color: var(--text-muted);
            font-size: 0.74rem;
            line-height: 1.35;
        }
        .admin-tag-taxonomy-commandbar {
            display: flex;
            align-items: flex-end;
            gap: var(--space-2);
            width: 100%;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
        }
        .admin-tag-taxonomy-column {
            width: 100%;
            min-width: 0;
        }
        .admin-tag-taxonomy-action-settings {
            margin-top: var(--space-3);
        }
        .admin-tag-taxonomy-settings-section {
            padding-top: 0;
            border-top: 0;
        }
        .admin-tag-taxonomy-progress {
            padding: var(--space-3);
            border-bottom: 1px solid var(--border-subtle);
            background: rgba(255, 255, 255, 0.018);
        }
        .admin-tag-taxonomy-progress-compact {
            margin: var(--space-2) 0;
            padding: 0;
            border-bottom: 0;
            background: transparent;
        }
        .admin-tag-taxonomy-progress-bar {
            height: 7px;
            overflow: hidden;
            border-radius: 999px;
            background: rgba(148, 163, 184, 0.18);
            border: 1px solid rgba(148, 163, 184, 0.14);
        }
        .admin-tag-taxonomy-progress-bar span {
            display: block;
            height: 100%;
            min-width: 2px;
            border-radius: inherit;
            background: linear-gradient(90deg, #14b8a6, #22d3ee);
            transition: width 0.22s ease;
        }
        .admin-tag-taxonomy-progress-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: var(--space-2);
        }
        .admin-tag-taxonomy-progress-pills span {
            display: inline-flex;
            align-items: center;
            min-height: 22px;
            padding: 3px 8px;
            border-radius: 999px;
            border: 1px solid rgba(34, 211, 238, 0.22);
            background: rgba(34, 211, 238, 0.08);
            color: #a5f3fc;
            font-size: 0.7rem;
            font-weight: 800;
            line-height: 1;
        }
        .admin-tag-taxonomy-last-line {
            margin-top: var(--space-2);
            color: var(--text-secondary);
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: 0.72rem;
            line-height: 1.35;
            overflow-wrap: anywhere;
        }
        .admin-tag-taxonomy-grid {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            gap: 10px 12px;
        }
        .admin-tag-taxonomy-field,
        .admin-tag-taxonomy-check {
            display: flex;
            flex-direction: column;
            gap: 4px;
            flex: 0 1 auto;
            min-width: 132px;
            font-size: 0.78rem;
            color: var(--text-muted);
        }
        .admin-tag-taxonomy-field[hidden],
        .admin-tag-taxonomy-check[hidden] {
            display: none !important;
        }
        .admin-tag-taxonomy-action-field {
            min-width: 210px;
        }
        .admin-tag-taxonomy-field-wide {
            min-width: 230px;
        }
        .admin-tag-taxonomy-model-field {
            min-width: 300px;
        }
        .admin-tag-taxonomy-field-label {
            display: flex;
            align-items: baseline;
            gap: 5px;
            min-height: 18px;
            white-space: nowrap;
        }
        .admin-tag-taxonomy-field-label strong,
        .admin-tag-taxonomy-check strong {
            color: var(--text-secondary);
            font-weight: 700;
        }
        .admin-tag-taxonomy-field-label small,
        .admin-tag-taxonomy-check small {
            color: var(--text-muted);
            font-size: 0.68rem;
            line-height: 1.25;
            font-weight: 500;
        }
        .admin-tag-taxonomy-check {
            justify-content: flex-end;
            flex-direction: row;
            align-items: flex-start;
            gap: 8px;
            color: var(--text-secondary);
            padding: 7px 8px;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: var(--bg-subtle);
        }
        .admin-tag-taxonomy-check input {
            margin-top: 2px;
            flex-shrink: 0;
        }
        .admin-tag-taxonomy-field input,
        .admin-tag-taxonomy-field select {
            width: auto;
            min-width: 112px;
            max-width: 100%;
            padding: 6px 9px;
            border: 1px solid var(--border-default);
            border-radius: var(--radius-sm);
            background: var(--bg-base);
            color: var(--text-primary);
            font: inherit;
        }
        .admin-tag-taxonomy-field select {
            min-width: 160px;
        }
        .admin-tag-taxonomy-model-picker {
            position: relative;
            width: 340px;
            max-width: 100%;
        }
        .admin-tag-taxonomy-model-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            width: 100%;
            min-height: 32px;
            padding: 6px 9px;
            border: 1px solid var(--border-default);
            border-radius: var(--radius-sm);
            background: var(--bg-base);
            color: var(--text-primary);
            font: inherit;
            font-weight: 700;
            text-align: left;
            cursor: pointer;
        }
        .admin-tag-taxonomy-model-toggle::after {
            content: '▾';
            color: var(--text-muted);
            font-size: 0.72rem;
            line-height: 1;
        }
        .admin-tag-taxonomy-model-menu {
            position: absolute;
            z-index: 30;
            top: calc(100% + 6px);
            left: 0;
            width: min(420px, 88vw);
            max-height: 270px;
            overflow: auto;
            padding: 7px;
            border: 1px solid rgba(34, 211, 238, 0.24);
            border-radius: var(--radius-md);
            background: rgba(9, 15, 24, 0.98);
            box-shadow: var(--shadow-lg);
        }
        .admin-tag-taxonomy-model-menu[hidden] {
            display: none !important;
        }
        .admin-tag-taxonomy-model-menu label {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 8px;
            border-radius: var(--radius-sm);
            color: var(--text-secondary);
            font-size: 0.74rem;
            line-height: 1.2;
            cursor: pointer;
        }
        .admin-tag-taxonomy-model-menu label:hover {
            background: rgba(34, 211, 238, 0.08);
            color: var(--text-primary);
        }
        .admin-tag-taxonomy-model-menu input {
            margin: 0;
            flex-shrink: 0;
        }
        .admin-tag-taxonomy-inline-save {
            display: grid;
            grid-template-columns: auto auto;
            gap: 6px;
            align-items: center;
        }
        .admin-tag-taxonomy-inline-save input {
            width: 112px;
        }
        .admin-tag-taxonomy-inline-save .admin-btn-compact {
            min-height: 31px;
        }
        .admin-tag-taxonomy-action-help {
            flex: 1 1 220px;
            min-width: 160px;
            padding-bottom: 7px;
            color: var(--text-muted);
            font-size: 0.75rem;
            line-height: 1.35;
        }
        .admin-tag-taxonomy-actions {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--space-2);
        }
        .admin-tag-taxonomy-action-card {
            display: flex;
            align-items: flex-start;
            gap: var(--space-2);
            padding: var(--space-2);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
            background: var(--bg-subtle);
        }
        .admin-tag-taxonomy-action-card button {
            flex: 0 0 auto;
            white-space: nowrap;
        }
        .admin-tag-taxonomy-action-card button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .admin-tag-taxonomy-action-card span {
            color: var(--text-muted);
            font-size: 0.75rem;
            line-height: 1.35;
        }
        .admin-tag-taxonomy-jobs {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
            margin-top: var(--space-2);
        }
        .admin-tag-taxonomy-log-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
            margin-top: var(--space-2);
        }
        .admin-tag-taxonomy-log-head .admin-tag-taxonomy-subtitle {
            margin: 0;
        }
        .admin-tag-taxonomy-log-head .admin-btn-danger {
            border-color: rgba(248, 113, 113, 0.38);
            color: #fecaca;
            background: rgba(248, 113, 113, 0.10);
        }
        .admin-tag-taxonomy-log-head .admin-btn-danger:hover {
            border-color: rgba(248, 113, 113, 0.62);
            background: rgba(248, 113, 113, 0.16);
        }
        .admin-tag-taxonomy-job {
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
            background: var(--bg-base);
            overflow: hidden;
        }
        .admin-tag-taxonomy-job-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: var(--space-3);
            padding: var(--space-3);
            border-bottom: 1px solid var(--border-subtle);
        }
        .admin-tag-taxonomy-job-head strong {
            display: block;
            font-size: 0.9rem;
            color: var(--text-primary);
        }
        .admin-tag-taxonomy-job-head span {
            display: block;
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 2px;
        }
        .admin-tag-taxonomy-job-head em {
            display: block;
            margin-top: 5px;
            color: var(--text-secondary);
            font-size: 0.76rem;
            font-style: normal;
            line-height: 1.35;
        }
        .admin-tag-taxonomy-job-head code {
            max-width: 48%;
            white-space: normal;
            word-break: break-word;
            font-size: 0.68rem;
            color: var(--text-muted);
        }
        .admin-tag-taxonomy-lifecycle {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1px;
            border-bottom: 1px solid var(--border-subtle);
            background: var(--border-subtle);
        }
        .admin-tag-taxonomy-lifecycle div {
            min-width: 0;
            padding: var(--space-2) var(--space-3);
            background: rgba(255, 255, 255, 0.018);
        }
        .admin-tag-taxonomy-lifecycle b {
            display: block;
            margin-bottom: 4px;
            color: #67e8f9;
            font-size: 0.62rem;
            font-weight: 900;
            letter-spacing: 0.08em;
            line-height: 1;
        }
        .admin-tag-taxonomy-lifecycle span {
            display: block;
            color: var(--text-secondary);
            font-size: 0.72rem;
            line-height: 1.35;
            overflow-wrap: anywhere;
        }
        .admin-tag-taxonomy-error {
            padding: var(--space-2) var(--space-3);
            color: var(--error);
            background: var(--error-muted);
            font-size: 0.78rem;
        }
        .admin-tag-taxonomy-log {
            max-height: 360px;
            overflow: auto;
            margin: 0;
            padding: var(--space-3);
            background: #07080a;
            color: #b9f6e2;
            font-size: 0.72rem;
            line-height: 1.45;
            white-space: pre-wrap;
        }
        @media (max-width: 800px) {
            .admin-tag-taxonomy-view-toggle,
            .admin-tag-taxonomy-view-toggle button {
                width: 100%;
            }
            .admin-tag-taxonomy-controls {
                gap: var(--space-3);
            }
            .admin-tag-taxonomy-commandbar,
            .admin-tag-taxonomy-grid {
                align-items: stretch;
            }
            .admin-tag-taxonomy-commandbar {
                flex-direction: column;
            }
            .admin-tag-taxonomy-subtitle {
                margin-top: var(--space-2);
            }
            .admin-tag-taxonomy-job-head {
                flex-direction: column;
            }
            .admin-tag-taxonomy-lifecycle {
                grid-template-columns: 1fr;
            }
            .admin-tag-taxonomy-job-head code {
                max-width: 100%;
            }
            .admin-tag-taxonomy-header-actions,
            .admin-tag-taxonomy-action-card {
                align-items: stretch;
                flex-direction: column;
            }
            .admin-tag-taxonomy-field,
            .admin-tag-taxonomy-field input,
            .admin-tag-taxonomy-field select,
            .admin-tag-taxonomy-model-picker,
            .admin-tag-taxonomy-model-toggle,
            .admin-tag-taxonomy-inline-save,
            .admin-tag-taxonomy-inline-save input,
            .admin-tag-taxonomy-check,
            .admin-tag-taxonomy-action-help,
            #adminTagTaxonomyStartBtn {
                width: 100%;
                min-width: 0;
            }
            .admin-tag-taxonomy-field-label {
                align-items: flex-start;
                flex-direction: column;
                gap: 1px;
                white-space: normal;
            }
            .admin-tag-taxonomy-actions {
                grid-template-columns: 1fr;
            }
        }
        .admin-card-features .admin-card-title {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        .admin-card-features .admin-announcements-header,
        .admin-card-announcements .admin-announcements-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-3);
            margin-bottom: var(--space-3);
        }
        .admin-feature-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }
        .admin-feature-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-4);
            padding: var(--space-3);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
            background: var(--bg-subtle);
        }
        .admin-feature-copy {
            min-width: 0;
        }
        .admin-feature-name {
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 2px;
        }
        .admin-feature-description {
            max-width: 620px;
            font-size: 0.8125rem;
            line-height: 1.35;
            color: var(--text-muted);
        }
        .admin-feature-controls {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            flex-shrink: 0;
        }
        .admin-feature-audience {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: 4px;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: var(--bg-base);
        }
        .admin-feature-check {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 32px;
            padding: 6px 9px;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            color: var(--text-secondary);
            font-size: 0.8125rem;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
            user-select: none;
            white-space: nowrap;
        }
        .admin-feature-check:has(input:checked) {
            border-color: rgba(83, 211, 194, 0.55);
            background: rgba(83, 211, 194, 0.12);
            color: var(--text-primary);
        }
        .admin-feature-checkbox {
            width: 15px;
            height: 15px;
            margin: 0;
            accent-color: #53d3c2;
        }
        @media (max-width: 700px) {
            .admin-feature-row {
                align-items: stretch;
                flex-direction: column;
            }
            .admin-feature-controls {
                justify-content: flex-start;
                flex-wrap: wrap;
            }
            .admin-feature-audience {
                flex-wrap: wrap;
            }
        }
        .admin-announcement-form {
            margin-top: var(--space-4);
            padding: var(--space-4);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-md);
            background: var(--bg-subtle);
        }
        .admin-announcement-form h4 { margin: 0 0 var(--space-3); font-size: 1rem; }
        .admin-announcement-field {
            margin-bottom: var(--space-3);
        }
        .admin-announcement-field label { display: block; margin-bottom: 4px; font-size: 0.875rem; color: var(--text-secondary); }
        .admin-announcement-field textarea { width: 100%; padding: var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: var(--bg-base); color: var(--text-primary); font-family: inherit; font-size: 0.875rem; }
        .admin-announcement-field-check label { display: inline-flex; align-items: center; gap: 8px; }
        .admin-announcement-form-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
        .admin-announcement-preview { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .admin-announcement-editor-toolbar {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-bottom: 6px;
            flex-wrap: wrap;
        }
        .admin-editor-btn {
            padding: 4px 10px;
            font-size: 0.8125rem;
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            cursor: pointer;
        }
        .admin-editor-btn:hover {
            background: var(--bg-accent);
            border-color: var(--border-strong);
        }
        .admin-editor-btn[data-cmd="bold"] { font-weight: 700; }
        .admin-editor-btn[data-cmd="italic"] { font-style: italic; }
        .admin-editor-toolbar-sep {
            width: 1px;
            height: 18px;
            background: var(--border-default);
            margin: 0 4px;
        }
        .admin-announcement-editor-area {
            position: relative;
        }
        .admin-announcement-editor-area textarea {
            display: block;
            width: 100%;
        }
        .admin-announcement-preview-pane {
            min-height: 120px;
            padding: var(--space-2);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-sm);
            background: var(--bg-base);
            font-size: 0.875rem;
            line-height: 1.5;
            color: var(--text-primary);
        }
        .admin-announcement-preview-pane p { margin: 0 0 0.5em 0; }
        .admin-announcement-preview-pane p:last-child { margin-bottom: 0; }
        .extract-panel h3 {
            color: var(--text-primary);
            margin: 0 0 var(--space-4);
            font-size: 0.9375rem;
            font-weight: 600;
        }
        .extract-input-row {
            display: flex;
            gap: var(--space-3);
            align-items: stretch;
            position: relative;
            overflow: visible;
            z-index: 1;
        }
        .extract-input-row.extract-input-row--options-open {
            z-index: 1205;
        }
        .extract-url-field {
            position: relative;
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            align-items: stretch;
            overflow: visible;
            z-index: 1206;
        }
        .extract-input-row input {
            flex: 1;
            width: 100%;
            min-height: 3rem;
            padding: 0 1rem;
            padding-right: 3.9rem;
            background: var(--bg-base);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-md);
            color: var(--text-primary);
            font-family: inherit;
            font-size: 0.9375rem;
            transition: border-color var(--transition-fast);
        }
        .extract-input-row input::placeholder {
            color: var(--text-muted);
        }
        .extract-input-row input:focus {
            outline: none;
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px var(--accent-muted);
        }
        .extract-options-dropdown {
            position: absolute;
            top: 50%;
            right: 0.45rem;
            transform: translateY(-50%);
            z-index: 1204;
        }
        .extract-options-toggle {
            width: 2.35rem;
            min-width: 2.35rem;
            max-width: 2.35rem;
            height: 2.4rem;
            padding: 0 0.22rem 0 0.34rem;
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            border-radius: var(--radius-md);
            font-size: 0.78rem;
            flex: 0 0 auto;
            background: transparent;
        }
        .extract-options-toggle i {
            color: var(--text-primary);
            line-height: 1;
        }
        .extract-options-toggle .user-switcher-arrow {
            margin-left: 0;
            font-size: 0.52rem;
        }
        .extract-options-toggle:disabled {
            opacity: 0.55;
            cursor: default;
        }
        .extract-options-menu {
            width: min(252px, calc(100vw - 16px));
            min-width: 0;
            max-width: 320px;
            max-height: none;
            overflow: hidden;
            z-index: 1208;
        }
        .extract-options-body {
            padding: 0.65rem 0.75rem;
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
        }
        .extract-options-section + .extract-options-section {
            border-top: 1px solid var(--border-subtle);
            padding-top: 0.65rem;
        }
        .extract-options-section-header {
            margin: 0 0 0.42rem;
            font-size: 0.66rem;
            line-height: 1.1;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-muted);
        }
        .extract-source-mode-row {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0.5rem;
            padding: 0;
            min-width: 0;
        }
        .extract-source-mode-label {
            display: block;
            font-size: 0.8125rem;
            font-weight: 600;
            color: var(--text-secondary);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            line-height: 1.1;
        }
        .extract-source-mode-group {
            display: flex;
            align-items: center;
            align-content: flex-start;
            gap: 0.42rem;
            width: 100%;
            min-width: 0;
            flex-wrap: wrap;
        }
        .extract-source-mode-btn {
            appearance: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border-default);
            border-radius: var(--radius-sm);
            padding: 0.38rem 0.62rem;
            background: var(--bg-subtle);
            color: var(--text-secondary);
            font-size: 0.72rem;
            font-weight: 600;
            line-height: 1;
            cursor: pointer;
            transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
            white-space: nowrap;
            flex: 0 0 auto;
            width: auto;
            max-width: 100%;
            align-self: flex-start;
        }
        .extract-source-mode-btn:hover {
            color: var(--text-primary);
            border-color: var(--border-strong);
            background: var(--bg-hover);
        }
        .extract-source-mode-btn:disabled {
            opacity: 0.55;
            cursor: default;
        }
        .extract-source-mode-btn.is-active {
            background: var(--accent-muted);
            color: var(--text-primary);
            border-color: var(--accent-primary);
            box-shadow: none;
        }
        .extract-source-mode-btn:focus-visible {
            outline: 2px solid rgba(255, 45, 154, 0.45);
            outline-offset: 2px;
        }
        .sauce-dummy-dropdown .sessions-dropdown-trigger--static {
            cursor: default;
        }
        .sauce-dummy-dropdown .sessions-dropdown-arrow {
            opacity: 0.55;
        }
        .sauce-dummy-dropdown .sessions-dropdown-current {
            display: inline-flex;
        }
        .extract-admin-toggle {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            margin-top: var(--space-2);
            font-size: 0.8125rem;
            color: var(--text-secondary);
            user-select: none;
        }
        .extract-admin-toggle input[type="checkbox"] {
            width: 0.95rem;
            height: 0.95rem;
            margin: 0;
            accent-color: var(--warning-color);
        }
        .extract-admin-toggle.is-disabled {
            opacity: 0.65;
            pointer-events: none;
        }
        .extract-intro {
            margin: 0 0 1rem;
        }
        .extract-title {
            margin: 0;
            color: var(--text-primary);
            font-size: clamp(1.55rem, 2.25vw, 2.05rem);
            font-weight: 900;
            line-height: 1.2;
            text-align: left;
            letter-spacing: 0;
        }
        .extract-top-row {
            display: block;
            margin-bottom: 10px;
            position: relative;
        }
        .extract-top-main {
            min-width: 0;
            position: relative;
        }
        .extract-top-main.extract-top-main--with-queue-toggle .extract-input-row,
        .extract-top-main.extract-top-main--with-queue-toggle .extract-queue-prompt {
            margin-left: 3.25rem;
        }
        .extract-top-main.extract-top-main--with-queue-toggle .collection-visibility-toggle {
            margin-left: 3.25rem;
        }
        .collection-visibility-toggle {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 0.55rem;
            margin: 0.58rem 0 0;
            min-width: 0;
        }
        .collection-visibility-label {
            color: var(--text-muted);
            font-size: 0.68rem;
            font-weight: 850;
            letter-spacing: 0.06em;
            line-height: 1;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .collection-visibility-switch {
            display: inline-flex;
            min-width: 0;
            cursor: pointer;
            user-select: none;
        }
        .collection-visibility-switch input {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: 0;
            opacity: 0;
            pointer-events: none;
        }
        .collection-visibility-track {
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            width: 132px;
            min-width: 132px;
            min-height: 28px;
            padding: 2px;
            border: 1px solid rgba(148, 163, 184, 0.22);
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.42);
            overflow: hidden;
        }
        .collection-visibility-thumb {
            position: absolute;
            top: 2px;
            left: 2px;
            width: calc(50% - 2px);
            height: calc(100% - 4px);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.09);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
            transform: translateX(100%);
            transition: transform 0.16s ease, background 0.16s ease;
        }
        .collection-visibility-switch input:checked + .collection-visibility-track .collection-visibility-thumb {
            transform: translateX(0);
            background: rgba(34, 197, 94, 0.16);
        }
        .collection-visibility-option {
            position: relative;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 0;
            padding: 0 0.48rem;
            color: var(--text-muted);
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            line-height: 1;
            text-transform: uppercase;
            white-space: nowrap;
            transition: color 0.16s ease;
        }
        .collection-visibility-switch input:not(:checked) + .collection-visibility-track .collection-visibility-option-mine,
        .collection-visibility-switch input:checked + .collection-visibility-track .collection-visibility-option-public {
            color: var(--text-primary);
        }
        .collection-visibility-switch:hover .collection-visibility-track {
            border-color: rgba(148, 163, 184, 0.34);
        }
        .collection-visibility-switch input:focus-visible + .collection-visibility-track {
            outline: 2px solid rgba(96, 165, 250, 0.48);
            outline-offset: 2px;
        }
        .collection-visibility-help {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.35rem;
            height: 1.35rem;
            min-width: 1.35rem;
            padding: 0;
            border: 1px solid rgba(148, 163, 184, 0.32);
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.34);
            color: var(--text-muted);
            font-size: 0.78rem;
            font-weight: 900;
            line-height: 1;
        }
        .collection-visibility-help:hover,
        .collection-visibility-help:focus-visible {
            border-color: rgba(96, 165, 250, 0.55);
            color: var(--text-primary);
            outline: none;
        }
        .collection-visibility-help::after {
            content: attr(data-help);
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            z-index: 1400;
            width: min(260px, calc(100vw - 32px));
            padding: 0.55rem 0.65rem;
            border: 1px solid rgba(148, 163, 184, 0.28);
            border-radius: 8px;
            background: rgba(15, 23, 42, 0.96);
            color: var(--text-primary);
            box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
            font-size: 0.72rem;
            font-weight: 700;
            line-height: 1.3;
            text-align: left;
            text-transform: none;
            pointer-events: none;
            opacity: 0;
            transform: translateY(-2px);
            transition: opacity 0.14s ease, transform 0.14s ease;
        }
        .collection-visibility-help:hover::after,
        .collection-visibility-help:focus-visible::after {
            opacity: 1;
            transform: translateY(0);
        }
        .front-extraction-list-toggle-btn {
            width: 2.35rem;
            min-width: 2.35rem;
            height: 2.35rem;
            padding: 0;
            border-radius: 12px;
            border: 1px solid rgba(96, 165, 250, 0.3);
            background: rgba(15, 23, 42, 0.72);
            color: #cfe3ff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 1.5rem;
            left: 0;
            transform: translateY(-50%);
            z-index: 130;
            cursor: pointer;
            transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
            flex: 0 0 auto;
        }
        .front-extraction-list-toggle-btn:hover {
            border-color: rgba(96, 165, 250, 0.5);
            background: rgba(15, 23, 42, 0.88);
        }
        .front-extraction-list-toggle-btn[aria-expanded="true"] {
            border-color: rgba(96, 165, 250, 0.6);
            background: rgba(30, 41, 59, 0.92);
            box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.14), 0 10px 24px rgba(15, 23, 42, 0.32);
        }
        .front-extraction-list-toggle-btn i {
            font-size: 0.8rem;
            line-height: 1;
        }
        .front-extraction-list-toggle-label {
            display: none;
        }
        .front-extraction-list-toggle-count {
            position: absolute;
            top: -0.24rem;
            right: -0.24rem;
            min-width: 1.02rem;
            height: 1.02rem;
            padding: 0 0.2rem;
            border-radius: 999px;
            background: #2563eb;
            color: #eff6ff;
            font-size: 0.6rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        .extract-results-layout {
            display: block;
        }
        .extract-results-main {
            min-width: 0;
        }
        .extract-result {
            margin-top: var(--space-3);
            padding: var(--space-3) var(--space-4);
            border-radius: var(--radius-md);
            font-size: 0.875rem;
            display: none;
            line-height: 1.5;
            overflow-wrap: break-word;
            word-break: break-word;
        }
        .extract-inline-status {
            margin-top: var(--space-2);
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-md);
            font-size: 0.8125rem;
            line-height: 1.4;
            background: var(--warning-muted);
            border: 1px solid rgba(245, 158, 11, 0.25);
            color: var(--text-primary);
        }
        .extract-queue-prompt {
            margin-top: var(--space-2);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.55rem;
            padding: 0.65rem 0.8rem;
            border: 1px solid rgba(59, 130, 246, 0.22);
            border-radius: var(--radius-md);
            background: var(--info-muted);
        }
        .extract-queue-prompt.extract-queue-prompt--standalone {
            margin-top: 0;
        }
        .extract-queue-prompt.extract-queue-prompt--expanded {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            margin-bottom: 0;
            border-bottom: none;
        }
        .extract-queue-prompt-main {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            color: var(--text-primary);
            font-size: 0.8rem;
            line-height: 1.25;
            flex: 1 1 auto;
            min-width: 0;
        }
        .extract-queue-prompt-main > span:last-child {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .extract-queue-prompt-spinner {
            width: 0.95rem;
            height: 0.95rem;
            border: 2px solid rgba(96, 165, 250, 0.35);
            border-top-color: #60a5fa;
            border-radius: 50%;
            animation: extract-btn-spin 0.7s linear infinite;
            flex-shrink: 0;
        }
        .extract-queue-prompt-elapsed {
            color: #93c5fd;
            font-size: 0.72rem;
            font-weight: 700;
            line-height: 1;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
            padding: 0.18rem 0.4rem;
            border-radius: 999px;
            border: 1px solid rgba(96, 165, 250, 0.2);
            background: rgba(15, 23, 42, 0.42);
            flex-shrink: 0;
        }
        .extract-queue-another-link {
            border: 1px solid rgba(96, 165, 250, 0.45);
            background: rgba(59, 130, 246, 0.12);
            color: #bfdbfe;
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
            padding: 0.32rem 0.62rem;
            border-radius: var(--radius-sm);
            white-space: nowrap;
            transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
        }
        .extract-queue-another-link:hover {
            color: #dbeafe;
            background: rgba(59, 130, 246, 0.2);
            border-color: rgba(147, 197, 253, 0.72);
        }
        .extract-queue-another-link:focus-visible {
            outline: 2px solid rgba(96, 165, 250, 0.5);
            outline-offset: 2px;
            border-radius: var(--radius-sm);
        }
        .extract-queue-composer-header {
            display: grid;
            gap: 0.18rem;
            width: 100%;
            margin-bottom: 0.2rem;
            padding-right: 3.4rem;
        }
        .extract-input-row.extract-input-row--queue-expanded .extract-queue-composer-header {
            align-self: flex-start;
        }
        .extract-queue-composer-title {
            font-size: 0.84rem;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #bfdbfe;
        }
        .extract-queue-composer-subtitle {
            font-size: 0.78rem;
            line-height: 1.35;
            color: var(--text-secondary);
        }
        .extract-queue-composer-backdrop {
            position: fixed;
            inset: 0;
            z-index: 1400;
            background:
                radial-gradient(circle at 50% 42%, rgba(96, 165, 250, 0.10), transparent 18rem),
                rgba(2, 8, 23, 0.78);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        body.extract-queue-composer-open {
            overflow: hidden;
        }
        .extract-input-row.extract-input-row--queue-expanded {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1401;
            width: min(640px, calc(100vw - 32px));
            max-width: calc(100vw - 32px);
            margin: 0;
            padding: 3rem 1rem 1rem;
            border: 1px solid rgba(59, 130, 246, 0.26);
            border-radius: 16px;
            background: rgba(30, 33, 39, 0.98);
            box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
            align-items: stretch;
            flex-wrap: wrap;
            row-gap: var(--space-2);
            column-gap: var(--space-2);
        }
        .extract-input-row.extract-input-row--queue-expanded .extract-url-field {
            flex: 1 1 auto;
            min-width: 0;
        }
        .extract-input-row.extract-input-row--queue-expanded input {
            width: 100%;
        }
        .extract-input-row.extract-input-row--queue-expanded #extractCharacterV2Btn,
        .extract-input-row.extract-input-row--queue-expanded #extractQueueHideBtn {
            flex: 0 0 auto;
            min-width: 0;
        }
        .extract-input-row.extract-input-row--queue-expanded #extractCharacterV2Btn {
            width: 168px;
        }
        .extract-input-row.extract-input-row--queue-expanded #extractQueueHideBtn {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 46px;
            min-width: 46px;
            height: 46px;
            padding: 0;
            font-size: 1.45rem;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
        }
        .extract-fixture-launcher-status {
            margin-bottom: 0.55rem;
            font-size: 0.76rem;
            color: var(--text-secondary);
        }
        .extract-fixture-launcher-list {
            display: grid;
            gap: 0.5rem;
        }
        .extract-fixture-launcher-section {
            display: grid;
            gap: 0.4rem;
        }
        .extract-fixture-launcher-section-title {
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-secondary);
        }
        .extract-fixture-launcher-section-list {
            display: grid;
            gap: 0.45rem;
        }
        .extract-fixture-launcher-btn {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.18rem;
            padding: 0.65rem 0.75rem;
            border-radius: 10px;
            border: 1px solid rgba(148, 163, 184, 0.18);
            background: rgba(15, 23, 42, 0.58);
            color: var(--text-primary);
            cursor: pointer;
            transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
            text-align: left;
        }
        .extract-fixture-launcher-btn:hover {
            border-color: rgba(96, 165, 250, 0.42);
            background: rgba(30, 41, 59, 0.76);
            transform: translateY(-1px);
        }
        .extract-fixture-launcher-btn:disabled {
            opacity: 0.6;
            cursor: wait;
            transform: none;
        }
        .extract-fixture-launcher-btn-title {
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.25;
        }
        .extract-fixture-launcher-btn-meta {
            font-size: 0.72rem;
            color: var(--text-secondary);
            line-height: 1.35;
        }
        @media (max-width: 760px) {
            .extract-input-row {
                flex-wrap: nowrap;
            }
            .extract-url-field {
                flex: 1 1 auto;
                min-width: 0;
            }
            .extract-input-row input {
                padding-right: 4rem;
            }
            .extract-options-dropdown {
                right: 0.35rem;
            }
            .extract-options-toggle {
                width: 2.25rem;
                min-width: 2.25rem;
                max-width: 2.25rem;
                height: 1.95rem;
                padding: 0 0.2rem 0 0.32rem;
                font-size: 0.76rem;
            }
            .extract-options-menu {
                width: min(252px, calc(100vw - 16px));
                max-width: calc(100vw - 16px);
            }
            .extract-options-body {
                padding: 0.65rem 0.7rem;
            }
            .extract-source-mode-row {
                gap: 0.46rem;
            }
            .extract-source-mode-group {
                overflow: visible;
                flex-wrap: wrap;
            }
        }
        @media (max-width: 640px) {
            .extract-input-row {
                flex-wrap: wrap;
                align-items: stretch;
            }
            #extractCharacterV2Btn {
                order: 3;
                flex: 1 1 100%;
                width: 100%;
                min-height: 2.2rem;
                padding-top: 0;
                padding-bottom: 0;
            }
            #extractQueueHideBtn {
                order: 4;
                flex: 1 1 100%;
                width: 100%;
            }
        }
        .extract-result.success {
            background: var(--success-muted);
            border: 1px solid rgba(34, 197, 94, 0.2);
            display: block;
        }
        .extract-result.error {
            background: var(--error-muted);
            border: 1px solid rgba(239, 68, 68, 0.2);
            display: block;
        }
        .extract-result.loading {
            background: var(--info-muted);
            border: 1px solid rgba(59, 130, 246, 0.2);
            display: block;
        }
        .front-extraction-list-panel {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            width: 100%;
            max-width: 100%;
            z-index: 3200;
            isolation: isolate;
        }
        .front-extraction-list-panel--portal {
            position: fixed;
            left: var(--front-extraction-fixed-left, 8px);
            right: auto;
            top: var(--front-extraction-fixed-top, 80px);
            bottom: auto;
            width: var(--front-extraction-fixed-width, min(520px, calc(100vw - 16px)));
            max-width: calc(100vw - 16px);
            z-index: 3200;
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
        }
        .front-extraction-list-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(2, 6, 23, 0.46);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            z-index: 3000;
            pointer-events: none;
        }
        body.front-extraction-list-open:not(.modal-open) .front-extraction-list-backdrop {
            display: block;
        }
        body.front-extraction-list-open.modal-open .front-extraction-list-backdrop {
            display: none;
        }
        .front-extraction-list-drawer {
            margin-top: 0;
            border: 1px solid rgba(96, 165, 250, 0.22);
            background:
                radial-gradient(circle at 12% 0%, rgba(96, 165, 250, 0.10), transparent 14rem),
                rgba(12, 18, 31, 0.98);
            border-radius: 14px;
            padding: 12px;
            box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            max-height: min(72vh, calc(100vh - var(--front-extraction-fixed-top, 80px) - 16px));
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-gutter: stable;
        }
        .front-extraction-list-panel .front-extraction-list-drawer {
            box-shadow: 0 22px 54px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(147, 197, 253, 0.08);
        }
        .front-extraction-list-panel--portal .front-extraction-list-drawer {
            position: relative;
            z-index: 3201;
        }
        .front-extraction-list-tabs {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 10px;
        }
        .front-extraction-list-tab {
            appearance: none;
            border: 1px solid rgba(148, 163, 184, 0.18);
            background: rgba(2, 6, 23, 0.24);
            color: #94a3b8;
            border-radius: 999px;
            padding: 5px 10px;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
        }
        .front-extraction-list-tab.is-active {
            color: #dbeafe;
            border-color: rgba(96, 165, 250, 0.45);
            background: rgba(30, 41, 59, 0.72);
        }
        .front-extraction-list-tab-count {
            min-width: 1rem;
            height: 1rem;
            padding: 0 0.25rem;
            border-radius: 999px;
            background: rgba(37, 99, 235, 0.95);
            color: #eff6ff;
            font-size: 0.64rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .front-extraction-list-section-title {
            font-size: 0.80375rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #93c5fd;
            margin-bottom: 5px;
        }
        .front-extraction-list-section-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 5px;
        }
        .front-extraction-list-section-head .front-extraction-list-section-title {
            margin-bottom: 0;
        }
        .front-extraction-list-clear-queue {
            appearance: none;
            border: 1px solid rgba(248, 113, 113, 0.28);
            background: rgba(127, 29, 29, 0.22);
            color: #fecaca;
            border-radius: 999px;
            padding: 4px 9px;
            font-size: 0.66rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            line-height: 1;
            text-transform: uppercase;
            white-space: nowrap;
            cursor: pointer;
        }
        .front-extraction-list-clear-queue:hover:not(:disabled) {
            border-color: rgba(248, 113, 113, 0.48);
            background: rgba(127, 29, 29, 0.34);
            color: #fee2e2;
        }
        .front-extraction-list-clear-queue:disabled {
            cursor: default;
            opacity: 0.56;
        }
        .front-extraction-list-composer-shell {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 12px;
        }
        .front-extraction-list-composer-toggle {
            appearance: none;
            border: 1px solid rgba(96, 165, 250, 0.28);
            background: rgba(30, 41, 59, 0.58);
            color: #dbeafe;
            border-radius: 10px;
            padding: 0.58rem 0.8rem;
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            cursor: pointer;
            align-self: flex-start;
        }
        .front-extraction-list-composer-toggle:hover {
            border-color: rgba(96, 165, 250, 0.42);
            background: rgba(30, 41, 59, 0.72);
        }
        .front-extraction-list-composer {
            border: 1px solid rgba(148, 163, 184, 0.16);
            background: rgba(2, 6, 23, 0.32);
            border-radius: 12px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .front-extraction-list-composer-header {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
        }
        .front-extraction-list-composer-title {
            color: #e2e8f0;
            font-size: 0.82rem;
            font-weight: 700;
        }
        .front-extraction-list-composer-meta,
        .front-extraction-list-composer-hint {
            color: #94a3b8;
            font-size: 0.71rem;
            line-height: 1.3;
        }
        .front-extraction-list-composer-controls {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .front-extraction-list-composer-input {
            flex: 1 1 auto;
            min-width: 0;
            border: 1px solid rgba(148, 163, 184, 0.18);
            background: rgba(15, 23, 42, 0.76);
            color: #e5e7eb;
            border-radius: 10px;
            padding: 0.68rem 0.78rem;
            font-size: 0.8rem;
        }
        .front-extraction-list-composer-input:focus {
            outline: none;
            border-color: rgba(96, 165, 250, 0.52);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
        }
        .front-extraction-list-composer-submit {
            appearance: none;
            border: none;
            background: #4caf50;
            color: #04130a;
            border-radius: 10px;
            padding: 0.68rem 0.95rem;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            cursor: pointer;
            flex: 0 0 auto;
        }
        .front-extraction-list-section + .front-extraction-list-section {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid rgba(148, 163, 184, 0.12);
        }
        .front-extraction-list-rows {
            display: flex;
            flex-direction: column;
            gap: 3px;
            overflow-x: hidden;
        }
        .front-extraction-list-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            border: 1px solid rgba(148, 163, 184, 0.14);
            background: rgba(2, 6, 23, 0.28);
            border-radius: 8px;
            padding: 4px 7px;
        }
        .front-extraction-list-row.is-clickable {
            cursor: pointer;
        }
        .front-extraction-list-row.is-clickable:hover {
            border-color: rgba(96, 165, 250, 0.28);
            background: rgba(15, 23, 42, 0.38);
        }
        .front-extraction-list-row-main {
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 7px;
            flex: 1 1 auto;
        }
        .front-extraction-list-row-badges {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            flex: 0 0 auto;
            padding-top: 1px;
        }
        .front-extraction-list-type-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 1rem;
            padding: 0 0.34rem;
            border-radius: 999px;
            border: 1px solid rgba(96, 165, 250, 0.34);
            background: rgba(37, 99, 235, 0.14);
            color: #cfe3ff;
            font-size: 0.66375rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .front-extraction-list-type-badge.is-soft {
            border-color: rgba(148, 163, 184, 0.18);
            background: rgba(148, 163, 184, 0.1);
            color: #cbd5e1;
        }
        .front-extraction-list-row-copy {
            min-width: 0;
            display: flex;
            flex-direction: row;
            align-items: baseline;
            gap: 10px;
            flex: 1 1 auto;
        }
        .front-extraction-list-row-title {
            color: #e2e8f0;
            font-size: 0.84375rem;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0;
            flex: 1 1 auto;
        }
        .front-extraction-list-row-meta {
            color: #94a3b8;
            font-size: 0.74375rem;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0;
            white-space: nowrap;
            flex: 0 0 auto;
        }
        .front-extraction-list-row-meta--inline {
            display: none;
        }
        .front-extraction-list-row-actions {
            display: flex;
            align-items: center;
            gap: 5px;
            flex-shrink: 0;
        }
        .front-extraction-list-row-status {
            font-size: 0.64375rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #cbd5e1;
        }
        .front-extraction-list-row-status.is-success {
            color: #4ade80;
        }
        .front-extraction-list-row-status.is-error {
            color: #f87171;
        }
        .front-extraction-list-row-status.is-queued {
            color: #93c5fd;
        }
        .front-extraction-list-row-status.is-running {
            color: #fbbf24;
        }
        .front-extraction-list-reset {
            appearance: none;
            border: 1px solid rgba(148, 163, 184, 0.28);
            background: transparent;
            color: #cbd5e1;
            border-radius: 999px;
            width: 1.8rem;
            min-width: 1.8rem;
            height: 1.8rem;
            padding: 0;
            font-size: 1rem;
            line-height: 1;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .front-extraction-list-empty {
            color: #94a3b8;
            font-size: 0.76rem;
        }
        .extract-queue-prompt-meta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 1.45rem;
            padding: 0 0.52rem;
            border-radius: 999px;
            border: 1px solid rgba(96, 165, 250, 0.26);
            background: rgba(37, 99, 235, 0.08);
            color: #93c5fd;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.03em;
            white-space: nowrap;
        }
        @media (max-width: 760px) {
            .extract-panel {
                padding-left: 14px;
                padding-right: 14px;
            }
            .extract-top-main .extract-input-row,
            .extract-top-main .extract-queue-prompt {
                margin-left: 0;
            }
            .front-extraction-list-panel {
                position: fixed;
                left: var(--front-extraction-fixed-left, 8px);
                right: auto;
                top: var(--front-extraction-fixed-top, 80px);
                bottom: auto;
                width: var(--front-extraction-fixed-width, calc(100vw - 16px));
                max-width: calc(100vw - 16px);
                z-index: 3200;
                transform: translateZ(0);
                -webkit-transform: translateZ(0);
            }
            .front-extraction-list-drawer {
                max-height: min(58vh, 520px);
                height: auto;
                border-radius: 12px;
                padding: 8px;
                box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
                overflow-x: hidden;
                overflow-y: auto;
            }
            .front-extraction-list-tabs {
                position: sticky;
                top: 0;
                z-index: 1;
                margin-bottom: 8px;
                padding-bottom: 2px;
                background: linear-gradient(180deg, rgba(12, 18, 31, 0.98) 0%, rgba(12, 18, 31, 0.86) 100%);
            }
            .front-extraction-list-section {
                height: auto;
                overflow: visible;
                padding-right: 0;
            }
            .front-extraction-list-composer-controls {
                flex-direction: column;
                align-items: stretch;
            }
            .front-extraction-list-composer-toggle,
            .front-extraction-list-composer-submit {
                width: 100%;
                justify-content: center;
            }
            .front-extraction-list-row {
                flex-direction: column;
                align-items: stretch;
                gap: 4px;
            }
            .front-extraction-list-row-main {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 2px;
            }
            .front-extraction-list-row-badges {
                padding-top: 0;
                order: 0;
            }
            .front-extraction-list-row-copy {
                flex-direction: column;
                align-items: flex-start;
                gap: 0;
                width: 100%;
                order: 1;
            }
            .front-extraction-list-row-title {
                font-size: 0.80375rem;
                white-space: normal;
                overflow: visible;
                text-overflow: unset;
                overflow-wrap: anywhere;
                line-height: 1.25;
            }
            .front-extraction-list-row-meta {
                font-size: 0.70375rem;
                line-height: 1.15;
            }
            .front-extraction-list-row-actions {
                align-self: stretch;
                flex-wrap: nowrap;
                justify-content: space-between;
                align-items: center;
                gap: 4px;
            }
            .front-extraction-list-row-copy .front-extraction-list-row-meta {
                display: none;
            }
            .front-extraction-list-row-meta--inline {
                display: block;
                flex: 1 1 auto;
                min-width: 0;
            }
            .front-extraction-list-row-actions .front-extraction-list-row-meta {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .front-extraction-list-row-status {
                font-size: 0.61375rem;
            }
            .front-extraction-list-toggle-btn {
                width: 2.35rem;
                min-width: 2.35rem;
                height: 2.35rem;
                padding: 0;
                border-radius: 12px;
                gap: 0;
            }
            .extract-input-row.extract-input-row--queue-expanded {
                top: 50%;
                left: 12px;
                right: 12px;
                bottom: auto;
                transform: translateY(-50%);
                width: auto;
                max-width: none;
                padding: 0.85rem 0.85rem 0.9rem;
                border-radius: 18px;
                row-gap: 0.65rem;
                box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
            }
            .extract-input-row.extract-input-row--queue-expanded .extract-queue-composer-header {
                margin-bottom: 0.12rem;
                padding-right: 2.35rem;
                gap: 0.08rem;
            }
            .extract-input-row.extract-input-row--queue-expanded .extract-queue-composer-title {
                font-size: 0.7rem;
                letter-spacing: 0.06em;
            }
            .extract-input-row.extract-input-row--queue-expanded .extract-queue-composer-subtitle {
                font-size: 0.69rem;
                line-height: 1.2;
                max-width: none;
            }
            .extract-input-row.extract-input-row--queue-expanded .extract-url-field {
                flex: 1 1 100%;
                width: 100%;
            }
            .extract-input-row.extract-input-row--queue-expanded input {
                width: 100%;
                flex: 1 1 100%;
                min-width: 0;
                min-height: 2.6rem;
                font-size: 0.79rem;
                padding-top: 0.62rem;
                padding-bottom: 0.62rem;
            }
            .extract-input-row.extract-input-row--queue-expanded .extract-options-toggle {
                width: 2rem;
                min-width: 2rem;
                max-width: 2rem;
                height: 2rem;
            }
            .extract-input-row.extract-input-row--queue-expanded #extractCharacterV2Btn {
                width: 100%;
                flex: 1 1 100%;
                min-height: 2.6rem;
                font-size: 0.82rem;
                border-radius: 12px;
            }
            .extract-input-row.extract-input-row--queue-expanded #extractQueueHideBtn {
                top: 8px;
                right: 8px;
                width: 38px;
                min-width: 38px;
                height: 38px;
                flex: 0 0 auto;
                font-size: 1.12rem;
                border-radius: 11px;
                border-color: rgba(148, 163, 184, 0.22);
                background: rgba(15, 23, 42, 0.72);
            }
        }
        @media (max-width: 640px) {
            .extract-top-row {
                display: block;
                position: relative;
            }
            .front-extraction-list-anchor {
                --mobile-front-extraction-toggle-top: 1.5rem;
                --mobile-front-extraction-toggle-size: 2.35rem;
                position: absolute;
                top: 0;
                left: -10px;
                width: calc(100% + 20px);
                z-index: 260;
                isolation: isolate;
            }
            .extract-top-main {
                padding-left: 0;
            }
            .extract-top-main.extract-top-main--with-queue-toggle .extract-input-row,
            .extract-top-main.extract-top-main--with-queue-toggle .extract-queue-prompt {
                margin-left: 2.95rem;
            }
            .extract-top-main.extract-top-main--with-queue-toggle .collection-visibility-toggle {
                margin-left: 2.95rem;
            }
            .extract-top-main.extract-top-main--with-queue-toggle #extractCharacterV2Btn,
            .extract-top-main.extract-top-main--with-queue-toggle #extractQueueHideBtn {
                width: calc(100% + 2.95rem);
                margin-left: -2.95rem;
            }
            .extract-intro {
                margin-bottom: 0.75rem;
            }
            .extract-title {
                font-size: 1.45rem;
            }
            .collection-visibility-toggle {
                align-items: center;
                flex-direction: row;
                gap: 0.36rem;
                justify-content: flex-end;
            }
            .collection-visibility-track {
                width: 122px;
                min-width: 122px;
            }
            .collection-visibility-option {
                padding: 0 0.4rem;
                font-size: 0.64rem;
            }
            .front-extraction-list-toggle-btn {
                position: absolute;
                top: var(--mobile-front-extraction-toggle-top);
                left: 10px;
                transform: translateY(-50%);
                width: 2.35rem;
                min-width: 2.35rem;
                height: 2.35rem;
                padding: 0;
                justify-content: center;
            }
            .front-extraction-list-toggle-label {
                display: none;
            }
            .front-extraction-list-toggle-count {
                position: absolute;
                top: -0.24rem;
                right: -0.24rem;
                min-width: 1.02rem;
                height: 1.02rem;
                padding: 0 0.2rem;
                font-size: 0.6rem;
            }
            .front-extraction-list-panel {
                position: fixed;
                left: var(--front-extraction-fixed-left, 8px);
                right: auto;
                top: var(--front-extraction-fixed-top, 80px);
                bottom: auto;
                width: var(--front-extraction-fixed-width, calc(100vw - 16px));
                max-width: calc(100vw - 16px);
                z-index: 3200;
                transform: translateZ(0);
                -webkit-transform: translateZ(0);
            }
            .front-extraction-list-panel .front-extraction-list-drawer {
                position: relative;
                z-index: 3201;
                box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
            }
        }
        .extract-progress-panel {
            display: block;
            margin-top: var(--space-3);
            background: transparent;
            border: none;
            border-radius: 0;
            padding: 0;
            position: relative;
            overflow: visible;
        }
        .extract-progress-panel.extract-history-expanded {
            z-index: 130;
        }
        .extract-progress-panel.idle {
            background: transparent;
            border: none;
        }
        .extract-progress-panel.loading {
            background: transparent;
            border: none;
        }
        .extract-progress-panel.success {
            background: transparent;
            border: none;
        }
        .extract-history-trigger {
            width: 100%;
            display: flex;
            position: relative;
            z-index: 131;
            align-items: center;
            justify-content: space-between;
            gap: 0.6rem;
            border: 1px solid rgba(148, 163, 184, 0.28);
            border-radius: 8px;
            background: rgba(15, 23, 42, 0.5);
            color: #e5e7eb;
            padding: 0.52rem 0.62rem;
            cursor: pointer;
            transition: border-color var(--transition-fast), background var(--transition-fast);
            text-align: left;
        }
        .extract-history-trigger:hover {
            border-color: rgba(96, 165, 250, 0.5);
            background: rgba(15, 23, 42, 0.62);
        }
        .extract-history-summary {
            color: #d1d5db;
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .extract-history-titleline {
            display: inline-flex;
            align-items: center;
            gap: 0.42rem;
            min-width: 0;
            flex: 1 1 auto;
        }
        .extract-history-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(96, 165, 250, 0.45);
            background: rgba(96, 165, 250, 0.14);
            color: #bfdbfe;
            border-radius: 999px;
            padding: 0.15rem 0.45rem;
            font-size: 0.64rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            line-height: 1.2;
            flex-shrink: 0;
        }
        .extract-history-toggle {
            color: #93c5fd;
            font-size: 0.95rem;
            font-weight: 800;
            flex-shrink: 0;
            line-height: 1;
            transition: transform 180ms ease;
        }
        .extract-progress-panel.extract-history-expanded .extract-history-toggle {
            transform: rotate(180deg);
        }
        .extract-history-overlay {
            position: fixed;
            top: 56px;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(6, 10, 20, 0.48);
            z-index: 129;
            opacity: 0;
            visibility: hidden;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            transition: opacity 200ms ease, visibility 200ms ease, background 200ms ease;
            pointer-events: none;
        }
        .extract-progress-panel.extract-history-expanded .extract-history-overlay {
            opacity: 1;
            visibility: visible;
            background: rgba(6, 10, 20, 0.64);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            pointer-events: auto;
        }
        .extract-history-dropdown {
            position: absolute;
            left: 0;
            right: 0;
            top: calc(100% + 0.4rem);
            z-index: 132;
            padding: 0;
            border-radius: 10px;
            border: 1px solid rgba(148, 163, 184, 0.28);
            background:
                linear-gradient(180deg, rgba(31, 41, 55, 0.98), rgba(17, 24, 39, 0.98));
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow: var(--shadow-xl);
            opacity: 0;
            transform: translateY(-8px) scaleY(0.96);
            transform-origin: top;
            pointer-events: none;
            transition: opacity 160ms ease, transform 180ms ease;
            max-height: min(360px, 52vh);
            overflow-y: auto;
            overflow-x: hidden;
        }
        .extract-progress-panel.extract-history-expanded .extract-history-dropdown {
            opacity: 1;
            transform: translateY(0) scaleY(1);
            pointer-events: auto;
        }
        .extract-feed-row {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 0.5rem;
            padding: 0.46rem 0.56rem;
            border-radius: 0;
            border-top: 1px solid rgba(148, 163, 184, 0.18);
            background: rgba(2, 6, 23, 0.2);
        }
        .extract-feed-row--clickable {
            cursor: pointer;
        }
        .extract-feed-row--clickable:hover {
            background: rgba(15, 23, 42, 0.36);
        }
        .extract-feed-row:first-child {
            border-top: none;
        }
        .extract-feed-state {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 0;
            width: auto;
            padding: 0.15rem 0.42rem;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.26);
            background: rgba(15, 23, 42, 0.66);
            font-size: 0.64rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #93c5fd;
            white-space: nowrap;
        }
        .extract-feed-main {
            color: #e5e7eb;
            font-size: 0.82rem;
            line-height: 1.3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-flex;
            align-items: center;
            gap: 0.42rem;
            min-width: 0;
        }
        .extract-feed-source-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 1.5rem;
            padding: 0.12rem 0.34rem;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.28);
            background: rgba(15, 23, 42, 0.7);
            color: #dbeafe;
            font-size: 0.58rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            line-height: 1.1;
            flex: 0 0 auto;
        }
        .extract-feed-source-badge--janitor {
            border-color: rgba(96, 165, 250, 0.42);
            background: rgba(59, 130, 246, 0.14);
            color: #bfdbfe;
        }
        .extract-feed-source-badge--saucepan {
            border-color: rgba(251, 191, 36, 0.4);
            background: rgba(245, 158, 11, 0.14);
            color: #fde68a;
        }
        .extract-feed-main a {
            color: #93c5fd;
            text-decoration: none;
        }
        .extract-feed-main a:hover {
            text-decoration: underline;
        }
        .extract-feed-meta {
            color: var(--text-secondary);
            font-size: 0.72rem;
            white-space: nowrap;
            text-align: right;
            font-variant-numeric: tabular-nums;
        }
        .extract-feed-meta-time {
            font-variant-numeric: tabular-nums;
        }
        .extract-feed-meta--with-retry {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.34rem;
        }
        .extract-feed-retry-btn {
            border: 1px solid rgba(96, 165, 250, 0.5);
            background: rgba(96, 165, 250, 0.16);
            color: #bfdbfe;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            border-radius: 6px;
            padding: 0.18rem 0.44rem;
            cursor: pointer;
            transition: background var(--transition-fast), border-color var(--transition-fast);
        }
        .extract-feed-retry-btn:hover {
            background: rgba(96, 165, 250, 0.25);
            border-color: rgba(147, 197, 253, 0.72);
        }
        .extract-feed-retry-btn:focus-visible {
            outline: 2px solid rgba(147, 197, 253, 0.6);
            outline-offset: 1px;
        }
        .extract-feed-row--running .extract-feed-state {
            color: #60a5fa;
        }
        .extract-feed-row--queued .extract-feed-state {
            color: #93c5fd;
        }
        .extract-feed-row--done .extract-feed-state {
            color: #4ade80;
        }
        .extract-feed-row--warn .extract-feed-state {
            color: #fbbf24;
        }
        .extract-feed-row--error .extract-feed-state {
            color: #f87171;
        }
        .extract-feed-empty {
            color: #9ca3af;
            font-size: 0.85rem;
            line-height: 1.45;
            padding: 0.25rem 0.2rem;
        }
        .extract-complete-summary {
            margin-top: var(--space-2);
            font-size: 0.75rem;
            color: #888;
            line-height: 1.4;
        }
        .extract-complete-card {
            text-align: left;
            padding: 0;
            border: none;
            border-radius: 0;
            background: transparent;
        }
        .extract-complete-header {
            color: #93c5fd;
            font-size: 0.66rem;
            font-weight: 700;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            line-height: 1;
            margin-bottom: 0.38rem;
        }
        .extract-complete-main-row {
            display: flex;
            align-items: center;
            min-height: 34px;
            margin-bottom: 0.36rem;
        }
        .extract-complete-action-group {
            display: flex;
            align-items: stretch;
            gap: 0.45rem;
            width: 100%;
        }
        .extract-complete-view-btn.btn-primary,
        .extract-complete-view-btn--empty {
            flex: 1 1 auto;
            min-width: 0;
            min-height: 34px;
            margin: 0;
            padding: 0.4rem 0.58rem;
            font-size: 0.78rem;
            line-height: 1.1;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
        }
        .extract-complete-reset-btn {
            flex: 0 0 auto;
            min-height: 34px;
            padding: 0.4rem 0.72rem;
            font-size: 0.78rem;
            line-height: 1.1;
            border-radius: 8px;
            white-space: nowrap;
        }
        .extract-complete-view-btn--empty {
            border: 1px solid rgba(148, 163, 184, 0.28);
            background: rgba(30, 41, 59, 0.65);
            color: #e5e7eb;
        }
        .extract-complete-view-btn-text {
            display: block;
            min-width: 0;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .extract-complete-progress-label {
            width: 100%;
            min-height: 34px;
            border-radius: 8px;
            border: 1px solid rgba(148, 163, 184, 0.32);
            background: rgba(15, 23, 42, 0.72);
            color: #e5e7eb;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        .extract-complete-progress-label--unavailable {
            border-color: rgba(236, 72, 153, 0.38);
            background: rgba(49, 19, 38, 0.72);
            color: #f9a8d4;
        }
        .extract-complete-pill-row {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 0.34rem;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: thin;
            padding-bottom: 2px;
        }
        .extract-complete-elapsed-row {
            margin-top: 0.28rem;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.3rem;
        }
        .extract-complete-card:not(.extract-complete-card--with-pills) .extract-complete-main-row {
            margin-bottom: 0.2rem;
        }
        .extract-complete-elapsed-indicator {
            width: 12px;
            height: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .extract-complete-elapsed-indicator .extract-post-inline-spinner {
            width: 10px;
            height: 10px;
            border-width: 2px;
        }
        .extract-complete-elapsed-indicator .extract-post-inline-check {
            font-size: 0.72rem;
            line-height: 1;
        }
        .extract-complete-elapsed {
            color: #9ca3af;
            font-size: 0.72rem;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        .extract-complete-dump {
            margin: 0.45rem 0 0;
            padding: 0.55rem 0.65rem;
            border-radius: 8px;
            border: 1px solid rgba(148, 163, 184, 0.22);
            background: rgba(15, 23, 42, 0.58);
            color: #cbd5e1;
            font-size: 0.7rem;
            line-height: 1.45;
            white-space: pre-wrap;
            word-break: break-word;
            overflow-x: auto;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
        }
        .extract-complete-dump-shell {
            margin-top: 0.45rem;
            border-radius: 10px;
            border: 1px solid rgba(148, 163, 184, 0.18);
            background: rgba(15, 23, 42, 0.38);
            overflow: hidden;
        }
        .extract-complete-dump-toggle {
            list-style: none;
            cursor: pointer;
            user-select: none;
            padding: 0.55rem 0.7rem;
            color: #cbd5e1;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.01em;
            display: flex;
            align-items: center;
            gap: 0.45rem;
        }
        .extract-complete-dump-toggle::-webkit-details-marker {
            display: none;
        }
        .extract-complete-dump-toggle::before {
            content: '▸';
            color: #93c5fd;
            font-size: 0.8rem;
            line-height: 1;
            transition: transform 120ms ease;
        }
        .extract-complete-dump-shell[open] .extract-complete-dump-toggle::before {
            transform: rotate(90deg);
        }
        .extract-complete-dump-shell .extract-complete-dump {
            margin: 0;
            border: 0;
            border-top: 1px solid rgba(148, 163, 184, 0.16);
            border-radius: 0;
            background: rgba(15, 23, 42, 0.58);
        }
        .extract-compact-task-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.28rem;
            padding: 0.14rem 0.36rem;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.3);
            background: rgba(15, 23, 42, 0.7);
            color: #d1d5db;
            font-size: 0.68rem;
            line-height: 1.2;
            white-space: nowrap;
        }
        .extract-compact-task-chip-label {
            font-weight: 600;
        }
        .extract-compact-task-chip-indicator {
            width: 13px;
            height: 13px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .extract-compact-task-chip-indicator .extract-post-inline-spinner {
            width: 10px;
            height: 10px;
            border-width: 2px;
        }
        .extract-compact-task-chip-indicator .extract-post-inline-check,
        .extract-compact-task-chip-indicator .extract-post-inline-error {
            font-size: 0.68rem;
            line-height: 1;
        }
        .extract-compact-task-chip--done {
            border-color: rgba(74, 222, 128, 0.35);
            color: #bbf7d0;
        }
        .extract-compact-task-chip--done .extract-post-inline-check {
            color: #22c55e;
        }
        .extract-compact-task-chip--loading {
            border-color: rgba(148, 163, 184, 0.3);
            color: #d1d5db;
        }
        .extract-compact-task-chip--idle {
            border-color: rgba(148, 163, 184, 0.3);
            color: #d1d5db;
            opacity: 1;
        }
        .extract-compact-task-chip--error {
            border-color: rgba(148, 163, 184, 0.3);
            color: #d1d5db;
        }
        .extract-compact-task-chip--loading .extract-post-inline-spinner,
        .extract-compact-task-chip--idle .extract-post-inline-spinner {
            border-color: rgba(148, 163, 184, 0.35);
            border-top-color: #d1d5db;
        }
        .extract-compact-task-chip--error .extract-post-inline-error {
            color: #d1d5db;
        }
        @media (max-width: 640px) {
            .extract-complete-pill-row {
                flex-wrap: wrap;
                align-items: stretch;
                overflow-x: visible;
                overflow-y: visible;
                padding-bottom: 0;
            }
            .extract-compact-task-chip {
                max-width: 100%;
            }
        }
        .extract-complete-card--running .extract-compact-task-chip {
            border-color: rgba(148, 163, 184, 0.3);
            background: rgba(15, 23, 42, 0.7);
            color: #d1d5db;
        }
        .extract-complete-card--failed .extract-complete-view-btn--empty,
        .extract-complete-card--failed .extract-complete-progress-label {
            border-color: rgba(248, 113, 113, 0.28);
            background: rgba(69, 10, 10, 0.28);
            color: #fecaca;
        }
        .extract-complete-card--failed .extract-complete-pill-row {
            gap: 0.46rem;
            padding-top: 0.08rem;
            padding-bottom: 0.08rem;
        }
        .extract-complete-card--failed .extract-complete-dump {
            border-color: rgba(248, 113, 113, 0.22);
            background: rgba(69, 10, 10, 0.2);
            color: #fecaca;
        }
        .extract-complete-card--failed .extract-complete-dump-shell {
            border-color: rgba(248, 113, 113, 0.2);
            background: rgba(69, 10, 10, 0.12);
        }
        .extract-complete-card--failed .extract-complete-dump-toggle {
            color: #fecaca;
        }
        .extract-complete-card--failed .extract-compact-task-chip {
            border-color: rgba(248, 113, 113, 0.24);
            background: rgba(69, 10, 10, 0.18);
            color: #fca5a5;
            min-height: 30px;
            padding: 0.3rem 0.72rem;
            gap: 0.4rem;
            font-size: 0.75rem;
            line-height: 1.15;
        }
        .extract-complete-card--failed .extract-compact-task-chip-indicator {
            width: 14px;
            height: 14px;
        }
        .extract-complete-card--failed .extract-compact-task-chip .extract-post-inline-check,
        .extract-complete-card--failed .extract-compact-task-chip .extract-post-inline-error {
            color: inherit;
        }
        .extract-complete-card--running .extract-compact-task-chip .extract-post-inline-check,
        .extract-complete-card--running .extract-compact-task-chip .extract-post-inline-error {
            color: #d1d5db;
        }
        .extract-complete-card--running .extract-compact-task-chip--done .extract-post-inline-check {
            color: #22c55e;
        }
        .extract-post-inline-row {
            margin-top: var(--space-2);
            font-size: 0.75rem;
            color: #888;
            line-height: 1.4;
            display: none;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            flex-wrap: wrap;
        }
        .extract-post-inline-item {
            display: inline-flex;
            align-items: center;
            gap: 0.33rem;
            white-space: nowrap;
        }
        .extract-post-inline-separator {
            opacity: 0.55;
        }
        .extract-post-inline-spinner {
            width: 12px;
            height: 12px;
            border-width: 2px;
            display: inline-block;
            vertical-align: middle;
        }
        .extract-post-inline-spinner--idle {
            opacity: 0.6;
        }
        .extract-post-inline-check {
            color: var(--success);
            font-weight: 700;
            line-height: 1;
        }
        .extract-post-inline-error {
            color: var(--error);
            font-weight: 700;
            line-height: 1;
        }

        /* Full Extraction Log (Admin only) */
        .extract-log-container {
            margin-top: var(--space-3);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
            overflow: hidden;
        }
        .extract-log-header {
            padding: var(--space-2) var(--space-3);
            background: var(--bg-subtle);
            border-bottom: 1px solid var(--border-subtle);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: background var(--transition-fast);
        }
        .extract-log-header:hover {
            background: var(--bg-accent);
        }
        .extract-log-title {
            font-size: 0.8125rem;
            font-weight: 600;
            color: var(--text-secondary);
        }
        .extract-log-toggle {
            font-size: 0.75rem;
            color: var(--text-muted);
            transition: transform var(--transition-fast);
        }
        .extract-log-container.open .extract-log-toggle {
            transform: rotate(180deg);
        }
        .extract-log-content {
            display: none;
            padding: var(--space-4);
            background: var(--bg-base);
            max-height: 600px;
            overflow-y: auto;
            font-size: 0.875rem;
            line-height: 1.6;
        }
        .extract-log-container.open .extract-log-content {
            display: block;
        }

        @media (max-width: 900px) {
            .extract-history-summary {
                font-size: 0.75rem;
            }
            .extract-feed-row {
                grid-template-columns: auto minmax(0, 1fr) auto;
            }
            .extract-feed-meta {
                grid-column: auto;
                justify-self: end;
            }
        }
        @media (max-width: 640px) {
            .extract-history-dropdown {
                max-height: min(52vh, 20rem);
            }
            .extract-history-titleline {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.12rem;
            }
            .extract-history-summary {
                white-space: normal;
                overflow: visible;
                text-overflow: clip;
                line-height: 1.25;
            }
            .extract-feed-row {
                grid-template-columns: minmax(0, 1fr) auto;
                grid-template-areas:
                    "state meta"
                    "title meta";
                column-gap: 0.44rem;
                row-gap: 0.2rem;
                align-items: start;
            }
            .extract-feed-state {
                grid-area: state;
                justify-self: start;
            }
            .extract-feed-main {
                grid-area: title;
            }
            .extract-feed-meta {
                grid-area: meta;
                align-self: end;
                justify-self: end;
            }
        }

        /* ========================================
           CHARACTERS VIEW
           ======================================== */
        .characters-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-4);
        }
        .view-characters {
            margin-top: calc(-1 * var(--space-2));
        }
        .view-fresh {
            margin-top: calc(-1 * var(--space-2));
        }
        .view-creators {
            margin-top: -7px;
            padding-top: 0;
            padding-bottom: var(--space-4);
        }
        @media (min-width: 769px) {
            /* Characters view should scroll inside the app container, not at document/body level. */
            body.characters-view-active {
                overflow: hidden;
                /* Container already accounts for header spacing; don't add an extra sticky offset. */
                --characters-toolbar-offset: 0px;
            }
            body.characters-view-active .mobile-scroll-container {
                position: fixed;
                inset: 0;
                overflow: hidden;
                -webkit-overflow-scrolling: touch;
                padding: calc(4rem - 1px) 1rem 1rem 1rem;
                box-sizing: border-box;
            }
            body.characters-view-active .mobile-scroll-container > .container {
                height: 100%;
                min-height: 0;
                padding-top: 0;
                padding-bottom: 0;
                display: flex;
                flex-direction: column;
            }
            body.characters-view-active #viewCharacters.view-characters.active {
                flex: 1 1 auto;
                min-height: 0;
            }
            body.characters-view-active #viewCharacters .characters-browse-layout {
                height: 100%;
                min-height: 0;
                align-items: stretch;
            }
            body.characters-view-active #viewCharacters .characters-main-pane {
                min-height: 0;
                display: flex;
                flex-direction: column;
            }
            body.characters-view-active #viewCharacters .characters-toolbar {
                position: static;
                top: auto;
                flex: 0 0 auto;
            }
            body.characters-view-active #viewCharacters #charactersContent {
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
                scrollbar-gutter: stable;
            }
            body.characters-view-active #viewCharacters .tag-sidebar {
                position: static;
                top: auto;
                height: auto;
                max-height: none;
                min-height: 0;
                overflow-y: auto;
            }
        }
        @media (min-width: 769px) {
            body.taxonomy-view-active {
                overflow: hidden;
                --characters-toolbar-offset: 0px;
            }
            body.taxonomy-view-active .mobile-scroll-container {
                position: fixed;
                inset: 0;
                overflow: hidden;
                -webkit-overflow-scrolling: touch;
                padding: calc(4rem - 1px) 1rem 1rem 1rem;
                box-sizing: border-box;
            }
            body.taxonomy-view-active .mobile-scroll-container > .container {
                height: 100%;
                min-height: 0;
                padding-top: 0;
                padding-bottom: 0;
                display: flex;
                flex-direction: column;
            }
            body.taxonomy-view-active #viewTaxonomy.view-taxonomy.active {
                flex: 1 1 auto;
                min-height: 0;
                height: auto;
            }
            body.taxonomy-view-active #viewTaxonomy .tagverse-layout {
                height: 100%;
                min-height: 0;
                align-items: stretch;
            }
            body.taxonomy-view-active #viewTaxonomy .tagverse-main-pane {
                min-height: 0;
                display: flex;
                flex-direction: column;
            }
            body.taxonomy-view-active #viewTaxonomy .taxonomy-definition-card {
                flex: 1 1 auto;
                height: 100%;
                max-height: 100%;
                min-height: 0;
                overflow-y: auto;
                overflow-x: hidden;
                overscroll-behavior: contain;
            }
            body.taxonomy-view-active #viewTaxonomy .tag-sidebar {
                position: static;
                top: auto;
                height: auto;
                max-height: none;
                min-height: 0;
                overflow-y: auto;
            }
        }
        @media (min-width: 769px) {
            body.creators-view-active {
                overflow: hidden;
                --characters-toolbar-offset: 0px;
            }
            body.creators-view-active .mobile-scroll-container {
                position: fixed;
                inset: 0;
                overflow: hidden;
                -webkit-overflow-scrolling: touch;
                padding: calc(4rem - 1px) 1rem 1rem 1rem;
                box-sizing: border-box;
            }
            body.creators-view-active .mobile-scroll-container > .container {
                height: 100%;
                min-height: 0;
                padding-top: 0;
                padding-bottom: 0;
                display: flex;
                flex-direction: column;
            }
            body.creators-view-active #viewCreators.view-creators.active {
                flex: 1 1 auto;
                min-height: 0;
                height: 100%;
                padding-bottom: 0;
            }
            body.creators-view-active #viewCreators .creators-browse-layout {
                height: 100%;
                min-height: 0;
                align-items: stretch;
            }
            body.creators-view-active #viewCreators .creators-main-pane {
                flex: 1 1 auto;
                height: 100%;
                min-height: 0;
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }
            body.creators-view-active #viewCreators .creators-page {
                flex: 1 1 auto;
                height: 100%;
                min-height: 0;
                display: flex;
                flex-direction: column;
            }
            body.creators-view-active #viewCreators .creators-toolbar {
                position: static;
                top: auto;
                flex: 0 0 auto;
            }
            body.creators-view-active #viewCreators .tag-filter-chips {
                flex: 0 0 auto;
                justify-content: flex-end;
                margin: -6px 0 5px;
                width: 100%;
            }
            body.creators-view-active #viewCreators #creatorsList {
                flex: 1 1 auto;
                display: flex;
                flex-direction: column;
                max-height: none;
                min-height: 0;
                margin-bottom: 0;
                overflow-y: auto;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
                padding-right: 2px;
                scrollbar-gutter: stable;
            }
            body.creators-view-active #viewCreators #creatorsList .creators-ranking-section,
            body.creators-view-active #viewCreators #creatorsList .creators-directory-section,
            body.creators-view-active #viewCreators #creatorsList .creators-table-wrap {
                flex: 1 0 auto;
            }
            body.creators-view-active #viewCreators #creatorsList .creators-ranking-section,
            body.creators-view-active #viewCreators #creatorsList .creators-directory-section {
                display: flex;
                flex-direction: column;
            }
            body.creators-view-active #viewCreators #creatorsList .creators-table-wrap {
                overflow: visible;
            }
            body.creators-view-active #viewCreators #creatorsLoadState {
                flex: 0 0 auto;
            }
            body.creators-view-active #viewCreators #creatorsLoadState:empty {
                min-height: 0;
                padding: 0;
            }
            body.creators-view-active #viewCreators #creatorsTagSidebar {
                position: static;
                top: auto;
                height: auto;
                max-height: none;
                min-height: 0;
                overflow-y: auto;
            }
        }
        .characters-toolbar {
            --characters-toolbar-pill-min-height: 1.55rem;
            --characters-toolbar-pill-padding-y: 0.18rem;
            --characters-toolbar-pill-padding-x: 0.55rem;
            display: block;
            margin-bottom: 0;
            position: sticky;
            top: var(--characters-toolbar-offset);
            z-index: 5;
            padding: 2px 0 6px 0;
            background: transparent;
        }
        .characters-toolbar-row {
            display: flex;
            align-items: center;
            gap: var(--space-3);
        }
        @media (min-width: 769px) {
            .characters-toolbar {
                padding-bottom: 11px; /* desktop: +5px spacing below toolbar row */
            }
        }
        .characters-token-toggle {
            margin-left: auto;
            margin-right: 0;
            max-width: none;
            white-space: nowrap;
        }
        .characters-toggle {
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
            order: 70;
            margin-left: auto;
            background: var(--bg-subtle);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-full);
            padding: 1px;
            gap: 2px;
        }
        .characters-toggle-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: var(--characters-toolbar-pill-min-height);
            border: none;
            background: transparent;
            color: var(--text-secondary);
            font-size: 0.75rem;
            font-weight: 600;
            padding: var(--characters-toolbar-pill-padding-y) 0.58rem;
            border-radius: var(--radius-full);
            cursor: pointer;
            transition: background var(--transition-fast), color var(--transition-fast);
            letter-spacing: 0.02em;
            line-height: 1;
        }
        .characters-toggle-btn.characters-toggle-btn-icon {
            width: 30px;
            height: 30px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            letter-spacing: 0;
            font-size: 0.75rem;
        }
        .characters-toggle-icon-letter {
            width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            border: 1px solid var(--border-subtle);
            color: inherit;
            line-height: 1;
            font-weight: 700;
        }
        .characters-toggle-btn.active {
            background: var(--accent-primary);
            color: var(--text-inverse);
        }
        .characters-toggle-btn[data-mode="vault"]:not(.active),
        .characters-scope-dropdown .admin-dropdown-menu button[data-mode="vault"]:not(.active) {
            color: #facc15;
        }
        .characters-toggle-btn[data-mode="basket"]:not(.active),
        .characters-scope-dropdown .admin-dropdown-menu button[data-mode="basket"]:not(.active) {
            color: #f9a8d4;
        }
        .characters-toggle-btn[data-mode="vault"]:not(.active):hover,
        .characters-scope-dropdown .admin-dropdown-menu button[data-mode="vault"]:not(.active):hover {
            color: #fde047;
        }
        .characters-toggle-btn[data-mode="basket"]:not(.active):hover,
        .characters-scope-dropdown .admin-dropdown-menu button[data-mode="basket"]:not(.active):hover {
            color: #fbcfe8;
        }
        .characters-toggle-btn.active .characters-toggle-icon-letter {
            border-color: transparent;
            background: rgba(255, 255, 255, 0.18);
        }
        .characters-toggle-btn:hover {
            color: var(--text-primary);
        }
        .characters-toggle-btn[data-mode="vault"].active,
        .characters-toggle-btn[data-mode="vault"].active:hover {
            background:
                linear-gradient(180deg, rgba(250, 204, 21, 0.98), rgba(234, 179, 8, 0.94)),
                #facc15;
            color: #241600;
            box-shadow: 0 7px 16px rgba(250, 204, 21, 0.22);
        }
        body.characters-mode-basket #tagSidebar,
        body.characters-mode-basket #tagDrawerToggle {
            display: none !important;
        }
        body.characters-mode-basket .characters-toolbar .tag-filter-chips {
            display: none !important;
        }
        body.characters-mode-basket .characters-basket-actions {
            display: none !important;
        }
        .characters-basket-actions {
            display: none;
            align-items: center;
            gap: 6px;
            flex: 0 0 auto;
            order: 84;
        }
        body.characters-mode-basket .characters-basket-actions:not([hidden]) {
            display: inline-flex;
        }
        .characters-basket-action {
            border: 1px solid rgba(244, 114, 182, 0.42);
            border-radius: 999px;
            background: rgba(244, 114, 182, 0.13);
            color: #fce7f3;
            min-height: 30px;
            padding: 0 10px;
            font-size: 0.72rem;
            font-weight: 760;
            line-height: 1;
            cursor: pointer;
            white-space: nowrap;
            transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
        }
        .characters-basket-action:hover:not(:disabled) {
            background: rgba(244, 114, 182, 0.22);
            border-color: rgba(244, 114, 182, 0.62);
            color: #fff;
        }
        .characters-basket-action:disabled {
            cursor: default;
            opacity: 0.46;
        }
        .characters-basket-clear {
            border-color: rgba(148, 163, 184, 0.35);
            background: rgba(148, 163, 184, 0.1);
            color: rgba(226, 232, 240, 0.78);
        }
        .basket-checkout-view {
            display: flex;
            flex-direction: column;
            gap: 12px;
            width: 100%;
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
        }
        .basket-checkout-header {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 42px;
            padding: 7px 0 0;
        }
        .basket-checkout-selection-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 7px;
            width: 100%;
            min-width: 0;
        }
        .basket-checkout-selected-actions {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            flex: 0 0 auto;
            gap: 7px;
            margin-left: auto;
        }
        .basket-checkout-select-all {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-width: 0;
            color: rgba(226, 232, 240, 0.76);
            font-size: 0.78rem;
            font-weight: 700;
            white-space: nowrap;
        }
        .basket-checkout-select-all input,
        .basket-checkout-checkbox {
            width: 16px;
            height: 16px;
            accent-color: var(--brand-hot-pink);
            flex: 0 0 auto;
        }
        .basket-checkout-summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            width: 100%;
            min-width: 0;
            min-height: 23px;
            padding: 0 0 7px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            color: rgba(148, 163, 184, 0.9);
            font-size: 0.76rem;
            font-weight: 700;
            text-align: right;
        }
        .basket-checkout-summary-text {
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: wrap;
            gap: 8px;
            min-width: 0;
            text-align: left;
        }
        .basket-checkout-delete-selected,
        .basket-checkout-download-all,
        .basket-checkout-download-selected,
        .basket-checkout-collect-selected,
        .basket-checkout-clear,
        .basket-item-action-trigger.admin-dropdown-btn {
            min-height: 30px;
            border-radius: 999px;
            padding: 0 11px;
            font-size: 0.72rem;
            font-weight: 780;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
        }
        .basket-checkout-delete-selected {
            border: 1px solid rgba(248, 113, 113, 0.36);
            background: rgba(248, 113, 113, 0.1);
            color: rgba(254, 202, 202, 0.92);
        }
        .basket-checkout-download-all,
        .basket-checkout-download-selected,
        .basket-checkout-collect-selected,
        .basket-item-action-trigger.admin-dropdown-btn {
            border: 1px solid rgba(244, 114, 182, 0.44);
            background: rgba(244, 114, 182, 0.14);
            color: #fce7f3;
        }
        .basket-checkout-collect-selected {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            min-width: 32px;
            padding: 0;
            border-color: rgba(45, 212, 191, 0.38);
            background: rgba(45, 212, 191, 0.1);
            color: rgba(204, 251, 241, 0.96);
        }
        .basket-checkout-clear {
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: rgba(148, 163, 184, 0.1);
            color: rgba(226, 232, 240, 0.78);
        }
        .basket-item-collection-trigger.admin-dropdown-btn {
            border-color: rgba(45, 212, 191, 0.38);
            background: rgba(45, 212, 191, 0.1);
            color: rgba(204, 251, 241, 0.96);
        }
        .basket-checkout-delete-selected:hover:not(:disabled) {
            background: rgba(248, 113, 113, 0.18);
            border-color: rgba(248, 113, 113, 0.54);
        }
        .basket-checkout-download-all:hover:not(:disabled),
        .basket-checkout-download-selected:hover:not(:disabled),
        .basket-item-action-trigger.admin-dropdown-btn:hover:not(:disabled) {
            background: rgba(244, 114, 182, 0.23);
            border-color: rgba(244, 114, 182, 0.64);
            color: #fff;
        }
        .basket-checkout-collect-selected:hover:not(:disabled) {
            background: rgba(45, 212, 191, 0.18);
            border-color: rgba(45, 212, 191, 0.58);
            color: #fff;
        }
        .basket-checkout-clear:hover:not(:disabled) {
            background: rgba(148, 163, 184, 0.18);
            border-color: rgba(148, 163, 184, 0.52);
            color: #fff;
        }
        .basket-item-collection-trigger.admin-dropdown-btn:hover:not(:disabled) {
            background: rgba(45, 212, 191, 0.18);
            border-color: rgba(45, 212, 191, 0.58);
        }
        .basket-checkout-delete-selected:disabled,
        .basket-checkout-download-all:disabled,
        .basket-checkout-download-selected:disabled,
        .basket-checkout-collect-selected:disabled,
        .basket-checkout-clear:disabled,
        .basket-item-action-trigger.admin-dropdown-btn:disabled {
            opacity: 0.46;
            cursor: default;
        }
        .basket-checkout-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            width: 100%;
        }
        .basket-checkout-row {
            display: grid;
            grid-template-columns: 24px minmax(0, 1fr) auto;
            align-items: center;
            gap: 10px;
            min-width: 0;
            min-height: 96px;
            padding: 8px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.035);
            position: relative;
        }
        .basket-checkout-row:has(.admin-dropdown.open) {
            z-index: 30;
        }
        .basket-checkout-checkbox-wrap {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
        }
        .basket-checkout-main {
            display: grid;
            grid-template-columns: 52px minmax(0, 1fr);
            align-items: center;
            gap: 9px;
            min-width: 0;
            border: 0;
            background: transparent;
            color: inherit;
            text-align: left;
            padding: 0;
            cursor: pointer;
        }
        .basket-checkout-avatar {
            width: 52px;
            height: 70px;
            border-radius: 7px;
            object-fit: cover;
            object-position: top center;
            background: var(--bg-subtle);
            display: block;
        }
        .basket-checkout-copy {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }
        .basket-checkout-name,
        .basket-checkout-creator,
        .basket-checkout-meta {
            display: block;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .basket-checkout-name {
            color: var(--text-primary);
            font-size: 0.88rem;
            font-weight: 780;
            line-height: 1.15;
        }
        .basket-checkout-creator {
            color: rgba(226, 232, 240, 0.78);
            font-size: 0.74rem;
            font-weight: 650;
            line-height: 1.2;
        }
        .basket-checkout-meta {
            color: rgba(148, 163, 184, 0.85);
            font-size: 0.7rem;
            font-weight: 650;
            line-height: 1.2;
        }
        .basket-checkout-actions {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 6px;
            min-width: 0;
        }
        .basket-item-download-dropdown,
        .basket-item-collection-dropdown,
        .basket-selected-collection-dropdown {
            position: relative;
            display: inline-flex;
        }
        .basket-item-download-dropdown.open,
        .basket-item-collection-dropdown.open,
        .basket-selected-collection-dropdown.open {
            z-index: 300;
        }
        .basket-item-action-trigger.admin-dropdown-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            min-width: 34px;
            height: 34px;
            min-height: 34px;
            padding: 0;
            border-radius: 999px;
            font-size: 0.92rem;
        }
        .basket-item-action-trigger .basket-action-label {
            display: none;
        }
        .basket-item-action-trigger.admin-dropdown-btn::after {
            display: none;
        }
        .basket-item-download-dropdown .basket-item-download-menu,
        .basket-item-collection-dropdown .basket-collection-menu,
        .basket-selected-collection-dropdown .basket-collection-menu {
            left: auto;
            right: 0;
            min-width: 112px;
            z-index: 320;
            background: #111318;
            border-color: rgba(255, 255, 255, 0.14);
            box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        .basket-item-collection-dropdown .basket-collection-menu,
        .basket-selected-collection-dropdown .basket-collection-menu {
            min-width: 220px;
            padding: 7px;
        }
        .basket-collection-menu-header {
            padding: 3px 7px 6px;
            color: var(--text-secondary);
            font-size: 0.72rem;
            font-weight: 780;
            letter-spacing: 0.02em;
        }
        .basket-collection-option {
            width: 100%;
            min-height: 31px;
            border: 0;
            border-radius: 6px;
            background: transparent;
            color: var(--text-secondary);
            padding: 7px 8px;
            text-align: left;
            font-size: 0.78rem;
            font-weight: 650;
            cursor: pointer;
        }
        .basket-collection-option:hover:not(:disabled) {
            background: var(--bg-subtle);
            color: var(--text-primary);
        }
        .basket-collection-option:disabled,
        .basket-collection-option.is-disabled {
            opacity: 0.46;
            cursor: not-allowed;
        }
        .basket-collection-divider {
            height: 1px;
            margin: 6px 0;
            background: var(--border-subtle);
        }
        .basket-collection-custom-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 6px;
            align-items: center;
        }
        .basket-collection-custom-input {
            min-width: 0;
            height: 32px;
            border: 1px solid var(--border-subtle);
            border-radius: 6px;
            background: var(--bg-subtle);
            color: var(--text-primary);
            padding: 0 8px;
            font-size: 0.78rem;
        }
        .basket-collection-custom-submit {
            min-height: 32px;
            border: 1px solid rgba(45, 212, 191, 0.4);
            border-radius: 6px;
            background: rgba(45, 212, 191, 0.12);
            color: rgba(204, 251, 241, 0.96);
            padding: 0 9px;
            font-size: 0.74rem;
            font-weight: 760;
            cursor: pointer;
        }
        .basket-collection-status {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 38px;
            padding: 6px 8px;
            color: var(--text-secondary);
            font-size: 0.78rem;
            font-weight: 650;
        }
        .basket-tag-empty {
            padding: 10px 8px;
            color: var(--text-muted);
            font-size: 0.78rem;
            font-weight: 650;
        }
        @media (max-width: 900px) {
            .basket-checkout-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
        @media (max-width: 640px) {
            .basket-checkout-header {
                display: flex;
                align-items: center;
                justify-content: stretch;
                flex-wrap: wrap;
                gap: 7px 8px;
                width: 100%;
                min-height: 38px;
                padding: 5px 0 0;
                overflow: visible;
                white-space: normal;
            }
            .basket-checkout-selection-actions {
                flex: 1 1 100%;
                flex-wrap: wrap;
                gap: 6px;
            }
            .basket-checkout-selected-actions {
                gap: 6px;
                margin-left: auto;
            }
            .basket-checkout-summary {
                justify-content: space-between;
                min-height: 20px;
                padding: 0 0 6px;
                font-size: 0.7rem;
                gap: 6px;
            }
            .basket-checkout-summary-text {
                gap: 6px;
            }
            .basket-checkout-select-all {
                flex: 0 0 auto;
                font-size: 0.74rem;
                gap: 6px;
            }
            .basket-checkout-select-all input {
                width: 15px;
                height: 15px;
            }
            .basket-checkout-delete-selected,
            .basket-checkout-download-all,
            .basket-checkout-download-selected,
            .basket-checkout-collect-selected,
            .basket-checkout-clear {
                min-height: 29px;
                padding: 0 9px;
                font-size: 0.68rem;
            }
            .basket-checkout-collect-selected {
                width: 30px;
                min-width: 30px;
                padding: 0;
            }
            .basket-checkout-grid {
                grid-template-columns: 1fr;
                gap: 7px;
            }
            .basket-checkout-row {
                grid-template-columns: 24px minmax(0, 1fr);
                align-items: start;
                position: relative;
                gap: 7px;
                min-height: 74px;
                padding: 6px 78px 6px 6px;
            }
            .basket-checkout-checkbox-wrap {
                width: 22px;
                height: 22px;
            }
            .basket-checkout-actions {
                position: absolute;
                top: 50%;
                right: 6px;
                transform: translateY(-50%);
                grid-column: auto;
                justify-content: flex-end;
                gap: 6px;
            }
            .basket-checkout-main {
                grid-template-columns: 42px minmax(0, 1fr);
                gap: 7px;
            }
            .basket-checkout-avatar {
                width: 42px;
                height: 56px;
            }
            .basket-checkout-copy {
                gap: 2px;
            }
            .basket-checkout-name {
                font-size: 0.82rem;
            }
            .basket-checkout-creator {
                font-size: 0.69rem;
            }
            .basket-checkout-meta {
                font-size: 0.67rem;
            }
            .basket-item-action-trigger.admin-dropdown-btn {
                width: 32px;
                min-width: 32px;
                height: 32px;
                min-height: 32px;
                padding: 0;
                border-radius: 999px;
                font-size: 0.9rem;
            }
            .basket-item-action-trigger .basket-action-label {
                display: none;
            }
        }
        .characters-sort-dropdown {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex: 0 0 auto;
            order: 90;
            min-width: 0;
        }
        .characters-sort-label {
            color: rgba(230, 234, 241, 0.72);
            text-transform: uppercase;
            font-size: 0.68rem;
            letter-spacing: 0.07em;
            font-weight: 700;
            line-height: 1;
            white-space: nowrap;
        }
        .characters-sort-btn.admin-dropdown-btn {
            width: 152px;
            min-width: 0;
            height: 32px;
            border-radius: 10px;
            border: 1px solid color-mix(in srgb, var(--brand-hot-pink) 34%, var(--border-subtle) 66%);
            background: linear-gradient(
                180deg,
                color-mix(in srgb, var(--bg-subtle) 84%, #1a1b23 16%),
                color-mix(in srgb, var(--bg-subtle) 94%, #0f1015 6%)
            );
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
            color: var(--text-primary);
            padding: 7px 30px 7px 10px;
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            line-height: 1.1;
            white-space: nowrap;
        }
        .characters-sort-btn.admin-dropdown-btn::after {
            border-top-color: rgba(235, 239, 246, 0.62);
            right: 11px;
            transform: translateY(-40%);
        }
        .characters-sort-btn.admin-dropdown-btn:focus,
        .characters-sort-btn.admin-dropdown-btn:focus-visible,
        .characters-sort-btn.admin-dropdown-btn:active {
            outline: none;
            border-color: color-mix(in srgb, var(--brand-hot-pink) 34%, var(--border-subtle) 66%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }
        .characters-sort-btn-text {
            display: inline-block;
            min-width: 0;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle;
        }
        .characters-sort-btn-icon {
            display: none;
            width: 19px;
            height: 19px;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            fill: none;
        }
        .characters-sort-btn-mobile-badge {
            display: none;
        }
        .characters-sort-dropdown .admin-dropdown-menu {
            left: auto;
            right: 0;
            min-width: 100%;
            border-radius: 10px;
            padding: 5px;
            z-index: 40;
        }
        .characters-sort-dropdown .admin-dropdown-menu button {
            font-size: 0.77rem;
            font-weight: 600;
            padding: 7px 8px;
        }
        .creators-sort-dropdown.characters-sort-dropdown {
            gap: 0;
            order: 0;
            position: relative;
            flex: 0 0 auto;
            width: 42px;
        }
        @media (min-width: 769px) {
            .creators-sort-dropdown.characters-sort-dropdown {
                transform: translateY(2px);
            }
        }
        .creators-sort-dropdown .characters-sort-label,
        .creators-sort-dropdown .characters-sort-btn-text {
            display: none;
        }
        .creators-sort-dropdown .characters-sort-btn.admin-dropdown-btn {
            position: relative;
            width: 42px;
            min-width: 42px;
            height: 38px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            color: var(--brand-hot-pink);
        }
        .creators-sort-dropdown .characters-sort-btn.admin-dropdown-btn:hover,
        .creators-sort-dropdown .characters-sort-btn.admin-dropdown-btn:focus,
        .creators-sort-dropdown .characters-sort-btn.admin-dropdown-btn:focus-visible,
        .creators-sort-dropdown .characters-sort-btn.admin-dropdown-btn:active {
            border: none;
            background: transparent;
            box-shadow: none;
            color: var(--brand-hot-pink);
            outline: none;
        }
        .creators-sort-dropdown .characters-sort-btn.admin-dropdown-btn::after {
            display: none;
        }
        .creators-sort-dropdown .characters-sort-btn-mobile-badge {
            display: block;
            position: absolute;
            left: 50%;
            top: -3px;
            transform: translateX(-50%);
            max-width: 46px;
            padding: 1px 4px;
            border: 1px solid color-mix(in srgb, var(--brand-hot-pink) 38%, transparent 62%);
            border-radius: 999px;
            background: color-mix(in srgb, var(--brand-hot-pink) 16%, rgba(12, 13, 18, 0.82) 84%);
            color: #fff;
            font-size: 0.49rem;
            font-weight: 850;
            line-height: 1;
            letter-spacing: 0;
            white-space: nowrap;
            text-align: center;
            pointer-events: none;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
        }
        .creators-sort-dropdown .characters-sort-btn-icon {
            display: block;
            width: 28px;
            height: 28px;
            stroke-width: 2.2;
        }
        .creators-sort-dropdown.characters-sort-dropdown .admin-dropdown-menu {
            min-width: 178px;
        }
        .characters-yours-dropdown {
            position: relative;
            display: inline-flex;
            align-items: center;
            min-width: 0;
            flex: 0 0 auto;
        }
        .characters-yours-dropdown .characters-toggle-btn.admin-dropdown-btn {
            min-height: var(--characters-toolbar-pill-min-height);
            min-width: auto;
            width: auto;
            border: none;
            padding: var(--characters-toolbar-pill-padding-y) 0.58rem;
            background: transparent;
            font-size: 0.75rem;
            line-height: 1;
            border-radius: var(--radius-full);
            color: var(--text-secondary);
        }
        .characters-yours-dropdown .characters-toggle-btn.admin-dropdown-btn::after {
            display: none;
        }
        .characters-yours-dropdown .characters-toggle-btn.admin-dropdown-btn.active {
            background: var(--accent-primary);
            color: var(--text-inverse);
        }
        .characters-yours-dropdown .characters-toggle-btn.admin-dropdown-btn:not(.active):hover {
            color: var(--text-primary);
        }
        .characters-yours-dropdown .admin-dropdown-menu {
            display: none !important;
        }
        .scope-vault-lock {
            position: relative;
            display: inline-block;
            width: 0.68em;
            height: 0.52em;
            flex: 0 0 auto;
            margin-right: 0.06em;
            border: 1.7px solid currentColor;
            border-radius: 2px;
            transform: translateY(1.5px);
        }
        .scope-vault-lock::before {
            content: '';
            position: absolute;
            left: 50%;
            bottom: calc(100% - 1px);
            width: 0.42em;
            height: 0.36em;
            border: 1.7px solid currentColor;
            border-bottom: 0;
            border-radius: 0.42em 0.42em 0 0;
            transform: translateX(-50%);
        }
        .scope-cart-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1em;
            flex: 0 0 auto;
            margin-right: 0.08em;
            font-size: 0.86em;
            line-height: 1;
            transform: translateY(0.5px);
        }
        .characters-toggle-btn[data-mode="vault"],
        .characters-toggle-btn[data-mode="basket"],
        .characters-scope-btn[data-mode="vault"],
        .characters-scope-btn[data-mode="basket"],
        .characters-scope-dropdown .admin-dropdown-menu button[data-mode="vault"],
        .characters-scope-dropdown .admin-dropdown-menu button[data-mode="basket"] {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.16rem;
        }
        .characters-scope-dropdown .admin-dropdown-menu button[data-mode="vault"],
        .characters-scope-dropdown .admin-dropdown-menu button[data-mode="basket"] {
            justify-content: flex-start;
        }
        .characters-scope-dropdown {
            display: none;
            order: 70;
        }
        .characters-scope-btn.admin-dropdown-btn {
            height: auto;
            min-height: var(--characters-toolbar-pill-min-height);
            min-width: 78px;
            border-radius: var(--radius-full);
            padding: var(--characters-toolbar-pill-padding-y) 1.45rem var(--characters-toolbar-pill-padding-y) 0.62rem;
            font-size: 0.75rem;
            font-weight: 700;
            line-height: 1;
            color: var(--text-primary);
        }
        .characters-scope-dropdown .admin-dropdown-menu {
            left: 0;
            right: auto;
            min-width: 126px;
            z-index: 45;
        }
        .characters-scope-dropdown .admin-dropdown-menu button.active {
            color: var(--text-primary);
            font-weight: 700;
        }
        .characters-scope-btn.admin-dropdown-btn[data-mode="vault"] {
            border-color: color-mix(in srgb, #facc15 72%, var(--border-subtle) 28%);
            background:
                linear-gradient(180deg, rgba(250, 204, 21, 0.98), rgba(234, 179, 8, 0.94)),
                #facc15;
            color: #241600;
            box-shadow: 0 7px 16px rgba(250, 204, 21, 0.22);
        }
        .characters-scope-btn.admin-dropdown-btn[data-mode="vault"]::after {
            border-top-color: #241600;
        }
        .characters-vault-upload-pill {
            display: none;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            order: 65;
            min-height: var(--characters-toolbar-pill-min-height);
            padding: var(--characters-toolbar-pill-padding-y) 0.55rem;
            border: 1px solid color-mix(in srgb, #facc15 72%, var(--border-subtle) 28%);
            border-radius: 8px;
            background:
                linear-gradient(180deg, rgba(250, 204, 21, 0.98), rgba(234, 179, 8, 0.94)),
                #facc15;
            color: #241600;
            font-size: 0.78rem;
            font-weight: 900;
            line-height: 1;
            text-transform: uppercase;
            text-decoration: none;
            white-space: nowrap;
            box-shadow: 0 7px 16px rgba(250, 204, 21, 0.2);
            transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
        }
        body.characters-mode-vault .characters-vault-upload-pill {
            display: inline-flex;
            margin-left: auto;
        }
        body.characters-mode-vault .characters-toggle,
        body.characters-mode-vault .characters-scope-dropdown {
            margin-left: 0;
        }
        .characters-vault-upload-pill:hover,
        .characters-vault-upload-pill:focus-visible {
            border-color: #fde047;
            background:
                linear-gradient(180deg, rgba(253, 224, 71, 1), rgba(250, 204, 21, 0.96)),
                #fde047;
            color: #1f1300;
            box-shadow: 0 8px 18px rgba(250, 204, 21, 0.26);
            outline: none;
        }
        .characters-vault-upload-pill:active {
            transform: translateY(1px);
        }
        .mine-folder-system-badge {
            display: inline-flex;
            align-items: center;
            height: 16px;
            margin-left: 8px;
            padding: 0 6px;
            border-radius: 999px;
            border: 1px solid var(--border-subtle);
            color: var(--text-muted);
            font-size: 0.58rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            vertical-align: middle;
        }
        .characters-refresh-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            padding: 0;
        }
        .characters-refresh-btn svg {
            width: 18px;
            height: 18px;
            fill: currentColor;
        }
        .characters-search-trigger {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            min-height: 38px;
            padding: 0.48rem 0.78rem;
            border: 1px solid var(--border-default);
            border-radius: var(--radius-full);
            background: var(--bg-subtle);
            color: var(--text-primary);
            font-size: 0.8rem;
            font-weight: 800;
            letter-spacing: 0.01em;
            cursor: pointer;
            transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
        }
        .characters-search-trigger:hover,
        .characters-search-trigger.is-open,
        .characters-search-trigger.is-active {
            border-color: rgba(255, 255, 255, 0.24);
            background: rgba(255, 255, 255, 0.1);
        }
        .characters-search-trigger.is-active {
            color: var(--accent-primary);
        }
        .characters-search-trigger-icon {
            position: relative;
            display: inline-block;
            width: 1.15rem;
            height: 1.15rem;
            line-height: 1;
        }
        .characters-search-trigger-count {
            display: none;
        }
        .characters-search-trigger-icon::before,
        .characters-search-btn::before {
            content: "";
            position: absolute;
            width: 0.72em;
            height: 0.72em;
            border: 2px solid currentColor;
            border-radius: 999px;
            box-sizing: border-box;
        }
        .characters-search-trigger-icon::after,
        .characters-search-btn::after {
            content: "";
            position: absolute;
            width: 0.42em;
            height: 2px;
            border-radius: 999px;
            background: currentColor;
            transform: rotate(45deg);
            transform-origin: center;
        }
        .characters-search-trigger-icon::before {
            left: 0.08rem;
            top: 0.06rem;
        }
        .characters-search-trigger-icon::after {
            left: 0.72rem;
            top: 0.77rem;
        }
        .characters-search {
            flex: 1 1 22rem;
            position: relative;
            min-width: 0;
            max-width: none;
        }
        .characters-search input {
            width: 100%;
            padding: 0.625rem var(--space-4);
            padding-left: 2.15rem;
            padding-right: 7.75rem;
            background: var(--bg-subtle);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-md);
            color: var(--text-primary);
            font-size: 0.875rem;
            transition: border-color var(--transition-fast);
        }
        .characters-search input:focus {
            outline: none;
            border-color: var(--accent-primary);
        }
        .characters-search input::-webkit-search-cancel-button,
        .characters-search input::-webkit-search-decoration {
            -webkit-appearance: none;
            appearance: none;
            display: none;
        }
        .characters-search::before {
            content: '';
            position: absolute;
            left: 0.72rem;
            top: 50%;
            width: 0.82rem;
            height: 0.82rem;
            transform: translateY(-50%);
            border: 2px solid currentColor;
            border-radius: 999px;
            box-sizing: border-box;
            opacity: 0.5;
            pointer-events: none;
        }
        .characters-search::after {
            content: '';
            position: absolute;
            left: 1.31rem;
            top: calc(50% + 0.25rem);
            width: 0.42rem;
            height: 2px;
            border-radius: 999px;
            background: currentColor;
            opacity: 0.5;
            transform: rotate(45deg);
            transform-origin: center;
            pointer-events: none;
        }
        .characters-search-clear-btn {
            position: absolute;
            right: 4.74rem;
            top: 50%;
            transform: translateY(-50%);
            width: 2.15rem;
            height: 2.15rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 0;
            background: transparent;
            color: rgba(255, 255, 255, 0.88);
            font-size: 1.68rem;
            font-weight: 800;
            line-height: 1;
            cursor: pointer;
            opacity: 0;
            pointer-events: none;
            transition: color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
        }
        .characters-search.has-clear .characters-search-clear-btn {
            opacity: 1;
            pointer-events: auto;
        }
        .characters-search-clear-btn:hover {
            color: #fff;
        }
        .characters-search-clear-btn:active {
            transform: translateY(-50%) scale(0.96);
        }
        .characters-search-btn {
            position: absolute;
            right: 0.34rem;
            top: 50%;
            transform: translateY(-50%);
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: calc(var(--radius-md) - 3px);
            background: var(--accent-primary);
            color: #fff;
            font-size: 0.75rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            padding: 0.38rem 0.72rem;
            cursor: pointer;
            transition: filter var(--transition-fast), transform var(--transition-fast);
        }
        .characters-search-btn:hover {
            filter: brightness(1.08);
        }
        .characters-search-btn:active {
            transform: translateY(-50%) scale(0.98);
        }
        .characters-search-btn::before,
        .characters-search-btn::after {
            display: none;
        }
        @media (min-width: 769px) {
            @container characters-main-pane (max-width: 1040px) {
                .characters-toolbar-row {
                    gap: 8px;
                }
                .characters-search {
                    flex: 1 1 16rem;
                    max-width: none;
                }
                .characters-search input {
                    min-height: 38px;
                    padding-left: 2.05rem;
                    padding-right: 4.9rem;
                }
                .characters-search-clear-btn {
                    right: 2.32rem;
                }
                .characters-search-btn {
                    right: 0.28rem;
                    width: 2.08rem;
                    height: 2.08rem;
                    padding: 0;
                    font-size: 0;
                }
                .characters-search-btn::before {
                    display: block;
                    left: 0.55rem;
                    top: 0.46rem;
                    font-size: 1rem;
                }
                .characters-search-btn::after {
                    display: block;
                    left: 1.16rem;
                    top: 1.19rem;
                    font-size: 1rem;
                }
                .characters-scope-btn.admin-dropdown-btn {
                    width: auto;
                    min-width: 58px;
                    height: auto;
                    min-height: var(--characters-toolbar-pill-min-height);
                    border-radius: 999px;
                    border: 1px solid color-mix(in srgb, var(--brand-hot-pink) 82%, var(--border-subtle) 18%);
                    background: var(--brand-hot-pink);
                    color: #fff;
                    padding: var(--characters-toolbar-pill-padding-y) 1.35rem var(--characters-toolbar-pill-padding-y) 0.55rem;
                    font-size: 0.6875rem;
                    font-weight: 750;
                    line-height: 1;
                    letter-spacing: 0.02em;
                    text-align: left;
                    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 6px 18px color-mix(in srgb, var(--brand-hot-pink) 24%, transparent);
                }
                .characters-scope-btn.admin-dropdown-btn[data-mode="vault"] {
                    border-color: color-mix(in srgb, #facc15 72%, var(--border-subtle) 28%);
                    background:
                        linear-gradient(180deg, rgba(250, 204, 21, 0.98), rgba(234, 179, 8, 0.94)),
                        #facc15;
                    color: #241600;
                    box-shadow: 0 7px 16px rgba(250, 204, 21, 0.22);
                }
                .characters-scope-btn.admin-dropdown-btn::after {
                    right: 8px;
                    border-left-width: 3px;
                    border-right-width: 3px;
                    border-top-width: 5px;
                    border-top-color: #fff;
                }
                .characters-vault-upload-pill {
                    order: 65;
                    min-height: var(--characters-toolbar-pill-min-height);
                    padding: var(--characters-toolbar-pill-padding-y) 0.5rem;
                    border-radius: 7px;
                    font-size: 0.72rem;
                }
                .characters-scope-dropdown .admin-dropdown-menu {
                    left: 0;
                    right: auto;
                    min-width: 128px;
                }
                .characters-sort-dropdown {
                    gap: 0;
                    order: 90;
                    position: relative;
                }
                .characters-sort-label {
                    display: none;
                }
                .characters-sort-btn.admin-dropdown-btn {
                    position: relative;
                    width: 42px;
                    min-width: 42px;
                    height: 38px;
                    padding: 0;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    border: none;
                    border-radius: 0;
                    background: transparent;
                    box-shadow: none;
                    color: var(--brand-hot-pink);
                }
                .characters-sort-btn.admin-dropdown-btn:hover,
                .characters-sort-btn.admin-dropdown-btn:focus,
                .characters-sort-btn.admin-dropdown-btn:focus-visible,
                .characters-sort-btn.admin-dropdown-btn:active {
                    border: none;
                    background: transparent;
                    box-shadow: none;
                    color: var(--brand-hot-pink);
                }
                .characters-sort-btn.admin-dropdown-btn::after {
                    display: none;
                }
                .characters-sort-btn-text {
                    display: none;
                }
                .characters-sort-btn-mobile-badge {
                    display: block;
                    position: absolute;
                    left: 50%;
                    top: -3px;
                    transform: translateX(-50%);
                    max-width: 46px;
                    padding: 1px 4px;
                    border: 1px solid color-mix(in srgb, var(--brand-hot-pink) 38%, transparent 62%);
                    border-radius: 999px;
                    background: color-mix(in srgb, var(--brand-hot-pink) 16%, rgba(12, 13, 18, 0.82) 84%);
                    color: #fff;
                    font-size: 0.49rem;
                    font-weight: 850;
                    line-height: 1;
                    letter-spacing: 0;
                    white-space: nowrap;
                    text-align: center;
                    pointer-events: none;
                    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
                }
                .characters-sort-btn-icon {
                    display: block;
                    width: 28px;
                    height: 28px;
                    stroke-width: 2.2;
                }
                .characters-sort-dropdown .admin-dropdown-menu {
                    min-width: 178px;
                }
            }
            @container characters-main-pane (max-width: 760px) {
                .characters-toolbar-row {
                    flex-wrap: nowrap;
                    position: relative;
                    gap: 6px;
                }
                .characters-search {
                    order: -10;
                    flex: 1 1 9.5rem;
                    min-width: 7.5rem;
                    max-width: none;
                }
                .characters-toggle {
                    display: none;
                }
                .characters-scope-dropdown {
                    display: inline-flex;
                    order: 70;
                    flex: 0 0 auto;
                    position: relative;
                    margin-left: auto;
                }
                .characters-sort-dropdown {
                    margin-left: 0;
                }
                .characters-toolbar .tag-filter-chips {
                    justify-content: flex-start;
                }
            }
        }
        @media (max-width: 768px) {
            .taxonomy-discussion-toggle {
                min-height: 30px;
                padding: 0.38rem 0.56rem;
                font-size: 0.76rem;
            }
            .taxonomy-discussion-drawer {
                width: min(100vw, 430px);
            }
            .taxonomy-discussion-head {
                padding: calc(env(safe-area-inset-top) + 0.78rem) 0.9rem 0.66rem;
            }
            .taxonomy-buzz-head-avatar {
                width: 38px;
                height: 38px;
                flex-basis: 38px;
                border-radius: 10px;
            }
            .taxonomy-buzz-gifts {
                padding: 0.58rem 0.86rem;
                gap: 0.5rem;
            }
            .taxonomy-buzz-gift-send {
                padding-inline: 0.58rem;
            }
            .taxonomy-buzz-gift-modal {
                left: 0.72rem;
                right: 0.72rem;
                max-height: min(82vh, 720px);
            }
            .taxonomy-buzz-gift-grid {
                grid-template-columns: minmax(0, 1fr);
            }
            .taxonomy-discussion-list {
                padding: 0.72rem 0.86rem;
            }
            .taxonomy-discussion-compose {
                padding: 0.72rem 0.86rem calc(env(safe-area-inset-bottom) + 0.82rem);
            }
            .characters-toolbar {
                position: fixed !important;
                top: calc(var(--characters-toolbar-offset) + var(--characters-mobile-toolbar-top-nudge));
                left: 0;
                right: 0;
                z-index: 50;
                padding: 2px calc(1rem + 14px) 6px;
                box-sizing: border-box;
            }
            .view-characters {
                padding-top: max(0px, calc(var(--characters-mobile-toolbar-height) - 10px));
            }
            body.taxonomy-view-active .mobile-scroll-container > .container {
                width: 100%;
                max-width: none;
                margin-left: 0;
                margin-right: 0;
                padding-left: 0;
                padding-right: 0;
                border-radius: 0;
            }
            body.taxonomy-view-active #viewTaxonomy.view-taxonomy.active {
                width: 100%;
                margin-left: 0;
                margin-right: 0;
            }
            .view-taxonomy.tagverse-home-active {
                padding-top: 0;
            }
            .view-taxonomy .tagverse-layout {
                display: block;
                height: auto;
                min-height: 0;
            }
            .view-taxonomy .tag-sidebar {
                display: none;
            }
            .view-taxonomy .tagverse-main-pane {
                display: block;
                height: auto;
                min-height: 0;
            }
            .taxonomy-definition-card {
                display: block;
                --taxonomy-header-overlay-top: 0px;
                flex: none;
                height: auto;
                max-height: none;
                min-height: 0;
                overflow: visible;
                background: transparent;
            }
            .taxonomy-definition-card::before {
                display: none;
            }
            .taxonomy-article-hero {
                position: fixed;
                top: calc(var(--characters-toolbar-offset) + var(--characters-mobile-toolbar-top-nudge) - 6px);
                left: 0;
                right: 0;
                z-index: 50;
                padding: 0.28rem 15px 0.26rem;
                box-sizing: border-box;
            }
            .taxonomy-article-title-row {
                grid-template-columns: 1fr;
                align-items: start;
                margin-top: 0;
            }
            .taxonomy-title-line {
                gap: 0.32rem;
            }
            .taxonomy-title-copy {
                flex: 1 1 auto;
                min-width: 0;
                flex-wrap: nowrap;
                gap: 0.38rem;
            }
            .taxonomy-article-title {
                min-width: 0;
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow-wrap: normal;
            }
            .taxonomy-title-actions {
                gap: 0.14rem;
            }
            .taxonomy-title-back-btn {
                width: 1.8rem;
                height: 1.8rem;
            }
            .taxonomy-title-back-icon {
                width: 1.3rem;
                height: 1.3rem;
            }
            .taxonomy-meta-scrim {
                inset: 0;
                z-index: 2;
            }
            .taxonomy-meta-grid {
                z-index: 51;
            }
            .view-taxonomy .tag-drawer-toggle,
            .taxonomy-discussion-toggle:not(.entity-discussion-btn) {
                width: 2rem;
                height: 2rem;
                min-height: 2rem;
                padding: 0;
                justify-content: center;
            }
            .view-taxonomy .tag-drawer-toggle {
                min-width: 2rem;
                border-color: transparent;
                background: transparent;
                box-shadow: none;
                color: #5eead4;
            }
            .view-taxonomy .tag-drawer-toggle:hover,
            .view-taxonomy .tag-drawer-toggle.has-active-filters {
                border-color: transparent;
                background: transparent;
                color: #d9fff8;
            }
            .view-taxonomy .tag-drawer-toggle-label,
            .taxonomy-discussion-toggle:not(.entity-discussion-btn) .taxonomy-discussion-toggle-label {
                display: none;
            }
            .tag-drawer-toggle-icon,
            .taxonomy-discussion-toggle:not(.entity-discussion-btn) .taxonomy-discussion-toggle-icon {
                display: block;
            }
            .taxonomy-discussion-count-badge {
                display: inline-flex;
                position: absolute;
                top: -0.18rem;
                right: -0.18rem;
            }
            .taxonomy-section-stack {
                --taxonomy-heading-body-gap: 0.12rem;
                --taxonomy-body-font-size: 0.88rem;
                --taxonomy-body-line-height: 1.5;
                --taxonomy-paragraph-gap: 0.46rem;
                padding: 1.15rem 5px 0.9rem;
            }
            .taxonomy-section {
                padding-top: 0.5rem;
                margin-top: 0.7rem;
            }
            .taxonomy-section--inline {
                padding-top: 0.16rem;
                margin-top: 0.36rem;
            }
            .taxonomy-section--inline:first-child {
                padding-top: 0;
            }
            .taxonomy-section h2 {
                margin-top: 0.1rem;
                margin-bottom: var(--taxonomy-heading-body-gap);
            }
            .taxonomy-section--inline h2:not(:first-of-type) {
                margin-top: 0.9rem;
            }
            .taxonomy-attention-grabber {
                padding-top: 0;
                padding-bottom: 0.34rem;
                margin-top: -0.65rem;
            }
            .taxonomy-character-rail {
                margin: 0.34rem 0 0.62rem;
                padding: 0.48rem;
                border-radius: 14px;
            }
            .taxonomy-character-rail-head {
                margin-bottom: 0.42rem;
            }
            .taxonomy-empty-definition {
                align-items: flex-start;
                flex-direction: column;
                gap: 0.58rem;
                padding: 0.78rem;
            }
            .taxonomy-character-rail-track {
                grid-auto-columns: minmax(76px, 88px);
                gap: 0.42rem;
                padding-bottom: 0.12rem;
            }
            .taxonomy-character-rail-name {
                font-size: 0.63rem;
            }
            .tagverse-home {
                --tagverse-home-toolbar-nudge: -70px;
                --tagverse-home-toolbar-sticky-top: calc(4rem + var(--space-1) + var(--tagverse-home-toolbar-nudge));
                padding: 0 0 1.2rem;
            }
            .tagverse-home-toolbar {
                top: var(--tagverse-home-toolbar-sticky-top);
                margin-top: var(--tagverse-home-toolbar-nudge);
                width: calc(100% - 10px);
                margin-bottom: 0.62rem;
                padding: 0.46rem 0.48rem 0.52rem;
                border-radius: 15px;
            }
            .tagverse-home-hero h1 {
                font-size: clamp(1.58rem, 9.4vw, 2.45rem);
            }
            .tagverse-home-controls {
                gap: 0.28rem;
            }
            .tagverse-home-filter-wrap {
                flex-basis: 0;
                min-width: 0;
            }
            .tagverse-home-controls .tag-filter-input {
                height: 1.9rem;
                min-height: 1.9rem;
                padding: 0.08rem 0.42rem;
                font-size: 0.91rem;
                line-height: 1.1;
            }
            .tagverse-home-controls .taxonomy-sort-toggle button {
                width: 1.91rem;
                height: 1.59rem;
            }
            .tagverse-home-controls .taxonomy-sort-glyph {
                width: 0.95rem;
            }
            .tagverse-home-controls .taxonomy-sort-glyph svg {
                width: 0.84rem;
                height: 0.84rem;
            }
            .tagverse-home-controls .taxonomy-sort-token {
                font-size: 0.67rem;
            }
            .tagverse-home-options-toggle {
                width: 1.38rem;
                height: 2.05rem;
                font-size: 1.28rem;
            }
            .tagverse-home-cloud {
                gap: 0.36rem;
                max-width: none;
                margin-top: 70px;
            }
            .tagverse-home-cloud-item {
                font-size: calc(0.62rem * var(--scale));
            }
            .tagverse-home-categories {
                gap: 0.42rem;
                max-width: none;
                margin-top: 70px;
            }
            .tagverse-home-category {
                padding: 0.38rem 0.42rem;
            }
            .tagverse-home-category-item {
                font-size: calc(0.62rem * var(--scale));
            }
            .view-fresh {
                padding-top: 0;
            }
            .characters-toolbar-row {
                flex-wrap: nowrap;
                position: relative;
                gap: 6px;
            }
            .characters-search-trigger {
                display: none;
            }
            .characters-search {
                order: -10;
                flex: 1 1 9.5rem;
                min-width: 7.5rem;
                max-width: none;
            }
            .characters-search input {
                min-height: 38px;
                padding-left: 2.05rem;
                padding-right: 4.9rem;
            }
            .characters-search::before {
                left: 0.72rem;
                z-index: 1;
            }
            .characters-search::after {
                z-index: 1;
            }
            .characters-search-clear-btn {
                right: 2.32rem;
            }
            .characters-search-btn {
                right: 0.28rem;
                width: 2.08rem;
                height: 2.08rem;
                padding: 0;
                font-size: 0;
            }
            .characters-search-btn::before {
                display: block;
                left: 0.55rem;
                top: 0.46rem;
                font-size: 1rem;
            }
            .characters-search-btn::after {
                display: block;
                left: 1.16rem;
                top: 1.19rem;
                font-size: 1rem;
            }
            .characters-toggle {
                display: none;
            }
            .characters-scope-dropdown {
                display: inline-flex;
                order: 70;
                flex: 0 0 auto;
                position: relative;
                margin-left: auto;
            }
            .characters-scope-btn.admin-dropdown-btn {
                width: auto;
                min-width: 58px;
                height: auto;
                min-height: var(--characters-toolbar-pill-min-height);
                border-radius: 999px;
                border: 1px solid color-mix(in srgb, var(--brand-hot-pink) 82%, var(--border-subtle) 18%);
                background: var(--brand-hot-pink);
                color: #fff;
                padding: var(--characters-toolbar-pill-padding-y) 1.35rem var(--characters-toolbar-pill-padding-y) 0.55rem;
                font-size: 0.6875rem;
                font-weight: 750;
                line-height: 1;
                letter-spacing: 0.02em;
                text-align: left;
                box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 6px 18px color-mix(in srgb, var(--brand-hot-pink) 24%, transparent);
            }
            .characters-scope-btn.admin-dropdown-btn[data-mode="vault"] {
                border-color: color-mix(in srgb, #facc15 72%, var(--border-subtle) 28%);
                background:
                    linear-gradient(180deg, rgba(250, 204, 21, 0.98), rgba(234, 179, 8, 0.94)),
                    #facc15;
                color: #241600;
                box-shadow: 0 7px 16px rgba(250, 204, 21, 0.22);
            }
            .characters-scope-btn.admin-dropdown-btn::after {
                right: 8px;
                border-left-width: 3px;
                border-right-width: 3px;
                border-top-width: 5px;
                border-top-color: #fff;
            }
            .characters-toolbar-row > .tag-drawer-toggle {
                order: -9;
            }
            .characters-vault-upload-pill {
                order: 65;
                min-height: var(--characters-toolbar-pill-min-height);
                padding: var(--characters-toolbar-pill-padding-y) 0.5rem;
                border-radius: 7px;
                font-size: 0.72rem;
            }
            .characters-scope-dropdown .admin-dropdown-menu {
                left: 0;
                right: auto;
                min-width: 128px;
            }
            .characters-sort-dropdown {
                gap: 0;
                order: 90;
                position: relative;
            }
            .characters-sort-label {
                display: none;
            }
            .characters-sort-btn.admin-dropdown-btn {
                position: relative;
                width: 42px;
                min-width: 42px;
                height: 38px;
                padding: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border: none;
                border-radius: 0;
                background: transparent;
                box-shadow: none;
                color: var(--brand-hot-pink);
            }
            .characters-sort-btn.admin-dropdown-btn:hover,
            .characters-sort-btn.admin-dropdown-btn:focus,
            .characters-sort-btn.admin-dropdown-btn:focus-visible,
            .characters-sort-btn.admin-dropdown-btn:active {
                border: none;
                background: transparent;
                box-shadow: none;
                color: var(--brand-hot-pink);
            }
            .characters-sort-btn.admin-dropdown-btn::after {
                display: none;
            }
            .characters-sort-btn-text {
                display: none;
            }
            .characters-sort-btn-mobile-badge {
                display: block;
                position: absolute;
                left: 50%;
                top: -3px;
                transform: translateX(-50%);
                max-width: 46px;
                padding: 1px 4px;
                border: 1px solid color-mix(in srgb, var(--brand-hot-pink) 38%, transparent 62%);
                border-radius: 999px;
                background: color-mix(in srgb, var(--brand-hot-pink) 16%, rgba(12, 13, 18, 0.82) 84%);
                color: #fff;
                font-size: 0.49rem;
                font-weight: 850;
                line-height: 1;
                letter-spacing: 0;
                white-space: nowrap;
                text-align: center;
                pointer-events: none;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
            }
            .characters-sort-btn-icon {
                display: block;
                width: 28px;
                height: 28px;
                stroke-width: 2.2;
            }
            .characters-sort-dropdown .admin-dropdown-menu {
                min-width: 178px;
            }
            body.characters-mode-basket .characters-toolbar-row {
                flex-wrap: nowrap;
                gap: 6px;
            }
            body.characters-mode-basket .characters-renderer-debug-badge {
                order: -9;
            }
            body.characters-mode-basket .characters-scope-dropdown {
                margin-left: auto;
            }
            body.characters-mode-basket .characters-sort-dropdown {
                margin-left: 0;
            }
            @media (max-width: 480px) {
                .characters-search-trigger {
                    display: inline-flex;
                    position: relative;
                    order: -10;
                    flex: 0 0 auto;
                    width: 40px;
                    min-height: 38px;
                    padding: 0;
                    border: none;
                    border-radius: 0;
                    background: transparent;
                    color: var(--text-primary);
                }
                .characters-search-trigger:hover,
                .characters-search-trigger.is-open,
                .characters-search-trigger.is-active {
                    border-color: transparent;
                    background: transparent;
                }
                .characters-search-trigger-icon {
                    width: 1.42rem;
                    height: 1.42rem;
                }
                .characters-search-trigger-icon::before {
                    width: 0.92rem;
                    height: 0.92rem;
                    left: 0.08rem;
                    top: 0.05rem;
                }
                .characters-search-trigger-icon::after {
                    width: 0.52rem;
                    left: 0.86rem;
                    top: 0.94rem;
                }
                .characters-search-trigger-count:not([hidden]) {
                    display: block;
                    position: absolute;
                    left: 50%;
                    top: -3px;
                    transform: translateX(-50%);
                    max-width: 40px;
                    padding: 1px 4px;
                    border: 1px solid color-mix(in srgb, var(--accent-primary) 34%, transparent 66%);
                    border-radius: 999px;
                    background: color-mix(in srgb, var(--accent-primary) 18%, rgba(12, 13, 18, 0.84) 82%);
                    color: #fff;
                    font-size: 0.48rem;
                    font-weight: 850;
                    line-height: 1;
                    letter-spacing: 0;
                    white-space: nowrap;
                    text-align: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    pointer-events: none;
                    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
                }
                .characters-search-trigger-count.is-loading:not([hidden]) {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    width: 16px;
                    height: 16px;
                    min-width: 16px;
                    padding: 0;
                    font-size: 0;
                }
                .characters-search-trigger-count.is-loading::before {
                    content: "";
                    width: 8px;
                    height: 8px;
                    border: 1.5px solid currentColor;
                    border-right-color: transparent;
                    border-radius: 50%;
                    animation: tagLoadingSpin 650ms linear infinite;
                }
                .characters-search-trigger-label {
                    display: none;
                }
                .characters-search {
                    display: none;
                    position: absolute;
                    top: calc(100% + 8px);
                    left: 0;
                    right: 0;
                    z-index: 65;
                    flex: none;
                    padding: 8px;
                    border: 1px solid rgba(255, 255, 255, 0.12);
                    border-radius: var(--radius-lg);
                    background:
                        radial-gradient(circle at 18% 0%, rgba(45, 212, 191, 0.08), transparent 14rem),
                        linear-gradient(180deg, rgba(24, 24, 26, 0.99), rgba(14, 14, 16, 0.98));
                    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
                    backdrop-filter: none;
                    -webkit-backdrop-filter: none;
                }
                .characters-search.is-open {
                    display: block;
                }
                .characters-search input {
                    min-height: 42px;
                    padding-left: 2.28rem;
                }
                .characters-search::before {
                    left: 1.42rem;
                }
                .characters-search::after {
                    left: 2.01rem;
                }
                .characters-search-clear-btn {
                    right: calc(8px + 2.32rem);
                }
                .characters-search-btn {
                    right: calc(8px + 0.28rem);
                }
            }
            .creators-toolbar {
                position: fixed !important;
                top: calc(var(--characters-toolbar-offset) + var(--characters-mobile-toolbar-top-nudge));
                left: 0;
                right: 0;
                z-index: 50;
                display: flex;
                align-items: center;
                gap: 6px;
                padding: 2px calc(1rem + 14px) 6px;
                box-sizing: border-box;
                background: transparent;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                border-bottom: 0;
                box-shadow: none;
            }
            .view-creators {
                padding-top: 46px;
                padding-bottom: 12px;
            }
            .creators-page {
                max-width: 100%;
            }
            .creators-summary {
                justify-content: flex-start;
                min-height: var(--characters-toolbar-pill-min-height);
                min-width: 0;
                flex: 0 1 auto;
            }
            .creators-summary-hero {
                align-items: center;
                justify-content: flex-start;
                flex-direction: row;
                text-align: left;
                padding-top: 0;
                gap: 6px;
            }
            .creators-summary-title-wrap {
                gap: 6px;
                align-items: center;
                flex-direction: row;
            }
            .creators-section-tabs {
                gap: 2px;
                padding: 1px;
            }
            .creators-section-tab {
                min-height: var(--characters-toolbar-pill-min-height);
                font-size: calc(0.75rem + 1pt);
                padding: var(--characters-toolbar-pill-padding-y) 0.58rem;
            }
            .creators-summary-total-badge {
                display: none;
            }
            .creators-summary-updated {
                display: none;
            }
            .creators-source-tabs {
                margin-top: 0;
                gap: 4px;
                padding: 3px;
                align-self: flex-start;
            }
            .creators-source-tab {
                padding: 5px 8px;
                font-size: 0.68rem;
                gap: 5px;
            }
            .creators-source-tab-count {
                min-width: 1.34rem;
                padding: 2px 4px;
            }
            .creators-toolbar-source-tabs .creators-source-tabs {
                display: none;
            }
            .creators-toolbar-source-tabs .creators-source-dropdown.creators-mobile-dropdown.admin-dropdown {
                display: inline-flex;
                align-items: center;
            }
            .creators-directory-source-summary {
                display: none;
            }
            .creators-directory-source-summary span {
                min-height: 24px;
                padding: 0 8px;
                font-size: 0.62rem;
            }
            .creators-controls {
                width: auto;
                justify-content: flex-end;
                align-self: center;
            }
            .creators-controls.creators-controls-mobile {
                width: auto;
                max-width: none;
                display: inline-flex;
                flex-direction: row;
                align-items: flex-end;
                justify-content: flex-end;
                gap: 6px;
                margin: 0 0 0 auto;
                align-self: center;
            }
            .creators-toolbar-source-tabs {
                align-self: center;
                margin-left: -4px;
            }
            .creators-controls.creators-controls-mobile.is-tagless {
                justify-content: flex-end;
            }
            .creators-mobile-sort-row {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: 6px;
                width: auto;
            }
            .creators-mobile-sort-row .creators-mobile-dropdown.admin-dropdown:not(.creators-sort-dropdown) {
                flex: 0 0 auto;
                width: 90px;
            }
            .creators-toolbar-source-tabs .creators-mobile-dropdown.admin-dropdown:not(.creators-sort-dropdown) {
                flex: 0 0 auto;
                width: 88px;
            }
            .creators-toolbar-source-tabs .creators-source-dropdown .creators-source-dropdown-btn.admin-dropdown-btn {
                display: inline-flex;
                align-items: center;
                justify-content: flex-start;
                height: var(--characters-toolbar-pill-min-height);
                min-height: var(--characters-toolbar-pill-min-height);
                border-radius: 999px;
                font-size: 0.7rem;
                line-height: 1;
                padding: 0 17px 0 9px;
                box-sizing: border-box;
            }
            .creators-toolbar-source-tabs .creators-source-dropdown .creators-source-dropdown-btn.admin-dropdown-btn::after {
                right: 7px;
            }
            .creators-toolbar-source-tabs .creators-source-dropdown .admin-dropdown-menu {
                left: 50%;
                right: auto;
                width: max-content;
                min-width: 150px;
                transform: translateX(-50%);
            }
            .creators-mobile-dropdown:not(.creators-sort-dropdown) .admin-dropdown-menu {
                border-radius: 14px;
            }
            .creators-toolbar-source-tabs .creators-source-dropdown .admin-dropdown-menu button {
                gap: 12px;
                min-height: 38px;
                padding: 9px 12px;
            }
            .creators-sort-dropdown.characters-sort-dropdown {
                transform: translateY(4px);
            }
            .creators-sort-dir-toggle {
                min-height: 38px;
                font-size: 0.97rem;
                padding: 0 3px;
            }
            #creatorsTagDrawerToggle.creators-tag-filter-btn {
                height: auto;
                min-height: var(--characters-toolbar-pill-min-height);
                min-width: 0;
                align-self: center;
                padding: var(--characters-toolbar-pill-padding-y) 0.5rem;
                border: 0;
                border-radius: 4px;
                background: transparent;
                box-shadow: none;
                color: var(--brand-hot-pink);
                font-size: 0.72rem;
                font-weight: 700;
                letter-spacing: 0.01em;
                line-height: 1;
                text-decoration: none;
                white-space: nowrap;
            }
            #creatorsTagDrawerToggle.creators-tag-filter-btn:hover,
            #creatorsTagDrawerToggle.creators-tag-filter-btn:focus-visible,
            #creatorsTagDrawerToggle.creators-tag-filter-btn.has-active-filters {
                background: transparent;
                border: 0;
                color: color-mix(in srgb, var(--brand-hot-pink) 78%, white 22%);
                outline: none;
            }
            .creators-page .tag-filter-chips {
                justify-content: flex-end;
                margin: -9px 0 5px;
            }
            .creators-page #creatorsTagFilterChips:not(.has-filters) + #creatorsList {
                margin-top: -6px;
            }
            .creators-directory-grid {
                grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
                gap: 8px;
            }
            .creators-directory-card {
                min-height: 226px;
            }
            .creators-directory-card-source {
                top: 8px;
                left: 8px;
                min-height: 20px;
                max-width: calc(100% - 16px);
                padding: 0 7px;
                font-size: 0.56rem;
            }
            .creators-directory-rank-badge {
                min-height: 15px;
                padding: 1px 4px 1px 2px;
                font-size: 0.48rem;
            }
            .creators-directory-rank-badge i {
                width: 11px;
                height: 11px;
                font-size: 0.42rem;
            }
            .creators-directory-card-copy {
                gap: 4px;
                padding: 10px 10px 7px;
            }
            .creators-directory-specialty-row {
                margin-top: -3px;
            }
            .creators-directory-name {
                font-size: 1.13rem;
                line-height: 1.18;
            }
            .creators-directory-card-blurb {
                height: 2.48em;
                font-size: 0.72rem;
                line-height: 1.24;
            }
            .creators-directory-stat-strip {
                gap: 3px;
            }
            .creators-directory-stat-strip span {
                padding: 4px 3px;
            }
            .creators-directory-stat-strip strong {
                font-size: 0.72rem;
            }
            .creators-directory-stat-strip em {
                font-size: 0.48rem;
            }
        }
        @media (max-width: 480px) {
            .view-creators {
                padding-top: 46px;
            }
            .creators-summary-title {
                font-size: 1.08rem;
            }
            .creators-mobile-dropdown:not(.creators-sort-dropdown) .admin-dropdown-btn {
                font-size: 0.68rem;
            }
        }
        @media (max-width: 640px) {
            .characters-toolbar {
                padding-left: 16px;
                padding-right: 16px;
            }
            .creators-toolbar {
                padding-left: 16px;
                padding-right: 16px;
            }
        }
        @media (max-width: 480px) {
            .creators-toolbar {
                gap: 4px;
                padding-left: 12px;
                padding-right: 12px;
            }
            .creators-section-tab {
                font-size: calc(0.66rem + 1pt);
                padding: var(--characters-toolbar-pill-padding-y) 0.42rem;
            }
            .creators-controls.creators-controls-mobile,
            .creators-mobile-sort-row {
                gap: 4px;
            }
            .creators-source-tabs {
                display: none;
            }
            #creatorsTagDrawerToggle.creators-tag-filter-btn {
                font-size: 0.68rem;
                padding: var(--characters-toolbar-pill-padding-y) 0.34rem;
            }
            .creators-sort-dir-toggle {
                width: 24px;
                font-size: 0.92rem;
            }
        }
        @media (max-width: 768px) {
            body.creator-tools-view-active #viewCreatorTools {
                padding-top: 72px;
            }
            body.creator-tools-manage-surface-active #viewCreatorTools {
                padding-top: 56px;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-page {
                width: 100%;
                max-width: 100%;
                padding: 0 6px 34px;
                box-sizing: border-box;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-toolbar {
                position: fixed !important;
                top: 56px;
                left: 0;
                right: 0;
                z-index: 50;
                display: block;
                margin: 0;
                padding: 4px 16px 6px;
                box-sizing: border-box;
                background: linear-gradient(
                    180deg,
                    rgba(15, 15, 16, 0.96),
                    rgba(15, 15, 16, 0.9)
                );
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
                box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-summary {
                display: block;
                width: 100%;
                min-height: 0;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-summary-hero {
                display: grid;
                grid-template-columns: minmax(0, 1fr) max-content;
                grid-template-areas:
                    "brand account"
                    "section drawer-trigger";
                align-items: start;
                justify-content: stretch;
                gap: 4px 8px;
                padding: 0;
                position: relative;
                text-align: left;
            }
            body.creator-tools-manage-surface-active #viewCreatorTools .creator-tools-summary-hero {
                grid-template-areas:
                    "brand account"
                    "section drawer-trigger"
                    "manage-controls manage-controls";
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-summary-title-wrap {
                display: contents;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-title-wrap {
                grid-area: brand;
                justify-content: flex-start;
                gap: 4px;
                min-width: 0;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-summary-title {
                font-size: 0.61rem;
                line-height: 1;
                letter-spacing: 0;
                white-space: nowrap;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-section-title {
                grid-area: section;
                display: block;
                min-width: 0;
                max-width: 100%;
                overflow: hidden;
                text-align: left;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 1.35rem;
                line-height: 1.08;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-version-badge {
                min-height: 12px;
                padding: 0 4px;
                font-size: 0.48rem;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-page-tabs {
                display: none !important;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-page-select {
                display: none !important;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-page-dropdown {
                display: none !important;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-drawer-trigger {
                grid-area: drawer-trigger;
                display: inline-flex;
                justify-self: end;
                width: auto;
                min-width: 52px;
                max-width: 72px;
                min-height: 26px;
                padding: 0 7px;
                border-radius: 999px;
                font-size: 0.64rem;
                gap: 0;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-drawer-trigger-icon {
                display: none;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-account-status-row {
                grid-area: 1 / 1 / 2 / -1;
                position: absolute;
                top: 0;
                right: 0;
                left: 132px;
                display: block;
                width: auto;
                justify-self: auto;
                max-width: none;
                min-height: 0;
                padding: 0;
                border: 0;
                border-radius: 0;
                background: transparent;
                font-size: 0.66rem;
                line-height: 1.15;
                text-align: right;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-account-status-row[data-state="anonymous"],
            body.creator-tools-view-active #viewCreatorTools .creator-tools-account-status-row[data-state="authenticated"] {
                border: 0;
                background: transparent;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-profiles-banner {
                display: none !important;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-profiles-banner::after {
                content: none;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-profiles-banner:hover,
            body.creator-tools-view-active #viewCreatorTools .creator-tools-profiles-banner:focus-visible {
                outline: none;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-profiles-banner-title {
                display: none;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-profiles-banner-meta {
                display: none;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-sidebar-backdrop {
                position: fixed;
                inset: 0;
                z-index: 15950;
                display: block;
                border: 0;
                background: rgba(0, 0, 0, 0);
                opacity: 1;
                pointer-events: none;
                visibility: visible;
                transition: background 300ms ease;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-page.is-sidebar-open .creator-tools-sidebar-backdrop {
                background: rgba(0, 0, 0, 0.6);
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                pointer-events: auto;
            }
            body.creator-tools-view-active #viewCreatorTools #creatorToolsOngoingSection.creator-tools-sidebar {
                position: fixed;
                inset: auto 0 0;
                z-index: 16000;
                display: flex !important;
                flex-direction: column;
                width: auto;
                height: min(82dvh, calc(100dvh - 44px));
                max-height: min(82dvh, calc(100dvh - 44px));
                min-height: 0;
                margin: 0;
                padding: 0;
                overflow: hidden;
                border: 0;
                border-top: 2px solid var(--border-default);
                border-radius: 12px 12px 0 0;
                background: var(--bg-elevated);
                box-shadow: 0 -20px 44px rgba(0, 0, 0, 0.42);
                transform: translateY(100%);
                transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1);
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-page.is-sidebar-open #creatorToolsOngoingSection.creator-tools-sidebar {
                transform: translateY(0);
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-drawer-handle {
                display: block;
                width: 32px;
                height: 3px;
                margin: 0 auto;
                border-radius: 2px;
                background: var(--bg-accent);
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-history-head {
                flex: 0 0 auto;
                gap: 9px;
                padding: 8px 12px 6px;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-history-title-row {
                min-height: 30px;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-sidebar-close {
                min-height: 24px;
                padding: 0 8px;
                border-color: var(--accent-primary);
                border-radius: 999px;
                background: transparent;
                color: var(--accent-primary);
                font-size: 0.66rem;
                font-weight: 760;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-sidebar-stacks {
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
                padding: 8px 14px 16px;
                -webkit-overflow-scrolling: touch;
            }
            body.creator-tools-sidebar-open {
                overflow: visible !important;
            }
            body.creator-tools-view-active #viewCreatorTools .creator-tools-manage-surface .creator-tools-inline-manage-sticky {
                top: 64px;
            }
        }
        .characters-status-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
        }
        .characters-status {
            font-size: 0.8125rem;
            color: var(--text-muted);
            margin-bottom: var(--space-4);
            min-height: 18px;
        }
        .characters-status.loading {
            color: var(--text-muted);
        }
        .characters-status.loading::after {
            content: none;
        }
        .characters-renderer-debug-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            min-height: 1.55rem;
            padding: 0.18rem 0.45rem;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.16);
            background: rgba(255, 255, 255, 0.06);
            color: var(--text-muted);
            font-size: 0.62rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            line-height: 1;
            user-select: none;
        }
        .characters-renderer-debug-badge.is-virtual {
            color: rgba(187, 247, 208, 0.96);
            border-color: rgba(74, 222, 128, 0.32);
            background: rgba(34, 197, 94, 0.12);
        }
        .characters-renderer-debug-badge.is-classic {
            color: rgba(254, 240, 138, 0.96);
            border-color: rgba(250, 204, 21, 0.3);
            background: rgba(234, 179, 8, 0.12);
        }
        .character-grid {
            display: flex;
            gap: var(--space-4);
            align-items: flex-start;
        }
        .character-column {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: var(--space-4);
        }
        .character-virtual-grid {
            position: relative;
            width: 100%;
            min-height: 1px;
            contain: layout style;
        }
        .character-virtual-grid .character-card {
            position: absolute;
            top: 0;
            left: 0;
            will-change: transform;
        }
        .character-virtual-grid .character-card-virtualized {
            contain: layout paint style;
        }
        .character-grid-load-more {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            width: 100%;
            min-height: 58px;
            padding: var(--space-3) 0 var(--space-4);
            color: var(--text-secondary);
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.02em;
        }
        .character-grid-load-more.is-visible {
            display: flex;
        }
        .character-grid-load-more-spinner {
            width: 18px;
            height: 18px;
            border-radius: 999px;
            border: 2px solid rgba(255, 255, 255, 0.18);
            border-top-color: var(--accent-primary);
            animation: tagLoadingSpin 650ms linear infinite;
        }
        .character-card {
            display: inline-block;
            width: 100%;
            margin: 0;
            background: transparent;
            border: none;
            border-radius: var(--radius-lg);
            overflow: hidden;
            cursor: pointer;
            transition: all var(--transition-fast);
            -webkit-tap-highlight-color: transparent;
            -webkit-user-select: none;
            user-select: none;
            color: inherit;
            text-decoration: none;
        }
        .character-card:hover {
            border-color: transparent;
            transform: none;
            box-shadow: none;
        }
        /* Shimmer placeholder cards for infinite scroll loading */
        .character-card-shimmer {
            pointer-events: none;
        }
        .character-card-shimmer .character-avatar-placeholder {
            width: 100%;
            aspect-ratio: 3/4;
            min-height: 200px;
            max-height: 420px;
            background: var(--bg-subtle);
            border-radius: var(--radius-lg);
        }
        .character-card-shimmer .character-details {
            padding: var(--space-2) 0;
        }
        .character-card-shimmer .character-name-placeholder {
            height: 16px;
            width: 70%;
            background: var(--bg-subtle);
            border-radius: var(--radius-sm);
            margin-bottom: var(--space-2);
        }
        .character-card-shimmer .character-author-placeholder {
            height: 12px;
            width: 50%;
            background: var(--bg-subtle);
            border-radius: var(--radius-sm);
        }
        .character-avatar-wrap {
            position: relative;
            border-radius: var(--radius-lg);
            overflow: hidden;
            background: var(--bg-subtle);
            aspect-ratio: 3 / 4;
            -webkit-tap-highlight-color: transparent;
        }
        .character-avatar {
            width: 100%;
            height: 100%;
            min-height: 0;
            max-height: 420px;
            object-fit: cover;
            object-position: top center;
            background: var(--bg-accent);
            display: block;
            -webkit-tap-highlight-color: transparent;
            -webkit-user-select: none;
            user-select: none;
            -webkit-user-drag: none;
            user-drag: none;
        }
        .character-badge-nsfw {
            position: absolute;
            top: 8px;
            left: 8px;
            background: #ef4444;
            color: #fff;
            font-size: calc(0.625rem + 0.5pt);
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
        }
        .character-token-badge,
        .character-created-badge {
            position: absolute;
            background: rgba(0, 0, 0, 0.56);
            color: rgba(255, 255, 255, 0.88);
            font-size: calc(0.5625rem + 0.5pt);
            font-weight: 500;
            letter-spacing: 0.01em;
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            text-align: center;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }
        .character-token-badge {
            top: auto;
            left: 50%;
            transform: translateX(-50%);
            bottom: 3px;
            right: auto;
        }
        .character-source-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left: 4px;
            padding: 1px 4px;
            border-radius: 999px;
            font-size: 0.52rem;
            line-height: 1.1;
            font-weight: 700;
            letter-spacing: 0.05em;
            vertical-align: middle;
            border: 1px solid transparent;
            opacity: 0.68;
        }
        .character-source-badge.is-janitor {
            min-height: 15px;
            padding: 0.05rem 0.22rem;
            border-radius: 0.35rem;
            font-size: calc(0.6rem - 2pt);
            font-weight: 700;
            letter-spacing: 0.02em;
            color: rgba(255, 255, 255, 0.82);
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.14);
            opacity: 0.92;
        }
        .character-source-badge.is-janitor.is-janitor-original {
            color: rgba(191, 219, 254, 0.96);
            background: rgba(59, 130, 246, 0.12);
            border-color: rgba(96, 165, 250, 0.34);
        }
        .character-source-badge.is-janitor.is-janitor-both {
            color: rgba(244, 228, 255, 0.97);
            background: rgba(168, 85, 247, 0.13);
            border-color: rgba(196, 181, 253, 0.34);
        }
        .character-source-badge.is-janitor.is-janitor-recovery {
            color: rgba(220, 252, 231, 0.97);
            background: rgba(34, 197, 94, 0.14);
            border-color: rgba(74, 222, 128, 0.34);
        }
        .character-source-badge.is-janitor.is-degraded {
            gap: 2px;
        }
        .character-source-badge.is-janitor .fa-user-secret {
            font-size: calc(0.58rem - 2pt);
            line-height: 1;
        }
        .character-source-badge.is-direct-upload {
            min-height: 15px;
            padding: 0.05rem 0.24rem;
            border-radius: 0.35rem;
            font-size: calc(0.6rem - 2pt);
            font-weight: 800;
            letter-spacing: 0.02em;
            color: rgba(209, 250, 229, 0.98);
            background: rgba(20, 184, 166, 0.15);
            border-color: rgba(45, 212, 191, 0.36);
            opacity: 0.95;
        }
        .char-chatname-row .character-source-badge.is-janitor {
            min-height: 20px;
            padding: 0.14rem 0.44rem;
            border-radius: 0.45rem;
            font-size: calc(0.78rem - 2pt);
            font-weight: 600;
            letter-spacing: 0.01em;
        }
        .char-chatname-row .character-source-badge.is-janitor.is-degraded {
            gap: 3px;
        }
        .char-chatname-row .character-source-badge.is-janitor .fa-user-secret {
            font-size: calc(0.72rem - 2pt);
        }
        .char-chatname-row .character-source-badge.is-direct-upload {
            min-height: 20px;
            padding: 0.14rem 0.44rem;
            border-radius: 0.45rem;
            font-size: calc(0.78rem - 2pt);
            font-weight: 700;
            letter-spacing: 0.01em;
        }
        .character-source-badge.is-saucepan {
            min-height: 15px;
            padding: 0.05rem 0.22rem;
            border-radius: 0.35rem;
            font-size: calc(0.6rem - 2pt);
            font-weight: 700;
            letter-spacing: 0.02em;
            color: rgba(254, 240, 138, 0.96);
            background: rgba(234, 179, 8, 0.12);
            border-color: rgba(250, 204, 21, 0.3);
        }
        .character-source-badge.is-saucepan.is-saucepan-open {
            color: rgba(254, 240, 138, 0.96);
            background: rgba(234, 179, 8, 0.12);
            border-color: rgba(250, 204, 21, 0.3);
        }
        .character-source-badge.is-saucepan.is-saucepan-closed {
            color: rgba(254, 240, 138, 0.98);
            background: rgba(234, 179, 8, 0.14);
            border-color: rgba(250, 204, 21, 0.34);
            opacity: 0.96;
        }
        .character-source-badge.is-saucepan.is-saucepan-recovered {
            color: rgba(220, 252, 231, 0.96);
            background: rgba(34, 197, 94, 0.16);
            border-color: rgba(74, 222, 128, 0.32);
            opacity: 0.95;
        }
        .character-source-badge.is-saucepan.is-saucepan-unknown {
            opacity: 0.75;
        }
        .character-source-badge.is-saucepan .fa-user-secret {
            font-size: calc(0.58rem - 2pt);
            line-height: 1;
        }
        .character-source-badge--compact {
            gap: 4px;
        }
        .character-source-badge.is-saucepan.character-source-badge--compact {
            gap: 0;
        }
        .character-source-badge--square {
            min-width: 22px;
            height: 22px;
            padding: 0 6px;
            border-radius: 999px;
            font-size: calc(0.66rem - 2pt);
            letter-spacing: 0.01em;
            opacity: 0.96;
        }
        .character-source-badge--compact .fa-user-secret {
            font-size: calc(0.58rem - 2pt);
        }
        .char-definition-badge {
            margin-left: 0;
            padding: 3px 8px;
            font-size: 0.64rem;
            line-height: 1.2;
            font-weight: 800;
            opacity: 1;
            letter-spacing: 0.06em;
        }
        .character-created-badge {
            top: 8px;
            right: 8px;
            left: auto;
            bottom: auto;
            transform: none;
        }
        .character-score-badge {
            position: absolute;
            bottom: 3px;
            right: var(--space-2);
            display: flex;
            flex-direction: column;
            align-items: center;
            color: rgba(255, 255, 255, 0.95);
            padding: 4px 5px;
            border-radius: var(--radius-sm);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            z-index: 2;
            cursor: pointer;
        }
        .character-score-badge--low {
            background: rgba(71, 85, 105, 0.45);
        }
        .character-score-badge--mid {
            background: rgba(30, 58, 138, 0.42);
        }
        .character-score-badge--top {
            background: linear-gradient(135deg, rgba(180, 83, 9, 0.5) 0%, rgba(146, 64, 14, 0.55) 100%);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 12px rgba(245, 158, 11, 0.2);
        }
        .character-score-badge--status-na {
            background: rgba(71, 85, 105, 0.62);
        }
        .character-score-badge--status-pending {
            background: rgba(30, 58, 138, 0.62);
        }
        .character-score-badge--status-error {
            background: rgba(153, 27, 27, 0.62);
        }
        .character-score-badge .character-score-label {
            font-size: calc(0.4375rem + 0.5pt);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            opacity: 0.9;
            margin-bottom: 0;
        }
        .character-token-degraded-badge {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 19px;
            right: auto;
            background: rgba(236, 72, 153, 0.96);
            color: #fff;
            font-size: 0.42rem;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            padding: 1px 4px;
            border-radius: var(--radius-sm);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
            text-align: center;
            white-space: nowrap;
            z-index: 2;
            pointer-events: none;
        }
        .character-token-degraded-badge.creator-list {
            bottom: 24px;
        }
        .character-token-degraded-badge.is-recovered {
            background: rgba(34, 197, 94, 0.96);
            font-size: 0.39rem;
            letter-spacing: 0.04em;
            padding: 1px 5px;
        }
        @media (min-width: 769px) {
            .character-grid .character-token-degraded-badge:not(.creator-list),
            .character-virtual-grid .character-token-degraded-badge:not(.creator-list) {
                font-size: calc(0.42rem + 1pt);
            }
            .character-grid .character-token-degraded-badge.is-recovered:not(.creator-list),
            .character-virtual-grid .character-token-degraded-badge.is-recovered:not(.creator-list) {
                font-size: calc(0.39rem + 1pt);
            }
        }
        .character-score-badge .character-score-main {
            font-size: calc(0.8125rem + 0.5pt);
            font-weight: 700;
            line-height: 1.1;
            font-variant-numeric: tabular-nums;
        }
        .character-score-badge .character-score-niche {
            font-size: calc(0.5rem + 0.5pt);
            font-weight: 500;
            opacity: 0.85;
            font-variant-numeric: tabular-nums;
            margin-top: -1px;
            text-align: center;
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }
        .character-score-badge .character-score-niche-mark {
            width: 5px;
            height: 5px;
            display: inline-block;
            background: #f59e0b;
            opacity: 0.95;
            transform: rotate(45deg);
            border-radius: 1px;
            margin-left: 2px;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
        }
        @media (min-width: 769px) {
            .character-grid .character-score-badge .character-score-label,
            .character-virtual-grid .character-score-badge .character-score-label {
                font-size: calc(0.4375rem + 1.5pt);
            }
            .character-grid .character-score-badge .character-score-main,
            .character-virtual-grid .character-score-badge .character-score-main {
                font-size: calc(0.8125rem + 1.5pt);
            }
            .character-grid .character-score-badge .character-score-niche,
            .character-virtual-grid .character-score-badge .character-score-niche {
                font-size: calc(0.5rem + 1.5pt);
            }
        }
        /* Score overlay (click badge) */
        .score-overlay {
            position: fixed;
            inset: 0;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--space-4);
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease, visibility 0.2s ease;
        }
        .score-overlay.active {
            pointer-events: auto;
            opacity: 1;
            visibility: visible;
        }
        .score-overlay-backdrop {
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 50% 42%, rgba(45, 212, 191, 0.08), transparent 14rem),
                rgba(0, 0, 0, 0.72);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        .score-overlay-panel {
            position: relative;
            max-width: 520px;
            max-height: 90vh;
            overflow: auto;
            background: var(--bg-elevated);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            padding: var(--space-6);
        }
        .score-overlay-close {
            position: absolute;
            top: var(--space-2);
            right: var(--space-2);
            width: 32px;
            height: 32px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            font-size: 1.5rem;
            line-height: 1;
            cursor: pointer;
            border-radius: var(--radius-sm);
        }
        .score-overlay-close:hover {
            color: var(--text-primary);
            background: var(--bg-hover);
        }
        .score-overlay-body {
            padding-right: var(--space-6);
            font-size: 0.9375rem;
        }
        .score-overlay-tabs {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin: 0 0 var(--space-3);
            padding: 3px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.25));
            background: rgba(15, 23, 42, 0.1);
        }
        .score-overlay-tab-btn {
            border: none;
            background: transparent;
            color: var(--text-secondary);
            padding: 6px 10px;
            border-radius: var(--radius-sm);
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .score-overlay-tab-btn:hover {
            background: rgba(148, 163, 184, 0.14);
            color: var(--text-primary);
        }
        .score-overlay-tab-btn.is-active {
            background: rgba(30, 58, 138, 0.3);
            color: #e2e8f0;
        }
        .score-overlay-tab-panel {
            display: block;
        }
        .score-overlay-tab-panel[hidden] {
            display: none;
        }
        .score-overlay-summary-row {
            margin-bottom: var(--space-2);
            padding: var(--space-3);
            border-radius: var(--radius-md);
            border: 1px solid rgba(148, 163, 184, 0.24);
            background:
                radial-gradient(100% 130% at 0% 0%, rgba(30, 58, 138, 0.12) 0%, rgba(30, 58, 138, 0) 55%),
                linear-gradient(160deg, rgba(255, 255, 255, 0.03) 0%, rgba(15, 23, 42, 0.04) 100%);
        }
        .score-overlay-summary-row--top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: var(--space-3);
        }
        .score-overlay-summary-left {
            flex: 0 0 auto;
        }
        .score-overlay-summary-right {
            min-width: 0;
            margin-left: auto;
            text-align: right;
        }
        .score-overlay-summary-label {
            margin: 0 0 6px;
            font-size: 0.6875rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            font-weight: 600;
        }
        .score-overlay-summary-value {
            margin: 0;
            color: var(--text-primary);
            font-size: 0.875rem;
            line-height: 1.45;
        }
        .score-overlay-summary-value--large {
            font-size: 1rem;
            line-height: 1.5;
        }
        .score-overlay-details-title {
            margin: 0 0 var(--space-2);
            font-size: 0.8125rem;
            font-weight: 700;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .score-overlay-title {
            margin: 0 0 var(--space-3);
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--text-secondary);
            letter-spacing: 0.03em;
            text-transform: uppercase;
        }
        .score-overlay-badge-wrap {
            flex-shrink: 0;
        }
        .score-overlay-front {
            margin-bottom: var(--space-3);
            padding: var(--space-3);
            border-radius: var(--radius-md);
            border: 1px solid rgba(30, 58, 138, 0.22);
            background:
                radial-gradient(120% 140% at 0% 0%, rgba(30, 58, 138, 0.16) 0%, rgba(30, 58, 138, 0) 56%),
                linear-gradient(160deg, rgba(255, 255, 255, 0.03) 0%, rgba(15, 23, 42, 0.04) 100%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }
        .score-overlay-front-head {
            display: flex;
            gap: var(--space-3);
            align-items: center;
            margin-bottom: var(--space-3);
        }
        .score-overlay-front-identity {
            min-width: 0;
            flex: 1;
        }
        .score-overlay-main-badge {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            min-width: 88px;
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-md);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
        }
        .score-overlay-main-badge .character-score-label {
            font-size: 0.5rem;
        }
        .score-overlay-main-badge .character-score-main {
            font-size: 1.5rem;
            line-height: 1.1;
        }
        .score-overlay-main-badge .character-score-niche {
            font-size: 0.6875rem;
            margin-top: -2px;
        }
        .score-overlay-char-name {
            margin: 0 0 var(--space-1);
            font-size: 1.125rem;
            font-weight: 700;
            line-height: 1.25;
            color: var(--text-primary);
            word-break: break-word;
        }
        .score-overlay-char-total {
            margin: 0;
            font-size: 0.75rem;
            color: var(--text-secondary);
            font-variant-numeric: tabular-nums;
        }
        .score-overlay-front-banner {
            display: grid;
            grid-template-columns: auto 1fr auto auto 1fr;
            gap: var(--space-2);
            align-items: center;
            border-radius: var(--radius-sm);
            padding: var(--space-2) var(--space-3);
            background: linear-gradient(90deg, rgba(30, 58, 138, 0.14) 0%, rgba(180, 83, 9, 0.1) 100%);
            border: 1px solid rgba(148, 163, 184, 0.24);
        }
        .score-overlay-front-banner-label {
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--text-muted);
            font-size: 0.625rem;
        }
        .score-overlay-front-banner-value {
            color: var(--text-primary);
            font-size: 0.8125rem;
            font-weight: 500;
            line-height: 1.3;
            min-width: 0;
        }
        .score-overlay-front-banner-divider {
            width: 1px;
            height: 18px;
            background: rgba(148, 163, 184, 0.45);
        }
        .score-overlay-reveal-section {
            border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.2));
            border-radius: var(--radius-md);
            background: var(--bg-subtle, rgba(15, 23, 42, 0.03));
            margin-top: var(--space-2);
            overflow: hidden;
        }
        .score-overlay-reveal-section summary {
            list-style: none;
            cursor: pointer;
            font-size: 0.8125rem;
            font-weight: 600;
            color: var(--text-primary);
            padding: var(--space-2) var(--space-3);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
        }
        .score-overlay-reveal-section summary::-webkit-details-marker {
            display: none;
        }
        .score-overlay-reveal-section summary::after {
            content: 'Reveal';
            font-size: 0.625rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .score-overlay-reveal-section[open] summary::after {
            content: 'Hide';
        }
        .score-overlay-reveal-body {
            padding: 0 var(--space-3) var(--space-3);
        }
        .score-overlay-dims {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-3);
        }
        .score-overlay-dim-card {
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-sm);
            background: rgba(148, 163, 184, 0.08);
            border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
        }
        .score-overlay-dim-head {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: var(--space-2);
            margin-bottom: var(--space-1);
        }
        .score-overlay-dim-name {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: capitalize;
            color: var(--text-primary);
        }
        .score-overlay-dim-score {
            font-size: 0.75rem;
            font-variant-numeric: tabular-nums;
            color: var(--text-secondary);
        }
        .score-overlay-dim-bar {
            height: 4px;
            border-radius: 2px;
            background: var(--border-subtle, rgba(0,0,0,0.1));
            overflow: hidden;
        }
        .score-overlay-dim-fill {
            display: block;
            height: 100%;
            border-radius: 2px;
            background: linear-gradient(90deg, var(--color-mid, #3b82f6), var(--color-mid-dark, #2563eb));
            transition: width 0.2s ease;
        }
        .score-overlay-dim-card:nth-child(odd) .score-overlay-dim-fill { background: linear-gradient(90deg, #64748b, #475569); }
        .score-overlay-reason-list {
            display: grid;
            gap: var(--space-2);
        }
        .score-overlay-reason-item {
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-sm);
            border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
            background: rgba(148, 163, 184, 0.08);
        }
        .score-overlay-reason-head {
            margin: 0 0 4px;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        .score-overlay-reason-body {
            margin: 0;
            font-size: 0.75rem;
            color: var(--text-secondary);
            line-height: 1.4;
        }
        .score-overlay-appendix-grid {
            display: grid;
            gap: var(--space-2);
        }
        .score-overlay-appendix-row {
            display: grid;
            grid-template-columns: minmax(110px, 150px) 1fr;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
            border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
            border-radius: var(--radius-sm);
            background: rgba(148, 163, 184, 0.08);
        }
        .score-overlay-appendix-key {
            text-transform: uppercase;
            letter-spacing: 0.04em;
            font-size: 0.625rem;
            font-weight: 600;
            color: var(--text-muted);
            align-self: center;
        }
        .score-overlay-appendix-val {
            color: var(--text-primary);
            font-size: 0.75rem;
            line-height: 1.35;
            word-break: break-word;
        }
        .score-overlay-appendix-actions {
            margin-top: var(--space-2);
        }
        .score-overlay-info-btn {
            padding: var(--space-1) var(--space-2);
            font-size: 0.75rem;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: var(--bg-elevated);
            color: var(--text-secondary);
            cursor: pointer;
        }
        .score-overlay-info-btn:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }
        .score-overlay-info-panel {
            margin-top: var(--space-3);
            padding: var(--space-3);
            background: var(--bg-subtle, rgba(0,0,0,0.04));
            border-radius: var(--radius-sm);
            font-size: 0.75rem;
            max-height: 40vh;
            overflow: auto;
        }
        .score-overlay-info-panel h4 {
            margin: 0 0 var(--space-2);
            font-size: 0.6875rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--text-muted);
        }
        .score-overlay-info-panel ul {
            margin: 0;
            padding-left: var(--space-4);
        }
        .score-overlay-info-panel li {
            margin-bottom: var(--space-2);
            line-height: 1.35;
            color: var(--text-secondary);
        }
        .score-overlay-loading,
        .score-overlay-empty,
        .score-overlay-error {
            margin: 0;
            color: var(--text-muted);
            font-size: 0.75rem;
        }
        @media (max-width: 760px) {
            .score-overlay {
                padding: var(--space-2);
            }
            .score-overlay-panel {
                max-width: 100%;
                width: 100%;
                padding: var(--space-5) var(--space-3) var(--space-4);
            }
            .score-overlay-body {
                padding-right: var(--space-4);
            }
            .score-overlay-summary-row {
                padding: var(--space-2) var(--space-3);
            }
            .score-overlay-summary-value--large {
                font-size: 0.9375rem;
            }
            .score-overlay-front-head {
                align-items: flex-start;
            }
            .score-overlay-front-banner {
                grid-template-columns: auto 1fr;
            }
            .score-overlay-front-banner-divider {
                display: none;
            }
            .score-overlay-dims {
                grid-template-columns: 1fr;
            }
            .score-overlay-appendix-row {
                grid-template-columns: 1fr;
                gap: 4px;
            }
        }
        body.score-overlay-open {
            overflow: hidden;
        }
        .character-details {
            padding: var(--space-1) var(--space-3) var(--space-2);
        }
        .character-name {
            font-size: 0.8125rem;
            font-weight: 500;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 0.25rem;
            margin-top: 0;
        }
        .character-author {
            font-size: 0.6875rem;
            color: var(--text-muted);
            text-decoration: none;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.125rem;
            line-height: 1.2;
            padding: 0;
            cursor: default;
            min-width: 0;
            -webkit-tap-highlight-color: transparent;
        }
        .character-author-row {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            min-width: 0;
        }
        .character-author-row .character-meta {
            margin-left: auto;
            flex: 0 0 auto;
        }
        .character-author .author-label {
            font-size: 0.5rem;
            color: var(--accent-primary);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-weight: 400;
        }
        .character-author .author-name-row {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            min-width: 0;
            max-width: 100%;
        }
        .character-author .author-name {
            font-size: 0.6875rem;
            color: var(--text-secondary);
            font-weight: 500;
            display: block;
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .character-author:hover .author-name {
            color: var(--text-primary);
        }
        .character-meta {
            display: flex;
            gap: var(--space-2);
            font-size: 0.6875rem;
            color: var(--text-muted);
            justify-content: flex-end;
        }

        /* ========================================
           MODAL STYLES
           ======================================== */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #000;
            display: none;
            z-index: 1000;
            align-items: center;
            justify-content: center;
            padding: var(--space-4);
            /* iOS fix: Ensure overlay captures all touch events */
            touch-action: auto;
            /* Ensure overlay is above everything */
            pointer-events: auto;
        }
        .modal-overlay.active {
            display: flex;
        }
        /* Age gate */
        .age-gate-overlay {
            position: fixed;
            inset: 0;
            background: rgba(12, 12, 14, 0.94);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            padding: 24px;
        }
        .age-gate-overlay.active {
            display: flex;
        }
        .age-gate-modal {
            width: 100%;
            max-width: 420px;
            background: #141416;
            color: #f4f4f5;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            padding: 24px;
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
        }
        .age-gate-modal h2 {
            margin: 0 0 8px;
            font-size: 1.25rem;
        }
        .age-gate-modal p {
            margin: 0 0 20px;
            color: #cbd5e1;
        }
        .age-gate-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
        .age-gate-btn {
            border: 0;
            border-radius: 10px;
            padding: 10px 14px;
            font-weight: 600;
            cursor: pointer;
        }
        .age-gate-btn.confirm {
            background: #22c55e;
            color: #0b0f0c;
        }
        .age-gate-btn.exit {
            background: #27272a;
            color: #e4e4e7;
        }
        @media (max-width: 480px) {
            .age-gate-modal {
                padding: 20px;
            }
            .age-gate-actions {
                flex-direction: column;
            }
            .age-gate-btn {
                width: 100%;
            }
        }
        body.modal-open {
            overflow: hidden !important;
            /* iOS fix: Prevent touch events from reaching background content */
            touch-action: none !important;
            /* iOS fix: Prevent position shifting when modal opens */
            position: fixed !important;
            width: 100% !important;
            height: 100% !important;
        }
        body.modal-open.creator-tools-modal-open {
            touch-action: auto !important;
        }
        /* Block scrolling on mobile scroll container when modal is open */
        body.modal-open .mobile-scroll-container {
            /* iOS fix: Completely disable touch interactions on background */
            touch-action: none !important;
            /* Prevent any scrolling */
            overflow: hidden !important;
            /* iOS fix: Disable momentum scrolling completely */
            -webkit-overflow-scrolling: none !important;
            /* Prevent any scroll position changes */
            scroll-behavior: auto !important;
        }
        body.modal-open .browser-status-bar,
        body.modal-open .top-bar {
            display: none !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }
        .modal-content {
            background: var(--bg-primary);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            max-width: 800px;
            width: 100%;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-4);
            border-bottom: 1px solid var(--border-subtle);
            background: var(--bg-subtle);
        }
        .modal-header h2 {
            margin: 0;
            color: var(--text-primary);
            font-size: 1.25rem;
            font-weight: 600;
        }
        .modal-close,
        .char-modal-close,
        .moderation-report-close {
            width: 44px;
            height: 44px;
            flex: 0 0 44px;
            padding: 0;
            background: transparent;
            border: none;
            border-radius: 50%;
            color: var(--text-primary);
            font-size: 2.55rem;
            line-height: 0.82;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all var(--transition-fast);
        }
        .modal-close:hover,
        .char-modal-close:hover,
        .moderation-report-close:hover {
            color: var(--text-primary);
            transform: scale(1.05);
        }
        @media (hover: none) and (pointer: coarse) {
            #characterModal,
            #characterModal *,
            #creatorProfileModal,
            #creatorProfileModal * {
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
                -webkit-touch-callout: none !important;
            }

            #characterModal :is(button, [role="button"], .char-action-btn, .char-creator-link, .creator-bot-row),
            #creatorProfileModal :is(button, [role="button"], .char-action-btn, .char-creator-link, .creator-bot-row, a),
            #creatorProfileModal .modal-close,
            #characterModal .char-modal-close {
                appearance: none !important;
                -webkit-appearance: none !important;
                -webkit-user-select: none !important;
                user-select: none !important;
                touch-action: manipulation;
            }

            #characterModal :is(button, [role="button"], .char-action-btn, .char-creator-link, .creator-bot-row):focus:not(:focus-visible),
            #creatorProfileModal :is(button, [role="button"], .char-action-btn, .char-creator-link, .creator-bot-row, a):focus:not(:focus-visible),
            #creatorProfileModal .modal-close:focus:not(:focus-visible),
            #characterModal .char-modal-close:focus:not(:focus-visible) {
                outline: none !important;
                box-shadow: none !important;
            }

            #characterModal :is(button, [role="button"], .char-action-btn, .char-creator-link, .creator-bot-row):active,
            #creatorProfileModal :is(button, [role="button"], .char-action-btn, .char-creator-link, .creator-bot-row, a):active,
            #creatorProfileModal .modal-close:active,
            #characterModal .char-modal-close:active {
                outline: none !important;
                box-shadow: none !important;
                background: transparent !important;
                border-color: transparent !important;
                background-clip: padding-box;
            }

            #characterModal :is(button, [role="button"], .char-action-btn, .char-creator-link, .creator-bot-row):focus,
            #creatorProfileModal :is(button, [role="button"], .char-action-btn, .char-creator-link, .creator-bot-row, a):focus,
            #creatorProfileModal .modal-close:focus,
            #characterModal .char-modal-close:focus {
                outline: none !important;
                box-shadow: none !important;
            }
        }
        .modal-body {
            flex: 1;
            overflow-y: auto;
            padding: var(--space-4);
            max-height: calc(90vh - 80px);
        }
        .mine-folders-modal {
            max-width: 680px;
        }
        #mineFoldersModal,
        #yoursMultiDownloadModal,
        #characterModal,
        #creatorProfileModal {
            display: flex;
            background: rgba(5, 8, 14, 0.86);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            z-index: 15000;
            transition: opacity 150ms ease, visibility 0s linear 150ms;
        }
        #mineFoldersModal .mine-folders-modal,
        #yoursMultiDownloadModal .yours-multi-download-modal,
        #characterModal .modal-content,
        #creatorProfileModal .modal-content {
            opacity: 0;
            transform: translateY(8px) scale(0.985);
            transition: opacity 150ms ease, transform 150ms ease;
        }
        #mineFoldersModal.active,
        #yoursMultiDownloadModal.active,
        #characterModal.active,
        #creatorProfileModal.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transition: opacity 150ms ease;
        }
        #characterModal {
            background: transparent;
            isolation: isolate;
            transition: none !important;
        }
        #characterModal::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background: #05080e;
            opacity: 0.86;
            transform: none;
            transition: none;
            filter: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        #characterModal > .modal-content.character-modal {
            position: relative;
            z-index: 1;
        }
        #characterModal .modal-content.character-modal,
        #characterModal .modal-content.character-modal .modal-body,
        #characterModal .modal-content.character-modal .char-main,
        #characterModal .modal-content.character-modal .char-slideup-container {
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
        #characterModal .modal-content.character-modal .char-slideup-container,
        #characterModal .modal-content.character-modal .char-tab-panel,
        #characterModal .modal-content.character-modal .character-loading,
        #characterModal .modal-content.character-modal .char-swipe-loading {
            contain: paint;
        }
        #characterModal .modal-content.character-modal .skeleton-shimmer:not(.character-loading--full)::after,
        #characterModal .modal-content.character-modal .char-swipe-loading .skeleton-shimmer::after,
        #characterModal .modal-content.character-modal .char-desc-img.deferred.skeleton-shimmer::after {
            display: none !important;
            animation: none !important;
            transform: none !important;
            will-change: auto !important;
        }
        #characterModal .modal-content.character-modal .character-loading--full {
            position: relative;
            gap: 0.7rem;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
                #202126;
        }
        #characterModal .modal-content.character-modal .character-modal-loading-shell {
            flex: 1 1 auto;
            align-self: stretch;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            min-height: 100%;
            padding: 0;
            overflow: hidden;
            border-radius: 0;
            background:
                radial-gradient(circle at center, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 34%),
                #17181d;
        }
        #characterModal .modal-content.character-modal .character-modal-loading-shell::before,
        #characterModal .modal-content.character-modal .character-modal-loading-shell::after {
            content: none;
        }
        #characterModal .modal-content.character-modal .char-modal-loading-orb {
            display: grid;
            grid-template-columns: repeat(3, 9px);
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            min-height: 100%;
            pointer-events: none;
        }
        #characterModal .modal-content.character-modal .char-modal-loading-orb::before,
        #characterModal .modal-content.character-modal .char-modal-loading-orb::after,
        #characterModal .modal-content.character-modal .char-modal-loading-orb span {
            content: "";
            display: block;
            width: 9px;
            height: 9px;
            border-radius: 999px;
            background: rgba(244, 244, 245, 0.82);
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
            animation: charModalLoaderPulse 0.9s ease-in-out infinite alternate;
        }
        #characterModal .modal-content.character-modal .char-modal-loading-orb span {
            animation-delay: 110ms;
        }
        #characterModal .modal-content.character-modal .char-modal-loading-orb::after {
            animation-delay: 220ms;
        }
        #characterModal .modal-content.character-modal .char-modal-loading-art,
        #characterModal .modal-content.character-modal .char-modal-loading-title,
        #characterModal .modal-content.character-modal .char-modal-loading-meta,
        #characterModal .modal-content.character-modal .char-modal-loading-line,
        #characterModal .modal-content.character-modal .char-swipe-loading-hero,
        #characterModal .modal-content.character-modal .char-swipe-loading-line {
            position: relative;
            overflow: hidden;
            contain: paint;
            animation: none !important;
            transform: none !important;
            filter: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            will-change: auto !important;
        }
        #characterModal .modal-content.character-modal .char-modal-loading-art,
        #characterModal .modal-content.character-modal .char-swipe-loading-hero {
            border-radius: 10px;
            background:
                linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.024)),
                #24262d;
            box-shadow:
                inset 0 0 0 1px rgba(255, 255, 255, 0.055),
                inset 0 -28px 44px rgba(0, 0, 0, 0.12);
        }
        #characterModal .modal-content.character-modal .char-modal-loading-copy {
            align-self: center;
            display: flex;
            min-width: 0;
            flex-direction: column;
            gap: 12px;
        }
        #characterModal .modal-content.character-modal .char-modal-loading-title,
        #characterModal .modal-content.character-modal .char-modal-loading-meta,
        #characterModal .modal-content.character-modal .char-modal-loading-line,
        #characterModal .modal-content.character-modal .char-swipe-loading-line {
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.09);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.028);
        }
        #characterModal .modal-content.character-modal .char-modal-loading-title {
            width: min(330px, 78%);
            height: 22px;
        }
        #characterModal .modal-content.character-modal .char-modal-loading-meta {
            width: min(240px, 56%);
            height: 13px;
            margin-bottom: 6px;
            opacity: 0.82;
        }
        #characterModal .modal-content.character-modal .char-modal-loading-line {
            height: 11px;
            opacity: 0.74;
        }
        #characterModal .modal-content.character-modal .char-modal-loading-line.is-wide {
            width: min(520px, 94%);
        }
        #characterModal .modal-content.character-modal .char-modal-loading-line.is-medium {
            width: min(430px, 76%);
        }
        #characterModal .modal-content.character-modal .char-modal-loading-line.is-short {
            width: min(280px, 48%);
        }
        #characterModal .modal-content.character-modal .char-modal-loading-art::before,
        #characterModal .modal-content.character-modal .char-modal-loading-title::before,
        #characterModal .modal-content.character-modal .char-modal-loading-meta::before,
        #characterModal .modal-content.character-modal .char-modal-loading-line::before,
        #characterModal .modal-content.character-modal .char-swipe-loading-hero::before,
        #characterModal .modal-content.character-modal .char-swipe-loading-line::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0.035) 34%,
                    rgba(255, 255, 255, 0.15) 50%,
                    rgba(255, 255, 255, 0.035) 66%,
                    rgba(255, 255, 255, 0) 100%
                );
            background-size: 240% 100%;
            background-position: 140% 0;
            animation: charModalSafeShimmer 1.42s linear infinite;
        }
        #characterModal .modal-content.character-modal .char-modal-loading-title::before,
        #characterModal .modal-content.character-modal .char-modal-loading-line.is-medium::before {
            animation-delay: 90ms;
        }
        #characterModal .modal-content.character-modal .char-modal-loading-meta::before,
        #characterModal .modal-content.character-modal .char-modal-loading-line.is-short::before {
            animation-delay: 180ms;
        }
        #characterModal .modal-content.character-modal .character-loading--full:not(.character-modal-loading-shell)::before {
            content: none;
            color: rgba(244, 244, 245, 0.82);
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            line-height: 1;
            text-transform: uppercase;
        }
        #characterModal .modal-content.character-modal .character-loading--full:not(.character-modal-loading-shell)::after {
            content: "";
            width: 86px;
            height: 4px;
            border-radius: 999px;
            background: rgba(244, 244, 245, 0.68);
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
            animation: charModalLoaderPulse 0.92s ease-in-out infinite alternate;
        }
        #characterModal .modal-content.character-modal .char-tab-loading-spinner,
        #characterModal .modal-content.character-modal .char-hero-gallery-loading-spinner,
        #characterModal .modal-content.character-modal .char-saucepan-recovery-overlay-spinner,
        #characterModal .modal-content.character-modal .char-ultra-overlay-spinner {
            --char-modal-spinner-accent: rgba(94, 234, 212, 0.96);
            --char-modal-spinner-soft: rgba(94, 234, 212, 0.18);
            border-color: var(--char-modal-spinner-soft) !important;
            border-top-color: var(--char-modal-spinner-accent) !important;
            animation: charModalSpinnerOrbit 0.72s steps(4, end) infinite !important;
            opacity: 1 !important;
            transform: none !important;
            contain: paint;
            will-change: auto !important;
        }
        #characterModal .modal-content.character-modal .char-hero-gallery-loading-spinner {
            --char-modal-spinner-accent: rgba(255, 255, 255, 0.96);
            --char-modal-spinner-soft: rgba(255, 255, 255, 0.22);
        }
        #characterModal .modal-content.character-modal .char-saucepan-recovery-overlay-spinner {
            --char-modal-spinner-accent: #60a5fa;
            --char-modal-spinner-soft: rgba(191, 219, 254, 0.22);
        }
        #characterModal .modal-content.character-modal .char-ultra-overlay-spinner {
            --char-modal-spinner-accent: #ec4899;
            --char-modal-spinner-soft: rgba(251, 207, 232, 0.26);
        }
        #characterModal .modal-content.character-modal .char-boundary-notification,
        #characterModal .modal-content.character-modal .mobile-swipe-debug-overlay,
        #characterModal .modal-content.character-modal .char-hero-gallery-btn,
        #characterModal .modal-content.character-modal .char-hero-gallery-count,
        #characterModal .modal-content.character-modal .char-saucepan-recovery-overlay,
        #characterModal .modal-content.character-modal .char-ultra-overlay,
        #characterModal .modal-content.character-modal .char-score-badge,
        #characterModal .modal-content.character-modal .char-hero-token-badge,
        #characterModal .modal-content.character-modal .char-hero-created-badge {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            filter: none !important;
        }
        #characterModal .modal-content.character-modal .char-saucepan-recovery-overlay,
        #characterModal .modal-content.character-modal .char-ultra-overlay {
            transform: none !important;
            will-change: auto !important;
        }
        #characterModal .modal-content.character-modal .char-hero.char-hero--gallery-loading .char-hero-img {
            filter: none !important;
            opacity: 0.62;
        }
        #characterModal .modal-content.character-modal .char-save-heart-glyph,
        #characterModal .modal-content.character-modal .char-desc-degraded-ultra-btn:hover,
        #characterModal .modal-content.character-modal .char-source-tab-trigger:hover {
            filter: none !important;
        }
        @keyframes charModalLoaderPulse {
            from { opacity: 0.42; }
            to { opacity: 1; }
        }
        @keyframes charModalSpinnerOrbit {
            0%,
            100% {
                border-top-color: var(--char-modal-spinner-accent);
                border-right-color: var(--char-modal-spinner-soft);
                border-bottom-color: var(--char-modal-spinner-soft);
                border-left-color: var(--char-modal-spinner-soft);
            }
            25% {
                border-top-color: var(--char-modal-spinner-soft);
                border-right-color: var(--char-modal-spinner-accent);
                border-bottom-color: var(--char-modal-spinner-soft);
                border-left-color: var(--char-modal-spinner-soft);
            }
            50% {
                border-top-color: var(--char-modal-spinner-soft);
                border-right-color: var(--char-modal-spinner-soft);
                border-bottom-color: var(--char-modal-spinner-accent);
                border-left-color: var(--char-modal-spinner-soft);
            }
            75% {
                border-top-color: var(--char-modal-spinner-soft);
                border-right-color: var(--char-modal-spinner-soft);
                border-bottom-color: var(--char-modal-spinner-soft);
                border-left-color: var(--char-modal-spinner-accent);
            }
        }
        @keyframes charModalSafeShimmer {
            from { background-position: 140% 0; }
            to { background-position: -140% 0; }
        }
        @media (max-width: 768px) {
            #characterModal .modal-content.character-modal .character-modal-loading-shell {
                min-height: 100%;
                padding: 0;
            }
            #characterModal .modal-content.character-modal .char-modal-loading-copy {
                align-self: start;
                gap: 10px;
            }
            #characterModal .modal-content.character-modal .char-modal-loading-title {
                width: 78%;
                height: 20px;
            }
            #characterModal .modal-content.character-modal .char-modal-loading-meta {
                width: 52%;
                height: 12px;
                margin-bottom: 4px;
            }
            #characterModal .modal-content.character-modal .char-modal-loading-line {
                height: 10px;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            #characterModal .modal-content.character-modal .char-modal-loading-art::before,
            #characterModal .modal-content.character-modal .char-modal-loading-title::before,
            #characterModal .modal-content.character-modal .char-modal-loading-meta::before,
            #characterModal .modal-content.character-modal .char-modal-loading-line::before,
            #characterModal .modal-content.character-modal .char-swipe-loading-hero::before,
            #characterModal .modal-content.character-modal .char-swipe-loading-line::before {
                animation: none;
                background-position: 50% 0;
            }
            #characterModal .modal-content.character-modal .char-tab-loading-spinner,
            #characterModal .modal-content.character-modal .char-hero-gallery-loading-spinner,
            #characterModal .modal-content.character-modal .char-saucepan-recovery-overlay-spinner,
            #characterModal .modal-content.character-modal .char-ultra-overlay-spinner {
                animation: none !important;
            }
        }
        #mineFoldersModal.active .mine-folders-modal,
        #yoursMultiDownloadModal.active .yours-multi-download-modal,
        #characterModal.active .modal-content,
        #creatorProfileModal.active .modal-content {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        #characterModal.active .modal-content {
            transform: none !important;
        }
        body.alert-modal-open #characterModal.active,
        body.alert-modal-open #characterModal.active *,
        body.alert-modal-open #characterModal.active *::before,
        body.alert-modal-open #characterModal.active *::after {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            filter: none !important;
            transition: none !important;
            will-change: auto !important;
        }
        body.alert-modal-open #characterModal.active > .modal-content.character-modal,
        body.alert-modal-open #characterModal.active .char-slide-item,
        body.alert-modal-open #characterModal.active .char-hero,
        body.alert-modal-open #characterModal.active .char-hero-img,
        body.alert-modal-open #characterModal.active .char-hero-gradient {
            animation: none !important;
            will-change: auto !important;
        }
        body.creator-over-character-modal #characterModal.active {
            pointer-events: none !important;
            transition: none !important;
        }
        body.creator-over-character-modal #characterModal.active,
        body.creator-over-character-modal #characterModal.active *,
        body.creator-over-character-modal #characterModal.active *::before,
        body.creator-over-character-modal #characterModal.active *::after {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            filter: none !important;
            animation: none !important;
            transition: none !important;
            will-change: auto !important;
        }
        body.creator-over-character-modal #characterModal.active > .modal-content.character-modal {
            visibility: hidden !important;
            opacity: 0 !important;
            transform: none !important;
            pointer-events: none !important;
        }
        body.creator-over-character-modal #creatorProfileModal.active,
        body.creator-over-character-modal #creatorProfileModal.active > .modal-content.creator-profile-modal {
            transition: none !important;
        }
        body.creator-over-character-modal #creatorProfileModal.active > .modal-content.creator-profile-modal {
            transform: none !important;
        }
        #characterModal.is-deleted-status-modal,
        #creatorProfileModal.is-deleted-status-modal {
            isolation: isolate;
        }
        #characterModal.is-deleted-status-modal > .modal-content,
        #creatorProfileModal.is-deleted-status-modal > .modal-content {
            position: relative;
            z-index: 5;
            opacity: 1 !important;
            filter: none !important;
            transform: translateY(0) scale(1) !important;
        }
        #creatorProfileModal.is-deleted-status-modal > .modal-content.creator-profile-modal {
            background: var(--bg-primary);
        }
        #characterModal.is-deleted-status-modal > .modal-content::before,
        #characterModal.is-deleted-status-modal > .modal-content::after,
        #creatorProfileModal.is-deleted-status-modal > .modal-content::before,
        #creatorProfileModal.is-deleted-status-modal > .modal-content::after {
            display: none !important;
        }
        #characterModal.is-deleted-status-modal .modal-body,
        #creatorProfileModal.is-deleted-status-modal .modal-header,
        #creatorProfileModal.is-deleted-status-modal .modal-body,
        #creatorProfileModal.is-deleted-status-modal .modal-close {
            position: relative;
            z-index: 6;
            opacity: 1 !important;
            filter: none !important;
        }
        #characterModal.is-deleted-status-modal .char-ultra-overlay,
        #characterModal.is-deleted-status-modal .char-saucepan-recovery-overlay,
        #characterModal.is-deleted-status-modal .char-hero-gallery-loading-overlay,
        #characterModal.is-deleted-status-modal .character-navigation,
        #creatorProfileModal.is-deleted-status-modal .creator-profile-refresh-overlay {
            display: none !important;
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }
        .content-deleted-status {
            width: 100%;
            min-height: clamp(220px, 42vh, 420px);
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--space-8) var(--space-4);
            background: transparent;
            color: var(--text-primary);
            font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }
        .content-deleted-status-close {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: 999px;
            background: rgba(15, 17, 23, 0.62);
            color: rgba(255, 255, 255, 0.92);
            font-size: 28px;
            line-height: 1;
            cursor: pointer;
        }
        .content-deleted-status-close:hover,
        .content-deleted-status-close:focus-visible {
            border-color: rgba(244, 114, 182, 0.62);
            background: rgba(244, 114, 182, 0.18);
            outline: none;
        }
        .content-deleted-status-message {
            color: var(--text-primary);
            font-size: clamp(18px, 3vw, 28px);
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: 0;
            text-align: center;
            padding: 14px 18px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: var(--radius-md);
            background: rgba(255, 255, 255, 0.04);
        }
        .mine-folders-create {
            display: grid;
            grid-template-columns: 1fr 1fr auto;
            gap: var(--space-2);
            margin-bottom: var(--space-3);
        }
        .mine-folder-input {
            border: 1px solid var(--border-default);
            background: var(--bg-elevated);
            color: var(--text-primary);
            border-radius: var(--radius-sm);
            padding: 8px 10px;
            min-width: 0;
        }
        .mine-folders-manage-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .mine-folder-row {
            border: 1px solid var(--border-subtle);
            background: var(--bg-elevated);
            border-radius: var(--radius-sm);
            padding: 10px 12px;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 8px 10px;
            align-items: start;
        }
        .mine-folder-row-summary {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .mine-folder-row-titleline {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            min-width: 0;
        }
        .mine-folder-row-title {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .mine-folder-row-description {
            font-size: 0.76rem;
            color: var(--text-secondary);
            line-height: 1.25;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .mine-folder-row-description.is-empty {
            color: var(--text-muted);
            font-style: italic;
        }
        .mine-folder-row-actions {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
            align-self: start;
        }
        .mine-folder-row.is-reserved .mine-folder-row-actions,
        .mine-folder-row.is-reserved .mine-folder-row-editor {
            display: none !important;
        }
        .mine-folder-row-actions .btn-secondary,
        .mine-folder-row-actions .btn-danger {
            padding: 0.26rem 0.55rem;
            font-size: 0.72rem;
        }
        .mine-folder-row-count {
            color: var(--text-muted);
            font-size: 0.72rem;
            text-align: right;
            flex-shrink: 0;
        }
        .mine-folder-row-editor {
            display: grid;
            grid-template-columns: minmax(150px, 1fr) minmax(170px, 1fr) auto;
            gap: 8px;
            grid-column: 1 / -1;
            border-top: 1px solid var(--border-subtle);
            padding-top: 8px;
            margin-top: 2px;
            align-items: center;
        }
        .mine-folder-row-editor[hidden] {
            display: none !important;
        }
        .mine-folder-row-editor-actions {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .mine-folder-row-editor-actions .btn-primary,
        .mine-folder-row-editor-actions .btn-secondary {
            padding: 0.3rem 0.6rem;
            font-size: 0.75rem;
        }
        .mine-folder-empty {
            border: 1px dashed var(--border-subtle);
            border-radius: var(--radius-sm);
            color: var(--text-muted);
            padding: var(--space-3);
            text-align: center;
        }
        .yours-multi-download-modal {
            max-width: 760px;
        }
        .yours-multi-download-summary {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-bottom: var(--space-3);
        }
        .yours-multi-download-count {
            color: var(--text-primary);
            font-weight: 700;
            font-size: 0.98rem;
        }
        .yours-multi-download-context {
            color: var(--text-muted);
            font-size: 0.78rem;
            line-height: 1.35;
        }
        .yours-multi-download-format {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            padding: 4px;
            margin-bottom: var(--space-3);
        }
        .yours-multi-download-format button {
            border: 0;
            background: transparent;
            color: var(--text-secondary);
            border-radius: calc(var(--radius-sm) - 2px);
            padding: 7px 14px;
            font-size: 0.78rem;
            font-weight: 700;
            cursor: pointer;
        }
        .yours-multi-download-format button.active {
            background: rgba(236, 72, 153, 0.22);
            color: var(--text-primary);
        }
        .yours-multi-download-batches {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .yours-multi-download-batch {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 12px;
            align-items: center;
            border: 1px solid var(--border-subtle);
            background: var(--bg-elevated);
            border-radius: var(--radius-sm);
            padding: 12px;
        }
        .yours-multi-download-batch.is-ready {
            border-color: rgba(34, 197, 94, 0.38);
            background: rgba(34, 197, 94, 0.08);
        }
        .yours-multi-download-batch.is-failed {
            border-color: rgba(239, 68, 68, 0.38);
            background: rgba(239, 68, 68, 0.08);
        }
        .yours-multi-download-batch-main {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .yours-multi-download-batch-title {
            color: var(--text-primary);
            font-size: 0.88rem;
            font-weight: 700;
        }
        .yours-multi-download-batch-meta,
        .yours-multi-download-batch-status {
            color: var(--text-muted);
            font-size: 0.75rem;
            line-height: 1.3;
        }
        .yours-multi-download-batch-status {
            color: var(--text-secondary);
        }
        .yours-multi-download-batch-btn {
            white-space: nowrap;
            min-width: 118px;
            justify-content: center;
        }
        .yours-multi-download-empty {
            border: 1px dashed var(--border-subtle);
            border-radius: var(--radius-sm);
            color: var(--text-muted);
            padding: var(--space-4);
            text-align: center;
        }
        @media (max-width: 768px) {
            .mine-folders-create {
                grid-template-columns: 1fr;
            }
            .mine-folder-row {
                grid-template-columns: 1fr;
            }
            .mine-folder-row-actions {
                justify-content: flex-start;
            }
            .mine-folder-row-editor {
                grid-template-columns: 1fr;
            }
            .mine-folder-row-editor-actions {
                justify-content: flex-end;
            }
            .yours-multi-download-batch {
                grid-template-columns: 1fr;
            }
            .yours-multi-download-batch-btn {
                width: 100%;
            }
        }

        /* ========================================
           CHARACTER MODAL - REDESIGNED
           ======================================== */
        .character-modal .modal-content {
            max-width: 800px;
            max-height: 70vh;
            background: var(--bg-base);
            border: none;
            box-shadow: var(--shadow-xl);
            position: relative; /* For absolute nav buttons */
        }
        /* Desktop: Fixed height at 80vh */
        @media (min-width: 769px) {
            .character-modal .modal-content {
                height: 80vh;
                max-height: 80vh;
            }
        }
        .character-modal .modal-header {
            display: none; /* Hide default header, we use custom */
        }
        .character-modal .modal-body {
            padding: 0;
            overflow: hidden;
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
            background: var(--bg-base);
            isolation: isolate;
        }
        /* Desktop: Allow nav buttons outside */
        @media (min-width: 769px) {
            .character-modal .modal-body {
                overflow: visible;
            }
        }

        /* Modal buffering indicator for character loads */
        /* Spinner handled by .character-loading for a single centered indicator */
        
        /* TikTok-style character slider container - MOBILE ONLY */
        @media (max-width: 768px) {
            .char-slider-container {
                position: relative;
                width: 100%;
                height: 100%;
                overflow: hidden;
                touch-action: pan-y;
                background: var(--bg-base);
            }
            
            .char-slide-item {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                background: var(--bg-base);
            }

            .char-slide-item:not(.active) {
                pointer-events: none;
            }
            
            .char-slide-item.active {
                z-index: 1;
                pointer-events: auto;
            }
            
            .char-slide-item.prev {
                transform: translateY(-100%);
                z-index: 0;
            }
            
            .char-slide-item.next {
                transform: translateY(100%);
                z-index: 0;
            }
            
            .char-slide-item.swiping {
                transition: none; /* Disable transition during swipe for real-time movement */
            }

            .char-swipe-loading {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background:
                    radial-gradient(circle at center, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 34%),
                    #17181c;
                border-top: 0;
                box-shadow: none;
            }

            .char-swipe-loading-inner {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
            }

            .char-swipe-loading-hero {
                width: 100%;
                flex: 0 0 42%;
                background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
            }

            .char-swipe-loading-body {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 12px;
                padding: 20px 16px 24px;
            }

            .char-swipe-loading-line {
                height: 14px;
                border-radius: 999px;
                background: rgba(255,255,255,0.08);
            }

            .char-swipe-loading-line.wide {
                width: 84%;
            }

            .char-swipe-loading-line.medium {
                width: 62%;
            }

            .char-swipe-loading-line.short {
                width: 38%;
            }

            .char-swipe-loading-label {
                margin-top: auto;
                font-size: 0.875rem;
                color: var(--text-secondary);
                text-align: center;
                opacity: 0.9;
            }

            .char-slide-item.pending-swipe-loading .char-swipe-loading-label,
            .char-slide-item[data-loading="true"] .char-swipe-loading-label {
                color: var(--text-primary);
                font-weight: 600;
            }

            /* Boundary notification */
            .char-boundary-notification {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(0.8);
                background: rgba(0, 0, 0, 0.85);
                color: var(--text-primary);
                padding: var(--space-3) var(--space-5);
                border-radius: var(--radius-lg);
                font-size: 0.9375rem;
                font-weight: 500;
                z-index: 100;
                pointer-events: none;
                opacity: 0;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
                white-space: nowrap;
            }
            
            .char-boundary-notification.show {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
            
            .char-boundary-notification span {
                display: inline-flex;
                align-items: center;
                gap: var(--space-2);
            }

        }
        .mobile-swipe-debug-overlay {
            position: absolute;
            left: 50%;
            bottom: calc(env(safe-area-inset-bottom, 0px) * 0.35);
            transform: translateX(-50%);
            z-index: 6;
            display: flex;
            align-items: center;
            pointer-events: none;
            padding: 1px 3px 0;
            border-radius: 999px 999px 0 0;
            background: rgba(10, 10, 14, 0.48);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
        }

        .mobile-swipe-debug-track {
            display: flex;
            align-items: center;
            gap: 2px;
        }

        .mobile-swipe-debug-dot {
            width: 8px;
            height: 3px;
            border-radius: 999px;
            background: rgba(255, 79, 163, 0.42);
            box-shadow: none;
            opacity: 0.8;
        }

        .mobile-swipe-debug-dot.state-ready {
            background: rgba(59, 232, 255, 0.48);
            box-shadow: none;
        }

        .mobile-swipe-debug-dot.state-loading {
            background: rgba(255, 209, 102, 0.44);
            box-shadow: none;
        }

        .mobile-swipe-debug-dot.state-active {
            background: rgba(255, 255, 255, 0.78);
            box-shadow: 0 0 0 1px rgba(59, 232, 255, 0.34);
        }

        .mobile-swipe-debug-dot.state-oob {
            background: rgba(255,255,255,0.14);
            box-shadow: none;
            opacity: 0.45;
        }
        /* Header row with title, name/author, close button */
        .char-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: var(--space-3);
            padding: var(--space-3) var(--space-4);
            background: var(--bg-elevated);
            border-bottom: 1px solid var(--border-subtle);
            flex-shrink: 0;
        }
        .char-header-text {
            flex: 1 1 auto;
            min-width: 0;
        }
        /* Main content area with image and info side by side */
        .char-main {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            flex: 1;
            min-height: 0;
            overflow: visible;
            position: relative; /* For absolute positioning of slide-up container and nav buttons */
            background: var(--bg-base);
        }
        /* Desktop: char-main fills remaining height after header */
        @media (min-width: 769px) {
            .char-main {
                flex: 1;
                min-height: 0;
                overflow: hidden;
            }
        }
        .character-loading {
            text-align: center;
            color: var(--text-secondary);
            padding: var(--space-8);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 400px;
            background: #2a2a2d;
            border-radius: var(--radius-md);
        }
        .character-loading--full {
            height: 100%;
            min-height: 240px;
        }
        .char-tab-panel-content.is-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            min-height: 160px;
        }
        .char-tab-loading-spinner {
            width: 28px;
            height: 28px;
            border-width: 3px;
        }
        .character-skeleton-grid {
            display: flex;
            gap: var(--space-4);
            align-items: flex-start;
        }
        .character-skeleton-column {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: var(--space-4);
        }
        .character-skeleton-card {
            display: inline-block;
            width: 100%;
            background: transparent;
            border: none;
            border-radius: var(--radius-lg);
            overflow: hidden;
        }
        .character-skeleton-avatar-wrap {
            position: relative;
            border-radius: var(--radius-lg);
            overflow: hidden;
            background: var(--bg-subtle);
        }
        .character-skeleton-avatar {
            width: 100%;
            aspect-ratio: auto;
            height: auto;
            min-height: 200px;
            max-height: 420px;
            background: #2a2a2d;
            border-radius: var(--radius-lg);
        }
        .character-skeleton-details {
            padding: var(--space-1) var(--space-3) var(--space-2);
        }
        .character-skeleton-name {
            height: 14px;
            background: #2a2a2d;
            border-radius: var(--radius-sm);
            margin-bottom: var(--space-2);
        }
        .character-skeleton-meta {
            height: 10px;
            width: 60%;
            background: #2a2a2d;
            border-radius: var(--radius-sm);
        }
        .char-desc-img {
            display: block;
            max-width: 100%;
            height: auto;
        }
        .char-desc-img.deferred {
            min-height: 180px;
            background: #2a2a2d;
            border-radius: var(--radius-md);
        }
        /* TEMP: commented out for cache testing
        .char-desc .char-desc-img.deferred {
            display: none;
        }
        */
        .skeleton-shimmer {
            position: relative;
            overflow: hidden;
        }
        .skeleton-shimmer::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.08),
                transparent
            );
            transform: translateX(-100%);
            animation: shimmer 1.5s infinite;
            will-change: transform;
        }
        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        /* Hero Avatar Section */
        .char-hero {
            position: relative;
            width: 330px;
            min-width: 330px;
            max-width: 330px;
            overflow: hidden;
            background: var(--bg-base);
            flex-shrink: 0;
            align-self: stretch;
            -webkit-tap-highlight-color: transparent;
        }
        /* Desktop: Ensure char-hero stretches to fill available height */
        @media (min-width: 769px) {
            .char-hero {
                align-self: stretch;
            }
        }
        .char-hero-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            display: block; /* Remove inline spacing */
            -webkit-user-select: none;
            user-select: none;
            -webkit-user-drag: none;
            user-drag: none;
        }
        /* Desktop: Ensure image fills container and crops properly - zoom in if image is shorter */
        @media (min-width: 769px) {
            .char-hero-img {
                min-width: 100%; /* Ensure width fills */
                min-height: 100%; /* Force image to fill container height - will zoom in if needed */
                width: 100%;
                height: 100%;
                object-fit: cover; /* Crop and scale to fill - zooms in shorter images */
                object-position: center top; /* Align to top, crop from bottom */
            }
        }
        @media (min-width: 769px) {
            .char-hero.char-hero--cover-top .char-hero-img {
                min-width: 100%;
                min-height: 100%;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center top;
            }
            .char-hero.char-hero--contain {
                background: #000;
            }
            .char-hero.char-hero--contain .char-hero-img {
                min-width: 0;
                min-height: 0;
                width: 100%;
                height: 100%;
                object-fit: contain;
                object-position: center center;
            }
            .char-hero.char-hero--capped-crop {
                background: #000;
            }
            .char-hero.char-hero--capped-crop .char-hero-img {
                min-width: 0;
                min-height: 0;
                width: 100%;
                height: 100%;
                object-fit: contain;
                object-position: center center;
                transform: scale(var(--char-hero-capped-scale, 1.4925));
                transform-origin: center center;
            }
        }
        .char-hero-gradient {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 30%;
            background: linear-gradient(to top, var(--bg-base) 0%, transparent 100%);
            pointer-events: none;
            display: none; /* Hide on desktop side-by-side */
        }
        .char-hero-gallery-controls {
            position: absolute;
            left: var(--space-3);
            right: var(--space-3);
            top: 50%;
            transform: translateY(-50%);
            z-index: 7;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            pointer-events: none;
        }
        .char-hero-gallery-caption-wrap {
            position: absolute;
            left: var(--space-3);
            bottom: calc(var(--space-3) + 38px);
            z-index: 7;
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            pointer-events: none;
        }
        .char-hero-gallery-btn {
            width: 36px;
            height: 36px;
            border: 1px solid rgba(255, 255, 255, 0.46);
            border-radius: 999px;
            background: rgba(7, 10, 18, 0.82);
            color: rgba(255, 255, 255, 0.96);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            pointer-events: auto;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
        }
        .char-hero-gallery-btn:hover {
            transform: translateY(-1px);
            background: rgba(15, 23, 42, 0.84);
            border-color: rgba(255, 255, 255, 0.72);
        }
        .char-hero-gallery-btn:disabled {
            cursor: wait;
            opacity: 0.62;
            transform: none;
        }
        .char-hero-gallery-btn i {
            pointer-events: none;
            font-size: 0.86rem;
        }
        .char-hero-gallery-meta {
            display: none;
        }
        .char-hero-gallery-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            max-width: 210px;
            padding: 0.38rem 0.7rem 0.42rem;
            border-radius: 999px;
            background: rgba(7, 10, 18, 0.84);
            color: rgba(255, 255, 255, 0.94);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            font-size: 0.64rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            line-height: 1.1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .char-hero-gallery-loading-overlay {
            position: absolute;
            inset: 0;
            z-index: 5;
            display: none;
            align-items: center;
            justify-content: center;
            background: transparent;
            pointer-events: none;
        }
        .char-hero-gallery-loading-spinner {
            width: 34px;
            height: 34px;
            border-radius: 999px;
            border: 2px solid rgba(255, 255, 255, 0.24);
            border-top-color: rgba(255, 255, 255, 0.95);
            animation: charUltraSpin 0.9s linear infinite;
            box-shadow: 0 0 0 999px rgba(6, 10, 18, 0.18);
        }
        .char-hero.char-hero--gallery-loading .char-hero-gallery-loading-overlay {
            display: flex;
        }
        .char-hero.char-hero--gallery-loading .char-hero-img {
            filter: saturate(0.88) brightness(0.62);
        }
        .char-hero.char-hero--with-recovery {
            --char-hero-recovery-offset: 62px;
        }
        .char-hero.char-hero--with-recovery .char-hero-fulltext-wrap {
            bottom: calc(var(--space-3) + var(--char-hero-recovery-offset));
        }
        .char-hero.char-hero--with-recovery .char-hero-gallery-caption-wrap {
            bottom: calc(var(--space-3) + var(--char-hero-recovery-offset) + 38px);
        }
        .char-hero.char-hero--with-recovery .char-hero-badges .char-score-badge {
            bottom: calc(var(--space-3) + var(--char-hero-recovery-offset));
        }
        .char-hero.char-hero--with-recovery .char-hero-token-badge {
            bottom: calc(4px + var(--char-hero-recovery-offset));
        }
        .char-hero.char-hero--with-recovery .char-hero-degraded-badge-wrap {
            bottom: calc(20px + var(--char-hero-recovery-offset));
        }
        .char-desc-degraded-banner {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 14;
            display: flex;
            flex-direction: column;
            gap: 0.36rem;
            margin: 0;
            padding: 0.42rem 0.58rem 0.5rem;
            border-radius: 0;
            border-top: 1px solid rgba(255, 255, 255, 0.24);
            background: rgba(219, 39, 119, 0.94);
            color: #ffffff;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
            pointer-events: auto;
        }
        .char-desc-degraded-banner[hidden] {
            display: none !important;
        }
        .char-desc-degraded-banner.is-hidden {
            display: none !important;
        }
        .char-desc-degraded-banner-cta {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: auto;
        }
        .char-saucepan-recovery-banner-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.32rem;
            width: 100%;
        }
        .char-saucepan-recovery-current {
            flex: 1 1 auto;
            min-width: 0;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            grid-template-rows: auto auto;
            align-items: center;
            column-gap: 0.18rem;
            row-gap: 0.08rem;
            min-width: 0;
        }
        .char-saucepan-recovery-current-label {
            grid-column: 1;
            grid-row: 1;
            font-size: 0.54rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(255, 241, 247, 0.72);
        }
        .char-saucepan-recovery-current-value {
            grid-column: 1;
            grid-row: 2;
            min-width: 0;
            font-size: 0.72rem;
            font-weight: 700;
            line-height: 1.2;
            color: rgba(255, 255, 255, 0.96);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .char-saucepan-recovery-current-score {
            grid-column: 2;
            grid-row: 1 / span 2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            align-self: center;
        }
        .char-saucepan-recovery-banner-controls .char-saucepan-recovery-browse-btn {
            flex: 0 0 auto;
        }
        .char-saucepan-recovery-banner-controls .char-saucepan-recovery-browse-btn.is-compact {
            min-width: 60px;
            padding: 0.48rem 0.34rem;
            border-width: 1px;
        }
        .char-saucepan-recovery-current .saucepan-recovery-table-score {
            flex: 0 0 auto;
            min-width: 46px;
            padding: 0.18rem 0.16rem;
        }
        .char-desc-degraded-ultra-btn {
            appearance: none;
            border: 1px solid rgba(255, 255, 255, 0.62);
            border-radius: 999px;
            background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 58%, #1d4ed8 100%);
            color: #ffffff;
            font-size: 0.62rem;
            font-weight: 800;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            line-height: 1;
            padding: 0.3rem 0.72rem;
            min-width: 160px;
            text-align: center;
            cursor: pointer;
            white-space: nowrap;
            box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.34), 0 4px 12px rgba(29, 78, 216, 0.36);
            transition: filter var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
        }
        .char-desc-degraded-ultra-btn:hover {
            filter: brightness(1.08) saturate(1.08);
            transform: translateY(-1px);
            box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.5), 0 7px 16px rgba(29, 78, 216, 0.45);
        }
        .char-desc-degraded-ultra-btn:disabled {
            opacity: 0.74;
            cursor: wait;
            transform: none;
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
        }
        .char-desc-degraded-banner-help {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.38rem;
            margin: 0;
            text-align: center;
        }
        .char-desc-degraded-banner-help-text {
            margin: 0;
            font-size: calc(0.64rem + 1pt);
            line-height: 1.32;
            letter-spacing: 0.01em;
            color: rgba(255, 241, 247, 0.96);
            text-align: center;
        }
        .saucepan-recovery-panel {
            display: flex;
            flex-direction: column;
            gap: 0.42rem;
            width: 100%;
            height: auto;
            min-height: 0;
            position: relative;
            overflow: visible;
            isolation: isolate;
        }
        .saucepan-recovery-experimental-banner {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            border: 1px solid rgba(255, 196, 87, 0.46);
            border-radius: 0.78rem;
            padding: 0.52rem 0.68rem;
            background: linear-gradient(135deg, rgba(255, 196, 87, 0.18), rgba(255, 96, 96, 0.13));
            color: rgba(255, 239, 204, 0.98);
            font-size: 0.72rem;
            font-weight: 900;
            letter-spacing: 0.08em;
            line-height: 1.2;
            text-align: center;
            text-transform: uppercase;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 24px rgba(0, 0, 0, 0.18);
        }
        .saucepan-recovery-global-note {
            border: 1px solid rgba(110, 231, 183, 0.28);
            border-radius: 0.78rem;
            padding: 0.54rem 0.68rem;
            background: rgba(16, 185, 129, 0.1);
            color: rgba(217, 255, 241, 0.92);
            font-size: 0.76rem;
            font-weight: 750;
            line-height: 1.35;
        }
        .saucepan-recovery-controls {
            display: flex;
            flex-direction: column;
            gap: 0.48rem;
            align-items: stretch;
            flex: 0 0 auto;
        }
        .saucepan-recovery-controls-header {
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(255, 241, 247, 0.8);
        }
        .saucepan-recovery-controls-form {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
            gap: 0.42rem;
            align-items: stretch;
        }
        .saucepan-recovery-field {
            display: flex;
            flex-direction: column;
            gap: 0.28rem;
            min-width: 0;
        }
        .saucepan-recovery-field-label {
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.68);
        }
        .saucepan-recovery-controls .saucepan-recovery-picker {
            position: relative;
            display: block;
            min-width: 0;
            z-index: 120;
        }
        .saucepan-recovery-controls .saucepan-recovery-picker.open {
            z-index: 140;
        }
        .saucepan-recovery-controls .saucepan-recovery-picker-btn {
            width: 100%;
            min-width: 0;
            min-height: 38px;
            font-size: 0.78rem;
            background: #1c1d22;
            background-color: #1c1d22;
            border-color: rgba(255, 255, 255, 0.14);
        }
        .saucepan-recovery-controls .saucepan-recovery-picker-menu {
            position: absolute;
            top: calc(100% + 0.32rem);
            left: 0;
            width: 100%;
            max-width: none;
            min-width: 100%;
            margin-top: 0;
            max-height: min(240px, 45vh);
            overflow-y: auto;
            z-index: 80;
            background: #1c1d22;
            background-color: #1c1d22;
            border-color: rgba(255, 255, 255, 0.14);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        .saucepan-recovery-controls .saucepan-recovery-picker-menu .saucepan-recovery-picker-option {
            white-space: normal;
            background: transparent;
        }
        .saucepan-recovery-controls .saucepan-recovery-picker-menu .saucepan-recovery-picker-option.active {
            font-weight: 600;
        }
        .saucepan-recovery-run-btn,
        .saucepan-recovery-candidate-btn {
            appearance: none;
            border: 1px solid rgba(255, 255, 255, 0.22);
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            border-radius: 999px;
            padding: 0.38rem 0.72rem;
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            cursor: pointer;
            white-space: nowrap;
        }
        .saucepan-recovery-run-btn {
            min-height: 38px;
            min-width: 92px;
            width: auto;
            margin-top: 0;
            align-self: end;
            justify-self: end;
            padding-left: 0.78rem;
            padding-right: 0.78rem;
        }
        .saucepan-recovery-candidate-btn.is-secondary {
            background: transparent;
        }
        .saucepan-recovery-run-btn:disabled,
        .saucepan-recovery-candidate-btn:disabled {
            opacity: 0.55;
            cursor: wait;
        }
        .saucepan-recovery-candidates {
            display: flex;
            flex-direction: column;
            gap: 0;
            flex: 0 0 auto;
            min-height: auto;
            max-height: none;
            overflow: visible;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 0;
            background: rgba(4, 8, 16, 0.52);
        }
        .saucepan-recovery-table-wrap {
            display: block;
            overflow-x: auto;
        }
        .saucepan-recovery-table {
            width: 100%;
            border-collapse: collapse;
        }
        .saucepan-recovery-table th,
        .saucepan-recovery-table td {
            vertical-align: top;
            padding: 0.34rem 0.42rem;
            font-size: 0.78rem;
            line-height: 1.35;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }
        .saucepan-recovery-table tbody tr:last-child td {
            border-bottom: none;
        }
        .saucepan-recovery-table th {
            color: rgba(255, 255, 255, 0.44);
            font-size: 0.72rem;
            font-weight: 700;
            text-align: left;
            white-space: nowrap;
            background: rgba(255, 255, 255, 0.03);
        }
        .saucepan-recovery-table th.col-status,
        .saucepan-recovery-table th.col-score,
        .saucepan-recovery-table th.col-actions,
        .saucepan-recovery-table td.col-status,
        .saucepan-recovery-table td.col-score,
        .saucepan-recovery-table td.col-actions {
            text-align: center;
        }
        .saucepan-recovery-table th.col-requested,
        .saucepan-recovery-table td.col-requested {
            white-space: nowrap;
        }
        .saucepan-recovery-table-row.is-clickable {
            cursor: pointer;
        }
        .saucepan-recovery-table-row.is-selected td {
            background: linear-gradient(180deg, rgba(99, 15, 57, 0.46) 0%, rgba(67, 14, 42, 0.4) 100%);
        }
        .saucepan-recovery-table-main {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.14rem;
            min-width: 0;
        }
        .saucepan-recovery-table-main-top {
            display: flex;
            align-items: center;
            gap: 0.26rem;
            min-width: 0;
        }
        .saucepan-recovery-table-main-sub {
            display: flex;
            align-items: center;
            gap: 0.24rem;
            min-width: 0;
        }
        .saucepan-recovery-table-title {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.79rem;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.96);
        }
        .saucepan-recovery-status-stack {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            gap: 0.12rem;
        }
        .saucepan-recovery-mobile-list {
            display: none;
        }
        .saucepan-recovery-mobile-item {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto auto;
            gap: 0.44rem;
            align-items: center;
            padding: 0.34rem 0.42rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }
        .saucepan-recovery-mobile-item:last-child {
            border-bottom: none;
        }
        .saucepan-recovery-mobile-item.is-clickable {
            cursor: pointer;
        }
        .saucepan-recovery-mobile-item.is-selected {
            background: linear-gradient(180deg, rgba(99, 15, 57, 0.46) 0%, rgba(67, 14, 42, 0.4) 100%);
        }
        .saucepan-recovery-mobile-left {
            min-width: 0;
        }
        .saucepan-recovery-mobile-middle {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.1rem;
            min-width: 0;
        }
        .saucepan-recovery-mobile-right {
            display: inline-flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 0.08rem;
        }
        .saucepan-recovery-mobile-actions {
            display: inline-flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0.08rem;
        }
        .saucepan-recovery-mobile-line {
            font-size: 0.76rem;
            line-height: 1.3;
            min-width: 0;
        }
        .saucepan-recovery-mobile-line--top {
            display: flex;
            align-items: center;
            gap: 0.28rem;
            flex-wrap: wrap;
        }
        .saucepan-recovery-mobile-requested {
            color: rgba(255, 255, 255, 0.78);
        }
        .saucepan-recovery-mobile-line--strategy {
            display: flex;
            align-items: center;
            gap: 0.24rem;
            flex-wrap: wrap;
            margin-top: 0.08rem;
        }
        .saucepan-recovery-mobile-strategy-text {
            font-size: 0.78rem;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.95);
        }
        .saucepan-recovery-mobile-line--score {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .saucepan-recovery-candidate-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.12rem 0.4rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.12);
            font-size: 0.6rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }
        .saucepan-recovery-candidate-chip.is-verdict {
            background: rgba(96, 165, 250, 0.2);
            color: rgba(219, 234, 254, 0.96);
        }
        .saucepan-recovery-candidate-chip.is-selected-inline {
            background: rgba(244, 114, 182, 0.24);
            border: 1px solid rgba(244, 114, 182, 0.38);
            color: rgba(251, 207, 232, 0.98);
            flex-shrink: 0;
        }
        .saucepan-recovery-candidate-chip.is-score {
            background: rgba(255, 255, 255, 0.1);
        }
        .saucepan-recovery-candidate-chip[data-state="completed"],
        .saucepan-recovery-candidate-chip.is-applied {
            background: rgba(34, 197, 94, 0.24);
        }
        .saucepan-recovery-candidate-chip[data-state="partial"] {
            background: rgba(245, 158, 11, 0.24);
        }
        .saucepan-recovery-candidate-chip.is-secondary {
            background: rgba(96, 165, 250, 0.18);
        }
        .saucepan-recovery-candidate-chip[data-state="failed"] {
            background: rgba(239, 68, 68, 0.22);
        }
        .saucepan-recovery-inline-score {
            display: inline-flex;
            align-items: center;
            gap: 0.26rem;
            min-height: 1.4rem;
            padding: 0.16rem 0.42rem;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(10, 15, 24, 0.88);
            color: #fff;
            white-space: nowrap;
        }
        .saucepan-recovery-inline-score.is-tier-s {
            border-color: rgba(74, 222, 128, 0.4);
            background: rgba(8, 29, 23, 0.9);
        }
        .saucepan-recovery-inline-score.is-tier-a {
            border-color: rgba(250, 204, 21, 0.4);
            background: rgba(38, 34, 8, 0.92);
        }
        .saucepan-recovery-inline-score.is-tier-b,
        .saucepan-recovery-inline-score.is-tier-c,
        .saucepan-recovery-inline-score.is-tier-d,
        .saucepan-recovery-inline-score.is-state {
            border-color: rgba(148, 163, 184, 0.26);
            background: rgba(15, 23, 42, 0.9);
        }
        .saucepan-recovery-inline-score-main {
            font-size: 0.66rem;
            line-height: 1;
            font-weight: 800;
            color: #fff;
        }
        .saucepan-recovery-inline-score-niche {
            display: inline-flex;
            align-items: center;
            gap: 0.12rem;
            font-size: 0.58rem;
            line-height: 1;
            font-weight: 700;
            color: #fff;
        }
        .saucepan-recovery-inline-score-niche-mark {
            width: 0.62rem;
            height: 0.62rem;
            display: inline-block;
            border-radius: 999px;
            background: linear-gradient(135deg, #fda4af 0%, #fb7185 100%);
            position: relative;
        }
        .saucepan-recovery-inline-score-niche-mark::before {
            content: '+';
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.44rem;
            font-weight: 900;
            color: #fff;
        }
        .saucepan-recovery-score-action-btn {
            appearance: none;
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: rgba(255, 255, 255, 0.08);
            color: #fff;
            border-radius: 999px;
            padding: 0.18rem 0.5rem;
            font-size: 0.58rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            cursor: pointer;
        }
        .saucepan-recovery-table-score {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.06rem;
            min-width: 44px;
            min-height: 32px;
            padding: 0.14rem 0.08rem;
            border-radius: 9px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: rgba(10, 15, 24, 0.9);
            color: #fff;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
            white-space: nowrap;
        }
        .saucepan-recovery-table-score.is-action {
            appearance: none;
            cursor: pointer;
        }
        .saucepan-recovery-table-score.is-action:disabled {
            opacity: 0.55;
            cursor: wait;
        }
        .saucepan-recovery-table-score.is-disabled {
            opacity: 0.62;
        }
        .saucepan-recovery-table-score.is-tier-s {
            background: linear-gradient(180deg, rgba(8, 29, 23, 0.96) 0%, rgba(7, 20, 17, 0.96) 100%);
            border-color: rgba(74, 222, 128, 0.44);
        }
        .saucepan-recovery-table-score.is-tier-a {
            background: linear-gradient(180deg, rgba(26, 29, 8, 0.96) 0%, rgba(20, 20, 7, 0.96) 100%);
            border-color: rgba(250, 204, 21, 0.42);
        }
        .saucepan-recovery-table-score.is-tier-b,
        .saucepan-recovery-table-score.is-tier-c,
        .saucepan-recovery-table-score.is-tier-d {
            background: linear-gradient(180deg, rgba(16, 20, 29, 0.96) 0%, rgba(10, 14, 20, 0.96) 100%);
            border-color: rgba(148, 163, 184, 0.32);
        }
        .saucepan-recovery-table-score-main {
            font-size: 0.64rem;
            line-height: 1;
            font-weight: 800;
            letter-spacing: 0.01em;
            color: #fff;
        }
        .saucepan-recovery-table-score-niche {
            font-size: 0.46rem;
            line-height: 1;
            font-weight: 700;
            color: #fff;
            display: inline-flex;
            align-items: center;
            gap: 0.12rem;
        }
        .saucepan-recovery-table-score-niche-mark {
            width: 6px;
            height: 6px;
            display: inline-block;
            background: #f59e0b;
            opacity: 0.95;
            transform: rotate(45deg);
            border-radius: 1px;
        }
        .saucepan-recovery-candidate-subtext,
        .saucepan-recovery-candidate-error,
        .saucepan-recovery-candidates-empty,
        .saucepan-recovery-candidate-secondary {
            font-size: 0.72rem;
            line-height: 1.45;
            color: rgba(255, 255, 255, 0.74);
        }
        .saucepan-recovery-candidate-icon-btn {
            appearance: none;
            border: 1px solid rgba(255, 255, 255, 0.16);
            background: rgba(255, 255, 255, 0.08);
            color: #fff;
            border-radius: 10px;
            width: 42px;
            height: 38px;
            padding: 0;
            font-size: 0.68rem;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .saucepan-recovery-candidate-icon-btn:disabled {
            opacity: 0.55;
            cursor: wait;
        }
        .saucepan-recovery-candidate-icon-btn {
            min-width: 42px;
        }
        .saucepan-recovery-candidate-icon-btn.is-view {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.18);
        }
        .saucepan-recovery-candidate-icon-btn.is-view svg {
            width: 18px;
            height: 18px;
            display: block;
        }
        .saucepan-recovery-candidate-icon-btn.is-danger {
            border-color: rgba(248, 113, 113, 0.5);
            background: rgba(127, 29, 29, 0.58);
            color: rgba(254, 226, 226, 0.98);
            font-size: 1rem;
            line-height: 1;
        }
        .saucepan-recovery-table-action-icon {
            appearance: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            padding: 0;
            border: none;
            background: transparent;
            color: rgba(255, 255, 255, 0.92);
            cursor: pointer;
        }
        .saucepan-recovery-table-action-icon svg {
            width: 19px;
            height: 19px;
            display: block;
        }
        .saucepan-recovery-table-action-icon.is-danger {
            color: rgba(248, 113, 113, 0.98);
            font-size: 2.2rem;
            line-height: 1;
            font-weight: 700;
        }
        .saucepan-recovery-table-action-icon:disabled {
            opacity: 0.4;
            cursor: wait;
        }
        .saucepan-recovery-table td.col-actions {
            white-space: nowrap;
        }
        .saucepan-recovery-table td.col-actions,
        .saucepan-recovery-table td.col-status,
        .saucepan-recovery-table td.col-score {
            vertical-align: middle;
        }
        .saucepan-recovery-table td.col-status {
            min-width: 92px;
        }
        .saucepan-recovery-table td.col-score {
            min-width: 72px;
        }
        .saucepan-recovery-table td.col-actions {
            width: 58px;
        }
        .saucepan-recovery-table td.col-actions .saucepan-recovery-table-action-icon {
            display: inline-flex;
            margin: 0 0.14rem 0 0;
        }
        .saucepan-recovery-table td.col-actions .saucepan-recovery-table-action-icon:last-child {
            margin-right: 0;
        }
        .saucepan-recovery-candidate-error {
            color: rgba(255, 208, 208, 0.94);
        }
        .char-saucepan-recovery-overlay {
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 50% 42%, rgba(96, 165, 250, 0.10), transparent 18rem),
                rgba(2, 6, 23, 0.88);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            z-index: 1105;
            pointer-events: auto;
            transform: translateZ(0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            will-change: opacity, transform;
        }
        .char-saucepan-recovery-overlay.is-active {
            display: flex;
        }
        .char-saucepan-recovery-overlay-card {
            width: min(92%, 320px);
            border-radius: 14px;
            border: 1.5px solid rgba(96, 165, 250, 0.7);
            background: linear-gradient(180deg, rgba(10, 18, 36, 0.96) 0%, rgba(7, 12, 26, 0.96) 100%);
            box-shadow: 0 14px 34px rgba(2, 6, 23, 0.54), 0 0 0 1px rgba(96, 165, 250, 0.16);
            padding: 1rem 0.95rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.55rem;
            text-align: center;
        }
        .char-saucepan-recovery-overlay-spinner {
            width: 32px;
            height: 32px;
            border-radius: 999px;
            border: 2px solid rgba(191, 219, 254, 0.25);
            border-top-color: #60a5fa;
            animation: charUltraSpin 0.9s linear infinite;
            flex-shrink: 0;
        }
        .char-saucepan-recovery-overlay-title {
            font-size: 0.92rem;
            line-height: 1.25;
            font-weight: 800;
            letter-spacing: 0.01em;
            color: #eff6ff;
        }
        .char-saucepan-recovery-overlay-message {
            font-size: 0.68rem;
            line-height: 1.45;
            color: rgba(219, 234, 254, 0.86);
            max-width: 28ch;
        }
        .char-ultra-overlay {
            position: absolute;
            inset: 0;
            background: rgba(2, 6, 23, 0.92);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            z-index: 1201;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            isolation: isolate;
            contain: paint;
            transform: translateZ(0);
        }
        .char-ultra-overlay.is-active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        .character-modal.is-character-operation-blocking .char-hero,
        .character-modal.is-character-operation-blocking .char-info,
        .character-modal.is-character-operation-blocking .char-slideup-container,
        .character-modal.is-character-operation-blocking .char-tab-selector,
        .character-modal.is-character-operation-blocking .char-chat-launch,
        .character-modal.is-character-operation-blocking .char-save-dropdown,
        .character-modal.is-character-operation-blocking .char-download-dropdown,
        .character-modal.is-character-operation-blocking .char-version-inline,
        .character-modal.is-character-operation-blocking .char-source-link,
        .character-modal.is-character-operation-blocking [data-character-sources-panel="1"],
        .character-modal.is-character-operation-blocking [data-recovery-panel="1"] {
            pointer-events: none;
        }
        .char-ultra-overlay-card {
            width: min(92%, 290px);
            max-height: 82%;
            position: relative;
            border-radius: 12px;
            border: 1.5px solid rgba(236, 72, 153, 0.85);
            background: linear-gradient(180deg, rgba(33, 9, 26, 0.94) 0%, rgba(20, 7, 19, 0.94) 100%);
            box-shadow: 0 12px 28px rgba(2, 6, 23, 0.54), 0 0 0 1px rgba(236, 72, 153, 0.24);
            padding: 0.8rem 0.82rem 1.45rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
        }
        .char-ultra-overlay-title {
            margin: 0;
            font-size: 0.88rem;
            line-height: 1.24;
            letter-spacing: 0.01em;
            font-weight: 700;
            color: #fdf2f8;
            text-align: center;
        }
        .char-ultra-overlay-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.18rem;
            padding: 0.07rem 0.44rem 0.1rem;
            border-radius: 999px;
            border: 1px solid rgba(251, 207, 232, 0.72);
            background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
            color: #ffffff;
            font-size: 0.68em;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            white-space: nowrap;
            vertical-align: middle;
        }
        .char-ultra-overlay-badge-bolt {
            display: inline-block;
            font-size: 0.96em;
            line-height: 1;
        }
        .char-ultra-overlay-spinner {
            width: 30px;
            height: 30px;
            border-radius: 999px;
            border: 2px solid rgba(251, 207, 232, 0.32);
            border-top-color: #ec4899;
            animation: charUltraSpin 0.9s linear infinite;
            flex-shrink: 0;
        }
        .char-ultra-overlay-complete {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.48rem;
            text-align: center;
        }
        .char-ultra-overlay-complete[hidden] {
            display: none !important;
        }
        .char-ultra-overlay-complete-text {
            font-size: 1rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            color: #fdf2f8;
        }
        .char-ultra-overlay-ok-btn {
            appearance: none;
            border: 1px solid rgba(187, 247, 208, 0.9);
            border-radius: 999px;
            background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
            color: #f0fdf4;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            line-height: 1;
            padding: 0.4rem 0.98rem 0.44rem;
            cursor: pointer;
            box-shadow: 0 6px 16px rgba(21, 128, 61, 0.3);
        }
        .char-ultra-overlay-ok-btn:hover {
            filter: brightness(1.05);
        }
        .char-ultra-overlay-ok-btn:active {
            transform: translateY(1px);
        }
        .char-ultra-overlay-card.is-complete {
            border-color: rgba(244, 114, 182, 0.95);
            box-shadow: 0 12px 30px rgba(2, 6, 23, 0.54), 0 0 0 1px rgba(244, 114, 182, 0.38);
        }
        .char-ultra-overlay-card.is-failed {
            border-color: rgba(251, 191, 36, 0.86);
            box-shadow: 0 12px 30px rgba(2, 6, 23, 0.54), 0 0 0 1px rgba(251, 191, 36, 0.34);
        }
        .char-ultra-overlay-elapsed {
            position: absolute;
            right: 0.6rem;
            bottom: 0.45rem;
            font-size: 0.73rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            color: rgba(252, 231, 243, 0.96);
            font-variant-numeric: tabular-nums;
            text-align: right;
            line-height: 1;
        }
        .char-ultra-recovery-feed {
            margin: 0;
            width: 100%;
            padding: 0;
            border-radius: 0;
            background: transparent;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 18px;
            font-size: 0.82rem;
            line-height: 1.1;
            color: #f472b6;
            word-break: break-word;
            text-align: center;
        }
        .char-ultra-recovery-feed-line {
            margin: 0;
            font-family: inherit;
            letter-spacing: 0.03em;
            font-weight: 700;
            text-transform: uppercase;
        }
        .char-ultra-recovery-feed-line.is-flash {
            animation: charUltraWordFlash 0.52s ease-out;
        }
        .char-ultra-recovery-feed[hidden] {
            display: none !important;
        }
        @keyframes charUltraSpin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        @keyframes charUltraWordFlash {
            0% { opacity: 0.3; transform: scale(0.9); }
            55% { opacity: 1; transform: scale(1.04); }
            100% { opacity: 1; transform: scale(1); }
        }
        @media (max-width: 768px) {
            .char-hero.char-hero--with-recovery {
                --char-hero-recovery-offset: 58px;
            }
            .char-hero-gallery-controls {
                left: 0.65rem;
                right: 0.65rem;
            }
            .char-hero-gallery-caption-wrap {
                left: 0.65rem;
                bottom: calc(0.65rem + 36px);
            }
            .char-hero-gallery-btn {
                width: 34px;
                height: 34px;
            }
            .char-hero-gallery-count {
                font-size: 0.6rem;
                max-width: 170px;
                padding: 0.34rem 0.58rem 0.38rem;
            }
            .char-desc-degraded-banner {
                padding: 0.42rem 0.5rem 0.5rem;
                gap: 0.28rem;
            }
            .char-desc-degraded-ultra-btn {
                font-size: 0.56rem;
                padding: 0.25rem 0.6rem;
                min-width: 146px;
            }
            .char-saucepan-recovery-banner-controls {
                gap: 0.24rem;
                align-items: flex-start;
            }
            .char-saucepan-recovery-current {
                align-items: flex-start;
            }
            .char-saucepan-recovery-current-label {
                font-size: 0.5rem;
            }
            .char-saucepan-recovery-current-value {
                font-size: 0.64rem;
            }
            .char-saucepan-recovery-banner-controls .char-saucepan-recovery-browse-btn.is-compact {
                min-width: 56px;
                padding: 0.48rem 0.32rem;
            }
            .char-saucepan-recovery-current .saucepan-recovery-table-score {
                min-width: 44px;
                padding-left: 0.14rem;
                padding-right: 0.14rem;
            }
            .char-desc-degraded-banner-help-text {
                font-size: 0.6rem;
            }
            .char-hero-degraded-badge-wrap {
                gap: 5px;
            }
            .char-hero-degraded-help-btn {
                width: 17px;
                height: 17px;
                font-size: 0.64rem;
            }
            .saucepan-recovery-table-desktop {
                display: none;
            }
            .saucepan-recovery-mobile-list {
                display: block;
            }
            .saucepan-recovery-mobile-item {
                gap: 0.34rem;
            }
            .saucepan-recovery-mobile-middle {
                gap: 0.04rem;
            }
            .saucepan-recovery-inline-score {
                min-height: 1.24rem;
                padding: 0.12rem 0.34rem;
            }
            .saucepan-recovery-inline-score-main {
                font-size: 0.6rem;
            }
            .saucepan-recovery-inline-score-niche {
                font-size: 0.54rem;
            }
            .saucepan-recovery-score-action-btn {
                font-size: 0.54rem;
            }
            .saucepan-recovery-controls-form {
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            }
            .saucepan-recovery-controls .saucepan-recovery-picker {
                width: 100%;
                min-width: 0;
            }
            .saucepan-recovery-run-btn {
                grid-column: 1 / -1;
                width: 100%;
                min-width: 0;
                justify-self: stretch;
                padding-left: 0.48rem;
                padding-right: 0.48rem;
            }
            .saucepan-recovery-controls-header {
                font-size: 0.62rem;
            }
            .saucepan-recovery-controls .saucepan-recovery-picker-btn {
                font-size: 0.72rem;
                padding-left: 8px;
                padding-right: 24px;
            }
            .char-saucepan-recovery-overlay {
                padding: 0.72rem;
            }
            .char-saucepan-recovery-overlay-card {
                width: min(94%, 290px);
                padding: 0.82rem 0.78rem;
            }
            .char-saucepan-recovery-overlay-title {
                font-size: 0.84rem;
            }
            .char-ultra-overlay {
                padding: 0.72rem;
            }
            .char-ultra-overlay-card {
                width: min(94%, 270px);
                padding: 0.62rem 0.66rem;
            }
            .char-ultra-overlay-title {
                font-size: 0.8rem;
            }
            .char-ultra-recovery-feed {
                min-height: 16px;
                font-size: 0.76rem;
            }
        }
        @media (min-width: 769px) {
            .saucepan-recovery-table-desktop {
                display: block;
            }
            .saucepan-recovery-mobile-list {
                display: none;
            }
        }
        .char-modal-close {
            flex-shrink: 0;
            margin-left: var(--space-3);
        }
        .char-hero-badges {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            align-content: flex-start;
            justify-content: flex-start;
            column-gap: var(--space-2);
            row-gap: 5px;
            z-index: 5;
            padding: 3px var(--space-3) var(--space-3) 4px;
            pointer-events: none;
        }
        .char-hero-badges > * {
            pointer-events: auto;
        }
        .char-hero-badges > .char-moderation-flag-btn {
            width: 28px;
            height: 28px;
            min-width: 28px;
            align-self: center;
            background: transparent;
            filter: none;
            transform: none;
        }
        .char-hero-badges > .char-moderation-flag-btn:hover {
            background: transparent;
            transform: none;
        }
        .char-hero-right-bottom-stack {
            position: absolute;
            right: var(--space-3);
            bottom: var(--space-3);
            z-index: 13;
            display: inline-flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 6px;
            pointer-events: none;
        }
        .char-hero-right-bottom-stack > * {
            pointer-events: auto;
        }
        .char-hero-right-bottom-stack .char-badge {
            width: fit-content;
        }
        .char-hero-right-bottom-stack .char-score-badge {
            position: static;
            right: auto;
            bottom: auto;
            margin-top: 0;
            align-self: flex-end;
        }
        .char-score-badge {
            margin-top: auto;
            align-self: flex-end;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: rgba(255, 255, 255, 0.95);
            padding: 5px 7px;
            border-radius: var(--radius-md);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            cursor: pointer;
        }
        .char-hero-badges .char-score-badge {
            position: absolute;
            right: var(--space-3);
            bottom: var(--space-3);
            margin-top: 0;
            align-self: auto;
        }
        .char-score-badge--low {
            background: rgba(71, 85, 105, 0.48);
        }
        .char-score-badge--mid {
            background: rgba(30, 58, 138, 0.45);
        }
        .char-score-badge--top {
            background: linear-gradient(135deg, rgba(180, 83, 9, 0.52) 0%, rgba(146, 64, 14, 0.58) 100%);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 16px rgba(245, 158, 11, 0.22);
        }
        .char-score-badge--status-na {
            background: rgba(71, 85, 105, 0.62);
        }
        .char-score-badge--status-pending {
            background: rgba(30, 58, 138, 0.62);
        }
        .char-score-badge--status-error {
            background: rgba(153, 27, 27, 0.62);
        }
        .char-score-badge .char-score-label {
            font-size: 0.5rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            opacity: 0.9;
            margin-bottom: 0;
        }
        .char-score-badge .char-score-main {
            font-size: 1.0625rem;
            font-weight: 700;
            line-height: 1.15;
            font-variant-numeric: tabular-nums;
        }
        .char-score-badge--generate {
            padding: 6px 8px;
            min-width: 0;
            max-width: 132px;
        }
        .char-score-badge--generate .char-score-main {
            font-size: 0.72rem;
            line-height: 1.2;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            font-weight: 700;
        }
        .char-score-badge .char-score-niche {
            font-size: 0.625rem;
            font-weight: 500;
            opacity: 0.9;
            font-variant-numeric: tabular-nums;
            margin-top: -1px;
            text-align: center;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .char-score-badge .char-score-niche-mark {
            width: 6px;
            height: 6px;
            display: inline-block;
            background: #f59e0b;
            opacity: 0.95;
            transform: rotate(45deg);
            border-radius: 1px;
            margin-left: 2px;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
        }
        .char-hero-save-wrap {
            position: absolute;
            top: var(--space-3);
            right: var(--space-3);
            z-index: 6;
            display: flex;
            align-items: center;
            gap: 2px;
            justify-content: flex-end;
        }
        .char-hero-fulltext-wrap {
            position: absolute;
            left: var(--space-3);
            bottom: var(--space-3);
            z-index: 12;
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
        }
        .char-hero-vault-badge.direct-upload-title-vault-badge {
            position: static;
            font-size: 0.74rem;
            box-shadow: 0 0 0 2px rgba(255, 200, 87, 0.1), 0 4px 12px rgba(0, 0, 0, 0.18);
        }
        .char-hero-token-badge,
        .char-hero-created-badge {
            position: absolute;
            background: rgba(0, 0, 0, 0.56);
            color: rgba(255, 255, 255, 0.88);
            font-size: calc(0.5625rem + 1pt);
            font-weight: 500;
            letter-spacing: 0.01em;
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
            text-align: center;
            z-index: 6;
            pointer-events: none;
        }
        .char-hero-token-badge {
            left: 50%;
            bottom: 3px;
            transform: translateX(-50%);
        }
        .char-hero-degraded-badge-wrap {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 23px;
            right: auto;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            z-index: 7;
        }
        .char-hero-degraded-badge {
            appearance: none;
            border: none;
            background: rgba(236, 72, 153, 0.96);
            color: #fff;
            font-size: calc(0.5625rem + 1pt);
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
            text-align: center;
            white-space: nowrap;
            pointer-events: auto;
            cursor: pointer;
        }
        .char-hero-degraded-badge.is-recovered {
            background: rgba(34, 197, 94, 0.96);
        }
        .char-hero-degraded-badge.is-disabled,
        .char-hero-degraded-help-btn.is-disabled {
            cursor: default;
            opacity: 0.78;
            pointer-events: none;
        }
        .char-hero-degraded-help-btn {
            width: 18px;
            height: 18px;
            padding: 0;
            border: 1px solid rgba(250, 204, 21, 0.54);
            border-radius: 999px;
            background: rgba(113, 63, 18, 0.82);
            color: rgba(254, 240, 138, 0.98);
            font-size: 0.7rem;
            font-weight: 800;
            line-height: 1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
            transition: color var(--transition-fast), opacity var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
        }
        .char-hero-degraded-help-btn i {
            font-size: 0.68rem;
            line-height: 1;
        }
        .char-hero-degraded-help-btn:hover {
            background: rgba(146, 64, 14, 0.9);
            border-color: rgba(250, 204, 21, 0.76);
        }
        .char-hero-degraded-help-btn.is-active {
            background: rgba(202, 138, 4, 0.38);
        }
        .char-hero-created-badge {
            left: 50%;
            top: 3px;
            bottom: auto;
            transform: translateX(-50%);
        }
        .char-hero-fulltext-btn {
            min-height: 30px;
            padding: 0 10px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            outline: none;
            border-radius: 999px;
            background: linear-gradient(180deg, rgba(14, 21, 31, 0.82) 0%, rgba(6, 10, 18, 0.82) 100%);
            color: rgba(255, 255, 255, 0.96);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
            text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
            transition: transform var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
            opacity: 0.96;
            -webkit-tap-highlight-color: transparent;
        }
        .char-hero-fulltext-btn.open {
            color: #ffffff;
            opacity: 1;
            border-color: rgba(255, 255, 255, 0.82);
            background: linear-gradient(180deg, rgba(22, 34, 52, 0.9) 0%, rgba(10, 18, 31, 0.9) 100%);
        }
        .char-hero-fulltext-btn i {
            font-size: 0.82rem;
            line-height: 1;
            pointer-events: none;
        }
        .char-hero-fulltext-btn-label {
            font-size: 0.62rem;
            letter-spacing: 0.08em;
            font-weight: 700;
            text-transform: uppercase;
            line-height: 1;
            pointer-events: none;
        }
        .char-hero-fulltext-btn:hover {
            color: #ffffff;
            opacity: 1;
            border-color: rgba(255, 255, 255, 0.82);
            transform: translateY(-1px);
        }
        .char-hero-fulltext-btn:disabled,
        .char-hero-fulltext-btn.is-disabled {
            cursor: not-allowed;
            opacity: 0.48;
            color: var(--text-muted);
            border-color: rgba(255, 255, 255, 0.22);
            transform: none;
            box-shadow: none;
        }
        .char-hero-fulltext-btn:disabled:hover,
        .char-hero-fulltext-btn.is-disabled:hover {
            color: var(--text-muted);
            border-color: rgba(255, 255, 255, 0.22);
            transform: none;
        }
        .char-hero-fulltext-btn:focus-visible {
            outline: none;
        }
        .char-hero-fulltext-menu {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            z-index: 12;
        }
        .char-hero-fulltext-menu .char-tab-selector-dropdown {
            left: 0;
            right: auto;
            min-width: 236px;
            max-height: 360px;
            transform-origin: bottom left;
            z-index: 18;
        }
        .char-hero-fulltext-menu .char-tab-selector-item {
            font-size: 0.94rem;
            padding: 0.6rem var(--space-3);
        }
        .char-hero-fulltext-menu .char-tab-selector-item-fulltext {
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            border-bottom: 1px solid var(--border-subtle);
            margin-bottom: 2px;
            padding-bottom: 0.55rem;
        }
        .char-save-dropdown {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .char-action-btn.secondary.char-hero-save-btn {
            width: 40px;
            min-width: 40px;
            height: 40px;
            min-height: 40px;
            padding: 0;
            border-radius: 0;
            border: none;
            background: transparent;
            color: rgba(255, 255, 255, 0.92);
            box-shadow: none;
            backdrop-filter: none;
            -webkit-tap-highlight-color: transparent;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        .char-save-heart-glyph {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            line-height: 0;
            transform: none;
            filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
        }
        .char-save-heart-glyph .char-save-heart-icon {
            width: 100%;
            height: 100%;
            display: block;
            fill: currentColor;
        }
        .char-action-btn.secondary.char-hero-save-btn:hover {
            background: transparent;
            border: none;
            color: #ffffff;
            transform: scale(1.06);
            box-shadow: none;
        }
        .char-action-btn.secondary.char-hero-save-btn.is-collected {
            background: transparent;
            border: none;
            color: #ff709d;
        }
        .char-action-btn.secondary.char-hero-save-btn.is-collected:hover {
            background: transparent;
            border: none;
            color: #ff8ab0;
        }
        @media (max-width: 768px) {
            .char-hero-save-wrap {
                top: 4px;
                right: 4px;
            }
            .char-action-btn.secondary.char-hero-save-btn {
                width: 42px;
                min-width: 42px;
                height: 42px;
                min-height: 42px;
            }
            .char-save-heart-glyph {
                width: 24px;
                height: 24px;
            }
        }
        .char-badge {
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            font-size: 0.625rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
        }
        .char-badge.nsfw {
            background: rgba(239, 68, 68, 0.9);
            color: white;
        }
        .char-hero-badges .char-badge.nsfw {
            background: #ef4444;
            color: #ffffff;
        }
        .char-badge.sfw {
            background: rgba(34, 197, 94, 0.9);
            color: white;
        }
        .char-badge.private {
            background: rgba(107, 114, 128, 0.9);
            color: white;
        }
        .char-badge.direct-upload {
            background: rgba(20, 184, 166, 0.92);
            color: #ecfeff;
        }
        .char-badge.private-copy {
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.96), rgba(244, 114, 182, 0.94));
            color: #111827;
            border: 1px solid rgba(255, 255, 255, 0.56);
            font-size: 0.68rem;
            letter-spacing: 0.08em;
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.42);
        }
        .char-hero-right-bottom-stack .char-badge.private,
        .char-hero-right-bottom-stack .char-badge.private-copy {
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.96), rgba(244, 114, 182, 0.94));
            color: #111827;
            border: 1px solid rgba(255, 255, 255, 0.56);
            padding: 1px 2px;
            font-size: 0.625rem;
            letter-spacing: 0.08em;
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.42);
        }

        /* Character Info Section */
        .char-info {
            --char-info-pad-x: var(--space-5);
            padding: var(--space-4) var(--char-info-pad-x);
            padding-bottom: var(--space-3);
            position: relative;
            margin-top: 0;
            margin-bottom: 0;
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            min-height: 0; /* Allow flex children to shrink */
        }
        /* Desktop: Ensure char-info can scroll if content overflows */
        @media (min-width: 769px) {
            .char-info {
                overflow-y: auto;
                overflow-x: hidden;
            }
        }
        .char-name {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0;
            line-height: 1.2;
            text-align: left;
            overflow-wrap: anywhere;
            word-break: break-word;
        }
        .char-chatname-row {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: nowrap;
            margin-top: 2px;
            min-width: 0;
        }
        .char-chatname {
            font-size: 0.9375rem;
            color: var(--accent-primary);
            font-weight: 500;
            display: block;
            flex: 0 1 auto;
            min-width: 0;
            max-width: min(100%, 56vw);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .char-creator {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            display: inline-flex;
            align-items: center;
            gap: 0.28rem;
            min-width: 0;
            white-space: nowrap;
        }
        .char-creator span {
            color: var(--text-primary);
            font-weight: 500;
        }
        .char-source-inline {
            font-size: 0.62rem;
            line-height: 1;
            color: var(--text-muted);
            opacity: 0.78;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            white-space: nowrap;
        }
        .char-version-inline {
            position: relative;
            display: inline-flex;
            align-items: center;
            line-height: 1;
            margin-left: 2px;
        }
        .char-source-tab-trigger {
            appearance: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-left: 4px;
            padding: 0;
            border: none;
            background: transparent;
            cursor: pointer;
            transition: filter var(--transition-fast);
            flex: 0 0 auto;
        }
        .char-source-tab-trigger:hover {
            filter: brightness(1.06);
        }
        .char-source-tab-trigger.is-disabled {
            cursor: default;
            filter: none;
            pointer-events: none;
        }
        .char-source-tab-trigger:focus-visible {
            outline: 2px solid color-mix(in srgb, var(--accent-primary) 72%, white 28%);
            outline-offset: 2px;
            border-radius: 10px;
        }
        .char-source-tab-trigger .character-source-badge {
            margin-left: 0;
            min-height: 0;
            padding: 0.16rem 0.42rem;
            border-radius: 0.45rem;
            font-size: 0.75rem;
            font-weight: 600;
            line-height: 1.15;
            letter-spacing: 0.01em;
            opacity: 1;
            transition: box-shadow var(--transition-fast), border-color var(--transition-fast), filter var(--transition-fast);
        }
        .char-source-tab-trigger:hover .character-source-badge,
        .char-source-tab-trigger:focus-visible .character-source-badge {
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 28%, transparent);
        }
        .char-source-tab-trigger.is-disabled .character-source-badge {
            box-shadow: none;
            opacity: 0.82;
        }
        .char-source-tab-trigger .character-source-badge .fa-user-secret {
            font-size: 0.72rem;
            line-height: 1;
        }
        .char-source-tab-trigger .character-source-badge--square {
            min-width: 0;
            height: auto;
            padding: 0.16rem 0.42rem;
            border-radius: 0.45rem;
            font-size: 0.75rem;
            letter-spacing: 0.01em;
        }
        .char-sources-toggle-btn {
            appearance: none;
            border: 1px solid color-mix(in srgb, var(--accent-primary) 34%, var(--border-default));
            background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-subtle));
            color: var(--text-primary);
            border-radius: 999px;
            padding: 0.24rem 0.62rem;
            font-size: 0.67rem;
            font-weight: 700;
            line-height: 1.15;
            cursor: pointer;
            transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
        }
        .char-sources-toggle-btn:hover,
        .char-sources-toggle-btn[aria-expanded="true"] {
            background: color-mix(in srgb, var(--accent-primary) 20%, var(--bg-elevated));
            border-color: color-mix(in srgb, var(--accent-primary) 56%, var(--border-strong));
            color: #f7fbff;
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 16%, transparent);
        }
        .char-sources-toggle-btn:focus-visible {
            outline: 2px solid color-mix(in srgb, var(--accent-primary) 72%, white 28%);
            outline-offset: 2px;
        }
        .char-sources-panel {
            margin-top: 0.65rem;
            padding: 0.8rem 0.88rem;
            border-radius: var(--radius-md);
            border: 1px solid color-mix(in srgb, var(--accent-primary) 26%, var(--border-default));
            background: color-mix(in srgb, var(--bg-elevated) 94%, #000 6%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
        }
        .char-sources-panel-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.42rem 0.7rem;
        }
        .char-sources-panel-line {
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.16rem;
            min-width: 0;
        }
        .char-sources-panel-key {
            font-size: 0.62rem;
            line-height: 1.1;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            font-weight: 700;
        }
        .char-sources-panel-val {
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 0.28rem;
            flex-wrap: wrap;
            font-size: 0.78rem;
            line-height: 1.35;
            color: var(--text-primary);
            font-weight: 600;
            overflow-wrap: anywhere;
            word-break: break-word;
        }
        .char-sources-panel-section {
            margin-top: 0.68rem;
            padding-top: 0.62rem;
            border-top: 1px dashed var(--border-subtle);
        }
        .char-sources-panel-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.42rem;
            margin-top: 0.38rem;
        }
        .char-sources-panel-action-btn {
            appearance: none;
            border: 1px solid rgba(255,255,255,0.16);
            background: rgba(255,255,255,0.055);
            color: var(--text-primary);
            border-radius: 999px;
            padding: 0.38rem 0.78rem;
            font-size: 0.71rem;
            line-height: 1.2;
            font-weight: 700;
            cursor: pointer;
            transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
        }
        .char-sources-panel-action-btn:hover {
            background: rgba(255,255,255,0.1);
            border-color: rgba(255,255,255,0.28);
            color: #ffffff;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
        }
        .char-sources-panel-action-btn:disabled {
            opacity: 0.68;
            cursor: default;
            box-shadow: none;
        }
        .char-sources-panel-action-btn--recovery {
            border-color: color-mix(in srgb, #60a5fa 42%, var(--border-default));
            background: color-mix(in srgb, #60a5fa 12%, var(--bg-subtle));
        }
        .char-sources-panel-note {
            margin: 0.72rem 0 0;
            color: var(--text-muted);
            font-size: 0.67rem;
            line-height: 1.45;
        }
        .char-content-variant-toggle {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 8px;
        }
        .char-content-variant-btn {
            border: 1px solid rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.05);
            color: var(--text-secondary);
            border-radius: 999px;
            padding: 4px 10px;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.01em;
            cursor: pointer;
            transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
        }
        .char-content-variant-btn:hover {
            color: var(--text-primary);
            border-color: rgba(255,255,255,0.22);
        }
        .char-content-variant-btn.active {
            background: rgba(34,197,94,0.18);
            border-color: rgba(34,197,94,0.42);
            color: #d7ffe5;
        }
        .char-janny-recovery-action {
            display: inline-flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            min-width: 0;
        }
        .char-janny-recovery-status {
            font-size: 0.68rem;
            line-height: 1.3;
            color: var(--text-muted);
            max-width: 180px;
        }
        .char-janny-recovery-status[data-state="completed"] {
            color: #86efac;
        }
        .char-janny-recovery-status[data-state="failed"] {
            color: #fca5a5;
        }
        .char-version-section-label {
            margin-top: 0.45rem;
            padding-top: 0.4rem;
            border-top: 1px dashed var(--border-subtle);
            font-size: 0.63rem;
            line-height: 1.35;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            font-weight: 600;
        }
        .char-version-icon-btn {
            width: 16px;
            height: 16px;
            padding: 0;
            border: none;
            background: transparent;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            opacity: 0.88;
            transition: color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
        }
        .char-version-icon-btn:hover,
        .char-version-icon-btn[aria-expanded="true"] {
            color: var(--accent-primary);
            opacity: 1;
            transform: translateY(-1px);
        }
        .char-version-icon-glyph {
            position: relative;
            display: inline-block;
            width: 8px;
            height: 7px;
            border: 1.25px solid currentColor;
            border-radius: 1px;
            box-sizing: border-box;
        }
        .char-version-icon-glyph::before {
            content: '';
            position: absolute;
            top: -3px;
            left: 2px;
            width: 8px;
            height: 7px;
            border: 1.25px solid currentColor;
            border-radius: 1px;
            box-sizing: border-box;
            opacity: 0.9;
        }
        .char-version-popover {
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            left: auto;
            width: min(320px, calc(100vw - 24px), calc(100vw - 24px));
            min-width: min(240px, calc(100vw - 24px));
            max-width: calc(100vw - 24px);
            padding: 0.45rem 0.5rem;
            border-radius: var(--radius-sm);
            border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, var(--border-default));
            background: color-mix(in srgb, var(--bg-elevated) 92%, #000 8%);
            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
            z-index: 1200;
            box-sizing: border-box;
        }
        .char-version-popover-line {
            margin: 0;
            display: grid;
            grid-template-columns: 62px minmax(0, 1fr);
            align-items: flex-start;
            gap: 0.42rem;
            font-size: 0.67rem;
            line-height: 1.35;
            color: var(--text-secondary);
        }
        .char-version-popover-line + .char-version-popover-line {
            margin-top: 0.16rem;
        }
        .char-version-popover-key {
            min-width: 0;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--text-muted);
            font-weight: 600;
        }
        .char-version-popover-val {
            min-width: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 0.22rem;
            color: var(--text-primary);
            font-weight: 600;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 0.69rem;
            white-space: normal;
            overflow-wrap: anywhere;
            word-break: break-word;
        }
        .char-version-popover .character-source-badge,
        .char-version-popover .char-definition-badge {
            max-width: 100%;
            display: inline-flex;
            flex-wrap: wrap;
            white-space: normal;
            text-align: center;
            justify-content: center;
        }
        @media (max-width: 768px) {
            .char-version-popover {
                position: fixed;
                top: clamp(84px, 16vh, 132px);
                left: 50%;
                right: auto;
                transform: translateX(-50%);
                width: min(320px, calc(100vw - 20px));
                min-width: 0;
                max-width: calc(100vw - 20px);
                padding: 0.42rem 0.46rem;
                max-height: min(56dvh, 420px);
                overflow-y: auto;
            }
            .char-version-popover-line {
                grid-template-columns: 54px minmax(0, 1fr);
                gap: 0.34rem;
            }
            .char-version-popover-key {
                font-size: 0.63rem;
            }
            .char-version-popover-val {
                font-size: 0.66rem;
            }
        }
        .char-version-popover-note {
            margin: 0.32rem 0 0;
            padding-top: 0.32rem;
            border-top: 1px dashed var(--border-subtle);
            color: var(--text-muted);
            font-size: 0.63rem;
            line-height: 1.35;
        }
        .char-version-source-list {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            margin-top: 0.35rem;
        }
        .char-version-source-list--pills {
            flex-direction: row;
            flex-wrap: wrap;
            gap: 0.45rem;
        }
        .char-version-source-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
        }
        .char-version-source-btn {
            appearance: none;
            border: 1px solid rgba(255,255,255,0.14);
            background: rgba(255,255,255,0.05);
            color: var(--text-secondary);
            border-radius: 999px;
            padding: 0.24rem 0.58rem;
            font-size: 0.68rem;
            font-weight: 600;
            line-height: 1.2;
            cursor: pointer;
            transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
        }
        .char-version-source-btn:hover {
            color: var(--text-primary);
            border-color: rgba(255,255,255,0.24);
        }
        .char-version-source-btn.active {
            background: rgba(34,197,94,0.18);
            border-color: rgba(34,197,94,0.42);
            color: #d7ffe5;
        }
        .char-version-inline-recovery-btn {
            appearance: none;
            border: none;
            background: transparent;
            color: var(--accent-primary);
            padding: 0;
            font-size: 0.68rem;
            font-weight: 600;
            line-height: 1.2;
            cursor: pointer;
            white-space: nowrap;
            transition: color var(--transition-fast), opacity var(--transition-fast);
        }
        .char-version-inline-recovery-btn:hover {
            color: var(--text-primary);
        }
        .char-version-inline-recovery-btn:disabled {
            cursor: default;
            opacity: 0.7;
        }
        .char-version-actions {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0.3rem;
            margin-top: 0.45rem;
            min-height: 0;
        }
        .char-version-footer-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 0.45rem;
            padding-top: 0.4rem;
            border-top: 1px solid var(--border-subtle);
        }
        .char-version-reextract-btn {
            appearance: none;
            border: 1px solid color-mix(in srgb, #f59e0b 40%, var(--border-default));
            background: color-mix(in srgb, #f59e0b 12%, var(--bg-subtle));
            color: var(--text-primary);
            border-radius: 999px;
            padding: 0.32rem 0.78rem;
            font-size: 0.68rem;
            font-weight: 700;
            line-height: 1.2;
            cursor: pointer;
            transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
        }
        .char-version-reextract-btn:hover {
            background: color-mix(in srgb, #f59e0b 18%, var(--bg-elevated));
            border-color: color-mix(in srgb, #f59e0b 56%, var(--border-strong));
            color: #fff5d9;
            box-shadow: 0 0 0 1px color-mix(in srgb, #f59e0b 16%, transparent);
        }
        .char-version-reextract-btn:focus-visible {
            outline: 2px solid color-mix(in srgb, #f59e0b 70%, white 30%);
            outline-offset: 2px;
        }
        .char-version-recovery-status {
            max-width: none;
            margin-top: 0.15rem;
        }
        .char-sources-tab {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            min-height: 0;
        }
        .char-sources-subtabs {
            display: inline-flex;
            align-self: flex-start;
            gap: 0.24rem;
            padding: 0.2rem;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.03);
        }
        .char-sources-subtab {
            appearance: none;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            border-radius: 999px;
            padding: 0.42rem 0.8rem;
            font-size: 0.72rem;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
            transition: background var(--transition-fast), color var(--transition-fast);
        }
        .char-sources-subtab:hover {
            color: var(--text-primary);
        }
        .char-sources-subtab.active {
            background: rgba(255, 255, 255, 0.12);
            color: var(--text-primary);
        }
        .char-sources-subpanel[hidden] {
            display: none !important;
        }
        .char-sources-tab-meta {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.55rem 0.9rem;
        }
        .char-sources-tab-meta-row {
            display: flex;
            flex-direction: column;
            gap: 0.16rem;
            min-width: 0;
        }
        .char-sources-tab-meta-key {
            font-size: 0.66rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            font-weight: 700;
        }
        .char-sources-tab-meta-val {
            min-width: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.34rem;
            color: var(--text-primary);
            font-size: 0.86rem;
            line-height: 1.45;
            font-weight: 600;
            overflow-wrap: anywhere;
            word-break: break-word;
        }
        .char-sources-tab-block {
            position: relative;
            padding: 0.92rem 0.96rem;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 1rem;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.025) 100%);
            box-shadow: 0 10px 28px rgba(2, 6, 23, 0.16);
            overflow: visible;
        }
        .char-sources-tab-block--source {
            border-color: rgba(96, 165, 250, 0.16);
            background: linear-gradient(180deg, rgba(59, 130, 246, 0.09) 0%, rgba(30, 41, 59, 0.18) 100%);
        }
        .char-sources-tab-repair-section {
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
            min-width: 0;
            margin-top: 5px;
        }
        .char-sources-tab-repair-heading {
            margin: 0;
            font-size: 1rem;
            line-height: 1.15;
            font-weight: 800;
            letter-spacing: 0.01em;
            color: rgba(251, 207, 232, 0.98);
        }
        .char-sources-tab-repair-summary {
            display: flex;
            flex-direction: column;
            gap: 0.58rem;
            margin: 0;
        }
        .char-sources-tab-repair-card {
            display: flex;
            flex-direction: column;
            gap: 0.68rem;
            padding: 0.82rem 0.86rem;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 0.92rem;
            background: rgba(7, 10, 18, 0.34);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
        }
        .char-sources-tab-repair-card + .char-sources-tab-repair-card {
            margin-top: 0.72rem;
        }
        .char-sources-tab-repair-current {
            padding: 0.72rem 0.82rem;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 0.82rem;
            background: rgba(255, 255, 255, 0.035);
        }
        .char-sources-tab-repair-current .char-saucepan-recovery-current {
            width: 100%;
        }
        .char-sources-tab-section-title {
            font-size: 0.72rem;
            line-height: 1.2;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        .char-sources-tab-actions {
            display: flex;
            flex-direction: column;
            gap: 0.56rem;
            align-items: stretch;
        }
        .char-sources-tab > .char-sources-tab-actions {
            padding-bottom: 0.12rem;
        }
        .char-sources-tab-inline-group {
            display: flex;
            flex-direction: column;
            gap: 0.32rem;
            margin-top: 0.52rem;
        }
        .char-sources-tab-action-btn {
            appearance: none;
            align-self: stretch;
            border: 1px solid rgba(255,255,255,0.16);
            background: rgba(255,255,255,0.055);
            color: var(--text-primary);
            border-radius: 999px;
            padding: 0.42rem 0.82rem;
            font-size: 0.72rem;
            line-height: 1.2;
            font-weight: 700;
            cursor: pointer;
            transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
        }
        .char-sources-tab-action-btn:hover {
            background: rgba(255,255,255,0.1);
            border-color: rgba(255,255,255,0.28);
            color: #ffffff;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
        }
        .char-sources-tab-action-btn:disabled {
            opacity: 0.68;
            cursor: default;
            box-shadow: none;
        }
        .char-sources-tab-action-btn--recovery {
            border-color: color-mix(in srgb, #60a5fa 42%, var(--border-default));
            background: color-mix(in srgb, #60a5fa 12%, var(--bg-subtle));
        }
        .char-sources-tab-note {
            margin: 0;
            color: var(--text-muted);
            font-size: 0.74rem;
            line-height: 1.55;
        }
        .char-sources-tab-footer-note {
            margin: 0.08rem 0 0;
            color: var(--text-muted);
            font-size: 0.7rem;
            line-height: 1.5;
            text-align: center;
            opacity: 0.86;
            position: relative;
            z-index: 1;
        }
        .char-sources-tab-repair-section .saucepan-recovery-panel {
            margin-top: 0.16rem;
        }
        @media (max-width: 768px) {
            .char-sources-subtabs {
                width: 100%;
                align-self: stretch;
            }
            .char-sources-subtab {
                flex: 1 1 0;
                text-align: center;
            }
            .char-sources-panel {
                margin-top: 0.58rem;
                padding: 0.72rem 0.72rem;
            }
            .char-sources-panel-grid {
                grid-template-columns: minmax(0, 1fr);
                gap: 0.34rem;
            }
            .char-sources-panel-action-btn {
                width: 100%;
                justify-content: center;
            }
            .char-sources-tab-meta {
                grid-template-columns: minmax(0, 1fr);
                gap: 0.44rem;
            }
            .char-sources-tab-block {
                padding: 0.84rem 0.82rem;
                border-radius: 0.9rem;
            }
            .char-sources-tab-repair-heading {
                font-size: 0.94rem;
            }
            .char-sources-tab-repair-card {
                padding: 0.74rem 0.72rem;
                border-radius: 0.82rem;
            }
            .char-chatname {
                max-width: min(100%, 260px);
            }
            .char-sources-tab-actions {
                flex-direction: column;
            }
            .char-sources-tab-action-btn {
                width: 100%;
                align-self: stretch;
                justify-content: center;
            }
        }
        .char-creator-link,
        .char-creator-name-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.28rem;
            flex: 0 1 auto;
            min-width: 0;
            max-width: min(100%, 300px);
            padding: 0.16rem 0.42rem;
            border-radius: 0.45rem;
            border: 1px solid color-mix(in srgb, var(--accent-primary) 40%, var(--border-default));
            background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-subtle));
            color: color-mix(in srgb, var(--text-primary) 92%, white 8%);
            font-size: 0.75rem;
            font-weight: 600;
            line-height: 1.15;
            text-decoration: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            overflow-wrap: normal;
            word-break: normal;
            transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
            -webkit-tap-highlight-color: transparent;
        }
        .char-creator-link-text {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .char-creator-name-chip {
            cursor: default;
        }
        .char-creator-link:hover {
            background: color-mix(in srgb, var(--accent-primary) 22%, var(--bg-elevated));
            border-color: color-mix(in srgb, var(--accent-primary) 56%, var(--border-strong));
            color: var(--text-primary);
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 20%, transparent);
        }
        .char-creator-link:focus-visible {
            outline: 2px solid color-mix(in srgb, var(--accent-primary) 72%, white 28%);
            outline-offset: 2px;
        }
        .char-top-source-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.3rem;
            flex: 0 0 auto;
            min-height: 0;
            padding: 0.16rem 0.46rem;
            border-radius: 0.45rem;
            border: 1px solid color-mix(in srgb, var(--text-primary) 16%, var(--border-default));
            background: color-mix(in srgb, var(--text-primary) 8%, var(--bg-subtle));
            color: color-mix(in srgb, var(--text-primary) 82%, white 18%);
            font-size: 0.75rem;
            font-weight: 760;
            line-height: 1.15;
            text-decoration: none;
            white-space: nowrap;
            transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
            -webkit-tap-highlight-color: transparent;
        }
        .char-top-source-link i {
            font-size: 0.68rem;
            line-height: 1;
        }
        .char-top-source-link span {
            color: inherit;
            font-weight: inherit;
        }
        .char-top-source-link:hover {
            background: color-mix(in srgb, var(--text-primary) 12%, var(--bg-elevated));
            border-color: color-mix(in srgb, var(--text-primary) 26%, var(--border-strong));
            color: var(--text-primary);
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 13%, transparent);
        }
        .char-top-source-link:focus-visible {
            outline: 2px solid color-mix(in srgb, var(--accent-primary) 72%, white 28%);
            outline-offset: 2px;
        }
        .char-desc-wrapper {
            position: relative;
            flex: 1;
            min-height: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding-right: 0;
            margin-bottom: 0;
        }
        .char-desc-fallback-banner {
            margin-bottom: 0.6rem;
            padding: 0.55rem 0.7rem;
            border-radius: var(--radius-md);
            background: rgba(245, 158, 11, 0.1);
            border: 1px solid rgba(245, 158, 11, 0.28);
            color: #fcd34d;
            font-size: 0.8rem;
            line-height: 1.4;
            font-weight: 600;
        }
        .char-blurb-quote {
            margin: var(--space-3) 0 var(--space-2);
            padding: 0.625rem 0.75rem;
            border-radius: var(--radius-md);
            background: rgba(59, 130, 246, 0.1);
            border: 1px solid rgba(59, 130, 246, 0.28);
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
        }
        .char-blurb-quote-icon {
            color: rgba(96, 165, 250, 0.92);
            font-size: 1rem;
            line-height: 1;
            margin-top: 1px;
            flex: 0 0 auto;
        }
        .char-blurb-quote-text {
            margin: 0;
            color: var(--text-primary);
            font-size: 0.88rem;
            line-height: 1.45;
            font-weight: 500;
        }
        @media (max-width: 768px) {
            .char-blurb-quote {
                margin-top: var(--space-2);
                padding: 0.55rem 0.65rem;
            }
            .char-blurb-quote-text {
                font-size: 0.82rem;
            }
        }
        .char-desc {
            font-size: calc(0.8125rem + 0.5pt);
            color: var(--text-primary);
            line-height: 1.6;
            margin: 0;
            flex: 1;
            min-height: 0;
            overflow: hidden;
            white-space: normal;
            word-break: break-word;
            -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
        }
        /* HTML element styling for description preview (same as More section) */
        .char-desc br {
            display: inline;
            margin: 0;
        }
        .char-desc p {
            margin: 0.75em 0;
        }
        .char-desc p:first-child {
            margin-top: 0;
        }
        .char-desc p:last-child {
            margin-bottom: 0;
        }
        .char-desc img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 1em auto;
            border-radius: var(--radius-md);
        }
        .char-desc p img {
            margin: 0.75em auto;
        }
        .char-desc hr {
            border: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-primary) 55%, transparent), transparent);
            margin: 0.9em 0;
            opacity: 0.9;
        }
        .char-desc blockquote {
            margin: 0.9em 0;
            padding: 0.75em 0.9em;
            border-left: 3px solid color-mix(in srgb, var(--accent-primary) 45%, var(--border-default));
            background: color-mix(in srgb, var(--bg-subtle) 85%, transparent);
            border-radius: var(--radius-sm);
        }
        .char-desc h1, .char-desc h2, .char-desc h3, .char-desc h4, .char-desc h5, .char-desc h6 {
            margin: 0.85em 0 0.5em;
            line-height: 1.25;
            font-weight: 700;
            color: var(--text-primary);
        }
        .char-desc h5, .char-desc h6 {
            font-size: 0.8125rem;
            font-weight: 650;
            opacity: 0.95;
        }
        .char-desc mark {
            padding: 0.1em 0.25em;
            border-radius: 0.25em;
        }
        .char-desc a {
            color: var(--accent-primary);
            text-decoration: underline;
            text-decoration-color: var(--accent-primary);
            text-underline-offset: 2px;
            font-weight: 500;
            transition: all var(--transition-fast);
        }
        .char-desc a:hover {
            color: var(--accent-hover);
            text-decoration-color: var(--accent-hover);
        }
        .char-desc-more {
            position: absolute;
            bottom: 8px;
            right: 0;
            display: inline-flex;
            align-items: center;
            padding: 0.25rem var(--space-2);
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--accent-primary);
            background: var(--bg-base);
            border: none;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            z-index: 10;
            /* Position above the gradient fade - outside masked element */
        }
        .char-desc-more:hover {
            color: var(--accent-hover);
            background: var(--bg-subtle);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        }
        .char-tags {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 6px;
            margin: 0;
            flex-shrink: 0;
            max-width: 100%;
            max-height: 32px;
            overflow: hidden;
            padding: 0.14rem 0;
        }
        .char-tags-shell {
            flex: 0 0 auto;
            min-width: 0;
            margin: 0.16rem 0 0.42rem;
        }
        .char-tags-shell.has-overflow {
            position: relative;
            z-index: 32;
        }
        .char-tags-shell.has-overflow .char-tags {
            margin: 0;
        }
        .char-tags-shell.expanded .char-tags {
            flex-wrap: wrap;
            align-items: flex-start;
            max-height: min(300px, 42vh);
            overflow-y: auto;
        }
        .char-tag {
            background: var(--bg-subtle);
            color: var(--text-secondary);
            padding: 0.1875rem 0.5rem;
            border-radius: var(--radius-full);
            font-size: 0.6875rem;
            font-weight: 500;
            border: 1px solid var(--border-subtle);
            min-width: 0;
            max-width: min(14rem, 44%);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .char-tag-label {
            display: block;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        button.char-tag {
            appearance: none;
            line-height: 1;
            cursor: pointer;
            flex: 0 1 auto;
        }
        button.char-tag:not(.more):hover {
            color: var(--accent-primary);
            border-color: color-mix(in srgb, var(--accent-primary) 48%, var(--border-subtle));
            background: color-mix(in srgb, var(--accent-primary) 13%, var(--bg-subtle));
        }
        .char-tag.char-tag--static {
            cursor: default;
            color: color-mix(in srgb, var(--text-secondary) 46%, transparent);
            background: color-mix(in srgb, var(--bg-subtle) 36%, transparent);
            border-style: dotted;
            border-color: color-mix(in srgb, var(--text-secondary) 22%, transparent);
            opacity: 0.52;
            filter: saturate(0.55);
        }
        .char-tag.extra {
            display: none;
        }
        .char-tags-shell.expanded .char-tag.extra {
            display: inline-flex;
        }
        .char-tag.more {
            border: 1px dotted color-mix(in srgb, var(--brand-hot-pink) 78%, white 22%);
            background: color-mix(in srgb, var(--brand-hot-pink) 9%, transparent);
            color: var(--brand-hot-pink);
            flex: 0 0 auto;
            font-weight: 800;
            max-width: none;
            margin-left: auto;
        }
        .char-tags-shell.expanded .char-tag.more {
            margin-left: 0;
        }
        .char-tag.more:hover {
            border-color: color-mix(in srgb, var(--brand-hot-pink) 92%, white 8%);
            background: color-mix(in srgb, var(--brand-hot-pink) 15%, transparent);
            color: color-mix(in srgb, var(--brand-hot-pink) 86%, white 14%);
        }
        .char-tags-sheet {
            position: absolute;
            left: 0;
            right: 0;
            bottom: calc(100% + 0.45rem);
            z-index: 34;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateY(0.75rem);
            transition: opacity 160ms ease, transform 200ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 200ms;
        }
        .char-tags-sheet.open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(0);
            transition: opacity 160ms ease, transform 200ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
        }
        .char-tags-sheet-panel {
            width: 100%;
            max-height: min(42vh, 360px);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
            background:
                radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--accent-primary) 16%, transparent), transparent 16rem),
                color-mix(in srgb, var(--bg-elevated) 96%, #000 4%);
            box-shadow: 0 16px 46px rgba(0, 0, 0, 0.46);
        }
        .char-tags-sheet-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
            padding: 0.58rem 0.72rem 0.48rem;
            border-bottom: 1px solid var(--border-subtle);
            flex: 0 0 auto;
        }
        .char-tags-sheet-head h3 {
            margin: 0;
            color: var(--text-primary);
            font-size: 0.86rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }
        .char-tags-sheet-close {
            appearance: none;
            width: 34px;
            height: 34px;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: var(--text-muted);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            font-size: 1.9rem;
            line-height: 0.82;
            cursor: pointer;
        }
        .char-tags-sheet-close:hover {
            color: var(--text-primary);
        }
        .char-tags-sheet-list {
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            gap: 0.48rem;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 0.64rem 0.72rem 0.78rem;
        }
        .char-tags-sheet-list .char-tag {
            max-width: 100%;
            display: inline-flex;
            flex: 0 1 auto;
        }
		        .char-community-pulse {
		            display: flex;
		            flex-direction: column;
		            gap: 0.5rem;
		            flex-shrink: 0;
		            min-width: 0;
		            margin: 3px 0 calc(var(--space-2) - 3px);
		            padding: 0.64rem 0.72rem 0.56rem;
	            border: 0;
	            border-radius: var(--radius-md);
	            background:
	                linear-gradient(180deg, rgba(255, 45, 154, 0.09) 0%, rgba(24, 24, 27, 0.94) 100%),
	                color-mix(in srgb, var(--bg-elevated) 92%, #000 8%);
	            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	        }
	        .char-community-pulse-stats {
	            display: inline-flex;
	            align-items: center;
	            justify-content: flex-end;
	            gap: 0.72rem;
	            flex: 0 1 auto;
	            min-width: 0;
	            color: var(--text-muted);
	            font-size: 0.76rem;
	            line-height: 1;
	            white-space: nowrap;
	        }
	        .char-community-pulse-stats span {
	            display: inline-flex;
	            align-items: center;
	            gap: 0.32rem;
	            min-width: 0;
	        }
	        .char-community-pulse-stats .fa-heart {
	            color: #f472b6;
	        }
	        .char-community-pulse-stats .fa-comment-dots {
	            color: color-mix(in srgb, var(--text-muted) 82%, white 18%);
	        }
		        .char-community-pulse-list {
		            display: grid;
		            gap: 0.44rem;
		            min-width: 0;
		            cursor: pointer;
	        }
	        .char-community-pulse-list:focus-visible,
	        .char-community-pulse-foot:focus-visible,
	        .char-community-pulse-action:focus-visible {
		            outline: 2px solid color-mix(in srgb, var(--brand-hot-pink) 72%, white 28%);
		            outline-offset: 2px;
	        }
	        .char-community-pulse-item {
	            display: grid;
	            grid-template-columns: 32px minmax(0, 1fr) auto;
	            align-items: center;
	            gap: 0.58rem;
	            min-width: 0;
	        }
	        .char-community-pulse-avatar {
	            width: 32px;
	            height: 32px;
	            border-radius: 50%;
	            display: inline-flex;
	            align-items: center;
	            justify-content: center;
	            flex: 0 0 32px;
	            border: 1px solid rgba(255, 255, 255, 0.18);
	            background: color-mix(in srgb, var(--bg-subtle) 80%, var(--brand-hot-pink) 20%);
	            color: var(--text-primary);
	            font-size: 0.68rem;
	            font-weight: 850;
	            letter-spacing: 0.02em;
	        }
	        .char-community-pulse-copy {
	            display: grid;
	            gap: 0.16rem;
	            min-width: 0;
	        }
	        .char-community-pulse-meta {
	            display: inline-flex;
	            align-items: baseline;
	            gap: 0.48rem;
	            min-width: 0;
	            line-height: 1.15;
	        }
	        .char-community-pulse-meta strong {
	            min-width: 0;
	            overflow: hidden;
	            text-overflow: ellipsis;
	            white-space: nowrap;
	            color: var(--text-primary);
	            font-size: 0.78rem;
	            font-weight: 800;
	        }
	        .char-community-pulse-meta .char-community-pulse-author-link {
	            min-width: 0;
	            overflow: hidden;
	            text-overflow: ellipsis;
	            white-space: nowrap;
	            color: var(--text-primary);
	            font-size: 0.78rem;
	            font-weight: 800;
	        }
	        .char-community-pulse-meta em {
	            color: var(--text-muted);
	            font-size: 0.7rem;
	            font-style: normal;
	            white-space: nowrap;
	        }
	        .char-community-pulse-text {
	            display: block;
	            min-width: 0;
	            overflow: hidden;
	            text-overflow: ellipsis;
	            white-space: nowrap;
	            color: color-mix(in srgb, var(--text-primary) 88%, var(--text-muted) 12%);
	            font-size: 0.82rem;
	            line-height: 1.25;
	        }
	        .char-community-pulse-kudos-mark {
	            display: inline-flex;
	            align-items: center;
	            justify-content: center;
	            color: #f472b6;
	            font-size: 0.82rem;
	        }
	        .char-community-pulse-empty {
	            min-height: 32px;
	            display: flex;
	            align-items: center;
	            color: var(--text-muted);
	            font-size: 0.78rem;
	            line-height: 1.35;
	        }
		        .char-community-pulse-actions {
		            display: grid;
		            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		            gap: 0.5rem;
	        }
	        .char-community-pulse-action {
	            appearance: none;
	            min-width: 0;
	            min-height: 36px;
	            display: inline-flex;
	            align-items: center;
	            justify-content: center;
	            gap: 0.44rem;
	            border-radius: var(--radius-md);
	            border: 1px solid rgba(255, 255, 255, 0.14);
	            background: color-mix(in srgb, var(--bg-subtle) 84%, white 16%);
	            color: var(--text-primary);
	            padding: 0.38rem 0.55rem;
	            font-size: 0.82rem;
	            font-weight: 820;
	            line-height: 1;
	            cursor: pointer;
	        }
	        .char-community-pulse-action span {
	            min-width: 0;
	            overflow: hidden;
	            text-overflow: ellipsis;
	            white-space: nowrap;
	        }
	        .char-community-pulse-action:hover {
	            border-color: rgba(255, 255, 255, 0.24);
	            background: color-mix(in srgb, var(--bg-subtle) 72%, white 28%);
	        }
	        .char-community-pulse-kudos i {
	            color: #f472b6;
	        }
	        .char-community-pulse-comment {
	            border-color: color-mix(in srgb, var(--brand-hot-pink) 50%, transparent);
	            background: linear-gradient(180deg, #ec4899 0%, #db2777 100%);
	            color: #fff;
	        }
		        .char-community-pulse-comment:hover {
		            border-color: color-mix(in srgb, #f9a8d4 68%, transparent);
		            background: linear-gradient(180deg, #f052a2 0%, #e03786 100%);
		        }
		        .char-community-pulse-foot {
		            display: flex;
		            align-items: center;
		            justify-content: space-between;
		            gap: 0.72rem;
		            min-width: 0;
		            padding-top: 0.46rem;
		            border-top: 1px solid rgba(255, 255, 255, 0.08);
		            cursor: pointer;
		        }
		        .char-community-pulse-source-meta {
		            flex: 1 1 auto;
		            min-width: 0;
		        }
		        .char-community-pulse-source-meta .char-meta-row {
		            margin: 0;
		            gap: 0.64rem;
		            row-gap: 0.1rem;
		            font-size: 0.7rem;
		        }
		        .char-community-pulse-foot .char-community-pulse-stats {
		            flex: 0 0 auto;
		        }
        @media (min-width: 769px) {
            .char-main.has-community-pulse .char-hero {
                width: 330px;
                min-width: 330px;
                max-width: 330px;
            }
        }
        @media (max-width: 768px) {
            .char-main.has-community-pulse .char-hero {
                height: calc(42vh + 18px);
            }
            .char-tags-shell {
                margin-top: 0;
                margin-bottom: 0.32rem;
            }
            .char-community-pulse {
                gap: 0.42rem;
                margin-top: 5px;
                margin-bottom: 3px;
                padding: 0.52rem 0.58rem 0.48rem;
            }
            .char-community-pulse-stats {
                gap: 0.48rem;
                font-size: 0.7rem;
            }
            .char-community-pulse-list {
                gap: 0.36rem;
            }
            .char-community-pulse-item {
                grid-template-columns: 28px minmax(0, 1fr) auto;
                gap: 0.5rem;
            }
            .char-community-pulse-item:nth-child(n+2) {
                display: none;
            }
            .char-community-pulse-avatar {
                width: 28px;
                height: 28px;
                flex-basis: 28px;
                font-size: 0.62rem;
            }
            .char-community-pulse-meta strong {
                font-size: 0.74rem;
            }
            .char-community-pulse-text {
                font-size: 0.78rem;
            }
            .char-community-pulse-action {
                min-height: 30px;
                font-size: 0.78rem;
                padding: 0.255rem 0.42rem;
            }
            .char-community-pulse-foot {
                gap: 0.52rem;
                padding-top: 0.4rem;
            }
            .char-community-pulse-source-meta .char-meta-row {
                gap: 0.46rem;
                font-size: 0.68rem;
            }
        }
	        @media (max-width: 400px) {
	            .char-community-pulse-stats {
	                flex-direction: column;
	                align-items: flex-end;
	                gap: 0.18rem;
	            }
	            .char-community-pulse-action {
	                gap: 0.32rem;
	            }
	        }
	        .char-meta-row {
	            display: flex;
            flex-wrap: wrap;
            gap: var(--space-3);
            row-gap: 0.125rem;
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-bottom: var(--space-2);
            flex-shrink: 0;
        }
        .char-meta-row span {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .char-meta-row .char-meta-stat i {
            font-size: 0.72rem;
            opacity: 0.88;
        }
        .char-datacat-note {
            margin: 0 0 var(--space-2);
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        /* Action Buttons */
        .char-actions {
            display: flex;
            gap: var(--space-2);
            margin-top: auto;
            margin-bottom: 0;
            padding-bottom: 0;
            flex-shrink: 0;
            align-items: center;
            border-bottom: 1px solid var(--border-subtle);
            min-width: 0; /* Allow child truncation */
        }
        .char-source-preview-main .char-info {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }
        .char-source-preview-note {
            margin: 0;
            padding: 8px 10px;
            border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 45%, var(--border-subtle) 55%);
            border-radius: var(--radius-md);
            background: color-mix(in srgb, var(--warning, #f59e0b) 10%, transparent 90%);
            color: var(--text-primary);
            font-size: 0.8rem;
            line-height: 1.35;
        }
        .char-source-preview-desc {
            font-size: 0.82rem;
            line-height: 1.55;
            color: var(--text-secondary);
        }
        .char-action-btn {
            flex: 0 0 auto; /* Don't grow, don't shrink, auto width */
            padding: 0.625rem var(--space-3);
            border-radius: var(--radius-md);
            font-size: 0.8125rem;
            font-weight: 500;
            text-align: center;
            cursor: pointer;
            transition: all var(--transition-fast);
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
        }
        .char-action-btn.primary {
            background: var(--accent-primary);
            color: white;
            border: none;
            margin-left: auto; /* Push to the right */
            min-width: 140px;
            padding-left: 1.25rem;
            padding-right: 1.25rem;
        }
        .char-download-dropdown .char-download-trigger {
            width: auto;
            min-width: 0;
            padding-left: var(--space-3);
            padding-right: var(--space-3);
        }
        .char-action-btn.primary:hover {
            background: var(--accent-hover);
        }
        .char-action-btn.secondary {
            background: transparent;
            color: var(--text-secondary);
            border: 1px solid var(--border-default);
        }
        .char-action-btn.secondary:hover {
            background: var(--bg-subtle);
            color: var(--text-primary);
            border-color: var(--border-strong);
        }
        .char-action-btn.char-direct-upload-delete-btn {
            border-color: color-mix(in srgb, var(--danger, #ef4444) 62%, var(--border-default) 38%);
            color: color-mix(in srgb, var(--danger, #ef4444) 86%, #ffffff 14%);
        }
        .char-action-btn.char-direct-upload-delete-btn:hover {
            background: color-mix(in srgb, var(--danger, #ef4444) 15%, transparent 85%);
            border-color: color-mix(in srgb, var(--danger, #ef4444) 85%, var(--border-strong) 15%);
            color: #fff;
        }
        .char-action-btn.char-direct-upload-delete-btn.is-loading {
            cursor: wait;
            opacity: 0.72;
        }
        .char-action-btn.char-ultra-recovery-btn {
            white-space: nowrap;
            border-color: color-mix(in srgb, var(--warning, #f59e0b) 55%, var(--border-default) 45%);
            color: color-mix(in srgb, var(--warning, #f59e0b) 75%, #fff 25%);
        }
        .char-action-btn.char-ultra-recovery-btn:hover {
            background: color-mix(in srgb, var(--warning, #f59e0b) 14%, transparent 86%);
            border-color: color-mix(in srgb, var(--warning, #f59e0b) 70%, var(--border-strong) 30%);
            color: color-mix(in srgb, var(--warning, #f59e0b) 92%, #fff 8%);
        }
        /* (Chat button is hidden for non-admin; keep disabled styling for other actions.) */
        .char-source-link-slot {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }
        .char-action-btn.char-source-link {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: 0.125rem;
            line-height: 1.2;
            padding: 0.5rem var(--space-3);
            border: none;
            background: transparent;
            flex: 0 1 auto;
            min-width: 0;
            max-width: 100%;
            -webkit-tap-highlight-color: transparent;
            color: inherit;
            text-decoration: none;
        }
        .char-action-btn.char-source-link:not(.char-source-link--static) {
            cursor: pointer;
        }
        .char-action-btn.char-source-link:hover {
            background: transparent;
            border: none;
        }
        .char-action-btn.char-source-link--static {
            cursor: default;
        }
        .char-action-btn.char-source-link--static:hover {
            background: transparent;
            border: none;
        }
        .char-action-btn.char-source-link .author-label {
            font-size: 0.5rem;
            color: var(--accent-primary);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-weight: 400;
        }
        .char-action-btn.char-source-link .author-name {
            font-size: 0.78rem;
            color: var(--text-primary);
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.28rem;
            max-width: min(100%, 240px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 0.14rem 0.44rem;
            border-radius: 0.45rem;
            border: 1px solid color-mix(in srgb, var(--accent-primary) 36%, var(--border-default));
            background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-subtle));
            text-decoration: none;
        }
        .char-action-btn.char-source-link .author-name-text {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .char-action-btn.char-source-link--static .author-name {
            cursor: default;
        }
        .char-action-btn.char-source-link:not(.char-source-link--static):hover .author-name,
        .char-action-btn.char-source-link:not(.char-source-link--static):focus-visible .author-name {
            color: var(--text-primary);
            background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-elevated));
            border-color: color-mix(in srgb, var(--accent-primary) 46%, var(--border-strong));
        }
        .char-chat-launch {
            position: relative;
            display: inline-flex;
            flex: 0 0 auto;
        }
        .char-chat-launch .char-chat-btn {
            width: 2.125rem;
            min-width: 2.125rem;
            padding: 0;
            background: var(--accent-primary);
            color: white;
            border: none;
        }
        .char-chat-launch .char-chat-btn i {
            font-size: 0.95rem;
            line-height: 1;
            pointer-events: none;
        }
        .char-chat-launch .char-chat-btn:hover {
            background: var(--accent-hover);
        }
        .char-chat-launch .char-chat-btn.admin-dropdown-btn {
            position: relative;
            text-align: center;
            padding: 0;
        }
        .char-chat-launch .char-chat-btn.admin-dropdown-btn::after {
            display: none;
        }
        .char-chat-launch .char-chat-dropdown-menu {
            right: 0;
            left: auto;
            top: auto;
            bottom: calc(100% + var(--space-2));
            min-width: 132px;
            z-index: 80;
            transform-origin: bottom right;
        }
        .char-chat-launch .char-chat-dropdown-menu .char-chat-view-option {
            font-size: 0.8rem;
        }
        /* Character modal drop-up menus: distinct background from modal so they read as floating panels */
        .character-modal .char-chat-launch .char-chat-dropdown-menu,
        .character-modal .char-download-dropdown .char-download-menu,
        .character-modal .char-save-dropdown .char-save-menu {
            background: var(--bg-elevated);
            border-color: var(--border-strong);
            padding: var(--space-1);
        }
        /* Match details drop-up option spacing (same as .char-tab-selector-item). */
        .character-modal .char-chat-launch .char-chat-dropdown-menu .char-chat-view-option,
        .character-modal .char-download-dropdown .char-download-menu .char-download-option {
            padding: 0.5rem var(--space-3);
            border-radius: var(--radius-sm);
            font-size: 0.8125rem;
            color: var(--text-secondary);
        }
        .character-modal .char-download-dropdown .char-download-menu .char-download-disabled {
            padding: 0.5rem var(--space-3);
            border-radius: var(--radius-sm);
            font-size: 0.8125rem;
            color: var(--text-muted);
            cursor: default;
            user-select: none;
        }
        .character-modal .char-chat-launch .char-chat-dropdown-menu .char-chat-view-option:hover,
        .character-modal .char-download-dropdown .char-download-menu .char-download-option:hover {
            background: var(--bg-subtle);
            color: var(--text-primary);
        }
        .char-save-dropdown .char-save-menu {
            left: auto;
            right: 0;
            top: calc(100% + 4px);
            min-width: 238px;
            z-index: 90;
            transform-origin: top right;
        }
        .char-save-menu-header {
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            color: var(--text-secondary);
            padding: 0.2rem var(--space-2) 0.38rem;
        }
        .char-save-menu-list {
            display: flex;
            flex-direction: column;
            gap: 2px;
            max-height: 180px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .char-save-folder-row {
            display: flex;
            align-items: center;
            gap: 0;
            width: 100%;
            min-width: 0;
            position: relative;
        }
        .char-save-folder-row.is-member .char-save-folder-option {
            background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-subtle));
            color: var(--text-primary);
            padding-right: 2rem;
        }
        .char-save-folder-row.is-disabled .char-save-folder-option,
        .char-save-menu .char-save-folder-option:disabled {
            cursor: not-allowed;
            opacity: 0.46;
            color: var(--text-muted);
        }
        .char-save-menu .char-save-folder-option {
            width: auto;
            flex: 1 1 auto;
            min-width: 0;
            text-align: left;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            padding: 0.5rem var(--space-3);
            border-radius: var(--radius-sm);
            font-size: calc(0.8125rem + 2pt);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            position: relative;
        }
        .char-save-menu .char-save-folder-option:hover {
            background: var(--bg-subtle);
            color: var(--text-primary);
        }
        .char-save-folder-row.is-disabled .char-save-folder-option:hover,
        .char-save-menu .char-save-folder-option:disabled:hover {
            background: transparent;
            color: var(--text-muted);
        }
        .char-save-folder-name {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .char-save-menu .char-save-remove-btn {
            width: 22px;
            min-width: 22px;
            max-width: 22px;
            height: 22px;
            min-height: 22px;
            border: 1px solid rgba(239, 68, 68, 0.75);
            border-radius: 999px;
            background: rgba(239, 68, 68, 0.16);
            color: #ef4444;
            font-size: 0;
            font-weight: 700;
            line-height: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 0;
            flex-shrink: 0;
            text-align: center;
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;
        }
        .char-save-menu .char-save-remove-btn::before {
            content: '\00d7';
            display: block;
            font-size: 1.22rem;
            font-weight: 800;
            line-height: 1;
            transform: translateY(-2px);
        }
        .char-save-menu .char-save-remove-btn:hover {
            border-color: #ef4444;
            color: #fff;
            background: #ef4444;
        }
        .char-save-menu-status {
            font-size: 0.75rem;
            color: var(--text-muted);
            padding: 0.4rem var(--space-2);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 28px;
        }
        .char-save-menu-status .trigger-loading-spinner {
            width: 12px;
            height: 12px;
            border-width: 2px;
            flex: 0 0 auto;
        }
        .char-save-menu-divider {
            border-top: 1px solid var(--border-subtle);
            margin: 0.25rem 0 0.4rem;
        }
        .char-save-custom-row {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 0 2px 2px;
        }
        .char-save-custom-input {
            flex: 1;
            min-width: 0;
            border: 1px solid var(--border-default);
            background: var(--bg-subtle);
            color: var(--text-primary);
            border-radius: var(--radius-sm);
            padding: 0.4rem 0.5rem;
            font-size: 0.875rem;
            line-height: 1.1;
        }
        .char-save-custom-input:focus {
            outline: none;
            border-color: var(--accent-primary);
        }
        .char-save-menu .char-save-custom-submit {
            flex: 0 0 auto;
            width: auto;
            text-align: center;
            border: 1px solid var(--border-default);
            background: var(--accent-primary);
            color: #fff;
            border-radius: var(--radius-sm);
            padding: 0.4rem 0.55rem;
            font-size: calc(0.75rem + 2pt);
            font-weight: 600;
            cursor: pointer;
            position: relative;
        }
        .char-save-menu .char-save-custom-submit:hover {
            background: var(--accent-hover);
        }
        .char-save-menu .char-save-folder-option.is-loading,
        .char-save-menu .char-save-custom-submit.is-loading {
            pointer-events: none;
            cursor: wait;
        }
        .char-save-menu .char-save-folder-option.is-loading .char-save-folder-name,
        .char-save-menu .char-save-custom-submit.is-loading {
            color: transparent !important;
        }
        .char-save-menu .char-save-folder-option.is-loading::after,
        .char-save-menu .char-save-custom-submit.is-loading::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 14px;
            height: 14px;
            border-radius: 999px;
            border: 2px solid color-mix(in srgb, var(--accent-primary) 75%, #ffffff 25%);
            border-top-color: transparent;
            transform: translate(-50%, -50%);
            animation: char-save-spinner 0.7s linear infinite;
            pointer-events: none;
        }
        @keyframes char-save-spinner {
            to {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        /* Character modal: standardized action buttons – same height, larger font, less padding, tighter text–chevron */
        .character-modal .char-action-btn {
            min-height: 2.125rem;
            padding: 0.3125rem var(--space-2);
            font-size: 0.875rem;
            line-height: 1.25;
        }
        .character-modal .char-download-dropdown .char-download-trigger {
            min-height: 2.125rem;
            padding-top: 0.3125rem;
            padding-bottom: 0.3125rem;
            padding-left: var(--space-2);
            padding-right: 1.125rem;
            font-size: 0.875rem;
        }
        .character-modal .char-chat-launch .char-chat-btn {
            min-height: 2.125rem;
            width: 2.125rem;
            min-width: 2.125rem;
            padding: 0;
            font-size: 0.875rem;
        }
        .character-modal .entity-discussion-btn {
            display: none !important;
            min-height: 2.125rem;
            padding: 0.3125rem var(--space-2);
            font-size: 0.82rem;
        }
        .entity-discussion-btn {
            display: none !important;
        }
        html.buzz-buttons-visible .entity-discussion-btn,
        body.buzz-buttons-visible .entity-discussion-btn {
            display: inline-flex !important;
        }
        html.buzz-buttons-visible .entity-discussion-btn[hidden],
        html.buzz-buttons-visible .entity-discussion-btn[data-buzz-button-hidden="true"],
        body.buzz-buttons-visible .entity-discussion-btn[hidden],
        body.buzz-buttons-visible .entity-discussion-btn[data-buzz-button-hidden="true"] {
            display: none !important;
        }
        .character-modal .char-download-dropdown .char-download-trigger.admin-dropdown-btn::after {
            right: 0.35rem;
        }
        .character-modal .char-action-btn.secondary.char-hero-save-btn {
            min-height: 42px;
            min-width: 42px;
            width: 42px;
            height: 42px;
            padding: 0;
            font-size: 1rem;
            line-height: 1;
        }
        .character-modal .char-action-btn.primary {
            padding-left: var(--space-2);
            min-width: 0;
        }
        .character-modal .char-tab-selector-btn {
            width: 36px;
            height: 36px;
            min-width: 36px;
            min-height: 36px;
        }
        .character-modal .char-tab-selector-btn::before {
            font-size: 1.25rem;
        }
        .character-modal .char-tab-selector-btn.open::before {
            font-size: 1.0625rem;
        }

        /* Download drop-up (same UI pattern as .char-chat-launch: menu above button) */
        .char-download-dropdown {
            position: relative;
            display: inline-flex;
            flex: 0 0 auto;
        }
        .char-download-dropdown .char-download-trigger {
            padding-right: 2rem; /* space for chevron so it doesn’t overlap text */
        }
        .char-download-dropdown .char-download-trigger.admin-dropdown-btn::after {
            right: 0.5rem;
            border-top-color: white;
        }
        .char-download-dropdown.open .char-download-trigger.admin-dropdown-btn::after {
            transform: translateY(-35%) rotate(180deg);
        }
        .char-download-dropdown .char-download-menu {
            right: 0;
            left: auto;
            top: auto;
            bottom: calc(100% + var(--space-2));
            min-width: 132px;
            z-index: 80;
            transform-origin: bottom right;
        }
        .char-download-dropdown .char-download-menu .char-download-option {
            font-size: 0.8rem;
        }
        .char-download-dropdown .char-download-menu .char-download-disabled {
            font-size: 0.8rem;
        }
        
        /* Tab Selector Dropdown (replaces bottom tabs) - Hamburger Button */
        .char-tab-selector {
            position: relative;
            margin-left: 0;
        }
        .char-tab-selector-btn {
            width: 48px;
            height: 48px;
            padding: 0;
            border-radius: var(--radius-md);
            background: transparent;
            color: var(--text-secondary);
            border: none;
            cursor: pointer;
            transition: all var(--transition-fast);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .char-tab-selector-btn:hover {
            background: var(--bg-subtle);
            color: var(--text-primary);
        }
        .char-tab-selector-btn.active {
            color: var(--accent-primary);
            background: var(--accent-muted);
        }
        .char-tab-selector-btn::before {
            content: '☰';
            font-size: 1.5rem;
            line-height: 1;
        }
        .char-tab-selector-btn.open {
            background: var(--accent-muted);
            color: var(--accent-primary);
        }
        .char-tab-selector-btn.open::before {
            content: '✕';
            font-size: 1.25rem;
        }
        .char-tab-selector-dropdown {
            position: absolute;
            bottom: calc(100% + var(--space-2));
            right: 0;
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-md);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            min-width: 180px;
            max-height: 340px;
            overflow-y: auto;
            z-index: 1000;
            display: none;
            flex-direction: column;
            padding: var(--space-1);
            gap: 2px;
        }
        .char-tab-selector-dropdown.open {
            display: flex;
        }
        .char-tab-selector-item {
            width: 100%;
            border: none;
            background: transparent;
            padding: 0.5rem var(--space-3);
            border-radius: var(--radius-sm);
            font-size: 0.8125rem;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all var(--transition-fast);
            text-align: left;
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-family: inherit;
            line-height: 1.2;
        }
        .char-tab-selector-item:hover {
            background: var(--bg-subtle);
            color: var(--text-primary);
        }
        .char-tab-selector-item.active {
            background: var(--accent-muted);
            color: var(--accent-primary);
            font-weight: 500;
        }
        .char-tab-selector-item.char-tab-selector-source {
            border-top: 1px solid var(--border-subtle);
            margin-top: var(--space-1);
            padding-top: var(--space-2);
        }

        /* Hide navigation buttons */
        .character-navigation {
            display: none !important;
        }

        /* Desktop Navigation Buttons (Side Arrows) - Positioned relative to modal-content */
        .char-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 48px;
            height: 64px;
            background: var(--bg-elevated);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border: 1px solid var(--border-strong);
            border-radius: var(--radius-md);
            color: var(--text-primary);
            font-size: 1.5rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all var(--transition-fast);
            z-index: 1000;
            box-shadow: var(--shadow-lg);
        }
        
        /* Show navigation buttons on desktop */
        @media (min-width: 769px) {
            .char-nav {
                opacity: 1;
                pointer-events: auto;
                display: flex;
            }
        }

        .char-nav:hover {
            background: var(--bg-elevated);
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }

        .char-nav:disabled {
            opacity: 0.3;
            cursor: not-allowed;
            border-color: var(--border-subtle);
            color: var(--text-muted);
        }

        .char-nav:disabled:hover {
            background: rgba(24, 24, 27, 0.95);
            border-color: var(--border-subtle);
            color: var(--text-muted);
        }

        /* Position buttons relative to modal-content, accounting for being inside modal-body */
        .char-nav-prev {
            left: calc(-48px - var(--space-4));
        }

        .char-nav-next {
            right: calc(-48px - var(--space-4));
        }
        
        /* Ensure buttons are positioned relative to modal-content on desktop */
        @media (min-width: 769px) {
            .character-modal .modal-content {
                position: relative; /* Positioning context for nav buttons */
            }
            .character-modal .modal-body {
                position: static; /* Remove positioning context so buttons position relative to modal-content */
            }
        }

        /* Navigation buttons on mobile */
        @media (max-width: 768px) {
            .char-nav {
                display: none !important;
            }
        }

        /* Bottom Tabs Bar - DEPRECATED (replaced by dropdown selector) */
        .char-tabs {
            display: none; /* Hidden - replaced by dropdown selector */
        }

        /* Slide-up Panel Container - Covers entire modal except header */
        /* Parent is char-main, so it covers full modal height */
        .char-slideup-container {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--bg-elevated);
            border-top: 1px solid var(--border-default);
            border-radius: 0;
            /* Cover from bottom to top of char-main (which is just below header) */
            top: 0;
            /* Start hidden below the viewport */
            transform: translateY(100%);
            transition: transform 0.3s ease-out;
            z-index: 1000;
            overflow: hidden;
        }
        .char-slideup-container.open {
            /* Slide up to cover entire char-main area (full modal height except header) */
            transform: translateY(0);
        }
        .char-slideup-container.is-restoring {
            transition: none;
        }
        .char-slideup-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.35rem var(--space-4);
            border-bottom: 1px solid var(--border-subtle);
            background: var(--bg-subtle);
            position: sticky;
            top: 0;
            z-index: 10;
            flex-shrink: 0;
            height: 46px;
        }
        .char-slideup-title {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-primary);
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }
        .char-slideup-title-badge {
            display: inline-flex;
            align-items: center;
            padding: 2px 6px;
            border-radius: 999px;
            border: 1px solid rgba(234, 179, 8, 0.65);
            background: #facc15;
            color: #1f2937;
            font-size: 0.58rem;
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: 0.05em;
        }
        .char-slideup-hide {
            padding: 0.42rem 0.8rem;
            background: var(--accent-muted);
            border: 1px solid rgba(255, 45, 154, 0.35);
            border-radius: var(--radius-sm);
            color: var(--accent-primary);
            font-size: 0.78rem;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
            transition: all var(--transition-fast);
        }
        .char-slideup-hide:hover {
            background: var(--accent-primary);
            color: #0b0b0c;
        }

        /* Tab Content Panel */
        .char-tab-panel {
            display: none;
            padding: var(--space-2) var(--space-4) var(--space-4);
            height: calc(100% - 46px); /* Full container height minus header */
            overflow-y: auto;
            /* Allow touch scrolling */
            -webkit-overflow-scrolling: touch;
        }
        .char-tab-panel.active {
            display: block;
        }
        .char-tab-panel-content {
            font-size: 0.8125rem;
            color: var(--text-primary);
            line-height: 1.6;
            white-space: pre-wrap;
            word-break: break-word;
        }
        .char-tab-panel[data-tab="sources"] .char-tab-panel-content {
            white-space: normal;
            overflow: visible;
        }
        .char-tab-panel[data-tab="saucepan-recovery"] {
            display: none;
            flex-direction: column;
            overflow: hidden;
        }
        .char-tab-panel[data-tab="saucepan-recovery"].active {
            display: flex;
        }
        .char-tab-panel[data-tab="saucepan-recovery"] .char-tab-panel-content {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            white-space: normal;
        }
        .char-tab-panel[data-tab="full-text"] .char-tab-panel-content {
            white-space: normal;
        }
        .char-full-text-content {
            margin: 0;
            padding: 0.75rem;
            border-radius: var(--radius-md);
            border: 1px solid var(--border-subtle);
            background: color-mix(in srgb, var(--bg-subtle) 86%, transparent);
            color: var(--text-primary);
            white-space: pre-wrap;
            word-break: break-word;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 0.75rem;
            line-height: 1.5;
        }
        .char-full-text-empty {
            margin: 0;
            color: var(--text-muted);
            font-size: 0.8rem;
            line-height: 1.5;
        }
        .char-tab-panel[data-tab="score"] .char-tab-panel-content {
            white-space: normal;
        }
        .char-score-panel-feedback {
            margin: 0 0 var(--space-2);
            font-size: 0.75rem;
            color: var(--text-muted);
            line-height: 1.45;
            text-align: center;
        }
        .char-score-panel-feedback-link {
            color: #f59e0b;
            font-weight: 700;
            text-decoration: underline;
            text-decoration-color: rgba(245, 158, 11, 0.65);
        }
        .char-score-panel-feedback-link:hover {
            color: #d97706;
        }
        .char-score-panel-warning {
            margin: 0 0 var(--space-2);
            padding: 8px 10px;
            border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 45%, var(--border-subtle) 55%);
            border-radius: var(--radius-md);
            background: color-mix(in srgb, var(--warning, #f59e0b) 10%, transparent 90%);
            color: var(--text-primary);
        }
        .char-score-panel-warning-head {
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
        .char-score-panel-warning-label {
            font-size: 0.62rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: color-mix(in srgb, var(--warning, #f59e0b) 70%, var(--text-primary) 30%);
            flex: 0 0 auto;
        }
        .char-score-panel-warning-title {
            font-size: 0.78rem;
            font-weight: 700;
            line-height: 1.35;
            flex: 1 1 auto;
        }
        .char-score-panel-warning-help-btn {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 60%, var(--border-subtle) 40%);
            background: color-mix(in srgb, var(--warning, #f59e0b) 18%, transparent 82%);
            color: color-mix(in srgb, var(--warning, #f59e0b) 75%, var(--text-primary) 25%);
            font-size: 0.66rem;
            font-weight: 800;
            line-height: 1;
            cursor: pointer;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
        }
        .char-score-panel-warning-help-btn:hover,
        .char-score-panel-warning-help-btn.is-active {
            background: color-mix(in srgb, var(--warning, #f59e0b) 28%, transparent 72%);
            border-color: color-mix(in srgb, var(--warning, #f59e0b) 78%, var(--border-subtle) 22%);
            color: color-mix(in srgb, var(--warning, #f59e0b) 92%, var(--text-primary) 8%);
        }
        .char-score-panel-warning-copy {
            margin: 6px 0 0;
            font-size: 0.75rem;
            line-height: 1.4;
            color: var(--text-secondary);
        }
        .char-score-panel-warning-help {
            margin: 8px 0 0;
            padding: 6px 8px;
            border-radius: var(--radius-sm);
            border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 35%, var(--border-subtle) 65%);
            background: color-mix(in srgb, var(--warning, #f59e0b) 14%, transparent 86%);
            font-size: 0.74rem;
            line-height: 1.45;
            color: var(--text-primary);
        }
        .char-score-panel-empty,
        .char-score-panel-error {
            margin: 0;
            font-size: 0.8125rem;
            color: var(--text-muted);
        }
        .char-score-panel-error-wrap {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
            align-items: flex-start;
        }
        .char-score-panel-state {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
            align-items: center;
            justify-content: center;
            text-align: center;
            min-height: 240px;
            width: 100%;
        }
        .char-score-panel-state--loading {
            gap: var(--space-3);
        }
        .char-score-panel-retry-btn {
            border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.3));
            border-radius: var(--radius-sm);
            background: var(--bg-elevated);
            color: var(--text-primary);
            font-size: 0.75rem;
            font-weight: 600;
            padding: 0.35rem 0.625rem;
            cursor: pointer;
        }
        .char-score-panel-retry-btn:hover {
            background: var(--bg-hover);
        }
        .char-score-panel-view {
            display: block;
        }
        .char-score-panel-view[hidden] {
            display: none;
        }
        .char-score-panel-details-title {
            margin: 0 0 var(--space-2);
            font-size: 0.8125rem;
            font-weight: 700;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .char-score-panel-details-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
            margin-bottom: var(--space-2);
        }
        .char-score-panel-details-head .char-score-panel-details-title {
            margin: 0;
        }
        .char-score-panel-summary-top {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            gap: var(--space-2);
            margin-bottom: var(--space-2);
        }
        .char-score-panel-summary-left {
            flex: 0 0 auto;
        }
        .char-score-panel-summary-right {
            min-width: 0;
            text-align: left;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        .char-score-panel-summary-inline-head {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
        }
        .char-score-panel-summary-inline-head .char-score-panel-summary-inline-label {
            margin: 0;
        }
        .char-score-panel-summary-right-actions {
            margin-top: 6px;
            display: flex;
            justify-content: flex-end;
            width: 100%;
        }
        .char-score-panel-summary-line {
            margin-bottom: var(--space-3);
            text-align: left;
        }
        .char-score-panel-summary-inline-label {
            display: block;
            margin: 0 0 4px;
            font-size: 0.6875rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            font-weight: 600;
        }
        .char-score-panel-summary-inline-value {
            margin: 0;
            font-size: 0.9375rem;
            font-weight: 600;
            line-height: 1.35;
            color: var(--text-primary);
            word-break: break-word;
        }
        .char-score-panel-summary-inline-note {
            margin: 6px 0 0;
            font-size: 0.75rem;
            line-height: 1.45;
            color: var(--text-secondary);
            font-style: italic;
        }
        .char-score-panel-badge {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            min-width: 0;
            color: rgba(255, 255, 255, 0.95);
            padding: 6px 4px;
            border-radius: var(--radius-md);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
        }
        .char-score-panel-badge--low {
            background: rgba(71, 85, 105, 0.48);
        }
        .char-score-panel-badge--mid {
            background: rgba(30, 58, 138, 0.45);
        }
        .char-score-panel-badge--top {
            background: linear-gradient(135deg, rgba(180, 83, 9, 0.52) 0%, rgba(146, 64, 14, 0.58) 100%);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 16px rgba(245, 158, 11, 0.22);
        }
        .char-score-panel-badge-label {
            font-size: 0.5rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            opacity: 0.9;
            margin-bottom: 0;
        }
        .char-score-panel-badge-main {
            font-size: 2.2rem;
            font-weight: 700;
            line-height: 1.1;
            font-variant-numeric: tabular-nums;
        }
        .char-score-panel-badge-niche-label {
            margin-top: 2px;
            font-size: 0.4375rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 600;
            opacity: 0.8;
            line-height: 1.1;
        }
        .char-score-panel-badge-niche {
            font-size: 0.6875rem;
            font-weight: 500;
            opacity: 0.9;
            font-variant-numeric: tabular-nums;
            margin-top: -1px;
            text-align: center;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            justify-content: center;
        }
        .char-score-panel-badge-niche-mark {
            width: 6px;
            height: 6px;
            display: inline-block;
            background: #f59e0b;
            opacity: 0.95;
            transform: rotate(45deg);
            border-radius: 1px;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
        }
        .char-score-panel-summary-section-title {
            margin: 0 0 var(--space-2);
            font-size: 0.6875rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--text-muted);
            font-weight: 700;
        }
        .char-score-panel-summary-section-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
            margin: 0 0 var(--space-2);
        }
        .char-score-panel-summary-section-head .char-score-panel-summary-section-title {
            margin: 0;
        }
        .char-score-panel-summary-dims {
            margin-bottom: var(--space-3);
            max-width: 520px;
            margin-right: auto;
        }
        .char-score-panel-summary-dim-row {
            margin-bottom: var(--space-2);
        }
        .char-score-panel-summary-dim-row:last-child {
            margin-bottom: 0;
        }
        .char-score-panel-summary-dim-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: var(--space-2);
            margin-bottom: 4px;
        }
        .char-score-panel-summary-dim-name {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: capitalize;
            color: var(--text-primary);
        }
        .char-score-panel-summary-dim-score {
            font-size: 0.75rem;
            color: var(--text-secondary);
            font-variant-numeric: tabular-nums;
        }
        .char-score-panel-summary-dim-bar {
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: var(--border-subtle, rgba(0, 0, 0, 0.12));
            overflow: hidden;
        }
        .char-score-panel-summary-dim-fill {
            display: block;
            height: 100%;
            border-radius: 3px;
            background: linear-gradient(90deg, #3b82f6, #2563eb);
        }
        .char-score-panel-summary-meta {
            border-top: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.2));
            padding-top: var(--space-2);
            display: grid;
            gap: var(--space-2);
        }
        .char-score-panel-summary-meta-row {
            display: grid;
            grid-template-columns: minmax(110px, 150px) 1fr;
            gap: var(--space-2);
        }
        .char-score-panel-summary-meta-key {
            text-transform: uppercase;
            letter-spacing: 0.04em;
            font-size: 0.625rem;
            font-weight: 600;
            color: var(--text-muted);
            align-self: center;
        }
        .char-score-panel-summary-meta-val {
            color: var(--text-primary);
            font-size: 0.8125rem;
            line-height: 1.35;
            word-break: break-word;
        }
        .char-score-panel-reason-list {
            display: grid;
            gap: var(--space-2);
        }
        .char-score-panel-reason-item {
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-sm);
            border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
            background: rgba(148, 163, 184, 0.08);
        }
        .char-score-panel-reason-head {
            margin: 0 0 6px;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: var(--space-2);
        }
        .char-score-panel-reason-head-right {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .char-score-panel-reason-info-btn {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 1px solid rgba(148, 163, 184, 0.45);
            background: rgba(15, 23, 42, 0.35);
            color: #dbeafe;
            font-size: 0.625rem;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .char-score-panel-reason-info-btn:hover,
        .char-score-panel-reason-info-btn.is-active {
            background: rgba(59, 130, 246, 0.28);
            border-color: rgba(96, 165, 250, 0.65);
            color: #ffffff;
        }
        .char-score-panel-reason-score {
            color: var(--text-secondary);
            font-variant-numeric: tabular-nums;
        }
        .char-score-panel-reason-info {
            margin: 0 0 6px;
            padding: 0.35rem 0.5rem;
            border-radius: var(--radius-sm);
            background: rgba(15, 23, 42, 0.55);
            color: #ffffff;
            font-size: 0.75rem;
            font-style: italic;
            line-height: 1.4;
        }
        .char-score-panel-reason-body {
            margin: 0;
            font-size: 0.75rem;
            color: var(--text-secondary);
            line-height: 1.4;
        }
        .char-score-panel-appendix-grid {
            display: grid;
            gap: var(--space-2);
        }
        .char-score-panel-appendix-row {
            display: grid;
            grid-template-columns: minmax(110px, 150px) 1fr;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
            border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
            border-radius: var(--radius-sm);
            background: rgba(148, 163, 184, 0.08);
        }
        .char-score-panel-appendix-key {
            text-transform: uppercase;
            letter-spacing: 0.04em;
            font-size: 0.625rem;
            font-weight: 600;
            color: var(--text-muted);
            align-self: center;
        }
        .char-score-panel-appendix-val {
            color: var(--text-primary);
            font-size: 0.75rem;
            line-height: 1.35;
            word-break: break-word;
        }
        .char-score-panel-nav {
            margin-top: var(--space-3);
            display: flex;
            justify-content: flex-end;
        }
        .char-score-panel-nav-btn {
            padding: 0.4rem 0.65rem;
            font-size: 0.6875rem;
            border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.35));
            border-radius: var(--radius-sm);
            background: rgba(15, 23, 42, 0.28);
            color: var(--text-primary);
            cursor: pointer;
            font-weight: 600;
            letter-spacing: 0.01em;
        }
        .char-score-panel-nav-btn:hover {
            background: rgba(59, 130, 246, 0.22);
            border-color: rgba(96, 165, 250, 0.55);
        }
        .char-score-panel-nav-btn--top {
            margin-left: auto;
        }
        .char-score-panel-nav-btn--badge {
            margin-left: auto;
            background: var(--accent-primary);
            border-color: transparent;
            color: #ffffff;
            border-radius: 999px;
            padding: 0.28rem 0.65rem;
        }
        .char-score-panel-nav-btn--badge:hover {
            background: var(--accent-hover);
            border-color: transparent;
            color: #ffffff;
        }
        .char-score-panel-footer {
            margin: var(--space-3) 0 0;
            font-size: 0.625rem;
            color: var(--text-muted);
            line-height: 1.35;
            letter-spacing: 0.02em;
        }
        @media (max-width: 760px) {
            .char-score-panel-summary-inline-value {
                font-size: 0.875rem;
            }
            .char-score-panel-summary-meta-row {
                grid-template-columns: 1fr;
                gap: 4px;
            }
            .char-score-panel-appendix-row {
                grid-template-columns: 1fr;
                gap: 4px;
            }
        }
        .char-desc-wrapper {
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            -webkit-user-select: none;
            user-select: none;
        }
        .char-hero {
            cursor: pointer;
        }
        /* For description tab - allow HTML formatting */
        .char-tab-panel[data-tab="description"] .char-tab-panel-content {
            white-space: normal;
        }
        .char-tab-panel[data-tab="description"] .char-tab-panel-content br {
            display: block;
            margin: 0.5em 0;
        }
        .char-tab-panel[data-tab="description"] .char-tab-panel-content p {
            margin: 0.75em 0;
        }
        .char-tab-panel[data-tab="description"] .char-tab-panel-content p:first-child {
            margin-top: 0;
        }
        .char-tab-panel[data-tab="description"] .char-tab-panel-content p:last-child {
            margin-bottom: 0;
        }
        .char-tab-panel[data-tab="description"] .char-tab-panel-content img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 1em auto;
            border-radius: var(--radius-md);
        }
        .char-tab-panel[data-tab="description"] .char-tab-panel-content p img {
            margin: 0.75em auto;
        }
        .char-tab-panel[data-tab="description"] .char-tab-panel-content hr {
            border: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-primary) 55%, transparent), transparent);
            margin: 0.9em 0;
            opacity: 0.9;
        }
        .char-tab-panel[data-tab="description"] .char-tab-panel-content blockquote {
            margin: 0.9em 0;
            padding: 0.75em 0.9em;
            border-left: 3px solid color-mix(in srgb, var(--accent-primary) 45%, var(--border-default));
            background: color-mix(in srgb, var(--bg-subtle) 85%, transparent);
            border-radius: var(--radius-sm);
        }
        .char-tab-panel[data-tab="description"] .char-tab-panel-content h1,
        .char-tab-panel[data-tab="description"] .char-tab-panel-content h2,
        .char-tab-panel[data-tab="description"] .char-tab-panel-content h3,
        .char-tab-panel[data-tab="description"] .char-tab-panel-content h4,
        .char-tab-panel[data-tab="description"] .char-tab-panel-content h5,
        .char-tab-panel[data-tab="description"] .char-tab-panel-content h6 {
            margin: 0.85em 0 0.5em;
            line-height: 1.25;
            font-weight: 700;
            color: var(--text-primary);
        }
        .char-tab-panel[data-tab="description"] .char-tab-panel-content h5,
        .char-tab-panel[data-tab="description"] .char-tab-panel-content h6 {
            font-size: 0.8125rem;
            font-weight: 650;
            opacity: 0.95;
        }
        .char-tab-panel[data-tab="description"] .char-tab-panel-content mark {
            padding: 0.1em 0.25em;
            border-radius: 0.25em;
        }
        /* Styled links in description - clear visual indication */
        .char-tab-panel[data-tab="description"] .char-tab-panel-content a {
            color: var(--accent-primary);
            text-decoration: underline;
            text-decoration-color: var(--accent-primary);
            text-underline-offset: 2px;
            font-weight: 500;
            transition: all var(--transition-fast);
        }
        .char-tab-panel[data-tab="description"] .char-tab-panel-content a:hover {
            color: var(--accent-hover);
            text-decoration-color: var(--accent-hover);
        }
        /* Alternate greetings: clear start/end dividers per greeting */
        .char-tab-panel[data-tab="alt-greetings"] .char-tab-panel-content {
            white-space: normal;
        }
        .char-tab-panel[data-tab="alt-greetings"] .alt-greeting-block {
            white-space: pre-wrap;
            word-break: break-word;
            padding: 0.85rem 0.9rem;
            margin: 0.85rem 0;
            background: var(--bg-subtle);
            border-radius: var(--radius-sm);
            border-top: 2px solid var(--accent-primary);
            border-bottom: 2px solid var(--accent-primary);
            border-left: 1px solid var(--border-default);
            border-right: 1px solid var(--border-default);
        }
        .char-tab-panel[data-tab="lorebook"] .char-tab-panel-content {
            white-space: normal;
        }
        .char-lorebook-empty {
            margin: 0;
            color: var(--text-muted);
            font-size: 0.8rem;
            line-height: 1.55;
        }
        .char-lorebook-groups {
            display: grid;
            gap: var(--space-4);
        }
        .char-lorebook-section {
            display: grid;
            gap: var(--space-2);
        }
        .char-lorebook-section-title {
            margin: 0;
            color: var(--text-secondary);
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .char-lorebook-list {
            display: grid;
            gap: var(--space-3);
        }
        .char-lorebook-item {
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
            background: color-mix(in srgb, var(--bg-subtle) 82%, transparent);
            padding: 0.75rem;
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
        }
        .char-lorebook-title-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
            margin-bottom: 6px;
        }
        .char-lorebook-title {
            margin: 0;
            font-size: 0.84rem;
            line-height: 1.35;
            color: var(--text-primary);
            font-weight: 700;
        }
        .char-lorebook-id {
            font-size: 0.74rem;
            color: var(--text-muted);
            margin-bottom: 6px;
        }
        .char-lorebook-id code {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            color: var(--text-secondary);
            background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
            border: 1px solid var(--border-subtle);
            border-radius: 6px;
            padding: 1px 6px;
            font-size: 0.72rem;
        }
        .char-lorebook-description {
            margin: 0 0 8px;
            color: var(--text-secondary);
            font-size: 0.78rem;
            line-height: 1.45;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .char-lorebook-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .char-lorebook-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }
        .char-lorebook-download-st {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-height: 32px;
            padding: 7px 11px;
            border-radius: var(--radius-sm);
            border: 1px solid color-mix(in srgb, #14b8a6 42%, var(--border-subtle) 58%);
            background: color-mix(in srgb, #14b8a6 13%, var(--bg-elevated) 87%);
            color: color-mix(in srgb, #14b8a6 78%, var(--text-primary) 22%);
            font-size: 0.74rem;
            line-height: 1;
            font-weight: 700;
            cursor: pointer;
            transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
        }
        .char-lorebook-download-st:hover,
        .char-lorebook-download-st:focus-visible {
            border-color: color-mix(in srgb, #14b8a6 68%, var(--border-subtle) 32%);
            background: color-mix(in srgb, #14b8a6 20%, var(--bg-elevated) 80%);
            color: var(--text-primary);
            transform: translateY(-1px);
        }
        .char-lorebook-download-st:focus-visible {
            outline: 2px solid color-mix(in srgb, #14b8a6 70%, transparent);
            outline-offset: 2px;
        }
        .char-lorebook-chip {
            font-size: 0.67rem;
            line-height: 1;
            padding: 5px 7px;
            border-radius: 999px;
            border: 1px solid var(--border-subtle);
            color: var(--text-secondary);
            background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
            letter-spacing: 0.01em;
        }
        .char-lorebook-chip.is-public {
            border-color: color-mix(in srgb, #22c55e 45%, var(--border-subtle) 55%);
            color: color-mix(in srgb, #22c55e 78%, var(--text-primary) 22%);
            background: color-mix(in srgb, #22c55e 12%, transparent);
        }
        .char-lorebook-chip.is-private {
            border-color: color-mix(in srgb, #f59e0b 40%, var(--border-subtle) 60%);
            color: color-mix(in srgb, #f59e0b 82%, var(--text-primary) 18%);
            background: color-mix(in srgb, #f59e0b 12%, transparent);
        }
        .char-lorebook-chip.is-code-public,
        .char-lorebook-chip.is-source-captured {
            border-color: color-mix(in srgb, #14b8a6 42%, var(--border-subtle) 58%);
            color: color-mix(in srgb, #14b8a6 78%, var(--text-primary) 22%);
            background: color-mix(in srgb, #14b8a6 12%, transparent);
        }
        .char-lorebook-chip.is-code-private {
            border-color: color-mix(in srgb, #f59e0b 40%, var(--border-subtle) 60%);
            color: color-mix(in srgb, #f59e0b 82%, var(--text-primary) 18%);
            background: color-mix(in srgb, #f59e0b 12%, transparent);
        }
        .char-lorebook-chip.is-locked {
            border-color: color-mix(in srgb, #ef4444 42%, var(--border-subtle) 58%);
            color: color-mix(in srgb, #ef4444 80%, var(--text-primary) 20%);
            background: color-mix(in srgb, #ef4444 12%, transparent);
        }
        .char-lorebook-details {
            display: grid;
            grid-template-columns: minmax(110px, 0.32fr) minmax(0, 1fr);
            gap: 1px;
            margin-top: 10px;
            overflow: hidden;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: var(--border-subtle);
        }
        .char-lorebook-detail-row {
            display: contents;
        }
        .char-lorebook-detail-label,
        .char-lorebook-detail-value {
            min-width: 0;
            padding: 7px 8px;
            font-size: 0.72rem;
            line-height: 1.35;
            background: color-mix(in srgb, var(--bg-subtle) 92%, transparent);
        }
        .char-lorebook-detail-label {
            color: var(--text-muted);
            font-weight: 700;
        }
        .char-lorebook-detail-value {
            color: var(--text-secondary);
            overflow-wrap: anywhere;
            white-space: pre-wrap;
        }
        .char-lorebook-source,
        .char-lorebook-raw {
            margin-top: 10px;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
        }
        .char-lorebook-source summary,
        .char-lorebook-raw summary {
            cursor: pointer;
            padding: 8px 10px;
            color: var(--text-secondary);
            font-size: 0.74rem;
            font-weight: 700;
        }
        .char-lorebook-source pre,
        .char-lorebook-raw pre {
            max-height: 360px;
            margin: 0;
            padding: 10px;
            overflow: auto;
            border-top: 1px solid var(--border-subtle);
            color: var(--text-secondary);
            background: color-mix(in srgb, var(--bg-base) 90%, transparent);
            font-size: 0.72rem;
            line-height: 1.45;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
        }
        .char-lorebook-source-empty {
            margin: 10px 0 0;
            color: var(--text-muted);
            font-size: 0.74rem;
            line-height: 1.45;
        }
        @media (max-width: 560px) {
            .char-lorebook-details {
                grid-template-columns: minmax(90px, 0.42fr) minmax(0, 1fr);
            }
            .char-lorebook-detail-label,
            .char-lorebook-detail-value {
                padding: 7px;
            }
        }

        /* Navigation Arrows - Desktop Only */
        .char-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 48px;
            height: 48px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-radius: 50%;
            color: var(--text-primary);
            font-size: 1.5rem;
            cursor: pointer;
            display: none; /* Hidden by default, shown on desktop */
            align-items: center;
            justify-content: center;
            z-index: 10;
            transition: all var(--transition-fast);
            box-shadow: var(--shadow-md);
        }
        .char-nav:hover {
            background: var(--bg-hover);
            border-color: var(--accent-primary);
            transform: translateY(-50%) scale(1.1);
            box-shadow: var(--shadow-lg);
        }
        .char-nav:active {
            transform: translateY(-50%) scale(0.95);
        }
        .char-nav-prev {
            left: var(--space-4);
        }
        .char-nav-next {
            right: var(--space-4);
        }
        /* Show navigation on desktop only */
        @media (min-width: 769px) {
            .char-nav {
                display: flex;
            }
        }
        /* Hide on mobile */
        @media (max-width: 768px) {
            .char-nav {
                display: none !important;
            }
        }

        /* Swipe Hint - REMOVED */
        .char-swipe-hint {
            display: none !important;
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .modal-overlay {
                padding: 0;
                background: var(--bg-base);
                align-items: stretch;
                height: 100dvh;
                width: 100vw;
                /* iOS fix: Ensure overlay covers entire screen with no gaps */
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                margin: 0 !important;
            }
            .modal-content {
                max-height: 100dvh;
                max-width: 100vw;
                height: 100dvh;
                width: 100vw;
                border-radius: 0;
                background: var(--bg-base);
            }
            .modal-content.creator-profile-modal {
                height: 100dvh;
                min-height: 100dvh;
                max-height: 100dvh;
                width: 100vw;
                max-width: 100vw;
                border-radius: 0;
            }
            .modal-content.creator-profile-modal .modal-body {
                flex: 1 1 auto;
                min-height: 0;
                height: 100%;
                max-height: none;
                display: flex;
                flex-direction: column;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
                touch-action: pan-y;
                padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
            }
            .modal-content.creator-profile-modal .creator-profile-stage {
                min-height: 100%;
                border-radius: 0;
                border-left: none;
                border-right: none;
                border-bottom: none;
            }
            .modal-content.creator-profile-modal .creator-profile-bg,
            .modal-content.creator-profile-modal .creator-profile-bg-image,
            .modal-content.creator-profile-modal .creator-profile-bg-gradient {
                border-radius: 0;
            }
            .character-modal .modal-content {
                max-width: 100vw;
                width: 100vw;
                height: 100dvh;
                max-height: 100dvh;
                display: flex;
                flex-direction: column;
            }
            .character-modal .modal-body {
                flex: 1;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                padding-bottom: 0; /* No bottom tabs anymore */
                min-height: 0;
                position: relative;
                max-height: none;
            }
            
            .char-header {
                padding: var(--space-2) var(--space-3);
                flex-shrink: 0;
                position: relative;
                z-index: 3;
            }
            .modal-content.creator-profile-modal .modal-header {
                padding: var(--space-2) var(--space-3);
                min-height: 0;
                gap: var(--space-2);
                align-items: flex-start;
                position: relative;
                z-index: 3;
            }
            .creator-profile-modal-title-wrap {
                gap: var(--space-2);
            }
            .creator-profile-modal-header-actions {
                gap: var(--space-2);
            }
            .modal-content.creator-profile-modal .modal-close {
                align-self: flex-start;
                margin-top: 0;
            }
            .char-main {
                flex-direction: column;
                flex: 1;
                min-height: 0;
                overflow: hidden;
                position: relative;
            }
            .char-main::before {
                content: '';
                position: absolute;
                top: -2px;
                left: 0;
                right: 0;
                height: 4px;
                background: var(--bg-elevated);
                pointer-events: none;
                z-index: 2;
            }
            .char-hero {
                width: 100%;
                min-width: 100%;
                max-width: 100%;
                height: 52vh;
                flex-shrink: 0;
            }
            .char-hero-img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center top;
            }
            .char-hero-gradient {
                display: block;
                height: 23%;
            }
            .char-info {
                --char-info-pad-x: var(--space-4);
                padding: var(--space-2) var(--char-info-pad-x);
                flex: 1;
                min-height: 0;
                overflow: visible;
                display: flex;
                flex-direction: column;
            }
            .char-name {
                font-size: 1.125rem;
            }
            .char-chatname-row {
                margin-top: 0;
                gap: 0.42rem;
                flex-wrap: nowrap;
                align-items: center;
            }
            .char-chatname {
                font-size: 0.875rem;
                flex: 0 1 auto;
                max-width: 40vw;
            }
            .char-creator {
                display: inline-flex;
                align-items: center;
                gap: 0.34rem;
                flex: 1 1 auto;
                min-width: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .char-creator-link,
            .char-creator-name-chip {
                max-width: min(100%, 150px);
                font-size: 0.72rem;
                padding: 0.12rem 0.34rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: normal;
                overflow-wrap: normal;
            }
            .char-top-source-link {
                padding: 0.12rem 0.34rem;
                font-size: 0.72rem;
                gap: 0.26rem;
            }
            .char-top-source-link i {
                font-size: 0.65rem;
            }
            .char-source-tab-trigger {
                margin-left: 0;
            }
            .char-source-tab-trigger .character-source-badge {
                min-height: 0;
                padding: 0.12rem 0.34rem;
                font-size: 0.72rem;
            }
            .char-source-tab-trigger .character-source-badge--square {
                min-width: 0;
                height: auto;
                padding: 0.12rem 0.34rem;
                font-size: 0.72rem;
            }
            .char-desc {
                flex: 1;
                min-height: 0;
                margin-bottom: 0;
            }
            .char-tags {
                margin-bottom: 0;
                flex-shrink: 0;
            }
            .char-meta-row {
                margin-bottom: var(--space-1);
                flex-shrink: 0;
                row-gap: 0.125rem;
            }
            .char-actions {
                margin-bottom: 0;
                flex-shrink: 0;
                flex-wrap: nowrap;
            }
            .char-action-btn.char-source-link {
                min-width: 0; /* Allow ellipsis; author takes all remaining space */
            }
            .char-action-btn.char-source-link .author-name {
                max-width: min(100%, 170px);
                padding: 0.12rem 0.36rem;
            }
            .char-chat-launch .char-chat-btn {
                width: 2.125rem;
                min-width: 2.125rem;
                padding: 0;
            }
            .char-download-dropdown .char-download-trigger {
                width: auto;
                min-width: 0;
                padding-right: 2rem; /* keep space for chevron on mobile */
            }
            .character-modal .char-download-dropdown .char-download-trigger {
                padding-right: 1.125rem;
            }
            .character-modal .char-save-menu-header {
                padding-top: calc(0.2rem + 1px);
                padding-bottom: calc(0.38rem + 1px);
            }
            .character-modal .char-save-menu .char-save-folder-option {
                padding-top: calc(0.5rem + 1px);
                padding-bottom: calc(0.5rem + 1px);
            }
            .char-tab-selector {
                margin-left: 0;
            }
            .char-tab-selector-btn {
                width: 48px;
                height: 48px;
            }
            .character-modal .char-tab-selector-btn {
                width: 36px;
                height: 36px;
                min-width: 36px;
                min-height: 36px;
            }
            .char-tab-selector-dropdown {
                right: 0;
                bottom: calc(100% + var(--space-2));
            }
            .char-slideup-container {
                top: 0; /* Covers full char-main height on mobile too */
            }
            .char-slideup-header {
                height: 44px;
                padding: 0.32rem var(--space-3);
            }
            .char-tab-panel {
                padding: var(--space-2) var(--space-3) var(--space-3);
                height: calc(100% - 44px); /* Full container height minus header */
            }
            .character-navigation {
                display: none !important;
            }
        }

        /* Very small screens - compact buttons so author has more space */
        @media (max-width: 400px) {
            .char-header {
                padding: var(--space-2);
            }
            .modal-content.creator-profile-modal .modal-header {
                padding: var(--space-2);
            }
            .creator-profile-modal-title-wrap,
            .creator-profile-modal-header-actions {
                gap: var(--space-1);
            }
            .char-info {
                --char-info-pad-x: var(--space-3);
                padding: var(--space-2) var(--char-info-pad-x);
            }
            .char-name {
                font-size: 1rem;
            }
            .char-desc {
                font-size: calc(0.8125rem + 0.5pt);
            }
            .char-action-btn {
                padding: 0.5rem var(--space-2);
                font-size: 0.75rem;
            }
            .char-action-btn.secondary.char-hero-save-btn {
                width: 40px;
                min-width: 40px;
                height: 40px;
                min-height: 40px;
                padding: 0;
                font-size: 1rem;
            }
            .char-chat-launch .char-chat-btn {
                width: 2.125rem;
                min-width: 2.125rem;
                padding: 0;
            }
            .char-download-dropdown .char-download-trigger {
                width: auto;
                min-width: 0;
                padding-right: 2rem;
            }
            .character-modal .char-action-btn {
                padding: 0.3125rem var(--space-2);
                font-size: 0.875rem;
                min-height: 2.125rem;
            }
            .character-modal .char-action-btn.secondary.char-hero-save-btn {
                width: 40px;
                min-width: 40px;
                height: 40px;
                min-height: 40px;
                padding: 0;
                font-size: 1rem;
            }
            .character-modal .char-download-dropdown .char-download-trigger {
                padding-right: 1.125rem;
            }
            .character-modal .char-tab-selector-btn {
                width: 36px;
                height: 36px;
                min-width: 36px;
                min-height: 36px;
            }
        }

        .characters-empty {
            text-align: center;
            padding: var(--space-8);
            color: var(--text-muted);
        }

        .characters-empty-gated-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 40vh;
            padding: var(--space-6);
        }

        .characters-empty.characters-empty--gated {
            color: var(--text-primary);
            font-size: 1.0625rem;
            max-width: 28em;
        }

        @media (max-width: 640px) {
            .character-grid {
                gap: var(--space-2);
                margin-left: 0;
                margin-right: 0;
            }
            .character-column {
                gap: var(--space-2);
            }
            .character-card {
                margin: 0;
            }
            .character-card:hover {
                box-shadow: none;
            }
            .character-avatar-wrap {
                border-radius: var(--radius-lg);
            }
            .character-avatar {
                aspect-ratio: auto;
                height: auto;
                min-height: 150px;
                max-height: 320px;
            }
            .character-card .character-avatar {
                height: 100%;
                min-height: 0;
                max-height: none;
                object-fit: cover;
            }
            .character-details {
                padding: var(--space-1) var(--space-2) var(--space-2);
            }
            .character-name {
                font-size: 0.8125rem;
            }
        }
        @media (max-width: 768px) {
            .character-grid {
                gap: var(--space-3);
            }
            .character-column {
                gap: var(--space-3);
            }
            .character-avatar {
                min-height: 170px;
                max-height: 360px;
            }
            .character-card .character-avatar {
                height: 100%;
                min-height: 0;
                max-height: none;
                object-fit: cover;
            }
        }

        /* ========================================
           STREAM HEADER MOBILE STYLES
           ======================================== */
        @media (max-width: 768px) {
            .stream-overlay {
                padding: var(--space-2);
            }

            .stream-wrapper {
                border-radius: var(--radius-lg);
            }

            .stream-header {
                display: flex;
                flex-direction: column;
                padding: var(--space-3);
                gap: var(--space-2);
            }

            /* Row 1: Title + button - mobile header style */
            .stream-header-row1 {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                gap: var(--space-3);
            }

            .stream-header-row1 h3,
            .stream-header h3 {
                font-size: 1.125rem;
                font-weight: 600;
                margin: 0;
                flex: 1 1 auto;
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .stream-header-actions {
                flex-shrink: 0;
                gap: var(--space-2);
            }

            .stream-header-row1 .stream-cancel-btn,
            .stream-header-row1 .stream-save-session-btn {
                flex-shrink: 0;
                padding: var(--space-2) var(--space-4);
                font-size: 0.875rem;
                font-weight: 500;
                border-radius: var(--radius-lg);
            }

            /* Row 2: Status row - all on one line */
            .stream-status-row {
                display: flex;
                align-items: center;
                gap: var(--space-2);
                padding-top: var(--space-1);
                border-top: 1px solid var(--border-subtle);
            }

            .stream-status {
                display: flex;
                align-items: center;
                gap: var(--space-1);
                font-size: 0.75rem;
            }

            .stream-status-dot {
                width: 8px;
                height: 8px;
            }

            .stream-status-icons {
                display: flex;
                align-items: center;
                gap: 6px;
                margin-left: var(--space-1);
            }

            .stream-icon {
                width: 14px;
                height: 14px;
            }

            .stream-metrics {
                margin-left: auto;
                font-size: 0.6875rem;
                color: var(--text-muted);
            }
        }

        /* Extra small screens */
        @media (max-width: 480px) {
            .stream-overlay {
                padding: var(--space-1);
            }

            .stream-wrapper {
                border-radius: var(--radius-md);
            }

            .stream-header {
                padding: var(--space-2) var(--space-3);
                gap: var(--space-2);
            }

            .stream-header-row1 h3,
            .stream-header h3 {
                font-size: 1rem;
            }

            .stream-header-row1 .stream-cancel-btn {
                padding: var(--space-2) var(--space-3);
                font-size: 0.8125rem;
            }

            .stream-status {
                font-size: 0.6875rem;
            }

            .stream-status-dot {
                width: 6px;
                height: 6px;
            }

            .stream-icon {
                width: 12px;
                height: 12px;
            }

            .stream-metrics {
                font-size: 0.625rem;
            }
        }

        /* ========================================
           TAG BROWSER – BAUHAUS NAVIGATION
           (ported from standalone_character_browser/public)
           ======================================== */

        /* Layout: sidebar + content */
        .characters-browse-layout {
            display: flex;
            gap: var(--space-3);
            align-items: flex-start;
        }
        .characters-main-pane {
            flex: 1;
            min-width: 0;
        }
        .view-characters .characters-main-pane {
            container-name: characters-main-pane;
            container-type: inline-size;
        }
        .characters-main-pane > #charactersContent {
            min-width: 0;
        }

        /* ---- Desktop: sidebar alongside all content ---- */
        @media (min-width: 769px) {
            .view-characters.active {
                margin-top: 0;
            }
            .view-characters .characters-browse-layout {
                align-items: flex-start;
            }
            .view-characters .tag-sidebar {
                position: sticky;
                top: var(--characters-toolbar-offset);
                height: auto;
                max-height: calc(100vh - var(--characters-toolbar-offset) - var(--characters-desktop-bottom-offset));
                max-height: calc(100dvh - var(--characters-toolbar-offset) - var(--characters-desktop-bottom-offset));
                overflow-y: auto;
            }
        }

        /* ---- Sidebar (desktop) ---- */
        .tag-sidebar {
            width: var(--characters-sidebar-width);
            flex-shrink: 0;
            position: sticky;
            top: var(--space-2);
            max-height: calc(100vh - 80px);
            overflow-y: auto;
            padding-right: var(--space-2);
            scrollbar-width: thin;
            scrollbar-color: var(--bg-accent) transparent;
        }
        .tag-sidebar::-webkit-scrollbar { width: 3px; }
        .tag-sidebar::-webkit-scrollbar-thumb { background: var(--bg-accent); border-radius: 2px; }
        .tag-sidebar::-webkit-scrollbar-track { background: transparent; }

        .tag-sidebar-heading {
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-size: 0.6875rem;
            font-weight: 600;
            color: var(--accent-primary);
            padding: 2px 0;
            margin: 0;
        }
        .tag-sidebar-divider {
            height: 1px;
            background: var(--border-strong);
            margin: 6px 0;
        }
        .tag-sidebar-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 3px 0;
            position: relative;
            cursor: pointer;
            font-size: 0.75rem;
            color: var(--text-secondary);
            transition: color var(--transition-fast);
            user-select: none;
            line-height: 1.2;
        }
        #tagSidebar .tag-sidebar-item {
            font-size: 0.68rem;
            font-weight: 600;
            min-height: 28px;
            padding-top: 5px;
            padding-bottom: 5px;
            line-height: 1;
        }
        .tag-sidebar-item:hover { color: var(--text-primary); }
        .tag-sidebar-item.active { color: var(--accent-primary); }
        .tag-sidebar-item.blocked { color: #ff9d9d; }
        .tag-sidebar-item.is-loading { color: var(--accent-primary); }
        .tag-sidebar-item.blocked.is-loading { color: #ff9d9d; }

        /* Geometric indicators – Bauhaus */
        .tag-indicator {
            width: 8px;
            height: 8px;
            flex-shrink: 0;
            border: 1.5px solid var(--text-muted);
            transition: all var(--transition-fast);
            box-sizing: border-box;
        }
        .tag-indicator--square { border-radius: 0; }
        .tag-indicator--circle { border-radius: 50%; }
        .tag-sidebar-item.active .tag-indicator {
            background: var(--accent-primary);
            border-color: var(--accent-primary);
        }
        .tag-sidebar-item.blocked .tag-indicator {
            background: rgba(255, 95, 95, 0.18);
            border-color: rgba(255, 120, 120, 0.9);
        }

        .tag-sidebar-label {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .tag-sidebar-count {
            font-size: 0.5625rem;
            color: var(--text-muted);
            font-variant-numeric: tabular-nums;
        }
        .tag-sidebar-item.active .tag-sidebar-count {
            display: none;
        }
        .tag-sidebar-item.blocked .tag-sidebar-count {
            display: none;
        }
        .tag-sidebar-expand {
            display: block;
            width: 100%;
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 0.625rem;
            padding: 3px 0;
            cursor: pointer;
            text-align: left;
            transition: color var(--transition-fast);
        }
        .tag-sidebar-expand:hover { color: var(--text-primary); }

        /* ---- Sort toggle (shared between sidebar & drawer) ---- */
        .tag-sort-toggle {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-bottom: 6px;
        }
        .tag-sort-label {
            font-size: 0.5625rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 600;
            margin-right: 2px;
        }
        .tag-sort-toggle button {
            background: var(--bg-subtle);
            border: 1px solid var(--border-subtle);
            padding: 1px 7px;
            font-size: 0.5625rem;
            font-weight: 500;
            color: var(--text-muted);
            cursor: pointer;
            border-radius: 9px;
            transition: all var(--transition-fast);
            line-height: 1.4;
        }
        .tag-sort-toggle button:hover {
            color: var(--text-secondary);
            border-color: var(--border-default);
        }
        .tag-sort-toggle button.active {
            background: var(--accent-primary);
            border-color: var(--accent-primary);
            color: #fff;
        }

        /* ---- Sort + view row + tag filter ---- */
        .tag-controls-row {
            display: flex;
            flex-direction: column; /* sidebar is narrow; stack by default */
            gap: 6px;
            margin-bottom: 6px;
        }
        .tag-controls-row .tag-sort-toggle {
            margin-bottom: 0;
        }
        .tag-controls-row--drawer {
            flex-direction: row; /* mobile: keep view+sort on one row */
            align-items: center;
            justify-content: flex-start; /* keep View after Sort, avoid close-button overlap */
            gap: 10px;
            flex-wrap: nowrap;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .tag-view-toggle {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .tag-view-toggle button {
            background: var(--bg-subtle);
            border: 1px solid var(--border-subtle);
            padding: 1px 7px;
            font-size: 0.5625rem;
            font-weight: 500;
            color: var(--text-muted);
            cursor: pointer;
            border-radius: 9px;
            transition: all var(--transition-fast);
            line-height: 1.4;
        }
        .tag-view-toggle button:hover {
            color: var(--text-secondary);
            border-color: var(--border-default);
        }
        .tag-view-toggle button.active {
            background: var(--accent-primary);
            border-color: var(--accent-primary);
            color: #fff;
        }

        .tag-folder-selector {
            margin-bottom: 8px;
        }
        .tag-folder-selector-title {
            font-size: 0.625rem;
            color: var(--accent-primary);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 600;
            margin-bottom: 6px;
        }
        .tag-folder-dropdown {
            width: 100%;
            display: block;
        }
        .tag-folder-dropdown .tag-folder-dropdown-btn {
            width: 100%;
            min-width: 0;
            background: var(--bg-subtle);
            border: 1px solid var(--border-subtle);
            color: var(--text-primary);
            border-radius: var(--radius-md);
            height: 34px;
            font-size: 0.78rem;
            font-weight: 600;
            line-height: 1;
            text-align: left;
            padding: 0 28px 0 10px;
        }
        .tag-folder-dropdown .tag-folder-dropdown-btn::after {
            border-top-color: currentColor;
            opacity: 0.75;
        }
        .tag-folder-dropdown.open .tag-folder-dropdown-btn::after {
            opacity: 1;
        }
        .tag-folder-dropdown .admin-dropdown-menu {
            left: 0;
            right: auto;
            min-width: 100%;
            max-width: 100%;
        }
        .tag-folder-dropdown .admin-dropdown-menu button {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
        }
        .tag-folder-dropdown .admin-dropdown-menu button.active {
            color: var(--text-primary);
            font-weight: 600;
        }
        .tag-folder-dropdown .folder-item-count {
            color: var(--text-muted);
            font-size: 0.68rem;
            font-weight: 500;
        }
        .tag-folder-dropdown .admin-dropdown-divider {
            height: 1px;
            margin: 6px 0;
            background: var(--border-subtle);
        }
        .tag-sidebar > .tag-filter-toolbar,
        .tag-sidebar > .tag-sidebar-content,
        #tagDrawerBody > .tag-filter-toolbar,
        #tagDrawerBody > .tag-drawer-content {
            transition: filter 120ms ease, opacity 120ms ease;
        }
        .tag-sidebar.folder-dropdown-open > .tag-filter-toolbar,
        .tag-sidebar.folder-dropdown-open > .tag-sidebar-content,
        #tagDrawerBody.folder-dropdown-open > .tag-filter-toolbar,
        #tagDrawerBody.folder-dropdown-open > .tag-drawer-content {
            filter: none;
            opacity: 0.55;
            pointer-events: none;
            user-select: none;
        }
        .tag-drawer .tag-folder-selector {
            margin-bottom: 10px;
        }
        .tag-drawer .tag-folder-dropdown .tag-folder-dropdown-btn {
            height: 38px;
            padding: 0 30px 0 12px;
            font-size: 0.8125rem;
            border-color: var(--border-default);
        }
        .tag-drawer .tag-folder-dropdown .admin-dropdown-menu {
            z-index: 1100;
            background: var(--bg-elevated);
            border-color: var(--border-strong);
            padding: var(--space-1);
        }
        .tag-drawer .tag-folder-dropdown .admin-dropdown-menu button {
            padding: 0.5rem var(--space-3);
            border-radius: var(--radius-sm);
            font-size: 0.8125rem;
            color: var(--text-secondary);
        }
        .tag-drawer .tag-folder-dropdown .admin-dropdown-menu button:hover,
        .tag-drawer .tag-folder-dropdown .admin-dropdown-menu button.active {
            background: var(--bg-subtle);
            color: var(--text-primary);
        }
        .tag-drawer .tag-folder-dropdown .folder-item-count {
            font-size: 0.72rem;
        }

        .tag-filter-box {
            margin-bottom: 8px;
        }
        .tag-filter-input {
            width: 100%;
            background: var(--bg-subtle);
            border: 1px solid var(--border-subtle);
            color: var(--text-primary);
            border-radius: var(--radius-md);
            height: 38px;
            padding: 0 0.75rem;
            font-size: 0.875rem;
            line-height: 1.2;
            outline: none;
        }
        .tag-filter-input:focus {
            border-color: var(--border-default);
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06);
        }
        .tag-token-toggle {
            width: 100%;
            max-width: none;
            margin-top: 6px;
            margin-right: 0;
            padding: 0.15rem 0;
            justify-content: space-between;
        }
        .tag-filter-controls-row {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 2px;
        }
        .tag-mode-switch {
            display: inline-flex;
            align-items: center;
            border: 1px solid var(--border-default);
            border-radius: 3px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.02);
            box-shadow: var(--shadow-sm);
            margin-left: auto;
        }
        .tag-mode-switch-btn {
            appearance: none;
            border: none;
            background: transparent;
            color: rgba(255, 255, 255, 0.42);
            font-size: 0.66rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            height: 24px;
            padding: 0 12px;
            cursor: pointer;
            transition: background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
            opacity: 0.78;
        }
        .tag-mode-switch-btn + .tag-mode-switch-btn {
            border-left: 1px solid var(--border-default);
        }
        .tag-mode-switch-btn:hover,
        .tag-mode-switch-btn:focus-visible {
            color: rgba(255, 255, 255, 0.72);
            background: rgba(255, 255, 255, 0.05);
            outline: none;
        }
        .tag-mode-switch-btn.active {
            background: rgba(245, 158, 11, 0.2);
            color: #ffe7a3;
            opacity: 1;
        }
        .tag-matching-status {
            flex: 1 1 auto;
            min-width: 0;
            font-size: 0.8125rem;
            font-weight: 600;
            color: var(--text-secondary);
            letter-spacing: 0.02em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .tag-filter-controls-row .tag-token-toggle {
            flex: 0 0 auto;
            width: auto;
            margin-top: 0;
        }
        .tag-toolbar-reset-btn {
            appearance: none;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            border-radius: 0;
            font-size: 0.75rem;
            font-weight: 600;
            line-height: 1.1;
            height: 28px;
            min-width: 28px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: color var(--transition-fast), opacity var(--transition-fast);
            white-space: nowrap;
            flex-shrink: 0;
        }
        .tag-toolbar-reset-btn svg {
            width: 20px;
            height: 20px;
            display: block;
        }
        .tag-toolbar-reset-btn:hover:not(:disabled) {
            color: var(--text-primary);
        }
        .tag-toolbar-reset-btn:disabled {
            opacity: 0.35;
            cursor: not-allowed;
        }
        .tag-token-toggle .public-feed-text {
            font-size: 0.625rem;
            letter-spacing: 0.02em;
        }

        /* ---- Filter bar + gear dropdown ---- */
        .tag-filter-toolbar {
            position: sticky;
            top: 0;
            z-index: 2;
            background: transparent;
            padding-bottom: 4px;
            margin-bottom: 4px;
        }
        @media (min-width: 769px) {
            .tag-filter-toolbar--sidebar {
                padding-top: 2px; /* align top edge with desktop characters toolbar controls */
                padding-bottom: 0;
                margin-bottom: 0;
            }
            .tag-filter-toolbar--sidebar .tag-filter-bar {
                margin-bottom: 7px; /* desktop: +5px spacing above tag list */
            }
            .tag-filter-toolbar--sidebar:has(.tag-settings-dropdown.open) {
                padding-bottom: 4px;
                margin-bottom: 4px; /* preserve open-state spacing */
            }
            .tag-filter-toolbar--sidebar:has(.tag-settings-dropdown.open) .tag-filter-bar {
                margin-bottom: 8px; /* preserve open-state filter->dropdown spacing */
            }
        }
        .tag-sidebar-content,
        .tag-drawer-content {
            min-width: 0;
        }
        .tag-filter-bar {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 8px;
        }
        .tag-filter-bar .tag-filter-input {
            flex: 1;
            min-width: 0;
        }
        .tag-filter-bar > .tag-gear-btn,
        .tag-filter-bar > .tag-toolbar-reset-btn {
            height: 38px;
            min-height: 38px;
        }
        .tag-filter-bar > .tag-gear-btn {
            width: auto;
            min-width: 32px;
        }
        .tag-filter-bar > .tag-toolbar-reset-btn {
            width: auto;
            min-width: 32px;
        }
        .tag-inline-block-icon {
            width: 11px;
            height: 11px;
            display: inline-block;
            vertical-align: -1px;
            color: #f7a2a2;
            flex: 0 0 auto;
        }
        .tag-gear-btn {
            appearance: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: auto;
            min-width: 28px;
            height: 28px;
            flex-shrink: 0;
            background: transparent;
            border: none;
            border-radius: 0;
            color: var(--text-muted);
            cursor: pointer;
            transition: color var(--transition-fast), opacity var(--transition-fast);
            padding: 0;
        }
        .tag-gear-btn svg {
            width: 20px;
            height: 20px;
            display: block;
        }
        .tag-gear-btn:hover {
            color: var(--text-secondary);
        }
        .tag-gear-btn.active {
            color: var(--accent-primary);
        }
        .tag-settings-dropdown {
            display: none;
            flex-direction: column;
            gap: 8px;
            padding: 8px 10px;
            margin-bottom: 0;
            background: var(--bg-subtle);
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
        }
        .tag-settings-dropdown.open {
            display: flex;
        }
        .tag-settings-dropdown .tag-sort-toggle,
        .tag-settings-dropdown .tag-view-toggle {
            margin-bottom: 0;
        }
        .tag-settings-dropdown .tag-token-toggle {
            margin-top: 0;
        }
        .tag-threshold-setting {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .tag-threshold-setting--drawer {
            margin-top: -2px;
        }
        .tag-threshold-label {
            font-size: 0.625rem;
            color: var(--text-muted);
            letter-spacing: 0.02em;
        }
        .tag-threshold-input {
            width: 92px;
            border: 1px solid var(--border-default);
            background: var(--bg-surface);
            color: var(--text-primary);
            border-radius: 8px;
            font-size: 0.68rem;
            line-height: 1.2;
            padding: 5px 8px;
            text-align: right;
            outline: none;
        }
        .tag-threshold-input:focus {
            border-color: var(--border-strong);
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06);
        }
        .tag-threshold-input::-webkit-outer-spin-button,
        .tag-threshold-input::-webkit-inner-spin-button {
            margin: 0;
        }
        .tag-sort-token-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .tag-sort-token-row .tag-sort-toggle {
            margin-bottom: 0;
        }
        .tag-sort-token-row .tag-token-toggle {
            margin-top: 0;
            width: auto;
            flex-shrink: 0;
        }
        .tag-drawer-body .tag-filter-toolbar {
            top: 0;
            z-index: 3;
            background: transparent;
        }

        /* ---- Cloud view ---- */
        .tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            padding: 2px 0;
        }
        .tag-cloud-item {
            --heat: 0.5;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 5px;
            position: relative;
            background: rgba(100, 190, 240, calc(0.02 + var(--heat) * 0.18));
            border: 1px solid rgba(100, 190, 240, calc(0.04 + var(--heat) * 0.16));
            border-radius: 10px;
            font-size: 0.6875rem;
            color: rgba(200, 230, 255, calc(0.40 + var(--heat) * 0.50));
            cursor: pointer;
            transition: all var(--transition-fast);
            user-select: none;
            text-align: left;
        }
        .tag-cloud-item:hover {
            background: rgba(100, 190, 240, calc(0.08 + var(--heat) * 0.20));
            color: rgba(220, 240, 255, 0.95);
        }
        .tag-cloud-item.active {
            background: var(--accent-muted);
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }
        .tag-cloud-item.blocked {
            background: rgba(255, 110, 110, calc(0.04 + var(--heat) * 0.12));
            border-color: rgba(255, 130, 130, calc(0.14 + var(--heat) * 0.18));
            color: rgba(255, 196, 196, 0.92);
        }
        .tag-cloud-item.blocked:hover {
            background: rgba(255, 110, 110, calc(0.10 + var(--heat) * 0.16));
            color: #ffe1e1;
        }
        .tag-cloud-label {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .tag-cloud-count {
            font-size: 0.5625rem;
            color: rgba(140, 210, 255, calc(0.35 + var(--heat) * 0.40));
            font-variant-numeric: tabular-nums;
        }
        .tag-cloud-item.active .tag-cloud-count,
        .tag-cloud-item.blocked .tag-cloud-count {
            display: none;
        }
        .tag-cloud-item.is-loading {
            background: var(--accent-muted);
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }
        .tag-cloud-item.blocked.is-loading {
            background: rgba(255, 110, 110, 0.16);
            border-color: rgba(255, 130, 130, 0.7);
            color: rgba(255, 208, 208, 0.96);
        }
        .tag-cloud-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-top: 6px;
            padding-top: 4px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }
        .tag-cloud-summary {
            min-width: 0;
            font-size: 0.625rem;
            line-height: 1.35;
            color: var(--text-muted);
            letter-spacing: 0.01em;
        }
        .tag-cloud-show-more {
            width: auto;
            flex: 0 0 auto;
            padding: 0;
            font-size: 0.625rem;
            line-height: 1.35;
            white-space: nowrap;
        }
        .creator-profile-tags-skeleton {
            position: relative;
            min-height: 44px;
            align-content: flex-start;
            pointer-events: none;
        }
        .creator-profile-tags-skeleton.skeleton-shimmer::after {
            z-index: 2;
            pointer-events: none;
        }
        .creator-profile-tag-skeleton-chip {
            flex: 0 0 auto;
            width: var(--tag-skeleton-width, 72px);
            height: 22px;
            border: 1px solid rgba(100, 190, 240, 0.09);
            border-radius: 10px;
            background: rgba(100, 190, 240, 0.08);
        }
        .creator-profile-tag-skeleton-heading {
            opacity: 0.58;
        }
        #creatorsTagDrawerBody .creator-profile-tags-skeleton .creator-profile-tag-skeleton-chip {
            min-height: 28px;
            height: 28px;
            border-radius: 10px;
        }

        .tag-loading-spinner {
            width: 10px;
            height: 10px;
            border: 1.5px solid currentColor;
            border-right-color: transparent;
            border-radius: 50%;
            display: inline-block;
            flex: 0 0 auto;
            animation: tagLoadingSpin 650ms linear infinite;
        }
        .tag-loading-state {
            min-height: 44px;
            padding: 12px 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: var(--text-muted);
            font-size: 0.8125rem;
            font-weight: 650;
            line-height: 1.3;
            text-align: center;
        }
        .tag-loading-state .tag-loading-spinner {
            width: 12px;
            height: 12px;
            opacity: 0.9;
        }
        .tag-sidebar-item .tag-loading-spinner {
            margin-left: 2px;
        }
        .tag-drawer-item .tag-loading-spinner,
        .tag-cloud-item .tag-loading-spinner {
            margin-left: 1px;
        }
        @keyframes tagLoadingSpin {
            to { transform: rotate(360deg); }
        }

        /* ---- Filter chips (active filters bar) ---- */
        .tag-filter-chips {
            display: none;
            flex-wrap: wrap;
            gap: 4px;
            padding: 0 0 var(--space-2) 0;
            align-items: center;
            justify-content: flex-end;
        }
        .characters-toolbar .tag-filter-chips {
            margin-top: 3px;
            padding-bottom: 0;
        }
        .characters-toolbar .tag-chip {
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-left: 3px solid var(--accent-primary);
            box-shadow: var(--shadow-sm);
        }
        .characters-toolbar .tag-chip.blocked-tag-chip {
            background: var(--bg-elevated);
            border-left-color: #ef4444;
            color: var(--text-primary);
        }
        .characters-toolbar .tag-chip.search-filter-chip {
            background: var(--bg-elevated);
            border-left-color: #38bdf8;
            color: var(--text-primary);
        }
        .characters-toolbar .tag-chip-clear {
            background: var(--bg-elevated);
            border-color: var(--border-default);
            color: var(--text-secondary);
            box-shadow: var(--shadow-sm);
        }
        .tag-filter-chips.has-filters { display: flex; }

        .tag-chip {
            appearance: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            height: 20px;
            padding: 0 6px;
            background: var(--accent-muted);
            border-left: 3px solid var(--accent-primary);
            border-radius: 0;
            font-size: 0.625rem;
            color: var(--text-primary);
            font-weight: 500;
            cursor: pointer;
            border-top: none;
            border-right: none;
            border-bottom: none;
        }
        .tag-chip-text {
            display: inline-block;
        }
        .tag-chip:hover {
            filter: brightness(1.06);
        }
        /* Token filter chip (active filters row) */
        .tag-chip.token-filter-chip {
            border-left-color: #f59e0b;
            background: rgba(245, 158, 11, 0.14);
            color: rgba(255, 226, 158, 0.95);
            cursor: default;
        }
        .tag-chip.blocked-tag-chip {
            border-left-color: #ef4444;
            background: var(--accent-muted);
            color: var(--text-primary);
        }
        .tag-chip.blocked-tag-chip .tag-chip-text {
            color: inherit;
            text-decoration-line: line-through;
            text-decoration-color: rgba(239, 68, 68, 0.95);
            text-decoration-thickness: 1.5px;
            text-decoration-skip-ink: none;
        }
        .tag-sidebar-item.blocked .tag-sidebar-label,
        .tag-drawer-item.blocked .tag-drawer-label,
        .tag-cloud-item.blocked .tag-cloud-label {
            text-decoration-line: line-through;
            text-decoration-color: rgba(239, 68, 68, 0.95);
            text-decoration-thickness: 1.5px;
            text-decoration-skip-ink: none;
        }
        .tag-chip-prefix {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
            height: 14px;
            border-radius: 999px;
            background: rgba(239, 68, 68, 0.22);
            color: rgba(255, 224, 224, 0.96);
            font-size: 0.5rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .tag-chip-dismiss {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 0;
            margin-left: 2px;
            font-size: 0.75rem;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            transition: color var(--transition-fast);
        }
        .tag-chip-dismiss:hover { color: var(--text-primary); }
        .tag-chip[data-dismiss-tag] .tag-chip-dismiss,
        .tag-chip[data-dismiss-blocked-tag] .tag-chip-dismiss {
            display: none;
        }

        .tag-chip-clear {
            background: none;
            border: 1px solid var(--border-default);
            color: var(--text-muted);
            font-size: 0.5625rem;
            height: 20px;
            padding: 0 6px;
            border-radius: 0;
            cursor: pointer;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            transition: all var(--transition-fast);
        }
        .tag-chip-clear:hover {
            color: var(--text-primary);
            border-color: var(--border-strong);
        }

        /* ---- Drawer toggle button (mobile only) ---- */
        .tag-drawer-toggle {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: auto;
            height: 30px;
            min-width: 58px;
            padding: 0 8px;
            background: var(--bg-subtle);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-full);
            color: var(--text-secondary);
            cursor: pointer;
            flex-shrink: 0;
            transition: all var(--transition-fast);
            font-size: 0.6875rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            line-height: 1;
        }
        .tag-drawer-toggle-label {
            white-space: nowrap;
        }
        .tag-drawer-toggle:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }
        .tag-drawer-toggle.has-active-filters {
            border-color: var(--accent-primary);
            color: var(--accent-primary);
            background: var(--accent-muted);
        }
        .view-characters .tag-drawer-toggle {
            order: -9;
            height: auto;
            min-height: var(--characters-toolbar-pill-min-height);
            padding: var(--characters-toolbar-pill-padding-y) var(--characters-toolbar-pill-padding-x);
            color: var(--brand-hot-pink);
            font-weight: 800;
        }
        .view-characters .tag-drawer-toggle:hover,
        .view-characters .tag-drawer-toggle.has-active-filters {
            color: #fbcfe8;
        }
        .creators-tag-filter-btn {
            border-radius: 0;
        }

        /* ---- Mobile bottom-sheet drawer ---- */
        .tag-drawer-scrim {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0);
            z-index: 999;
            pointer-events: none;
            transition: background 300ms ease;
        }
        .tag-drawer-scrim.active {
            background:
                radial-gradient(circle at 50% 42%, rgba(45, 212, 191, 0.08), transparent 18rem),
                rgba(0, 0, 0, 0.72);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            pointer-events: auto;
        }

        .tag-drawer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: var(--bg-elevated);
            border-top: 2px solid var(--border-default);
            border-radius: 12px 12px 0 0;
            /* Fixed-ish drawer size so filtering doesn't cause the sheet to shrink/grow. */
            height: calc(65vh + 20px);
            max-height: calc(65vh + 20px);
            /* Use dvh when supported to avoid iOS URL-bar viewport quirks. */
            height: min(calc(65dvh + 20px), calc(100dvh - 160px));
            max-height: min(calc(65dvh + 20px), calc(100dvh - 160px));
            transform: translateY(100%);
            transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .tag-drawer.open {
            transform: translateY(0);
        }

        .tag-drawer-header {
            position: relative;
            padding: 8px 12px 4px;
            flex-shrink: 0;
        }
        .tag-drawer-handle {
            width: 32px;
            height: 3px;
            background: var(--bg-accent);
            border-radius: 2px;
            margin: 0 auto;
            flex-shrink: 0;
        }
        .tag-drawer-close-link {
            position: absolute;
            right: 15px;
            top: 5px;
            display: inline-block;
            padding: 0 4px;
            border: 1px solid var(--accent-primary);
            border-radius: 999px;
            background: transparent;
            color: var(--accent-primary);
            font-size: 0.625rem;
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
            transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
        }
        .tag-drawer-close-link:hover {
            background: var(--accent-muted);
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }
        .tag-drawer-close-link:focus-visible {
            outline: none;
            background: var(--accent-muted);
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }
        .tag-drawer-body {
            overflow-y: auto;
            padding: var(--space-2) var(--space-4) var(--space-4);
            -webkit-overflow-scrolling: touch;
        }

        .tag-drawer-section-heading {
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-size: 0.625rem;
            font-weight: 600;
            color: var(--accent-primary);
            padding: 2px 0;
            margin: 0;
        }
        .tag-drawer-divider {
            height: 1px;
            background: var(--border-strong);
            margin: 8px 0;
        }
        .tag-drawer-items {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            padding: 2px 0;
        }
        .tag-drawer-item {
            --heat: 0.5;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 2px 5px;
            position: relative;
            background: rgba(100, 190, 240, calc(0.02 + var(--heat) * 0.18));
            border: 1px solid rgba(100, 190, 240, calc(0.04 + var(--heat) * 0.16));
            border-radius: 10px;
            font-size: 0.8125rem;
            color: rgba(200, 230, 255, calc(0.38 + var(--heat) * 0.52));
            cursor: pointer;
            transition: all var(--transition-fast);
            user-select: none;
        }
        #tagDrawerBody .tag-drawer-item {
            font-size: 0.68rem;
            font-weight: 600;
            min-height: 28px;
            padding-top: 5px;
            padding-bottom: 5px;
            padding-left: 10px;
            padding-right: 10px;
            line-height: 1;
        }
        .tag-drawer-item:hover {
            background: rgba(100, 190, 240, calc(0.08 + var(--heat) * 0.20));
            color: rgba(220, 240, 255, 0.95);
        }
        .tag-drawer-item.active {
            background: var(--accent-muted);
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }
        #taxonomyTagDrawer .tag-cloud-item,
        #taxonomyTagDrawer .tag-drawer-item {
            --scale: 1;
            border: 1px solid rgba(45, 212, 191, calc(0.12 + var(--heat) * 0.38));
            border-radius: 999px;
            background:
                linear-gradient(135deg, rgba(45, 212, 191, calc(0.05 + var(--heat) * 0.18)), rgba(245, 158, 11, calc(0.02 + var(--heat) * 0.12))),
                rgba(0, 0, 0, 0.18);
            color: rgba(230, 255, 250, calc(0.55 + var(--heat) * 0.45));
            font-size: calc(0.66rem * var(--scale));
            font-weight: 850;
            line-height: 1.02;
            min-height: calc(23px * var(--scale));
            padding: calc(4px * var(--scale)) calc(7px * var(--scale));
        }
        #taxonomyTagDrawer .tag-cloud-item:hover,
        #taxonomyTagDrawer .tag-drawer-item:hover {
            border-color: rgba(45, 212, 191, 0.7);
            color: #f8fffb;
        }
        #taxonomyTagDrawer .tag-cloud-item.active,
        #taxonomyTagDrawer .tag-drawer-item.active {
            border-color: rgba(245, 158, 11, 0.72);
            background: rgba(245, 158, 11, 0.14);
            color: #ffd38a;
        }
        #viewTaxonomy .taxonomy-sidebar-cloud .tag-cloud-item.active,
        #taxonomyTagDrawer .tag-cloud-item.active,
        #taxonomyTagDrawer .tag-drawer-item.active {
            border-color: rgba(244, 114, 182, 0.98);
            background:
                linear-gradient(135deg, rgba(236, 72, 153, 0.94), rgba(244, 114, 182, 0.82)),
                rgba(0, 0, 0, 0.12);
            color: #fff7fb;
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.08),
                0 9px 20px rgba(236, 72, 153, 0.24);
            opacity: 1;
            filter: none;
        }
        .tag-drawer-item.blocked {
            background: rgba(255, 110, 110, calc(0.04 + var(--heat) * 0.12));
            border-color: rgba(255, 130, 130, calc(0.14 + var(--heat) * 0.18));
            color: rgba(255, 196, 196, 0.92);
        }
        .tag-drawer-item.is-loading {
            background: var(--accent-muted);
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }
        .tag-drawer-item.blocked.is-loading {
            background: rgba(255, 110, 110, 0.16);
            border-color: rgba(255, 130, 130, 0.7);
            color: rgba(255, 208, 208, 0.96);
        }
        .tag-drawer-item .tag-indicator {
            display: none;
        }
        .tag-drawer-label {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .tag-drawer-count {
            font-size: 0.5625rem;
            color: rgba(140, 210, 255, calc(0.35 + var(--heat) * 0.40));
            font-variant-numeric: tabular-nums;
        }
        .tag-drawer-item.active .tag-drawer-count,
        .tag-drawer-item.blocked .tag-drawer-count {
            display: none;
        }

        /* Drawer open: let fixed children escape body's overflow:hidden on mobile */
        body.tag-drawer-open {
            overflow: visible !important;
        }

        /* ---- Responsive rules ---- */
        @media (max-width: 768px) {
            .tag-sidebar {
                display: none;
            }
            .tag-drawer-toggle {
                display: inline-flex;
            }
            .view-taxonomy .tag-drawer-toggle-label {
                font-size: calc(0.6875rem + 2px);
                font-weight: 850;
            }
        }
        @media (max-width: 768px) {
            body.creator-classes-view-active .creator-classes-sidebar {
                display: none;
            }
        }
        @media (max-height: 720px) and (max-width: 768px) {
            .tag-drawer {
                height: calc(58vh + 20px);
                max-height: calc(58vh + 20px);
                height: min(calc(58dvh + 20px), calc(100dvh - 140px));
                max-height: min(calc(58dvh + 20px), calc(100dvh - 140px));
            }
        }
        @media (max-width: 768px) {
            #tagDrawer {
                height: min(92dvh, calc(100dvh - 44px));
                max-height: min(92dvh, calc(100dvh - 44px));
            }
        }
        @media (min-width: 769px) {
            .tag-drawer,
            .tag-drawer-scrim {
                display: none !important;
            }
        }

        /* Final override: NSFW badges must stay red. */
        .char-badge.nsfw,
        .char-hero-badges .char-badge.nsfw,
        .character-badge-nsfw {
            background: #ef4444 !important;
            border-color: #ef4444 !important;
            color: #ffffff !important;
        }

        /* Desktop character nav: pin to modal sides, larger targets */
        @media (min-width: 769px) {
            #characterModal .modal-content.character-modal {
                position: relative;
                overflow: visible;
            }
            #characterModal .modal-content.character-modal .modal-body {
                position: static;
                overflow: visible;
            }
            #characterModal .modal-content.character-modal .char-nav {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: 64px;
                height: 88px;
                font-size: 2rem;
                border-radius: 18px;
                border: 1px solid var(--border-strong);
                background: rgba(24, 24, 27, 0.94);
                box-shadow: var(--shadow-xl);
                z-index: 1200;
            }
            #characterModal .modal-content.character-modal .mobile-swipe-debug-overlay {
                bottom: 1px;
                padding: 3px 7px;
                border-radius: 999px;
                background: rgba(10, 10, 14, 0.44);
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
                z-index: 1100;
            }
            #characterModal .modal-content.character-modal .mobile-swipe-debug-track {
                gap: 3px;
            }
            #characterModal .modal-content.character-modal .mobile-swipe-debug-dot {
                width: 10px;
                height: 4px;
            }
            #characterModal .modal-content.character-modal .char-nav-prev {
                left: calc(-64px - 14px);
            }
            #characterModal .modal-content.character-modal .char-nav-next {
                right: calc(-64px - 14px);
            }
        }

        /* Desktop modal height lock: prevent content/image-driven resize jitter */
        @media (min-width: 769px) {
            #characterModal > .modal-content.character-modal {
                height: 80vh;
                min-height: 80vh;
                max-height: 80vh;
            }

            #creatorProfileModal > .modal-content.creator-profile-modal {
                height: min(84vh, 100dvh);
                min-height: min(84vh, 100dvh);
                max-height: min(84vh, 100dvh);
            }

            #creatorProfileModal > .modal-content.creator-profile-modal > .modal-body {
                min-height: 0;
                overflow-y: auto;
            }
        }

        #creatorProfileModal.creator-profile-page-mode {
            top: 56px !important;
            right: 0 !important;
            bottom: 0 !important;
            left: 0 !important;
            align-items: flex-start;
            justify-content: center;
            padding: clamp(12px, 2vw, 24px);
            overflow-y: auto;
            overscroll-behavior: contain;
            background: #08090d;
        }
        #creatorProfileModal.creator-profile-page-mode,
        #creatorProfileModal.creator-profile-page-mode .modal-content {
            transition: none !important;
        }
        #creatorProfileModal.creator-profile-page-mode > .modal-content.creator-profile-modal {
            width: min(100%, 1320px);
            max-width: 1320px;
            height: auto !important;
            min-height: calc(100dvh - 56px - clamp(24px, 4vw, 48px)) !important;
            max-height: none !important;
            border-radius: 0;
            border: 0;
            background: transparent;
            box-shadow: none;
            overflow: visible;
            transform: none !important;
        }
        #creatorProfileModal.creator-profile-page-mode > .modal-content.creator-profile-modal > .modal-header {
            display: none;
        }
        #creatorProfileModal.creator-profile-page-mode > .modal-content.creator-profile-modal > .modal-body {
            height: auto;
            min-height: 0;
            overflow: visible;
            padding: 0;
        }
        #creatorProfileModal:not(.creator-profile-page-mode) .creator-profile-page-hero {
            display: none;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-stage {
            min-height: calc(100dvh - 58px);
            border-radius: 16px;
            overflow: hidden;
            border-color: rgba(255, 255, 255, 0.12);
            background: rgba(8, 10, 15, 0.92);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.32);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-bg,
        #creatorProfileModal.creator-profile-page-mode .creator-profile-bg-image,
        #creatorProfileModal.creator-profile-page-mode .creator-profile-bg-gradient {
            border-radius: 16px;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-content {
            display: grid;
            gap: 7px;
            min-height: calc(100dvh - 58px);
            padding: 0;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-stats {
            display: none;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-hero {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 138px minmax(0, 1fr);
            grid-template-areas:
                "avatar copy"
                "jump jump";
            gap: 15px 17px;
            align-items: start;
            min-height: 202px;
            padding: 17px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
            background:
                linear-gradient(90deg, rgba(8, 10, 15, 0.96) 0%, rgba(8, 10, 15, 0.78) 48%, rgba(8, 10, 15, 0.42) 100%),
                radial-gradient(circle at 88% 20%, rgba(244, 114, 182, 0.22), transparent 36%),
                radial-gradient(circle at 22% 92%, rgba(45, 212, 191, 0.14), transparent 34%);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-avatar-stack {
            grid-area: avatar;
            display: grid;
            gap: 9px;
            align-self: start;
            justify-self: start;
            width: 138px;
            min-width: 0;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-avatar {
            width: 138px;
            aspect-ratio: 1;
            border-radius: 13px;
            overflow: hidden;
            align-self: start;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.18);
            box-shadow: 0 13px 30px rgba(0, 0, 0, 0.34);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-avatar .creator-profile-modal-avatar-placeholder-inner {
            font-size: 1.4rem;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-copy {
            grid-area: copy;
            min-width: 0;
            display: grid;
            justify-items: start;
            gap: 6px;
            align-content: start;
            max-width: 760px;
            text-align: left;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-kicker {
            color: color-mix(in srgb, var(--brand-hot-pink) 48%, white 52%);
            font-size: 0.62rem;
            font-weight: 800;
            letter-spacing: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-name {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            max-width: 100%;
            margin: 0;
            color: #ffffff;
            font-size: 1.9rem;
            line-height: 1.05;
            font-family: var(--font-sans);
            font-weight: 520;
            letter-spacing: 0;
            overflow-wrap: anywhere;
            justify-self: start;
            text-align: left;
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.34);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-name-text {
            min-width: 0;
            overflow-wrap: anywhere;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-row {
            display: grid;
            align-items: center;
            min-width: 0;
            grid-column: 1 / -1;
            width: 100%;
            min-height: 32px;
            margin-top: 0;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-row[hidden] {
            display: none !important;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-grid {
            --creator-rank-accent: #f472b6;
            --creator-rank-accent-2: #facc15;
            --creator-rank-rank-accent: #eab308;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1px;
            width: 100%;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-grid.is-dark {
            --creator-rank-accent: #a78bfa;
            --creator-rank-accent-2: #60a5fa;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-grid.is-power {
            --creator-rank-accent: #fb7185;
            --creator-rank-accent-2: #fbbf24;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-grid.is-adult {
            --creator-rank-accent: #f472b6;
            --creator-rank-accent-2: #c084fc;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-grid.is-wild {
            --creator-rank-accent: #34d399;
            --creator-rank-accent-2: #22d3ee;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-grid.is-arcane {
            --creator-rank-accent: #c084fc;
            --creator-rank-accent-2: #818cf8;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-grid.is-story {
            --creator-rank-accent: #38bdf8;
            --creator-rank-accent-2: #f472b6;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-grid.is-warm {
            --creator-rank-accent: #fb7185;
            --creator-rank-accent-2: #f59e0b;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-grid.is-edge {
            --creator-rank-accent: #f87171;
            --creator-rank-accent-2: #a78bfa;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-grid.is-street {
            --creator-rank-accent: #2dd4bf;
            --creator-rank-accent-2: #facc15;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-grid.is-tier-1 {
            --creator-rank-rank-accent: #94a3b8;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-grid.is-tier-2 {
            --creator-rank-rank-accent: #38bdf8;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-grid.is-tier-3 {
            --creator-rank-rank-accent: #34d399;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-grid.is-tier-4 {
            --creator-rank-rank-accent: #fbbf24;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-grid.is-tier-5 {
            --creator-rank-rank-accent: #fb7185;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-grid.is-tier-6 {
            --creator-rank-rank-accent: #c084fc;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-grid.is-tier-7 {
            --creator-rank-rank-accent: #fde047;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-cell {
            display: inline-flex;
            align-items: center;
            min-width: 0;
            min-height: 34px;
            gap: 7px;
            max-width: 100%;
            padding: 5px 9px;
            border-radius: 0;
            border: 0;
            background:
                linear-gradient(135deg, color-mix(in srgb, var(--creator-rank-accent) 24%, rgba(5, 8, 14, 0.76)), rgba(5, 8, 14, 0.68)),
                color-mix(in srgb, var(--creator-rank-accent) 12%, rgba(5, 8, 14, 0.82));
            box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
            color: inherit;
            text-decoration: none;
            cursor: pointer;
            overflow: hidden;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-cell:hover,
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-cell:focus-visible {
            box-shadow:
                inset 0 -1px 0 rgba(255, 255, 255, 0.08),
                inset 0 0 0 1px color-mix(in srgb, var(--creator-rank-accent) 34%, rgba(255, 255, 255, 0.12));
            filter: brightness(1.08);
            outline: none;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-cell-rank {
            background:
                linear-gradient(135deg, color-mix(in srgb, var(--creator-rank-rank-accent) 24%, rgba(5, 8, 14, 0.76)), rgba(5, 8, 14, 0.68)),
                color-mix(in srgb, var(--creator-rank-rank-accent) 12%, rgba(5, 8, 14, 0.82));
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-cell-rank:hover,
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-cell-rank:focus-visible {
            box-shadow:
                inset 0 -1px 0 rgba(255, 255, 255, 0.08),
                inset 0 0 0 1px color-mix(in srgb, var(--creator-rank-rank-accent) 34%, rgba(255, 255, 255, 0.12));
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-label {
            flex: 0 0 auto;
            color: rgba(255, 255, 255, 0.66);
            font-size: 0.68rem;
            font-weight: 850;
            letter-spacing: 0;
            line-height: 1;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-value {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            min-width: 0;
            color: color-mix(in srgb, var(--creator-rank-accent) 44%, white);
            font-size: 0.805rem;
            font-weight: 850;
            line-height: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-cell-rank .creator-profile-page-rank-value {
            color: color-mix(in srgb, var(--creator-rank-rank-accent) 42%, white);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-rank-value i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: 16px;
            height: 16px;
            font-size: 0.62rem;
            color: currentColor;
            text-shadow: 0 0 12px color-mix(in srgb, currentColor 36%, transparent);
        }
        .creator-profile-identity-verified-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            background: #1d9bf0;
            color: #ffffff;
            box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.24);
            line-height: 1;
            vertical-align: middle;
        }
        .creator-profile-identity-verified-icon--hero {
            width: 28px;
            height: 28px;
            flex: 0 0 28px;
            font-size: 0.86rem;
        }
        .creator-profile-identity-verified-icon--header {
            width: 18px;
            height: 18px;
            flex: 0 0 18px;
            font-size: 0.58rem;
        }
        .creator-profile-identity-verified-icon--character {
            width: 14px;
            height: 14px;
            flex: 0 0 14px;
            font-size: 0.46rem;
            box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.24);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-source-on {
            color: rgba(255, 255, 255, 0.56);
            font-size: 0.9em;
            font-weight: 750;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-source-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 20px;
            padding: 0 8px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            background: rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.84);
            font-size: 0.64rem;
            font-weight: 850;
            line-height: 1;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-source-badge.is-janitor {
            border-color: rgba(96, 165, 250, 0.38);
            background: rgba(96, 165, 250, 0.13);
            color: #bfdbfe;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-source-badge.is-saucepan {
            border-color: rgba(244, 114, 182, 0.42);
            background: rgba(244, 114, 182, 0.14);
            color: #fbcfe8;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-verified-link {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-height: 20px;
            max-width: 100%;
            padding: 2px 8px;
            border: 1px solid rgba(29, 155, 240, 0.46);
            border-radius: 999px;
            background: rgba(29, 155, 240, 0.14);
            color: #d7ecff;
            font-size: 0.64rem;
            font-weight: 850;
            line-height: 1.1;
            text-decoration: none;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-verified-link:hover,
        #creatorProfileModal.creator-profile-page-mode .creator-profile-verified-link:focus-visible {
            border-color: rgba(29, 155, 240, 0.78);
            background: rgba(29, 155, 240, 0.22);
            color: #ffffff;
            outline: none;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-verified-link strong {
            color: inherit;
            font-weight: 900;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-unclaimed-badge {
            position: absolute;
            top: 14px;
            right: 14px;
            z-index: 3;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            max-width: min(174px, calc(100% - 28px));
            min-height: 30px;
            padding: 4px 10px 4px 7px;
            border-radius: 999px;
            border: 1px solid rgba(253, 224, 71, 0.72);
            background: rgba(250, 204, 21, 0.94);
            color: #251a00;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
            text-decoration: none;
            white-space: nowrap;
            transition:
                border-color var(--transition-fast),
                background var(--transition-fast),
                color var(--transition-fast),
                box-shadow var(--transition-fast);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-unclaimed-badge[hidden] {
            display: none;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-unclaimed-badge:hover,
        #creatorProfileModal.creator-profile-page-mode .creator-profile-unclaimed-badge:focus-visible {
            border-color: rgba(254, 240, 138, 0.92);
            background: #facc15;
            color: #171100;
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
            outline: none;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-unclaimed-badge-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            flex: 0 0 20px;
            border-radius: 999px;
            background: rgba(37, 26, 0, 0.12);
            color: #2c1c00;
            font-size: 0.58rem;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-unclaimed-badge-copy {
            display: inline-flex;
            align-items: center;
            min-width: 0;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-unclaimed-badge-text {
            display: block;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            color: currentColor;
            letter-spacing: 0;
            white-space: nowrap;
            font-size: 0.82rem;
            font-weight: 880;
            line-height: 1.1;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-sub {
            color: rgba(255, 255, 255, 0.72);
            font-size: 0.72rem;
            font-weight: 650;
            overflow-wrap: anywhere;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-teaser {
            max-width: 68ch;
            margin: 0;
            color: rgba(255, 255, 255, 0.88);
            font-size: 0.76rem;
            line-height: 1.45;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-teaser p,
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-teaser ul,
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-teaser ol,
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-teaser blockquote {
            margin: 0 0 4px;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-teaser a {
            color: color-mix(in srgb, var(--brand-hot-pink) 54%, white 46%);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 7px;
            margin-top: 4px;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-action,
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-actions .entity-discussion-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-height: 32px;
            padding: 0 10px;
            border-radius: 8px;
            font-size: 0.7rem;
            font-weight: 820;
            line-height: 1;
            text-decoration: none;
            cursor: pointer;
            white-space: nowrap;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-action-primary {
            border: 1px solid rgba(244, 114, 182, 0.66);
            background: rgba(236, 72, 153, 0.72);
            color: #ffffff;
            box-shadow: 0 10px 28px rgba(236, 72, 153, 0.24);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-source,
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-actions .entity-discussion-btn {
            border: 1px solid rgba(255, 255, 255, 0.18);
            background: rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.9);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-refresh {
            border: 1px solid rgba(45, 212, 191, 0.38);
            background: rgba(45, 212, 191, 0.13);
            color: #ccfbf1;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-refresh:disabled {
            cursor: wait;
            opacity: 0.78;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-actions .entity-discussion-btn {
            border-color: rgba(45, 212, 191, 0.34);
            background: rgba(45, 212, 191, 0.12);
            color: #c9fff8;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-mobile-discussion-actions {
            display: none;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-social-actions {
            display: none;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-mobile-kudos {
            border-color: rgba(244, 114, 182, 0.55);
            background: rgba(244, 114, 182, 0.14);
            color: #ffe4f2;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-mobile-message {
            border-color: rgba(45, 212, 191, 0.44);
            background: rgba(45, 212, 191, 0.12);
            color: #ccfbf1;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-stat-strip {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.13);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.08);
            margin-top: 2px;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-tags {
            width: 100%;
            min-width: 0;
            max-width: 760px;
            margin-top: 1px;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-tags[hidden] {
            display: none !important;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-tags .creators-top-tags {
            gap: 5px;
            margin-top: 0;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-tags .creators-top-tag {
            text-decoration: none;
            cursor: pointer;
            min-height: 22px;
            padding: 2px 7px;
            border-color: rgba(244, 114, 182, 0.32);
            background: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.82);
            font-size: 0.68rem;
            max-width: min(180px, 100%);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-tags .creators-top-tag:hover,
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-tags .creators-top-tag:focus-visible {
            border-color: rgba(244, 114, 182, 0.58);
            background: rgba(244, 114, 182, 0.16);
            color: #ffffff;
            outline: none;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-tags .creators-top-tag-label {
            max-width: min(144px, 42vw);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-tags .creators-top-tag-count {
            color: rgba(255, 255, 255, 0.58);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-stat {
            display: grid;
            gap: 2px;
            align-content: center;
            min-height: 46px;
            padding: 7px 9px;
            background: rgba(5, 8, 14, 0.7);
            min-width: 0;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-stat strong {
            color: #ffffff;
            font-size: 0.84rem;
            line-height: 1;
            font-weight: 850;
            font-variant-numeric: tabular-nums;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-stat span {
            color: rgba(255, 255, 255, 0.62);
            font-size: 0.58rem;
            line-height: 1.15;
            font-weight: 720;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-about,
        #creatorProfileModal.creator-profile-page-mode .creator-profile-bots {
            position: relative;
            z-index: 1;
            margin: 0 16px;
            padding: 12px 14px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.11);
            background: rgba(6, 8, 13, 0.44);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-bots {
            margin-bottom: 16px;
            min-height: calc(100dvh - 160px);
            scroll-margin-top: 58px;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-bots.is-short-list {
            min-height: calc(100dvh + 96px);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-bots.is-short-list .creator-profile-bots-footer {
            min-height: calc(100dvh - 240px);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-section-head,
        #creatorProfileModal.creator-profile-page-mode .creator-profile-bots-head {
            border-bottom-color: rgba(255, 255, 255, 0.12);
        }
        .creator-profile-about-expand {
            display: none;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-about:not(.is-expanded) .creator-profile-about-html {
            position: relative;
            max-height: 260px;
            overflow: hidden;
            cursor: zoom-in;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-about.is-expanded .creator-profile-about-html {
            cursor: zoom-out;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-about:not(.is-expanded) .creator-profile-about-html::after {
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 72px;
            pointer-events: none;
            background: linear-gradient(180deg, rgba(6, 8, 13, 0), rgba(6, 8, 13, 0.72));
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-about-expand {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-height: 32px;
            margin-top: 12px;
            padding: 0 12px;
            border-radius: 8px;
            border: 1px solid #f472b6;
            background: #be185d;
            color: #ffffff;
            box-shadow: 0 8px 22px rgba(190, 24, 93, 0.34);
            font-size: 0.74rem;
            font-weight: 820;
            cursor: pointer;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-bots-list {
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 12px;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-bot-name {
            font-size: 0.78rem;
            padding-inline: 9px;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-bot-stats {
            padding-inline: 9px;
            padding-bottom: 9px;
        }
        @media (max-width: 900px) {
            #creatorProfileModal.creator-profile-page-mode {
                padding: 10px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-hero {
                grid-template-columns: 102px minmax(0, 1fr);
                gap: 11px;
                min-height: 161px;
                padding: 13px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-avatar-stack {
                width: 102px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-avatar {
                width: 102px;
                border-radius: 10px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-name {
                font-size: 1.35rem;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-stat-strip {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }
        @media (max-width: 640px) {
            #creatorProfileModal.creator-profile-page-mode {
                top: 56px !important;
                padding: 0;
            }
            #creatorProfileModal.creator-profile-page-mode > .modal-content.creator-profile-modal {
                width: 100%;
                min-height: calc(100dvh - 56px) !important;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-stage {
                border-radius: 0;
                border-inline: 0;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bg,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bg-image,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bg-gradient {
                border-radius: 0;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-hero {
                grid-template-columns: 72px minmax(0, 1fr);
                grid-template-areas:
                    "avatar copy"
                    "jump jump";
                align-items: start;
                min-height: 0;
                padding: 10px 9px 11px;
                gap: 10px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-unclaimed-badge {
                top: 8px;
                right: 8px;
                max-width: min(166px, calc(100% - 16px));
                min-height: 28px;
                padding: 4px 8px 4px 7px;
                gap: 5px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-unclaimed-badge-icon {
                width: 19px;
                height: 19px;
                flex-basis: 19px;
                font-size: 0.56rem;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-unclaimed-badge-text {
                font-size: 0.76rem;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-avatar {
                width: 72px;
                border-radius: 10px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-avatar-stack {
                width: 72px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-copy {
                gap: 6px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-name {
                font-size: 1.35rem;
                line-height: 1.1;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-teaser {
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
                font-size: 0.72rem;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-actions {
                gap: 6px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-action,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-actions .entity-discussion-btn {
                min-height: 30px;
                padding: 0 9px;
                font-size: 0.68rem;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-stat-strip {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-tags .creators-top-tag {
                font-size: 0.64rem;
                max-width: min(150px, 100%);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-tags .creators-top-tag-label {
                max-width: min(112px, 38vw);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-stat {
                min-height: 42px;
                padding: 6px 7px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-about,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bots {
                margin-inline: 8px;
                padding: 12px;
                border-radius: 10px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-bots-list {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 10px;
            }
        }
        @media (max-width: 420px) {
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-hero {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "avatar"
                    "copy"
                    "jump";
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-avatar {
                width: 84px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-avatar-stack {
                width: 84px;
            }
        }
        @media (max-width: 360px) {
            #creatorProfileModal.creator-profile-page-mode .creator-profile-unclaimed-badge {
                max-width: min(150px, calc(100% - 16px));
                gap: 4px;
                padding-right: 7px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-unclaimed-badge-icon {
                width: 18px;
                height: 18px;
                flex-basis: 18px;
                font-size: 0.52rem;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-unclaimed-badge-text {
                font-size: 0.72rem;
            }
        }

        #creatorProfileModal:not(.creator-profile-page-mode) .creator-profile-page-tabs,
        #creatorProfileModal:not(.creator-profile-page-mode) .creator-profile-series,
        #creatorProfileModal:not(.creator-profile-page-mode) .creator-profile-page-list-tools,
        #creatorProfileModal:not(.creator-profile-page-mode) .creator-profile-page-jump-slot {
            display: none;
        }
        @media (min-width: 769px) {
            #creatorProfileModal.creator-profile-page-mode {
                top: calc(4rem + 6px) !important;
                right: 1rem !important;
                bottom: 1rem !important;
                left: calc(1rem + var(--characters-sidebar-width) + 50px + var(--space-3)) !important;
                padding: 0;
                background: #08090d;
                overflow-y: auto;
                scrollbar-gutter: stable;
            }
            #creatorProfileModal.creator-profile-page-mode > .modal-content.creator-profile-modal {
                width: 100%;
                max-width: none;
                min-height: 100% !important;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-stage {
                border-radius: 12px;
                box-shadow: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bg,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bg-image,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bg-gradient {
                border-radius: 12px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-content {
                gap: 5px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-hero {
                grid-template-columns: clamp(178px, 14vw, 236px) minmax(0, 1fr) minmax(154px, auto);
                grid-template-areas:
                    "avatar copy jump";
                align-items: start;
                min-height: clamp(210px, 22vh, 266px);
                padding: 22px;
                gap: 12px 20px;
                background:
                    linear-gradient(90deg, rgba(7, 9, 14, 0.96) 0%, rgba(7, 9, 14, 0.78) 42%, rgba(7, 9, 14, 0.30) 100%),
                    radial-gradient(circle at 92% 22%, rgba(244, 114, 182, 0.20), transparent 33%),
                    radial-gradient(circle at 30% 88%, rgba(45, 212, 191, 0.10), transparent 28%);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-avatar-stack {
                width: 100%;
                gap: 10px;
                align-self: start;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-avatar {
                width: 100%;
                align-self: start;
                border-radius: 14px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-avatar-stack .creator-profile-page-top-tags {
                width: 100%;
                max-width: 100%;
                margin-top: 0;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-avatar-stack .creators-top-tags {
                justify-content: flex-start;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-copy {
                max-width: 760px;
                gap: 7px;
                align-self: start;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-name {
                font-size: clamp(1.95rem, 2.8vw, 2.65rem);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-teaser {
                font-size: 0.76rem;
                max-width: 70ch;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-actions {
                gap: 6px;
                margin-top: 7px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-action,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-actions .entity-discussion-btn {
                min-height: 32px;
                border-radius: 8px;
                padding: 0 11px;
                font-size: 0.72rem;
            }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-follow {
            border-color: rgba(244, 114, 182, 0.72);
            background: linear-gradient(135deg, rgba(236, 72, 153, 0.94), rgba(236, 72, 153, 0.70));
            color: #fff;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-follow.is-following {
            border-color: rgba(45, 212, 191, 0.48);
            background: rgba(45, 212, 191, 0.14);
            color: #c9fff8;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-follow:disabled {
            cursor: wait;
            opacity: 0.78;
        }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-more {
                width: 32px;
                padding: 0;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-stat-strip {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 1px;
                width: min(100%, 520px);
                border: 1px solid rgba(255, 255, 255, 0.13);
                border-radius: 10px;
                background: rgba(255, 255, 255, 0.08);
                overflow: hidden;
                align-self: stretch;
                margin-top: 4px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-stat {
                min-height: 42px;
                padding: 7px 10px;
                background: rgba(5, 8, 14, 0.7);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-stat strong {
                font-size: 0.9rem;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-stat span {
                font-size: 0.6rem;
                color: rgba(255, 255, 255, 0.70);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-jump-slot {
                grid-area: jump;
                align-self: end;
                justify-self: end;
                width: min(100%, 252px);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-cta-stack {
                display: grid;
                gap: 8px;
                width: 100%;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-side-action {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 7px;
                width: 100%;
                min-height: 34px;
                border-radius: 8px;
                border: 1px solid rgba(255, 255, 255, 0.14);
                background: rgba(255, 255, 255, 0.07);
                color: rgba(255, 255, 255, 0.88);
                font-size: 0.76rem;
                font-weight: 840;
                cursor: pointer;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-side-action i {
                font-size: 0.82rem;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-kudos {
                border-color: rgba(244, 114, 182, 0.55);
                background: rgba(244, 114, 182, 0.14);
                color: #ffe4f2;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-message {
                border-color: rgba(45, 212, 191, 0.44);
                background: rgba(45, 212, 191, 0.12);
                color: #ccfbf1;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-jump {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 7px;
                width: 100%;
                min-height: 34px;
                border-radius: 8px;
                border: 1px solid rgba(244, 114, 182, 0.72);
                background: rgba(244, 114, 182, 0.18);
                color: #ffe4f2;
                font-size: 0.76rem;
                font-weight: 840;
                box-shadow: 0 0 22px rgba(236, 72, 153, 0.20);
                cursor: pointer;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tabs {
                position: relative;
                z-index: 1;
                display: flex;
                align-items: center;
                gap: 34px;
                min-height: 46px;
                padding: 0 32px;
                border-top: 1px solid rgba(255, 255, 255, 0.08);
                border-bottom: 1px solid rgba(255, 255, 255, 0.12);
                background: rgba(8, 10, 15, 0.70);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab {
                position: relative;
                border: 0;
                background: transparent;
                color: rgba(255, 255, 255, 0.68);
                font-size: 0.82rem;
                font-weight: 760;
                line-height: 1;
                padding: 15px 0;
                cursor: default;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab.is-active {
                color: #ffffff;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab.is-active::after {
                content: '';
                position: absolute;
                right: 0;
                bottom: 0;
                left: 0;
                height: 2px;
                border-radius: 999px;
                background: var(--brand-hot-pink);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab span {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 24px;
                min-height: 19px;
                margin-left: 5px;
                padding: 0 7px;
                border-radius: 999px;
                background: rgba(255, 255, 255, 0.08);
                color: rgba(255, 255, 255, 0.72);
                font-size: 0.72em;
                font-weight: 800;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-about,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-series,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bots {
                margin: 0;
                padding: 14px 18px;
                border-radius: 10px;
                background: rgba(8, 11, 16, 0.42);
                border-color: rgba(255, 255, 255, 0.10);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-about-head .creator-profile-about-jump {
                display: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-section-head,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bots-head {
                align-items: center;
                min-height: 36px;
                padding-bottom: 10px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-section-head h3,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bots-head h3,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-series-head h3 {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                color: #ffffff;
                font-size: 1.08rem;
                letter-spacing: 0;
                text-transform: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-section-head h3::before,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bots-head h3::before {
                content: '\f1d8';
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                color: var(--brand-hot-pink);
                font-size: 0.86rem;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-series {
                display: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-series-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-series-head h3 {
                margin: 0;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-series-head i {
                color: var(--brand-hot-pink);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-series-link {
                border: 0;
                background: transparent;
                color: color-mix(in srgb, var(--brand-hot-pink) 58%, white 42%);
                font-size: 0.78rem;
                font-weight: 780;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-series-grid {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 12px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-series-card {
                display: grid;
                grid-template-columns: 92px minmax(0, 1fr);
                gap: 14px;
                min-height: 92px;
                padding: 10px;
                border: 1px solid rgba(255, 255, 255, 0.10);
                border-radius: 10px;
                background:
                    linear-gradient(90deg, rgba(28, 13, 18, 0.75), rgba(10, 12, 18, 0.72)),
                    radial-gradient(circle at 100% 50%, rgba(244, 114, 182, 0.18), transparent 45%);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-series-card-alt {
                background:
                    linear-gradient(90deg, rgba(29, 18, 10, 0.72), rgba(10, 12, 18, 0.72)),
                    radial-gradient(circle at 100% 50%, rgba(245, 158, 11, 0.14), transparent 45%);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-series-thumb {
                position: relative;
                border-radius: 8px;
                background:
                    linear-gradient(135deg, rgba(244, 114, 182, 0.26), rgba(245, 158, 11, 0.10)),
                    rgba(255, 255, 255, 0.06);
                overflow: hidden;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-series-thumb span {
                position: absolute;
                top: 8px;
                left: 8px;
                padding: 2px 5px;
                border-radius: 5px;
                background: #ef4444;
                color: #ffffff;
                font-size: 0.56rem;
                font-weight: 850;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-series-copy {
                min-width: 0;
                display: grid;
                align-content: center;
                gap: 4px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-series-copy strong {
                color: rgba(255, 255, 255, 0.92);
                font-size: 0.9rem;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-series-copy p {
                margin: 0;
                color: rgba(255, 255, 255, 0.64);
                font-size: 0.76rem;
                line-height: 1.3;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-series-copy span {
                color: color-mix(in srgb, var(--brand-hot-pink) 58%, white 42%);
                font-size: 0.72rem;
                font-weight: 780;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-list-tools {
                display: inline-flex;
                align-items: center;
                gap: 8px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tool {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 7px;
                min-height: 34px;
                padding: 0 13px;
                border-radius: 7px;
                border: 1px solid rgba(255, 255, 255, 0.12);
                background: rgba(255, 255, 255, 0.06);
                color: rgba(255, 255, 255, 0.78);
                font-size: 0.76rem;
                font-weight: 720;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown {
                min-width: 108px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown .admin-dropdown-btn {
                min-height: 34px;
                border-radius: 7px;
                background: rgba(255, 255, 255, 0.06);
                border-color: rgba(255, 255, 255, 0.12);
                color: rgba(255, 255, 255, 0.82);
                font-size: 0.76rem;
                font-weight: 760;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown .admin-dropdown-menu {
                background: rgba(15, 15, 18, 0.98);
                border-color: rgba(255, 255, 255, 0.16);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-basket-add,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-queue-unextracted {
                min-height: 34px;
                border-radius: 7px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-bots-list {
                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            }
        }
        @media (min-width: 769px) and (max-width: 1120px) {
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-hero {
                grid-template-columns: 154px minmax(0, 1fr);
                grid-template-areas:
                    "avatar copy"
                    "jump jump";
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-jump-slot {
                justify-self: start;
                width: min(100%, 252px);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-stat-strip {
                flex-wrap: wrap;
            }
        }
        @media (max-width: 768px) {
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-hero {
                grid-template-areas:
                    "avatar copy"
                    "jump jump";
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-cta-stack {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
                width: 100%;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-jump {
                grid-column: 1 / -1;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-side-action {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 7px;
                width: 100%;
                min-height: 34px;
                border-radius: 8px;
                border: 1px solid rgba(255, 255, 255, 0.14);
                background: rgba(255, 255, 255, 0.07);
                color: rgba(255, 255, 255, 0.88);
                font-size: 0.74rem;
                font-weight: 820;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-kudos {
                border-color: rgba(244, 114, 182, 0.55);
                background: rgba(244, 114, 182, 0.14);
                color: #ffe4f2;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-message {
                border-color: rgba(45, 212, 191, 0.44);
                background: rgba(45, 212, 191, 0.12);
                color: #ccfbf1;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tabs {
                display: flex;
                align-items: center;
                gap: 14px;
                overflow-x: auto;
                padding: 0 10px;
                min-height: 36px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.12);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab {
                flex: 0 0 auto;
                border: 0;
                background: transparent;
                color: rgba(255, 255, 255, 0.68);
                padding: 10px 0;
                font-size: 0.74rem;
                font-weight: 760;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab.is-active {
                color: #ffffff;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-series {
                display: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-jump-slot {
                grid-area: jump;
                justify-self: stretch;
                align-self: end;
                margin-top: 0;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-jump {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                width: 100%;
                min-height: 36px;
                border-radius: 8px;
                border: 1px solid rgba(244, 114, 182, 0.62);
                background: rgba(244, 114, 182, 0.18);
                color: #ffe4f2;
                font-size: 0.78rem;
                font-weight: 800;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-stat-strip {
                margin-top: 0;
            }
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-pills {
            display: flex;
            align-items: center;
            gap: inherit;
            min-width: 0;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-filter {
            display: none;
        }
        @media (max-width: 768px) {
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-actions .creator-profile-page-tab-filter {
                display: inline-flex !important;
            }
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-hero > .creator-profile-page-tabs {
            position: absolute;
            inset: 0;
            z-index: 12;
            display: block;
            width: auto;
            min-height: 100%;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            overflow: visible;
            pointer-events: none;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-hero > .creator-profile-page-tabs .creator-profile-page-tab-pills {
            position: absolute;
            top: 14px;
            left: 16px;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            min-width: 0;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            pointer-events: auto;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-hero > .creator-profile-page-tabs .creator-profile-page-tab {
            min-height: 30px;
            padding: 0 13px;
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: 999px;
            background: rgba(5, 8, 14, 0.82);
            color: rgba(255, 255, 255, 0.72);
            font-size: 0.72rem;
            font-weight: 820;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-hero > .creator-profile-page-tabs .creator-profile-page-tab.is-active {
            background: linear-gradient(135deg, rgba(236, 72, 153, 0.94), rgba(244, 114, 182, 0.74));
            color: #ffffff;
            box-shadow: 0 10px 22px rgba(236, 72, 153, 0.24);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-hero > .creator-profile-page-tabs .creator-profile-page-tab.is-active::after {
            display: none;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-hero > .creator-profile-page-tabs .creator-profile-page-tab span {
            min-width: 0;
            min-height: 0;
            margin-left: 5px;
            padding: 0;
            border-radius: 0;
            background: transparent;
            color: currentColor;
            opacity: 0.72;
            font-size: 0.92em;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-hero > .creator-profile-page-tabs .creator-profile-page-tab-actions {
            position: absolute;
            top: 14px;
            right: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 7px;
            pointer-events: auto;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-hero > .creator-profile-page-tabs .creator-profile-page-top-action,
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-hero > .creator-profile-page-tabs .creator-profile-page-tab-filter {
            min-height: 32px;
            padding: 0 12px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.16);
            background: rgba(5, 8, 14, 0.82);
            box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-follow {
            appearance: none;
            -webkit-appearance: none;
            border-color: rgba(244, 114, 182, 0.72);
            background: linear-gradient(135deg, rgba(236, 72, 153, 0.94), rgba(236, 72, 153, 0.70));
            color: #ffffff;
            -webkit-text-fill-color: currentColor;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-follow.is-following,
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-follow.is-following:disabled {
            border-color: rgba(45, 212, 191, 0.58);
            background: rgba(45, 212, 191, 0.16);
            color: #c9fff8;
            -webkit-text-fill-color: #c9fff8;
            opacity: 1;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-follow.is-loading:disabled {
            cursor: wait;
            opacity: 0.82;
        }
        @media (max-width: 768px) {
            body.creators-view-active.creator-profile-page-active #viewCreators.view-creators.active {
                padding-top: 0;
            }
            body.creators-view-active.creator-profile-page-active #viewCreators .creators-page {
                flex: 1 1 auto;
                height: 100%;
                padding-top: 0;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-content {
                gap: 6px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-hero {
                display: block;
                min-height: 0;
                padding: 0 0 10px;
                border-bottom: 0;
                overflow: hidden;
                background:
                    linear-gradient(180deg, rgba(8, 10, 15, 0.22) 0%, rgba(8, 10, 15, 0.92) 74%, rgba(8, 10, 15, 0.98) 100%),
                    radial-gradient(circle at 88% 20%, rgba(244, 114, 182, 0.20), transparent 34%),
                    radial-gradient(circle at 18% 88%, rgba(45, 212, 191, 0.12), transparent 32%);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-avatar {
                width: 100%;
                height: clamp(190px, 56vw, 270px);
                aspect-ratio: auto;
                border: 0;
                border-radius: 0 0 18px 18px;
                box-shadow: none;
                background: rgba(255, 255, 255, 0.05);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-avatar-stack {
                width: 100%;
                display: block;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-avatar img {
                object-fit: cover;
                object-position: center;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-copy {
                position: relative;
                z-index: 2;
                margin: -86px 10px 0;
                padding: 84px 10px 8px;
                max-width: none;
                gap: 6px;
                background:
                    linear-gradient(180deg, rgba(8, 10, 15, 0), rgba(8, 10, 15, 0.88) 36%, rgba(8, 10, 15, 0.98) 100%);
                border-radius: 0 0 14px 14px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-kicker {
                font-size: 0.6rem;
                gap: 5px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-name {
                font-size: clamp(1.55rem, 8vw, 2.12rem);
                line-height: 1.02;
                max-width: 100%;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-teaser {
                -webkit-line-clamp: 2;
                font-size: 0.72rem;
                line-height: 1.34;
                color: rgba(255, 255, 255, 0.82);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-stat-strip {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 1px;
                width: 100%;
                max-width: 100%;
                overflow: hidden;
                border: 1px solid rgba(255, 255, 255, 0.13);
                border-radius: 10px;
                background: rgba(255, 255, 255, 0.08);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-tags {
                width: 100%;
                margin-top: 0;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-tags .creators-top-tags {
                width: 100%;
                gap: 4px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-tags .creators-top-tag {
                min-height: 21px;
                padding: 2px 6px;
                font-size: 0.64rem;
                max-width: min(154px, 100%);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-tags .creators-top-tag-label {
                max-width: min(118px, 56vw);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-stat {
                min-width: 0;
                min-height: 40px;
                padding: 6px 8px;
                background: rgba(255, 255, 255, 0.08);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-stat strong {
                font-size: 0.78rem;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-stat span {
                font-size: 0.55rem;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-actions {
                gap: 6px;
                margin-top: 2px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-action,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-actions .entity-discussion-btn {
                min-height: 30px;
                border-radius: 8px;
                padding: 0 10px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-jump-slot {
                margin: 7px 10px 0;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-cta-stack {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 6px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-jump {
                grid-column: auto;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-side-action,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-jump {
                min-height: 32px;
                padding: 0 8px;
                font-size: 0.68rem;
                white-space: nowrap;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-side-action span,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-jump span {
                overflow: hidden;
                text-overflow: ellipsis;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tabs {
                position: absolute;
                inset: 0;
                z-index: 12;
                display: block;
                min-height: 100%;
                width: auto;
                padding: 0;
                border: 0;
                border-radius: 0;
                background: transparent;
                box-shadow: none;
                pointer-events: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-pills {
                position: absolute;
                top: 8px;
                right: 132px;
                left: 8px;
                flex: 1 1 auto;
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 3px;
                min-width: 0;
                padding: 0;
                border: 0;
                background: transparent;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab {
                min-width: 0;
                min-height: 34px;
                padding: 0 8px;
                border-radius: 999px;
                color: rgba(255, 255, 255, 0.72);
                font-size: 0.68rem;
                font-weight: 840;
                text-align: center;
                cursor: pointer;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab.is-active {
                background: linear-gradient(135deg, rgba(236, 72, 153, 0.96), rgba(244, 114, 182, 0.78));
                color: #ffffff;
                box-shadow: 0 10px 22px rgba(236, 72, 153, 0.22);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab.is-active::after {
                display: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab span {
                min-width: 0;
                min-height: 0;
                margin-left: 4px;
                padding: 0;
                background: transparent;
                color: currentColor;
                opacity: 0.72;
                font-size: 0.9em;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-filter {
                flex: 0 0 auto;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 6px;
                min-height: 34px;
                padding: 0 11px;
                border-radius: 999px;
                border: 1px solid rgba(244, 114, 182, 0.48);
                background: rgba(244, 114, 182, 0.13);
                color: #fbcfe8;
                font-size: 0.72rem;
                font-weight: 840;
                cursor: pointer;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-filter.has-active-filters,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-filter:focus-visible {
                border-color: rgba(244, 114, 182, 0.78);
                background: rgba(244, 114, 182, 0.22);
                color: #ffffff;
                outline: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-about,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bots {
                margin-inline: 8px;
                padding: 11px;
                border-radius: 12px;
                background: rgba(8, 11, 16, 0.52);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-section-head,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bots-head {
                gap: 8px;
                padding-bottom: 8px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bots-head {
                align-items: flex-start;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bots-head-actions {
                width: 100%;
                justify-content: space-between;
                flex-wrap: wrap;
                gap: 7px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-list-tools #creatorProfileTagFocusBtn {
                display: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown {
                min-width: 104px;
            }
        }
        @media (max-width: 420px) {
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-cta-stack {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-jump {
                grid-column: 1 / -1;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-filter span {
                display: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-filter {
                width: 38px;
                padding: 0;
            }
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tabs {
            position: sticky;
            top: 0;
            z-index: 12;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            width: auto;
            min-height: 48px;
            margin: 0;
            padding: 8px 16px 7px;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            overflow: visible;
            pointer-events: none;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-pills {
            position: static;
            flex: 0 1 auto;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            min-width: 0;
            padding: 0;
            border-radius: 0;
            border: 0;
            background: transparent;
            pointer-events: auto;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab {
            min-height: 32px;
            padding: 0 14px;
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: 999px;
            background: rgba(5, 8, 14, 0.82);
            color: rgba(255, 255, 255, 0.70);
            font-size: 0.74rem;
            font-weight: 840;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab.is-active {
            background: linear-gradient(135deg, rgba(236, 72, 153, 0.96), rgba(244, 114, 182, 0.76));
            color: #ffffff;
            box-shadow: 0 10px 22px rgba(236, 72, 153, 0.22);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab.is-active::after {
            display: none;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab span {
            min-width: 0;
            min-height: 0;
            margin-left: 5px;
            padding: 0;
            border-radius: 0;
            background: transparent;
            color: currentColor;
            opacity: 0.72;
            font-size: 0.9em;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-actions {
            position: static;
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 7px;
            min-width: 0;
            pointer-events: auto;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-action,
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-filter {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-height: 34px;
            padding: 0 13px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: rgba(5, 8, 14, 0.82);
            color: rgba(255, 255, 255, 0.88);
            font-size: 0.74rem;
            font-weight: 840;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-action:disabled {
            cursor: wait;
            opacity: 0.58;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-kudos {
            border-color: rgba(244, 114, 182, 0.55);
            background: rgba(244, 114, 182, 0.14);
            color: #ffe4f2;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-message {
            border-color: rgba(45, 212, 191, 0.44);
            background: rgba(45, 212, 191, 0.12);
            color: #ccfbf1;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-filter {
            display: none;
            border-color: rgba(244, 114, 182, 0.48);
            background: rgba(244, 114, 182, 0.13);
            color: #fbcfe8;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-filter.has-active-filters,
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-filter:focus-visible {
            border-color: rgba(244, 114, 182, 0.78);
            background: rgba(244, 114, 182, 0.22);
            color: #ffffff;
            outline: none;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-toolbar-identity {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            color: rgba(255, 255, 255, 0.92);
            pointer-events: auto;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-toolbar-avatar {
            width: 28px;
            height: 28px;
            flex: 0 0 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.20);
            background: rgba(255, 255, 255, 0.08);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-toolbar-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-toolbar-name {
            min-width: 0;
            max-width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.78rem;
            font-weight: 820;
            line-height: 1;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-discussion-actions {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-width: 0;
            pointer-events: auto;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tag-chips {
            display: none;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 4px;
            min-width: 0;
            pointer-events: auto;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tag-chips.has-filters {
            display: flex;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tag-chips .tag-chip,
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tag-chips .tag-chip-clear {
            height: 19px;
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tag-chips .tag-chip {
            max-width: 138px;
            background: rgba(5, 8, 14, 0.68);
            border-top: 1px solid rgba(255, 255, 255, 0.10);
            border-right: 1px solid rgba(255, 255, 255, 0.10);
            border-bottom: 1px solid rgba(255, 255, 255, 0.10);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tag-chips .tag-chip,
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tag-chips .tag-chip-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tag-chips .tag-chip-clear {
            background: rgba(5, 8, 14, 0.68);
            border-color: rgba(255, 255, 255, 0.16);
            color: rgba(255, 255, 255, 0.70);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-action-label-short {
            display: none;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-section-dropdown {
            display: none;
            position: relative;
            min-width: 0;
            pointer-events: auto;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-section-dropdown .creator-profile-page-section-btn {
            min-height: var(--characters-toolbar-pill-min-height, 1.55rem);
            min-width: 94px;
            width: auto;
            padding: var(--characters-toolbar-pill-padding-y, 0.18rem) 1.35rem var(--characters-toolbar-pill-padding-y, 0.18rem) 0.6rem;
            border: 1px solid color-mix(in srgb, var(--brand-hot-pink) 82%, var(--border-subtle) 18%);
            border-radius: 999px;
            background: var(--brand-hot-pink);
            color: #fff;
            font-size: 0.72rem;
            font-weight: 780;
            line-height: 1;
            box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-hot-pink) 20%, transparent);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-section-dropdown .creator-profile-page-section-btn::after {
            right: 8px;
            border-left-width: 3px;
            border-right-width: 3px;
            border-top-width: 5px;
            border-top-color: #fff;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-section-dropdown .admin-dropdown-menu {
            left: auto;
            right: 0;
            min-width: 148px;
            z-index: 56;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-cta-stack {
            grid-template-columns: minmax(0, 1fr);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-jump {
            grid-column: auto;
        }
        @media (max-width: 768px) {
            #creatorProfileModal.creator-profile-page-mode {
                --creator-profile-mobile-rail-height: 42px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-stage {
                margin-top: max(0px, calc(var(--creator-profile-mobile-rail-height) - 8px));
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tabs {
                position: fixed !important;
                top: calc(var(--characters-toolbar-offset) + var(--characters-mobile-toolbar-top-nudge));
                left: 0;
                right: 0;
                z-index: 50;
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                align-items: center;
                gap: 6px;
                width: auto;
                min-height: var(--creator-profile-mobile-rail-height);
                height: var(--creator-profile-mobile-rail-height);
                margin: 0;
                padding: 2px 8px 4px;
                background: transparent;
                box-sizing: border-box;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-toolbar-identity {
                justify-self: start;
                max-width: 100%;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-toolbar-avatar {
                width: 26px;
                height: 26px;
                flex-basis: 26px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-toolbar-name {
                max-width: 38vw;
                font-size: 0.72rem;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-discussion-actions {
                display: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tag-chips {
                display: none !important;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-pills {
                display: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-actions {
                position: static;
                justify-self: end;
                display: inline-flex;
                align-items: center;
                gap: 5px;
                min-width: 0;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-top-sort-dropdown {
                display: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-section-sort-dropdown {
                display: inline-flex;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-section-dropdown {
                display: inline-flex;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-section-dropdown .creator-profile-page-section-btn {
                min-height: 34px;
                min-width: 88px;
                max-width: 104px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 0.68rem;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab {
                min-width: 0;
                min-height: 34px;
                padding: 0 8px;
                font-size: 0.68rem;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-actions {
                flex: 0 0 auto;
                gap: 5px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-actions .creator-profile-page-top-action {
                display: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-filter {
                width: 36px;
                min-height: 36px;
                padding: 0;
                gap: 0;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-filter span {
                display: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-filter {
                display: inline-flex;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-mobile-discussion-actions {
                flex: 1 0 100%;
                order: 10;
                display: flex;
                align-items: center;
                gap: 6px;
                width: 100%;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-mobile-discussion-action {
                flex: 1 1 0;
                min-width: 0;
            }
        }
        @media (min-width: 769px) {
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tabs {
                position: static;
                top: 0;
                container-type: inline-size;
                container-name: creator-profile-toolbar;
                display: grid;
                grid-template-columns: minmax(150px, 1fr) auto minmax(0, 1fr);
                align-items: center;
                flex: 0 0 auto;
                min-height: 42px;
                margin: -2px 0 3px;
                justify-content: stretch;
                padding: 5px 14px 0;
                gap: 8px;
                box-sizing: border-box;
                pointer-events: auto;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-toolbar-identity {
                justify-self: start;
                max-width: 100%;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-discussion-actions {
                justify-self: center;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-pills {
                order: 20;
                gap: 2px;
                padding: 1px;
                border-radius: var(--radius-full);
                border: 1px solid var(--border-subtle);
                background: var(--bg-subtle);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab {
                min-height: var(--characters-toolbar-pill-min-height, 1.55rem);
                padding: var(--characters-toolbar-pill-padding-y, 0.18rem) 0.58rem;
                border: 0;
                border-radius: var(--radius-full);
                background: transparent;
                color: var(--text-secondary);
                font-size: 0.75rem;
                font-weight: 600;
                letter-spacing: 0;
                box-shadow: none;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab:hover {
                color: var(--text-primary);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab.is-active {
                background: var(--accent-primary);
                color: var(--text-inverse);
                box-shadow: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab span {
                margin-left: 4px;
                opacity: 0.72;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-actions {
                justify-self: end;
                order: 30;
                display: inline-flex;
                align-items: center;
                justify-content: flex-end;
                gap: 6px;
                min-width: 0;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-action,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-filter {
                min-height: 30px;
                padding: 0 10px;
                font-size: 0.72rem;
                box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-action {
                position: static;
                top: auto;
                left: auto;
                width: auto;
                min-width: 96px;
                padding-inline: 12px;
                pointer-events: auto;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-kudos {
                left: auto;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-message {
                left: auto;
                width: auto;
                min-width: 116px;
                padding-inline: 14px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-top-sort-dropdown {
                display: inline-flex;
                gap: 0;
                position: relative;
                min-width: 42px;
                pointer-events: auto;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-section-sort-dropdown {
                display: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-top-sort-dropdown .characters-sort-label {
                display: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown .characters-sort-btn.admin-dropdown-btn {
                position: relative;
                width: 42px;
                min-width: 42px;
                height: 38px;
                padding: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border: 0;
                border-radius: 0;
                background: transparent;
                box-shadow: none;
                color: var(--brand-hot-pink);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown .characters-sort-btn.admin-dropdown-btn:hover,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown .characters-sort-btn.admin-dropdown-btn:focus,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown .characters-sort-btn.admin-dropdown-btn:focus-visible,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown .characters-sort-btn.admin-dropdown-btn:active {
                border: 0;
                background: transparent;
                box-shadow: none;
                color: var(--brand-hot-pink);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown .characters-sort-btn.admin-dropdown-btn::after {
                display: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown .characters-sort-btn-text {
                display: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown .characters-sort-btn-mobile-badge {
                display: block;
                position: absolute;
                left: 50%;
                top: -3px;
                transform: translateX(-50%);
                max-width: 46px;
                padding: 1px 4px;
                border: 1px solid color-mix(in srgb, var(--brand-hot-pink) 38%, transparent 62%);
                border-radius: 999px;
                background: color-mix(in srgb, var(--brand-hot-pink) 16%, rgba(12, 13, 18, 0.82) 84%);
                color: #fff;
                font-size: 0.49rem;
                font-weight: 850;
                line-height: 1;
                letter-spacing: 0;
                white-space: nowrap;
                text-align: center;
                pointer-events: none;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown .characters-sort-btn-icon {
                display: block;
                width: 28px;
                height: 28px;
                stroke: currentColor;
                stroke-width: 2.2;
                stroke-linecap: round;
                stroke-linejoin: round;
                fill: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown .admin-dropdown-menu {
                left: auto;
                right: 0;
                min-width: 178px;
                z-index: 55;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-stage,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bg,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bg-image,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bg-gradient {
                border-radius: 0;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-stage {
                border: 0;
                background:
                    linear-gradient(180deg, rgba(8, 10, 15, 0.66), rgba(8, 10, 15, 0.76)),
                    var(--creator-profile-stage-bg-image, none),
                    rgba(8, 10, 15, 0.72);
                background-size: cover, cover, auto;
                background-position: center, center, center;
                background-repeat: no-repeat, no-repeat, repeat;
                box-shadow: none;
                overflow-y: auto;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
                scrollbar-gutter: stable;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-content {
                position: relative;
                gap: 0;
                min-height: calc(100dvh - 52px);
                height: auto;
                overflow: visible;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-about,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bots {
                margin: 0;
                padding: 0;
                border: 0;
                border-radius: 0;
                background: transparent;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bots {
                margin-bottom: 0;
                min-height: calc(100dvh - 52px);
                scroll-margin-top: 52px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bots.is-short-list {
                min-height: calc(100dvh + 120px);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bots.is-short-list .creator-profile-bots-footer {
                min-height: calc(100dvh - 220px);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-section-head,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bots-head {
                margin: 0;
                padding: 14px 18px 10px;
                border-bottom-color: rgba(255, 255, 255, 0.12);
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-about-head {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-about-head-main {
                min-width: 0;
                flex: 1 1 auto;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-about-head .creator-profile-about-expand {
                flex: 0 0 auto;
                margin: 0 0 0 auto;
                min-height: 30px;
                padding: 0 11px;
                border-radius: 8px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-about {
                min-width: 0;
                max-width: 100%;
                overflow: hidden;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-about-html {
                max-width: 100%;
                min-width: 0;
                overflow-x: auto;
                overflow-y: visible;
                overscroll-behavior-inline: contain;
                padding: 0 18px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-about:not(.is-expanded) .creator-profile-about-html {
                overflow-x: auto;
                overflow-y: hidden;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-about-shadow-host {
                display: block;
                width: 100%;
                max-width: 100%;
                min-width: 0;
                overflow-x: hidden;
                box-sizing: border-box;
                contain: inline-size;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-material-tabs,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bots-grid,
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bots-footer {
                padding-inline: 18px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bots-footer {
                padding-bottom: 18px;
            }
            @container creator-profile-toolbar (max-width: 760px) {
                #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-pills {
                    display: none;
                }
                #creatorProfileModal.creator-profile-page-mode .creator-profile-page-section-dropdown {
                    display: inline-flex;
                }
            }
            @container creator-profile-toolbar (max-width: 680px) {
                #creatorProfileModal.creator-profile-page-mode .creator-profile-page-toolbar-name {
                    max-width: 150px;
                }
                #creatorProfileModal.creator-profile-page-mode .creator-profile-action-label-full {
                    display: none;
                }
                #creatorProfileModal.creator-profile-page-mode .creator-profile-action-label-short {
                    display: inline;
                }
                #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-action {
                    min-width: 78px;
                    padding-inline: 10px;
                }
                #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-message {
                    min-width: 86px;
                    padding-inline: 10px;
                }
            }
            @container creator-profile-toolbar (max-width: 560px) {
                #creatorProfileModal.creator-profile-page-mode .creator-profile-page-toolbar-name {
                    max-width: 112px;
                }
                #creatorProfileModal.creator-profile-page-mode .creator-profile-page-discussion-actions {
                    gap: 4px;
                }
                #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-action {
                    width: 32px;
                    min-width: 32px;
                    padding: 0;
                    gap: 0;
                }
                #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-action span {
                    display: none;
                }
                #creatorProfileModal.creator-profile-page-mode .creator-profile-page-section-dropdown .creator-profile-page-section-btn {
                    min-width: 82px;
                    max-width: 98px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-toolbar-avatar {
            width: 25px;
            height: 25px;
            flex-basis: 25px;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-toolbar-name {
            display: inline-flex;
            align-items: center;
            max-width: clamp(132px, 18vw, 260px);
            height: 33px;
            font-size: 1rem;
            font-weight: 820;
            line-height: 33px;
            letter-spacing: 0;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tabs {
            grid-template-columns: minmax(120px, 1fr) auto minmax(0, 1fr);
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tabs.has-profile-tag-chips {
            grid-template-rows: auto auto;
            row-gap: 2px;
            min-height: 63px;
            padding-bottom: 3px;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-toolbar-identity {
            grid-column: 1;
        }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-actions {
                grid-column: 3;
                justify-self: end;
                flex-wrap: nowrap;
                white-space: nowrap;
                overflow: visible;
            }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-discussion-actions {
            grid-column: 2;
            justify-self: center;
            white-space: nowrap;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tag-chips {
            grid-column: 3;
            grid-row: 2;
            justify-self: end;
            align-self: start;
            max-width: min(58vw, 680px);
            margin-top: -1px;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-pills {
            display: inline-flex;
            flex: 0 0 auto;
            flex-wrap: nowrap;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-page-section-dropdown {
            display: none;
        }
        @container creator-profile-toolbar (max-width: 760px) {
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-pills {
                display: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-section-dropdown {
                display: inline-flex;
            }
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-top-sort-dropdown .admin-dropdown-menu {
            top: calc(100% + 4px);
            right: 0;
            left: auto;
            display: none;
            flex-direction: column;
            align-items: stretch;
            gap: 3px;
            min-width: 142px;
            max-height: none;
            overflow: visible;
            white-space: normal;
            z-index: 80;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-top-sort-dropdown.open .admin-dropdown-menu {
            display: flex;
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-top-sort-dropdown .admin-dropdown-menu button {
            display: block;
            width: 100%;
            min-height: 30px;
            white-space: nowrap;
            text-align: left;
        }
        @container creator-profile-toolbar (max-width: 680px) {
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-toolbar-name {
                max-width: 150px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-action-label-full {
                display: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-action-label-short {
                display: inline;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-action {
                min-width: 78px;
                padding-inline: 10px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-message {
                min-width: 86px;
                padding-inline: 10px;
            }
        }
        @container creator-profile-toolbar (max-width: 560px) {
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-toolbar-name {
                max-width: 112px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-discussion-actions {
                gap: 4px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-action {
                width: 32px;
                min-width: 32px;
                padding: 0;
                gap: 0;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-action span {
                display: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-section-dropdown .creator-profile-page-section-btn {
                min-width: 82px;
                max-width: 98px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
        @media (min-width: 769px) {
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-jump-slot {
                display: none;
            }
        }
        @media (max-width: 768px) {
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-toolbar-avatar {
                width: 34px;
                height: 34px;
                flex-basis: 34px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-toolbar-name {
                max-width: 34vw;
                font-size: clamp(1.05rem, 4.6vw, 1.42rem);
                line-height: 0.98;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tabs {
                grid-template-columns: minmax(0, auto) minmax(0, 1fr);
                grid-template-rows: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tabs.has-profile-tag-chips {
                min-height: var(--creator-profile-mobile-rail-height);
                row-gap: 6px;
                padding-bottom: 4px;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-actions {
                justify-self: end;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-pills {
                display: grid;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-section-dropdown {
                display: none;
            }
        }
        @container creator-profile-toolbar (max-width: 340px) {
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-pills {
                display: none;
            }
            #creatorProfileModal.creator-profile-page-mode .creator-profile-page-section-dropdown {
                display: inline-flex;
            }
        }
        #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode {
            position: static !important;
            inset: auto !important;
            width: 100%;
            min-height: 0;
            display: flex !important;
            align-items: stretch;
            justify-content: stretch;
            padding: 0;
            margin: 0;
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
            z-index: auto;
            overflow: visible;
            background: transparent !important;
            touch-action: auto;
        }
        #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode > .modal-content.creator-profile-modal {
            width: 100%;
            max-width: none;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            opacity: 1 !important;
            transform: none !important;
        }
        #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode > .modal-content.creator-profile-modal > .modal-body {
            height: auto;
            min-height: 0;
            overflow: visible;
        }
        @media (min-width: 769px) {
            body.creators-view-active #viewCreators .creator-profile-page-host.is-active {
                flex: 1 1 auto;
                flex-basis: 0;
                height: 100%;
                display: flex;
                flex-direction: column;
                min-height: 0;
                overflow-y: hidden;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode {
                flex: 1 1 auto;
                flex-basis: 0;
                height: 100%;
                min-height: 0;
                display: flex !important;
                flex-direction: column;
                overflow: hidden;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode > .modal-content.creator-profile-modal {
                flex: 1 1 auto;
                flex-basis: 0;
                height: 100% !important;
                min-height: 0 !important;
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode > .modal-content.creator-profile-modal > .modal-body {
                flex: 1 1 auto;
                flex-basis: 0;
                height: 100%;
                min-height: 0;
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-stage {
                flex: 1 1 0;
                height: 100%;
                max-height: 100%;
                min-height: 0;
                overflow-y: auto;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
                scrollbar-gutter: stable;
            }
        }
        @media (max-width: 768px) {
            #viewCreators .creator-profile-page-host.is-active {
                display: block;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode {
                position: fixed !important;
                inset: 0 !important;
                z-index: 15000;
                display: flex !important;
                align-items: stretch;
                justify-content: stretch;
                width: 100vw;
                height: 100dvh;
                min-height: 100dvh;
                padding: 0;
                margin: 0;
                overflow: hidden;
                background: #000 !important;
                touch-action: auto;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode > .modal-content.creator-profile-modal {
                width: 100vw;
                max-width: 100vw;
                height: 100dvh !important;
                min-height: 100dvh !important;
                max-height: 100dvh !important;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                border: 0;
                border-radius: 0;
                background: #05060a;
                box-shadow: none;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode > .modal-content.creator-profile-modal > .modal-header {
                display: flex !important;
                flex: 0 0 auto;
                min-height: calc(48px + env(safe-area-inset-top));
                padding: calc(5px + env(safe-area-inset-top)) 10px 5px 12px;
                align-items: center;
                background: #05060a;
                border-bottom: 1px solid rgba(255, 255, 255, 0.10);
                position: relative;
                z-index: 4;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode > .modal-content.creator-profile-modal > .modal-header h2 {
                font-size: 0.94rem;
                line-height: 1.15;
                font-weight: 820;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-modal-header-actions .entity-discussion-btn {
                display: none !important;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-header-refresh {
                width: 32px;
                min-width: 32px;
                height: 32px;
                min-height: 32px;
                padding: 0;
                border-radius: 999px;
                font-size: 0.78rem;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-header-refresh span {
                display: none;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .modal-close {
                width: 42px;
                height: 42px;
                flex-basis: 42px;
                font-size: 2.35rem;
                align-self: center;
                transform: translateX(7px);
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode > .modal-content.creator-profile-modal > .modal-body {
                flex: 1 1 auto;
                min-height: 0;
                height: auto;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                padding: 0;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tabs {
                position: relative !important;
                top: auto !important;
                left: auto;
                right: auto;
                z-index: 3;
                flex: 0 0 46px;
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                align-items: center;
                justify-content: stretch;
                gap: 6px;
                width: 100%;
                min-height: 46px;
                height: 46px;
                margin: 0;
                padding: 5px 8px 5px 72px;
                overflow: visible;
                border: 0;
                border-bottom: 1px solid rgba(255, 255, 255, 0.10);
                background: #000;
                box-sizing: border-box;
                pointer-events: auto;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tabs.has-profile-tag-chips {
                flex-basis: 72px;
                grid-template-rows: 35px 24px;
                row-gap: 3px;
                min-height: 72px;
                height: 72px;
                padding-top: 5px;
                padding-bottom: 5px;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-toolbar-identity,
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-pills,
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-mobile-discussion-actions,
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-section-sort-dropdown {
                display: none !important;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-actions {
                grid-column: 1;
                grid-row: 1;
                justify-self: end;
                flex: 0 1 auto;
                display: inline-flex;
                align-items: center;
                justify-content: flex-end;
                gap: 5px;
                width: auto;
                min-width: 0;
                pointer-events: auto;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tag-chips {
                grid-column: 1;
                grid-row: 2;
                align-self: end;
                justify-self: end;
                display: none !important;
                align-items: center;
                justify-content: flex-start;
                flex-wrap: nowrap;
                gap: 4px;
                width: max-content;
                max-width: 100%;
                min-width: 0;
                margin: 0;
                padding: 0;
                overflow-x: auto;
                overflow-y: hidden;
                scrollbar-width: none;
                pointer-events: auto;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tag-chips::-webkit-scrollbar {
                display: none;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tabs.has-profile-tag-chips .creator-profile-page-tag-chips.has-filters {
                display: flex !important;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tag-chips .tag-chip,
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tag-chips .tag-chip-clear {
                flex: 0 0 auto;
                height: 22px;
                min-height: 22px;
                max-width: min(48vw, 160px);
                padding-block: 0;
                font-size: 0.58rem;
                line-height: 1;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tag-chips .tag-chip {
                padding-inline: 7px;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tag-chips .tag-chip-clear {
                padding-inline: 8px;
                order: -1;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-discussion-actions {
                display: none !important;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-section-dropdown {
                order: 1;
                display: inline-flex !important;
                position: relative;
                flex: 0 1 auto;
                width: auto;
                min-width: 0;
                max-width: min(52vw, 180px);
                pointer-events: auto;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-section-dropdown .creator-profile-page-section-btn {
                min-height: var(--characters-toolbar-pill-min-height, 30px);
                height: 30px;
                display: inline-flex;
                align-items: center;
                width: auto;
                min-width: 0;
                max-width: 100%;
                padding: var(--characters-toolbar-pill-padding-y, 0.18rem) 1.18rem var(--characters-toolbar-pill-padding-y, 0.18rem) 0.52rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                border: 1px solid color-mix(in srgb, var(--brand-hot-pink) 82%, var(--border-subtle) 18%);
                border-radius: 999px;
                background: var(--brand-hot-pink);
                color: #fff;
                box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 6px 18px color-mix(in srgb, var(--brand-hot-pink) 24%, transparent);
                font-size: 0.6875rem;
                font-weight: 750;
                line-height: 1;
                letter-spacing: 0.02em;
                text-align: left;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-section-dropdown .creator-profile-page-section-btn::after {
                right: 8px;
                border-left-width: 3px;
                border-right-width: 3px;
                border-top-width: 5px;
                border-top-color: #fff;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-section-dropdown .admin-dropdown-menu {
                top: calc(100% + 6px);
                left: auto;
                right: 0;
                min-width: 136px;
                display: none;
                flex-direction: column;
                align-items: stretch;
                gap: 3px;
                max-height: none;
                overflow: visible;
                white-space: normal;
                z-index: 80;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-section-dropdown.open .admin-dropdown-menu {
                display: flex;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-section-dropdown .admin-dropdown-menu button {
                display: block;
                width: 100%;
                min-height: 30px;
                white-space: nowrap;
                text-align: left;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-top-sort-dropdown {
                display: inline-flex !important;
                position: relative;
                order: 2 !important;
                flex: 0 0 42px;
                width: 42px;
                min-width: 42px;
                pointer-events: auto;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown .characters-sort-label,
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown .characters-sort-btn-text {
                display: none !important;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown .characters-sort-btn.admin-dropdown-btn {
                position: relative;
                width: 42px;
                min-width: 42px;
                height: 38px;
                min-height: 38px;
                padding: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 0;
                border: 0;
                border-radius: 0;
                background: transparent;
                color: var(--brand-hot-pink);
                box-shadow: none;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown .characters-sort-btn.admin-dropdown-btn:hover,
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown .characters-sort-btn.admin-dropdown-btn:focus,
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown .characters-sort-btn.admin-dropdown-btn:focus-visible,
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown .characters-sort-btn.admin-dropdown-btn:active {
                border: 0;
                background: transparent;
                box-shadow: none;
                color: var(--brand-hot-pink);
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-filter {
                position: absolute;
                left: 8px;
                top: 50%;
                transform: translateY(-50%);
                display: inline-flex !important;
                align-items: center;
                justify-content: center;
                gap: 0;
                width: auto;
                min-width: 58px;
                height: 30px;
                min-height: var(--characters-toolbar-pill-min-height, 30px);
                padding: var(--characters-toolbar-pill-padding-y, 0.18rem) var(--characters-toolbar-pill-padding-x, 0.55rem);
                border: 1px solid var(--border-subtle);
                border-radius: var(--radius-full);
                background: var(--bg-subtle);
                color: var(--brand-hot-pink);
                box-shadow: none;
                font-size: 0.6875rem;
                font-weight: 800;
                line-height: 1;
                letter-spacing: 0.02em;
                text-transform: uppercase;
                pointer-events: auto;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tabs.has-profile-tag-chips .creator-profile-page-tab-filter {
                top: 22px;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-filter i {
                display: none;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-filter span {
                display: inline !important;
                white-space: nowrap;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-filter:hover,
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-tab-filter.has-active-filters {
                color: #fbcfe8;
                border-color: rgba(244, 114, 182, 0.48);
                background: rgba(244, 114, 182, 0.13);
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown .characters-sort-btn.admin-dropdown-btn::after {
                display: none;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown .characters-sort-btn-icon {
                display: block;
                width: 28px;
                height: 28px;
                stroke: currentColor;
                stroke-width: 2.2;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown .characters-sort-btn-mobile-badge {
                display: block;
                position: absolute;
                left: 50%;
                top: -3px;
                transform: translateX(-50%);
                max-width: 46px;
                padding: 1px 4px;
                border: 1px solid rgba(244, 114, 182, 0.38);
                border-radius: 999px;
                background: rgba(28, 13, 20, 0.94);
                color: #fff;
                font-size: 0.48rem;
                font-weight: 850;
                line-height: 1;
                letter-spacing: 0;
                white-space: nowrap;
                text-align: center;
                pointer-events: none;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-sort-dropdown .admin-dropdown-menu {
                top: calc(100% + 6px);
                left: auto;
                right: 0;
                min-width: 178px;
                z-index: 80;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-top-action {
                display: inline-flex !important;
                align-items: center;
                justify-content: center;
                gap: 6px;
                flex: 1 1 0;
                width: auto;
                min-width: 0;
                min-height: 36px;
                height: 36px;
                padding: 0 8px;
                border-radius: 8px;
                box-shadow: none;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                font-size: 0.68rem;
                font-weight: 850;
                line-height: 1;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-action-label-full {
                display: none;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-action-label-short {
                display: inline;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-social-actions {
                display: grid !important;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 6px;
                width: 100%;
                min-width: 0;
                margin-top: 4px;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-social-action {
                min-width: 0;
                width: 100%;
                min-height: 34px;
                height: 34px;
                padding: 0 8px;
                border-radius: 8px;
                font-size: 0.68rem;
                font-weight: 850;
                line-height: 1;
                box-shadow: none;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-refresh {
                display: none !important;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-social-kudos {
                border-color: rgba(244, 114, 182, 0.55);
                background: rgba(244, 114, 182, 0.14);
                color: #ffe4f2;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-social-message {
                border-color: rgba(45, 212, 191, 0.44);
                background: rgba(45, 212, 191, 0.12);
                color: #ccfbf1;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-action-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 6px;
                width: 100%;
                min-width: 0;
                margin-top: 4px;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-jump-slot {
                flex: 1 1 auto;
                min-width: 0;
                margin: 0;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-cta-stack {
                display: block;
                width: 100%;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-jump {
                width: 100%;
                min-width: 0;
                min-height: 32px;
                padding: 0 8px;
                white-space: nowrap;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-actions {
                flex: 0 0 auto;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: 6px;
                min-width: 0;
                margin: 0 0 0 auto;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-actions .creator-profile-page-mobile-discussion-actions {
                display: none !important;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-actions .creator-profile-page-action {
                min-height: 32px;
                padding: 0 9px;
                white-space: nowrap;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-about,
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-bots {
                margin: 0;
                padding: 0;
                border: 0;
                border-radius: 0;
                background: transparent;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-about {
                position: relative;
                padding-bottom: 40px;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-section-head,
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-bots-head {
                padding: 12px 10px 8px;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-about-head {
                position: static;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-about-head .creator-profile-about-jump {
                display: none !important;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-about-head .creator-profile-about-expand {
                position: absolute;
                left: 50%;
                bottom: 0;
                transform: translateX(-50%);
                display: flex;
                width: max-content;
                min-height: 30px;
                margin: 0;
                padding: 0 13px;
                border-radius: 999px;
                border: 1px solid #f472b6;
                background: #be185d;
                color: #ffffff;
                box-shadow: 0 8px 22px rgba(190, 24, 93, 0.34);
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-about:not(.is-expanded) .creator-profile-about-html {
                max-height: 220px;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-about-html {
                padding: 0 10px;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-material-tabs,
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-bots-grid,
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-bots-footer {
                padding-inline: 10px;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-bots-head {
                flex-wrap: nowrap;
                align-items: center;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-bots-head h3 {
                flex: 1 1 auto;
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-bots-head-actions {
                flex: 0 0 auto;
                width: auto;
                margin-left: auto;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                flex-wrap: nowrap;
                gap: 5px;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-bots-meta {
                display: none !important;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-list-tools {
                display: inline-flex !important;
                align-items: center;
                gap: 5px;
                min-width: 0;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-page-list-tools .creator-profile-section-sort-dropdown {
                display: none !important;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-availability-btn.admin-dropdown-btn {
                min-height: 30px;
                padding: 0 8px;
                font-size: 0.64rem;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-basket-add,
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-queue-unextracted {
                min-height: 30px;
                padding: 0 8px;
                border-radius: 999px;
                font-size: 0.66rem;
                letter-spacing: 0.01em;
                text-transform: none;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-basket-add-label-full {
                display: none;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-basket-add-label-short {
                display: inline;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-stage {
                flex: 1 1 auto;
                min-height: 0;
                margin-top: 0;
                overflow-y: auto;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
                touch-action: pan-y;
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-content {
                min-height: 100%;
                height: auto;
                padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
            }
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-bots {
                min-height: calc(100dvh - 96px - env(safe-area-inset-top));
                scroll-margin-top: 0;
            }
            body.creator-profile-page-active #creatorsTagDrawer.tag-drawer {
                height: min(92dvh, calc(100dvh - 44px));
                max-height: min(92dvh, calc(100dvh - 44px));
                z-index: 15081;
            }
            body.creator-profile-page-active #creatorsTagDrawerScrim.tag-drawer-scrim {
                z-index: 15080;
            }
        }
        #creatorProfileModal.creator-profile-page-mode .creator-profile-bots.is-filtered-list,
        #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-bots.is-filtered-list {
            background:
                linear-gradient(180deg, rgba(8, 10, 15, 0.66), rgba(8, 10, 15, 0.76)),
                var(--creator-profile-stage-bg-image, none),
                rgba(8, 10, 15, 0.72);
            background-size: cover, cover, auto;
            background-position: center, center, center;
            background-repeat: no-repeat, no-repeat, repeat;
        }
        @media (max-width: 768px) {
            #creatorProfileModal.creator-profile-page-mode .creator-profile-bots,
            #viewCreators .creator-profile-page-host > #creatorProfileModal.creator-profile-page-mode .creator-profile-bots {
                background:
                    linear-gradient(180deg, rgba(8, 10, 15, 0.66), rgba(8, 10, 15, 0.76)),
                    var(--creator-profile-stage-bg-image, none),
                    rgba(8, 10, 15, 0.72);
                background-size: cover, cover, auto;
                background-position: center, center, center;
                background-repeat: no-repeat, no-repeat, repeat;
            }
        }

        /* Narrower desktop-class screens: reserve side gutters so nav buttons can stay outside the modal. */
        @media (min-width: 769px) and (max-width: 1180px), (min-width: 769px) and (hover: none) and (pointer: coarse) {
            #characterModal.modal-overlay {
                padding-inline: max(16px, calc(52px + 18px));
            }

            #characterModal .modal-content.character-modal .char-nav {
                width: 52px;
                height: 72px;
                font-size: 1.7rem;
                border-radius: 16px;
            }

            #characterModal .modal-content.character-modal .char-nav-prev {
                left: calc(-52px - 10px);
            }

            #characterModal .modal-content.character-modal .char-nav-next {
                right: calc(-52px - 10px);
            }
        }

        /* iOS Safari auto-zooms focused form controls below 16px. Keep mobile text controls at 16px+ instead of disabling pinch zoom. */
        @supports (-webkit-touch-callout: none) {
            @media (max-width: 768px), (hover: none) and (pointer: coarse) {
                input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
                textarea,
                select,
                [contenteditable="true"] {
                    font-size: 16px !important;
                }
            }
        }

        /* ST iframe embed: keep compositor-heavy surfaces flat in Chrome while embedded. */
        html.datacat-st-iframe-embed *,
        html.datacat-st-iframe-embed *::before,
        html.datacat-st-iframe-embed *::after {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            filter: none !important;
            will-change: auto !important;
        }

        html.datacat-st-iframe-embed *:not(#characterModal):not(#characterModal *):not(#entityDiscussionRoot):not(#entityDiscussionRoot *),
        html.datacat-st-iframe-embed *:not(#characterModal):not(#characterModal *):not(#entityDiscussionRoot):not(#entityDiscussionRoot *)::before,
        html.datacat-st-iframe-embed *:not(#characterModal):not(#characterModal *):not(#entityDiscussionRoot):not(#entityDiscussionRoot *)::after {
            transition: none !important;
            animation: none !important;
        }

        html.datacat-st-iframe-embed body.modal-open {
            overflow: hidden !important;
            position: static !important;
            width: auto !important;
            height: auto !important;
        }

        html.datacat-st-iframe-embed :is(
            .modal-overlay:not(#characterModal),
            .alert-modal-overlay,
            .moderation-report-overlay,
            .view-transition-overlay,
            .user-switcher-overlay,
            .tag-drawer-scrim,
            .stream-overlay,
            .datacat-st-import-overlay,
            .mobile-swipe-debug-overlay
        ) {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            filter: none !important;
            transition: none !important;
        }

        html.datacat-st-iframe-embed :is(
            #mineFoldersModal,
            #creatorProfileModal
        ) {
            background: #05080e !important;
            transition: none !important;
        }

        html.datacat-st-iframe-embed :is(
            #mineFoldersModal .mine-folders-modal,
            #creatorProfileModal .modal-content,
            .alert-modal,
            .moderation-report-sheet,
            .datacat-st-import-card
        ) {
            transition: none !important;
        }

        html.datacat-st-iframe-embed :is(
            #mineFoldersModal.active .mine-folders-modal,
            #creatorProfileModal.active .modal-content,
            .alert-modal-overlay.active .alert-modal
        ) {
            transform: none !important;
        }

        @media (max-width: 768px) {
            html.datacat-st-iframe-embed .char-slide-item {
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            }

            html.datacat-st-iframe-embed .char-slide-item.swiping {
                transition: none !important;
            }

            html.datacat-st-iframe-embed .char-slideup-container {
                transition: transform 0.3s ease-out !important;
            }

            html.datacat-st-iframe-embed .char-slideup-container.is-restoring {
                transition: none !important;
            }
        }