*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#0e0f13;color:#e7e9ee;min-height:100vh}main{max-width:760px;margin:0 auto;padding:32px 20px}h1,h2{margin-top:0}h1{font-size:2rem}h2:focus{outline:none}.hint{display:block;color:#9aa0ad;font-size:.875rem;font-weight:400;margin-top:4px}.hidden{display:none!important}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}form{display:grid;gap:16px;background:#181a21;padding:24px;border-radius:12px;border:1px solid #252833}.field{display:grid;gap:6px}.field>label{font-weight:500}.field.checkbox{grid-template-columns:auto 1fr;gap:4px 10px;align-items:start}.field.checkbox input{grid-row:1;grid-column:1;margin-top:3px;width:1.1rem;height:1.1rem;accent-color:#6b8afd}.field.checkbox label{grid-row:1;grid-column:2;font-weight:400;cursor:pointer}.field.checkbox .hint{grid-row:2;grid-column:2;margin-top:0}input[type=text],input[type=password]{background:#0e0f13;color:#e7e9ee;border:1px solid #404654;border-radius:8px;padding:10px 12px;font-size:1rem;font-family:inherit}input:focus-visible{outline:3px solid #ffd24a;outline-offset:2px;border-color:transparent}fieldset{border:1px solid #252833;border-radius:8px;padding:12px 16px;display:grid;gap:14px;margin:0}legend{padding:0 6px;color:#c9cdd6;font-size:.9rem;font-weight:500}button{background:#6b8afd;color:#fff;border:2px solid transparent;border-radius:8px;padding:12px 20px;font-size:1rem;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:8px}button:hover{background:#5877e8}button:focus-visible{outline:3px solid #ffd24a;outline-offset:2px}button[aria-pressed=true]{background:#c0392b}button[aria-pressed=true]:hover{background:#a32d20}button.danger{background:transparent;color:#ff9b91;border-color:#c0392b}button.danger:hover{background:#c0392b;color:#fff}.error{color:#ff6b6b;min-height:1.25em;margin:0;font-size:.9rem}.room-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px}.controls{display:flex;gap:8px;flex-wrap:wrap}.rec-status{color:#ff9b91;font-size:.85rem;font-family:ui-monospace,monospace}.rec-status:before{content:"● "}.peers{list-style:none;padding:0;margin:0;display:grid;gap:10px}.peers li{background:#181a21;border:1px solid #252833;border-radius:10px;padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center}.peers .name{font-weight:600}.peers .peer-state{font-size:.8rem;color:#ff9b91;min-width:1.25em;text-align:right}.meter{grid-column:1 / -1;height:6px;background:#0e0f13;border-radius:3px;overflow:hidden}.meter-bar{height:100%;width:0%;background:linear-gradient(90deg,#4caf50,#ffc107 70%,#f44336);transition:width 50ms linear}.footnote{margin-top:24px;color:#9aa0ad;font-size:.85rem}@media (prefers-reduced-motion: reduce){.meter-bar{transition:none}*{animation:none!important;transition:none!important}}@media (prefers-contrast: more){body{background:#000;color:#fff}form,.peers li{border-color:#fff;background:#111}input,fieldset{border-color:#fff}.hint{color:#d0d0d0}.error{color:#f44;font-weight:700}}