:root {
  --bg: #0f1115;
  --panel: #181b22;
  --line: #262a33;
  --text: #e8eaed;
  --muted: #8a909c;
  --green: #22c55e;
  --red: #ef4444;
  --amber: #f59e0b;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  -webkit-tap-highlight-color: transparent;
}
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid var(--line);
}
.title { display: flex; align-items: center; gap: 12px; }
h1 { font-size: 20px; margin: 0; }
#statusText { margin: 0; color: var(--muted); font-size: 13px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--amber); flex: none; }
.dot.ok { background: var(--green); }
.dot.bad { background: var(--red); }
.count { color: var(--muted); font-variant-numeric: tabular-nums; }

main { flex: 1; overflow-y: auto; padding: 8px 16px; }
.peers { list-style: none; margin: 0; padding: 0; }
.peers li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; margin: 8px 0;
  background: var(--panel); border: 2px solid transparent; border-radius: 14px;
  transition: border-color .12s;
}
.peers li.speaking { border-color: var(--green); }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 700; background: #2b3140;
}
.peers .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peers .tag { font-size: 12px; color: var(--muted); }
.peers .conn { font-size: 12px; color: var(--amber); }
.peers .conn.ok { display: none; }

footer {
  display: flex; gap: 12px; padding: 16px; border-top: 1px solid var(--line);
}
button {
  border: 0; border-radius: 16px; color: var(--text); background: var(--panel);
  font: inherit; cursor: pointer; touch-action: manipulation;
}
button.big {
  flex: 1; min-height: 64px; font-size: 18px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--green); color: #04130a;
}
#muteBtn[aria-pressed="true"] { background: var(--red); color: #fff; }
#muteBtn { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#muteBtn.ptt { background: #2b3140; color: var(--text); min-height: 96px; }
#muteBtn.ptt.talking { background: var(--red); color: #fff; transform: scale(.98); }
button.mode { font-size: 14px; font-weight: 700; }
button.small { width: 64px; font-size: 22px; }

.gate {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  display: grid; place-items: center; padding: 16px; z-index: 10;
}
.gate.hidden { display: none; }
.gate-box {
  width: 100%; max-width: 360px; background: var(--panel);
  border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 12px;
}
.gate-box h2 { margin: 0; }
.gate-box p { margin: 0; color: var(--muted); }
.gate-box input {
  padding: 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font: inherit; font-size: 16px;
}