.online-panel{margin:18px 0;padding:18px;border:1px solid #578f99;border-radius:12px;background:linear-gradient(135deg,#12313f,#102632)}
.online-panel h2{font-size:20px;letter-spacing:-.5px;margin:0 0 7px}.online-panel p{font-size:12px;line-height:1.6;color:#b3d3dd;margin:7px 0 13px}
.online-panel label{display:block;font-size:11px;color:#b3d3dd;margin:9px 0 5px}.online-panel input{width:100%;padding:11px 12px;font:500 14px system-ui;border:1px solid #547c8e;border-radius:6px;background:#0b202e;color:#f4ffff;outline-offset:2px}
.online-panel input:focus{outline:2px solid #7ce8db}.online-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.online-actions button{padding:11px 13px;font-size:11px;border-radius:6px;letter-spacing:.3px}.online-actions .secondary{background:#2d4a61;color:#e4faff}
#online-code{text-transform:uppercase;letter-spacing:2px}#online-note{color:#ffd48c;white-space:pre-line}#online-status{position:absolute;bottom:112px;left:28px;max-width:400px;padding:9px 13px;border:1px solid #7ce8db66;border-radius:7px;background:#0b223beb;font-size:12px;color:#a5f6e9;pointer-events:none}#online-status[hidden],#online-room[hidden]{display:none}
#online-roster{font-size:12px;line-height:1.9;white-space:pre-line;color:#d1e6f5;margin:12px 0}.online-panel a{color:#9cefe2}#online-room-code{font-weight:800;letter-spacing:2px;color:white}
input:disabled,button:disabled{cursor:default}#online-room p{margin-bottom:0}.online-panel [hidden]{display:none}