:root{--bg:#07090d;--panel:#0d1016;--panel-2:#121620;--line:rgba(255,255,255,.08);--muted:#858b98;--text:#f4f6f8;--accent:#ff4728;--accent-2:#ff6b3d;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:hidden}
button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.eyebrow{margin:0;color:var(--accent-2);font-size:10px;font-weight:800;letter-spacing:.2em}
.lock-screen{position:fixed;inset:0;z-index:50;display:grid;place-items:center;min-height:100dvh;padding:calc(24px + var(--safe-top)) 20px calc(24px + var(--safe-bottom));background:radial-gradient(circle at 50% 10%,rgba(255,71,40,.12),transparent 35%),var(--bg);overflow:auto}
.lock-card{width:min(100%,380px);text-align:center}.brand-mark{display:block;margin:0 auto 24px;border-radius:20px;box-shadow:0 16px 55px rgba(255,71,40,.18)}
.lock-card h1{margin:10px 0 8px;font-size:clamp(28px,8vw,42px);letter-spacing:-.045em}.lock-card h1 span{color:var(--accent)}.lock-copy{margin:0;color:var(--muted);font-size:14px}
.pin-dots{display:flex;justify-content:center;gap:13px;margin:26px 0 0}.pin-dots i{width:11px;height:11px;border:1px solid #49505d;border-radius:50%;transition:.18s}.pin-dots i.on{border-color:var(--accent);background:var(--accent);box-shadow:0 0 16px rgba(255,71,40,.55)}.pin-dots.shake{animation:shake .35s}.lock-error{height:20px;margin:8px 0 2px;color:#ff735a;font-size:12px}
.keypad{display:grid;grid-template-columns:repeat(3,64px);justify-content:center;gap:9px}.keypad button{width:64px;height:55px;border:1px solid var(--line);border-radius:16px;background:#11151c;color:var(--text);font-size:21px;font-weight:650;cursor:pointer;transition:.15s}.keypad button:hover{border-color:rgba(255,71,40,.5);background:#171b24}.keypad button:active{transform:scale(.94);background:var(--accent)}.keypad .key-delete{color:var(--muted);font-size:18px}
.app{height:100dvh;padding-top:var(--safe-top);background:var(--bg)}.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid var(--line);background:rgba(7,9,13,.9)}
.wordmark{display:flex;align-items:center;gap:10px}.wordmark img{width:30px;height:30px;border-radius:9px}.wordmark strong{font-size:17px;letter-spacing:.18em}.wordmark span{margin-left:2px;padding:5px 7px;border:1px solid rgba(255,71,40,.25);border-radius:6px;color:var(--accent-2);font-size:8px;font-weight:900;letter-spacing:.13em}.top-actions{display:flex;gap:8px}.icon-button{width:38px;height:38px;border:1px solid var(--line);border-radius:11px;background:#0e1117;color:#afb4be;font-size:18px;cursor:pointer}.icon-button:hover{border-color:#333946;color:#fff}
.workspace{height:calc(100dvh - var(--safe-top) - 64px);min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(350px,30vw,470px);overflow:hidden}.stage{min-width:0;min-height:0;display:flex;flex-direction:column;padding:18px;background:radial-gradient(circle at 50% 40%,#161a20 0,#090b10 58%,#07090d 100%)}
.player-shell{position:relative;flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:#020305;box-shadow:0 30px 80px rgba(0,0,0,.42)}.player-shell video,.canvas-player{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}.player-shell video:not([src]){visibility:hidden}.player-shell.canvas-mode video{visibility:hidden;pointer-events:none}.canvas-player{display:block}.canvas-stats{position:absolute;z-index:4;top:10px;left:10px;display:flex;flex-wrap:wrap;gap:5px;max-width:calc(100% - 20px);pointer-events:none}.canvas-stats span{padding:5px 7px;border:1px solid rgba(255,255,255,.13);border-radius:7px;background:rgba(2,3,5,.76);backdrop-filter:blur(8px);color:#c7ccd4;font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.canvas-stats b{color:#fff}.canvas-stats[hidden]{display:none}
.player-empty,.player-loading,.player-message{position:relative;z-index:2;text-align:center;padding:25px}.player-empty h2{margin:20px 0 5px;font-size:20px}.player-empty p,.player-loading span,.player-message span{color:var(--muted);font-size:13px}.empty-mark{width:64px;height:64px;display:grid;place-items:center;margin:auto;border:1px solid #2b3039;border-radius:50%;background:#0c0f14}.empty-mark span{width:0;height:0;margin-left:5px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:16px solid var(--accent)}
.player-loading i{display:block;width:30px;height:30px;margin:0 auto 14px;border:2px solid rgba(255,255,255,.12);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.player-message{display:flex;flex-direction:column;align-items:center;gap:7px}.player-message strong{font-size:15px}.player-message button{margin-top:8px;border:0;border-radius:9px;padding:9px 13px;background:var(--accent);color:#fff;font-size:12px;font-weight:800;cursor:pointer}
.now-playing{position:absolute;z-index:3;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;padding:50px 16px 15px;background:linear-gradient(transparent,rgba(0,0,0,.9))}.now-playing div{display:flex;flex-direction:column;gap:4px;min-width:0}.now-playing span{color:var(--accent-2);font-size:8px;font-weight:900;letter-spacing:.16em}.now-playing strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.fullscreen-button{width:40px;height:40px;flex:0 0 auto;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(0,0,0,.45);color:#fff;font-size:18px;cursor:pointer}
.stage-caption{height:42px;display:flex;align-items:flex-end;justify-content:space-between;color:var(--muted);font-size:11px}.stage-caption>div{display:flex;align-items:center;gap:8px}.stage-caption p{margin:0}.stage-tools{display:flex!important;flex:0 0 auto;align-items:center;gap:6px!important;margin-left:auto}.player-mode-label{font-size:8px!important;text-transform:uppercase;letter-spacing:.12em}.player-mode{height:32px;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:0 24px 0 8px;background:rgba(0,0,0,.68);color:#fff;font-size:10px;font-weight:700;outline:none}.player-mode:focus-visible{border-color:var(--accent)}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(255,71,40,.7)}
.channel-panel{min-width:0;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden;border-left:1px solid var(--line);background:var(--panel)}.panel-heading{display:flex;align-items:flex-end;justify-content:space-between;padding:22px 20px 16px}.panel-heading h2{margin:7px 0 0;font-size:21px;letter-spacing:-.035em}.count{color:var(--muted);font-size:11px}
.search-box{position:relative;display:flex;align-items:center;margin:0 16px}.search-box>span{position:absolute;left:14px;width:12px;height:12px;border:1.5px solid #747b88;border-radius:50%}.search-box>span:after{content:"";position:absolute;width:5px;height:1.5px;right:-4px;bottom:-2px;transform:rotate(45deg);background:#747b88}.search-box input{width:100%;height:44px;padding:0 48px 0 39px;border:1px solid var(--line);border-radius:12px;outline:none;background:var(--panel-2);color:var(--text);font-size:13px}.search-box input:focus{border-color:rgba(255,71,40,.55);box-shadow:0 0 0 3px rgba(255,71,40,.08)}.search-box kbd{position:absolute;right:11px;padding:4px 6px;border:1px solid var(--line);border-radius:5px;color:#686f7b;background:#0c0f14;font-family:inherit;font-size:9px}
.groups{display:flex;gap:7px;flex:0 0 auto;padding:13px 16px 10px;overflow-x:auto;scrollbar-width:none}.groups::-webkit-scrollbar{display:none}.group-button{flex:0 0 auto;border:1px solid var(--line);border-radius:100px;padding:7px 11px;background:transparent;color:#8c929d;font-size:10px;font-weight:700;cursor:pointer}.group-button.active{border-color:var(--accent);background:var(--accent);color:#fff}
.channel-list{--row-height:55px;position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#30343c transparent;scrollbar-width:thin}.channel-spacer{width:1px;pointer-events:none}.channel-window{position:absolute;top:2px;left:9px;right:9px}.channel-row{width:100%;height:var(--row-height);display:grid;grid-template-columns:35px minmax(0,1fr) 35px;align-items:center;gap:10px;padding:9px;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--text);text-align:left;cursor:pointer}.channel-row:hover{background:#141820}.channel-row.active{border-color:rgba(255,71,40,.24);background:linear-gradient(90deg,rgba(255,71,40,.14),rgba(255,71,40,.03))}.channel-index{display:grid;place-items:center;width:35px;height:35px;border-radius:9px;background:#171b23;color:#777e8b;font-size:10px;font-weight:800}.channel-row.active .channel-index{background:var(--accent);color:#fff}.channel-info{min-width:0;padding:0;border:0;outline:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.channel-info strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:650}.channel-info span{display:block;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#686f7b;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.favorite{width:34px;height:34px;border:0;background:transparent;color:#4f5662;font-size:18px;cursor:pointer}.favorite.on{color:var(--accent)}.list-status{flex:0 0 auto;padding:9px 16px calc(10px + var(--safe-bottom));border-top:1px solid var(--line);color:#5e6470;font-size:9px;text-align:center}
.player-shell:fullscreen,.player-shell:-webkit-full-screen,.player-shell.fallback-fullscreen{width:100%;height:100%;border:0;border-radius:0}.player-shell.fallback-fullscreen{position:fixed;inset:0;z-index:100;width:100vw;height:100dvh}.player-shell:fullscreen .now-playing,.player-shell.fallback-fullscreen .now-playing{padding-bottom:max(18px,var(--safe-bottom))}.player-shell:fullscreen .canvas-stats,.player-shell.fallback-fullscreen .canvas-stats{top:max(14px,var(--safe-top));left:14px}
[hidden]{display:none!important}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes shake{25%{transform:translateX(-8px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}
@media(max-width:800px){.topbar{height:54px;padding:0 14px}.workspace{height:calc(100dvh - var(--safe-top) - 54px);display:flex;flex-direction:column}.stage{flex:0 0 min(37dvh,310px);padding:8px 9px 0;background:#07090d}.player-shell{border-radius:13px}.stage-caption{display:none}.channel-panel{flex:1;min-height:0;border-left:0;border-top:1px solid var(--line)}.panel-heading{padding:13px 14px 10px}.panel-heading h2{font-size:17px;margin-top:4px}.search-box{margin:0 11px}.search-box kbd{display:none}.groups{padding:10px 11px 8px}.channel-list{--row-height:51px}.channel-window{left:5px;right:5px}.channel-row{padding:7px}.list-status{padding-bottom:calc(7px + var(--safe-bottom))}.wordmark span{display:none}}
@media(max-height:500px) and (orientation:landscape){.topbar{display:none}.app{padding:0}.workspace{height:100dvh;display:grid;grid-template-columns:minmax(0,1.75fr) minmax(280px,.75fr)}.stage{min-height:0;max-height:none;flex:auto;padding:0}.player-shell{border:0;border-radius:0}.stage-caption{display:none}.channel-panel{border-top:0;border-left:1px solid var(--line)}.panel-heading{padding-top:10px}.panel-heading .eyebrow{display:none}}
@media(max-height:650px){.brand-mark{width:58px;height:58px;margin-bottom:12px}.lock-card h1{font-size:27px;margin-top:7px}.lock-copy{display:none}.pin-dots{margin-top:14px}.keypad{grid-template-columns:repeat(3,58px);gap:6px}.keypad button{width:58px;height:43px;border-radius:13px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}