:root{--bg:#050505;--surface:#111;--surface2:#191919;--line:#303030;--text:#f5f5f5;--muted:#969696;--accent:#fff}*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Inter,"Segoe UI",system-ui,sans-serif}button,input{font:inherit}.hidden{display:none!important}button{cursor:pointer}.login{height:100%;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 10%,#202020,transparent 38%),var(--bg)}.login-card{width:min(670px,100%);padding:42px;border:1px solid var(--line);border-radius:28px;background:var(--surface);box-shadow:0 30px 100px #000}.logo{width:58px;height:58px;display:grid;place-items:center;border:1px solid #555;border-radius:18px;background:#050505;color:#fff;font-size:28px;font-weight:900;font-style:italic;transform:rotate(-8deg)}.logo.small{margin:auto}.login small,.panel small{font-weight:850;letter-spacing:1.5px;color:var(--accent)}h1{margin:12px 0;font-size:46px;line-height:1.03;letter-spacing:-2px}h1 span{color:var(--accent)}.login-card>p,.panel>p,.note{color:var(--muted);font-size:12px;line-height:1.5}.login-card>label{display:block;margin:25px 0 7px;font-size:11px;font-weight:750}.login-row{display:flex;gap:9px}.login-row input,.wide-input{height:46px;flex:1;padding:0 14px;border:1px solid var(--line);border-radius:12px;outline:0;background:#080808;color:var(--text)}.login-row button,.primary{padding:0 18px;border:0;border-radius:11px;background:var(--accent);color:var(--bg);font-weight:800}.error{min-height:20px;margin-top:8px;color:#ff647e;font-size:12px}.app{height:100%;display:grid;grid-template-columns:82px 1fr}.rail{min-height:0;display:flex;flex-direction:column;align-items:center;gap:9px;padding:13px 9px 10px;border-right:1px solid var(--line);background:var(--surface)}.icon{position:relative;flex:none;width:52px;height:52px;padding:0;border:0;border-radius:14px;background:var(--surface2);color:var(--text);font-size:21px}.icon img{width:100%;height:100%;display:block;border-radius:14px;object-fit:cover}.profile{padding:3px;border:2px solid var(--accent)}.profile img{border-radius:10px}.divider{width:34px;height:1px;background:var(--line)}.channels{min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;overflow-y:auto;overflow-x:hidden}.channel{background:transparent}.channel:hover img,.channel.active img{box-shadow:0 0 0 2px var(--accent)}.live{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border:2px solid var(--surface);border-radius:50%;background:#555}.live.on{background:#ff3e67}.remove{position:absolute;z-index:3;right:-5px;top:-5px;width:18px;height:18px;display:none;place-items:center;border:0;border-radius:50%;background:#e83c59;color:#fff}.channel:hover .remove{display:grid}.add{border:1px dashed #666;background:transparent;font-size:28px}.icon:hover{filter:brightness(1.35)}.spacer{flex:1}.viewer{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(300px,1fr) auto;gap:12px;padding:16px}.main-stage{min-width:0;min-height:300px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:19px;background:#000}.empty{height:100%;display:grid;place-content:center;text-align:center;color:var(--muted)}.empty h2{margin:15px 0 4px;color:var(--text)}.empty p{margin:0;font-size:12px}.deck{height:330px}.deck header{height:26px;display:flex;justify-content:space-between;color:var(--muted);font-size:10px}.bottom{height:304px;display:flex;gap:10px;overflow-x:auto;overflow-y:hidden}.tile{position:relative;overflow:hidden;background:#000;border:1px solid var(--line)}.main-stage>.tile{width:100%;height:100%;border:0}.bottom>.tile{flex:0 0 400px;height:300px;border-radius:14px}.player,.player iframe{width:100%!important;height:100%!important}.tilebar{position:absolute;z-index:3;inset:9px 9px auto;display:flex;pointer-events:none}.tile-name{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:9px;background:#000d;font-size:10px;font-weight:800}.tile-name img{width:22px;height:22px;border-radius:6px}.actions{margin-left:auto;display:flex;gap:5px;pointer-events:auto}.actions button{width:31px;height:31px;border:1px solid #ffffff33;border-radius:9px;background:#000d;color:#fff}.main-stage .eye{display:none}.modal{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:24px;background:#000c;backdrop-filter:blur(10px)}.panel{width:min(620px,100%);max-height:90%;padding:24px;overflow:auto;border:1px solid var(--line);border-radius:22px;background:var(--surface)}.panel header{display:flex;align-items:center;justify-content:space-between}.panel h2{margin:4px 0}.panel header button{width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--text);font-size:22px}.results{margin-top:12px}.result{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:11px;padding:9px;border-radius:12px}.result:hover{background:var(--surface2)}.result img{width:46px;height:46px;border-radius:13px}.result small,.account small{display:block;color:var(--muted)}.result button{height:34px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--text)}.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:20px}.color-grid label,.setting{display:flex;align-items:center;justify-content:space-between;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);font-size:11px;font-weight:700}.setting{margin-top:9px}.settings .primary{height:40px;margin-top:12px}.account{position:fixed;z-index:10;left:92px;top:12px;width:275px;display:grid;grid-template-columns:42px 1fr;gap:10px;padding:12px;border:1px solid var(--line);border-radius:15px;background:var(--surface);box-shadow:0 22px 70px #000}.account img{width:42px;height:42px;border-radius:12px}.account a{grid-column:1/-1;padding:9px;border-radius:9px;background:var(--surface2);color:var(--text);text-decoration:none;font-size:11px}.toast{position:fixed;z-index:30;left:50%;bottom:24px;transform:translate(-50%,15px);padding:10px 15px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);font-size:11px;opacity:0;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:800px){.app{grid-template-columns:68px 1fr}.rail{padding-inline:7px}.icon{width:44px;height:44px}.viewer{padding:9px}.bottom>.tile{flex-basis:400px}.login-row{flex-direction:column}.login-row button{height:44px}}