/* AMP PRO Web - TV-mode look. Tokens mirror the Android TV app (amp.css / v2.css previews). 1rem ~ 14px on a 1080p screen. */
:root{
  --bg:#0b0b14; --bg2:#12121f; --panel:rgba(255,255,255,.05); --panel2:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.10); --text:#f2f3fa; --muted:#9a9db5;
  --accent:#7c5cff; --accent2:#00e0ff; --ok:#2ee59d; --warn:#ffb020; --bad:#ff4d6a;
  --grad:linear-gradient(135deg,var(--accent),var(--accent2));
  --rh:4.6rem; --chw:17rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:clamp(10px,min(.72vw,1.3vh),22px);background:#000}
html,body{height:100%;overflow:hidden}
body{color:var(--text);font-family:Inter,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1200px 700px at 85% -10%,rgba(124,92,255,.26),transparent 60%),radial-gradient(900px 600px at -5% 110%,rgba(0,224,255,.14),transparent 60%),var(--bg);user-select:none;-webkit-user-select:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;text-align:left}
input{background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:.8rem;padding:.9rem 1.1rem;outline:0;user-select:text;-webkit-user-select:text}
::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:1rem}::-webkit-scrollbar-track{background:transparent}
.hide{display:none!important}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- focus ring: white fill + purple glow (same as TV) ---------- */
[data-f]{outline:0;transition:background .12s,box-shadow .12s,transform .12s}
[data-f]:focus{background:#fff!important;color:#0b0b14!important;box-shadow:0 0 0 .22rem rgba(124,92,255,.75),0 .6rem 2.2rem rgba(124,92,255,.4)}
[data-f]:focus *{color:#0b0b14}
[data-f]:focus .keep{color:inherit}
[data-f].poster:focus,[data-f].tile:focus{background:transparent!important;transform:scale(1.06);box-shadow:0 0 0 .22rem #fff,0 0 0 .5rem rgba(124,92,255,.7),0 1rem 2.4rem rgba(0,0,0,.6);z-index:3}
[data-f].poster:focus *,[data-f].tile:focus *{color:#fff}
.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.2rem .65rem;border-radius:.4rem;font-size:.9rem;font-weight:700;letter-spacing:.04em;background:var(--panel2);border:1px solid var(--line);color:#dfe2ff}
.badge.live{background:var(--bad);border-color:transparent;color:#fff}
.badge.hv{background:linear-gradient(135deg,rgba(124,92,255,.35),rgba(0,224,255,.25));border-color:rgba(0,224,255,.5);color:#fff}
.badge.ok{background:rgba(46,229,157,.14);border-color:rgba(46,229,157,.5);color:var(--ok)}
.badge.warn{background:rgba(255,176,32,.14);border-color:rgba(255,176,32,.5);color:var(--warn)}
.muted{color:var(--muted)}
.spin{width:2.6rem;height:2.6rem;border-radius:50%;border:.28rem solid rgba(255,255,255,.18);border-top-color:var(--accent2);animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- shell ---------- */
#app{display:grid;grid-template-columns:6.5rem 1fr;height:100%}
.rail{background:rgba(8,8,16,.85);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:1.6rem 0;gap:.6rem;z-index:5}
.rail .logo{width:3.6rem;height:3.6rem;border-radius:1rem;margin-bottom:1.6rem;object-fit:cover}
.ri{width:4.5rem;height:4.5rem;border-radius:1.1rem;display:grid;place-items:center;color:var(--muted);position:relative}
.ri svg{width:2rem;height:2rem;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ri.on{background:var(--grad);color:#fff;box-shadow:0 .5rem 1.7rem rgba(124,92,255,.5)}
.ri.sp{margin-top:auto}
.ri .tip{position:absolute;left:105%;top:50%;transform:translateY(-50%);background:#000c;padding:.3rem .7rem;border-radius:.5rem;font-size:.9rem;white-space:nowrap;display:none;color:#fff;z-index:9}
.ri:focus .tip,.ri:hover .tip{display:block}
.clock{font-size:.95rem;color:var(--muted);margin-top:.5rem}
#view{position:relative;overflow:hidden;min-width:0}
.screen{position:absolute;inset:0}
.center{display:grid;place-items:center;height:100%;text-align:center;padding:2rem}
.empty{color:var(--muted);padding:2rem;font-size:1.15rem;line-height:1.5}

/* ---------- login / setup ---------- */
.auth{position:fixed;inset:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0 7vw;gap:5vw;z-index:30;background:inherit}
.auth .brand{display:flex;align-items:center;gap:1.1rem;margin-bottom:5rem}
.auth .brand img{width:4rem;height:4rem;border-radius:1rem;object-fit:cover}
.auth .brand b{font-size:1.9rem;letter-spacing:.03em;display:block}
.auth .brand small{display:block;font-size:.85rem;color:var(--muted);letter-spacing:.22em;text-transform:uppercase}
.auth h1{font-size:3.6rem;line-height:1.1;font-weight:800}
.auth .lead{font-size:1.25rem;color:var(--muted);margin:1.4rem 0 1.8rem;max-width:30rem;line-height:1.5}
.card{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:1.6rem;padding:2rem;box-shadow:0 2rem 5rem rgba(0,0,0,.45);backdrop-filter:blur(14px)}
.tabs{display:flex;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:1.1rem;padding:.35rem;gap:.35rem;margin-bottom:1.6rem}
.tabs button{flex:1;text-align:center;padding:.9rem;border-radius:.8rem;color:var(--muted);font-weight:600;font-size:1.05rem}
.tabs button.on{background:rgba(255,255,255,.1);color:#fff}
.fld{display:block;margin-bottom:1.1rem}
.fld span{display:block;font-size:.9rem;color:var(--muted);margin-bottom:.4rem;letter-spacing:.04em}
.fld input{width:100%;font-size:1.25rem}
.fld input:focus{border-color:var(--accent2);box-shadow:0 0 0 .2rem rgba(0,224,255,.2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.95rem 1.8rem;border-radius:.95rem;background:rgba(255,255,255,.09);border:1px solid var(--line);font-weight:700;font-size:1.1rem;white-space:nowrap}
.btn.pri{background:var(--grad);border-color:transparent;color:#fff}
.btn.big{width:100%;padding:1.1rem;font-size:1.2rem}
.btn svg{width:1.3rem;height:1.3rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.err{color:var(--bad);font-size:1rem;min-height:1.3rem;margin:.2rem 0 .8rem;line-height:1.4}
.qrrow{display:flex;gap:2rem;align-items:center}
.qr{background:#fff;border-radius:1.1rem;padding:.9rem;width:13rem;height:13rem;flex:none;box-shadow:0 0 3rem rgba(124,92,255,.35)}
.qr svg{width:100%;height:100%;display:block}
.steps{font-size:1.15rem;line-height:1.9}.steps h3{font-size:1.45rem;margin-bottom:.5rem}
.paircode{margin-top:1.4rem;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:1.1rem;padding:1.1rem;text-align:center}
.paircode small{display:block;color:var(--muted);letter-spacing:.14em;font-size:.85rem;text-transform:uppercase}
.paircode b{display:block;font-size:2.6rem;letter-spacing:.22em;margin-top:.3rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.status{margin-top:1rem;font-size:1rem;color:var(--muted);display:flex;align-items:center;gap:.6rem}
.dot{width:.7rem;height:.7rem;border-radius:50%;background:var(--ok);box-shadow:0 0 .8rem var(--ok)}
.picklist{display:flex;flex-direction:column;gap:.6rem;max-height:22rem;overflow:auto;padding:.3rem}
.picklist .btn{justify-content:flex-start}
.foot{margin-top:1.4rem;font-size:.85rem;color:var(--muted);text-align:center}

/* ---------- two-pane layouts (live / movies / shows) ---------- */
.two{display:grid;grid-template-columns:23rem minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:100%;min-height:0}
.side{background:rgba(10,10,20,.55);border-right:1px solid var(--line);overflow-y:auto;padding:1.3rem .9rem 2rem}
.sysbtn{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1rem 1.1rem;border-radius:.9rem;background:rgba(255,255,255,.06);border:1px solid var(--line);font-weight:700;font-size:1.1rem;margin-bottom:.9rem}
.sysbtn svg{width:1.1rem;height:1.1rem;stroke:currentColor;fill:none;stroke-width:2}
.sec{font-size:.8rem;letter-spacing:.16em;color:var(--muted);padding:1rem 1rem .4rem;text-transform:uppercase}
.si{display:flex;justify-content:space-between;align-items:center;gap:.8rem;width:100%;padding:.8rem 1.1rem;border-radius:.8rem;color:#d6d8ee;font-size:1.08rem;position:relative}
.si span.n{font-size:.85rem;color:var(--muted)}
.si.on{background:rgba(124,92,255,.22);color:#fff;font-weight:700}
.si.on::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:.25rem;border-radius:.2rem;background:var(--accent2)}
.si svg{width:1.15rem;height:1.15rem;stroke:currentColor;fill:none;stroke-width:1.8;margin-right:.2rem}
.si .t{display:flex;align-items:center;gap:.6rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- live guide ---------- */
.lmain{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;height:100%;overflow:hidden}
.gtop{display:flex;gap:2rem;padding:1.4rem 2rem 1rem}
.pvslot{width:32rem;aspect-ratio:16/9;border-radius:1.1rem;background:#05050a;border:1px solid var(--line);flex:none;position:relative}
.pvslot .hint{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:1.05rem;text-align:center;padding:1rem}
.ginfo{min-width:0;flex:1;position:relative}
.ginfo h2{font-size:2.3rem;font-weight:800;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ginfo .tm{display:flex;align-items:center;gap:1rem;margin:.55rem 0;color:#c9cbe0;font-size:1.1rem}
.bar{height:.4rem;width:10rem;border-radius:1rem;background:rgba(255,255,255,.15);overflow:hidden}.bar i{display:block;height:100%;background:var(--grad)}
.ginfo p{color:#c9cbe0;font-size:1.15rem;line-height:1.5;max-height:4.6rem;overflow:hidden}
.ginfo .nx{margin-top:.7rem;color:var(--muted);font-size:1.05rem}.ginfo .nx b{color:#fff}
.ginfo .clk{position:absolute;right:0;top:0;font-size:1.2rem;color:#cfd1e6}
.gd{display:flex;flex-direction:column;min-height:0;height:100%;overflow:hidden;position:relative}
.gh{display:flex;height:2.6rem;align-items:flex-end;padding-bottom:.4rem;color:var(--muted);font-size:1rem;border-bottom:1px solid var(--line)}
.gh .l{width:var(--chw);padding-left:2rem;flex:none;font-weight:600;color:#cfd1e6}
.gh .r{position:relative;flex:1;overflow:hidden;height:100%}
.gh .r i{position:absolute;bottom:.4rem;font-style:normal;white-space:nowrap}
.gbody{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}.gbody::-webkit-scrollbar,.side::-webkit-scrollbar{width:10px}.gbody::-webkit-scrollbar-thumb,.side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:6px}
.gsp{position:relative;width:100%}
.gr{position:absolute;left:0;right:0;height:var(--rh);display:flex;border-bottom:1px solid rgba(255,255,255,.05)}
.gc{width:var(--chw);flex:none;display:flex;align-items:center;gap:.9rem;padding:0 1rem 0 1rem;cursor:pointer;min-width:0}
.gc .no{width:1.9rem;text-align:right;color:var(--muted);font-size:.95rem;flex:none}
.gc .nm{font-size:1.08rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc .fv{color:var(--bad);font-size:.9rem}
.chip{width:2.9rem;height:2.9rem;border-radius:.75rem;display:grid;place-items:center;font-weight:800;font-size:.95rem;color:#fff;flex:none;overflow:hidden;background-size:cover}
.chip img{width:100%;height:100%;object-fit:contain;background:#12121f}
.trk{position:relative;flex:1;overflow:hidden}
.inn{position:absolute;left:0;top:0;bottom:0;transform:translateX(var(--tx,0px));will-change:transform}
.pg{position:absolute;top:.35rem;bottom:.35rem;border-radius:.65rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.05);padding:0 .9rem;display:flex;align-items:center;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.pg.now{background:rgba(255,255,255,.13)}
.pg.none{color:var(--muted);font-style:italic}
.pg.playing{box-shadow:inset 0 0 0 .15rem rgba(0,224,255,.55)}
.nowl{position:absolute;top:2.6rem;bottom:0;width:.16rem;background:var(--accent2);box-shadow:0 0 .8rem var(--accent2);z-index:2;pointer-events:none}
.ghint{padding:.5rem 2rem;font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);display:flex;gap:1.6rem;flex-wrap:wrap}
.ghint b{color:#dfe2ff}

/* ---------- movies & shows ---------- */
.vmain{position:relative;overflow-y:auto;overflow-x:hidden;height:100%}
.hero{position:relative;padding:2.6rem 3rem 1.6rem;min-height:26rem;display:flex;flex-direction:column;justify-content:flex-end}
.hero .bd{position:absolute;inset:0;background-size:cover;background-position:center 20%;opacity:.55;mask-image:linear-gradient(90deg,transparent 0,#000 55%),linear-gradient(0deg,transparent 0,#000 40%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 55%);transition:opacity .4s}
.hero .bd::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 0,transparent 55%)}
.hero>*{position:relative}
.hero .tags{display:flex;gap:.6rem;margin-bottom:.8rem}
.hero h1{font-size:3.4rem;font-weight:800;line-height:1.1;max-width:46rem}
.hero .meta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin:.8rem 0;font-size:1.15rem;color:#dcdff3}
.hero .meta .star{color:var(--warn);font-weight:800}
.hero .cr{font-size:1rem;color:var(--muted);margin-bottom:.5rem}.hero .cr b{color:#e9ebff;margin-right:.3rem}.hero .cr span{margin-right:1.2rem}
.hero .pl{font-size:1.15rem;color:#d3d5ea;line-height:1.5;max-width:50rem;max-height:3.6rem;overflow:hidden;margin-bottom:1.1rem}
.hero .acts{display:flex;gap:.9rem}
.vrows{padding:.4rem 3rem 4rem}
.rowh{display:flex;align-items:baseline;gap:.9rem;margin:1.4rem 0 .8rem}.rowh h2{font-size:1.5rem}.rowh small{color:var(--muted);font-size:.95rem}
.row{display:flex;gap:1.2rem;overflow-x:auto;overflow-y:visible;padding:.8rem .6rem 1.5rem;margin:0 -.6rem;scrollbar-width:none}.row::-webkit-scrollbar{display:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:1.4rem 1.2rem;padding:.8rem .6rem 2rem}
.poster,.tile{display:block;width:11.2rem;flex:none;border-radius:.9rem;position:relative;cursor:pointer}
.grid .poster{width:auto}
.poster .im{aspect-ratio:2/3;border-radius:.9rem;background:#1a1a2c center/cover no-repeat;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.poster .im img{width:100%;height:100%;object-fit:cover;display:block}
.poster .im .ph{position:absolute;inset:0;display:grid;place-items:center;padding:.8rem;text-align:center;font-weight:700;font-size:1rem;line-height:1.25;color:#fff;background:linear-gradient(160deg,#3a2f7a,#10101c)}
.poster .rt{position:absolute;left:.5rem;bottom:.5rem;background:rgba(0,0,0,.7);border-radius:.4rem;padding:.12rem .45rem;font-size:.85rem;font-weight:700}
.poster .rt::before{content:"\2605 ";color:var(--warn)}
.poster .nm{margin-top:.55rem;font-size:1rem;color:#dfe2f4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.poster .rank{position:absolute;left:.4rem;top:-.2rem;font-size:3.6rem;font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:.1rem rgba(255,255,255,.85);z-index:2;text-shadow:0 .2rem 1rem rgba(0,0,0,.5)}
.poster .lib{position:absolute;right:.45rem;top:.45rem;width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;font-size:.85rem;font-weight:900;background:var(--ok);color:#06281a;z-index:2}
.poster .lib.no{background:rgba(0,0,0,.7);color:#fff}
.poster.dim .im{opacity:.45}
.poster .prog{position:absolute;left:0;right:0;bottom:0;height:.3rem;background:rgba(255,255,255,.2)}.poster .prog i{display:block;height:100%;background:var(--accent2)}
.credit{padding:1rem 3rem 2rem;font-size:.8rem;color:var(--muted)}

/* ---------- detail overlay ---------- */
.ovl{position:fixed;inset:0;z-index:20;background:#07070f;overflow:auto}
.det{display:grid;grid-template-columns:20rem 1fr;gap:3rem;padding:4rem 6rem;max-width:110rem;margin:0 auto}
.det .pimg{aspect-ratio:2/3;border-radius:1.2rem;background:#1a1a2c center/cover;box-shadow:0 1.5rem 4rem rgba(0,0,0,.6);border:1px solid var(--line)}
.det h1{font-size:2.9rem;line-height:1.15;margin:.3rem 0 .8rem}
.det .acts{display:flex;gap:.9rem;flex-wrap:wrap;margin:1.3rem 0}
.det .pl{font-size:1.2rem;line-height:1.6;color:#d3d5ea;max-width:60rem}
.det .bdrop{position:fixed;inset:0;background-size:cover;background-position:center;opacity:.18;z-index:-1}
.seas{display:flex;gap:.7rem;margin:1.2rem 0 .8rem;flex-wrap:wrap}
.seas .btn{padding:.6rem 1.2rem;font-size:1rem}.seas .btn.on{background:rgba(124,92,255,.35);border-color:var(--accent)}
.eps{display:flex;flex-direction:column;gap:.5rem;max-width:62rem}
.ep{display:flex;gap:1.1rem;align-items:center;padding:.65rem .9rem;border-radius:.9rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden}
.ep .st{width:9rem;aspect-ratio:16/9;border-radius:.55rem;background:#1a1a2c center/cover;flex:none}
.ep b{display:block;font-size:1.1rem}.ep small{color:var(--muted);font-size:.9rem;display:block;margin-top:.15rem;max-height:2.6rem;overflow:hidden}
.ep .w{position:absolute;left:0;bottom:0;height:.25rem;background:var(--accent2)}
.ep .ck{margin-left:auto;color:var(--ok);font-weight:800}

/* ---------- search / settings / sports ---------- */
.page{padding:2.4rem 3.2rem;height:100%;overflow-y:auto}
.page h1{font-size:2.2rem;margin-bottom:1.4rem}
.sbar{display:flex;gap:1rem;margin-bottom:1rem}.sbar input{flex:1;font-size:1.5rem;padding:1.1rem 1.4rem}
.setgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(22rem,1fr));gap:1.4rem;max-width:90rem}
.set{background:var(--panel);border:1px solid var(--line);border-radius:1.2rem;padding:1.5rem}
.set h3{font-size:1.2rem;margin-bottom:.9rem}
.kv{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:1.05rem}.kv span:first-child{color:var(--muted)}
.set .btn{margin:.8rem .6rem 0 0}
.list{display:flex;flex-direction:column;gap:.55rem;max-width:70rem}
.li{display:flex;gap:1rem;align-items:center;padding:.9rem 1.2rem;border-radius:.9rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);font-size:1.1rem}
.li .sm{color:var(--muted);font-size:.95rem}

/* ---------- global player ---------- */
#player{position:fixed;z-index:15;background:#000;overflow:hidden;border-radius:1.1rem;display:none}
#player.on{display:block}
#player.full{inset:0!important;width:100%!important;height:100%!important;border-radius:0;z-index:40}
#player video{width:100%;height:100%;display:block;background:#000;object-fit:contain}
#player.fill video{object-fit:cover}#player.stretch video{object-fit:fill}
#player .spn{position:absolute;inset:0;display:none;place-items:center;pointer-events:none}
#player.busy .spn{display:grid}
#player .perr{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:rgba(0,0,0,.78);text-align:center;padding:2rem;font-size:1.15rem}
#player.bad .perr{display:flex}
#player .pov{position:absolute;inset:0;display:none;flex-direction:column;justify-content:space-between;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent 45%,transparent 70%,rgba(0,0,0,.6))}
#player.full.ui .pov{display:flex}
#player .ptop{display:flex;justify-content:space-between;align-items:flex-start;padding:2rem 3rem}
#player .ptop .br{display:flex;align-items:center;gap:1rem;font-weight:800;font-size:1.4rem}.ptop .br img{width:3rem;height:3rem;border-radius:.8rem}
#player .ptop .br small{display:block;font-size:.8rem;color:var(--muted);letter-spacing:.2em;font-weight:500}
#player .stats{background:rgba(10,12,22,.9);border:1px solid var(--line);border-radius:.9rem;padding:1rem 1.3rem;font-size:.95rem;line-height:1.7;min-width:20rem;display:none}
#player .stats.on{display:block}.stats b{display:inline-block;width:5rem;color:var(--muted);font-weight:500}
#player .pbot{padding:0 3rem 2.4rem}
#player .pt{display:flex;align-items:center;gap:1.4rem}
#player .pt .chip{width:5rem;height:5rem;border-radius:1.2rem;font-size:1.4rem}
#player .pt h2{font-size:2.6rem;font-weight:800;line-height:1.1}
#player .pt .sub{font-size:1.15rem;color:#d0d2e8;margin-top:.3rem}
#player .tags{display:flex;gap:.5rem;margin-bottom:.4rem}
#player .seek{display:flex;align-items:center;gap:1rem;margin:1.3rem 0 1.2rem;font-size:1rem;color:#d0d2e8}
#player .seek .tr{flex:1;height:.55rem;background:rgba(255,255,255,.22);border-radius:1rem;position:relative;cursor:pointer}
#player .seek .tr i{position:absolute;left:0;top:0;bottom:0;border-radius:1rem;background:var(--grad)}
#player .seek .tr u{position:absolute;top:50%;width:1.2rem;height:1.2rem;margin:-.6rem 0 0 -.6rem;border-radius:50%;background:#fff;box-shadow:0 0 1rem var(--accent2)}
#player .seek .nxt{flex:1;text-align:center}
#player .btns{display:flex;gap:.9rem;flex-wrap:wrap}
.pb{min-width:10rem;padding:1rem 1.2rem;border-radius:1rem;background:rgba(24,24,40,.85);border:1px solid var(--line);display:block}
.pb svg{width:1.5rem;height:1.5rem;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:.5rem}
.pb b{display:block;font-size:1.05rem}.pb small{display:block;font-size:.85rem;color:var(--muted);margin-top:.1rem}
.pb small.g{color:var(--ok)}
#player .zap{position:absolute;right:3rem;top:3rem;font-size:3rem;font-weight:800;text-shadow:0 .2rem 1rem #000;display:none}
#player .menu{position:absolute;right:3rem;bottom:13rem;background:rgba(14,14,26,.96);border:1px solid var(--line);border-radius:1.1rem;padding:.7rem;min-width:18rem;display:none;max-height:60vh;overflow:auto}
#player .menu.on{display:block}.menu .si{font-size:1.05rem}
#player .menu h4{padding:.6rem 1rem;color:var(--muted);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase}

/* ---------- toast / dialog ---------- */
#toast{position:fixed;left:50%;bottom:3rem;transform:translateX(-50%);z-index:90;background:rgba(20,20,36,.96);border:1px solid rgba(255,176,32,.55);border-radius:1rem;padding:.9rem 1.6rem;font-size:1.1rem;display:none;box-shadow:0 1rem 3rem rgba(0,0,0,.6)}
#toast.on{display:block}
.dlg{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.7);display:grid;place-items:center}
.dlg .card{min-width:28rem;max-width:42rem}
.dlg h3{font-size:1.5rem;margin-bottom:.8rem}.dlg p{color:#cfd1e6;font-size:1.1rem;line-height:1.5;margin-bottom:1rem}

/* ---------- narrow screens (phones / small windows) ---------- */
@media (max-width:900px){
  html{font-size:14px}
  #app{grid-template-columns:1fr;grid-template-rows:1fr 4.2rem}
  .rail{order:2;flex-direction:row;justify-content:space-around;padding:.3rem;border-right:0;border-top:1px solid var(--line)}
  .rail .logo,.clock,.ri .tip,.ri.sp{display:none}.ri{width:3.6rem;height:3.6rem}
  .auth{grid-template-columns:1fr;padding:2rem;gap:1.5rem;overflow:auto;align-content:start}.auth h1{font-size:2.3rem}.auth .brand{margin-bottom:1.5rem}
  .qrrow{flex-direction:column}
  .two{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .side{display:flex;overflow-x:auto;overflow-y:hidden;padding:.6rem;gap:.4rem;border-right:0;border-bottom:1px solid var(--line)}
  .side .sec,.side .sysbtn{display:none}.si{white-space:nowrap;width:auto;flex:none}
  .gtop{flex-direction:row;gap:.8rem;padding:.6rem .8rem .4rem;align-items:flex-start}.pvslot{width:44%;max-width:15rem}.pvslot .hint{font-size:.8rem}.ginfo{min-width:0;flex:1}.ginfo h2{font-size:1.15rem}.ginfo p,.ginfo .nx,.ginfo .clk,.ghint{display:none}.ginfo .tm{flex-wrap:wrap;gap:.2rem .6rem;font-size:.85rem}.ginfo .bar{width:5rem}
  :root{--chw:9rem}.gc .no,.gc .chip{display:none}
  .hero{padding:1.5rem 1rem;min-height:18rem}.hero h1{font-size:2rem}.vrows{padding:.4rem 1rem 3rem}
  .det{grid-template-columns:1fr;padding:2rem 1.2rem}.det .pimg{width:10rem}
  .page{padding:1.2rem}
}

#player .noaud{position:absolute;left:50%;top:5.5rem;transform:translateX(-50%);max-width:70%;background:rgba(40,10,10,.92);border:1px solid #ff6b6b;color:#ffd9d9;padding:.8rem 1.3rem;border-radius:.8rem;font-size:1.05rem;display:none;z-index:5;text-align:center}
#player .noaud.on{display:block}