/* Custom Scrollbar for macOS feel */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: rgb(var(--theme-mac-dark));
}
::-webkit-scrollbar-thumb {
    background: rgb(var(--theme-mac-border));
    border-radius: 5px;
    border: 2px solid rgb(var(--theme-mac-dark));
}
::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--theme-mac-muted));
}

            body {
                user-select: none;
                -webkit-user-select: none;
            }

            /* Playhead Triangle */
            .playhead-triangle {
                width: 0;
                height: 0;
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
                border-top: 10px solid #ff453a;
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
            }

            /* Caption Pop-in Animation */
            @keyframes captionPopIn {
                0% { transform: scale(0.5); opacity: 0; }
                70% { transform: scale(1.15); opacity: 1; }
                100% { transform: scale(1); opacity: 1; }
            }

            .caption-pop-in {
                animation: captionPopIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            }

            /* Karaoke Effect */
            .karaoke-text {
                color: transparent !important;
                background-image: linear-gradient(
                    to right, 
                    var(--karaoke-active-color, #ffeb3b) var(--karaoke-progress, 0%), 
                    var(--karaoke-inactive-color, rgba(255,255,255,0.5)) var(--karaoke-progress, 0%)
                );
                -webkit-background-clip: text;
                background-clip: text;
            }
            
            /* Hide number input spinners for Figma-like UI */
            input[type="number"]::-webkit-inner-spin-button, 
            input[type="number"]::-webkit-outer-spin-button { 
                -webkit-appearance: none; 
                margin: 0; 
            }
            input[type="number"] {
                -moz-appearance: textfield; /* Firefox */
            }
