: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: #d17a00;
            --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: #d17a00;
            --c-text-primary: #f8fafc;
            --c-text-secondary: #94a3b8;
            --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; }
        #item-player-header { transition: transform 0.3s ease-in-out; }
        #item-player-overlay.is-fullscreen #item-player-header { transform: translateY(-100%); }
        
        .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;
        }
        
        #item-player-content iframe {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
        }

        .media-slide {
            flex: 0 0 100%;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .media-dot.\!bg-white {
             background-color: white !important;
        }