:root {
  color-scheme: dark;
  --page: #0d1110;
  --page-soft: #101614;
  --surface: #141a18;
  --surface-raised: #18201d;
  --surface-input: #0f1512;
  --line: #28332d;
  --line-strong: #36443c;
  --text: #f1f4ee;
  --muted: #abb4ac;
  --quiet: #7d8980;
  --faint: #626f66;
  --accent: #b9e6c4;
  --accent-strong: #8dc69b;
  --accent-ink: #102016;
  --accent-wash: #1b2b20;
  --blue: #a7c9d5;
  --blue-wash: #1a2729;
  --gold: #e4c58a;
  --gold-wash: #2a261d;
  --red: #edaaa2;
  --red-wash: #2b1d1b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--page); }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: radial-gradient(ellipse at 57% -24%, rgba(101, 141, 108, .11), transparent 44%), var(--page);
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled, select:disabled { cursor: not-allowed; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
::selection { color: var(--accent-ink); background: var(--accent); }

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.brand-mark {
  position: relative;
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #45584a;
  border-radius: 11px;
  color: var(--accent);
  background: linear-gradient(145deg, #202c24, #141b17);
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.08em;
}
.brand-mark::after {
  position: absolute;
  right: 6px;
  bottom: 7px;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-strong);
  content: "";
}
.brand div { display: grid; gap: 4px; }
.brand strong { font-size: 11px; font-weight: 760; letter-spacing: .12em; }
.brand small { color: var(--muted); font-size: 9px; font-weight: 550; letter-spacing: .1em; }

.eyebrow {
  display: block;
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .12em;
  line-height: 1.3;
}
.muted { color: var(--muted); font-size: 12px; line-height: 1.55; }
.button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 15px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface-raised);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.button:hover:not(:disabled) { border-color: #647767; background: #202a23; }
.button:active:not(:disabled) { transform: translateY(1px); }
.button:disabled { color: #748077; }
.button.primary { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); }
.button.primary:hover:not(:disabled) { border-color: #d0f1d6; background: #d0f1d6; }
.button.wide { width: 100%; }
.button.subtle { color: var(--muted); background: transparent; }
.button.subtle:hover:not(:disabled) { color: var(--text); background: var(--surface-raised); }
.button.copy-button { border-color: #49634f; color: var(--accent); background: #1a251c; }
.button.talkback { width: 100%; min-height: 42px; border-color: #a9d9b4; color: var(--accent-ink); background: var(--accent); }
.button.talkback:hover:not(:disabled) { border-color: #d0f1d6; background: #d0f1d6; }
.button.talkback.active { border-color: #e2c887; color: #281f0d; background: #e2c887; }
.button.talkback:disabled { border-color: #2d3831; color: #758078; background: #1a211d; }
.talkback-mark { position: relative; width: 13px; height: 13px; border: 1.5px solid currentColor; border-radius: 50%; }
.talkback-mark::before, .talkback-mark::after { position: absolute; top: 50%; left: 50%; border: 1px solid currentColor; border-left-color: transparent; border-radius: 50%; content: ""; transform: translate(-35%, -50%); }
.talkback-mark::before { width: 7px; height: 7px; }
.talkback-mark::after { width: 11px; height: 11px; }
.button.hangup { min-width: 0; padding: 0 10px; border-color: #4a302e; color: var(--red); background: var(--red-wash); }
.button.hangup:hover:not(:disabled) { border-color: #7a4b46; background: #382321; }
.field {
  width: 100%;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  outline: none;
  color: var(--text);
  background: var(--surface-input);
  font-size: 14px;
}
.field:focus { border-color: var(--accent-strong); box-shadow: 0 0 0 3px rgba(141, 198, 155, .12); }
.error { margin: 15px 0; padding: 12px 13px; border: 1px solid #65433f; border-radius: 8px; color: var(--red); background: var(--red-wash); font-size: 12px; line-height: 1.5; }
.text-button { padding: 8px 0; border: 0; color: var(--muted); background: none; font-size: 12px; }
.text-button:hover { color: var(--text); }

/* Producer console */
.studio-shell { width: min(1650px, calc(100% - 64px)); min-height: 100vh; margin: 0 auto; padding-bottom: 28px; }
.studio-header { display: flex; height: 78px; align-items: center; justify-content: space-between; border-bottom: 1px solid #202924; }
.header-right { display: flex; align-items: center; gap: 20px; }
.live-indicator { display: inline-flex; align-items: center; gap: 9px; color: #b7d9bd; font-size: 11px; font-weight: 650; letter-spacing: .06em; }
.live-indicator i, .session-dot, .controlbar-note i, .secure-label i, .guest-call-status > i, .tag i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(141, 198, 155, .12);
}
.separator { width: 1px; height: 22px; background: var(--line); }
.welcome-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 31px 0 24px; }
.welcome-row h1 { margin: 8px 0 5px; font-size: clamp(28px, 3.2vw, 36px); font-weight: 690; letter-spacing: -.045em; line-height: 1.1; }
.welcome-row p { margin: 0; color: var(--muted); font-size: 14px; }
.session-clock { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 9px; background: rgba(20, 26, 24, .78); }
.session-clock .session-dot { flex: 0 0 auto; width: 8px; height: 8px; }
.session-clock div { display: grid; gap: 4px; }
.session-clock b { font-size: 12px; font-weight: 650; }
.session-clock small { color: var(--muted); font-size: 11px; }
.sharebar {
  display: grid;
  grid-template-columns: 44px minmax(210px, 1fr) minmax(280px, .92fr) auto;
  align-items: center;
  gap: 15px;
  padding: 15px 17px;
  border: 1px solid #314537;
  border-radius: 11px;
  background: linear-gradient(105deg, rgba(28, 43, 32, .83), rgba(21, 28, 24, .91) 64%);
}
.share-symbol { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #405c47; border-radius: 9px; background: #1c2c20; }
.share-symbol span { position: relative; width: 14px; height: 14px; border: 1.5px solid var(--accent); border-radius: 4px; transform: rotate(-45deg); }
.share-symbol span::after { position: absolute; top: 5px; left: -4px; width: 18px; height: 1.5px; background: var(--accent); content: ""; }
.share-copy { display: grid; gap: 5px; }
.share-copy b { font-size: 13px; font-weight: 680; }
.share-copy small { color: var(--muted); font-size: 12px; }
.share-input { width: 100%; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid #39483d; border-radius: 7px; outline: none; color: #c9dccb; background: #101713; font-size: 12px; }
.share-input:focus { border-color: var(--accent-strong); }
.controlbar {
  display: flex;
  min-height: 67px;
  align-items: center;
  gap: 12px;
  margin: 13px 0 24px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(20, 26, 24, .84);
}
.bar-title { display: grid; min-width: 155px; gap: 5px; }
.bar-title b { font-size: 13px; font-weight: 650; }
.device-select { width: min(290px, 26vw); min-height: 42px; font-size: 13px; }
.controlbar .button { min-height: 40px; }
.controlbar-note { display: flex; align-items: center; gap: 9px; margin-left: auto; color: var(--muted); font-size: 12px; line-height: 1.4; }
.controlbar-note i { width: 6px; height: 6px; flex: 0 0 auto; }
.board-layout { display: grid; grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); align-items: stretch; gap: 19px; }
.queue-panel, .lines-panel { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: rgba(20, 26, 24, .91); }
.queue-panel { display: flex; flex-direction: column; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.section-head h2 { display: flex; align-items: center; gap: 10px; margin: 7px 0 0; font-size: 19px; font-weight: 670; letter-spacing: -.035em; }
.count { display: inline-grid; min-width: 25px; height: 24px; place-items: center; padding: 0 7px; border: 1px solid #3b5040; border-radius: 7px; color: var(--accent); background: #1b2820; font-size: 11px; font-weight: 620; }
.count small { color: var(--muted); font-size: 10px; }
.queue-live, .line-help { color: var(--muted); font-size: 12px; }
.queue-live { display: inline-flex; align-items: center; gap: 7px; color: #b7d9bd; }
.queue-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-strong); }
.section-subtitle { margin: 8px 0 17px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.queue-list { display: grid; min-height: 170px; flex: 1; align-content: start; gap: 9px; }
.queue-item { min-width: 0; padding: 12px; border: 1px solid #303b34; border-radius: 9px; background: #171e1a; cursor: grab; transition: border-color .15s ease, background .15s ease, opacity .15s ease; }
.queue-item:hover { border-color: #51634f; background: #1b241e; }
.queue-item.dragging { opacity: .45; }
.queue-person-row { display: grid; grid-template-columns: 15px 34px minmax(0, 1fr); align-items: center; gap: 10px; }
.drag-grip { display: grid; align-content: center; gap: 3px; width: 13px; height: 24px; padding: 4px 2px; cursor: grab; }
.drag-grip span { display: block; height: 2px; border-radius: 2px; background: #829086; }
.queue-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid #49604b; border-radius: 50%; color: var(--accent); background: #223127; font-size: 13px; font-weight: 730; }
.queue-person { display: grid; min-width: 0; gap: 4px; }
.queue-person b { overflow: hidden; color: var(--text); font-size: 14px; font-weight: 640; text-overflow: ellipsis; white-space: nowrap; }
.queue-person small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.queue-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto 34px; align-items: center; gap: 7px; margin-top: 12px; }
.queue-slot { width: 100%; min-width: 0; height: 40px; padding: 0 9px; border: 1px solid #36433a; border-radius: 7px; outline: none; color: #d8e0d8; background: var(--surface-input); font-size: 12px; }
.queue-slot:focus { border-color: var(--accent-strong); }
.queue-assign { min-height: 40px; padding: 0 11px; border: 1px solid #b5dfbe; border-radius: 7px; color: var(--accent-ink); background: var(--accent); font-size: 12px; font-weight: 700; white-space: nowrap; }
.queue-assign:hover { border-color: #d0f1d6; background: #d0f1d6; }
.queue-remove { display: grid; width: 34px; height: 38px; place-items: center; border: 1px solid #473431; border-radius: 7px; color: #bc8b84; background: #241a19; font-size: 18px; }
.queue-remove:hover { border-color: #784b45; color: var(--red); background: var(--red-wash); }
.queue-empty { display: grid; min-height: 180px; align-content: center; justify-items: center; gap: 10px; padding: 20px; border: 1px dashed #39463e; border-radius: 9px; color: var(--muted); text-align: center; }
.queue-wave { position: relative; width: 30px; height: 26px; }
.queue-wave::before { position: absolute; inset: 4px 0; background: linear-gradient(90deg, transparent 0 8%, var(--accent-strong) 8% 12%, transparent 12% 24%, var(--accent-strong) 24% 29%, transparent 29% 39%, var(--accent-strong) 39% 45%, transparent 45% 56%, var(--accent-strong) 56% 62%, transparent 62% 72%, var(--accent-strong) 72% 77%, transparent 77%); content: ""; clip-path: polygon(0 45%, 8% 45%, 11% 15%, 15% 85%, 20% 34%, 26% 34%, 30% 0, 35% 100%, 40% 40%, 47% 40%, 51% 20%, 56% 80%, 61% 45%, 67% 45%, 71% 10%, 76% 90%, 81% 45%, 100% 45%, 100% 55%, 81% 55%, 76% 100%, 71% 20%, 67% 55%, 61% 55%, 56% 100%, 51% 30%, 47% 60%, 40% 60%, 35% 100%, 30% 10%, 26% 44%, 20% 44%, 15% 95%, 11% 25%, 8% 55%, 0 55%); }
.queue-empty b { color: #e2e8e0; font-size: 13px; font-weight: 650; }
.queue-empty small { max-width: 220px; font-size: 11px; line-height: 1.5; }
.queue-foot { display: flex; align-items: center; gap: 9px; margin-top: 15px; padding-top: 13px; border-top: 1px solid #29342e; color: var(--muted); font-size: 11px; }
.queue-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-strong); box-shadow: 0 0 0 4px rgba(141, 198, 155, .1); }

.line-grid { display: grid; gap: 10px; }
.invite-panel { display: grid; gap: 10px; margin: 0 0 16px; padding: 13px; border: 1px solid #314537; border-radius: 9px; background: linear-gradient(135deg, #1b261e, #171e1a); }
.invite-heading { display: grid; gap: 4px; }
.invite-heading b { color: var(--text); font-size: 14px; font-weight: 660; }
.invite-panel .share-input { height: 42px; font-size: 12px; }
.invite-panel .copy-button { width: 100%; }
.studio-connection { display: grid; grid-template-columns: minmax(190px, .75fr) minmax(220px, 1fr) auto; align-items: center; gap: 12px; margin: 16px 0 12px; padding: 13px 15px; border: 1px solid #3c5041; border-radius: 9px; background: linear-gradient(100deg, #1b2820, #171e1a); }
.studio-connection-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.studio-connection-title .session-dot { width: 9px; height: 9px; flex: 0 0 auto; }
.studio-connection-title div { display: grid; gap: 4px; min-width: 0; }
.studio-connection-title b { color: var(--text); font-size: 14px; }
.studio-connection-title small { color: var(--muted); font-size: 11px; }
.studio-connection > label { display: grid; gap: 6px; color: #d0d8d0; font-size: 12px; font-weight: 620; }
.studio-connection .device-select { width: 100%; min-height: 42px; }
.studio-connection-actions { display: flex; gap: 7px; }
.studio-connection-actions .button { min-height: 40px; padding: 0 10px; font-size: 11px; }
.studio-device-note { grid-column: 2 / -1; margin-top: -6px; color: var(--muted); font-size: 11px; }
.guest-slot { display: grid; gap: 12px; min-width: 0; padding: 14px 15px; border: 1px solid #303b34; border-radius: 9px; background: linear-gradient(110deg, #171e1a, #151b18 58%); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.guest-slot.occupied { border-color: #3e5543; background: linear-gradient(105deg, #1b2820, #171e1a 56%); }
.guest-slot.drop-ready { border-color: var(--accent); background: #1d2c21; box-shadow: inset 0 0 0 1px rgba(185, 230, 196, .22), 0 0 24px rgba(141, 198, 155, .11); }
.slot-top { display: flex; min-width: 0; align-items: center; gap: 13px; }
.slot-number { display: grid; width: 52px; min-width: 52px; height: 48px; align-content: center; justify-items: center; gap: 1px; border: 1px solid #344039; border-radius: 7px; background: #141a17; }
.slot-number span { color: var(--quiet); font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.slot-number b { color: var(--accent); font-size: 19px; font-weight: 700; line-height: 1; }
.slot-identity { display: grid; min-width: 120px; flex: 1; gap: 4px; }
.slot-identity h3 { overflow: hidden; margin: 0; color: var(--text); font-size: 16px; font-weight: 670; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.slot-identity p { overflow: hidden; margin: 0; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.slot-meter { display: grid; width: min(260px, 28%); grid-template-columns: 1fr auto; align-items: center; gap: 6px 9px; margin-left: auto; }
.slot-meter > span:first-child { grid-column: 1 / -1; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .05em; }
.slot-meter .vu { height: 8px; }
.slot-meter .signal-db { min-width: 54px; }
.slot-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.slot-routes label { display: grid; min-width: 0; gap: 6px; color: #d0d8d0; font-size: 12px; font-weight: 620; }
.slot-routes select { width: 100%; min-width: 0; height: 42px; padding: 0 30px 0 11px; border: 1px solid #3a473e; border-radius: 7px; outline: none; color: #dce3dc; background: var(--surface-input); font-size: 13px; text-overflow: ellipsis; }
.slot-routes select:focus { border-color: var(--accent-strong); }
.slot-routes select:disabled { border-color: #39453d; color: #89958b; background: #171d19; opacity: .9; }
.slot-actions { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid #29342e; }
.slot-actions > .talkback { width: 150px; min-height: 38px; flex: 0 0 auto; }
.slot-tools { display: grid; min-width: 0; grid-template-columns: minmax(190px, 1fr) auto auto; align-items: center; gap: 8px; }
.slot-tools .button { min-height: 38px; padding: 0 12px; font-size: 12px; white-space: nowrap; }
.slot-mute { color: var(--muted); }
.slot-actions .processing-control { justify-content: flex-start; gap: 10px; }
.slot-actions .processing-copy b { font-size: 12px; }
.slot-actions .processing-copy small { font-size: 10px; }
.slot-actions .switch { min-width: 62px; height: 30px; }
.line-card {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(145px, .94fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(215px, 1.38fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 142px;
  padding: 15px;
  border: 1px solid #303b34;
  border-radius: 9px;
  background: linear-gradient(100deg, #171e1a, #151b18 54%, #151b18);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.line-card.occupied { border-color: #3e5543; background: linear-gradient(100deg, #1b2820, #171e1a 52%); }
.line-card.drop-ready { border-color: var(--accent); background: #1d2c21; box-shadow: inset 0 0 0 1px rgba(185, 230, 196, .22), 0 0 24px rgba(141, 198, 155, .11); }
.line-number { display: grid; align-content: center; justify-items: start; gap: 5px; align-self: stretch; padding-right: 13px; border-right: 1px solid #344039; }
.line-number span { color: var(--quiet); font-size: 10px; font-weight: 680; letter-spacing: .06em; }
.line-number b { color: var(--accent); font-size: 23px; font-weight: 620; letter-spacing: -.06em; }
.line-identity { display: grid; min-width: 0; gap: 15px; }
.identity-heading { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 8px; }
.line-person { min-width: 0; }
.line-person h3 { overflow: hidden; margin: 0; color: var(--text); font-size: 16px; font-weight: 650; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.line-person p { overflow: hidden; margin: 5px 0 0; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.tag { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid #38443c; border-radius: 999px; color: var(--muted); background: #1a211d; font-size: 11px; font-weight: 670; letter-spacing: .03em; }
.tag i { width: 6px; height: 6px; box-shadow: none; background: #78847b; }
.tag.gold { border-color: #5a4d32; color: var(--gold); background: var(--gold-wash); }
.tag.gold i { background: var(--gold); }
.tag.blue { border-color: #3d555a; color: var(--blue); background: var(--blue-wash); }
.tag.blue i { background: var(--blue); }
.tag.green { border-color: #3b5941; color: var(--accent); background: #1b2b20; }
.tag.green i { background: var(--accent); box-shadow: 0 0 8px rgba(185, 230, 196, .5); }
.signal-row { display: grid; grid-template-columns: 66px minmax(0, 1fr) 65px; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .02em; }
.signal-db { color: #d3ddd4; font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.vu { height: 6px; overflow: hidden; border-radius: 5px; background: #303a33; }
.vu i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #74ad7e 0%, #c2e4a9 78%, #e4c58a 100%); transition: width .08s linear; }
.empty-line-hint { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.drop-indicator { width: 8px; height: 8px; border: 1px dashed #78877a; border-radius: 50%; }
.route-field { display: grid; min-width: 0; gap: 8px; color: #d0d8d0; font-size: 13px; font-weight: 620; }
.route-field select {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 29px 0 11px;
  border: 1px solid #3a473e;
  border-radius: 7px;
  outline: none;
  color: #dce3dc;
  background: var(--surface-input);
  font-size: 13px;
  text-overflow: ellipsis;
}
.route-field select:focus { border-color: var(--accent-strong); }
.route-field select:disabled { border-color: #39453d; color: #89958b; background: #171d19; opacity: .9; }
.line-actions { display: grid; min-width: 0; grid-template-columns: 1fr; align-items: start; gap: 7px; }
.line-actions.disabled .line-tools { opacity: .7; }
.line-actions .button:disabled { border-color: #303a33; color: #68736b; background: #171d19; opacity: .8; }
.line-actions > .talkback { width: 145px; justify-self: start; }
.line-tools { display: grid; grid-template-columns: minmax(154px, 1fr) minmax(68px, .46fr) minmax(88px, .62fr); align-items: center; gap: 7px; }
.processing-control { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 7px; color: #d2dad1; }
.processing-copy { display: grid; min-width: 0; gap: 2px; }
.processing-copy b { color: #e0e6df; font-size: 13px; font-weight: 650; }
.processing-copy small { color: var(--muted); font-size: 11px; line-height: 1.25; white-space: normal; }
.switch { display: inline-flex; min-width: 66px; height: 32px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; border: 1px solid #47544a; border-radius: 7px; color: #d3ddd4; background: #222b25; font-size: 11px; font-weight: 750; letter-spacing: .03em; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.switch i { width: 7px; height: 7px; border-radius: 50%; background: #a2ada3; }
.switch.on { border-color: #7fba8c; color: #dff1e2; background: #294431; }
.switch.on i { background: #a9e5b5; }
.switch:disabled { opacity: .55; }
.line-tools .button { min-height: 40px; padding: 0 9px; font-size: 12px; white-space: nowrap; }
.line-mute { color: var(--muted); }
.audio-node, .guest-audio { position: fixed; left: -10px; bottom: -10px; width: 2px; height: 2px; opacity: .01; pointer-events: none; }
.studio-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 2px 0; color: var(--quiet); font-size: 10px; }
.studio-footer b { margin-left: 7px; color: #abb6ac; font-weight: 620; letter-spacing: .04em; }
.studio-footer i { color: var(--accent-strong); font-style: normal; }

/* Guest pages */
.guest-layout { display: grid; min-height: 100vh; align-content: center; justify-items: center; padding: 38px 18px 52px; }
.guest-card { width: min(490px, 100%); overflow: hidden; border: 1px solid #303b34; border-radius: 14px; background: rgba(20, 26, 24, .98); box-shadow: 0 28px 85px rgba(0, 0, 0, .28); }
.guest-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 19px 22px; border-bottom: 1px solid #28332d; }
.secure-label { display: inline-flex; align-items: center; gap: 8px; color: #9caf9f; font-size: 9px; font-weight: 650; letter-spacing: .06em; white-space: nowrap; }
.secure-label i { width: 6px; height: 6px; }
.secure-label.onair { color: var(--accent); }
.guest-content { display: grid; gap: 17px; padding: 32px 34px 31px; }
.guest-content h1 { margin: -7px 0 -4px; font-size: 34px; font-weight: 690; line-height: 1.11; letter-spacing: -.05em; }
.guest-content h1 span { color: var(--accent); }
.guest-content > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.guest-content form { display: grid; gap: 15px; margin-top: 2px; }
.guest-content form > label:first-child { display: grid; gap: 8px; color: #d4ddd4; font-size: 12px; font-weight: 620; }
.check-row { display: flex; align-items: flex-start; gap: 11px; padding: 13px; border: 1px solid #303b34; border-radius: 8px; background: #171e1a; cursor: pointer; }
.check-row input { margin: 3px 0 0; accent-color: var(--accent-strong); }
.check-row span { display: grid; gap: 5px; }
.check-row b { font-size: 12px; font-weight: 640; }
.check-row small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.guest-note { display: flex; align-items: flex-start; gap: 10px; padding-top: 15px; border-top: 1px solid #28332d; color: #94a197; }
.guest-note span { color: var(--accent-strong); font-size: 16px; }
.guest-note p { margin: 0; font-size: 11px; line-height: 1.6; }
.centered { justify-items: center; text-align: center; }
.centered > p { max-width: 350px; }
.waiting-orbit { position: relative; display: grid; width: 64px; height: 64px; place-items: center; margin: 2px 0; border: 1px solid #405647; border-radius: 50%; background: #1c2a20; }
.waiting-orbit span { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 7px rgba(185, 230, 196, .09), 0 0 28px rgba(185, 230, 196, .42); }
.waiting-orbit i { position: absolute; inset: -6px; border: 1px solid rgba(185, 230, 196, .22); border-radius: 50%; animation: orbit 2.2s ease-out infinite; }
@keyframes orbit { 0% { transform: scale(.85); opacity: .8; } 100% { transform: scale(1.28); opacity: 0; } }
.guest-name-chip { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 9px 12px; border: 1px solid #334439; border-radius: 8px; background: #17231a; }
.guest-name-chip b { font-size: 12px; }
.guest-name-chip > span:not(.queue-avatar) { color: var(--faint); }
.guest-name-chip small { color: var(--muted); font-size: 11px; }
.call-content { gap: 15px; }
.call-wave { display: flex; height: 42px; align-items: center; justify-content: center; gap: 4px; margin-bottom: 3px; }
.call-wave span { width: 3px; height: 12px; border-radius: 3px; background: #86be91; animation: wave .8s ease-in-out infinite alternate; }
.call-wave span:nth-child(3n) { height: 28px; animation-delay: -.45s; }
.call-wave span:nth-child(2n) { height: 20px; animation-delay: -.2s; }
.call-wave span:nth-child(5n) { height: 34px; animation-delay: -.65s; }
@keyframes wave { to { transform: scaleY(.35); opacity: .55; } }
.guest-call-status { display: flex; align-items: center; gap: 11px; width: 100%; margin-top: 2px; padding: 13px; border: 1px solid #364b3b; border-radius: 8px; background: #18241b; text-align: left; }
.guest-call-status div { display: grid; gap: 4px; }
.guest-call-status b { font-size: 11px; }
.guest-call-status small { color: var(--muted); font-size: 10px; }
.call-actions { display: grid; width: 100%; grid-template-columns: 1fr 1fr; gap: 9px; }
.guest-tip { color: var(--quiet) !important; font-size: 10px !important; }
.guest-side-note { margin-top: 20px; color: var(--quiet); font-size: 10px; font-weight: 600; letter-spacing: .1em; }
.guest-side-note span { padding: 0 6px; color: var(--accent-strong); }

/* Landing and sign-in */
.landing { display: grid; min-height: 100vh; grid-template-rows: auto 1fr auto; padding: 32px clamp(24px, 8vw, 118px) 28px; background: radial-gradient(ellipse at 71% 53%, rgba(77, 121, 85, .15), transparent 38%); }
.landing .brand { align-self: start; }
.landing-copy { align-self: center; width: min(600px, 100%); margin: -14px auto 0; }
.landing-copy h1 { margin: 16px 0; font-size: clamp(46px, 8vw, 78px); font-weight: 700; line-height: .99; letter-spacing: -.065em; }
.landing-copy h1 span { color: var(--accent); }
.landing-copy > p { max-width: 460px; margin: 0 0 26px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.landing-copy .button { min-width: 190px; }
.landing-footer { display: flex; align-items: center; gap: 10px; margin-top: 31px; color: var(--muted); font-size: 11px; }
.landing-footer i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-strong); }
.studio-link { justify-self: end; color: var(--muted); font-size: 11px; text-decoration: none; }
.studio-link:hover { color: var(--accent); }
.auth-layout { display: grid; min-height: 100vh; grid-template-columns: 1fr minmax(390px, .82fr); align-items: center; gap: clamp(50px, 10vw, 150px); width: min(1120px, calc(100% - 64px)); margin: auto; }
.auth-aside { display: flex; min-height: 460px; flex-direction: column; justify-content: space-between; padding: 35px 0; }
.auth-aside > div h1 { margin: 14px 0; font-size: clamp(44px, 6vw, 68px); font-weight: 690; line-height: 1.02; letter-spacing: -.06em; }
.auth-aside > div p { max-width: 390px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.aside-foot { color: var(--muted); font-size: 10px; font-weight: 620; letter-spacing: .13em; }
.auth-card { padding: 30px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.auth-card h2 { margin: 9px 0; font-size: 27px; font-weight: 680; letter-spacing: -.04em; }
.auth-card > p { margin: 0 0 22px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.auth-card form { display: grid; gap: 17px; }
.auth-card label { display: grid; gap: 8px; font-size: 12px; font-weight: 620; }
.auth-card .muted { display: block; margin-top: 16px; }

#toast {
  position: fixed;
  z-index: 20;
  right: 22px;
  bottom: 22px;
  max-width: min(380px, calc(100% - 44px));
  padding: 13px 16px;
  border: 1px solid #405a45;
  border-radius: 8px;
  color: var(--text);
  background: #1b2920;
  box-shadow: 0 15px 44px rgba(0, 0, 0, .32);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: .16s ease;
}
#toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1450px) {
  .line-card { grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 14px; }
  .line-number { grid-row: span 3; }
  .line-identity { grid-column: 2 / -1; }
  .line-actions { grid-column: 2 / -1; grid-template-columns: minmax(145px, .45fr) minmax(0, 1fr); align-items: center; gap: 10px; }
  .line-actions > .talkback { width: 100%; }
  .line-tools { grid-template-columns: minmax(146px, 1fr) minmax(85px, .58fr) minmax(94px, .65fr); gap: 8px; }
  .line-tools .button { padding: 0 9px; font-size: 12px; }
}
@media (max-width: 1220px) {
  .studio-shell { width: min(1100px, calc(100% - 48px)); }
}
@media (max-width: 1150px) {
  .board-layout { grid-template-columns: 1fr; }
  .queue-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .queue-empty { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .sharebar { grid-template-columns: 44px minmax(190px, 1fr) minmax(240px, .9fr) auto; }
  .controlbar { flex-wrap: wrap; }
  .controlbar-note { width: 100%; margin-left: 0; }
  .device-select { width: min(290px, 40vw); }
  .line-card { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr); }
  .line-number { grid-row: span 2; }
  .line-identity { grid-column: 2 / -1; }
  .line-actions { grid-column: 2 / -1; grid-template-columns: minmax(145px, .45fr) minmax(0, 1fr); align-items: center; }
}
@media (max-width: 720px) {
  .studio-shell { width: calc(100% - 30px); padding-bottom: 22px; }
  .studio-header { height: 67px; }
  .header-right { gap: 11px; }
  .header-right .separator { display: none; }
  .live-indicator { gap: 7px; font-size: 9px; }
  .header-right .text-button { font-size: 11px; }
  .welcome-row { align-items: flex-start; flex-direction: column; padding: 25px 0 18px; }
  .welcome-row h1 { font-size: 30px; }
  .welcome-row p { font-size: 13px; }
  .session-clock { align-self: stretch; }
  .sharebar { grid-template-columns: 40px 1fr; gap: 11px; padding: 12px; }
  .share-copy b { font-size: 12px; }
  .share-copy small { font-size: 10px; line-height: 1.4; }
  .share-input { grid-column: 1 / -1; height: 40px; }
  .copy-button { grid-column: 1 / -1; }
  .controlbar { gap: 9px; margin-bottom: 17px; padding: 12px; }
  .bar-title { width: 100%; min-width: 0; }
  .device-select { width: 100%; flex: 1 1 100%; }
  .controlbar .button { flex: 1 1 auto; padding: 0 10px; font-size: 11px; }
  .controlbar-note { font-size: 12px; line-height: 1.4; }
  .board-layout { gap: 13px; }
  .queue-panel, .lines-panel { padding: 14px; }
  .queue-list { grid-template-columns: 1fr; }
  .section-head h2 { font-size: 18px; }
  .section-subtitle { font-size: 12px; }
  .queue-list { grid-template-columns: 1fr; }
  .studio-connection { grid-template-columns: 1fr; gap: 11px; }
  .studio-device-note { grid-column: auto; margin-top: 0; }
  .studio-connection-actions .button { flex: 1 1 0; }
  .slot-top { flex-wrap: wrap; gap: 9px; }
  .slot-identity { min-width: 150px; }
  .slot-top > .tag { margin-left: auto; }
  .slot-meter { width: 100%; margin: 2px 0 0; }
  .slot-routes { grid-template-columns: 1fr; gap: 9px; }
  .slot-actions { align-items: stretch; flex-direction: column; gap: 9px; }
  .slot-actions > .talkback { width: 100%; }
  .slot-tools { grid-template-columns: minmax(0, 1fr) minmax(84px, .7fr) minmax(92px, .8fr); gap: 7px; }
  .slot-tools .button { min-height: 42px; padding: 0 8px; }
  .slot-actions .processing-control { gap: 6px; }
  .line-card { grid-template-columns: 43px minmax(0, 1fr); gap: 11px; min-height: 0; padding: 13px; }
  .line-number { grid-row: auto; align-self: stretch; padding-right: 9px; }
  .line-number b { font-size: 21px; }
  .line-identity { grid-column: 2; min-height: 63px; align-content: center; gap: 9px; }
  .identity-heading { align-items: center; }
  .line-person h3 { font-size: 15px; }
  .line-person p { font-size: 12px; }
  .tag { padding: 4px 7px; font-size: 10px; }
  .signal-row { grid-template-columns: 62px minmax(0, 1fr) 61px; gap: 6px; font-size: 11px; }
  .signal-db { font-size: 11px; }
  .route-field { grid-column: 2; gap: 7px; font-size: 12px; }
  .route-field select { height: 46px; font-size: 13px; }
  .line-actions { grid-column: 2; grid-template-columns: 1fr; gap: 7px; }
  .line-actions > .talkback { min-height: 40px; }
  .line-tools { grid-template-columns: minmax(146px, 1fr) minmax(68px, .46fr) minmax(88px, .62fr); gap: 7px; }
  .line-tools .button { min-height: 40px; padding: 0 9px; font-size: 12px; }
  .processing-copy b { font-size: 12px; }
  .processing-copy small { font-size: 11px; }
  .studio-footer { align-items: flex-start; flex-direction: column; gap: 8px; padding-top: 14px; font-size: 9px; }
  .auth-layout { grid-template-columns: 1fr; gap: 0; width: min(440px, calc(100% - 36px)); align-content: center; }
  .auth-aside { min-height: auto; padding: 0 0 20px; }
  .auth-aside > div, .aside-foot { display: none; }
}
@media (max-width: 420px) {
  .guest-content { padding: 25px 21px; }
  .guest-brand { padding: 14px 15px; }
  .guest-brand .brand strong { font-size: 9px; }
  .secure-label { font-size: 8px; }
  .slot-number { width: 45px; min-width: 45px; height: 44px; }
  .slot-identity { min-width: 130px; }
  .slot-identity h3 { font-size: 15px; }
  .slot-actions .processing-copy small { font-size: 10px; }
  .slot-actions .switch { min-width: 55px; padding: 0 5px; }
  .slot-tools { grid-template-columns: minmax(0, 1fr) minmax(73px, .68fr) minmax(83px, .78fr); gap: 5px; }
  .slot-tools .button { padding: 0 5px; font-size: 11px; }
  .line-card { grid-template-columns: 38px minmax(0, 1fr); gap: 9px; padding: 11px; }
  .line-number { padding-right: 7px; }
  .line-number span { font-size: 9px; }
  .line-number b { font-size: 19px; }
  .identity-heading { gap: 5px; }
  .tag { gap: 5px; padding: 4px 6px; font-size: 9px; }
  .route-field select { padding-left: 8px; font-size: 12px; }
  .line-actions { grid-template-columns: 1fr; }
  .line-tools { grid-template-columns: minmax(83px, 1.3fr) minmax(53px, .75fr) minmax(75px, 1fr); gap: 5px; }
  .processing-copy b { font-size: 11px; }
  .processing-copy small { display: none; }
  .switch { min-width: 53px; height: 31px; gap: 4px; padding: 0 5px; font-size: 10px; }
  .line-tools .button { min-height: 38px; padding: 0 5px; font-size: 10px; }
  .queue-actions { grid-template-columns: minmax(0, 1fr) auto 32px; gap: 5px; }
  .queue-assign { padding: 0 8px; font-size: 11px; }
  .queue-remove { width: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}