:root{--bg:#0b0f17;--card:#101827;--muted:#9aa4b2;--text:#e5e7eb;--line:#1f2a3a;--accent:#7c3aed;--accent2:#22c55e;}
*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
body{margin:0;background:radial-gradient(1000px 700px at 20% -10%, rgba(124,58,237,.25), transparent),radial-gradient(1000px 700px at 90% 10%, rgba(34,197,94,.18), transparent),var(--bg);color:var(--text)}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(11,15,23,.85);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:10px}
.logo{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#2563eb);font-weight:800}
.title{font-weight:700;letter-spacing:.2px}
.status{color:var(--muted);font-size:14px}
.wrap{max-width:980px;margin:18px auto;padding:0 12px;display:grid;gap:14px}
.card{background:rgba(16,24,39,.88);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.row{display:grid;gap:6px;margin:10px 0}
label{color:var(--muted);font-size:13px}
input,select,button{border-radius:12px;border:1px solid var(--line);background:#0b1220;color:var(--text);padding:10px 12px;outline:none}
input:focus,select:focus{border-color:rgba(124,58,237,.7);box-shadow:0 0 0 3px rgba(124,58,237,.15)}
small{color:var(--muted)}
.actions{display:flex;gap:10px;margin-top:12px}
button{cursor:pointer;background:linear-gradient(135deg,var(--accent),#2563eb);border:none;font-weight:700}
button.ghost{background:#0b1220;border:1px solid var(--line);font-weight:600}
button:disabled{opacity:.5;cursor:not-allowed}
.note{margin-top:12px;color:var(--muted);min-height:18px}
.signup{margin-top:12px}
.chat{display:grid;gap:12px}
.chatHeader{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.roomline{font-size:16px}
.subline{color:var(--muted);font-size:12px;margin-top:4px}
.messages{height:360px;overflow:auto;border:1px solid var(--line);border-radius:14px;padding:10px;background:#070c14}
.msgline{padding:8px 10px;border-radius:12px;border:1px solid rgba(31,42,58,.5);margin:8px 0}
.msgline b{color:#fff}
.msgline .meta{color:var(--muted);font-size:12px;margin-top:4px}
.sys{color:var(--muted);font-style:italic;border-style:dashed}
.bad{border-color:rgba(239,68,68,.45)}
.ok{border-color:rgba(34,197,94,.35)}
.composer{display:flex;gap:10px}
.composer input{flex:1}
.admin{border-top:1px solid var(--line);padding-top:12px}
.adminRow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.adminRow input{min-width:180px}
.adminOut{background:#070c14;border:1px solid var(--line);border-radius:12px;padding:10px;max-height:200px;overflow:auto}

.inline{display:flex;gap:8px;align-items:center;}
.inline input{flex:1;}
button.secondary{background:#182235;border:1px solid var(--line);color:var(--text);}button.secondary:hover{border-color:#2b3a52;}

.adminKeys{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);} .mini{width:110px;color:var(--muted);} .adminRow{display:flex;gap:8px;align-items:center;margin:6px 0;} .adminRow input{flex:1;}