* { box-sizing: border-box; }
:root { --bg:#f3f2f1; --panel:#fff; --sidebar:#201f1e; --sidebar-2:#2b2a29; --accent:#6264a7; --accent-hover:#4b4d8f; --text:#201f1e; --muted:#8a8886; --border:#e1dfdd; --msg-hover:#f5f5f5; }
html,body { height:100%; margin:0; font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif; background:var(--bg); color:var(--text); }
.hidden { display:none !important; }

.auth { height:100%; display:grid; place-items:center; background:linear-gradient(135deg,#6264a7,#373a7c); }
.auth-card { background:#fff; padding:32px; border-radius:12px; width:340px; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.auth-card h1 { margin:0 0 4px; color:var(--accent); }
.auth-card input { width:100%; padding:12px; margin:8px 0; border:1px solid var(--border); border-radius:8px; font-size:14px; }
.row { display:flex; gap:8px; margin-top:8px; }
.row button { flex:1; padding:12px; border:0; border-radius:8px; background:var(--accent); color:#fff; cursor:pointer; font-weight:600; }
.row button.secondary { background:#e8ebfa; color:var(--accent); }
.row button:hover { opacity:.9; }
.error { color:#d13438; font-size:13px; margin-top:8px; min-height:18px; }
.muted { color:var(--muted); font-size:13px; margin:0 0 8px; }

.main { display:grid; grid-template-columns:260px 1fr; height:100%; }
.sidebar { background:var(--sidebar); color:#eee; display:flex; flex-direction:column; padding:12px 0; }
.brand { display:flex; align-items:center; gap:10px; padding:8px 16px 16px; font-weight:700; }
.logo { width:32px; height:32px; background:var(--accent); color:#fff; display:grid; place-items:center; border-radius:8px; font-size:12px; }
.section { padding:8px 12px; flex:1; overflow:auto; }
.section-title { font-size:11px; text-transform:uppercase; color:#a19f9d; padding:6px 8px; letter-spacing:.5px; }
.sidebar ul { list-style:none; padding:0; margin:0; }
.sidebar li { padding:8px 10px; border-radius:6px; cursor:pointer; font-size:14px; display:flex; align-items:center; gap:6px; }
.sidebar li:hover { background:var(--sidebar-2); }
.sidebar li.active { background:var(--accent); color:#fff; }
.presence li { cursor:default; }
.presence li::before { content:''; width:8px; height:8px; border-radius:50%; background:#92c353; display:inline-block; }
.ghost { background:transparent; color:#c8c6c4; border:1px dashed #444; border-radius:6px; padding:8px; margin:6px 8px; cursor:pointer; font-size:13px; }
.ghost:hover { background:var(--sidebar-2); color:#fff; }
.user-bar { padding:10px 16px; border-top:1px solid #333; display:flex; justify-content:space-between; align-items:center; font-size:13px; }

.content { display:flex; flex-direction:column; background:var(--panel); height:100vh; }
.topbar { padding:14px 24px; border-bottom:1px solid var(--border); }
.topbar h2 { margin:0; font-size:16px; }
.messages { flex:1; overflow-y:auto; padding:16px 24px; }
.msg { padding:8px 10px; border-radius:8px; margin-bottom:4px; }
.msg:hover { background:var(--msg-hover); }
.msg .author { font-weight:700; color:var(--accent); margin-right:8px; }
.msg .time { color:var(--muted); font-size:11px; }
.msg .body { margin-top:2px; white-space:pre-wrap; word-break:break-word; }
.typing { height:20px; padding:0 24px; font-size:12px; color:var(--muted); font-style:italic; }
.composer { display:flex; gap:8px; padding:12px 24px 20px; border-top:1px solid var(--border); }
.composer textarea { flex:1; resize:none; padding:12px 14px; border:1px solid var(--border); border-radius:10px; font-size:14px; font-family:inherit; max-height:140px; }
.composer textarea:focus { outline:none; border-color:var(--accent); }
.composer button { background:var(--accent); color:#fff; border:0; padding:0 20px; border-radius:10px; cursor:pointer; font-weight:600; }
.composer button:hover { background:var(--accent-hover); }

.modal { position:fixed; inset:0; background:rgba(0,0,0,.4); display:grid; place-items:center; z-index:50; }
.modal-card { background:#fff; padding:24px; border-radius:12px; width:360px; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.modal-card h3 { margin:0 0 12px; color:var(--accent); }
.modal-card input:not([type=checkbox]) { width:100%; padding:10px; margin:6px 0; border:1px solid var(--border); border-radius:8px; font-size:14px; }
.checkbox-row { display:flex; align-items:center; gap:8px; font-size:13px; color:#333; margin:8px 0; }
.checkbox-row input { width:auto; margin:0; }
#users li { display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:13px; }
#users li .uname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#users li .badge { background:#6264a7; color:#fff; font-size:10px; padding:1px 6px; border-radius:8px; }
#users li .del { background:transparent; border:0; color:#d13438; cursor:pointer; font-size:14px; opacity:.6; }
#users li .del:hover { opacity:1; }