* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #000; color: #fff;
  font: 16px/1.4 "Inter Tight", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body { -webkit-user-select: none; user-select: none; }
input { -webkit-user-select: text; user-select: text; }
.hidden { display: none !important; }
.screen { max-width: 420px; margin: 0 auto; padding: 16px; min-height: 100%; }
.logo { font-size: 32px; font-weight: 300; text-align: center; margin: 15vh 0 32px; }
.logo b, .logo.small b { font-weight: 700; color: #4cc0e6; }
.logo.small { font-size: 18px; margin: 0; }
header { display: flex; align-items: center; justify-content: space-between; height: 44px; }
header #me { color: #888; font-size: 14px; }
input, button { font: inherit; color: #fff; border-radius: 12px; border: 1px solid #333; background: #111;
  padding: 12px 14px; width: 100%; margin: 0 0 10px; outline: none; -webkit-appearance: none; }
input:focus { border-color: #219dff; }
button { cursor: pointer; background: #1a1a1a; }
button.primary { background: #219dff; border-color: #219dff; font-weight: 600; }
button.link { background: none; border: 0; width: auto; padding: 8px 0; margin: 0; color: #4cc0e6; }
.row { display: flex; margin-top: 16px; }
.row input { margin-right: 8px; }
.row button { width: auto; }
.error { color: #ff5a5a; min-height: 22px; text-align: center; }
.hint { color: #888; font-size: 14px; text-align: center; min-height: 20px; }
#list { list-style: none; padding: 0; margin: 8px 0; }
#list li { display: flex; align-items: center; padding: 14px 12px; border-bottom: 1px solid #1c1c1c; cursor: pointer; font-size: 18px; }
#list li:active { background: #111; }
.dot { width: 10px; height: 10px; border-radius: 5px; background: #444; margin-right: 12px; flex: none; }
.dot.online { background: #3ddc84; }
.dot.busy { background: #ffb020; }
#peer { text-align: center; font-size: 34px; font-weight: 600; margin-top: 8vh; word-break: break-all; }
#ptt { display: block; width: 240px; height: 240px; border-radius: 120px; margin: 7vh auto 16px; border: 0;
  background: #219dff; background: linear-gradient(135deg, #219dff, #68e0cf); color: #fff; font-size: 20px; font-weight: 600;
  touch-action: none; -webkit-touch-callout: none; }
#ptt.talking { background: #ff3b5c; -webkit-transform: scale(1.06); transform: scale(1.06); }
#ptt.listening { background: #ffb020; }
#ptt.disabled { background: #2a2a2a; color: #666; cursor: default; }
.banner { position: fixed; top: 0; left: 0; right: 0; padding: 10px; text-align: center; background: #219dff; z-index: 10; cursor: pointer; }
#offline { background: #444; }