:root{--bg: #0e1424;--bg-soft: #161f38;--panel: #1c274a;--panel-2: #223061;--border: #2c3b6e;--text: #eef2ff;--muted: #9fb0d8;--accent: #6ea8fe;--accent-2: #b18cff;--ok: #3ddc97;--warn: #ffb020;--danger: #ff6b6b;--radius: 16px;--shadow: 0 10px 30px rgba(0, 0, 0, .35);color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:radial-gradient(1200px 800px at 15% -10%,#24336b 0%,transparent 55%),radial-gradient(1000px 700px at 110% 10%,#3a2a63 0%,transparent 50%),var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5}a{color:var(--accent)}.wrap{max-width:1100px;margin:0 auto;padding:20px}.topbar{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border);background:#0e142499;backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px;text-decoration:none;color:var(--text)}.brand .logo{font-size:22px}.spacer{flex:1}.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;border:1px solid var(--border);background:var(--panel);color:var(--muted)}.dot{width:9px;height:9px;border-radius:50%;background:var(--muted);box-shadow:0 0 #3ddc9799}.dot.online{background:var(--ok);animation:pulse 2s infinite}.dot.connecting{background:var(--warn)}.dot.offline{background:var(--danger)}@keyframes pulse{0%{box-shadow:0 0 #3ddc9780}70%{box-shadow:0 0 0 8px #3ddc9700}to{box-shadow:0 0 #3ddc9700}}.card{background:linear-gradient(180deg,var(--panel),var(--bg-soft));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}h1{font-size:clamp(24px,4vw,34px);margin:0 0 6px}.lead{color:var(--muted);margin:0 0 22px;max-width:60ch}.btn{appearance:none;border:1px solid var(--border);background:var(--panel-2);color:var(--text);font:inherit;font-weight:600;padding:11px 16px;border-radius:12px;cursor:pointer;transition:transform .05s ease,background .15s ease,border-color .15s ease;display:inline-flex;align-items:center;gap:8px}.btn:hover{background:#2a3a72}.btn:active{transform:translateY(1px)}.btn.primary{background:linear-gradient(180deg,var(--accent),#4f86f0);border-color:transparent;color:#071026}.btn.primary:hover{filter:brightness(1.05)}.btn.danger{background:#3a1f2b;border-color:#6b2b39;color:#ffd7dd}.btn.ghost{background:transparent}.btn:disabled{opacity:.5;cursor:not-allowed}.input{appearance:none;border:1px solid var(--border);background:#0f1730;color:var(--text);font:inherit;padding:11px 14px;border-radius:12px;width:100%}.input:focus{outline:2px solid var(--accent);outline-offset:1px}.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.grid-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:8px}.role{display:block;text-decoration:none;color:inherit;border:1px solid var(--border);border-radius:var(--radius);padding:26px 22px;background:linear-gradient(180deg,var(--panel),var(--bg-soft));transition:transform .12s ease,border-color .15s ease}.role:hover{transform:translateY(-3px);border-color:var(--accent)}.role .emoji{font-size:40px}.role h2{margin:10px 0 6px}.role p{color:var(--muted);margin:0}.muted{color:var(--muted)}.small{font-size:13px}.mono{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace}.mosaic{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}.mosaic.count-1{grid-template-columns:1fr}.tile{position:relative;aspect-ratio:16 / 9;background:#060a16;border:1px solid var(--border);border-radius:14px;overflow:hidden}.tile video{width:100%;height:100%;object-fit:cover;background:#060a16}.tile .label{position:absolute;left:10px;bottom:10px;padding:5px 10px;border-radius:8px;background:#060a16b3;font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;backdrop-filter:blur(4px)}.tile .ctrl{position:absolute;top:10px;right:10px;display:flex;gap:6px}.tile .ctrl button{border:none;background:#060a16b3;color:var(--text);width:34px;height:34px;border-radius:9px;cursor:pointer;font-size:15px;backdrop-filter:blur(4px)}.tile .ctrl button:hover{background:#28376ed9}.tile .meter{position:absolute;top:10px;left:10px;width:46px;height:6px;border-radius:4px;background:#060a1699;overflow:hidden}.tile .meter>span{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--ok),var(--warn),var(--danger));transition:width .08s linear}.empty{border:1px dashed var(--border);border-radius:14px;padding:44px 20px;text-align:center;color:var(--muted)}.preview{position:relative;aspect-ratio:3 / 4;max-height:60vh;margin-inline:auto;background:#060a16;border:1px solid var(--border);border-radius:16px;overflow:hidden}@media(min-width:720px){.preview{aspect-ratio:16 / 9}}.preview video{width:100%;height:100%;object-fit:cover}.preview .overlay{position:absolute;inset:auto 0 0;padding:14px;display:flex;justify-content:center;gap:10px;background:linear-gradient(0deg,rgba(6,10,22,.85),transparent)}.qr{background:#fff;padding:12px;border-radius:12px;display:inline-block;line-height:0}.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:30px;font-weight:800;letter-spacing:6px;padding:10px 16px;border-radius:12px;background:#0f1730;border:1px solid var(--border)}.notice{border-left:3px solid var(--accent-2);background:#b18cff14;padding:12px 14px;border-radius:0 10px 10px 0;color:var(--muted);font-size:14px}.hidden{display:none!important}.blackout{position:fixed;inset:0;z-index:1000;background:#000;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}.blackout-hint{color:#14203a;font-size:13px;letter-spacing:.3px;animation:blackout-fade 4s ease-in-out forwards}@keyframes blackout-fade{0%{opacity:.55}to{opacity:0}}