:root {
            --bg: #050816;
            --bg-soft: #0a0f24;
            --card: rgba(14, 22, 48, 0.85);
            --card-solid: #0e1630;
            --card-hover: rgba(20, 32, 68, 0.95);
            --border: rgba(0, 212, 255, 0.15);
            --border-light: rgba(255, 255, 255, 0.06);
            --text: #f0f6ff;
            --text2: #94b0d0;
            --text3: #5a7a9a;
            --accent: #00d4ff;
            --accent-glow: rgba(0, 212, 255, 0.4);
            --accent2: #a78bfa;
            --accent3: #34d399;
            --danger: #f87171;
            --warning: #fbbf24;
            --gradient: linear-gradient(135deg, #00d4ff 0%, #818cf8 50%, #c084fc 100%);
            --gradient-soft: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(167,139,250,0.1));
            --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.25);
            --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.45);
            --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
            --radius: 16px;
            --radius-lg: 22px;
            --radius-xl: 28px;
        }

        .light-theme {
            --bg: #f4f7fc;
            --bg-soft: #e8eef8;
            --card: rgba(255, 255, 255, 0.92);
            --card-solid: #ffffff;
            --card-hover: #ffffff;
            --border: rgba(0, 0, 0, 0.08);
            --border-light: rgba(0, 0, 0, 0.04);
            --text: #0f172a;
            --text2: #475569;
            --text3: #94a3b8;
            --accent: #0ea5e9;
            --accent-glow: rgba(14, 165, 233, 0.25);
            --accent2: #8b5cf6;
            --accent3: #10b981;
            --danger: #ef4444;
            --warning: #f59e0b;
            --gradient: linear-gradient(135deg, #0ea5e9 0%, #6366f1 50%, #a855f7 100%);
            --gradient-soft: linear-gradient(135deg, rgba(14,165,233,0.1), rgba(139,92,246,0.08));
            --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.06);
            --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.08);
            --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.12);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
        }

        body {
            background: var(--bg);
            color: var(--text);
            min-height: 100vh;
            font-size: 15px;
            overflow-x: hidden;
            transition: background 0.4s, color 0.4s;
            display: flex;
            flex-direction: column;
            line-height: 1.5;
        }

        /* Subtle background pattern */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background: 
                radial-gradient(ellipse 80% 50% at 20% -10%, rgba(0, 212, 255, 0.08), transparent),
                radial-gradient(ellipse 60% 40% at 80% 110%, rgba(167, 139, 250, 0.07), transparent);
            pointer-events: none;
            z-index: 0;
        }

        .app {
            max-width: 1080px;
            margin: 0 auto;
            padding: 14px 16px 100px;
            display: flex;
            flex-direction: column;
            gap: 18px;
            width: 100%;
            flex: 1;
            position: relative;
            z-index: 1;
        }

        /* ========== HEADER ========== */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--card);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            padding: 8px 12px 8px 18px;
            border-radius: 50px;
            border: 1px solid var(--border);
            position: sticky;
            top: 12px;
            z-index: 100;
            gap: 10px;
            box-shadow: var(--shadow-md);
        }

        .logo {
            font-size: 1.35rem;
            font-weight: 900;
            background: var(--gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            cursor: pointer;
            user-select: none;
            display: flex;
            align-items: center;
            gap: 8px;
            letter-spacing: -0.02em;
            white-space: nowrap;
        }

        .logo i {
            -webkit-text-fill-color: var(--accent);
            font-size: 1.2rem;
            animation: pulse 2.8s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.15); opacity: 0.85; }
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 6px;
            position: relative;
        }

        .nav {
            display: flex;
            gap: 2px;
            background: rgba(255, 255, 255, 0.04);
            border-radius: 40px;
            padding: 3px;
            border: 1px solid var(--border-light);
        }

        .light-theme .nav {
            background: rgba(0, 0, 0, 0.04);
        }

        .nav-btn {
            color: var(--text2);
            background: transparent;
            border: none;
            padding: 8px 14px;
            border-radius: 40px;
            font-weight: 700;
            font-size: 0.82rem;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .nav-btn i {
            font-size: 0.85rem;
        }

        .nav-btn:hover {
            color: var(--text);
            background: rgba(255, 255, 255, 0.06);
        }

        .nav-btn.active {
            background: var(--gradient);
            color: #fff;
            box-shadow: 0 4px 18px var(--accent-glow);
        }

        .icon-btn {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid var(--border-light);
            color: var(--text2);
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.95rem;
            position: relative;
            transition: all 0.25s;
            flex-shrink: 0;
        }

        .icon-btn:hover {
            background: rgba(0, 212, 255, 0.12);
            border-color: var(--accent);
            color: var(--accent);
            transform: translateY(-1px);
        }

        .badge-dot {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 9px;
            height: 9px;
            background: var(--danger);
            border-radius: 50%;
            display: none;
            border: 2px solid var(--card-solid);
            animation: blink 1.5s infinite;
        }

        .badge-dot.show { display: block; }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }

        .dropdown-panel {
            position: absolute;
            top: 50px;
            right: 0;
            width: 300px;
            max-height: 380px;
            overflow-y: auto;
            background: var(--card-solid);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 6px 0;
            display: none;
            z-index: 110;
            box-shadow: var(--shadow-lg);
            animation: dropIn 0.2s ease;
        }

        @keyframes dropIn {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .dropdown-panel.open { display: block; }

        .dropdown-item {
            padding: 12px 18px;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: 0.2s;
            border-left: 3px solid transparent;
        }

        .dropdown-item:hover {
            background: rgba(0, 212, 255, 0.08);
            border-left-color: var(--accent);
        }

        .dropdown-item i {
            color: var(--accent);
            width: 20px;
            text-align: center;
        }

        .dropdown-item small {
            color: var(--text3);
            font-size: 0.78rem;
        }

        /* ========== HERO ========== */
        .hero {
            border-radius: var(--radius-xl);
            overflow: hidden;
            border: 1px solid var(--border);
            height: 240px;
            background: #000;
            box-shadow: var(--shadow-md);
            position: relative;
        }

        .hero video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 40%, rgba(5, 8, 22, 0.7) 100%);
            pointer-events: none;
        }

        /* ========== PAGES ========== */
        .page {
            display: none;
            animation: fadeSlide 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes fadeSlide {
            from { opacity: 0; transform: translateY(12px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .page.active { display: block; }

        /* ========== TRUST BAR ========== */
        .trust-bar {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 16px 12px;
            box-shadow: var(--shadow-sm);
        }

        .trust-item {
            text-align: center;
            padding: 6px 4px;
        }

        .trust-item .icon-wrap {
            width: 42px;
            height: 42px;
            margin: 0 auto 8px;
            border-radius: 12px;
            background: var(--gradient-soft);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border);
        }

        .trust-item i {
            font-size: 1.15rem;
            color: var(--accent);
        }

        .trust-item .num {
            font-size: 1.25rem;
            font-weight: 800;
            color: var(--text);
            letter-spacing: -0.02em;
        }

        .trust-item .lbl {
            font-size: 0.72rem;
            color: var(--text3);
            font-weight: 600;
            margin-top: 2px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        /* ========== FEATURE GRID ========== */
        .feature-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin: 4px 0;
        }

        .feature-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 22px 18px;
            text-align: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--gradient);
            opacity: 0;
            transition: 0.3s;
        }

        .feature-card:hover {
            transform: translateY(-3px);
            border-color: var(--accent);
            box-shadow: 0 12px 32px var(--accent-glow);
        }

        .feature-card:hover::before { opacity: 1; }

        .feature-card .icon-wrap {
            width: 48px;
            height: 48px;
            margin: 0 auto 12px;
            border-radius: 14px;
            background: var(--gradient-soft);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border);
        }

        .feature-card i {
            font-size: 1.35rem;
            color: var(--accent);
        }

        .feature-card h3 {
            font-size: 0.95rem;
            font-weight: 800;
            margin-bottom: 4px;
            letter-spacing: -0.01em;
        }

        .feature-card p {
            font-size: 0.8rem;
            color: var(--text3);
            font-weight: 500;
        }

        /* ========== SECTION CARD ========== */
        .section-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 22px 24px;
            margin-top: 6px;
            box-shadow: var(--shadow-sm);
        }

        .section-card h3 {
            font-size: 1.05rem;
            font-weight: 800;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            letter-spacing: -0.01em;
        }

        .section-card h3 i {
            color: var(--accent);
            font-size: 1.1rem;
        }

        .steps-list {
            list-style: none;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .steps-list li {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px 14px;
            background: rgba(0, 0, 0, 0.15);
            border-radius: 12px;
            border: 1px solid var(--border-light);
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--text2);
            transition: 0.2s;
        }

        .light-theme .steps-list li {
            background: rgba(0, 0, 0, 0.03);
        }

        .steps-list li:hover {
            border-color: var(--border);
            color: var(--text);
        }

        .steps-list .step-num {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            background: var(--gradient);
            color: #fff;
            font-weight: 800;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .steps-list b {
            color: var(--accent);
            font-weight: 700;
        }

        /* ========== STATS ROW ========== */
        .stats-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 14px;
        }

        .stat-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 16px 10px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            transition: 0.25s;
        }

        .stat-card:hover {
            border-color: var(--accent);
            transform: translateY(-2px);
        }

        .stat-card i {
            font-size: 1.2rem;
            color: var(--accent);
            margin-bottom: 2px;
        }

        .stat-card .val {
            font-size: 1.4rem;
            font-weight: 900;
            letter-spacing: -0.03em;
        }

        .stat-card .val.cyan { color: var(--accent3); }
        .stat-card .val.purple { color: var(--accent2); }

        .stat-card .lbl {
            font-size: 0.7rem;
            color: var(--text3);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* ========== SEARCH & FILTER ========== */
        .toolbar {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
        }

        .search-box {
            flex: 1;
            position: relative;
        }

        .search-box i {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text3);
            font-size: 0.9rem;
        }

        .search-box input {
            width: 100%;
            padding: 12px 14px 12px 40px;
            background: var(--card);
            border: 1px solid var(--border);
            color: var(--text);
            border-radius: 14px;
            outline: none;
            font-size: 0.9rem;
            font-weight: 500;
            transition: 0.25s;
        }

        .search-box input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-glow);
        }

        .search-box input::placeholder {
            color: var(--text3);
        }

        #sortSelect {
            background: var(--card);
            border: 1px solid var(--border);
            color: var(--text2);
            padding: 11px 14px;
            border-radius: 14px;
            font-weight: 600;
            font-size: 0.85rem;
            outline: none;
            cursor: pointer;
            transition: 0.25s;
        }

        #sortSelect:focus {
            border-color: var(--accent);
        }

        .filter-group {
            display: flex;
            gap: 6px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }

        .filter-chip {
            background: var(--card);
            border: 1px solid var(--border);
            color: var(--text2);
            padding: 8px 14px;
            border-radius: 40px;
            font-weight: 700;
            font-size: 0.8rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.25s;
        }

        .filter-chip:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .filter-chip.active {
            background: var(--gradient);
            color: #fff;
            border-color: transparent;
            box-shadow: 0 4px 14px var(--accent-glow);
        }

        /* ========== PRODUCT GRID ========== */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
        }

        .product-card {
            background: var(--card-solid);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 20px 16px 16px;
            text-align: center;
            position: relative;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
        }

        .product-card:hover {
            transform: translateY(-4px);
            border-color: var(--accent);
            box-shadow: 0 16px 40px var(--accent-glow);
        }

        .product-card .badge-premium {
            position: absolute;
            top: 10px;
            right: 10px;
            background: var(--gradient);
            color: #fff;
            padding: 3px 10px;
            border-radius: 8px;
            font-size: 0.68rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .btn-wishlist {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-light);
            color: var(--text3);
            width: 34px;
            height: 34px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.25s;
            font-size: 0.9rem;
        }

        .btn-wishlist:hover {
            color: var(--danger);
            border-color: var(--danger);
            background: rgba(248, 113, 113, 0.1);
        }

        .btn-wishlist.active {
            background: var(--danger);
            color: #fff;
            border-color: var(--danger);
        }

        .product-icon {
            width: 56px;
            height: 56px;
            margin: 8px auto 12px;
            border-radius: 16px;
            background: var(--gradient-soft);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border);
        }

        .product-icon i {
            font-size: 1.5rem;
            color: var(--accent);
        }

        .product-uid {
            font-weight: 800;
            font-size: 1rem;
            margin-bottom: 4px;
            letter-spacing: -0.01em;
        }

        .product-price {
            font-size: 1.25rem;
            font-weight: 900;
            color: var(--accent);
            letter-spacing: -0.02em;
            margin-bottom: 8px;
        }

        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.72rem;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .status-badge.available {
            background: rgba(52, 211, 153, 0.15);
            color: var(--accent3);
        }

        .status-badge.sold {
            background: rgba(248, 113, 113, 0.15);
            color: var(--danger);
        }

        .btn-buy {
            width: 100%;
            background: var(--gradient);
            border: none;
            color: #fff;
            padding: 12px;
            border-radius: 12px;
            font-weight: 700;
            font-size: 0.88rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            transition: all 0.25s;
            box-shadow: 0 4px 16px var(--accent-glow);
        }

        .btn-buy:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 24px var(--accent-glow);
            filter: brightness(1.08);
        }

        .btn-buy:disabled,
        .btn-buy.disabled {
            background: rgba(40, 55, 75, 0.5);
            cursor: not-allowed;
            box-shadow: none;
            filter: none;
            transform: none;
        }

        /* ========== ORDER CARD ========== */
        .order-card {
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 14px 16px;
            margin-bottom: 8px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            transition: 0.2s;
        }

        .light-theme .order-card {
            background: rgba(0, 0, 0, 0.03);
        }

        .order-card:hover {
            border-color: var(--accent);
        }

        .order-card strong {
            font-weight: 800;
        }

        .order-card small {
            color: var(--text3);
            font-size: 0.8rem;
        }

        .order-status {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.72rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .order-status.verified {
            background: rgba(52, 211, 153, 0.15);
            color: var(--accent3);
        }

        .order-status.pending {
            background: rgba(251, 191, 36, 0.15);
            color: var(--warning);
        }

        .order-data {
            width: 100%;
            margin-top: 6px;
            padding: 10px 12px;
            background: rgba(0, 212, 255, 0.06);
            border-radius: 10px;
            font-size: 0.8rem;
            border: 1px solid var(--border-light);
            word-break: break-all;
        }

        /* ========== MODAL ========== */
        .modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.82);
            backdrop-filter: blur(8px);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            padding: 16px;
            animation: fadeIn 0.2s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .modal-overlay.active { display: flex; }

        .modal {
            background: var(--card-solid);
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            width: 100%;
            max-width: 440px;
            padding: 26px 22px;
            box-shadow: var(--shadow-lg);
            animation: modalUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            max-height: 90vh;
            overflow-y: auto;
        }

        @keyframes modalUp {
            from { opacity: 0; transform: translateY(20px) scale(0.97); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .modal-header h3 {
            font-size: 1.15rem;
            font-weight: 800;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .modal-header h3 i { color: var(--accent); }

        .modal-close {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid var(--border-light);
            color: var(--text2);
            width: 34px;
            height: 34px;
            border-radius: 50%;
            font-size: 1.2rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.2s;
            line-height: 1;
        }

        .modal-close:hover {
            background: var(--danger);
            color: #fff;
            border-color: var(--danger);
        }

        .input-field {
            width: 100%;
            background: rgba(0, 0, 0, 0.25);
            border: 1px solid var(--border);
            color: var(--text);
            padding: 13px 15px;
            border-radius: 12px;
            margin-bottom: 12px;
            font-size: 0.9rem;
            font-weight: 500;
            outline: none;
            transition: 0.25s;
        }

        .light-theme .input-field {
            background: rgba(0, 0, 0, 0.04);
        }

        .input-field:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-glow);
        }

        .input-field::placeholder {
            color: var(--text3);
        }

        textarea.input-field {
            resize: vertical;
            min-height: 70px;
        }

        .btn-primary {
            width: 100%;
            background: var(--gradient);
            border: none;
            color: #fff;
            padding: 14px;
            border-radius: 14px;
            font-weight: 700;
            font-size: 0.95rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.25s;
            box-shadow: 0 4px 20px var(--accent-glow);
        }

        .btn-primary:hover {
            filter: brightness(1.08);
            transform: translateY(-1px);
            box-shadow: 0 6px 28px var(--accent-glow);
        }

        .btn-primary:disabled {
            opacity: 0.7;
            cursor: not-allowed;
            transform: none;
        }

        .upload-zone {
            border: 2px dashed var(--border);
            border-radius: 14px;
            padding: 22px 16px;
            text-align: center;
            margin-bottom: 14px;
            cursor: pointer;
            transition: 0.25s;
            background: rgba(0, 0, 0, 0.12);
        }

        .upload-zone:hover {
            border-color: var(--accent);
            background: rgba(0, 212, 255, 0.05);
        }

        .upload-zone i {
            font-size: 1.6rem;
            color: var(--accent);
            margin-bottom: 6px;
            display: block;
        }

        .upload-zone p {
            color: var(--text2);
            font-size: 0.88rem;
            font-weight: 600;
        }

        /* ========== TOAST ========== */
        .toast {
            position: fixed;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            background: var(--card-solid);
            border: 1px solid var(--accent);
            padding: 12px 24px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 0.9rem;
            z-index: 9999;
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            white-space: nowrap;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            pointer-events: none;
        }

        .toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        /* ========== MUSIC BAR ========== */
        .music-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--card-solid);
            border-top: 1px solid var(--border);
            padding: 10px 18px;
            display: none;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            z-index: 90;
            box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(20px);
        }

        .music-bar.show { display: flex; }

        .music-info {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .music-info strong {
            font-size: 0.9rem;
            font-weight: 800;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .music-info small {
            color: var(--text3);
            font-size: 0.75rem;
        }

        .music-controls {
            display: flex;
            gap: 6px;
            align-items: center;
        }

        .music-controls .icon-btn {
            width: 36px;
            height: 36px;
        }

        #playBtnBar {
            background: var(--gradient);
            border: none;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            box-shadow: 0 4px 16px var(--accent-glow);
            transition: 0.2s;
        }

        #playBtnBar:hover {
            transform: scale(1.06);
        }

        /* ========== ADMIN ========== */
        .admin-tabs {
            display: flex;
            gap: 4px;
            margin-bottom: 16px;
            background: rgba(255, 255, 255, 0.04);
            padding: 3px;
            border-radius: 12px;
            border: 1px solid var(--border-light);
        }

        .admin-tabs .nav-btn {
            flex: 1;
            justify-content: center;
            padding: 9px 8px;
            font-size: 0.78rem;
        }

        .admin-list-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            margin-bottom: 6px;
            border: 1px solid var(--border-light);
            gap: 8px;
        }

        .light-theme .admin-list-item {
            background: rgba(0, 0, 0, 0.03);
        }

        .admin-list-item .info {
            min-width: 0;
            flex: 1;
        }

        .admin-list-item .info strong {
            font-size: 0.88rem;
        }

        .admin-list-item .info small {
            color: var(--text3);
            font-size: 0.75rem;
        }

        .delete-btn, .verify-btn {
            border: none;
            padding: 6px 12px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 700;
            font-size: 0.78rem;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: 0.2s;
            flex-shrink: 0;
        }

        .delete-btn {
            background: rgba(248, 113, 113, 0.15);
            color: var(--danger);
        }

        .delete-btn:hover {
            background: var(--danger);
            color: #fff;
        }

        .verify-btn {
            background: rgba(52, 211, 153, 0.15);
            color: var(--accent3);
        }

        .verify-btn:hover {
            background: var(--accent3);
            color: #fff;
        }

        /* ========== EMPTY STATE ========== */
        .empty-state {
            grid-column: 1 / -1;
            text-align: center;
            padding: 48px 20px;
            color: var(--text3);
        }

        .empty-state i {
            font-size: 3rem;
            display: block;
            margin-bottom: 12px;
            opacity: 0.4;
        }

        .empty-state p {
            font-weight: 600;
            font-size: 0.95rem;
        }

        /* ========== WISHLIST ITEM ========== */
        .wishlist-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid var(--border-light);
            gap: 10px;
        }

        .wishlist-item:last-child {
            border-bottom: none;
        }

        .wishlist-item .info {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }

        .wishlist-item .info i {
            color: var(--accent);
        }

        .wishlist-item .btn-buy {
            width: auto;
            padding: 7px 16px;
            font-size: 0.8rem;
            box-shadow: none;
        }

        /* ========== PROMO BAR ========== */
        .promo-bar {
            background: var(--gradient);
            color: #fff;
            text-align: center;
            padding: 10px 16px;
            font-weight: 700;
            font-size: 0.85rem;
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            animation: promoPulse 3s ease-in-out infinite;
            box-shadow: 0 4px 20px var(--accent-glow);
        }
        @keyframes promoPulse {
            0%, 100% { box-shadow: 0 4px 20px var(--accent-glow); }
            50% { box-shadow: 0 4px 32px var(--accent-glow), 0 0 40px rgba(167,139,250,0.3); }
        }
        .promo-bar i { font-size: 1rem; }
        .promo-bar .promo-close {
            background: rgba(255,255,255,0.2);
            border: none;
            color: #fff;
            width: 24px; height: 24px;
            border-radius: 50%;
            cursor: pointer;
            margin-left: auto;
            font-size: 0.8rem;
            display: flex; align-items: center; justify-content: center;
        }

        /* ========== CATEGORY PILLS ========== */
        .category-scroll {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding-bottom: 4px;
            scrollbar-width: none;
            margin-bottom: 12px;
        }
        .category-scroll::-webkit-scrollbar { display: none; }
        .cat-pill {
            flex-shrink: 0;
            background: var(--card);
            border: 1px solid var(--border);
            color: var(--text2);
            padding: 8px 16px;
            border-radius: 40px;
            font-weight: 700;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.25s;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .cat-pill:hover { border-color: var(--accent); color: var(--accent); }
        .cat-pill.active {
            background: var(--gradient);
            color: #fff;
            border-color: transparent;
            box-shadow: 0 4px 14px var(--accent-glow);
        }

        /* ========== FAQ ========== */
        .faq-list { display: flex; flex-direction: column; gap: 8px; }
        .faq-item {
            background: rgba(0,0,0,0.15);
            border: 1px solid var(--border-light);
            border-radius: 14px;
            overflow: hidden;
            transition: 0.25s;
        }
        .light-theme .faq-item { background: rgba(0,0,0,0.03); }
        .faq-item.open { border-color: var(--accent); }
        .faq-q {
            padding: 14px 16px;
            font-weight: 700;
            font-size: 0.9rem;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            color: var(--text);
        }
        .faq-q i { color: var(--accent); transition: 0.25s; flex-shrink: 0; }
        .faq-item.open .faq-q i { transform: rotate(180deg); }
        .faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease, padding 0.25s;
            color: var(--text2);
            font-size: 0.85rem;
            line-height: 1.6;
            padding: 0 16px;
        }
        .faq-item.open .faq-a { max-height: 200px; padding: 0 16px 14px; }

        /* ========== TESTIMONIALS ========== */
        .testi-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        .testi-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 18px;
            transition: 0.25s;
        }
        .testi-card:hover { border-color: var(--accent); transform: translateY(-2px); }
        .testi-stars { color: var(--warning); font-size: 0.85rem; margin-bottom: 8px; letter-spacing: 2px; }
        .testi-text { font-size: 0.85rem; color: var(--text2); line-height: 1.55; margin-bottom: 12px; font-style: italic; }
        .testi-user { display: flex; align-items: center; gap: 10px; }
        .testi-avatar {
            width: 36px; height: 36px;
            border-radius: 50%;
            background: var(--gradient);
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-weight: 800; font-size: 0.85rem;
        }
        .testi-name { font-weight: 700; font-size: 0.85rem; }
        .testi-role { font-size: 0.72rem; color: var(--text3); }

        /* ========== FLOATING CS ========== */
        .float-cs {
            position: fixed;
            bottom: 90px;
            right: 18px;
            z-index: 80;
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: flex-end;
        }
        .float-cs-btn {
            width: 54px; height: 54px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.4rem;
            color: #fff;
            box-shadow: 0 6px 24px rgba(0,0,0,0.35);
            transition: all 0.25s;
        }
        .float-cs-btn:hover { transform: scale(1.1); }
        .float-cs-btn.wa { background: #25D366; }
        .float-cs-btn.top { background: var(--card-solid); border: 1px solid var(--border); color: var(--accent); font-size: 1.1rem; width: 42px; height: 42px; opacity: 0; pointer-events: none; transition: 0.3s; }
        .float-cs-btn.top.show { opacity: 1; pointer-events: auto; }

        /* ========== COUPON BOX ========== */
        .coupon-row {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
        }
        .coupon-row input {
            flex: 1;
            background: rgba(0,0,0,0.25);
            border: 1px solid var(--border);
            color: var(--text);
            padding: 12px 14px;
            border-radius: 12px;
            font-size: 0.9rem;
            outline: none;
        }
        .light-theme .coupon-row input { background: rgba(0,0,0,0.04); }
        .coupon-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
        .coupon-row button {
            background: var(--gradient);
            border: none;
            color: #fff;
            padding: 0 18px;
            border-radius: 12px;
            font-weight: 700;
            font-size: 0.85rem;
            cursor: pointer;
            white-space: nowrap;
        }
        .coupon-msg { font-size: 0.8rem; margin-bottom: 10px; font-weight: 600; min-height: 1.2em; }
        .coupon-msg.ok { color: var(--accent3); }
        .coupon-msg.err { color: var(--danger); }

        /* ========== SKELETON LOADING ========== */
        .skeleton {
            background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
            border-radius: 12px;
        }
        .light-theme .skeleton {
            background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 75%);
            background-size: 200% 100%;
        }
        @keyframes shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        .skeleton-card { height: 220px; }
        .skeleton-row { height: 60px; margin-bottom: 8px; }

        /* ========== SYNC INDICATOR ========== */
        .sync-badge {
            position: fixed;
            top: 70px;
            right: 16px;
            z-index: 90;
            background: var(--card-solid);
            border: 1px solid var(--border);
            border-radius: 40px;
            padding: 6px 14px;
            font-size: 0.72rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 6px;
            box-shadow: var(--shadow-sm);
            opacity: 0;
            transform: translateY(-8px);
            transition: 0.3s;
            pointer-events: none;
        }
        .sync-badge.show { opacity: 1; transform: translateY(0); }
        .sync-badge .dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: var(--accent3);
            animation: blink 1.5s infinite;
        }
        .sync-badge.err .dot { background: var(--danger); }

        /* ========== QUICK VIEW MODAL ========== */
        .qv-info { text-align: center; margin-bottom: 16px; }
        .qv-uid { font-size: 1.4rem; font-weight: 900; margin-bottom: 6px; }
        .qv-price { font-size: 1.3rem; font-weight: 900; color: var(--accent); }
        .qv-status { margin: 10px 0; }

        /* ========== ADMIN STATS EXTRA ========== */
        .admin-stat-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 14px;
        }
        .admin-stat {
            background: rgba(0,0,0,0.2);
            border: 1px solid var(--border-light);
            border-radius: 12px;
            padding: 14px;
            text-align: center;
        }
        .light-theme .admin-stat { background: rgba(0,0,0,0.03); }
        .admin-stat .as-val { font-size: 1.3rem; font-weight: 900; color: var(--accent); }
        .admin-stat .as-lbl { font-size: 0.7rem; color: var(--text3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }

        /* ========== EXPORT BTN ========== */
        .btn-export {
            width: 100%;
            background: rgba(0,212,255,0.1);
            border: 1px solid var(--border);
            color: var(--accent);
            padding: 12px;
            border-radius: 12px;
            font-weight: 700;
            font-size: 0.85rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 10px;
            transition: 0.25s;
        }
        .btn-export:hover { background: var(--accent); color: #fff; }

        /* ========== PRODUCT IMAGE ========== */
        .product-img-wrap {
            width: 56px; height: 56px;
            margin: 8px auto 12px;
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid var(--border);
            background: var(--gradient-soft);
        }
        .product-img-wrap img {
            width: 100%; height: 100%;
            object-fit: cover;
        }

        /* ========== CONFETTI ========== */
        .confetti-piece {
            position: fixed;
            width: 8px; height: 8px;
            top: -10px;
            z-index: 9998;
            pointer-events: none;
            animation: confettiFall linear forwards;
        }
        @keyframes confettiFall {
            0% { transform: translateY(0) rotate(0deg); opacity: 1; }
            100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
        }

        /* ========== LIVE BADGE ========== */
        .live-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: rgba(52,211,153,0.15);
            color: var(--accent3);
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: 700;
        }
        .live-badge .live-dot {
            width: 6px; height: 6px;
            background: var(--accent3);
            border-radius: 50%;
            animation: blink 1.2s infinite;
        }

        /* ========== PRICE STRIKE ========== */
        .price-old {
            font-size: 0.8rem;
            color: var(--text3);
            text-decoration: line-through;
            font-weight: 600;
        }
        .discount-badge {
            position: absolute;
            top: 10px;
            left: 48px;
            background: var(--danger);
            color: #fff;
            padding: 2px 8px;
            border-radius: 6px;
            font-size: 0.65rem;
            font-weight: 800;
        }

        /* ========== TOAST VARIANTS ========== */
        .toast.success { border-color: var(--accent3); }
        .toast.error { border-color: var(--danger); }
        .toast.warning { border-color: var(--warning); }

        /* ========== SCROLLBAR ========== */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

        /* ========== SELECTION ========== */
        ::selection { background: var(--accent); color: #fff; }

        /* ========== FOCUS VISIBLE ========== */
        button:focus-visible, input:focus-visible, select:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        /* ========== LOADING SPINNER ========== */
        .spinner {
            width: 20px; height: 20px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin 0.7s linear infinite;
            display: inline-block;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ========== GLASS CARD EXTRA ========== */
        .glass {
            background: var(--card);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
        }

        /* ========== RIPPLE EFFECT ========== */
        .ripple {
            position: relative;
            overflow: hidden;
        }
        .ripple::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10.01%);
            transform: scale(10);
            opacity: 0;
            transition: transform 0.5s, opacity 0.5s;
        }
        .ripple:active::after {
            transform: scale(0);
            opacity: 1;
            transition: 0s;
        }

        /* ========== PAGE TRANSITION EXTRA ========== */
        .page { will-change: opacity, transform; }

        /* ========== ADMIN SALES CHART (CSS BARS) ========== */
        .sales-bars {
            display: flex;
            align-items: flex-end;
            gap: 6px;
            height: 80px;
            margin: 12px 0;
            padding: 0 4px;
        }
        .sales-bar {
            flex: 1;
            background: var(--gradient);
            border-radius: 6px 6px 0 0;
            min-height: 4px;
            opacity: 0.85;
            transition: height 0.4s;
            position: relative;
        }
        .sales-bar:hover { opacity: 1; }
        .sales-bar-lbl {
            position: absolute;
            bottom: -18px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.6rem;
            color: var(--text3);
            white-space: nowrap;
        }

        /* ========== RESPONSIVE ========== */
        @media (max-width: 700px) {
            .product-grid { grid-template-columns: 1fr 1fr; }
            .hero { height: 180px; }
            .trust-bar { grid-template-columns: repeat(2, 1fr); gap: 8px; }
            .nav-btn span { display: none; }
            .nav-btn { padding: 8px 12px; }
            .header { padding: 8px 10px 8px 14px; }
            .logo { font-size: 1.15rem; }
            .testi-grid { grid-template-columns: 1fr; }
            .float-cs { bottom: 80px; right: 12px; }
        }

        @media (max-width: 480px) {
            .product-grid { grid-template-columns: 1fr; }
            .feature-grid { grid-template-columns: 1fr; }
            .stats-row { gap: 6px; }
            .stat-card .val { font-size: 1.2rem; }
            .app { padding: 12px 12px 100px; }
            .dropdown-panel { width: 260px; right: -10px; }
            .admin-stat-grid { grid-template-columns: 1fr 1fr; }
        }


        /* ========== DESIGN SYSTEM UTILITIES (expanded) ========== */
        .u-flex { display: flex; }
        .u-flex-col { display: flex; flex-direction: column; }
        .u-flex-wrap { flex-wrap: wrap; }
        .u-items-center { align-items: center; }
        .u-justify-center { justify-content: center; }
        .u-justify-between { justify-content: space-between; }
        .u-gap-1 { gap: 4px; } .u-gap-2 { gap: 8px; } .u-gap-3 { gap: 12px; }
        .u-gap-4 { gap: 16px; } .u-gap-5 { gap: 20px; } .u-gap-6 { gap: 24px; }
        .u-m-0 { margin: 0; } .u-mt-1 { margin-top: 4px; } .u-mt-2 { margin-top: 8px; }
        .u-mt-3 { margin-top: 12px; } .u-mt-4 { margin-top: 16px; } .u-mb-2 { margin-bottom: 8px; }
        .u-mb-3 { margin-bottom: 12px; } .u-mb-4 { margin-bottom: 16px; }
        .u-p-2 { padding: 8px; } .u-p-3 { padding: 12px; } .u-p-4 { padding: 16px; }
        .u-px-3 { padding-left: 12px; padding-right: 12px; }
        .u-py-2 { padding-top: 8px; padding-bottom: 8px; }
        .u-text-xs { font-size: 0.72rem; } .u-text-sm { font-size: 0.85rem; }
        .u-text-base { font-size: 0.95rem; } .u-text-lg { font-size: 1.1rem; }
        .u-text-xl { font-size: 1.25rem; } .u-text-2xl { font-size: 1.5rem; }
        .u-font-bold { font-weight: 700; } .u-font-black { font-weight: 900; }
        .u-text-center { text-align: center; } .u-text-left { text-align: left; }
        .u-text-accent { color: var(--accent); } .u-text-muted { color: var(--text3); }
        .u-text-success { color: var(--accent3); } .u-text-danger { color: var(--danger); }
        .u-text-warn { color: var(--warning); }
        .u-rounded { border-radius: 12px; } .u-rounded-full { border-radius: 999px; }
        .u-border { border: 1px solid var(--border); }
        .u-shadow { box-shadow: var(--shadow-sm); } .u-shadow-lg { box-shadow: var(--shadow-lg); }
        .u-w-full { width: 100%; } .u-h-full { height: 100%; }
        .u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .u-hidden { display: none !important; } .u-invisible { visibility: hidden; }
        .u-opacity-50 { opacity: 0.5; } .u-opacity-75 { opacity: 0.75; }
        .u-pointer { cursor: pointer; } .u-select-none { user-select: none; }
        .u-transition { transition: all 0.25s ease; }
        .u-hover-lift:hover { transform: translateY(-2px); }
        .u-hover-glow:hover { box-shadow: 0 8px 28px var(--accent-glow); }
        .u-gradient-text {
            background: var(--gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .u-glass {
            background: var(--card);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid var(--border);
        }
        .u-divider {
            height: 1px;
            background: var(--border-light);
            margin: 14px 0;
            border: none;
        }
        .u-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: 700;
        }
        .u-badge-cyan { background: rgba(0,212,255,0.15); color: var(--accent); }
        .u-badge-green { background: rgba(52,211,153,0.15); color: var(--accent3); }
        .u-badge-red { background: rgba(248,113,113,0.15); color: var(--danger); }
        .u-badge-yellow { background: rgba(251,191,36,0.15); color: var(--warning); }
        .u-badge-purple { background: rgba(167,139,250,0.15); color: var(--accent2); }

        /* Activity feed */
        .activity-feed { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }
        .activity-item {
            display: flex; gap: 10px; align-items: flex-start;
            padding: 10px 12px;
            background: rgba(0,0,0,0.12);
            border-radius: 10px;
            border: 1px solid var(--border-light);
            font-size: 0.82rem;
        }
        .light-theme .activity-item { background: rgba(0,0,0,0.03); }
        .activity-item i { color: var(--accent); margin-top: 2px; }
        .activity-item .act-time { color: var(--text3); font-size: 0.72rem; }

        /* Ranking */
        .rank-list { display: flex; flex-direction: column; gap: 8px; }
        .rank-item {
            display: flex; align-items: center; gap: 12px;
            padding: 12px 14px;
            background: rgba(0,0,0,0.12);
            border-radius: 12px;
            border: 1px solid var(--border-light);
        }
        .light-theme .rank-item { background: rgba(0,0,0,0.03); }
        .rank-num {
            width: 28px; height: 28px; border-radius: 8px;
            background: var(--gradient); color: #fff;
            font-weight: 800; font-size: 0.8rem;
            display: flex; align-items: center; justify-content: center;
        }
        .rank-item:nth-child(1) .rank-num { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
        .rank-item:nth-child(2) .rank-num { background: linear-gradient(135deg, #94a3b8, #64748b); }
        .rank-item:nth-child(3) .rank-num { background: linear-gradient(135deg, #d97706, #92400e); }

        /* Keyboard shortcuts panel */
        .shortcuts-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        .shortcut-row {
            display: flex; justify-content: space-between; align-items: center;
            padding: 8px 12px;
            background: rgba(0,0,0,0.12);
            border-radius: 8px;
            font-size: 0.8rem;
        }
        .light-theme .shortcut-row { background: rgba(0,0,0,0.03); }
        kbd {
            background: var(--card-solid);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 2px 8px;
            font-size: 0.75rem;
            font-weight: 700;
            font-family: inherit;
            color: var(--accent);
        }

        /* Announcement */
        .announce-item {
            padding: 12px 14px;
            border-left: 3px solid var(--accent);
            background: rgba(0,212,255,0.06);
            border-radius: 0 10px 10px 0;
            margin-bottom: 8px;
            font-size: 0.85rem;
            color: var(--text2);
        }
        .announce-item strong { color: var(--text); display: block; margin-bottom: 2px; }

        .u-space-1 { --space: 4px; }
        .u-mt-1x { margin-top: calc(var(--space, 4px) * 1); }
        .u-mb-1x { margin-bottom: calc(var(--space, 4px) * 1); }
        .u-p-1x { padding: calc(4px * 1); }
        .u-gap-1x { gap: calc(4px * 1); }
        .u-text-1x { font-size: calc(0.7rem + 1 * 0.05rem); }
        .u-radius-1x { border-radius: calc(4px * 1); }
        .u-opacity-1x { opacity: 0.05; }
        .u-z-1 { z-index: 1; }
        .u-order-1 { order: 1; }
        .u-space-2 { --space: 8px; }
        .u-mt-2x { margin-top: calc(var(--space, 4px) * 2); }
        .u-mb-2x { margin-bottom: calc(var(--space, 4px) * 2); }
        .u-p-2x { padding: calc(4px * 2); }
        .u-gap-2x { gap: calc(4px * 2); }
        .u-text-2x { font-size: calc(0.7rem + 2 * 0.05rem); }
        .u-radius-2x { border-radius: calc(4px * 2); }
        .u-opacity-2x { opacity: 0.06; }
        .u-z-2 { z-index: 2; }
        .u-order-2 { order: 2; }
        .u-space-3 { --space: 12px; }
        .u-mt-3x { margin-top: calc(var(--space, 4px) * 3); }
        .u-mb-3x { margin-bottom: calc(var(--space, 4px) * 3); }
        .u-p-3x { padding: calc(4px * 3); }
        .u-gap-3x { gap: calc(4px * 3); }
        .u-text-3x { font-size: calc(0.7rem + 3 * 0.05rem); }
        .u-radius-3x { border-radius: calc(4px * 3); }
        .u-opacity-3x { opacity: 0.09; }
        .u-z-3 { z-index: 3; }
        .u-order-3 { order: 3; }
        .u-space-4 { --space: 16px; }
        .u-mt-4x { margin-top: calc(var(--space, 4px) * 4); }
        .u-mb-4x { margin-bottom: calc(var(--space, 4px) * 4); }
        .u-p-4x { padding: calc(4px * 4); }
        .u-gap-4x { gap: calc(4px * 4); }
        .u-text-4x { font-size: calc(0.7rem + 4 * 0.05rem); }
        .u-radius-4x { border-radius: calc(4px * 4); }
        .u-opacity-4x { opacity: 0.12; }
        .u-z-4 { z-index: 4; }
        .u-order-4 { order: 4; }
        .u-space-5 { --space: 20px; }
        .u-mt-5x { margin-top: calc(var(--space, 4px) * 5); }
        .u-mb-5x { margin-bottom: calc(var(--space, 4px) * 5); }
        .u-p-5x { padding: calc(4px * 5); }
        .u-gap-5x { gap: calc(4px * 5); }
        .u-text-5x { font-size: calc(0.7rem + 5 * 0.05rem); }
        .u-radius-5x { border-radius: calc(4px * 5); }
        .u-opacity-5x { opacity: 0.16; }
        .u-z-5 { z-index: 5; }
        .u-order-5 { order: 5; }
        .u-space-6 { --space: 24px; }
        .u-mt-6x { margin-top: calc(var(--space, 4px) * 6); }
        .u-mb-6x { margin-bottom: calc(var(--space, 4px) * 6); }
        .u-p-6x { padding: calc(4px * 6); }
        .u-gap-6x { gap: calc(4px * 6); }
        .u-text-6x { font-size: calc(0.7rem + 6 * 0.05rem); }
        .u-radius-6x { border-radius: calc(4px * 6); }
        .u-opacity-6x { opacity: 0.19; }
        .u-z-6 { z-index: 6; }
        .u-order-6 { order: 6; }
        .u-space-7 { --space: 28px; }
        .u-mt-7x { margin-top: calc(var(--space, 4px) * 7); }
        .u-mb-7x { margin-bottom: calc(var(--space, 4px) * 7); }
        .u-p-7x { padding: calc(4px * 7); }
        .u-gap-7x { gap: calc(4px * 7); }
        .u-text-7x { font-size: calc(0.7rem + 7 * 0.05rem); }
        .u-radius-7x { border-radius: calc(4px * 7); }
        .u-opacity-7x { opacity: 0.22; }
        .u-z-7 { z-index: 7; }
        .u-order-7 { order: 7; }
        .u-space-8 { --space: 32px; }
        .u-mt-8x { margin-top: calc(var(--space, 4px) * 8); }
        .u-mb-8x { margin-bottom: calc(var(--space, 4px) * 8); }
        .u-p-8x { padding: calc(4px * 8); }
        .u-gap-8x { gap: calc(4px * 8); }
        .u-text-8x { font-size: calc(0.7rem + 8 * 0.05rem); }
        .u-radius-8x { border-radius: calc(4px * 8); }
        .u-opacity-8x { opacity: 0.25; }
        .u-z-8 { z-index: 8; }
        .u-order-8 { order: 8; }
        .u-space-9 { --space: 36px; }
        .u-mt-9x { margin-top: calc(var(--space, 4px) * 9); }
        .u-mb-9x { margin-bottom: calc(var(--space, 4px) * 9); }
        .u-p-9x { padding: calc(4px * 9); }
        .u-gap-9x { gap: calc(4px * 9); }
        .u-text-9x { font-size: calc(0.7rem + 9 * 0.05rem); }
        .u-radius-9x { border-radius: calc(4px * 9); }
        .u-opacity-9x { opacity: 0.28; }
        .u-z-9 { z-index: 9; }
        .u-order-9 { order: 9; }
        .u-space-10 { --space: 40px; }
        .u-mt-10x { margin-top: calc(var(--space, 4px) * 10); }
        .u-mb-10x { margin-bottom: calc(var(--space, 4px) * 10); }
        .u-p-10x { padding: calc(4px * 10); }
        .u-gap-10x { gap: calc(4px * 10); }
        .u-text-10x { font-size: calc(0.7rem + 10 * 0.05rem); }
        .u-radius-10x { border-radius: calc(4px * 10); }
        .u-opacity-10x { opacity: 0.31; }
        .u-z-10 { z-index: 10; }
        .u-order-10 { order: 10; }
        .u-space-11 { --space: 44px; }
        .u-mt-11x { margin-top: calc(var(--space, 4px) * 11); }
        .u-mb-11x { margin-bottom: calc(var(--space, 4px) * 11); }
        .u-p-11x { padding: calc(4px * 11); }
        .u-gap-11x { gap: calc(4px * 11); }
        .u-text-11x { font-size: calc(0.7rem + 11 * 0.05rem); }
        .u-radius-11x { border-radius: calc(4px * 11); }
        .u-opacity-11x { opacity: 0.34; }
        .u-z-11 { z-index: 11; }
        .u-order-11 { order: 11; }
        .u-space-12 { --space: 48px; }
        .u-mt-12x { margin-top: calc(var(--space, 4px) * 12); }
        .u-mb-12x { margin-bottom: calc(var(--space, 4px) * 12); }
        .u-p-12x { padding: calc(4px * 12); }
        .u-gap-12x { gap: calc(4px * 12); }
        .u-text-12x { font-size: calc(0.7rem + 12 * 0.05rem); }
        .u-radius-12x { border-radius: calc(4px * 12); }
        .u-opacity-12x { opacity: 0.38; }
        .u-z-12 { z-index: 12; }
        .u-order-12 { order: 12; }
        .u-space-13 { --space: 52px; }
        .u-mt-13x { margin-top: calc(var(--space, 4px) * 13); }
        .u-mb-13x { margin-bottom: calc(var(--space, 4px) * 13); }
        .u-p-13x { padding: calc(4px * 13); }
        .u-gap-13x { gap: calc(4px * 13); }
        .u-text-13x { font-size: calc(0.7rem + 13 * 0.05rem); }
        .u-radius-13x { border-radius: calc(4px * 13); }
        .u-opacity-13x { opacity: 0.41; }
        .u-z-13 { z-index: 13; }
        .u-order-13 { order: 13; }
        .u-space-14 { --space: 56px; }
        .u-mt-14x { margin-top: calc(var(--space, 4px) * 14); }
        .u-mb-14x { margin-bottom: calc(var(--space, 4px) * 14); }
        .u-p-14x { padding: calc(4px * 14); }
        .u-gap-14x { gap: calc(4px * 14); }
        .u-text-14x { font-size: calc(0.7rem + 14 * 0.05rem); }
        .u-radius-14x { border-radius: calc(4px * 14); }
        .u-opacity-14x { opacity: 0.44; }
        .u-z-14 { z-index: 14; }
        .u-order-14 { order: 14; }
        .u-space-15 { --space: 60px; }
        .u-mt-15x { margin-top: calc(var(--space, 4px) * 15); }
        .u-mb-15x { margin-bottom: calc(var(--space, 4px) * 15); }
        .u-p-15x { padding: calc(4px * 15); }
        .u-gap-15x { gap: calc(4px * 15); }
        .u-text-15x { font-size: calc(0.7rem + 15 * 0.05rem); }
        .u-radius-15x { border-radius: calc(4px * 15); }
        .u-opacity-15x { opacity: 0.47; }
        .u-z-15 { z-index: 15; }
        .u-order-15 { order: 15; }
        .u-space-16 { --space: 64px; }
        .u-mt-16x { margin-top: calc(var(--space, 4px) * 16); }
        .u-mb-16x { margin-bottom: calc(var(--space, 4px) * 16); }
        .u-p-16x { padding: calc(4px * 16); }
        .u-gap-16x { gap: calc(4px * 16); }
        .u-text-16x { font-size: calc(0.7rem + 16 * 0.05rem); }
        .u-radius-16x { border-radius: calc(4px * 16); }
        .u-opacity-16x { opacity: 0.50; }
        .u-z-16 { z-index: 16; }
        .u-order-16 { order: 16; }
        .u-space-17 { --space: 68px; }
        .u-mt-17x { margin-top: calc(var(--space, 4px) * 17); }
        .u-mb-17x { margin-bottom: calc(var(--space, 4px) * 17); }
        .u-p-17x { padding: calc(4px * 17); }
        .u-gap-17x { gap: calc(4px * 17); }
        .u-text-17x { font-size: calc(0.7rem + 17 * 0.05rem); }
        .u-radius-17x { border-radius: calc(4px * 17); }
        .u-opacity-17x { opacity: 0.53; }
        .u-z-17 { z-index: 17; }
        .u-order-17 { order: 17; }
        .u-space-18 { --space: 72px; }
        .u-mt-18x { margin-top: calc(var(--space, 4px) * 18); }
        .u-mb-18x { margin-bottom: calc(var(--space, 4px) * 18); }
        .u-p-18x { padding: calc(4px * 18); }
        .u-gap-18x { gap: calc(4px * 18); }
        .u-text-18x { font-size: calc(0.7rem + 18 * 0.05rem); }
        .u-radius-18x { border-radius: calc(4px * 18); }
        .u-opacity-18x { opacity: 0.56; }
        .u-z-18 { z-index: 18; }
        .u-order-18 { order: 18; }
        .u-space-19 { --space: 76px; }
        .u-mt-19x { margin-top: calc(var(--space, 4px) * 19); }
        .u-mb-19x { margin-bottom: calc(var(--space, 4px) * 19); }
        .u-p-19x { padding: calc(4px * 19); }
        .u-gap-19x { gap: calc(4px * 19); }
        .u-text-19x { font-size: calc(0.7rem + 19 * 0.05rem); }
        .u-radius-19x { border-radius: calc(4px * 19); }
        .u-opacity-19x { opacity: 0.59; }
        .u-z-19 { z-index: 19; }
        .u-order-19 { order: 19; }
        .u-space-20 { --space: 80px; }
        .u-mt-20x { margin-top: calc(var(--space, 4px) * 20); }
        .u-mb-20x { margin-bottom: calc(var(--space, 4px) * 20); }
        .u-p-20x { padding: calc(4px * 20); }
        .u-gap-20x { gap: calc(4px * 20); }
        .u-text-20x { font-size: calc(0.7rem + 20 * 0.05rem); }
        .u-radius-20x { border-radius: calc(4px * 20); }
        .u-opacity-20x { opacity: 0.62; }
        .u-z-20 { z-index: 20; }
        .u-order-20 { order: 20; }
        .u-space-21 { --space: 84px; }
        .u-mt-21x { margin-top: calc(var(--space, 4px) * 21); }
        .u-mb-21x { margin-bottom: calc(var(--space, 4px) * 21); }
        .u-p-21x { padding: calc(4px * 21); }
        .u-gap-21x { gap: calc(4px * 21); }
        .u-text-21x { font-size: calc(0.7rem + 21 * 0.05rem); }
        .u-radius-21x { border-radius: calc(4px * 21); }
        .u-opacity-21x { opacity: 0.66; }
        .u-z-21 { z-index: 21; }
        .u-order-21 { order: 21; }
        .u-space-22 { --space: 88px; }
        .u-mt-22x { margin-top: calc(var(--space, 4px) * 22); }
        .u-mb-22x { margin-bottom: calc(var(--space, 4px) * 22); }
        .u-p-22x { padding: calc(4px * 22); }
        .u-gap-22x { gap: calc(4px * 22); }
        .u-text-22x { font-size: calc(0.7rem + 22 * 0.05rem); }
        .u-radius-22x { border-radius: calc(4px * 22); }
        .u-opacity-22x { opacity: 0.69; }
        .u-z-22 { z-index: 22; }
        .u-order-22 { order: 22; }
        .u-space-23 { --space: 92px; }
        .u-mt-23x { margin-top: calc(var(--space, 4px) * 23); }
        .u-mb-23x { margin-bottom: calc(var(--space, 4px) * 23); }
        .u-p-23x { padding: calc(4px * 23); }
        .u-gap-23x { gap: calc(4px * 23); }
        .u-text-23x { font-size: calc(0.7rem + 23 * 0.05rem); }
        .u-radius-23x { border-radius: calc(4px * 23); }
        .u-opacity-23x { opacity: 0.72; }
        .u-z-23 { z-index: 23; }
        .u-order-23 { order: 23; }
        .u-space-24 { --space: 96px; }
        .u-mt-24x { margin-top: calc(var(--space, 4px) * 24); }
        .u-mb-24x { margin-bottom: calc(var(--space, 4px) * 24); }
        .u-p-24x { padding: calc(4px * 24); }
        .u-gap-24x { gap: calc(4px * 24); }
        .u-text-24x { font-size: calc(0.7rem + 24 * 0.05rem); }
        .u-radius-24x { border-radius: calc(4px * 24); }
        .u-opacity-24x { opacity: 0.75; }
        .u-z-24 { z-index: 24; }
        .u-order-24 { order: 24; }
        .u-space-25 { --space: 100px; }
        .u-mt-25x { margin-top: calc(var(--space, 4px) * 25); }
        .u-mb-25x { margin-bottom: calc(var(--space, 4px) * 25); }
        .u-p-25x { padding: calc(4px * 25); }
        .u-gap-25x { gap: calc(4px * 25); }
        .u-text-25x { font-size: calc(0.7rem + 25 * 0.05rem); }
        .u-radius-25x { border-radius: calc(4px * 25); }
        .u-opacity-25x { opacity: 0.78; }
        .u-z-25 { z-index: 25; }
        .u-order-25 { order: 25; }
        .u-space-26 { --space: 104px; }
        .u-mt-26x { margin-top: calc(var(--space, 4px) * 26); }
        .u-mb-26x { margin-bottom: calc(var(--space, 4px) * 26); }
        .u-p-26x { padding: calc(4px * 26); }
        .u-gap-26x { gap: calc(4px * 26); }
        .u-text-26x { font-size: calc(0.7rem + 26 * 0.05rem); }
        .u-radius-26x { border-radius: calc(4px * 26); }
        .u-opacity-26x { opacity: 0.81; }
        .u-z-26 { z-index: 26; }
        .u-order-26 { order: 26; }
        .u-space-27 { --space: 108px; }
        .u-mt-27x { margin-top: calc(var(--space, 4px) * 27); }
        .u-mb-27x { margin-bottom: calc(var(--space, 4px) * 27); }
        .u-p-27x { padding: calc(4px * 27); }
        .u-gap-27x { gap: calc(4px * 27); }
        .u-text-27x { font-size: calc(0.7rem + 27 * 0.05rem); }
        .u-radius-27x { border-radius: calc(4px * 27); }
        .u-opacity-27x { opacity: 0.84; }
        .u-z-27 { z-index: 27; }
        .u-order-27 { order: 27; }
        .u-space-28 { --space: 112px; }
        .u-mt-28x { margin-top: calc(var(--space, 4px) * 28); }
        .u-mb-28x { margin-bottom: calc(var(--space, 4px) * 28); }
        .u-p-28x { padding: calc(4px * 28); }
        .u-gap-28x { gap: calc(4px * 28); }
        .u-text-28x { font-size: calc(0.7rem + 28 * 0.05rem); }
        .u-radius-28x { border-radius: calc(4px * 28); }
        .u-opacity-28x { opacity: 0.88; }
        .u-z-28 { z-index: 28; }
        .u-order-28 { order: 28; }
        .u-space-29 { --space: 116px; }
        .u-mt-29x { margin-top: calc(var(--space, 4px) * 29); }
        .u-mb-29x { margin-bottom: calc(var(--space, 4px) * 29); }
        .u-p-29x { padding: calc(4px * 29); }
        .u-gap-29x { gap: calc(4px * 29); }
        .u-text-29x { font-size: calc(0.7rem + 29 * 0.05rem); }
        .u-radius-29x { border-radius: calc(4px * 29); }
        .u-opacity-29x { opacity: 0.91; }
        .u-z-29 { z-index: 29; }
        .u-order-29 { order: 29; }
        .u-space-30 { --space: 120px; }
        .u-mt-30x { margin-top: calc(var(--space, 4px) * 30); }
        .u-mb-30x { margin-bottom: calc(var(--space, 4px) * 30); }
        .u-p-30x { padding: calc(4px * 30); }
        .u-gap-30x { gap: calc(4px * 30); }
        .u-text-30x { font-size: calc(0.7rem + 30 * 0.05rem); }
        .u-radius-30x { border-radius: calc(4px * 30); }
        .u-opacity-30x { opacity: 0.94; }
        .u-z-30 { z-index: 30; }
        .u-order-30 { order: 30; }
        .u-space-31 { --space: 124px; }
        .u-mt-31x { margin-top: calc(var(--space, 4px) * 31); }
        .u-mb-31x { margin-bottom: calc(var(--space, 4px) * 31); }
        .u-p-31x { padding: calc(4px * 31); }
        .u-gap-31x { gap: calc(4px * 31); }
        .u-text-31x { font-size: calc(0.7rem + 31 * 0.05rem); }
        .u-radius-31x { border-radius: calc(4px * 31); }
        .u-opacity-31x { opacity: 0.97; }
        .u-z-31 { z-index: 31; }
        .u-order-31 { order: 31; }
        .u-space-32 { --space: 128px; }
        .u-mt-32x { margin-top: calc(var(--space, 4px) * 32); }
        .u-mb-32x { margin-bottom: calc(var(--space, 4px) * 32); }
        .u-p-32x { padding: calc(4px * 32); }
        .u-gap-32x { gap: calc(4px * 32); }
        .u-text-32x { font-size: calc(0.7rem + 32 * 0.05rem); }
        .u-radius-32x { border-radius: calc(4px * 32); }
        .u-opacity-32x { opacity: 1.00; }
        .u-z-32 { z-index: 32; }
        .u-order-32 { order: 32; }

        .anim-fadeIn { animation: fadeIn 0.4s ease both; }
        @keyframes fadeIn {
            0% { opacity: 0; transform: translateY(8px) scale(0.98); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        .anim-fadeOut { animation: fadeOut 0.4s ease both; }
        @keyframes fadeOut {
            0% { opacity: 0; transform: translateY(8px) scale(0.98); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        .anim-slideUp { animation: slideUp 0.4s ease both; }
        @keyframes slideUp {
            0% { opacity: 0; transform: translateY(8px) scale(0.98); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        .anim-slideDown { animation: slideDown 0.4s ease both; }
        @keyframes slideDown {
            0% { opacity: 0; transform: translateY(8px) scale(0.98); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        .anim-slideLeft { animation: slideLeft 0.4s ease both; }
        @keyframes slideLeft {
            0% { opacity: 0; transform: translateY(8px) scale(0.98); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        .anim-slideRight { animation: slideRight 0.4s ease both; }
        @keyframes slideRight {
            0% { opacity: 0; transform: translateY(8px) scale(0.98); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        .anim-zoomIn { animation: zoomIn 0.4s ease both; }
        @keyframes zoomIn {
            0% { opacity: 0; transform: translateY(8px) scale(0.98); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        .anim-zoomOut { animation: zoomOut 0.4s ease both; }
        @keyframes zoomOut {
            0% { opacity: 0; transform: translateY(8px) scale(0.98); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        .anim-bounceIn { animation: bounceIn 0.4s ease both; }
        @keyframes bounceIn {
            0% { opacity: 0; transform: translateY(8px) scale(0.98); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        .anim-pulseSoft { animation: pulseSoft 0.4s ease both; }
        @keyframes pulseSoft {
            0% { opacity: 0; transform: translateY(8px) scale(0.98); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        .anim-shake { animation: shake 0.4s ease both; }
        @keyframes shake {
            0% { opacity: 0; transform: translateY(8px) scale(0.98); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        .anim-wiggle { animation: wiggle 0.4s ease both; }
        @keyframes wiggle {
            0% { opacity: 0; transform: translateY(8px) scale(0.98); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        .anim-flip { animation: flip 0.4s ease both; }
        @keyframes flip {
            0% { opacity: 0; transform: translateY(8px) scale(0.98); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        .anim-rotateIn { animation: rotateIn 0.4s ease both; }
        @keyframes rotateIn {
            0% { opacity: 0; transform: translateY(8px) scale(0.98); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        .anim-popIn { animation: popIn 0.4s ease both; }
        @keyframes popIn {
            0% { opacity: 0; transform: translateY(8px) scale(0.98); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        /* ========== THEME VARIANTS & PATTERNS ========== */

        .theme-accent-0 { --local-accent: hsl(0, 80%, 55%); }
        .theme-accent-0 .accent-apply { color: var(--local-accent); }
        .pattern-bg-0 {
            background-image: radial-gradient(circle at 0% 0%, rgba(0,212,255,0.020), transparent 50%);
        }
        .delay-0 { animation-delay: 0.00s; }
        .col-span-mod-0 { grid-column: span 1; }

        .theme-accent-1 { --local-accent: hsl(37, 80%, 55%); }
        .theme-accent-1 .accent-apply { color: var(--local-accent); }
        .pattern-bg-1 {
            background-image: radial-gradient(circle at 13% 7%, rgba(0,212,255,0.023), transparent 50%);
        }
        .delay-1 { animation-delay: 0.05s; }
        .col-span-mod-1 { grid-column: span 2; }

        .theme-accent-2 { --local-accent: hsl(74, 80%, 55%); }
        .theme-accent-2 .accent-apply { color: var(--local-accent); }
        .pattern-bg-2 {
            background-image: radial-gradient(circle at 26% 14%, rgba(0,212,255,0.026), transparent 50%);
        }
        .delay-2 { animation-delay: 0.10s; }
        .col-span-mod-2 { grid-column: span 3; }

        .theme-accent-3 { --local-accent: hsl(111, 80%, 55%); }
        .theme-accent-3 .accent-apply { color: var(--local-accent); }
        .pattern-bg-3 {
            background-image: radial-gradient(circle at 39% 21%, rgba(0,212,255,0.029), transparent 50%);
        }
        .delay-3 { animation-delay: 0.15s; }
        .col-span-mod-3 { grid-column: span 1; }

        .theme-accent-4 { --local-accent: hsl(148, 80%, 55%); }
        .theme-accent-4 .accent-apply { color: var(--local-accent); }
        .pattern-bg-4 {
            background-image: radial-gradient(circle at 52% 28%, rgba(0,212,255,0.032), transparent 50%);
        }
        .delay-4 { animation-delay: 0.20s; }
        .col-span-mod-4 { grid-column: span 2; }

        .theme-accent-5 { --local-accent: hsl(185, 80%, 55%); }
        .theme-accent-5 .accent-apply { color: var(--local-accent); }
        .pattern-bg-5 {
            background-image: radial-gradient(circle at 65% 35%, rgba(0,212,255,0.035), transparent 50%);
        }
        .delay-5 { animation-delay: 0.25s; }
        .col-span-mod-5 { grid-column: span 3; }

        .theme-accent-6 { --local-accent: hsl(222, 80%, 55%); }
        .theme-accent-6 .accent-apply { color: var(--local-accent); }
        .pattern-bg-6 {
            background-image: radial-gradient(circle at 78% 42%, rgba(0,212,255,0.038), transparent 50%);
        }
        .delay-6 { animation-delay: 0.30s; }
        .col-span-mod-6 { grid-column: span 1; }

        .theme-accent-7 { --local-accent: hsl(259, 80%, 55%); }
        .theme-accent-7 .accent-apply { color: var(--local-accent); }
        .pattern-bg-7 {
            background-image: radial-gradient(circle at 91% 49%, rgba(0,212,255,0.041), transparent 50%);
        }
        .delay-7 { animation-delay: 0.35s; }
        .col-span-mod-7 { grid-column: span 2; }

        .theme-accent-8 { --local-accent: hsl(296, 80%, 55%); }
        .theme-accent-8 .accent-apply { color: var(--local-accent); }
        .pattern-bg-8 {
            background-image: radial-gradient(circle at 4% 56%, rgba(0,212,255,0.044), transparent 50%);
        }
        .delay-8 { animation-delay: 0.40s; }
        .col-span-mod-8 { grid-column: span 3; }

        .theme-accent-9 { --local-accent: hsl(333, 80%, 55%); }
        .theme-accent-9 .accent-apply { color: var(--local-accent); }
        .pattern-bg-9 {
            background-image: radial-gradient(circle at 17% 63%, rgba(0,212,255,0.047), transparent 50%);
        }
        .delay-9 { animation-delay: 0.45s; }
        .col-span-mod-9 { grid-column: span 1; }

        .theme-accent-10 { --local-accent: hsl(10, 80%, 55%); }
        .theme-accent-10 .accent-apply { color: var(--local-accent); }
        .pattern-bg-10 {
            background-image: radial-gradient(circle at 30% 70%, rgba(0,212,255,0.020), transparent 50%);
        }
        .delay-10 { animation-delay: 0.50s; }
        .col-span-mod-10 { grid-column: span 2; }

        .theme-accent-11 { --local-accent: hsl(47, 80%, 55%); }
        .theme-accent-11 .accent-apply { color: var(--local-accent); }
        .pattern-bg-11 {
            background-image: radial-gradient(circle at 43% 77%, rgba(0,212,255,0.023), transparent 50%);
        }
        .delay-11 { animation-delay: 0.55s; }
        .col-span-mod-11 { grid-column: span 3; }

        .theme-accent-12 { --local-accent: hsl(84, 80%, 55%); }
        .theme-accent-12 .accent-apply { color: var(--local-accent); }
        .pattern-bg-12 {
            background-image: radial-gradient(circle at 56% 84%, rgba(0,212,255,0.026), transparent 50%);
        }
        .delay-12 { animation-delay: 0.60s; }
        .col-span-mod-12 { grid-column: span 1; }

        .theme-accent-13 { --local-accent: hsl(121, 80%, 55%); }
        .theme-accent-13 .accent-apply { color: var(--local-accent); }
        .pattern-bg-13 {
            background-image: radial-gradient(circle at 69% 91%, rgba(0,212,255,0.029), transparent 50%);
        }
        .delay-13 { animation-delay: 0.65s; }
        .col-span-mod-13 { grid-column: span 2; }

        .theme-accent-14 { --local-accent: hsl(158, 80%, 55%); }
        .theme-accent-14 .accent-apply { color: var(--local-accent); }
        .pattern-bg-14 {
            background-image: radial-gradient(circle at 82% 98%, rgba(0,212,255,0.032), transparent 50%);
        }
        .delay-14 { animation-delay: 0.70s; }
        .col-span-mod-14 { grid-column: span 3; }

        .theme-accent-15 { --local-accent: hsl(195, 80%, 55%); }
        .theme-accent-15 .accent-apply { color: var(--local-accent); }
        .pattern-bg-15 {
            background-image: radial-gradient(circle at 95% 5%, rgba(0,212,255,0.035), transparent 50%);
        }
        .delay-15 { animation-delay: 0.75s; }
        .col-span-mod-15 { grid-column: span 1; }

        .theme-accent-16 { --local-accent: hsl(232, 80%, 55%); }
        .theme-accent-16 .accent-apply { color: var(--local-accent); }
        .pattern-bg-16 {
            background-image: radial-gradient(circle at 8% 12%, rgba(0,212,255,0.038), transparent 50%);
        }
        .delay-16 { animation-delay: 0.80s; }
        .col-span-mod-16 { grid-column: span 2; }

        .theme-accent-17 { --local-accent: hsl(269, 80%, 55%); }
        .theme-accent-17 .accent-apply { color: var(--local-accent); }
        .pattern-bg-17 {
            background-image: radial-gradient(circle at 21% 19%, rgba(0,212,255,0.041), transparent 50%);
        }
        .delay-17 { animation-delay: 0.85s; }
        .col-span-mod-17 { grid-column: span 3; }

        .theme-accent-18 { --local-accent: hsl(306, 80%, 55%); }
        .theme-accent-18 .accent-apply { color: var(--local-accent); }
        .pattern-bg-18 {
            background-image: radial-gradient(circle at 34% 26%, rgba(0,212,255,0.044), transparent 50%);
        }
        .delay-18 { animation-delay: 0.90s; }
        .col-span-mod-18 { grid-column: span 1; }

        .theme-accent-19 { --local-accent: hsl(343, 80%, 55%); }
        .theme-accent-19 .accent-apply { color: var(--local-accent); }
        .pattern-bg-19 {
            background-image: radial-gradient(circle at 47% 33%, rgba(0,212,255,0.047), transparent 50%);
        }
        .delay-19 { animation-delay: 0.95s; }
        .col-span-mod-19 { grid-column: span 2; }

        .theme-accent-20 { --local-accent: hsl(20, 80%, 55%); }
        .theme-accent-20 .accent-apply { color: var(--local-accent); }
        .pattern-bg-20 {
            background-image: radial-gradient(circle at 60% 40%, rgba(0,212,255,0.020), transparent 50%);
        }
        .delay-20 { animation-delay: 1.00s; }
        .col-span-mod-20 { grid-column: span 3; }

        .theme-accent-21 { --local-accent: hsl(57, 80%, 55%); }
        .theme-accent-21 .accent-apply { color: var(--local-accent); }
        .pattern-bg-21 {
            background-image: radial-gradient(circle at 73% 47%, rgba(0,212,255,0.023), transparent 50%);
        }
        .delay-21 { animation-delay: 1.05s; }
        .col-span-mod-21 { grid-column: span 1; }

        .theme-accent-22 { --local-accent: hsl(94, 80%, 55%); }
        .theme-accent-22 .accent-apply { color: var(--local-accent); }
        .pattern-bg-22 {
            background-image: radial-gradient(circle at 86% 54%, rgba(0,212,255,0.026), transparent 50%);
        }
        .delay-22 { animation-delay: 1.10s; }
        .col-span-mod-22 { grid-column: span 2; }

        .theme-accent-23 { --local-accent: hsl(131, 80%, 55%); }
        .theme-accent-23 .accent-apply { color: var(--local-accent); }
        .pattern-bg-23 {
            background-image: radial-gradient(circle at 99% 61%, rgba(0,212,255,0.029), transparent 50%);
        }
        .delay-23 { animation-delay: 1.15s; }
        .col-span-mod-23 { grid-column: span 3; }

        .theme-accent-24 { --local-accent: hsl(168, 80%, 55%); }
        .theme-accent-24 .accent-apply { color: var(--local-accent); }
        .pattern-bg-24 {
            background-image: radial-gradient(circle at 12% 68%, rgba(0,212,255,0.032), transparent 50%);
        }
        .delay-24 { animation-delay: 1.20s; }
        .col-span-mod-24 { grid-column: span 1; }

        .theme-accent-25 { --local-accent: hsl(205, 80%, 55%); }
        .theme-accent-25 .accent-apply { color: var(--local-accent); }
        .pattern-bg-25 {
            background-image: radial-gradient(circle at 25% 75%, rgba(0,212,255,0.035), transparent 50%);
        }
        .delay-25 { animation-delay: 1.25s; }
        .col-span-mod-25 { grid-column: span 2; }

        .theme-accent-26 { --local-accent: hsl(242, 80%, 55%); }
        .theme-accent-26 .accent-apply { color: var(--local-accent); }
        .pattern-bg-26 {
            background-image: radial-gradient(circle at 38% 82%, rgba(0,212,255,0.038), transparent 50%);
        }
        .delay-26 { animation-delay: 1.30s; }
        .col-span-mod-26 { grid-column: span 3; }

        .theme-accent-27 { --local-accent: hsl(279, 80%, 55%); }
        .theme-accent-27 .accent-apply { color: var(--local-accent); }
        .pattern-bg-27 {
            background-image: radial-gradient(circle at 51% 89%, rgba(0,212,255,0.041), transparent 50%);
        }
        .delay-27 { animation-delay: 1.35s; }
        .col-span-mod-27 { grid-column: span 1; }

        .theme-accent-28 { --local-accent: hsl(316, 80%, 55%); }
        .theme-accent-28 .accent-apply { color: var(--local-accent); }
        .pattern-bg-28 {
            background-image: radial-gradient(circle at 64% 96%, rgba(0,212,255,0.044), transparent 50%);
        }
        .delay-28 { animation-delay: 1.40s; }
        .col-span-mod-28 { grid-column: span 2; }

        .theme-accent-29 { --local-accent: hsl(353, 80%, 55%); }
        .theme-accent-29 .accent-apply { color: var(--local-accent); }
        .pattern-bg-29 {
            background-image: radial-gradient(circle at 77% 3%, rgba(0,212,255,0.047), transparent 50%);
        }
        .delay-29 { animation-delay: 1.45s; }
        .col-span-mod-29 { grid-column: span 3; }

        .theme-accent-30 { --local-accent: hsl(30, 80%, 55%); }
        .theme-accent-30 .accent-apply { color: var(--local-accent); }
        .pattern-bg-30 {
            background-image: radial-gradient(circle at 90% 10%, rgba(0,212,255,0.020), transparent 50%);
        }
        .delay-30 { animation-delay: 1.50s; }
        .col-span-mod-30 { grid-column: span 1; }

        .theme-accent-31 { --local-accent: hsl(67, 80%, 55%); }
        .theme-accent-31 .accent-apply { color: var(--local-accent); }
        .pattern-bg-31 {
            background-image: radial-gradient(circle at 3% 17%, rgba(0,212,255,0.023), transparent 50%);
        }
        .delay-31 { animation-delay: 1.55s; }
        .col-span-mod-31 { grid-column: span 2; }

        .theme-accent-32 { --local-accent: hsl(104, 80%, 55%); }
        .theme-accent-32 .accent-apply { color: var(--local-accent); }
        .pattern-bg-32 {
            background-image: radial-gradient(circle at 16% 24%, rgba(0,212,255,0.026), transparent 50%);
        }
        .delay-32 { animation-delay: 1.60s; }
        .col-span-mod-32 { grid-column: span 3; }

        .theme-accent-33 { --local-accent: hsl(141, 80%, 55%); }
        .theme-accent-33 .accent-apply { color: var(--local-accent); }
        .pattern-bg-33 {
            background-image: radial-gradient(circle at 29% 31%, rgba(0,212,255,0.029), transparent 50%);
        }
        .delay-33 { animation-delay: 1.65s; }
        .col-span-mod-33 { grid-column: span 1; }

        .theme-accent-34 { --local-accent: hsl(178, 80%, 55%); }
        .theme-accent-34 .accent-apply { color: var(--local-accent); }
        .pattern-bg-34 {
            background-image: radial-gradient(circle at 42% 38%, rgba(0,212,255,0.032), transparent 50%);
        }
        .delay-34 { animation-delay: 1.70s; }
        .col-span-mod-34 { grid-column: span 2; }

        .theme-accent-35 { --local-accent: hsl(215, 80%, 55%); }
        .theme-accent-35 .accent-apply { color: var(--local-accent); }
        .pattern-bg-35 {
            background-image: radial-gradient(circle at 55% 45%, rgba(0,212,255,0.035), transparent 50%);
        }
        .delay-35 { animation-delay: 1.75s; }
        .col-span-mod-35 { grid-column: span 3; }

        .theme-accent-36 { --local-accent: hsl(252, 80%, 55%); }
        .theme-accent-36 .accent-apply { color: var(--local-accent); }
        .pattern-bg-36 {
            background-image: radial-gradient(circle at 68% 52%, rgba(0,212,255,0.038), transparent 50%);
        }
        .delay-36 { animation-delay: 1.80s; }
        .col-span-mod-36 { grid-column: span 1; }

        .theme-accent-37 { --local-accent: hsl(289, 80%, 55%); }
        .theme-accent-37 .accent-apply { color: var(--local-accent); }
        .pattern-bg-37 {
            background-image: radial-gradient(circle at 81% 59%, rgba(0,212,255,0.041), transparent 50%);
        }
        .delay-37 { animation-delay: 1.85s; }
        .col-span-mod-37 { grid-column: span 2; }

        .theme-accent-38 { --local-accent: hsl(326, 80%, 55%); }
        .theme-accent-38 .accent-apply { color: var(--local-accent); }
        .pattern-bg-38 {
            background-image: radial-gradient(circle at 94% 66%, rgba(0,212,255,0.044), transparent 50%);
        }
        .delay-38 { animation-delay: 1.90s; }
        .col-span-mod-38 { grid-column: span 3; }

        .theme-accent-39 { --local-accent: hsl(3, 80%, 55%); }
        .theme-accent-39 .accent-apply { color: var(--local-accent); }
        .pattern-bg-39 {
            background-image: radial-gradient(circle at 7% 73%, rgba(0,212,255,0.047), transparent 50%);
        }
        .delay-39 { animation-delay: 1.95s; }
        .col-span-mod-39 { grid-column: span 1; }

        .theme-accent-40 { --local-accent: hsl(40, 80%, 55%); }
        .theme-accent-40 .accent-apply { color: var(--local-accent); }
        .pattern-bg-40 {
            background-image: radial-gradient(circle at 20% 80%, rgba(0,212,255,0.020), transparent 50%);
        }
        .delay-40 { animation-delay: 2.00s; }
        .col-span-mod-40 { grid-column: span 2; }

        .theme-accent-41 { --local-accent: hsl(77, 80%, 55%); }
        .theme-accent-41 .accent-apply { color: var(--local-accent); }
        .pattern-bg-41 {
            background-image: radial-gradient(circle at 33% 87%, rgba(0,212,255,0.023), transparent 50%);
        }
        .delay-41 { animation-delay: 2.05s; }
        .col-span-mod-41 { grid-column: span 3; }

        .theme-accent-42 { --local-accent: hsl(114, 80%, 55%); }
        .theme-accent-42 .accent-apply { color: var(--local-accent); }
        .pattern-bg-42 {
            background-image: radial-gradient(circle at 46% 94%, rgba(0,212,255,0.026), transparent 50%);
        }
        .delay-42 { animation-delay: 2.10s; }
        .col-span-mod-42 { grid-column: span 1; }

        .theme-accent-43 { --local-accent: hsl(151, 80%, 55%); }
        .theme-accent-43 .accent-apply { color: var(--local-accent); }
        .pattern-bg-43 {
            background-image: radial-gradient(circle at 59% 1%, rgba(0,212,255,0.029), transparent 50%);
        }
        .delay-43 { animation-delay: 2.15s; }
        .col-span-mod-43 { grid-column: span 2; }

        .theme-accent-44 { --local-accent: hsl(188, 80%, 55%); }
        .theme-accent-44 .accent-apply { color: var(--local-accent); }
        .pattern-bg-44 {
            background-image: radial-gradient(circle at 72% 8%, rgba(0,212,255,0.032), transparent 50%);
        }
        .delay-44 { animation-delay: 2.20s; }
        .col-span-mod-44 { grid-column: span 3; }

        .theme-accent-45 { --local-accent: hsl(225, 80%, 55%); }
        .theme-accent-45 .accent-apply { color: var(--local-accent); }
        .pattern-bg-45 {
            background-image: radial-gradient(circle at 85% 15%, rgba(0,212,255,0.035), transparent 50%);
        }
        .delay-45 { animation-delay: 2.25s; }
        .col-span-mod-45 { grid-column: span 1; }

        .theme-accent-46 { --local-accent: hsl(262, 80%, 55%); }
        .theme-accent-46 .accent-apply { color: var(--local-accent); }
        .pattern-bg-46 {
            background-image: radial-gradient(circle at 98% 22%, rgba(0,212,255,0.038), transparent 50%);
        }
        .delay-46 { animation-delay: 2.30s; }
        .col-span-mod-46 { grid-column: span 2; }

        .theme-accent-47 { --local-accent: hsl(299, 80%, 55%); }
        .theme-accent-47 .accent-apply { color: var(--local-accent); }
        .pattern-bg-47 {
            background-image: radial-gradient(circle at 11% 29%, rgba(0,212,255,0.041), transparent 50%);
        }
        .delay-47 { animation-delay: 2.35s; }
        .col-span-mod-47 { grid-column: span 3; }

        .theme-accent-48 { --local-accent: hsl(336, 80%, 55%); }
        .theme-accent-48 .accent-apply { color: var(--local-accent); }
        .pattern-bg-48 {
            background-image: radial-gradient(circle at 24% 36%, rgba(0,212,255,0.044), transparent 50%);
        }
        .delay-48 { animation-delay: 2.40s; }
        .col-span-mod-48 { grid-column: span 1; }

        .theme-accent-49 { --local-accent: hsl(13, 80%, 55%); }
        .theme-accent-49 .accent-apply { color: var(--local-accent); }
        .pattern-bg-49 {
            background-image: radial-gradient(circle at 37% 43%, rgba(0,212,255,0.047), transparent 50%);
        }
        .delay-49 { animation-delay: 2.45s; }
        .col-span-mod-49 { grid-column: span 2; }

        .theme-accent-50 { --local-accent: hsl(50, 80%, 55%); }
        .theme-accent-50 .accent-apply { color: var(--local-accent); }
        .pattern-bg-50 {
            background-image: radial-gradient(circle at 50% 50%, rgba(0,212,255,0.020), transparent 50%);
        }
        .delay-50 { animation-delay: 2.50s; }
        .col-span-mod-50 { grid-column: span 3; }

        .theme-accent-51 { --local-accent: hsl(87, 80%, 55%); }
        .theme-accent-51 .accent-apply { color: var(--local-accent); }
        .pattern-bg-51 {
            background-image: radial-gradient(circle at 63% 57%, rgba(0,212,255,0.023), transparent 50%);
        }
        .delay-51 { animation-delay: 2.55s; }
        .col-span-mod-51 { grid-column: span 1; }

        .theme-accent-52 { --local-accent: hsl(124, 80%, 55%); }
        .theme-accent-52 .accent-apply { color: var(--local-accent); }
        .pattern-bg-52 {
            background-image: radial-gradient(circle at 76% 64%, rgba(0,212,255,0.026), transparent 50%);
        }
        .delay-52 { animation-delay: 2.60s; }
        .col-span-mod-52 { grid-column: span 2; }

        .theme-accent-53 { --local-accent: hsl(161, 80%, 55%); }
        .theme-accent-53 .accent-apply { color: var(--local-accent); }
        .pattern-bg-53 {
            background-image: radial-gradient(circle at 89% 71%, rgba(0,212,255,0.029), transparent 50%);
        }
        .delay-53 { animation-delay: 2.65s; }
        .col-span-mod-53 { grid-column: span 3; }

        .theme-accent-54 { --local-accent: hsl(198, 80%, 55%); }
        .theme-accent-54 .accent-apply { color: var(--local-accent); }
        .pattern-bg-54 {
            background-image: radial-gradient(circle at 2% 78%, rgba(0,212,255,0.032), transparent 50%);
        }
        .delay-54 { animation-delay: 2.70s; }
        .col-span-mod-54 { grid-column: span 1; }

        .theme-accent-55 { --local-accent: hsl(235, 80%, 55%); }
        .theme-accent-55 .accent-apply { color: var(--local-accent); }
        .pattern-bg-55 {
            background-image: radial-gradient(circle at 15% 85%, rgba(0,212,255,0.035), transparent 50%);
        }
        .delay-55 { animation-delay: 2.75s; }
        .col-span-mod-55 { grid-column: span 2; }

        .theme-accent-56 { --local-accent: hsl(272, 80%, 55%); }
        .theme-accent-56 .accent-apply { color: var(--local-accent); }
        .pattern-bg-56 {
            background-image: radial-gradient(circle at 28% 92%, rgba(0,212,255,0.038), transparent 50%);
        }
        .delay-56 { animation-delay: 2.80s; }
        .col-span-mod-56 { grid-column: span 3; }

        .theme-accent-57 { --local-accent: hsl(309, 80%, 55%); }
        .theme-accent-57 .accent-apply { color: var(--local-accent); }
        .pattern-bg-57 {
            background-image: radial-gradient(circle at 41% 99%, rgba(0,212,255,0.041), transparent 50%);
        }
        .delay-57 { animation-delay: 2.85s; }
        .col-span-mod-57 { grid-column: span 1; }

        .theme-accent-58 { --local-accent: hsl(346, 80%, 55%); }
        .theme-accent-58 .accent-apply { color: var(--local-accent); }
        .pattern-bg-58 {
            background-image: radial-gradient(circle at 54% 6%, rgba(0,212,255,0.044), transparent 50%);
        }
        .delay-58 { animation-delay: 2.90s; }
        .col-span-mod-58 { grid-column: span 2; }

        .theme-accent-59 { --local-accent: hsl(23, 80%, 55%); }
        .theme-accent-59 .accent-apply { color: var(--local-accent); }
        .pattern-bg-59 {
            background-image: radial-gradient(circle at 67% 13%, rgba(0,212,255,0.047), transparent 50%);
        }
        .delay-59 { animation-delay: 2.95s; }
        .col-span-mod-59 { grid-column: span 3; }

        .theme-accent-60 { --local-accent: hsl(60, 80%, 55%); }
        .theme-accent-60 .accent-apply { color: var(--local-accent); }
        .pattern-bg-60 {
            background-image: radial-gradient(circle at 80% 20%, rgba(0,212,255,0.020), transparent 50%);
        }
        .delay-60 { animation-delay: 3.00s; }
        .col-span-mod-60 { grid-column: span 1; }

        .theme-accent-61 { --local-accent: hsl(97, 80%, 55%); }
        .theme-accent-61 .accent-apply { color: var(--local-accent); }
        .pattern-bg-61 {
            background-image: radial-gradient(circle at 93% 27%, rgba(0,212,255,0.023), transparent 50%);
        }
        .delay-61 { animation-delay: 3.05s; }
        .col-span-mod-61 { grid-column: span 2; }

        .theme-accent-62 { --local-accent: hsl(134, 80%, 55%); }
        .theme-accent-62 .accent-apply { color: var(--local-accent); }
        .pattern-bg-62 {
            background-image: radial-gradient(circle at 6% 34%, rgba(0,212,255,0.026), transparent 50%);
        }
        .delay-62 { animation-delay: 3.10s; }
        .col-span-mod-62 { grid-column: span 3; }

        .theme-accent-63 { --local-accent: hsl(171, 80%, 55%); }
        .theme-accent-63 .accent-apply { color: var(--local-accent); }
        .pattern-bg-63 {
            background-image: radial-gradient(circle at 19% 41%, rgba(0,212,255,0.029), transparent 50%);
        }
        .delay-63 { animation-delay: 3.15s; }
        .col-span-mod-63 { grid-column: span 1; }

        .theme-accent-64 { --local-accent: hsl(208, 80%, 55%); }
        .theme-accent-64 .accent-apply { color: var(--local-accent); }
        .pattern-bg-64 {
            background-image: radial-gradient(circle at 32% 48%, rgba(0,212,255,0.032), transparent 50%);
        }
        .delay-64 { animation-delay: 3.20s; }
        .col-span-mod-64 { grid-column: span 2; }

        .theme-accent-65 { --local-accent: hsl(245, 80%, 55%); }
        .theme-accent-65 .accent-apply { color: var(--local-accent); }
        .pattern-bg-65 {
            background-image: radial-gradient(circle at 45% 55%, rgba(0,212,255,0.035), transparent 50%);
        }
        .delay-65 { animation-delay: 3.25s; }
        .col-span-mod-65 { grid-column: span 3; }

        .theme-accent-66 { --local-accent: hsl(282, 80%, 55%); }
        .theme-accent-66 .accent-apply { color: var(--local-accent); }
        .pattern-bg-66 {
            background-image: radial-gradient(circle at 58% 62%, rgba(0,212,255,0.038), transparent 50%);
        }
        .delay-66 { animation-delay: 3.30s; }
        .col-span-mod-66 { grid-column: span 1; }

        .theme-accent-67 { --local-accent: hsl(319, 80%, 55%); }
        .theme-accent-67 .accent-apply { color: var(--local-accent); }
        .pattern-bg-67 {
            background-image: radial-gradient(circle at 71% 69%, rgba(0,212,255,0.041), transparent 50%);
        }
        .delay-67 { animation-delay: 3.35s; }
        .col-span-mod-67 { grid-column: span 2; }

        .theme-accent-68 { --local-accent: hsl(356, 80%, 55%); }
        .theme-accent-68 .accent-apply { color: var(--local-accent); }
        .pattern-bg-68 {
            background-image: radial-gradient(circle at 84% 76%, rgba(0,212,255,0.044), transparent 50%);
        }
        .delay-68 { animation-delay: 3.40s; }
        .col-span-mod-68 { grid-column: span 3; }

        .theme-accent-69 { --local-accent: hsl(33, 80%, 55%); }
        .theme-accent-69 .accent-apply { color: var(--local-accent); }
        .pattern-bg-69 {
            background-image: radial-gradient(circle at 97% 83%, rgba(0,212,255,0.047), transparent 50%);
        }
        .delay-69 { animation-delay: 3.45s; }
        .col-span-mod-69 { grid-column: span 1; }

        .theme-accent-70 { --local-accent: hsl(70, 80%, 55%); }
        .theme-accent-70 .accent-apply { color: var(--local-accent); }
        .pattern-bg-70 {
            background-image: radial-gradient(circle at 10% 90%, rgba(0,212,255,0.020), transparent 50%);
        }
        .delay-70 { animation-delay: 3.50s; }
        .col-span-mod-70 { grid-column: span 2; }

        .theme-accent-71 { --local-accent: hsl(107, 80%, 55%); }
        .theme-accent-71 .accent-apply { color: var(--local-accent); }
        .pattern-bg-71 {
            background-image: radial-gradient(circle at 23% 97%, rgba(0,212,255,0.023), transparent 50%);
        }
        .delay-71 { animation-delay: 3.55s; }
        .col-span-mod-71 { grid-column: span 3; }

        .theme-accent-72 { --local-accent: hsl(144, 80%, 55%); }
        .theme-accent-72 .accent-apply { color: var(--local-accent); }
        .pattern-bg-72 {
            background-image: radial-gradient(circle at 36% 4%, rgba(0,212,255,0.026), transparent 50%);
        }
        .delay-72 { animation-delay: 3.60s; }
        .col-span-mod-72 { grid-column: span 1; }

        .theme-accent-73 { --local-accent: hsl(181, 80%, 55%); }
        .theme-accent-73 .accent-apply { color: var(--local-accent); }
        .pattern-bg-73 {
            background-image: radial-gradient(circle at 49% 11%, rgba(0,212,255,0.029), transparent 50%);
        }
        .delay-73 { animation-delay: 3.65s; }
        .col-span-mod-73 { grid-column: span 2; }

        .theme-accent-74 { --local-accent: hsl(218, 80%, 55%); }
        .theme-accent-74 .accent-apply { color: var(--local-accent); }
        .pattern-bg-74 {
            background-image: radial-gradient(circle at 62% 18%, rgba(0,212,255,0.032), transparent 50%);
        }
        .delay-74 { animation-delay: 3.70s; }
        .col-span-mod-74 { grid-column: span 3; }

        .theme-accent-75 { --local-accent: hsl(255, 80%, 55%); }
        .theme-accent-75 .accent-apply { color: var(--local-accent); }
        .pattern-bg-75 {
            background-image: radial-gradient(circle at 75% 25%, rgba(0,212,255,0.035), transparent 50%);
        }
        .delay-75 { animation-delay: 3.75s; }
        .col-span-mod-75 { grid-column: span 1; }

        .theme-accent-76 { --local-accent: hsl(292, 80%, 55%); }
        .theme-accent-76 .accent-apply { color: var(--local-accent); }
        .pattern-bg-76 {
            background-image: radial-gradient(circle at 88% 32%, rgba(0,212,255,0.038), transparent 50%);
        }
        .delay-76 { animation-delay: 3.80s; }
        .col-span-mod-76 { grid-column: span 2; }

        .theme-accent-77 { --local-accent: hsl(329, 80%, 55%); }
        .theme-accent-77 .accent-apply { color: var(--local-accent); }
        .pattern-bg-77 {
            background-image: radial-gradient(circle at 1% 39%, rgba(0,212,255,0.041), transparent 50%);
        }
        .delay-77 { animation-delay: 3.85s; }
        .col-span-mod-77 { grid-column: span 3; }

        .theme-accent-78 { --local-accent: hsl(6, 80%, 55%); }
        .theme-accent-78 .accent-apply { color: var(--local-accent); }
        .pattern-bg-78 {
            background-image: radial-gradient(circle at 14% 46%, rgba(0,212,255,0.044), transparent 50%);
        }
        .delay-78 { animation-delay: 3.90s; }
        .col-span-mod-78 { grid-column: span 1; }

        .theme-accent-79 { --local-accent: hsl(43, 80%, 55%); }
        .theme-accent-79 .accent-apply { color: var(--local-accent); }
        .pattern-bg-79 {
            background-image: radial-gradient(circle at 27% 53%, rgba(0,212,255,0.047), transparent 50%);
        }
        .delay-79 { animation-delay: 3.95s; }
        .col-span-mod-79 { grid-column: span 2; }

        .theme-accent-80 { --local-accent: hsl(80, 80%, 55%); }
        .theme-accent-80 .accent-apply { color: var(--local-accent); }
        .pattern-bg-80 {
            background-image: radial-gradient(circle at 40% 60%, rgba(0,212,255,0.020), transparent 50%);
        }
        .delay-80 { animation-delay: 4.00s; }
        .col-span-mod-80 { grid-column: span 3; }

        .theme-accent-81 { --local-accent: hsl(117, 80%, 55%); }
        .theme-accent-81 .accent-apply { color: var(--local-accent); }
        .pattern-bg-81 {
            background-image: radial-gradient(circle at 53% 67%, rgba(0,212,255,0.023), transparent 50%);
        }
        .delay-81 { animation-delay: 4.05s; }
        .col-span-mod-81 { grid-column: span 1; }

        .theme-accent-82 { --local-accent: hsl(154, 80%, 55%); }
        .theme-accent-82 .accent-apply { color: var(--local-accent); }
        .pattern-bg-82 {
            background-image: radial-gradient(circle at 66% 74%, rgba(0,212,255,0.026), transparent 50%);
        }
        .delay-82 { animation-delay: 4.10s; }
        .col-span-mod-82 { grid-column: span 2; }

        .theme-accent-83 { --local-accent: hsl(191, 80%, 55%); }
        .theme-accent-83 .accent-apply { color: var(--local-accent); }
        .pattern-bg-83 {
            background-image: radial-gradient(circle at 79% 81%, rgba(0,212,255,0.029), transparent 50%);
        }
        .delay-83 { animation-delay: 4.15s; }
        .col-span-mod-83 { grid-column: span 3; }

        .theme-accent-84 { --local-accent: hsl(228, 80%, 55%); }
        .theme-accent-84 .accent-apply { color: var(--local-accent); }
        .pattern-bg-84 {
            background-image: radial-gradient(circle at 92% 88%, rgba(0,212,255,0.032), transparent 50%);
        }
        .delay-84 { animation-delay: 4.20s; }
        .col-span-mod-84 { grid-column: span 1; }

        .theme-accent-85 { --local-accent: hsl(265, 80%, 55%); }
        .theme-accent-85 .accent-apply { color: var(--local-accent); }
        .pattern-bg-85 {
            background-image: radial-gradient(circle at 5% 95%, rgba(0,212,255,0.035), transparent 50%);
        }
        .delay-85 { animation-delay: 4.25s; }
        .col-span-mod-85 { grid-column: span 2; }

        .theme-accent-86 { --local-accent: hsl(302, 80%, 55%); }
        .theme-accent-86 .accent-apply { color: var(--local-accent); }
        .pattern-bg-86 {
            background-image: radial-gradient(circle at 18% 2%, rgba(0,212,255,0.038), transparent 50%);
        }
        .delay-86 { animation-delay: 4.30s; }
        .col-span-mod-86 { grid-column: span 3; }

        .theme-accent-87 { --local-accent: hsl(339, 80%, 55%); }
        .theme-accent-87 .accent-apply { color: var(--local-accent); }
        .pattern-bg-87 {
            background-image: radial-gradient(circle at 31% 9%, rgba(0,212,255,0.041), transparent 50%);
        }
        .delay-87 { animation-delay: 4.35s; }
        .col-span-mod-87 { grid-column: span 1; }

        .theme-accent-88 { --local-accent: hsl(16, 80%, 55%); }
        .theme-accent-88 .accent-apply { color: var(--local-accent); }
        .pattern-bg-88 {
            background-image: radial-gradient(circle at 44% 16%, rgba(0,212,255,0.044), transparent 50%);
        }
        .delay-88 { animation-delay: 4.40s; }
        .col-span-mod-88 { grid-column: span 2; }

        .theme-accent-89 { --local-accent: hsl(53, 80%, 55%); }
        .theme-accent-89 .accent-apply { color: var(--local-accent); }
        .pattern-bg-89 {
            background-image: radial-gradient(circle at 57% 23%, rgba(0,212,255,0.047), transparent 50%);
        }
        .delay-89 { animation-delay: 4.45s; }
        .col-span-mod-89 { grid-column: span 3; }

        .theme-accent-90 { --local-accent: hsl(90, 80%, 55%); }
        .theme-accent-90 .accent-apply { color: var(--local-accent); }
        .pattern-bg-90 {
            background-image: radial-gradient(circle at 70% 30%, rgba(0,212,255,0.020), transparent 50%);
        }
        .delay-90 { animation-delay: 4.50s; }
        .col-span-mod-90 { grid-column: span 1; }

        .theme-accent-91 { --local-accent: hsl(127, 80%, 55%); }
        .theme-accent-91 .accent-apply { color: var(--local-accent); }
        .pattern-bg-91 {
            background-image: radial-gradient(circle at 83% 37%, rgba(0,212,255,0.023), transparent 50%);
        }
        .delay-91 { animation-delay: 4.55s; }
        .col-span-mod-91 { grid-column: span 2; }

        .theme-accent-92 { --local-accent: hsl(164, 80%, 55%); }
        .theme-accent-92 .accent-apply { color: var(--local-accent); }
        .pattern-bg-92 {
            background-image: radial-gradient(circle at 96% 44%, rgba(0,212,255,0.026), transparent 50%);
        }
        .delay-92 { animation-delay: 4.60s; }
        .col-span-mod-92 { grid-column: span 3; }

        .theme-accent-93 { --local-accent: hsl(201, 80%, 55%); }
        .theme-accent-93 .accent-apply { color: var(--local-accent); }
        .pattern-bg-93 {
            background-image: radial-gradient(circle at 9% 51%, rgba(0,212,255,0.029), transparent 50%);
        }
        .delay-93 { animation-delay: 4.65s; }
        .col-span-mod-93 { grid-column: span 1; }

        .theme-accent-94 { --local-accent: hsl(238, 80%, 55%); }
        .theme-accent-94 .accent-apply { color: var(--local-accent); }
        .pattern-bg-94 {
            background-image: radial-gradient(circle at 22% 58%, rgba(0,212,255,0.032), transparent 50%);
        }
        .delay-94 { animation-delay: 4.70s; }
        .col-span-mod-94 { grid-column: span 2; }

        .theme-accent-95 { --local-accent: hsl(275, 80%, 55%); }
        .theme-accent-95 .accent-apply { color: var(--local-accent); }
        .pattern-bg-95 {
            background-image: radial-gradient(circle at 35% 65%, rgba(0,212,255,0.035), transparent 50%);
        }
        .delay-95 { animation-delay: 4.75s; }
        .col-span-mod-95 { grid-column: span 3; }

        .theme-accent-96 { --local-accent: hsl(312, 80%, 55%); }
        .theme-accent-96 .accent-apply { color: var(--local-accent); }
        .pattern-bg-96 {
            background-image: radial-gradient(circle at 48% 72%, rgba(0,212,255,0.038), transparent 50%);
        }
        .delay-96 { animation-delay: 4.80s; }
        .col-span-mod-96 { grid-column: span 1; }

        .theme-accent-97 { --local-accent: hsl(349, 80%, 55%); }
        .theme-accent-97 .accent-apply { color: var(--local-accent); }
        .pattern-bg-97 {
            background-image: radial-gradient(circle at 61% 79%, rgba(0,212,255,0.041), transparent 50%);
        }
        .delay-97 { animation-delay: 4.85s; }
        .col-span-mod-97 { grid-column: span 2; }

        .theme-accent-98 { --local-accent: hsl(26, 80%, 55%); }
        .theme-accent-98 .accent-apply { color: var(--local-accent); }
        .pattern-bg-98 {
            background-image: radial-gradient(circle at 74% 86%, rgba(0,212,255,0.044), transparent 50%);
        }
        .delay-98 { animation-delay: 4.90s; }
        .col-span-mod-98 { grid-column: span 3; }

        .theme-accent-99 { --local-accent: hsl(63, 80%, 55%); }
        .theme-accent-99 .accent-apply { color: var(--local-accent); }
        .pattern-bg-99 {
            background-image: radial-gradient(circle at 87% 93%, rgba(0,212,255,0.047), transparent 50%);
        }
        .delay-99 { animation-delay: 4.95s; }
        .col-span-mod-99 { grid-column: span 1; }

        /* ========== PRINT HIDE ========== */
        @media print {
            .header, .music-bar, .float-cs, .promo-bar { display: none !important; }
                    }