/* IPTV Channels — phone app (2026-10-13). Since 5 Nov 2026: a late-90s portable DVD player / Discman look (skin at the end).
   Silver brushed aluminium in light mode, gunmetal in dark mode; the display strips are always dark VFD glass. */
:root{--bg:#c3c7cc;--cell:#dfe2e6;--label:#16181b;--sec:rgba(22,24,27,.64);--ter:rgba(22,24,27,.32);--sep:rgba(0,0,0,.16);--fill:rgba(0,0,0,.075);
  --tint:#b85406;--green:#1d9e47;--red:#d8322a;--bar:#cfd2d6;--barline:rgba(0,0,0,.3);--top:env(safe-area-inset-top);--bottom:env(safe-area-inset-bottom);
  --m1:#e2e5e8;--m2:#c3c7cc;--m3:#a7acb3;--grain-a:rgba(255,255,255,.34);--grain-b:rgba(0,0,0,.045);--sheen:rgba(255,255,255,.55);
  --key1:#fbfbfc;--key2:#c9cdd2;--key-edge:#8a9097;--key-ink:#202328;--key-dim:#4b5058;--hi:rgba(255,255,255,.95);--lo:rgba(0,0,0,.2);
  --panel1:#eceef0;--panel2:#d6d9dd;--tray:#9aa0a7;--well:#f4f5f6;--acc1:#ffb453;--acc2:#e7720c;--acc-edge:#8f4304;--acc-ink:#2b1300}
@media (prefers-color-scheme:dark){:root{--bg:#1b1e22;--cell:#272b30;--label:#e9ebee;--sec:rgba(233,235,238,.62);--ter:rgba(233,235,238,.3);--sep:rgba(0,0,0,.5);
  --fill:rgba(255,255,255,.07);--tint:#ffa94a;--green:#30d158;--red:#ff453a;--bar:#202327;--barline:rgba(0,0,0,.6);
  --m1:#33373d;--m2:#202328;--m3:#16181b;--grain-a:rgba(255,255,255,.035);--grain-b:rgba(0,0,0,.18);--sheen:rgba(255,255,255,.06);
  --key1:#4d525a;--key2:#2b2f34;--key-edge:#0b0c0e;--key-ink:#e8eaed;--key-dim:#a3a9b1;--hi:rgba(255,255,255,.13);--lo:rgba(0,0,0,.55);
  --panel1:#2d3136;--panel2:#24272c;--tray:#111315;--well:#2b2e33;--acc1:#ffb453;--acc2:#e2700c;--acc-edge:#6e3302;--acc-ink:#241000}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--label);font:17px/1.29 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overscroll-behavior:none}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.hidden{display:none!important}

.screen{position:fixed;inset:0;display:none}
.screen.on{display:block}
.scroll{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(var(--top) + 44px) 0 calc(var(--bottom) + 96px)}
.nav{position:fixed;top:0;left:0;right:0;z-index:5;height:calc(var(--top) + 44px);padding-top:var(--top);display:flex;align-items:center;justify-content:center;
  background:transparent;transition:background .2s,border-color .2s;border-bottom:.5px solid transparent}
.nav-small{font-weight:600;font-size:17px;opacity:0;transition:opacity .15s}
.screen.scrolled .nav{background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom-color:var(--barline)}
.screen.scrolled .nav-small{opacity:1}
.large{font-size:34px;line-height:41px;font-weight:700;letter-spacing:.37px;margin:2px 16px 6px}
.caption{color:var(--sec);font-size:13px;margin:6px 32px 8px;line-height:18px}
.footnote{color:var(--sec);font-size:13px;line-height:18px;margin:14px 32px}

/* inset grouped list */
.group{list-style:none;margin:8px 16px 24px;padding:0;background:var(--cell);border-radius:10px;overflow:hidden}
.group:empty{display:none}
.row{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 16px;position:relative}
.row+.row::before{content:"";position:absolute;top:0;left:68px;right:0;border-top:.5px solid var(--sep)}
.row.plain+.row.plain::before{left:16px}
.logo{width:40px;height:40px;border-radius:9px;flex:none;background:var(--fill);object-fit:contain;display:grid;place-items:center;
  font-size:15px;font-weight:600;color:var(--sec);overflow:hidden}
.logo img{width:100%;height:100%;object-fit:contain}
.txt{flex:1;min-width:0}
.title{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{font-size:13px;color:var(--sec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.num{font-variant-numeric:tabular-nums}
.tier{display:inline-block;font-size:11px;font-weight:600;color:var(--sec);border:1px solid var(--ter);border-radius:4px;padding:0 4px;margin-left:4px;line-height:15px;vertical-align:1px}
.kv{justify-content:space-between;min-height:44px}
.kv .v{color:var(--sec)}
.empty{padding:28px 20px;text-align:center;color:var(--sec);font-size:15px}

/* iOS switch */
.sw{position:relative;width:51px;height:31px;flex:none}
.sw input{position:absolute;opacity:0;inset:0;margin:0}
.sw span{position:absolute;inset:0;border-radius:31px;background:var(--fill);transition:background .25s}
.sw span::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);transition:transform .25s cubic-bezier(.3,.7,.4,1)}
.sw input:checked+span{background:var(--green)}
.sw input:checked+span::after{transform:translateX(20px)}

/* search field + segmented control */
.searchbar{display:flex;align-items:center;gap:6px;margin:4px 16px 10px;height:36px;padding:0 8px;background:var(--fill);border-radius:10px}
.searchbar svg{width:17px;height:17px;fill:var(--sec);flex:none}
.searchbar input{flex:1;border:0;background:transparent;font:inherit;font-size:17px;color:var(--label);outline:none;-webkit-appearance:none;min-width:0}
.searchbar input::placeholder{color:var(--sec)}
.searchbar input::-webkit-search-cancel-button{-webkit-appearance:none}
.segmented{display:flex;margin:0 16px 4px;padding:2px;background:var(--fill);border-radius:9px}
.segmented button{flex:1;height:28px;font-size:13px;min-width:0;font-weight:500;border-radius:7px}
.segmented button.on{background:var(--cell);box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);font-weight:600}
@media (prefers-color-scheme:dark){.segmented button.on{background:#636366}}

/* big button */
.primary{display:block;width:calc(100% - 32px);margin:4px 16px 0;height:50px;border-radius:12px;background:var(--tint);color:#fff;font-size:17px;font-weight:600}
.primary:active{opacity:.7}
.primary[disabled]{opacity:.45}
.spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:r .8s linear infinite;vertical-align:-3px;margin-right:8px}
@keyframes r{to{transform:rotate(360deg)}}

/* tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;padding:0 0 var(--bottom);height:calc(49px + var(--bottom));
  background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid var(--barline)}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#999;font-size:10px;font-weight:500;position:relative}
.tabbar svg{width:26px;height:26px;fill:currentColor}
.tabbar button.on{color:var(--tint)}
.dot{position:absolute;top:5px;left:calc(50% + 9px);width:9px;height:9px;border-radius:50%;background:var(--red)}

/* toast + setup sheet */
.toast{position:fixed;left:50%;bottom:calc(var(--bottom) + 64px);transform:translateX(-50%);z-index:9;background:rgba(30,30,30,.92);color:#fff;
  font-size:15px;padding:10px 16px;border-radius:20px;max-width:calc(100% - 48px);text-align:center;transition:opacity .2s}
.sheet-bg{position:fixed;inset:0;z-index:10;background:rgba(0,0,0,.4);display:flex;align-items:flex-end}
.sheet{width:100%;background:var(--bg);border-radius:12px 12px 0 0;padding:22px 20px calc(var(--bottom) + 24px)}
.sheet h2{margin:0 0 8px;font-size:22px}
.sheet p{color:var(--sec);font-size:15px;margin:8px 0}
.sheet ol{padding-left:20px;font-size:16px;line-height:1.6}

/* reordering (Edit / Done) */
.nav-btn{position:absolute;right:16px;bottom:11px;color:var(--tint);font-size:17px}
.nav-btn.done{font-weight:600}
.handle{width:44px;height:44px;margin-right:-10px;flex:none;display:none;align-items:center;justify-content:center;touch-action:none;cursor:grab}
.handle svg{width:22px;height:22px;fill:var(--ter)}
.editing .handle{display:flex}
.editing .row .sw{display:none}
.row.lifted{z-index:3;background:var(--cell);box-shadow:0 8px 24px rgba(0,0,0,.18);transform:scale(1.02);border-radius:10px}
.row.lifted::before{display:none}

/* Send to TV (4 Nov 2026) */
.tvrow{display:flex;align-items:center;gap:12px;cursor:pointer}
.tvrow .tvname{flex:1;display:flex;flex-direction:column;font-size:17px} .tvrow .tvname small{color:var(--sec);font-size:13px;margin-top:2px}
.tvdot{width:10px;height:10px;border-radius:50%;background:#c7c7cc;flex:none} .tvdot.on{background:#34c759;box-shadow:0 0 0 3px rgba(52,199,89,.2)}
.tvrow .tick{color:var(--tint);font-weight:700;font-size:17px;width:18px;text-align:center}
.link{display:block;margin:14px auto 0;background:none;border:0;color:var(--tint);font-size:15px}
/* iPhone Duo / wide screens: two columns of content, comfortable width */
/* wide screens (Duo open, iPad): full width; Search = groups 300 pt | channels the rest */
@media (min-width:700px){ .split{grid-template-columns:300px 1fr} .grp{max-height:calc(100vh - 260px)} }
.tvnote{white-space:normal!important;color:var(--sec);font-size:14px;line-height:19px;padding-top:12px!important;padding-bottom:12px!important;height:auto!important}

/* 4 Nov: My Channels categories, ▲▼ and the category chip (edit mode) */
.sect{list-style:none;display:flex;justify-content:space-between;padding:14px 16px 6px;font-size:13px;font-weight:600;color:var(--sec);text-transform:uppercase;letter-spacing:.04em;background:var(--bg)}
.sect span{font-weight:400}
.row .cat,.row .mv{display:none}
.editing .row .cat{display:block;flex:none;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--tint);border:1px solid var(--sep);border-radius:999px;padding:4px 9px;background:none}
.editing .row .mv{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:8px;background:var(--fill);color:var(--tint);font-size:13px}
.editing .row .sub{display:none}
.pick .row{cursor:pointer;justify-content:space-between} .pick .tick{color:var(--tint);font-weight:700}
/* Search: provider groups on the left, channels on the right */
.split{display:grid;grid-template-columns:44% 1fr;gap:8px;padding:0 10px 0 16px;align-items:start}
.grp{position:sticky;top:0;max-height:calc(100vh - 230px);display:flex;flex-direction:column;background:var(--cell);border-radius:10px;overflow:hidden}
.grp input{margin:8px;padding:7px 9px;border-radius:8px;border:0;background:var(--fill);font-size:14px;color:inherit}
.grp ul{list-style:none;margin:0;padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.grp li{display:flex;justify-content:space-between;gap:6px;padding:9px 10px;font-size:13.5px;border-top:.5px solid var(--sep);cursor:pointer}
.grp li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .grp li small{color:var(--sec);flex:none} .grp li small b{color:var(--tint)}
.grp li.on{background:var(--tint);color:#fff} .grp li.on small,.grp li.on small b{color:#fff} .grp li.none{color:var(--sec);cursor:default}
.res .group{margin:0 0 24px} .res .caption{margin:0 4px 8px}
.res .row{padding:8px 10px;gap:9px} .res .logo{width:34px;height:34px} .res .title{font-size:15px}

/* 4 Nov — iPhone Duo open (951 pt) / iPad: one screen, three columns — groups | channels | My Channels + Send to TV */
body.wide .tabbar{display:none}
body.wide .screen{display:block;position:fixed}
body.wide #s-search{left:0;right:360px;top:0;bottom:0}
body.wide #s-mine{left:auto;right:0;width:360px;top:0;bottom:250px;border-left:.5px solid var(--sep)}
body.wide #s-tv{left:auto;right:0;width:360px;height:250px;bottom:0;top:auto;border-left:.5px solid var(--sep);border-top:.5px solid var(--sep)}
body.wide #s-send{display:none}
body.wide .nav{position:absolute}
body.wide .scroll{padding:calc(var(--top) + 44px) 0 calc(var(--bottom) + 16px);max-width:none}
body.wide .large{font-size:26px;line-height:32px}
body.wide #s-search .split{grid-template-columns:250px 1fr}
body.wide .grp{max-height:calc(100vh - var(--top) - 175px)}
body.wide #s-tv .scroll{padding-top:8px} body.wide #s-tv .nav,body.wide #s-tv .large,body.wide #s-tv .caption:first-of-type,body.wide #s-tv #tv-info,body.wide #s-tv .footnote{display:none}
body.wide #s-tv .group{margin:6px 12px 8px} body.wide #s-tv .row{min-height:46px;padding:6px 12px} body.wide #s-tv .primary{height:42px;font-size:16px;width:calc(100% - 24px);margin:4px 12px 0}
body.wide #s-tv .link{margin-top:6px;font-size:14px}
body.wide #s-mine .group{margin:6px 12px 16px}
body.wide .screen{background:var(--bg)} body.wide #s-search .nav-small{opacity:1}
.split>div{min-width:0} .res .row .txt{min-width:0} body.wide #s-search .scroll{overflow-x:hidden}
.paircode{font:700 44px/1.2 -apple-system,system-ui;letter-spacing:.3em;text-align:center;margin:10px 0 14px;color:var(--tint)}

/* player (4 Nov) */
#player{position:fixed;inset:0;z-index:50;background:#000;display:flex;flex-direction:column}
#player video{flex:1;width:100%;min-height:0;background:#000}
.pl-top{display:flex;align-items:center;gap:12px;padding:calc(var(--top) + 6px) 14px 8px;color:#fff;font-size:17px;font-weight:600}
.pl-top button{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:18px;flex:none}
.pl-top span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-msg{position:absolute;left:0;right:0;top:50%;text-align:center;color:#ccc;font-size:15px;pointer-events:none}
.row[data-uid]{cursor:pointer}
.pl-q{margin-left:auto;width:auto!important;padding:0 12px;border-radius:999px!important;font-size:13px!important;font-weight:600}
.pl-top span{flex:1}
#s-set .caption{margin-top:18px;font-size:12.5px;letter-spacing:.04em} #set-tvs .row{gap:12px}
.fl{display:block;font-size:13px;color:var(--sec);margin:10px 0}.fl input{display:block;width:100%;box-sizing:border-box;margin-top:4px;padding:10px;border-radius:10px;border:1px solid var(--sep);font-size:16px;background:var(--cell);color:inherit}
#set-acc .v{max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* My Channels as buttons + folders (4 Nov 2026) */
#mine-list{padding:4px 12px 20px} #mine-list .empty{color:var(--sec);text-align:center;margin:40px 0}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
.tile{position:relative;background:var(--cell);border-radius:16px;padding:12px 8px 10px;display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .15s}
.tile:active{transform:scale(.96)}
.tile .logo{width:56px;height:56px;border-radius:13px;font-size:18px}
.tname{font-size:13.5px;font-weight:600;line-height:17px;margin-top:8px;max-height:34px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tsub{font-size:11.5px;color:var(--sec);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tsub .tier{margin:0;font-size:10px;line-height:13px}
.tile.folder{background:color-mix(in srgb,var(--tint) 10%,var(--cell))}
.fgrid{width:56px;height:56px;border-radius:13px;background:var(--fill);display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:4px;box-sizing:border-box}
.fgrid .logo{width:100%;height:100%;border-radius:5px;font-size:8px}
.tx{display:none;position:absolute;top:-6px;left:-6px;width:24px;height:24px;border-radius:50%;background:#8e8e93;color:#fff;font-size:12px;z-index:2}
.editing .tile[data-uid] .tx{display:grid;place-items:center}
.editing .tile[data-uid]{animation:jiggle .28s ease-in-out infinite alternate}
.editing .tile[data-uid]:nth-child(2n){animation-delay:.12s}
@keyframes jiggle{from{transform:rotate(-1.2deg)}to{transform:rotate(1.2deg)}}
.tile.placeholder{opacity:.25;animation:none!important}
.tile.ghost{position:fixed;z-index:60;pointer-events:none;transform:scale(1.08);box-shadow:0 12px 30px rgba(0,0,0,.25);animation:none}
.tile.dropon,.outzone.dropon{outline:3px solid var(--tint);outline-offset:2px;transform:scale(1.06)}
.tile.newf .logo{font-size:30px;color:var(--tint);background:var(--fill)}
.fhead{display:flex;align-items:center;gap:10px;margin:0 2px 10px} .fhead h2{flex:1;margin:0;font-size:22px} .fhead .back{margin:0;font-size:16px}
.outzone{border:2px dashed var(--sep);border-radius:14px;padding:16px;text-align:center;color:var(--sec);margin-bottom:12px;font-size:14px}
@media (min-width:700px){ .tiles{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))} }
.editing .tile.folder{animation:jiggle .28s ease-in-out infinite alternate;animation-delay:.06s}

/* 4 Nov — entry screen, Live TV | Films & Series, posters, details */
.home{position:fixed;inset:0;z-index:40;background:var(--bg);display:grid;place-items:center;padding:24px}
.home.hidden{display:none}
.home-in{width:min(720px,100%);display:grid;gap:16px}
.home h1{font-size:30px;margin:0 0 8px;text-align:center}
.hcard{display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:16px;text-align:left;padding:22px 24px;border-radius:20px;background:var(--cell);box-shadow:0 2px 12px rgba(0,0,0,.06)}
.hcard .hico{grid-row:1/3;font-size:44px} .hcard b{font-size:24px} .hcard small{color:var(--sec);font-size:14.5px;margin-top:4px}
.hcard:active{transform:scale(.98)}
@media (min-width:700px){ .home-in{grid-template-columns:1fr 1fr} .home h1{grid-column:1/3} .hcard{grid-template-columns:1fr;text-align:center;padding:36px 24px;justify-items:center} .hcard .hico{grid-row:auto;font-size:64px} }
.homebtn{position:absolute;left:12px;bottom:9px;width:32px;height:32px;border-radius:50%;background:var(--fill);color:var(--tint);font-size:17px}
body:not(.vod) .tabbar button[data-s=vod]{display:none} body.vod .tabbar button[data-s=search]{display:none}
.ptiles{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.ptile{padding:8px 8px 10px} .poster{width:100%;aspect-ratio:2/3;border-radius:10px;background:var(--fill);overflow:hidden;position:relative;display:grid;place-items:center}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .poster span{font-size:11px;color:var(--sec);padding:6px;text-align:center}
.ptile .tname{font-size:12.5px}
#s-vod .split{grid-template-columns:40% 1fr} @media (min-width:700px){ #s-vod .split{grid-template-columns:260px 1fr} }
.sheet.wide-sheet{max-width:820px;width:calc(100% - 24px);max-height:88vh;overflow-y:auto}
.dt-top{display:grid;grid-template-columns:130px 1fr;gap:16px;align-items:start} .dt-top h2{margin:0 0 4px;font-size:22px}
.dt-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .primary.sm{width:auto;height:40px;margin:0;padding:0 16px;font-size:15px} .primary.alt{background:var(--fill);color:var(--tint)}
.dt-plot{font-size:15px;line-height:21px;margin:14px 0 6px}
.ep{gap:10px} .epn{width:26px;color:var(--sec);text-align:right;flex:none} .ept{flex:1;min-width:0;display:flex;flex-direction:column;font-size:15px} .ept small{color:var(--sec);font-size:12px}
.mini{width:36px;height:32px;border-radius:8px;background:var(--fill);color:var(--tint);flex:none}
#dt-seasons{margin:14px 0 8px;overflow-x:auto}
.spin.big{width:34px;height:34px;border-width:3px;margin-bottom:10px} .pl-msg b{color:#fff}
.pl-tap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:16px 30px;border-radius:999px;background:rgba(255,255,255,.92);color:#000;font-size:19px;font-weight:700;z-index:3}
.pl-tap.hidden{display:none}
.ptile.off{opacity:.45}
.tsub.next{color:var(--tint);margin-top:1px}

/* split view (5 Nov 2026): player = top half, the app = bottom half. #app becomes the containing block for its fixed
   children (screens, nav bars, tab bar) via transform, so they all live inside the bottom half. */
body.split #player{bottom:auto;height:var(--split-h,50vh)}
body.split #player .pl-top{padding-top:calc(var(--top) + 2px)}
body.split #app{position:fixed;left:0;right:0;bottom:0;top:var(--split-h,50vh);transform:translateZ(0);--top:0px;overflow:hidden;border-top:1px solid #000}
body.split .grp{max-height:calc(100vh - var(--split-h,50vh) - 160px)}
body.split #home{top:var(--split-h,50vh)!important;height:auto!important;bottom:0}
#pl-split{font-size:13px!important}


/* split view (MSF 5 Nov): controls row at the BOTTOM of the video half, so the picture starts at the top of the screen */
body.split #player video{order:1}
body.split #player .pl-top{order:2;padding:4px 12px 6px;font-size:15px;background:#000}
body.split #player .pl-top button{width:32px;height:32px;font-size:16px}

/* =====================================================================================================================
   5 Nov 2026 — "portable DVD player" skin. Brushed metal body, VFD display strips (VT323), chunky keys (Share Tech Mono)
   that press down, small LEDs, a couple of screws and a grille. Only looks: every id, class and behaviour is unchanged.
   ===================================================================================================================== */
:root{--font-vfd:"VT323",ui-monospace,Menlo,monospace;--font-key:"Share Tech Mono",ui-monospace,Menlo,monospace;
  --vfd:#8af8e8;--vfd-glow:rgba(60,240,212,.55);--vfd-dim:rgba(138,248,232,.34);--glass1:#050e0d;--glass2:#0c1c1a;
  --led-off:#2a2d31;--led-on:#4dff8f;--led:var(--led-off);
  --metal:repeating-linear-gradient(0deg,var(--grain-a) 0 1px,transparent 1px 3px),repeating-linear-gradient(0deg,var(--grain-b) 0 1px,transparent 1px 7px),
    radial-gradient(130% 70% at 25% 0%,var(--sheen),transparent 62%),linear-gradient(180deg,var(--m1),var(--m2) 55%,var(--m3));
  --key-up:inset 0 1px 0 var(--hi),inset 0 -1px 0 var(--lo),0 2px 0 var(--key-edge),0 3px 6px rgba(0,0,0,.32);
  --key-down:inset 0 2px 5px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 var(--key-edge),0 1px 1px rgba(0,0,0,.2);
  --screw:linear-gradient(40deg,transparent 43%,rgba(0,0,0,.55) 44% 56%,transparent 57%),radial-gradient(circle at 35% 30%,#fafbfc,#9ba1a8 62%,#5b6066)}
html,body{background-color:var(--m2)}
body{background-image:var(--metal);background-attachment:fixed}

/* ---- VFD glass: the big screen titles, the player's readout, the toast ---- */
.large,.home h1,.pl-vfd,.toast,.paircode{
  background:radial-gradient(var(--vfd-dim) .7px,transparent 1.1px) 0 0/3px 3px,linear-gradient(170deg,rgba(255,255,255,.07),transparent 38%),linear-gradient(180deg,var(--glass1),var(--glass2));
  color:var(--vfd);text-shadow:0 0 5px var(--vfd-glow),0 0 14px rgba(60,240,212,.25);font-family:var(--font-vfd);font-weight:400;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.9),inset 0 0 0 1px rgba(0,0,0,.8),0 0 0 2px #0b0c0d,0 0 0 3px var(--lo),0 1px 0 3px var(--hi)}
.large{position:relative;overflow:hidden;margin:8px 14px 12px;padding:22px 16px 9px;border-radius:9px;font-size:42px;line-height:36px;letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap;text-overflow:ellipsis}
.large::after,.pl-vfd::after,.home h1::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.32) 0 1px,transparent 1px 3px)}
.large::before{content:"◉ LIVE";position:absolute;top:6px;left:16px;font:12px/14px var(--font-key);letter-spacing:.22em;color:#ffb453;opacity:.8;text-shadow:0 0 6px rgba(255,160,60,.5)}
body.vod #s-mine .large::before{content:"◉ DISC · FAVOURITES"}
#s-search .large::before{content:"◎ SCAN · ALL CHANNELS"} #s-vod .large::before{content:"◎ DISC · LIBRARY"}
#s-tv .large::before{content:"⇄ LINK · TV"} #s-set .large::before{content:"⚙ SETUP"} #s-send .large::before{content:"⇄ LINK · PLEX"}
.large+.caption{margin-top:0}
.caption{margin:6px 22px 10px}
#s-set .caption,#s-set p.caption{font-family:var(--font-key);font-size:12px;letter-spacing:.16em;color:var(--key-dim);text-shadow:0 1px 0 var(--hi);margin-top:22px}

/* ---- nav bar (appears when scrolled): a metal strip ---- */
.screen.scrolled .nav{background:var(--metal);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--lo);box-shadow:inset 0 -1px 0 var(--hi),0 6px 14px rgba(0,0,0,.22)}
.nav-small{font-family:var(--font-key);font-weight:400;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--key-ink)}

/* ---- keys ---- */
.homebtn,.nav-btn,.pl-top button,.mini,.primary.alt,.segmented button,.tabbar button,.hcard,.tile,.tx{
  background:linear-gradient(180deg,var(--key1),var(--key2));color:var(--key-ink);box-shadow:var(--key-up);transition:transform .06s,box-shadow .06s,color .1s}
.homebtn:active,.nav-btn:active,.pl-top button:active,.mini:active,.primary:active,.segmented button:active,.tabbar button:active,.hcard:active,.tile:active,.pl-tap:active{
  transform:translateY(2px);box-shadow:var(--key-down);opacity:1}
.homebtn{left:12px;bottom:6px;width:34px;height:34px;border-radius:50%;color:var(--tint);font-size:17px}
.nav-btn{right:12px;bottom:6px;height:32px;padding:0 13px;border-radius:8px;font:13px/32px var(--font-key);letter-spacing:.12em;text-transform:uppercase;color:var(--key-ink)}
.nav-btn.done{color:var(--tint);font-weight:400;box-shadow:var(--key-down);transform:translateY(2px)}
.primary{height:52px;border-radius:11px;background:linear-gradient(180deg,var(--acc1),var(--acc2));color:var(--acc-ink);font:17px/52px var(--font-key);letter-spacing:.14em;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.25),0 3px 0 var(--acc-edge),0 5px 10px rgba(0,0,0,.35);transition:transform .06s,box-shadow .06s}
.primary[disabled]{opacity:.6;transform:translateY(2px);box-shadow:var(--key-down)}
.primary .spin{border-color:rgba(43,19,0,.3);border-top-color:var(--acc-ink)}
.primary.sm{height:42px;line-height:42px;font-size:14px;letter-spacing:.1em;padding:0 16px}
.primary.alt{color:var(--key-ink)}
.mini{width:38px;height:32px;border-radius:7px;color:var(--key-ink);font-size:13px}
.link{color:var(--tint);font-family:var(--font-key);font-size:14px;letter-spacing:.06em;text-transform:uppercase}

/* segmented controls = a recessed tray of keys; the chosen key stays pressed in, with its LED lit */
.segmented{gap:5px;padding:5px;margin:4px 14px 8px;border-radius:11px;background:var(--tray);box-shadow:inset 0 2px 6px rgba(0,0,0,.5),0 1px 0 var(--hi)}
.segmented button{height:32px;border-radius:7px;font:12.5px/32px var(--font-key);letter-spacing:.06em;text-transform:uppercase;font-weight:400!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.segmented button::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:6px;vertical-align:1px;background:var(--led-off);box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.segmented button.on{background:linear-gradient(180deg,var(--key2),var(--key1));box-shadow:var(--key-down);transform:translateY(1px);color:var(--tint)}
.segmented button.on::before{background:var(--led-on);box-shadow:0 0 6px var(--led-on)}

/* search field = a small VFD you type into */
.searchbar,.grp input,.fl input{background:linear-gradient(180deg,var(--glass1),var(--glass2));box-shadow:inset 0 2px 6px rgba(0,0,0,.9),0 0 0 2px #0b0c0d,0 1px 0 2px var(--hi);border:0}
.searchbar{height:44px;margin:6px 16px 12px;padding:0 12px;border-radius:8px}
.searchbar svg{fill:var(--vfd-dim)}
.searchbar input,.grp input{font-family:var(--font-vfd)!important;font-size:22px!important;color:var(--vfd)!important;text-shadow:0 0 5px var(--vfd-glow);caret-color:var(--vfd)}
.searchbar input::placeholder,.grp input::placeholder{color:rgba(138,248,232,.3);text-shadow:none}
.grp input{margin:8px;padding:5px 9px;border-radius:7px;font-size:19px!important}
.fl input{color:var(--vfd);font-family:var(--font-vfd);font-size:21px;border-radius:8px}

/* ---- panels: lists sit on a raised plate; rows are separated by etched grooves ---- */
.group,.grp{background:linear-gradient(180deg,var(--panel1),var(--panel2));border-radius:12px;box-shadow:inset 0 1px 0 var(--hi),0 0 0 1px var(--lo),0 4px 12px rgba(0,0,0,.22)}
.row+.row::before{border-top:1px solid var(--lo);box-shadow:0 1px 0 var(--hi)}
.row[data-uid]:active,.tvrow:active,.grp li:active{background:var(--fill)}
.logo{background:var(--well);box-shadow:inset 0 1px 3px rgba(0,0,0,.35),0 1px 0 var(--hi)}
.tier{font-family:var(--font-key);font-weight:400;letter-spacing:.06em;border-color:currentColor;opacity:.85}
.grp li{border-top:1px solid var(--lo);box-shadow:inset 0 1px 0 var(--hi)}
.grp li.on{background:linear-gradient(180deg,var(--glass1),var(--glass2));color:var(--vfd);text-shadow:0 0 5px var(--vfd-glow);box-shadow:inset 3px 0 0 var(--led-on),inset 0 2px 5px rgba(0,0,0,.8)}
.grp li.on small,.grp li.on small b{color:var(--vfd)}
.grp li small b{color:var(--tint)}
.kv .v{font-family:var(--font-key);font-size:15px}
/* on/off switch = a slide switch: recessed track, ribbed metal knob, green glow when on */
.sw span{background:var(--tray);box-shadow:inset 0 2px 5px rgba(0,0,0,.6),0 1px 0 var(--hi)}
.sw span::after{background:repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px) center/11px 13px no-repeat,linear-gradient(180deg,#fdfdfd,#c2c6cb);
  box-shadow:0 2px 3px rgba(0,0,0,.45),inset 0 -1px 0 rgba(0,0,0,.2);border-radius:50%}
.sw input:checked+span{background:#0f3a20;box-shadow:inset 0 2px 5px rgba(0,0,0,.6),inset 0 0 10px rgba(77,255,143,.35),0 1px 0 var(--hi)}
/* LEDs */
.tvdot{background:var(--led-off);box-shadow:inset 0 1px 2px rgba(0,0,0,.7),0 1px 0 var(--hi)}
.tvdot.on{background:var(--led-on);box-shadow:0 0 8px var(--led-on),inset 0 -1px 1px rgba(0,0,0,.3)}
.dot{background:#ff3b30;box-shadow:0 0 7px #ff3b30,inset 0 -1px 1px rgba(0,0,0,.35)}

/* ---- My Channels: each channel is a key with a label window and an LED (lit = playing now) ---- */
#mine-list{padding:4px 14px 24px}
.tiles{gap:14px}
.tile{border-radius:12px;padding:13px 8px 11px}
.tile::after{content:"";position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--led);box-shadow:0 0 7px var(--led),inset 0 1px 1px rgba(0,0,0,.45)}
.tile:active{--led:var(--led-on)}
.tile .logo{width:58px;height:58px;border-radius:11px;box-shadow:inset 0 2px 4px rgba(0,0,0,.4),0 0 0 1px var(--lo),0 1px 0 1px var(--hi)}
.tname{text-shadow:0 1px 0 var(--hi)}
@media (prefers-color-scheme:dark){.tname{text-shadow:0 -1px 0 rgba(0,0,0,.6)}}
.tsub{font-family:var(--font-key);font-size:11.5px;letter-spacing:.04em}
/* folders = cartridges: amber-tinted shell, a notch on top, the channels behind a smoked window */
.tile.folder{background:linear-gradient(180deg,var(--key1),var(--key2));--led:#ffb453;box-shadow:var(--key-up),inset 0 -26px 0 -22px var(--acc2)}
.tile.folder .tname{color:var(--tint)}
.tile.folder::before{content:"";position:absolute;top:0;left:30%;right:30%;height:5px;border-radius:0 0 5px 5px;background:rgba(0,0,0,.28);box-shadow:inset 0 -1px 0 var(--hi)}
.fgrid{background:linear-gradient(180deg,var(--glass1),var(--glass2));box-shadow:inset 0 2px 4px rgba(0,0,0,.7),0 1px 0 var(--hi);width:58px;height:58px;border-radius:11px}
.fgrid{padding:5px;gap:4px} .fgrid .logo{width:100%;height:100%;border-radius:5px;font-size:8px;box-shadow:none;opacity:.92}
.tile.newf .logo{color:var(--tint)}
.tx{background:linear-gradient(180deg,#ff6a5c,#c92a1f);color:#fff;box-shadow:0 2px 0 #7a140d,0 3px 5px rgba(0,0,0,.35)}
/* films/series = DVD cases: a spine on the left and a plastic sheen */
.ptile::after{display:none}
.poster{box-shadow:0 0 0 1px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.3);border-radius:6px}
.poster::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.22),transparent 32%),linear-gradient(90deg,rgba(0,0,0,.45) 0 5px,rgba(255,255,255,.18) 5px 6px,transparent 6px)}

/* ---- tab bar = the row of hardware keys along the bottom edge, with a screw at each end ---- */
.tabbar{height:calc(64px + var(--bottom));padding:8px 24px calc(8px + var(--bottom));gap:8px;background:var(--metal);-webkit-backdrop-filter:none;backdrop-filter:none;
  border-top:1px solid var(--lo);box-shadow:inset 0 1px 0 var(--hi),0 -8px 18px rgba(0,0,0,.22)}
.tabbar::before,.tabbar::after{content:"";position:absolute;top:calc(50% - var(--bottom)/2 - 5px);width:10px;height:10px;border-radius:50%;background:var(--screw);box-shadow:0 1px 0 var(--hi),inset 0 -1px 1px rgba(0,0,0,.4)}
.tabbar::before{left:7px} .tabbar::after{right:7px}
.tabbar button{border-radius:9px;color:var(--key-dim);font:10.5px/1 var(--font-key);letter-spacing:.1em;text-transform:uppercase;gap:4px;min-width:0}
.tabbar button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;padding:0 3px}
.tabbar svg{width:22px;height:22px}
.tabbar button.on{color:var(--tint);background:linear-gradient(180deg,var(--key2),var(--key1));box-shadow:var(--key-down);transform:translateY(2px)}
.tabbar button.on::before{content:"";position:absolute;top:6px;left:8px;width:5px;height:5px;border-radius:50%;background:var(--led-on);box-shadow:0 0 6px var(--led-on)}
.dot{top:6px;left:auto;right:8px;width:7px;height:7px}
.scroll{padding-bottom:calc(var(--bottom) + 104px)}

/* ---- toast = a line on a VFD ---- */
.toast{bottom:calc(var(--bottom) + 80px);border-radius:8px;padding:8px 16px 7px;font-size:22px;line-height:24px;letter-spacing:.03em;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.9),0 0 0 2px #0b0c0d,0 0 0 3px rgba(255,255,255,.14),0 10px 24px rgba(0,0,0,.5)}

/* ---- sheets (setup, details, account) = a metal lid sliding up ---- */
.sheet-bg{background:rgba(0,0,0,.5)}
.sheet{background:var(--metal);box-shadow:inset 0 1px 0 var(--hi),0 -12px 32px rgba(0,0,0,.45);border-radius:16px 16px 0 0;position:relative}
.sheet::before{content:"";position:absolute;top:8px;left:50%;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:var(--tray);box-shadow:inset 0 1px 2px rgba(0,0,0,.6),0 1px 0 var(--hi)}
.paircode{border-radius:10px;padding:10px 0 6px;font-size:60px;letter-spacing:.35em;font-weight:400}

/* ---- home (Live TV | Films & Series) = the front of the machine ---- */
.home{background:var(--metal)}
.home::before,.home::after{content:"";position:absolute;top:calc(var(--top) + 14px);width:12px;height:12px;border-radius:50%;background:var(--screw);box-shadow:0 1px 0 var(--hi),inset 0 -1px 1px rgba(0,0,0,.4)}
.home::before{left:14px} .home::after{right:14px}
.home h1{position:relative;overflow:hidden;padding:16px 16px 12px;border-radius:9px;font-size:31px;line-height:30px;text-transform:uppercase;letter-spacing:.05em;margin:0 0 10px}
.home-in::after{content:"";height:16px;margin-top:8px;border-radius:8px;grid-column:1/-1;
  background:radial-gradient(circle,rgba(0,0,0,.55) 1.6px,transparent 2.2px) 0 0/8px 8px;box-shadow:inset 0 1px 2px rgba(0,0,0,.2),0 1px 0 var(--hi)}
.hcard{border-radius:16px;padding:20px 22px;box-shadow:inset 0 1px 0 var(--hi),inset 0 -1px 0 var(--lo),0 4px 0 var(--key-edge),0 8px 16px rgba(0,0,0,.3);position:relative}
.hcard:active{transform:translateY(3px)}
.hcard .hico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:32px;
  background:radial-gradient(circle at 50% 40%,var(--glass2),var(--glass1));box-shadow:inset 0 2px 6px rgba(0,0,0,.9),0 0 0 2px #0b0c0d,0 1px 0 2px var(--hi)}
.hcard b{font:24px/1.1 var(--font-key);letter-spacing:.1em;text-transform:uppercase}
.hcard small{margin-top:6px}
.hcard::after{content:"";position:absolute;top:12px;right:14px;width:7px;height:7px;border-radius:50%;background:var(--led-off);box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.hcard:active::after{background:var(--led-on);box-shadow:0 0 8px var(--led-on)}
@media (min-width:700px){ .hcard .hico{width:96px;height:96px;font-size:48px} }

/* ---- player: a control deck (metal) with the VFD readout and the keys; the picture fills the rest ---- */
#player{background:#000}
.pl-top{gap:6px;padding:calc(var(--top) + 7px) 10px 8px;background:var(--metal);color:var(--key-ink);box-shadow:inset 0 1px 0 var(--hi),inset 0 -1px 0 rgba(0,0,0,.7);font-size:15px;position:relative;z-index:2}
.pl-top button,body.split #player .pl-top button{height:38px;width:auto!important;min-width:42px;padding:0 9px;margin:0!important;border-radius:7px!important;
  font:13px/38px var(--font-key)!important;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;flex:none;color:var(--key-ink)}
#pl-x{font-size:18px!important;color:var(--tint)}
.pl-top button.lit{color:var(--tint);background:linear-gradient(180deg,var(--key2),var(--key1));box-shadow:var(--key-down);transform:translateY(2px)}
.pl-top button.lit::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:5px;vertical-align:2px;background:var(--led-on);box-shadow:0 0 6px var(--led-on)}
.pl-vfd{position:relative;overflow:hidden;flex:1;min-width:0;height:38px;display:flex;align-items:center;gap:9px;padding:0 10px;border-radius:7px;font-size:24px;line-height:38px}
.pl-vfd small{font-size:17px;color:var(--vfd-dim);flex:none;letter-spacing:.06em}
.pl-vfd span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;text-transform:uppercase;letter-spacing:.03em}
.pl-vfd i{font-style:normal;font-size:17px;flex:none;letter-spacing:.08em;padding:0 5px;border:1px solid var(--vfd-dim);border-radius:3px;line-height:20px}
@media (max-width:560px){ .pl-top{flex-wrap:wrap} .pl-vfd{order:-1;flex:1 1 100%} .pl-top button{flex:1 1 auto} }
.pl-msg{font:22px/1.25 var(--font-vfd);color:var(--vfd);text-shadow:0 0 6px var(--vfd-glow);padding:0 24px;letter-spacing:.03em}
.pl-msg b{color:var(--vfd)}
.spin.big{border-color:rgba(138,248,232,.25);border-top-color:var(--vfd)}
.pl-tap{padding:0 34px;height:62px;border-radius:14px;background:linear-gradient(180deg,var(--acc1),var(--acc2));color:var(--acc-ink);font:22px/62px var(--font-key);letter-spacing:.16em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 0 var(--acc-edge),0 8px 18px rgba(0,0,0,.6)}
.pl-tap:active{transform:translate(-50%,calc(-50% + 3px))}
/* split view: the deck sits at the bottom of the picture half; the seam to the app looks like the hinge */
body.split #player .pl-top{padding:6px 10px 7px;background:var(--metal);font-size:15px}
body.split #player .pl-top button{height:34px;line-height:34px!important}
body.split .pl-vfd{height:34px;line-height:34px}
body.split #app{border-top:0;box-shadow:inset 0 1px 0 var(--hi),inset 0 3px 0 rgba(0,0,0,.25)}

/* =====================================================================================================================
   6 Nov 2026 — split view (Duo half-open) extras: picture-size key, no PiP key, and the DISC DECK for films & episodes:
   the bottom half becomes an early-2000s portable DVD player — a tray window onto the spinning disc, a VFD readout,
   a position bar and big transport keys. Live TV keeps the channel list.
   ===================================================================================================================== */
#pl-fit{display:none!important}
body.split #pl-fit{display:block!important;min-width:58px}
body.split #pl-pip{display:none!important}
body.split #player{overflow:hidden}
body.split #player video{transition:transform .25s ease}
body.split #player[data-fit=fill] video{object-fit:cover}
body.split #player[data-fit=zoom] video{object-fit:cover;transform:scale(1.25)}
body.split #player[data-fit=stretch] video{object-fit:fill}
/* the split controls row: fits 669 px — keys a little narrower, the name gives way first */
body.split #player .pl-top{gap:5px}
body.split #player .pl-top button{padding:0 8px;min-width:38px;letter-spacing:.04em}
body.split .pl-vfd{gap:7px;padding:0 8px;font-size:22px}
body.split .pl-vfd small,body.split .pl-vfd i{font-size:15px}

/* ---- the deck ---- */
body.disc #app,body.disc .tabbar{visibility:hidden}
body.disc .toast{z-index:70;bottom:calc(var(--bottom) + 128px)}
#deck{position:fixed;left:0;right:0;top:var(--split-h,50vh);bottom:0;z-index:45;display:flex;flex-direction:column;gap:9px;
  padding:9px 14px calc(var(--bottom) + 10px);background:var(--metal);color:var(--key-ink);overflow:hidden;
  box-shadow:inset 0 1px 0 var(--hi),inset 0 4px 0 rgba(0,0,0,.28),inset 0 5px 0 var(--hi);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* the hinge seam + two screws */
#deck::before,#deck::after{content:"";position:absolute;top:12px;width:10px;height:10px;border-radius:50%;background:var(--screw);box-shadow:0 1px 0 var(--hi),inset 0 0 0 1px rgba(0,0,0,.35)}
#deck::before{left:9px} #deck::after{right:9px}
.dk-head{display:flex;align-items:center;gap:12px;height:16px;padding:0 14px;font:11px/16px var(--font-key);letter-spacing:.2em;color:var(--key-dim);text-shadow:0 1px 0 var(--hi);white-space:nowrap;flex:none}
.dk-brand{font:italic 700 13px/16px ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;letter-spacing:.12em;color:var(--key-ink)}
.dk-model{overflow:hidden;text-overflow:ellipsis;min-width:0}
.dk-leds{margin-left:auto;display:flex;gap:12px}
.dk-leds i{font-style:normal;font-size:9.5px;letter-spacing:.16em;display:flex;align-items:center;gap:5px}
.dk-leds i::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--led-off);box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.dk-leds i.on::before{background:var(--led-on);box-shadow:0 0 6px var(--led-on)}
#dk-led-disc.on::before{background:#ffb453;box-shadow:0 0 7px #ff9a2a}

.dk-main{flex:1;min-height:0;display:grid;grid-template-columns:57% 1fr;gap:12px}

/* the tray window: a dark cut-out with smoked glass; the disc sits under it, mostly hidden by the lid */
.dk-win{position:relative;min-height:0;border-radius:22px 22px 22px 60px;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 85% 90%,#1a1d21,#060708 70%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.9),inset 0 4px 14px rgba(0,0,0,.95),0 0 0 2px #0a0b0c,0 0 0 4px var(--lo),0 1px 0 4px var(--hi)}
/* 6 Nov (MSF): a real-size disc — the whole disc fits inside the window, like a 12 cm disc in a portable player */
.dk-win{container-type:size}
/* 6 Nov (MSF): a real-size disc (it would fit inside the player) of which the window shows only part: the hub near the
   window's lower-right corner, the rim crossing the top-left */
.dk-pos{position:absolute;left:74%;top:70%;width:150cqh;height:150cqh;transform:translate(-50%,-50%)}
.dk-rot,.dk-disc,.dk-blur{position:absolute;inset:0;border-radius:50%}
.dk-rot,.dk-disc{will-change:transform;animation:dk-spin linear infinite;animation-play-state:paused}
.dk-rot{animation-duration:7s}
.dk-disc{animation-duration:1.7s;
  background:
    radial-gradient(circle closest-side,#050607 0 6.1%,rgba(0,0,0,.5) 6.4%,transparent 6.8%),
    radial-gradient(circle closest-side,transparent 0 6.6%,rgba(214,224,234,.16) 7% 11.6%,rgba(255,255,255,.55) 12%,rgba(150,160,172,.3) 12.6% 15.6%,rgba(255,255,255,.7) 16%,rgba(0,0,0,.35) 16.6%,transparent 17.1%),
    radial-gradient(circle closest-side,transparent 0 17%,#e9edf1 17.4%,#8f98a3 18.8%,#f4f6f8 20.4%,#a7afb9 21.9%,rgba(60,70,80,.55) 22.4%,transparent 22.9%),
    radial-gradient(circle closest-side,transparent 0 97.2%,rgba(255,255,255,.85) 97.7%,#7e8790 98.7%,rgba(0,0,0,.5) 99.6%,transparent 100%),
    radial-gradient(circle closest-side,transparent 0 84%,rgba(30,40,55,.16) 84.4% 97%,transparent 97.2%),
    conic-gradient(from 18deg,transparent 0 3%,rgba(255,60,170,.42) 7%,rgba(255,200,40,.5) 11%,rgba(70,255,170,.46) 15%,rgba(50,150,255,.5) 19%,rgba(160,80,255,.38) 23%,transparent 29% 51%,
      rgba(255,60,170,.32) 55%,rgba(255,200,40,.4) 59%,rgba(70,255,170,.36) 63%,rgba(50,150,255,.4) 67%,rgba(160,80,255,.3) 71%,transparent 77%),
    repeating-radial-gradient(circle closest-side,rgba(0,0,0,.07) 0 1px,transparent 1px 3px),
    conic-gradient(#c3cad2,#eef1f4 9%,#9aa3ad 18%,#d9dee4 28%,#aeb6bf 39%,#f6f8f9 50%,#9ba4ae 61%,#dfe4e9 72%,#a9b1ba 84%,#c3cad2);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 10px 40px rgba(0,0,0,.8)}
.dk-print{position:absolute;inset:0;width:100%;height:100%}
.dk-print text{font:4.3px/1 var(--font-key);letter-spacing:.45px;fill:rgba(36,42,50,.78)}
/* fast spin blurs the disc into rings of colour */
.dk-blur{pointer-events:none;opacity:0;transition:opacity .9s ease;
  background:radial-gradient(circle closest-side,transparent 0 23%,rgba(255,190,90,.16) 32%,rgba(120,255,200,.14) 44%,rgba(90,160,255,.18) 58%,rgba(220,120,255,.14) 72%,rgba(255,255,255,.1) 86%,transparent 97%)}
#deck.spin1 .dk-rot{animation-play-state:running}
#deck.spin2 .dk-disc{animation-play-state:running}
#deck.spin2 .dk-blur{opacity:1}
@keyframes dk-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .dk-rot{animation-duration:60s} .dk-disc{animation-duration:16s} .dk-blur{transition:none} #deck.spin2 .dk-blur{opacity:.4} }
/* smoked glass on top: a fixed light streak (doesn't turn) + the lid's edge */
.dk-glass{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.2),rgba(255,255,255,.04) 26%,transparent 27% 58%,rgba(255,255,255,.07) 59%,transparent 66%),
    linear-gradient(180deg,rgba(20,24,30,.25),rgba(0,0,0,.35));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 22px rgba(0,0,0,.55)}

/* right of the window: the VFD and a speaker grille */
.dk-side{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}
.dk-vfd{position:relative;overflow:hidden;flex:none;border-radius:10px;padding:9px 12px 8px;display:flex;flex-direction:column;gap:2px;
  background:radial-gradient(var(--vfd-dim) .7px,transparent 1.1px) 0 0/3px 3px,linear-gradient(170deg,rgba(255,255,255,.07),transparent 38%),linear-gradient(180deg,var(--glass1),var(--glass2));
  color:var(--vfd);text-shadow:0 0 5px var(--vfd-glow),0 0 14px rgba(60,240,212,.25);font-family:var(--font-vfd);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.9),inset 0 0 0 1px rgba(0,0,0,.8),0 0 0 2px #0b0c0d,0 0 0 3px var(--lo),0 1px 0 3px var(--hi)}
.dk-vfd::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.32) 0 1px,transparent 1px 3px)}
.dk-r1{display:flex;align-items:center;gap:8px;min-width:0;font-size:22px;line-height:24px}
.dk-r1 i,.dk-time i{font-style:normal;flex:none;font-size:15px;line-height:18px;letter-spacing:.1em;padding:0 5px;border:1px solid var(--vfd-dim);border-radius:3px}
#dk-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}
.dk-time{display:flex;align-items:baseline;gap:10px}
.dk-time b{font-weight:400;font-size:56px;line-height:52px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.dk-time i{margin-left:auto;align-self:center;color:#ffb453;border-color:rgba(255,180,83,.45);text-shadow:0 0 6px rgba(255,160,60,.6)}
#deck[data-stat=PLAY] .dk-time i{color:var(--vfd);border-color:var(--vfd-dim);text-shadow:0 0 5px var(--vfd-glow)}
#deck[data-stat=LOAD] .dk-time i{animation:dk-blink 1s steps(2,start) infinite}
@keyframes dk-blink{to{visibility:hidden}}
.dk-r3{display:grid;grid-template-columns:auto 1fr auto auto;align-items:baseline;gap:6px;font-size:22px;line-height:22px}
.dk-r3 span{font-size:14px;letter-spacing:.14em;color:var(--vfd-dim);text-shadow:none}
.dk-r3 b{font-weight:400;letter-spacing:.03em}
.dk-grille{position:relative;flex:1;min-height:14px;border-radius:10px;
  background:radial-gradient(circle,rgba(0,0,0,.6) 1.7px,transparent 2.3px) 2px 2px/9px 9px;box-shadow:inset 0 1px 3px rgba(0,0,0,.25),0 1px 0 var(--hi)}

.dk-grille span{position:absolute;right:8px;bottom:6px;padding:2px 7px;border-radius:4px;font:9.5px/12px var(--font-key);letter-spacing:.18em;color:var(--key-dim);
  background:linear-gradient(180deg,var(--key1),var(--key2));box-shadow:0 1px 0 var(--hi),0 1px 2px rgba(0,0,0,.3)}
/* the position bar: a groove with a lit fill and a metal knob — tap or drag */
.dk-bar{flex:none;height:34px;padding:0 13px;display:flex;align-items:center;touch-action:none;cursor:pointer}
.dk-groove{position:relative;flex:1;height:10px;border-radius:6px;background:linear-gradient(180deg,#050607,#14171a);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.9),0 1px 0 var(--hi)}
.dk-buf,.dk-fill{position:absolute;top:2px;bottom:2px;left:0;border-radius:4px}
.dk-buf{background:rgba(138,248,232,.18)}
.dk-fill{background:linear-gradient(90deg,#1d8f80,var(--vfd));box-shadow:0 0 8px var(--vfd-glow)}
.dk-knob{position:absolute;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#ffb453 0 3px,#b35c08 3.6px,transparent 4.2px),repeating-conic-gradient(from 0deg,rgba(255,255,255,.18) 0 4deg,rgba(0,0,0,.08) 4deg 8deg),
    radial-gradient(circle at 35% 30%,var(--key1),var(--key2) 70%);box-shadow:var(--key-up)}
.dk-bar.held .dk-knob{box-shadow:var(--key-down),0 0 0 6px rgba(138,248,232,.12)}

/* transport keys */
.dk-keys{flex:none;display:grid;grid-template-columns:1fr 1.45fr 1fr 1fr;gap:10px;height:64px;padding:6px;border-radius:14px;background:var(--tray);
  box-shadow:inset 0 2px 7px rgba(0,0,0,.55),0 1px 0 var(--hi)}
.dk-keys button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:9px;
  background:linear-gradient(180deg,var(--key1),var(--key2));color:var(--key-ink);box-shadow:var(--key-up);transition:transform .06s,box-shadow .06s}
.dk-keys button:active{transform:translateY(2px);box-shadow:var(--key-down)}
.dk-keys svg{height:17px;width:auto;fill:currentColor;filter:drop-shadow(0 1px 0 var(--hi))}
.dk-keys small{font:10.5px/1 var(--font-key);letter-spacing:.16em;color:var(--key-dim)}
.dk-keys .dk-play{background:linear-gradient(180deg,var(--acc1),var(--acc2));color:var(--acc-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.25),0 2px 0 var(--acc-edge),0 3px 6px rgba(0,0,0,.35)}
.dk-keys .dk-play small{color:rgba(43,19,0,.75)}
.dk-keys .dk-play svg{filter:drop-shadow(0 1px 0 rgba(255,255,255,.4))}
.dk-keys .dk-play::after{content:"";position:absolute;top:7px;right:9px;width:6px;height:6px;border-radius:50%;background:#5a2a00;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
#deck[data-stat=PLAY] .dk-play::after{background:var(--led-on);box-shadow:0 0 7px var(--led-on)}
#dk-ej{color:var(--tint)}
/* a short deck (low split line / landscape): drop the grille and the header */
@media (max-height:760px){ #deck .dk-grille{display:none} }