:root{
  --bg:#0b1020;--card:#111a33;--muted:#94a3b8;--text:#e5e7eb;--accent:#7c3aed;--line:#1f2a4a;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text)}
.bg{min-height:100vh;background:radial-gradient(1000px 500px at 30% 10%, rgba(124,58,237,.35), transparent 60%),
radial-gradient(900px 500px at 80% 20%, rgba(34,197,94,.20), transparent 60%),linear-gradient(180deg,#050816,#0b1020);}
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;gap:24px;padding:24px;flex-wrap:wrap}
.card{width:360px;background:rgba(17,26,51,.85);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow);backdrop-filter:blur(10px)}
.brand{font-weight:900;font-size:22px;margin-bottom:10px}
label{display:block;color:var(--muted);font-size:12px;margin-top:10px;margin-bottom:6px}
input{width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:rgba(14,22,48,.75);color:var(--text);outline:none}
input:focus{border-color:rgba(124,58,237,.7);box-shadow:0 0 0 4px rgba(124,58,237,.15)}
.btn{border:1px solid var(--line);background:rgba(14,22,48,.8);color:var(--text);padding:10px 12px;border-radius:12px;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg, rgba(124,58,237,.95), rgba(99,102,241,.85));border-color:rgba(124,58,237,.5)}
.btn.ghost{background:transparent}
.btn.small{padding:10px 12px;min-width:40px}
.tabs{display:flex;gap:8px;margin-bottom:10px}
.tab{flex:1;padding:10px;border-radius:12px;border:1px solid var(--line);background:rgba(14,22,48,.6);color:var(--muted);cursor:pointer}
.tab.active{background:rgba(124,58,237,.18);color:var(--text);border-color:rgba(124,58,237,.4)}
.hidden{display:none}
.msg{margin-top:10px;color:#fecaca;font-size:13px;min-height:18px}
.hint{max-width:420px;color:var(--muted);line-height:1.5}

.app{background:linear-gradient(180deg,#050816,#0b1020);min-height:100vh}
.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--line);background:rgba(5,8,22,.7);backdrop-filter:blur(10px);position:sticky;top:0;z-index:50}
.logo{font-weight:900}
.pill{font-size:12px;color:var(--muted);padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(14,22,48,.6)}
.layout{display:grid;grid-template-columns:320px 1fr;min-height:calc(100vh - 64px)}
.sidebar{border-right:1px solid var(--line);padding:14px;background:rgba(8,12,28,.55)}
.section{margin-bottom:14px}
.section-title{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px}
.list{display:flex;flex-direction:column;gap:8px}
.item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(14,22,48,.55);cursor:pointer}
.item:hover{border-color:rgba(124,58,237,.35)}
.item.active{border-color:rgba(124,58,237,.75);box-shadow:0 0 0 4px rgba(124,58,237,.12)}
.badge{font-size:12px;color:var(--muted);padding:4px 8px;border-radius:999px;border:1px solid var(--line);background:rgba(5,8,22,.5)}
.row{display:flex;gap:8px;margin-top:8px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.small{font-size:12px;color:var(--muted)}
.main{padding:14px}
.split{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
.panel{border:1px solid var(--line);border-radius:18px;background:rgba(17,26,51,.55);box-shadow:var(--shadow);overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);background:rgba(5,8,22,.5)}
.panel-title{font-weight:800}
.chat{height:calc(100vh - 64px - 14px - 14px - 54px - 40px);min-height:340px;overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.bubble{max-width:88%;padding:10px 12px;border-radius:16px;border:1px solid var(--line);background:rgba(14,22,48,.6)}
.bubble.me{margin-left:auto;border-color:rgba(34,197,94,.35)}
.bmeta{font-size:11px;color:var(--muted);margin-bottom:6px}
.composer{display:flex;gap:10px;padding:12px 14px;border-top:1px solid var(--line);background:rgba(5,8,22,.35)}
.composer input{flex:1}
.peers{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.peer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(14,22,48,.55)}
.avatar{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg, rgba(124,58,237,.7), rgba(34,197,94,.5));display:inline-block}
.me{display:flex;align-items:center;gap:10px}
.meta .sub{color:var(--muted);font-size:12px}
.voice-controls{display:flex;gap:8px}
.voice-meta{padding:12px 14px;display:flex;gap:18px;color:var(--muted);border-bottom:1px solid var(--line)}
.voice-settings{padding:12px 14px;border-bottom:1px solid var(--line)}
.chk{display:flex;align-items:center;gap:8px;margin-top:10px;color:var(--muted);font-size:13px}
@media(max-width:1100px){.layout{grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid var(--line)}.split{grid-template-columns:1fr}.chat{height:50vh}}