:root{--bg:#0e1419;--surface:#18222b;--surface-2:#1f2c38;--primary:#00b8a9;--accent:#4c8dff;--danger:#e5484d;--text:#e8edf2;--muted:#8a97a3}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);height:100%;color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif}.screen{min-height:100vh}.hidden{display:none!important}.muted{color:var(--muted)}#home{flex-direction:column;gap:16px;max-width:480px;margin:0 auto;padding:40px 24px;display:flex}.brand{align-items:center;gap:14px;margin-bottom:20px;display:flex}.brand-icon{background:#00b8a926;border-radius:14px;place-items:center;width:52px;height:52px;font-size:26px;display:grid}.brand h1{font-size:22px}label{font-size:14px;font-weight:600}input[type=text]{background:var(--surface);color:var(--text);border:1px solid #0000;border-radius:12px;outline:none;padding:14px 16px;font-size:16px}input[type=text]:focus{border-color:var(--primary)}button{cursor:pointer;font-family:inherit}.role{background:var(--surface);color:var(--text);text-align:left;border:none;border-radius:14px;align-items:center;gap:16px;padding:18px;transition:background .15s;display:flex}.role:hover{background:var(--surface-2)}.role-ico{background:#ffffff0f;border-radius:12px;place-items:center;width:48px;height:48px;font-size:22px;display:grid}.role-txt{flex-direction:column;flex:1;gap:3px;display:flex}.role-txt strong{font-size:17px}.role-txt em{color:var(--muted);font-size:13px;font-style:normal}.chev{color:var(--muted);font-size:26px}#room{flex-direction:column;height:100vh;display:flex}.topbar{background:#0a0e12;align-items:center;gap:12px;padding:12px 16px;display:flex}.iconbtn{background:var(--surface);color:var(--text);border:none;border-radius:10px;width:36px;height:36px;font-size:22px;line-height:1}#roomTitle{flex:1;font-size:18px;font-weight:600}.tag{letter-spacing:1px;color:var(--primary);font-size:11px;font-weight:700}.status{color:var(--muted);background:#0a0e12;align-items:center;gap:8px;padding:10px 16px;font-size:13px;display:flex}.status .dot{background:var(--muted);border-radius:50%;width:9px;height:9px}.status.online .dot{background:var(--primary)}.status.error{color:var(--danger)}.status.error .dot{background:var(--danger)}.videos{background:#000;flex:1;grid-auto-rows:1fr;gap:6px;padding:6px;display:grid}.videos.empty{color:var(--muted);text-align:center;justify-content:center;align-items:center;padding:40px;display:flex}.videos.count-1{grid-template-columns:1fr}.videos.count-2,.videos.count-3,.videos.count-4{grid-template-columns:1fr 1fr}.tile{background:#000;border-radius:10px;position:relative;overflow:hidden}.tile video{object-fit:cover;width:100%;height:100%;display:block}.tile .label{background:#0009;border-radius:20px;padding:4px 10px;font-size:12px;position:absolute;bottom:8px;left:8px}.controls{background:#0a0e12;justify-content:center;gap:14px;padding:18px;display:flex}.ctrl{background:var(--surface);width:56px;height:56px;color:var(--text);border:none;border-radius:50%;place-items:center;font-size:22px;display:grid}.ctrl.off{background:#ffffff1f}.ctrl.danger{background:var(--danger)}