/**
 * ==========================================================
 * YTStealth
 * Themes
 * Version: 2.0
 * ==========================================================
 *
 * This stylesheet defines the visual identity of the player.
 * It contains NO layout logic - only appearance.
 *
 * Architecture:
 *   - Theme Variables
 *   - Default Theme (Dark)
 *   - Light Theme
 *   - Accent Colors
 *   - Typography
 *   - Glassmorphism
 *   - Gradients
 *   - Shadows
 *   - Borders
 *   - Surface Styles
 *   - Focus Colors
 *   - Status Colors
 *   - Theme Modifiers
 *   - Print Overrides
 *
 * Visual Target: Netflix + Spotify Desktop + YouTube TV
 *
 * ==========================================================
 */

/*==========================================================
=            Theme Variables
==========================================================*/

:root {
	/* ── Surfaces ── */
	--yts-surface-primary: #0a0a0a;
	--yts-surface-secondary: #1a1a1a;
	--yts-surface-tertiary: #2a2a2a;
	--yts-surface-elevated: #222222;
	--yts-surface-glass: rgba(255, 255, 255, 0.06);
	--yts-surface-glass-hover: rgba(255, 255, 255, 0.10);

	/* ── Text ── */
	--yts-text-primary: #ffffff;
	--yts-text-secondary: rgba(255, 255, 255, 0.85);
	--yts-text-tertiary: rgba(255, 255, 255, 0.60);
	--yts-text-quaternary: rgba(255, 255, 255, 0.40);
	--yts-text-inverse: #0a0a0a;

	/* ── Accents ── */
	--yts-accent-primary: #ff0000;
	--yts-accent-primary-hover: #cc0000;
	--yts-accent-primary-active: #b30000;
	--yts-accent-secondary: #1db954;
	--yts-accent-tertiary: #ff6b6b;

	/* ── Status ── */
	--yts-status-success: #1db954;
	--yts-status-warning: #f59e0b;
	--yts-status-error: #ef4444;
	--yts-status-info: #3b82f6;

	/* ── Typography ── */
	--yts-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	--yts-font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
	--yts-font-weight-light: 300;
	--yts-font-weight-regular: 400;
	--yts-font-weight-medium: 500;
	--yts-font-weight-semibold: 600;
	--yts-font-weight-bold: 700;

	/* ── Shadows ── */
	--yts-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
	--yts-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
	--yts-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
	--yts-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
	--yts-shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.8);
	--yts-shadow-glow: 0 0 30px rgba(255, 0, 0, 0.3);

	/* ── Glassmorphism ── */
	--yts-glass-bg: rgba(255, 255, 255, 0.06);
	--yts-glass-border: rgba(255, 255, 255, 0.08);
	--yts-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	--yts-glass-blur: 20px;

	/* ── Gradients ── */
	--yts-gradient-overlay: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
	--yts-gradient-accent: linear-gradient(135deg, #ff0000, #ff6b6b);
	--yts-gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));

	/* ── Borders ── */
	--yts-border-width: 1px;
	--yts-border-radius-sm: 4px;
	--yts-border-radius-md: 8px;
	--yts-border-radius-lg: 12px;
	--yts-border-radius-xl: 16px;
	--yts-border-radius-full: 9999px;

	/* ── Transitions ── */
	--yts-theme-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);

	/* ── Scrollbar ── */
	--yts-scrollbar-width: 6px;
	--yts-scrollbar-track: rgba(255, 255, 255, 0.05);
	--yts-scrollbar-thumb: rgba(255, 255, 255, 0.15);
	--yts-scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);
}

/*==========================================================
=            Default Theme (Dark)
==========================================================*/

/**
 * The default theme is a dark, cinematic experience
 * inspired by Netflix and YouTube TV.
 */

.yts-player {
	/* ── Surface ── */
	background: var(--yts-surface-primary);
	color: var(--yts-text-primary);

	/* ── Typography ── */
	font-family: var(--yts-font-family-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ── Controls Background ── */

.yts-player .yts-controls {
	background: var(--yts-gradient-overlay);
}

/* ── Progress Colors ── */

.yts-player .yts-progress-played {
	background: var(--yts-accent-primary);
}

.yts-player .yts-progress-thumb {
	background: var(--yts-accent-primary);
	box-shadow: var(--yts-shadow-glow);
}

/* ── Button Hover ── */

.yts-player .yts-button:hover {
	background: var(--yts-surface-glass-hover);
}

/* ── Primary Button ── */

.yts-player .yts-button-primary {
	background: var(--yts-accent-primary);
	color: var(--yts-text-primary);
}

.yts-player .yts-button-primary:hover {
	background: var(--yts-accent-primary-hover);
}

/* ── Toggle Active ── */

.yts-player .yts-button-toggle.is-active {
	color: var(--yts-accent-primary);
}

.yts-player .yts-button-toggle.is-active::after {
	background: var(--yts-accent-primary);
}

/* ── Tooltips ── */

.yts-player .yts-tooltip {
	background: rgba(0, 0, 0, 0.92);
	color: var(--yts-text-primary);
	backdrop-filter: blur(var(--yts-glass-blur));
	-webkit-backdrop-filter: blur(var(--yts-glass-blur));
}

.yts-player .yts-tooltip::after {
	border-top-color: rgba(0, 0, 0, 0.92);
}

/* ── Progress Preview ── */

.yts-player .yts-progress-preview {
	background: rgba(0, 0, 0, 0.92);
	color: var(--yts-text-primary);
	backdrop-filter: blur(var(--yts-glass-blur));
	-webkit-backdrop-filter: blur(var(--yts-glass-blur));
}

.yts-player .yts-progress-preview::after {
	border-top-color: rgba(0, 0, 0, 0.92);
}

/* ── Keyboard Hint ── */

.yts-player .yts-keyboard-hint {
	background: rgba(0, 0, 0, 0.85);
	color: var(--yts-text-primary);
	backdrop-filter: blur(var(--yts-glass-blur));
	-webkit-backdrop-filter: blur(var(--yts-glass-blur));
}

/* ── Volume Slider ── */

.yts-player .yts-volume-slider::-webkit-slider-thumb {
	background: var(--yts-accent-primary);
}

.yts-player .yts-volume-slider::-moz-range-thumb {
	background: var(--yts-accent-primary);
}

.yts-player .yts-volume-slider::-moz-range-progress {
	background: var(--yts-accent-primary);
}

/* ── Scrollbar ── */

.yts-player ::-webkit-scrollbar {
	width: var(--yts-scrollbar-width);
}

.yts-player ::-webkit-scrollbar-track {
	background: var(--yts-scrollbar-track);
	border-radius: var(--yts-border-radius-full);
}

.yts-player ::-webkit-scrollbar-thumb {
	background: var(--yts-scrollbar-thumb);
	border-radius: var(--yts-border-radius-full);
}

.yts-player ::-webkit-scrollbar-thumb:hover {
	background: var(--yts-scrollbar-thumb-hover);
}

/*==========================================================
=            Light Theme
==========================================================*/

/**
 * Light theme for bright environments and accessibility.
 * Maintains the same structure as dark theme with inverted colors.
 */

.yts-player.theme-light {
	/* ── Surface ── */
	--yts-surface-primary: #f5f5f5;
	--yts-surface-secondary: #e5e5e5;
	--yts-surface-tertiary: #d5d5d5;
	--yts-surface-elevated: #ffffff;
	--yts-surface-glass: rgba(0, 0, 0, 0.04);
	--yts-surface-glass-hover: rgba(0, 0, 0, 0.08);

	/* ── Text ── */
	--yts-text-primary: #0a0a0a;
	--yts-text-secondary: rgba(0, 0, 0, 0.85);
	--yts-text-tertiary: rgba(0, 0, 0, 0.60);
	--yts-text-quaternary: rgba(0, 0, 0, 0.40);
	--yts-text-inverse: #ffffff;

	/* ── Shadows ── */
	--yts-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
	--yts-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
	--yts-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
	--yts-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
	--yts-shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.16);

	/* ── Glass ── */
	--yts-glass-bg: rgba(0, 0, 0, 0.04);
	--yts-glass-border: rgba(0, 0, 0, 0.06);
	--yts-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);

	/* ── Gradient ── */
	--yts-gradient-overlay: linear-gradient(to top, rgba(255, 255, 255, 0.92) 0%, transparent 100%);

	/* ── Scrollbar ── */
	--yts-scrollbar-track: rgba(0, 0, 0, 0.04);
	--yts-scrollbar-thumb: rgba(0, 0, 0, 0.12);
	--yts-scrollbar-thumb-hover: rgba(0, 0, 0, 0.20);

	background: var(--yts-surface-primary);
	color: var(--yts-text-primary);
}

/* ── Light Theme Controls ── */

.yts-player.theme-light .yts-controls {
	background: var(--yts-gradient-overlay);
}

.yts-player.theme-light .yts-controls .yts-button {
	color: var(--yts-text-secondary);
}

.yts-player.theme-light .yts-controls .yts-button:hover {
	background: var(--yts-surface-glass-hover);
	color: var(--yts-text-primary);
}

.yts-player.theme-light .yts-controls .yts-button-primary {
	background: var(--yts-accent-primary);
	color: var(--yts-text-inverse);
}

.yts-player.theme-light .yts-controls .yts-button-primary:hover {
	background: var(--yts-accent-primary-hover);
}

.yts-player.theme-light .yts-controls .yts-tooltip {
	background: rgba(255, 255, 255, 0.95);
	color: var(--yts-text-primary);
	box-shadow: var(--yts-shadow-md);
}

.yts-player.theme-light .yts-controls .yts-tooltip::after {
	border-top-color: rgba(255, 255, 255, 0.95);
}

.yts-player.theme-light .yts-controls .yts-progress-preview {
	background: rgba(255, 255, 255, 0.95);
	color: var(--yts-text-primary);
	box-shadow: var(--yts-shadow-md);
}

.yts-player.theme-light .yts-controls .yts-progress-preview::after {
	border-top-color: rgba(255, 255, 255, 0.95);
}

.yts-player.theme-light .yts-controls .yts-time {
	color: var(--yts-text-secondary);
}

.yts-player.theme-light .yts-controls .yts-time-duration {
	color: var(--yts-text-tertiary);
}

.yts-player.theme-light .yts-controls .yts-time-separator {
	color: var(--yts-text-tertiary);
}

.yts-player.theme-light .yts-controls .yts-keyboard-hint {
	background: rgba(255, 255, 255, 0.92);
	color: var(--yts-text-primary);
	box-shadow: var(--yts-shadow-lg);
}

/*==========================================================
=            Accent Colors
==========================================================*/

/**
 * Alternative accent colors for different brand identities.
 * Apply by adding the corresponding class to .yts-player.
 */

/* ── Green Accent (Spotify-inspired) ── */

.yts-player.accent-green {
	--yts-accent-primary: #1db954;
	--yts-accent-primary-hover: #1aa34a;
	--yts-accent-primary-active: #168c3e;
	--yts-shadow-glow: 0 0 30px rgba(29, 185, 84, 0.3);
}

/* ── Blue Accent (YouTube TV-inspired) ── */

.yts-player.accent-blue {
	--yts-accent-primary: #1a73e8;
	--yts-accent-primary-hover: #1557b0;
	--yts-accent-primary-active: #10458a;
	--yts-shadow-glow: 0 0 30px rgba(26, 115, 232, 0.3);
}

/* ── Purple Accent (Twitch-inspired) ── */

.yts-player.accent-purple {
	--yts-accent-primary: #9146ff;
	--yts-accent-primary-hover: #7a3cc9;
	--yts-accent-primary-active: #6533a8;
	--yts-shadow-glow: 0 0 30px rgba(145, 70, 255, 0.3);
}

/* ── Orange Accent (Vimeo-inspired) ── */

.yts-player.accent-orange {
	--yts-accent-primary: #ff6b35;
	--yts-accent-primary-hover: #e65a2a;
	--yts-accent-primary-active: #cc4a22;
	--yts-shadow-glow: 0 0 30px rgba(255, 107, 53, 0.3);
}

/* ── Pink Accent (Dribbble-inspired) ── */

.yts-player.accent-pink {
	--yts-accent-primary: #ff2d55;
	--yts-accent-primary-hover: #e6254b;
	--yts-accent-primary-active: #cc1f40;
	--yts-shadow-glow: 0 0 30px rgba(255, 45, 85, 0.3);
}

/*==========================================================
=            Glassmorphism
==========================================================*/

/**
 * Glassmorphism effects for menus, panels, and overlays.
 * Creates a modern, translucent aesthetic.
 */

.yts-player .yts-glass {
	background: var(--yts-glass-bg);
	backdrop-filter: blur(var(--yts-glass-blur));
	-webkit-backdrop-filter: blur(var(--yts-glass-blur));
	border: 1px solid var(--yts-glass-border);
	box-shadow: var(--yts-glass-shadow);
}

/* ── Glass Panel (elevated) ── */

.yts-player .yts-glass-panel {
	background: var(--yts-glass-bg);
	backdrop-filter: blur(var(--yts-glass-blur));
	-webkit-backdrop-filter: blur(var(--yts-glass-blur));
	border: 1px solid var(--yts-glass-border);
	box-shadow: var(--yts-glass-shadow);
	border-radius: var(--yts-border-radius-lg);
	padding: 16px;
}

/* ── Glass Card ── */

.yts-player .yts-glass-card {
	background: var(--yts-glass-bg);
	backdrop-filter: blur(var(--yts-glass-blur));
	-webkit-backdrop-filter: blur(var(--yts-glass-blur));
	border: 1px solid var(--yts-glass-border);
	box-shadow: var(--yts-glass-shadow);
	border-radius: var(--yts-border-radius-md);
	padding: 12px 16px;
	transition: all var(--yts-theme-transition);
}

.yts-player .yts-glass-card:hover {
	background: var(--yts-surface-glass-hover);
	transform: translateY(-2px);
}

/*==========================================================
=            Gradients
==========================================================*/

/**
 * Gradient utilities for backgrounds, overlays, and accents.
 */

/* ── Accent Gradient ── */

.yts-player .yts-gradient-accent {
	background: var(--yts-gradient-accent);
}

/* ── Glass Gradient ── */

.yts-player .yts-gradient-glass {
	background: var(--yts-gradient-glass);
}

/* ── Overlay Gradient ── */

.yts-player .yts-gradient-overlay {
	background: var(--yts-gradient-overlay);
}

/*==========================================================
=            Shadows
==========================================================*/

/**
 * Shadow utilities for elevation and depth.
 */

.yts-player .yts-shadow-xs {
	box-shadow: var(--yts-shadow-xs);
}

.yts-player .yts-shadow-sm {
	box-shadow: var(--yts-shadow-sm);
}

.yts-player .yts-shadow-md {
	box-shadow: var(--yts-shadow-md);
}

.yts-player .yts-shadow-lg {
	box-shadow: var(--yts-shadow-lg);
}

.yts-player .yts-shadow-xl {
	box-shadow: var(--yts-shadow-xl);
}

.yts-player .yts-shadow-glow {
	box-shadow: var(--yts-shadow-glow);
}

/*==========================================================
=            Borders
==========================================================*/

/**
 * Border utilities for consistent styling.
 */

.yts-player .yts-border {
	border: var(--yts-border-width) solid var(--yts-glass-border);
}

.yts-player .yts-border-top {
	border-top: var(--yts-border-width) solid var(--yts-glass-border);
}

.yts-player .yts-border-bottom {
	border-bottom: var(--yts-border-width) solid var(--yts-glass-border);
}

.yts-player .yts-border-left {
	border-left: var(--yts-border-width) solid var(--yts-glass-border);
}

.yts-player .yts-border-right {
	border-right: var(--yts-border-width) solid var(--yts-glass-border);
}

.yts-player .yts-border-radius-sm {
	border-radius: var(--yts-border-radius-sm);
}

.yts-player .yts-border-radius-md {
	border-radius: var(--yts-border-radius-md);
}

.yts-player .yts-border-radius-lg {
	border-radius: var(--yts-border-radius-lg);
}

.yts-player .yts-border-radius-xl {
	border-radius: var(--yts-border-radius-xl);
}

.yts-player .yts-border-radius-full {
	border-radius: var(--yts-border-radius-full);
}

/*==========================================================
=            Surface Styles
==========================================================*/

/**
 * Surface styles for different material feels.
 */

.yts-player .yts-surface-primary {
	background: var(--yts-surface-primary);
}

.yts-player .yts-surface-secondary {
	background: var(--yts-surface-secondary);
}

.yts-player .yts-surface-tertiary {
	background: var(--yts-surface-tertiary);
}

.yts-player .yts-surface-elevated {
	background: var(--yts-surface-elevated);
	box-shadow: var(--yts-shadow-md);
}

/*==========================================================
=            Focus Colors
==========================================================*/

/**
 * Focus states for accessibility.
 * Ensures keyboard navigation is always visible.
 */

.yts-player .yts-focus-ring {
	outline: 2px solid var(--yts-accent-primary);
	outline-offset: 2px;
}

.yts-player .yts-focus-ring-light {
	outline: 2px solid var(--yts-text-primary);
	outline-offset: 2px;
}

/* ── Focus-visible defaults ── */

.yts-player :focus-visible {
	outline: 2px solid var(--yts-accent-primary);
	outline-offset: 2px;
}

/*==========================================================
=            Status Colors
==========================================================*/

/**
 * Status colors for feedback states.
 */

.yts-player .yts-status-success {
	color: var(--yts-status-success);
}

.yts-player .yts-status-warning {
	color: var(--yts-status-warning);
}

.yts-player .yts-status-error {
	color: var(--yts-status-error);
}

.yts-player .yts-status-info {
	color: var(--yts-status-info);
}

/* ── Status backgrounds ── */

.yts-player .yts-bg-success {
	background: var(--yts-status-success);
	color: var(--yts-text-inverse);
}

.yts-player .yts-bg-warning {
	background: var(--yts-status-warning);
	color: var(--yts-text-inverse);
}

.yts-player .yts-bg-error {
	background: var(--yts-status-error);
	color: var(--yts-text-inverse);
}

.yts-player .yts-bg-info {
	background: var(--yts-status-info);
	color: var(--yts-text-inverse);
}

/*==========================================================
=            Theme Modifiers
==========================================================*/

/**
 * Additional theme variants for specific use cases.
 */

/* ── Minimal Theme ── */

.yts-player.theme-minimal {
	--yts-surface-primary: #000000;
	--yts-surface-glass: rgba(255, 255, 255, 0.03);
	--yts-surface-glass-hover: rgba(255, 255, 255, 0.06);
	--yts-text-secondary: rgba(255, 255, 255, 0.75);
	--yts-text-tertiary: rgba(255, 255, 255, 0.50);
	--yts-glass-bg: rgba(255, 255, 255, 0.03);
	--yts-glass-border: rgba(255, 255, 255, 0.04);
}

.yts-player.theme-minimal .yts-controls {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.50) 0%, transparent 100%);
}

/* ── Cinema Theme ── */

.yts-player.theme-cinema {
	--yts-surface-primary: #0a0a0a;
	--yts-text-primary: #e8e8e8;
	--yts-accent-primary: #e50914;
	--yts-accent-primary-hover: #b20710;
	--yts-shadow-glow: 0 0 40px rgba(229, 9, 20, 0.4);
}

.yts-player.theme-cinema .yts-controls {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.90) 0%, transparent 100%);
	height: calc(var(--yts-control-bar-height) + 8px);
}

/* ── Broadcast Theme ── */

.yts-player.theme-broadcast {
	--yts-surface-primary: #0a0a0a;
	--yts-text-primary: #ffffff;
	--yts-accent-primary: #00a8ff;
	--yts-accent-primary-hover: #0097e6;
	--yts-shadow-glow: 0 0 30px rgba(0, 168, 255, 0.3);
	--yts-progress-played: #00a8ff;
	--yts-progress-thumb-bg: #00a8ff;
}

.yts-player.theme-broadcast .yts-progress-played {
	background: var(--yts-accent-primary);
}

.yts-player.theme-broadcast .yts-progress-thumb {
	background: var(--yts-accent-primary);
	box-shadow: var(--yts-shadow-glow);
}

/*==========================================================
=            Animations
==========================================================*/

/**
 * Theme-aware animations for smooth transitions.
 */

@keyframes yts-fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes yts-fade-out {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes yts-slide-up {
	0% {
		opacity: 0;
		transform: translateY(10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes yts-slide-down {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes yts-scale-in {
	0% {
		opacity: 0;
		transform: scale(0.9);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* ── Animation Classes ── */

.yts-player .yts-animate-fade-in {
	animation: yts-fade-in var(--yts-theme-transition) forwards;
}

.yts-player .yts-animate-fade-out {
	animation: yts-fade-out var(--yts-theme-transition) forwards;
}

.yts-player .yts-animate-slide-up {
	animation: yts-slide-up var(--yts-theme-transition) forwards;
}

.yts-player .yts-animate-slide-down {
	animation: yts-slide-down var(--yts-theme-transition) forwards;
}

.yts-player .yts-animate-scale-in {
	animation: yts-scale-in var(--yts-theme-transition) forwards;
}

/*==========================================================
=            Print Overrides
==========================================================*/

/**
 * Print styles for when the player is printed.
 * Most controls are hidden, only the video poster remains.
 */

@media print {
	.yts-player .yts-controls {
		display: none !important;
	}

	.yts-player .yts-buffering-overlay {
		display: none !important;
	}

	.yts-player .yts-keyboard-hint {
		display: none !important;
	}

	.yts-player {
		background: #ffffff !important;
	}

	.yts-player .yts-stage {
		padding-bottom: 0 !important;
		height: auto !important;
	}

	.yts-player .yts-provider iframe,
	.yts-player .yts-provider video {
		position: relative !important;
		max-width: 100% !important;
		height: auto !important;
	}
}

/*==========================================================
=            Reduced Motion Overrides
==========================================================*/

@media (prefers-reduced-motion: reduce) {
	.yts-player .yts-glass-card {
		transition: none;
	}

	.yts-player .yts-animate-fade-in,
	.yts-player .yts-animate-fade-out,
	.yts-player .yts-animate-slide-up,
	.yts-player .yts-animate-slide-down,
	.yts-player .yts-animate-scale-in {
		animation: none !important;
	}

	.yts-player .yts-glass-card:hover {
		transform: none !important;
	}
}

/*==========================================================
=            High Contrast Mode
==========================================================*/

@media (prefers-contrast: high) {
	.yts-player .yts-controls {
		background: rgba(0, 0, 0, 0.95) !important;
	}

	.yts-player .yts-button {
		border: 1px solid currentColor;
	}

	.yts-player .yts-button:hover {
		background: currentColor !important;
		color: var(--yts-surface-primary) !important;
	}

	.yts-player .yts-progress-played {
		background: #ffffff !important;
	}

	.yts-player .yts-progress-thumb {
		background: #ffffff !important;
		box-shadow: 0 0 0 2px #000000 !important;
	}

	.yts-player .yts-tooltip {
		background: #000000 !important;
		color: #ffffff !important;
		border: 1px solid #ffffff !important;
	}

	.yts-player .yts-tooltip::after {
		border-top-color: #000000 !important;
	}
}