/* Shamel TV Pro TV - 10-foot layout, graphite theme with a top menu. 1rem = 24px on a 1920px-wide screen. */
:root{--bg:#120808;--bg2:#1a0b0c;--card:#1c0d0e;--card2:#2a1113;--field:#170a0b;--line:rgba(255,255,255,.14);--ink:#fff;--text:#f3eaea;--muted:#c2b1b2;--red:#e0243c;--red2:#f0405a;--blue:#6ea8ff;--green:#3ccf7a;font-size:1.25vw}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;line-height:1.4;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,input{font:inherit;color:inherit}
.tv{display:flex;height:100vh;background:radial-gradient(60rem 30rem at 85% -10rem,rgba(110,168,255,.18),transparent 70%),var(--bg)}

/* focus: big and obvious from the sofa */
.f{outline:none;transition:transform .12s,box-shadow .12s}
.f:focus{box-shadow:0 0 0 .2rem var(--bg),0 0 0 .4rem #fff;transform:scale(1.04);position:relative;z-index:2}

/* side menu */
.side{width:15rem;flex:0 0 15rem;background:rgba(10,4,5,.6);border-right:.08rem solid var(--line);color:#fff;padding:2.2rem 1.2rem 1.6rem;display:flex;flex-direction:column;gap:.5rem}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:900;font-size:1.35rem;margin:0 .3rem 1.6rem;letter-spacing:.02em}
.logo img{width:2.4rem;height:2.4rem;border-radius:.5rem}
.logo b{color:var(--red)}
.logo small{display:block;font-size:.55rem;letter-spacing:.35em;color:var(--muted);font-weight:800}
.logo span{line-height:1.1}
.nav{display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;border:0;border-radius:.8rem;background:transparent;color:var(--muted);font-size:1.15rem;font-weight:800;padding:.8rem 1rem;cursor:pointer}
.nav .i{width:1.4rem;text-align:center;color:#8f7c7d}
.nav.on{background:rgba(255,255,255,.1);color:#fff}
.nav.on .i{color:var(--red)}
.nav:focus{background:#fff;color:var(--bg)}
.nav:focus .i{color:var(--red)}
.side-foot{margin-top:auto;height:.3rem;border-radius:.2rem;background:linear-gradient(90deg,var(--red) 0 33%,#fff 33% 66%,var(--blue) 66%)}
.clock{margin:.8rem .3rem 0;font-size:1.6rem;font-weight:800;color:#fff}

/* main */
.main{flex:1;min-width:0;height:100vh;overflow-y:auto;padding:2.2rem 2.6rem 3rem;scroll-behavior:smooth}
.vhead{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:1rem}
.vhead h1{margin:0;font-size:2.3rem;color:var(--ink);letter-spacing:-.01em}
.vhead p{margin:0;color:var(--muted);font-size:1rem}
.row-scroll{display:flex;gap:.6rem;overflow-x:auto;padding:.5rem .4rem .7rem;margin:0 -.4rem;scrollbar-width:none;scroll-padding-inline:1.4rem}
.row-scroll::-webkit-scrollbar{display:none}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:3rem 1rem;font-size:1.2rem}
.skel{grid-column:1/-1;height:7rem;border-radius:1rem;background:linear-gradient(90deg,#2a1012 25%,#3a1517 50%,#2a1012 75%);background-size:200% 100%;animation:sh 1.3s infinite}
@keyframes sh{to{background-position:-200% 0}}

/* panels, forms */
.panel{background:var(--card);border:.08rem solid var(--line);border-radius:1rem;padding:1.4rem 1.6rem}
.panel h2{margin:0 0 .5rem;color:var(--ink);font-size:1.45rem}
.panel.center{text-align:center;max-width:38rem;margin:2rem auto}
.panel.center p{color:var(--muted)}
.panel.center .btn{margin-left:.4rem;margin-right:.4rem}
.hero-ico{width:5rem;height:5rem;border-radius:1rem}
.muted{color:var(--muted);margin:0 0 .6rem}
.small{color:var(--muted);font-size:.85rem;margin:.8rem 0 0}
.acc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;align-items:start}
label{display:block;margin:.8rem 0 .3rem;font-weight:800;color:var(--ink);font-size:.95rem}
input{width:100%;height:3rem;padding:0 1rem;border:.1rem solid rgba(255,255,255,.2);border-radius:.7rem;background:var(--field);color:#fff;font-size:1.05rem}
input::placeholder{color:#8f7c7d}
input:focus{border-color:var(--blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;margin-top:1.1rem;padding:.4rem 1.8rem;border:.12rem solid var(--red);border-radius:.8rem;background:var(--red);color:#fff;font-weight:800;font-size:1.1rem;cursor:pointer}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn[disabled]{opacity:.6}
.seg{display:flex;gap:.3rem;background:var(--field);border-radius:.8rem;padding:.25rem;margin:.6rem 0 .2rem}
.seg button{flex:1;border:0;border-radius:.6rem;background:transparent;padding:.55rem;font-weight:800;color:var(--muted);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--blue);color:#1a0606}
.msg{margin:.8rem 0 0;font-weight:800;min-height:1.2rem}
.msg.ok{color:var(--green)}
.msg.err{color:#ff7b8c}
.trial{position:relative;border:.12rem solid var(--red)}
.badge{position:absolute;top:-.75rem;left:1.4rem;background:var(--red);color:#fff;font-size:.75rem;font-weight:800;letter-spacing:.1em;border-radius:2rem;padding:.15rem .7rem}
.facts{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.2rem;margin:.8rem 0 0}
.facts dt{color:var(--muted)}
.facts dd{margin:0;text-align:right;color:var(--ink);font-weight:800;word-break:break-all}
.ok-t{color:var(--green)!important}
.bad-t{color:#ff7b8c!important}
.qr-panel{text-align:center}
.qr{display:inline-block;background:#fff;padding:.6rem;border-radius:.8rem;margin:.4rem 0}
.qr img{display:block;width:12rem;height:12rem;image-rendering:pixelated}
.url{font-weight:800;color:var(--blue);font-size:1.1rem;margin:.3rem 0 .8rem}
.plans{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem;text-align:left}
.plans li{border:.08rem solid var(--line);border-radius:.7rem;padding:.5rem .8rem;background:var(--field)}
.plans b{display:block;color:var(--ink)}
.plans span{color:var(--blue);font-weight:800;font-size:1.15rem}
.faq-panel{margin-top:1.2rem}
.faq-q{display:block;width:100%;text-align:left;border:0;border-top:.08rem solid var(--line);background:none;padding:.8rem .4rem;font-weight:800;color:var(--ink);font-size:1.05rem;cursor:pointer;border-radius:.5rem}
.faq-q:first-child{border-top:0}
.faq-a{margin:0 .4rem .8rem;color:var(--muted)}

/* live tv */
.live-cols{display:grid;grid-template-columns:18rem 1fr;gap:1.2rem;align-items:start}
.col.groups input{margin-bottom:.7rem}
.list{display:flex;flex-direction:column;max-height:calc(100vh - 14rem);overflow-y:auto;padding:.4rem;margin:-.4rem;scrollbar-width:none}
.list::-webkit-scrollbar{display:none}
.list>*{flex:0 0 auto;-webkit-flex:0 0 auto;margin:0 0 .45rem 0}
.list>*:last-child{margin-bottom:0}
.grp{border:.08rem solid var(--line);background:var(--card);border-radius:.7rem;padding:.65rem .9rem;text-align:left;font-weight:800;color:var(--text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;line-height:1.35;min-height:2.6rem;font-size:1.05rem}
.grp.on{background:var(--red);border-color:var(--red);color:#fff}
.ch{display:flex;align-items:center;width:100%;border:.08rem solid var(--line);background:var(--card);border-radius:.8rem;padding:.55rem .8rem;text-align:left;font-weight:800;color:var(--ink);font-size:1.05rem;cursor:pointer;line-height:1.35;min-height:3.8rem}
.lo{position:relative;width:2.6rem;height:2.6rem;flex:0 0 2.6rem;border-radius:.5rem;background:var(--field);display:grid;place-items:center;overflow:hidden;font-size:.75rem;font-weight:800;color:var(--blue)}
.lo i{font-style:normal}
.lo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--field)}
.ch .n{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch>*+*{margin-left:.8rem}
.more{color:var(--muted);text-align:center;padding:.6rem}

/* movies and series */
.vod-bar{max-width:28rem}
.cat{flex:0 0 auto;border:.08rem solid var(--line);background:var(--card);border-radius:2rem;padding:.45rem 1.1rem;font-weight:800;font-size:.95rem;color:var(--text);cursor:pointer;white-space:nowrap}
.cat.on{background:var(--red);border-color:var(--red);color:#fff}
.posters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.1rem;margin-top:.6rem}
.pst{display:block;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:var(--text);min-width:0;border-radius:.8rem}
.pst-img{position:relative;display:block;aspect-ratio:2/3;border-radius:.8rem;overflow:hidden;background:linear-gradient(160deg,#3a1517,#170a0b);border:.08rem solid var(--line)}
.pst-img i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:1.8rem;color:rgba(255,255,255,.35)}
.pst-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pst-img em{position:absolute;left:.4rem;top:.4rem;padding:.1rem .5rem;border-radius:2rem;background:rgba(10,4,5,.82);color:#ffd166;font-style:normal;font-size:.75rem;font-weight:800}
.pst-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:.4rem;font-size:.95rem;font-weight:700;line-height:1.3;padding:0 .1rem}
.pst:focus{box-shadow:none}
.pst:focus .pst-img{box-shadow:0 0 0 .2rem var(--bg),0 0 0 .4rem #fff}
.more-btn{display:flex;margin:1.4rem auto 0}

/* modal (details) */
.modal{position:fixed;inset:0;z-index:50;background:rgba(4,1,2,.78);display:grid;place-items:center}
.modal-card{width:52rem;max-width:90vw;max-height:90vh;overflow:auto;background:var(--bg2);border:.08rem solid var(--line);border-top:.3rem solid var(--red);border-radius:1.2rem;padding:1.6rem 2rem 1.8rem}
.dt{display:flex;gap:1.4rem;align-items:flex-start}
.dt-cover{width:9rem;flex:0 0 9rem;aspect-ratio:2/3;object-fit:cover;border-radius:.8rem;background:var(--field)}
.dt-body{min-width:0}
.modal-card h2{margin:0 0 .4rem;color:var(--ink);font-size:1.8rem}
.dt-meta{margin:0 0 .6rem;color:var(--muted)}
.dt-plot{margin:0 0 .5rem;line-height:1.5}
.dt-small{margin:0;color:var(--muted);font-size:.9rem}
.dt-small b{color:var(--text)}
.d-actions{display:flex;justify-content:flex-start;gap:1rem;flex-wrap:wrap}
.seasons{margin-top:1rem}
.eps{display:grid;gap:.5rem;margin-top:.4rem}
.ep{display:flex;align-items:center;gap:1rem;width:100%;padding:.7rem 1rem;border:.08rem solid var(--line);border-radius:.7rem;background:var(--field);color:var(--text);text-align:left;cursor:pointer;font-size:1.05rem}
.ep b{min-width:2.8rem;color:var(--blue)}
.ep span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.ep small{color:var(--muted)}

.toast{position:fixed;left:50%;bottom:2.5rem;transform:translateX(-50%);z-index:60;background:#fff;color:var(--bg);font-weight:800;padding:.8rem 1.6rem;border-radius:2rem;font-size:1.05rem;box-shadow:0 .4rem 1.6rem rgba(0,0,0,.4)}
#web-video{position:fixed;inset:0;width:100vw;height:100vh;background:#000;z-index:80}

.auth-tabs{display:inline-flex;gap:.4rem;background:var(--card);border:.08rem solid var(--line);border-radius:1rem;padding:.35rem;margin:0 0 1.2rem}
.auth-tabs button{border:0;border-radius:.7rem;background:transparent;padding:.6rem 2.4rem;font-weight:800;font-size:1.15rem;color:var(--muted);cursor:pointer}
.auth-tabs button[aria-pressed="true"]{background:var(--red);color:#fff}

/* help */
.help-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:1.2rem;align-items:stretch}
.help-grid.no-code{grid-template-columns:1fr 1fr}
.code-panel{background:linear-gradient(140deg,rgba(224,36,60,.35),rgba(110,168,255,.15)),var(--card);text-align:center;display:flex;flex-direction:column;justify-content:center}
.code-label{font-size:.85rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ffb3c4}
.code{margin:.8rem 0;font-size:3.6rem;line-height:1;font-weight:900;letter-spacing:.08em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.code-panel p{margin:0 0 .6rem;font-size:1.05rem}
.qr-panel h2,.tips-panel h2{text-align:center}
.qr-panel .qr img{width:10rem;height:10rem}
.keys{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.7rem}
.keys li{display:flex;align-items:center;gap:.8rem;font-weight:700;color:var(--ink)}
.keys .k{min-width:5.2rem;text-align:center;background:var(--field);border:.08rem solid var(--line);border-radius:.5rem;padding:.25rem .5rem;font-size:.85rem;font-weight:800;color:var(--blue)}

/* sign in with your phone (Device API) */
.pair-panel{grid-column:1/-1;position:relative;border:.12rem solid var(--blue)}
.pair-panel .badge{position:absolute;top:-.7rem;left:1.4rem}
.pair-body{display:flex;gap:2rem;align-items:center}
.pair-body .qr img{width:14rem;height:14rem}
.pair-side{flex:1;min-width:0}
.pair-steps{margin:.2rem 0 .6rem;padding-left:1.4rem;color:var(--text);font-size:1.05rem;line-height:1.6}
.pair-steps li{margin:.15rem 0}
.pair-code{margin:.2rem 0;color:#fff;font-size:3.2rem;font-weight:900;letter-spacing:.25em;font-variant-numeric:tabular-nums}
.pair-panel .dot{display:inline-block;width:.6rem;height:.6rem;margin-right:.5rem;border-radius:50%;background:var(--red);animation:pairpulse 1.2s ease-in-out infinite;vertical-align:middle}
@keyframes pairpulse{50%{opacity:.25}}
.pick-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.pick-list button{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;border:.12rem solid var(--line);border-radius:.8rem;background:var(--field);text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.pick-list button:focus{outline:none;border-color:#fff}
.pick-list b{display:block;font-size:1.1rem}
.pick-list small{color:var(--muted);font-size:.9rem}
.pick-list .tag{padding:.15rem .6rem;border-radius:99rem;font-size:.8rem;font-weight:800}
.pick-list .tag.ok{background:rgba(60,207,122,.15);color:var(--green)}
.pick-list .tag.bad{background:rgba(224,36,60,.18);color:#ff7b8c}
.pick-list .tag.tr{background:rgba(110,168,255,.18);color:var(--blue)}

/* type on your phone */
.phone-type{display:flex;gap:1.2rem;align-items:center;margin:.6rem 0 .4rem;padding:1rem;border-radius:1rem;background:linear-gradient(135deg,rgba(77,139,255,.18),rgba(47,107,255,.14)),rgba(10,4,5,.55);box-shadow:inset 0 0 0 .08rem rgba(110,168,255,.45)}
.phone-type .qr{flex:0 0 auto;margin:0;padding:.4rem}
.phone-type .qr img{width:9rem;height:9rem}
.phone-type-side{min-width:0}
.phone-type h3{margin:.3rem 0 .2rem;color:#fff;font-size:1.25rem}
.phone-type .small{margin:.3rem 0 0}
.badge-inline{display:inline-block;padding:.1rem .6rem;border-radius:2rem;background:var(--red);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.1em}
.type-code{color:#fff;letter-spacing:.15em;font-size:1.05rem}
.search-row{display:flex;gap:.5rem;align-items:stretch}
.search-row input{flex:1;min-width:0}
.col.groups .search-row{margin-bottom:.7rem}
.col.groups .search-row input{margin-bottom:0}
.phone-btn{flex:0 0 auto;display:flex;align-items:center;gap:.35rem;height:3rem;padding:0 .8rem;border:.08rem solid rgba(255,255,255,.2);border-radius:.7rem;background:rgba(40,16,18,.85);color:#fff;font-weight:800;font-size:.9rem;cursor:pointer}
.phone-btn svg{width:1.2rem;height:1.2rem}
.phone-btn:focus{background:#fff;color:var(--bg)}
#qr-find img{width:13rem;height:13rem}
.phone-type .small b{word-break:break-all}

/* =====================================================================
   SHAMEL TV PRO TV LOOK: graphite black, logo red and logo blue, menu across the top.
   ===================================================================== */
:root{--bg:#101114;--bg2:#17181d;--card:#1c1d23;--card2:#24262d;--field:#121318;--line:rgba(255,255,255,.1);--ink:#fff;--text:#e6e8ee;--muted:#9aa0ad;--red:#e3141f;--red2:#ff3540;--blue:#3d7dff;--green:#2fc46b}
html,body{background:var(--bg)}
.tv{flex-direction:column;background:radial-gradient(70rem 26rem at 100% 0,rgba(26,79,163,.28),transparent 70%),radial-gradient(50rem 24rem at 0 100%,rgba(227,20,31,.14),transparent 70%),var(--bg)}
.side{width:auto;flex:0 0 auto;flex-direction:row;align-items:center;gap:.5rem;padding:1rem 2.6rem;background:rgba(16,17,20,.92);border-right:0;border-bottom:.08rem solid var(--line);box-shadow:0 .4rem 1.6rem rgba(0,0,0,.35)}
.logo{margin:0 2rem 0 0;font-size:1.25rem;color:#fff}
.logo img{width:2.6rem;height:2.6rem;border-radius:.6rem;background:#fff;box-shadow:none}
.logo b{color:var(--red)}
.logo small{color:#8fb3ff}
.nav{width:auto;padding:.6rem 1.5rem;border-radius:2rem;font-size:1.1rem;color:var(--muted);gap:.6rem}
.nav .i{width:auto;color:inherit}
.nav.on{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 -.2rem 0 var(--red)}
.nav.on .i{color:var(--red)}
.nav:focus{background:var(--red);color:#fff;box-shadow:0 .5rem 1.4rem -.5rem rgba(227,20,31,.9);transform:scale(1.06)}
.nav:focus .i{color:#fff}
.side-foot{display:none}
.clock{margin:0 0 0 auto;font-size:1.5rem;color:#fff}
.main{height:auto;flex:1;min-height:0;padding:1.6rem 2.6rem 3rem}
.list{max-height:calc(100vh - 17rem)}

/* focus: white ring, red edge */
.f:focus{box-shadow:0 0 0 .16rem #fff,0 0 0 .34rem var(--red)}

/* page titles: plain, with a red bar */
.vhead{position:relative;flex-wrap:wrap;column-gap:1.2rem;row-gap:.1rem;margin-bottom:1rem;padding:0 0 0 1.1rem;background:none;border:0}
.vhead::before{content:"";position:absolute;left:0;top:.3rem;bottom:.3rem;width:.35rem;border-radius:.2rem;background:linear-gradient(180deg,var(--red),var(--blue))}
.vhead h1{font-size:2.3rem;font-weight:900;color:#fff}
.vhead p{color:var(--muted)}
.kick{flex-basis:100%;display:flex;align-items:center;gap:.45rem;font-size:.75rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#ff6b73}
.ldot{width:.5rem;height:.5rem;border-radius:50%;background:var(--red);animation:pairpulse 1.2s ease-in-out infinite}

/* panels, buttons, fields */
.panel{background:var(--card);border:.08rem solid var(--line);border-radius:1.2rem}
.btn{border-radius:2rem;border-color:var(--red);background:var(--red);box-shadow:none}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.btn:focus{background:#fff;color:var(--red);border-color:#fff}
input{background:var(--field);border-color:rgba(255,255,255,.16);border-radius:.8rem}
input:focus{border-color:var(--blue)}
.seg{background:var(--field)}
.seg button[aria-pressed="true"]{background:var(--blue);color:#fff}

/* live tv */
.grp{background:var(--card);border-color:var(--line);border-radius:.8rem}
.grp.on{background:var(--blue);border-color:var(--blue);color:#fff}
.ch{background:var(--card);border-color:var(--line);border-radius:1rem}
.ch:focus{background:var(--card2)}
.lo{border-radius:50%;background:hsl(var(--h,220),55%,22%);color:hsl(var(--h,220),90%,82%);font-size:.8rem;box-shadow:inset 0 0 0 .1rem hsl(var(--h,220),60%,40%)}
.lo img{background:#fff;padding:.2rem;border-radius:50%}
.cat{background:var(--card);border-color:var(--line)}
.cat.on{background:var(--blue);border-color:var(--blue);color:#fff}
.auth-tabs button[aria-pressed="true"]{background:var(--red)}

/* posters */
.pst-img{border:0;border-radius:1rem;background:linear-gradient(180deg,hsl(var(--h,220),45%,30%),hsl(calc(var(--h,220) + 25),50%,14%))}
.pst-img i{color:hsl(var(--h,220),80%,80%);font-size:1.9rem}
.pst-img em{left:auto;right:.4rem;top:.4rem;bottom:auto;background:#ffc21a;color:#3d2b00}
.pst:focus .pst-img{box-shadow:0 0 0 .16rem #fff,0 0 0 .34rem var(--red)}
.pst:focus .pst-t{color:#fff}
.pst-t{color:var(--muted)}

/* details modal */
.modal{background:rgba(5,6,8,.82)}
.modal-card{background:var(--bg2);border:.08rem solid var(--line);border-top:.3rem solid var(--red);border-radius:1.2rem}
.ep{background:var(--field)}
.ep b{color:#ff6b73}

/* account and help */
.pair-panel{border:.12rem solid var(--blue);background:var(--card)}
.pair-panel .badge,.badge{background:var(--blue)}
.pair-code{color:#fff}
.code-panel{background:var(--card);border:.12rem dashed var(--red)}
.code-label{color:#ff6b73}
.keys .k{color:#8fb3ff}
.phone-type{background:var(--field);box-shadow:inset 0 0 0 .08rem rgba(61,125,255,.5)}
.badge-inline{background:var(--red)}
.phone-btn{background:var(--card);border-color:var(--line)}