:root {
  --bg: #0b1220;
  --bg-2: #111a2e;
  --ink: #0f172a;
  --paper: #f4f7fb;
  --card: #ffffff;
  --line: #dbe3ee;
  --accent: #38bdf8;
  --blue: #1d4ed8;
  --blue-2: #0ea5e9;
  --danger: #dc2626;
  --ok: #16a34a;
  --muted: #64748b;
  --shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
  color-scheme: light;
  font-family: "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--paper); color: var(--ink); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.phone-shell { display: none; }
.desk-clock, .desk-heading, .desk-card-head { display: none; }
.desk-card { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#phone-tab-settings { display: none; }
.phone-set-index { display: none; }
.settings-title { display: none; }
.dock-label { display: none; }
.view { min-height: 100%; }

.top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 28px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  font-size: 18px;
}
.brand.small { color: #e2e8f0; font-size: 15px; }
.mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background:
    linear-gradient(#0b1220, #0b1220) padding-box,
    linear-gradient(135deg, #38bdf8, #1d4ed8) border-box;
  border: 0;
  position: relative;
  box-shadow: inset 0 0 0 2px #0b1220;
  background-color: #0b1220;
}
.mark::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  width: 12px;
  height: 9px;
  border-radius: 2px;
  background: #38bdf8;
}
.mark::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 11px;
  border-left: 6px solid #7dd3fc;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}
.spacer { flex: 1; }

.home {
  width: min(1080px, calc(100% - 32px));
  margin: 0 auto 48px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: start;
}
.hero { padding-top: 28px; }
.eyebrow {
  margin: 0 0 8px;
  color: var(--blue);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
}
h1 {
  margin: 0 0 12px;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.lead { margin: 0; color: #334155; font-size: 18px; line-height: 1.5; max-width: 36rem; }
.account-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.account-actions { display: flex; gap: 4px; flex: none; }
.account-line { margin: 4px 0 12px; color: #334155; font-size: 14px; line-height: 1.45; }
#btn-share-home { width: 100%; margin-top: 8px; }
.settings {
  width: min(920px, calc(100% - 32px));
  margin: 8px auto 40px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  align-items: start;
}
.set-nav { display: flex; flex-direction: column; gap: 6px; }
.set-nav button {
  border: 0;
  background: transparent;
  text-align: left;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
  color: var(--ink);
}
.set-nav button.on { background: var(--blue); color: white; }
.settings .card h2 { margin: 0 0 14px; font-size: 22px; }
#set-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0b1220;
  border-radius: 14px;
  margin-bottom: 14px;
  object-fit: cover;
}
.check { display: flex; gap: 10px; align-items: center; margin: 12px 0; font-size: 14px; }
.check input { width: auto; }
.meter {
  height: 10px;
  border-radius: 999px;
  background: #e2e8f0;
  margin: 12px 0;
  overflow: hidden;
}
.meter::before {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--level, 0) * 100%);
  background: var(--blue);
}
.inline-link { color: var(--blue); font-weight: 700; }
.card, .downloads {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 22px;
}
.downloads { grid-column: 1 / -1; }
.downloads h2 { margin: 0 0 6px; font-size: 20px; }
.downloads p { margin: 0 0 14px; color: #334155; }
.fine { color: var(--muted) !important; font-size: 13px; margin: 12px 0 0 !important; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field span { font-size: 13px; font-weight: 650; color: #334155; }
input, select {
  width: 100%;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: var(--ink);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
}
input:focus, select:focus { border-color: var(--blue-2); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2); }
.btn {
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  background: #e2e8f0;
  color: var(--ink);
  font-weight: 700;
}
.btn.primary {
  width: 100%;
  color: white;
  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
}
.btn.primary:disabled { opacity: 0.6; cursor: wait; }
.or {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  margin: 16px 0;
}
.or::before, .or::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.join-row { display: flex; gap: 8px; }
.join-row input { flex: 1; }
.error { min-height: 1.2em; color: var(--danger); font-size: 14px; margin: 10px 0 0; }
.dl-row { display: flex; flex-wrap: wrap; gap: 10px; }
.dl {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 650;
}
.dl:hover { border-color: var(--blue-2); }
.apk-phone { display: none; }
html.is-android:not(.is-apk) .apk-phone { display: block; }
html.is-android:not(.is-apk) .phone-menu a.apk-phone {
  width: 100%;
  text-align: left;
  color: #fff;
  border-radius: 10px;
  min-height: 44px;
  padding: 10px 12px;
  font-weight: 650;
  text-decoration: none;
  box-sizing: border-box;
}
.text-btn {
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 10px;
}
.text-btn:hover { background: rgba(148, 163, 184, 0.16); }

.lobby {
  width: min(1040px, calc(100% - 32px));
  margin: 8px auto 40px;
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 22px;
}
.preview-wrap {
  position: relative;
  background: #0b1220;
  border-radius: 20px;
  min-height: 420px;
  overflow: hidden;
}
#preview { width: 100%; height: 100%; min-height: 420px; object-fit: cover; transform: scaleX(-1); background: #0b1220; }
.avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #1e293b;
  color: #e2e8f0;
  font-weight: 750;
}
.avatar.big {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 120px;
  height: 120px;
  font-size: 48px;
}
.preview-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.lobby-side {
  background: white;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow);
}
.lobby-side h2 { margin: 0 0 8px; }
.code-line { margin: 0 0 8px; color: #334155; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
#lobby-pass { margin-bottom: 16px; font-weight: 700; }

body.in-call {
  background: #0b1220;
  color: #e2e8f0;
  overflow: hidden;
}
#view-call { height: 100%; display: flex; flex-direction: column; }
.call-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 0;
}
.call-meta { display: flex; align-items: center; gap: 8px; }
.call-meta.right { margin-left: auto; }
.chip {
  background: #172033;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.chip.quiet { font-weight: 600; color: #94a3b8; }
#view-call .text-btn { color: #e2e8f0; }

.net-banner, .share-banner {
  margin: 8px auto 0;
  background: #172033;
  color: #e2e8f0;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.net-banner button, .share-banner button {
  border: 0;
  background: var(--accent);
  color: #0b1220;
  font-weight: 750;
  border-radius: 999px;
  padding: 6px 10px;
}
.call-body { flex: 1; min-height: 0; display: flex; gap: 10px; padding: 10px 12px 92px; }
.stage-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; position: relative; }
.stage {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
  align-content: center;
}
.stage.share-mode { grid-template-columns: 1fr; }
.filmstrip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  height: 132px;
  flex: none;
}
.filmstrip .tile { width: 200px; height: 124px; flex: none; }
.tile {
  position: relative;
  background: #172033;
  border-radius: 14px;
  overflow: hidden;
  min-height: 160px;
  height: 100%;
}
.stage.share-mode .tile { min-height: 0; }
.tile video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.tile.screen video { object-fit: contain; }
.tile video.mirror { transform: scaleX(-1); }
.tile .avatar {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  font-size: 28px;
}
.tile-name {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 16px);
  background: rgba(11, 18, 32, 0.72);
  color: white;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 13px;
}
.tile-name span.name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile.speaking { outline: 3px solid var(--accent); outline-offset: -3px; }
.host-tag, .role-tag { color: #7dd3fc; font-size: 11px; font-weight: 750; }
.person b .role-tag { font-size: 12px; margin-left: 4px; }
#host-ask p { margin: 0; }
#host-ask button.hidden { display: none !important; }
.person-role {
  border: 0;
  border-radius: 999px;
  background: #1e293b;
  color: #7dd3fc;
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
}
.mic-mini {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f87171;
  flex: none;
}
.alone {
  position: absolute;
  inset: auto 0 18px;
  text-align: center;
  color: #94a3b8;
  pointer-events: none;
}
.alone p { margin: 0 0 4px; }

.drawer {
  width: min(340px, 92vw);
  background: #111a2e;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.drawer-tabs { display: flex; gap: 6px; padding: 10px; }
.drawer-tabs button {
  flex: 1;
  border: 0;
  background: transparent;
  color: #94a3b8;
  border-radius: 10px;
  padding: 8px;
  font-weight: 750;
}
.drawer-tabs button.on { background: #1e293b; color: white; }
#drawer-close {
  flex: 0 0 auto;
  width: 36px;
  color: #e2e8f0;
  font-size: 22px;
  line-height: 1;
  padding: 4px;
}
.chat-log, .people-list { flex: 1; overflow: auto; padding: 0 12px 12px; }
.chat-row { margin: 0 0 12px; }
.chat-row.system { color: #94a3b8; font-size: 13px; }
.chat-who { font-size: 12px; font-weight: 750; color: #7dd3fc; }
.chat-text { white-space: pre-wrap; word-break: break-word; }
.chat-time { color: #64748b; font-weight: 600; margin-left: 6px; }
.chat-form { display: flex; gap: 8px; padding: 10px; }
.chat-form input { background: #0b1220; color: white; border-color: #334155; }
.chat-form button {
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #0b1220;
  font-weight: 800;
  padding: 0 14px;
}
.person { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #1e293b; }
.person b { font-weight: 650; }
.person-main { display: flex; flex-direction: column; min-width: 0; }
.person-main span { color: #94a3b8; font-size: 12px; }
.person-actions { display: flex; gap: 6px; flex: none; }
.person-av {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #1e293b;
  color: white;
  position: relative;
  display: grid;
  place-items: center;
}
.person-av .ic { width: 16px; height: 16px; }
.person-av.off { color: #f87171; }
.person-av.off::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 17px;
  height: 2px;
  background: #f87171;
  transform: rotate(-32deg);
}
.chat-form { flex-direction: column; }
.chat-send { display: flex; gap: 8px; }
.chat-send input { flex: 1; }
.chat-to { display: flex; flex-direction: column; gap: 4px; color: #94a3b8; font-size: 12px; font-weight: 700; }
.chat-to select { background: #0b1220; color: white; border: 1px solid #334155; border-radius: 10px; min-height: 40px; padding: 0 8px; }
.chat-private { color: #fbbf24; font-weight: 750; margin-left: 6px; }
.hand-tag { font-size: 16px; }

.dock {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  align-items: center;
  background: rgba(17, 26, 46, 0.92);
  border: 1px solid #243044;
  padding: 10px;
  border-radius: 999px;
  z-index: 5;
}
.round {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: #1e293b;
  color: white;
  position: relative;
  display: grid;
  place-items: center;
}
.round.on { background: #334155; }
.round.off { background: #7f1d1d; }
.round.leave {
  width: auto;
  border-radius: 999px;
  padding: 0 16px;
  background: var(--danger);
  font-weight: 800;
}
.round.active { background: #0369a1; }
.badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--danger);
  color: white;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
  padding: 0 4px;
}
#chat-badge {
  top: 2px;
  left: 2px;
  right: auto;
  z-index: 3;
  pointer-events: none;
}
.ic { width: 22px; height: 22px; display: block; background: currentColor; }
.ic-mic {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V20H9v2h6v-2h-2v-2.08A7 7 0 0 0 19 11z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V20H9v2h6v-2h-2v-2.08A7 7 0 0 0 19 11z'/></svg>") center / contain no-repeat;
}
.ic-cam {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M17 10.5V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-3.5l5 4v-11z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M17 10.5V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-3.5l5 4v-11z'/></svg>") center / contain no-repeat;
}
.ic-share {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M21 3H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h6v2H7v2h10v-2h-2v-2h6a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 12H3V5h18zM13 14h-2v-3H8l4-4 4 4h-3z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M21 3H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h6v2H7v2h10v-2h-2v-2h6a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 12H3V5h18zM13 14h-2v-3H8l4-4 4 4h-3z'/></svg>") center / contain no-repeat;
}
.ic-chat {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H8l-4 4V6a2 2 0 0 1 2-2z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H8l-4 4V6a2 2 0 0 1 2-2z'/></svg>") center / contain no-repeat;
}
.ic-more {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle fill='black' cx='5' cy='12' r='2'/><circle fill='black' cx='12' cy='12' r='2'/><circle fill='black' cx='19' cy='12' r='2'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle fill='black' cx='5' cy='12' r='2'/><circle fill='black' cx='12' cy='12' r='2'/><circle fill='black' cx='19' cy='12' r='2'/></svg>") center / contain no-repeat;
}
.pop {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  width: min(320px, calc(100% - 24px));
  background: #111a2e;
  border: 1px solid #243044;
  border-radius: 16px;
  padding: 14px;
  z-index: 6;
}
.pop .field span, .pop select { color: #e2e8f0; }
.pop select { background: #0b1220; border-color: #334155; }
.audio-sink { position: absolute; width: 0; height: 0; overflow: hidden; }
.toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  color: white;
  border-radius: 999px;
  padding: 10px 14px;
  z-index: 20;
  font-size: 14px;
}
.call-sheet {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  width: min(380px, calc(100% - 16px));
  max-height: min(70vh, 560px);
  overflow: auto;
  background: #2c2c2e;
  color: #f2f2f7;
  border-radius: 22px;
  padding: 14px 12px 16px;
  z-index: 7;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.react-row, .react-extra { display: flex; gap: 8px; align-items: center; }
.react-extra { margin-top: 8px; }
#react-hand {
  flex: 1;
  border: 0;
  border-radius: 999px;
  background: #3a3a3c;
  color: white;
  min-height: 44px;
  font-weight: 750;
}
#react-hand.on { background: #0e72ed; }
.call-sheet .emoji {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #3a3a3c;
  font-size: 20px;
}
.sheet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 12px;
}
.sheet-grid button {
  position: relative;
  border: 0;
  background: transparent;
  color: #f2f2f7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 78px;
  font-size: 12px;
  font-weight: 650;
  border-radius: 12px;
}
.sheet-grid button.on, .sheet-grid button:hover { background: #3a3a3c; }
.sheet-ic { font-size: 22px; line-height: 1; }
.sheet-count {
  position: absolute;
  top: 8px;
  right: 22px;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}
.sheet-panel { margin-top: 8px; color: #f2f2f7; }
.sheet-panel p { margin: 0 0 8px; color: #d1d1d6; font-size: 14px; }
.sheet-actions { display: flex; flex-direction: column; gap: 8px; }
.sheet-actions button, .info-copy {
  border: 0;
  border-radius: 12px;
  background: #3a3a3c;
  color: white;
  min-height: 40px;
  font-weight: 700;
}
.call-sheet .field span, .call-sheet select { color: #f2f2f7; }
.call-sheet select { background: #1c1c1e; border-color: #3a3a3c; width: 100%; }
body:not(.is-host) .host-only { display: none !important; }
.caption-bar {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  max-width: min(640px, 92%);
  background: rgba(0, 0, 0, 0.72);
  color: white;
  border-radius: 12px;
  padding: 8px 12px;
  text-align: center;
  z-index: 3;
}
.react-float {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 3;
  pointer-events: none;
}
.react-float span {
  font-size: 28px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  padding: 2px 8px;
}
.transcript-line { margin: 0 0 8px; font-size: 13px; }
.transcript-line b { display: block; color: #7dd3fc; }
.people-host-bar { display: none; gap: 6px; flex-wrap: wrap; padding: 8px 12px 0; }
body.is-host .people-host-bar { display: flex; }
.people-host-bar button {
  border: 0;
  border-radius: 999px;
  background: #1e293b;
  color: #e2e8f0;
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
}
.wait-card {
  width: min(520px, calc(100% - 32px));
  margin: 12vh auto;
  background: #111a2e;
  color: white;
  border-radius: 20px;
  padding: 28px;
}
.wait-card h1 { font-size: 32px; margin: 8px 0; }
.zoom-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(520px, 100%);
  max-height: min(78dvh, 680px);
  overflow: auto;
  background: #1c1c1e;
  color: #f2f2f7;
  border-radius: 18px 18px 0 0;
  z-index: 8;
  padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
}
html.is-phone .zoom-sheet { bottom: calc(62px + env(safe-area-inset-bottom)); }
.zoom-head {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  min-height: 48px;
}
.zoom-head h2 { margin: 0; text-align: center; font-size: 17px; font-weight: 700; }
.zoom-head button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #3a3a3c;
  color: white;
  font-size: 20px;
}
#info-title { font-size: 28px; line-height: 1.15; margin: 14px 0 16px; }
.info-copy {
  border: 0;
  border-radius: 12px;
  background: #2c2c2e;
  color: #0a84ff;
  min-height: 44px;
  padding: 0 16px;
  font-weight: 700;
}
.info-label { color: #8e8e93; margin: 18px 0 2px; font-size: 14px; }
.info-value { margin: 0; font-size: 22px; font-weight: 650; }
.tool-list { background: #2c2c2e; border-radius: 14px; overflow: hidden; margin-top: 8px; }
.tool-list > button, .tool-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 14px;
  border: 0;
  border-bottom: 1px solid #3a3a3c;
  background: transparent;
  color: white;
  font-size: 17px;
  text-align: left;
}
.tool-list > button:last-child, .tool-row:last-child { border-bottom: 0; }
.switch {
  width: 51px;
  height: 31px;
  border: 0;
  border-radius: 16px;
  background: #3a3a3c;
  position: relative;
  flex: none;
}
.switch i {
  position: absolute;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
}
.switch.on { background: #30d158; }
.switch.on i { left: 22px; }
.title-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border: 0;
  border-radius: 14px;
  background: #2c2c2e;
  color: white;
  padding: 12px 14px;
  text-align: left;
}
.title-row span { color: #8e8e93; font-size: 12px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; }
.title-row strong { font-size: 18px; font-weight: 650; }
.title-input, .note-form input {
  width: 100%;
  margin-top: 8px;
  background: #2c2c2e;
  color: white;
  border: 1px solid #3a3a3c;
  border-radius: 12px;
  min-height: 44px;
  padding: 0 12px;
}
.tool-note, .note-list p { color: #d1d1d6; font-size: 14px; }
.note-form { display: flex; gap: 8px; margin-top: 10px; }
.note-form button {
  border: 0;
  border-radius: 12px;
  background: #0a84ff;
  color: white;
  font-weight: 750;
  padding: 0 14px;
}
.wait-list { margin-top: 12px; }
.wait-person {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: #2c2c2e;
  border-radius: 12px;
  padding: 8px 10px;
  margin-top: 8px;
}
.wait-person button {
  border: 0;
  border-radius: 999px;
  background: #0a84ff;
  color: white;
  min-height: 32px;
  padding: 0 12px;
  font-weight: 750;
}
body.hide-pictures .avatar { color: transparent; }
body.hide-pictures .avatar::before {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #334155;
}
.tool-card {
  background: #2c2c2e;
  border-radius: 14px;
  overflow: hidden;
  margin-top: 8px;
}
.tool-card .tool-row { border-bottom: 0; }
.tool-help {
  color: #8e8e93;
  font-size: 15px;
  line-height: 1.35;
  margin: 8px 6px 16px;
}
.tool-row.wrap {
  align-items: center;
  min-height: 68px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.tool-row.wrap > span:first-child { flex: 1; line-height: 1.25; }
.chat-with { align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
.chat-with-value, .row-value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  max-width: 54%;
  color: #8e8e93;
  font-size: 15px;
  text-align: right;
}
.chat-with-value b, .row-value b { font-weight: 500; }
.switch.blue.on { background: #0a84ff; }
.lang-row, .caption-lang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 14px;
  color: white;
}
.caption-lang { margin-top: 10px; padding: 0 4px; }
.lang-row select, .caption-lang select {
  max-width: 54%;
  background: #1c1c1e;
  color: #f2f2f7;
  border: 1px solid #3a3a3c;
  border-radius: 10px;
  min-height: 36px;
}
.suspend-btn {
  display: block;
  width: 100%;
  margin-top: 18px;
  border: 0;
  border-radius: 14px;
  background: #2c2c2e;
  color: #ff453a;
  min-height: 52px;
  font-size: 17px;
  font-weight: 650;
}
.suspend-btn.on { color: #ffd60a; }
.react-hand-wide {
  width: 100%;
  border: 0;
  border-radius: 14px;
  background: #2c2c2e;
  color: white;
  min-height: 48px;
  font-size: 17px;
  font-weight: 650;
  margin-top: 8px;
}
.react-hand-wide.on { background: #0e72ed; }
.react-feedback, .react-line {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.react-feedback button, .react-line button {
  flex: 1;
  min-width: 0;
  height: 52px;
  border: 0;
  border-radius: 14px;
  background: #2c2c2e;
  font-size: 24px;
}
.react-section {
  margin: 18px 0 0;
  color: #8e8e93;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.04em;
}
.react-burst {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 4;
}
.react-burst span {
  position: absolute;
  bottom: 6%;
  animation: react-fly 2.3s ease-out forwards;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}
@keyframes react-fly {
  0% { transform: translate3d(0, 24%, 0) scale(0.55); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate3d(var(--dx, 0px), -128%, 0) scale(1.15); opacity: 0; }
}
.person-rename {
  border: 0;
  border-radius: 999px;
  background: #1e293b;
  color: #e2e8f0;
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
}
body.activity-held #call-leave,
body.activity-held .react-row,
body.activity-held #react-sheet button { opacity: 0.45; }
.ask-notes {
  border: 0;
  border-radius: 12px;
  background: #0a84ff;
  color: white;
  min-height: 40px;
  font-weight: 700;
  padding: 0 12px;
}

@media (max-width: 860px) {
  .home, .lobby, .settings { grid-template-columns: 1fr; }
  .hero { padding-top: 0; }
  .call-top { flex-wrap: wrap; }
  .drawer {
    position: fixed;
    inset: auto 8px 88px 8px;
    height: min(52vh, 420px);
    z-index: 4;
  }
  .stage { grid-template-columns: 1fr; overflow: auto; }
  .tile { min-height: 200px; }
  .join-row { flex-direction: column; }
  .account-row { flex-direction: column; }
  h1 { font-size: 32px; }
}

html.is-phone {
  -webkit-text-size-adjust: 100%;
}
html.is-phone body,
html.is-phone .view { min-height: 100dvh; }
html.is-phone .downloads { display: none !important; }
html.is-phone input,
html.is-phone select,
html.is-phone textarea { font-size: 16px; }
html.is-phone .home,
html.is-phone .lobby,
html.is-phone .settings {
  width: min(720px, calc(100% - 20px));
  grid-template-columns: 1fr;
  margin-bottom: calc(24px + env(safe-area-inset-bottom));
}
html.is-phone .top { padding: calc(12px + env(safe-area-inset-top)) 14px 8px; }
html.is-phone h1 { font-size: 30px; }
html.is-phone .hero { padding-top: 0; }
html.is-phone .account-row { flex-direction: column; }
html.is-phone .account-actions { width: 100%; }
html.is-phone .account-actions .text-btn {
  flex: 1;
  background: #e2e8f0;
  text-align: center;
  min-height: 44px;
}
html.is-phone .btn { min-height: 48px; }
html.is-phone .join-row { flex-direction: column; }
html.is-phone .set-nav {
  flex-direction: row;
  overflow-x: auto;
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 2;
  padding-bottom: 4px;
}
html.is-phone .set-nav button { flex: none; min-height: 44px; }
html.is-phone #set-preview { max-height: 220px; }
html.is-phone .preview-wrap,
html.is-phone #preview { min-height: 220px; }
html.is-phone body.in-call,
html.is-phone #view-call {
  height: 100dvh;
  min-height: 100dvh;
}
html.is-phone .call-top {
  flex-wrap: wrap;
  padding-top: calc(8px + env(safe-area-inset-top));
}
html.is-phone .call-body {
  padding: 8px 8px calc(84px + env(safe-area-inset-bottom));
}
html.is-phone .stage { grid-template-columns: 1fr; overflow: auto; }
html.is-phone .tile { min-height: 180px; }
html.is-phone .filmstrip { height: 96px; }
html.is-phone .filmstrip .tile { width: 140px; height: 88px; }
html.is-phone .dock {
  left: 0;
  right: 0;
  width: auto;
  transform: none;
  bottom: 0;
  justify-content: space-around;
  gap: 0;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  border-radius: 0;
  border: 0;
  background: #1c1c1e;
}
html.is-phone .dock .round {
  width: auto;
  min-width: 52px;
  height: auto;
  border-radius: 12px;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 2px;
}
html.is-phone .dock .round.off { background: #7f1d1d; }
html.is-phone .dock .round.active { background: #0e72ed; }
html.is-phone .dock .round.leave {
  background: #dc2626;
  border-radius: 14px;
  min-height: 48px;
  padding: 0 12px;
  font-size: 13px;
}
html.is-phone .dock-label {
  display: block;
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
}
html.is-phone .dock .ic { width: 22px; height: 22px; }
html.is-phone .drawer {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: calc(78px + env(safe-area-inset-bottom));
  height: min(48dvh, 420px);
  z-index: 4;
}
html.is-phone .pop {
  bottom: calc(86px + env(safe-area-inset-bottom));
  width: min(360px, calc(100% - 16px));
}
html.is-phone .call-sheet {
  bottom: calc(78px + env(safe-area-inset-bottom));
  width: min(420px, calc(100% - 12px));
}
html.is-phone body:not(.in-call) { background: #1c1c1e; color: #f2f2f7; }
html.is-phone #view-login .brand,
html.is-phone #view-login h1,
html.is-phone #view-login .lead { color: #f2f2f7; }
html.is-phone #view-login .eyebrow { color: #0a84ff; }
html.is-phone #view-login .card {
  background: #2c2c2e;
  border-color: transparent;
  box-shadow: none;
  color: #f2f2f7;
}
html.is-phone #view-login .field span { color: #d1d1d6; }
html.is-phone #view-login input {
  background: #1c1c1e;
  color: #fff;
  border-color: #3a3a3c;
}
html.is-phone #view-login .fine,
html.is-phone #view-login .inline-link { color: #0a84ff; }
html.is-workplace #view-home > .top,
html.is-workplace #view-home > .home { display: none; }
html.is-workplace #view-home { background: #1c1c1e; }
html.is-workplace .phone-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: calc(8px + env(safe-area-inset-top)) 18px calc(10px + env(safe-area-inset-bottom));
  color: #f2f2f7;
}
html.is-workplace .phone-top {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  min-height: 52px;
}
html.is-workplace .phone-title {
  margin: 0;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
}
html.is-workplace .phone-avatar,
html.is-workplace .phone-icon-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #2c2c2e;
  color: #fff;
  font-weight: 750;
  font-size: 18px;
  display: grid;
  place-items: center;
}
html.is-workplace .phone-icon-btn { justify-self: end; }
html.is-workplace .phone-menu {
  position: absolute;
  top: calc(58px + env(safe-area-inset-top));
  right: 16px;
  z-index: 5;
  min-width: 180px;
  background: #3a3a3c;
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
html.is-workplace .phone-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: #fff;
  border-radius: 10px;
  min-height: 44px;
  padding: 0 12px;
  font-weight: 650;
}
html.is-workplace .phone-actions {
  display: flex;
  justify-content: space-around;
  gap: 8px;
  padding: 18px 0 6px;
}
html.is-workplace .phone-actions > button {
  border: 0;
  background: transparent;
  color: #d1d1d6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  min-width: 76px;
  min-height: 96px;
}
html.is-workplace .phone-tile {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: #fff;
}
html.is-workplace .phone-tile.orange { background: #f26b21; }
html.is-workplace .phone-tile.blue { background: #0e72ed; }
html.is-workplace .phone-tile .ic { width: 30px; height: 30px; }
html.is-workplace .phone-plus {
  width: 26px;
  height: 26px;
  background:
    linear-gradient(#fff, #fff) center / 22px 3px no-repeat,
    linear-gradient(#fff, #fff) center / 3px 22px no-repeat;
}
html.is-workplace .phone-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #8e8e93;
  padding: 24px 12px 12px;
}
html.is-workplace .phone-empty p { margin: 0; }
html.is-workplace .phone-empty-title {
  color: #f2f2f7;
  font-size: 26px;
  font-weight: 650;
  margin-bottom: 8px;
}
html.is-workplace .phone-tabbar {
  margin-top: auto;
  display: flex;
  gap: 6px;
  background: #2c2c2e;
  border-radius: 28px;
  padding: 6px;
}
html.is-workplace .phone-tabbar button {
  flex: 1;
  border: 0;
  background: transparent;
  color: #aeaeb2;
  border-radius: 22px;
  min-height: 56px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
html.is-workplace .phone-tabbar button.on { background: #3a3a3c; color: #fff; }
html.is-workplace .phone-tab-ic {
  width: 22px;
  height: 22px;
  background: currentColor;
}
html.is-workplace .phone-tab-ic.home {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3 3 11h2v9h6v-6h2v6h6v-9h2z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3 3 11h2v9h6v-6h2v6h6v-9h2z'/></svg>") center / contain no-repeat;
}
html.is-workplace .phone-tab-ic.gear {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M19.4 13a7.7 7.7 0 0 0 .1-1 7.7 7.7 0 0 0-.1-1l2-1.6-2-3.4-2.4 1a7.4 7.4 0 0 0-1.7-1L15 3h-4l-.4 2.9a7.4 7.4 0 0 0-1.7 1l-2.4-1-2 3.4L6.6 11a7.7 7.7 0 0 0-.1 1 7.7 7.7 0 0 0 .1 1l-2 1.6 2 3.4 2.4-1a7.4 7.4 0 0 0 1.7 1L11 21h4l.4-2.9a7.4 7.4 0 0 0 1.7-1l2.4 1 2-3.4zM12 15.5A3.5 3.5 0 1 1 15.5 12 3.5 3.5 0 0 1 12 15.5z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M19.4 13a7.7 7.7 0 0 0 .1-1 7.7 7.7 0 0 0-.1-1l2-1.6-2-3.4-2.4 1a7.4 7.4 0 0 0-1.7-1L15 3h-4l-.4 2.9a7.4 7.4 0 0 0-1.7 1l-2.4-1-2 3.4L6.6 11a7.7 7.7 0 0 0-.1 1 7.7 7.7 0 0 0 .1 1l-2 1.6 2 3.4 2.4-1a7.4 7.4 0 0 0 1.7 1L11 21h4l.4-2.9a7.4 7.4 0 0 0 1.7-1l2.4 1 2-3.4zM12 15.5A3.5 3.5 0 1 1 15.5 12 3.5 3.5 0 0 1 12 15.5z'/></svg>") center / contain no-repeat;
}
html.is-workplace .phone-sheet {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: #1c1c1e;
  color: #f2f2f7;
  padding: calc(12px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
  overflow: auto;
}
html.is-workplace .phone-sheet-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
}
html.is-workplace .phone-id-field input,
html.is-workplace .phone-row input,
html.is-workplace .phone-row select {
  color-scheme: dark;
}
html.is-workplace .phone-sheet-top h2 {
  margin: 0;
  text-align: center;
  font-size: 17px;
}
html.is-workplace .phone-sheet-top .phone-icon-btn { justify-self: start; font-size: 26px; line-height: 1; }
html.is-workplace .phone-id-field { display: block; margin: 28px 0 8px; }
html.is-workplace .phone-id-field input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #3a3a3c;
  border-radius: 0;
  color: #fff;
  text-align: center;
  font-size: 22px;
  padding: 14px 8px;
}
html.is-workplace .phone-id-field input:focus { box-shadow: none; border-bottom-color: #0e72ed; }
html.is-workplace .phone-who {
  text-align: center;
  margin: 14px 0 22px;
  font-size: 18px;
  font-weight: 650;
}
html.is-workplace .phone-hint { color: #8e8e93; text-align: center; font-size: 14px; }
html.is-workplace #phone-join-go:disabled { background: #3a3a3c; color: #8e8e93; }
html.is-workplace .phone-profile-avatar {
  width: 96px;
  height: 96px;
  margin: 28px auto 12px;
  border-radius: 50%;
  background: #3a3a3c;
  display: grid;
  place-items: center;
  font-size: 40px;
  font-weight: 700;
}
html.is-workplace .phone-profile-name {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  margin: 0 12px 8px;
  word-break: break-word;
}
html.is-workplace .phone-products {
  text-align: center;
  color: #0a84ff;
  margin: 0 16px 22px;
  font-size: 14px;
}
html.is-workplace .phone-group {
  background: #2c2c2e;
  border-radius: 14px;
  margin: 0 0 16px;
  overflow: hidden;
}
html.is-workplace .phone-row {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid #3a3a3c;
  background: transparent;
  color: #fff;
  font-size: 16px;
  text-align: left;
}
html.is-workplace .phone-group .phone-row:last-child { border-bottom: 0; }
html.is-workplace .phone-row .chev { margin-left: auto; color: #8e8e93; font-size: 22px; }
html.is-workplace .phone-row input {
  margin-left: auto;
  width: 55%;
  background: transparent;
  border: 0;
  color: #fff;
  text-align: right;
  padding: 8px 0;
}
html.is-workplace .phone-row input:focus { box-shadow: none; }
html.is-workplace .phone-row .ic,
html.is-workplace .phone-mini { width: 22px; height: 22px; flex: none; }
html.is-workplace .phone-mini { background: currentColor; display: block; }
html.is-workplace .phone-mini.headphones {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3a8 8 0 0 0-8 8v7a3 3 0 0 0 3 3h2v-8H6v-2a6 6 0 0 1 12 0v2h-3v8h2a3 3 0 0 0 3-3v-7a8 8 0 0 0-8-8z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3a8 8 0 0 0-8 8v7a3 3 0 0 0 3 3h2v-8H6v-2a6 6 0 0 1 12 0v2h-3v8h2a3 3 0 0 0 3-3v-7a8 8 0 0 0-8-8z'/></svg>") center / contain no-repeat;
}
html.is-workplace .phone-mini.person {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0 2c-4 0-8 2-8 4v2h16v-2c0-2-4-4-8-4z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0 2c-4 0-8 2-8 4v2h16v-2c0-2-4-4-8-4z'/></svg>") center / contain no-repeat;
}
html.is-workplace .phone-signout {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  background: #2c2c2e;
  color: #ff453a;
  font-weight: 700;
  font-size: 17px;
}
html.is-phone #view-settings { background: #1c1c1e; color: #f2f2f7; }
html.is-phone #view-settings .brand,
html.is-phone #view-settings .spacer { display: none; }
html.is-phone .settings-title {
  display: block;
  flex: 1;
  text-align: center;
  font-weight: 700;
  font-size: 17px;
  margin-right: 36px;
}
html.is-phone #settings-back,
html.is-phone #lobby-back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #3a3a3c;
  color: transparent;
  font-size: 0;
  position: relative;
  padding: 0;
}
html.is-phone #settings-back::after,
html.is-phone #lobby-back::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 11px;
  width: 10px;
  height: 10px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
html.is-workplace .phone-set-index {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 8px;
}
html.is-phone #view-settings .set-nav { display: none; }
html.is-phone #view-settings .settings { display: block; width: min(560px, calc(100% - 24px)); }
html.is-phone #view-settings .card {
  background: #2c2c2e;
  color: #f2f2f7;
  border: 0;
  box-shadow: none;
}
html.is-phone #view-settings .field span,
html.is-phone #view-settings .check,
html.is-phone #view-settings h2 { color: #f2f2f7; }
html.is-phone #view-settings select,
html.is-phone #view-settings input[type="text"] {
  background: #1c1c1e;
  color: #fff;
  border-color: #3a3a3c;
}
html.is-phone #view-settings .btn { background: #3a3a3c; color: #fff; }
html.is-phone #view-settings .fine { color: #8e8e93 !important; }
html.is-phone #view-lobby { background: #1c1c1e; color: #f2f2f7; }
html.is-phone #view-lobby .brand { color: #f2f2f7; }
html.is-phone #view-lobby .lobby-side {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #f2f2f7;
}
html.is-phone #view-lobby .field span,
html.is-phone #view-lobby .code-line,
html.is-phone #view-lobby h2 { color: #f2f2f7; }
html.is-phone #view-lobby select {
  background: #2c2c2e;
  color: #fff;
  border-color: #3a3a3c;
}
html.is-phone .call-body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
html.is-workplace .phone-panel {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
html.is-workplace .phone-actions { justify-content: space-between; gap: 4px; }
html.is-workplace .phone-actions > button { min-width: 0; flex: 1; font-size: 12px; }
html.is-workplace .phone-tile { width: 58px; height: 58px; border-radius: 18px; }
html.is-workplace .phone-cal {
  width: 28px;
  height: 28px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 2h2v2h6V2h2v2h3v16H4V4h3zm12 6H5v10h14zM8 12h2v2H8zm4 0h2v2h-2z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 2h2v2h6V2h2v2h3v16H4V4h3zm12 6H5v10h14zM8 12h2v2H8zm4 0h2v2h-2z'/></svg>") center / contain no-repeat;
}
html.is-workplace .phone-tab-ic.chat {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 5h16a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H9l-5 4v-4H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 5h16a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H9l-5 4v-4H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z'/></svg>") center / contain no-repeat;
}
html.is-workplace .phone-tab-ic.more {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle fill='black' cx='5' cy='12' r='2'/><circle fill='black' cx='12' cy='12' r='2'/><circle fill='black' cx='19' cy='12' r='2'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle fill='black' cx='5' cy='12' r='2'/><circle fill='black' cx='12' cy='12' r='2'/><circle fill='black' cx='19' cy='12' r='2'/></svg>") center / contain no-repeat;
}
html.is-workplace .phone-agenda { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 16px; }
html.is-workplace .phone-agenda-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  text-align: left;
  border: 0;
  background: #2c2c2e;
  color: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  min-height: 68px;
}
html.is-workplace .phone-agenda-item span { color: #aeaeb2; font-size: 13px; }
html.is-workplace .phone-agenda-item strong { font-size: 16px; font-weight: 700; }
html.is-workplace .phone-hub-bar { display: flex; justify-content: flex-end; }
html.is-workplace .phone-hub-bar button {
  border: 0;
  background: transparent;
  color: #0a84ff;
  font-weight: 700;
  min-height: 44px;
  padding: 0 4px;
}
html.is-workplace .phone-hub {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 6px;
  padding: 8px 0 24px;
}
html.is-workplace .phone-hub button {
  border: 0;
  background: transparent;
  color: #f2f2f7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  min-height: 72px;
  padding: 0;
}
html.is-workplace .phone-hub svg { width: 28px; height: 28px; }
html.is-workplace .phone-hub.reordering { display: flex; flex-direction: column; gap: 0; }
html.is-workplace .phone-hub.reordering button {
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  min-height: 52px;
  border-bottom: 1px solid #3a3a3c;
  font-size: 16px;
}
html.is-workplace .phone-pill {
  border: 0;
  background: #3a3a3c;
  color: #fff;
  border-radius: 16px;
  min-height: 34px;
  padding: 0 12px;
  font-weight: 700;
}
html.is-workplace .phone-value { margin-left: auto; color: #d1d1d6; font-size: 15px; }
html.is-workplace .phone-row select {
  margin-left: auto;
  width: 46%;
  background: transparent;
  border: 0;
  color: #fff;
  text-align: right;
  padding: 8px 0;
}
html.is-workplace .phone-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin-left: auto;
  padding: 0;
}
html.is-workplace .phone-row input[type="datetime-local"] { width: 58%; }
html.is-workplace #phone-notes-text {
  width: 100%;
  min-height: 120px;
  margin: 16px 0 8px;
  background: #2c2c2e;
  color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 12px;
}
html.is-workplace .phone-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #2c2c2e;
  border-radius: 14px;
  padding: 12px;
  margin-top: 8px;
}
html.is-workplace .phone-note p { margin: 0; flex: 1; white-space: pre-wrap; word-break: break-word; }
html.is-workplace .phone-note button {
  border: 0;
  background: transparent;
  color: #ff453a;
  font-weight: 700;
  min-height: 44px;
}
html.is-workplace #phone-item-code { white-space: pre-line; }
html.is-workplace #phone-item-copy { width: 100%; margin-top: 8px; background: #3a3a3c; color: #fff; }
html.is-workplace #phone-item-delete { margin-top: 12px; }
html.is-workplace #phone-hub-copy { margin-top: 28px; font-size: 17px; line-height: 1.45; }
html.is-workplace .phone-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; }
html.is-workplace .phone-chips button {
  border: 0;
  background: #3a3a3c;
  color: #fff;
  border-radius: 16px;
  min-height: 34px;
  padding: 0 12px;
  white-space: nowrap;
  font-weight: 700;
}
html.is-workplace .phone-chips button.on { background: #0e72ed; }
html.is-workplace .phone-chat-list { display: flex; flex-direction: column; }
html.is-workplace .phone-chat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #2c2c2e;
  background: transparent;
  color: #fff;
  min-height: 64px;
  padding: 8px 0;
}
html.is-workplace .phone-chat-row span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
html.is-workplace .phone-chat-row b { font-size: 16px; }
html.is-workplace .phone-chat-row span span { color: #8e8e93; font-size: 13px; }
html.is-workplace .phone-fab {
  position: absolute;
  right: 18px;
  bottom: calc(86px + env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: #0e72ed;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  z-index: 4;
}
html.is-workplace .phone-thread-log { flex: 1; overflow: auto; padding: 8px 0 12px; }
html.is-workplace #phone-thread { display: flex; flex-direction: column; }
html.is-workplace #phone-thread.hidden { display: none !important; }
html.is-workplace .phone-thread-log p { margin: 0 0 10px; line-height: 1.4; }
html.is-workplace .phone-thread-log b { display: block; color: #8e8e93; font-size: 12px; }
html.is-workplace .phone-thread-log .mine { text-align: right; }
html.is-workplace .phone-thread-form { display: flex; gap: 8px; }
html.is-workplace .phone-thread-form input { flex: 1; background: #2c2c2e; color: #fff; border: 0; }
html.is-workplace .phone-thread-form button {
  border: 0;
  background: #0e72ed;
  color: #fff;
  border-radius: 12px;
  padding: 0 14px;
  font-weight: 700;
}
html.is-workplace #phone-cat-body { padding-bottom: 24px; }
html.is-workplace #phone-cat-body input,
html.is-workplace #phone-cat-body textarea {
  width: 100%;
  margin: 8px 0;
  background: #2c2c2e;
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 12px;
}
html.is-workplace #phone-cat-body textarea { min-height: 120px; }
html.is-workplace .phone-cal-head { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 12px; }
html.is-workplace .phone-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
html.is-workplace .phone-month span,
html.is-workplace .phone-month button {
  min-height: 36px;
  border: 0;
  background: transparent;
  color: #d1d1d6;
  border-radius: 18px;
}
html.is-workplace .phone-month button.has { box-shadow: inset 0 -3px 0 #0a84ff; }
html.is-workplace .phone-month button.on { background: #0e72ed; color: #fff; }
html.is-workplace .phone-sheet-grid { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
html.is-workplace .phone-sheet-grid div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
html.is-workplace .phone-sheet-grid span {
  background: #2c2c2e;
  border-radius: 8px;
  min-height: 32px;
  padding: 6px;
  font-size: 13px;
}
html.is-workplace #phone-cat .btn { width: 100%; margin-top: 8px; }
html.is-phone .audio-sink {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

html.is-app #view-home {
  background: #f3f3f5;
  height: 100%;
  min-height: 100dvh;
}
html.is-app .phone-shell {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #f3f3f5;
  color: #1c1c1e;
  overflow: hidden;
}
html.is-app .phone-top { display: none; }
html.is-app .phone-panel {
  grid-column: 2;
  grid-row: 1;
  height: 100%;
  min-width: 0;
  min-height: 0;
  background: #f3f3f5;
}
html.is-app #phone-home-panel { padding: 8px 28px 20px; }
html.is-app #phone-chat-panel,
html.is-app #phone-more-panel { padding: 28px 36px 24px; }
html.is-app .desk-clock {
  display: block;
  text-align: center;
  padding: 36px 12px 2px;
}
html.is-app .desk-time {
  margin: 0;
  font-size: clamp(48px, 5vw, 76px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  color: #1a1a1a;
}
html.is-app .desk-date {
  margin: 10px 0 0;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  color: #6e6e73;
}
html.is-app .desk-heading {
  display: block;
  margin: 4px 0 18px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #1a1a1a;
}
html.is-app .phone-actions {
  justify-content: center;
  gap: 26px;
  padding: 22px 0 26px;
}
html.is-app .phone-actions > button {
  flex: none;
  width: 104px;
  min-width: 104px;
  color: #1c1c1e;
  font-size: 14px;
  font-weight: 650;
}
html.is-app .phone-tile { width: 72px; height: 72px; border-radius: 18px; }
html.is-app .desk-card {
  flex: 1;
  min-height: 0;
  background: #fff;
  border: 1px solid #e4e4ea;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(28, 28, 30, 0.04);
  overflow: auto;
}
html.is-app .desk-card-head {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  margin: 0;
  border-bottom: 1px solid #ececf1;
}
html.is-app .desk-today {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #1c1c1e;
}
html.is-app .phone-agenda {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 8px;
}
html.is-app .phone-agenda-item {
  background: #f6f6f8;
  color: #1c1c1e;
}
html.is-app .phone-agenda-item span { color: #6e6e73; }
html.is-app .phone-empty { color: #6e6e73; padding: 24px 20px; }
html.is-app .phone-empty-title { color: #1c1c1e; font-size: 22px; }
html.is-app .phone-tabbar {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  max-width: none;
  height: 100%;
  margin: 0;
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 6px;
  background: #e7e7ec;
  border-radius: 0;
  padding: 14px 10px 12px;
  border-right: 1px solid #dedee3;
}
html.is-app .phone-tabbar button {
  flex: none;
  min-height: 74px;
  border-radius: 14px;
  color: #636366;
  font-size: 12px;
  font-weight: 650;
}
html.is-app .phone-tabbar button.on {
  background: #fff;
  color: #1c1c1e;
  box-shadow: 0 1px 2px rgba(28, 28, 30, 0.08);
}
html.is-app .phone-tab-ic { width: 26px; height: 26px; }
html.is-app #phone-tab-settings {
  display: flex;
  margin-top: auto;
}
html.is-app .phone-hub {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 28px 18px;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding-top: 12px;
}
html.is-app .phone-hub button {
  color: #1c1c1e;
  font-size: 15px;
  min-height: 108px;
}
html.is-app .phone-hub svg { width: 36px; height: 36px; }
html.is-app .phone-hub.reordering button { border-bottom-color: #e4e4ea; }
html.is-app .phone-hub-bar button { color: #0e72ed; }
html.is-app .phone-chips button { background: #e6e6eb; color: #1c1c1e; }
html.is-app .phone-chips button.on { background: #0e72ed; color: #fff; }
html.is-app .phone-chat-row { color: #1c1c1e; border-bottom-color: #e4e4ea; }
html.is-app .phone-chat-row span span { color: #6e6e73; }
html.is-app .phone-fab { right: 32px; bottom: 28px; }
html.is-app .phone-sheet {
  left: 0;
  right: 0;
  width: auto;
  transform: none;
  padding-left: max(28px, calc((100% - 760px) / 2));
  padding-right: max(28px, calc((100% - 760px) / 2));
}
html.is-app .desk-card-head { display: none; }
html.is-workplace .phone-link {
  border: 0;
  background: transparent;
  color: #0a84ff;
  font-weight: 650;
  font-size: 17px;
  min-height: 44px;
  padding: 0 8px;
}
html.is-workplace .phone-sheet-top .phone-link { justify-self: start; white-space: nowrap; }
html.is-workplace .phone-sheet-top .phone-link.save { justify-self: end; }
html.is-workplace .phone-sheet-top h2 { color: #fff; min-width: 0; }
html.is-workplace .event-title {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #2c2c2e;
  border-radius: 14px;
  margin: 16px 0;
  padding: 4px 8px 4px 14px;
  min-height: 64px;
}
html.is-workplace .event-title input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 17px;
  padding: 12px 0;
  text-align: left;
}
html.is-workplace .event-title input:focus { box-shadow: none; }
html.is-workplace .event-title button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #636366;
  color: #1c1c1e;
  font-size: 18px;
  line-height: 1;
  flex: none;
}
html.is-workplace .event-time {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.15fr) minmax(0, 0.85fr);
  column-gap: 8px;
  align-items: center;
}
html.is-workplace .event-time input[type="date"],
html.is-workplace .event-time input[type="time"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  background: #3a3a3c;
  border: 0;
  border-radius: 8px;
  padding: 8px 4px;
  text-align: center;
  color: #fff;
  color-scheme: dark;
  font-size: 14px;
}
html.is-workplace .phone-section {
  margin: 18px 14px 8px;
  color: #8e8e93;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
html.is-workplace .phone-row > span:first-child { min-width: 0; flex: 1 1 auto; }
html.is-workplace .phone-row .chev,
html.is-workplace .phone-value { flex: none; }
html.is-workplace .phone-switch-row > span { flex: 1; min-width: 0; line-height: 1.3; }
html.is-workplace .phone-switch-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 51px;
  height: 31px;
  border-radius: 16px;
  background: #48484a;
  border: 0;
  position: relative;
  flex: none;
  margin-left: 12px;
  padding: 0;
}
html.is-workplace .phone-switch-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
html.is-workplace .phone-switch-row input[type="checkbox"]:checked { background: #0e72ed; }
html.is-workplace .phone-switch-row input[type="checkbox"]:checked::after { transform: translateX(20px); }
html.is-workplace #phone-meet-settings { z-index: 32; }
html.is-workplace .agenda-day {
  margin: 16px 2px 8px;
  color: #f2f2f7;
  font-size: 20px;
  font-weight: 700;
}
html.is-workplace .agenda-day:first-child { margin-top: 4px; }
html.is-workplace .agenda-none {
  margin: 0 2px 16px;
  color: #8e8e93;
  font-size: 16px;
}
html.is-workplace .phone-agenda-item.is-past { opacity: 0.55; }
html.is-app .agenda-day { color: #1c1c1e; }
html.is-app .agenda-none { color: #6e6e73; }
html.is-workplace .event-detail-title {
  margin: 8px 0 6px;
  font-size: 28px;
  font-weight: 700;
  text-align: left;
  line-height: 1.2;
  word-break: break-word;
}
html.is-workplace .event-detail-when {
  margin: 0 0 16px;
  color: #d1d1d6;
  font-size: 16px;
}
html.is-workplace .event-detail-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}
html.is-workplace .event-detail-actions .btn,
html.is-workplace .event-detail-actions .btn.primary {
  width: auto;
  flex: 1;
  min-height: 44px;
  border-radius: 22px;
}
html.is-workplace .event-detail-actions .btn.primary { background: #0e72ed; }
html.is-workplace #phone-item-chat { background: #3a3a3c; color: #fff; }
html.is-workplace #phone-item-info { display: inline-flex; align-items: center; margin: 4px 0 12px; }
html.is-workplace .event-host {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #3a3a3c;
  border-bottom: 1px solid #3a3a3c;
  margin-bottom: 16px;
}
html.is-workplace .event-host strong { display: block; font-size: 16px; }
html.is-workplace .event-host span span { display: block; color: #8e8e93; font-size: 13px; }
html.is-workplace .event-invite {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 16px;
  line-height: 1.45;
  margin: 0 0 16px;
}
html.is-workplace .event-invite a { color: #0a84ff; }

.fx-stage { position: relative; }
#set-preview-fx {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0b1220;
  border-radius: 14px;
  object-fit: cover;
}
.fx-mirror { transform: scaleX(-1); }
.fx-status {
  position: absolute;
  left: 12px;
  bottom: 12px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 13px;
}
.fx-tabs { display: flex; gap: 18px; margin: 14px 0 12px; border-bottom: 1px solid var(--line); }
.fx-tabs button {
  border: 0;
  background: transparent;
  padding: 8px 0 10px;
  color: #64748b;
  font-weight: 700;
}
.fx-tabs button.on { color: #0e72ed; box-shadow: inset 0 -2px 0 #0e72ed; }
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.fx-cell {
  position: relative;
  border: 2px solid #e6e6eb;
  border-radius: 12px;
  background: #fff;
  padding: 0;
  overflow: hidden;
  min-height: 74px;
  aspect-ratio: 16 / 10;
}
.fx-cell.on { border-color: #0e72ed; }
.fx-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-cell.plain {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #1c1c1e;
}
.fx-avatars .fx-cell { aspect-ratio: 1; border-radius: 18px; background: #f3f4f6; }
.fx-avatars .fx-cell img { object-fit: contain; background: #f3f4f6; }
.fx-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-filters button {
  border: 2px solid #e6e6eb;
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
}
.fx-filters button.on { border-color: #0e72ed; color: #0e72ed; }
.vol-field input[type="range"] { width: 100%; }
html.is-phone .fx-tabs,
html.is-phone .fx-page,
html.is-phone #set-preview-fx,
html.is-phone #fx-status { display: none !important; }
html.is-app #phone-set-index { display: none !important; }
html.is-app #view-settings {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #f7f7f8;
}
html.is-app #view-settings .brand { display: none; }
html.is-app #view-settings .settings-title {
  display: block;
  flex: 1;
  font-size: 18px;
  font-weight: 700;
}
html.is-app #view-settings .top {
  background: #fff;
  border-bottom: 1px solid #e6e6eb;
  padding: 14px 18px;
}
html.is-app #settings-back {
  order: 2;
  margin-left: auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: #f2f2f4;
  color: transparent;
  font-size: 0;
  position: relative;
}
html.is-app #settings-back::after {
  content: "×";
  color: #1c1c1e;
  font-size: 26px;
  line-height: 36px;
  position: absolute;
  inset: 0;
}
html.is-app #view-settings .settings {
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 0;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  background: #fff;
}
html.is-app #view-settings .set-nav {
  padding: 16px 12px;
  background: #f7f7f8;
  border-right: 1px solid #e6e6eb;
  min-height: 100%;
}
html.is-app #view-settings .set-nav button { border-radius: 10px; padding: 12px 14px; }
html.is-app #view-settings .set-nav button.on { background: #0e72ed; }
html.is-app #view-settings .card {
  grid-column: 2;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
  overflow: auto;
  max-height: calc(100dvh - 68px);
}
html.is-app #set-video > h2 { display: none; }
html.is-app #set-preview,
html.is-app #set-preview-fx { max-height: 420px; border-radius: 12px; }

.call-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: flex;
  gap: 8px;
}
.call-badge {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.78);
  color: white;
  display: grid;
  place-items: center;
  padding: 0;
}
.call-badge svg { width: 18px; height: 18px; display: block; }
.call-badge.secure { background: #16803c; }
.call-badge.account { background: rgba(15, 23, 42, 0.78); }
body.controls-idle .dock,
body.controls-idle .call-top {
  opacity: 0;
  pointer-events: none;
}
.leave-end, .leave-row, .leave-cancel {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-top: 10px;
  border: 0;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
}
.leave-end { background: #ff453a; color: white; }
.leave-row { background: #2c2c2e; color: white; }
.leave-cancel { background: transparent; color: #0a84ff; }
#leave-people button {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-bottom: 1px solid #3a3a3c;
  background: transparent;
  color: white;
  text-align: left;
  padding: 0 14px;
  font-size: 17px;
}
.call-fx-stage {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  aspect-ratio: 16 / 9;
  margin-bottom: 12px;
}
.call-fx-stage video,
.call-fx-stage canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #111;
}
.cam-flip {
  display: none;
  position: absolute;
  right: 10px;
  bottom: 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  min-height: 36px;
  padding: 0 12px;
  font-weight: 700;
}
html.is-phone .cam-flip { display: inline-flex; align-items: center; }
.ratio-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
.ratio-row button, #pref-noise.on, #pref-original.on {
  border: 0;
  border-radius: 999px;
  min-height: 36px;
  padding: 0 12px;
  background: #2c2c2e;
  color: white;
  font-weight: 700;
}
.ratio-row button.on { background: #0a84ff; }
#pref-page-audio .field { margin-top: 12px; }
#pref-page-audio select {
  width: 100%;
  min-height: 44px;
  border-radius: 10px;
  border: 0;
  background: #2c2c2e;
  color: white;
  padding: 0 10px;
}
video.ratio-16-9 { object-fit: cover; aspect-ratio: 16 / 9; }
video.ratio-4-3 { object-fit: cover; aspect-ratio: 4 / 3; }
video.ratio-1-1 { object-fit: cover; aspect-ratio: 1 / 1; }
#pref-sheet .zoom-head button.hidden {
  display: grid !important;
  visibility: hidden;
  pointer-events: none;
}
#pref-sheet .fx-grid { margin-top: 8px; }
#pref-sheet .fx-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#pref-sheet .fx-filters button {
  border: 0;
  border-radius: 999px;
  min-height: 36px;
  padding: 0 12px;
  background: #2c2c2e;
  color: white;
}
#pref-sheet .fx-filters button.on,
#pref-sheet .fx-cell.on { outline: 2px solid #0a84ff; }
#pref-page-audio .audio-test {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: #2c2c2e;
  color: white;
}
.btn:disabled, #pref-page-audio .audio-test:disabled { opacity: 0.45; cursor: default; }
#pref-page-audio .meter { background: #3a3a3c; margin-top: 12px; }
#pref-page-audio .meter::before { background: #30d158; }

.app-only { display: none; }
html.is-app .app-only:not(.hidden) { display: flex; }
.dock-item { display: contents; }
html.is-app .dock {
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  transform: none;
  justify-content: center;
  gap: 2px;
  padding: 6px 12px 8px;
  border: 0;
  border-top: 1px solid #2c2c2e;
  border-radius: 0;
  background: #1c1c1e;
}
html.is-app .call-body { padding-bottom: 92px; }
html.is-app .dock-item { display: flex; position: relative; align-items: stretch; }
html.is-app .dock .round {
  width: 86px;
  height: auto;
  min-height: 62px;
  border-radius: 10px;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 6px 6px;
  color: #f2f2f7;
}
html.is-app .dock-label { display: block; font-size: 11px; font-weight: 650; line-height: 1.1; }
html.is-app .dock .round.off { background: #7f1d1d; }
html.is-app .dock .round.active,
html.is-app .dock .round.on { background: #3a3a3c; }
html.is-app .dock .round.leave {
  background: #dc2626;
  width: auto;
  min-width: 72px;
  border-radius: 12px;
}
html.is-app .caret {
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 18px;
  border: 0;
  background: transparent;
  color: #d1d1d6;
  font-size: 11px;
  line-height: 1;
  padding: 0;
}
.dock-count {
  position: absolute;
  top: 6px;
  right: 22px;
  font-size: 12px;
  font-weight: 800;
}
html.is-app .ic-people {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11a3 3 0 1 0-3-3 3 3 0 0 0 3 3zM8 11a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm0 2c-2.7 0-8 1.3-8 4v2h10v-2c0-1.2.6-2.3 1.5-3.1C10.2 13.3 8.9 13 8 13zm8 0c-.3 0-.7 0-1 .1 1.2.9 2 2.1 2 3.4V19h7v-2c0-2.7-5.3-4-8-4z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 11a3 3 0 1 0-3-3 3 3 0 0 0 3 3zM8 11a3 3 0 1 0-3-3 3 3 0 0 0 3 3zm0 2c-2.7 0-8 1.3-8 4v2h10v-2c0-1.2.6-2.3 1.5-3.1C10.2 13.3 8.9 13 8 13zm8 0c-.3 0-.7 0-1 .1 1.2.9 2 2.1 2 3.4V19h7v-2c0-2.7-5.3-4-8-4z'/></svg>") center / contain no-repeat;
}
html.is-app .ic-react {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 21s-6.7-4.3-9.3-8.2C.8 10.2 1.2 6.8 3.8 5.4 6 4.2 8.4 5 12 8.2 15.6 5 18 4.2 20.2 5.4c2.6 1.4 3 4.8 1.1 7.4C18.7 16.7 12 21 12 21z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 21s-6.7-4.3-9.3-8.2C.8 10.2 1.2 6.8 3.8 5.4 6 4.2 8.4 5 12 8.2 15.6 5 18 4.2 20.2 5.4c2.6 1.4 3 4.8 1.1 7.4C18.7 16.7 12 21 12 21z'/></svg>") center / contain no-repeat;
}
html.is-app .ic-host {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2l8 3v6c0 5.25-3.4 9.74-8 11-4.6-1.26-8-5.75-8-11V5z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2l8 3v6c0 5.25-3.4 9.74-8 11-4.6-1.26-8-5.75-8-11V5z'/></svg>") center / contain no-repeat;
}
.rec-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.25);
}
#dock-record.paused .rec-dot { background: #8e8e93; box-shadow: none; }
.chip.rec {
  border: 0;
  background: #3a3a3c;
  color: #ff453a;
  font-weight: 800;
  cursor: pointer;
}
.chip.rec::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: #ff453a;
}
.dock-menu {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  width: min(340px, calc(100% - 24px));
  max-height: min(70vh, 560px);
  overflow: auto;
  background: #2c2c2e;
  color: #f2f2f7;
  border-radius: 14px;
  padding: 8px;
  z-index: 9;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
.dock-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: #f2f2f7;
  min-height: 36px;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
}
.dock-menu button:hover,
.dock-menu button.on { background: #3a3a3c; }
.dock-menu button.danger { color: #ff453a; }
.dock-menu .menu-title {
  margin: 8px 10px 4px;
  color: #8e8e93;
  font-size: 12px;
  font-weight: 700;
}
.menu-check.on::before { content: "✓  "; }
.more-grid { width: min(420px, calc(100% - 16px)); }
.more-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.more-items button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 78px;
  text-align: center;
  font-size: 12px;
  font-weight: 650;
}
.more-foot { margin: 8px 4px 4px; color: #8e8e93; font-size: 12px; }
.more-foot button { display: inline; width: auto; color: #0a84ff; padding: 0; min-height: 0; }
.desk-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100% - 24px));
  max-height: min(86vh, 760px);
  overflow: auto;
  background: #fff;
  color: #1c1c1e;
  border-radius: 12px;
  padding: 16px 18px 18px;
  z-index: 12;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.desk-dialog.wide { width: min(640px, calc(100% - 24px)); }
.desk-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.desk-dialog-head h2 { margin: 0; font-size: 18px; }
.desk-dialog-head button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 22px;
}
.desk-dialog p { margin: 10px 0; }
.desk-note { color: #6e6e73; font-size: 13px; }
.desk-check, .desk-radio, .bo-minutes { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; font-size: 14px; }
.desk-check.sub { margin-left: 22px; }
.desk-dialog .btn.primary { margin-left: auto; display: block; background: #0e72ed; color: #fff; border: 0; border-radius: 8px; min-height: 36px; padding: 0 16px; }
.bo-create-line { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 700; }
.bo-create-line input, .bo-minutes input {
  width: 72px;
  min-height: 36px;
  border: 1px solid #d1d1d6;
  border-radius: 8px;
  padding: 0 8px;
}
.convert-bar { height: 8px; background: #e5e5ea; border-radius: 999px; overflow: hidden; }
.convert-bar i { display: block; height: 100%; width: 0; background: #0e72ed; }
#convert-stop, #record-settings-sheet button, #board-clear {
  margin-top: 12px;
  border: 1px solid #d1d1d6;
  background: #fff;
  border-radius: 8px;
  min-height: 36px;
  padding: 0 12px;
}
#doc-text { width: 100%; min-height: 220px; border: 1px solid #d1d1d6; border-radius: 8px; padding: 8px; font: inherit; }
#board-canvas { width: 100%; height: auto; background: #fff; border: 1px solid #d1d1d6; border-radius: 8px; touch-action: none; cursor: crosshair; }
.bo-room { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid #e5e5ea; }
.bo-room button, .bo-actions button {
  border: 1px solid #d1d1d6;
  background: #fff;
  border-radius: 8px;
  min-height: 32px;
  padding: 0 10px;
}
.bo-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.bo-assign { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 8px; }
.bo-assign label { display: flex; gap: 8px; align-items: center; }
#bo-banner { display: flex; gap: 8px; align-items: center; justify-content: center; }
#bo-banner button { border: 0; background: #0e72ed; color: #fff; border-radius: 8px; min-height: 32px; padding: 0 10px; }
video.auto-frame { object-fit: cover; transform: scale(1.35); }
html.is-app #call-people { position: relative; }
.menu-switch { position: relative; padding-right: 54px; }
.menu-switch::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 8px;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #48484a;
}
.menu-switch.on::after { background: #30d158; }
html.is-app .dock .round.pin-tool { font-size: 11px; font-weight: 700; }
#offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: #3a2a00;
  color: #ffe7a3;
  text-align: center;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
}