:root{
  --bg:#0B0B0F; --bg2:#121218; --bg3:#1B1B24; --bg4:#232330;
  --fg:#F5F3FF; --mut:#9a96ad; --line:rgba(255,255,255,.08);
  --ac:#7C3AED; --ac2:#8B5CF6; --ac3:#A78BFA; --warm:#FDBA74;
  --ok:#22c55e; --err:#ef4444;
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-full:999px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(1200px 600px at 50% -10%, #1a1230 0%, var(--bg) 55%);
  color:var(--fg); font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Tahoma,sans-serif;
  overflow-x:hidden;
}
a{color:var(--ac3);text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
input,textarea,select{
  width:100%;background:var(--bg4);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;outline:0;transition:.15s;
}
input:focus,textarea:focus{border-color:var(--ac2);box-shadow:0 0 0 3px rgba(124,58,237,.18)}
label{display:block;margin:14px 0 6px;color:var(--mut);font-size:13px;font-weight:500}

.btn{
  background:linear-gradient(180deg,var(--ac2),var(--ac));border:0;color:#fff;
  padding:11px 20px;border-radius:var(--r-full);cursor:pointer;font-weight:600;
  transition:.15s;box-shadow:0 2px 14px rgba(124,58,237,.35);
}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn.ghost{background:var(--bg4);box-shadow:none;border:1px solid var(--line)}
.btn.danger{background:linear-gradient(180deg,#f87171,#dc2626);box-shadow:0 2px 14px rgba(220,38,38,.3)}
.btn.sm{padding:7px 14px;font-size:13px}
.btn.icon{width:46px;height:46px;padding:0;border-radius:50%;display:grid;place-items:center;font-size:18px}

.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.pill{display:inline-block;background:var(--bg4);border-radius:var(--r-full);padding:3px 11px;font-size:12px;color:var(--mut)}
.pill.live{background:rgba(34,197,94,.15);color:var(--ok)}
.pill.locked{background:rgba(251,146,60,.15);color:var(--warm)}

.center{min-height:100vh;display:grid;place-items:center;padding:24px}
.narrow{width:100%;max-width:400px}

.av{
  width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover;overflow:hidden;
  background:linear-gradient(135deg,var(--ac2),#5b21b6);display:grid;place-items:center;
  font-weight:700;color:#fff;font-size:15px;position:relative;
}
.av.lg{width:92px;height:92px;font-size:34px}
.av.speaking{box-shadow:0 0 0 3px var(--bg), 0 0 0 6px var(--ok);animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px var(--bg),0 0 0 6px rgba(34,197,94,.9)}50%{box-shadow:0 0 0 3px var(--bg),0 0 0 9px rgba(34,197,94,.5)}}
.av.muted::after{content:"🔇";position:absolute;bottom:-2px;right:-2px;background:var(--bg3);border-radius:50%;font-size:11px;width:18px;height:18px;display:grid;place-items:center}

/* ---------- shell layout ---------- */
.shell{display:flex;min-height:100vh}
.side{
  width:240px;flex:none;background:var(--bg2);border-right:1px solid var(--line);
  padding:20px 14px;display:flex;flex-direction:column;gap:3px;position:sticky;top:0;height:100vh;
}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:19px;margin-bottom:18px;padding:0 10px;color:#fff}
.logo .dot{width:10px;height:10px;border-radius:50%;background:var(--ac2);box-shadow:0 0 12px var(--ac2)}
.side a{padding:11px 12px;border-radius:var(--r-md);color:var(--fg);cursor:pointer;font-size:14px;display:flex;align-items:center;gap:10px}
.side a:hover{background:var(--bg3)}
.side a.on{background:var(--bg4);color:var(--ac3);font-weight:600}
.grow{flex:1}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;gap:12px;align-items:center;padding:16px 24px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(11,11,15,.7);backdrop-filter:blur(10px);z-index:5}
.page{padding:24px;max-width:1100px;width:100%;margin:0 auto}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:18px 0 24px}
.stats b{font-size:26px;display:block;background:linear-gradient(90deg,#fff,var(--ac3));-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{font-size:12.5px;color:var(--mut)}
.row{display:flex;gap:10px;align-items:center}
.row.wrap{flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between}

/* ---------- room cards ---------- */
.room-card{cursor:pointer;transition:.15s}
.room-card:hover{border-color:var(--ac2);transform:translateY(-2px)}
.stack{display:flex}
.stack .av{margin-left:-10px;border:2px solid var(--bg2)}
.stack .av:first-child{margin-left:0}

/* ---------- auth ---------- */
.toggle{display:flex;gap:4px;background:var(--bg4);border-radius:var(--r-full);padding:4px;margin:10px 0}
.toggle button{flex:1;border:0;background:transparent;border-radius:var(--r-full);padding:8px;cursor:pointer;color:var(--mut)}
.toggle button.on{background:var(--ac);color:#fff}

/* ---------- toasts ---------- */
#toasts{position:fixed;top:16px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:999;max-width:320px}
.toast{background:var(--bg3);border:1px solid var(--line);border-left:3px solid var(--ac2);padding:11px 15px;border-radius:var(--r-md);animation:slide .2s;box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:14px}
.toast.err{border-left-color:var(--err)}
@keyframes slide{from{opacity:0;transform:translateX(12px)}}

/* ---------- modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:100;padding:16px;backdrop-filter:blur(2px)}
.modal-bg .card{width:100%;max-width:420px;max-height:90vh;overflow:auto}

/* ---------- Clubhouse-style room stage ---------- */
.room-shell{display:flex;flex-direction:column;min-height:100vh}
.room-top{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line)}
.room-body{flex:1;display:flex;min-height:0}
.stage-col{flex:1;min-width:0;display:flex;flex-direction:column}
.stage{flex:1;overflow:auto;padding:28px 20px}
.stage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:22px;max-width:820px;margin:0 auto}
.speaker{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.speaker .name{font-size:12.5px;max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.speaker .role{font-size:10.5px;color:var(--ac3)}

.listeners{padding:0 20px 20px;max-width:820px;margin:0 auto;width:100%}
.listeners h4{color:var(--mut);font-size:11.5px;letter-spacing:.08em;margin:18px 0 10px}
.listener-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:16px}
.listener{display:flex;flex-direction:column;align-items:center;gap:6px}
.listener .av{width:52px;height:52px;font-size:18px}
.listener .name{font-size:11px;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mut)}

.voice-controls{display:flex;justify-content:center;gap:14px;padding:18px;border-top:1px solid var(--line)}

/* chat drawer (desktop: side panel, mobile: bottom sheet) */
.chat-panel{width:340px;flex:none;border-left:1px solid var(--line);display:flex;flex-direction:column;background:var(--bg2)}
.chat-head{padding:14px 16px;border-bottom:1px solid var(--line);font-weight:600;display:flex;justify-content:space-between;align-items:center}
.msgs{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.msg{display:flex;gap:8px;max-width:92%}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg .av{width:28px;height:28px;font-size:12px}
.bub{background:var(--bg4);border-radius:14px;padding:8px 12px;word-break:break-word;white-space:pre-wrap;font-size:13.5px}
.msg.me .bub{background:linear-gradient(135deg,#4c1d95,#5b21b6)}
.meta{font-size:11px;color:var(--mut);margin-bottom:2px}
.reply-ref{border-left:2px solid var(--ac2);padding-left:7px;color:var(--mut);font-size:12px;margin-bottom:3px}
.compose{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}

.members-panel{width:280px;flex:none;border-left:1px solid var(--line);background:var(--bg2);padding:16px;overflow:auto}
.members-panel h4{color:var(--mut);font-size:11.5px;letter-spacing:.08em;margin:14px 0 8px}
.mem-row{display:flex;gap:9px;align-items:center;padding:6px 0}
.mem-row .av{width:30px;height:30px;font-size:12px}

/* ---------- bottom nav (mobile) ---------- */
.bottom{display:none}
@media(max-width:860px){
  .side{display:none}
  .bottom{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:30;
    background:rgba(18,18,24,.92);backdrop-filter:blur(10px);border-top:1px solid var(--line);
    justify-content:space-around;padding:10px 6px calc(10px + env(safe-area-inset-bottom,0px));
  }
  .bottom a{cursor:pointer;padding:6px 8px;font-size:11px;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:3px}
  .bottom a.on{color:var(--ac3)}
  .page{padding:16px;padding-bottom:84px}
  .chat-panel,.members-panel{position:fixed;right:0;top:0;bottom:0;z-index:40;width:88%;max-width:360px;transform:translateX(100%);transition:.22s}
  .chat-panel.open,.members-panel.open{transform:none}
  .stage-grid{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:16px}
  .room-top{padding:12px 14px}
}
.empty{text-align:center;padding:60px 16px;color:var(--mut)}
.empty .btn{margin-top:14px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:99px}