:root{--bg:#0b0f17;--panel:#131a26;--panel2:#1a2233;--line:#243049;--text:#e6e9ef;--muted:#8a94a8;--accent:#4cc3ff;--gold:#f0a940;--red:#e5534b}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
button,input,select{font:inherit;color:inherit}
input,select{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
button{border:0;border-radius:10px;padding:10px 16px;font-weight:600;cursor:pointer;background:none}
.btn-blue{background:var(--accent);color:#04121c}.btn-grey{background:#3a4458;color:#fff}
.hidden{display:none!important}
#login{min-height:100%;display:flex;align-items:center;justify-content:center;padding:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px;width:100%;max-width:380px}
.card>*{margin-bottom:12px;width:100%}
.card img{width:84px;height:84px;border-radius:18px;display:block;margin:0 auto 12px}
.card h1{text-align:center;margin:0 0 20px;font-size:24px;color:var(--gold)}
.err{color:var(--red);min-height:20px;font-size:14px;text-align:center}
#shell{display:flex;height:100%}
#side{width:210px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:4px}
.brand{display:flex;align-items:center;gap:10px;margin:0 6px 18px}
.brand img{width:38px;height:38px;border-radius:10px}.brand b{color:var(--gold)}
.nav{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;color:var(--muted)}
.nav span{font-size:18px}
.nav.active,.nav:hover{background:var(--panel2);color:var(--text)}
main{flex:1;min-width:0;height:100%;overflow:hidden}
.view{display:flex;height:100%}
.cats{width:230px;flex-shrink:0;overflow-y:auto;border-right:1px solid var(--line);padding:10px}
.cat{display:block;width:100%;text-align:left;padding:10px 12px;color:var(--muted);font-weight:500;border-radius:8px}
.cat.active,.cat:hover{background:var(--panel2);color:var(--text)}
.livecol,.gridcol{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.gridcol{padding:12px;gap:12px}
.player{position:relative;background:#000;aspect-ratio:16/9;max-height:50vh;flex-shrink:0}
.player video{width:100%;height:100%;background:#000;display:block}
.pmsg{position:absolute;left:0;right:0;top:45%;text-align:center;color:var(--muted);pointer-events:none;padding:0 16px}
.bar{display:flex;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}
.engine{font-size:12px;color:var(--accent);border:1px solid var(--line);border-radius:20px;padding:5px 10px;white-space:nowrap}
.chlist{flex:1;overflow-y:auto}
.ch{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);border-radius:0}
.ch:hover{background:var(--panel)}
.ch.active{background:var(--panel2);box-shadow:inset 3px 0 var(--accent)}
.ch img,.ch .ph{width:56px;height:36px;object-fit:contain;flex-shrink:0;background:var(--panel);border-radius:6px}
.ch .t{min-width:0}
.ch .n{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch .e{font-size:13px;font-weight:400;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:17px}
.grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;align-content:start}
.poster{padding:0;text-align:left;font-weight:500}
.poster img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:10px;background:var(--panel);display:block}
.poster div{font-size:13px;margin-top:6px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.settings{padding:24px;max-width:520px;width:100%;overflow-y:auto}
.settings h2{color:var(--accent);margin:0 0 14px}
.settings label{display:block;color:var(--muted);margin-bottom:6px}
.settings select{margin-bottom:28px}
.acct{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:18px;line-height:1.9}
#modal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.mbox{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:100%;max-width:900px;max-height:100%;overflow-y:auto;padding:16px;position:relative}
.mbox h3{margin:0 40px 12px 0}
.mclose{position:absolute;top:8px;right:8px;font-size:18px;color:var(--muted)}
.mbox .player{max-height:60vh;border-radius:10px;overflow:hidden}
#episodes select{margin:12px 0}
.ep{display:block;width:100%;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);border-radius:0;font-weight:500}
.ep.active{color:var(--accent)}
.loading{padding:20px;color:var(--muted)}
@media(max-width:760px){
  #shell{flex-direction:column-reverse}
  #side{width:auto;flex-direction:row;justify-content:space-around;border-right:0;border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .brand{display:none}
  .nav{flex-direction:column;gap:2px;font-size:11px;padding:6px 10px}
  .nav span{font-size:20px}
  main{padding-top:env(safe-area-inset-top)}
  .view{flex-direction:column}
  .cats{width:auto;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--line);padding:8px;flex-shrink:0}
  .cat{width:auto;white-space:nowrap;flex-shrink:0;background:var(--panel)}
  .player{max-height:none}
  .grid{grid-template-columns:repeat(auto-fill,minmax(105px,1fr))}
}

/* ================= JUSTICE GOLD THEME ================= */
:root{--bg:#000;--panel:rgba(8,8,8,.78);--panel2:rgba(40,31,8,.85);--line:rgba(212,175,55,.22);--text:#f4ead0;--muted:#b8a676;--accent:#e2bf56;--gold:#d4af37;--gold2:#f6d77b}
html{background:#000}
body{background:transparent}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:#000 url("../img/bg.jpg") center/cover no-repeat}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at center,rgba(0,0,0,.25),rgba(0,0,0,.82))}
h1,h2,h3,.brand b,.nav,.engine,.btn-blue{font-family:"Cinzel",Georgia,"Times New Roman",serif}
.brand b{font-size:18px;letter-spacing:.08em;background:linear-gradient(180deg,var(--gold2),var(--gold) 60%,#9c7a1c);-webkit-background-clip:text;background-clip:text;color:transparent}

/* sidebar: black blocks, gold writing */
#side{background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-right:1px solid var(--line);gap:10px}
.nav{background:#000;color:var(--gold);border:1px solid rgba(212,175,55,.35);border-radius:12px;padding:16px 14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:box-shadow .2s,border-color .2s,color .2s}
.nav span{filter:grayscale(1) sepia(1) saturate(3) brightness(1.05)}
.nav:hover{background:#000;color:var(--gold2);border-color:var(--gold);box-shadow:0 0 14px rgba(212,175,55,.3)}
.nav.active{background:linear-gradient(180deg,#1c1505,#000 70%);color:var(--gold2);border-color:var(--gold2);box-shadow:0 0 20px rgba(212,175,55,.45),inset 0 0 12px rgba(212,175,55,.12)}

/* content panels */
.cats{background:rgba(0,0,0,.55);border-right-color:var(--line)}
.cat:hover{background:rgba(212,175,55,.08);color:var(--text)}
.cat.active{background:#000;color:var(--gold2);box-shadow:inset 3px 0 var(--gold)}
.livecol{background:rgba(0,0,0,.45)}
.gridcol{background:rgba(0,0,0,.35)}
.player{border-bottom:1px solid var(--gold);box-shadow:0 6px 24px rgba(0,0,0,.6)}
.bar{background:rgba(0,0,0,.6);border-bottom-color:var(--line)}
.engine{color:var(--gold2);border-color:var(--gold);background:#000;letter-spacing:.05em}
.ch{border-bottom-color:var(--line)}
.ch:hover{background:rgba(212,175,55,.06)}
.ch.active{background:linear-gradient(90deg,rgba(212,175,55,.18),transparent);box-shadow:inset 3px 0 var(--gold)}
.ch .e{color:var(--gold)}
input,select{background:rgba(0,0,0,.7);border-color:var(--line)}
input:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(212,175,55,.2)}
.btn-blue{background:linear-gradient(180deg,var(--gold2),var(--gold) 55%,#a8831f);color:#1a1200;letter-spacing:.08em;text-transform:uppercase}
.btn-grey{background:#000;color:var(--gold);border:1px solid var(--gold)}
.poster img{border:1px solid var(--line);transition:transform .2s,box-shadow .2s}
.poster:hover img{transform:translateY(-3px);box-shadow:0 0 18px rgba(212,175,55,.4);border-color:var(--gold)}
.settings{background:rgba(0,0,0,.55)}
.settings h2{color:var(--gold2);letter-spacing:.08em}
.acct{background:rgba(0,0,0,.7);border-color:var(--line)}
.mbox{background:rgba(5,5,5,.94);border-color:rgba(212,175,55,.45)}
.ep.active{color:var(--gold2)}

/* login */
.card{background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(212,175,55,.45);box-shadow:0 0 40px rgba(212,175,55,.15)}
.card h1{color:var(--gold2);letter-spacing:.12em;text-transform:uppercase}

/* phones: gold-trimmed bottom bar of black blocks */
@media(max-width:760px){
  #side{background:rgba(0,0,0,.88);border-top:1px solid var(--gold);gap:6px;padding-left:8px;padding-right:8px}
  .nav{flex:1;align-items:center;padding:8px 4px;font-size:10px;letter-spacing:.06em;border-radius:10px}
  .cat{background:#000;border:1px solid var(--line)}
  .cat.active{box-shadow:none;border-color:var(--gold)}
}

/* ===== TV guide + preview ===== */
#guide{position:fixed;inset:0;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:16px;z-index:60}
#glist{max-height:70vh;overflow-y:auto}
.tbtn{background:#000;border:1px solid var(--gold);color:var(--gold2);padding:7px 12px;border-radius:20px;font-size:13px;white-space:nowrap;font-family:"Cinzel",Georgia,serif}
.dayhdr{font-family:"Cinzel",Georgia,serif;color:var(--gold2);padding:14px 6px 6px;letter-spacing:.08em}
.prog{display:flex;gap:12px;padding:10px 6px;border-bottom:1px solid var(--line)}
.prog .tm{flex:0 0 100px;color:var(--gold);font-variant-numeric:tabular-nums;font-size:14px}
.prog .pi{min-width:0}
.prog .pt{font-weight:600}
.prog .pd{font-size:13px;color:var(--muted);margin-top:3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.prog.now{background:linear-gradient(90deg,rgba(212,175,55,.2),transparent);box-shadow:inset 3px 0 var(--gold)}
.prog.past{opacity:.45}
#liveVideo{cursor:pointer}
@media(max-width:760px){.engine{display:none}}

/* ===== login tabs, disclaimer, legal pages ===== */
.tabs{display:flex;gap:8px}
.tab{flex:1;background:#000;border:1px solid var(--line);color:var(--muted);font-family:"Cinzel",Georgia,serif;letter-spacing:.06em;padding:9px 6px;font-size:13px}
.tab.active{border-color:var(--gold);color:var(--gold2);box-shadow:0 0 12px rgba(212,175,55,.3)}
.disclaimer{font-size:12px;line-height:1.5;color:var(--muted);text-align:center;margin:16px 0 6px}
.legal{font-size:12px;text-align:center;margin:0}
.legal a{color:var(--gold);text-decoration:none}
.settings .disclaimer,.settings .legal{text-align:left}
.doc{max-width:760px;margin:0 auto;padding:28px 20px 60px;background:rgba(0,0,0,.8);min-height:100%;line-height:1.65}
.doc h1{font-family:"Cinzel",Georgia,serif;color:var(--gold2);letter-spacing:.08em}
.doc h2{font-family:"Cinzel",Georgia,serif;color:var(--gold);font-size:18px;margin-top:28px}
.doc a{color:var(--gold2)}
.doc .back{display:inline-block;margin-bottom:16px;text-decoration:none}

/* ===== refresh button + toast ===== */
.refresh{width:46px;height:46px;border-radius:50%;background:#000;border:1px solid var(--gold);color:var(--gold2);font-size:22px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;align-self:center;margin-top:8px;box-shadow:0 0 12px rgba(212,175,55,.25);transition:box-shadow .2s}
.refresh:hover{box-shadow:0 0 18px rgba(212,175,55,.5)}
.refresh.spin{animation:jaspin .9s linear infinite}
@keyframes jaspin{to{transform:rotate(360deg)}}
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:#000;border:1px solid var(--gold);color:var(--gold2);padding:10px 18px;border-radius:24px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:80}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:760px){.refresh{flex:0 0 46px;margin:auto 0}}

/* ===== unsupported audio notice ===== */
.warn{margin-top:10px;padding:10px 12px;border:1px solid var(--gold);border-radius:10px;background:rgba(40,31,8,.85);color:var(--gold2);font-size:14px;line-height:1.45}

/* ===== saved logins ===== */
.saved{display:flex;flex-direction:column;gap:8px}
.savedhdr{font-family:"Cinzel",Georgia,serif;color:var(--gold);font-size:13px;letter-spacing:.08em}
.prof{display:flex;gap:8px}
.pgo{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;background:#000;border:1px solid var(--line);padding:10px 12px;text-align:left}
.pgo:hover{border-color:var(--gold);box-shadow:0 0 12px rgba(212,175,55,.25)}
.pgo b{color:var(--gold2);font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pgo span{font-size:13px;color:var(--muted);font-weight:400}
.pdel{flex:0 0 44px;background:#000;border:1px solid var(--line);color:var(--muted);padding:0}
.pdel:hover{border-color:var(--red);color:var(--red)}
.remember{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer}
.remember input{width:auto;accent-color:var(--gold)}

/* ===== favourites + continue watching ===== */
.star{color:rgba(212,175,55,.35);font-size:20px;padding:4px 6px;cursor:pointer;flex-shrink:0;line-height:1}
.star.on{color:var(--gold2);text-shadow:0 0 8px rgba(212,175,55,.6)}
.ch .star{margin-left:auto}
.poster{position:relative}
.poster .star{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.65);border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:17px;padding:0}
.pbar{display:block;height:4px;background:var(--gold);border-radius:2px;margin-top:4px}
.settings .btn-grey{margin:0 0 28px}

/* ===== details, search, parental ===== */
.det{display:flex;gap:16px;margin-bottom:14px}
.det>img{width:140px;aspect-ratio:2/3;object-fit:cover;border-radius:10px;border:1px solid var(--line);flex-shrink:0;background:var(--panel)}
.dinfo{min-width:0}
.dmeta{color:var(--gold);font-size:13px;margin-bottom:8px}
.dplot{margin:0 0 10px;line-height:1.5}
.dsmall{margin:0 0 6px;font-size:13px;color:var(--muted)}
.dbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.dbtns a{display:inline-flex;align-items:center;text-decoration:none;padding:10px 16px;border-radius:10px;font-weight:600}
.searchcol{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;padding:12px;background:rgba(0,0,0,.4)}
.gresults{flex:1;overflow-y:auto}
.ghdr{font-family:"Cinzel",Georgia,serif;color:var(--gold2);margin:16px 0 8px}
.ggrid{flex:none;overflow:visible}
#cmgr{position:fixed;inset:0;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:16px;z-index:60}
#cmlist{max-height:60vh;overflow-y:auto;margin-top:12px}
.cmrow{display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid var(--line)}
.cmrow span{flex:1;min-width:0}
.cmbtn{background:#000;border:1px solid var(--line);color:var(--muted);font-size:12px;padding:6px 10px;white-space:nowrap}
.cmbtn.on{border-color:var(--gold);color:var(--gold2);box-shadow:0 0 10px rgba(212,175,55,.3)}
@media(max-width:760px){.det{flex-direction:column}.det>img{width:120px}}

/* ===== TV remote focus highlight ===== */
:focus{outline:none}
:focus-visible{outline:2px solid var(--gold2);outline-offset:2px;box-shadow:0 0 16px rgba(212,175,55,.55)}
.ch:focus-visible,.cat:focus-visible,.ep:focus-visible,.cmrow button:focus-visible{outline-offset:-2px;background:rgba(212,175,55,.16)}
.poster:focus-visible{outline:none;box-shadow:none}
.poster:focus-visible img{transform:scale(1.05);box-shadow:0 0 22px rgba(212,175,55,.65);border-color:var(--gold2)}
.nav:focus-visible{border-color:var(--gold2);box-shadow:0 0 20px rgba(212,175,55,.55)}

/* ===== home screen ===== */
#shell.at-home #side{display:none}
#v-home{background:transparent}
.home{flex:1;height:100%;overflow-y:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:28px;padding:24px}
.hhead{display:flex;align-items:center;gap:14px;width:100%;max-width:980px}
.hhead img{width:64px;height:64px;border-radius:14px;box-shadow:0 0 18px rgba(212,175,55,.35)}
.htitle{font-family:"Cinzel",Georgia,serif;font-size:28px;font-weight:700;letter-spacing:.1em;background:linear-gradient(180deg,var(--gold2),var(--gold) 60%,#9c7a1c);-webkit-background-clip:text;background-clip:text;color:transparent}
.hsub{color:var(--muted);font-size:14px;margin-top:4px}
.hclock{margin-left:auto;font-family:"Cinzel",Georgia,serif;color:var(--gold2);font-size:30px;letter-spacing:.06em}
.htiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%;max-width:980px}
.htile{background:rgba(0,0,0,.82);border:1px solid rgba(212,175,55,.45);border-radius:18px;min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--gold2);font-family:"Cinzel",Georgia,serif;font-size:24px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:transform .2s,box-shadow .2s,border-color .2s}
.htile span{font-size:48px;filter:grayscale(1) sepia(1) saturate(3) brightness(1.05)}
.htile:hover,.htile:focus-visible{transform:translateY(-4px) scale(1.02);border-color:var(--gold2);box-shadow:0 0 28px rgba(212,175,55,.5);outline:none}
.hsmall{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hbtn{background:rgba(0,0,0,.82);border:1px solid var(--line);color:var(--gold);font-family:"Cinzel",Georgia,serif;letter-spacing:.06em;padding:12px 18px;border-radius:30px}
.hbtn:hover,.hbtn:focus-visible{border-color:var(--gold);box-shadow:0 0 14px rgba(212,175,55,.4);outline:none}
@media(max-width:760px){
  .home{justify-content:flex-start;padding-top:calc(24px + env(safe-area-inset-top))}
  .htiles{grid-template-columns:1fr;gap:12px}
  .htile{min-height:96px;flex-direction:row;font-size:20px}
  .htile span{font-size:34px}
  .htitle{font-size:20px}
  .hclock{font-size:22px}
  .nav[data-view="search"],.refresh{display:none}
}

/* ===== update window ===== */
#upd{position:fixed;inset:0;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:16px;z-index:70}
#upd .mbox{max-width:520px}

/* ===== keep everything inside the visible screen (status bar, nav bar, notches) ===== */
:root{
  --sat:var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --sab:var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --sal:var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
  --sar:var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
}
body{box-sizing:border-box;padding:var(--sat) var(--sar) var(--sab) var(--sal)}
#modal,#guide,#cmgr,#upd{padding:calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal))}
#toast{bottom:calc(90px + var(--sab))}
@media(max-width:760px){
  main{padding-top:0}
  #side{padding-bottom:6px}
  .home{padding-top:24px}
}

/* ===== home screen: never clip, compact when the screen is short (phone landscape) ===== */
.home{justify-content:flex-start}
.home > :first-child{margin-top:auto}
.home > :last-child{margin-bottom:auto}
@media (max-height:520px){
  .home{gap:14px;padding:12px 20px}
  .hhead img{width:44px;height:44px;border-radius:10px}
  .htitle{font-size:20px}
  .hsub{font-size:12px}
  .hclock{font-size:22px}
  .htiles{gap:12px}
  .htile{min-height:84px;flex-direction:row;gap:12px;font-size:18px;border-radius:14px}
  .htile span{font-size:30px}
  .hsmall{gap:8px}
  .hbtn{padding:8px 14px;font-size:13px}
}

/* ===== never let the whole page scroll on the player page; lists scroll on their own ===== */
html:has(#shell), html:has(#shell) body{overflow:hidden}
#side{overflow-y:auto}

/* ===== phone landscape (short screens): compact menu, player beside the channel list ===== */
@media (max-height:520px) and (min-width:761px){
  #side{width:150px;padding:10px 8px;gap:6px}
  .brand{display:none}
  .nav{padding:8px 10px;font-size:12px;gap:8px;border-radius:10px}
  .nav span{font-size:16px}
  .refresh{width:38px;height:38px;font-size:18px;margin-top:4px}
  .cats{width:180px;padding:6px}
  .cat{padding:7px 10px;font-size:13px}
  .livecol{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .livecol .player{grid-column:1;grid-row:1 / span 2;max-height:none;align-self:start}
  .livecol .bar{grid-column:2;grid-row:1;padding:6px 8px}
  .livecol .chlist{grid-column:2;grid-row:2;min-height:0}
  .engine{display:none}
  .tbtn{padding:5px 10px;font-size:12px}
  .ch{padding:6px 10px;gap:10px}
  .ch img,.ch .ph{width:44px;height:28px}
  .ch .n{font-size:14px}
  .ch .e{font-size:12px;min-height:15px}
  .gridcol{padding:8px;gap:8px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
}

/* ===== phone landscape: channel list in the middle, player top-right ===== */
@media (max-height:520px) and (min-width:761px){
  .livecol{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr)}
  .livecol .chlist{grid-column:1;grid-row:1 / span 3;min-height:0;border-right:1px solid var(--line)}
  .livecol .player{grid-column:2;grid-row:1;align-self:start;max-height:none}
  .livecol .bar{grid-column:2;grid-row:2;border-bottom:none}
}

/* ===== now / next panel (phone landscape) ===== */
.nownext{display:none}
@media (max-height:520px) and (min-width:761px){
  .nownext{display:block;grid-column:2;grid-row:3;min-height:0;overflow-y:auto;padding:10px 12px;background:rgba(0,0,0,.55);border-top:1px solid var(--line);cursor:pointer}
}
.nnch{font-family:"Cinzel",Georgia,serif;color:var(--gold2);font-size:15px;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nnlbl{font-size:11px;letter-spacing:.14em;color:var(--gold);margin-top:6px}
.nnt{font-weight:600;font-size:15px}
.nntm{font-size:12px;color:var(--muted);margin:2px 0 6px}
.nnbar{height:4px;background:rgba(212,175,55,.2);border-radius:2px;overflow:hidden;margin-bottom:8px}
.nnbar i{display:block;height:100%;background:var(--gold)}
.nnds{font-size:12px;color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.nnnext{font-weight:500;font-size:13px}

/* ===== inside a section: side menu becomes a slim top bar (tablets, TVs, desktop, phone landscape) ===== */
@media (min-width:761px){
  #shell:not(.at-home){flex-direction:column}
  #shell:not(.at-home) #side{width:auto;flex-direction:row;align-items:center;gap:8px;padding:8px 14px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;flex-shrink:0}
  #shell:not(.at-home) .brand{margin:0 10px 0 0;flex-shrink:0}
  #shell:not(.at-home) .brand img{width:30px;height:30px}
  #shell:not(.at-home) .brand b{font-size:15px;white-space:nowrap}
  #shell:not(.at-home) .nav{padding:8px 16px;font-size:13px;border-radius:24px;gap:8px;white-space:nowrap;flex-shrink:0}
  #shell:not(.at-home) .nav span{font-size:15px}
  #shell:not(.at-home) .refresh{margin:0 0 0 auto;width:36px;height:36px;font-size:18px;flex-shrink:0}
  #shell:not(.at-home) main{height:auto;flex:1;min-height:0}
}
@media (max-height:520px) and (min-width:761px){
  #shell:not(.at-home) #side{padding:5px 10px;gap:6px}
  #shell:not(.at-home) .nav{padding:6px 12px;font-size:12px}
  .cats{width:215px}
}

/* ===== catch-up ===== */
.arch{color:var(--gold);font-size:12px}
.prog.catchup{cursor:pointer;border-radius:8px}
.prog.past.catchup{opacity:.95}
.prog.catchup .pt{color:var(--gold2)}
.prog.catchup:hover,.prog.catchup:focus-visible{background:rgba(212,175,55,.12);outline:none}

/* ===== channel numbers + category counts ===== */
.chnum{flex:0 0 36px;text-align:right;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.cat{display:flex;align-items:center;gap:8px}
.cat .cnt{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:400}
.cat.active .cnt{color:var(--gold)}
@media (max-height:520px) and (min-width:761px){.chnum{flex-basis:30px;font-size:12px}}

/* ===== full TV guide grid ===== */
#v-tvguide{background:rgba(0,0,0,.6)}
.tvg{display:flex;flex-direction:column;height:100%;width:100%;min-width:0}
.tvgbar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);flex-shrink:0}
#tvgCat{font-family:"Cinzel",Georgia,serif;color:var(--gold2);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tvgscroll{flex:1;min-height:0;overflow:auto;position:relative}
.tvginner{position:relative;width:max-content}
.tvghead{display:flex;position:sticky;top:0;z-index:5;background:#000;height:34px;border-bottom:1px solid var(--line)}
.tvgcorner{position:sticky;left:0;z-index:6;flex:0 0 190px;background:#000;color:var(--muted);font-size:12px;display:flex;align-items:center;padding-left:12px;border-right:1px solid var(--line)}
.tvgticks{position:relative;height:34px;flex-shrink:0}
.tvgtick{position:absolute;top:0;height:34px;line-height:34px;padding-left:6px;border-left:1px solid var(--line);font-size:12px;color:var(--gold);white-space:nowrap}
.tvgrow{display:flex;height:58px;border-bottom:1px solid var(--line)}
.tvgch{position:sticky;left:0;z-index:4;flex:0 0 190px;display:flex;align-items:center;gap:8px;padding:0 10px;background:#050505;border-right:1px solid var(--line);border-radius:0;text-align:left;min-width:0}
.tvgch img,.tvgch .ph{width:40px;height:26px;object-fit:contain;flex-shrink:0}
.tvgch .chnum{flex:0 0 28px;font-size:12px}
.tvgname{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tvgprogs{position:relative;flex-shrink:0}
.tvgprogs .loading{padding:18px 10px;font-size:12px}
.tvgp{position:absolute;top:4px;bottom:4px;background:rgba(18,18,18,.92);border:1px solid var(--line);border-radius:8px;padding:4px 8px;text-align:left;overflow:hidden;display:flex;flex-direction:column;justify-content:center;font-weight:400}
.tvgp b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.tvgp small{font-size:11px;color:var(--muted);white-space:nowrap}
.tvgp.past{opacity:.5}
.tvgp.catchup{opacity:.9}
.tvgp.catchup b{color:var(--gold2)}
.tvgp.now{border-color:var(--gold);background:rgba(40,31,8,.95)}
.tvgp:hover,.tvgp:focus-visible{border-color:var(--gold2);box-shadow:0 0 12px rgba(212,175,55,.4);opacity:1;outline:none;z-index:2}
.tvgempty{color:var(--muted);font-size:12px;display:flex;align-items:center}
.tvgnow{position:absolute;top:0;bottom:0;width:2px;background:var(--gold2);box-shadow:0 0 8px rgba(212,175,55,.8);z-index:3;pointer-events:none}
@media(max-width:760px){
  .tvgch,.tvgcorner{flex-basis:120px}
  .tvgch img,.tvgch .ph{display:none}
}

/* ===== web audio picker + jump buttons ===== */
.vaudio{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.vaudio .albl{color:var(--gold);font-size:13px}
.vaudio .asel{width:auto;flex:1;min-width:180px;padding:6px 10px}
.vaudio .ajump{display:none;gap:6px;align-items:center;flex-wrap:wrap;width:100%}
.vaudio.relay .ajump{display:flex}
.ajpos{margin-left:auto;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}

/* ===== gold scrollbars + list loading marker ===== */
*{scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.45) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(212,175,55,.35);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(212,175,55,.6)}
.sentinel{height:1px;grid-column:1 / -1}

/* ===== home screen: fit on one phone screen in portrait ===== */
@media (max-width:760px){
  .home{gap:16px;padding:16px 16px 20px}
  .hhead{gap:10px}
  .hhead img{width:50px;height:50px;border-radius:12px}
  .htitle{font-size:18px;white-space:nowrap}
  .hsub{font-size:12px}
  .hclock{font-size:20px}
  .htiles{gap:10px}
  .htile{min-height:74px;font-size:18px;gap:12px;border-radius:14px}
  .htile span{font-size:28px}
  .hsmall{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
  .hbtn{padding:11px 8px;font-size:12px;white-space:nowrap;text-align:center}
  .hsmall .hbtn:last-child:nth-child(odd){grid-column:1 / -1}
}

/* ===== home screen: tidier phone landscape ===== */
@media (max-height:520px) and (min-width:761px){
  .home{gap:18px}
  .htile{flex-direction:column;min-height:128px;gap:8px;font-size:18px}
  .htile span{font-size:34px}
  .hsmall{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;width:100%;max-width:980px}
  .hbtn{padding:9px 6px;font-size:12px;white-space:nowrap;text-align:center;overflow:hidden;text-overflow:ellipsis}
}

/* ===== Phase A: up-next card, sleep button, expiry warning ===== */
.upnext{position:absolute;right:14px;bottom:56px;max-width:320px;background:rgba(0,0,0,.88);border:1px solid var(--gold);border-radius:12px;padding:12px 14px;box-shadow:0 0 22px rgba(212,175,55,.35);z-index:5}
.upnext .unt{font-family:"Cinzel",Georgia,serif;color:var(--gold);font-size:12px;letter-spacing:.12em}
.upnext .unn{font-weight:600;margin:4px 0 2px}
.upnext .unc{font-size:12px;color:var(--muted)}
.upnext .dbtns{margin-top:8px}
#sleepBtn.on{background:linear-gradient(180deg,#1c1505,#000);color:var(--gold2);box-shadow:0 0 16px rgba(212,175,55,.6)}
.hwarn{width:100%;max-width:980px;background:rgba(40,31,8,.9);border:1px solid var(--gold);color:var(--gold2);border-radius:12px;padding:10px 14px;font-size:14px;text-align:center}
@media (max-width:760px){.upnext{left:10px;right:10px;bottom:10px;max-width:none}}

/* ===== white-label branding + announcements ===== */
body::before{background-image:var(--bgimg, url("../img/bg.jpg"))}
.hnews{width:100%;max-width:980px;display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.85);border:1px solid var(--gold);color:var(--text);border-radius:12px;padding:10px 14px;font-size:14px;line-height:1.45}
.hnews .nclose{background:none;color:var(--muted);margin-left:auto;padding:0 6px;font-size:16px;flex-shrink:0}

/* ===== profiles ===== */
#who{position:fixed;inset:0;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:20px;z-index:75}
.whobox{text-align:center;max-width:760px;width:100%}
.whobox h2{font-family:"Cinzel",Georgia,serif;color:var(--gold2);letter-spacing:.08em;margin:0 0 22px}
.whogrid{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-bottom:22px}
.whop{width:120px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;background:#000;border:1px solid var(--line);border-radius:16px}
.whop .wav{font-size:46px;line-height:1}
.whop b{font-weight:600}
.whop small{color:var(--gold);font-size:12px}
.whop:hover,.whop:focus-visible,.whop.on{border-color:var(--gold);box-shadow:0 0 18px rgba(212,175,55,.45);outline:none}
.proflist{display:flex;flex-direction:column;gap:8px}
.profrow{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.6);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.profrow.on{border-color:var(--gold)}
.profrow .wav{font-size:24px}
.profrow b{flex:1;font-weight:500}
@media (max-width:760px){.whop{width:100px}.whop .wav{font-size:38px}}

/* ===== reminders ===== */
.tvgp.rem{border-color:var(--gold)}
.tvgp.rem::after{content:'🔔';position:absolute;top:3px;right:5px;font-size:11px}

/* sleep timer button: emoji moon, sized to match the refresh button */
#sleepBtn{font-size:18px}
#sleepBtn:not(.on){filter:saturate(.6)}

/* ===== multi-view ===== */
#v-multi{background:#000}
.mvwrap{display:flex;flex-direction:column;width:100%;height:100%;min-width:0}
.mvbar{display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid var(--line);flex-shrink:0}
.mvhint{color:var(--muted);font-size:13px}
.mvgrid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4px;padding:4px}
.mvtile{position:relative;background:#050505;border:2px solid transparent;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer;min-height:0}
.mvtile.on{border-color:var(--gold);box-shadow:0 0 14px rgba(212,175,55,.4)}
.mvtile video{width:100%;height:100%;object-fit:contain;background:#000}
.mvname{position:absolute;left:8px;bottom:6px;font-size:12px;background:rgba(0,0,0,.7);padding:2px 8px;border-radius:6px;max-width:80%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mvx{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.7);color:var(--muted);border-radius:50%;width:28px;height:28px;padding:0}
.mvadd{background:#000;border:1px dashed var(--gold);color:var(--gold2);padding:10px 16px}
#mvpick{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:16px;z-index:70}
.mvplist{max-height:60vh;overflow-y:auto;margin-top:10px}
@media (max-width:760px){.mvgrid{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:minmax(180px,1fr);overflow-y:auto}}

/* ===== phones: more compact menus so everything fits (incl. Multi, refresh, sleep) ===== */
@media (max-height:520px) and (min-width:761px){
  #shell:not(.at-home) #side{padding:4px 8px;gap:5px}
  #shell:not(.at-home) .nav{padding:5px 10px;font-size:10.5px;letter-spacing:.05em;gap:6px}
  #shell:not(.at-home) .nav span{font-size:13px}
  #shell:not(.at-home) .refresh{width:30px;height:30px;font-size:15px}
  .cats{width:190px}
  .cat{font-size:12px;padding:6px 8px}
  .ch .n{font-size:13px}
  .ch .e{font-size:11px}
  .livecol .bar{flex-wrap:wrap;row-gap:6px;padding:6px 8px}
  .livecol .bar .tbtn{padding:4px 9px;font-size:11px}
  .livecol .bar input{flex:1 1 100%;padding:6px 10px;font-size:13px}
}
@media (max-width:760px){
  .bar{flex-wrap:wrap;row-gap:6px}
  .bar .tbtn{padding:5px 10px;font-size:12px}
  .bar input{flex:1 1 100%}
}

/* ===== sort menu ===== */
.sortSel{background:rgba(0,0,0,.6);color:var(--gold2);border:1px solid var(--gold);border-radius:10px;padding:8px 10px;font:inherit;margin:8px 0 0;max-width:100%}

/* ===== clear remote highlight on rebranded services ===== */
html[style*="--gold"] :focus-visible{outline:3px solid #fff!important;outline-offset:1px!important;box-shadow:0 0 0 5px var(--gold2),0 0 20px var(--gold2)!important}
html[style*="--gold"] .ch:focus-visible,html[style*="--gold"] .cat:focus-visible,html[style*="--gold"] .ep:focus-visible{outline:none!important;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 6px var(--gold2)!important}

/* ===== Continue Watching row on Home ===== */
.hcw{margin:18px 0 8px}
.hcwt{font-family:Cinzel,serif;color:var(--gold2);font-size:1.05rem;margin:0 0 10px;letter-spacing:.5px}
.hcwrow{display:flex;gap:12px;overflow-x:auto;padding:4px 4px 12px;scroll-snap-type:x proximity}
.hcwrow .poster{flex:0 0 130px;scroll-snap-align:start}
@media (min-width:900px){.hcwrow .poster{flex-basis:150px}}

/* ===== sync status ===== */
.syncstat{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:12px 0;color:var(--gold2)}

/* ===== compact home: phones in landscape (short screens) ===== */
@media (max-height: 520px) {
  .home{padding-top:4px!important;padding-bottom:4px!important}
  .hhead{margin-bottom:8px!important;gap:12px!important}
  .hhead img{width:42px!important;height:42px!important}
  .htitle{font-size:1.25rem!important;line-height:1.2!important}
  .hsub{font-size:.8rem!important}
  .hclock{font-size:1.5rem!important}
  .htiles{gap:10px!important;margin-bottom:6px!important}
  .htile{min-height:0!important;height:auto!important;padding:10px 8px!important;font-size:1rem!important}
  .htile span{font-size:1.7rem!important;margin-bottom:2px!important;display:block}
  .hcw{margin:6px 0 4px!important}
  .hcwt{font-size:.85rem!important;margin-bottom:6px!important}
  .hcwrow{gap:8px!important;padding-bottom:6px!important}
  .hcwrow .poster{flex:0 0 76px!important}
  .hcwrow .poster div{font-size:.7rem!important;line-height:1.2!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hsmall{gap:6px!important;margin-top:4px!important}
  .hbtn{padding:6px 10px!important;font-size:.8rem!important}
}

/* ===== compact home: phones in portrait (narrow screens) ===== */
@media (max-width: 600px) {
  .hhead{gap:10px!important;margin-bottom:10px!important}
  .hhead img{width:46px!important;height:46px!important}
  .htitle{font-size:1.3rem!important;line-height:1.2!important}
  .hsub{font-size:.78rem!important}
  .hclock{font-size:1.3rem!important}
  .htiles{gap:8px!important;margin-bottom:6px!important}
  .htile{min-height:0!important;height:auto!important;padding:12px 6px!important;font-size:.9rem!important}
  .htile span{font-size:1.8rem!important;margin-bottom:2px!important;display:block}
  .hcw{margin:8px 0 4px!important}
  .hcwt{font-size:.9rem!important;margin-bottom:6px!important}
  .hcwrow{gap:8px!important}
  .hcwrow .poster{flex:0 0 92px!important}
  .hcwrow .poster div{font-size:.72rem!important;line-height:1.2!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hsmall{gap:6px!important;flex-wrap:wrap!important}
  .hbtn{padding:7px 10px!important;font-size:.8rem!important}
}

/* ===== strict CW row sizing (same size cards on every device) ===== */
.hcwrow{align-items:flex-start!important;max-width:100%!important}
.hcwrow .poster{width:130px!important;min-width:0!important;max-width:130px!important;overflow:hidden}
.hcwrow .poster img{width:100%!important;height:auto!important;aspect-ratio:2/3!important}
.home{max-width:100%;overflow-x:hidden}
@media (min-width:900px){.hcwrow .poster{width:150px!important;max-width:150px!important}}
@media (max-width:600px){.hcwrow .poster{width:92px!important;max-width:92px!important}}
@media (max-height:520px){.hcwrow .poster{width:76px!important;max-width:76px!important}}

/* ===== landscape home v2: everything on one screen ===== */
@media (max-height: 520px) {
  .home{gap:6px!important;justify-content:flex-start!important;min-height:0!important;height:auto!important;padding-top:2px!important}
  .hhead{margin-bottom:2px!important}
  .htiles{gap:8px!important;margin:0!important}
  .htile{height:58px!important;min-height:0!important;padding:0 10px!important;display:flex!important;flex-direction:row!important;
         align-items:center!important;justify-content:center!important;gap:12px!important;font-size:1rem!important}
  .htile span{font-size:1.5rem!important;margin:0!important;display:inline-block!important}
  .hcw{margin:2px 0 0!important}
  .hcwt{font-size:.8rem!important;margin:0 0 4px!important}
  .hcwrow{padding:2px 4px 2px!important}
  .hcwrow .poster{flex:0 0 64px!important;width:64px!important;max-width:64px!important}
  .hsmall{margin-top:4px!important;gap:6px!important}
  .hbtn{padding:5px 10px!important;font-size:.78rem!important}
}

/* ===== landscape home v3: tighter ===== */
@media (max-height: 520px) {
  .home{gap:4px!important}
  .hhead{gap:10px!important}
  .hhead img{width:34px!important;height:34px!important}
  .htitle{font-size:1.05rem!important}
  .hsub{font-size:.7rem!important}
  .hclock{font-size:1.15rem!important}
  .htile{height:46px!important;font-size:.9rem!important}
  .htile span{font-size:1.25rem!important}
  .hcwt{font-size:.75rem!important;margin:0 0 3px!important}
  .hcwrow .poster{flex:0 0 56px!important;width:56px!important;max-width:56px!important}
  .hcwrow .poster div{display:none!important}
  .hbtn{padding:4px 9px!important;font-size:.72rem!important}
}

/* ===== home v4: CW row starts at the left, no scroll bar on Home ===== */
.hcw{align-self:stretch!important;width:100%!important;max-width:100%!important;min-width:0!important;text-align:left!important}
.hcwrow{min-width:0!important;width:100%!important;justify-content:flex-start!important}
#shell.at-home main,#v-home,.home{scrollbar-width:none}
#shell.at-home main::-webkit-scrollbar,#v-home::-webkit-scrollbar,.home::-webkit-scrollbar{display:none;width:0;height:0}
.hcwrow{scrollbar-width:none}
.hcwrow::-webkit-scrollbar{display:none}
@media (max-height: 520px) {
  .home{gap:3px!important;padding-bottom:0!important}
  .hhead img{width:30px!important;height:30px!important}
  .htitle{font-size:.95rem!important}
  .hclock{font-size:1.05rem!important}
  .htile{height:40px!important}
  .hcwrow .poster{flex:0 0 50px!important;width:50px!important;max-width:50px!important}
  .hsmall{margin-top:2px!important}
  .hbtn{padding:3px 8px!important}
}

/* ===== TV three-column Live TV (Firestick and other wide screens) ===== */
@media (min-width: 761px) and (orientation: landscape) {
  .livecol{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)!important;grid-template-rows:auto auto minmax(0,1fr)!important}
  .livecol .chlist{grid-column:1!important;grid-row:1 / span 3!important;min-height:0!important;border-right:1px solid var(--line)}
  .livecol .player{grid-column:2!important;grid-row:1!important;align-self:start!important;max-height:none!important}
  .livecol .bar{grid-column:2!important;grid-row:2!important;border-bottom:none}
  .livecol > *:not(.player):not(.bar):not(.chlist){grid-column:2!important}
}

/* ===== Firestick home (TVs showing about 960x540) ===== */
@media (min-height: 521px) and (max-height: 620px) and (orientation: landscape) {
  .home{gap:8px!important;justify-content:flex-start!important;min-height:0!important;height:auto!important;padding-top:6px!important}
  .hhead{margin-bottom:4px!important;gap:12px!important}
  .hhead img{width:48px!important;height:48px!important}
  .htitle{font-size:1.4rem!important}
  .hsub{font-size:.8rem!important}
  .hclock{font-size:1.6rem!important}
  .htiles{gap:12px!important;margin:0!important}
  .htile{height:100px!important;min-height:0!important;padding:8px!important;display:flex!important;flex-direction:column!important;
         align-items:center!important;justify-content:center!important;gap:6px!important;font-size:1.1rem!important}
  .htile span{font-size:2rem!important;margin:0!important}
  .hcw{margin:4px 0 0!important}
  .hcwt{font-size:.85rem!important;margin:0 0 6px!important}
  .hcwrow .poster{flex:0 0 96px!important;width:96px!important;max-width:96px!important}
  .hcwrow .poster div{font-size:.72rem!important;line-height:1.2!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hsmall{margin-top:6px!important;gap:8px!important;flex-wrap:nowrap!important}
  .hbtn{padding:6px 12px!important;font-size:.85rem!important}
}

/* ===== compact live player: phones upright ===== */
@media (orientation: portrait) and (max-width: 760px) {
  .livecol .player{flex:0 0 auto!important;width:100%!important;height:auto!important;aspect-ratio:16/9;max-height:30vh!important}
  .livecol .player video{width:100%!important;height:100%!important;max-height:30vh!important;object-fit:contain}
  .livecol .bar{row-gap:6px!important;padding-top:6px!important;padding-bottom:6px!important}
}

/* ===== own full-screen for web players ===== */
.player:not(.vfs){position:relative}
.vfsbtn{position:absolute;top:8px;right:8px;z-index:6;background:rgba(0,0,0,.6);color:#fff;border:1px solid var(--gold);
        border-radius:8px;padding:4px 10px;font-size:18px;line-height:1.2;cursor:pointer}
.player.vfs{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100vw!important;
            height:100vh!important;max-height:none!important;aspect-ratio:auto!important;z-index:9999!important;background:#000!important;margin:0!important}
.player.vfs video{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important}
body.vfs-on{overflow:hidden}

/* ===== old-engine compatibility (auto-generated) ===== */
#modal{top:0;right:0;bottom:0;left:0}
body::before{top:0;right:0;bottom:0;left:0}
body::after{top:0;right:0;bottom:0;left:0}
#guide{top:0;right:0;bottom:0;left:0}
#cmgr{top:0;right:0;bottom:0;left:0}
#upd{top:0;right:0;bottom:0;left:0}
#who{top:0;right:0;bottom:0;left:0}
#mvpick{top:0;right:0;bottom:0;left:0}
html.old-engine :focus{outline:3px solid #fff!important;outline-offset:1px!important;box-shadow:0 0 0 5px var(--gold2,#f6d77b),0 0 20px var(--gold2,#f6d77b)!important}
html.old-engine .ch:focus,html.old-engine .cat:focus,html.old-engine .ep:focus{outline:none!important;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 6px var(--gold2,#f6d77b)!important}
html.old-engine input:focus,html.old-engine select:focus{outline:2px solid var(--gold2,#f6d77b)!important;box-shadow:none!important}