/* ========================================
           DESIGN SYSTEM - CSS VARIABLES
           ======================================== */
        :root {
            /* 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-desktop-bottom-offset: 44px;
        }

        /* ========================================
           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: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            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);
        }
        .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-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: 10001;
            transform: translateX(120%);
            transition: transform 300ms ease;
            max-width: 360px;
        }
        .alert-toast.show {
            transform: translateX(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-message {
            font-size: 0.875rem;
            color: var(--text-primary);
            line-height: 1.4;
        }
        .alert-toast-close {
            margin-left: var(--space-2);
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 0;
            font-size: 1.25rem;
            line-height: 1;
        }
        .alert-toast-close:hover {
            color: var(--text-primary);
        }

        @media (max-width: 640px) {
            #toastContainer {
                left: 12px !important;
                right: 12px !important;
                bottom: 16px !important;
                align-items: stretch !important;
            }
            .alert-toast {
                max-width: none;
                width: 100%;
                border-radius: 14px;
                padding: 14px 16px;
            }
            .alert-toast-message {
                font-size: 0.9rem;
            }
        }

        /* ========================================
           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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg-base);
            color: var(--text-primary);
            min-height: 100vh;
            padding: 4.5rem 1rem 5.5rem 1rem;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            position: relative;
        }

        /* 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 */
            }
            
        }
        
        /* 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;
            }
        }
        
        /* 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.8);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--border-subtle);
            padding: 0;
            display: flex;
            align-items: center;
            z-index: 900;
        }

        .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);
        }

        .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;
        }

        /* 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: absolute;
            left: 50%;
            top: 100%;
            transform: translateX(-50%);
            margin-top: 1.5px;
            font-size: 7px;
            line-height: 1;
            letter-spacing: 0.02em;
            color: rgba(255, 255, 255, 0.511);
            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 */
        .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: all var(--transition-fast);
            white-space: nowrap;
        }

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

        .nav-tab.active {
            color: var(--text-primary);
            background: var(--bg-elevated);
            box-shadow: var(--shadow-sm);
        }
        .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;
        }

        .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.9);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            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.625rem;
            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-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);
            min-width: 280px;
            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-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.35);
            opacity: 0;
            visibility: hidden;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            transition: opacity 200ms ease, visibility 200ms ease, backdrop-filter 200ms ease;
            pointer-events: none;
        }
        .user-switcher-overlay.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        /* 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: 0.75rem;
            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: 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);
            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;
        }

        /* 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,
        .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: 640px) {
            body {
                padding: 4.5rem 2px 5rem 2px;
            }
            .top-bar,
            .top-bar-inner {
                padding: 0 6px;
            }
            .top-bar-left {
                gap: var(--space-3);
            }
            .app-title {
                font-size: 1rem;
            }
            .app-title-text {
                display: none;
            }
            .app-title-icon {
                display: block;
                width: 24px;
                height: 24px;
            }
            .nav-tabs {
                padding: 2px;
            }
            .nav-tab {
                padding: 0.4rem 0.5rem;
                font-size: 0.875rem;
            }
            .nav-tab.nav-tab-icon-only {
                padding: 0.3rem 0.375rem;
            }
            .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: 0.6875rem;
            }
            .user-switcher-auth-status {
                font-size: 0.6875rem;
            }
            .user-switcher-arrow {
                margin-left: 2px;
            }
            .user-switcher-overlay {
                background: rgba(6, 10, 20, 0.35);
                backdrop-filter: blur(5px);
                -webkit-backdrop-filter: blur(5px);
            }
            .container {
                padding: var(--space-1) 2px;
                margin: 0;
                border-radius: var(--radius-lg);
            }
            .extract-panel {
                padding: var(--space-2) 2px;
                margin-left: 0;
                margin-right: 0;
                border-radius: var(--radius-sm);
            }
            .extract-via-section {
                margin-left: 0;
                margin-right: 0;
            }
	            .extract-input-row {
	                flex-direction: column;
	                gap: var(--space-3);
	            }
	            .extract-input-row input,
	            .extract-input-row button {
	                width: 100%;
	            }
	            .extract-input-row.extract-input-row--loading {
	                flex-direction: row;
	                align-items: center;
	                gap: var(--space-2);
	            }
	            .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;
	            }
	            /* 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;
            }
            .nav-tab {
                padding: 0.25rem 0.375rem;
                font-size: 0.6875rem;
            }
            .nav-tab.nav-tab-icon-only {
                padding: 0.2rem 0.3rem;
            }
            .nav-tab.nav-tab-icon-only i {
                font-size: 0.8125rem;
            }
            .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-creators {
            display: none;
        }
        .view-extract.active,
        .view-characters.active,
        .view-creators.active {
            display: block;
        }
        .view-extract {
            max-width: 800px;
            margin: 0 auto;
            width: 100%;
        }

        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;
        }
        .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: 101;
        }
        .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: 100;
            opacity: 0;
            visibility: hidden;
            transition: opacity 150ms ease, visibility 150ms ease;
            will-change: opacity, visibility;
        }
        .sessions-dropdown.open .sessions-dropdown-content {
            opacity: 1;
            visibility: visible;
        }

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

        /* 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 - use dropdown instead of modal; content spans full viewport width */
        @media (max-width: 640px) {
            .sessions-dropdown {
                width: auto;
                position: static; /* so content's containing block is extract-via-section */
            }
            .sessions-dropdown-content {
                position: absolute;
                top: calc(100% + 6px);
                left: 50%;
                transform: translateX(-50%);
                width: calc(100vw - 24px);
                max-width: calc(100vw - 24px);
                min-width: 0;
                max-height: 400px;
                box-sizing: border-box;
            }
            .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: transparent;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }
        }
        @media (min-width: 641px) {
            .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: 1000;
            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;
        }
        
        /* 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);
        }
        
        /* 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: var(--space-2) var(--space-2);
        }
        .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: var(--space-2);
        }
        .admin-table-sessions .col-session { width: 100px; min-width: 90px; max-width: 120px; }
        .admin-table-sessions .col-email { min-width: 100px; max-width: 160px; }
        .admin-table-sessions .col-status { width: 120px; min-width: 120px; }
        .admin-table-sessions .col-created { 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: 44px; min-width: 44px; 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-public {
            border-left: 3px solid var(--success);
        }
        .admin-session-row.row-private {
            border-left: 3px solid var(--text-muted);
        }
        
        /* Session ID */
        .session-id {
            font-family: var(--font-mono, monospace);
            font-size: 0.8rem;
            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-visibility-badge {
            display: inline-block;
            padding: 2px 6px;
            font-size: 0.65rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border-radius: var(--radius-full);
            margin-left: var(--space-2);
        }
        .session-visibility-badge.public {
            background: var(--success-muted);
            color: var(--success);
        }
        .session-visibility-badge.private {
            background: var(--bg-subtle);
            color: var(--text-muted);
        }
        
        /* Session Email */
        .session-email {
            display: block;
            font-weight: 500;
        }
        .session-username {
            display: block;
            font-size: 0.75rem;
            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: 32px;
            padding: 6px 10px;
            font-size: 0.85rem;
            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);
        }
        
        /* Row action: delete only */
        .admin-btn-delete {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            padding: 0;
            border: none;
            border-radius: var(--radius-sm);
            cursor: pointer;
            background: transparent;
            color: var(--text-muted);
            transition: all 0.15s ease;
        }
        .admin-btn-delete:hover {
            background: var(--error-muted);
            color: var(--error);
        }
        .btn-icon-small {
            width: 14px;
            height: 14px;
        }
        
        /* 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-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-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 {
            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; }
        .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;
            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 {
            margin-left: auto;
            font-size: 0.7rem;
            color: var(--text-muted);
        }
        .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, auto) 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: 340px;
        }
        .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 84px 46px 32px 32px 32px 32px;
            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-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-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 {
            max-width: 1100px;
            margin: 0 auto;
        }
        .creators-toolbar {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            position: sticky;
            top: var(--characters-toolbar-offset);
            z-index: 5;
            padding: 2px 0 8px;
            background: transparent;
        }
        .creators-summary {
            min-height: 20px;
            display: flex;
            justify-content: center;
            flex: 1 1 auto;
            min-width: 0;
        }
        .creators-summary-hero {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            text-align: center;
            line-height: 1.2;
            position: relative;
            padding-top: 10px;
        }
        .creators-summary-title-wrap {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .creators-summary-title {
            color: color-mix(in srgb, var(--text-primary) 78%, #ffffff 22%);
            font-weight: 820;
            font-size: clamp(1.45rem, 4.4vw, 2.3rem);
            letter-spacing: 0.03em;
            line-height: 1;
            text-transform: uppercase;
        }
        .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-controls {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        .view-creators button,
        .view-creators [role="button"],
        .view-creators [data-href] {
            -webkit-tap-highlight-color: transparent;
        }
        .creators-controls.creators-controls-mobile {
            display: none;
        }
        .creators-mobile-sort-row {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
        }
        .creators-mobile-sort-row .creators-mobile-dropdown.admin-dropdown {
            flex: 1 1 auto;
        }
        .creators-sort-dir-toggle {
            flex: 0 0 auto;
            width: auto;
            min-width: 0;
            min-height: 38px;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            color: var(--text-muted);
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0;
            padding: 0 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            line-height: 1;
        }
        .creators-sort-dir-toggle:hover {
            color: var(--text-primary);
        }
        .creators-sort-dir-toggle:active {
            color: color-mix(in srgb, var(--text-primary) 72%, var(--text-muted) 28%);
        }
        .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 .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 .admin-dropdown-btn::after {
            border-top-color: var(--text-muted);
            right: 11px;
        }
        .creators-mobile-dropdown .admin-dropdown-menu {
            width: 100%;
            min-width: 0;
            left: 0;
            right: auto;
            border-radius: 12px;
            padding: 5px;
            z-index: 40;
        }
        .creators-mobile-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);
        }
        .creators-table-wrap {
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            background: var(--bg-subtle);
            overflow: hidden;
            max-width: 800px;
            margin: 0 auto;
        }
        .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: 40%;
        }
        .creators-table thead th.col-num {
            width: 12%;
        }
        .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:not(:last-child) {
            border-bottom: 1px solid var(--border-subtle);
        }
        .creators-table-row-link {
            cursor: pointer;
        }
        .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-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-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;
        }
        .creators-load-more-wrap {
            display: flex;
            justify-content: center;
            padding: 10px 0 12px;
            border-top: 1px solid var(--border-subtle);
        }
        .creators-load-more-btn {
            min-width: 120px;
        }
        .modal-content.creator-profile-modal {
            max-width: 860px;
            max-height: min(84vh, 100dvh);
            background: transparent;
            display: flex;
            flex-direction: column;
        }
        .modal-content.creator-profile-modal .modal-header {
            padding: 10px 12px;
            min-height: 46px;
            gap: 8px;
        }
        .modal-content.creator-profile-modal .modal-header h2 {
            font-size: 1.05rem;
            line-height: 1.1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .modal-content.creator-profile-modal .modal-close {
            font-size: 1.35rem;
            line-height: 1;
            padding: 2px 6px;
        }
        .creator-profile-modal-title-wrap {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            min-width: 0;
            flex: 1 1 auto;
        }
        .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 {
            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;
        }
        .creator-profile-stage {
            position: relative;
            /* Use Janitor's default UI font; creator templates can override inside the ShadowRoot. */
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            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;
        }
        .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;
        }
        .creator-profile-bg-gradient {
            position: absolute;
            inset: -1px;
            border-radius: var(--radius-lg);
            filter: saturate(1.06) contrast(1.06);
            opacity: 0.92;
            z-index: 2;
        }
        .creator-profile-bg-effect img {
            width: 140%;
            height: 140%;
            object-fit: cover;
            transform: translate3d(-8%, -10%, 0) scale(1.02);
            animation: creatorBgDrift 24s ease-in-out infinite alternate;
        }

        /* 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;
        }
        @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: blur(6px);
        }
        .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-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: auto;
            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-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-profile-empty {
            color: var(--text-muted);
            font-style: italic;
        }

        .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-meta {
            font-size: 0.74rem;
            color: rgba(255, 255, 255, 0.72);
            white-space: nowrap;
        }
        .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;
        }
        .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: 1px solid rgba(255, 255, 255, 0.85);
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
        }
        .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-bots-footer {
            display: flex;
            justify-content: center;
            padding-top: 10px;
        }
        .creator-profile-bots-loadmore {
            font-size: 0.78rem;
            padding: 0.45rem 0.9rem;
        }
        @media (max-width: 900px) {
            .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-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: column;
                gap: 4px;
                padding: 0 0 6px;
            }
            .creators-summary {
                width: 100%;
                min-height: 0;
            }
            .creators-summary-hero {
                padding-top: 4px;
                gap: 2px;
            }
            .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: 100%;
                justify-content: flex-start;
            }
            .creators-controls.creators-controls-mobile {
                display: flex;
                width: 100%;
                max-width: 520px;
                justify-content: center;
                gap: 8px;
                margin: 2px auto 0;
            }
            .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 (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 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-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;
            margin: 0 auto;
            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;
        }
        @media (max-width: 640px) {
            .about-content { font-size: 0.9rem; }
            .about-content h1 { font-size: 1.2rem; }
        }

        /* 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: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(4px);
            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: rgba(15, 15, 16, 0.95);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            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: rgba(90, 90, 90, 0.5);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            z-index: 1000;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: var(--space-4);
        }
        .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;
        }

        .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-row1 .stream-cancel-btn {
            flex-shrink: 0;
            margin-left: auto;
        }
	        .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 {
	            font-size: 0.625rem;
	            color: var(--text-muted);
	            font-variant-numeric: tabular-nums;
	            white-space: nowrap;
	        }
	        .stream-input-status.pending { color: var(--accent-primary); }
	        .stream-input-status.error { color: #f87171; }
	        .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;
        }


        .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: auto;
        }
        .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);
        }
        .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-announcements .admin-announcements-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: var(--space-3);
        }
        .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);
        }
        .extract-input-row input {
            flex: 1;
            padding: 0.75rem var(--space-4);
            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-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-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;
        }

        /* 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;
        }

        /* ========================================
           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-creators {
            margin-top: calc(-1 * var(--space-2));
        }
        .characters-toolbar {
            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;
            background: var(--bg-subtle);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-full);
            padding: 2px;
            gap: 2px;
        }
        .characters-toggle-btn {
            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;
        }
        .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.active .characters-toggle-icon-letter {
            border-color: transparent;
            background: rgba(255, 255, 255, 0.18);
        }
        .characters-toggle-btn:hover {
            color: var(--text-primary);
        }
        .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 {
            flex: 1;
            position: relative;
        }
        .characters-search input {
            width: 100%;
            padding: 0.625rem var(--space-4);
            padding-left: 2.5rem;
            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::before {
            content: '🔍';
            position: absolute;
            left: var(--space-3);
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.875rem;
            opacity: 0.5;
        }
        @media (max-width: 768px) {
            .characters-toolbar {
                position: fixed !important;
                top: var(--characters-toolbar-offset);
                left: 0;
                right: 0;
                z-index: 50;
                padding: 2px calc(1rem + 14px) 6px;
                box-sizing: border-box;
            }
            .view-characters {
                padding-top: var(--characters-mobile-toolbar-height);
            }
            .characters-toolbar-row {
                flex-wrap: nowrap;
            }
            .creators-toolbar {
                position: static;
                top: auto;
                left: auto;
                right: auto;
                z-index: auto;
                padding: 2px calc(1rem + 14px) 6px;
                box-sizing: border-box;
            }
            .view-creators {
                padding-top: 0;
            }
            .creators-page {
                max-width: 100%;
            }
        }
        @media (max-width: 640px) {
            .characters-toolbar {
                padding-left: 16px;
                padding-right: 16px;
            }
            .creators-toolbar {
                padding-left: 16px;
                padding-right: 16px;
            }
        }
        .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;
        }
        .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-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;
        }
        .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);
            -webkit-tap-highlight-color: transparent;
        }
        .character-avatar {
            width: 100%;
            aspect-ratio: auto;
            height: auto;
            min-height: 200px;
            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: 0.625rem;
            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 {
            position: absolute;
            top: auto;
            left: 50%;
            transform: translateX(-50%);
            bottom: 3px;
            right: auto;
            background: rgba(0, 0, 0, 0.32);
            color: rgba(255, 255, 255, 0.88);
            font-size: 0.5625rem;
            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: blur(6px);
            text-align: center;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }
        .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 {
            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;
        }
        /* 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 {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 1.5rem;
            cursor: pointer;
            padding: var(--space-1);
            border-radius: var(--radius-sm);
            transition: all var(--transition-fast);
        }
        .modal-close:hover {
            background: var(--bg-accent);
            color: var(--text-primary);
        }
        .modal-body {
            flex: 1;
            overflow-y: auto;
            padding: var(--space-4);
            max-height: calc(90vh - 80px);
        }

        /* ========================================
           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%;
        }
        /* 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;
            }
            
            .char-slide-item {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                will-change: transform;
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            
            .char-slide-item.active {
                z-index: 1;
            }
            
            .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 */
            }

            /* Shimmer placeholder for swipes while data loads */
            .char-slide-placeholder {
                width: 100%;
                height: 100%;
                background: #2a2a2d;
                display: block;
            }
            
            /* 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: blur(10px);
                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);
            }
        }
        /* Header row with title, name/author, close button */
        .char-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            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;
            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 */
        }
        /* 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: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.08),
                transparent
            );
            animation: shimmer 1.5s infinite;
        }
        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 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-modal-close {
            width: 40px;
            height: 40px;
            background: var(--bg-elevated);
            border: none;
            border-radius: 50%;
            color: var(--text-primary);
            font-size: 1.5rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all var(--transition-fast);
            flex-shrink: 0;
            margin-left: var(--space-3);
            box-shadow: var(--shadow-sm);
        }
        .char-modal-close:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
            transform: scale(1.05);
            box-shadow: var(--shadow-md);
        }
        .char-hero-badges {
            position: absolute;
            top: var(--space-3);
            left: var(--space-3);
            display: flex;
            gap: var(--space-2);
            z-index: 5;
        }
        .char-hero-save-wrap {
            position: absolute;
            top: var(--space-3);
            right: var(--space-3);
            z-index: 6;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
        .char-action-btn.secondary.char-hero-save-btn {
            min-width: 0;
            padding: 0.625rem var(--space-3);
            border-radius: var(--radius-md);
            border: none;
            background: var(--accent-primary);
            color: white;
            font-size: 0.8125rem;
            font-weight: 500;
            letter-spacing: normal;
            text-transform: none;
            line-height: normal;
            box-shadow: var(--shadow-sm);
            backdrop-filter: blur(8px);
            -webkit-tap-highlight-color: transparent;
        }
        .char-action-btn.secondary.char-hero-save-btn:hover {
            background: var(--accent-hover);
            border-color: transparent;
            color: white;
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }
        .char-action-btn.secondary.char-hero-save-btn.is-collected {
            background: var(--accent-primary);
            border-color: transparent;
            color: #ffffff;
            box-shadow: var(--shadow-sm);
        }
        .char-action-btn.secondary.char-hero-save-btn.is-collected::after {
            content: " \2713";
            font-weight: 700;
            margin-left: 0.2rem;
        }
        .char-action-btn.secondary.char-hero-save-btn.is-collected:hover {
            background: var(--accent-hover);
            border-color: transparent;
            color: #ffffff;
        }
        @media (max-width: 768px) {
            .char-action-btn.secondary.char-hero-save-btn {
                padding: 0.625rem var(--space-3);
                font-size: 0.8125rem;
            }
        }
        .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;
        }

        /* Character Info Section */
        .char-info {
            padding: var(--space-4) var(--space-5);
            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;
        }
        .char-chatname-row {
            display: flex;
            align-items: baseline;
            gap: var(--space-2);
            flex-wrap: wrap;
            margin-top: 2px;
        }
        .char-chatname {
            font-size: 0.9375rem;
            color: var(--accent-primary);
            font-weight: 500;
        }
        .char-creator {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            white-space: nowrap;
        }
        .char-creator span {
            color: var(--text-primary);
            font-weight: 500;
        }
        .char-creator-link {
            display: inline-flex;
            align-items: center;
            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;
            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: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-desc-wrapper {
            position: relative;
            flex: 1;
            min-height: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .char-desc {
            font-size: 0.8125rem;
            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: block;
            margin: 0.5em 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;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: var(--space-2);
            flex-shrink: 0;
            max-height: 54px;
            overflow: hidden;
        }
        .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);
        }
        button.char-tag {
            appearance: none;
            line-height: 1;
            cursor: pointer;
        }
        .char-tag.extra {
            display: none;
        }
        .char-tag.more {
            background: transparent;
            border-style: dashed;
            color: var(--text-muted);
        }
        .char-tags.is-expanded {
            max-height: 200px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        .char-tags.is-expanded .char-tag.extra {
            display: inline-flex;
        }
        @media (max-width: 768px) {
            .char-tags.is-expanded {
                max-height: 140px;
            }
        }
        .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-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);
        }
        /* (Chat button is hidden for non-admin; keep disabled styling for other actions.) */
        .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: 1 1 auto; /* Take remaining space; author gets priority */
            min-width: 0;
            max-width: none;
            -webkit-tap-highlight-color: transparent;
        }
        .char-action-btn.char-source-link: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-block;
            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));
        }
        .char-action-btn.char-source-link:hover .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: auto;
            min-width: 0;
            padding-left: var(--space-3);
            padding-right: var(--space-3);
            background: var(--accent-primary);
            color: white;
            border: none;
        }
        .char-chat-launch .char-chat-btn:hover {
            background: var(--accent-hover);
        }
        .char-chat-launch .char-chat-btn.admin-dropdown-btn {
            text-align: center;
            position: relative;
            padding-right: 2rem; /* space for chevron so it doesn’t overlap text */
        }
        .char-chat-launch .char-chat-btn.admin-dropdown-btn::after {
            right: 0.5rem;
            border-top-color: white;
        }
        .char-chat-launch.open .char-chat-btn.admin-dropdown-btn::after {
            transform: translateY(-35%) rotate(180deg);
        }
        .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 {
            background: var(--bg-elevated);
            border-color: var(--border-strong);
            padding: var(--space-1);
        }
        /* Match hamburger 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-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);
        }

        /* 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;
            padding-top: 0.3125rem;
            padding-bottom: 0.3125rem;
            padding-left: var(--space-2);
            padding-right: var(--space-2);
            font-size: 0.875rem;
        }
        .character-modal .char-chat-launch .char-chat-btn.admin-dropdown-btn {
            padding-right: 1.125rem;
        }
        .character-modal .char-download-dropdown .char-download-trigger.admin-dropdown-btn::after,
        .character-modal .char-chat-launch .char-chat-btn.admin-dropdown-btn::after {
            right: 0.35rem;
        }
        .character-modal .char-action-btn.secondary.char-hero-save-btn {
            min-height: 2.125rem;
            padding: 0.3125rem var(--space-2);
            font-size: 0.875rem;
            line-height: 1.25;
        }
        .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;
        }
        
        /* 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: 300px;
            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 {
            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);
        }
        .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: blur(12px);
            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-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-3) 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: 60px;
        }
        .char-slideup-title {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-primary);
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }
        .char-slideup-hide {
            padding: 0.25rem 0.5rem;
            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.6875rem;
            font-weight: 600;
            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-4);
            height: calc(100% - 60px); /* 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-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);
        }

        /* 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;
            }
            .char-main {
                flex-direction: column;
                flex: 1;
                min-height: 0;
                overflow: hidden;
            }
            .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 {
                padding: var(--space-2) var(--space-4);
                flex: 1;
                min-height: 0;
                overflow: hidden;
                display: flex;
                flex-direction: column;
            }
            .char-name {
                font-size: 1.125rem;
            }
            .char-chatname-row {
                margin-top: 0;
            }
            .char-chatname {
                font-size: 0.875rem;
            }
            .char-creator-link {
                max-width: 100%;
                font-size: 0.72rem;
                padding: 0.14rem 0.4rem;
            }
            .char-desc {
                flex: 1;
                min-height: 0;
                margin-bottom: var(--space-2);
            }
            .char-tags {
                margin-bottom: var(--space-2);
                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-download-dropdown .char-download-trigger,
            .char-chat-launch .char-chat-btn {
                width: auto;
                min-width: 0;
            }
            .char-download-dropdown .char-download-trigger {
                padding-right: 2rem; /* keep space for chevron on mobile */
            }
            .character-modal .char-download-dropdown .char-download-trigger {
                padding-right: 1.125rem;
            }
            .character-modal .char-chat-launch .char-chat-btn.admin-dropdown-btn {
                padding-right: 1.125rem;
            }
            .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: 50px;
            }
            .char-tab-panel {
                padding: var(--space-3);
                height: calc(100% - 50px); /* 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);
            }
            .char-info {
                padding: var(--space-2) var(--space-3);
            }
            .char-name {
                font-size: 1rem;
            }
            .char-desc {
                font-size: 0.8125rem;
            }
            .char-action-btn {
                padding: 0.5rem var(--space-2);
                font-size: 0.75rem;
            }
            .char-action-btn.secondary.char-hero-save-btn {
                padding: 0.5rem var(--space-2);
                font-size: 0.75rem;
            }
            .char-download-dropdown .char-download-trigger,
            .char-chat-launch .char-chat-btn {
                width: auto;
                min-width: 0;
                padding-left: var(--space-2);
                padding-right: var(--space-2);
            }
            .char-download-dropdown .char-download-trigger {
                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 {
                padding: 0.3125rem var(--space-2);
                font-size: 0.875rem;
            }
            .character-modal .char-download-dropdown .char-download-trigger {
                padding-right: 1.125rem;
            }
            .character-modal .char-chat-launch .char-chat-btn.admin-dropdown-btn {
                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-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;
            }
        }

        /* ========================================
           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-row1 .stream-cancel-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;
        }
        .characters-main-pane > #charactersContent {
            min-width: 0;
        }

        /* ---- Desktop: sidebar alongside all content ---- */
        @media (min-width: 769px) {
            .view-characters.active {
                margin-top: -1.75rem;
            }
            .view-characters .characters-browse-layout {
                align-items: flex-start;
            }
            .view-characters .tag-sidebar {
                position: sticky;
                top: var(--characters-toolbar-offset);
                height: calc(100dvh - var(--characters-toolbar-offset) - var(--characters-desktop-bottom-offset));
                max-height: calc(100vh - 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;
            border-right: 2px solid var(--border-default);
            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;
            cursor: pointer;
            font-size: 0.75rem;
            color: var(--text-secondary);
            transition: color var(--transition-fast);
            user-select: none;
            line-height: 1.2;
        }
        .tag-sidebar-item:hover { color: var(--text-primary); }
        .tag-sidebar-item.active { color: var(--accent-primary); }
        .tag-sidebar-item.is-loading { color: var(--accent-primary); }

        /* 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-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-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-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: space-between;
            gap: 8px;
            margin-top: 6px;
        }
        .tag-matching-status {
            flex: 1 1 auto;
            min-width: 0;
            font-size: 0.625rem;
            color: var(--text-muted);
            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;
            margin-left: auto;
        }
        .tag-drawer-clear-btn {
            appearance: none;
            border: 1px solid var(--border-default);
            background: var(--bg-subtle);
            color: var(--text-secondary);
            border-radius: 9px;
            font-size: 0.625rem;
            font-weight: 700;
            line-height: 1.1;
            height: 28px;
            padding: 0 0.58rem;
            display: inline-flex;
            align-items: center;
            cursor: pointer;
            transition: all var(--transition-fast);
            white-space: nowrap;
            flex-shrink: 0;
        }
        .tag-drawer-clear-btn:hover:not(:disabled) {
            background: var(--bg-hover);
            color: var(--text-primary);
            border-color: var(--border-strong);
        }
        .tag-drawer-clear-btn:disabled {
            opacity: 0.45;
            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-gear-btn {
            appearance: none;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            flex-shrink: 0;
            background: var(--bg-subtle);
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            color: var(--text-muted);
            cursor: pointer;
            transition: all var(--transition-fast);
            padding: 0;
        }
        .tag-gear-btn:hover {
            color: var(--text-secondary);
            border-color: var(--border-default);
            background: var(--bg-hover);
        }
        .tag-gear-btn.active {
            color: var(--accent-primary);
            border-color: var(--accent-primary);
            background: var(--accent-muted);
        }
        .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-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;
        }
        button.tag-cloud-item {
            --heat: 0.5;
            appearance: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 2px 6px;
            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;
        }
        button.tag-cloud-item:hover {
            background: rgba(100, 190, 240, calc(0.08 + var(--heat) * 0.20));
            color: rgba(220, 240, 255, 0.95);
        }
        button.tag-cloud-item.active {
            background: var(--accent-muted);
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }
        .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;
        }
        button.tag-cloud-item.active .tag-cloud-count {
            display: none;
        }
        button.tag-cloud-item.is-loading {
            background: var(--accent-muted);
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }

        .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-sidebar-item .tag-loading-spinner {
            margin-left: 2px;
        }
        .tag-drawer-item .tag-loading-spinner,
        button.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-clear {
            background: var(--bg-elevated);
            border-color: var(--border-default);
            color: var(--text-secondary);
            box-shadow: var(--shadow-sm);
        }
        .characters-toolbar .tag-chip-dismiss {
            color: var(--text-secondary);
        }
        .tag-filter-chips.has-filters { display: flex; }

        .tag-chip {
            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;
        }
        /* 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);
        }
        .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-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: 34px;
            min-width: 58px;
            padding: 0 10px;
            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);
        }

        /* ---- 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: rgba(0, 0, 0, 0.6);
            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 {
            position: absolute;
            right: 10px;
            top: 6px;
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border-radius: var(--radius-full);
            border: 1px solid var(--border-subtle);
            background: var(--bg-subtle);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all var(--transition-fast);
        }
        .tag-drawer-close:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
            border-color: var(--border-default);
        }
        .tag-drawer-close:active {
            transform: translateY(1px);
        }
        .tag-drawer-close svg {
            width: 12px;
            height: 12px;
        }
        .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;
            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;
        }
        .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);
        }
        .tag-drawer-item.is-loading {
            background: var(--accent-muted);
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }
        .tag-drawer-item .tag-indicator {
            display: none;
        }
        .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 {
            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;
            }
        }
        @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 (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 .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;
            }
        }