:root{

--bg:#141414;
--card:#1d1d1d;
--card2:#252525;
--border:#343434;
--red:#E50914;
--text:#fff;
--muted:#9ca3af;

}

*{

box-sizing:border-box;

}

body{

background:var(--bg);
color:var(--text);
font-family:Inter,Segoe UI,sans-serif;

}

.container-fluid{

max-width:1450px;

}

.player-card{

background:#000;
border-radius:20px;
overflow:hidden;
border:1px solid var(--border);
box-shadow:0 30px 70px rgba(0,0,0,.45);

}

.player-card iframe{

width:100%;
height:100%;
border:0;

}

.watch-sidebar{

background:var(--card);
border-radius:18px;
border:1px solid var(--border);
padding:22px;
position:sticky;
top:20px;

}

.watch-title{

font-size:28px;
font-weight:700;
text-align:center;
margin-bottom:30px;

}

.section-title{

font-size:13px;
text-transform:uppercase;
letter-spacing:1px;
color:var(--muted);
margin-bottom:14px;

}

.server-btn{

width:100%;
border:none;
border-radius:14px;
padding:16px;
margin-bottom:12px;
background:var(--card2);
color:#fff;
transition:.25s;
text-align:left;

}

.server-btn:hover{

background:#2f2f2f;
transform:translateY(-2px);

}

.server-btn.active{

background:var(--red);

}

.episode-list{

display:flex;
gap:10px;
flex-wrap:wrap;

}

.episode-btn{

width:70px;
height:52px;
border:none;
border-radius:12px;
background:var(--card2);
color:#fff;
font-weight:700;
transition:.25s;

}

.episode-btn:hover{

transform:translateY(-2px);

}

.episode-btn.active{

background:var(--red);

}

.loading{

opacity:.7;
pointer-events:none;

}

@media(max-width:991px){

.watch-sidebar{

margin-top:20px;
position:static;

}

.episode-list{

overflow:auto;
flex-wrap:nowrap;

}

.episode-btn{

flex:0 0 auto;

}

}