:root { --accent: #f3ba2f; --bg: #050505; --plyr-color-main: #f3ba2f; }
body { background: var(--bg); color: white; }

.navbar { background: rgba(0,0,0,0.9); border-bottom: 1px solid #222; }
.navbar-brand { font-weight: 900; color: var(--accent) !important; letter-spacing: -1px; }

/* Player Wrapper */
.sperovix-player-wrapper { position: relative; border-radius: 12px; overflow: hidden; background: #000; }
.video-overlay-title { position: absolute; top: 0; left: 0; right: 0; padding: 30px; background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent); z-index: 2; transition: 0.3s; pointer-events: none; }
.watermark { position: absolute; top: 20px; right: 25px; opacity: 0.2; font-weight: 900; color: var(--accent); z-index: 2; }

/* Resume Toast */
.resume-toast { position: absolute; bottom: 80px; left: 20px; background: rgba(0,0,0,0.9); border: 1px solid var(--accent); padding: 10px 20px; border-radius: 8px; z-index: 100; display: none; align-items: center; }

/* Episodios Sidebar en Fullscreen */
.player-eps-sidebar { position: absolute; top: 0; right: 0; bottom: 0; width: 300px; background: rgba(10,10,10,0.95); z-index: 1000; transform: translateX(100%); transition: 0.4s; border-left: 1px solid #333; }
.player-eps-sidebar.open { transform: translateX(0); }
.eps-list-scroll { height: 100%; overflow-y: auto; padding: 10px; }
.ep-item { display: block; padding: 10px; color: #ccc; text-decoration: none; border-bottom: 1px solid #222; }
.ep-item:hover, .ep-item.active { background: #222; color: var(--accent); }

/* YouTube Style Progress Bar */
.plyr--full-ui input[type=range] { color: var(--accent); }
.plyr__control--overlaid { background: rgba(243, 186, 47, 0.8); }

/* Navbar transparente que se vuelve sólida al hacer scroll */
.navbar {
    transition: 0.3s;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
}

.navbar-brand {
    font-size: 1.8rem;
    font-weight: 900 !important;
    letter-spacing: -2px;
}

/* Buscador redondo */
.search-form .form-control {
    border-radius: 20px 0 0 20px;
    padding-left: 20px;
}
.search-form .btn {
    border-radius: 0 20px 20px 0;
    padding-right: 20px;
}

/* Tipografía */
h1, h2, h3, h4, h5 {
    letter-spacing: -0.5px;
}

/* Responsive adjust */
@media (max-width: 768px) {
    .hero-banner { height: 50vh; text-align: center; }
    .display-3 { font-size: 2.5rem; }
}