:root {
            font-family: 'Inter', sans-serif;
        }
        html, body {
            height: 100%;
            overflow: hidden;
        }
        .theme-light {
            --bg-page: #f1f5f9;
            --bg-background: #f1f5f9;
            --bg-surface: #ffffff;
            --bg-tertiary: #e2e8f0;
            --c-primary: #ffc800;
            --c-text-primary: #1e293b;
            --c-text-secondary: #64748b;
            --c-border: #cbd5e1;
        }
        .theme-dark {
            --bg-page: #0f172a;
            --bg-background: #0f172a;
            --bg-surface: #1e293b;
            --bg-tertiary: #334155;
            --c-primary: #e0a500;
            --c-text-primary: #d4d4d4;
            --c-text-secondary: #c8f4e3;
            --c-border: #334155;
        }
        body { 
            background-color: var(--bg-page);
            color: var(--c-text-primary);
            font-family: 'Inter', sans-serif; 
        }
        .font-display { font-family: 'Lexend', sans-serif; }
        
        .custom-scrollbar::-webkit-scrollbar { display: none; }
        .custom-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        @keyframes popIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }
        .form-input, .form-select { background-color: var(--bg-background); border: 1px solid var(--c-border); color: var(--c-text-primary); border-radius: 0.5rem; padding: 0.5rem 0.75rem;}
        .form-input::placeholder { color: var(--c-text-secondary); }
        .form-input:focus, .form-select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 20%, transparent); }
        
        @keyframes pointAndFade {
            0% { opacity: 0; transform: translate(0, -50%); }
            15% { opacity: 1; transform: translate(0, -50%); }
            25% { transform: translate(-8px, -50%); }
            35% { transform: translate(0, -50%); }
            45% { transform: translate(-8px, -50%); }
            55% { transform: translate(0, -50%); }
            85% { opacity: 1; transform: translate(0, -50%); }
            100% { opacity: 0; transform: translate(8px, -50%); }
        }
        .tooltip-point-animate { animation: pointAndFade 4s ease-in-out forwards; }

        
        .ptr-indicator {
            position: absolute;
            top: -50px;
            left: 0;
            right: 0;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: var(--c-text-secondary);
            opacity: 0;
            z-index: 10;
        }
        .ptr-indicator i {
            transition: transform 0.3s ease;
        }
        .ptr-indicator i.rotate-180 {
            transform: rotate(180deg);
        }

        #update-available-popup {
            animation: popIn 0.3s ease-out forwards;
        }
        

        /* ── PLAYER ── */
        #item-player-overlay {
            animation: fadeInOverlay 0.2s ease-out;
        }
        @keyframes fadeInOverlay {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        #item-player-header {
            transition: transform 0.25s ease;
        }
        #item-player-overlay.is-fullscreen #item-player-header {
            transform: translateY(-100%);
        }
        #player-stage iframe,
        #player-stage video,
        #player-stage audio {
            -webkit-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
        }
        #player-stage iframe {
            border: none;
        }