:root{--bg:#0B0B14;--panel:#14141F;--panel2:#1C1C2B;--line:rgba(255,255,255,.09);--text:#F2F2FA;--muted:#9A9AB5;--violet:#7C5CFF;--cyan:#00E0FF;--ok:#2EE59D;--warn:#FFB020;--bad:#FF4D6A;--acc:#18D2FF}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100%}
/* ---------- generic frames */
.tvframe{width:100%;max-width:960px;aspect-ratio:16/9;border-radius:14px;border:1px solid var(--line);background:#0B0B14;overflow:hidden;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.scalebox{position:relative;overflow:hidden}
.stage{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;background:var(--bg);font-size:14px}
.tv{width:960px;height:540px;border-radius:0}
.ph{width:270px;height:560px;border-radius:26px}
.phframe{border-radius:34px;padding:10px;background:#05050a;border:2px solid #2a2a3a;box-shadow:0 20px 50px rgba(0,0,0,.55);display:inline-block}

/* ---------- lesson modal */
.lesson{max-width:1180px;margin:0 auto;background:rgba(22,22,38,.97);border:1px solid rgba(255,255,255,.14);border-radius:22px;box-shadow:0 0 60px rgba(124,92,255,.28);padding:18px 20px 16px}
.lh{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.lh .tile{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(255,176,32,.14);border:1px solid rgba(255,176,32,.35);font-size:21px;color:var(--warn)}
.lh h3{font-size:19px;font-weight:800}.lh small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.x{width:36px;height:36px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);font-size:16px}
.lb{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:16px}
.lb.phone{grid-template-columns:auto minmax(0,1fr);justify-items:start}
.cap{margin-top:10px;background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:12px;padding:11px 14px;min-height:62px}
.cap .st{font-size:11px;font-weight:800;color:var(--acc);letter-spacing:.5px;text-transform:uppercase}
.cap .tx{font-size:16.5px;line-height:1.45;margin-top:3px;font-weight:600}
.cap.off .tx{visibility:hidden}
.ctl{display:flex;align-items:center;gap:8px;margin-top:10px}
.cb{width:42px;height:42px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);font-size:16px;display:grid;place-items:center}
.cb.big{width:54px;background:linear-gradient(135deg,var(--violet),var(--cyan));border:0}
.cb.on{outline:2px solid var(--acc)}
.segs{flex:1;display:flex;gap:4px;margin:0 6px}
.seg{flex:1;height:7px;border-radius:5px;background:rgba(255,255,255,.14);overflow:hidden;cursor:pointer}
.seg i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--cyan))}
.seg.done i{width:100%}
.steps{display:flex;flex-direction:column;gap:5px}
.sl{display:flex;gap:9px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--muted);text-align:left;width:100%}
.sl .n{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:10px;font-weight:800;flex:none}
.sl.on{background:#fff;color:#111122;box-shadow:0 0 0 2px rgba(124,92,255,.8)}.sl.on .n{background:var(--violet);color:#fff}
.sl.dn .n{background:var(--ok);color:#06241a}.sl.dn{color:var(--text)}
.try{margin-top:10px;display:none;gap:8px}
.try.show{display:flex}
.btn{padding:11px 18px;border-radius:12px;font-weight:800;font-size:13.5px;background:var(--panel2);border:1px solid var(--line)}
.btn.pri{background:linear-gradient(135deg,var(--violet),var(--cyan));border:0;color:#fff}
.hint{font-size:11px;color:var(--muted);margin-top:8px}

/* ---------- remote graphic */
.rem{margin-top:12px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:10px}
.rem .lbl{font-size:10px;font-weight:800;color:var(--muted);letter-spacing:.6px}
.dpad{position:relative;width:132px;height:132px;border-radius:50%;background:#0c0c16;border:1px solid var(--line)}
.k{position:absolute;display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--muted);border-radius:10px;transition:.2s}
.k.u{left:44px;top:5px;width:44px;height:34px}.k.d{left:44px;bottom:5px;width:44px;height:34px}
.k.l{left:5px;top:44px;width:34px;height:44px}.k.r{right:5px;top:44px;width:34px;height:44px}
.k.ok{left:40px;top:40px;width:52px;height:52px;border-radius:50%;background:#1d1d2e;color:#e8e8f5;font-size:13px}
.k.hit{background:var(--acc);color:#05202a;box-shadow:0 0 0 3px rgba(24,210,255,.35),0 0 20px rgba(24,210,255,.8);animation:kp 1s infinite}
@keyframes kp{50%{transform:scale(1.08)}}
.k.hold::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;animation:spin 1.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.rrow{display:flex;gap:8px}
.rb{padding:7px 14px;border-radius:10px;background:#1d1d2e;font-size:11px;font-weight:800;color:var(--muted);transition:.2s}
.rb.hit{background:var(--acc);color:#05202a;box-shadow:0 0 18px rgba(24,210,255,.8);animation:kp 1s infinite}
.holdtxt{font-size:11px;font-weight:800;color:var(--warn);height:14px}
.gest{margin-top:12px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px 10px;text-align:center}
.gest .gi{font-size:38px}.gest b{display:block;font-size:15px;margin-top:2px}.gest span{font-size:11px;color:var(--muted)}

/* ---------- mock app pieces */
.g{position:absolute;inset:0;display:flex}
.g .side{width:200px;border-right:1px solid var(--line);padding:12px 10px;background:rgba(13,13,24,.75)}
.sbox{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12px;color:var(--muted);margin-bottom:6px}
.cr{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-radius:10px;font-size:12.5px;color:var(--muted);font-weight:600;margin:1px 0}
.cr.on{background:var(--panel2);color:var(--text);font-weight:800;border:1px solid rgba(24,210,255,.4)}
.cr.pf{background:#fff;color:#111122;box-shadow:0 0 0 2px rgba(124,92,255,.8),0 0 14px rgba(124,92,255,.5)}
.cr small{font-size:10px;opacity:.7}
.g .mid{flex:1;padding:12px 12px;position:relative}
.g .mid h5{font-size:15px;font-weight:800;margin-bottom:6px}
.row{height:46px;display:flex;align-items:center;gap:10px;padding:0 8px;border-radius:10px;position:relative}
.row .no{width:22px;font-size:11px;color:var(--muted)}
.lg{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff;flex:none}
.row .nm{width:128px;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .pg{flex:1;min-width:0}.row .pg b{font-size:11.5px;display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .bar{height:3px;background:rgba(255,255,255,.12);border-radius:3px;margin-top:4px}.row .bar i{display:block;height:100%;background:var(--acc);border-radius:3px}
.row .star{color:var(--warn);font-size:14px;width:18px;text-align:center;opacity:0;transform:scale(.3);transition:.35s}
.row .star.on{opacity:1;transform:scale(1)}
.fx{position:absolute;left:8px;right:8px;height:46px;border-radius:10px;background:rgba(255,255,255,.96);box-shadow:0 0 0 2px rgba(124,92,255,.85),0 0 22px rgba(124,92,255,.55);transition:top .55s cubic-bezier(.4,.1,.2,1);z-index:1}
.row>*{position:relative;z-index:2}
.row.fcs .nm,.row.fcs .pg b,.row.fcs .no{color:#111122}.row.fcs .no{color:#555}
.hb{position:absolute;left:8px;height:3px;border-radius:3px;background:var(--warn);width:0;z-index:3;box-shadow:0 0 8px var(--warn)}
.hb.go{animation:hb 1.5s linear forwards}
@keyframes hb{to{width:calc(100% - 16px)}}
.prev{width:236px;padding:12px 12px 0 0}
.vid{height:132px;border-radius:12px;background:linear-gradient(135deg,#1b2a55,#4a2b86 55%,#16394a);position:relative;overflow:hidden;border:1px solid var(--line)}
.vid:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(0,224,255,.18);right:-30px;top:-30px;filter:blur(18px)}
.toast{position:absolute;left:50%;bottom:26px;transform:translate(-50%,30px);background:#fff;color:#111122;font-weight:800;font-size:14px;padding:11px 18px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;transition:.35s;z-index:9;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
.ph .toast{font-size:11px;padding:9px 12px;bottom:70px}
.cap2{position:absolute;left:0;right:0;top:0;background:linear-gradient(#000a,transparent);padding:12px 18px;font-weight:800;font-size:13px;z-index:8;display:none}

/* player mock */
.pl{position:absolute;inset:0;background:linear-gradient(120deg,#16254f 0%,#3a2478 50%,#123546 100%);overflow:hidden}
.pl:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(0,224,255,.15);left:-60px;top:-120px;filter:blur(50px)}
.pl:after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;background:rgba(255,80,160,.14);right:-40px;top:-60px;filter:blur(55px)}
.clock{position:absolute;right:26px;top:22px;font-weight:800;font-size:20px;text-shadow:0 2px 8px #000;z-index:2}
.panel{position:absolute;left:0;right:0;bottom:0;padding:0 30px 16px;background:linear-gradient(transparent,rgba(5,5,12,.88) 30%);z-index:3;transition:.4s}
.panel.hide{opacity:0;transform:translateY(40px)}
.pinfo{display:flex;gap:12px;align-items:flex-end;margin-bottom:10px}
.pinfo .lg{width:50px;height:50px;font-size:13px;border-radius:12px}
.pinfo h4{font-size:22px;font-weight:800}.pinfo small{color:#cfd0e8;font-size:11.5px}
.tbar{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cbtn{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:12px}
.pr{flex:1;height:5px;border-radius:5px;background:rgba(255,255,255,.2)}.pr i{display:block;width:92%;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--violet),var(--cyan))}
.live{border:1.5px solid var(--ok);color:var(--ok);border-radius:18px;padding:5px 12px;font-size:11px;font-weight:800}
.rv{font-size:9.5px;font-weight:800;letter-spacing:.6px;color:#bfc0da;margin-bottom:5px}
.tiles{display:flex;gap:7px}
.tl{flex:1;background:rgba(20,20,32,.9);border:1px solid var(--line);border-radius:10px;padding:8px 8px;display:flex;gap:7px;align-items:center;font-size:10.5px;font-weight:700;min-width:0;white-space:nowrap;overflow:hidden}
.tl .lg{width:24px;height:24px;font-size:8px;border-radius:6px}
.tl.f{background:#fff;color:#111122;box-shadow:0 0 0 2px rgba(124,92,255,.85),0 0 16px rgba(124,92,255,.55)}
.setrow{display:flex;gap:7px;margin-top:8px;max-height:0;opacity:0;overflow:hidden;transition:.45s}
.setrow.open{max-height:70px;opacity:1}
.st1{flex:1;background:rgba(20,20,32,.92);border:1px solid var(--line);border-radius:10px;padding:9px 8px;font-size:10px;font-weight:700;text-align:center;min-width:0;transition:.3s}
.st1 i{display:block;font-style:normal;font-size:16px;margin-bottom:2px}.st1 em{display:block;font-style:normal;font-weight:500;font-size:8.5px;color:var(--muted);margin-top:1px}
.st1.f{background:#fff;color:#111122;box-shadow:0 0 0 2px rgba(124,92,255,.85),0 0 16px rgba(124,92,255,.55)}.st1.f em{color:#555566}
.st1.fav i{color:var(--warn)}
.sethint{font-size:10px;color:#bfc0da;text-align:center;margin-top:5px;height:12px;opacity:0;transition:.3s}
.sethint.show{opacity:1}

/* phone specifics */
.ph .stg{position:absolute;inset:0}
.ph .row{height:54px;padding:0 10px}
.ph .row .nm{width:auto;flex:1}
.ph .row .pg{display:none}
.ph .vwrap{position:relative;height:200px;background:linear-gradient(120deg,#16254f,#3a2478 55%,#123546);overflow:hidden;margin-top:34px}
.ph .vctl{position:absolute;inset:0;background:linear-gradient(#0008,transparent 35%,transparent 60%,#000a);transition:.3s;opacity:0}
.ph .vctl.show{opacity:1}
.ph .vctl .t{position:absolute;left:10px;top:8px;font-weight:800;font-size:12px}
.ph .vctl .b{position:absolute;right:10px;bottom:10px;display:flex;gap:6px}
.ph .vctl .b div{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:15px;transition:.3s}
.ph .vctl .b div.hl{box-shadow:0 0 0 2px var(--acc);background:rgba(24,210,255,.3)}
.finger{position:absolute;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.28);border:2px solid rgba(255,255,255,.75);z-index:12;transform:translate(-50%,-50%) scale(.8);opacity:0;pointer-events:none;transition:left .7s ease,top .7s ease,opacity .25s}
.finger.show{opacity:1}
.finger.press{animation:fp .5s ease-out}
.finger.long::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:var(--warn);animation:spin 1s linear infinite}
@keyframes fp{50%{transform:translate(-50%,-50%) scale(.6)}}

/* intro card */
.intro{position:absolute;inset:0;display:grid;place-items:center;z-index:5;background:rgba(11,11,20,.55);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.5s}
.intro.show{opacity:1}
.intro .ib{text-align:center}
.intro .big{font-size:72px;color:var(--warn);filter:drop-shadow(0 0 24px rgba(255,176,32,.6));animation:pop 1.6s infinite}
@keyframes pop{50%{transform:scale(1.12) rotate(6deg)}}
.intro h3{font-size:28px;font-weight:800;margin-top:6px}.intro p{color:#cfd0e8;font-size:14px;margin-top:4px}
.ph .intro .big{font-size:56px}.ph .intro h3{font-size:20px}.ph .intro p{font-size:11px;padding:0 20px}

/* voice lab */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.vc{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px}
.vc.sel{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.vc h4{font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px}.vc h4 small{font-size:11px;color:var(--muted);font-weight:600}
.vc .ln{font-size:12.5px;color:var(--muted);line-height:1.45;font-style:italic}
.vrow{display:flex;gap:8px;flex-wrap:wrap}
.pill{padding:8px 13px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);font-size:12px;font-weight:700}
.pill.pp{background:linear-gradient(135deg,var(--violet),var(--cyan));border:0;color:#fff}
.pill.on{outline:2px solid var(--warn)}
.arch{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;font-size:13px;line-height:1.6;color:var(--muted);margin-top:14px}
.arch b{color:var(--text)}
@media(max-width:900px){.lb{grid-template-columns:1fr}.lb.phone{grid-template-columns:1fr}}

/* ---------- additions */
.two>div:first-child{flex:1 1 640px;min-width:0;max-width:720px}
.scalebox.round{border-radius:26px}
.lb .lc,.lb .rc{min-width:0}
.lb.phone .rc{width:100%}
.row.prs{background:rgba(255,255,255,.12)}
.ph .rows{position:absolute;left:10px;right:10px;top:104px}
.ph .chip.pf{box-shadow:0 0 0 2px var(--acc)}
.ph .pinfo2{padding:14px}.ph .pinfo2 h4{font-size:16px}.ph .pinfo2 small{color:var(--muted);font-size:10.5px}
.ph .pinfo2 .pr{margin-top:10px}
.ph .pinfo2 .up{margin-top:14px;font-size:10px;color:var(--muted);font-weight:800;letter-spacing:.5px}
.ph .pinfo2 .ul{margin-top:6px;background:var(--panel);border-radius:10px;padding:9px;font-size:11px}
.rems{display:flex;flex-direction:column;gap:12px}
.topic-click{cursor:pointer}
.mini{font-size:11px;color:var(--muted)}
.rows{position:relative}
.row{transition:opacity .4s,height .4s}
.row.gone{opacity:0}
.tv.inplayer .toast{bottom:auto;top:20px;transform:translate(-50%,-20px)}
.tv.inplayer .toast.show{transform:translate(-50%,0)}

/* ===== engine v1 additions ===== */
.tutroot{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text)}
.tutroot *{box-sizing:border-box}
.tutroot button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.stage .fxbox{position:absolute;inset:0}
.cr .n{font-size:10px;opacity:.7}
.row .tg{font-size:8.5px;font-weight:800;border-radius:5px;padding:2px 6px;background:rgba(124,92,255,.35);color:#cbbcff;margin-left:6px;flex:none}
.row .tg.mv{background:rgba(24,210,255,.3);color:var(--acc)}
.row .ico{display:flex;gap:6px;align-items:center;margin-left:auto;flex:none}
.row .ico b{width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:10px;font-weight:800;color:var(--muted)}
.row .ico b.eye{color:var(--ok)}.row .ico b.eyeoff{color:var(--warn);background:rgba(255,176,32,.15)}.row .ico b.lock{color:var(--bad);background:rgba(255,77,106,.15)}
.row.fcs .ico b{background:rgba(0,0,0,.08);color:#333}
.row .sb{font-size:10px;color:var(--muted);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.fcs .sb{color:#555566}
.row .val{margin-left:auto;font-size:11px;color:var(--muted);font-weight:700;flex:none}
.row.fcs .val{color:#333}
.row .tgl{margin-left:auto;width:36px;height:20px;border-radius:11px;background:rgba(255,255,255,.2);position:relative;flex:none;transition:.3s}
.row .tgl:after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.3s}
.row .tgl.on{background:linear-gradient(135deg,var(--violet),var(--cyan))}.row .tgl.on:after{left:19px}
.row .bt{margin-left:auto;border-radius:8px;padding:5px 10px;font-size:10.5px;font-weight:800;background:var(--panel2);border:1px solid var(--line);flex:none}
.row.fcs .bt{background:#e9e9f5;color:#111122}
.row.tall{height:46px}
.sbar{margin:0 0 8px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}
.sbar.has{color:var(--text);border-color:rgba(24,210,255,.5)}
.sbar i{font-style:normal;opacity:.8}
.sbar .cur{display:inline-block;width:1px;height:13px;background:var(--acc);margin-left:1px;vertical-align:middle;animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
.emptyt{color:var(--muted);font-size:13px;padding:34px 12px;line-height:1.5;text-align:center}
.pvbox .t{font-weight:800;margin-top:10px;font-size:14px}.pvbox .s{color:var(--muted);font-size:11.5px;margin-top:3px;line-height:1.4}
.pvbox .pst{margin-top:10px;display:flex;align-items:center;gap:8px;font-weight:800}
.pvbox .dot{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
/* dialog */
.dlgbg{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(500px 300px at 50% 40%,rgba(124,92,255,.18),rgba(8,8,16,.96))}
.dlg{width:min(86%,430px);background:var(--panel);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.6);text-align:left}
.ph .dlg{width:88%;padding:14px}
.dlg .dh{display:flex;gap:10px;align-items:center}.dlg .dh .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:18px;flex:none}
.dlg h4{font-size:17px;font-weight:800}.ph .dlg h4{font-size:14px}
.dlg p{color:var(--muted);font-size:12px;line-height:1.5;margin-top:8px}.ph .dlg p{font-size:10.5px}
.dlg .bs{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.dlg .b{padding:8px 14px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);font-weight:800;font-size:12px;transition:.25s}
.ph .dlg .b{font-size:10.5px;padding:7px 10px}
.dlg .b.f{background:#fff;color:#111122;box-shadow:0 0 0 2px rgba(124,92,255,.85),0 0 14px rgba(124,92,255,.5)}
.dots{display:flex;gap:10px;justify-content:center;margin:12px 0 6px}.dots i{width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,.18);transition:.2s}.dots i.on{background:var(--acc);box-shadow:0 0 8px var(--acc)}
.pad{display:grid;grid-template-columns:repeat(3,44px);gap:6px;justify-content:center;margin-top:8px}.pad b{height:30px;border-radius:9px;background:var(--panel2);display:grid;place-items:center;font-size:13px;font-weight:800;transition:.2s}.pad b.f{background:#fff;color:#111122;box-shadow:0 0 0 2px rgba(124,92,255,.85)}
.qr{width:96px;height:96px;margin:10px auto 2px;background:#fff;border-radius:10px;padding:8px;display:grid;grid-template-columns:repeat(9,1fr);gap:1px}.qr i{background:#111}.qr i.w{background:#fff}
.code{font-size:22px;font-weight:800;letter-spacing:4px;text-align:center;margin-top:6px;color:var(--acc)}
/* poster grid */
.pgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;position:relative}
.ph .pgrid{grid-template-columns:repeat(3,1fr);gap:8px}
.poster{aspect-ratio:2/3;border-radius:10px;position:relative;overflow:hidden;border:2px solid transparent;transition:.25s;display:flex;align-items:flex-end}
.poster span{font-size:10px;font-weight:800;padding:6px;background:linear-gradient(transparent,rgba(0,0,0,.85));width:100%;line-height:1.2}
.poster.f{border-color:#fff;box-shadow:0 0 0 2px rgba(124,92,255,.85),0 0 18px rgba(124,92,255,.6);transform:scale(1.05);z-index:2}
.poster em{position:absolute;right:5px;top:5px;font-style:normal;font-size:8px;font-weight:800;background:var(--warn);color:#241600;border-radius:5px;padding:1px 5px}
.rowt{font-weight:800;font-size:14px;margin:4px 0 8px}.rowt small{font-weight:500;color:var(--muted);font-size:11px;margin-left:6px}
/* multiview */
.mv{position:absolute;inset:0;background:#05050a;display:grid;gap:4px;padding:4px}
.mv.n2{grid-template-columns:1fr 1fr}.mv.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.mvt{border-radius:10px;position:relative;overflow:hidden;border:3px solid transparent;display:flex;align-items:center;justify-content:center;font-weight:800;transition:.25s}
.mvt.f{border-color:var(--acc);box-shadow:inset 0 0 0 2px rgba(255,255,255,.2)}
.mvt .snd{position:absolute;left:8px;top:8px;font-size:11px;background:rgba(0,0,0,.55);border-radius:8px;padding:3px 7px}
.mvt .nm{font-size:13px}.mvt.add{background:rgba(255,255,255,.05);flex-direction:column;color:var(--muted);gap:4px}.mvt.add b{font-size:28px;color:var(--acc)}
.mvh{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:rgba(0,0,0,.75);border-radius:10px;padding:6px 12px;font-size:10px;white-space:nowrap;z-index:3}
.ph .mvh{white-space:normal;text-align:center;width:90%;font-size:9.5px}
/* player extras */
.ov{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.9);background:rgba(0,0,0,.6);border-radius:16px;padding:12px 22px;font-size:22px;font-weight:800;opacity:0;transition:.3s;z-index:6}
.ov.show{opacity:1;transform:translate(-50%,-50%)}
.rc2{display:flex;gap:7px;flex-wrap:nowrap;overflow:hidden}
.rcc{background:rgba(20,20,32,.9);border:1px solid var(--line);border-radius:10px;padding:6px 9px;display:flex;gap:7px;align-items:center;font-size:10.5px;font-weight:700;white-space:nowrap;flex:none}.rcc .lg{width:24px;height:24px;font-size:8px;border-radius:6px}
.rcc.f{background:#fff;color:#111122;box-shadow:0 0 0 2px rgba(124,92,255,.85),0 0 16px rgba(124,92,255,.55)}
.rowwrap{max-height:0;opacity:0;overflow:hidden;transition:.45s}.rowwrap.open{max-height:90px;opacity:1;margin-top:8px}
.tl.f2{background:#fff;color:#111122}
.panel .tbar .cbtn.f{background:#fff;color:#111122;box-shadow:0 0 0 2px rgba(124,92,255,.85)}
.st1 i.gold{color:var(--warn)}
.ph .st1{padding:8px 4px}
.pcc{position:absolute;inset:0;padding:12px}
.ph .vctl .b div.hl{box-shadow:0 0 0 2px var(--acc);background:rgba(24,210,255,.3)}
.ph .bnav div.sel{color:var(--acc)}
.ph .chips{padding:4px 10px 6px}
.ph .chip{flex:none}.ph .chip.pf{box-shadow:0 0 0 2px var(--acc)}
.ph .sbar{margin:0 10px 6px}
.ph .rows{margin-top:0}
.cardk{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(500px 300px at 50% 40%,rgba(124,92,255,.22),rgba(11,11,20,.98));text-align:center}
.cardk .big{font-size:72px;filter:drop-shadow(0 0 24px currentColor);animation:pop 1.8s infinite}
.cardk h3{font-size:28px;font-weight:800;margin-top:6px}.cardk p{color:#cfd0e8;font-size:14px;margin-top:6px;max-width:520px}
.ph .cardk .big{font-size:54px}.ph .cardk h3{font-size:20px}.ph .cardk p{font-size:11px;padding:0 22px}
.gest .gi{line-height:1}
.dpad2{display:flex;gap:6px}
.lh .tile.t-ok{background:rgba(46,229,157,.14);border-color:rgba(46,229,157,.35);color:var(--ok)}
.lh .tile.t-cyan{background:rgba(0,224,255,.12);border-color:rgba(0,224,255,.35);color:var(--cyan)}
.lh .tile.t-violet{background:rgba(124,92,255,.16);border-color:rgba(124,92,255,.4);color:#b9a8ff}
.lh .tile.t-bad{background:rgba(255,77,106,.14);border-color:rgba(255,77,106,.35);color:var(--bad)}
.tutroot .lesson{max-width:none}
.pgt{font-size:11px;color:var(--muted)}

/* ===== engine v1 : layout + highlight (added) ===== */
.noanim,.noanim *{transition:none!important;animation:none!important}
.scr{position:absolute;inset:0;overflow:hidden}
.dlgc{position:absolute;inset:0;z-index:10;pointer-events:none}
.dlgc>*{pointer-events:none}
.stage .toast{z-index:20}
.stage.inpl .toast{bottom:auto;top:20px;transform:translate(-50%,-20px)}
.stage.inpl .toast.show{transform:translate(-50%,0)}
/* focus highlight (white card + violet ring), shared by every focusable */
.fcs{background:#fff!important;color:#111122!important;box-shadow:0 0 0 2px rgba(124,92,255,.85),0 0 18px rgba(124,92,255,.55)!important;z-index:3}
.fcs small,.fcs em,.fcs span,.fcs .n{color:#555566!important}
.fcs b,.fcs h4{color:#111122!important}
.poster.fcs{transform:scale(1.05);border-color:#fff;background:none!important}
.poster.fcs span{color:#fff!important;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.mvt.fcs{background:none!important;border-color:#fff;box-shadow:0 0 0 2px rgba(124,92,255,.85)!important}
.mvt.fcs .nm,.mvt.fcs .snd{color:#fff!important}
.rb2.fcs{background:#fff!important}.rb2.fcs i,.rb2.fcs span{color:#111122!important}
.cbtn.fcs{color:#111122!important}
.chip.fcs{border-radius:9px}
.holding::after{content:"";position:absolute;left:8px;bottom:4px;height:3px;border-radius:3px;background:var(--warn);box-shadow:0 0 8px var(--warn);animation:hb 1.5s linear forwards}
.pls{animation:plsA 1.1s ease-out 1}
@keyframes plsA{0%{box-shadow:0 0 0 0 rgba(24,210,255,.9)}60%{box-shadow:0 0 0 10px rgba(24,210,255,0)}100%{box-shadow:0 0 0 0 rgba(24,210,255,0)}}
.nv.pls,.chip.pls,.mi.pls{box-shadow:0 0 0 2px rgba(24,210,255,.7)}
/* TV shell */
.tvs{position:absolute;inset:0;display:flex}
.rail{width:66px;flex:none;background:#0E0E1A;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0}
.appic{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--violet),var(--cyan));display:grid;place-items:center;font-weight:900;margin-bottom:8px}
.rb2{width:54px;border-radius:11px;padding:6px 0 5px;text-align:center;color:var(--muted);font-size:8.5px;font-weight:700}
.rb2 i{display:block;font-style:normal;font-size:16px;margin-bottom:1px}
.rb2.sel{color:var(--acc);background:rgba(24,210,255,.12)}
.cont{flex:1;min-width:0;position:relative;overflow:hidden}
/* guide */
.gd{position:absolute;inset:0;display:flex}
.gd .side{width:196px;flex:none;border-right:1px solid var(--line);padding:12px 9px;background:rgba(13,13,24,.75);overflow:hidden}
.gd .mid{flex:1;min-width:0;padding:12px 10px;overflow:hidden}
.gd .mid h5{font-size:15px;font-weight:800;margin-bottom:6px}
.gd .rows{position:relative;overflow:hidden}
.gd .prev{width:210px;flex:none;padding:12px 12px 0 0}
.plp{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:12px;margin-bottom:7px}
.plp i{font-style:normal;color:var(--acc)}.plp b{flex:1;font-size:12px}.plp span{color:var(--muted)}
.cr{border:1px solid transparent}
/* vod / sports */
.vodp{position:absolute;inset:0;padding:14px 16px;overflow:hidden}
.vh{font-size:20px;font-weight:800;margin-bottom:8px}.vh small{font-size:11px;font-weight:500;color:var(--muted);margin-left:8px}
.ev{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:7px}
.ev .et{flex:1;min-width:0}.ev .et b{font-size:13px;display:block}.ev .et small{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}.ev .et small.on{color:var(--ok)}
.ev .tm{font-size:15px;font-weight:800;color:var(--acc)}
.vodp .chips{display:flex;gap:6px;margin-bottom:8px;overflow:hidden}
.vodp .chip{flex:none}
.chip{padding:6px 11px;border-radius:9px;background:var(--panel2);font-size:11px;font-weight:700;color:var(--text);flex:none;transition:.2s}
.chip.on{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#fff}
.chips{display:flex;gap:6px;overflow:hidden;white-space:nowrap}
/* settings */
.set{position:absolute;inset:0;display:flex}
.set .nav{width:176px;flex:none;padding:12px 9px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;overflow:hidden}
.set .nav h4{font-size:19px;font-weight:800;padding:0 6px 8px}
.ni{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;color:var(--muted);font-weight:600;font-size:12px;border:1px solid transparent;white-space:nowrap}
.ni i{width:14px;height:14px;border-radius:5px;background:currentColor;opacity:.5;display:inline-block;flex:none}
.ni.on{background:var(--panel2);color:var(--text);border-color:rgba(24,210,255,.45)}
.set .body{flex:1;min-width:0;padding:12px 16px;overflow:hidden;position:relative}
.set .body h3{font-size:18px;font-weight:800;margin-bottom:8px}
.sh{font-size:10px;font-weight:800;letter-spacing:.6px;color:var(--muted);text-transform:uppercase;margin:10px 0 5px}
.snote{font-size:11px;color:var(--muted);line-height:1.45;margin:2px 0 8px}
.sbtns{display:flex;gap:6px;margin:4px 0 8px;flex-wrap:wrap}
.sbtns .bt{border-radius:9px;padding:6px 11px;font-size:11px;font-weight:800;background:var(--panel2);border:1px solid var(--line)}
.sbtns .bt.pri{background:linear-gradient(135deg,var(--violet),var(--cyan));border:0;color:#fff}
.set .row,.sbody .row{background:var(--panel);border:1px solid var(--line);margin-bottom:5px;height:auto;min-height:42px;padding:6px 10px}
.row.opt .ot{flex:1;min-width:0}.row.opt .ot b{display:block;font-size:12px}.row.opt .ot small{display:block;font-size:10px;color:var(--muted);margin-top:1px}
.row.grp{height:40px;min-height:40px;padding:0 8px}
.row.grp .nm{width:auto;flex:none;max-width:150px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 10px;display:flex;gap:9px;align-items:center;min-height:50px;margin-bottom:6px;position:relative;transition:.2s}
.card .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;flex:none}
.card b{font-size:12px;display:block;line-height:1.2}.card span{font-size:10px;color:var(--muted);display:block;margin-top:2px}
.card.tp{display:inline-flex;width:calc(50% - 4px);margin-right:6px;vertical-align:top}
.card.tp:nth-of-type(2n){margin-right:0}
.vpnc{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:8px}
.vpnc b{font-size:13px;display:block}.vpnc small{font-size:10.5px;color:var(--muted);display:block;margin-top:2px}
.shield{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:20px;color:var(--muted);flex:none;transition:.4s}
.shield.up{background:rgba(46,229,157,.2);color:var(--ok);box-shadow:0 0 18px rgba(46,229,157,.5)}
.vpnc .bt{margin-left:auto;border-radius:8px;padding:6px 10px;font-size:10.5px;font-weight:800;background:var(--panel2);border:1px solid var(--line)}
.vsrv .card.sv{width:calc(50% - 4px);display:inline-flex;margin-right:6px}
/* phone shell */
.ph .phs{position:absolute;left:0;right:0;top:0;bottom:54px;overflow:hidden;padding-top:26px}
.ph .head{padding:8px 12px 6px;font-size:20px;font-weight:800}
.ph .chips{padding:2px 10px 8px}
.ph .rows{position:relative;margin:0 10px;overflow:hidden}
.ph .sbody{padding:0 10px;overflow:hidden;position:absolute;left:0;right:0;top:100px;bottom:0}
.ph .row{height:50px}.ph .row.opt{height:auto}.ph .row.grp{height:42px}
.ph .row.grp .nm{max-width:90px}
.ph .row.grp .sb{display:none}
.ph .vodp{position:absolute;inset:0;padding:30px 10px 0}
.ph .vh{font-size:18px}.ph .vh small{display:block;margin:2px 0 0}
.ph .card.tp,.ph .vsrv .card.sv{width:100%;margin-right:0;display:flex}
.ph .ev{padding:8px 10px}.ph .ev .tm{font-size:13px}
.bnav{position:absolute;left:0;right:0;bottom:0;height:54px;background:#0E0E1A;border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:center;z-index:2}
.nv{font-size:9px;color:var(--muted);text-align:center;font-weight:600;padding:4px 8px;border-radius:10px;transition:.2s}
.nv i{display:block;font-style:normal;font-size:16px;margin-bottom:1px}
.nv.sel{color:var(--acc)}
.nv.pls{background:rgba(24,210,255,.18)}
/* player: phone */
.pp{position:absolute;inset:0;overflow:hidden}
.pp .vtop{position:absolute;left:0;right:0;top:0;height:26px;background:#000;font-size:10px;padding:6px 10px;color:var(--muted);z-index:2}
.ph .vwrap{margin-top:26px}
.pinfo2 .rw{display:flex;gap:10px;align-items:center}.pinfo2 .rw .lg{width:38px;height:38px}
.pinfo2 .pr{margin-top:10px}
.pinfo2 .rc2{margin-top:6px}
.vctl.hide{opacity:0}.vctl:not(.hide){opacity:1}
.vctl .b .stb{color:var(--text)}
.menu{position:absolute;right:8px;top:8px;width:150px;background:rgba(18,18,30,.96);border:1px solid var(--line);border-radius:12px;padding:5px;z-index:4;transition:.3s}
.menu.hide{opacity:0;transform:translateY(-8px)}
.mi{padding:7px 9px;border-radius:8px;font-size:10px;font-weight:700;transition:.2s}
.mi .ft{display:inline}
.ph .st1{padding:8px 4px}
.hide{pointer-events:none}
.pl .panel .tiles{gap:7px}
.rowwrap .rv{margin-bottom:5px}
/* ---------- lesson card shell sizing ---------- */
.tutroot{position:absolute;transform-origin:0 0}
.tutroot .lesson{margin:0;width:100%;border-radius:20px}
.tutroot.wide .lb{grid-template-columns:minmax(0,1fr) 220px}
.tutroot.tall .lb{grid-template-columns:1fr}
.tutroot.dph .lb{grid-template-columns:1fr;justify-items:center}
.tutroot.dph.wide .lb{grid-template-columns:auto minmax(0,1fr);justify-items:stretch;align-items:start}
.tutroot.dph .lc{display:flex;justify-content:center}
.tutroot.dph .scalebox{border-radius:26px;border:6px solid #05050a;box-shadow:0 0 0 2px #2a2a3a}
.tutroot .scalebox{border-radius:12px}
.m-app .lesson{border-radius:0;border:0;box-shadow:none;background:var(--bg)}
.lc>.cap,.lc>.ctl,.lc>.try,.lc>.hint{width:100%}
.dph .rc .cap,.dph .rc .ctl,.dph .rc .try{width:100%}
.rc .gest{margin-top:0}
.ctl .spd{font-size:12px;font-weight:800;width:48px}
.ctl .ccb{font-size:11px;font-weight:800}
.ph .rows{top:0!important;left:0;right:0}
.nv{padding:4px 5px}
.ph .bnav{justify-content:space-between;padding:0 6px}
.ph .gd .rows,.ph .phs .rows{margin:0 10px}
/* ---------- app-mode stability + compact phone portrait ---------- */
.m-app .try{display:flex;visibility:hidden}
.m-app .try.show{visibility:visible}
.m-app .cap{min-height:96px}
.tutroot.tall .gest{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 10px;margin-top:8px;text-align:left}
.tutroot.tall .gest .gi{font-size:26px}
.tutroot.tall .gest b{margin-top:0;font-size:13px}
.tutroot.tall .gest>div{display:block}

/* ---------- personalised data: real channel logos + poster art ---------- */
.lg{position:relative;overflow:hidden}
.lg.img{color:transparent}
.lg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:2px;background:rgba(255,255,255,.16);box-sizing:border-box}
.poster .pim{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster span{position:relative;z-index:1}
.poster em{z-index:2}

/* ================= v2 (app 1.4.11): EPG time-grid guide, Who's watching, profile cards, richer dialogs, notice banner ================= */
.gd2{position:absolute;inset:0;display:flex}
.gcats{width:178px;flex:none;border-right:1px solid var(--line);background:rgba(13,13,24,.82);overflow:hidden;transition:width .35s,opacity .35s,padding .35s;padding:10px 8px}
.gcats.fold{width:10px;padding:0;opacity:.7;background:rgba(124,92,255,.35)}
.gcats.fold .gcin{opacity:0}
.gcin{transition:opacity .2s}
.gh{font-size:13px;font-weight:800;margin:2px 4px 8px}
.gcats .cr{font-size:11.5px;padding:6px 9px}
.gmain{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.gtop{display:flex;gap:12px;padding:10px 12px 8px;align-items:stretch}
.gtop .vid{width:150px;height:84px;flex:none}
.ginfo{flex:1;min-width:0;padding-top:2px}
.ginfo .t{font-weight:800;font-size:14px}.ginfo .s{color:var(--muted);font-size:11px;margin-top:3px;line-height:1.4}
.ptag{display:inline-block;margin-top:6px;font-size:9.5px;font-weight:800;border-radius:6px;padding:2px 7px;background:rgba(0,224,255,.16);color:var(--cyan)}
.ghead{display:flex;align-items:flex-end;padding:0 12px;height:22px;position:relative}
.gch{width:212px;flex:none;font-size:11px;font-weight:800;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px}
.gts{flex:1;font-size:10px;color:var(--muted);font-weight:700;border-left:1px solid var(--line);padding-left:5px}
.grows{flex:1;padding:2px 12px 0;overflow:hidden;position:relative}
.grow{display:flex;height:44px;align-items:center;border-radius:9px;margin-bottom:1px;position:relative}
.gc{width:212px;flex:none;display:flex;align-items:center;gap:8px;padding:0 6px 0 4px;height:100%;border-radius:9px}
.gc .no{width:16px;font-size:10px;color:var(--muted)}
.gc .lg{width:28px;height:28px;font-size:9px}
.gc .star{margin-left:auto;color:var(--warn);font-size:13px;opacity:0;transform:scale(.3);transition:.35s}.gc .star.on{opacity:1;transform:scale(1)}
.cn2{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;line-height:1.15}
.cn2 b{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn2 small{font-size:9px;color:var(--cyan);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gt{flex:1;position:relative;height:38px;min-width:0;overflow:hidden;border-radius:7px;background:rgba(255,255,255,.03)}
.gb{position:absolute;top:2px;bottom:2px;border-radius:7px;background:var(--panel2);border:1px solid var(--line);padding:3px 7px;overflow:hidden;box-sizing:border-box;transition:left .3s,width .3s}
.gb b{display:block;font-size:10.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gb small{display:block;font-size:8.5px;color:var(--muted);margin-top:1px;white-space:nowrap}
.gb.cur{background:linear-gradient(135deg,rgba(124,92,255,.35),rgba(0,224,255,.18));border-color:rgba(124,92,255,.6)}
.gb.past{opacity:.62}
.gb .bar{position:absolute;left:6px;right:6px;bottom:3px;height:2px;background:rgba(255,255,255,.14);border-radius:2px}.gb .bar i{display:block;height:100%;background:var(--acc);border-radius:2px}
.gb.pf{background:#fff;color:#111122;box-shadow:0 0 0 2px rgba(124,92,255,.85),0 0 14px rgba(124,92,255,.5);z-index:3;opacity:1}
.gb.pf small,.gb.pf b{color:#111122}
.gnow{position:absolute;top:0;bottom:0;width:2px;background:var(--bad);box-shadow:0 0 6px var(--bad);z-index:2}
.grow.fcs{background:rgba(255,255,255,.1)!important;color:inherit!important;box-shadow:inset 0 0 0 2px rgba(124,92,255,.85)!important}
.grow.fcs *{color:inherit}
.grow.fcs .cn2 b{color:#fff!important}.grow.fcs .cn2 small{color:var(--cyan)!important}.grow.fcs .no{color:#ccc!important}
.gb.fcs{background:#fff!important;color:#111122!important}.gb.fcs b{color:#111122!important}.gb.fcs small{color:#555566!important}
.cr.fcs{background:#fff!important}
.ph .hdr{display:flex;align-items:center;justify-content:space-between}
.rfb{font-size:10px;font-weight:800;color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:5px 9px}
/* who's watching */
.who{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#0B0B14}
.appic.big{width:46px;height:46px;font-size:22px;margin:0}
.who h3{font-size:24px;font-weight:800}.ph .who h3{font-size:18px}
.wts{display:flex;gap:12px}
.wt{width:120px;border-radius:16px;padding:12px 6px 6px;text-align:center;border:2px solid transparent;transition:.25s}
.wt .av{margin:0 auto 8px;width:64px;height:64px;font-size:26px}
.ph .wt{width:74px}.ph .wt .av{width:46px;height:46px;font-size:19px}.ph .wts{gap:6px}
.wt b{display:block;font-size:13px;font-weight:700}
.wt em{display:inline-block;font-style:normal;font-size:9px;font-weight:800;border-radius:6px;padding:2px 7px;background:rgba(0,224,255,.2);color:var(--cyan);margin-top:5px}.wt em.e{background:none;color:transparent}
.wt.on{border-color:rgba(255,255,255,.35)}
.wt.fcs{background:#fff!important;box-shadow:0 0 0 2px rgba(124,92,255,.85),0 0 18px rgba(124,92,255,.55)!important}.wt.fcs b{color:#111122!important}
.av{border-radius:50%;display:grid;place-items:center;font-weight:900;color:#fff;flex:none}
.av.add{background:none;border:2px solid var(--muted);color:var(--muted);font-weight:500}
.who .bt{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:7px 16px;font-size:12px;font-weight:800}
.row.prf{height:auto;min-height:52px;padding:7px 10px;gap:12px}
.row.prf .av{width:36px;height:36px;font-size:15px}
.row.prf .ot{flex:1;min-width:0}.row.prf .ot b{display:block;font-size:12.5px}.row.prf .ot small{display:block;font-size:10px;color:var(--muted)}
.chrow{margin:2px 0 8px}.chrow small{display:block;font-size:10.5px;color:var(--muted);margin:0 0 5px 2px;font-weight:600}
.chips.wrap{flex-wrap:wrap;white-space:normal;gap:5px}
/* dialog extras */
.dseg{display:flex;gap:0;margin-top:12px;background:var(--panel2);border-radius:10px;padding:3px;border:1px solid var(--line)}
.dseg div{flex:1;text-align:center;font-size:11.5px;font-weight:700;padding:6px 4px;border-radius:8px;color:var(--muted);transition:.2s}
.dseg div.on{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#fff}
.dseg div.fcs{box-shadow:0 0 0 2px #fff!important}
.dlab{font-size:10.5px;color:var(--muted);font-weight:600;margin:9px 0 3px}
.dfd{margin:10px 0 0;border-radius:10px}.dlab+.dfd{margin-top:0}
.dfd.fcs{background:#fff!important;color:#111122!important}.dfd.fcs .q{color:#111122!important}
.dchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.dchips .chip{font-size:10.5px;padding:6px 10px}
.ph .dchips .chip{font-size:9.5px;padding:5px 8px}
.dchips .chip.on{background:linear-gradient(135deg,var(--violet),var(--cyan))}
.dchips .chip.fcs{background:#fff!important;color:#111122!important}
.dmsg{margin-top:11px;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:10px 12px;font-size:11px;line-height:1.55;color:var(--text);transition:.3s}
.dmsg.fcs{box-shadow:0 0 0 2px rgba(24,210,255,.8)!important;background:var(--panel2)!important;color:var(--text)!important}
.ph .dmsg{font-size:9.5px;padding:8px 9px}
.dlg p.small{font-size:10px;margin-top:7px;opacity:.85}
.dbul{margin-top:10px;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:9px 12px;font-size:11px;line-height:1.6;color:#D7D9EA}
.dbul.fcs{box-shadow:0 0 0 2px rgba(24,210,255,.8)!important;background:var(--panel2)!important;color:#D7D9EA!important}
.ph .dbul{font-size:9.5px}
.dlg .bs.stack{flex-direction:column}
.dlg .bs.stack .b{text-align:left}
/* provider notice banner */
.bnr{position:absolute;top:14px;right:14px;max-width:330px;z-index:25;background:#1C1C2B;border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:10px 12px;display:flex;gap:10px;align-items:center;box-shadow:0 12px 36px rgba(0,0,0,.55);opacity:0;transform:translateY(-16px);transition:.4s;pointer-events:none}
.bnr.show{opacity:1;transform:translateY(0)}
.bnr .bi{width:30px;height:30px;border-radius:9px;background:rgba(255,176,32,.2);color:var(--warn);display:grid;place-items:center;flex:none}
.bnr b{display:block;font-size:12px}.bnr small{display:block;font-size:10.5px;color:var(--muted);margin-top:1px;line-height:1.35}
.bnr .bx{margin-left:auto;color:var(--muted);font-size:12px}
.ph .bnr{left:10px;right:10px;max-width:none;top:10px}
.rb2 i{font-size:15px}
.rail{gap:2px;padding:8px 0}
.rb2{padding:5px 0 4px}

/* ---- player 1.5.49 ---- */
.pl .panel{padding:0 26px 10px;background:linear-gradient(transparent,rgba(7,7,16,.9) 22%,rgba(7,7,16,.97))}
.ptop{position:absolute;left:24px;top:18px;display:flex;gap:6px;z-index:3;transition:.35s}.ptop.hide{opacity:0}
.ptg{font-size:10px;font-weight:800;border-radius:6px;padding:3px 8px;letter-spacing:.3px}
.ptg.lv{background:var(--bad);color:#fff}.ptg.am{background:var(--warn);color:#000}.ptg.mv{background:rgba(255,255,255,.33);color:#fff}
.pin2{display:flex;gap:12px;align-items:center;padding-top:40px}
.pin2 .lg.big{width:46px;height:46px;font-size:12px;border-radius:11px}
.pl2{flex:1;min-width:0}
.pl2 .gl{font-size:9.5px;font-weight:800;color:var(--cyan);letter-spacing:.4px}
.pl2 h4{font-size:22px;font-weight:800;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl2{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--muted);margin-top:1px}.tl2 b{color:#fff}
.tl2 em{font-style:normal;font-size:8.5px;font-weight:800;background:rgba(255,255,255,.14);color:#fff;border-radius:4px;padding:1px 5px}
.ds2{font-size:11px;color:#d3d5e8;line-height:1.4;margin:3px 0 2px;max-height:31px;overflow:hidden}
.nx2{font-size:10.5px;color:var(--muted)}.nx2 b{color:#fff}
.ctlrow{max-height:0;opacity:0;overflow:hidden;transition:.45s}.ctlrow.open{max-height:150px;opacity:1;margin-top:8px}
.pbar{position:relative;height:5px;border-radius:3px;background:rgba(255,255,255,.27);margin:4px 0 3px}
.pbar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:.5s}.pbar i.am{background:var(--warn)}
.pbar u{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);transition:.5s}
.pln{display:flex;font-size:10px;color:var(--muted);align-items:center}.pln span{flex:1}.pln span:last-child{text-align:right}
.pln b{font-weight:800}.pln b.lv,.tlft b.lv{color:var(--ok)}.pln b.am,.tlft b.am{color:var(--warn)}
.trow{display:flex;align-items:flex-start;margin-top:6px}
.tlft{width:96px;flex:none}.tlft b{display:block;font-size:16px;font-weight:800}.tlft small{font-size:9.5px;color:var(--muted)}
.tbs{flex:1;display:flex;justify-content:center;gap:6px}
.tb{width:36px;text-align:center;transition:.25s}
.tb b{width:28px;height:28px;margin:0 auto;border-radius:50%;background:rgba(27,27,46,.55);display:grid;place-items:center;font-size:11px;position:relative;transition:.25s}
.tb b i{position:absolute;font-style:normal;font-size:6px;font-weight:800;top:11px}
.tb small{display:block;font-size:7.5px;color:#d7d9ea;margin-top:2px;white-space:nowrap}
.tb.big{width:46px}.tb.big b{width:40px;height:40px;background:#2B2760;font-size:13px}
.tb.dis{opacity:.32}
.tb.fcs{background:none!important;box-shadow:none!important}.tb.fcs b{background:#fff;color:#111122;box-shadow:0 0 0 2px rgba(124,92,255,.85),0 0 16px rgba(124,92,255,.55)}
.tb.fcs small{color:#fff!important}
.tpls{display:flex;gap:5px;padding-top:3px}
.tpl{position:relative;font-size:9.5px;font-weight:800;border-radius:14px;padding:6px 9px;background:rgba(27,27,46,.55);display:flex;align-items:center;gap:5px;white-space:nowrap}
.tpl i{width:7px;height:7px;border-radius:50%}.tpl i.g{background:var(--ok)}.tpl i.r{background:var(--bad)}
.tpl.dis{opacity:.4}.tpl em{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-style:normal;font-size:6.5px;color:var(--warn)}
.tpl.fcs em{color:var(--warn)!important}
.phelp{font-size:9.5px;color:#c9cce0;text-align:center;margin-top:5px}
.rcc span{display:flex;flex-direction:column;line-height:1.15}.rcc span small{font-size:8px;color:var(--muted);font-weight:600}
.rcc.rg b{width:24px;height:24px;border-radius:6px;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:12px}
.rowwrap.open{max-height:110px}
.pbdg{position:absolute;left:20px;top:18px;background:rgba(0,0,0,.8);border-radius:10px;padding:6px 12px;font-size:12px;font-weight:800;color:var(--warn);z-index:2;transition:.3s}.pbdg.hide{opacity:0}
/* phone player: full-screen video, controls overlay, menu dialog */
.pp .vwrap.full{position:absolute;inset:0;margin:0;height:auto;background:linear-gradient(120deg,#16254f,#3a2478 55%,#123546)}
.pp .vctl{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.6),transparent 20%,transparent 30%,rgba(7,7,16,.95) 55%);transition:.3s;z-index:2}
.pp .vctl .vtg{position:absolute;left:10px;top:34px;display:flex;gap:4px}
.pp .vctl .b{position:absolute;right:8px;top:30px;bottom:auto;display:flex;gap:4px}
.pp .vctl .b div{width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:11px;font-weight:800;transition:.3s}
.pp .vbot{position:absolute;left:0;right:0;bottom:0;padding:0 10px 10px}
.pp .pin2{padding-top:0}.pp .pl2 h4{font-size:16px}.pp .pin2 .lg.big{width:34px;height:34px;font-size:9px}
.pp .tl2{font-size:9px;flex-wrap:wrap;gap:4px}.pp .ds2{font-size:9px;max-height:25px}.pp .nx2{font-size:8.5px}
.pp .tlft{width:52px}.pp .tlft b{font-size:12px}.pp .tbs{gap:2px}.pp .tb{width:30px}.pp .tb b{width:24px;height:24px;font-size:9px}.pp .tb.big b{width:32px;height:32px}
.pp .tb small{font-size:6.5px}.pp .pln{font-size:7.5px}
.pp .rv{font-size:8px;margin:8px 0 4px;color:#bfc0da;font-weight:800}.pp .rcc{padding:4px 6px;font-size:9px}.pp .rcc .lg{width:20px;height:20px}
.menu2{position:absolute;left:6px;right:6px;top:50%;transform:translateY(-50%);background:var(--panel);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:10px;z-index:5;transition:.3s;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.menu2.hide{opacity:0;transform:translateY(-46%);pointer-events:none}
.menu2 .mh b{display:block;font-size:13px;font-weight:800}.menu2 .mh small{font-size:9px;color:var(--muted)}
.menu2 .mg{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:8px}
.menu2 .mi{display:flex;gap:6px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:6px;transition:.25s}
.menu2 .mi i{font-style:normal;font-size:12px;width:16px;text-align:center}.menu2 .mi b{display:block;font-size:8.5px;line-height:1.15}.menu2 .mi small{display:block;font-size:7px;color:var(--muted)}
.pp .ov{z-index:6}
.pp .vbot{padding:0 16px 12px 12px}.pp .vctl .b{right:16px}.pp .vctl .b div{width:25px;height:25px;font-size:10px}
.pp .pln span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pp .pln span:first-child{max-width:60px}.pp .pln b{padding:0 4px;white-space:nowrap}
.pp .tlft{width:44px}.pp .trow{margin-top:4px}
/* ---- sign in ---- */
.lgn2{position:absolute;inset:0;display:flex;background:radial-gradient(circle at 20% 10%,rgba(124,92,255,.18),transparent 50%),var(--bg)}
.lgl{flex:1.15;padding:34px 36px;overflow:hidden}.lgr{flex:1;margin:26px 26px 26px 0;border-radius:18px;background:var(--panel);border:1px solid var(--line);text-align:center;padding:24px 22px}
.lgn2 h3,.lgn h3{font-size:22px;font-weight:800}.lsub{font-size:11px;color:var(--muted);margin:4px 0 12px;line-height:1.45}
.lgr h4{font-size:18px;font-weight:800}.lgr p{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.45}.lgr .code{font-size:20px;font-weight:800;letter-spacing:2px;margin-top:6px;color:var(--acc)}.lgr small{font-size:10px;color:var(--muted)}
.lgr .qr{width:110px;height:110px}
.dlab{font-size:10.5px;color:var(--muted);margin:8px 0 4px;font-weight:600}
.bt.wide{margin-top:10px;text-align:center;border-radius:10px;padding:8px;font-size:11px;font-weight:800;background:var(--panel2);border:1px solid var(--line)}
.lfull{margin-top:10px}.lfull b{font-size:11px;display:block;margin-bottom:5px}
.ldev{display:flex;align-items:center;justify-content:space-between;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:6px 9px;margin-bottom:4px;font-size:11px}
.ldev .bt{border-radius:8px;padding:4px 9px;font-size:10px;font-weight:800;background:var(--panel2);border:1px solid var(--line)}
.bill{border-radius:13px;background:rgba(255,77,106,.12);border:1px solid rgba(255,77,106,.55);padding:11px 12px;margin-bottom:8px}
.bill .bt1{display:flex;align-items:center}.bill .bt1 b{flex:1;font-size:13px}.bill .bt1 i{font-style:normal;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:10px}
.bill p{font-size:10.5px;color:#d3d5e8;margin:3px 0 6px;line-height:1.4}
.bl2{display:flex;gap:10px;align-items:center;font-size:10px;color:var(--muted)}.bl2 u{display:block;text-decoration:none;color:var(--acc);font-weight:800;font-size:11px;margin-top:2px}
.bl2 .qr.sm{width:62px;height:62px;margin:0;padding:4px}
.lgn{padding:34px 14px 0!important;bottom:0!important}.lgn .bl2{flex-wrap:wrap}.lgn .bl2 .bt{border-radius:8px;padding:5px 12px;font-size:10px;font-weight:800;background:var(--panel2);border:1px solid var(--line)}
/* ---- movie / show page ---- */
.dtl{position:absolute;inset:0;padding:12px 18px;overflow:hidden;background:linear-gradient(rgba(60,40,120,.25),var(--bg) 60%)}
.dtl .bk{display:inline-block;border-radius:9px;padding:5px 11px;font-size:10.5px;font-weight:800;background:var(--panel2);border:1px solid var(--line)}
.dtop{display:flex;gap:16px;margin-top:10px}.dpo{width:110px;aspect-ratio:2/3;border-radius:12px;flex:none}.ph .dpo{width:76px}
.dmeta{flex:1;min-width:0}.dmeta h3{font-size:22px;font-weight:800}.ph .dmeta h3{font-size:16px}
.dm{font-size:10.5px;color:var(--muted);margin-top:2px}.dmeta p{font-size:11px;line-height:1.45;margin-top:6px;color:var(--text)}
.dbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.dbs .bt{border-radius:9px;padding:6px 10px;font-size:10.5px;font-weight:800;background:var(--panel2);border:1px solid var(--line)}
.dbs .bt.pri{background:linear-gradient(135deg,var(--violet),var(--cyan));border:0;color:#fff}.ph .dbs .bt{font-size:9px;padding:5px 7px}
.dseas{margin:12px 0 6px}
.eprow{display:flex;gap:6px;margin-bottom:5px}.ep{flex:1;display:flex;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:8px 10px;font-size:11px}
.ep b{width:20px;color:var(--muted)}.ep span{flex:1;font-weight:700}.ep small{color:var(--muted)}.ep em{font-style:normal;font-size:8px;font-weight:800;background:var(--acc);color:#05202a;border-radius:4px;padding:1px 5px}
.epr{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:8px 10px;font-size:10px;font-weight:700;color:var(--muted);display:grid;place-items:center;white-space:nowrap}
/* ---- movies side list, sort chips, added bubble ---- */
.vside{position:absolute;left:0;top:0;bottom:0;width:150px;border-right:1px solid var(--line);padding:12px 8px;background:rgba(13,13,24,.75)}
.vside h5{font-size:15px;font-weight:800;padding:0 6px 6px}
.vodp.vwith{left:150px}.vwith .pgrid{grid-template-columns:repeat(5,1fr)}
.vsort{align-items:center;margin-bottom:8px}.vsort small{font-size:10px;color:var(--muted);font-weight:800;margin:0 2px 0 6px}.vsort .chip{font-size:9.5px;padding:4px 8px}
.ph .vsort{flex-wrap:wrap;row-gap:4px}
.addb{position:absolute;left:4px;top:4px;z-index:3;background:rgba(0,0,0,.8);color:#fff;font-size:8px;font-weight:800;border-radius:6px;padding:2px 6px}
/* ---- guide preview description ---- */
.gd3{font-size:10px;color:#d3d5e8;line-height:1.4;margin-top:3px;max-height:28px;overflow:hidden}.gnx{font-size:9.5px;color:var(--muted);margin-top:2px}.gnx b{color:#fff}
/* ---- favourites rows, support chat ---- */
.row.frow{gap:9px}.row.frow .lg{width:24px;height:24px;font-size:8px}.row.frow .nm{flex:1;font-size:12px;font-weight:700}
.row.frow.mvg{box-shadow:0 0 0 2px var(--warn)}
.chat{background:var(--panel);border:1px solid rgba(24,210,255,.4);border-radius:12px;padding:10px;margin-bottom:8px}
.chh b{font-size:12.5px;display:block}.chh small{font-size:9.5px;color:var(--muted)}
.cm{max-width:78%;border-radius:11px;padding:6px 9px;font-size:10.5px;margin-top:6px;line-height:1.35}.cm small{display:block;font-size:8px;font-weight:800;opacity:.7}
.cm.them{background:var(--panel2)}.cm.me{margin-left:auto;background:rgba(24,210,255,.18)}
.crep{display:flex;gap:6px;margin-top:8px;align-items:center}.crep .sbar{flex:1;margin:0}.crep .bt{border-radius:9px;padding:6px 10px;font-size:10.5px;font-weight:800;background:linear-gradient(135deg,var(--violet),var(--cyan));color:#fff;white-space:nowrap}
.rb2.rfr{margin-top:auto}
.fnd{position:absolute;inset:0;padding:12px 16px;overflow:hidden}.ph .fnd{padding:30px 10px 0}
.fh{display:flex;align-items:center;gap:8px;margin-bottom:8px}.fh b{font-size:16px;font-weight:800;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fh small{font-size:9px;color:var(--muted)}
.ph .fh{flex-wrap:wrap}.ph .fh small{order:3;width:100%}
.fh .bt,.frw .bt{border-radius:9px;padding:5px 10px;font-size:10px;font-weight:800;background:var(--panel2);border:1px solid var(--line);white-space:nowrap}
.fsec{font-size:10px;font-weight:800;color:var(--muted);margin:10px 0 5px;letter-spacing:.5px}
.frw{display:flex;gap:6px;align-items:center}.row.fr{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:11px;height:44px;gap:9px}
.row.fr .nm{font-size:12px;font-weight:700}.row.fr .nm small{display:block;font-size:9.5px;color:var(--muted);font-weight:500}
.fg{grid-template-columns:repeat(7,1fr)}.ph .fg{grid-template-columns:repeat(3,1fr)}
.fnd .chips{margin-bottom:4px}
.phs .ep{min-width:0;gap:6px}.phs .ep span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.phs .epr{padding:8px 8px}
.phs .ep small{display:none}

/* ---- 1.6.37 skin: compact icon rail, names slide out on Left (matches MainActivity Rail: 52dp / 184dp) ---- */
.tvs{padding-left:46px}
.rail{position:absolute;left:0;top:0;bottom:0;width:46px;z-index:8;background:rgba(8,8,16,.85);border-right:none;gap:2px;padding:8px 0;transition:width .16s ease,background .16s}
.appic{width:24px;height:24px;border-radius:7px;font-size:12px;margin-bottom:6px;display:flex;align-items:center;justify-content:center;gap:8px}
.appic span{display:none}
.rb2{width:38px;height:26px;border-radius:9px;padding:0;display:flex;align-items:center;justify-content:center;gap:10px;font-size:11px}
.rb2 i{font-size:14px;margin:0;line-height:1}
.rb2 span{display:none;white-space:nowrap}
.rb2.sel{color:#0B0B14;background:linear-gradient(135deg,var(--violet),var(--cyan))}
.rail.wide{width:150px;align-items:stretch;background:rgba(8,8,16,.98);border-radius:0 12px 12px 0;box-shadow:12px 0 28px rgba(0,0,0,.6)}
.rail.wide .appic{width:auto;background:none;justify-content:flex-start;padding-left:10px}
.rail.wide .appic b{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,var(--violet),var(--cyan));display:grid;place-items:center;flex:none}
.rail.wide .appic span{display:inline;font-size:11px;font-weight:800;color:var(--text,#fff)}
.rail.wide .rb2{width:auto;margin:0 5px;justify-content:flex-start;padding-left:10px;color:var(--text,#fff)}
.rail.wide .rb2 span{display:inline}
.rail.wide .rb2.sel{color:#0B0B14}
.rail.wide .rb2.rfr{margin-top:auto}