:root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.5rem;
}

.dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

/* Custom scrollbar for webkit */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: hsl(var(--secondary));
}
::-webkit-scrollbar-thumb {
    background: hsl(var(--muted-foreground));
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--foreground));
}

/* Slider Reset and Styling */
input[type="range"] {
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
}
input[type="range"]:focus {
    outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
    background: hsl(var(--secondary));
    height: 0.5rem;
    border-radius: 9999px;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: hsl(var(--primary));
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    margin-top: -0.25rem; /* Center thumb */
}
input[type="range"]::-moz-range-track {
    background: hsl(var(--secondary));
    height: 0.5rem;
    border-radius: 9999px;
}
input[type="range"]::-moz-range-thumb {
    background: hsl(var(--primary));
    height: 1rem;
    width: 1rem;
    border: none;
    border-radius: 50%;
}

/* Fade Animation */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Subtitle Demo Preview (Dynamic Popup) */
#subtitleDemo {
    transition: opacity 0.25s ease, transform 0.25s ease;
    will-change: opacity, transform;
}
#subtitleDemo.demo-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, 8px) scale(0.96) !important;
}
#subtitleDemo.demo-visible {
    opacity: 1 !important;
    pointer-events: none !important;
    transform: translate(-50%, 0) scale(1) !important;
}


/* Seamless True Fullscreen & Window Fill */
:fullscreen,
:-webkit-full-screen,
:-moz-full-screen,
.seamless-fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    background-color: #000000 !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
}

.seamless-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important;
}

:fullscreen video,
:-webkit-full-screen video,
:-moz-full-screen video,
.seamless-fullscreen video,
:fullscreen iframe,
:-webkit-full-screen iframe,
.seamless-fullscreen iframe {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    object-fit: contain !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Auto-hide cursor and overlay controls on idle in fullscreen */
.hide-cursor {
    cursor: none !important;
}
.hide-cursor #overlayControls {
    opacity: 0 !important;
    pointer-events: none !important;
}