:root{--bg:#1d1d26;--bg2:#272733;--bg3:#34344a;--ac:#ffeb3b;--tx:#fff;--dim:#9a9aae}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:clamp(13px,1.25vw,24px)}
body{background:var(--bg);color:var(--tx);font-family:"LG Smart UI","Segoe UI",Roboto,Helvetica,Arial,sans-serif;width:100vw;height:100vh;overflow:hidden;font-size:1rem}
svg.ic{width:1.1em;height:1.1em;fill:currentColor;vertical-align:-.2em}
::-webkit-scrollbar{display:none}
#top{position:fixed;top:0;left:0;right:0;height:3.2rem;display:flex;align-items:center;padding:0 2rem;z-index:5}
.brand{font-size:1.15rem;display:flex;align-items:center;position:absolute;left:50%;top:0;height:100%;transform:translateX(-50%);white-space:nowrap}
.brand b{color:var(--ac);margin-left:.35rem}
.brand small{font-size:.7rem;opacity:.55;margin-left:.6rem}
.logo{width:1.9rem;height:1.9rem;margin-right:.6rem;flex:none;display:block}
.mark{width:1.7rem;height:1.7rem;border-radius:.4rem;background:var(--ac);margin-right:.7rem;display:flex;align-items:center;justify-content:center}
.mark svg{width:1.2rem;height:1.2rem;fill:#1d1d26}
#status{flex:none;margin-left:auto;max-width:32%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;padding-right:1.5rem;font-size:.8rem;color:var(--dim)}
#status.err{color:#ff8a80}#status.ok{color:#a5d6a7}
#clock{font-size:1.1rem}
#screen{position:absolute;top:3.4rem;left:0;right:0;bottom:0;padding:.4rem 2rem 1.2rem}
#toast{position:fixed;left:50%;bottom:3rem;transform:translateX(-50%);background:rgba(0,0,0,.8);border:1px solid var(--ac);padding:.7rem 1.5rem;border-radius:2rem;z-index:99;font-size:.9rem}
.f{outline:none;cursor:pointer}
.empty{color:var(--dim);padding:3rem;text-align:center;font-size:1.1rem;line-height:1.7}
.dim{color:var(--dim)}
.err{color:#ff8a80;margin-top:1rem}

/* home */
.home{height:100%;display:flex;flex-direction:column;justify-content:center}
.home h1{font-size:1.6rem;font-weight:400;margin-bottom:.4rem}
.home .sub{color:var(--dim);margin-bottom:2rem}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:1.2rem}
.tile{background:var(--bg2);border-radius:.8rem;padding:1.6rem 1.8rem;display:flex;align-items:center;transition:transform .12s}
.tile svg.ic{width:2.6rem;height:2.6rem;margin-right:1.2rem;color:var(--ac)}
.tile b{display:block;font-size:1.2rem;font-weight:500}
.tile small{color:var(--dim);font-size:.8rem}
.tile:focus,.tile:hover{background:var(--ac);color:#111;transform:scale(1.04)}
.tile:focus svg.ic,.tile:hover svg.ic,.tile:focus small,.tile:hover small{color:#111}

/* browser */
.cols{display:flex;height:100%}
.col{display:flex;flex-direction:column;min-height:0}
.cats{width:19%;overflow-y:auto}
.cat{flex-shrink:0;padding:.55rem .9rem;border-radius:.4rem;margin-bottom:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.9rem;display:flex}
.cat span{flex:1;overflow:hidden;text-overflow:ellipsis}.cat em{font-style:normal;color:var(--dim);margin-left:.5rem}
.cat.sel{border-left:.25rem solid var(--ac);background:var(--bg2)}
.cat:focus,.cat:hover{background:var(--ac);color:#111}.cat:focus em,.cat:hover em{color:#333}
.main{flex:1;margin:0 1rem;min-width:0}
.bar{display:flex;align-items:center;margin-bottom:.6rem}
.bar input{flex:1;margin-right:1rem}
.cnt{color:var(--dim);font-size:.8rem}
input{background:var(--bg2);border:2px solid transparent;color:#fff;font-size:1rem;padding:.6rem .9rem;border-radius:.4rem;font-family:inherit;width:100%}
input:focus{border-color:var(--ac);outline:none}
.host{flex:1;min-height:0;position:relative}
.items,.grid{position:absolute;top:0;left:0;right:0;bottom:0;overflow-y:auto}
.item{display:flex;align-items:center;padding:.4rem .8rem;margin-bottom:.22rem;border-radius:.4rem;background:var(--bg2)}
.item .logo{width:3rem;height:2rem;object-fit:contain;margin-right:.7rem}
.item .num{width:2.6rem;color:var(--dim);font-size:.85rem}
.item .meta{flex:1;min-width:0}
.item b,.item small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}
.item small{color:var(--dim);font-size:.75rem;margin-top:.1rem}
.item .bd{margin-left:.6rem;white-space:nowrap}
.item .bd svg{margin-left:.4rem;color:var(--ac)}
.item .fv{display:none;font-style:normal}.item.fav .fv{display:inline}
.item:focus,.item:hover{background:var(--ac);color:#111}
.item:focus small,.item:hover small,.item:focus .num,.item:hover .num{color:#333}
.item:focus .bd svg,.item:hover .bd svg{color:#111}
.side{width:29%;background:var(--bg2);border-radius:.6rem;padding:1.2rem;overflow:hidden;position:relative}
.side .biglogo{max-width:6rem;max-height:3.5rem;display:block;margin-bottom:.6rem}
.side h2{font-size:1.2rem;font-weight:500;margin-bottom:.8rem}
.side h3{font-size:1rem;font-weight:500;margin:.3rem 0}
.side p{font-size:.8rem;color:var(--dim);line-height:1.4;max-height:13.44rem;overflow:hidden;margin-top:.4rem}
.tag{background:var(--ac);color:#111;font-size:.65rem;font-weight:700;padding:.1rem .4rem;border-radius:.2rem;margin-right:.3rem}
.pbar,.ibar{height:.3rem;background:rgba(255,255,255,.2);border-radius:.2rem;overflow:hidden;margin:.4rem 0}
.pbar i,.ibar i{display:block;height:100%;background:var(--ac);width:0}
.next{font-size:.85rem;margin-top:.8rem;color:var(--dim)}
.chip{display:inline-block;margin-top:.8rem;border:1px solid var(--ac);color:var(--ac);border-radius:1rem;padding:.15rem .7rem;font-size:.75rem}
.hint{position:absolute;bottom:1rem;left:1.2rem;right:1.2rem;font-size:.7rem;color:var(--dim)}

/* poster grid */
.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-gap:1rem;align-content:start;padding:.4rem}
.card{border-radius:.4rem;min-width:0;overflow:visible}
.card .poster{width:100%;height:0;padding-top:150%;background-size:cover;background-position:center;background-color:var(--bg3);border-radius:.4rem;position:relative}
.card .star{position:absolute;top:.4rem;right:.4rem;color:var(--ac);display:none}.card.fav .star{display:block}
.card .cap{font-size:.75rem;margin-top:.35rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card:focus .poster,.card:hover .poster{box-shadow:0 0 0 .22rem var(--ac)}
.card:focus .cap,.card:hover .cap{color:var(--ac)}

/* guide */
.gl{width:34%}
.gr{flex:1;margin-left:1.2rem}
.btn{display:inline-block;background:var(--bg2);border-radius:.4rem;padding:.65rem 1.2rem;margin:0 .6rem .5rem 0;font-size:.95rem}
.btn.pri{background:var(--ac);color:#111}
.btn:focus,.btn:hover{background:#fff;color:#111;box-shadow:0 0 0 .2rem var(--ac)}
.phead{font-size:1.2rem;margin:.2rem 0 .6rem;min-height:1.6rem}
.phead .chip{margin:0 0 0 .8rem;font-size:.7rem}
.plist{flex:1;min-height:0;overflow-y:auto;position:relative}
.day{color:var(--ac);font-size:.8rem;padding:.7rem .3rem .3rem;text-transform:uppercase;letter-spacing:.05em}
.prog{display:flex;align-items:center;padding:.5rem .8rem;margin-bottom:.2rem;background:var(--bg2);border-radius:.4rem}
.prog .t{width:7.5rem;color:var(--dim);font-size:.85rem}
.prog .n{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog .tg{font-size:.7rem;color:var(--ac);margin-left:.8rem;white-space:nowrap}
.prog.live{border-left:.25rem solid var(--ac)}
.prog.past:not(.cu){opacity:.45}
.prog:focus,.prog:hover{background:var(--ac);color:#111}
.prog:focus .t,.prog:hover .t,.prog:focus .tg,.prog:hover .tg{color:#222}
.pdesc{height:7.22rem;overflow:hidden;font-size:.8rem;color:var(--dim);line-height:1.4;padding-top:.5rem}
.pdesc b{color:#fff;font-weight:500}

/* lists / forms / settings */
.page{max-width:60rem;margin:0 auto;height:100%;overflow-y:auto;padding:.5rem}
.page h1{font-size:1.5rem;font-weight:400;margin-bottom:1.2rem}
.page h2{font-size:1.1rem;font-weight:400;color:var(--ac);margin:1.2rem 0 .6rem}
.row{display:flex;align-items:center;background:var(--bg2);border-radius:.5rem;padding:.9rem 1.2rem;margin-bottom:.4rem}
.row .l{flex:1;min-width:0}.row .l small{display:block;color:var(--dim);font-size:.75rem;margin-top:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .v{color:var(--ac)}
.row.act .l b:before{content:"";display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--ac);margin-right:.7rem}
.row b{font-weight:400}
.row:focus,.row:hover{background:var(--ac);color:#111}.row:focus .v,.row:hover .v,.row:focus small,.row:hover small{color:#222}
.form label{display:block;color:var(--dim);font-size:.8rem;margin:1rem 0 .3rem}
.btns{margin-top:1.6rem}
.frow{display:flex;align-items:center}.frow input{flex:1;min-width:0}.frow .btn.eye{flex:none;margin:0 0 0 .6rem;min-width:5.5rem;text-align:center}

/* player */
body.playing #screen,body.playing #top{visibility:hidden}
#player{position:fixed;left:0;top:0;right:0;bottom:0;background:#000;z-index:50}
#video{width:100%;height:100%;background:#000;object-fit:contain}
#subimg{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
/* status message + spinner live in one centred column so they can never overlap or drift apart */
#pstat{position:absolute;left:0;right:0;top:0;bottom:7rem;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 4rem;pointer-events:none}
#spin{flex:none;width:3.5rem;height:3.5rem;border:.35rem solid rgba(255,255,255,.2);border-top-color:var(--ac);border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
#perr{flex:none;max-width:80%;margin-bottom:1.4rem;text-align:center;font-size:1.3rem;line-height:1.35;text-shadow:0 0 .5rem #000}
#spin[hidden],#perr[hidden]{display:none}
#info{position:absolute;left:0;right:0;bottom:0;padding:5rem 3rem 1.6rem;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.88));opacity:0;transition:opacity .25s;pointer-events:none}
#info.show{opacity:1;pointer-events:auto}
.ih{display:flex;align-items:center}
#ilogo{width:4.5rem;height:3rem;object-fit:contain;margin-right:1rem}
#ititle{font-size:1.5rem}#isub{color:#ddd;font-size:1rem;margin-top:.2rem}
.ibar{height:.4rem;margin:.8rem 0 .3rem}
.irow{display:flex;justify-content:space-between;font-size:.85rem;color:#ccc}
#inext{color:#aaa;font-size:.85rem;margin-top:.3rem;min-height:1.2rem}
.ibtns{margin-top:.7rem}
.ibtns button{background:rgba(255,255,255,.15);border:0;color:#fff;padding:.5rem 1rem;border-radius:.3rem;font-size:.8rem;margin-right:.5rem;font-family:inherit;cursor:pointer}
.ibtns button:hover{background:var(--ac);color:#111}
.ihint{color:#888;font-size:.7rem;margin-top:.7rem}

/* details */
.dinfo{display:flex;gap:1.2rem;margin-bottom:.8rem}
.dposter{flex:none;width:9rem;height:13.5rem;border-radius:.5rem;background:var(--bg2) center/cover no-repeat}
.dinfo.big .dposter{width:15rem;height:22.5rem}
.sinfo .dposter{width:6rem;height:9rem}
.dbody{flex:1;min-width:0}
.dbody h1{margin:.1rem 0 .5rem;font-size:1.9rem}
.dbody h2{margin:.1rem 0 .3rem;font-size:1.4rem}
.dmeta{color:var(--ac);font-size:.85rem;margin-bottom:.6rem}
.dplot{font-size:.9rem;line-height:1.5;color:#ddd;max-height:5.4rem;overflow:hidden}
.dinfo.big .dplot{max-height:10.5rem;font-size:1rem}
.dcred{font-size:.8rem;color:var(--dim);margin-top:.6rem;line-height:1.5}
.dcred b{color:#fff;font-weight:500}
.ddiag{font-size:.7rem;color:var(--dim);margin-top:.9rem;line-height:1.4;word-break:break-word}
.btn.fav{box-shadow:inset 0 0 0 .12rem var(--ac)}
.col.main .host{flex:1;min-height:0;overflow-y:auto}

/* subtitles */
#video::cue{background:rgba(0,0,0,.72);color:#fff;font-family:inherit;line-height:1.25}
#video.sz-small::cue{font-size:75%}
#video.sz-medium::cue{font-size:100%}
#video.sz-large::cue{font-size:135%}
#submenu{position:absolute;right:3rem;bottom:9.5rem;min-width:18rem;max-width:30rem;max-height:60%;overflow-y:auto;background:rgba(20,20,30,.96);border-radius:.6rem;padding:.8rem;z-index:60}
#submenu[hidden]{display:none}
#submenu h3{font-size:.9rem;font-weight:400;color:var(--ac);margin:0 0 .5rem .4rem}
#submenu .sm{display:flex;align-items:center;padding:.6rem .8rem;border-radius:.4rem;font-size:1rem;cursor:pointer}
#submenu .sm i{flex:none;width:.7rem;height:.7rem;border-radius:50%;margin-right:.8rem;box-shadow:inset 0 0 0 .12rem #777}
#submenu .sm.on i{background:var(--ac);box-shadow:none}
#submenu .sm.cur,#submenu .sm:hover{background:var(--ac);color:#111}
#submenu .sm.cur i,#submenu .sm:hover i{box-shadow:inset 0 0 0 .12rem #222}
#submenu .sm.cur.on i{background:#111}