:root { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; color: #f5f5f5; background: #111; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; background: #111; }
.app { width: min(440px, 100%); padding: 22px; }
h1 { text-align: center; letter-spacing: .12em; margin: 0 0 24px; }
.brand { display: flex; align-items: center; justify-content: center; gap: .04em; }
.brand-gi { display: inline-grid; place-items: center; min-width: 2em; height: 2em; padding: 0 .3em; border-radius: .46em; background: #f2f2f2; color: #111; font-weight: 800; letter-spacing: .03em; font-size: .84em; }
h2 { margin: 0 0 16px; }
.role-title { text-align: center; letter-spacing: .12em; font-size: 19px; }
.card { position: relative; background: #1b1b1b; border: 1px solid #333; border-radius: 18px; padding: 20px; box-shadow: 0 10px 35px #0008; }
label { display: block; margin: 16px 0 6px; opacity: .85; }
input { width: 100%; padding: 16px; border-radius: 14px; border: 1px solid #444; background: #0d0d0d; color: #fff; font-size: 22px; text-align: center; }
.actions { display: flex; gap: 12px; margin-top: 18px; }
.two > * { flex: 1; }
button { border: 0; border-radius: 14px; padding: 15px 12px; font-weight: 700; font-size: 16px; background: #fff; color: #111; }
button:focus,
button:focus-visible { outline: none; box-shadow: none; }
button:disabled { cursor: wait; opacity: .55; }
button.secondary { background: #d8d8d8; color: #111; width: 100%; margin-top: 16px; }
button.danger { background: #d8d8d8; color: #111; width: 100%; margin-top: 16px; }
.hidden { display: none !important; }
.error { color: #ff6b6b; min-height: 24px; text-align: center; }
.line { padding: 7px 0; color: #d6d6d6; }
.line strong { color: #fff; }
.audio-link { white-space: nowrap; }
.meter {
  --level: 0%;
  position: relative;
  height: 14px;
  margin: 14px 0;
  overflow: hidden;
  border-radius: 99px;
  background: linear-gradient(90deg, #22c55e 0 55%, #facc15 76%, #ef4444 100%);
}
.meter::after {
  content: "";
  position: absolute;
  inset: 0 0 0 var(--level);
  background: #333;
  transition: left .08s linear;
}
.meter-fill { height: 100%; width: var(--level); }
.no-signal { margin: -5px 0 10px; color: #fff; text-align: center; font-size: 13px; }
.participants-title { margin: 20px 0 8px; font-size: 15px; color: #ddd; }
.participants-title span { color: #fff; }
.participants { padding: 0; margin: 0; list-style: none; }
.participants li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid #333; font-size: 14px; }
.participants li button { padding: 9px 12px; flex: none; background: #d8d8d8; color: #111; font-size: 13px; }
.participants-empty { padding: 10px 0; color: #888; font-size: 14px; }
.status-warning { color: #ef4444 !important; }
.session-exit { min-height: 50px; margin-top: 16px !important; padding: 15px 12px !important; }
.broadcast-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.broadcast-actions .secondary { min-height: 50px; }
dialog { border: 0; outline: 0; border-radius: 16px; padding: 20px; background: #1b1b1b; color: #fff; }
dialog::backdrop {
  background: rgb(0 0 0 / 58%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
dialog :focus,
dialog :focus-visible { outline: 0 !important; box-shadow: none !important; }
dialog .dialog-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
dialog .dialog-actions button {
  appearance: none;
  display: block;
  width: 100%;
  height: 56px;
  min-height: 56px;
  margin: 0 !important;
  padding: 0 12px;
  line-height: 1.15;
}
#listenDialog {
  width: min(396px, calc(100% - 44px));
  padding: 30px 24px;
  text-align: center;
}
.audience {
  font-size: 30px;
  color: #22c55e;
  text-align: center;
  margin: 10px 0;
}

button,
input,
label,
.card {
  touch-action: manipulation;
}
button { -webkit-tap-highlight-color: transparent; }
.version {
  position: absolute;
  right: 12px;
  bottom: 9px;
  font-size: 11px;
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

@media (max-height: 760px) {
  .app { padding: 10px 16px; }
  h1 { margin-bottom: 12px; font-size: 27px; }
  .brand-gi { min-width: 1.85em; height: 1.85em; }
  .card { padding: 14px 16px; }
  .role-title { margin-bottom: 8px; font-size: 17px; }
  .line { padding: 4px 0; font-size: 15px; }
  .meter { margin: 8px 0; }
  .participants-title { margin-top: 12px; margin-bottom: 5px; }
  .participants li { padding: 7px 0; }
  button.secondary,
  button.danger,
  .session-exit { margin-top: 10px !important; min-height: 44px; padding: 11px 10px !important; }
}