.wrap{max-width:1200px;margin:0 auto;padding:26px 16px}
.k{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--g)}
h1{font-family:Anton,sans-serif;font-weight:400;font-size:38px;line-height:1.05;margin:6px 0}.sub{color:var(--m);max-width:820px;margin-bottom:18px}
.cols{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
.player{position:relative;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:16/9;border:1px solid var(--line)}
.player canvas{width:100%;height:100%;display:block}
.badge{position:absolute;top:14px;left:14px;background:#333;color:#fff;font-weight:900;font-size:13px;letter-spacing:.08em;padding:5px 11px;border-radius:7px}
.badge.live{background:var(--r);animation:p 1.4s infinite}@keyframes p{50%{opacity:.6}}
.wait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;background:radial-gradient(circle,#1d2a24,#050807);padding:20px}
.wait b{font-family:Anton,sans-serif;font-weight:400;font-size:30px;letter-spacing:.04em}.wait span{font-size:18px}.wait small{color:var(--m)}
.info{margin-top:12px}.info h2{font-size:22px}.info p{color:var(--m)}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px}
.card h3{font-size:16px;margin-bottom:10px}
.btn{width:100%;background:var(--g);color:#03140b;border:0;border-radius:11px;padding:12px;font:inherit;font-weight:800;cursor:pointer;margin-bottom:8px}.btn.l{background:none;border:1.5px solid var(--line);color:var(--t)}.btn:disabled{opacity:.4;cursor:default}
.log{display:grid;gap:7px;font-size:13px}.log div{border-left:3px solid var(--g);padding:3px 8px;animation:in .4s}.log small{color:var(--m);display:block}
.empty{color:var(--m);font-size:13px}@keyframes in{from{opacity:0}to{opacity:1}}
@media(max-width:900px){.cols{grid-template-columns:1fr}}