:root{
  --bg:#0e1014;--panel:#171a21;--panel2:#1e222b;--line:#272c36;--text:#eef0f4;--muted:#8d95a3;
  --accent:#f5a524;--on-accent:#141414;--err:#ff6b6b;--shadow:0 8px 24px rgba(0,0,0,.45);
  --header-h:60px;--side-w:240px;--radius:10px
}
@media (prefers-color-scheme:light){
  :root{--bg:#f3f4f7;--panel:#fff;--panel2:#f0f1f5;--line:#e1e4ea;--text:#171a20;--muted:#667085;--accent:#c77700;--on-accent:#fff;--err:#c0392b;--shadow:0 8px 24px rgba(20,25,40,.15)}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
input,select{font:inherit}

/* Login */
.login{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,1fr);align-items:center}
/* The poster is 500x750 with a near-white background: full height on the right, the rest filled with its colour. */
.login-art{align-self:stretch;min-height:100vh;min-height:100dvh;background:#fffffd url(login-bg.jpg) right top/auto 100% no-repeat;position:relative}
.login-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 70%,var(--bg))}
.login .card{justify-self:center;margin:24px}
@media (max-width:899px){
  .login{grid-template-columns:1fr;align-items:start}
  .login-art{min-height:0;height:46vh;height:46dvh;background-size:cover;background-position:72% 8%}
  .login-art::after{background:linear-gradient(180deg,transparent 55%,var(--bg))}
  .login .card{margin:-56px 16px 24px;position:relative;width:auto;max-width:420px;justify-self:stretch}
}
@media (max-width:899px) and (min-width:460px){.login .card{justify-self:center;width:100%}}
.card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;display:grid;gap:14px;box-shadow:var(--shadow)}
.cardtop{display:flex;justify-content:space-between;align-items:center;gap:12px}
.card h1{margin:0;font-size:28px;color:var(--accent)}
label{display:grid;gap:4px;font-size:13px;color:var(--muted)}
input{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:11px 12px;font-size:16px;width:100%}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:0}
.check{display:flex;align-items:center;gap:8px}.check input{width:auto}
.btn{background:var(--accent);color:var(--on-accent);border:0;border-radius:8px;padding:12px;font-weight:600;font-size:16px;cursor:pointer}
.btn:disabled{opacity:.6}
.err{color:var(--err);margin:0;min-height:1.2em;font-size:13px}
.muted{color:var(--muted);margin:0}
select.lang{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:7px 8px;font-size:14px}

/* Header */
.top{position:sticky;top:0;z-index:10;height:var(--header-h);display:flex;gap:12px;align-items:center;padding:0 16px;background:var(--bg);border-bottom:1px solid var(--line)}
.logo{color:var(--accent);font-weight:800;font-size:21px;text-decoration:none;flex:none;width:calc(var(--side-w) - 28px)}
.search{flex:1;min-width:0;max-width:560px;background:var(--panel);padding:9px 14px;border-radius:999px}
.top .lang{margin-left:auto}
.link{background:none;border:0;color:var(--muted);cursor:pointer;font-size:14px;padding:6px;flex:none}
.link:hover{color:var(--text)}

/* Layout: sidebar + full-width grid */
.layout{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr)}
.cats{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));overflow-y:auto;padding:12px 8px 24px;border-right:1px solid var(--line);scrollbar-width:thin}
.cat{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:8px 12px;cursor:pointer;font-size:14px;color:var(--text)}
.cat:hover{background:var(--panel)}
.cat.on{background:var(--accent);color:var(--on-accent);font-weight:600}
.cat-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-count{font-size:12px;color:var(--muted);flex:none}
.cat.on .cat-count{color:inherit;opacity:.75}
.kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:3px;margin:0 4px 12px}
.kind{display:flex;justify-content:center;align-items:center;min-width:0;background:none;border:0;border-radius:7px;padding:8px 2px;cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kind.on{background:var(--accent);color:var(--on-accent)}
.kind.on .cat-count{color:inherit;opacity:.75}
main{padding:16px 20px 48px;min-width:0}
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.cattile{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:72px;padding:14px 16px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;font-size:15px;font-weight:600;transition:border-color .15s,transform .15s}
.cattile-name{overflow:hidden;text-overflow:ellipsis}
@media (hover:hover){.cattile:hover{border-color:var(--accent);transform:translateY(-2px)}}
.seasons{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.seasons .cat{width:auto;border:1px solid var(--line);background:var(--panel2);border-radius:999px;padding:6px 12px}
.episodes{display:grid;gap:4px;margin:0 -4px;padding:0 4px}
.ep{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:9px 10px;cursor:pointer;font-size:14px}
.ep:hover{background:var(--panel2)}
.ep.on{background:var(--panel2);box-shadow:inset 3px 0 0 var(--accent)}
.ep-num{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.ep-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-dur{color:var(--muted);font-size:12px}
.head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.sort-control{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-left:auto;max-width:100%;color:var(--text);font-size:15px;font-weight:600}
.sort-control select{min-height:40px;max-width:100%;padding:8px 12px;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;font-size:15px;font-weight:600}
.sort-control option{background:var(--panel2);color:var(--text)}
.head h2{margin:0;font-size:22px;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px 14px}
.film{display:block;width:100%;cursor:pointer;background:none;border:0;padding:0;text-align:left}
.poster{aspect-ratio:2/3;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);position:relative;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.poster img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .25s}
.poster img[src]{opacity:1}
.channel-card .poster{aspect-ratio:16/9}
.channel-card .poster img{object-fit:contain;padding:12px}
.noposter{position:absolute;inset:0;display:grid;place-items:center;font-size:40px;font-weight:700;color:var(--muted)}
.rate{position:absolute;left:6px;top:6px;background:rgba(0,0,0,.72);color:#fff;border-radius:6px;padding:1px 6px;font-size:12px}
.film-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:7px;font-size:13px;line-height:1.3}
@media (hover:hover){.film:hover .poster{transform:translateY(-3px);box-shadow:var(--shadow)}}
.film:focus-visible{outline:none}.film:focus-visible .poster{outline:2px solid var(--accent);outline-offset:2px}
.sentinel{height:1px}
.load-more{padding-top:20px;text-align:center}
.empty{color:var(--muted);padding:48px 0;text-align:center}

/* Film sheet */
/* The sheet always fits the window height: the video is capped and the details scroll inside the sheet. */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:20;display:flex;align-items:center;justify-content:center;padding:24px 16px;overscroll-behavior:contain}
.sheet{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;max-width:960px;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);background:var(--panel);border-radius:14px;border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow)}
.player{flex:none;position:relative}
.info{flex:1 1 auto;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;overflow-wrap:anywhere;align-content:start}
.close{position:absolute;right:10px;top:10px;z-index:2;background:rgba(0,0,0,.6);color:#fff;border:0;border-radius:50%;width:38px;height:38px;font-size:24px;line-height:1;cursor:pointer}
.player video{width:100%;max-height:60vh;max-height:60dvh;background:#000;display:block}
.fullscreen{position:absolute;top:10px;right:58px;z-index:3;width:38px;height:38px;border:0;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:25px;line-height:1;cursor:pointer}
.fullscreen:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.player video:fullscreen{width:100vw;height:100vh;max-height:none;object-fit:contain}
.player video:-webkit-full-screen{width:100vw;height:100vh;max-height:none;object-fit:contain}
.info{padding:18px 20px 22px;display:grid;gap:10px}
.info h3{margin:0;font-size:24px;padding-right:44px}
.meta{color:var(--muted);font-size:13px;margin:0}
.info p{margin:0}
.info .btn{justify-self:start;padding:11px 26px}
.pmsg{padding:10px 20px;color:var(--err);font-size:14px;overflow-wrap:anywhere}

@media (min-width:1500px){.grid{grid-template-columns:repeat(auto-fill,minmax(185px,1fr))}}

/* Tablets and phones: categories become a chip bar under the header */
@media (max-width:899px){
  :root{--header-h:108px}
  .top{flex-wrap:wrap;height:var(--header-h);align-content:center;row-gap:8px;padding:0 12px}
  .logo{width:auto}
  .search{order:5;flex:1 1 100%;max-width:none}
  .layout{display:block}
  .cats{display:flex;gap:8px;height:auto;overflow-x:auto;overflow-y:hidden;padding:10px 12px;border-right:0;border-bottom:1px solid var(--line);background:var(--bg);z-index:9;scrollbar-width:none}
  .cats::-webkit-scrollbar{display:none}
  .cat{flex:none;width:auto;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 12px}
  .cat.on{border-color:var(--accent)}
  .kinds{flex:none;display:flex;margin:0 4px 0 0;padding:2px}
  .kind{padding:5px 12px;border-radius:999px}
  .catgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .cattile{min-height:60px;padding:12px;font-size:14px}
  .episodes{max-height:none}
  main{padding:12px 12px 40px}
  .head h2{font-size:19px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px 10px}
}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}
  .film-title{font-size:12px}
  .rate{font-size:11px;padding:0 5px}
  .modal{padding:0;align-items:stretch}
  .sheet{border-radius:0;border:0;height:100%;min-height:0;max-height:100%}
  .info{padding:16px}
  .info h3{font-size:20px}
  .info .btn{justify-self:stretch;text-align:center}
}
@media (max-width:340px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Explicit Live controls: live delivery has no finite programme duration. */
.live-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 12px;background:#14171d;color:#fff}
.live-controls button{border:1px solid #626b78;background:#202631;color:#fff;border-radius:6px;min-height:36px;padding:6px 10px;cursor:pointer}
.live-controls button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.live-badge{font-weight:700;white-space:nowrap}
.live-badge::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#ef4545;margin-right:6px}
.live-delay{font-size:12px;color:#d1d7e0}
#liveMute{margin-left:auto}
.player:fullscreen{display:flex;flex-direction:column;justify-content:center;background:#000;width:100vw;height:100vh}
.player:fullscreen video{max-height:calc(100vh - 110px);object-fit:contain}
@media(max-width:430px){.live-controls{gap:6px;padding:7px}.live-controls button{font-size:12px}.live-delay{flex-basis:100%;order:5}}

.channel-programmes{display:flex;flex-direction:column;gap:3px;color:var(--muted);font-size:12px;padding:0 10px 10px;text-align:left}
.channel-programmes span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.guide-pane{margin-top:20px;border-top:1px solid var(--line);padding-top:16px;min-width:0}.guide-pane h4{font-size:18px;margin:0 0 10px}
.guide-days{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.guide-days button,.guide-watch,.archive-controls button{border:1px solid var(--line);border-radius:7px;background:var(--panel2);color:var(--text);padding:8px 10px;cursor:pointer;min-height:38px}
.guide-days input{min-width:0;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--text);padding:8px;font:inherit;color-scheme:dark light}
.guide-pane button:focus-visible,.guide-pane input:focus-visible,.archive-controls button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.guide-pane button:disabled{opacity:.65;cursor:default}.guide-zone{margin:8px 0;font-size:12px}.guide-status:empty{display:none}
.guide-list{max-height:420px;overflow:auto;position:relative;overscroll-behavior:contain}
.guide-row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:12px;padding:12px 6px;border-bottom:1px solid var(--line);align-items:start}
.guide-row.is-current{border-left:3px solid var(--accent);padding-left:9px;background:var(--panel2)}
.guide-time{font-size:13px;white-space:nowrap}.guide-time small{display:block;color:var(--accent);font-weight:700}
.guide-programme{min-width:0}.guide-programme strong{overflow-wrap:anywhere}.guide-programme p{margin:5px 0 0;font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.guide-watch{font-size:12px;max-width:160px}
.archive-controls{display:flex;flex-wrap:wrap;align-items:center;gap:7px 12px;padding:10px 12px;background:var(--panel);color:var(--text)}
.archive-controls strong{flex-basis:100%;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.archive-controls span{font-size:13px}.archive-controls button{margin-left:auto}
body.has-miniplayer main{padding-bottom:440px}.modal.is-docked.has-details .info{padding-bottom:440px}
@media(max-width:540px){.guide-row{grid-template-columns:76px minmax(0,1fr);gap:7px}.guide-time{font-size:11px}.guide-watch{grid-column:2;justify-self:start}.guide-days{gap:5px}.guide-days button{padding:6px 8px}.guide-days input{max-width:155px}.guide-list{max-height:50vh}}

/* V2 continuous recording state; metadata updates never control source boundaries. */
#archiveMode{font-weight:700;color:var(--accent)}
#archiveStatus{flex-basis:100%;font-size:13px;color:var(--muted)}
#archiveStatus:empty{display:none}
#archiveTimelineNotice{flex-basis:100%;font-size:12px;color:var(--muted)}
#archiveRetry{margin-left:0}