:root{
--bg:#08090b;
--surface:#111318;
--surface-2:#171a21;
--surface-3:#202531;
--line:#2a2f3a;
--text:#f8fafc;
--muted:#9aa4b2;
--muted-2:#6f7a89;
--accent:#e11d48;
--accent-2:#38bdf8;
--good:#22c55e;
--warning:#fbbf24;
--shadow:0 18px 54px rgba(0,0,0,.38);
}

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:Inter,Segoe UI,Arial,sans-serif;
background:
radial-gradient(circle at 16% 0%,rgba(56,189,248,.14),transparent 32rem),
radial-gradient(circle at 84% 12%,rgba(225,29,72,.14),transparent 30rem),
var(--bg);
color:var(--text);
line-height:1.45;
}

h3{
margin:0;
}

#app{
min-height:100dvh;
display:flex;
flex-direction:column;
}

/* LOGIN */

#login{
max-width:420px;
margin:clamp(24px,10vh,86px) auto;
background:rgba(17,19,24,.88);
padding:30px;
border:1px solid rgba(255,255,255,.08);
border-radius:8px;
box-shadow:var(--shadow);
backdrop-filter:blur(18px);
}

#login h2{
margin:0 0 18px;
font-size:28px;
letter-spacing:0;
}

#login h2::after{
content:"";
display:block;
width:48px;
height:3px;
margin-top:10px;
background:linear-gradient(90deg,var(--accent),var(--accent-2));
border-radius:999px;
}

.loginEyebrow{
display:inline-flex;
align-items:center;
gap:8px;
padding:7px 10px;
margin-bottom:12px;
border-radius:999px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
font-size:11px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--accent-2);
}

.loginIntro{
margin:0 0 14px;
color:var(--muted);
font-size:14px;
line-height:1.5;
}

.presetChips{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:0 0 14px;
}

.presetChip{
display:inline-flex;
align-items:center;
gap:6px;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.07);
font-size:12px;
font-weight:700;
color:var(--muted);
}

.fieldGroup{
margin-top:10px;
}

.fieldLabel{
  margin:0 0 6px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  }

.logoutButton{
  width:auto;
  margin-top:0;
  margin-left:auto;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  font-size:13px;
  font-weight:800;
  color:var(--text);
}

.logoutButton:hover{
  background:rgba(255,255,255,.1);
  transform:translateY(-1px);
}


input:not([type="checkbox"]),
select{
width:100%;
padding:12px;
border-radius:6px;
border:1px solid var(--line);
background:#0d1016;
color:var(--text);
outline:none;
transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input:not([type="checkbox"]):focus,
select:focus{
border-color:rgba(56,189,248,.7);
box-shadow:0 0 0 3px rgba(56,189,248,.12);
background:#10141c;
}

input::placeholder{
color:var(--muted-2);
}

input[type="checkbox"]{
width:auto;
padding:0;
margin:0;
accent-color:var(--accent);
}

.loginRemember{
margin-top:10px;
padding-bottom:0;
font-size:13px;
}

button{
width:100%;
padding:12px;
margin-top:10px;
border:none;
border-radius:6px;
background:linear-gradient(135deg,var(--accent),#be123c);
color:var(--text);
font-weight:bold;
cursor:pointer;
transition:transform .18s ease, filter .18s ease, background .18s ease;
}

button:disabled{
cursor:not-allowed;
opacity:.62;
transform:none;
filter:none;
}

button:hover{
filter:brightness(1.08);
transform:translateY(-1px);
}

button:active{
transform:translateY(0);
}

/* NAV */

#topnav{
display:flex;
justify-content:flex-start;
align-items:center;
gap:8px;
padding:12px clamp(12px,3vw,28px);
border-bottom:1px solid rgba(255,255,255,.08);
background:rgba(8,9,11,.82);
backdrop-filter:blur(16px);
overflow-x:auto;
white-space:nowrap;
position:sticky;
top:0;
z-index:10;
scrollbar-width:none;
}

#topnav::-webkit-scrollbar{
display:none;
}

#appBody{
display:flex;
flex-direction:column;
gap:18px;
padding-bottom:24px;
}

.brand{
font-size:18px;
font-weight:900;
letter-spacing:0;
padding-right:10px;
margin-right:4px;
border-right:1px solid rgba(255,255,255,.12);
color:var(--text);
flex:0 0 auto;
}

.brand span{
color:var(--accent-2);
}

.navItem{
cursor:pointer;
color:var(--muted);
flex:0 0 auto;
padding:9px 12px;
border-radius:6px;
font-weight:700;
font-size:14px;
transition:color .18s ease, background .18s ease;
}

.navItem:hover{
color:var(--text);
background:rgba(255,255,255,.06);
}

.navItem.active{
color:var(--text);
background:rgba(225,29,72,.16);
box-shadow:inset 0 -2px 0 var(--accent);
}

/* TABS */

.tab{
display:none;
}

.tab.active{
display:block;
}

.tabHeader{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:16px;
padding:18px clamp(12px,3vw,28px) 10px;
}

.tabTitleBlock{
max-width:760px;
}

.tabKicker{
margin:0 0 6px;
font-size:11px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--accent-2);
}

.tabTitle{
margin:0;
font-size:28px;
font-weight:900;
letter-spacing:-.02em;
}

.tabDescription{
margin:6px 0 0;
color:var(--muted);
font-size:14px;
}

#categories .tabDescription,
#movies .tabDescription,
#series .tabDescription,
#live .tabDescription{
display:none;
}

.tabBadge{
display:inline-flex;
align-items:center;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.07);
font-size:12px;
font-weight:800;
color:var(--muted);
white-space:nowrap;
}

/* PLAYER */

video{
width:100%;
height:42vh;
min-height:280px;
background:black;
display:block;
border-bottom:1px solid var(--line);
}

/* GRID */

.grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
gap:14px;
padding:16px clamp(12px,3vw,28px);
}

.card{
background:linear-gradient(180deg,var(--surface-2),var(--surface));
border:1px solid rgba(255,255,255,.07);
border-radius:8px;
padding:16px;
text-align:center;
cursor:pointer;
min-height:142px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
box-shadow:0 10px 28px rgba(0,0,0,.18);
transition:transform .18s ease, border-color .18s ease, background .18s ease;
position:relative;
}

.card:hover{
transform:translateY(-2px);
border-color:rgba(56,189,248,.36);
background:linear-gradient(180deg,#202633,var(--surface));
}

.card.activeChannel{
border-color:rgba(56,189,248,.58);
box-shadow:0 10px 28px rgba(0,0,0,.18), inset 0 0 0 1px rgba(56,189,248,.22);
}

.card img{
width:76px;
height:58px;
object-fit:contain;
filter:drop-shadow(0 8px 18px rgba(0,0,0,.32));
}

.cardTitle{
width:100%;
font-weight:800;
font-size:14px;
overflow-wrap:anywhere;
}

/* FAVORITES */

.favorite{
font-size:20px;
color:var(--muted-2);
cursor:pointer;
line-height:1;
padding:2px 4px;
}

.favorite.active{
color:var(--warning);
}

.categoryFavorite{
font-size:18px;
color:var(--muted-2);
cursor:pointer;
line-height:1;
padding:2px 4px;
}

.categoryFavorite.active{
color:var(--warning);
}

/* CATEGORY */

#categoryContainer{
display:flex;
height:calc(100dvh - 130px);
min-height:420px;
padding:0 clamp(12px,3vw,28px) 20px;
gap:14px;
}

.categoryContainer{
display:flex;
height:calc(100dvh - 170px);
min-height:420px;
padding:0 clamp(12px,3vw,28px) 20px;
gap:14px;
}

.mediaPane{
padding-top:0;
}

#categoryList{
width:40%;
overflow:auto;
background:rgba(17,19,24,.8);
border:1px solid rgba(255,255,255,.07);
border-radius:8px;
}

.mediaCategoryList{
width:34%;
overflow:auto;
background:rgba(17,19,24,.8);
border:1px solid rgba(255,255,255,.07);
border-radius:8px;
}

.mediaItemList{
width:66%;
overflow:auto;
background:rgba(17,19,24,.62);
border:1px solid rgba(255,255,255,.07);
border-radius:8px;
}

#channelList{
width:60%;
overflow:auto;
background:rgba(17,19,24,.62);
border:1px solid rgba(255,255,255,.07);
border-radius:8px;
}

.listItem{
padding:14px;
border-bottom:1px solid rgba(255,255,255,.06);
cursor:pointer;
transition:background .18s ease, color .18s ease;
}

.listItem:hover{
background:rgba(56,189,248,.08);
}

.listItem.activeChannel{
background:rgba(56,189,248,.12);
box-shadow:inset 3px 0 0 var(--accent-2);
}

.listItem.showAction{
background:rgba(56,189,248,.1);
box-shadow:inset 3px 0 0 var(--accent-2);
}

.listItemRow{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}

.listItemTitle{
flex:1;
min-width:0;
}

.channelThumb{
width:28px;
height:28px;
object-fit:contain;
border-radius:5px;
background:var(--surface-2);
flex:0 0 auto;
}

.posterThumb{
width:38px;
height:54px;
object-fit:cover;
border-radius:5px;
background:var(--surface-2);
flex:0 0 auto;
}

.mediaMetaStack{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:2px;
font-size:11px;
color:var(--muted);
text-align:right;
}

.itemButton{
width:auto;
margin-top:0;
padding:6px 10px;
background:var(--surface-3);
font-size:12px;
display:none;
}

.listItem.showAction .itemButton{
display:inline-block;
}

.listItem.hiddenCategory{
opacity:.55;
}

/* SEARCH */

#searchInput{
width:100%;
padding:12px;
background:#0d1016;
border:1px solid var(--line);
color:var(--text);
margin-top:0;
}

#search,
#programSearch{
padding-top:16px;
}

#searchInput,
#programSearchInput{
max-width:620px;
}

/* EPG */

#epgContainer{
background:#080b10;
padding:12px clamp(12px,3vw,28px);
border-top:1px solid var(--line);
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(210px,250px);
gap:12px;
overflow-x:auto;
min-height:72px;
}

.epgItem{
padding:12px;
background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
border:1px solid rgba(255,255,255,.08);
border-radius:8px;
white-space:normal;
}

#epgHeader{
padding:10px clamp(12px,3vw,28px);
background:#101621;
border-top:1px solid var(--line);
font-size:13px;
color:#dbeafe;
font-weight:700;
}

#playbackDebug{
display:none;
padding:8px clamp(12px,3vw,28px);
background:#0d1119;
border-top:1px solid var(--line);
font-size:12px;
color:#7dd3fc;
word-break:break-word;
white-space:pre-wrap;
}

.appLoading{
position:fixed;
inset:0;
z-index:300;
display:none;
align-items:center;
justify-content:center;
background:rgba(5,7,11,.86);
backdrop-filter:blur(14px);
}

.appLoading.open{
display:flex;
}

.appLoadingCard{
width:min(420px,calc(100vw - 32px));
padding:22px;
border-radius:10px;
background:var(--surface);
border:1px solid rgba(255,255,255,.1);
box-shadow:var(--shadow);
}

.appLoadingTitle{
font-size:18px;
font-weight:900;
margin-bottom:8px;
}

.appLoadingText{
font-size:13px;
color:var(--muted);
line-height:1.5;
}

.appLoadingProgress{
height:7px;
margin-top:16px;
border-radius:999px;
overflow:hidden;
background:rgba(255,255,255,.1);
}

.appLoadingProgressFill{
height:100%;
width:0%;
background:linear-gradient(90deg,var(--accent),var(--accent-2));
transition:width .24s ease;
}

.appLoadingPercent{
margin-top:8px;
font-size:12px;
font-weight:900;
color:var(--accent-2);
}

.epgHour{
display:block;
font-size:12px;
font-weight:bold;
color:#7dd3fc;
margin-bottom:6px;
}

.epgProgram{
display:block;
font-size:14px;
font-weight:bold;
margin-bottom:8px;
line-height:1.25;
}

.epgProgressTrack{
height:4px;
background:#303746;
border-radius:999px;
overflow:hidden;
}

.epgProgressFill{
height:100%;
background:linear-gradient(90deg,var(--good),var(--accent-2));
width:0%;
}

.epgProgressText{
display:block;
margin-top:6px;
font-size:12px;
color:#9ca3af;
}

.epgTime{
display:block;
font-size:12px;
color:#9ca3af;
margin-bottom:4px;
}

.vodPlayerDetails{
grid-column:1 / -1;
padding:14px 16px;
border-radius:8px;
background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
border:1px solid rgba(255,255,255,.08);
white-space:normal;
display:grid;
grid-template-columns:minmax(220px,1fr) minmax(220px,.55fr);
gap:16px;
}

.vodPlayerDetailTitle{
font-size:16px;
font-weight:900;
margin-bottom:6px;
}

.vodPlayerDetailMeta{
font-size:12px;
font-weight:800;
color:var(--accent-2);
margin-bottom:8px;
}

.vodPlayerDetailDesc{
font-size:13px;
line-height:1.55;
color:var(--muted);
max-width:900px;
}

.nextEpisodePanel{
padding:12px;
border-radius:8px;
background:rgba(225,29,72,.12);
border:1px solid rgba(225,29,72,.22);
align-self:start;
}

.nextEpisodeLabel{
font-size:11px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--accent-2);
margin-bottom:6px;
}

.nextEpisodeTitle{
font-size:14px;
font-weight:900;
line-height:1.25;
margin-bottom:10px;
}

.nextEpisodePanel button{
width:auto;
margin:0;
padding:9px 13px;
border-radius:999px;
font-size:12px;
}

.epgTitle{
display:block;
font-weight:bold;
}

.epgDescription,
.cardMeta,
.emptyState{
font-size:13px;
color:var(--muted);
}

.emptyState{
grid-column:1 / -1;
padding:14px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.07);
border-radius:8px;
}

.controlCard{
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.06);
border-radius:16px;
box-shadow:0 12px 28px rgba(0,0,0,.12);
}

.cardMeta{
margin-top:8px;
line-height:1.35;
}

.loadingState{
grid-column:1 / -1;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:18px;
color:var(--muted);
font-size:13px;
}

.homeGrid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:14px;
padding:8px clamp(12px,3vw,28px) 18px;
}

.homeTile{
min-height:150px;
padding:18px;
border-radius:10px;
background:
radial-gradient(circle at 85% 8%,rgba(56,189,248,.16),transparent 34%),
linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
border:1px solid rgba(255,255,255,.08);
cursor:pointer;
transition:transform .18s ease, border-color .18s ease, background .18s ease;
}

.homeTile:hover{
transform:translateY(-2px);
border-color:rgba(56,189,248,.36);
}

.homeTileKicker{
font-size:11px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--accent-2);
}

.homeTileTitle{
margin-top:10px;
font-size:24px;
font-weight:900;
}

.homeTileMeta{
margin-top:8px;
font-size:13px;
color:var(--muted);
}

#homeRecentSection,
#homeVodRecentSection{
margin:0 clamp(12px,3vw,28px) 24px;
border:1px solid rgba(255,255,255,.07);
border-radius:8px;
overflow:hidden;
background:rgba(17,19,24,.62);
}

.homeRecent{
display:flex;
gap:10px;
overflow:auto;
padding:14px;
}

.continueSection{
margin:0 clamp(12px,3vw,28px) 24px;
border:1px solid rgba(255,255,255,.07);
border-radius:8px;
overflow:hidden;
background:rgba(17,19,24,.62);
display:none;
}

.continueRow{
display:flex;
gap:12px;
overflow:auto;
padding:14px;
}

.continueCard{
position:relative;
min-width:190px;
width:190px;
border-radius:8px;
overflow:hidden;
background:var(--surface-2);
border:1px solid rgba(255,255,255,.08);
cursor:pointer;
}

.continueThumb{
width:100%;
aspect-ratio:16/9;
object-fit:cover;
display:block;
background:var(--surface-3);
}

.continueInfo{
padding:10px;
}

.continueTitle{
font-size:13px;
font-weight:800;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.continueMeta{
margin-top:4px;
font-size:12px;
color:var(--muted);
}

.continueProgress{
height:3px;
background:rgba(255,255,255,.12);
}

.continueProgressFill{
height:100%;
background:linear-gradient(90deg,var(--accent),var(--accent-2));
}

.searchGroups{
padding:12px clamp(12px,3vw,28px) 24px;
display:flex;
flex-direction:column;
gap:18px;
}

.searchGroupHeader{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:0 2px;
font-size:13px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--muted);
}

.searchRow{
display:flex;
gap:12px;
overflow-x:auto;
padding-bottom:4px;
}

.searchRow .card,
.searchRow .vodCard{
min-width:180px;
max-width:220px;
flex:0 0 190px;
}

.spinner{
width:18px;
height:18px;
border:2px solid rgba(255,255,255,.14);
border-top-color:var(--accent-2);
border-radius:50%;
animation:spin .75s linear infinite;
}

@keyframes spin{
to{transform:rotate(360deg);}
}

/* VOD */

.vodCategoryBar{
display:flex;
gap:8px;
align-items:center;
padding:12px clamp(12px,3vw,28px);
overflow-x:auto;
flex-wrap:wrap;
}

.vodCatPill{
padding:7px 14px;
border-radius:999px;
font-size:12px;
font-weight:800;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
color:var(--muted);
cursor:pointer;
white-space:nowrap;
transition:background .18s ease, color .18s ease, border-color .18s ease;
}

.vodCatPill:hover{
color:var(--text);
background:rgba(255,255,255,.09);
}

.vodCatPill.active{
background:rgba(56,189,248,.13);
border-color:rgba(56,189,248,.32);
color:var(--accent-2);
}

.vodGrid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
gap:14px;
padding:10px clamp(12px,3vw,28px) 18px;
}

.vodCard{
background:var(--surface);
border:1px solid rgba(255,255,255,.07);
border-radius:8px;
cursor:pointer;
overflow:hidden;
position:relative;
transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.vodCard:hover{
transform:translateY(-2px);
border-color:rgba(56,189,248,.36);
box-shadow:0 14px 34px rgba(0,0,0,.28);
}

.vodPoster,
.vodPosterPlaceholder{
width:100%;
aspect-ratio:2 / 3;
display:block;
background:linear-gradient(135deg,var(--surface-2),var(--surface-3));
}

.vodPoster{
object-fit:cover;
}

.vodPosterPlaceholder{
display:flex;
align-items:center;
justify-content:center;
padding:12px;
color:var(--muted);
font-weight:800;
text-align:center;
overflow-wrap:anywhere;
}

.vodInfo{
padding:10px 12px 12px;
}

.vodTitle{
font-size:13px;
font-weight:800;
line-height:1.32;
overflow-wrap:anywhere;
}

.vodMeta{
margin-top:4px;
font-size:11px;
color:var(--muted);
}

.vodRating{
position:absolute;
top:8px;
right:8px;
background:rgba(0,0,0,.68);
border:1px solid rgba(255,255,255,.12);
border-radius:6px;
padding:3px 7px;
font-size:11px;
font-weight:800;
color:var(--warning);
}

#vodModal{
display:none;
position:fixed;
inset:0;
z-index:100;
background:rgba(0,0,0,.82);
backdrop-filter:blur(14px);
overflow:auto;
padding:20px;
align-items:flex-start;
justify-content:center;
}

#vodModal.open{
display:flex;
}

.vodModalInner{
width:100%;
max-width:760px;
margin:auto;
background:var(--surface);
border:1px solid var(--line);
border-radius:16px;
overflow:hidden;
position:relative;
box-shadow:0 32px 80px rgba(0,0,0,.68);
}

.vodModalClose{
position:absolute;
top:12px;
right:12px;
z-index:2;
width:36px;
height:36px;
border-radius:999px;
border:1px solid rgba(255,255,255,.16);
background:rgba(0,0,0,.55);
color:var(--text);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-weight:900;
}

.vodModalHero{
height:260px;
background:var(--surface-3);
position:relative;
}

.vodModalHero img{
width:100%;
height:100%;
object-fit:cover;
}

.vodModalHero::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top,var(--surface),transparent 62%);
}

.vodModalBody{
padding:0 24px 24px;
}

.vodModalTitle{
font-size:26px;
font-weight:900;
margin-bottom:10px;
}

.vodModalTags{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-bottom:14px;
}

.vodTag{
font-size:11px;
font-weight:800;
color:var(--muted);
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.04);
border-radius:999px;
padding:5px 9px;
}

.vodModalDesc{
font-size:14px;
color:var(--muted);
line-height:1.6;
margin-bottom:18px;
}

.vodModalActions{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-bottom:18px;
}

.episodeList{
display:flex;
flex-direction:column;
gap:6px;
}

.episodeRow{
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.07);
border-radius:8px;
cursor:pointer;
}

.episodeTitle{
flex:1;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.episodeMeta{
font-size:12px;
color:var(--muted);
}

.srOnly{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}

.pipButton{
position:absolute;
top:10px;
right:10px;
z-index:3;
width:auto;
margin-top:0;
padding:8px 11px;
background:rgba(0,0,0,.58);
border:1px solid rgba(255,255,255,.16);
border-radius:8px;
font-size:12px;
}

.playerVideoWrap{
position:relative;
background:#000;
}

.customPlayerControls{
position:absolute;
inset:0;
z-index:4;
display:grid;
grid-template-rows:1fr auto;
padding:18px;
background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 28%,transparent 62%,rgba(0,0,0,.72));
backdrop-filter:blur(10px);
opacity:0;
pointer-events:none;
transition:opacity .16s ease, transform .16s ease;
}

.playerVideoWrap:hover .customPlayerControls,
.customPlayerControls:focus-within{
opacity:1;
pointer-events:auto;
}

.customPlayerControls button{
width:auto;
min-height:38px;
margin:0;
padding:9px 13px;
border-radius:999px;
font-size:12px;
font-weight:900;
background:rgba(20,24,32,.76);
border:1px solid rgba(255,255,255,.18);
box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.playerCenterControls{
display:flex;
align-items:center;
justify-content:center;
gap:18px;
}

.playerCenterControls button{
min-width:54px;
min-height:54px;
font-size:15px;
}

.playerCenterControls .playerMainButton{
min-width:74px;
min-height:74px;
font-size:18px;
background:rgba(255,255,255,.92);
color:#05070b;
}

.playerBottomControls{
display:flex;
align-items:center;
gap:12px;
}

.playerProgress{
height:5px;
flex:1;
border-radius:999px;
background:rgba(255,255,255,.18);
overflow:hidden;
}

.playerProgressFill{
height:100%;
width:0%;
background:linear-gradient(90deg,var(--accent),var(--accent-2));
}

.playerTime{
font-size:12px;
font-weight:900;
color:#fff;
min-width:96px;
text-align:right;
}

.channelInfoBar{
display:flex;
align-items:center;
gap:12px;
padding:12px clamp(12px,3vw,28px);
background:#0b0f16;
border-bottom:1px solid var(--line);
}

.channelLogo{
width:38px;
height:38px;
object-fit:contain;
border-radius:6px;
background:var(--surface-2);
flex:0 0 auto;
}

.channelInfoText{
flex:1;
min-width:0;
}

.channelName{
font-size:15px;
font-weight:900;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.channelNow{
font-size:12px;
color:var(--muted);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.playerSignal{
margin-top:5px;
font-size:12px;
font-weight:800;
color:var(--accent-2);
}

.channelInfoActions{
display:flex;
gap:8px;
}

.miniButton{
width:auto;
margin-top:0;
padding:8px 11px;
background:var(--surface-3);
border:1px solid rgba(255,255,255,.08);
}

#bottomNav{
display:none;
position:fixed;
left:0;
right:0;
bottom:0;
z-index:90;
height:66px;
background:rgba(8,9,11,.95);
border-top:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(18px);
}

.bottomNavInner{
height:100%;
display:grid;
grid-template-columns:repeat(5,1fr);
gap:2px;
padding:4px;
}

.bottomNavItem{
display:flex;
align-items:center;
justify-content:center;
font-size:11px;
font-weight:900;
color:var(--muted);
border-radius:8px;
cursor:pointer;
}

.bottomNavItem.active{
color:var(--accent-2);
background:rgba(56,189,248,.08);
}

#toast{
position:fixed;
left:50%;
bottom:24px;
transform:translateX(-50%) translateY(16px);
z-index:120;
background:rgba(17,19,24,.95);
border:1px solid rgba(255,255,255,.12);
box-shadow:var(--shadow);
border-radius:999px;
padding:10px 16px;
color:var(--text);
font-size:13px;
font-weight:800;
opacity:0;
pointer-events:none;
transition:opacity .18s ease, transform .18s ease;
}

#toast.show{
opacity:1;
transform:translateX(-50%) translateY(0);
}


/* RECENT */

#recentSection{
padding:16px clamp(12px,3vw,28px) 24px;
background:#08090b;
}

#recentSection h3{
margin:0 0 10px;
font-size:16px;
}

#recent{
display:flex;
gap:10px;
overflow:auto;
}

.recentCard{
background:var(--surface-2);
border:1px solid rgba(255,255,255,.07);
padding:8px 12px;
border-radius:6px;
cursor:pointer;
white-space:nowrap;
}

.recentCard.activeChannel{
border-color:rgba(56,189,248,.5);
color:var(--accent-2);
}

#categoryControls{
margin:0 clamp(12px,3vw,28px) 12px;
padding:12px;
display:grid;
grid-template-columns:minmax(130px,180px) minmax(180px,1fr) minmax(220px,1.2fr) auto;
align-items:end;
gap:10px;
}

.mediaControls{
margin:0 clamp(12px,3vw,28px) 12px;
padding:12px;
display:grid;
grid-template-columns:minmax(130px,180px) minmax(180px,1fr) minmax(220px,1.2fr) auto;
align-items:end;
gap:10px;
}

.controlGroup{
min-width:0;
}

.controlWide{
min-width:180px;
}

.controlLabel{
display:block;
font-size:11px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--muted);
margin:0 0 6px;
}

#categoryControls select,
.mediaControls select,
#categoryControls input,
.mediaControls input{
width:100%;
max-width:none;
margin-top:0;
background:#0c1118;
}

.searchControl{
display:flex;
align-items:center;
gap:8px;
flex:1 1 280px;
max-width:440px;
}

.tabSearchControl{
margin-left:clamp(12px,3vw,28px);
max-width:680px;
}

.searchControl input{
margin-top:0;
}

#categorySearchInput{
margin-top:0;
}

.compactButton,
#categorySearchButton{
width:auto;
margin-top:0;
padding:12px 16px;
background:var(--surface-3);
border:1px solid rgba(255,255,255,.08);
}

.controlCheck,
#categoryControls label{
display:flex;
align-items:center;
gap:8px;
font-size:14px;
color:var(--muted);
padding-bottom:12px;
}

.mediaControls label{
display:flex;
align-items:center;
gap:8px;
font-size:14px;
color:var(--muted);
}

.favoritesSection{
padding:16px clamp(12px,3vw,28px) 0;
}

.favoritesSection h3{
margin:0;
font-size:16px;
}

.favoriteCategoryGrid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
gap:12px;
padding:12px 0 4px;
}

.favoriteCategoryCard{
background:var(--surface-2);
border:1px solid rgba(255,255,255,.07);
border-radius:8px;
padding:14px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
transition:background .18s ease, border-color .18s ease, transform .18s ease;
}

.favoriteCategoryCard:hover{
background:#202633;
border-color:rgba(56,189,248,.36);
transform:translateY(-1px);
}

.playerShell{
margin:0 clamp(12px,3vw,28px);
overflow:hidden;
border-radius:20px;
background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.07);
box-shadow:0 16px 34px rgba(0,0,0,.22);
}

.playerMeta{
background:#0b0f16;
}

.paneHeader{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:12px 14px;
border-bottom:1px solid rgba(255,255,255,.06);
background:rgba(255,255,255,.03);
font-size:12px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
color:var(--muted);
}

.paneHeaderTitle{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.favoritesToggle{
display:flex;
gap:8px;
padding:0 clamp(12px,3vw,28px) 14px;
}

.favoritesToggle button{
width:auto;
margin-top:0;
padding:10px 14px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.04);
color:var(--muted);
font-size:13px;
font-weight:800;
}

.favoritesToggle button.active{
background:rgba(225,29,72,.16);
border-color:rgba(225,29,72,.3);
color:var(--text);
}

.favoritesPanel{
display:none;
}

.favoritesPanel.active{
display:block;
}

@media (max-width: 768px){

#login{
margin:12px;
padding:18px 16px;
border-radius:16px;
max-width:none;
}

video{
height:28dvh;
min-height:190px;
}

#categoryControls,
.mediaControls{
grid-template-columns:1fr;
}

.customPlayerControls{
position:static;
opacity:1;
transform:none;
border-radius:0;
border-left:0;
border-right:0;
flex-wrap:wrap;
}

.grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
padding:12px;
}

#categoryContainer{
display:grid;
grid-template-columns:minmax(132px,.9fr) minmax(0,1.35fr);
align-items:start;
height:calc(100dvh - 208px);
min-height:460px;
padding:0 12px 16px;
gap:10px;
}

.categoryContainer{
display:grid;
grid-template-columns:minmax(132px,.9fr) minmax(0,1.35fr);
height:calc(100dvh - 208px);
min-height:460px;
padding:0 12px 16px;
gap:10px;
}

#categoryList,
.mediaCategoryList,
.mediaItemList,
#channelList{
width:auto;
border-radius:14px;
}

#categoryList{
max-height:none;
}

#channelList{
max-height:none;
}

.mediaCategoryList,
.mediaItemList{
max-height:none;
}

.listItem{
padding:14px 12px;
}

#epgContainer{
padding:12px;
gap:8px;
}

.epgItem{
min-width:160px;
max-width:160px;
padding:12px 10px;
}

#recent{
padding-bottom:8px;
}

#topnav{
padding:10px 12px;
gap:6px;
scrollbar-width:none;
}

#topnav::-webkit-scrollbar{
display:none;
}

.brand{
display:none;
}

#appBody{
gap:14px;
padding-bottom:18px;
}

.navItem{
padding:10px 12px;
font-size:13px;
border-radius:999px;
background:rgba(255,255,255,.04);
}

.navItem.active{
box-shadow:none;
background:rgba(225,29,72,.18);
border:1px solid rgba(225,29,72,.25);
}

#categoryControls{
padding:12px;
gap:10px;
position:sticky;
top:58px;
z-index:9;
background:linear-gradient(180deg,rgba(8,9,11,.97),rgba(8,9,11,.88));
backdrop-filter:blur(14px);
}

.tabHeader{
padding:14px 12px 10px;
align-items:flex-start;
flex-direction:column;
gap:10px;
}

.tabTitle{
font-size:22px;
}

.tabDescription{
font-size:13px;
}

#categoryControls select,
#categorySearchInput{
max-width:none;
}

.searchControl{
max-width:none;
width:100%;
}

.card{
min-height:136px;
padding:14px 10px;
border-radius:14px;
}

.card img{
width:64px;
height:48px;
}

.favoritesSection,
#search,
#favorites,
#live{
padding-bottom:16px;
}

.favoritesToggle{
padding:0 12px 12px;
}

.favoritesToggle button{
flex:1;
justify-content:center;
}

#bottomNav{
display:block;
}

#appBody{
padding-bottom:84px;
}

#epgHeader,
#playbackDebug{
padding-left:12px;
padding-right:12px;
}

#recentSection{
padding:12px;
}

.recentCard{
padding:10px 12px;
font-size:13px;
}

}

@media (max-width: 560px){

body{
font-size:14px;
}

#login{
margin:10px;
padding:16px 14px;
}

#login h2{
font-size:24px;
margin-bottom:14px;
}

input:not([type="checkbox"]),
select,
button{
min-height:46px;
}

.grid{
grid-template-columns:1fr;
}

#topnav{
padding:8px 10px;
}

.loginEyebrow,
.presetChip,
.tabBadge{
font-size:11px;
}

.navItem{
padding:9px 11px;
font-size:12px;
}

#categoryControls{
top:54px;
}

#categoryContainer{
grid-template-columns:minmax(112px,.82fr) minmax(0,1.28fr);
height:calc(100dvh - 198px);
min-height:420px;
}

video{
height:24dvh;
min-height:170px;
}

.epgItem{
min-width:148px;
max-width:148px;
}

.vodGrid{
grid-template-columns:repeat(3,1fr);
gap:8px;
padding:10px;
}

.searchRow .card,
.searchRow .vodCard{
min-width:150px;
flex-basis:150px;
}

.vodCategoryBar{
padding:10px;
}

.vodModalHero{
height:170px;
}

.vodModalBody{
padding:0 16px 18px;
}

.vodModalTitle{
font-size:21px;
}

.epgProgram{
font-size:13px;
}

.epgProgressText,
.cardMeta,
.emptyState{
font-size:12px;
}

.paneHeader{
padding:11px 12px;
font-size:11px;
}

.tabHeader{
padding-bottom:8px;
}

}



/* ROOK PREMIUM STREAMING REFRESH - Netflix-inspired, original styling */
:root{
--netflix-red:#e50914;
--netflix-red-2:#b20710;
--cinema-bg:#030304;
--glass:rgba(16,16,18,.72);
--glass-strong:rgba(20,20,23,.92);
--hero-grad:linear-gradient(90deg,rgba(3,3,4,.98) 0%,rgba(3,3,4,.78) 42%,rgba(3,3,4,.18) 100%);
}

body{
background:
linear-gradient(180deg,rgba(3,3,4,1),rgba(10,10,12,.98) 36%,rgba(3,3,4,1)),
radial-gradient(circle at 78% 8%,rgba(229,9,20,.24),transparent 34rem),
var(--cinema-bg);
}

#topnav{
position:sticky;
top:0;
z-index:50;
background:linear-gradient(180deg,rgba(0,0,0,.94),rgba(0,0,0,.58));
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(255,255,255,.06);
box-shadow:0 14px 40px rgba(0,0,0,.35);
}

.brand{
font-size:24px;
letter-spacing:-.04em;
text-transform:uppercase;
color:#fff;
}

.brand span,
.tabKicker,
.homeTileKicker{
color:var(--netflix-red);
}

.navItem{
border-radius:999px;
transition:background .18s ease,color .18s ease,transform .18s ease;
}

.navItem:hover{
background:rgba(255,255,255,.1);
transform:translateY(-1px);
}

.navItem.active{
background:#fff;
color:#050505;
box-shadow:0 10px 30px rgba(255,255,255,.12);
}

#appBody{
padding-top:0;
}

.tabHeader{
margin-bottom:18px;
}

.spotlightHero{
position:relative;
overflow:hidden;
min-height:360px;
margin:-2px -4px 24px;
padding:clamp(28px,5vw,62px);
border:1px solid rgba(255,255,255,.08);
border-radius:28px;
background:
var(--hero-grad),
radial-gradient(circle at 82% 28%,rgba(229,9,20,.55),transparent 24rem),
linear-gradient(135deg,rgba(31,41,55,.65),rgba(0,0,0,.98));
box-shadow:0 32px 90px rgba(0,0,0,.55);
}

.spotlightHero::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(180deg,transparent 48%,rgba(3,3,4,.94)),
radial-gradient(circle at 88% 22%,rgba(255,255,255,.18),transparent 10rem);
pointer-events:none;
}

.spotlightContent{
position:relative;
z-index:1;
max-width:760px;
}

.spotlightEyebrow{
font-size:12px;
font-weight:900;
letter-spacing:.22em;
text-transform:uppercase;
color:#fca5a5;
margin-bottom:12px;
}

.spotlightTitle{
font-size:clamp(40px,7vw,84px);
line-height:.92;
letter-spacing:-.075em;
font-weight:950;
margin:0 0 16px;
}

.spotlightCopy{
max-width:640px;
color:#d1d5db;
font-size:clamp(15px,1.6vw,19px);
margin:0 0 24px;
}

.spotlightActions,
.quickActionRow{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}

.heroButton,
.ghostButton{
border:0;
border-radius:999px;
padding:13px 20px;
font-weight:900;
letter-spacing:.01em;
cursor:pointer;
transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}

.heroButton{
background:#fff;
color:#050505;
box-shadow:0 16px 36px rgba(255,255,255,.16);
}

.heroButton.primary{
background:linear-gradient(135deg,var(--netflix-red),var(--netflix-red-2));
color:#fff;
box-shadow:0 16px 38px rgba(229,9,20,.34);
}

.ghostButton{
background:rgba(109,109,110,.62);
color:#fff;
border:1px solid rgba(255,255,255,.12);
}

.heroButton:hover,
.ghostButton:hover{
transform:translateY(-2px) scale(1.02);
}

.quickSearchPanel{
margin:0 0 24px;
padding:16px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.08);
border-radius:22px;
box-shadow:0 20px 60px rgba(0,0,0,.28);
}

#home .quickSearchPanel{
position:relative;
z-index:2;
margin-top:-4px;
}

.quickSearchScope{
display:flex;
gap:8px;
overflow-x:auto;
padding:0 0 12px;
scrollbar-width:none;
}

.quickSearchScope::-webkit-scrollbar{
display:none;
}

.scopePill,
.sourcePill{
width:auto;
min-height:34px;
margin:0;
padding:8px 13px;
border-radius:999px;
background:rgba(255,255,255,.075);
border:1px solid rgba(255,255,255,.1);
color:#d6dde8;
font-size:12px;
font-weight:950;
white-space:nowrap;
box-shadow:none;
}

.scopePill.active,
.sourcePill.active{
background:#fff;
color:#050505;
border-color:#fff;
}

.quickSearchBar{
display:flex;
gap:10px;
align-items:center;
}

.quickSearchBar input{
flex:1;
min-width:160px;
background:rgba(0,0,0,.45);
border:1px solid rgba(255,255,255,.1);
border-radius:999px;
color:#fff;
padding:14px 18px;
font-size:15px;
outline:none;
}

.quickSearchBar input:focus{
border-color:rgba(229,9,20,.8);
box-shadow:0 0 0 4px rgba(229,9,20,.16);
}

.quickSearchResults{
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(210px,260px);
gap:12px;
overflow-x:auto;
padding-top:14px;
scroll-snap-type:x proximity;
}

.quickSearchRailWrap{
position:relative;
}

.quickSearchRailWrap .quickSearchResults{
padding-left:0;
padding-right:0;
scroll-behavior:smooth;
scrollbar-width:none;
}

.quickRailArrow{
position:relative;
z-index:1;
background:rgba(0,0,0,.62);
backdrop-filter:blur(14px);
}

.quickSearchRailControls{
display:flex;
justify-content:flex-end;
gap:8px;
padding-top:10px;
}

.quickSearchResults .card,
.quickSearchResults .vodCard{
scroll-snap-align:start;
}

.trendingHero{
min-height:auto;
display:flex;
flex-direction:column;
gap:18px;
padding:clamp(18px,3.6vw,42px);
}

.trendingHeader{
max-width:none;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:18px;
}

.trendingHeader .spotlightTitle{
font-size:clamp(34px,4.8vw,64px);
margin-bottom:10px;
}

.railControls{
display:flex;
gap:8px;
flex:0 0 auto;
}

.trendingSourcePanel{
position:relative;
z-index:1;
margin-left:auto;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:8px;
}

.trendingSourceLabel{
font-size:10px;
font-weight:950;
letter-spacing:.16em;
text-transform:uppercase;
color:#aeb8c8;
}

.trendingSourcePills{
display:flex;
gap:7px;
padding:5px;
border-radius:999px;
background:rgba(0,0,0,.28);
border:1px solid rgba(255,255,255,.08);
}

.railArrow,
.epgArrow{
width:44px;
height:44px;
min-height:44px;
margin:0;
padding:0;
border-radius:999px;
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.16);
box-shadow:0 14px 32px rgba(0,0,0,.28);
color:#fff;
font-size:0;
position:relative;
}

.railArrow::before,
.epgArrow::before{
content:"";
position:absolute;
inset:0;
margin:auto;
width:10px;
height:10px;
border-top:2px solid currentColor;
border-right:2px solid currentColor;
transform:rotate(45deg);
}

.railArrow:first-child::before,
.epgArrowLeft::before{
transform:rotate(225deg);
}

.trendingRail{
position:relative;
z-index:1;
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(220px,300px);
gap:14px;
overflow-x:auto;
scroll-snap-type:x proximity;
scroll-behavior:smooth;
padding:2px 2px 8px;
scrollbar-width:none;
}

.trendingRail::-webkit-scrollbar,
.homeRecent::-webkit-scrollbar,
.continueRow::-webkit-scrollbar,
.quickSearchResults::-webkit-scrollbar,
#epgContainer::-webkit-scrollbar,
#recent::-webkit-scrollbar{
display:none;
}

.trendCard{
min-height:180px;
border-radius:18px;
overflow:hidden;
border:1px solid rgba(255,255,255,.12);
background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
box-shadow:0 22px 56px rgba(0,0,0,.4);
cursor:pointer;
position:relative;
scroll-snap-align:start;
transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.trendCard:hover{
transform:translateY(-5px) scale(1.025);
border-color:rgba(255,255,255,.26);
box-shadow:0 30px 70px rgba(0,0,0,.54);
}

.trendThumb{
width:100%;
aspect-ratio:16/9;
object-fit:cover;
display:block;
background:linear-gradient(135deg,#161920,#090a0d);
}

.trendFallback{
aspect-ratio:16/9;
display:flex;
align-items:center;
justify-content:center;
padding:18px;
font-size:30px;
font-weight:950;
letter-spacing:-.04em;
background:
radial-gradient(circle at 80% 18%,rgba(229,9,20,.38),transparent 46%),
linear-gradient(135deg,#20232b,#07080a);
}

.trendInfo{
padding:13px 14px 15px;
}

.trendLabel{
font-size:10px;
font-weight:950;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--netflix-red);
margin-bottom:5px;
}

.trendTitle{
font-size:15px;
font-weight:950;
line-height:1.2;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

.trendMeta{
margin-top:7px;
font-size:12px;
color:#a7b0bd;
}

.trendNotice{
min-height:140px;
display:flex;
align-items:center;
padding:18px;
border-radius:18px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.09);
color:#c7d2e1;
font-size:14px;
font-weight:800;
}

.quickSearchPanel{
padding:18px;
}

.homeGrid{
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

.homeTile,
.controlCard,
.favoritesSection,
.playerShell,
.categoryContainer,
.mediaPane,
.appLoadingCard,
#login{
background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
border:1px solid rgba(255,255,255,.095);
border-radius:22px;
box-shadow:0 24px 70px rgba(0,0,0,.34);
}

.homeTile{
min-height:150px;
position:relative;
overflow:hidden;
}

.homeTile::after{
content:"";
position:absolute;
inset:auto -20% -48% 42%;
height:120px;
background:radial-gradient(circle,rgba(229,9,20,.32),transparent 70%);
pointer-events:none;
}

.card,
.vodCard,
.listItem,
.recentCard,
.continueCard,
.favoriteCategoryCard{
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}

.card:hover,
.vodCard:hover,
.continueCard:hover,
.favoriteCategoryCard:hover{
transform:translateY(-5px) scale(1.035);
box-shadow:0 26px 60px rgba(0,0,0,.48);
border-color:rgba(255,255,255,.22);
}

.card.activeChannel,
.recentCard.activeChannel,
.listItem.activeChannel{
box-shadow:0 0 0 2px var(--netflix-red),0 24px 60px rgba(229,9,20,.22);
}

.favorite,
.categoryFavorite{
color:#9ca3af;
text-shadow:0 2px 8px rgba(0,0,0,.5);
}

.favorite.active,
.categoryFavorite.active{
color:#facc15;
}

.playerVideoWrap{
background:#000;
border-radius:24px;
overflow:hidden;
box-shadow:0 30px 90px rgba(0,0,0,.6);
}

.customPlayerControls{
padding:0;
background:
linear-gradient(180deg,rgba(0,0,0,.18),transparent 22%,transparent 54%,rgba(0,0,0,.84));
backdrop-filter:none;
display:flex;
flex-direction:column;
justify-content:flex-end;
}

.playerCenterControls{
order:1;
align-self:center;
gap:14px;
padding:10px 14px;
border-radius:999px;
background:rgba(5,7,10,.18);
border:1px solid rgba(255,255,255,.08);
box-shadow:0 18px 54px rgba(0,0,0,.34);
backdrop-filter:blur(18px);
margin-bottom:12px;
}

.playerCenterControls button{
display:grid;
place-items:center;
min-width:58px;
min-height:58px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.16);
color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 28px rgba(0,0,0,.22);
backdrop-filter:blur(18px);
}

.playerCenterControls .playerMainButton{
min-width:82px;
min-height:82px;
font-size:0;
background:rgba(255,255,255,.1);
border-color:rgba(255,255,255,.18);
color:#fff;
position:relative;
}

.playerCenterControls .playerMainButton::before{
content:"";
width:0;
height:0;
border-top:11px solid transparent;
border-bottom:11px solid transparent;
border-left:18px solid currentColor;
transform:translateX(2px);
}

.playerCenterControls .playerMainButton.isPlaying::before{
width:18px;
height:24px;
border:0;
background:linear-gradient(90deg,currentColor 0 28%,transparent 28% 62%,currentColor 62%);
transform:none;
border-radius:1px;
}

.playerSeekButton{
font-size:0;
position:relative;
}

.playerSeekButton::before{
content:"";
width:18px;
height:18px;
border:2px solid currentColor;
border-right-color:transparent;
border-radius:50%;
transform:rotate(-35deg);
}

.playerSeekButton.forward::before{
transform:rotate(145deg);
}

.playerSeekButton span{
position:absolute;
font-size:11px;
font-weight:950;
letter-spacing:-.04em;
}

.playerTopActions{
position:absolute;
top:16px;
right:16px;
z-index:5;
display:flex;
gap:10px;
align-items:center;
}

.playerIconButton{
position:relative;
display:grid;
place-items:center;
width:48px;
height:48px;
min-height:48px;
padding:0;
border-radius:999px;
background:rgba(8,11,18,.26);
border:1px solid rgba(255,255,255,.14);
color:#fff;
box-shadow:0 14px 30px rgba(0,0,0,.28);
backdrop-filter:blur(18px);
}

.playerIconButton:hover{
background:rgba(255,255,255,.12);
}

.playerIconButton:active{
transform:scale(.97);
}

.playerFullscreenButton::before,
.playerFullscreenButton::after{
content:"";
position:absolute;
width:15px;
height:15px;
border-color:currentColor;
border-style:solid;
}

.playerFullscreenButton::before{
top:12px;
left:12px;
border-width:2px 0 0 2px;
box-shadow:18px 0 0 -13px currentColor,0 18px 0 -13px currentColor;
}

.playerFullscreenButton::after{
right:12px;
bottom:12px;
border-width:0 2px 2px 0;
box-shadow:-18px 0 0 -13px currentColor,0 -18px 0 -13px currentColor;
}

.pipButton{
position:static;
top:auto;
right:auto;
z-index:auto;
width:48px;
margin-top:0;
padding:0;
background:rgba(8,11,18,.26);
border-radius:999px;
}

.pipButton span{
font-size:12px;
font-weight:900;
letter-spacing:.02em;
}

.playerBottomControls{
order:2;
align-self:end;
width:100%;
padding:0 clamp(18px,3vw,34px) clamp(16px,2vw,24px);
background:linear-gradient(180deg,transparent,rgba(0,0,0,.58));
display:grid;
grid-template-columns:1fr auto;
grid-template-areas:
"progress progress"
"time empty";
gap:10px 14px;
}

.playerProgress{
grid-area:progress;
height:6px;
background:rgba(255,255,255,.22);
box-shadow:0 8px 24px rgba(0,0,0,.38);
}

.playerProgressFill{
background:linear-gradient(90deg,var(--netflix-red),#f97316,#38bdf8);
}

.playerTime{
grid-area:time;
color:#fff;
text-shadow:0 2px 12px rgba(0,0,0,.8);
}

.playerVideoWrap:fullscreen,
.playerVideoWrap:-webkit-full-screen{
width:100vw;
height:100vh;
border-radius:0;
background:#000;
box-shadow:none;
}

.playerVideoWrap:fullscreen video,
.playerVideoWrap:-webkit-full-screen video{
width:100%;
height:100%;
object-fit:contain;
background:#000;
}

.epgRailWrap{
position:relative;
background:#080b10;
}

.epgRailWrap #epgContainer{
padding-left:56px;
padding-right:56px;
scroll-behavior:smooth;
scrollbar-width:none;
}

.epgRailWrap.vodMode #epgContainer{
display:block;
padding:0;
overflow:visible;
min-height:0;
}

.epgRailWrap.vodMode .epgArrow{
display:none;
}

.epgArrow{
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:5;
background:rgba(0,0,0,.58);
backdrop-filter:blur(12px);
}

.epgArrowLeft{
left:12px;
}

.epgArrowRight{
right:12px;
}

#home .homeGrid{
display:none;
}

#homeVodRecentSection .paneHeader{
display:none;
}

#homeVodRecentSection,
#homeRecentSection,
#recentSection{
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
box-shadow:0 18px 50px rgba(0,0,0,.28);
}

#homeVodRecentSection{
display:none;
}

.playerKicker{
display:none;
}

.homeRecent,
#recent{
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(210px,260px);
gap:12px;
overflow-x:auto;
scroll-snap-type:x proximity;
scrollbar-width:none;
}

#recent{
padding:2px 0 8px;
}

.recentCard{
min-height:116px;
display:grid;
grid-template-columns:76px minmax(0,1fr);
align-items:center;
gap:14px;
padding:14px;
border-radius:16px;
background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
border:1px solid rgba(255,255,255,.09);
box-shadow:0 14px 34px rgba(0,0,0,.24);
scroll-snap-align:start;
white-space:normal;
}

.recentLogoStage{
width:76px;
height:76px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:
radial-gradient(circle at 80% 18%,rgba(229,9,20,.32),transparent 48%),
linear-gradient(135deg,#1b1f28,#050608);
}

.recentLogoStage img{
width:100%;
height:100%;
object-fit:contain;
padding:6px;
background:rgba(0,0,0,.18);
}

.recentLogoStage span{
font-size:22px;
font-weight:950;
letter-spacing:-.04em;
}

.recentCardInfo{
min-width:0;
}

.recentCard span{
font-size:13px;
font-weight:900;
line-height:1.25;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

.recentCard small{
display:block;
margin-top:7px;
font-size:11px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
color:#7dd3fc;
}

.vodPlayerDetails{
display:grid;
grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr);
gap:18px;
align-items:stretch;
padding:clamp(16px,3vw,26px);
border-radius:0;
background:
radial-gradient(circle at 82% 14%,rgba(229,9,20,.2),transparent 26rem),
linear-gradient(135deg,rgba(21,28,40,.98),rgba(8,10,14,.98));
border:0;
border-top:1px solid rgba(255,255,255,.08);
}

.vodDetailMain{
min-width:0;
padding:clamp(14px,2.4vw,22px);
border-radius:18px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.08);
}

.vodDetailKicker{
margin-bottom:8px;
font-size:11px;
font-weight:950;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--netflix-red);
}

.vodPlayerDetailTitle{
font-size:clamp(20px,3vw,32px);
line-height:1.05;
letter-spacing:-.035em;
}

.vodPlayerDetailMeta{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:12px 0;
}

.vodPlayerDetailMeta span{
display:inline-flex;
align-items:center;
min-height:26px;
padding:5px 10px;
border-radius:999px;
background:rgba(56,189,248,.12);
border:1px solid rgba(56,189,248,.18);
font-size:12px;
font-weight:950;
color:#7dd3fc;
}

.vodPlayerDetailDesc{
max-width:76ch;
font-size:14px;
line-height:1.7;
color:#c4cedb;
}

.nextEpisodePanel{
display:flex;
flex-direction:column;
justify-content:center;
min-height:180px;
padding:clamp(16px,2.4vw,24px);
border-radius:18px;
background:
radial-gradient(circle at 82% 18%,rgba(229,9,20,.28),transparent 13rem),
linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.1);
box-shadow:0 20px 48px rgba(0,0,0,.26);
}

.nextEpisodeTitle{
font-size:clamp(16px,2vw,22px);
line-height:1.18;
}

.nextEpisodeHint{
margin:0 0 14px;
font-size:13px;
line-height:1.5;
color:#b7c1cf;
}

@media(max-width:820px){
.vodPlayerDetails{
grid-template-columns:1fr;
gap:12px;
padding:12px;
}
.vodDetailMain,
.nextEpisodePanel{
border-radius:14px;
}
.vodPlayerDetailTitle{
font-size:20px;
letter-spacing:-.02em;
}
.vodPlayerDetailDesc{
font-size:13px;
line-height:1.55;
max-height:none;
}
.nextEpisodePanel{
min-height:0;
}
.trendingSourcePanel{
width:100%;
align-items:flex-start;
margin-left:0;
}
.trendingSourcePills{
max-width:100%;
overflow-x:auto;
scrollbar-width:none;
}
.trendingSourcePills::-webkit-scrollbar{
display:none;
}
}

.pipButton,
.compactButton,
.itemButton{
border-radius:999px;
}

#toast{
border-radius:999px;
background:rgba(20,20,20,.94);
border:1px solid rgba(255,255,255,.1);
box-shadow:0 20px 50px rgba(0,0,0,.42);
}

@media(max-width:720px){
.spotlightHero{
min-height:300px;
padding:28px 20px;
border-radius:20px;
}
.spotlightTitle{
font-size:42px;
}
.quickSearchBar{
flex-direction:column;
align-items:stretch;
}
.heroButton,
.ghostButton{
width:100%;
}
}

/* LOCAL UI REVIEW PASS */
#appBody{
gap:20px;
}

.tab{
scroll-margin-top:82px;
}

.tabHeader{
padding-top:22px;
padding-bottom:16px;
}

.tabBadge{
align-self:flex-start;
}

.quickSearchPanel{
padding:14px;
border-radius:16px;
}

.quickSearchPanel:has(.quickSearchResults:empty){
padding-bottom:14px;
}

.quickSearchPanel:has(.quickSearchResults:empty) .quickSearchRailControls{
display:none;
}

.quickSearchResults:empty{
display:none;
}

.quickSearchBar{
grid-template-columns:minmax(220px,1fr) auto auto;
align-items:center;
}

.quickSearchBar input{
min-height:48px;
font-size:14px;
}

.quickSearchBar .heroButton,
.quickSearchBar .ghostButton{
min-height:44px;
min-width:88px;
}

.trendingHero{
border-radius:18px;
overflow:hidden;
}

.trendingHeader .spotlightTitle{
font-size:clamp(34px,4vw,54px);
letter-spacing:0;
}

.playerShell{
overflow:hidden;
border-radius:18px;
}

.playerVideoWrap{
border-radius:18px 18px 0 0;
}

.playerVideoWrap .customPlayerControls{
opacity:0;
pointer-events:none;
transition:opacity .22s ease;
}

.playerVideoWrap:hover .customPlayerControls,
.playerVideoWrap.controlsVisible .customPlayerControls,
.customPlayerControls:focus-within{
opacity:1;
pointer-events:auto;
}

.playerCenterControls{
gap:8px;
padding:8px 10px;
margin-bottom:8px;
background:rgba(5,7,10,.34);
}

.playerCenterControls button{
min-width:44px;
min-height:44px;
}

.playerCenterControls .playerMainButton{
min-width:62px;
min-height:62px;
}

.playerCenterControls .playerMainButton::before{
border-top-width:9px;
border-bottom-width:9px;
border-left-width:15px;
}

.playerCenterControls .playerMainButton.isPlaying::before{
width:15px;
height:20px;
}

.playerSeekButton::before{
width:15px;
height:15px;
}

.playerSeekButton span{
font-size:10px;
}

.playerTopActions{
top:12px;
right:12px;
gap:8px;
}

.playerIconButton,
.pipButton{
width:40px;
height:40px;
min-height:40px;
background:rgba(8,11,18,.48);
}

.channelInfoBar{
padding:12px clamp(12px,3vw,28px);
background:linear-gradient(180deg,rgba(12,16,23,.98),rgba(9,12,17,.98));
}

.channelName{
font-size:14px;
}

.channelNow,
.playerSignal{
font-size:11px;
}

.miniButton{
min-height:34px;
padding:7px 12px;
font-size:12px;
}

.epgRailWrap{
border-top:1px solid rgba(255,255,255,.08);
}

.epgRailWrap #epgContainer{
grid-auto-columns:minmax(220px,260px);
padding:12px 64px 14px;
}

.epgItem{
border-radius:8px;
min-height:120px;
}

.epgProgram{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

#categoryContainer,
.categoryContainer{
height:calc(100dvh - 210px);
min-height:520px;
gap:12px;
}

#categoryList,
#channelList,
.mediaCategoryList,
.mediaItemList{
border-radius:14px;
scrollbar-width:thin;
scrollbar-color:rgba(255,255,255,.32) rgba(255,255,255,.04);
}

.listItem{
min-height:52px;
padding:12px 14px;
}

.listItem.showAction,
.listItem.activeChannel{
background:linear-gradient(90deg,rgba(56,189,248,.18),rgba(255,255,255,.035));
}

.listItem.showAction .listItemTitle,
.listItem.activeChannel .listItemTitle{
font-weight:900;
}

.categoryFavorite,
.favorite{
min-width:30px;
min-height:30px;
display:inline-grid;
place-items:center;
border-radius:999px;
}

.categoryFavorite:hover,
.favorite:hover{
background:rgba(255,255,255,.08);
}

.itemButton{
min-height:28px;
border-radius:999px;
}

.mediaItemList .paneHeader,
#channelList .paneHeader{
position:sticky;
top:0;
z-index:3;
background:rgba(15,18,25,.96);
backdrop-filter:blur(12px);
}

.vodResultGrid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:12px;
padding:14px;
}

.vodResultCard{
position:relative;
display:grid;
grid-template-rows:auto 1fr;
gap:10px;
width:100%;
min-height:0;
margin:0;
padding:0;
overflow:hidden;
text-align:left;
border-radius:10px;
background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
border:1px solid rgba(255,255,255,.08);
box-shadow:none;
}

.vodResultCard:hover{
transform:translateY(-3px);
border-color:rgba(56,189,248,.34);
box-shadow:0 18px 42px rgba(0,0,0,.32);
}

.vodResultPoster{
position:relative;
aspect-ratio:16 / 10;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:
radial-gradient(circle at 76% 18%,rgba(229,9,20,.32),transparent 48%),
linear-gradient(135deg,#1a1f2a,#080a0f);
}

.vodResultPoster img{
width:100%;
height:100%;
object-fit:cover;
}

.vodResultPoster span{
display:none;
font-size:24px;
font-weight:950;
letter-spacing:0;
color:#dbeafe;
}

.vodResultPoster.noPoster span,
.vodResultPoster:not(:has(img)) span{
display:block;
}

.vodResultInfo{
display:flex;
flex-direction:column;
gap:5px;
min-width:0;
padding:0 12px 14px;
}

.vodResultType{
font-size:10px;
font-weight:950;
letter-spacing:.12em;
text-transform:uppercase;
color:#7dd3fc;
}

.vodResultTitle{
font-size:14px;
font-weight:900;
line-height:1.25;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

.vodResultMeta{
font-size:12px;
line-height:1.35;
color:#aab4c2;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

.vodResultRating{
position:absolute;
top:8px;
right:8px;
display:inline-flex;
align-items:center;
min-height:24px;
padding:3px 7px;
border-radius:999px;
background:rgba(0,0,0,.72);
border:1px solid rgba(255,255,255,.14);
font-size:11px;
font-weight:950;
color:#facc15;
}

.vodCard .vodMeta,
.trendMeta{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

@media(max-width:900px){
#categoryContainer,
.categoryContainer{
grid-template-columns:1fr;
height:auto;
min-height:0;
}

#categoryList,
.mediaCategoryList{
width:auto;
max-height:38dvh;
}

#channelList,
.mediaItemList{
width:auto;
min-height:50dvh;
}

.vodResultGrid{
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
}

@media(max-width:720px){
.quickSearchPanel{
border-radius:14px;
}

.quickSearchBar{
grid-template-columns:1fr;
}

.quickSearchBar .heroButton,
.quickSearchBar .ghostButton{
width:100%;
}

.playerShell{
border-radius:14px;
}

.playerVideoWrap{
border-radius:14px 14px 0 0;
}

.playerCenterControls{
transform:none;
gap:6px;
}

.playerCenterControls button{
min-width:40px;
min-height:40px;
}

.playerCenterControls .playerMainButton{
min-width:54px;
min-height:54px;
}

.playerBottomControls{
padding:0 12px 14px;
}

.channelInfoBar{
align-items:flex-start;
}

.channelLogo{
width:32px;
height:32px;
}

.channelInfoActions{
align-self:center;
}

#categoryList,
.mediaCategoryList{
max-height:32dvh;
}

#channelList,
.mediaItemList{
min-height:46dvh;
}

.vodResultGrid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
padding:10px;
}

.vodResultTitle{
font-size:13px;
}

.vodResultMeta{
font-size:11px;
}
}

.quickSearchBar{
display:grid;
grid-template-columns:minmax(260px,1fr) auto auto;
gap:10px;
}

.quickSearchBar input{
min-height:56px;
font-size:16px;
padding-left:20px;
}

.quickSearchBar .heroButton,
.quickSearchBar .ghostButton{
width:auto;
min-width:102px;
min-height:48px;
padding:10px 18px;
margin:0;
}

@media(max-width:720px){
.quickSearchBar{
grid-template-columns:1fr auto auto;
}
.quickSearchBar input{
min-width:0;
}
.quickSearchBar .heroButton,
.quickSearchBar .ghostButton{
min-width:76px;
padding:9px 13px;
font-size:12px;
}
.trendingHeader{
align-items:flex-start;
flex-direction:column;
}
.trendingRail{
grid-auto-columns:minmax(210px,78vw);
}
.homeRecent,
#recent{
grid-auto-columns:minmax(180px,72vw);
}
.customPlayerControls{
position:absolute;
opacity:0;
pointer-events:none;
}
.playerVideoWrap:hover .customPlayerControls,
.customPlayerControls:focus-within{
opacity:1;
pointer-events:auto;
}
.playerCenterControls{
transform:scale(.86);
}
.epgRailWrap #epgContainer{
padding-left:12px;
padding-right:12px;
}
.epgArrow{
display:none;
}
}

/* PLAYER CONTROL DESIGN: YOUTUBE BAR + FLOATING CENTER */
.playerVideoWrap .customPlayerControls{
display:flex;
flex-direction:column;
justify-content:space-between;
padding:clamp(14px,2vw,22px);
background:linear-gradient(180deg,rgba(0,0,0,.22),transparent 30%,transparent 48%,rgba(0,0,0,.82));
backdrop-filter:none;
}

.playerVideoWrap .playerTopActions{
display:none;
}

.playerVideoWrap .playerCenterControls{
align-self:center;
margin:auto 0;
padding:8px;
gap:10px;
border-radius:999px;
background:rgba(0,0,0,.32);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 24px 70px rgba(0,0,0,.46);
backdrop-filter:blur(14px);
}

.playerVideoWrap .playerCenterControls button{
width:54px;
height:54px;
min-width:54px;
min-height:54px;
padding:0;
border-radius:999px;
background:rgba(15,18,24,.78);
border:1px solid rgba(255,255,255,.16);
box-shadow:none;
color:#fff;
transition:background .16s ease, transform .16s ease, border-color .16s ease;
}

.playerVideoWrap .playerCenterControls button:hover{
background:rgba(255,255,255,.14);
border-color:rgba(255,255,255,.26);
}

.playerVideoWrap .playerCenterControls button:active{
transform:scale(.96);
}

.playerVideoWrap .playerCenterControls .playerMainButton{
width:78px;
height:78px;
min-width:78px;
min-height:78px;
background:rgba(255,255,255,.94);
color:#080b10;
border-color:rgba(255,255,255,.7);
box-shadow:0 16px 44px rgba(0,0,0,.38);
}

.playerVideoWrap .playerCenterControls .playerMainButton:hover{
background:#fff;
}

.playerVideoWrap .playerBottomControls{
width:100%;
align-self:stretch;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:
"progress progress"
"left right";
align-items:center;
gap:10px 16px;
padding:0;
background:transparent;
}

.playerVideoWrap .playerProgress{
grid-area:progress;
height:4px;
border-radius:999px;
background:rgba(255,255,255,.28);
box-shadow:none;
overflow:hidden;
}

.playerVideoWrap .playerProgressFill{
height:100%;
background:var(--accent);
}

.playerBarLeft,
.playerBarRight{
display:flex;
align-items:center;
gap:4px;
min-width:0;
}

.playerBarLeft{
grid-area:left;
}

.playerBarRight{
grid-area:right;
justify-content:flex-end;
}

.playerVideoWrap .playerBarButton{
position:relative;
display:grid;
place-items:center;
width:36px;
height:36px;
min-width:36px;
min-height:36px;
padding:0;
margin:0;
border:0;
border-radius:4px;
background:transparent;
color:#fff;
box-shadow:none;
font-size:11px;
font-weight:900;
line-height:1;
transition:background .14s ease, transform .14s ease;
}

.playerVideoWrap .playerBarButton:hover{
background:rgba(255,255,255,.13);
}

.playerVideoWrap .playerBarButton:active{
transform:scale(.94);
}

.playerVideoWrap .playerBarPlay::before{
content:"";
width:0;
height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-left:13px solid currentColor;
transform:translateX(1px);
}

.playerVideoWrap .playerBarPlay.isPlaying::before{
width:14px;
height:16px;
border:0;
background:linear-gradient(90deg,currentColor 0 32%,transparent 32% 68%,currentColor 68%);
transform:none;
}

.playerVideoWrap .playerBarSeek::before{
content:"";
position:absolute;
width:15px;
height:15px;
border:2px solid currentColor;
border-right-color:transparent;
border-radius:50%;
transform:rotate(-35deg);
}

.playerVideoWrap .playerBarSeek.forward::before{
transform:rotate(145deg);
}

.playerVideoWrap .playerBarSeek span{
position:relative;
font-size:9px;
letter-spacing:0;
transform:translateY(.5px);
}

.playerVideoWrap .playerBarPip{
width:44px;
font-size:11px;
letter-spacing:0;
}

.playerVideoWrap .playerBarFullscreen::before,
.playerVideoWrap .playerBarFullscreen::after{
content:"";
position:absolute;
width:10px;
height:10px;
border-color:currentColor;
border-style:solid;
}

.playerVideoWrap .playerBarFullscreen::before{
top:9px;
left:9px;
border-width:2px 0 0 2px;
}

.playerVideoWrap .playerBarFullscreen::after{
right:9px;
bottom:9px;
border-width:0 2px 2px 0;
}

.playerVideoWrap .playerTime{
min-width:120px;
padding-left:6px;
font-size:12px;
font-weight:800;
color:rgba(255,255,255,.92);
text-align:left;
text-shadow:0 1px 8px rgba(0,0,0,.7);
white-space:nowrap;
}

@media(max-width:720px){
.playerVideoWrap .customPlayerControls{
padding:12px;
}

.playerVideoWrap .playerCenterControls{
gap:7px;
padding:7px;
}

.playerVideoWrap .playerCenterControls button{
width:44px;
height:44px;
min-width:44px;
min-height:44px;
}

.playerVideoWrap .playerCenterControls .playerMainButton{
width:62px;
height:62px;
min-width:62px;
min-height:62px;
}

.playerVideoWrap .playerBottomControls{
gap:8px 10px;
}

.playerVideoWrap .playerBarButton{
width:32px;
height:32px;
min-width:32px;
min-height:32px;
}

.playerVideoWrap .playerBarPip{
width:38px;
}

.playerVideoWrap .playerTime{
min-width:82px;
font-size:11px;
}
}

/* PLAYER CONTROLS V3: MATCH OPTION 2 BAR WITH OPTIONAL FLOATING CENTER */
.playerVideoWrap .customPlayerControls{
padding:0;
background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,0) 42%,rgba(0,0,0,.72));
}

.playerVideoWrap:not(.isPaused) .ytCenterControls{
opacity:0;
transform:scale(.9);
pointer-events:none;
}

.playerVideoWrap .ytCenterControls{
gap:10px;
padding:9px 11px;
background:rgba(10,12,16,.34);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 18px 52px rgba(0,0,0,.42);
transition:opacity .16s ease, transform .16s ease;
}

.playerVideoWrap .ytCenterControls .ytSeek{
width:50px;
height:50px;
min-width:50px;
min-height:50px;
background:rgba(255,255,255,.16);
border-color:rgba(255,255,255,.2);
}

.playerVideoWrap .ytCenterControls .ytPlay{
width:74px;
height:74px;
min-width:74px;
min-height:74px;
background:rgba(255,255,255,.96);
}

.ytBottomBar{
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:
"progress progress"
"left right";
gap:8px 12px;
padding:0 9px 8px;
background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.42));
}

.ytProgress{
height:4px;
background:rgba(255,255,255,.3);
}

.ytProgressFill{
background:#f43f5e;
box-shadow:none;
}

.ytBarLeft,
.ytBarRight{
gap:7px;
}

.playerVideoWrap .ytBarButton{
width:34px;
height:34px;
min-width:34px;
min-height:34px;
border-radius:999px;
background:transparent;
color:#fff;
}

.playerVideoWrap .ytBarButton:hover{
background:rgba(255,255,255,.16);
}

.ytLiveChip{
height:30px;
display:inline-flex;
align-items:center;
padding:0 13px;
border-radius:999px;
background:rgba(255,255,255,.22);
color:#fff;
font-size:13px;
font-weight:850;
line-height:1;
box-shadow:0 6px 20px rgba(0,0,0,.28);
white-space:nowrap;
}

.ytTime{
min-width:auto;
padding-left:0;
font-size:12px;
font-weight:850;
color:#fff;
}

.playerVideoWrap .ytPip{
width:40px;
font-size:11px;
font-weight:900;
}

.playerVideoWrap .ytVolume::before{
content:"";
position:absolute;
left:9px;
width:9px;
height:13px;
background:currentColor;
clip-path:polygon(0 32%,42% 32%,100% 0,100% 100%,42% 68%,0 68%);
}

.playerVideoWrap .ytVolume::after{
content:"";
position:absolute;
left:21px;
width:8px;
height:8px;
border:2px solid currentColor;
border-left:0;
border-top-color:transparent;
border-bottom-color:transparent;
border-radius:50%;
}

.playerVideoWrap .ytVolume.isMuted::before{
opacity:.78;
}

.playerVideoWrap .ytVolume.isMuted::after{
width:14px;
height:2px;
border:0;
border-radius:999px;
background:currentColor;
transform:rotate(-42deg);
left:18px;
}

.playerVideoWrap .ytFullscreen::before{
top:8px;
left:8px;
}

.playerVideoWrap .ytFullscreen::after{
right:8px;
bottom:8px;
}

@media(max-width:720px){
.ytBottomBar{
padding:0 7px 7px;
gap:7px 8px;
}

.ytBarLeft,
.ytBarRight{
gap:4px;
}

.playerVideoWrap .ytBarButton{
width:31px;
height:31px;
min-width:31px;
min-height:31px;
}

.ytLiveChip{
height:28px;
padding:0 10px;
font-size:12px;
}

.ytTime{
font-size:11px;
}
}

/* PLAYER CONTROLS V4: OPTION 2 + OPTION 6 HYBRID */
.playerVideoWrap .customPlayerControls{
position:absolute;
inset:0;
z-index:4;
display:block;
padding:0;
background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 38%,rgba(0,0,0,.08) 56%,rgba(0,0,0,.76));
opacity:0;
pointer-events:none;
transition:opacity .18s ease;
}

.playerVideoWrap:hover .customPlayerControls,
.playerVideoWrap.controlsVisible .customPlayerControls,
.customPlayerControls:focus-within{
opacity:1;
pointer-events:auto;
}

.playerVideoWrap .playerTopActions{
display:none;
}

.playerVideoWrap .ytCenterControls{
position:absolute;
left:50%;
top:50%;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
padding:0;
margin:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
backdrop-filter:none;
transform:translate(-50%,-50%);
opacity:1;
pointer-events:auto;
}

.playerVideoWrap:not(.isPaused) .ytCenterControls{
opacity:1;
transform:translate(-50%,-50%);
pointer-events:auto;
}

.playerVideoWrap .ytSeek::before,
.playerVideoWrap .ytPlay::before,
.playerVideoWrap .ytPlayMini::before,
.playerVideoWrap .ytVolume::before,
.playerVideoWrap .ytVolume::after,
.playerVideoWrap .ytFullscreen::before,
.playerVideoWrap .ytFullscreen::after{
content:none;
display:none;
}

.playerVideoWrap .ytCenterControls button,
.playerVideoWrap .ytBarButton{
appearance:none;
font-family:inherit;
letter-spacing:0;
}

.playerVideoWrap .ytSeek{
position:relative;
display:grid;
place-items:center;
width:56px;
height:56px;
min-width:56px;
min-height:56px;
padding:0;
margin:0;
border-radius:999px;
border:1px solid rgba(255,255,255,.2);
background:rgba(12,14,18,.62);
color:#fff;
box-shadow:0 14px 34px rgba(0,0,0,.34);
backdrop-filter:blur(14px);
transition:background .16s ease, transform .16s ease, border-color .16s ease;
}

.playerVideoWrap .ytSeek:hover{
background:rgba(255,255,255,.18);
border-color:rgba(255,255,255,.34);
}

.playerVideoWrap .ytSeek svg{
width:25px;
height:25px;
fill:currentColor;
transform:translateY(-3px);
}

.playerVideoWrap .ytSeek span{
position:absolute;
top:28px;
left:50%;
transform:translateX(-50%);
font-size:9px;
font-weight:950;
line-height:1;
letter-spacing:0;
}

.playerVideoWrap .ytPlay{
position:relative;
display:grid;
place-items:center;
width:78px;
height:78px;
min-width:78px;
min-height:78px;
padding:0;
margin:0;
border-radius:999px;
border:1px solid rgba(255,255,255,.75);
background:rgba(255,255,255,.96);
color:#080a0f;
box-shadow:0 18px 50px rgba(0,0,0,.44);
transition:background .16s ease, transform .16s ease;
}

.playerVideoWrap .ytPlay:hover{
background:#fff;
}

.playerVideoWrap .ytCenterControls button:active,
.playerVideoWrap .ytBarButton:active{
transform:scale(.94);
}

.playerVideoWrap .ytPlay svg{
width:34px;
height:34px;
fill:currentColor;
}

.playerVideoWrap .ytPlay .iconPause,
.playerVideoWrap .ytPlay.isPlaying .iconPlay,
.playerVideoWrap .ytPlayMini .iconPause,
.playerVideoWrap .ytPlayMini.isPlaying .iconPlay,
.playerVideoWrap .ytVolume .iconVolumeOff,
.playerVideoWrap .ytVolume.isMuted .iconVolumeOn{
display:none;
}

.playerVideoWrap .ytPlay.isPlaying .iconPause,
.playerVideoWrap .ytPlayMini.isPlaying .iconPause,
.playerVideoWrap .ytVolume.isMuted .iconVolumeOff{
display:block;
}

.ytBottomBar{
position:absolute;
left:0;
right:0;
bottom:0;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:
"progress progress"
"left right";
align-items:center;
gap:8px 12px;
width:100%;
padding:0 12px 9px;
background:linear-gradient(180deg,transparent,rgba(0,0,0,.58));
}

.ytProgress{
grid-area:progress;
height:4px;
border-radius:999px;
background:rgba(255,255,255,.32);
overflow:hidden;
}

.ytProgressFill{
height:100%;
width:0%;
background:#f43f5e;
box-shadow:none;
}

.ytBarLeft,
.ytBarRight{
display:flex;
align-items:center;
gap:8px;
min-width:0;
}

.ytBarLeft{
grid-area:left;
}

.ytBarRight{
grid-area:right;
justify-content:flex-end;
}

.playerVideoWrap .ytBarButton{
position:relative;
display:grid;
place-items:center;
width:34px;
height:34px;
min-width:34px;
min-height:34px;
padding:0;
margin:0;
border:0;
border-radius:999px;
background:transparent;
color:#fff;
box-shadow:none;
cursor:pointer;
transition:background .14s ease, transform .14s ease;
}

.playerVideoWrap .ytBarButton:hover{
background:rgba(255,255,255,.16);
}

.playerVideoWrap .ytBarButton svg{
width:22px;
height:22px;
fill:currentColor;
}

.playerVideoWrap .ytPip{
width:38px;
font-size:0;
}

.ytLiveChip{
height:29px;
display:inline-flex;
align-items:center;
padding:0 13px;
border-radius:999px;
background:rgba(255,255,255,.2);
color:#fff;
font-size:13px;
font-weight:850;
line-height:1;
white-space:nowrap;
}

.ytTime{
min-width:auto;
padding-left:0;
font-size:12px;
font-weight:850;
color:#fff;
text-shadow:0 1px 8px rgba(0,0,0,.72);
white-space:nowrap;
}

@media(max-width:720px){
.playerVideoWrap .ytSeek{
width:46px;
height:46px;
min-width:46px;
min-height:46px;
}

.playerVideoWrap .ytSeek svg{
width:21px;
height:21px;
}

.playerVideoWrap .ytSeek span{
top:24px;
font-size:8px;
}

.playerVideoWrap .ytPlay{
width:64px;
height:64px;
min-width:64px;
min-height:64px;
}

.playerVideoWrap .ytPlay svg{
width:28px;
height:28px;
}

.ytBottomBar{
padding:0 8px 8px;
gap:7px 8px;
}

.ytBarLeft,
.ytBarRight{
gap:5px;
}

.playerVideoWrap .ytBarButton{
width:31px;
height:31px;
min-width:31px;
min-height:31px;
}

.playerVideoWrap .ytBarButton svg{
width:20px;
height:20px;
}

.ytLiveChip{
height:27px;
padding:0 10px;
font-size:12px;
}

.ytTime{
font-size:11px;
}
}

/* PLAYER CONTROLS V2: CLEAN VIDEO BAR + FLOATING TRANSPORT */
.playerVideoWrap .customPlayerControls{
position:absolute;
inset:0;
z-index:4;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:18px 20px 14px;
background:linear-gradient(180deg,rgba(0,0,0,.24),rgba(0,0,0,0) 34%,rgba(0,0,0,0) 48%,rgba(0,0,0,.78));
opacity:0;
pointer-events:none;
transition:opacity .18s ease;
}

.playerVideoWrap:hover .customPlayerControls,
.playerVideoWrap.controlsVisible .customPlayerControls,
.customPlayerControls:focus-within{
opacity:1;
pointer-events:auto;
}

.playerVideoWrap .playerTopActions{
display:none;
}

.ytCenterControls{
display:flex;
align-items:center;
justify-content:center;
gap:14px;
align-self:center;
margin:auto 0;
padding:10px 12px;
border-radius:999px;
background:rgba(6,8,12,.52);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 22px 70px rgba(0,0,0,.55);
backdrop-filter:blur(16px);
}

.ytCenterControls button,
.ytBottomBar button{
font-family:inherit;
letter-spacing:0;
}

.playerVideoWrap .ytSeek,
.playerVideoWrap .ytPlay{
position:relative;
display:grid;
place-items:center;
margin:0;
padding:0;
border-radius:999px;
border:1px solid rgba(255,255,255,.16);
background:rgba(255,255,255,.08);
color:#fff;
box-shadow:none;
cursor:pointer;
transition:background .15s ease, transform .15s ease, border-color .15s ease;
}

.playerVideoWrap .ytSeek{
width:54px;
height:54px;
min-width:54px;
min-height:54px;
font-size:0;
}

.playerVideoWrap .ytSeek:hover,
.playerVideoWrap .ytPlay:hover{
background:rgba(255,255,255,.16);
border-color:rgba(255,255,255,.28);
}

.playerVideoWrap .ytSeek:active,
.playerVideoWrap .ytPlay:active{
transform:scale(.96);
}

.playerVideoWrap .ytSeek span{
position:relative;
z-index:1;
font-size:11px;
font-weight:950;
line-height:1;
}

.playerVideoWrap .ytSeek::before{
content:"<<";
position:absolute;
top:10px;
left:9px;
font-size:12px;
font-weight:950;
line-height:1;
}

.playerVideoWrap .ytSeekForward::before{
content:">>";
left:auto;
right:9px;
}

.playerVideoWrap .ytPlay{
width:82px;
height:82px;
min-width:82px;
min-height:82px;
font-size:0;
background:rgba(255,255,255,.95);
border-color:rgba(255,255,255,.72);
color:#07090d;
box-shadow:0 14px 44px rgba(0,0,0,.48);
}

.playerVideoWrap .ytPlay:hover{
background:#fff;
}

.playerVideoWrap .ytPlay::before{
content:"";
width:0;
height:0;
border-top:12px solid transparent;
border-bottom:12px solid transparent;
border-left:19px solid currentColor;
transform:translateX(2px);
}

.playerVideoWrap .ytPlay.isPlaying::before{
width:20px;
height:24px;
border:0;
background:linear-gradient(90deg,currentColor 0 30%,transparent 30% 70%,currentColor 70%);
transform:none;
}

.ytBottomBar{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:
"progress progress"
"left right";
align-items:center;
gap:10px 16px;
width:100%;
}

.ytProgress{
grid-area:progress;
height:4px;
border-radius:999px;
background:rgba(255,255,255,.26);
overflow:hidden;
}

.ytProgressFill{
height:100%;
width:0%;
background:#f43f5e;
box-shadow:0 0 18px rgba(244,63,94,.55);
}

.ytBarLeft,
.ytBarRight{
display:flex;
align-items:center;
gap:5px;
min-width:0;
}

.ytBarLeft{
grid-area:left;
}

.ytBarRight{
grid-area:right;
justify-content:flex-end;
}

.playerVideoWrap .ytBarButton{
position:relative;
display:grid;
place-items:center;
width:38px;
height:38px;
min-width:38px;
min-height:38px;
margin:0;
padding:0;
border:0;
border-radius:5px;
background:transparent;
color:#fff;
box-shadow:none;
font-size:11px;
font-weight:900;
line-height:1;
cursor:pointer;
transition:background .14s ease, transform .14s ease;
}

.playerVideoWrap .ytBarButton:hover{
background:rgba(255,255,255,.14);
}

.playerVideoWrap .ytBarButton:active{
transform:scale(.95);
}

.playerVideoWrap .ytPlayMini::before{
content:"";
width:0;
height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-left:13px solid currentColor;
transform:translateX(1px);
}

.playerVideoWrap .ytPlayMini.isPlaying::before{
width:14px;
height:17px;
border:0;
background:linear-gradient(90deg,currentColor 0 32%,transparent 32% 68%,currentColor 68%);
transform:none;
}

.playerVideoWrap .ytMiniSeek{
font-size:0;
}

.playerVideoWrap .ytMiniSeek span{
position:relative;
z-index:1;
font-size:9px;
font-weight:950;
}

.playerVideoWrap .ytMiniSeek::before{
content:"<<";
position:absolute;
top:8px;
left:7px;
font-size:10px;
font-weight:950;
}

.playerVideoWrap .ytMiniSeekForward::before{
content:">>";
left:auto;
right:7px;
}

.ytTime{
min-width:122px;
padding-left:6px;
font-size:12px;
font-weight:800;
color:rgba(255,255,255,.92);
text-shadow:0 1px 9px rgba(0,0,0,.8);
white-space:nowrap;
}

.playerVideoWrap .ytPip{
width:44px;
font-size:11px;
}

.playerVideoWrap .ytFullscreen::before,
.playerVideoWrap .ytFullscreen::after{
content:"";
position:absolute;
width:11px;
height:11px;
border-color:currentColor;
border-style:solid;
}

.playerVideoWrap .ytFullscreen::before{
top:9px;
left:9px;
border-width:2px 0 0 2px;
}

.playerVideoWrap .ytFullscreen::after{
right:9px;
bottom:9px;
border-width:0 2px 2px 0;
}

@media(max-width:720px){
.playerVideoWrap .customPlayerControls{
padding:12px;
}

.ytCenterControls{
gap:9px;
padding:8px;
}

.playerVideoWrap .ytSeek{
width:46px;
height:46px;
min-width:46px;
min-height:46px;
}

.playerVideoWrap .ytPlay{
width:64px;
height:64px;
min-width:64px;
min-height:64px;
}

.ytBottomBar{
gap:8px 10px;
}

.playerVideoWrap .ytBarButton{
width:32px;
height:32px;
min-width:32px;
min-height:32px;
}

.playerVideoWrap .ytPip{
width:38px;
}

.ytTime{
min-width:84px;
font-size:11px;
}
}