:root {
  color: #ffffff;
  background: #061827;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: geometricPrecision;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body { overflow-x: hidden; }

button, input, select { font: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }

[hidden] { display: none !important; }

.receiver-shell {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: 24px 28px 18px;
  padding: max(24px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% -20%, rgba(84, 173, 255, .24), transparent 48%),
    linear-gradient(155deg, #0b314d 0%, #061827 54%, #082437 100%);
}

.receiver-shell::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: -2;
  opacity: .17;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
}

.aurora {
  position: absolute;
  z-index: -1;
  width: 55vw;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .22;
  animation: drift 16s ease-in-out infinite alternate;
}

.aurora-one { top: -28vw; left: -8vw; background: #54adff; }
.aurora-two { right: -20vw; bottom: -34vw; background: #4adfbf; animation-delay: -7s; }

@keyframes drift { to { transform: translate3d(8vw, 5vh, 0) scale(1.12); } }

.topbar, footer {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1480px;
  margin: 0 auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  font-size: 15px;
  font-weight: 720;
  letter-spacing: -.01em;
}

.brand-mark { position: relative; display: inline-flex; gap: 3px; align-items: end; width: 28px; height: 24px; padding: 5px; border-radius: 8px; background: linear-gradient(145deg, #54adff, #2cdab5); box-shadow: 0 7px 24px rgba(56, 160, 255, .34); }
.brand-mark span { width: 4px; border-radius: 4px; background: white; animation: signal 1.8s ease-in-out infinite; }
.brand-mark span:nth-child(1) { height: 7px; }
.brand-mark span:nth-child(2) { height: 13px; animation-delay: -.4s; }
.brand-mark span:nth-child(3) { height: 9px; animation-delay: -.8s; }
@keyframes signal { 50% { opacity: .45; transform: scaleY(.65); } }

.status-pill {
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 99px;
  color: #c9cee2;
  background: rgba(6, 35, 53, .68);
  backdrop-filter: blur(18px);
  font-size: 12px;
  font-weight: 680;
}

.status-pill[data-tone="ready"] { color: #bfffdc; border-color: rgba(76, 235, 155, .28); background: rgba(17, 67, 52, .4); }
.status-pill[data-tone="warning"] { color: #ffe0a7; border-color: rgba(255, 187, 75, .28); background: rgba(76, 48, 13, .4); }

.media-stage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  background: #020b12;
}

.media-stage video, .media-stage img, .media-stage embed { width: 100%; height: 100%; object-fit: contain; border: 0; }

.media-blank { display: grid; place-items: center; gap: 22px; color: #8990a9; text-align: center; }
.media-blank p { max-width: 360px; margin: 0; font-size: 14px; line-height: 1.55; }
.blank-rings { position: relative; width: 84px; height: 84px; border: 1px solid rgba(84, 173, 255, .28); border-radius: 50%; box-shadow: 0 0 50px rgba(56, 160, 255, .18), inset 0 0 34px rgba(44, 218, 181, .08); }
.blank-rings::before, .blank-rings::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.blank-rings::after { inset: 31px; background: linear-gradient(145deg, #54adff, #4adfbf); border: 0; box-shadow: 0 0 30px rgba(56, 160, 255, .45); }

.panel-stack {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  display: grid;
  place-items: center;
  min-height: calc(100vh - 150px);
  min-height: calc(100svh - 150px);
  max-width: 1480px;
  margin: 0 auto;
  pointer-events: none;
}

.receiver-shell[data-mode="connected"] .panel-stack { align-items: end; }

.glass-panel {
  width: 92vw;
  max-width: 1080px;
  width: min(1080px, 92vw);
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(20, 66, 94, .88), rgba(6, 30, 47, .82));
  box-shadow: 0 34px 100px rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(34px) saturate(135%);
}

.pairing-panel { display: flex; gap: 48px; align-items: center; padding: 44px; }
.pairing-panel .panel-copy { flex: 1 1 auto; min-width: 0; }
.pairing-panel .pairing-card { flex: 0 0 310px; }
.compact-panel { width: 92vw; max-width: 680px; padding: 44px; width: min(680px, 92vw); padding: clamp(34px, 5vw, 58px); }
.panel-copy h1, .compact-panel h1 { margin: 8px 0 20px; font-size: 58px; font-size: clamp(40px, 5.4vw, 76px); line-height: .98; letter-spacing: -.055em; }
.compact-panel h1 { font-size: 48px; font-size: clamp(38px, 4vw, 56px); }
.eyebrow { margin: 0; color: #54adff; font-size: 11px; font-weight: 780; letter-spacing: .16em; }
.lede { max-width: 600px; margin: 0; color: #acb3cb; font-size: 18px; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; }
.privacy-facts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.privacy-facts span { padding: 8px 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 99px; color: #cbd1e5; font-size: 11px; background: rgba(255,255,255,.035); }

.access-config { display: grid; gap: 14px; margin-top: 24px; padding: 17px; border: 1px solid rgba(84,173,255,.2); border-radius: 18px; background: rgba(3, 26, 42, .5); }
.access-config-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.access-config-heading div { display: grid; gap: 3px; }
.access-config-heading strong { font-size: 13px; }
.access-config-heading span { color: #91a9bb; font-size: 10px; }
.access-config select, .duration-label select { min-height: 38px; padding: 0 30px 0 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; color: white; background: #0b3853; }
.guest-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.guest-options fieldset { display: flex; flex-wrap: wrap; gap: 9px 13px; margin: 0; padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; }
.guest-options legend { padding: 0 5px; color: #8fb3c9; font-size: 10px; font-weight: 700; }
.guest-options label { color: #d9f5ff; font-size: 11px; }
.guest-options input { accent-color: #2cdab5; }
.duration-label { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #a9c2d2; font-size: 11px; }
.access-apply { justify-self: start; min-height: 38px; font-size: 11px; }

.pairing-card { display: grid; justify-items: center; padding: 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 27px; background: rgba(2, 4, 13, .48); }
.qr-shell { width: 270px; height: 270px; max-width: 58vw; max-height: 58vw; width: min(270px, 58vw); aspect-ratio: 1; padding: 16px; overflow: hidden; border-radius: 21px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.qr-shell svg { width: 100%; height: 100%; }
.pairing-label { margin: 20px 0 8px; color: #8189a2; font-size: 9px; font-weight: 760; letter-spacing: .18em; }
.pairing-pin { color: white; font-variant-numeric: tabular-nums; font-size: 46px; font-size: clamp(30px, 4vw, 46px); font-weight: 760; letter-spacing: .13em; }
.pairing-expiry { margin: 7px 0 0; color: #8f97ae; font-size: 11px; }
.pairing-access-summary { max-width: 270px; margin: 9px 0 0; color: #4adfbf; text-align: center; font-size: 10px; font-weight: 680; line-height: 1.45; }
.room-details { width: 100%; margin-top: 16px; color: #858da5; text-align: center; font-size: 10px; }
.room-details summary { cursor: pointer; }
.pairing-room { display: block; margin-top: 7px; color: #afb6ca; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }

.truth-grid, .connection-truth { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 28px 0; }
.truth-grid div, .connection-truth div { padding: 15px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: rgba(255,255,255,.035); }
.truth-grid dt, .connection-truth span { color: #858ea8; font-size: 10px; font-weight: 690; text-transform: uppercase; letter-spacing: .09em; }
.truth-grid dd, .connection-truth strong { display: block; margin: 5px 0 0; color: #f3f5ff; font-size: 14px; }

.button-row, .controls { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 0 19px; border: 1px solid transparent; border-radius: 13px; color: white; text-decoration: none; font-weight: 700; cursor: pointer; }
.button.primary { background: linear-gradient(145deg, #54adff, #38a0ff); box-shadow: 0 12px 35px rgba(56, 160, 255, .3); }
.button.secondary { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.06); }
.button.danger { margin-left: auto; border-color: rgba(255, 95, 124, .24); color: #ffd1da; background: rgba(125, 27, 49, .42); }
.button:disabled, .icon-button:disabled, select:disabled, input:disabled { opacity: .35; cursor: not-allowed; }

.reason-list { margin: 25px 0; padding-left: 20px; color: #c9cee0; line-height: 1.65; }

.connected-panel { align-self: end; width: min(1180px, 94vw); padding: 16px; border-radius: 22px; }
.connection-truth { grid-template-columns: repeat(4, minmax(130px, 1fr)); margin: 0 0 12px; }
.controls { padding: 3px; }
.icon-button { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; color: white; background: rgba(255,255,255,.07); cursor: pointer; }
.seek-label, .select-label { display: inline-flex; align-items: center; gap: 8px; color: #8f97af; font-size: 11px; font-weight: 670; }
.seek-label { flex: 1 1 180px; }
.seek-label input { width: 100%; accent-color: #2cdab5; }
.select-label select { min-height: 40px; padding: 0 31px 0 11px; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; color: white; background: #171b30; }

.error-overlay { position: fixed; z-index: 10; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); display: flex; align-items: start; gap: 18px; max-width: min(460px, calc(100vw - 48px)); padding: 19px; border: 1px solid rgba(255, 188, 92, .25); border-radius: 18px; background: rgba(35, 25, 20, .92); box-shadow: 0 22px 70px rgba(0,0,0,.45); backdrop-filter: blur(22px); }
.error-overlay h2 { margin: 5px 0; font-size: 18px; }
.error-overlay p:not(.eyebrow) { margin: 0; color: #c9c1ba; font-size: 13px; line-height: 1.5; }

footer { color: #747c95; font-size: 10px; }
footer span:last-child { text-align: right; }

@media (max-width: 760px) {
  .receiver-shell { padding-inline: 15px; }
  .pairing-panel { grid-template-columns: 1fr; gap: 30px; padding: 28px; }
  .panel-copy h1 { font-size: 42px; }
  .privacy-facts { margin-top: 20px; }
  .access-config-heading { align-items: stretch; flex-direction: column; }
  .guest-options { grid-template-columns: 1fr; }
  .duration-label { grid-column: auto; align-items: stretch; flex-direction: column; }
  .qr-shell { width: min(230px, 62vw); }
  .connection-truth { grid-template-columns: 1fr; }
  .button.danger { margin-left: 0; width: 100%; }
  footer { display: none; }
}

@supports (display: grid) {
  .pairing-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, .72fr);
    gap: clamp(42px, 7vw, 100px);
    padding: clamp(34px, 6vw, 76px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}