:root {
  color-scheme: dark;
  --navy: #0d2234;
  --navy-deep: #071723;
  --panel: #122b40;
  --panel-light: #17354d;
  --line: rgba(190, 218, 234, .16);
  --ink: #f3f8fb;
  --muted: #9fb4c4;
  --cyan: #55c9eb;
  --green: #55d69b;
  --coral: #f2836a;
  --yellow: #f0c75e;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--navy-deep); }
body { min-height: 100vh; margin: 0; color: var(--ink); background: radial-gradient(circle at 12% 6%, rgba(66,152,189,.16), transparent 34%), linear-gradient(145deg, #0d2437 0%, #081824 72%); }
button, input, select { font: inherit; }
button { color: inherit; }

.studio-header { min-height: 78px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px clamp(20px, 5vw, 72px); border-bottom: 1px solid var(--line); }
.studio-brand { display: flex; gap: 12px; align-items: center; color: var(--ink); text-decoration: none; }
.studio-brand > span:last-child { display: grid; gap: 1px; }
.studio-brand strong { font-size: 14px; letter-spacing: .01em; }
.studio-brand small { color: #88a5b9; font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.signal-mark { height: 30px; display: flex; gap: 3px; align-items: center; }
.signal-mark i { width: 3px; height: 12px; border-radius: 4px; background: var(--cyan); }
.signal-mark i:nth-child(2), .signal-mark i:nth-child(4) { height: 22px; }
.signal-mark i:nth-child(3) { height: 30px; }
.privacy-mark { display: inline-flex; align-items: center; gap: 8px; color: #9cb3c3; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.privacy-mark i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(85,214,155,.1); }

.guest-shell { width: min(1180px, calc(100% - 40px)); min-height: calc(100vh - 142px); display: grid; align-items: center; margin: 0 auto; padding: 50px 0; }
.guest-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr); gap: clamp(48px, 8vw, 110px); align-items: center; }
.stage-copy { max-width: 560px; }
.eyebrow { margin: 0 0 11px; color: #76cce6; font-size: 10px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { max-width: 700px; margin-bottom: 16px; font-size: clamp(38px, 5vw, 68px); line-height: .98; letter-spacing: -.055em; }
h2 { font-size: 20px; letter-spacing: -.025em; }
.intro { max-width: 580px; margin-bottom: 30px; color: #aec0cd; font-size: 15px; line-height: 1.65; }

.welcome-form { display: grid; gap: 11px; max-width: 470px; }
.welcome-form > label:first-child, .device-controls > label { color: #c5d3dc; font-size: 11px; font-weight: 750; }
.welcome-form > input, .device-controls select { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid #3b566a; border-radius: 9px; color: var(--ink); background: rgba(7,22,33,.62); outline: none; }
.welcome-form > input:focus, .device-controls select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(85,201,235,.13); }
.consent-row { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; margin: 4px 0 6px; color: #9eb2c1; font-size: 11px; line-height: 1.45; cursor: pointer; }
.consent-row input { width: 17px; height: 17px; margin: 0; accent-color: var(--cyan); }
.studio-button { min-height: 46px; padding: 0 18px; border: 1px solid transparent; border-radius: 9px; font-size: 12px; font-weight: 800; cursor: pointer; }
.studio-button.primary { color: #062031; background: var(--cyan); }
.studio-button.primary:hover:not(:disabled) { background: #7dd9f1; }
.studio-button.secondary { border-color: #496478; background: #153248; }
.studio-button.quiet { color: #a8bdcb; background: transparent; }
.studio-button:disabled { opacity: .5; cursor: wait; }
.welcome-note { display: flex; gap: 10px; max-width: 470px; margin-top: 20px; color: #86a0b2; }
.welcome-note > span { margin-top: 4px; color: var(--cyan); font-size: 8px; }
.welcome-note p { margin: 0; font-size: 10px; line-height: 1.55; }
.stage-error { min-height: 18px; margin: 13px 0 0; color: #ff9f8c; font-size: 11px; }

.arrival-card { padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(27,59,82,.88), rgba(12,36,53,.92)); box-shadow: 0 30px 70px rgba(0,0,0,.2); }
.arrival-card ol { display: grid; gap: 0; margin: 23px 0 0; padding: 0; list-style: none; }
.arrival-card li { position: relative; min-height: 84px; display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; color: #819cad; }
.arrival-card li:not(:last-child)::after { content: ""; position: absolute; top: 34px; bottom: 0; left: 16px; width: 1px; background: rgba(136,178,201,.22); }
.arrival-card li > span { z-index: 1; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #476579; border-radius: 50%; background: #102b3f; font-size: 10px; font-weight: 850; }
.arrival-card li > div { display: grid; gap: 5px; padding-top: 2px; }
.arrival-card strong { color: #c3d2dc; font-size: 12px; }
.arrival-card small { font-size: 10px; }
.arrival-card li.is-current > span { color: #062031; border-color: var(--cyan); background: var(--cyan); }
.arrival-card li.is-current strong { color: var(--ink); }

.device-stage { grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr); gap: clamp(38px, 6vw, 80px); }
.device-preview { position: relative; aspect-ratio: 16/10; overflow: hidden; border: 1px solid #29475d; border-radius: 16px; background: #050d13; box-shadow: 0 30px 70px rgba(0,0,0,.28); }
.device-preview video, .video-tile video { width: 100%; height: 100%; display: block; object-fit: contain; background: #050d14; }
.device-preview video, .video-tile.local-tile video { transform: scaleX(-1); }
.preview-label { position: absolute; top: 14px; left: 14px; display: inline-flex; gap: 7px; align-items: center; min-height: 27px; padding: 0 10px; border-radius: 999px; background: rgba(5,19,28,.8); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.preview-label span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.preview-placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; color: #7691a3; }
.preview-placeholder span { font-size: 32px; }
.preview-placeholder p { margin: 8px 0 0; font-size: 11px; }
.preview-reassurance { margin: 12px 4px 0; color: #859eaf; font-size: 10px; }
.preview-reassurance strong { color: var(--green); }
.device-controls { min-width: 0; }
.device-controls h1 { font-size: clamp(32px, 4vw, 50px); }
.device-controls > label { display: block; margin: 14px 0 7px; }
.device-controls select { min-height: 43px; font-size: 11px; }
.mic-meter { height: 5px; overflow: hidden; margin-top: 16px; border-radius: 5px; background: #213d52; }
.mic-meter span { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--yellow)); transition: width .08s linear; }
.device-state { min-height: 18px; margin: 9px 0 0; color: #8ba3b4; font-size: 10px; }
.device-error { margin-top: 14px; padding: 14px; border: 1px solid rgba(242,131,106,.35); border-radius: 9px; background: rgba(103,43,38,.28); }
.device-error strong { font-size: 11px; }
.device-error p { margin: 6px 0 12px; color: #d9b5ad; font-size: 10px; line-height: 1.5; }
.device-actions { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 22px; }

.room-stage { width: 100%; align-self: stretch; }
.room-topline { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 18px; }
.room-title-copy h1 { margin: 0; font-size: clamp(25px, 4vw, 40px); }
.broadcast-state { display: inline-flex; gap: 9px; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid #37556a; border-radius: 999px; color: #a9bdca; background: rgba(11,34,50,.7); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.broadcast-state span { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(85,214,155,.11); }
.broadcast-state.on-air { color: white; border-color: rgba(242,131,106,.55); background: rgba(107,39,30,.8); }
.broadcast-state.on-air span { background: var(--coral); box-shadow: 0 0 0 4px rgba(242,131,106,.14); }
.room-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: rgba(10,30,45,.75); box-shadow: 0 30px 80px rgba(0,0,0,.23); }
.video-grid { min-height: 470px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: center; padding: 8px; background: #050d14; }
.video-tile { position: relative; min-height: 210px; overflow: hidden; border-radius: 10px; background: #102535; }
.video-tile:only-child { grid-column: 1 / -1; min-height: 440px; }
.tile-footer { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 28px 13px 11px; background: linear-gradient(transparent, rgba(3,12,18,.85)); font-size: 10px; }
.tile-footer span { color: #9bb0bf; font-size: 9px; }
.green-room-panel { padding: 28px 24px; border-left: 1px solid var(--line); background: linear-gradient(180deg, #153149, #0f293c); }
.green-room-panel h2 { margin-bottom: 11px; }
.green-room-panel > p:not(.eyebrow) { color: #9eb2c0; font-size: 11px; line-height: 1.6; }
.connection-card { display: flex; gap: 11px; align-items: center; margin-top: 27px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(6,21,31,.25); }
.connection-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
.connection-dot.is-good { background: var(--green); }
.connection-dot.is-bad { background: var(--coral); }
.connection-card div { min-width: 0; display: grid; gap: 3px; }
.connection-card strong { font-size: 10px; }
.connection-card small { overflow: hidden; color: #7792a4; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.room-controls { width: fit-content; display: flex; gap: 8px; margin: 15px auto 0; padding: 7px; border: 1px solid var(--line); border-radius: 14px; background: rgba(8,25,37,.88); box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.room-controls button { min-width: 86px; min-height: 50px; display: grid; grid-template-columns: 18px 1fr; gap: 6px; place-items: center; padding: 0 12px; border: 0; border-radius: 9px; background: #17364e; font-size: 10px; cursor: pointer; }
.room-controls button.is-off { color: #ffb1a1; background: #572d2c; }
.room-controls .leave-control { background: transparent; color: #d5a69e; }

.message-stage { max-width: 620px; justify-self: center; padding: 50px; border: 1px solid var(--line); border-radius: 18px; background: rgba(15,41,60,.88); text-align: center; }
.message-symbol { margin-bottom: 20px; color: var(--cyan); font-size: 48px; }
.message-stage h1 { font-size: clamp(32px, 5vw, 50px); }
.message-stage p:not(.eyebrow) { color: #a6bac8; line-height: 1.6; }
.message-stage button { margin-top: 15px; }

.studio-footer { min-height: 64px; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 14px clamp(20px, 5vw, 72px); border-top: 1px solid var(--line); color: #6e899b; font-size: 9px; }

@media (max-width: 900px) {
  .guest-stage, .device-stage { grid-template-columns: 1fr; }
  .arrival-card { display: none; }
  .stage-copy { max-width: none; }
  .room-layout { grid-template-columns: 1fr; }
  .green-room-panel { border-top: 1px solid var(--line); border-left: 0; }
  .video-grid { min-height: 420px; }
}

@media (max-width: 600px) {
  .studio-header { min-height: 64px; padding: max(12px, env(safe-area-inset-top)) 16px 12px; }
  .privacy-mark { font-size: 8px; }
  .guest-shell { width: calc(100% - 28px); min-height: calc(100vh - 116px); padding: 28px 0; }
  h1 { font-size: 42px; }
  .intro { margin-bottom: 23px; font-size: 13px; }
  .welcome-form > input { min-height: 50px; font-size: 16px; }
  .device-stage { gap: 27px; }
  .device-preview { border-radius: 12px; }
  .device-controls h1 { font-size: 36px; }
  .device-controls select { font-size: 16px; }
  .device-actions { position: sticky; bottom: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: rgba(8,24,36,.92); backdrop-filter: blur(10px); }
  .room-topline { align-items: flex-start; flex-direction: column; }
  .broadcast-state { min-height: 34px; }
  .video-grid { min-height: 320px; grid-template-columns: 1fr; }
  .video-tile, .video-tile:only-child { min-height: 290px; grid-column: auto; }
  .green-room-panel { padding: 20px; }
  .room-controls { position: sticky; bottom: max(8px, env(safe-area-inset-bottom)); width: 100%; justify-content: center; }
  .room-controls button { min-width: 0; flex: 1; padding: 0 7px; }
  .message-stage { padding: 34px 22px; }
  .studio-footer { min-height: 52px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
  .studio-footer span:last-child { display: none; }
}

@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-height: 700px) and (max-width: 1100px) {
  body { min-height: 100svh; }
  .studio-header {
    min-height: 48px;
    padding: max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  }
  .signal-mark { height: 24px; }
  .signal-mark i:nth-child(2), .signal-mark i:nth-child(4) { height: 18px; }
  .signal-mark i:nth-child(3) { height: 24px; }
  .privacy-mark { display: none; }
  .guest-shell {
    width: auto;
    min-height: calc(100svh - 48px);
    align-items: start;
    margin: 0;
    padding: 10px max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }
  .guest-stage { gap: 16px; }
  .welcome-stage { max-width: 720px; margin: auto; }
  .welcome-stage h1 { margin-bottom: 10px; font-size: 34px; }
  .welcome-stage .intro { margin-bottom: 14px; line-height: 1.45; }
  .welcome-note { margin-top: 12px; }
  .device-stage {
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
    gap: 20px;
    align-items: start;
  }
  .device-preview { max-height: calc(100svh - 78px); aspect-ratio: 16 / 9; border-radius: 11px; }
  .preview-reassurance { margin-top: 6px; }
  .device-controls h1 { margin-bottom: 8px; font-size: 26px; }
  .device-controls .intro { margin-bottom: 8px; font-size: 11px; line-height: 1.4; }
  .device-controls > label { margin: 7px 0 4px; }
  .device-controls select { min-height: 44px; }
  .mic-meter { margin-top: 9px; }
  .device-state { margin-top: 5px; }
  .device-actions { margin-top: 9px; }
  .room-topline { margin-bottom: 8px; }
  .room-title-copy .eyebrow { margin-bottom: 4px; }
  .room-title-copy h1 { font-size: 22px; }
  .broadcast-state { min-height: 32px; padding: 0 11px; font-size: 9px; }
  .room-layout { grid-template-columns: minmax(0, 1fr) minmax(185px, 26vw); border-radius: 11px; }
  .video-grid { min-height: 190px; height: calc(100svh - 170px); padding: 4px; gap: 4px; }
  .video-tile, .video-tile:only-child { min-height: 0; height: 100%; grid-column: auto; border-radius: 7px; }
  .green-room-panel {
    max-height: calc(100svh - 170px);
    overflow: auto;
    padding: 14px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .green-room-panel .eyebrow { margin-bottom: 7px; }
  .green-room-panel h2 { margin-bottom: 7px; font-size: 15px; }
  .green-room-panel > p:not(.eyebrow) { margin-bottom: 8px; font-size: 10px; line-height: 1.4; }
  .connection-card { margin-top: 10px; padding: 9px; }
  .room-controls {
    position: sticky;
    bottom: max(4px, env(safe-area-inset-bottom));
    margin-top: 7px;
    padding: 4px;
    border-radius: 11px;
  }
  .room-controls button { min-width: 76px; min-height: 44px; padding: 0 9px; }
  .studio-footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}