/* ============================================================
   CubeTimer 0.10.11 — styles.css
   ============================================================ */

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --bg-primary: #0a0e1a;
            --bg-secondary: #141928;
            --bg-tertiary: #1a2137;
            --bg-card: rgba(26, 33, 55, 0.6);
            --bg-card-hover: rgba(26, 33, 55, 0.8);
            
            --text-primary: #e8edf4;
            --text-secondary: #a8b4c8;
            --text-muted: #6b7896;
            
            --accent-primary: #4a9eff;
            --accent-secondary: #7b6fff;
            --accent-success: #4ade80;
            --accent-warning: #fbbf24;
            --accent-danger: #ef4444;
            
            --timer-glow: rgba(74, 158, 255, 0.3);
            
            --border-radius: 16px;
            --border-radius-sm: 12px;
            --border-radius-lg: 20px;
            
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
            --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
            --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
            
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        body {
            font-family: 'Anybody', sans-serif;
            background: linear-gradient(135deg, #0a0e1a 0%, #141928 50%, #1a2137 100%);
            background-attachment: fixed;
            color: var(--text-primary);
            overflow-x: hidden;
            min-height: 100vh;
            position: relative;
            overscroll-behavior: none;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 30%, rgba(74, 158, 255, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(123, 111, 255, 0.06) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }

        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.01) 2px, rgba(255, 255, 255, 0.01) 4px);
            pointer-events: none;
            z-index: 1;
        }

        .app-container {
            position: relative;
            z-index: 2;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* Header */
        .header {
            background: transparent;
            padding: 1.25rem 2rem 0.5rem;
            height: auto;
            min-height: 0;
            display: flex;
            align-items: flex-start;
            position: relative;
            z-index: 100;
        }

        .logo-section {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
            width: 220px;
            flex-shrink: 0;
        }

        .title-badge {
            background: var(--bg-card);
            border: 1px solid rgba(74, 158, 255, 0.12);
            border-radius: var(--border-radius);
            padding: 12px 18px;
            text-align: center;
            overflow: hidden;
            position: relative;
        }

        .title-strip-wrap {
            overflow: hidden;
            position: relative;
        }

        .title-strip {
            display: flex;
            width: 200%;
            transform: translateX(-50%);
            transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
        }

        .title-strip > * {
            flex: 0 0 50%;
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 0;
        }

        .title-strip.showing-record {
            transform: translateX(0%);
        }

        .record-title {
            font-size: 1.15rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--accent-success);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        body.light-theme .record-title {
            color: #16a34a;
        }

        .control-window {
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: var(--bg-card);
            border: 1px solid rgba(74, 158, 255, 0.12);
            border-radius: var(--border-radius);
            padding: 14px 16px;
        }

        .site-title {
            font-size: 1.65rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .header-controls {
            display: flex;
            gap: 1.5rem;
            align-items: center;
        }

        .header-icon-row {
            display: flex;
            gap: 10px;
            margin: 0 4px;
        }

        .icon-btn {
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-card);
            border: 1px solid rgba(74, 158, 255, 0.15);
            border-radius: var(--border-radius-sm);
            cursor: pointer;
            transition: var(--transition);
            padding: 0;
        }

        .icon-btn:hover {
            background: var(--bg-card-hover);
            border-color: var(--accent-primary);
            transform: translateY(-1px);
        }

        .icon-img {
            width: 28px;
            height: 28px;
            object-fit: contain;
            opacity: 0.85;
        }

        .more-btn {
            width: 100%;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Anybody', sans-serif;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--text-secondary);
            background: var(--bg-card);
            border: 1px solid rgba(74, 158, 255, 0.15);
            border-radius: var(--border-radius-sm);
            cursor: pointer;
            transition: var(--transition);
        }

        .more-btn:hover {
            background: var(--bg-card-hover);
            border-color: var(--accent-primary);
            color: var(--text-primary);
        }

        .session-select {
            background: var(--bg-card);
            border: 1px solid rgba(74, 158, 255, 0.2);
            border-radius: var(--border-radius-sm);
            color: var(--text-primary);
            padding: 0.6rem 1.2rem;
            font-family: 'Anybody', sans-serif;
            font-size: 0.95rem;
            cursor: pointer;
            transition: var(--transition);
            min-width: 180px;
        }

        .session-select:hover {
            background: var(--bg-card-hover);
            border-color: var(--accent-primary);
        }

        .session-select:focus {
            outline: none;
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1);
        }

        .header-btn {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            padding: 0.6rem 1rem;
            font-family: 'Anybody', sans-serif;
            font-size: 0.95rem;
            cursor: pointer;
            border-radius: var(--border-radius-sm);
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .header-btn:hover {
            background: var(--bg-card);
            color: var(--text-primary);
        }

        /* Scramble Section (now inline, above the timer digits) */
        .scramble-section {
            background: transparent;
            padding: 0 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .scramble-text {
            font-family: 'Anybody', sans-serif;
            font-size: 1.1rem;
            color: var(--text-primary);
            letter-spacing: 0.05em;
            font-weight: 500;
        }

        .new-scramble-btn {
            background: var(--bg-card);
            border: 1px solid rgba(74, 158, 255, 0.2);
            color: var(--text-secondary);
            padding: 0.6rem 1.5rem;
            border-radius: var(--border-radius-sm);
            font-family: 'Anybody', sans-serif;
            font-size: 0.9rem;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin: 0 auto;
        }

        .new-scramble-btn:hover {
            background: var(--accent-primary);
            color: white;
            border-color: var(--accent-primary);
            transform: translateY(-1px);
        }

        /* Main Content */
        .main-content {
            flex: 1;
            display: grid;
            grid-template-columns: minmax(240px, 340px) minmax(0, 1fr) minmax(240px, 340px);
            align-items: start;
            gap: 2rem;
            padding: 2rem 1rem;
            padding-bottom: 5rem;
            max-width: 1900px;
            margin: 0 auto;
            width: 100%;
        }

        /* Left Column */
        .left-column {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            min-width: 0;
        }

        .card {
            background: var(--bg-card);
            backdrop-filter: blur(20px);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            border: 1px solid rgba(74, 158, 255, 0.1);
            box-shadow: var(--shadow-sm);
        }

        /* Enlarge the Last 5 Solves, Best Times, and Averages cards */
        .left-column .card,
        .right-column .card:nth-child(1),
        .right-column .card:nth-child(2) {
            padding: 2rem;
        }

        .card-title {
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--text-muted);
            margin-bottom: 1rem;
        }

        .solves-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .solve-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.7rem 0.8rem;
            background: rgba(26, 33, 55, 0.3);
            border-radius: var(--border-radius-sm);
            transition: var(--transition);
        }

        .solve-item:hover {
            background: rgba(26, 33, 55, 0.5);
            transform: translateX(4px);
        }

        .solve-number {
            color: var(--text-muted);
            font-size: 0.9rem;
            min-width: 25px;
        }

        .solve-time {
            font-family: 'Manrope', sans-serif;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .solve-time.dnf {
            color: var(--text-muted);
        }

        .solve-time.plus-two::after {
            content: ' +2';
            color: var(--accent-warning);
            font-size: 0.85rem;
        }

        .averages {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        /* Commentary Block */
        .commentary-card {
            padding: 1rem;
            background: rgba(20, 25, 40, 0.4);
            border: 1px solid rgba(74, 158, 255, 0.15);
            min-height: 80px;
            display: flex;
            align-items: center;
        }

        .commentary-content {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            width: 100%;
        }

        .commentary-icon {
            font-size: 1.5rem;
            line-height: 1;
            flex-shrink: 0;
            animation: commentary-pulse 2s ease-in-out infinite;
        }

        @keyframes commentary-pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        .commentary-text {
            font-family: 'Anybody', sans-serif;
            font-size: 1.25rem;
            line-height: 1.5;
            color: var(--text-secondary);
            font-weight: 500;
            text-align: center;
            max-width: 560px;
            margin-top: 1.5rem;
            opacity: 0;
            animation: commentary-fade-in 0.5s ease-out forwards;
        }

        .typing-cursor {
            display: inline-block;
            width: 2px;
            height: 1em;
            background: currentColor;
            margin-left: 2px;
            vertical-align: text-bottom;
            animation: cursor-blink 0.9s steps(1) infinite;
        }

        @keyframes cursor-blink {
            0%, 50% { opacity: 1; }
            50.01%, 100% { opacity: 0; }
        }

        @keyframes commentary-fade-in {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .commentary-text.updating {
            animation: commentary-fade-in 0.5s ease-out forwards;
        }

        body.light-theme .commentary-card {
            background: #f9fafb;
            border-color: #e5e7eb;
        }

        body.light-theme .commentary-text {
            color: #6b7280;
        }

        .average-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .average-label {
            color: var(--text-muted);
            font-size: 0.9rem;
            font-weight: 500;
        }

        .average-value {
            font-family: 'Manrope', sans-serif;
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--accent-primary);
        }

        /* Center Column - Timer */
        .center-column {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 1.5rem;
            padding: 0.35rem 0 0;
            touch-action: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            min-width: 0;
            width: 100%;
        }

        .timer-container {
            -webkit-touch-callout: none;
        }

        .timer-container {
            background: var(--bg-card);
            backdrop-filter: blur(30px);
            border-radius: var(--border-radius-lg);
            padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.5rem, 6vw, 5.5rem);
            border: 1px solid rgba(74, 158, 255, 0.15);
            box-shadow: var(--shadow-lg);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.1rem;
            position: relative;
            overflow: hidden;
            max-width: 100%;
        }

        .timer-container::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at center, rgba(74, 158, 255, 0.05) 0%, transparent 70%);
            pointer-events: none;
        }

        .timer-display {
            font-family: 'Manrope', sans-serif;
            font-size: clamp(3.5rem, 7vw, 7.5rem);
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: -0.02em;
            line-height: 1;
            text-shadow: 0 0 40px var(--timer-glow);
            position: relative;
            z-index: 1;
            user-select: none;
            transition: color 0.2s ease, text-shadow 0.2s ease;
            opacity: 1 !important;
        }

        .timer-display.ready {
            color: #22c55e;
            text-shadow: 0 0 40px rgba(34, 197, 94, 0.4);
        }

        .timer-display.running {
            color: var(--text-primary);
            text-shadow: none;
        }

        body.light-theme .timer-display {
            color: #222222;
            text-shadow: none;
            opacity: 1 !important;
        }

        body.light-theme .timer-display.ready {
            color: #16a34a;
            text-shadow: 0 0 20px rgba(22, 163, 74, 0.3);
        }

        body.light-theme .timer-display.running {
            color: #222222;
            text-shadow: none;
        }

        .timer-hint {
            font-size: 0.95rem;
            color: var(--text-muted);
            letter-spacing: 0.05em;
            position: relative;
            z-index: 1;
        }

        /* ─── Target Time & Honest Mode pills ─── */
        /* Sits in the middle grid column of .header (auto 1fr auto), so it's
           genuinely centered in the leftover space between the logo and the
           session dropdown/buttons — and can never overlap either, regardless of
           window width or how long the current session's name is. */
        .header-pills {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            min-width: 0;
            padding: 0 0.5rem;
        }

        .target-time-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.45rem 1rem;
            border-radius: 999px;
            border: 1px solid rgba(120, 130, 160, 0.25);
            background: rgba(120, 130, 160, 0.08);
            color: var(--text-muted);
            font-family: 'Manrope', sans-serif;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .target-time-btn:hover {
            background: rgba(120, 130, 160, 0.15);
        }

        .target-time-btn.active {
            border-color: rgba(74, 158, 255, 0.5);
            background: rgba(74, 158, 255, 0.12);
            color: #4a9eff;
        }

        /* Honest Mode uses green ("truth") instead of Target Time's blue when active */
        .honest-mode-btn.active {
            border-color: rgba(74, 222, 128, 0.5);
            background: rgba(74, 222, 128, 0.14);
            color: #22c55e;
        }

        .target-time-goal-label {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-muted);
            letter-spacing: 0.03em;
            margin-top: 0.35rem;
            position: relative;
            z-index: 1;
        }

        /* Honest Mode modal */
        .hm-desc {
            font-family: 'Manrope', sans-serif;
            font-size: 0.85rem;
            line-height: 1.45;
            color: var(--text-muted);
            margin: 0 0 1rem;
        }

        .hm-countdown {
            font-family: 'JetBrains Mono', monospace;
            font-size: 2.4rem;
            font-weight: 700;
            text-align: center;
            color: #22c55e;
            margin: 0.5rem 0 1.25rem;
        }

        /* Solve History: colors the time cell green/red based on whether that
           solve met the Target Time goal that was active when it was recorded. */
        .sh-target-met {
            color: #22c55e !important;
        }

        .sh-target-missed {
            color: #ef4444 !important;
        }

        .tt-toggle-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        /* Timer display flashes this color right after a solve, showing whether
           the Target Time goal was met (green) or missed (red). Cleared on next hold. */
        .timer-display.target-met {
            color: #22c55e !important;
        }

        .timer-display.target-missed {
            color: #ef4444 !important;
        }

        /* Right Column */
        .right-column {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            margin-top: -10rem;
            padding-bottom: 4.5rem;
            min-width: 0;
        }

        .best-times {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .best-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .best-label {
            color: var(--text-muted);
            font-size: 0.9rem;
            font-weight: 500;
        }

        .best-value {
            font-family: 'Manrope', sans-serif;
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--accent-success);
        }

        .progress-chart {
            height: 150px;
            position: relative;
            margin-top: 1rem;
        }

        .chart-canvas {
            width: 100%;
            height: 100%;
        }

        /* Solve control buttons, now under Last 5 Solves in the left column */
        .control-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }

        .control-btn {
            background: var(--bg-card);
            border: 1px solid rgba(74, 158, 255, 0.2);
            color: var(--text-secondary);
            padding: 0.8rem 1.2rem;
            border-radius: var(--border-radius-sm);
            font-family: 'Anybody', sans-serif;
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            flex: 1 1 calc(50% - 0.75rem);
        }

        .control-btn:hover {
            background: var(--bg-card-hover);
            color: var(--text-primary);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .control-btn.danger:hover {
            background: var(--accent-danger);
            border-color: var(--accent-danger);
            color: white;
        }

        .control-btn.warning:hover {
            background: var(--accent-warning);
            border-color: var(--accent-warning);
            color: white;
        }

        /* Import/Export + Log in cluster, pinned to the bottom-left corner */
        .bottom-left-buttons {
            position: fixed;
            left: 2rem;
            bottom: 1.5rem;
            display: flex;
            gap: 1rem;
            z-index: 50;
        }

        .export-buttons {
            display: flex;
            gap: 1rem;
        }

        .export-btn {
            background: var(--accent-primary);
            border: none;
            color: white;
            padding: 0.8rem 1.5rem;
            border-radius: var(--border-radius-sm);
            font-family: 'Anybody', sans-serif;
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: var(--shadow-md);
        }

        .export-btn:hover {
            background: var(--accent-secondary);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .session-stats {
            color: var(--text-muted);
            font-size: 0.9rem;
            font-family: 'Manrope', sans-serif;
            display: flex;
            gap: 2rem;
        }

        .stat-item {
            display: flex;
            gap: 0.5rem;
        }

        .stat-label {
            color: var(--text-muted);
        }

        .stat-value {
            color: var(--accent-primary);
            font-weight: 700;
        }

        /* Animations */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .card {
            animation: fadeIn 0.5s ease backwards;
        }

        .card:nth-child(1) { animation-delay: 0.1s; }
        .card:nth-child(2) { animation-delay: 0.2s; }
        .card:nth-child(3) { animation-delay: 0.3s; }

        /* Settings Modal */
        .settings-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .settings-overlay.visible {
            opacity: 1;
            pointer-events: all;
        }

        /* NEW Settings Modal with Sidebar */
        .settings-modal-new {
            background: var(--bg-primary);
            border-radius: 24px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
            width: 90%;
            max-width: 1000px;
            height: 80vh;
            max-height: 700px;
            position: relative;
            transform: scale(0.9);
            transition: transform 0.3s ease;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .settings-overlay.visible .settings-modal-new {
            transform: scale(1);
        }

        .settings-header-new {
            padding: 1.5rem 2rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            background: var(--bg-secondary);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .settings-title-new {
            font-family: 'Manrope', sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0;
        }

        .settings-close-new {
            width: 36px;
            height: 36px;
            border: none;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: var(--text-secondary);
            transition: all 0.2s ease;
        }

        .settings-close-new:hover {
            background: rgba(255, 255, 255, 0.15);
            color: var(--text-primary);
        }

        .settings-body {
            display: flex;
            flex: 1;
            overflow: hidden;
        }

        /* Sidebar */
        .settings-sidebar {
            width: 220px;
            background: var(--bg-secondary);
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            flex-direction: column;
            padding: 1rem 0;
            gap: 0.25rem;
        }

        .settings-nav-item {
            padding: 0.875rem 1.5rem;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            font-family: 'Manrope', sans-serif;
            font-size: 0.95rem;
            font-weight: 500;
            text-align: left;
            cursor: pointer;
            transition: all 0.2s ease;
            border-left: 3px solid transparent;
        }

        .settings-nav-item:hover {
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-primary);
        }

        .settings-nav-item.active {
            background: rgba(74, 158, 255, 0.1);
            color: var(--accent-primary);
            border-left-color: var(--accent-primary);
        }

        /* Content Area */
        .settings-content-area {
            flex: 1;
            overflow-y: auto;
            padding: 2rem;
        }

        .settings-section-content {
            display: none;
        }

        .settings-section-content.active {
            display: block;
        }

        .section-title {
            font-family: 'Manrope', sans-serif;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0 0 1.5rem 0;
        }

        .setting-group {
            margin-bottom: 2rem;
        }

        /* Theme Buttons */
        .theme-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .theme-btn {
            padding: 1.25rem;
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.03);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            font-family: 'Manrope', sans-serif;
        }

        .theme-btn:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .theme-btn.active {
            border-color: var(--accent-primary);
            background: rgba(74, 158, 255, 0.1);
        }

        .theme-btn.active .theme-label {
            color: var(--accent-primary);
        }

        .theme-icon {
            font-size: 2rem;
        }

        .theme-label {
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--text-secondary);
        }

        /* Color Picker New */
        .color-picker-new {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 0.75rem;
        }

        .color-option-new {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            cursor: pointer;
            border: 3px solid transparent;
            transition: all 0.2s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .color-option-new:hover {
            transform: scale(1.1);
        }

        .color-option-new.selected {
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.2);
        }

        /* Setting Row */
        .setting-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 12px;
        }

        /* Wraps a label + description together so long descriptions can wrap onto
           a second line without squishing the toggle-switch next to it (flexbox
           shrinks all children by default unless told otherwise). */
        .setting-info {
            flex: 1;
            min-width: 0;
        }

        .setting-row .toggle-switch {
            flex-shrink: 0;
        }

        .setting-label-new {
            font-family: 'Manrope', sans-serif;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--text-primary);
        }

        .setting-description {
            font-family: 'Manrope', sans-serif;
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-top: 0.25rem;
            line-height: 1.4;
        }

        /* Auto-Export folder picker: a self-contained block instead of a cramped
           side-by-side row, so the description text has room to wrap normally. */
        .autoexport-folder-block {
            margin-top: 1rem;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 12px;
        }

        .autoexport-folder-block .setting-description {
            margin-top: 0;
        }

        .autoexport-folder-status {
            font-family: 'Manrope', sans-serif;
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-top: 0.4rem;
            margin-bottom: 0.85rem;
            line-height: 1.4;
            word-break: break-word;
        }

        .autoexport-folder-status.is-set {
            color: #4ade80;
        }

        .autoexport-folder-block .data-btn {
            width: 100%;
            margin-bottom: 0;
        }

        /* Language Buttons */
        .language-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .lang-btn-new {
            padding: 1rem;
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.03);
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: 'Manrope', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .lang-btn-new:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .lang-btn-new.active {
            border-color: var(--accent-primary);
            background: rgba(74, 158, 255, 0.1);
        }

        .lang-label-new {
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        /* Checkbox Group */
        .checkbox-group {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .checkbox-item:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .checkbox-item input[type="checkbox"] {
            width: 20px;
            height: 20px;
            cursor: pointer;
            accent-color: var(--accent-primary);
        }

        .checkbox-label {
            font-family: 'Manrope', sans-serif;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--text-primary);
            cursor: pointer;
        }

        /* Mood Grid */
        .mood-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }

        .mood-card {
            padding: 1.5rem;
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.03);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
            font-family: 'Manrope', sans-serif;
        }

        .mood-card:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }

        .mood-card.active {
            border-color: var(--accent-primary);
            background: rgba(74, 158, 255, 0.1);
            box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.1);
        }

        .mood-card.active .mood-card-label {
            color: var(--accent-primary);
        }

        .mood-card.disabled {
            opacity: 0.4;
            cursor: not-allowed;
            pointer-events: none;
        }

        .mood-card-icon {
            font-size: 2.5rem;
        }

        .mood-card-label {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-secondary);
        }

        /* Data Buttons */
        .data-btn {
            width: 100%;
            padding: 1rem;
            margin-bottom: 0.75rem;
            border: none;
            border-radius: 12px;
            font-family: 'Manrope', sans-serif;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .data-btn.secondary {
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-primary);
        }

        .data-btn.secondary:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .data-btn.danger {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;
        }

        .data-btn.danger:hover {
            background: rgba(239, 68, 68, 0.2);
        }

        /* Light Theme Overrides for Settings */
        body.light-theme .settings-modal-new {
            background: #ffffff;
        }

        body.light-theme .settings-header-new {
            background: #f9fafb;
            border-bottom-color: #e5e7eb;
        }

        body.light-theme .settings-title-new {
            color: #222222;
        }

        body.light-theme .settings-close-new {
            background: rgba(0, 0, 0, 0.05);
            color: #6b7280;
        }

        body.light-theme .settings-close-new:hover {
            background: rgba(0, 0, 0, 0.1);
            color: #222222;
        }

        body.light-theme .settings-sidebar {
            background: #f9fafb;
            border-right-color: #e5e7eb;
        }

        body.light-theme .settings-nav-item {
            color: #6b7280;
        }

        body.light-theme .settings-nav-item:hover {
            background: rgba(0, 0, 0, 0.03);
            color: #222222;
        }

        body.light-theme .settings-nav-item.active {
            background: rgba(74, 158, 255, 0.1);
            color: var(--accent-primary);
        }

        body.light-theme .settings-content-area {
            background: #ffffff;
        }

        body.light-theme .section-title {
            color: #222222;
        }

        body.light-theme .theme-btn {
            border-color: #e5e7eb;
            background: #f9fafb;
        }

        body.light-theme .theme-btn:hover {
            background: #f3f4f6;
            border-color: #d1d5db;
        }

        body.light-theme .theme-btn.active {
            border-color: var(--accent-primary);
            background: rgba(74, 158, 255, 0.1);
        }

        body.light-theme .theme-btn.active .theme-label {
            color: var(--accent-primary);
        }

        body.light-theme .theme-label {
            color: #222222;
        }

        body.light-theme .setting-row {
            background: #f9fafb;
        }

        body.light-theme .setting-label-new {
            color: #222222;
        }

        body.light-theme .setting-description {
            color: #6b7280;
        }

        body.light-theme .checkbox-item {
            background: #f9fafb;
        }

        body.light-theme .checkbox-item:hover {
            background: #f3f4f6;
        }

        body.light-theme .checkbox-label {
            color: #222222;
        }

        body.light-theme .mood-card {
            border-color: #e5e7eb;
            background: #f9fafb;
        }

        body.light-theme .mood-card:hover {
            background: #f3f4f6;
            border-color: #d1d5db;
        }

        body.light-theme .mood-card.active {
            border-color: var(--accent-primary);
            background: rgba(74, 158, 255, 0.15);
            box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.2);
        }

        body.light-theme .mood-card.active .mood-card-label {
            color: var(--accent-primary);
        }

        body.light-theme .mood-card-label {
            color: #222222;
        }

        body.light-theme .lang-btn-new {
            border-color: #e5e7eb;
            background: #f9fafb;
        }

        body.light-theme .lang-btn-new:hover {
            background: #f3f4f6;
            border-color: #d1d5db;
        }

        body.light-theme .lang-btn-new.active {
            border-color: var(--accent-primary);
            background: rgba(74, 158, 255, 0.15);
            font-weight: 600;
        }

        body.light-theme .lang-label-new {
            color: #222222;
        }

        body.light-theme .data-btn.secondary {
            background: #f3f4f6;
            color: #374151;
        }

        body.light-theme .data-btn.secondary:hover {
            background: #e5e7eb;
        }

        body.light-theme .slider-value {
            color: #222222;
        }

        /* Statistics Overlay */

        .settings-header {
            padding: 2rem;
            border-bottom: 2px solid #e5e7eb;
            position: sticky;
            top: 0;
            background: #ffffff;
            z-index: 10;
        }

        .settings-title {
            font-family: 'Manrope', sans-serif;
            font-size: 1.8rem;
            font-weight: 700;
            color: #222222;
            margin: 0;
        }

        .settings-close {
            position: absolute;
            top: 2rem;
            right: 2rem;
            width: 36px;
            height: 36px;
            border: none;
            background: #f3f4f6;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: #6b7280;
            transition: all 0.2s ease;
        }

        .settings-close:hover {
            background: #e5e7eb;
            color: #222222;
        }

        .settings-content {
            padding: 2rem;
        }

        .settings-section {
            margin-bottom: 2rem;
            padding-bottom: 2rem;
            border-bottom: 1px solid #e5e7eb;
        }

        .settings-section:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .settings-section-title {
            font-family: 'Manrope', sans-serif;
            font-size: 1rem;
            font-weight: 700;
            color: #222222;
            margin-bottom: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .settings-subtitle {
            font-family: 'Manrope', sans-serif;
            font-size: 0.85rem;
            color: #9ca3af;
            margin-bottom: 1rem;
            font-weight: 400;
        }

        .mood-selector {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 0.5rem;
            margin-top: 0.75rem;
        }

        .mood-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            padding: 1rem 0.5rem;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            background: #f9fafb;
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: 'Manrope', sans-serif;
        }

        .mood-btn:not(.disabled):hover {
            border-color: var(--accent-primary);
            background: rgba(74, 158, 255, 0.05);
            transform: translateY(-2px);
        }

        .mood-btn.active {
            border-color: var(--accent-primary);
            background: rgba(74, 158, 255, 0.15);
            box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1);
        }

        .mood-btn.disabled {
            opacity: 0.4;
            cursor: not-allowed;
            border-color: #e5e7eb;
        }

        .mood-btn.disabled:hover {
            transform: none;
            border-color: #e5e7eb;
            background: #f9fafb;
        }

        .mood-icon {
            font-size: 1.8rem;
            line-height: 1;
        }

        .mood-label {
            font-size: 0.8rem;
            font-weight: 600;
            color: #4b5563;
            text-align: center;
        }

        .mood-btn.active .mood-label {
            color: var(--accent-primary);
        }

        .mood-btn.disabled .mood-label {
            color: #9ca3af;
        }

        /* Language Selector */
        .language-selector {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.75rem;
            margin-top: 0.75rem;
        }

        .lang-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            background: #f9fafb;
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: 'Manrope', sans-serif;
        }

        .lang-btn:hover {
            border-color: var(--accent-primary);
            background: rgba(74, 158, 255, 0.05);
            transform: translateY(-2px);
        }

        .lang-btn.active {
            border-color: var(--accent-primary);
            background: rgba(74, 158, 255, 0.15);
            box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1);
        }

        .lang-label {
            font-size: 0.95rem;
            font-weight: 600;
            color: #4b5563;
        }

        .lang-btn.active .lang-label {
            color: var(--accent-primary);
        }

        .settings-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .settings-item:last-child {
            margin-bottom: 0;
        }

        .settings-label {
            font-family: 'Manrope', sans-serif;
            font-size: 0.95rem;
            color: #4b5563;
            font-weight: 500;
        }

        /* Slider */
        .slider-container {
            width: 100%;
            margin-top: 0.5rem;
        }

        .slider-value {
            font-family: 'Manrope', sans-serif;
            font-size: 0.95rem;
            color: var(--text-primary);
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .slider {
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: #e5e7eb;
            outline: none;
            -webkit-appearance: none;
            appearance: none;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--accent-primary);
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(74, 158, 255, 0.4);
            transition: all 0.2s ease;
        }

        .slider::-webkit-slider-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(74, 158, 255, 0.6);
        }

        .slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--accent-primary);
            cursor: pointer;
            border: none;
            box-shadow: 0 2px 8px rgba(74, 158, 255, 0.4);
            transition: all 0.2s ease;
        }

        .slider::-moz-range-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(74, 158, 255, 0.6);
        }

        /* Color Picker */
        .color-picker {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.75rem;
            margin-top: 0.75rem;
        }

        .color-option {
            width: 100%;
            aspect-ratio: 1;
            border-radius: 10px;
            border: 3px solid transparent;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
        }

        .color-option:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .color-option.selected {
            border-color: #222222;
            transform: scale(1.05);
        }

        .color-option.selected::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 1.2rem;
            font-weight: 700;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        /* Toggle Switch */
        .toggle-switch {
            position: relative;
            width: 56px;
            height: 28px;
            background: #d1d5db;
            border-radius: 14px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .toggle-switch.active {
            background: var(--accent-primary);
        }

        .toggle-slider {
            position: absolute;
            top: 3px;
            left: 3px;
            width: 22px;
            height: 22px;
            background: white;
            border-radius: 50%;
            transition: transform 0.3s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .toggle-switch.active .toggle-slider {
            transform: translateX(28px);
        }

        /* Buttons */
        .settings-button {
            font-family: 'Manrope', sans-serif;
            font-size: 0.95rem;
            font-weight: 600;
            padding: 0.75rem 1.5rem;
            border-radius: 10px;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
            width: 100%;
            margin-top: 0.5rem;
        }

        .settings-button.primary {
            background: var(--accent-primary);
            color: white;
        }

        .settings-button.primary:hover {
            background: #3a8eef;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(74, 158, 255, 0.4);
        }

        .settings-button.danger {
            background: #ef4444;
            color: white;
        }

        .settings-button.danger:hover {
            background: #dc2626;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
        }

        .settings-button.secondary {
            background: #f3f4f6;
            color: #222222;
        }

        .settings-button.secondary:hover {
            background: #e5e7eb;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        /* Light Theme */
        body.light-theme {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #dee2e6 100%);
        }

        body.light-theme::before {
            background: 
                radial-gradient(circle at 20% 30%, rgba(74, 158, 255, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(123, 111, 255, 0.03) 0%, transparent 50%);
        }

        body.light-theme .header {
            background: transparent;
        }

        body.light-theme .site-title {
            color: #222222;
            background: none;
            -webkit-text-fill-color: #222222;
        }

        body.light-theme .scramble-section {
            background: rgba(255, 255, 255, 0.6);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        body.light-theme .scramble-text {
            color: #222222;
        }

        body.light-theme .card {
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(0, 0, 0, 0.1);
        }

        body.light-theme .card-title,
        body.light-theme .solve-time,
        body.light-theme .average-value,
        body.light-theme .best-value {
            color: #222222;
        }

        body.light-theme .timer-container {
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(0, 0, 0, 0.1);
        }

        body.light-theme .timer-display {
            color: #222222;
            text-shadow: none;
        }

        body.light-theme .bottom-controls {
            background: rgba(255, 255, 255, 0.9);
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }

        body.light-theme .session-select,
        body.light-theme .header-btn,
        body.light-theme .control-btn,
        body.light-theme .new-scramble-btn {
            background: rgba(243, 244, 246, 0.8);
            color: #222222;
            border: 1px solid rgba(0, 0, 0, 0.1);
        }

        body.light-theme .export-btn {
            background: var(--accent-primary);
            color: white;
        }

        /* Hidden elements */
        .hidden {
            display: none !important;
        }

        /* Version Display */
        .version-display {
            position: fixed;
            bottom: 0.6rem;
            left: 1rem;
            font-family: 'Manrope', sans-serif;
            font-size: 0.75rem;
            color: #FFFFFF;
            opacity: 0.35;
            user-select: none;
            pointer-events: none;
            z-index: 5;
        }

        

        body.light-theme .version-display {
            color: #000000;
        }

        /* ── Analytics Settings ── */
        .setting-hint {
            font-family: 'Manrope', sans-serif;
            font-size: 0.8rem;
            color: var(--text-secondary);
            line-height: 1.5;
            margin: 0;
        }
        .analytics-offset-btn {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            border: 1px solid rgba(74, 158, 255, 0.25);
            background: var(--bg-card);
            color: var(--text-primary);
            font-size: 1.1rem;
            line-height: 1;
            cursor: pointer;
            transition: var(--transition);
            display: flex; align-items: center; justify-content: center;
        }
        .analytics-offset-btn:hover {
            background: var(--accent-primary);
            border-color: var(--accent-primary);
            color: #fff;
        }
        .analytics-offset-value {
            font-family: 'Manrope', sans-serif;
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-primary);
            min-width: 28px;
            text-align: center;
        }
        .analytics-time-preview {
            font-family: 'Manrope', sans-serif;
            font-size: 0.82rem;
            color: var(--accent-primary);
            margin-top: 0.6rem;
            opacity: 0.85;
        }

        /* ── Trend Block ── */
        .trend-container {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding: 0.5rem 0;
        }
        .trend-arrow-wrap {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        .trend-arrow {
            font-size: 2.5rem;
            line-height: 1;
            transition: color 0.3s;
        }
        .trend-arrow.up   { color: #4ade80; }
        .trend-arrow.down { color: #f87171; }
        .trend-arrow.flat { color: #a8b4c8; }
        .trend-percent {
            font-family: 'Manrope', sans-serif;
            font-size: 2rem;
            font-weight: 800;
            line-height: 1;
        }
        .trend-percent.up   { color: #4ade80; }
        .trend-percent.down { color: #f87171; }
        .trend-percent.flat { color: #a8b4c8; }
        .trend-label {
            font-family: 'Manrope', sans-serif;
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-top: 0.15rem;
        }
        .trend-comparison {
            display: flex;
            gap: 1.5rem;
            flex-wrap: wrap;
        }
        .trend-compare-item {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
        }
        .trend-compare-label {
            font-family: 'Manrope', sans-serif;
            font-size: 0.72rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .trend-compare-value {
            font-family: 'Manrope', sans-serif;
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        /* ── Heatmap Block ── */
        .heatmap-container {
            position: relative;
            height: 180px;
            width: 100%;
        }
        .heatmap-hint {
            font-family: 'Manrope', sans-serif;
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-top: 0.5rem;
            text-align: center;
            opacity: 0.7;
        }

        /* ── Subsessions ── */

        /* Context menu */
        .sh-context-menu {
            display: none;
            position: fixed;
            z-index: 9999;
            background: var(--bg-card);
            border: 1px solid rgba(74,158,255,0.2);
            border-radius: 10px;
            padding: 0.35rem;
            box-shadow: 0 8px 32px rgba(0,0,0,0.4);
            min-width: 190px;
        }
        .sh-context-btn {
            display: block;
            width: 100%;
            padding: 0.55rem 0.85rem;
            background: none;
            border: none;
            border-radius: 7px;
            color: var(--text-primary);
            font-family: 'Manrope', sans-serif;
            font-size: 0.88rem;
            font-weight: 600;
            text-align: left;
            cursor: pointer;
            transition: background 0.15s;
        }
        .sh-context-btn:hover { background: rgba(74,158,255,0.12); color: var(--accent-primary); }

        /* Solve row selected state */
        #solveHistoryTableBody tr.sh-selected {
            background: rgba(74,158,255,0.1);
            outline: 1px solid rgba(74,158,255,0.25);
        }
        #solveHistoryTableBody tr { cursor: pointer; user-select: none; }

        /* Subsession row stripe */
        #solveHistoryTableBody tr.sh-in-subsession td:first-child {
            border-left: 3px solid var(--ss-color, #4a9eff);
        }
        .sh-subsession-label-row td {
            padding: 0.3rem 0.5rem 0.15rem !important;
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            color: var(--ss-color, #4a9eff);
            background: rgba(74,158,255,0.05);
            border-bottom: none !important;
        }
        #solveHistoryTableBody tr.sh-excluded td {
            opacity: 0.45;
        }

        /* Subsession modal overlay */
        .subsession-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.65);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .subsession-modal {
            background: var(--bg-secondary);
            border-radius: 18px;
            width: min(440px, 92vw);
            box-shadow: 0 24px 64px rgba(0,0,0,0.5);
            overflow: hidden;
        }
        .subsession-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.25rem 1.5rem 1rem;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .subsession-modal-title {
            font-family: 'Manrope', sans-serif;
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0;
        }
        .subsession-modal-close {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 1.4rem;
            cursor: pointer;
            line-height: 1;
            padding: 0.1rem 0.3rem;
            border-radius: 6px;
            transition: var(--transition);
        }
        .subsession-modal-close:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
        .subsession-modal-body { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
        .subsession-field { display: flex; flex-direction: column; gap: 0.4rem; }
        .subsession-label {
            font-family: 'Manrope', sans-serif;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        .subsession-input {
            background: var(--bg-card);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 10px;
            padding: 0.65rem 0.9rem;
            color: var(--text-primary);
            font-family: 'Manrope', sans-serif;
            font-size: 0.95rem;
            outline: none;
            transition: border-color 0.2s;
        }
        .subsession-input:focus { border-color: var(--accent-primary); }
        .subsession-colors {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }
        .subsession-color-btn {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 3px solid transparent;
            cursor: pointer;
            transition: transform 0.15s, border-color 0.15s;
        }
        .subsession-color-btn:hover { transform: scale(1.15); }
        .subsession-color-btn.active { border-color: #fff; transform: scale(1.15); }
        .subsession-toggle-row {
            flex-direction: row !important;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }
        .subsession-hint {
            font-family: 'Manrope', sans-serif;
            font-size: 0.76rem;
            color: var(--text-secondary);
            margin: 0.2rem 0 0;
            line-height: 1.4;
        }
        /* Toggle switch */
        .subsession-toggle { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
        .subsession-toggle input { opacity: 0; width: 0; height: 0; }
        .subsession-toggle-track {
            position: absolute;
            inset: 0;
            background: rgba(255,255,255,0.1);
            border-radius: 99px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .subsession-toggle-track::after {
            content: '';
            position: absolute;
            width: 18px; height: 18px;
            left: 3px; top: 3px;
            background: #fff;
            border-radius: 50%;
            transition: transform 0.2s;
        }
        .subsession-toggle input:checked + .subsession-toggle-track { background: var(--accent-primary); }
        .subsession-toggle input:checked + .subsession-toggle-track::after { transform: translateX(18px); }
        .subsession-selected-info {
            font-family: 'Manrope', sans-serif;
            font-size: 0.8rem;
            color: var(--accent-primary);
            font-weight: 600;
        }
        .subsession-modal-footer {
            display: flex;
            gap: 0.75rem;
            padding: 1rem 1.5rem 1.25rem;
            border-top: 1px solid rgba(255,255,255,0.06);
            justify-content: flex-end;
        }
        .subsession-btn {
            padding: 0.6rem 1.4rem;
            border-radius: 10px;
            border: none;
            font-family: 'Manrope', sans-serif;
            font-size: 0.9rem;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
        }
        .subsession-btn.cancel { background: rgba(255,255,255,0.07); color: var(--text-primary); }
        .subsession-btn.cancel:hover { background: rgba(255,255,255,0.12); }
        .subsession-btn.primary { background: var(--accent-primary); color: #fff; }
        .subsession-btn.primary:hover { filter: brightness(1.1); }

        /* Subsessions stats in Statistics modal */
        .subsessions-stats-list { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.5rem; }
        .subsession-stat-card {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            background: var(--bg-card);
            border-radius: 10px;
            padding: 0.75rem 1rem;
            border-left: 4px solid var(--ss-color, #4a9eff);
        }
        .subsession-stat-card .ss-name {
            font-family: 'Manrope', sans-serif;
            font-weight: 700;
            font-size: 0.9rem;
            color: var(--text-primary);
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .subsession-stat-card .ss-meta {
            display: flex;
            gap: 1rem;
            flex-shrink: 0;
        }
        .subsession-stat-card .ss-meta-item {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
        .subsession-stat-card .ss-meta-label {
            font-family: 'Manrope', sans-serif;
            font-size: 0.65rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        .subsession-stat-card .ss-meta-value {
            font-family: 'Manrope', sans-serif;
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--text-primary);
        }
        .subsession-stat-card .ss-excluded-badge {
            font-family: 'Manrope', sans-serif;
            font-size: 0.65rem;
            padding: 0.15rem 0.45rem;
            border-radius: 99px;
            background: rgba(248,113,113,0.15);
            color: #f87171;
            font-weight: 600;
            flex-shrink: 0;
        }
        .ss-delete-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 1.1rem;
            line-height: 1;
            cursor: pointer;
            padding: 0.2rem 0.35rem;
            border-radius: 6px;
            flex-shrink: 0;
            transition: background 0.15s, color 0.15s;
            margin-left: 0.25rem;
        }
        .ss-delete-btn:hover { background: rgba(248,113,113,0.15); color: #f87171; }

        /* ── Export Image Modal ── */
        .export-img-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            z-index: 10001;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
        }
        .export-img-modal {
            background: var(--bg-secondary);
            border-radius: 18px;
            width: min(820px, 100%);
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 24px 64px rgba(0,0,0,0.5);
            overflow: hidden;
        }
        .export-img-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.25rem 1.5rem 1rem;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            flex-shrink: 0;
        }
        .export-img-title {
            font-family: 'Manrope', sans-serif;
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0;
        }
        .export-img-close {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 1.4rem;
            cursor: pointer;
            line-height: 1;
            padding: 0.1rem 0.3rem;
            border-radius: 6px;
            transition: var(--transition);
        }
        .export-img-close:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }

        .export-img-body {
            display: flex;
            gap: 1.5rem;
            padding: 1.5rem;
            overflow-y: auto;
            flex: 1;
        }
        .export-img-preview-wrap {
            flex: 1.1;
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: repeating-conic-gradient(#1a2137 0% 25%, #161c2e 0% 50%) 50% / 16px 16px;
            border-radius: 12px;
            padding: 1rem;
        }
        #exportImgCanvas {
            max-width: 100%;
            max-height: 56vh;
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.35);
        }

        .export-img-options {
            flex: 0.8;
            min-width: 200px;
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }
        .export-opt-group { display: flex; flex-direction: column; gap: 0.6rem; }
        .export-opt-label {
            font-family: 'Manrope', sans-serif;
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        .export-format-control {
            display: flex;
            gap: 0.5rem;
        }
        .export-format-btn {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.25rem;
            background: var(--bg-card);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 10px;
            padding: 0.6rem 0.4rem;
            color: var(--text-secondary);
            font-family: 'Manrope', sans-serif;
            font-size: 0.72rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }
        .export-format-icon { font-size: 1.1rem; line-height: 1; }
        .export-format-btn:hover { border-color: rgba(74,158,255,0.3); }
        .export-format-btn.active {
            background: rgba(74,158,255,0.12);
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }
        .export-checkbox-row {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            font-family: 'Manrope', sans-serif;
            font-size: 0.88rem;
            color: var(--text-primary);
            cursor: pointer;
            user-select: none;
        }
        .export-checkbox-row input { width: 16px; height: 16px; accent-color: var(--accent-primary); cursor: pointer; }

        .export-img-footer {
            display: flex;
            gap: 0.75rem;
            padding: 1rem 1.5rem 1.25rem;
            border-top: 1px solid rgba(255,255,255,0.06);
            justify-content: flex-end;
            flex-shrink: 0;
        }

        

        /* Statistics Modal */

        .statistics-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .statistics-overlay.visible {
            opacity: 1;
            pointer-events: all;
        }

        .statistics-modal {
            background: #ffffff;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            width: 95%;
            max-width: 1200px;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }

        .statistics-overlay.visible .statistics-modal {
            transform: scale(1);
        }

        .statistics-header {
            padding: 2rem;
            border-bottom: 2px solid #e5e7eb;
            position: sticky;
            top: 0;
            background: #ffffff;
            z-index: 10;
        }

        .statistics-title {
            font-family: 'Manrope', sans-serif;
            font-size: 1.8rem;
            font-weight: 700;
            color: #222222;
            margin: 0;
        }

        .statistics-header-actions {
            position: absolute;
            top: 2rem;
            right: 2rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .stats-export-img-btn {
            background: var(--accent-primary);
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 0.6rem 1.1rem;
            font-family: 'Manrope', sans-serif;
            font-size: 0.85rem;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
            white-space: nowrap;
        }
        .stats-export-img-btn:hover { filter: brightness(1.1); }

        .statistics-close {
            position: static;
            width: 36px;
            height: 36px;
            border: none;
            background: #f3f4f6;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: #6b7280;
            transition: all 0.2s ease;
        }

        .statistics-close:hover {
            background: #e5e7eb;
            color: #222222;
        }

        .statistics-content {
            padding: 2rem;
        }

        /* Summary Cards */
        .stats-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .stat-card {
            background: #f9fafb;
            border-radius: 12px;
            padding: 1.25rem;
            text-align: center;
            border: 1px solid #e5e7eb;
        }

        .stat-card-label {
            font-family: 'Manrope', sans-serif;
            font-size: 0.8rem;
            font-weight: 600;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.5rem;
        }

        .stat-card-value {
            font-family: 'Manrope', sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: #222222;
        }

        /* Chart Section */
        .chart-section {
            margin-bottom: 2rem;
        }

        .chart-section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .chart-section-title {
            font-family: 'Manrope', sans-serif;
            font-size: 1.2rem;
            font-weight: 700;
            color: #222222;
            margin-bottom: 0;
        }

        .chart-zoom-controls {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .chart-reset-btn {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.35rem 0.85rem;
            border-radius: 8px;
            border: 1px solid #d1d5db;
            background: #f9fafb;
            color: #4b5563;
            font-family: 'Manrope', sans-serif;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s ease;
            white-space: nowrap;
        }

        .chart-reset-btn:hover {
            background: #f3f4f6;
            border-color: #9ca3af;
            color: #111827;
        }

        .chart-reset-btn:disabled {
            opacity: 0.4;
            cursor: default;
        }

        .chart-zoom-hint {
            font-family: 'Manrope', sans-serif;
            font-size: 0.72rem;
            color: #9ca3af;
            user-select: none;
        }

        body:not(.light-theme) .chart-reset-btn {
            border-color: rgba(74, 158, 255, 0.2);
            background: rgba(26, 33, 55, 0.6);
            color: #a8b4c8;
        }

        body:not(.light-theme) .chart-reset-btn:hover {
            background: rgba(74, 158, 255, 0.1);
            border-color: rgba(74, 158, 255, 0.4);
            color: #e8edf4;
        }

        body:not(.light-theme) .chart-zoom-hint {
            color: #6b7896;
        }

        .chart-container {
            background: #f9fafb;
            border-radius: 12px;
            padding: 1.5rem;
            border: 1px solid #e5e7eb;
            height: 400px;
            position: relative;
            overflow: hidden;
            touch-action: none; /* allow custom touch handling for pinch/drag */
        }

        /* Cursor states for drag */
        .chart-container.draggable {
            cursor: grab;
        }

        .chart-container.dragging {
            cursor: grabbing;
        }

        /* Additional Stats */
        .additional-stats {
            margin-top: 1.5rem;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
        }

        .stats-block {
            background: #f9fafb;
            border-radius: 12px;
            padding: 1.5rem;
            border: 1px solid #e5e7eb;
        }

        .stats-block-title {
            font-family: 'Manrope', sans-serif;
            font-size: 1rem;
            font-weight: 700;
            color: #222222;
            margin-bottom: 1rem;
        }

        .stats-row {
            display: flex;
            justify-content: space-between;
            padding: 0.5rem 0;
            border-bottom: 1px solid #e5e7eb;
        }

        .stats-row:last-child {
            border-bottom: none;
        }

        .stats-row-label {
            font-family: 'Manrope', sans-serif;
            font-size: 0.9rem;
            color: #6b7280;
        }

        .stats-row-value {
            font-family: 'Manrope', sans-serif;
            font-size: 0.9rem;
            font-weight: 600;
            color: #222222;
        }

        .histogram-container {
            height: 200px;
        }

        .pie-chart-container {
            height: 180px;
            display: flex;
            justify-content: center;
        }

        .pie-chart-legend {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.5rem 1rem;
            margin-top: 0.75rem;
        }

        .pie-chart-legend-item {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-family: 'Manrope', sans-serif;
            font-size: 0.78rem;
            color: var(--text-secondary);
        }

        .pie-chart-legend-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .pie-chart-legend-value {
            font-weight: 700;
            color: var(--text-primary);
        }

        /* Light theme adjustments for Statistics */
        body.light-theme .statistics-modal {
            background: #ffffff;
        }

        body.light-theme .statistics-header {
            background: #ffffff;
        }

        body.light-theme .stat-card,
        body.light-theme .chart-container,
        body.light-theme .stats-block {
            background: #f9fafb;
        }

        /* Dark theme for Statistics modal */
        body:not(.light-theme) .statistics-modal {
            background: rgba(26, 33, 55, 0.95);
            backdrop-filter: blur(20px);
        }

        body:not(.light-theme) .statistics-header {
            background: rgba(26, 33, 55, 0.95);
            border-bottom-color: rgba(74, 158, 255, 0.2);
        }

        body:not(.light-theme) .statistics-title {
            color: var(--text-primary);
        }

        body:not(.light-theme) .statistics-close {
            background: rgba(74, 158, 255, 0.1);
            color: var(--text-secondary);
        }

        body:not(.light-theme) .statistics-close:hover {
            background: rgba(74, 158, 255, 0.2);
            color: var(--text-primary);
        }

        body:not(.light-theme) .stat-card,
        body:not(.light-theme) .chart-container,
        body:not(.light-theme) .stats-block {
            background: rgba(20, 25, 40, 0.6);
            border-color: rgba(74, 158, 255, 0.2);
        }

        body:not(.light-theme) .stat-card-label,
        body:not(.light-theme) .stats-row-label,
        body:not(.light-theme) .chart-toggle {
            color: var(--text-secondary);
        }

        body:not(.light-theme) .stat-card-value,
        body:not(.light-theme) .chart-section-title,
        body:not(.light-theme) .stats-block-title,
        body:not(.light-theme) .stats-row-value {
            color: var(--text-primary);
        }

        body:not(.light-theme) .stats-row {
            border-bottom-color: rgba(74, 158, 255, 0.1);
        }

        /* Sessions Modal */
        .sessions-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .sessions-overlay.visible {
            opacity: 1;
            pointer-events: all;
        }

        .sessions-modal {
            background: #ffffff;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            width: 95%;
            max-width: 1200px;
            max-height: 85vh;
            overflow: hidden;
            position: relative;
            transform: scale(0.9);
            transition: transform 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .sessions-overlay.visible .sessions-modal {
            transform: scale(1);
        }

        .sessions-header {
            padding: 2rem;
            border-bottom: 2px solid #e5e7eb;
            background: #ffffff;
        }

        .sessions-title {
            font-family: 'Manrope', sans-serif;
            font-size: 1.8rem;
            font-weight: 700;
            color: #222222;
            margin: 0;
        }

        .sessions-close {
            position: absolute;
            top: 2rem;
            right: 2rem;
            width: 36px;
            height: 36px;
            border: none;
            background: #f3f4f6;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: #6b7280;
            transition: all 0.2s ease;
        }

        .sessions-close:hover {
            background: #e5e7eb;
            color: #222222;
        }

        .sessions-content {
            display: grid;
            grid-template-columns: 250px 1fr;
            flex: 1;
            overflow: hidden;
        }

        /* Session List */
        .sessions-list {
            background: #f9fafb;
            border-right: 2px solid #e5e7eb;
            overflow-y: auto;
            padding: 1rem;
        }

        .session-item {
            padding: 1rem;
            margin-bottom: 0.5rem;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: 'Manrope', sans-serif;
            font-size: 0.95rem;
            color: var(--text-secondary);
            background: var(--bg-card);
            border: 1px solid rgba(74, 158, 255, 0.12);
            position: relative;
        }

        .session-item:hover {
            background: rgba(74, 158, 255, 0.08);
            transform: translateX(4px);
        }

        .session-item.active {
            background: var(--accent-primary) !important;
            color: white !important;
            border-color: var(--accent-primary) !important;
            font-weight: 600;
        }

        .session-item.active:hover {
            background: var(--accent-primary) !important;
            color: white !important;
            transform: translateX(4px);
        }

        .session-item.no-session {
            color: #9ca3af;
            font-style: italic;
        }

        .session-item.no-session.active {
            background: #6b7280;
            color: white;
        }

        .session-item-name {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .session-item-icon {
            font-size: 1rem;
        }

        .session-item-count {
            font-size: 0.75rem;
            margin-top: 0.25rem;
            opacity: 0.7;
        }

        /* Session Details */
        .session-details {
            padding: 2rem;
            overflow-y: auto;
        }

        .session-details-title {
            font-family: 'Manrope', sans-serif;
            font-size: 1.4rem;
            font-weight: 700;
            color: #222222;
            margin-bottom: 0.5rem;
        }

        .session-details-subtitle {
            font-family: 'Manrope', sans-serif;
            font-size: 0.9rem;
            color: #6b7280;
            margin-bottom: 2rem;
        }

        .session-stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .session-stat-card {
            background: #f9fafb;
            border-radius: 10px;
            padding: 1rem;
            text-align: center;
            border: 1px solid #e5e7eb;
        }

        .session-stat-label {
            font-family: 'Manrope', sans-serif;
            font-size: 0.75rem;
            font-weight: 600;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.5rem;
        }

        .session-stat-value {
            font-family: 'Manrope', sans-serif;
            font-size: 1.3rem;
            font-weight: 700;
            color: #222222;
        }

        .session-stat-value.clickable {
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .session-stat-value.clickable:hover {
            color: var(--accent-primary);
            transform: scale(1.05);
        }

        body.light-theme .session-stat-value.clickable:hover {
            color: var(--accent-primary);
        }

        .session-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .session-action-btn {
            font-family: 'Manrope', sans-serif;
            font-size: 0.9rem;
            font-weight: 600;
            padding: 0.75rem 1.5rem;
            border-radius: 10px;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .session-action-btn.primary {
            background: var(--accent-primary);
            color: white;
        }

        .session-action-btn.primary:hover {
            background: #3a8eef;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(74, 158, 255, 0.4);
        }

        .session-action-btn.secondary {
            background: #f3f4f6;
            color: #222222;
        }

        .session-action-btn.secondary:hover {
            background: #e5e7eb;
            transform: translateY(-2px);
        }

        .session-action-btn.danger {
            background: #ef4444;
            color: white;
        }

        .session-action-btn.danger:hover {
            background: #dc2626;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
        }

        .session-action-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
        }

        /* Solve History Styles */
        .solve-history-section {
            margin-top: 2rem;
            background: var(--bg-card);
            border-radius: 16px;
            padding: 1.5rem;
            max-height: 60vh;
            display: flex;
            flex-direction: column;
        }

        .solve-history-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .solve-history-title {
            font-family: 'Manrope', sans-serif;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }

        .solve-history-close {
            width: 32px;
            height: 32px;
            border: none;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: var(--text-secondary);
            transition: all 0.2s ease;
        }

        .solve-history-close:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-primary);
        }

        .solve-history-table-container {
            overflow-y: auto;
            flex: 1;
        }

        .solve-history-table {
            width: 100%;
            border-collapse: collapse;
            font-family: 'Manrope', sans-serif;
        }

        .solve-history-table thead th {
            position: sticky;
            top: 0;
            background: var(--bg-secondary);
            padding: 0.75rem;
            text-align: left;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border-bottom: 2px solid rgba(74, 158, 255, 0.2);
        }

        .solve-history-table tbody tr {
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.2s ease;
            cursor: pointer;
            position: relative;
        }

        .solve-history-table tbody tr:hover {
            background: rgba(74, 158, 255, 0.05);
        }

        .solve-history-table tbody td {
            padding: 0.75rem;
            font-size: 0.9rem;
            color: var(--text-primary);
        }

        .solve-history-table tbody td:first-child {
            color: var(--text-secondary);
            font-weight: 600;
        }

        .solve-history-table .solve-scramble {
            font-family: monospace;
            font-size: 0.85rem;
            color: var(--text-secondary);
            transition: opacity 0.2s ease;
        }

        .solve-history-table tbody tr:hover .solve-scramble {
            opacity: 0;
        }

        .solve-history-table .solve-actions {
            opacity: 0;
            display: flex;
            gap: 0.75rem;
            justify-content: flex-end;
            transition: opacity 0.2s ease;
        }

        .solve-history-table tbody tr:hover .solve-actions {
            opacity: 1;
        }

        .solve-action-btn {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 6px;
            font-family: 'Manrope', sans-serif;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .solve-action-btn.delete {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;
        }

        .solve-action-btn.delete:hover {
            background: rgba(239, 68, 68, 0.2);
        }

        .solve-action-btn.penalty {
            background: rgba(251, 146, 60, 0.1);
            color: #fb923c;
        }

        .solve-action-btn.penalty:hover {
            background: rgba(251, 146, 60, 0.2);
        }

        .solve-action-btn.dnf {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;
        }

        .solve-action-btn.dnf:hover {
            background: rgba(239, 68, 68, 0.2);
        }

        .solve-action-btn.edit {
            background: rgba(74, 158, 255, 0.1);
            color: var(--accent-primary);
        }

        .solve-action-btn.edit:hover {
            background: rgba(74, 158, 255, 0.2);
        }

        /* Light theme for Solve History */
        body.light-theme .solve-history-section {
            background: #f9fafb;
            border: 1px solid #e5e7eb;
        }

        body.light-theme .solve-history-header {
            border-bottom-color: #e5e7eb;
        }

        body.light-theme .solve-history-title {
            color: #111827;
        }

        body.light-theme .solve-history-close {
            background: #f3f4f6;
            color: #6b7280;
        }

        body.light-theme .solve-history-close:hover {
            background: #e5e7eb;
            color: #111827;
        }

        body.light-theme .solve-history-table thead th {
            background: #f3f4f6;
            color: #6b7280;
            border-bottom-color: #d1d5db;
        }

        body.light-theme .solve-history-table tbody tr {
            border-bottom-color: #f3f4f6;
        }

        body.light-theme .solve-history-table tbody tr:hover {
            background: rgba(74, 158, 255, 0.05);
        }

        body.light-theme .solve-history-table tbody td {
            color: #111827;
        }

        body.light-theme .solve-history-table tbody td:first-child {
            color: #6b7280;
        }

        body.light-theme .solve-history-table .solve-scramble {
            color: #6b7280;
        }

        /* Dark theme for Sessions modal */
        body:not(.light-theme) .sessions-modal {
            background: rgba(26, 33, 55, 0.95);
            backdrop-filter: blur(20px);
        }

        body:not(.light-theme) .sessions-header {
            background: rgba(26, 33, 55, 0.95);
            border-bottom-color: rgba(74, 158, 255, 0.2);
        }

        body:not(.light-theme) .sessions-title {
            color: var(--text-primary);
        }

        body:not(.light-theme) .sessions-close {
            background: rgba(74, 158, 255, 0.1);
            color: var(--text-secondary);
        }

        body:not(.light-theme) .sessions-close:hover {
            background: rgba(74, 158, 255, 0.2);
            color: var(--text-primary);
        }

        body:not(.light-theme) .sessions-list {
            background: rgba(20, 25, 40, 0.4);
            border-right-color: rgba(74, 158, 255, 0.2);
        }

        body:not(.light-theme) .session-item {
            background: rgba(26, 33, 55, 0.6);
            border-color: rgba(74, 158, 255, 0.2);
            color: var(--text-secondary);
        }

        body:not(.light-theme) .session-item:hover {
            background: rgba(74, 158, 255, 0.1);
        }

        body:not(.light-theme) .session-item.active {
            background: var(--accent-primary) !important;
            color: white !important;
            border-color: var(--accent-primary) !important;
        }

        body:not(.light-theme) .session-details-title {
            color: var(--text-primary);
        }

        body:not(.light-theme) .session-details-subtitle {
            color: var(--text-secondary);
        }

        body:not(.light-theme) .session-stat-card {
            background: rgba(20, 25, 40, 0.6);
            border-color: rgba(74, 158, 255, 0.2);
        }

        body:not(.light-theme) .session-stat-label {
            color: var(--text-secondary);
        }

        body:not(.light-theme) .session-stat-value {
            color: var(--text-primary);
        }

        /* Inspection Mode Segmented Control */
        .inspection-mode-group {
            margin-top: 1.25rem;
            display: none; /* hidden when inspection is OFF */
        }

        .inspection-mode-group.visible {
            display: block;
        }

        .inspection-mode-label {
            font-family: 'Manrope', sans-serif;
            font-size: 0.85rem;
            font-weight: 600;
            color: #9ca3af;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: 0.6rem;
        }

        .segmented-control {
            display: flex;
            background: #f3f4f6;
            border-radius: 10px;
            padding: 3px;
            gap: 0;
            width: 100%;
        }

        body:not(.light-theme) .segmented-control {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(74, 158, 255, 0.15);
        }

        .segmented-btn {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            padding: 0.6rem 0.75rem;
            border: none;
            border-radius: 8px;
            background: transparent;
            cursor: pointer;
            font-family: 'Manrope', sans-serif;
            transition: all 0.2s ease;
            position: relative;
        }

        .segmented-btn .seg-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            border: 2px solid #9ca3af;
            background: transparent;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        .segmented-btn.active .seg-dot {
            border-color: var(--accent-primary);
            background: var(--accent-primary);
        }

        .segmented-btn .seg-title {
            font-size: 0.85rem;
            font-weight: 700;
            color: #6b7280;
            transition: color 0.2s ease;
            white-space: nowrap;
        }

        .segmented-btn.active .seg-title {
            color: var(--accent-primary);
        }

        body:not(.light-theme) .segmented-btn .seg-title {
            color: #a8b4c8;
        }

        body:not(.light-theme) .segmented-btn.active .seg-title {
            color: var(--accent-primary);
        }

        .segmented-btn .seg-desc {
            font-size: 0.72rem;
            font-weight: 400;
            color: #9ca3af;
            text-align: center;
            line-height: 1.2;
            transition: color 0.2s ease;
        }

        .segmented-btn.active .seg-desc {
            color: #60a5fa;
        }

        body:not(.light-theme) .segmented-btn .seg-desc {
            color: #6b7896;
        }

        body:not(.light-theme) .segmented-btn.active .seg-desc {
            color: #60a5fa;
        }

        .segmented-btn.active {
            background: #ffffff;
            box-shadow: 0 1px 4px rgba(0,0,0,0.12);
        }

        body:not(.light-theme) .segmented-btn.active {
            background: rgba(74, 158, 255, 0.12);
            box-shadow: 0 1px 6px rgba(74, 158, 255, 0.2);
        }

        .segmented-btn:not(.active):hover {
            background: rgba(0,0,0,0.04);
        }

        body:not(.light-theme) .segmented-btn:not(.active):hover {
            background: rgba(255,255,255,0.05);
        }

        /* ── Keyboard Navigation Focus ── */
        body.kb-nav-active *:focus {
            outline: none; /* suppress browser default */
        }

        /* Universal focus ring — works in both themes */
        .kb-focus {
            outline: 2px solid #fff !important;
            outline-offset: 3px !important;
            box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.35) !important;
            border-radius: 6px !important;
        }

        body.light-theme .kb-focus {
            outline-color: #222 !important;
            box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.25) !important;
        }

        /* Hotkey badge — small label shown in corner when kb-nav is active */
        .hotkey-hint {
            position: fixed;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%) translateY(60px);
            background: rgba(30, 37, 60, 0.92);
            border: 1px solid rgba(74, 158, 255, 0.25);
            border-radius: 10px;
            padding: 0.45rem 1.1rem;
            font-family: 'Manrope', sans-serif;
            font-size: 0.78rem;
            color: #a8b4c8;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.25s ease, transform 0.25s ease;
            z-index: 9999;
            white-space: nowrap;
        }

        .hotkey-hint.visible {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        body.light-theme .hotkey-hint {
            background: rgba(255,255,255,0.95);
            border-color: #d1d5db;
            color: #374151;
        }

        .hotkey-hint kbd {
            display: inline-block;
            background: rgba(74, 158, 255, 0.15);
            border: 1px solid rgba(74, 158, 255, 0.3);
            border-radius: 4px;
            padding: 0 5px;
            font-size: 0.75rem;
            font-family: 'Manrope', monospace;
            color: var(--accent-primary);
            margin: 0 2px;
        }

        body.light-theme .hotkey-hint kbd {
            background: rgba(74, 158, 255, 0.1);
            border-color: #93c5fd;
            color: #2563eb;
        }

        /* Solve history row keyboard focus */
        .solve-history-table tbody tr.kb-focus {
            outline: none !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            background: rgba(74, 158, 255, 0.18) !important;
            position: relative;
        }

        .solve-history-table tbody tr.kb-focus td:first-child::before {
            content: '';
            position: absolute;
            left: 0; top: 0; bottom: 0;
            width: 3px;
            background: var(--accent-primary);
            border-radius: 0;
        }

        /* ══════════════════════════════════════════
           ADVANCED CUSTOMIZATION LAYER
           Applied via data-font / data-bg on <body>
           and --custom-accent on :root
           ══════════════════════════════════════════ */

        /* Accent color override — set by JS via CSS var */
        :root {
            --custom-accent: #4a9eff; /* default matches accent-primary */
        }

        /* When customization is active (body.custom-active):
           override accent-primary with custom value */
        body.custom-active {
            --accent-primary: var(--custom-accent);
            /* timer-glow is handled by JS applyCustomization() via inline style on :root */
        }

        /* ── Font variants ── */
        body[data-font="mono"],
        body[data-font="mono"] .timer-display,
        body[data-font="mono"] .scramble-text,
        body[data-font="mono"] .solve-time,
        body[data-font="mono"] .average-value,
        body[data-font="mono"] .best-value {
            font-family: 'JetBrains Mono', monospace !important;
        }

        body[data-font="rounded"],
        body[data-font="rounded"] .timer-display,
        body[data-font="rounded"] .scramble-text,
        body[data-font="rounded"] .card-title,
        body[data-font="rounded"] .site-title {
            font-family: 'Nunito', sans-serif !important;
        }

        body[data-font="tech"],
        body[data-font="tech"] .timer-display,
        body[data-font="tech"] .scramble-text,
        body[data-font="tech"] .card-title,
        body[data-font="tech"] .site-title {
            font-family: 'Space Grotesk', sans-serif !important;
        }

        /* NEW fonts */
        body[data-font="orbitron"],
        body[data-font="orbitron"] .timer-display,
        body[data-font="orbitron"] .scramble-text,
        body[data-font="orbitron"] .card-title,
        body[data-font="orbitron"] .site-title,
        body[data-font="orbitron"] .solve-time,
        body[data-font="orbitron"] .average-value,
        body[data-font="orbitron"] .best-value {
            font-family: 'Orbitron', sans-serif !important;
            letter-spacing: 0.04em;
        }

        body[data-font="bebas"],
        body[data-font="bebas"] .timer-display,
        body[data-font="bebas"] .scramble-text,
        body[data-font="bebas"] .card-title,
        body[data-font="bebas"] .site-title,
        body[data-font="bebas"] .solve-time,
        body[data-font="bebas"] .average-value,
        body[data-font="bebas"] .best-value {
            font-family: 'Bebas Neue', sans-serif !important;
            letter-spacing: 0.06em;
        }

        body[data-font="playfair"],
        body[data-font="playfair"] .timer-display,
        body[data-font="playfair"] .scramble-text,
        body[data-font="playfair"] .card-title,
        body[data-font="playfair"] .site-title,
        body[data-font="playfair"] .solve-time,
        body[data-font="playfair"] .average-value,
        body[data-font="playfair"] .best-value {
            font-family: 'Playfair Display', serif !important;
        }

        body[data-font="rajdhani"],
        body[data-font="rajdhani"] .timer-display,
        body[data-font="rajdhani"] .scramble-text,
        body[data-font="rajdhani"] .card-title,
        body[data-font="rajdhani"] .site-title,
        body[data-font="rajdhani"] .solve-time,
        body[data-font="rajdhani"] .average-value,
        body[data-font="rajdhani"] .best-value {
            font-family: 'Rajdhani', sans-serif !important;
            letter-spacing: 0.05em;
        }

        /* ── DARK Background variants ── */

        /* dark-gradient — warm purple-to-blue (existing, renamed key) */
        body[data-bg="dark-gradient"] {
            background: linear-gradient(135deg, #0d0a1e 0%, #0a1628 40%, #0e1f2e 100%);
            background-attachment: fixed;
        }
        body[data-bg="dark-gradient"]::before {
            background:
                radial-gradient(circle at 15% 25%, rgba(123, 80, 255, 0.12) 0%, transparent 50%),
                radial-gradient(circle at 85% 75%, rgba(74, 190, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, rgba(255, 80, 150, 0.05) 0%, transparent 60%);
        }

        /* dark-pattern — dot grid (existing, renamed) */
        body[data-bg="dark-pattern"] {
            background-color: #0a0e1a;
            background-image: radial-gradient(circle, rgba(74, 158, 255, 0.18) 1px, transparent 1px);
            background-size: 28px 28px;
            background-attachment: fixed;
        }
        body[data-bg="dark-pattern"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(74, 158, 255, 0.06) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(123, 111, 255, 0.05) 0%, transparent 50%);
        }

        /* dark-minimal — near-black flat (existing, renamed) */
        body[data-bg="dark-minimal"] {
            background: #080b14;
            background-attachment: fixed;
        }
        body[data-bg="dark-minimal"]::before { background: none; }
        body[data-bg="dark-minimal"]::after  { background: none; }

        /* NEW DARK: black-red glow */
        body[data-bg="dark-red"] {
            background: linear-gradient(135deg, #0d0808 0%, #120a0a 50%, #0a0d12 100%);
            background-attachment: fixed;
        }
        body[data-bg="dark-red"]::before {
            background:
                radial-gradient(circle at 25% 35%, rgba(220, 38, 38, 0.14) 0%, transparent 55%),
                radial-gradient(circle at 75% 65%, rgba(239, 68, 68, 0.08) 0%, transparent 45%);
        }

        /* NEW DARK: deep violet */
        body[data-bg="dark-violet"] {
            background: linear-gradient(135deg, #0e0818 0%, #130d22 50%, #0c0a1a 100%);
            background-attachment: fixed;
        }
        body[data-bg="dark-violet"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.18) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.12) 0%, transparent 45%),
                radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.06) 0%, transparent 60%);
        }

        /* NEW DARK: navy neon — cyber / futuristic style */
        body[data-bg="dark-neon"] {
            background: #030810;
            background-attachment: fixed;
        }
        body[data-bg="dark-neon"]::before {
            background:
                radial-gradient(ellipse at 50% 0%,   rgba(6, 182, 212, 0.15) 0%, transparent 55%),
                radial-gradient(ellipse at 100% 100%, rgba(16, 185, 129, 0.1) 0%, transparent 45%),
                radial-gradient(ellipse at 0%   80%,  rgba(99, 102, 241, 0.1) 0%, transparent 40%);
        }
        /* Neon: dot grid overlay via ::after */
        body[data-bg="dark-neon"]::after {
            background-image:
                repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.008) 2px, rgba(255,255,255,0.008) 4px),
                radial-gradient(circle, rgba(6, 182, 212, 0.12) 1px, transparent 1px);
            background-size: auto, 32px 32px;
        }
        /* Neon: glowing card borders */
        body[data-bg="dark-neon"] .card,
        body[data-bg="dark-neon"] .timer-container {
            border-color: rgba(6, 182, 212, 0.35) !important;
            box-shadow:
                0 0 0 1px rgba(6, 182, 212, 0.15),
                0 4px 24px rgba(6, 182, 212, 0.08),
                inset 0 1px 0 rgba(6, 182, 212, 0.1) !important;
        }
        /* Neon: timer glow */
        body[data-bg="dark-neon"] .timer-container {
            box-shadow:
                0 0 0 1px rgba(6, 182, 212, 0.3),
                0 0 40px rgba(6, 182, 212, 0.12),
                0 8px 32px rgba(0,0,0,0.4) !important;
        }
        body[data-bg="dark-neon"] .timer-display {
            text-shadow: 0 0 30px rgba(6, 182, 212, 0.5) !important;
        }
        body[data-bg="dark-neon"] .timer-display.ready {
            text-shadow: 0 0 40px rgba(34, 197, 94, 0.7) !important;
        }
        /* Neon: header accent line (removed - header has no panel border) */
        /* Neon: scramble bar */
        body[data-bg="dark-neon"] .scramble-section {
            border-bottom-color: rgba(6, 182, 212, 0.2) !important;
        }
        /* Neon: session select glow */
        body[data-bg="dark-neon"] .session-select {
            border-color: rgba(6, 182, 212, 0.3) !important;
        }

        /* NEW DARK: graphite minimal */
        body[data-bg="dark-graphite"] {
            background: linear-gradient(160deg, #111111 0%, #1a1a1a 60%, #141414 100%);
            background-attachment: fixed;
        }
        body[data-bg="dark-graphite"]::before {
            background:
                radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
        }
        body[data-bg="dark-graphite"]::after { background: none; }

        /* ── LIGHT Background variants ── */

        /* light-default — just the light theme base */
        /* (none = default, no data-bg needed) */

        /* light-blue — white-blue gradient */
        body.light-theme[data-bg="light-blue"] {
            background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 40%, #e0f2fe 100%);
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-blue"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(14, 165, 233, 0.06) 0%, transparent 50%);
        }

        /* light-ivory — warm white with subtle gold tint */
        body.light-theme[data-bg="light-silver"] {
            background: linear-gradient(135deg, #fffff8 0%, #fefce8 40%, #fef9c3 100%);
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-silver"]::before {
            background:
                radial-gradient(circle at 70% 20%, rgba(234, 179, 8, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 30% 80%, rgba(251, 191, 36, 0.05) 0%, transparent 50%);
        }

        /* light-sky — soft sky */
        body.light-theme[data-bg="light-sky"] {
            background: linear-gradient(160deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-sky"]::before {
            background:
                radial-gradient(circle at 75% 25%, rgba(56, 189, 248, 0.12) 0%, transparent 50%),
                radial-gradient(circle at 25% 75%, rgba(14, 165, 233, 0.08) 0%, transparent 50%);
        }

        /* light-glass — glass white dot grid */
        body.light-theme[data-bg="light-glass"] {
            background-color: #f9fafb;
            background-image: radial-gradient(circle, rgba(99, 102, 241, 0.09) 1px, transparent 1px);
            background-size: 28px 28px;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-glass"]::before {
            background:
                radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.05) 0%, transparent 60%);
        }

        /* light-cream — cream pastel */
        body.light-theme[data-bg="light-cream"] {
            background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 40%, #fde68a 100%);
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-cream"]::before {
            background:
                radial-gradient(circle at 30% 30%, rgba(251, 191, 36, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 70%, rgba(245, 158, 11, 0.07) 0%, transparent 50%);
        }
        body.light-theme[data-bg="light-cream"]::after { background: none; }

        /* light-purple — white-purple glow */
        body.light-theme[data-bg="light-purple"] {
            background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 50%, #ede9fe 100%);
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-purple"]::before {
            background:
                radial-gradient(circle at 30% 40%, rgba(168, 85, 247, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
        }

        /* light-cyan — clean cyan */
        body.light-theme[data-bg="light-cyan"] {
            background: linear-gradient(135deg, #ecfeff 0%, #cffafe 50%, #a5f3fc 100%);
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-cyan"]::before {
            background:
                radial-gradient(circle at 20% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(14, 165, 233, 0.08) 0%, transparent 50%);
        }

        /* light-slate — cool blue-grey, clearly distinct from white/silver */
        body.light-theme[data-bg="light-grey"] {
            background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 40%, #cbd5e1 100%);
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-grey"]::before {
            background:
                radial-gradient(circle at 30% 30%, rgba(100, 116, 139, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 70%, rgba(71, 85, 105, 0.08) 0%, transparent 50%);
        }
        body.light-theme[data-bg="light-grey"]::after { background: none; }


        /* ═══════════════════════════════════════════════════════════
           NEW DARK BACKGROUNDS (100)
        ═══════════════════════════════════════════════════════════ */

        /* Aurora */
        body[data-bg="dark-aurora"] {
            background: #030d1a;
            background-attachment: fixed;
        }
        body[data-bg="dark-aurora"]::before {
            background:
                radial-gradient(circle at 0% 70%, 15 0%, transparent 55%),
                radial-gradient(circle at 70% 80%, rgba(99,102,241,0.12) 0%, transparent 55%),
                radial-gradient(circle at 40% 50%, rgba(6,182,212,0.08) 0%, transparent 55%);
        }
        /* Nebula */
        body[data-bg="dark-nebula"] {
            background: #050010;
            background-attachment: fixed;
        }
        body[data-bg="dark-nebula"]::before {
            background:
                radial-gradient(circle at 15% 25%, rgba(168,85,247,0.18) 0%, transparent 55%),
                radial-gradient(circle at 85% 75%, rgba(236,72,153,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(99,102,241,0.08) 0%, transparent 55%);
        }
        /* Cosmos */
        body[data-bg="dark-cosmos"] {
            background: #000008;
            background-attachment: fixed;
        }
        body[data-bg="dark-cosmos"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(255,255,255,0.04) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(74,158,255,0.06) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(139,92,246,0.04) 0%, transparent 55%);
        }
        /* Midnight */
        body[data-bg="dark-midnight"] {
            background: #000510;
            background-attachment: fixed;
        }
        body[data-bg="dark-midnight"]::before {
            background:
                radial-gradient(circle at 30% 30%, rgba(30,64,175,0.2) 0%, transparent 55%),
                radial-gradient(circle at 70% 70%, rgba(17,24,39,0.9) 0%, transparent 55%);
        }
        /* Deep Sea */
        body[data-bg="dark-deep-sea"] {
            background: #001018;
            background-attachment: fixed;
        }
        body[data-bg="dark-deep-sea"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(6,182,212,0.15) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(16,185,129,0.1) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(8,145,178,0.07) 0%, transparent 55%);
        }
        /* Eclipse */
        body[data-bg="dark-eclipse"] {
            background: #080008;
            background-attachment: fixed;
        }
        body[data-bg="dark-eclipse"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(139,92,246,0.2) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(236,72,153,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(99,102,241,0.06) 0%, transparent 55%);
        }
        /* Void */
        body[data-bg="dark-void"] {
            background: #000000;
            background-attachment: fixed;
        }
        body[data-bg="dark-void"]::before {
            background:
                radial-gradient(circle at 50% 0%, rgba(99,102,241,0.08) 0%, transparent 55%),
                radial-gradient(circle at 50% 100%, rgba(139,92,246,0.06) 0%, transparent 55%);
        }
        /* Abyss */
        body[data-bg="dark-abyss"] {
            background: #020408;
            background-attachment: fixed;
        }
        body[data-bg="dark-abyss"]::before {
            background:
                radial-gradient(circle at 10% 10%, rgba(6,182,212,0.08) 0%, transparent 55%),
                radial-gradient(circle at 90% 90%, rgba(16,185,129,0.05) 0%, transparent 55%);
        }
        /* Starfield */
        body[data-bg="dark-starfield"] {
            background: #020206;
            background-attachment: fixed;
        }
        body[data-bg="dark-starfield"]::before {
            background:
                radial-gradient(circle at 50% 0%, rgba(255,255,255,0.03) 0%, transparent 55%),
                radial-gradient(circle at 0% 100%, rgba(99,102,241,0.06) 0%, transparent 55%),
                radial-gradient(circle at 100% 0%, rgba(168,85,247,0.04) 0%, transparent 55%);
        }
        /* Galaxy */
        body[data-bg="dark-galaxy"] {
            background: #04000e;
            background-attachment: fixed;
        }
        body[data-bg="dark-galaxy"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(168,85,247,0.16) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(236,72,153,0.1) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(99,102,241,0.06) 0%, transparent 55%);
        }
        /* Ember */
        body[data-bg="dark-ember"] {
            background: #0e0500;
            background-attachment: fixed;
        }
        body[data-bg="dark-ember"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(249,115,22,0.16) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(239,68,68,0.1) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(245,158,11,0.06) 0%, transparent 55%);
        }
        /* Lava */
        body[data-bg="dark-lava"] {
            background: #100302;
            background-attachment: fixed;
        }
        body[data-bg="dark-lava"]::before {
            background:
                radial-gradient(circle at 15% 20%, rgba(239,68,68,0.18) 0%, transparent 55%),
                radial-gradient(circle at 85% 80%, rgba(220,38,38,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(249,115,22,0.06) 0%, transparent 55%);
        }
        /* Magma */
        body[data-bg="dark-magma"] {
            background: #0d0200;
            background-attachment: fixed;
        }
        body[data-bg="dark-magma"]::before {
            background:
                radial-gradient(circle at 30% 30%, rgba(249,115,22,0.2) 0%, transparent 55%),
                radial-gradient(circle at 70% 70%, rgba(239,68,68,0.15) 0%, transparent 55%),
                radial-gradient(circle at 50% 100%, rgba(220,38,38,0.05) 0%, transparent 55%);
        }
        /* Copper */
        body[data-bg="dark-copper"] {
            background: #0a0600;
            background-attachment: fixed;
        }
        body[data-bg="dark-copper"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(217,119,6,0.16) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(245,158,11,0.1) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(251,191,36,0.06) 0%, transparent 55%);
        }
        /* Rust */
        body[data-bg="dark-rust"] {
            background: #0c0400;
            background-attachment: fixed;
        }
        body[data-bg="dark-rust"]::before {
            background:
                radial-gradient(circle at 20% 40%, rgba(194,65,12,0.16) 0%, transparent 55%),
                radial-gradient(circle at 80% 60%, rgba(234,88,12,0.1) 0%, transparent 55%);
        }
        /* Infrared */
        body[data-bg="dark-infrared"] {
            background: #0e0008;
            background-attachment: fixed;
        }
        body[data-bg="dark-infrared"]::before {
            background:
                radial-gradient(circle at 15% 25%, rgba(239,68,68,0.15) 0%, transparent 55%),
                radial-gradient(circle at 85% 75%, rgba(168,85,247,0.1) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(220,38,38,0.06) 0%, transparent 55%);
        }
        /* Sunset */
        body[data-bg="dark-sunset"] {
            background: #0e0508;
            background-attachment: fixed;
        }
        body[data-bg="dark-sunset"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(249,115,22,0.16) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(236,72,153,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(239,68,68,0.07) 0%, transparent 55%);
        }
        /* Crimson */
        body[data-bg="dark-crimson"] {
            background: #0c0005;
            background-attachment: fixed;
        }
        body[data-bg="dark-crimson"]::before {
            background:
                radial-gradient(circle at 25% 30%, rgba(190,18,60,0.18) 0%, transparent 55%),
                radial-gradient(circle at 75% 70%, rgba(239,68,68,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(220,38,38,0.07) 0%, transparent 55%);
        }
        /* Amber */
        body[data-bg="dark-amber-glow"] {
            background: #0b0700;
            background-attachment: fixed;
        }
        body[data-bg="dark-amber-glow"]::before {
            background:
                radial-gradient(circle at 30% 30%, rgba(245,158,11,0.16) 0%, transparent 55%),
                radial-gradient(circle at 70% 70%, rgba(251,191,36,0.1) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(217,119,6,0.06) 0%, transparent 55%);
        }
        /* Volcano */
        body[data-bg="dark-volcano"] {
            background: #0f0100;
            background-attachment: fixed;
        }
        body[data-bg="dark-volcano"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(239,68,68,0.2) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(249,115,22,0.14) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(220,38,38,0.06) 0%, transparent 55%);
        }
        /* Arctic */
        body[data-bg="dark-arctic"] {
            background: #001018;
            background-attachment: fixed;
        }
        body[data-bg="dark-arctic"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(147,197,253,0.12) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(186,230,253,0.08) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(56,189,248,0.05) 0%, transparent 55%);
        }
        /* Ice */
        body[data-bg="dark-ice"] {
            background: #00080e;
            background-attachment: fixed;
        }
        body[data-bg="dark-ice"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(186,230,253,0.14) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(103,232,249,0.08) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(6,182,212,0.05) 0%, transparent 55%);
        }
        /* Teal */
        body[data-bg="dark-teal-depths"] {
            background: #000e10;
            background-attachment: fixed;
        }
        body[data-bg="dark-teal-depths"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(20,184,166,0.16) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(6,182,212,0.1) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(16,185,129,0.06) 0%, transparent 55%);
        }
        /* Ocean */
        body[data-bg="dark-ocean"] {
            background: #000814;
            background-attachment: fixed;
        }
        body[data-bg="dark-ocean"]::before {
            background:
                radial-gradient(circle at 15% 25%, rgba(14,165,233,0.16) 0%, transparent 55%),
                radial-gradient(circle at 85% 75%, rgba(6,182,212,0.1) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(56,189,248,0.06) 0%, transparent 55%);
        }
        /* Aqua */
        body[data-bg="dark-aqua"] {
            background: #000c12;
            background-attachment: fixed;
        }
        body[data-bg="dark-aqua"]::before {
            background:
                radial-gradient(circle at 30% 30%, rgba(6,182,212,0.18) 0%, transparent 55%),
                radial-gradient(circle at 70% 70%, rgba(20,184,166,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(14,165,233,0.07) 0%, transparent 55%);
        }
        /* Sapphire */
        body[data-bg="dark-sapphire"] {
            background: #000814;
            background-attachment: fixed;
        }
        body[data-bg="dark-sapphire"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(37,99,235,0.18) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(59,130,246,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(96,165,250,0.07) 0%, transparent 55%);
        }
        /* Cobalt */
        body[data-bg="dark-cobalt"] {
            background: #000610;
            background-attachment: fixed;
        }
        body[data-bg="dark-cobalt"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(29,78,216,0.2) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(59,130,246,0.14) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(37,99,235,0.07) 0%, transparent 55%);
        }
        /* Steel */
        body[data-bg="dark-steel"] {
            background: #080c10;
            background-attachment: fixed;
        }
        body[data-bg="dark-steel"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(100,116,139,0.12) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(148,163,184,0.08) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(71,85,105,0.05) 0%, transparent 55%);
        }
        /* Slate */
        body[data-bg="dark-slate-glow"] {
            background: #080a0e;
            background-attachment: fixed;
        }
        body[data-bg="dark-slate-glow"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(100,116,139,0.1) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(74,158,255,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(99,102,241,0.04) 0%, transparent 55%);
        }
        /* Frost */
        body[data-bg="dark-frost"] {
            background: #000610;
            background-attachment: fixed;
        }
        body[data-bg="dark-frost"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(147,197,253,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(186,230,253,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(56,189,248,0.04) 0%, transparent 55%);
        }
        /* Forest */
        body[data-bg="dark-forest"] {
            background: #000e04;
            background-attachment: fixed;
        }
        body[data-bg="dark-forest"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(34,197,94,0.14) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(16,185,129,0.1) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(22,163,74,0.05) 0%, transparent 55%);
        }
        /* Matrix */
        body[data-bg="dark-matrix"] {
            background: #000a02;
            background-attachment: fixed;
        }
        body[data-bg="dark-matrix"]::before {
            background:
                radial-gradient(circle at 50% 0%, rgba(34,197,94,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 100%, rgba(16,185,129,0.08) 0%, transparent 55%);
        }
        /* Jungle */
        body[data-bg="dark-jungle"] {
            background: #000c02;
            background-attachment: fixed;
        }
        body[data-bg="dark-jungle"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(22,163,74,0.16) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(34,197,94,0.1) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(16,185,129,0.06) 0%, transparent 55%);
        }
        /* Emerald */
        body[data-bg="dark-emerald-deep"] {
            background: #00100a;
            background-attachment: fixed;
        }
        body[data-bg="dark-emerald-deep"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(16,185,129,0.18) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(20,184,166,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(34,197,94,0.07) 0%, transparent 55%);
        }
        /* Lime */
        body[data-bg="dark-lime-glow"] {
            background: #060e00;
            background-attachment: fixed;
        }
        body[data-bg="dark-lime-glow"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(132,204,22,0.14) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(163,230,53,0.08) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(101,163,13,0.05) 0%, transparent 55%);
        }
        /* Mint */
        body[data-bg="dark-mint"] {
            background: #000e08;
            background-attachment: fixed;
        }
        body[data-bg="dark-mint"]::before {
            background:
                radial-gradient(circle at 30% 30%, rgba(52,211,153,0.16) 0%, transparent 55%),
                radial-gradient(circle at 70% 70%, rgba(16,185,129,0.1) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(34,197,94,0.06) 0%, transparent 55%);
        }
        /* Hunter */
        body[data-bg="dark-hunter"] {
            background: #020a02;
            background-attachment: fixed;
        }
        body[data-bg="dark-hunter"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(21,128,61,0.18) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(22,163,74,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(34,197,94,0.06) 0%, transparent 55%);
        }
        /* Cypress */
        body[data-bg="dark-cypress"] {
            background: #030804;
            background-attachment: fixed;
        }
        body[data-bg="dark-cypress"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(20,83,45,0.2) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(22,163,74,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(34,197,94,0.05) 0%, transparent 55%);
        }
        /* Seaweed */
        body[data-bg="dark-seaweed"] {
            background: #000c08;
            background-attachment: fixed;
        }
        body[data-bg="dark-seaweed"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(16,185,129,0.16) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(6,182,212,0.1) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(20,184,166,0.06) 0%, transparent 55%);
        }
        /* Bio */
        body[data-bg="dark-bio"] {
            background: #020e04;
            background-attachment: fixed;
        }
        body[data-bg="dark-bio"]::before {
            background:
                radial-gradient(circle at 15% 25%, rgba(132,204,22,0.12) 0%, transparent 55%),
                radial-gradient(circle at 85% 75%, rgba(34,197,94,0.08) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(16,185,129,0.05) 0%, transparent 55%);
        }
        /* Amethyst */
        body[data-bg="dark-amethyst"] {
            background: #08000e;
            background-attachment: fixed;
        }
        body[data-bg="dark-amethyst"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(168,85,247,0.2) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(139,92,246,0.14) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(167,139,250,0.07) 0%, transparent 55%);
        }
        /* Orchid */
        body[data-bg="dark-orchid"] {
            background: #0a000c;
            background-attachment: fixed;
        }
        body[data-bg="dark-orchid"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(192,38,211,0.18) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(168,85,247,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(236,72,153,0.07) 0%, transparent 55%);
        }
        /* Rose */
        body[data-bg="dark-rose-dark"] {
            background: #0e0008;
            background-attachment: fixed;
        }
        body[data-bg="dark-rose-dark"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(244,63,94,0.16) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(236,72,153,0.1) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(251,113,133,0.06) 0%, transparent 55%);
        }
        /* Fuchsia */
        body[data-bg="dark-fuchsia"] {
            background: #0c0008;
            background-attachment: fixed;
        }
        body[data-bg="dark-fuchsia"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(217,70,239,0.18) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(192,38,211,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(168,85,247,0.07) 0%, transparent 55%);
        }
        /* Plum */
        body[data-bg="dark-plum"] {
            background: #06000a;
            background-attachment: fixed;
        }
        body[data-bg="dark-plum"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(107,33,168,0.2) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(139,92,246,0.14) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(168,85,247,0.07) 0%, transparent 55%);
        }
        /* Magenta */
        body[data-bg="dark-magenta"] {
            background: #0e0010;
            background-attachment: fixed;
        }
        body[data-bg="dark-magenta"]::before {
            background:
                radial-gradient(circle at 15% 25%, rgba(236,72,153,0.16) 0%, transparent 55%),
                radial-gradient(circle at 85% 75%, rgba(217,70,239,0.1) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(192,38,211,0.06) 0%, transparent 55%);
        }
        /* Mulberry */
        body[data-bg="dark-mulberry"] {
            background: #08000c;
            background-attachment: fixed;
        }
        body[data-bg="dark-mulberry"]::before {
            background:
                radial-gradient(circle at 25% 30%, rgba(134,25,143,0.18) 0%, transparent 55%),
                radial-gradient(circle at 75% 70%, rgba(168,85,247,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(192,38,211,0.06) 0%, transparent 55%);
        }
        /* Lavender */
        body[data-bg="dark-lavender"] {
            background: #060010;
            background-attachment: fixed;
        }
        body[data-bg="dark-lavender"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(167,139,250,0.16) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(139,92,246,0.1) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(99,102,241,0.06) 0%, transparent 55%);
        }
        /* Indigo */
        body[data-bg="dark-indigo-deep"] {
            background: #04000e;
            background-attachment: fixed;
        }
        body[data-bg="dark-indigo-deep"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(99,102,241,0.2) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(79,70,229,0.14) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(139,92,246,0.07) 0%, transparent 55%);
        }
        /* Grape */
        body[data-bg="dark-grape"] {
            background: #080010;
            background-attachment: fixed;
        }
        body[data-bg="dark-grape"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(124,58,237,0.18) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(139,92,246,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(168,85,247,0.07) 0%, transparent 55%);
        }
        body[data-bg="dark-grid"] { background-color: #080c14; background-image: linear-gradient(rgba(74,158,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(74,158,255,0.08) 1px, transparent 1px); background-size: 40px 40px; background-attachment: fixed; }
        body[data-bg="dark-hex"] { background-color: #060a12; background-image: radial-gradient(circle, rgba(74,158,255,0.12) 1px, transparent 1px); background-size: 20px 34px; background-attachment: fixed; }
        body[data-bg="dark-cross"] { background-color: #080a10; background-image: linear-gradient(rgba(99,102,241,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,0.08) 1px, transparent 1px); background-size: 24px 24px; background-attachment: fixed; }
        body[data-bg="dark-lines"] { background-color: #06080e; background-image: repeating-linear-gradient(0deg, transparent, transparent 22px, rgba(74,158,255,0.07) 22px, rgba(74,158,255,0.07) 23px); background-attachment: fixed; }
        body[data-bg="dark-diamonds"] { background-color: #080c16; background-image: linear-gradient(45deg, rgba(99,102,241,0.08) 25%, transparent 25%, transparent 75%, rgba(99,102,241,0.08) 75%), linear-gradient(45deg, rgba(99,102,241,0.08) 25%, transparent 25%, transparent 75%, rgba(99,102,241,0.08) 75%); background-size: 30px 30px; background-position: 0 0, 15px 15px; background-attachment: fixed; }
        body[data-bg="dark-weave"] { background-color: #06080c; background-image: repeating-linear-gradient(45deg, rgba(74,158,255,0.06) 0, rgba(74,158,255,0.06) 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, rgba(74,158,255,0.06) 0, rgba(74,158,255,0.06) 1px, transparent 0, transparent 50%); background-size: 20px 20px; background-attachment: fixed; }
        body[data-bg="dark-circuit"] { background-color: #040810; background-image: linear-gradient(rgba(6,182,212,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(6,182,212,0.1) 1px, transparent 1px), radial-gradient(circle, rgba(6,182,212,0.15) 1px, transparent 1px); background-size: 60px 60px, 60px 60px, 30px 30px; background-attachment: fixed; }
        body[data-bg="dark-mesh"] { background-color: #080a12; background-image: linear-gradient(rgba(139,92,246,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(139,92,246,0.07) 1px, transparent 1px); background-size: 16px 16px; background-attachment: fixed; }
        body[data-bg="dark-stripes"] { background-color: #06080c; background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(74,158,255,0.05) 10px, rgba(74,158,255,0.05) 11px); background-attachment: fixed; }
        body[data-bg="dark-checkers"] { background-color: #060810; background-image: linear-gradient(45deg, rgba(74,158,255,0.05) 25%, transparent 25%, transparent 75%, rgba(74,158,255,0.05) 75%), linear-gradient(45deg, rgba(74,158,255,0.05) 25%, transparent 25%, transparent 75%, rgba(74,158,255,0.05) 75%); background-size: 40px 40px; background-position: 0 0, 20px 20px; background-attachment: fixed; }
        /* Aurora II */
        body[data-bg="dark-aurora-2"] {
            background: #020c0e;
            background-attachment: fixed;
        }
        body[data-bg="dark-aurora-2"]::before {
            background:
                radial-gradient(circle at 10% 20%, rgba(16,185,129,0.16) 0%, transparent 55%),
                radial-gradient(circle at 90% 80%, rgba(99,102,241,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(6,182,212,0.08) 0%, transparent 55%);
        }
        /* Prism */
        body[data-bg="dark-prism"] {
            background: #040010;
            background-attachment: fixed;
        }
        body[data-bg="dark-prism"]::before {
            background:
                radial-gradient(circle at 15% 15%, rgba(239,68,68,0.12) 0%, transparent 55%),
                radial-gradient(circle at 85% 15%, rgba(34,197,94,0.1) 0%, transparent 55%),
                radial-gradient(circle at 15% 85%, rgba(59,130,246,0.1) 0%, transparent 55%),
                radial-gradient(circle at 85% 85%, rgba(168,85,247,0.08) 0%, transparent 55%);
        }
        /* Oil Slick */
        body[data-bg="dark-oil"] {
            background: #050508;
            background-attachment: fixed;
        }
        body[data-bg="dark-oil"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(236,72,153,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 20%, rgba(6,182,212,0.1) 0%, transparent 55%),
                radial-gradient(circle at 20% 80%, rgba(168,85,247,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(249,115,22,0.08) 0%, transparent 55%);
        }
        /* Northern */
        body[data-bg="dark-northern"] {
            background: #000e08;
            background-attachment: fixed;
        }
        body[data-bg="dark-northern"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(16,185,129,0.14) 0%, transparent 55%),
                radial-gradient(circle at 80% 20%, rgba(99,102,241,0.1) 0%, transparent 55%),
                radial-gradient(circle at 50% 80%, rgba(6,182,212,0.08) 0%, transparent 55%);
        }
        /* Borealis */
        body[data-bg="dark-borealis"] {
            background: #010810;
            background-attachment: fixed;
        }
        body[data-bg="dark-borealis"]::before {
            background:
                radial-gradient(circle at 15% 15%, rgba(6,182,212,0.16) 0%, transparent 55%),
                radial-gradient(circle at 85% 85%, rgba(16,185,129,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(99,102,241,0.07) 0%, transparent 55%);
        }
        /* Aurora III */
        body[data-bg="dark-aurora-3"] {
            background: #000a0a;
            background-attachment: fixed;
        }
        body[data-bg="dark-aurora-3"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(20,184,166,0.16) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(16,185,129,0.1) 0%, transparent 55%),
                radial-gradient(circle at 50% 20%, rgba(99,102,241,0.08) 0%, transparent 55%);
        }
        /* Spectrum */
        body[data-bg="dark-spectrum"] {
            background: #050008;
            background-attachment: fixed;
        }
        body[data-bg="dark-spectrum"]::before {
            background:
                radial-gradient(circle at 10% 50%, rgba(239,68,68,0.1) 0%, transparent 55%),
                radial-gradient(circle at 50% 10%, rgba(34,197,94,0.1) 0%, transparent 55%),
                radial-gradient(circle at 90% 50%, rgba(59,130,246,0.1) 0%, transparent 55%),
                radial-gradient(circle at 50% 90%, rgba(168,85,247,0.08) 0%, transparent 55%);
        }
        /* Electric */
        body[data-bg="dark-electric"] {
            background: #020810;
            background-attachment: fixed;
        }
        body[data-bg="dark-electric"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(99,102,241,0.16) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(6,182,212,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(139,92,246,0.07) 0%, transparent 55%);
        }
        /* Hologram */
        body[data-bg="dark-hologram"] {
            background: #020610;
            background-attachment: fixed;
        }
        body[data-bg="dark-hologram"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(6,182,212,0.14) 0%, transparent 55%),
                radial-gradient(circle at 75% 25%, rgba(168,85,247,0.12) 0%, transparent 55%),
                radial-gradient(circle at 25% 75%, rgba(16,185,129,0.1) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(236,72,153,0.08) 0%, transparent 55%);
        }
        /* Plasma */
        body[data-bg="dark-plasma"] {
            background: #060008;
            background-attachment: fixed;
        }
        body[data-bg="dark-plasma"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(168,85,247,0.16) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(6,182,212,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(236,72,153,0.07) 0%, transparent 55%);
        }
        /* Charcoal */
        body[data-bg="dark-charcoal"] {
            background: #111111;
            background-attachment: fixed;
        }
        body[data-bg="dark-charcoal"]::before {
            background:
                radial-gradient(circle at 50% 50%, rgba(255,255,255,0.015) 0%, transparent 55%);
        }
        /* Obsidian */
        body[data-bg="dark-obsidian"] {
            background: #050505;
            background-attachment: fixed;
        }
        body[data-bg="dark-obsidian"]::before {
            background:
                radial-gradient(circle at 30% 30%, rgba(255,255,255,0.01) 0%, transparent 55%),
                radial-gradient(circle at 70% 70%, rgba(255,255,255,0.005) 0%, transparent 55%);
        }
        /* Jet */
        body[data-bg="dark-jet"] {
            background: #0a0a0a;
            background-attachment: fixed;
        }
        body[data-bg="dark-jet"]::before {
            background:
                radial-gradient(circle at 50% 50%, rgba(255,255,255,0.01) 0%, transparent 55%);
        }
        /* Onyx */
        body[data-bg="dark-onyx"] {
            background: #0c0c0c;
            background-attachment: fixed;
        }
        body[data-bg="dark-onyx"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(74,158,255,0.03) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(74,158,255,0.02) 0%, transparent 55%);
        }
        /* Pitch */
        body[data-bg="dark-pitch"] {
            background: #030303;
            background-attachment: fixed;
        }
        body[data-bg="dark-pitch"]::before {
            background:
                radial-gradient(circle at 50% 50%, rgba(255,255,255,0.008) 0%, transparent 55%);
        }
        /* Ink */
        body[data-bg="dark-ink"] {
            background: #070710;
            background-attachment: fixed;
        }
        body[data-bg="dark-ink"]::before {
            background:
                radial-gradient(circle at 30% 30%, rgba(99,102,241,0.05) 0%, transparent 55%),
                radial-gradient(circle at 70% 70%, rgba(99,102,241,0.03) 0%, transparent 55%);
        }
        /* Dim */
        body[data-bg="dark-dim"] {
            background: #0e0e14;
            background-attachment: fixed;
        }
        body[data-bg="dark-dim"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(74,158,255,0.04) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(99,102,241,0.03) 0%, transparent 55%);
        }
        /* Shade */
        body[data-bg="dark-shade"] {
            background: #0a0a12;
            background-attachment: fixed;
        }
        body[data-bg="dark-shade"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(100,116,139,0.05) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(71,85,105,0.03) 0%, transparent 55%);
        }
        /* Shadow */
        body[data-bg="dark-shadow"] {
            background: #060608;
            background-attachment: fixed;
        }
        body[data-bg="dark-shadow"]::before {
            background:
                radial-gradient(circle at 30% 30%, rgba(99,102,241,0.04) 0%, transparent 55%),
                radial-gradient(circle at 70% 70%, rgba(139,92,246,0.03) 0%, transparent 55%);
        }
        /* Dusk */
        body[data-bg="dark-dusk"] {
            background: #080810;
            background-attachment: fixed;
        }
        body[data-bg="dark-dusk"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(99,102,241,0.06) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(139,92,246,0.04) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(168,85,247,0.02) 0%, transparent 55%);
        }
        /* Cyberpunk */
        body[data-bg="dark-cyberpunk"] {
            background: #020210;
            background-attachment: fixed;
        }
        body[data-bg="dark-cyberpunk"]::before {
            background:
                radial-gradient(circle at 15% 15%, rgba(234,179,8,0.14) 0%, transparent 55%),
                radial-gradient(circle at 85% 85%, rgba(236,72,153,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(249,115,22,0.07) 0%, transparent 55%);
        }
        /* Retrowave */
        body[data-bg="dark-retrowave"] {
            background: #04000c;
            background-attachment: fixed;
        }
        body[data-bg="dark-retrowave"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(236,72,153,0.16) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(99,102,241,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(168,85,247,0.07) 0%, transparent 55%);
        }
        /* Vaporwave */
        body[data-bg="dark-vaporwave"] {
            background: #06000e;
            background-attachment: fixed;
        }
        body[data-bg="dark-vaporwave"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(236,72,153,0.14) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(139,92,246,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(99,102,241,0.07) 0%, transparent 55%);
        }
        /* Synthwave */
        body[data-bg="dark-synthwave"] {
            background: #04000e;
            background-attachment: fixed;
        }
        body[data-bg="dark-synthwave"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(168,85,247,0.16) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(236,72,153,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(99,102,241,0.07) 0%, transparent 55%);
        }
        /* Outrun */
        body[data-bg="dark-outrun"] {
            background: #02000e;
            background-attachment: fixed;
        }
        body[data-bg="dark-outrun"]::before {
            background:
                radial-gradient(circle at 15% 30%, rgba(236,72,153,0.18) 0%, transparent 55%),
                radial-gradient(circle at 85% 70%, rgba(99,102,241,0.14) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(168,85,247,0.07) 0%, transparent 55%);
        }
        /* Glitch */
        body[data-bg="dark-glitch"] {
            background: #040010;
            background-attachment: fixed;
        }
        body[data-bg="dark-glitch"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(6,182,212,0.14) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(236,72,153,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 20%, rgba(34,197,94,0.08) 0%, transparent 55%);
        }
        /* Stealth */
        body[data-bg="dark-stealth"] {
            background: #020408;
            background-attachment: fixed;
        }
        body[data-bg="dark-stealth"]::before {
            background:
                radial-gradient(circle at 30% 30%, rgba(30,41,59,0.3) 0%, transparent 55%),
                radial-gradient(circle at 70% 70%, rgba(15,23,42,0.3) 0%, transparent 55%);
        }
        /* Carbon */
        body[data-bg="dark-carbon"] {
            background: #080808;
            background-attachment: fixed;
        }
        body[data-bg="dark-carbon"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(255,255,255,0.015) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(255,255,255,0.01) 0%, transparent 55%);
        }
        /* Tungsten */
        body[data-bg="dark-tungsten"] {
            background: #0a0a08;
            background-attachment: fixed;
        }
        body[data-bg="dark-tungsten"]::before {
            background:
                radial-gradient(circle at 30% 30%, rgba(255,255,255,0.02) 0%, transparent 55%),
                radial-gradient(circle at 70% 70%, rgba(255,255,255,0.01) 0%, transparent 55%);
        }
        /* Midnight II */
        body[data-bg="dark-midnight-2"] {
            background: #000210;
            background-attachment: fixed;
        }
        body[data-bg="dark-midnight-2"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(30,64,175,0.18) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(37,99,235,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(59,130,246,0.06) 0%, transparent 55%);
        }
        /* Titan */
        body[data-bg="dark-titan"] {
            background: #080a00;
            background-attachment: fixed;
        }
        body[data-bg="dark-titan"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(234,179,8,0.12) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(245,158,11,0.08) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(251,191,36,0.04) 0%, transparent 55%);
        }
        /* Matrix II */
        body[data-bg="dark-matrix-2"] {
            background: #000800;
            background-attachment: fixed;
        }
        body[data-bg="dark-matrix-2"]::before {
            background:
                radial-gradient(circle at 50% 0%, rgba(34,197,94,0.15) 0%, transparent 55%),
                radial-gradient(circle at 50% 100%, rgba(22,163,74,0.08) 0%, transparent 55%);
        }
        /* Deep Blue */
        body[data-bg="dark-deep-blue"] {
            background: #000412;
            background-attachment: fixed;
        }
        body[data-bg="dark-deep-blue"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(29,78,216,0.2) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(37,99,235,0.14) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(59,130,246,0.07) 0%, transparent 55%);
        }
        /* Night Rose */
        body[data-bg="dark-midnight-rose"] {
            background: #0e0005;
            background-attachment: fixed;
        }
        body[data-bg="dark-midnight-rose"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(190,18,60,0.16) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(236,72,153,0.1) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(244,63,94,0.06) 0%, transparent 55%);
        }
        /* Toxic */
        body[data-bg="dark-toxic"] {
            background: #040a00;
            background-attachment: fixed;
        }
        body[data-bg="dark-toxic"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(132,204,22,0.16) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(34,197,94,0.1) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(163,230,53,0.06) 0%, transparent 55%);
        }
        /* UV */
        body[data-bg="dark-ultraviolet"] {
            background: #030010;
            background-attachment: fixed;
        }
        body[data-bg="dark-ultraviolet"]::before {
            background:
                radial-gradient(circle at 15% 15%, rgba(139,92,246,0.2) 0%, transparent 55%),
                radial-gradient(circle at 85% 85%, rgba(99,102,241,0.14) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(167,139,250,0.07) 0%, transparent 55%);
        }
        /* Phosphor */
        body[data-bg="dark-phosphor"] {
            background: #000e06;
            background-attachment: fixed;
        }
        body[data-bg="dark-phosphor"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(74,222,128,0.16) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(34,197,94,0.1) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(16,185,129,0.06) 0%, transparent 55%);
        }
        /* Solar */
        body[data-bg="dark-solar"] {
            background: #0e0800;
            background-attachment: fixed;
        }
        body[data-bg="dark-solar"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(251,191,36,0.16) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(249,115,22,0.1) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(245,158,11,0.06) 0%, transparent 55%);
        }
        /* Moonlight */
        body[data-bg="dark-moonlight"] {
            background: #040608;
            background-attachment: fixed;
        }
        body[data-bg="dark-moonlight"]::before {
            background:
                radial-gradient(circle at 30% 30%, rgba(186,230,253,0.08) 0%, transparent 55%),
                radial-gradient(circle at 70% 70%, rgba(147,197,253,0.06) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(96,165,250,0.04) 0%, transparent 55%);
        }
        /* GAN Cube */
        body[data-bg="dark-gan-cube"] {
            background: #000510;
            background-attachment: fixed;
        }
        body[data-bg="dark-gan-cube"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(6,182,212,0.18) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(99,102,241,0.12) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(16,185,129,0.07) 0%, transparent 55%);
        }

        /* GAN logo background — dark */
        body[data-bg="dark-gan-logo"] {
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjEwODAiIHZpZXdCb3g9IjAgMCAxOTIwIDEwODAiPgogIDxkZWZzPgogICAgPHJhZGlhbEdyYWRpZW50IGlkPSJiZyIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzAlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMTgyOCIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDA1MTAiLz4KICAgIDwvcmFkaWFsR3JhZGllbnQ+CiAgICA8cmFkaWFsR3JhZGllbnQgaWQ9Imdsb3ciIGN4PSI1MCUiIGN5PSIzMyUiIHI9IjQ1JSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwNmI2ZDQiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNmI2ZDQiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPC9yYWRpYWxHcmFkaWVudD4KICAgIDxmaWx0ZXIgaWQ9ImJsdXItZ2xvdyI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjE0IiByZXN1bHQ9ImJsdXIiLz4KICAgICAgPGZlTWVyZ2U+PGZlTWVyZ2VOb2RlIGluPSJibHVyIi8+PGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIi8+PC9mZU1lcmdlPgogICAgPC9maWx0ZXI+CiAgPC9kZWZzPgogIDxyZWN0IHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjEwODAiIGZpbGw9InVybCgjYmcpIi8+CiAgPGVsbGlwc2UgY3g9Ijk2MCIgY3k9IjM1NSIgcng9IjQ2MCIgcnk9IjIyMCIgZmlsbD0idXJsKCNnbG93KSIvPgogIDx0ZXh0IHg9Ijk2MCIgeT0iNDYwIiBmb250LWZhbWlseT0iQXJpYWwgQmxhY2ssIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXdlaWdodD0iOTAwIiBmb250LXNpemU9IjMxMCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgbGV0dGVyLXNwYWNpbmc9Ii02IiBmaWxsPSIjMDZiNmQ0IiBmaWxsLW9wYWNpdHk9IjAuMDciIGZpbHRlcj0idXJsKCNibHVyLWdsb3cpIj5HQU48L3RleHQ+CiAgPHRleHQgeD0iOTYwIiB5PSI0NjAiIGZvbnQtZmFtaWx5PSJBcmlhbCBCbGFjaywgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSI5MDAiIGZvbnQtc2l6ZT0iMzEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBsZXR0ZXItc3BhY2luZz0iLTYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzA2YjZkNCIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1vcGFjaXR5PSIwLjMiPkdBTjwvdGV4dD4KICA8dGV4dCB4PSI5NjAiIHk9Ijg1MCIgZm9udC1mYW1pbHk9IkFyaWFsIEJsYWNrLCBBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC13ZWlnaHQ9IjkwMCIgZm9udC1zaXplPSIxMTAiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGxldHRlci1zcGFjaW5nPSIzOCIgZmlsbD0iIzA2YjZkNCIgZmlsbC1vcGFjaXR5PSIwLjA2IiBmaWx0ZXI9InVybCgjYmx1ci1nbG93KSI+Q1VCRTwvdGV4dD4KICA8dGV4dCB4PSI5NjAiIHk9Ijg1MCIgZm9udC1mYW1pbHk9IkFyaWFsIEJsYWNrLCBBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC13ZWlnaHQ9IjkwMCIgZm9udC1zaXplPSIxMTAiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGxldHRlci1zcGFjaW5nPSIzOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDZiNmQ0IiBzdHJva2Utd2lkdGg9IjAuOCIgc3Ryb2tlLW9wYWNpdHk9IjAuMjIiPkNVQkU8L3RleHQ+Cjwvc3ZnPg==') center center / cover no-repeat fixed;
        }
        body[data-bg="dark-gan-logo"]::before { background: none; }
        body[data-bg="dark-gan-logo"]::after  { background: none; }
        body[data-bg="dark-gan-logo"] .app-background-image { display: none; }

        /* ═══════════════════════════════════════════════════════════
           NEW LIGHT BACKGROUNDS (100)
        ═══════════════════════════════════════════════════════════ */

        /* Azure */
        body.light-theme[data-bg="light-azure"] {
            background: #eff6ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-azure"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(59,130,246,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(14,165,233,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(96,165,250,0.05) 0%, transparent 55%);
        }
        /* Cobalt */
        body.light-theme[data-bg="light-cobalt-l"] {
            background: #eff8ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-cobalt-l"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(29,78,216,0.1) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(59,130,246,0.07) 0%, transparent 55%);
        }
        /* Navy */
        body.light-theme[data-bg="light-navy-l"] {
            background: #f0f4ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-navy-l"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(30,64,175,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(37,99,235,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(59,130,246,0.04) 0%, transparent 55%);
        }
        /* Periwinkle */
        body.light-theme[data-bg="light-periwinkle"] {
            background: #f0f0ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-periwinkle"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(99,102,241,0.1) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(139,92,246,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(79,70,229,0.04) 0%, transparent 55%);
        }
        /* Denim */
        body.light-theme[data-bg="light-denim"] {
            background: #eff5ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-denim"]::before {
            background:
                radial-gradient(circle at 30% 30%, rgba(37,99,235,0.1) 0%, transparent 55%),
                radial-gradient(circle at 70% 70%, rgba(59,130,246,0.07) 0%, transparent 55%);
        }
        /* Cornflower */
        body.light-theme[data-bg="light-cornflower"] {
            background: #eef3ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-cornflower"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(99,102,241,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(129,140,248,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(165,180,252,0.04) 0%, transparent 55%);
        }
        /* Ice Blue */
        body.light-theme[data-bg="light-iceblue"] {
            background: #f0faff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-iceblue"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(56,189,248,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(14,165,233,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(6,182,212,0.04) 0%, transparent 55%);
        }
        /* Powder */
        body.light-theme[data-bg="light-powder"] {
            background: #f0f9ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-powder"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(147,197,253,0.12) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(186,230,253,0.08) 0%, transparent 55%);
        }
        /* Steel */
        body.light-theme[data-bg="light-steel-l"] {
            background: #f1f5f9;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-steel-l"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(100,116,139,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(148,163,184,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(71,85,105,0.04) 0%, transparent 55%);
        }
        /* Horizon */
        body.light-theme[data-bg="light-horizon"] {
            background: #eff8ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-horizon"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(56,189,248,0.12) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(14,165,233,0.08) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(59,130,246,0.05) 0%, transparent 55%);
        }
        /* Sage */
        body.light-theme[data-bg="light-sage"] {
            background: #f0fdf4;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-sage"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(34,197,94,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(16,185,129,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(22,163,74,0.04) 0%, transparent 55%);
        }
        /* Mint */
        body.light-theme[data-bg="light-mint-l"] {
            background: #f0fdfb;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-mint-l"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(20,184,166,0.1) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(16,185,129,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(6,182,212,0.04) 0%, transparent 55%);
        }
        /* Spring */
        body.light-theme[data-bg="light-spring"] {
            background: #f7fef0;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-spring"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(132,204,22,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(163,230,53,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(101,163,13,0.04) 0%, transparent 55%);
        }
        /* Fern */
        body.light-theme[data-bg="light-fern"] {
            background: #f0fdf4;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-fern"]::before {
            background:
                radial-gradient(circle at 30% 30%, rgba(22,163,74,0.1) 0%, transparent 55%),
                radial-gradient(circle at 70% 70%, rgba(34,197,94,0.07) 0%, transparent 55%);
        }
        /* Meadow */
        body.light-theme[data-bg="light-meadow"] {
            background: #f3fef3;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-meadow"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(21,128,61,0.09) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(34,197,94,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(16,185,129,0.04) 0%, transparent 55%);
        }
        /* Jade */
        body.light-theme[data-bg="light-jade"] {
            background: #f0fdf8;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-jade"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(16,185,129,0.1) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(20,184,166,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(52,211,153,0.04) 0%, transparent 55%);
        }
        /* Pistachio */
        body.light-theme[data-bg="light-pistachio"] {
            background: #f5fef0;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-pistachio"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(132,204,22,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(34,197,94,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(163,230,53,0.04) 0%, transparent 55%);
        }
        /* Eucalyptus */
        body.light-theme[data-bg="light-eucalyptus"] {
            background: #f0fdf6;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-eucalyptus"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(20,184,166,0.1) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(16,185,129,0.07) 0%, transparent 55%);
        }
        /* Celery */
        body.light-theme[data-bg="light-celery"] {
            background: #f6fef0;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-celery"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(163,230,53,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(132,204,22,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(101,163,13,0.04) 0%, transparent 55%);
        }
        /* Tropical */
        body.light-theme[data-bg="light-tropical"] {
            background: #f0fefc;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-tropical"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(6,182,212,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(20,184,166,0.08) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(16,185,129,0.05) 0%, transparent 55%);
        }
        /* Lilac */
        body.light-theme[data-bg="light-lilac"] {
            background: #faf5ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-lilac"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(168,85,247,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(139,92,246,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(167,139,250,0.04) 0%, transparent 55%);
        }
        /* Lavender */
        body.light-theme[data-bg="light-lavender-l"] {
            background: #f5f3ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-lavender-l"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(139,92,246,0.1) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(99,102,241,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(167,139,250,0.04) 0%, transparent 55%);
        }
        /* Violet */
        body.light-theme[data-bg="light-violet-l"] {
            background: #fdf4ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-violet-l"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(192,38,211,0.09) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(168,85,247,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(217,70,239,0.04) 0%, transparent 55%);
        }
        /* Mauve */
        body.light-theme[data-bg="light-mauve"] {
            background: #fef0ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-mauve"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(192,38,211,0.1) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(236,72,153,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(168,85,247,0.04) 0%, transparent 55%);
        }
        /* Blush */
        body.light-theme[data-bg="light-blush"] {
            background: #fff0f5;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-blush"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(236,72,153,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(244,63,94,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(251,113,133,0.04) 0%, transparent 55%);
        }
        /* Rose */
        body.light-theme[data-bg="light-rose-l"] {
            background: #fff1f2;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-rose-l"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(244,63,94,0.1) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(251,113,133,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(253,164,175,0.04) 0%, transparent 55%);
        }
        /* Orchid */
        body.light-theme[data-bg="light-orchid-l"] {
            background: #fdf0ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-orchid-l"]::before {
            background:
                radial-gradient(circle at 30% 30%, rgba(192,38,211,0.1) 0%, transparent 55%),
                radial-gradient(circle at 70% 70%, rgba(168,85,247,0.07) 0%, transparent 55%);
        }
        /* Wisteria */
        body.light-theme[data-bg="light-wisteria"] {
            background: #f8f0ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-wisteria"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(139,92,246,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(167,139,250,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(196,181,253,0.04) 0%, transparent 55%);
        }
        /* Amethyst */
        body.light-theme[data-bg="light-amethyst-l"] {
            background: #f7f0ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-amethyst-l"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(168,85,247,0.1) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(139,92,246,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(167,139,250,0.04) 0%, transparent 55%);
        }
        /* Plum */
        body.light-theme[data-bg="light-plum-l"] {
            background: #faf0ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-plum-l"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(107,33,168,0.09) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(139,92,246,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(168,85,247,0.04) 0%, transparent 55%);
        }
        /* Peach */
        body.light-theme[data-bg="light-peach"] {
            background: #fff7f0;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-peach"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(249,115,22,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(251,191,36,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(252,211,77,0.04) 0%, transparent 55%);
        }
        /* Apricot */
        body.light-theme[data-bg="light-apricot"] {
            background: #fff5ef;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-apricot"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(249,115,22,0.1) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(234,88,12,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(245,158,11,0.04) 0%, transparent 55%);
        }
        /* Cantaloupe */
        body.light-theme[data-bg="light-cantaloupe"] {
            background: #fff8f0;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-cantaloupe"]::before {
            background:
                radial-gradient(circle at 30% 30%, rgba(251,191,36,0.1) 0%, transparent 55%),
                radial-gradient(circle at 70% 70%, rgba(245,158,11,0.07) 0%, transparent 55%);
        }
        /* Honey */
        body.light-theme[data-bg="light-honey"] {
            background: #fffaf0;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-honey"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(217,119,6,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(245,158,11,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(251,191,36,0.04) 0%, transparent 55%);
        }
        /* Butter */
        body.light-theme[data-bg="light-butter"] {
            background: #fffef0;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-butter"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(234,179,8,0.1) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(251,191,36,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(252,211,77,0.04) 0%, transparent 55%);
        }
        /* Lemon */
        body.light-theme[data-bg="light-lemon"] {
            background: #ffffe8;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-lemon"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(234,179,8,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(163,230,53,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(252,211,77,0.04) 0%, transparent 55%);
        }
        /* Sunshine */
        body.light-theme[data-bg="light-sunshine"] {
            background: #fffde8;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-sunshine"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(251,191,36,0.12) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(234,179,8,0.08) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(245,158,11,0.05) 0%, transparent 55%);
        }
        /* Tangerine */
        body.light-theme[data-bg="light-tangerine"] {
            background: #fff4ee;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-tangerine"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(234,88,12,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(249,115,22,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(251,146,60,0.04) 0%, transparent 55%);
        }
        /* Melon */
        body.light-theme[data-bg="light-melon"] {
            background: #fff5f0;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-melon"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(249,115,22,0.1) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(251,191,36,0.07) 0%, transparent 55%);
        }
        /* Sorbet */
        body.light-theme[data-bg="light-sorbet"] {
            background: #fff0f5;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-sorbet"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(244,63,94,0.09) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(249,115,22,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(251,191,36,0.04) 0%, transparent 55%);
        }
        /* Snow */
        body.light-theme[data-bg="light-snow"] {
            background: #ffffff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-snow"]::before {
            background:
                radial-gradient(circle at 30% 30%, rgba(0,0,0,0.015) 0%, transparent 55%),
                radial-gradient(circle at 70% 70%, rgba(0,0,0,0.01) 0%, transparent 55%);
        }
        /* Paper */
        body.light-theme[data-bg="light-paper"] {
            background: #fafaf8;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-paper"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(0,0,0,0.02) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(0,0,0,0.01) 0%, transparent 55%);
        }
        /* Cotton */
        body.light-theme[data-bg="light-cotton"] {
            background: #fdfeff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-cotton"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(56,189,248,0.04) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(99,102,241,0.03) 0%, transparent 55%);
        }
        /* Chalk */
        body.light-theme[data-bg="light-chalk"] {
            background: #f8f8f8;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-chalk"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(0,0,0,0.02) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(0,0,0,0.015) 0%, transparent 55%);
        }
        /* Pearl */
        body.light-theme[data-bg="light-pearl"] {
            background: #fefeff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-pearl"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(99,102,241,0.04) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(139,92,246,0.03) 0%, transparent 55%);
        }
        /* Linen */
        body.light-theme[data-bg="light-linen"] {
            background: #fdf8f4;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-linen"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(217,119,6,0.05) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(245,158,11,0.03) 0%, transparent 55%);
        }
        /* Parchment */
        body.light-theme[data-bg="light-parchment"] {
            background: #fdf6e8;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-parchment"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(217,119,6,0.07) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(245,158,11,0.05) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(234,179,8,0.03) 0%, transparent 55%);
        }
        /* Alabaster */
        body.light-theme[data-bg="light-alabaster"] {
            background: #f9f8f6;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-alabaster"]::before {
            background:
                radial-gradient(circle at 30% 30%, rgba(0,0,0,0.015) 0%, transparent 55%),
                radial-gradient(circle at 70% 70%, rgba(0,0,0,0.01) 0%, transparent 55%);
        }
        /* Ghost */
        body.light-theme[data-bg="light-ghost"] {
            background: #f7f8ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-ghost"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(99,102,241,0.04) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(139,92,246,0.03) 0%, transparent 55%);
        }
        /* Mist */
        body.light-theme[data-bg="light-mist"] {
            background: #f5f8ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-mist"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(56,189,248,0.06) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(99,102,241,0.04) 0%, transparent 55%);
        }
        body.light-theme[data-bg="light-grid"] { background-color: #f8faff; background-image: linear-gradient(rgba(99,102,241,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,0.08) 1px, transparent 1px); background-size: 40px 40px; background-attachment: fixed; }
        body.light-theme[data-bg="light-dots"] { background-color: #f8f9fc; background-image: radial-gradient(circle, rgba(99,102,241,0.15) 1px, transparent 1px); background-size: 24px 24px; background-attachment: fixed; }
        body.light-theme[data-bg="light-lines-l"] { background-color: #f9fafc; background-image: repeating-linear-gradient(0deg, transparent, transparent 22px, rgba(99,102,241,0.08) 22px, rgba(99,102,241,0.08) 23px); background-attachment: fixed; }
        body.light-theme[data-bg="light-diamonds-l"] { background-color: #f8faff; background-image: linear-gradient(45deg, rgba(99,102,241,0.07) 25%, transparent 25%, transparent 75%, rgba(99,102,241,0.07) 75%), linear-gradient(45deg, rgba(99,102,241,0.07) 25%, transparent 25%, transparent 75%, rgba(99,102,241,0.07) 75%); background-size: 30px 30px; background-position: 0 0, 15px 15px; background-attachment: fixed; }
        body.light-theme[data-bg="light-cross-l"] { background-color: #f9fbff; background-image: linear-gradient(rgba(59,130,246,0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,0.09) 1px, transparent 1px); background-size: 24px 24px; background-attachment: fixed; }
        body.light-theme[data-bg="light-weave-l"] { background-color: #f8f9fb; background-image: repeating-linear-gradient(45deg, rgba(99,102,241,0.07) 0, rgba(99,102,241,0.07) 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, rgba(99,102,241,0.07) 0, rgba(99,102,241,0.07) 1px, transparent 0, transparent 50%); background-size: 20px 20px; background-attachment: fixed; }
        body.light-theme[data-bg="light-hex-l"] { background-color: #f9fafd; background-image: radial-gradient(circle, rgba(99,102,241,0.12) 1px, transparent 1px); background-size: 20px 34px; background-attachment: fixed; }
        body.light-theme[data-bg="light-stripes-l"] { background-color: #f8fafc; background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(99,102,241,0.06) 10px, rgba(99,102,241,0.06) 11px); background-attachment: fixed; }
        body.light-theme[data-bg="light-mesh-l"] { background-color: #f8f9fd; background-image: linear-gradient(rgba(139,92,246,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(139,92,246,0.07) 1px, transparent 1px); background-size: 16px 16px; background-attachment: fixed; }
        body.light-theme[data-bg="light-mosaic"] { background-color: #f9faff; background-image: linear-gradient(45deg, rgba(59,130,246,0.06) 25%, transparent 25%, transparent 75%, rgba(59,130,246,0.06) 75%), linear-gradient(45deg, rgba(59,130,246,0.06) 25%, transparent 25%, transparent 75%, rgba(59,130,246,0.06) 75%); background-size: 40px 40px; background-position: 0 0, 20px 20px; background-attachment: fixed; }
        /* Aqua */
        body.light-theme[data-bg="light-aqua-l"] {
            background: #f0fefe;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-aqua-l"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(6,182,212,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(20,184,166,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(14,165,233,0.04) 0%, transparent 55%);
        }
        /* Seafoam */
        body.light-theme[data-bg="light-seafoam"] {
            background: #f0fefc;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-seafoam"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(20,184,166,0.1) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(52,211,153,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(16,185,129,0.04) 0%, transparent 55%);
        }
        /* Turquoise */
        body.light-theme[data-bg="light-turquoise"] {
            background: #f0fdfd;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-turquoise"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(6,182,212,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(20,184,166,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(103,232,249,0.04) 0%, transparent 55%);
        }
        /* Teal */
        body.light-theme[data-bg="light-teal-l"] {
            background: #f0fdf9;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-teal-l"]::before {
            background:
                radial-gradient(circle at 30% 30%, rgba(20,184,166,0.1) 0%, transparent 55%),
                radial-gradient(circle at 70% 70%, rgba(16,185,129,0.07) 0%, transparent 55%);
        }
        /* Glacier */
        body.light-theme[data-bg="light-glacier"] {
            background: #f0f9fe;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-glacier"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(56,189,248,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(147,197,253,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(186,230,253,0.04) 0%, transparent 55%);
        }
        /* Lake */
        body.light-theme[data-bg="light-lake"] {
            background: #eff8ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-lake"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(14,165,233,0.1) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(56,189,248,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(6,182,212,0.04) 0%, transparent 55%);
        }
        /* Pool */
        body.light-theme[data-bg="light-pool"] {
            background: #f0f9ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-pool"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(56,189,248,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(6,182,212,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(14,165,233,0.04) 0%, transparent 55%);
        }
        /* Breeze */
        body.light-theme[data-bg="light-breeze"] {
            background: #f0faff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-breeze"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(147,197,253,0.12) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(186,230,253,0.08) 0%, transparent 55%);
        }
        /* Crystal */
        body.light-theme[data-bg="light-crystal"] {
            background: #f0fbff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-crystal"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(103,232,249,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(6,182,212,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(56,189,248,0.04) 0%, transparent 55%);
        }
        /* Riviera */
        body.light-theme[data-bg="light-riviera"] {
            background: #edf8ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-riviera"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(14,165,233,0.1) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(56,189,248,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(6,182,212,0.04) 0%, transparent 55%);
        }
        /* Sunrise */
        body.light-theme[data-bg="light-sunrise"] {
            background: #fff8f0;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-sunrise"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(249,115,22,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(251,191,36,0.08) 0%, transparent 55%),
                radial-gradient(circle at 50% 20%, rgba(244,63,94,0.05) 0%, transparent 55%);
        }
        /* Rainbow */
        body.light-theme[data-bg="light-rainbow"] {
            background: #fdf0ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-rainbow"]::before {
            background:
                radial-gradient(circle at 10% 50%, rgba(239,68,68,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 10%, rgba(34,197,94,0.07) 0%, transparent 55%),
                radial-gradient(circle at 90% 50%, rgba(59,130,246,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 90%, rgba(168,85,247,0.06) 0%, transparent 55%);
        }
        /* Candy */
        body.light-theme[data-bg="light-cotton-candy"] {
            background: #fff0fb;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-cotton-candy"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(236,72,153,0.1) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(139,92,246,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(168,85,247,0.04) 0%, transparent 55%);
        }
        /* Sherbet */
        body.light-theme[data-bg="light-sherbet"] {
            background: #fff5f0;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-sherbet"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(249,115,22,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(236,72,153,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(251,191,36,0.05) 0%, transparent 55%);
        }
        /* Bubblegum */
        body.light-theme[data-bg="light-bubblegum"] {
            background: #fff0f8;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-bubblegum"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(236,72,153,0.1) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(244,63,94,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(251,113,133,0.04) 0%, transparent 55%);
        }
        /* Frosted */
        body.light-theme[data-bg="light-frosted"] {
            background: #f8f8ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-frosted"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(99,102,241,0.06) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(139,92,246,0.04) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(56,189,248,0.03) 0%, transparent 55%);
        }
        /* Nordic */
        body.light-theme[data-bg="light-nordic"] {
            background: #f0f5ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-nordic"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(30,64,175,0.08) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(59,130,246,0.06) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(99,102,241,0.04) 0%, transparent 55%);
        }
        /* Forest */
        body.light-theme[data-bg="light-forest-l"] {
            background: #f0f8f0;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-forest-l"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(22,163,74,0.09) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(34,197,94,0.06) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(16,185,129,0.04) 0%, transparent 55%);
        }
        /* Desert */
        body.light-theme[data-bg="light-desert"] {
            background: #fff9f0;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-desert"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(217,119,6,0.09) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(245,158,11,0.06) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(234,179,8,0.04) 0%, transparent 55%);
        }
        /* Blossom */
        body.light-theme[data-bg="light-blossom"] {
            background: #fff0f5;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-blossom"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(244,63,94,0.09) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(236,72,153,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(251,113,133,0.04) 0%, transparent 55%);
        }
        /* Seafloor */
        body.light-theme[data-bg="light-seafloor"] {
            background: #f0f8ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-seafloor"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(14,165,233,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(6,182,212,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(20,184,166,0.04) 0%, transparent 55%);
        }
        /* Sandstone */
        body.light-theme[data-bg="light-sandstone"] {
            background: #fdf5e8;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-sandstone"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(217,119,6,0.09) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(180,83,9,0.06) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(245,158,11,0.04) 0%, transparent 55%);
        }
        /* Dusk */
        body.light-theme[data-bg="light-dusk-l"] {
            background: #f5f0ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-dusk-l"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(139,92,246,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(99,102,241,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(168,85,247,0.04) 0%, transparent 55%);
        }
        /* Bloom */
        body.light-theme[data-bg="light-bloom"] {
            background: #fff0f0;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-bloom"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(244,63,94,0.09) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(251,113,133,0.06) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(253,164,175,0.04) 0%, transparent 55%);
        }
        /* Willow */
        body.light-theme[data-bg="light-willow"] {
            background: #f5fef0;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-willow"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(101,163,13,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(132,204,22,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(163,230,53,0.04) 0%, transparent 55%);
        }
        /* Dandelion */
        body.light-theme[data-bg="light-dandelion"] {
            background: #fffde0;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-dandelion"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(234,179,8,0.12) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(251,191,36,0.08) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(252,211,77,0.05) 0%, transparent 55%);
        }
        /* Morning */
        body.light-theme[data-bg="light-morning"] {
            background: #f0f8ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-morning"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(56,189,248,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(251,191,36,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(14,165,233,0.04) 0%, transparent 55%);
        }
        /* Twilight */
        body.light-theme[data-bg="light-twilight"] {
            background: #f5f0ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-twilight"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(99,102,241,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(168,85,247,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(236,72,153,0.04) 0%, transparent 55%);
        }
        /* Dawn */
        body.light-theme[data-bg="light-dawn"] {
            background: #fff5f0;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-dawn"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(249,115,22,0.09) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(244,63,94,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(251,191,36,0.04) 0%, transparent 55%);
        }
        /* Cloud */
        body.light-theme[data-bg="light-cloud"] {
            background: #f8f9ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-cloud"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(147,197,253,0.1) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(186,230,253,0.07) 0%, transparent 55%);
        }
        /* Aurora */
        body.light-theme[data-bg="light-aurora-l"] {
            background: #f0feff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-aurora-l"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(16,185,129,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(6,182,212,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(99,102,241,0.05) 0%, transparent 55%);
        }
        /* Opal */
        body.light-theme[data-bg="light-opal"] {
            background: #f8f0ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-opal"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(168,85,247,0.08) 0%, transparent 55%),
                radial-gradient(circle at 80% 20%, rgba(6,182,212,0.08) 0%, transparent 55%),
                radial-gradient(circle at 20% 80%, rgba(34,197,94,0.07) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(249,115,22,0.06) 0%, transparent 55%);
        }
        /* Vanilla */
        body.light-theme[data-bg="light-vanilla"] {
            background: #fffdf5;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-vanilla"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(251,191,36,0.08) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(245,158,11,0.05) 0%, transparent 55%);
        }
        /* Spa */
        body.light-theme[data-bg="light-spa"] {
            background: #f0fdf9;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-spa"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(20,184,166,0.1) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(16,185,129,0.07) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(52,211,153,0.04) 0%, transparent 55%);
        }
        /* Zen */
        body.light-theme[data-bg="light-zen"] {
            background: #f8fafb;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-zen"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(100,116,139,0.07) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(148,163,184,0.05) 0%, transparent 55%);
        }
        /* Petal */
        body.light-theme[data-bg="light-petal"] {
            background: #fff0f4;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-petal"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(244,63,94,0.09) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(251,113,133,0.06) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(253,164,175,0.04) 0%, transparent 55%);
        }
        /* Honeydew */
        body.light-theme[data-bg="light-honeydew"] {
            background: #f0fff0;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-honeydew"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(34,197,94,0.09) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(52,211,153,0.06) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(16,185,129,0.04) 0%, transparent 55%);
        }
        /* Champagne */
        body.light-theme[data-bg="light-champagne"] {
            background: #fffbf0;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-champagne"]::before {
            background:
                radial-gradient(circle at 20% 30%, rgba(217,119,6,0.08) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(251,191,36,0.06) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(245,158,11,0.04) 0%, transparent 55%);
        }
        /* Porcelain */
        body.light-theme[data-bg="light-porcelain"] {
            background: #fafbff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-porcelain"]::before {
            background:
                radial-gradient(circle at 25% 25%, rgba(99,102,241,0.05) 0%, transparent 55%),
                radial-gradient(circle at 75% 75%, rgba(139,92,246,0.03) 0%, transparent 55%);
        }
        /* GAN Cube */
        body.light-theme[data-bg="light-gan-cube"] {
            background: #eef8ff;
            background-attachment: fixed;
        }
        body.light-theme[data-bg="light-gan-cube"]::before {
            background:
                radial-gradient(circle at 20% 20%, rgba(6,182,212,0.12) 0%, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(99,102,241,0.08) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(16,185,129,0.05) 0%, transparent 55%);
        }

        /* GAN logo background — light */
        body.light-theme[data-bg="light-gan-logo"] {
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjEwODAiIHZpZXdCb3g9IjAgMCAxOTIwIDEwODAiPgogIDxkZWZzPgogICAgPHJhZGlhbEdyYWRpZW50IGlkPSJiZyIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzAlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZjhmZiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkYmVhZmUiLz4KICAgIDwvcmFkaWFsR3JhZGllbnQ+CiAgICA8cmFkaWFsR3JhZGllbnQgaWQ9Imdsb3ciIGN4PSI1MCUiIGN5PSIzMyUiIHI9IjQ1JSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwZWE1ZTkiIHN0b3Atb3BhY2l0eT0iMC4xIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBlYTVlOSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogICAgPGZpbHRlciBpZD0iYmx1ci1nbG93Ij4KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMTQiIHJlc3VsdD0iYmx1ciIvPgogICAgICA8ZmVNZXJnZT48ZmVNZXJnZU5vZGUgaW49ImJsdXIiLz48ZmVNZXJnZU5vZGUgaW49IlNvdXJjZUdyYXBoaWMiLz48L2ZlTWVyZ2U+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+CiAgPHJlY3Qgd2lkdGg9IjE5MjAiIGhlaWdodD0iMTA4MCIgZmlsbD0idXJsKCNiZykiLz4KICA8ZWxsaXBzZSBjeD0iOTYwIiBjeT0iMzU1IiByeD0iNDYwIiByeT0iMjIwIiBmaWxsPSJ1cmwoI2dsb3cpIi8+CiAgPHRleHQgeD0iOTYwIiB5PSI0NjAiIGZvbnQtZmFtaWx5PSJBcmlhbCBCbGFjaywgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSI5MDAiIGZvbnQtc2l6ZT0iMzEwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBsZXR0ZXItc3BhY2luZz0iLTYiIGZpbGw9IiMwMzY5YTEiIGZpbGwtb3BhY2l0eT0iMC4wNSIgZmlsdGVyPSJ1cmwoI2JsdXItZ2xvdykiPkdBTjwvdGV4dD4KICA8dGV4dCB4PSI5NjAiIHk9IjQ2MCIgZm9udC1mYW1pbHk9IkFyaWFsIEJsYWNrLCBBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC13ZWlnaHQ9IjkwMCIgZm9udC1zaXplPSIzMTAiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGxldHRlci1zcGFjaW5nPSItNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDM2OWExIiBzdHJva2Utd2lkdGg9IjEuMiIgc3Ryb2tlLW9wYWNpdHk9IjAuMjIiPkdBTjwvdGV4dD4KICA8dGV4dCB4PSI5NjAiIHk9Ijg1MCIgZm9udC1mYW1pbHk9IkFyaWFsIEJsYWNrLCBBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC13ZWlnaHQ9IjkwMCIgZm9udC1zaXplPSIxMTAiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGxldHRlci1zcGFjaW5nPSIzOCIgZmlsbD0iIzAzNjlhMSIgZmlsbC1vcGFjaXR5PSIwLjA0IiBmaWx0ZXI9InVybCgjYmx1ci1nbG93KSI+Q1VCRTwvdGV4dD4KICA8dGV4dCB4PSI5NjAiIHk9Ijg1MCIgZm9udC1mYW1pbHk9IkFyaWFsIEJsYWNrLCBBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC13ZWlnaHQ9IjkwMCIgZm9udC1zaXplPSIxMTAiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGxldHRlci1zcGFjaW5nPSIzOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDM2OWExIiBzdHJva2Utd2lkdGg9IjAuOCIgc3Ryb2tlLW9wYWNpdHk9IjAuMTgiPkNVQkU8L3RleHQ+Cjwvc3ZnPg==') center center / cover no-repeat fixed;
        }
        body.light-theme[data-bg="light-gan-logo"]::before { background: none; }
        body.light-theme[data-bg="light-gan-logo"]::after  { background: none; }
        body.light-theme[data-bg="light-gan-logo"] .app-background-image { display: none; }


        /* ═══════════════════════════════════════
           THEME GENERATOR
        ═══════════════════════════════════════ */
        .theme-gen-wrap {
            display: flex;
            gap: 8px;
            margin-bottom: 0.75rem;
        }
        .theme-gen-input {
            flex: 1;
            padding: 0.5rem 0.75rem;
            border-radius: 8px;
            border: 1px solid rgba(74,158,255,0.2);
            background: rgba(255,255,255,0.04);
            color: inherit;
            font-size: 0.85rem;
            outline: none;
            transition: border-color 0.15s;
        }
        .theme-gen-input:focus { border-color: rgba(74,158,255,0.5); }
        .theme-gen-input::placeholder { color: rgba(255,255,255,0.3); }
        body.light-theme .theme-gen-input {
            background: rgba(0,0,0,0.03);
            border-color: rgba(99,102,241,0.2);
            color: #1e1e3c;
        }
        body.light-theme .theme-gen-input::placeholder { color: rgba(30,30,60,0.35); }
        body.light-theme .theme-gen-input:focus { border-color: rgba(99,102,241,0.5); }

        .theme-gen-btn {
            padding: 0.5rem 1rem;
            border-radius: 8px;
            border: 1px solid rgba(74,158,255,0.3);
            background: rgba(74,158,255,0.1);
            color: #4a9eff;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s;
            white-space: nowrap;
        }
        .theme-gen-btn:hover { background: rgba(74,158,255,0.2); }
        body.light-theme .theme-gen-btn {
            border-color: rgba(99,102,241,0.3);
            background: rgba(99,102,241,0.08);
            color: #4338ca;
        }
        body.light-theme .theme-gen-btn:hover { background: rgba(99,102,241,0.16); }

        .theme-gen-results {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .theme-gen-card {
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.07);
            overflow: hidden;
            background: rgba(255,255,255,0.03);
            transition: border-color 0.15s;
        }
        .theme-gen-card:hover { border-color: rgba(255,255,255,0.14); }
        body.light-theme .theme-gen-card {
            border-color: rgba(0,0,0,0.07);
            background: rgba(0,0,0,0.02);
        }

        .theme-gen-preview {
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px 8px 0 0;
            transition: outline 0.2s;
        }
        .theme-gen-timer {
            font-weight: 700;
            letter-spacing: normal;
            text-shadow: 0 0 12px currentColor;
        }

        .theme-gen-info {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px 0;
            flex-wrap: wrap;
        }
        .theme-gen-tag {
            font-size: 0.7rem;
            padding: 2px 7px;
            border-radius: 99px;
            background: rgba(255,255,255,0.06);
            color: rgba(255,255,255,0.5);
            text-transform: capitalize;
        }
        body.light-theme .theme-gen-tag {
            background: rgba(0,0,0,0.05);
            color: rgba(30,30,60,0.5);
        }
        .theme-gen-swatch {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            display: inline-block;
            margin-left: auto;
            flex-shrink: 0;
            border: 1px solid rgba(255,255,255,0.15);
        }

        .theme-gen-apply {
            display: block;
            width: calc(100% - 20px);
            margin: 6px 10px 8px;
            padding: 5px;
            border-radius: 6px;
            border: 1px solid rgba(74,158,255,0.25);
            background: transparent;
            color: #4a9eff;
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s;
        }
        .theme-gen-apply:hover { background: rgba(74,158,255,0.1); }

        /* ── legacy keys redirect (old "gradient"/"pattern"/"minimal" still work as dark) ── */
        body:not(.light-theme)[data-bg="gradient"] {
            background: linear-gradient(135deg, #0d0a1e 0%, #0a1628 40%, #0e1f2e 100%) !important;
            background-attachment: fixed !important;
        }
        body:not(.light-theme)[data-bg="gradient"]::before {
            background:
                radial-gradient(circle at 15% 25%, rgba(123, 80, 255, 0.12) 0%, transparent 50%),
                radial-gradient(circle at 85% 75%, rgba(74, 190, 255, 0.1) 0%, transparent 50%) !important;
        }
        body:not(.light-theme)[data-bg="pattern"] {
            background-color: #0a0e1a !important;
            background-image: radial-gradient(circle, rgba(74, 158, 255, 0.18) 1px, transparent 1px) !important;
            background-size: 28px 28px !important;
            background-attachment: fixed !important;
        }
        body:not(.light-theme)[data-bg="minimal"] {
            background: #080b14 !important;
            background-attachment: fixed !important;
        }

        /* ── Advanced Customization UI styles ── */
        .custom-divider {
            height: 1px;
            background: rgba(74, 158, 255, 0.12);
            margin: 1.5rem 0;
        }
        body.light-theme .custom-divider {
            background: #e5e7eb;
        }

        .accent-palette {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 8px;
            margin-top: 0.6rem;
        }

        .accent-swatch {
            width: 100%;
            aspect-ratio: 1;
            border-radius: 8px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
            position: relative;
        }
        .accent-swatch:hover {
            transform: scale(1.12);
            box-shadow: 0 3px 10px rgba(0,0,0,0.3);
        }
        .accent-swatch.selected {
            border-color: #fff;
            box-shadow: 0 0 0 3px rgba(255,255,255,0.35), 0 3px 10px rgba(0,0,0,0.3);
            transform: scale(1.1);
        }
        body.light-theme .accent-swatch.selected {
            border-color: #374151;
            box-shadow: 0 0 0 3px rgba(55,65,81,0.2), 0 3px 8px rgba(0,0,0,0.15);
        }

        .font-options {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-top: 0.6rem;
        }

        .font-btn {
            padding: 0.65rem 0.75rem;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            background: #f9fafb;
            cursor: pointer;
            transition: all 0.18s ease;
            text-align: left;
        }
        body:not(.light-theme) .font-btn {
            border-color: rgba(74, 158, 255, 0.18);
            background: rgba(255,255,255,0.05);
        }
        .font-btn:hover {
            border-color: var(--accent-primary);
            transform: translateY(-1px);
        }
        .font-btn.active {
            border-color: var(--accent-primary);
            background: rgba(74,158,255,0.1);
            box-shadow: 0 0 0 3px rgba(74,158,255,0.12);
        }
        .font-btn-name {
            font-size: 0.8rem;
            font-weight: 600;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 3px;
        }
        body:not(.light-theme) .font-btn-name { color: #a8b4c8; }
        .font-btn.active .font-btn-name { color: var(--accent-primary); }

        .font-btn-preview {
            font-size: 1rem;
            font-weight: 600;
            color: #222;
            line-height: 1.2;
        }
        body:not(.light-theme) .font-btn-preview { color: #e8edf4; }

        .bg-options {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin-top: 0.6rem;
        }


        .bg-btn {
            aspect-ratio: 16/9;
            border-radius: 8px;
            border: 2px solid transparent;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all 0.18s ease;
        }
        .bg-btn:hover { transform: scale(1.04); }
        .bg-btn.active {
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px rgba(74,158,255,0.2);
        }
        .bg-btn-label {
            position: absolute;
            bottom: 3px;
            left: 0; right: 0;
            text-align: center;
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: rgba(255,255,255,0.85);
            text-shadow: 0 1px 3px rgba(0,0,0,0.5);
        }

        /* bg preview thumbnails — DARK */
        .bg-btn[data-bg="none"]          { background: linear-gradient(135deg, #0a0e1a 0%, #141928 100%); }
        .bg-btn[data-bg="dark-gradient"] { background: linear-gradient(135deg, #0d0a1e 0%, #0a1628 50%, #0e1f2e 100%); }
        .bg-btn[data-bg="dark-pattern"]  {
            background-color: #0a0e1a;
            background-image: radial-gradient(circle, rgba(74,158,255,0.28) 1px, transparent 1px);
            background-size: 7px 7px;
        }
        .bg-btn[data-bg="dark-minimal"]  { background: #080b14; }
        .bg-btn[data-bg="dark-red"]      { background: radial-gradient(circle at 30% 40%, #1f0808 0%, #0d0606 70%); }
        .bg-btn[data-bg="dark-violet"]   { background: linear-gradient(135deg, #0e0818 0%, #160d28 100%); }
        .bg-btn[data-bg="dark-neon"]     { background: radial-gradient(circle at 50% 50%, #041824 0%, #030810 70%); box-shadow: inset 0 0 8px rgba(6,182,212,0.4); }
        .bg-btn[data-bg="dark-graphite"] { background: linear-gradient(135deg, #111 0%, #1a1a1a 100%); }

        /* Legacy dark keys still work — same preview */
        .bg-btn[data-bg="gradient"] { background: linear-gradient(135deg, #0d0a1e 0%, #0a1628 50%, #0e1f2e 100%); }
        .bg-btn[data-bg="pattern"]  {
            background-color: #0a0e1a;
            background-image: radial-gradient(circle, rgba(74,158,255,0.25) 1px, transparent 1px);
            background-size: 8px 8px;
        }
        .bg-btn[data-bg="minimal"]  { background: #080b14; }

        /* bg preview thumbnails — LIGHT (override when light-theme active) */
        body.light-theme .bg-btn[data-bg="none"]         { background: linear-gradient(135deg, #f8f9fc 0%, #f1f5f9 100%); }
        body.light-theme .bg-btn[data-bg="light-blue"]   { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); }
        body.light-theme .bg-btn[data-bg="light-silver"] { background: linear-gradient(135deg, #fffff8 0%, #fef9c3 100%); }
        body.light-theme .bg-btn[data-bg="light-sky"]    { background: linear-gradient(135deg, #f0f9ff 0%, #bae6fd 100%); }
        body.light-theme .bg-btn[data-bg="light-glass"]  {
            background-color: #f9fafb;
            background-image: radial-gradient(circle, rgba(99,102,241,0.15) 1px, transparent 1px);
            background-size: 7px 7px;
        }
        body.light-theme .bg-btn[data-bg="light-cream"]  { background: linear-gradient(135deg, #fffbeb 0%, #fde68a 100%); }
        body.light-theme .bg-btn[data-bg="light-purple"] { background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%); }
        body.light-theme .bg-btn[data-bg="light-cyan"]   { background: linear-gradient(135deg, #ecfeff 0%, #a5f3fc 100%); }
        body.light-theme .bg-btn[data-bg="light-grey"]   { background: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 100%); }

        /* ── preview thumbnails: 200 new backgrounds ── */
        .bg-btn[data-bg="dark-aurora"] { background: radial-gradient(ellipse at 20% 20%, #0a2a1a 0%, #030d1a 60%, #000510 100%); }
        .bg-btn[data-bg="dark-nebula"] { background: radial-gradient(ellipse at 30% 30%, #1a0030 0%, #050010 60%, #0a0018 100%); }
        .bg-btn[data-bg="dark-cosmos"] { background: linear-gradient(135deg, #000008 0%, #040418 100%); }
        .bg-btn[data-bg="dark-midnight"] { background: radial-gradient(ellipse at 30% 30%, #050a2a 0%, #000510 70%); }
        .bg-btn[data-bg="dark-deep-sea"] { background: radial-gradient(ellipse at 40% 40%, #001828 0%, #000c18 70%); }
        .bg-btn[data-bg="dark-eclipse"] { background: radial-gradient(circle at 30% 30%, #200028 0%, #080008 70%); }
        .bg-btn[data-bg="dark-void"] { background: radial-gradient(ellipse at 50% 0%, #0a0820 0%, #000000 70%); }
        .bg-btn[data-bg="dark-abyss"] { background: linear-gradient(135deg, #020408 0%, #010206 100%); }
        .bg-btn[data-bg="dark-starfield"] { background: radial-gradient(ellipse at 50% 50%, #060610 0%, #020206 100%); }
        .bg-btn[data-bg="dark-galaxy"] { background: radial-gradient(ellipse at 30% 30%, #180028 0%, #04000e 70%); }
        .bg-btn[data-bg="dark-ember"] { background: radial-gradient(ellipse at 20% 30%, #2a1200 0%, #0e0500 70%); }
        .bg-btn[data-bg="dark-lava"] { background: radial-gradient(ellipse at 30% 30%, #2a0800 0%, #100302 70%); }
        .bg-btn[data-bg="dark-magma"] { background: radial-gradient(ellipse at 40% 40%, #281000 0%, #0d0200 70%); }
        .bg-btn[data-bg="dark-copper"] { background: radial-gradient(ellipse at 30% 30%, #1e1000 0%, #0a0600 70%); }
        .bg-btn[data-bg="dark-rust"] { background: radial-gradient(ellipse at 30% 40%, #200800 0%, #0c0400 70%); }
        .bg-btn[data-bg="dark-infrared"] { background: radial-gradient(ellipse at 20% 30%, #280020 0%, #0e0008 70%); }
        .bg-btn[data-bg="dark-sunset"] { background: radial-gradient(ellipse at 30% 30%, #280a10 0%, #0e0508 70%); }
        .bg-btn[data-bg="dark-crimson"] { background: radial-gradient(ellipse at 30% 30%, #240010 0%, #0c0005 70%); }
        .bg-btn[data-bg="dark-amber-glow"] { background: radial-gradient(ellipse at 30% 30%, #201000 0%, #0b0700 70%); }
        .bg-btn[data-bg="dark-volcano"] { background: radial-gradient(ellipse at 30% 30%, #2a0400 0%, #0f0100 70%); }
        .bg-btn[data-bg="dark-arctic"] { background: radial-gradient(ellipse at 30% 30%, #002030 0%, #001018 70%); }
        .bg-btn[data-bg="dark-ice"] { background: radial-gradient(ellipse at 30% 30%, #001828 0%, #00080e 70%); }
        .bg-btn[data-bg="dark-teal-depths"] { background: radial-gradient(ellipse at 30% 30%, #001c20 0%, #000e10 70%); }
        .bg-btn[data-bg="dark-ocean"] { background: radial-gradient(ellipse at 20% 30%, #001428 0%, #000814 70%); }
        .bg-btn[data-bg="dark-aqua"] { background: radial-gradient(ellipse at 30% 30%, #001a24 0%, #000c12 70%); }
        .bg-btn[data-bg="dark-sapphire"] { background: radial-gradient(ellipse at 30% 30%, #001428 0%, #000814 70%); }
        .bg-btn[data-bg="dark-cobalt"] { background: radial-gradient(ellipse at 30% 30%, #000c20 0%, #000610 70%); }
        .bg-btn[data-bg="dark-steel"] { background: radial-gradient(ellipse at 30% 30%, #101418 0%, #080c10 70%); }
        .bg-btn[data-bg="dark-slate-glow"] { background: radial-gradient(ellipse at 30% 30%, #0c1018 0%, #080a0e 70%); }
        .bg-btn[data-bg="dark-frost"] { background: radial-gradient(ellipse at 30% 30%, #001020 0%, #000610 70%); }
        .bg-btn[data-bg="dark-forest"] { background: radial-gradient(ellipse at 30% 30%, #001c08 0%, #000e04 70%); }
        .bg-btn[data-bg="dark-matrix"] { background: radial-gradient(ellipse at 50% 0%, #001400 0%, #000a02 70%); }
        .bg-btn[data-bg="dark-jungle"] { background: radial-gradient(ellipse at 30% 30%, #001a04 0%, #000c02 70%); }
        .bg-btn[data-bg="dark-emerald-deep"] { background: radial-gradient(ellipse at 30% 30%, #001e14 0%, #00100a 70%); }
        .bg-btn[data-bg="dark-lime-glow"] { background: radial-gradient(ellipse at 30% 30%, #0c1800 0%, #060e00 70%); }
        .bg-btn[data-bg="dark-mint"] { background: radial-gradient(ellipse at 30% 30%, #001c10 0%, #000e08 70%); }
        .bg-btn[data-bg="dark-hunter"] { background: radial-gradient(ellipse at 30% 30%, #041404 0%, #020a02 70%); }
        .bg-btn[data-bg="dark-cypress"] { background: radial-gradient(ellipse at 30% 30%, #041004 0%, #030804 70%); }
        .bg-btn[data-bg="dark-seaweed"] { background: radial-gradient(ellipse at 30% 30%, #001810 0%, #000c08 70%); }
        .bg-btn[data-bg="dark-bio"] { background: radial-gradient(ellipse at 30% 30%, #041c08 0%, #020e04 70%); }
        .bg-btn[data-bg="dark-amethyst"] { background: radial-gradient(ellipse at 30% 30%, #1c001e 0%, #08000e 70%); }
        .bg-btn[data-bg="dark-orchid"] { background: radial-gradient(ellipse at 30% 30%, #1e000c 0%, #0a000c 70%); }
        .bg-btn[data-bg="dark-rose-dark"] { background: radial-gradient(ellipse at 30% 30%, #200010 0%, #0e0008 70%); }
        .bg-btn[data-bg="dark-fuchsia"] { background: radial-gradient(ellipse at 30% 30%, #1e0010 0%, #0c0008 70%); }
        .bg-btn[data-bg="dark-plum"] { background: radial-gradient(ellipse at 30% 30%, #10001a 0%, #06000a 70%); }
        .bg-btn[data-bg="dark-magenta"] { background: radial-gradient(ellipse at 30% 30%, #1c0020 0%, #0e0010 70%); }
        .bg-btn[data-bg="dark-mulberry"] { background: radial-gradient(ellipse at 30% 30%, #14001a 0%, #08000c 70%); }
        .bg-btn[data-bg="dark-lavender"] { background: radial-gradient(ellipse at 30% 30%, #0c0020 0%, #060010 70%); }
        .bg-btn[data-bg="dark-indigo-deep"] { background: radial-gradient(ellipse at 30% 30%, #0a001e 0%, #04000e 70%); }
        .bg-btn[data-bg="dark-grape"] { background: radial-gradient(ellipse at 30% 30%, #100020 0%, #080010 70%); }
        .bg-btn[data-bg="dark-grid"] { background: #080c14; background-image: linear-gradient(rgba(74,158,255,0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(74,158,255,0.2) 1px, transparent 1px); background-size: 10px 10px; }
        .bg-btn[data-bg="dark-hex"] { background: #060a12; background-image: radial-gradient(circle, rgba(74,158,255,0.3) 1px, transparent 1px); background-size: 6px 10px; }
        .bg-btn[data-bg="dark-cross"] { background: #080a10; background-image: linear-gradient(rgba(99,102,241,0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,0.2) 1px, transparent 1px); background-size: 8px 8px; }
        .bg-btn[data-bg="dark-lines"] { background: #06080e; background-image: repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(74,158,255,0.18) 7px, rgba(74,158,255,0.18) 8px); }
        .bg-btn[data-bg="dark-diamonds"] { background: #080c16; background-image: linear-gradient(45deg, rgba(99,102,241,0.2) 25%, transparent 25%, transparent 75%, rgba(99,102,241,0.2) 75%); background-size: 8px 8px; }
        .bg-btn[data-bg="dark-weave"] { background: #06080c; background-image: repeating-linear-gradient(45deg, rgba(74,158,255,0.15) 0, rgba(74,158,255,0.15) 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, rgba(74,158,255,0.15) 0, rgba(74,158,255,0.15) 1px, transparent 0, transparent 50%); background-size: 8px 8px; }
        .bg-btn[data-bg="dark-circuit"] { background: #040810; background-image: linear-gradient(rgba(6,182,212,0.25) 1px, transparent 1px), linear-gradient(90deg, rgba(6,182,212,0.25) 1px, transparent 1px); background-size: 12px 12px; }
        .bg-btn[data-bg="dark-mesh"] { background: #080a12; background-image: linear-gradient(rgba(139,92,246,0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(139,92,246,0.18) 1px, transparent 1px); background-size: 6px 6px; }
        .bg-btn[data-bg="dark-stripes"] { background: #06080c; background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(74,158,255,0.12) 4px, rgba(74,158,255,0.12) 5px); }
        .bg-btn[data-bg="dark-checkers"] { background: #060810; background-image: linear-gradient(45deg, rgba(74,158,255,0.12) 25%, transparent 25%, transparent 75%, rgba(74,158,255,0.12) 75%), linear-gradient(45deg, rgba(74,158,255,0.12) 25%, transparent 25%, transparent 75%, rgba(74,158,255,0.12) 75%); background-size: 10px 10px; background-position: 0 0, 5px 5px; }
        .bg-btn[data-bg="dark-aurora-2"] { background: radial-gradient(ellipse at 20% 20%, #001a18 0%, #020c0e 60%, #000510 100%); }
        .bg-btn[data-bg="dark-prism"] { background: conic-gradient(from 135deg at 50% 50%, #040010, #000810, #040010, #100004, #040010); }
        .bg-btn[data-bg="dark-oil"] { background: conic-gradient(from 45deg at 50% 50%, #050508, #080508, #050808, #080505, #050508); }
        .bg-btn[data-bg="dark-northern"] { background: radial-gradient(ellipse at 20% 30%, #001c10 0%, #000e08 50%, #020010 100%); }
        .bg-btn[data-bg="dark-borealis"] { background: radial-gradient(ellipse at 20% 20%, #001820 0%, #010810 60%, #000510 100%); }
        .bg-btn[data-bg="dark-aurora-3"] { background: radial-gradient(ellipse at 20% 30%, #001414 0%, #000a0a 50%, #020010 100%); }
        .bg-btn[data-bg="dark-spectrum"] { background: conic-gradient(from 90deg at 50% 50%, #080008, #000808, #000008, #080008); }
        .bg-btn[data-bg="dark-electric"] { background: radial-gradient(ellipse at 30% 30%, #080020 0%, #020810 60%, #000510 100%); }
        .bg-btn[data-bg="dark-hologram"] { background: conic-gradient(from 45deg at 50% 50%, #020610, #001010, #060010, #001010, #020610); }
        .bg-btn[data-bg="dark-plasma"] { background: radial-gradient(ellipse at 30% 30%, #0c0020 0%, #060008 60%, #020010 100%); }
        .bg-btn[data-bg="dark-charcoal"] { background: linear-gradient(135deg, #111 0%, #181818 100%); }
        .bg-btn[data-bg="dark-obsidian"] { background: linear-gradient(135deg, #050505 0%, #080808 100%); }
        .bg-btn[data-bg="dark-jet"] { background: linear-gradient(135deg, #0a0a0a 0%, #0d0d0d 100%); }
        .bg-btn[data-bg="dark-onyx"] { background: linear-gradient(135deg, #0c0c0c 0%, #101010 100%); }
        .bg-btn[data-bg="dark-pitch"] { background: linear-gradient(135deg, #030303 0%, #060606 100%); }
        .bg-btn[data-bg="dark-ink"] { background: linear-gradient(135deg, #070710 0%, #0a0a14 100%); }
        .bg-btn[data-bg="dark-dim"] { background: linear-gradient(135deg, #0e0e14 0%, #111118 100%); }
        .bg-btn[data-bg="dark-shade"] { background: linear-gradient(135deg, #0a0a12 0%, #0d0d16 100%); }
        .bg-btn[data-bg="dark-shadow"] { background: linear-gradient(135deg, #060608 0%, #09090c 100%); }
        .bg-btn[data-bg="dark-dusk"] { background: radial-gradient(ellipse at 30% 30%, #0c0c18 0%, #080810 70%); }
        .bg-btn[data-bg="dark-cyberpunk"] { background: linear-gradient(135deg, #060210 0%, #0a0218 50%, #06020e 100%); box-shadow: inset 0 0 8px rgba(234,179,8,0.2); }
        .bg-btn[data-bg="dark-retrowave"] { background: radial-gradient(ellipse at 50% 0%, #1a0028 0%, #04000c 70%); }
        .bg-btn[data-bg="dark-vaporwave"] { background: radial-gradient(ellipse at 30% 30%, #1c001e 0%, #06000e 60%, #08000a 100%); }
        .bg-btn[data-bg="dark-synthwave"] { background: radial-gradient(ellipse at 30% 30%, #180028 0%, #04000e 70%); }
        .bg-btn[data-bg="dark-outrun"] { background: radial-gradient(ellipse at 50% 0%, #22001e 0%, #02000e 70%); }
        .bg-btn[data-bg="dark-glitch"] { background: linear-gradient(135deg, #04001a 0%, #00080e 50%, #040018 100%); }
        .bg-btn[data-bg="dark-stealth"] { background: linear-gradient(135deg, #020408 0%, #040608 100%); }
        .bg-btn[data-bg="dark-carbon"] { background: linear-gradient(135deg, #080808 0%, #0c0c0c 100%); }
        .bg-btn[data-bg="dark-tungsten"] { background: linear-gradient(135deg, #0a0a08 0%, #0e0e0c 100%); }
        .bg-btn[data-bg="dark-midnight-2"] { background: radial-gradient(ellipse at 30% 30%, #000820 0%, #000210 70%); }
        .bg-btn[data-bg="dark-titan"] { background: radial-gradient(ellipse at 30% 30%, #141400 0%, #080a00 70%); }
        .bg-btn[data-bg="dark-matrix-2"] { background: radial-gradient(ellipse at 50% 0%, #001400 0%, #000800 70%); }
        .bg-btn[data-bg="dark-deep-blue"] { background: radial-gradient(ellipse at 30% 30%, #000824 0%, #000412 70%); }
        .bg-btn[data-bg="dark-midnight-rose"] { background: radial-gradient(ellipse at 30% 30%, #200010 0%, #0e0005 70%); }
        .bg-btn[data-bg="dark-toxic"] { background: radial-gradient(ellipse at 30% 30%, #0c1a00 0%, #040a00 70%); }
        .bg-btn[data-bg="dark-ultraviolet"] { background: radial-gradient(ellipse at 30% 30%, #080020 0%, #030010 70%); }
        .bg-btn[data-bg="dark-phosphor"] { background: radial-gradient(ellipse at 30% 30%, #001c0c 0%, #000e06 70%); }
        .bg-btn[data-bg="dark-solar"] { background: radial-gradient(ellipse at 30% 30%, #1c1400 0%, #0e0800 70%); }
        .bg-btn[data-bg="dark-moonlight"] { background: radial-gradient(ellipse at 30% 30%, #080c10 0%, #040608 70%); }
        .bg-btn[data-bg="dark-gan-cube"] { background: radial-gradient(ellipse at 30% 30%, #001828 0%, #000510 70%); box-shadow: inset 0 0 8px rgba(6,182,212,0.3); }
        .bg-btn[data-bg="dark-gan-logo"] { background: radial-gradient(ellipse at 50% 50%, #001a28 0%, #000510 70%); box-shadow: inset 0 0 12px rgba(6,182,212,0.4); }

        body.light-theme .bg-btn[data-bg="light-azure"] { background: linear-gradient(135deg, #eff6ff 0%, #bfdbfe 100%); }
        body.light-theme .bg-btn[data-bg="light-cobalt-l"] { background: linear-gradient(135deg, #eff8ff 0%, #bfdbfe 100%); }
        body.light-theme .bg-btn[data-bg="light-navy-l"] { background: linear-gradient(135deg, #f0f4ff 0%, #c7d2fe 100%); }
        body.light-theme .bg-btn[data-bg="light-periwinkle"] { background: linear-gradient(135deg, #f0f0ff 0%, #c7d2fe 100%); }
        body.light-theme .bg-btn[data-bg="light-denim"] { background: linear-gradient(135deg, #eff5ff 0%, #bfdbfe 100%); }
        body.light-theme .bg-btn[data-bg="light-cornflower"] { background: linear-gradient(135deg, #eef3ff 0%, #c7d2fe 100%); }
        body.light-theme .bg-btn[data-bg="light-iceblue"] { background: linear-gradient(135deg, #f0faff 0%, #bae6fd 100%); }
        body.light-theme .bg-btn[data-bg="light-powder"] { background: linear-gradient(135deg, #f0f9ff 0%, #bae6fd 100%); }
        body.light-theme .bg-btn[data-bg="light-steel-l"] { background: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 100%); }
        body.light-theme .bg-btn[data-bg="light-horizon"] { background: linear-gradient(135deg, #eff8ff 0%, #7dd3fc 100%); }
        body.light-theme .bg-btn[data-bg="light-sage"] { background: linear-gradient(135deg, #f0fdf4 0%, #bbf7d0 100%); }
        body.light-theme .bg-btn[data-bg="light-mint-l"] { background: linear-gradient(135deg, #f0fdfb 0%, #99f6e4 100%); }
        body.light-theme .bg-btn[data-bg="light-spring"] { background: linear-gradient(135deg, #f7fef0 0%, #d9f99d 100%); }
        body.light-theme .bg-btn[data-bg="light-fern"] { background: linear-gradient(135deg, #f0fdf4 0%, #86efac 100%); }
        body.light-theme .bg-btn[data-bg="light-meadow"] { background: linear-gradient(135deg, #f3fef3 0%, #86efac 100%); }
        body.light-theme .bg-btn[data-bg="light-jade"] { background: linear-gradient(135deg, #f0fdf8 0%, #6ee7b7 100%); }
        body.light-theme .bg-btn[data-bg="light-pistachio"] { background: linear-gradient(135deg, #f5fef0 0%, #bef264 100%); }
        body.light-theme .bg-btn[data-bg="light-eucalyptus"] { background: linear-gradient(135deg, #f0fdf6 0%, #6ee7b7 100%); }
        body.light-theme .bg-btn[data-bg="light-celery"] { background: linear-gradient(135deg, #f6fef0 0%, #d9f99d 100%); }
        body.light-theme .bg-btn[data-bg="light-tropical"] { background: linear-gradient(135deg, #f0fefc 0%, #99f6e4 100%); }
        body.light-theme .bg-btn[data-bg="light-lilac"] { background: linear-gradient(135deg, #faf5ff 0%, #e9d5ff 100%); }
        body.light-theme .bg-btn[data-bg="light-lavender-l"] { background: linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 100%); }
        body.light-theme .bg-btn[data-bg="light-violet-l"] { background: linear-gradient(135deg, #fdf4ff 0%, #e9d5ff 100%); }
        body.light-theme .bg-btn[data-bg="light-mauve"] { background: linear-gradient(135deg, #fef0ff 0%, #f0abfc 100%); }
        body.light-theme .bg-btn[data-bg="light-blush"] { background: linear-gradient(135deg, #fff0f5 0%, #fda4af 100%); }
        body.light-theme .bg-btn[data-bg="light-rose-l"] { background: linear-gradient(135deg, #fff1f2 0%, #fda4af 100%); }
        body.light-theme .bg-btn[data-bg="light-orchid-l"] { background: linear-gradient(135deg, #fdf0ff 0%, #f0abfc 100%); }
        body.light-theme .bg-btn[data-bg="light-wisteria"] { background: linear-gradient(135deg, #f8f0ff 0%, #ddd6fe 100%); }
        body.light-theme .bg-btn[data-bg="light-amethyst-l"] { background: linear-gradient(135deg, #f7f0ff 0%, #e9d5ff 100%); }
        body.light-theme .bg-btn[data-bg="light-plum-l"] { background: linear-gradient(135deg, #faf0ff 0%, #d8b4fe 100%); }
        body.light-theme .bg-btn[data-bg="light-peach"] { background: linear-gradient(135deg, #fff7f0 0%, #fed7aa 100%); }
        body.light-theme .bg-btn[data-bg="light-apricot"] { background: linear-gradient(135deg, #fff5ef 0%, #fdba74 100%); }
        body.light-theme .bg-btn[data-bg="light-cantaloupe"] { background: linear-gradient(135deg, #fff8f0 0%, #fde68a 100%); }
        body.light-theme .bg-btn[data-bg="light-honey"] { background: linear-gradient(135deg, #fffaf0 0%, #fde68a 100%); }
        body.light-theme .bg-btn[data-bg="light-butter"] { background: linear-gradient(135deg, #fffef0 0%, #fef08a 100%); }
        body.light-theme .bg-btn[data-bg="light-lemon"] { background: linear-gradient(135deg, #ffffe8 0%, #fef08a 100%); }
        body.light-theme .bg-btn[data-bg="light-sunshine"] { background: linear-gradient(135deg, #fffde8 0%, #fde047 100%); }
        body.light-theme .bg-btn[data-bg="light-tangerine"] { background: linear-gradient(135deg, #fff4ee 0%, #fb923c 100%); }
        body.light-theme .bg-btn[data-bg="light-melon"] { background: linear-gradient(135deg, #fff5f0 0%, #fed7aa 100%); }
        body.light-theme .bg-btn[data-bg="light-sorbet"] { background: linear-gradient(135deg, #fff0f5 0%, #fed7aa 100%); }
        body.light-theme .bg-btn[data-bg="light-snow"] { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); }
        body.light-theme .bg-btn[data-bg="light-paper"] { background: linear-gradient(135deg, #fafaf8 0%, #f5f5f0 100%); }
        body.light-theme .bg-btn[data-bg="light-cotton"] { background: linear-gradient(135deg, #fdfeff 0%, #f0f9ff 100%); }
        body.light-theme .bg-btn[data-bg="light-chalk"] { background: linear-gradient(135deg, #f8f8f8 0%, #f0f0f0 100%); }
        body.light-theme .bg-btn[data-bg="light-pearl"] { background: linear-gradient(135deg, #fefeff 0%, #f5f3ff 100%); }
        body.light-theme .bg-btn[data-bg="light-linen"] { background: linear-gradient(135deg, #fdf8f4 0%, #f5e6d0 100%); }
        body.light-theme .bg-btn[data-bg="light-parchment"] { background: linear-gradient(135deg, #fdf6e8 0%, #f5deb3 100%); }
        body.light-theme .bg-btn[data-bg="light-alabaster"] { background: linear-gradient(135deg, #f9f8f6 0%, #f0ede8 100%); }
        body.light-theme .bg-btn[data-bg="light-ghost"] { background: linear-gradient(135deg, #f7f8ff 0%, #e0e7ff 100%); }
        body.light-theme .bg-btn[data-bg="light-mist"] { background: linear-gradient(135deg, #f5f8ff 0%, #dbeafe 100%); }
        body.light-theme .bg-btn[data-bg="light-grid"] { background: #f8faff; background-image: linear-gradient(rgba(99,102,241,0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,0.2) 1px, transparent 1px); background-size: 10px 10px; }
        body.light-theme .bg-btn[data-bg="light-dots"] { background: #f8f9fc; background-image: radial-gradient(circle, rgba(99,102,241,0.3) 1px, transparent 1px); background-size: 7px 7px; }
        body.light-theme .bg-btn[data-bg="light-lines-l"] { background: #f9fafc; background-image: repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(99,102,241,0.18) 7px, rgba(99,102,241,0.18) 8px); }
        body.light-theme .bg-btn[data-bg="light-diamonds-l"] { background: #f8faff; background-image: linear-gradient(45deg, rgba(99,102,241,0.18) 25%, transparent 25%, transparent 75%, rgba(99,102,241,0.18) 75%); background-size: 8px 8px; }
        body.light-theme .bg-btn[data-bg="light-cross-l"] { background: #f9fbff; background-image: linear-gradient(rgba(59,130,246,0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,0.2) 1px, transparent 1px); background-size: 8px 8px; }
        body.light-theme .bg-btn[data-bg="light-weave-l"] { background: #f8f9fb; background-image: repeating-linear-gradient(45deg, rgba(99,102,241,0.15) 0, rgba(99,102,241,0.15) 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, rgba(99,102,241,0.15) 0, rgba(99,102,241,0.15) 1px, transparent 0, transparent 50%); background-size: 8px 8px; }
        body.light-theme .bg-btn[data-bg="light-hex-l"] { background: #f9fafd; background-image: radial-gradient(circle, rgba(99,102,241,0.25) 1px, transparent 1px); background-size: 6px 10px; }
        body.light-theme .bg-btn[data-bg="light-stripes-l"] { background: #f8fafc; background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(99,102,241,0.12) 4px, rgba(99,102,241,0.12) 5px); }
        body.light-theme .bg-btn[data-bg="light-mesh-l"] { background: #f8f9fd; background-image: linear-gradient(rgba(139,92,246,0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(139,92,246,0.18) 1px, transparent 1px); background-size: 6px 6px; }
        body.light-theme .bg-btn[data-bg="light-mosaic"] { background: #f9faff; background-image: linear-gradient(45deg, rgba(59,130,246,0.15) 25%, transparent 25%, transparent 75%, rgba(59,130,246,0.15) 75%), linear-gradient(45deg, rgba(59,130,246,0.15) 25%, transparent 25%, transparent 75%, rgba(59,130,246,0.15) 75%); background-size: 10px 10px; background-position: 0 0, 5px 5px; }
        body.light-theme .bg-btn[data-bg="light-aqua-l"] { background: linear-gradient(135deg, #f0fefe 0%, #a5f3fc 100%); }
        body.light-theme .bg-btn[data-bg="light-seafoam"] { background: linear-gradient(135deg, #f0fefc 0%, #6ee7b7 100%); }
        body.light-theme .bg-btn[data-bg="light-turquoise"] { background: linear-gradient(135deg, #f0fdfd 0%, #99f6e4 100%); }
        body.light-theme .bg-btn[data-bg="light-teal-l"] { background: linear-gradient(135deg, #f0fdf9 0%, #6ee7b7 100%); }
        body.light-theme .bg-btn[data-bg="light-glacier"] { background: linear-gradient(135deg, #f0f9fe 0%, #bae6fd 100%); }
        body.light-theme .bg-btn[data-bg="light-lake"] { background: linear-gradient(135deg, #eff8ff 0%, #7dd3fc 100%); }
        body.light-theme .bg-btn[data-bg="light-pool"] { background: linear-gradient(135deg, #f0f9ff 0%, #7dd3fc 100%); }
        body.light-theme .bg-btn[data-bg="light-breeze"] { background: linear-gradient(135deg, #f0faff 0%, #bae6fd 100%); }
        body.light-theme .bg-btn[data-bg="light-crystal"] { background: linear-gradient(135deg, #f0fbff 0%, #67e8f9 100%); }
        body.light-theme .bg-btn[data-bg="light-riviera"] { background: linear-gradient(135deg, #edf8ff 0%, #7dd3fc 100%); }
        body.light-theme .bg-btn[data-bg="light-sunrise"] { background: linear-gradient(135deg, #fff8f0 0%, #fca5a5 100%); }
        body.light-theme .bg-btn[data-bg="light-rainbow"] { background: linear-gradient(135deg, #fdf0ff 0%, #c4b5fd 50%, #bfdbfe 100%); }
        body.light-theme .bg-btn[data-bg="light-cotton-candy"] { background: linear-gradient(135deg, #fff0fb 0%, #f9a8d4 100%); }
        body.light-theme .bg-btn[data-bg="light-sherbet"] { background: linear-gradient(135deg, #fff5f0 0%, #fdba74 70%, #fca5a5 100%); }
        body.light-theme .bg-btn[data-bg="light-bubblegum"] { background: linear-gradient(135deg, #fff0f8 0%, #f9a8d4 100%); }
        body.light-theme .bg-btn[data-bg="light-frosted"] { background: linear-gradient(135deg, #f8f8ff 0%, #e0e7ff 100%); }
        body.light-theme .bg-btn[data-bg="light-nordic"] { background: linear-gradient(135deg, #f0f5ff 0%, #c7d2fe 100%); }
        body.light-theme .bg-btn[data-bg="light-forest-l"] { background: linear-gradient(135deg, #f0f8f0 0%, #bbf7d0 100%); }
        body.light-theme .bg-btn[data-bg="light-desert"] { background: linear-gradient(135deg, #fff9f0 0%, #fde68a 100%); }
        body.light-theme .bg-btn[data-bg="light-blossom"] { background: linear-gradient(135deg, #fff0f5 0%, #fda4af 100%); }
        body.light-theme .bg-btn[data-bg="light-seafloor"] { background: linear-gradient(135deg, #f0f8ff 0%, #7dd3fc 100%); }
        body.light-theme .bg-btn[data-bg="light-sandstone"] { background: linear-gradient(135deg, #fdf5e8 0%, #fde68a 100%); }
        body.light-theme .bg-btn[data-bg="light-dusk-l"] { background: linear-gradient(135deg, #f5f0ff 0%, #c4b5fd 100%); }
        body.light-theme .bg-btn[data-bg="light-bloom"] { background: linear-gradient(135deg, #fff0f0 0%, #fca5a5 100%); }
        body.light-theme .bg-btn[data-bg="light-willow"] { background: linear-gradient(135deg, #f5fef0 0%, #bef264 100%); }
        body.light-theme .bg-btn[data-bg="light-dandelion"] { background: linear-gradient(135deg, #fffde0 0%, #fde047 100%); }
        body.light-theme .bg-btn[data-bg="light-morning"] { background: linear-gradient(135deg, #f0f8ff 0%, #fde047 100%); }
        body.light-theme .bg-btn[data-bg="light-twilight"] { background: linear-gradient(135deg, #f5f0ff 0%, #e9d5ff 60%, #fda4af 100%); }
        body.light-theme .bg-btn[data-bg="light-dawn"] { background: linear-gradient(135deg, #fff5f0 0%, #fda4af 70%, #fed7aa 100%); }
        body.light-theme .bg-btn[data-bg="light-cloud"] { background: linear-gradient(135deg, #f8f9ff 0%, #bfdbfe 100%); }
        body.light-theme .bg-btn[data-bg="light-aurora-l"] { background: linear-gradient(135deg, #f0feff 0%, #a5f3fc 60%, #c4b5fd 100%); }
        body.light-theme .bg-btn[data-bg="light-opal"] { background: linear-gradient(135deg, #f8f0ff 0%, #c4b5fd 30%, #99f6e4 70%, #fde68a 100%); }
        body.light-theme .bg-btn[data-bg="light-vanilla"] { background: linear-gradient(135deg, #fffdf5 0%, #fef9c3 100%); }
        body.light-theme .bg-btn[data-bg="light-spa"] { background: linear-gradient(135deg, #f0fdf9 0%, #99f6e4 100%); }
        body.light-theme .bg-btn[data-bg="light-zen"] { background: linear-gradient(135deg, #f8fafb 0%, #e2e8f0 100%); }
        body.light-theme .bg-btn[data-bg="light-petal"] { background: linear-gradient(135deg, #fff0f4 0%, #fda4af 100%); }
        body.light-theme .bg-btn[data-bg="light-honeydew"] { background: linear-gradient(135deg, #f0fff0 0%, #bbf7d0 100%); }
        body.light-theme .bg-btn[data-bg="light-champagne"] { background: linear-gradient(135deg, #fffbf0 0%, #fde68a 100%); }
        body.light-theme .bg-btn[data-bg="light-porcelain"] { background: linear-gradient(135deg, #fafbff 0%, #e0e7ff 100%); }
        body.light-theme .bg-btn[data-bg="light-gan-cube"] { background: linear-gradient(135deg, #eef8ff 0%, #bae6fd 60%, #c7d2fe 100%); }
        body.light-theme .bg-btn[data-bg="light-gan-logo"] { background: linear-gradient(135deg, #eef8ff 0%, #bae6fd 100%); }
        body.light-theme .bg-btn .bg-btn-label { color: rgba(30,30,30,0.7); text-shadow: none; }
        body.light-theme .bg-btn .bg-btn-label           { color: rgba(30,30,30,0.7); text-shadow: none; }
        .bg-show-more-btn {
            grid-column: 1 / -1;
            padding: 0.4rem 1rem;
            border-radius: 8px;
            border: 1px solid rgba(74,158,255,0.2);
            background: rgba(74,158,255,0.07);
            color: rgba(255,255,255,0.6);
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s;
            margin-top: 2px;
        }
        .bg-show-more-btn:hover { background: rgba(74,158,255,0.14); }
        body.light-theme .bg-show-more-btn {
            border-color: rgba(99,102,241,0.2);
            background: rgba(99,102,241,0.06);
            color: rgba(30,30,60,0.55);
        }
        body.light-theme .bg-show-more-btn:hover { background: rgba(99,102,241,0.12); }

        .custom-reset-btn {
    margin-top: 1.5rem;
            margin-top: 1rem;
            width: 100%;
            padding: 0.55rem 1rem;
            border-radius: 8px;
            border: 1px solid rgba(239,68,68,0.3);
            background: transparent;
            color: #ef4444;
            font-family: 'Manrope', sans-serif;
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.18s ease;
        }
        .custom-reset-btn:hover {
            background: rgba(239,68,68,0.08);
            border-color: #ef4444;
        }

        /* ── Time Display Format ── */
        .time-format-preview {
            margin-top: 0.85rem;
            padding: 0.7rem 1rem;
            background: rgba(74, 158, 255, 0.07);
            border: 1px solid rgba(74, 158, 255, 0.15);
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }

        body.light-theme .time-format-preview {
            background: rgba(74, 158, 255, 0.06);
            border-color: #dbeafe;
        }

        .time-format-preview-label {
            font-family: 'Manrope', sans-serif;
            font-size: 0.78rem;
            color: #9ca3af;
            font-weight: 500;
            white-space: nowrap;
        }

        body.light-theme .time-format-preview-label {
            color: #6b7280;
        }

        .time-format-preview-value {
            font-family: 'Manrope', monospace;
            font-size: 1.35rem;
            font-weight: 700;
            color: var(--accent-primary);
            letter-spacing: -0.01em;
        }

        /* ── Discipline badge in session list ── */
        .session-discipline-badge {
            display: inline-block;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            padding: 2px 7px;
            border-radius: 5px;
            background: rgba(74, 158, 255, 0.13);
            color: var(--accent-primary);
            border: 1px solid rgba(74, 158, 255, 0.22);
            margin-left: 0.4rem;
            vertical-align: middle;
            flex-shrink: 0;
        }

        body.light-theme .session-discipline-badge {
            background: rgba(74, 158, 255, 0.09);
            border-color: rgba(74, 158, 255, 0.2);
        }

        /* ── New Session Modal ── */
        .new-session-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(8px);
            z-index: 2000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }

        /* ─── csTimer Import Results ─── */
        .cst-import-bar-track {
            width: 100%;
            height: 14px;
            border-radius: 999px;
            background: rgba(239, 68, 68, 0.25);
            overflow: hidden;
            margin-bottom: 1rem;
        }

        .cst-import-bar-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #22c55e, #4ade80);
            border-radius: 999px;
            transition: width 0.6s ease;
        }

        .cst-import-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 1.25rem;
            margin-bottom: 1rem;
        }

        .cst-import-stat {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-family: 'Manrope', sans-serif;
            font-size: 0.9rem;
            font-weight: 600;
            color: #111827;
        }

        body:not(.light-theme) .cst-import-stat {
            color: #e8edf4;
        }

        .cst-import-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .cst-import-dot.ok { background: #22c55e; }
        .cst-import-dot.skip { background: #ef4444; }

        .cst-import-sessions {
            max-height: 180px;
            overflow-y: auto;
            border-radius: 12px;
            background: rgba(120, 130, 160, 0.08);
            padding: 0.25rem 0;
            margin-bottom: 0.5rem;
        }

        .cst-import-session-row {
            display: flex;
            justify-content: space-between;
            gap: 0.75rem;
            padding: 0.55rem 0.9rem;
            font-family: 'Manrope', sans-serif;
            font-size: 0.85rem;
            color: #4b5563;
        }

        body:not(.light-theme) .cst-import-session-row {
            color: #9aa7c2;
        }

        .cst-import-session-row .name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .cst-import-session-row .count {
            flex-shrink: 0;
            font-weight: 700;
            color: #22c55e;
        }

        /* Warnings list: "Session X (Puzzle) is marked as 3x3" style messages */
        .cst-import-warnings {
            max-height: 140px;
            overflow-y: auto;
            margin-top: 0.5rem;
        }

        .cst-import-warning-row {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            padding: 0.5rem 0.6rem;
            font-family: 'Manrope', sans-serif;
            font-size: 0.8rem;
            line-height: 1.35;
            color: #b45309;
            background: rgba(245, 158, 11, 0.1);
            border-radius: 8px;
            margin-bottom: 0.4rem;
        }

        body:not(.light-theme) .cst-import-warning-row {
            color: #fbbf24;
            background: rgba(245, 158, 11, 0.12);
        }

        /* ─── Import / Export menu ─── */
        .ie-modal {
            max-width: 420px;
        }

        .ie-section {
            margin-bottom: 1.1rem;
        }

        .ie-section-title {
            font-family: 'Manrope', sans-serif;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            color: var(--text-muted);
            margin-bottom: 0.5rem;
        }

        .ie-menu {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }

        .ie-menu-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 0.7rem 0.9rem;
            border-radius: 10px;
            border: 1px solid rgba(120, 130, 160, 0.18);
            background: rgba(120, 130, 160, 0.06);
            color: var(--text-primary);
            font-family: 'Manrope', sans-serif;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s ease;
            text-align: left;
        }

        .ie-menu-item:hover {
            background: rgba(74, 158, 255, 0.12);
            border-color: rgba(74, 158, 255, 0.4);
        }

        .ie-menu-sub {
            font-weight: 500;
            opacity: 0.6;
            font-size: 0.82em;
        }

        .ie-arrow {
            opacity: 0.4;
            font-size: 1.1rem;
        }

        .new-session-overlay.visible {
            display: flex;
        }

        .new-session-modal {
            background: #ffffff;
            border-radius: 20px;
            padding: 2rem;
            width: 100%;
            max-width: 420px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        body:not(.light-theme) .new-session-modal {
            background: #1a2137;
            border: 1px solid rgba(74, 158, 255, 0.2);
        }

        .new-session-title {
            font-family: 'Manrope', sans-serif;
            font-size: 1.3rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 1.5rem;
        }

        body:not(.light-theme) .new-session-title {
            color: #e8edf4;
        }

        .new-session-field {
            margin-bottom: 1.25rem;
        }

        .new-session-label {
            display: block;
            font-family: 'Manrope', sans-serif;
            font-size: 0.82rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #6b7280;
            margin-bottom: 0.5rem;
        }

        body:not(.light-theme) .new-session-label {
            color: #a8b4c8;
        }

        .new-session-input {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 1.5px solid #e5e7eb;
            border-radius: 10px;
            font-family: 'Manrope', sans-serif;
            font-size: 1rem;
            font-weight: 500;
            color: #111827;
            background: #f9fafb;
            outline: none;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }

        .new-session-input:focus {
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.12);
            background: #ffffff;
        }

        body:not(.light-theme) .new-session-input {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(74, 158, 255, 0.25);
            color: #e8edf4;
        }

        body:not(.light-theme) .new-session-input:focus {
            background: rgba(74, 158, 255, 0.06);
            border-color: var(--accent-primary);
        }

        /* Custom discipline select */
        .discipline-select-wrapper {
            position: relative;
        }

        .discipline-select {
            width: 100%;
            padding: 0.75rem 2.5rem 0.75rem 1rem;
            border: 1.5px solid #e5e7eb;
            border-radius: 10px;
            font-family: 'Manrope', sans-serif;
            font-size: 0.95rem;
            font-weight: 600;
            color: #111827;
            background: #f9fafb;
            appearance: none;
            -webkit-appearance: none;
            outline: none;
            cursor: pointer;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }

        .discipline-select:focus {
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.12);
        }

        body:not(.light-theme) .discipline-select {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(74, 158, 255, 0.25);
            color: #e8edf4;
        }

        body:not(.light-theme) .discipline-select:focus {
            background: rgba(74, 158, 255, 0.06);
            border-color: var(--accent-primary);
        }

        body:not(.light-theme) .discipline-select option {
            background: #1a2137;
            color: #e8edf4;
        }

        .discipline-select-arrow {
            position: absolute;
            right: 0.9rem;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: #9ca3af;
            font-size: 0.8rem;
        }

        .new-session-actions {
            display: flex;
            gap: 0.75rem;
            margin-top: 1.75rem;
        }

        .new-session-btn {
            flex: 1;
            padding: 0.75rem 1rem;
            border-radius: 10px;
            font-family: 'Manrope', sans-serif;
            font-size: 0.9rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s ease;
            border: none;
        }

        .new-session-btn.primary {
            background: var(--accent-primary);
            color: #ffffff;
        }

        .new-session-btn.primary:hover {
            filter: brightness(1.1);
        }

        .new-session-btn.cancel {
            background: #f3f4f6;
            color: #6b7280;
        }

        .new-session-btn.cancel:hover {
            background: #e5e7eb;
            color: #374151;
        }

        body:not(.light-theme) .new-session-btn.cancel {
            background: rgba(255, 255, 255, 0.08);
            color: #a8b4c8;
        }

        body:not(.light-theme) .new-session-btn.cancel:hover {
            background: rgba(255, 255, 255, 0.12);
            color: #e8edf4;
        }

        .new-session-btn.danger {
            background: #ef4444;
            color: #ffffff;
        }

        .new-session-btn.danger:hover {
            filter: brightness(1.1);
        }


        

/* ===== Fire Timer dropdown menu ===== */
.logo-section { position: relative; }
.fire-menu { position: relative; }
.fire-menu-btn {
    width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer; color: inherit; opacity: 0.8; font-size: 13px; letter-spacing: 0.15em;
    padding: 6px 6px; transition: var(--transition); border-radius: 6px; text-align: center;
}
.fire-menu-btn:hover { opacity: 1; background: rgba(255,255,255,0.08); }
.fire-menu-dropdown {
    position: absolute; top: calc(100% + 8px); left: 0;
    min-width: 200px; background: var(--bg-primary);
    border: 1px solid rgba(255,255,255,0.1); border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-lg); padding: 6px; z-index: 500;
    opacity: 0; transform: translateY(-6px) scale(0.97); pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fire-menu-dropdown.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }
.fire-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: transparent; border: none; color: inherit; text-align: left;
    padding: 9px 10px; border-radius: 7px; cursor: pointer; font-size: 14px;
    font-family: 'Anybody', sans-serif; transition: var(--transition);
}
.fire-menu-item:hover:not(:disabled) { background: rgba(74, 158, 255, 0.12); transform: translateX(2px); }
.fire-menu-item-disabled { opacity: 0.45; cursor: not-allowed; position: relative; }
.fire-menu-soon {
    margin-left: auto; font-size: 10px; text-transform: uppercase;
    background: rgba(255,255,255,0.12); padding: 2px 6px; border-radius: 999px;
}
.fire-menu-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 6px 4px; }

/* ===== Algs Trainer modal ===== */
.algs-overlay {
    display: flex; position: fixed; inset: 0; background: rgba(0,0,0,0.65);
    backdrop-filter: blur(10px); z-index: 1000; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.algs-overlay.visible { opacity: 1; pointer-events: all; }
.algs-modal {
    background: var(--bg-primary); border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg); width: min(720px, 92vw); max-height: 86vh; overflow-y: auto;
    padding: 20px 24px 28px; position: relative;
    transform: scale(0.92); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.algs-overlay.visible .algs-modal { transform: scale(1); }
.algs-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
}
.algs-modal-title {
    font-family: 'Anybody', sans-serif; font-size: 19px; font-weight: 700; margin: 0;
    letter-spacing: 0.01em;
}
.algs-back-btn, .algs-modal-close {
    background: transparent; border: none; color: inherit; cursor: pointer;
    font-size: 14px; opacity: 0.65; padding: 6px 10px; border-radius: 8px;
    transition: var(--transition);
}
.algs-back-btn:hover, .algs-modal-close:hover {
    opacity: 1; background: rgba(255,255,255,0.08); transform: translateY(-1px);
}
.algs-modal-close { font-size: 22px; }

.algs-step-hidden { display: none !important; }
.algs-step {
    animation: algsStepIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes algsStepIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.algs-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.algs-grid-2x2 { grid-template-columns: repeat(2, 1fr); }
.algs-card {
    position: relative; background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.08); border-radius: var(--border-radius-sm);
    padding: 22px 12px; cursor: pointer; color: inherit;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}
.algs-card:hover:not(:disabled) {
    background: var(--bg-card-hover); transform: translateY(-3px);
    box-shadow: var(--shadow-md); border-color: rgba(74, 158, 255, 0.35);
}
.algs-card:active:not(:disabled) { transform: translateY(-1px); }
.algs-card-label { font-family: 'Anybody', sans-serif; font-weight: 700; font-size: 22px; }
.algs-card-sub { font-size: 11px; opacity: 0.6; }
.algs-card-locked { opacity: 0.4; cursor: not-allowed; }
.algs-card-locked:hover { transform: none; box-shadow: var(--shadow-sm); border-color: rgba(255,255,255,0.08); }
.algs-card-soon {
    position: absolute; top: 8px; right: 8px; font-size: 9px; text-transform: uppercase;
    background: rgba(255,255,255,0.15); padding: 2px 6px; border-radius: 999px;
}

.algs-step-fullscreen { width: 100%; }
.algs-list-count { font-size: 12px; opacity: 0.65; }
.header-pills { visibility: hidden !important; pointer-events: none !important; }

/* No emoji icons on puzzle/method/set cards — just big text */
.algs-card-icon { display: none; }

/* Fullscreen modal once past step 1 (method/stage selection onward) */
.algs-modal.algs-fullscreen {
    width: 100vw; height: 100vh; max-height: 100vh;
    border-radius: 0; display: flex; flex-direction: column;
}
.algs-modal.algs-fullscreen #algsStep2,
.algs-modal.algs-fullscreen #algsStep3 {
    flex: 1; display: flex; flex-direction: column;
}
.algs-modal.algs-fullscreen #algsStep2 .algs-grid,
.algs-modal.algs-fullscreen #algsStep3 .algs-grid {
    flex: 1; align-content: center;
}
.algs-modal.algs-fullscreen #algsStep4 { flex: 1; display: flex; flex-direction: column; }
.algs-modal.algs-fullscreen #algsStepPractice { flex: 1; display: flex; flex-direction: column; }

/* ===== Redesigned alg list: one algorithm per row, diagram on the right ===== */
.algs-cards-grid { display: flex; flex-direction: column; gap: 10px; max-height: none; flex: 1; overflow-y: auto; padding-right: 4px; }
.algs-alg-card {
    display: flex; flex-direction: row; align-items: center; justify-content: space-between;
    gap: 20px; padding: 16px 20px;
    background: var(--bg-card); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm); transition: var(--transition);
}
.algs-alg-card:hover {
    background: var(--bg-card-hover); transform: translateY(-2px);
    box-shadow: var(--shadow-md); border-color: rgba(74, 158, 255, 0.25);
}
.algs-alg-card-left { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.algs-alg-card-name { font-family: 'Anybody', sans-serif; font-weight: 700; font-size: 20px; }
.algs-alg-card-formula { font-family: 'JetBrains Mono', monospace; font-size: 15px; opacity: 0.85; white-space: normal; word-break: break-word; }
.algs-alg-card-footer { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.algs-alg-card-learned-wrap { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.algs-alg-card-learned {
    width: 19px; height: 19px; accent-color: var(--accent-success); cursor: pointer;
    transition: transform 0.15s ease;
}
.algs-alg-card-learned:hover { transform: scale(1.15); }
.algs-alg-practice-row-btn {
    background: rgba(74, 222, 128, 0.12); color: var(--accent-success);
    border: 1px solid rgba(74, 222, 128, 0.35);
    border-radius: 8px; padding: 7px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
    font-family: 'Anybody', sans-serif; transition: var(--transition);
}
.algs-alg-practice-row-btn:hover {
    background: rgba(74, 222, 128, 0.22); transform: translateY(-2px); box-shadow: var(--shadow-sm);
}
.algs-alg-practice-row-btn:active { transform: translateY(0); }
.algs-alg-diagram { flex-shrink: 0; width: 150px; height: 150px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3)); }

/* ===== Algs Trainer: toolbar + practice/drilling view ===== */
.algs-list-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-bottom: 12px; }
.algs-toolbar-check { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.75; margin-left: auto; }
.algs-practice-btn {
    background: linear-gradient(135deg, var(--accent-success), #22c55e); color: #06210f; border: none; border-radius: 8px;
    padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer;
    font-family: 'Anybody', sans-serif; box-shadow: var(--shadow-sm); transition: var(--transition);
}
.algs-practice-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.algs-practice-btn:active { transform: translateY(0); }

.algs-practice-wrap {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; text-align: center; padding: 20px;
}
.algs-practice-scramble { font-family: 'JetBrains Mono', monospace; font-size: 20px; opacity: 0.85; max-width: 640px; }
.algs-practice-timer {
    font-size: 72px; font-weight: 700; font-variant-numeric: tabular-nums;
    font-family: 'Anybody', sans-serif; transition: color 0.25s ease, text-shadow 0.25s ease;
}
.algs-practice-timer.running { color: var(--accent-success); text-shadow: 0 0 24px rgba(74, 222, 128, 0.45); }
.algs-practice-hint { font-size: 13px; opacity: 0.55; }
.algs-practice-case { font-size: 15px; opacity: 0.8; }
.algs-practice-stats { font-size: 12px; opacity: 0.6; display: flex; gap: 18px; }

/* ===== Algs Trainer: phased practice (warning / metronome / drill) ===== */
.algs-phase { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.algs-phase0-wrap { max-width: 520px; text-align: center; display: flex; flex-direction: column; gap: 24px; padding: 20px; animation: algsStepIn 0.4s ease; }
.algs-phase0-text { font-size: 18px; line-height: 1.5; opacity: 0.9; }
.algs-phase0-btns { display: flex; gap: 12px; justify-content: center; }
.algs-phase-btn-primary {
    background: linear-gradient(135deg, var(--accent-success), #22c55e); color: #06210f; border: none; border-radius: 10px;
    padding: 12px 26px; font-size: 15px; font-weight: 700; cursor: pointer;
    font-family: 'Anybody', sans-serif; box-shadow: var(--shadow-sm); transition: var(--transition);
}
.algs-phase-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.algs-phase-btn-primary:active { transform: translateY(0); }
.algs-phase-btn-secondary {
    background: rgba(255,255,255,0.06); color: inherit; border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px; padding: 12px 26px; font-size: 15px; cursor: pointer;
    font-family: 'Anybody', sans-serif; transition: var(--transition);
}
.algs-phase-btn-secondary:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.algs-phase-btn-secondary:active { transform: translateY(0); }

.algs-metronome-wrap { text-align: center; display: flex; flex-direction: column; gap: 20px; }
.algs-metronome-move {
    font-size: 140px; font-weight: 800; font-family: 'JetBrains Mono', monospace; line-height: 1;
    text-shadow: var(--shadow-md);
    animation: algsMovePop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes algsMovePop {
    from { opacity: 0.3; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}
.algs-metronome-progress { font-size: 14px; opacity: 0.6; }

.algs-finish-btn { margin-top: 10px; }

/* ===== F2L: group headers, precondition badge, slot badge ===== */
.algs-group-header {
    font-family: 'Anybody', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    opacity: 0.55; margin: 14px 4px 2px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.08);
}
.algs-group-header:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.algs-alg-card-precond {
    font-size: 11px; color: #ffb74d; opacity: 0.9;
}
.algs-f2l-badge {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 22px; opacity: 0.5; border: 2px dashed rgba(255,255,255,0.15);
    border-radius: 10px;
}

/* F2L diagram: wrapper + small target-slot label */
.algs-diagram-wrap { position: relative; width: 100%; height: 100%; }
.algs-diagram-wrap .algs-diagram-svg { width: 100%; height: 100%; }
.algs-diagram-slot-label {
    position: absolute; bottom: -2px; right: 2px; font-size: 11px; font-weight: 700;
    opacity: 0.7; background: rgba(0,0,0,0.35); padding: 1px 5px; border-radius: 5px;
}

.algs-metronome-controls { display: flex; gap: 10px; justify-content: center; margin-top: 4px; }
.algs-metronome-controls .algs-phase-btn-secondary { padding: 8px 16px; font-size: 13px; }
/* ===== Responsive safety net: prevent horizontal overflow in a non-fullscreen window ===== */
html {
    overflow-x: hidden;
}

@media (max-width: 1300px) {
    .main-content {
        grid-template-columns: 1fr;
        justify-items: center;
        max-width: 640px;
    }

    .left-column,
    .right-column {
        width: 100%;
        max-width: 500px;
        margin-top: 0;
        padding-bottom: 0;
    }

    .center-column {
        order: -1;
        max-width: 500px;
    }
}

/* ============================================================
   Mobile declutter (phones): timer + scramble stay the hero.
   Last 5 Solves / Best Times / Progress chart are hidden by
   default — Best Times & Progress already live in the full
   Statistics modal (📊 header button), so no duplicate toggle
   is needed for those. Averages collapses into a small pill
   fixed to the bottom-right corner. Commentary shifts to a
   compact, right-aligned line so it doesn't compete with the timer.
   ============================================================ */
@media (max-width: 700px) {
    .main-content {
        padding: 1rem 0.75rem 6rem;
        gap: 0.75rem;
    }

    /* Header: shrink the title badge + icon buttons to free up room for the timer */
    .header {
        padding: 0.75rem 0.75rem 0.25rem;
    }

    .logo-section {
        width: 168px;
        gap: 6px;
    }

    .title-badge {
        padding: 8px 10px;
    }

    .site-title {
        font-size: 1.1rem;
    }

    .record-title {
        font-size: 0.85rem;
    }

    .control-window {
        padding: 8px 8px;
        gap: 6px;
    }

    .header-icon-row {
        gap: 6px;
        margin: 0;
    }

    .icon-btn {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .icon-img {
        width: 18px;
        height: 18px;
    }

    .fire-menu-btn {
        padding: 5px 6px;
        font-size: 11px;
    }

    /* Timer: the hero of the mobile layout — give it more room */
    .timer-display {
        font-size: clamp(4.5rem, 19vw, 7rem);
    }

    /* Last 5 Solves: not useful on mobile (check the Sessions modal on desktop instead) */
    .left-column .card {
        display: none;
    }

    .left-column {
        gap: 0.6rem;
    }

    .control-btn {
        padding: 0.65rem 0.8rem;
        font-size: 0.85rem;
    }

    /* Best Times + Progress chart duplicate the Statistics modal — hide on mobile */
    .right-column .card:nth-child(1),
    .right-column .card:nth-child(3) {
        display: none;
    }

    .right-column {
        margin-top: 0;
        padding-bottom: 0;
        gap: 0;
        width: auto;
        max-width: none;
    }

    /* Averages: compact pill pinned to the bottom-right corner */
    .right-column .card:nth-child(2) {
        position: fixed;
        right: 0.6rem;
        bottom: 0.6rem;
        z-index: 40;
        padding: 0.55rem 0.8rem !important;
        background: rgba(20, 25, 40, 0.78);
        backdrop-filter: blur(12px);
        border-radius: var(--border-radius-sm);
        box-shadow: var(--shadow-md);
        min-width: 0;
    }

    body.light-theme .right-column .card:nth-child(2) {
        background: rgba(255, 255, 255, 0.85);
    }

    .right-column .card:nth-child(2) .card-title {
        font-size: 0.6rem;
        margin-bottom: 0.3rem;
        letter-spacing: 0.06em;
    }

    .right-column .averages {
        gap: 0.2rem;
    }

    .right-column .average-item {
        gap: 0.6rem;
    }

    .right-column .average-label {
        font-size: 0.68rem;
    }

    .right-column .average-value {
        font-size: 0.82rem;
    }

    /* Commentary: compact, right-aligned, out of the timer's way */
    .center-column {
        gap: 1rem;
    }

    .commentary-text {
        margin-top: 0.25rem;
        margin-left: auto;
        margin-right: 0.25rem;
        max-width: 75%;
        font-size: 0.9rem;
        text-align: right;
    }

    .scramble-text {
        font-size: 1rem;
    }

    .bottom-left-buttons {
        left: 0.6rem;
        bottom: 0.6rem;
        gap: 0.5rem;
    }

    .export-btn {
        padding: 0.55rem 0.85rem;
        font-size: 0.8rem;
    }

    /* ── Settings modal: sidebar becomes a horizontal-scroll tab strip ── */
    .settings-modal-new {
        width: 96vw;
        height: 90vh;
        max-height: none;
        border-radius: 16px;
    }

    .settings-header-new {
        padding: 1rem 1.1rem;
    }

    .settings-title-new {
        font-size: 1.2rem;
    }

    .settings-body {
        flex-direction: column;
    }

    .settings-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0.5rem 0.6rem;
        gap: 0.4rem;
        -webkit-overflow-scrolling: touch;
    }

    .settings-nav-item {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 0.6rem 0.9rem;
        font-size: 0.85rem;
        border-left: none;
        border-bottom: 3px solid transparent;
        border-radius: 8px 8px 0 0;
    }

    .settings-nav-item.active {
        border-left-color: transparent;
        border-bottom-color: var(--accent-primary);
    }

    .settings-content-area {
        padding: 1.1rem;
    }

    .setting-group {
        margin-bottom: 1.4rem;
    }

    /* ── Statistics modal ── */
    .statistics-modal {
        width: 96vw;
        max-height: 92vh;
        border-radius: 16px;
    }

    .statistics-header {
        padding: 1rem 1.1rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }

    .statistics-title {
        font-size: 1.3rem;
    }

    .statistics-header-actions {
        position: static;
        width: 100%;
        justify-content: space-between;
    }

    .stats-export-img-btn {
        padding: 0.5rem 0.85rem;
        font-size: 0.78rem;
    }

    .statistics-content {
        padding: 1rem;
    }

    .stats-summary {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        gap: 0.6rem;
        margin-bottom: 1.4rem;
    }

    .stat-card {
        padding: 0.9rem;
    }

    .stat-card-value {
        font-size: 1.2rem;
    }

    .chart-container {
        height: 240px;
        padding: 1rem;
    }

    .additional-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 1rem;
    }

    /* ── Sessions modal: session list becomes a horizontal scroll strip ── */
    .sessions-modal {
        width: 96vw;
        max-height: 90vh;
        border-radius: 16px;
    }

    .sessions-header {
        padding: 1rem 3.2rem 1rem 1.1rem;
    }

    .sessions-title {
        font-size: 1.3rem;
    }

    .sessions-close {
        top: 1rem;
        right: 1rem;
    }

    .sessions-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .sessions-list {
        border-right: none;
        border-bottom: 2px solid #e5e7eb;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        max-height: none;
        padding: 0.75rem;
        gap: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }

    .session-item {
        flex: 0 0 auto;
        min-width: 150px;
        margin-bottom: 0;
    }

    .session-details {
        padding: 1.1rem;
    }

    .session-details-title {
        font-size: 1.15rem;
    }

    .session-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 0.6rem;
        margin-bottom: 1.4rem;
    }

    .session-stat-card {
        padding: 0.75rem;
    }
}

/* ============================================================
   Migrated from inline styles (index.html) — genuine per-instance
   overrides that don't fit the base component class.
   ============================================================ */
.custom-divider--tight { margin-top: 1.25rem; }
.setting-group--mt { margin-top: 1.25rem; }
.setting-group--mt-lg { margin-top: 1.5rem; }
.setting-group--mb-sm { margin-bottom: 1.25rem; }
.segmented-control--mt-xs { margin-top: 0.4rem; }
.segmented-control--mt-sm { margin-top: 0.5rem; }
.setting-row--spaced { margin-top: 0.75rem; gap: 0.75rem; }
.setting-row--mb { margin-bottom: 0.75rem; }
.toggle-switch--noshrink { flex-shrink: 0; }
.setting-description--flush { margin: 0; }
.discipline-select-wrapper--narrow { max-width: 200px; }

.bottom-controls { display: none; }
#st-soundInspection { font-size: 0.95rem; margin-top: 1.25rem; }
#st-analytics-currenttime { margin-top: 1rem; }
#autoExportOptions { display: none; margin-top: 1rem; }
#autoExportEveryInput { width: 80px; text-align: center; }
#exportSessionBtn { grid-column: 1 / -1; }
#importResultCloseBtn, #ieCloseBtn, #honestModeCloseActive { width: 100%; }
#ttEnableLabel { margin-bottom: 0; }
#hmActiveState { display: none; }
#algsBackBtn { visibility: hidden; }

/* Reverted: these 3 caused a live regression, went back to inline style="display:none" in index.html */

/* ============================================================
   Auth (login / register) -- UI shell only, no backend wired yet.
   ============================================================ */
.auth-buttons {
    display: flex;
    gap: 1rem;
}

.auth-modal {
    max-height: 90vh;
    overflow-y: auto;
}

.auth-social-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.auth-social-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    font-family: 'Anybody', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.auth-social-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.auth-social-icon {
    font-weight: 700;
}

.auth-divider {
    text-align: center;
    font-size: 0.8rem;
    opacity: 0.6;
    margin: 0.5rem 0 1.25rem;
    position: relative;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 35%;
    height: 1px;
    background: rgba(148, 163, 184, 0.3);
}

.auth-divider::before { left: 0; }
.auth-divider::after { right: 0; }

.auth-warning-text {
    color: #ef4444;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.auth-account-email {
    color: inherit;
    opacity: 0.7;
}

.auth-error {
    display: none;
    color: #ef4444;
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0.5rem 0 0;
}

.auth-error.visible {
    display: block;
}