:root { --bg:#000; --tile:#2c2c2e; --text:#fff; --muted:#8e8e93; --line:#2c2c2e; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; min-height:100vh; }
main { max-width:760px; margin:0 auto; padding:48px 20px; }
h1 { text-align:center; font-size:22px; margin:0 0 32px; }
.grid { display:flex; flex-wrap:wrap; gap:28px; justify-content:center; }
.item { display:flex; flex-direction:column; align-items:center; gap:10px; width:110px; color:var(--text); text-decoration:none; }
.tile { width:96px; height:96px; border-radius:22px; background:var(--tile); display:flex; align-items:center; justify-content:center; overflow:hidden; transition:transform .12s; }
.tile img { width:100%; height:100%; object-fit:cover; }
.tile svg { width:56px; height:56px; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.item:hover .tile, .item:focus-visible .tile { transform:scale(1.06); }
.item:active .tile { transform:scale(.96); }
.item span { font-weight:600; font-size:14px; text-align:center; }
.top { display:flex; justify-content:space-between; margin-bottom:20px; }
.link { background:none; border:0; color:#0a84ff; font:inherit; cursor:pointer; padding:0; }
.exit { text-align:center; margin-top:48px; }
h2 { font-size:20px; margin:0 0 4px; }
.sub { color:var(--muted); margin:0 0 20px; font-size:14px; }
.nav { display:flex; gap:12px; margin-bottom:24px; }
.nav button { background:var(--tile); color:var(--text); border:0; border-radius:12px; padding:10px 16px; font:inherit; font-weight:600; cursor:pointer; }
.nav button.on { outline:2px solid #0a84ff; }
.users { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.users li { display:flex; align-items:center; gap:14px; padding:12px 4px; border-bottom:1px solid var(--line); }
.ava { width:44px; height:44px; border-radius:50%; background:var(--tile); display:flex; align-items:center; justify-content:center; font-weight:600; color:var(--muted); overflow:hidden; flex:none; }
.ava img { width:100%; height:100%; object-fit:cover; }
.who b { display:block; }
.who small { color:var(--muted); }
.login { max-width:340px; margin:12vh auto 0; display:flex; flex-direction:column; gap:12px; }
.login input { background:var(--tile); color:var(--text); border:0; border-radius:12px; padding:14px; font:inherit; }
.login button { background:#0a84ff; color:#fff; border:0; border-radius:12px; padding:14px; font:inherit; font-weight:600; cursor:pointer; }
.login .err { color:#ff453a; min-height:20px; font-size:14px; text-align:center; }