:root {
  color-scheme: dark;
  --bg: #07111f;
  --panel: #0f1d32;
  --panel-2: #162944;
  --text: #f6efe3;
  --muted: #b9c2d2;
  --gold: #d8b56d;
  --aqua: #62d7c8;
  --danger: #ff8f8f;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top left, #18395c 0, transparent 36rem), var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; }
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(7,17,31,.82);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 2;
}
.brand { display: inline-flex; gap: .75rem; align-items: center; text-decoration: none; }
.brand small { display: block; color: var(--muted); font-size: .75rem; }
.brand-mark { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--aqua)); color: #09111d; font-weight: 900; }
nav { display: flex; gap: .8rem; flex-wrap: wrap; color: var(--muted); font-size: .92rem; }
nav a { text-decoration: none; }
main { padding: clamp(1.5rem, 4vw, 4rem); max-width: 1200px; margin: 0 auto; }
.eyebrow { color: var(--gold); letter-spacing: .18em; text-transform: uppercase; font-size: .78rem; }
h1 { font-size: clamp(2rem, 5vw, 4.8rem); line-height: .96; margin: 0 0 1rem; }
p { color: var(--muted); line-height: 1.6; }
.hero, .panel, .auth-card, .display-wall {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(15,29,50,.94), rgba(10,18,32,.94));
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  padding: clamp(1.25rem, 4vw, 3rem);
}
.hero p { max-width: 48rem; font-size: 1.2rem; }
.actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.button, button {
  border: 0;
  border-radius: 999px;
  padding: .85rem 1.15rem;
  background: var(--gold);
  color: #09111d;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.button.secondary { background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,.2); }
button:disabled { opacity: .6; cursor: progress; }
label { display: grid; gap: .4rem; color: var(--muted); margin: 1rem 0; max-width: 28rem; }
input, select {
  width: 100%;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  background: #09172a;
  color: var(--text);
  padding: .9rem 1rem;
}
.error { color: var(--danger); }
.status { margin-top: 1rem; color: var(--aqua); }
.control-list, .health-list { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.5rem 0; padding: 0; }
.health-list li { list-style: none; padding: .75rem 1rem; border-radius: 18px; background: rgba(255,255,255,.07); }
.seat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.seat {
  min-height: 14rem;
  border-radius: 26px;
  padding: 1rem;
  background: var(--panel-2);
  border: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.seat span { color: var(--gold); text-transform: uppercase; font-size: .78rem; letter-spacing: .12em; }
.seat.occupied { outline: 3px solid rgba(98,215,200,.45); }
.seat.speaking { box-shadow: 0 0 0 5px rgba(216,181,109,.25); }
.media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.media-tile, .participant-card {
  border-radius: 20px;
  min-height: 10rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  overflow: hidden;
  padding: 1rem;
}
.media-tile video { width: 100%; border-radius: 16px; background: #000; }
.media-tile audio { width: 100%; }
.media-tile span, .participant-card span { display: block; color: var(--muted); margin-top: .5rem; }
.display-page main { max-width: 1600px; }
.display-page h1 { text-align: center; }
.display-page .topbar nav { display: none; }
.vela-display-qa,
.session-stage-rail [data-display-qa] {
  display: grid;
  gap: .2rem;
  margin: .55rem 0 0;
  padding: .45rem .7rem;
  border: 1px solid rgba(137, 148, 170, .28);
  border-radius: 12px;
  background: rgba(17, 23, 34, .55);
}
.vela-display-qa [data-display-qa-label],
[data-display-qa] [data-display-qa-label] {
  margin: 0;
  color: var(--vela-muted, #8b93a7);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vela-display-qa [data-display-qa-lifted]:not([hidden]),
[data-display-qa] [data-display-qa-lifted]:not([hidden]) {
  margin: 0;
  color: #f4f6fb;
  font-size: 1.05rem;
}
.vela-room-panel-device-head {
  margin: 0 0 .85rem;
  padding: 0 0 .75rem;
  border-bottom: 1px solid rgba(213, 231, 243, .12);
}
.vela-room-panel-device-head .eyebrow {
  margin: 0 0 .3rem;
  color: var(--vela-green, #4de2af);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vela-room-panel-device-head h1 { margin: 0 0 .25rem; font-size: 1.55rem; }
.vela-room-panel-device-head p { margin: .15rem 0; color: var(--vela-muted, #93a3a1); font-size: .88rem; }
.vela-room-panel-device-head [data-room-panel-session-state] { color: var(--vela-text, #f4f6fb); font-weight: 750; }
.vela-room-panel-device-head [data-commissioned-honesty] { font-size: .74rem; }
.vela-display-destinations {
  margin: 0 0 .85rem;
  padding: .55rem .7rem .65rem;
  border: 1px solid rgba(213, 231, 243, .12);
  border-radius: 8px;
  background: rgba(11, 16, 24, .45);
}
.vela-display-destinations .eyebrow {
  margin: 0 0 .25rem;
  color: var(--vela-green, #4de2af);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vela-display-destinations [data-display-destination-honesty] {
  margin: 0 0 .45rem;
  color: var(--vela-muted, #93a3a1);
  font-size: .74rem;
}
.vela-display-destination-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.vela-display-destination-list a,
.vela-display-destination-list span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: .25rem .55rem;
  border: 1px solid rgba(77, 226, 175, .28);
  border-radius: 6px;
  background: rgba(77, 226, 175, .08);
  color: var(--vela-text, #f4f6fb);
  font-size: .78rem;
  font-weight: 750;
  text-decoration: none;
}
.vela-display-destination-list [data-display-destination-current="true"] {
  border-color: var(--vela-lime, #b6ff2e);
  background: rgba(182, 255, 46, .14);
}
.spatial-wall-furniture[data-spatial-destination-active="true"] .install-layout-icon rect,
.spatial-wall-furniture[data-spatial-destination-active="true"] .install-layout-icon line {
  stroke: var(--vela-lime, #b6ff2e);
}
.vela-display-head [data-display-destination-label] {
  margin: .2rem 0 0;
  color: var(--vela-text, #f4f6fb);
  font-weight: 750;
}
.vela-room-panel-lesson {
  display: grid;
  gap: .7rem;
  margin: .85rem 0 1rem;
}
.vela-room-panel-qa {
  display: grid;
  gap: .2rem;
  padding: .55rem .75rem;
  border: 1px solid rgba(137, 148, 170, .28);
  border-radius: 12px;
  background: rgba(17, 23, 34, .55);
}
.vela-room-panel-qa [data-room-panel-qa-label] {
  margin: 0;
  color: var(--vela-muted, #8b93a7);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vela-room-panel-qa [data-room-panel-qa-lifted]:not([hidden]) {
  margin: 0;
  color: #f4f6fb;
  font-size: 1.05rem;
}
.vela-room-panel-whiteboard {
  min-height: 8rem;
  border: 1px solid rgba(137, 148, 170, .22);
  border-radius: 12px;
  overflow: hidden;
  background: #111722;
}
.room:not([hidden]) {
  margin-top: 1.5rem;
  display: grid;
  gap: 1.25rem;
}
.self-camera {
  display: grid;
  gap: .5rem;
  background: rgba(15,29,50,.85);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 1rem;
}
.self-camera video {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 14px;
}
.self-camera video:empty, .self-camera video[data-empty="true"] { background: #000; }
.self-label { color: var(--gold); text-transform: uppercase; font-size: .78rem; letter-spacing: .12em; }
.control-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.control-bar button {
  background: rgba(255,255,255,.1);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.18);
}
.control-bar button:hover { background: rgba(255,255,255,.18); }
.control-bar button[aria-pressed="true"] {
  background: var(--gold);
  color: #09111d;
  border-color: transparent;
}
.control-bar button.leave {
  margin-left: auto;
  background: rgba(255,143,143,.18);
  color: #ffcfcf;
  border-color: rgba(255,143,143,.4);
}
.control-bar button.leave:hover { background: rgba(255,143,143,.32); }
.rooms {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 .5rem;
}
.rooms th {
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  padding: .25rem .75rem;
}
.rooms td {
  background: rgba(255,255,255,.06);
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: .85rem .75rem;
  vertical-align: middle;
}
.rooms td:first-child { border-left: 1px solid rgba(255,255,255,.1); border-radius: 16px 0 0 16px; }
.rooms td:last-child { border-right: 1px solid rgba(255,255,255,.1); border-radius: 0 16px 16px 0; }
.rooms .actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 0; }
.participants { background: rgba(15,29,50,.85); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 1rem 1.25rem; }
.participants h2 { font-size: 1rem; margin: 0 0 .5rem; color: var(--gold); text-transform: uppercase; letter-spacing: .12em; }
.participants ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.participants li { padding: .55rem .8rem; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.participants li.local { border-color: var(--gold); background: rgba(216,181,109,.18); }
.participants li.speaking { box-shadow: 0 0 0 2px var(--aqua); }
.participants li.empty { color: var(--muted); border-style: dashed; }
.seat-label { color: var(--muted); }
.seat-label span { color: var(--text); font-weight: 700; margin-left: .25rem; }
@media (max-width: 760px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .seat-grid { grid-template-columns: 1fr 1fr; }
  .control-bar button.leave { margin-left: 0; }
  .rooms { display: block; border-spacing: 0; }
  .rooms thead { display: none; }
  .rooms tbody { display: grid; gap: .85rem; }
  .rooms tr {
    display: grid;
    gap: .55rem;
    padding: .85rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: rgba(255,255,255,.06);
  }
  .rooms td {
    display: grid;
    grid-template-columns: minmax(5.5rem, 36%) 1fr;
    gap: .75rem;
    align-items: center;
    padding: 0;
    background: transparent;
    border: 0;
  }
  .rooms td:first-child, .rooms td:last-child { border: 0; border-radius: 0; }
  .rooms td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .rooms .actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: .45rem;
  }
  .rooms .actions::before { align-self: center; }
  .rooms .actions .button, .rooms .actions button { width: 100%; text-align: center; }
}

body.proposal-demo {
  min-height: 100vh;
  background:
    radial-gradient(circle at 14% 8%, rgba(98, 215, 200, .16), transparent 30rem),
    radial-gradient(circle at 84% 2%, rgba(216, 181, 109, .16), transparent 28rem),
    linear-gradient(180deg, #07111f 0%, #030713 100%);
}
body.proposal-demo .topbar { display: none; }
body.proposal-demo main { max-width: none; }
.proposal-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .85rem clamp(1rem, 2.8vw, 3rem);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(3, 7, 19, .78);
  backdrop-filter: blur(18px);
}
.proposal-brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
}
.proposal-brand span {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .9rem;
  background: linear-gradient(145deg, #e9f6ff, #62d7c8 56%, #d8b56d);
  color: #06101f;
  letter-spacing: -.08em;
}
.proposal-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
  color: rgba(246, 239, 227, .72);
  font-size: .88rem;
}
.proposal-nav a {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .48rem .72rem;
  text-decoration: none;
  white-space: nowrap;
}
.proposal-nav a:hover,
.proposal-nav-signin {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.proposal-shell {
  width: min(1440px, calc(100vw - 2rem));
  margin: 0 auto;
  padding: clamp(1.1rem, 2.4vw, 3rem) 0 clamp(3rem, 6vw, 6rem);
}
.proposal-eyebrow,
.proposal-card > span,
.proposal-demo-note {
  color: var(--gold);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 900;
}
.proposal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .75fr);
  gap: clamp(1.2rem, 3vw, 3rem);
  align-items: stretch;
  min-height: min(720px, calc(100vh - 8rem));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: clamp(24px, 3vw, 44px);
  padding: clamp(1.4rem, 4vw, 4rem);
  background: linear-gradient(145deg, rgba(17, 31, 52, .9), rgba(4, 10, 22, .92));
  box-shadow: 0 30px 90px rgba(0,0,0,.34);
}
.proposal-hero h1,
.proposal-page-head h1 {
  max-width: 11ch;
  font-size: clamp(2.8rem, 7.6vw, 7.8rem);
  line-height: .86;
  letter-spacing: -.08em;
  margin: .35rem 0 1rem;
}
.proposal-hero-copy,
.proposal-page-head p {
  max-width: 48rem;
  font-size: clamp(1.05rem, 1.45vw, 1.45rem);
}
.proposal-actions,
.proposal-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.4rem;
}
.proposal-proof-strip,
.proposal-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
  margin: clamp(1.25rem, 3vw, 2.5rem) 0 0;
}
.proposal-proof-strip div,
.proposal-metrics article,
.proposal-card,
.proposal-live-wall,
.proposal-page-head aside,
.proposal-cta {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.proposal-proof-strip div,
.proposal-metrics article { padding: .85rem 1rem; }
.proposal-proof-strip dt,
.proposal-metrics strong {
  display: block;
  color: #fff;
  font-size: clamp(1.3rem, 2.2vw, 2.3rem);
  font-weight: 950;
}
.proposal-proof-strip dd,
.proposal-metrics span,
.proposal-metrics small { margin: 0; color: var(--muted); }
.proposal-live-wall {
  min-height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(5rem, 1fr);
  gap: .75rem;
  padding: .85rem;
  background:
    radial-gradient(circle at 50% 40%, rgba(98, 215, 200, .18), transparent 16rem),
    rgba(0,0,0,.22);
}
.proposal-live-wall span,
.proposal-live-wall strong {
  display: grid;
  place-items: end start;
  border-radius: 20px;
  padding: .9rem;
  color: #fff;
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.045));
}
.proposal-live-wall span { color: var(--gold); text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; }
.proposal-section,
.proposal-cta { margin-top: clamp(1rem, 2.2vw, 2rem); }
.proposal-section h2,
.proposal-cta h2 { font-size: clamp(2rem, 4vw, 4.5rem); line-height: .95; letter-spacing: -.06em; margin: .2rem 0 1rem; }
.proposal-route-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}
.proposal-card {
  display: grid;
  gap: .5rem;
  padding: 1rem;
  color: inherit;
  text-decoration: none;
  min-height: 12rem;
}
.proposal-card h3 { margin: 0; font-size: clamp(1.2rem, 1.7vw, 1.65rem); }
.proposal-card p { margin: 0; }
.proposal-demo-badge {
  justify-self: start;
  align-self: end;
  border: 1px solid rgba(216,181,109,.35);
  border-radius: 999px;
  padding: .32rem .58rem;
  color: #ffe9b6;
  background: rgba(216,181,109,.11);
  font-size: .72rem;
  font-weight: 900;
}
.proposal-demo-badge[data-demo-state="live"] {
  border-color: rgba(98,215,200,.45);
  color: #c6fff6;
  background: rgba(98,215,200,.12);
}
.proposal-page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .32fr);
  gap: 1rem;
  align-items: end;
  padding: clamp(1.2rem, 3vw, 3rem);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 36px;
  background: linear-gradient(145deg, rgba(16, 31, 52, .9), rgba(4, 10, 22, .92));
}
.proposal-page-head aside { display: grid; gap: .35rem; padding: 1rem; }
.proposal-page-head aside strong { font-size: 1.25rem; }
.proposal-page-head aside span { color: var(--muted); }
.proposal-cta { padding: clamp(1.2rem, 3vw, 3rem); }
@media (min-width: 1800px) {
  .proposal-shell { width: min(1760px, calc(100vw - 4rem)); }
  .proposal-route-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .proposal-hero { min-height: min(860px, calc(100vh - 9rem)); }
}
@media (max-width: 980px) {
  .proposal-hero,
  .proposal-page-head { grid-template-columns: 1fr; }
  .proposal-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proposal-proof-strip,
  .proposal-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .proposal-topbar { align-items: flex-start; flex-direction: column; }
  .proposal-nav { justify-content: flex-start; overflow-x: auto; width: 100%; padding-bottom: .15rem; }
  .proposal-shell { width: min(100% - 1rem, 720px); }
  .proposal-route-grid,
  .proposal-proof-strip,
  .proposal-metrics { grid-template-columns: 1fr; }
  .proposal-hero h1,
  .proposal-page-head h1 { max-width: none; }
}

/* ITER-020 visual correction: align proposal shell with the evaluated Vela-style
   direction (dark cinematic surfaces, electric-lime signature accent, compact
   marketing nav, Fraunces-like display rhythm, and a presence-grid hero). */
body.proposal-demo {
  --v-bg: #0B0E13;
  --v-panel: #12161F;
  --v-elevated: #1A2029;
  --v-inset: #0E121A;
  --v-stroke: #232B37;
  --v-stroke-soft: #1B222D;
  --v-stroke-strong: #33404F;
  --v-glass: rgba(20, 26, 36, .62);
  --v-glass-stroke: rgba(255,255,255,.08);
  --v-text: #EEF2F6;
  --v-secondary: #B7C0CE;
  --v-muted: #8A94A6;
  --v-accent: #C7F94A;
  --v-accent-bright: #D6FF6B;
  --v-accent-dim: #9BC431;
  --v-accent-ghost: rgba(199,249,74,.12);
  --v-accent-ghost-hi: rgba(199,249,74,.20);
  --v-accent-glow: rgba(199,249,74,.45);
  --v-live: #FF5C5C;
  --v-ok: #52D6A0;
  background: var(--v-bg);
  color: var(--v-text);
  font-family: Geist, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.proposal-demo::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 440px at 24% 8%, rgba(199,249,74,.115), transparent 60%),
    radial-gradient(620px 360px at 86% 18%, rgba(90,169,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 24rem);
}
body.proposal-demo main { max-width: none; }
body.proposal-demo .button,
body.proposal-demo button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.25rem;
  border-radius: 10px;
  background: var(--v-accent);
  color: #0B0E13;
  border: 1px solid transparent;
  box-shadow: 0 0 0 1px var(--v-accent-ghost-hi), 0 0 28px -4px var(--v-accent-glow);
  font-size: .88rem;
  font-weight: 750;
  letter-spacing: .01em;
}
body.proposal-demo .button.secondary {
  background: var(--v-elevated);
  color: var(--v-text);
  border-color: var(--v-stroke);
  box-shadow: none;
}
body.proposal-demo .proposal-topbar {
  width: min(1200px, calc(100vw - 3rem));
  margin: 0 auto;
  padding: 1rem 0;
  gap: 1.5rem;
  background: linear-gradient(var(--v-bg), rgba(11,14,19,.42));
  border-bottom: 1px solid var(--v-stroke-soft);
  backdrop-filter: blur(12px);
}
body.proposal-demo .proposal-brand {
  color: var(--v-text);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
body.proposal-demo .proposal-brand span {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 11px;
  background: var(--v-accent);
  color: #0B0E13;
  box-shadow: 0 0 30px -10px var(--v-accent);
}
body.proposal-demo .proposal-nav {
  gap: clamp(.75rem, 1.55vw, 1.5rem);
  color: var(--v-secondary);
  font-size: .86rem;
}
body.proposal-demo .proposal-nav a {
  padding: .35rem 0;
  border: 1px solid transparent;
}
body.proposal-demo .proposal-nav a:hover { color: var(--v-text); }
body.proposal-demo .proposal-nav-signin {
  padding: .48rem .82rem !important;
  border-color: var(--v-stroke) !important;
  background: var(--v-elevated);
}
body.proposal-demo .proposal-shell {
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100vw - 3rem));
  padding: clamp(2.25rem, 5vw, 5.5rem) 0 clamp(4rem, 7vw, 7rem);
}
body.proposal-demo .proposal-eyebrow,
body.proposal-demo .proposal-card > span,
body.proposal-demo .proposal-demo-note {
  color: var(--v-accent);
  font-family: "Geist Mono", "SFMono-Regular", ui-monospace, monospace;
  font-size: .68rem;
  font-weight: 700;
}
body.proposal-demo .proposal-hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
  gap: clamp(2.25rem, 4vw, 4.5rem);
  align-items: center;
  min-height: min(680px, calc(100vh - 8rem));
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
body.proposal-demo .proposal-hero h1,
body.proposal-demo .proposal-page-head h1,
body.proposal-demo .proposal-section h2,
body.proposal-demo .proposal-cta h2 {
  font-family: Fraunces, "Iowan Old Style", Georgia, serif;
  font-weight: 360;
  line-height: 1.03;
  letter-spacing: -.045em;
}
body.proposal-demo .proposal-hero h1,
body.proposal-demo .proposal-page-head h1 {
  max-width: 12ch;
  font-size: clamp(3rem, 6vw, 5.7rem);
  margin: 1rem 0 1.1rem;
}
body.proposal-demo .proposal-hero-copy,
body.proposal-demo .proposal-page-head p {
  max-width: 34rem;
  color: var(--v-secondary);
  font-size: clamp(1.02rem, 1.3vw, 1.16rem);
  line-height: 1.65;
}
body.proposal-demo .proposal-proof-strip,
body.proposal-demo .proposal-metrics {
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
body.proposal-demo .proposal-proof-strip div,
body.proposal-demo .proposal-metrics article {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.proposal-demo .proposal-proof-strip dt,
body.proposal-demo .proposal-metrics strong {
  color: var(--v-text);
  font-family: "Geist Mono", "SFMono-Regular", ui-monospace, monospace;
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  font-weight: 550;
}
body.proposal-demo .proposal-proof-strip dd,
body.proposal-demo .proposal-metrics span,
body.proposal-demo .proposal-metrics small {
  color: var(--v-muted);
  font-size: .78rem;
}
body.proposal-demo .proposal-live-wall {
  position: relative;
  display: block;
  min-height: 31rem;
  padding: 1rem;
  border: 1px solid var(--v-glass-stroke);
  border-radius: 28px;
  background: var(--v-glass);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  overflow: hidden;
}
body.proposal-demo .proposal-live-wall::before {
  content: 'LIVE SESSION';
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  padding: .32rem .62rem;
  border-radius: 999px;
  background: rgba(255,92,92,.14);
  color: var(--v-live);
  font-family: "Geist Mono", monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  font-weight: 700;
}
body.proposal-demo .proposal-live-wall::after {
  content: 'Recording · 342 attendees · Operator online';
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  padding: .62rem .8rem;
  border-radius: 14px;
  background: var(--v-panel);
  border: 1px solid var(--v-stroke);
  color: var(--v-secondary);
  font-size: .75rem;
}
body.proposal-demo .proposal-live-wall span,
body.proposal-demo .proposal-live-wall strong {
  position: absolute;
  display: grid;
  align-content: end;
  min-height: 7rem;
  border-radius: 14px;
  padding: .9rem;
  color: var(--v-text);
  background: linear-gradient(160deg, #1a2230, #0e131c);
  border: 1px solid var(--v-stroke);
  overflow: hidden;
}
body.proposal-demo .proposal-live-wall span::before,
body.proposal-demo .proposal-live-wall strong::before {
  content: '';
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #465a3a, #232e1e);
  box-shadow: inset 0 -14px 24px rgba(0,0,0,.35);
  margin: 0 auto .7rem;
}
body.proposal-demo .proposal-live-wall strong:nth-of-type(1) {
  inset: 4.5rem 35% auto 1rem;
  min-height: 14rem;
  border-color: var(--v-accent-dim);
  box-shadow: 0 0 0 1px var(--v-accent-ghost-hi), 0 0 28px -4px var(--v-accent-glow);
}
body.proposal-demo .proposal-live-wall strong:nth-of-type(2) { top: 4.5rem; right: 1rem; width: 31%; min-height: 8rem; }
body.proposal-demo .proposal-live-wall strong:nth-of-type(3) { left: 1rem; bottom: 5rem; width: 27%; min-height: 8rem; }
body.proposal-demo .proposal-live-wall strong:nth-of-type(4) { left: 31%; bottom: 5rem; width: 23%; min-height: 8rem; }
body.proposal-demo .proposal-live-wall strong:nth-of-type(5) { right: 1rem; top: 14rem; width: 31%; min-height: 8rem; }
body.proposal-demo .proposal-live-wall strong:nth-of-type(6) { right: 1rem; bottom: 5rem; width: 31%; min-height: 8rem; }
body.proposal-demo .proposal-live-wall span:nth-of-type(1) {
  right: 1rem;
  top: 1rem;
  min-height: auto;
  color: var(--v-live);
  background: rgba(255,92,92,.14);
  border: 0;
  border-radius: 999px;
  padding: .36rem .65rem;
  font-family: "Geist Mono", monospace;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
body.proposal-demo .proposal-live-wall span:nth-of-type(1)::before,
body.proposal-demo .proposal-live-wall span:nth-of-type(2)::before { content: none; }
body.proposal-demo .proposal-live-wall span:nth-of-type(2) {
  left: 7.5rem;
  top: 1rem;
  min-height: auto;
  color: var(--v-accent);
  background: var(--v-accent-ghost);
  border-color: var(--v-accent-ghost-hi);
  border-radius: 999px;
  padding: .36rem .65rem;
  font-family: "Geist Mono", monospace;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
/* Keep the hero wall cinematic without making the tiles look accidentally stacked. */
body.proposal-demo .proposal-live-wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto minmax(9.5rem, 1.35fr) minmax(7rem, 1fr) minmax(6.25rem, .85fr) auto;
  gap: .75rem;
}
body.proposal-demo .proposal-live-wall::before,
body.proposal-demo .proposal-live-wall::after,
body.proposal-demo .proposal-live-wall span,
body.proposal-demo .proposal-live-wall strong {
  position: relative;
  inset: auto;
  width: auto;
  right: auto;
  left: auto;
  top: auto;
  bottom: auto;
}
body.proposal-demo .proposal-live-wall::before { grid-column: 1; grid-row: 1; justify-self: start; }
body.proposal-demo .proposal-live-wall span:nth-of-type(1) { display: none; }
body.proposal-demo .proposal-live-wall span:nth-of-type(2) { grid-column: 2 / 4; grid-row: 1; justify-self: start; }
body.proposal-demo .proposal-live-wall strong:nth-of-type(1) { grid-column: 1 / 3; grid-row: 2 / 4; min-height: 100%; }
body.proposal-demo .proposal-live-wall strong:nth-of-type(2) { grid-column: 3; grid-row: 2; min-height: 100%; }
body.proposal-demo .proposal-live-wall strong:nth-of-type(3) { grid-column: 1; grid-row: 4; min-height: 100%; }
body.proposal-demo .proposal-live-wall strong:nth-of-type(4) { grid-column: 2; grid-row: 4; min-height: 100%; }
body.proposal-demo .proposal-live-wall strong:nth-of-type(5) { grid-column: 3; grid-row: 3; min-height: 100%; }
body.proposal-demo .proposal-live-wall strong:nth-of-type(6) { grid-column: 3; grid-row: 4; min-height: 100%; }
body.proposal-demo .proposal-live-wall::after { grid-column: 1 / 4; grid-row: 5; justify-self: end; }
body.proposal-demo .proposal-presence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto minmax(8.8rem, 1fr) minmax(8.8rem, 1fr) minmax(6.3rem, .72fr) auto;
  gap: .75rem;
}
body.proposal-demo .proposal-presence-grid::before,
body.proposal-demo .proposal-presence-grid::after { content: none; }
body.proposal-demo .proposal-wall-badges {
  grid-column: 1 / 4;
  display: flex;
  align-items: center;
  gap: .45rem;
}
body.proposal-demo .proposal-wall-badges span,
body.proposal-demo .proposal-wall-status {
  position: static;
  display: inline-flex;
  align-items: center;
  min-height: auto;
  border-radius: 999px;
  padding: .36rem .65rem;
  font-family: "Geist Mono", monospace;
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.proposal-demo .proposal-wall-badges span { background: var(--v-accent-ghost); border: 1px solid var(--v-accent-ghost-hi); color: var(--v-accent); }
body.proposal-demo .proposal-wall-badges span:first-child,
body.proposal-demo .proposal-wall-badges span:last-child { background: rgba(255,92,92,.14); border-color: transparent; color: var(--v-live); }
body.proposal-demo .proposal-video-tile {
  display: grid;
  align-content: end;
  min-height: 100%;
  border-radius: 14px;
  padding: .9rem;
  color: var(--v-text);
  background: linear-gradient(160deg, #1a2230, #0e131c);
  border: 1px solid var(--v-stroke);
  overflow: hidden;
}
body.proposal-demo .proposal-video-tile i {
  display: block;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #465a3a, #232e1e);
  box-shadow: inset 0 -14px 24px rgba(0,0,0,.35);
  margin: 0 auto .75rem;
}
body.proposal-demo .proposal-live-wall .proposal-video-tile strong {
  position: static !important;
  inset: auto !important;
  display: block !important;
  min-height: 0 !important;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--v-text) !important;
  font-size: 1rem;
  line-height: 1.2;
  overflow: visible;
}
body.proposal-demo .proposal-live-wall .proposal-video-tile strong::before { content: none; }
body.proposal-demo .proposal-video-tile-large {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
  border-color: var(--v-accent-dim);
  box-shadow: 0 0 0 1px var(--v-accent-ghost-hi), 0 0 28px -4px var(--v-accent-glow);
}
body.proposal-demo .proposal-video-tile-large i { width: 38%; }
body.proposal-demo .proposal-wall-status {
  grid-column: 1 / 4;
  justify-self: end;
  color: var(--v-secondary);
  background: var(--v-panel);
  border: 1px solid var(--v-stroke);
  text-transform: none;
  letter-spacing: 0;
}
body.proposal-demo .proposal-section,
body.proposal-demo .proposal-cta { margin-top: clamp(4rem, 8vw, 7rem); }
body.proposal-demo .proposal-section h2,
body.proposal-demo .proposal-cta h2 {
  max-width: 13ch;
  font-size: clamp(2.2rem, 4.2vw, 4.2rem);
  margin: .75rem 0 2rem;
}
body.proposal-demo .proposal-route-grid { gap: 1.25rem; }
body.proposal-demo .proposal-card,
body.proposal-demo .proposal-page-head aside,
body.proposal-demo .proposal-cta {
  border: 1px solid var(--v-stroke);
  border-radius: 20px;
  background: var(--v-panel);
  box-shadow: none;
}
body.proposal-demo .proposal-card {
  gap: .65rem;
  padding: 1.45rem;
  min-height: 13.5rem;
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
body.proposal-demo .proposal-card:hover {
  border-color: var(--v-stroke-strong);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
body.proposal-demo .proposal-card h3 { font-size: 1.3rem; line-height: 1.25; }
body.proposal-demo .proposal-card p { color: var(--v-muted); font-size: .9rem; line-height: 1.55; }
body.proposal-demo .proposal-demo-badge {
  border-color: var(--v-accent-ghost-hi);
  color: var(--v-accent);
  background: var(--v-accent-ghost);
}
body.proposal-demo .proposal-demo-badge[data-demo-state="live"] {
  border-color: transparent;
  color: var(--v-ok);
  background: rgba(82,214,160,.14);
}
body.proposal-demo .proposal-page-head {
  border-color: var(--v-stroke);
  border-radius: 28px;
  background: linear-gradient(160deg, var(--v-panel), var(--v-bg));
}
body.proposal-demo .proposal-metrics article {
  padding: 1.2rem;
  border: 1px solid var(--v-stroke);
  border-radius: 20px;
  background: var(--v-panel);
}
body.proposal-demo .proposal-cta {
  padding: clamp(2rem, 4vw, 4rem);
  background: radial-gradient(600px 300px at 50% 0%, var(--v-accent-ghost), transparent 62%), var(--v-panel);
  border-color: var(--v-accent-ghost-hi);
  text-align: center;
}
body.proposal-demo .proposal-cta h2 { max-width: none; margin-inline: auto; }
body.proposal-demo .proposal-cta .proposal-actions { justify-content: center; }
@media (min-width: 1800px) {
  body.proposal-demo .proposal-topbar,
  body.proposal-demo .proposal-shell { width: min(1760px, calc(100vw - 5rem)); }
}
@media (max-width: 1100px) {
  body.proposal-demo .proposal-hero { grid-template-columns: 1fr; }
  body.proposal-demo .proposal-live-wall { min-height: 34rem; }
}
@media (max-width: 760px) {
  body.proposal-demo .proposal-topbar,
  body.proposal-demo .proposal-shell { width: min(100% - 1.5rem, 720px); }
  body.proposal-demo .proposal-live-wall { min-height: 28rem; }
  body.proposal-demo .proposal-live-wall strong:nth-of-type(1) { inset: 4.5rem 1rem auto 1rem; min-height: 10rem; }
  body.proposal-demo .proposal-live-wall strong:nth-of-type(n+2) { position: relative; inset: auto; width: auto; min-height: 5rem; margin-top: .6rem; }
  body.proposal-demo .proposal-live-wall span:nth-of-type(2) { left: 1rem; top: 3.3rem; }
}

body.operator-dashboard {
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 8%, rgba(64, 115, 141, .22), transparent 24rem),
    radial-gradient(circle at 72% 18%, rgba(87, 114, 127, .18), transparent 22rem),
    #030713;
}
body.operator-dashboard .topbar { display: none; }
body.operator-dashboard main {
  box-sizing: border-box;
  max-width: min(2400px, calc(100vw - 1rem));
  height: 100vh;
  min-height: 0;
  padding: clamp(.5rem, 1.2vw, 1rem);
  overflow: hidden;
}
body.operator-dashboard .eyebrow { display: none; }
.operator-dashboard-shell {
  display: grid;
  grid-template-columns: minmax(64px, 82px) minmax(0, 1fr) minmax(240px, .26fr);
  gap: clamp(.38rem, .65vw, .65rem);
  align-items: stretch;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.operator-sidebar,
.operator-panel,
.operator-dashboard-status,
.operator-summary-card,
.operator-sensor-card {
  border: 1px solid rgba(170, 213, 232, .13);
  background: linear-gradient(145deg, rgba(13, 26, 43, .92), rgba(4, 9, 21, .96));
  box-shadow: 0 24px 70px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.operator-sidebar {
  border-radius: 24px;
  padding: clamp(.45rem, .65vw, .75rem);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(.4rem, .65vw, .75rem);
  min-height: 0;
  overflow: hidden;
}
.operator-sidebar-card {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: .35rem;
  padding: .8rem .45rem;
  border-radius: 24px;
  background: rgba(255,255,255,.055);
}
.operator-sidebar-logo {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 18px;
  background: linear-gradient(150deg, #dde9ff, #78b3c5 48%, #1e4a63);
  color: #06101f;
  font-weight: 950;
  letter-spacing: -.06em;
}
.operator-sidebar-card small { color: rgba(207,225,237,.62); font-size: .68rem; }
.operator-kicker {
  color: #b9d4df;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .67rem;
  font-weight: 850;
}
.operator-nav {
  display: grid;
  align-content: start;
  gap: clamp(.35rem, .55vw, .55rem);
  color: rgba(221,235,244,.78);
}
.operator-nav a {
  display: grid;
  justify-items: center;
  gap: .25rem;
  min-height: clamp(3.2rem, 8vh, 4rem);
  border-radius: 18px;
  padding: .45rem .3rem;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.055);
}
.operator-nav a span { font-size: 1.25rem; line-height: 1; }
.operator-nav a b { font-size: .66rem; font-weight: 800; }
.operator-nav a[aria-current="page"] {
  color: #06101f;
  background: linear-gradient(145deg, #e5f1ff, #85b6c6 62%, #5b879b);
  box-shadow: 0 12px 30px rgba(109, 165, 184, .25);
}
.operator-dashboard-main {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: clamp(.38rem, .65vw, .65rem);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.operator-create-room {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto auto;
  gap: .35rem;
  align-items: center;
  border: 1px solid rgba(170, 213, 232, .13);
  border-radius: 18px;
  padding: .34rem .42rem;
  background: rgba(255,255,255,.045);
}
.operator-create-room label { margin: 0; max-width: none; font-size: 0; gap: 0; }
.operator-create-room .status { grid-column: auto; margin: 0; font-size: .68rem; white-space: nowrap; color: rgba(213,231,243,.7); }
.operator-create-room input { min-height: 1.95rem; padding: .45rem .58rem; font-size: .82rem; }
.operator-create-room button { min-height: 1.95rem; padding: .38rem .55rem; font-size: .74rem; }
.operator-confirm-note {
  color: rgba(213,231,243,.72);
  font-size: .82rem;
  margin-top: .65rem;
}
.operator-active-links {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  margin-top: .75rem;
}
.operator-active-links .button { padding: .55rem .72rem; font-size: .78rem; }
.operator-dashboard-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  border-radius: 22px;
  padding: clamp(.55rem, .9vw, .78rem);
}
.operator-dashboard-status h1 {
  font-size: clamp(1.65rem, 2.8vw, 2.85rem);
  letter-spacing: -.07em;
  margin: .1rem 0 0;
  line-height: .85;
}
.operator-dashboard-status small {
  color: rgba(218,235,245,.58);
  display: block;
  font-weight: 800;
  margin-top: .25rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.operator-title-block { min-width: 0; }
.operator-header-actions {
  display: grid;
  gap: .4rem;
  min-width: min(31rem, 46%);
}
.operator-status-cluster {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  color: rgba(229,241,255,.72);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.operator-status-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: 999px;
  padding: .42rem .68rem;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
}
.operator-status-pill.ok { color: #d9ffef; background: rgba(76, 196, 139, .14); border-color: rgba(126, 232, 181, .32); }
.operator-status-pill.ok::before { content: ''; width: .48rem; height: .48rem; border-radius: 50%; background: #73f0ae; box-shadow: 0 0 18px #73f0ae; }
.operator-control-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.35rem, .55vw, .55rem);
}
.operator-sensor-card {
  border-radius: 18px;
  padding: .48rem .58rem;
  min-height: clamp(3.25rem, 7.5vh, 4.1rem);
  display: grid;
  align-content: space-between;
}
.operator-sensor-card span,
.operator-sensor-card small { color: rgba(213,231,243,.62); }
.operator-sensor-card small { display: none; }
.operator-sensor-card strong { color: #edf7ff; font-size: clamp(.9rem, 1.15vw, 1.05rem); }
.operator-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, .34fr);
  grid-template-rows: minmax(140px, .34fr) minmax(0, .66fr);
  gap: clamp(.38rem, .58vw, .6rem);
  align-items: stretch;
  min-height: 0;
}
.operator-session-stage {
  grid-row: span 2;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(.35rem, .55vw, .55rem);
  border: 1px solid rgba(170, 213, 232, .13);
  border-radius: 22px;
  padding: clamp(.52rem, .78vw, .78rem);
  background:
    radial-gradient(circle at 48% 48%, rgba(122, 177, 195, .18), transparent 13rem),
    linear-gradient(145deg, rgba(11, 24, 41, .94), rgba(3, 8, 20, .96));
  overflow: hidden;
}
.operator-panel-heading {
  display: flex;
  justify-content: space-between;
  gap: .55rem;
  align-items: baseline;
  margin-bottom: .45rem;
}
.operator-panel-heading h2,
.operator-room-card h3,
.operator-panel h2 { margin: 0; }
.operator-classroom-map {
  position: relative;
  min-height: 100%;
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px),
    rgba(2, 7, 16, .55);
  background-size: 42px 42px;
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.operator-classroom-map::before {
  content: '';
  position: absolute;
  inset: 15% 22%;
  border: 1px dashed rgba(173,211,228,.26);
  border-radius: 50%;
  transform: rotate(-8deg);
}
.operator-map-ring {
  position: absolute;
  display: grid;
  gap: .12rem;
  max-width: 14rem;
  border-radius: 22px;
  padding: .75rem .85rem;
  background: rgba(9, 20, 34, .78);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}
.operator-map-ring span { color: rgba(218,235,245,.65); font-size: .78rem; }
.operator-map-ring.primary { top: 8%; left: 7%; }
.operator-map-ring.secondary { right: 6%; bottom: 8%; }
.operator-seat-map {
  position: absolute;
  inset: 20% 25%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .55rem;
  place-content: center;
  transform: perspective(600px) rotateX(10deg) rotateZ(-2deg);
}
.seat-dot {
  aspect-ratio: 1;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: rgba(235,247,255,.8);
  background: linear-gradient(145deg, rgba(39, 62, 84, .95), rgba(12, 22, 38, .95));
  border: 1px solid rgba(255,255,255,.13);
  font-size: .72rem;
  font-weight: 850;
}
.seat-dot.hot { background: linear-gradient(145deg, #dfefff, #5b95a7); color: #06101f; box-shadow: 0 0 30px rgba(150, 219, 239, .35); }
.operator-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.3rem, .48vw, .45rem);
}
.operator-summary-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .08rem .35rem;
  align-items: baseline;
  border-radius: 15px;
  padding: .36rem .48rem;
}
.operator-summary-card span,
.operator-summary-card small { color: rgba(213,231,243,.62); }
.operator-summary-card small { grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .66rem; }
.operator-summary-card strong { font-size: clamp(1.1rem, 1.55vw, 1.45rem); line-height: 1; }
.operator-summary-card.placeholder { border-style: dashed; }
.operator-panel,
.operator-right-rail {
  min-width: 0;
}
.operator-panel {
  border-radius: 18px;
  padding: clamp(.48rem, .72vw, .68rem);
  min-height: 0;
  overflow: auto;
}
.operator-right-rail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(.38rem, .58vw, .6rem);
  min-height: 0;
  overflow: hidden;
}
.operator-teacher-tape h2 { font-size: clamp(1.12rem, 1.65vw, 1.45rem); line-height: 1.05; }
.operator-room-list { display: grid; gap: .42rem; }
.operator-room-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  padding: .75rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  background: rgba(255,255,255,.05);
}
.operator-room-index {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 14px;
  color: #06101f;
  background: #d7e9f4;
  font-weight: 950;
}
.operator-room-card p { margin: .15rem 0 0; color: rgba(213,231,243,.62); font-size: .82rem; }
.operator-room-card.empty { border-style: dashed; }
.operator-room-card.is-selected { outline: 2px solid rgba(141, 188, 204, .9); background: rgba(141, 188, 204, .12); }
.operator-room-actions { grid-column: 1 / -1; display: flex; gap: .45rem; flex-wrap: wrap; justify-content: flex-start; }
.operator-room-actions .button,
.operator-room-actions button { padding: .55rem .72rem; font-size: .78rem; }
button.secondary { background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,.2); }
button.danger { background: rgba(255,143,143,.18); color: #ffd8d8; border: 1px solid rgba(255,143,143,.4); }
.operator-active-room {
  display: grid;
  gap: .6rem;
  margin: 0;
}
.operator-active-room div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding-bottom: .5rem;
}
.operator-active-room dt { color: rgba(213,231,243,.62); }
.operator-active-room dd { margin: 0; font-weight: 850; }
.operator-event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.operator-event-list li {
  display: grid;
  gap: .1rem;
  padding: .65rem .75rem;
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.06);
}
.operator-event-list span { color: rgba(213,231,243,.62); font-size: .82rem; }
.operator-diagnostics-badge {
  display: grid;
  gap: .15rem;
  margin-top: .5rem;
  padding: .55rem .65rem;
  border-radius: 16px;
  border: 1px solid rgba(213,231,243,.14);
  background: rgba(255,255,255,.045);
}
.operator-diagnostics-badge strong { font-size: .84rem; }
.operator-diagnostics-badge span { color: rgba(213,231,243,.62); font-size: .76rem; }
.operator-room-card[data-room-health="warning"],
.operator-diagnostics-panel[data-room-health="warning"],
.operator-summary-card.warning {
  border-color: rgba(255, 197, 107, .5);
  box-shadow: inset 0 0 0 1px rgba(255, 197, 107, .08), 0 14px 36px rgba(94, 53, 13, .16);
}
.operator-room-card[data-room-health="ok"],
.operator-diagnostics-panel[data-room-health="ok"] {
  border-color: rgba(122, 224, 163, .32);
}
.operator-diagnostics-panel {
  display: grid;
  gap: .65rem;
  margin: .75rem 0;
  padding: .75rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  background: rgba(255,255,255,.045);
}
.operator-diagnostics-panel h3 { margin: 0; }
.operator-warning-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .45rem;
}
.operator-warning-list li {
  display: grid;
  gap: .1rem;
  padding: .6rem .7rem;
  border: 1px solid rgba(255, 197, 107, .32);
  border-radius: 15px;
  background: rgba(255, 197, 107, .09);
}
.operator-warning-list span,
.operator-diagnostics-ok { color: rgba(213,231,243,.68); font-size: .82rem; margin: 0; }
.operator-participant-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.operator-participant-chips span {
  border-radius: 999px;
  padding: .32rem .55rem;
  border: 1px solid rgba(141,188,204,.35);
  background: rgba(141,188,204,.11);
  color: #e7f6ff;
  font-size: .78rem;
  font-weight: 800;
}
.operator-placeholder-note {
  border: 1px dashed rgba(141, 188, 204, .45);
  border-radius: 16px;
  padding: .7rem;
  background: rgba(116, 171, 190, .08);
  font-size: .86rem;
}
.operator-debug-link { align-self: end; text-align: center; }
@media (max-width: 1180px) {
  .operator-dashboard-shell { grid-template-columns: minmax(78px, 92px) minmax(0, 1fr); }
  .operator-right-rail { grid-column: 2; grid-template-rows: none; }
  .operator-control-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .operator-dashboard-shell {
    grid-template-columns: 1fr;
  }
  .operator-sidebar,
  .operator-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .operator-sidebar { min-height: auto; }
  .operator-sidebar-card { display: none; }
  .operator-dashboard-status { align-items: stretch; flex-direction: column; }
  .operator-create-room { grid-template-columns: 1fr; }
  .operator-create-room button { width: 100%; }
  .operator-dashboard-grid,
  .operator-summary-grid,
  .operator-control-strip { grid-template-columns: 1fr; }
  .operator-session-stage { grid-row: auto; }
  .operator-right-rail { grid-column: auto; }
  .operator-classroom-map { min-height: 360px; }
}

/* ITER-011: unified in-room grid + click-to-inspect side panel. */
/* ITER-006: tighter min so 30 tiles fit on a 1440px viewport. */
.in-room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .35rem;
  padding: .35rem 0;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  align-content: start;
}
.media-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(15,29,50,.85);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: .35rem;
  cursor: pointer;
  transition: outline-color .15s ease, transform .15s ease;
  outline: 2px solid transparent;
}
.media-tile:hover, .media-tile:focus {
  outline: 2px solid var(--gold);
  transform: translateY(-1px);
}
.media-tile.selected {
  outline: 2px solid var(--aqua);
}
.media-tile.self {
  outline: 2px solid var(--aqua);
}
.media-tile span {
  font-size: .75rem;
  color: var(--muted);
  padding: .15rem .25rem .35rem;
  display: block;
  text-align: center;
}
.media-tile video, .media-tile audio {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 6px;
  display: block;
}
.media-tile[data-kind="audio"] video, .media-tile[data-kind="audio"] audio { aspect-ratio: 4 / 3; }
/* ITER-015: per-tile info-icon overlay replaces the ITER-011 side panel.
   Click ⓘ in the top-right of a remote tile to open a small popover. */
.media-tile { position: relative; }
.info-icon {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 5;
}
.info-icon:hover { background: rgba(0, 0, 0, 0.75); }
.info-overlay {
  position: fixed;
  z-index: 200;
  width: 320px;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.info-overlay h2 { margin: 0 0 0.6rem 0; font-size: 1rem; }
.info-overlay dl { margin: 0; display: grid; grid-template-columns: 70px 1fr; gap: 0.25rem 0.5rem; }
.info-overlay dt { color: var(--muted); font-size: 0.8rem; }
.info-overlay dd { margin: 0; font-size: 0.85rem; word-break: break-all; }
.info-overlay button {
  margin-top: 0.75rem;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  font-size: 0.85rem;
}
/* ITER-007 closeout: respect the [hidden] attribute on .room so the
pre-join form can be hidden after join, and the room can be shown. The
earlier `.room[data-room] { display: flex }` overrode [hidden] and
caused both the join form and the room to render stacked. */
.room[data-room]:not([hidden]) { display: flex; flex-direction: column; }
/* Hide the join form (the connect-panel) once the user is connected. */
.panel.join-panel.is-connected { display: none; }
.detail-actions button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  padding: .45rem .65rem;
  cursor: pointer;
  font-size: .85rem;
  text-align: left;
}
.detail-actions button:hover { background: rgba(255,255,255,.08); }
.detail-actions button[data-act="lock"] { color: var(--danger); border-color: rgba(255,143,143,.4); }
.detail-mute-note { color: var(--muted); font-size: .7rem; margin-top: .5rem; }
/* The .room[data-room]:not([hidden]) { display: flex; ... } rule above already
   controls the room layout. There must NOT be a plain .room[data-room] rule
   here, because it would override the user-agent default [hidden] { display: none }
   and the room would always be visible regardless of the `hidden` attribute. */

/* Joined-room visual pass: real LiveKit surface with session-remote hierarchy. */
body.session-room-page {
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 10%, rgba(111, 157, 150, .08), transparent 30rem),
    radial-gradient(circle at 80% 2%, rgba(67, 91, 140, .22), transparent 32rem),
    linear-gradient(180deg, #080c13 0%, #05080d 100%);
  color: #f7f8fb;
}
body.session-room-page .topbar,
body.session-room-page .public-topbar,
body.session-room-page .public-footer { display: none; }
body.session-room-page main {
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body.session-room-page > main > .eyebrow { display: none; }
.session-room-shell {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: stretch;
  overflow: hidden;
}
.session-join-panel {
  grid-area: 1 / 1;
  z-index: 1;
  width: min(980px, calc(100vw - 2rem));
  align-self: center;
  justify-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .75fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  border-color: rgba(255, 255, 255, .11);
  background: linear-gradient(145deg, rgba(17, 23, 35, .96), rgba(8, 12, 19, .96));
}
.session-prejoin-copy h1 { font-size: clamp(2.25rem, 6vw, 5rem); }
.session-prejoin-form { align-self: center; }
.session-room-page .room.session-room:not([hidden]) {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(.45rem, .8vh, .75rem);
  padding: clamp(.55rem, 1.2vh, 1rem) clamp(.65rem, 1.2vw, 1rem) clamp(6.85rem, 13vh, 8.15rem);
  overflow: hidden;
}
.session-room-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  justify-content: space-between;
  gap: .65rem 1rem;
  min-height: clamp(2.8rem, 7vh, 3.4rem);
  flex: 0 0 auto;
}
.session-room-meta,
.session-room-stats {
  display: flex;
  align-items: center;
  gap: .85rem;
}
.session-room-stats {
  align-items: flex-start;
}
.session-room-meta > div { display: grid; gap: .15rem; }
.session-room-title {
  display: block;
  font-size: clamp(1rem, 1.45vw, 1.35rem);
  line-height: 1.1;
}
.session-room-meta span:not(.session-live-pill),
.session-room-stats time {
  color: #8993a6;
  font-size: .78rem;
}
.session-live-pill,
.session-rec-pill,
.session-count-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 1.7rem;
  padding: .3rem .62rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .055);
  color: #f4f6fb;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .05em;
}
.session-live-pill,
.session-rec-pill { background: rgba(255, 73, 83, .16); color: #ff6670; }
.session-live-pill::before,
.session-rec-pill::before {
  content: '';
  width: .42rem;
  height: .42rem;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255, 73, 83, .12);
}
.session-count-pill { color: #d8dfed; background: #111723; }
.session-stage {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 18vw);
  gap: clamp(.45rem, .85vw, .75rem);
  padding: 0;
  overflow: hidden;
}
.session-whiteboard-stage {
  position: absolute;
  top: .7rem;
  left: .7rem;
  z-index: 5;
  width: min(24rem, 36vw);
  display: grid;
  gap: .35rem;
  border-radius: 14px;
  border: 1px solid rgba(137, 148, 170, .17);
  background: linear-gradient(160deg, #121821, #0c1118);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .38);
  overflow: hidden;
  animation: session-whiteboard-slide-in 320ms ease-out;
}
@keyframes session-whiteboard-slide-in {
  from {
    transform: translateX(-1.15rem);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.session-whiteboard-surface {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.session-whiteboard-stage .vela-whiteboard-readback {
  position: relative;
  height: 100%;
  margin: 0;
}
.session-whiteboard-stage .vela-whiteboard-readback > :not(.vela-whiteboard-canvas) {
  display: none;
}
.session-whiteboard-stage .vela-whiteboard-canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.session-whiteboard-stage .vela-whiteboard-stroke {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.session-whiteboard-stage [data-session-whiteboard-draw] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
  background: transparent;
}
.session-whiteboard-stage [data-session-whiteboard-hint] {
  margin: 0 .7rem .45rem;
  color: #c5cddc;
  font-size: .72rem;
}
.session-whiteboard-stage [data-whiteboard-summary],
.session-whiteboard-stage [data-whiteboard-defer-note] { display: none; }
.session-stage-rail {
  grid-column: 1 / -1;
  justify-self: start;
  position: static;
  z-index: 6;
  width: min(24rem, 100%);
  margin: 0;
  display: grid;
  align-content: start;
  gap: .45rem;
  pointer-events: auto;
}
.session-stage-rail > * { pointer-events: auto; }
.session-hand-queue {
  position: static;
  width: 100%;
  display: grid;
  gap: .35rem;
  padding: .55rem .65rem .6rem;
  border-radius: 14px;
  border: 1px solid rgba(137, 148, 170, .17);
  background: linear-gradient(160deg, #121821, #0c1118);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .38);
  animation: session-whiteboard-slide-in 320ms ease-out;
}
.session-hand-queue[hidden] { display: none; }
.session-hand-queue [data-session-hand-queue-label] {
  margin: 0;
  color: #c5cddc;
  font-size: .72rem;
}
.session-hand-queue [data-session-hand-list] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem;
}
.session-hand-queue [data-session-hand-row] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  color: #f4f6fb;
  font-size: .82rem;
}
.session-hand-queue [data-session-hand-dismiss] {
  min-height: 1.7rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(137, 148, 170, .28);
  background: rgba(255, 255, 255, .04);
  color: #d8dfed;
  font-size: .7rem;
  cursor: pointer;
}
.control-bar [data-session-hand][aria-pressed="true"] {
  background: rgba(111, 157, 150, .18);
  color: #6f9d96;
  border-color: rgba(111, 157, 150, .2);
}
.session-poll {
  position: static;
  width: 100%;
  display: grid;
  gap: .35rem;
  padding: .55rem .65rem .6rem;
  border-radius: 14px;
  border: 1px solid rgba(137, 148, 170, .17);
  background: linear-gradient(160deg, #121821, #0c1118);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .38);
  animation: session-whiteboard-slide-in 320ms ease-out;
}
.session-poll[hidden],
.session-poll [hidden] { display: none; }
.session-poll [data-session-poll-label] {
  margin: 0;
  color: #c5cddc;
  font-size: .72rem;
}
.session-poll [data-session-poll-prompt] {
  margin: 0;
  color: #f4f6fb;
  font-size: .82rem;
}
.session-poll [data-session-poll-start]:not([hidden]) {
  display: grid;
  gap: .35rem;
}
.session-poll [data-session-poll-start] label {
  display: grid;
  gap: .2rem;
  color: #c5cddc;
  font-size: .72rem;
}
.session-poll [data-session-poll-start] input,
.session-poll [data-session-poll-start] button,
.session-poll [data-session-poll-choice] {
  min-height: 1.8rem;
  border-radius: 999px;
  border: 1px solid rgba(137, 148, 170, .28);
  background: rgba(255, 255, 255, .04);
  color: #d8dfed;
  font-size: .75rem;
}
.session-poll [data-session-poll-start] input {
  padding: .25rem .7rem;
  border-radius: 10px;
}
.session-poll [data-session-poll-start] button,
.session-poll [data-session-poll-choice] {
  padding: .25rem .7rem;
  cursor: pointer;
}
.session-poll [data-session-poll-counts],
.session-poll [data-session-poll-choices] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .3rem;
}
.session-poll [data-session-poll-count] {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  color: #f4f6fb;
  font-size: .82rem;
}
.session-poll [data-session-poll-close] {
  min-height: 1.8rem;
  padding: .25rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(137, 148, 170, .28);
  background: rgba(255, 255, 255, .04);
  color: #d8dfed;
  font-size: .75rem;
  cursor: pointer;
}
.session-qa {
  position: static;
  width: 100%;
  display: grid;
  gap: .35rem;
  padding: .55rem .65rem .6rem;
  border-radius: 14px;
  border: 1px solid rgba(137, 148, 170, .17);
  background: linear-gradient(160deg, #121821, #0c1118);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .38);
  animation: session-whiteboard-slide-in 320ms ease-out;
}
.session-qa[hidden],
.session-qa [hidden] { display: none; }
.session-qa [data-session-qa-label] {
  margin: 0;
  color: #c5cddc;
  font-size: .72rem;
}
.session-qa [data-session-qa-ask] {
  display: grid;
  gap: .35rem;
}
.session-qa [data-session-qa-ask] label {
  display: grid;
  gap: .2rem;
  color: #c5cddc;
  font-size: .72rem;
}
.session-qa [data-session-qa-lifted]:not([hidden]) {
  margin: 0;
  color: #f4f6fb;
  font-size: .82rem;
}
.session-qa [data-session-qa-ask] input,
.session-qa [data-session-qa-ask] button,
.session-qa [data-session-qa-lift],
.session-qa [data-session-qa-dismiss] {
  min-height: 1.8rem;
  border-radius: 999px;
  border: 1px solid rgba(137, 148, 170, .28);
  background: rgba(255, 255, 255, .04);
  color: #d8dfed;
  font-size: .75rem;
}
.session-qa [data-session-qa-ask] input {
  padding: .25rem .7rem;
  border-radius: 10px;
}
.session-qa [data-session-qa-ask] button,
.session-qa [data-session-qa-lift],
.session-qa [data-session-qa-dismiss] {
  padding: .25rem .7rem;
  cursor: pointer;
}
.session-qa [data-session-qa-list],
.session-qa [data-session-qa-own] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .3rem;
}
.session-qa [data-session-qa-row] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  color: #f4f6fb;
  font-size: .82rem;
}
.session-qa [data-session-qa-text] {
  flex: 1 1 8rem;
}
.session-qa [data-session-qa-row-lifted] [data-session-qa-text] {
  color: #6f9d96;
}
.session-qa [data-session-qa-lift]:disabled {
  opacity: .7;
  cursor: default;
}
.session-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: clamp(.45rem, .85vw, .75rem);
  min-height: 0;
  max-height: none;
  overflow: hidden;
  padding: 0;
  align-content: stretch;
}
.session-remote-grid { display: contents; }
.session-tile {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(137, 148, 170, .17);
  background: linear-gradient(145deg, #151d2b, #0f151f);
  padding: 0;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  cursor: default;
  transform: none;
}
.session-tile:hover,
.session-tile:focus {
  outline: 2px solid rgba(111, 157, 150, .85);
  transform: none;
}
.session-tile.self {
  outline: 0;
  border-color: rgba(137, 148, 170, .17);
}
.session-tile.selected,
.session-tile.speaking {
  outline: 3px solid #6f9d96;
  outline-offset: -3px;
  box-shadow: 0 0 0 1px rgba(111, 157, 150, .55), 0 0 22px rgba(111, 157, 150, .18);
}
.session-avatar-placeholder {
  width: min(46%, 12rem);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.08), transparent 28%),
    linear-gradient(145deg, rgba(110, 129, 157, .58), rgba(48, 60, 82, .46));
  filter: saturate(.86);
  opacity: .78;
}
.session-tile:nth-child(3n + 1) .session-avatar-placeholder { background-color: rgba(116, 82, 58, .45); }
.session-tile:nth-child(3n + 2) .session-avatar-placeholder { background-color: rgba(53, 86, 83, .45); }
.session-tile:nth-child(3n + 3) .session-avatar-placeholder { background-color: rgba(63, 75, 108, .52); }
.session-tile video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  background: transparent;
}
.session-tile audio { width: 100%; }
.session-tile-label,
.media-tile.session-tile span.session-tile-label {
  position: absolute;
  left: .75rem;
  bottom: .55rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  width: auto;
  max-width: calc(100% - 1.5rem);
  padding: .42rem .62rem;
  border-radius: 999px;
  background: rgba(3, 7, 13, .78);
  color: #f8fafc;
  font-size: .82rem;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-tile-label b { color: #c0c8d7; font-weight: 700; }
.media-tile-audio-badge {
  position: absolute;
  right: .7rem;
  top: .7rem;
  z-index: 4;
  padding: .25rem .5rem;
  border-radius: 999px;
  background: rgba(111, 157, 150, .16);
  color: #6f9d96;
  font-size: .7rem;
  font-weight: 800;
}
.session-participants-panel,
.session-chat-panel {
  min-height: 0;
  overflow: auto;
  border-radius: 16px;
  background: rgba(13, 18, 27, .86);
  border: 1px solid rgba(137, 148, 170, .14);
  padding: .85rem;
}
.session-participants-panel:not([hidden]),
.session-chat-panel:not([hidden]) {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 8;
  width: min(20rem, 34vw);
  max-height: calc(100% - 7.2rem);
  display: grid;
  align-content: start;
  gap: .65rem;
}
.session-chat-panel [data-session-chat-list] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
  overflow: auto;
  min-height: 6rem;
  max-height: 16rem;
}
.session-chat-panel [data-session-chat-list] li {
  padding: .55rem .7rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  color: #d7deea;
  font-size: .82rem;
}
.session-chat-panel [data-session-chat-list] li.empty {
  color: #929caf;
  border-style: dashed;
}
.session-chat-panel [data-session-chat-name] {
  display: block;
  color: #6f9d96;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.session-chat-panel [data-session-chat-form] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .4rem;
  align-items: end;
}
.session-chat-panel [data-session-chat-form] label {
  display: grid;
  gap: .25rem;
  color: #929caf;
  font-size: .7rem;
}
.session-chat-panel [data-session-chat-form] input,
.session-chat-panel [data-session-chat-form] button {
  min-height: 2.1rem;
  border-radius: 10px;
  border: 1px solid rgba(137, 148, 170, .22);
  background: rgba(14, 20, 31, .9);
  color: #e8eef7;
}
.session-chat-panel [data-session-chat-form] button {
  padding: 0 .75rem;
  background: #1b4f4a;
  border-color: rgba(111, 157, 150, .4);
  font-weight: 700;
}
.session-react-picker {
  position: absolute;
  left: 50%;
  bottom: calc(100% + .4rem);
  z-index: 30;
  transform: translateX(-50%);
  display: grid;
  gap: .3rem;
  min-width: 7.5rem;
  padding: .4rem;
  border-radius: 14px;
  border: 1px solid rgba(137, 148, 170, .2);
  background: rgba(13, 18, 27, .94);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .4);
}
.session-react-picker[hidden] { display: none; }
.session-react-picker button {
  min-height: 2rem;
  border: 0;
  border-radius: 10px;
  background: rgba(111, 157, 150, .16);
  color: #d7deea;
  font-size: .78rem;
  font-weight: 700;
}
.session-react-burst {
  position: absolute;
  left: 50%;
  bottom: .8rem;
  z-index: 7;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  pointer-events: none;
}
.session-react-burst[hidden] { display: none; }
.session-react-burst [data-session-react-chip] {
  padding: .35rem .65rem;
  border-radius: 999px;
  background: rgba(27, 79, 74, .88);
  color: #e8eef7;
  font-size: .78rem;
  font-weight: 700;
}
.session-panel-heading {
  display: grid;
  gap: .1rem;
  margin-bottom: .7rem;
}
.session-panel-heading span {
  color: #6f9d96;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.session-participants-panel h2 { display: none; }
.session-participants-panel ul { gap: .45rem; }
.session-help-pill {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 20;
  max-width: min(28rem, calc(100vw - 2rem));
  margin: 0;
  padding: .65rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(137, 148, 170, .18);
  background: rgba(14, 20, 31, .82);
  color: #929caf;
  font-size: .78rem;
  backdrop-filter: blur(16px);
}
.session-bottom-dock {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 25;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(.36rem, .8vw, .7rem);
  width: auto;
  max-width: calc(100vw - 2rem);
  min-height: 5.85rem;
  margin: 0;
  padding: .9rem 1rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(137, 148, 170, .18);
  background: rgba(13, 18, 27, .84);
  box-shadow: 0 24px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(18px);
}
.session-dock-item {
  position: relative;
  display: grid;
  justify-items: center;
  align-items: start;
  gap: .42rem;
  min-width: clamp(3.6rem, 5.6vw, 4.65rem);
}
.session-primary-dock-item { min-width: clamp(4.7rem, 6vw, 5.4rem); }
.session-leave-item { min-width: clamp(7.5rem, 8.8vw, 9.2rem); }
.session-dock-separator {
  display: block;
  width: 1px;
  height: 3.5rem;
  margin: 0 clamp(.28rem, .75vw, .85rem);
  align-self: start;
  background: rgba(137, 148, 170, .18);
}
.session-control,
.control-bar .session-control,
.session-control:visited {
  width: clamp(2.9rem, 4.4vw, 3.6rem);
  height: clamp(2.9rem, 4.4vw, 3.6rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 17px;
  border: 1px solid transparent;
  background: transparent;
  color: #b9c2d1;
  padding: 0;
  text-decoration: none;
  line-height: 1;
}
.control-bar button.session-primary-control {
  width: clamp(4.5rem, 5.5vw, 5rem);
  height: clamp(4.5rem, 5.5vw, 5rem);
  border-radius: 22px;
  background: rgba(111, 157, 150, .14);
  color: #6f9d96;
  border-color: rgba(111, 157, 150, .08);
}
.control-bar button.session-primary-control[data-muted="true"] {
  background: rgba(255, 255, 255, .05);
  color: #b9c2d1;
}
.session-control-icon,
.session-leave-icon {
  display: inline-flex;
  width: clamp(1.45rem, 2.3vw, 2rem);
  height: clamp(1.45rem, 2.3vw, 2rem);
}
.session-control-icon svg,
.session-leave-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.95;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.session-primary-control .session-control-icon {
  width: clamp(1.9rem, 2.8vw, 2.45rem);
  height: clamp(1.9rem, 2.8vw, 2.45rem);
}
.session-control-label {
  display: block;
  color: #7f8a9c;
  font-size: clamp(.72rem, 1vw, .92rem);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.session-control:hover { background: rgba(255,255,255,.07); }
.session-primary-control:hover { background: rgba(111, 157, 150, .18); }
.session-secondary-control[disabled] { opacity: 1; cursor: not-allowed; }
.session-secondary-control[disabled] .session-control-icon { opacity: .82; }
.control-bar button.session-leave,
.control-bar button.session-leave:hover {
  width: clamp(7.5rem, 8.8vw, 9.15rem);
  height: clamp(4.5rem, 5.5vw, 5rem);
  margin-left: 0;
  border-radius: 22px;
  display: grid;
  place-items: center;
  gap: .18rem;
  background: #ff5a63;
  color: #fff;
  border-color: transparent;
}
.session-leave .session-control-label { color: #fff; font-size: clamp(.9rem, 1.35vw, 1.25rem); font-weight: 900; }
.session-leave-icon { width: clamp(1.8rem, 2.5vw, 2.4rem); height: clamp(1.8rem, 2.5vw, 2.4rem); }
.session-seat-label {
  position: fixed;
  right: 1rem;
  bottom: .65rem;
  z-index: 19;
  margin: 0;
  color: #687489;
  font-size: .7rem;
  opacity: .78;
}
.info-icon { z-index: 6; }
@media (min-width: 1800px) {
  .session-room-page .room.session-room:not([hidden]) { padding: 1.25rem 1.25rem 8.6rem; }
  .session-video-grid { grid-auto-rows: minmax(280px, 1fr); }
}
@media (max-width: 1180px) {
  .session-stage { grid-template-columns: 1fr; }
  .session-participants-panel:not([hidden]),
  .session-chat-panel:not([hidden]) {
    display: grid;
    width: min(20rem, calc(100vw - 1.6rem));
  }
  .session-video-grid { grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); }
}
@media (max-width: 1400px) and (min-width: 761px) {
  .session-help-pill { display: none; }
}
@media (max-width: 760px) {
  body.session-room-page,
  body.session-room-page main,
  .session-room-shell {
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .session-join-panel { grid-template-columns: 1fr; }
  .session-room-page .room.session-room:not([hidden]) { height: auto; min-height: 100vh; overflow: visible; padding: .75rem .75rem 8.75rem; }
  .session-room-topbar,
  .session-room-stats { align-items: flex-start; flex-direction: column; }
  .session-video-grid { grid-template-columns: 1fr; grid-auto-rows: minmax(220px, 42vh); overflow-y: auto; }
  .session-help-pill { display: none; }
  .session-bottom-dock {
    width: calc(100vw - 1rem);
    flex-wrap: wrap;
    border-radius: 28px;
  }
  .session-dock-separator { display: none; }
  .session-dock-item { min-width: 3.4rem; }
  .session-leave-item { min-width: 7.2rem; }
  .session-seat-label { display: none; }
}


/* Vela reference dashboard/operator visual system */
body.operator-dashboard,
body.vela-dashboard {
  --vela-bg: #0b1012;
  --vela-panel: #141a1c;
  --vela-panel-2: #171f21;
  --vela-stroke: #2a3a38;
  --vela-muted: #93a3a1;
  --vela-text: #eef4f3;
  --vela-lime: #6f9d96;
  --vela-accent-ink: #071210;
  --vela-green: #4de2af;
  --vela-red: #ff5662;
  --vela-amber: #ffbc45;
  min-height: 100vh;
  background: var(--vela-bg);
  color: var(--vela-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.operator-dashboard {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
body.operator-dashboard .topbar,
body.vela-dashboard .topbar,
body.operator-dashboard > main > .eyebrow,
body.vela-dashboard > main > .eyebrow { display: none; }
body.operator-dashboard main,
body.vela-dashboard main {
  max-width: none;
  margin: 0;
  padding: 0;
}
body.operator-dashboard main {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
body.vela-dashboard main { min-height: 0; }
body.operator-dashboard .button,
body.operator-dashboard button,
body.vela-dashboard .button,
body.vela-dashboard button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-radius: 12px;
  min-height: 44px;
  padding: .72rem 1rem;
  background: var(--vela-lime);
  color: var(--vela-accent-ink);
  border: 1px solid transparent;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 0 24px rgba(111, 157, 150, .2);
}
body.operator-dashboard .button.secondary,
body.operator-dashboard button.secondary,
body.vela-dashboard .button.secondary,
body.vela-dashboard button.secondary {
  background: #18202d;
  color: var(--vela-text);
  border-color: var(--vela-stroke);
  box-shadow: none;
}
body.operator-dashboard .button.danger,
body.operator-dashboard button.danger,
body.vela-dashboard .button.danger,
body.vela-dashboard button.danger {
  background: var(--vela-red);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 26px rgba(255, 86, 98, .18);
}
.vela-app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  background: var(--vela-bg);
}
body.operator-dashboard .vela-app-shell {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
.vela-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1.25rem;
  padding: 1.25rem 0 1rem;
  background: #101722;
  border-right: 1px solid var(--vela-stroke);
  z-index: 8;
}
.vela-logo {
  width: 42px;
  height: 42px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: .8rem;
  background: var(--vela-lime);
  color: var(--vela-accent-ink);
  border: 0;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: -.04em;
  text-decoration: none;
}
.vela-sidebar nav {
  display: grid;
  gap: .8rem;
  justify-items: center;
  align-content: start;
  color: var(--vela-muted);
}
.vela-sidebar a:not(.vela-logo) {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  text-decoration: none;
  color: var(--vela-muted);
}
.vela-sidebar a[aria-current="page"] {
  background: rgba(111, 157, 150, .18);
  color: var(--vela-lime);
}
.vela-sidebar a[aria-current="page"]::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 8px;
  width: 3px;
  height: 30px;
  border-radius: 999px;
  background: var(--vela-lime);
}
.vela-sidebar b {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.vela-sidebar-bottom { align-self: end; }
.vela-sidebar-icon,
.vela-sidebar-glyph {
  width: 22px;
  height: 22px;
  display: block;
}
.vela-sidebar-glyph {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.onepresence-icon-tip {
  position: fixed;
  z-index: 220;
  max-width: 16rem;
  padding: .42rem .7rem;
  border-radius: .55rem;
  border: 1px solid var(--vela-stroke, #2a3a38);
  background: #141a1c;
  color: #eef4f3;
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: .01em;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .42);
  pointer-events: none;
}
.onepresence-icon-tip[hidden] {
  display: none !important;
}
.vela-rooms-create {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  align-items: end;
  flex: 1 1 auto;
}
.vela-rooms-create label {
  display: grid;
  gap: .35rem;
  color: var(--vela-muted);
  font-size: .82rem;
  font-weight: 600;
}
.vela-rooms-create input {
  min-width: 18rem;
  height: 44px;
  padding: 0 .9rem;
  border-radius: 12px;
  border: 1px solid var(--vela-stroke);
  background: #101722;
  color: var(--vela-text);
}
.vela-rooms-panel { margin-top: .5rem; overflow: auto; }
body.vela-dashboard .rooms th { color: var(--vela-muted); }
body.vela-dashboard .rooms td { background: #151d27; }
.vela-dashboard-shell { background: var(--vela-bg); }
.vela-main-scroll {
  min-width: 0;
  min-height: 100vh;
  overflow: auto;
}
.vela-dashboard-topbar,
.vela-operator-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--vela-stroke);
  background: rgba(8, 12, 18, .96);
}
.vela-dashboard-topbar h1,
.vela-operator-topbar h1 { margin: 0; font-size: 1.35rem; letter-spacing: -.03em; line-height: 1.08; }
.vela-dashboard-topbar p,
.vela-operator-topbar p { margin: .28rem 0 0; color: var(--vela-muted); font-size: .9rem; line-height: 1.2; }
.vela-user-tools,
.vela-operator-status-pills,
.vela-section-head,
.vela-section-title,
.vela-live-actions,
.vela-program-heading,
.vela-sources-heading,
.vela-health-title,
.vela-bitrate div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.vela-view-pill,
.vela-person-pill,
.vela-onair-pill,
.vela-joined-pill,
.vela-rec-pill,
.vela-red-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 28px;
  padding: .38rem .72rem;
  border-radius: 999px;
  border: 1px solid var(--vela-stroke);
  background: #151d2a;
  color: var(--vela-text);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: none;
}
.vela-view-pill span { color: var(--vela-muted); letter-spacing: .22em; font-size: .68rem; font-weight: 500; }
.vela-onair-pill,
.vela-red-badge,
.vela-rec-pill { background: rgba(255,86,98,.16); color: #ff7078; border-color: rgba(255,86,98,.2); }
.vela-onair-pill::before,
.vela-red-badge::before,
.vela-rec-pill::before {
  content: '';
  width: .45rem;
  height: .45rem;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255,86,98,.13);
}
.vela-icon-button,
.vela-user-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #17202e;
  color: var(--vela-text);
}
.vela-dashboard-content {
  padding: 2rem;
}
.vela-quick-row {
  display: grid;
  grid-template-columns: auto auto minmax(280px, 1fr);
  gap: .75rem;
  align-items: center;
  margin-bottom: 2rem;
}
[data-organizer-home] .vela-quick-row {
  grid-template-columns: auto auto;
  justify-content: start;
}
[data-organizer-home] .vela-instant-session-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin: 0;
}
[data-organizer-home] [data-instant-commissioned-hint] {
  flex: 1 1 100%;
  margin: 0;
  color: var(--vela-muted);
  font-size: .82rem;
}
[data-organizer-home] .vela-instant-session-form .status:empty {
  display: none;
}
.vela-primary-cta { min-width: 252px; }
.vela-search {
  margin: 0 0 0 auto;
  width: min(320px, 100%);
  max-width: none;
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: .65rem;
  border: 1px solid var(--vela-stroke);
  border-radius: 10px;
  padding: 0 .85rem;
  background: #0c111a;
  color: var(--vela-muted);
}
.vela-search input {
  border: 0;
  background: transparent;
  padding: .75rem 0;
  color: var(--vela-text);
}
.vela-stat-grid,
.vela-recording-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.vela-stat-grid article,
.vela-live-now-panel,
.vela-up-next-panel,
.vela-recording-grid article {
  border: 1px solid var(--vela-stroke);
  border-radius: 18px;
  background: #111722;
}
.vela-stat-grid article { padding: 1.35rem; }
.vela-stat-grid span,
.vela-section-title a,
.vela-sources-heading,
.vela-program-heading span,
.vela-health-title span,
.vela-bitrate span,
.vela-live-sources h2 {
  color: var(--vela-muted);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .72rem;
}
.vela-stat-grid strong { display: block; margin-top: .7rem; font-size: 2rem; letter-spacing: -.04em; }
.vela-stat-grid small { display: block; margin-top: .35rem; color: var(--vela-green); font-weight: 800; }
.vela-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .9fr);
  gap: 1.5rem;
  align-items: start;
}
.vela-live-now-panel,
.vela-up-next-panel { padding: 1.5rem; min-height: 420px; }
.vela-live-now-grid { display: grid; gap: 1rem; margin-top: 1.25rem; }
.vela-live-card {
  display: grid;
  gap: 1.1rem;
  border: 0;
  color: inherit;
  text-decoration: none;
}
.vela-live-preview {
  position: relative;
  min-height: 220px;
  display: grid;
  place-items: center;
  border: 1px solid var(--vela-stroke);
  border-radius: 12px;
  background: #172130;
  overflow: hidden;
}
.vela-live-avatar,
.vela-program-avatar,
.vela-source-avatar {
  width: min(42%, 190px);
  aspect-ratio: 1;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.08), transparent 32%), rgba(110, 80, 60, .42);
  color: transparent;
}
.vela-media-label {
  position: absolute;
  left: .75rem;
  bottom: .7rem;
  padding: .36rem .65rem;
  border-radius: 999px;
  background: rgba(3,7,12,.78);
  font-size: .78rem;
}
.vela-rec-pill,
.vela-live-status-pill { position: absolute; top: .75rem; right: .75rem; }
.vela-live-card-body { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vela-live-card h3,
.vela-section-title h2 { margin: 0; font-size: 1.02rem; }
.vela-live-card p,
.vela-recording-grid p { margin: .35rem 0 0; color: var(--vela-muted); }
.vela-up-next-panel { min-height: 420px; }
.vela-timeline { list-style: none; padding: 1rem 0 0; margin: 0; display: grid; gap: 1rem; }
.vela-timeline li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 1rem; align-items: start; }
.vela-timeline time { color: var(--vela-muted); font-size: 1rem; }
.vela-timeline strong,
.vela-timeline span { display: block; }
.vela-timeline span { color: var(--vela-muted); margin-top: .35rem; }
.vela-timeline em { display: inline-block; margin-top: .55rem; padding: .25rem .55rem; border-radius: 999px; background: rgba(182,255,46,.18); color: var(--vela-lime); font-size: .72rem; font-style: normal; font-weight: 800; }
.vela-recordings-panel { margin-top: 2.25rem; }
.vela-recording-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1rem 0 0; }
.vela-recording-grid article { padding: 1rem; }
.vela-app-screen-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .36fr);
  gap: 1.5rem;
  align-items: start;
}
.vela-app-screen-panel,
.vela-app-rail,
.vela-app-card {
  border: 1px solid var(--vela-stroke);
  border-radius: 24px;
  background: #111722;
}
.vela-app-screen-panel,
.vela-app-rail { padding: 1.5rem; }
.vela-app-card-grid { display: grid; gap: 1rem; margin-top: 1rem; }
.vela-app-card {
  display: grid;
  gap: .4rem;
  min-height: 148px;
  padding: 1.15rem;
  color: var(--vela-text);
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.vela-app-card:hover,
.vela-app-card:focus {
  border-color: rgba(182,255,46,.45);
  background: #151d2a;
  transform: translateY(-1px);
}
.vela-app-card span,
.vela-app-rail li { color: var(--vela-muted); }
.vela-app-card span {
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 800;
}
.vela-app-card h3 { margin: 0; font-size: 1.2rem; letter-spacing: -.02em; }
.vela-app-card p { margin: 0; color: var(--vela-muted); line-height: 1.45; }
.vela-app-card em {
  justify-self: start;
  align-self: end;
  margin-top: .35rem;
  padding: .28rem .6rem;
  border-radius: 999px;
  background: rgba(77,226,175,.13);
  color: var(--vela-green);
  font-style: normal;
  font-size: .72rem;
  font-weight: 850;
}
.vela-app-rail { position: sticky; top: 96px; display: grid; gap: 1rem; }
.vela-app-rail h2 { margin: 0; font-size: 1rem; }
.vela-app-rail ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .85rem; }
.install-demo-scenario {
  display: grid;
  grid-template-columns: minmax(180px, .65fr) minmax(220px, 1fr) minmax(300px, 1.4fr);
  gap: 1rem;
  align-items: center;
  margin: 0 0 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(77,226,175,.32);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(77,226,175,.10), rgba(11,16,24,.92) 45%);
}
.install-demo-scenario div { display: grid; gap: .28rem; }
.install-demo-scenario span { color: var(--vela-green); font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.install-demo-scenario strong { color: var(--vela-text); }
.install-demo-scenario p { margin: 0; color: var(--vela-muted); font-size: .82rem; line-height: 1.45; }
.install-demo-scenario [data-install-demo-boundary] { padding-left: 1rem; border-left: 1px solid rgba(213,231,243,.14); }
.install-layout-room {
  fill: #0b1018;
  stroke: rgba(213,231,243,.16);
  stroke-width: 2;
}
.install-layout-zone {
  fill: rgba(77,226,175,.07);
  stroke: rgba(77,226,175,.32);
  stroke-dasharray: 6 6;
}
.install-layout-coverage-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  color: var(--vela-muted);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}
[data-install-layout-canvas][data-layout-coverage="hidden"] .install-layout-zone-group {
  opacity: 0;
  pointer-events: none;
}
[data-install-layout-canvas][data-layout-coverage="hidden"] .install-layout-zone-group[data-layout-selected="true"] {
  opacity: 1;
  pointer-events: auto;
}
.install-layout-workbench-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .4rem;
  align-items: stretch;
}
.install-layout-palette {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: 0;
  border: 0;
  background: transparent;
}
.install-layout-palette h3 {
  margin: 0;
  color: var(--vela-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.install-layout-palette-list {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  min-width: 0;
}
.install-layout-palette-list button {
  width: auto;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .5rem;
  border: 1px solid rgba(213,231,243,.12);
  border-radius: 8px;
  background: #111722;
  color: var(--vela-text);
  text-align: left;
  cursor: pointer;
}
.install-layout-palette-list button:hover,
.install-layout-palette-list button:focus-visible { border-color: rgba(182,255,46,.58); outline: none; }
.install-layout-palette-list svg { width: 26px; height: 18px; overflow: visible; }
.install-layout-palette-list span { min-width: 0; font-size: .7rem; font-weight: 750; line-height: 1.1; }
.install-layout-canvas-wrap {
  min-width: 0;
}
.install-layout-floor {
  position: relative;
  min-width: 0;
}
.install-layout-stage-bar {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem .65rem;
  margin: 0 0 .4rem;
}
.install-layout-stage-bar .status {
  flex: 1;
  margin: 0;
  min-width: 0;
  font-size: .78rem;
}
.install-layout-inspector {
  position: absolute;
  top: .65rem;
  right: .65rem;
  z-index: 3;
  width: min(176px, 24vw);
  max-height: calc(100% - 1.3rem);
  overflow: auto;
  padding: .5rem .55rem;
  border: 1px solid var(--vela-stroke);
  border-radius: 8px;
  background: rgba(11, 16, 24, .94);
}
.install-layout-inspector h3 { margin: 0 0 .35rem; font-size: .82rem; }
.install-layout-inspector p { margin: 0 0 .55rem; color: var(--vela-muted); font-size: .74rem; line-height: 1.4; }
.install-layout-inspector-note { margin: 0 0 .55rem; }
.install-layout-inspector-note summary {
  cursor: pointer;
  color: var(--vela-muted);
  font-size: .7rem;
  font-weight: 750;
}
.install-layout-zone-list { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .85rem; }
.install-layout-zone-list button {
  min-height: 30px;
  padding: .3rem .55rem;
  border: 1px solid rgba(77,226,175,.28);
  border-radius: 999px;
  background: rgba(77,226,175,.08);
  color: var(--vela-text);
  font-size: .72rem;
  font-weight: 750;
  cursor: pointer;
}
.install-layout-inspector form { display: grid; gap: .55rem; }
.install-layout-inspector [hidden] { display: none !important; }
.install-layout-inspector label {
  display: grid;
  gap: .25rem;
  color: var(--vela-muted);
  font-size: .72rem;
  font-weight: 750;
}
.install-layout-inspector input,
.install-layout-inspector select {
  width: 100%;
  min-height: 34px;
  padding: .4rem .55rem;
  border: 1px solid rgba(213,231,243,.14);
  border-radius: 10px;
  background: #111722;
  color: var(--vela-text);
}
.install-layout-zone-group { cursor: grab; outline: none; }
.install-layout-zone-group:active { cursor: grabbing; }
.install-layout-zone-label {
  fill: rgba(213,231,243,.72);
  font-size: 9px;
  font-weight: 750;
  pointer-events: none;
  opacity: 0;
}
.install-layout-zone-group[data-layout-selected="true"] .install-layout-zone-label { opacity: 1; }
.install-layout-zone-group[data-layout-selected="true"] .install-layout-zone {
  stroke: var(--vela-lime);
  fill: rgba(182,255,46,.12);
}
.install-layout-rotate-handle,
.install-layout-resize-handle {
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease;
}
.install-layout-rotate-handle circle { fill: #7bb1ff; stroke: #fff; stroke-width: 1.4; }
.install-layout-resize-handle circle { fill: #b6ff2e; stroke: #090e15; stroke-width: 1.4; }
.install-layout-object:hover .install-layout-rotate-handle,
.install-layout-object:hover .install-layout-resize-handle,
.install-layout-object:focus .install-layout-rotate-handle,
.install-layout-object:focus .install-layout-resize-handle,
.install-layout-object[data-layout-selected="true"] .install-layout-rotate-handle,
.install-layout-object[data-layout-selected="true"] .install-layout-resize-handle,
.install-layout-zone-group:hover .install-layout-resize-handle,
.install-layout-zone-group:focus .install-layout-resize-handle,
.install-layout-zone-group[data-layout-selected="true"] .install-layout-resize-handle { opacity: 1; }
.install-layout-object { cursor: grab; outline: none; }
.install-layout-object:active { cursor: grabbing; }
.install-layout-icon rect,
.install-layout-icon circle,
.install-layout-icon polygon,
.install-layout-icon path,
.install-layout-icon line {
  fill: #172130;
  stroke: rgba(182,255,46,.58);
  stroke-width: 2;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.28));
}
.install-layout-icon line,
.install-layout-icon path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.install-layout-icon-display rect { fill: #101827; stroke: rgba(77,226,175,.72); }
.install-layout-icon-display line { stroke: rgba(77,226,175,.62); }
.install-layout-icon-camera rect,
.install-layout-icon-camera polygon { fill: #172130; stroke: rgba(182,255,46,.68); }
.install-layout-icon-camera circle { fill: rgba(182,255,46,.12); }
.install-layout-icon-microphone rect { fill: #1b2535; stroke: rgba(255,214,102,.78); }
.install-layout-icon-microphone path,
.install-layout-icon-microphone line { stroke: rgba(255,214,102,.78); }
.install-layout-icon-speaker polygon { fill: #172130; stroke: rgba(123,177,255,.72); }
.install-layout-icon-speaker path { stroke: rgba(123,177,255,.72); }
.install-layout-object:focus .install-layout-icon rect,
.install-layout-object:focus .install-layout-icon circle,
.install-layout-object:focus .install-layout-icon polygon,
.install-layout-object:focus .install-layout-icon path,
.install-layout-object:focus .install-layout-icon line,
.install-layout-object[data-layout-selected="true"] .install-layout-icon rect,
.install-layout-object[data-layout-selected="true"] .install-layout-icon circle,
.install-layout-object[data-layout-selected="true"] .install-layout-icon polygon,
.install-layout-object[data-layout-selected="true"] .install-layout-icon path,
.install-layout-object[data-layout-selected="true"] .install-layout-icon line { stroke: var(--vela-lime); }
.install-layout-object text {
  fill: var(--vela-text);
  font-size: 9px;
  font-weight: 850;
  pointer-events: none;
}
.install-layout-object-label {
  paint-order: stroke;
  stroke: #090e15;
  stroke-width: 3px;
  opacity: 0;
}
.install-layout-object:hover .install-layout-object-label,
.install-layout-object:focus .install-layout-object-label,
.install-layout-object[data-layout-selected="true"] .install-layout-object-label { opacity: 1; }
.install-layout-icon-audience .install-layout-seat-bank {
  fill: rgba(213,231,243,.04);
  stroke: rgba(213,231,243,.2);
  stroke-width: 1.2;
  filter: none;
}
.install-layout-icon-audience .install-layout-chair rect {
  fill: #172130;
  stroke: rgba(182,255,46,.55);
  stroke-width: 1.4;
  filter: none;
}
.install-layout-delete-control { cursor: pointer; opacity: 0; transition: opacity .12s ease; }
.install-layout-delete-control circle { fill: #ff5662; stroke: rgba(255,255,255,.72); stroke-width: 1.5; filter: drop-shadow(0 6px 10px rgba(0,0,0,.36)); }
.install-layout-delete-control text { fill: #fff; font-size: 13px; font-weight: 950; pointer-events: none; stroke: none; }
.install-layout-object:hover .install-layout-delete-control,
.install-layout-object:focus .install-layout-delete-control,
.install-layout-object[data-layout-selected="true"] .install-layout-delete-control { opacity: 1; }
[data-install-layout-canvas] {
  width: 100%;
  min-height: 420px;
  border: 1px solid var(--vela-stroke);
  border-radius: 10px;
  background: radial-gradient(circle at 22% 18%, rgba(77,226,175,.08), transparent 32%), #090e15;
  touch-action: none;
}
body.install-layout-page .vela-dashboard-topbar {
  min-height: 52px;
  padding: .55rem 1.15rem;
}
body.install-layout-page .vela-dashboard-topbar p { display: none; }
body.install-layout-page .vela-dashboard-content { padding: .65rem 1.1rem 1.25rem; }
body.install-layout-page .install-demo-scenario {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .85rem;
  margin: 0 0 .45rem;
  padding: .4rem .7rem;
}
body.install-layout-page .install-demo-scenario p { display: none; }
body.install-layout-page .vela-app-screen-panel > .vela-section-title { display: none; }
body.install-layout-page .vela-stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0 0 .4rem;
}
body.install-layout-page .vela-stat-grid article {
  padding: .25rem .55rem;
  border-radius: 8px;
}
body.install-layout-page .vela-stat-grid strong { margin-top: .1rem; font-size: .95rem; }
body.install-layout-page .vela-stat-grid p { display: none; }
body.install-layout-page .vela-app-screen-grid { grid-template-columns: 1fr; }
body.install-layout-page .vela-app-screen-panel { padding: .65rem; }
body.install-layout-page .install-scene-presets { margin-top: 1rem; }
body.install-layout-page [data-install-layout-canvas] {
  width: min(100%, calc((100vh - 20rem) * 480 / 320));
  max-height: calc(100vh - 20rem);
  height: auto;
  aspect-ratio: 480 / 320;
  min-height: 0;
}
.install-layout-object[data-layout-scene-emphasized="true"] .install-layout-icon rect,
.install-layout-object[data-layout-scene-emphasized="true"] .install-layout-icon circle,
.install-layout-object[data-layout-scene-emphasized="true"] .install-layout-icon polygon,
.install-layout-object[data-layout-scene-emphasized="true"] .install-layout-icon path,
.install-layout-object[data-layout-scene-emphasized="true"] .install-layout-icon line {
  stroke: var(--vela-lime);
}
.install-layout-zone-group[data-layout-scene-emphasized="true"] .install-layout-zone {
  stroke: var(--vela-lime);
  fill: rgba(182,255,46,.14);
}
.install-scene-presets { margin-top: 1.4rem; }
[data-install-preset-boundary],
[data-install-dsp-boundary] {
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(77,226,175,.28);
  background: rgba(77,226,175,.08);
  color: var(--vela-muted);
  font-size: .84rem;
  line-height: 1.45;
}
.install-scene-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}
.install-scene-preset {
  padding: .85rem;
  border: 1px solid var(--vela-stroke);
  border-radius: 16px;
  background: #0b1018;
  display: grid;
  gap: .5rem;
}
.install-scene-preset[data-install-scene-preset-active="true"] {
  border-color: rgba(182,255,46,.62);
  box-shadow: 0 0 0 1px rgba(182,255,46,.28);
}
.install-scene-preset-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}
.install-scene-preset-head h3 { margin: 0; font-size: .95rem; }
.install-scene-preset label,
.install-dsp-editor label {
  display: grid;
  gap: .25rem;
  color: var(--vela-muted);
  font-size: .72rem;
  font-weight: 750;
}
.install-scene-preset select,
.install-dsp-editor input,
.install-dsp-editor select,
.install-dsp-editor textarea {
  width: 100%;
  min-height: 34px;
  padding: .4rem .55rem;
  border: 1px solid rgba(213,231,243,.14);
  border-radius: 10px;
  background: #111722;
  color: var(--vela-text);
}
.install-dsp-editor textarea { min-height: 92px; resize: vertical; }
.install-dsp-editor h3 { margin: 1rem 0 .45rem; }
.install-dsp-row {
  display: grid;
  gap: .45rem;
  margin: 0 0 .75rem;
  padding: .7rem;
  border: 1px solid rgba(213,231,243,.1);
  border-radius: 12px;
  background: #0b1018;
}
.install-dsp-editor button[data-install-dsp-save],
.install-scene-preset-head button {
  min-height: 34px;
}
@media (max-width: 900px) {
  .install-scene-preset-grid { grid-template-columns: 1fr; }
}
[data-install-device-boundary],
[data-install-device-permission-help] {
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  color: var(--vela-muted);
  font-size: .84rem;
  line-height: 1.45;
}
[data-install-device-boundary] {
  border: 1px solid rgba(77,226,175,.28);
  background: rgba(77,226,175,.08);
}
[data-install-device-permission-help] {
  border: 1px solid rgba(255,214,102,.38);
  background: rgba(255,214,102,.08);
  color: var(--vela-text);
}
.install-device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.install-device-card {
  display: grid;
  gap: .65rem;
  min-width: 0;
  padding: 1rem 1.05rem 1.1rem;
  border: 1px solid var(--vela-stroke);
  border-radius: 16px;
  background: #0b1018;
}
.install-device-card span {
  color: var(--vela-green);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.install-device-card strong { color: var(--vela-text); font-size: 1.05rem; }
.install-device-card p { margin: 0; color: var(--vela-muted); font-size: .82rem; line-height: 1.45; }
.install-device-proof {
  display: grid;
  gap: .55rem;
}
.install-device-proof label {
  display: grid;
  gap: .28rem;
  color: var(--vela-muted);
  font-size: .78rem;
  font-weight: 750;
}
.install-device-proof select,
.install-device-proof button {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(213,231,243,.14);
  border-radius: 10px;
  background: #111722;
  color: var(--vela-text);
}
.install-device-proof button { cursor: pointer; font-weight: 800; }
.install-device-proof button:hover,
.install-device-proof button:focus-visible { border-color: rgba(182,255,46,.58); outline: none; }
[data-install-device-preview] {
  width: 100%;
  min-height: 140px;
  border-radius: 12px;
  background: #090e15;
  object-fit: cover;
}
[data-install-device-meter] {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #172130;
}
[data-install-device-meter] span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--vela-lime, #b6ff2e);
}
[data-install-readiness-boundary] {
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(255,214,102,.38);
  border-radius: 14px;
  background: rgba(255,214,102,.08);
  color: var(--vela-text);
}
[data-install-readiness-run] {
  min-height: 42px;
  padding: 0 1rem;
  border: 1px solid rgba(182,255,46,.58);
  border-radius: 10px;
  background: #111722;
  color: var(--vela-text);
  font-weight: 800;
  cursor: pointer;
}
[data-install-readiness-run]:hover,
[data-install-readiness-run]:focus-visible { outline: none; border-color: var(--vela-lime, #b6ff2e); }
.install-readiness-bucket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .85rem;
  margin-top: 1rem;
}
.install-readiness-bucket,
[data-install-readiness-history] article {
  display: grid;
  gap: .45rem;
  padding: .9rem 1rem;
  border: 1px solid var(--vela-stroke);
  border-radius: 14px;
  background: #0b1018;
}
.install-readiness-bucket span,
[data-install-readiness-history] article span {
  color: var(--vela-green);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.install-readiness-bucket strong,
[data-install-readiness-history] article strong { color: var(--vela-text); }
.install-readiness-bucket p,
[data-install-readiness-history] article p { margin: 0; color: var(--vela-muted); font-size: .82rem; line-height: 1.45; }
[data-install-readiness-bucket-result="passed"],
[data-install-readiness-check-result="passed"] { border-color: rgba(182,255,46,.42); }
[data-install-readiness-bucket-result="failed"],
[data-install-readiness-check-result="failed"] { border-color: rgba(255,107,107,.5); }
[data-install-readiness-bucket-result="warning"] { border-color: rgba(255,214,102,.5); }
[data-install-readiness-bucket-result="skipped"] { opacity: .88; }
[data-install-demo-seed] {
  min-height: 42px;
  margin: 0 0 1rem;
  padding: 0 1rem;
  border: 1px solid rgba(182,255,46,.58);
  border-radius: 10px;
  background: #111722;
  color: var(--vela-text);
  font-weight: 800;
  cursor: pointer;
}
[data-install-demo-seed]:hover,
[data-install-demo-seed]:focus-visible { outline: none; border-color: var(--vela-lime, #b6ff2e); }
[data-install-demo-reseed] {
  min-height: 42px;
  margin: 0 0 .4rem;
  padding: 0 1rem;
  border: 1px solid rgba(182,255,46,.58);
  border-radius: 10px;
  background: #111722;
  color: var(--vela-text);
  font-weight: 800;
  cursor: pointer;
}
[data-install-demo-reseed]:hover,
[data-install-demo-reseed]:focus-visible { outline: none; border-color: var(--vela-lime, #b6ff2e); }
[data-install-demo-reseed-honesty] {
  margin: 0 0 1rem;
  color: var(--vela-muted, #93a3a1);
  font-size: .82rem;
}
.install-demo-step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .85rem;
  margin: 1rem 0 1.25rem;
}
.install-demo-step {
  display: grid;
  gap: .45rem;
  padding: .9rem 1rem;
  border: 1px solid var(--vela-stroke);
  border-radius: 14px;
  background: #0b1018;
}
.install-demo-step span {
  color: var(--vela-green);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.install-demo-step strong { color: var(--vela-text); }
.install-demo-step p { margin: 0; color: var(--vela-muted); font-size: .82rem; line-height: 1.45; }
[data-install-demo-step-status="passed"],
[data-install-demo-step-status="configured"] { border-color: rgba(182,255,46,.42); }
[data-install-demo-step-status="failed"] { border-color: rgba(255,107,107,.5); }
[data-install-demo-proof],
[data-install-demo-limitations] { margin: 0; padding-left: 1.1rem; color: var(--vela-muted); }
[data-install-list-boundary] { margin: 0 0 .85rem; color: var(--vela-muted); font-size: .9rem; }
@media (max-width: 980px) {
  .install-demo-scenario { grid-template-columns: 1fr; }
  .install-demo-scenario [data-install-demo-boundary] { padding-left: 0; padding-top: .75rem; border-left: 0; border-top: 1px solid rgba(213,231,243,.14); }
  .install-layout-workbench-grid { grid-template-columns: 1fr; }
  .install-layout-palette-list { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .install-device-grid { grid-template-columns: 1fr; }
  .install-readiness-bucket-grid { grid-template-columns: 1fr; }
}
[data-install-agent-workbench] [data-room-agent-inventory] {
  margin: .45rem 0 0;
  padding-left: 1.1rem;
  color: var(--vela-muted);
}
[data-install-agent-workbench] [data-room-agent-approve] {
  margin-top: .7rem;
}
[data-install-agent-run] code {
  display: inline-block;
  margin-top: .25rem;
  padding: .2rem .4rem;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  font-size: .82rem;
}
.vela-recording-grid article > div { min-height: 180px; border: 1px solid var(--vela-stroke); border-radius: 12px; background: #172130; display: grid; align-items: end; padding: .75rem; margin-bottom: 1rem; }
.vela-recording-grid span { width: fit-content; padding: .28rem .52rem; border-radius: 999px; background: rgba(3,7,12,.75); font-size: .76rem; }
.vela-operator-shell { grid-template-columns: 76px minmax(0, 1fr); }
.vela-operator-workspace { min-width: 0; height: 100vh; height: 100dvh; display: grid; grid-template-rows: 72px minmax(0, 1fr) auto; overflow: hidden; }
.vela-operator-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: 268px minmax(440px, 1fr) 344px;
  gap: 0;
  overflow: hidden;
}
.vela-lobby-rail,
.vela-program-column,
.vela-health-rail {
  min-height: 0;
  border-right: 1px solid var(--vela-stroke);
  overflow: hidden;
}
.vela-lobby-rail { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: #080d14; }
.vela-lobby-door { display: grid; place-items: center; min-height: 0; padding: .55rem 0 .15rem; color: #9aa5b6; font-size: 1.7rem; line-height: 1; }
.vela-lobby-head { display: grid; gap: .55rem; padding: .35rem 1rem .85rem; color: var(--vela-muted); font-size: .72rem; font-weight: 850; letter-spacing: .12em; }
.vela-lobby-head > span { min-width: 0; overflow-wrap: anywhere; }
.vela-lobby-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.vela-lobby-actions .button,
.vela-lobby-head .button { flex: 1 1 7.5rem; min-height: 38px; padding: .5rem .7rem; }
.vela-lobby-list { min-height: 0; overflow: auto; padding: 1rem; display: grid; align-content: start; gap: .6rem; border-top: 1px solid var(--vela-stroke); }
.vela-lobby-card { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: .55rem .7rem; align-items: start; min-height: 66px; padding: .75rem; border: 1px solid var(--vela-stroke); border-radius: 10px; background: #111722; }
.vela-lobby-initials { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 999px; background: #1a2331; color: #c4cede; font-size: .72rem; }
.vela-lobby-card strong,
.vela-lobby-card small { display: block; overflow-wrap: anywhere; }
.vela-lobby-card strong { overflow: hidden; text-overflow: ellipsis; }
.vela-lobby-card small { margin-top: .28rem; color: var(--vela-muted); font-size: .74rem; line-height: 1.4; }
.vela-lobby-card .button,
.vela-lobby-card form { grid-column: 1 / -1; justify-self: start; }
.vela-lobby-card .button { min-height: 38px; padding: .5rem .8rem; }
.vela-lobby-admit-all { display: flex; }
.vela-lobby-admit-all .button { width: 100%; min-height: 38px; }
.vela-policy-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .45rem .7rem; padding: .7rem 1rem; border-top: 1px solid var(--vela-stroke); background: #111722; color: var(--vela-muted); font-size: .7rem; letter-spacing: .1em; }
.vela-policy-bar strong { padding: .35rem .65rem; border-radius: 999px; background: rgba(182,255,46,.12); color: var(--vela-lime); }
.vela-program-column { padding: 1.2rem 1rem 1rem; display: flex; flex-direction: column; gap: .7rem; min-height: 0; overflow-x: hidden; overflow-y: auto; background: #0b1018; }
.vela-program-heading,
.vela-sources-heading { flex: 0 0 auto; }
.vela-program-heading strong { margin-left: auto; }
.vela-program-stage { position: relative; flex: 0 0 118px; min-height: 0; display: grid; align-items: center; overflow: hidden; border: 2px solid var(--vela-red); border-radius: 14px; background: #182231; box-shadow: 0 0 18px rgba(255,86,98,.25); }
.vela-program-stage[data-operator-whiteboard] { flex: 0 1 240px; min-height: 160px; max-height: 240px; align-items: stretch; background: #0e141d; }
.vela-program-stage[data-operator-program-wall] {
  flex: 0 0 auto;
  min-height: 220px;
  height: min(40vh, 320px);
  max-height: min(40vh, 320px);
  align-items: stretch;
  grid-template-rows: minmax(0, 1fr);
  background: #0e141d;
}
.vela-program-stage[data-operator-program-wall][data-operator-whiteboard] {
  height: min(40vh, 300px);
  max-height: min(40vh, 300px);
  grid-template-rows: minmax(0, 1fr) minmax(64px, 100px);
}
.vela-program-stage .spatial-wall {
  margin: 0;
  padding: 1.55rem .7rem .4rem;
  border: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: transparent;
}
.vela-program-stage .spatial-wall-head,
.vela-program-stage [data-spatial-wall-honesty],
.vela-program-stage [data-spatial-wall-overflow],
.vela-program-stage .spatial-wall-furniture-caption,
.vela-program-stage .spatial-wall-seat-caption { display: none; }
.vela-program-stage .spatial-wall-legend {
  margin-top: .15rem;
  gap: .15rem .5rem;
  font-size: .68rem;
  grid-template-columns: minmax(0, 1fr) auto;
}
.vela-program-stage .spatial-wall-legend ul { display: none; }
.vela-program-stage .spatial-wall-canvas {
  min-height: 110px;
  max-height: none;
  height: 100%;
}
.vela-program-stage b { position: absolute; left: 1rem; top: .75rem; z-index: 2; padding: .3rem .6rem; border-radius: 999px; background: rgba(3,7,12,.78); font-size: .78rem; }
.vela-program-avatar { width: 148px; margin-left: 2rem; }
.vela-program-board { min-height: 0; height: 100%; display: grid; }
.vela-program-stage .vela-whiteboard-readback { min-height: 0; height: 100%; margin: 0; }
.vela-program-stage .vela-whiteboard-readback > :not(.vela-whiteboard-canvas) { display: none; }
.vela-program-stage .vela-whiteboard-canvas { display: block; width: 100%; height: 100%; min-height: 0; background: #1c2736; }
.vela-program-stage .vela-whiteboard-stroke { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.operator-commissioned-strip {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .45rem .7rem;
  margin: 0;
  color: var(--vela-muted, #93a3a1);
  font-size: .78rem;
}
.operator-commissioned-strip .button { min-height: 34px; padding: .35rem .7rem; }
.vela-program-column .live-scene-controls { margin: 0; padding: .55rem .75rem; }
.vela-program-column .live-scene-controls p { margin: .15rem 0 .4rem; }
.vela-sources-pane {
  flex: 1 1 auto;
  min-height: 132px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #8a96a8 #1a2331;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding-right: .45rem;
}
.vela-sources-pane::-webkit-scrollbar { width: 10px; }
.vela-sources-pane::-webkit-scrollbar-track { background: #1a2331; border-radius: 999px; }
.vela-sources-pane::-webkit-scrollbar-thumb { background: #8a96a8; border-radius: 999px; }
.vela-source-grid {
  flex: 1 1 auto;
  min-height: 280px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  align-content: start;
}
@media (min-width: 1800px), (min-height: 1000px) {
  .vela-source-grid { min-height: 380px; }
}
.vela-source-tile { position: relative; min-height: 132px; display: grid; place-items: center; overflow: clip; border: 1px solid var(--vela-stroke); border-radius: 10px; background: #172130; color: inherit; text-decoration: none; }
.vela-source-tile.is-live { border: 2px solid var(--vela-red); box-shadow: 0 0 16px rgba(255,86,98,.18); }
.vela-source-tile b { position: absolute; left: .75rem; bottom: .65rem; padding: .28rem .5rem; border-radius: 6px; background: rgba(3,7,12,.78); font-size: .68rem; }
.vela-source-tile em { position: absolute; left: .75rem; top: .65rem; color: var(--vela-muted); font-size: .72rem; font-style: normal; max-width: calc(100% - 1.5rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vela-source-avatar { width: 96px; opacity: .8; }
.vela-health-rail { padding: 1rem; display: grid; grid-template-rows: auto; align-content: start; gap: .8rem; background: #0b1018; overflow: auto; }
.vela-health-wave { display: grid; place-items: center; color: #9da8ba; font-size: 8rem; line-height: .8; }
.vela-health-title strong { padding: .36rem .7rem; border-radius: 999px; background: rgba(77,226,175,.15); color: var(--vela-green); font-size: .72rem; }
[data-session-health-status="unknown"] .vela-health-title strong,
[data-session-health-status="not_run"] .vela-health-title strong {
  background: rgba(157,168,186,.14);
  color: var(--vela-muted);
}
[data-session-health-status="warning"] .vela-health-title strong {
  background: rgba(245, 176, 66, .16);
  color: var(--vela-amber);
}
.vela-health-placeholder {
  margin: 0;
  padding: .9rem 1rem;
  border: 1px solid var(--vela-stroke);
  border-radius: 14px;
  background: #111722;
  color: var(--vela-muted);
  font-size: .82rem;
  line-height: 1.45;
}
.vela-health-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.vela-health-metrics article { min-height: 78px; padding: 1rem; border: 1px solid var(--vela-stroke); border-radius: 10px; background: #111722; }
.vela-health-metrics strong { display: block; color: var(--vela-green); font-size: 1.45rem; letter-spacing: -.04em; }
.vela-health-metrics strong.warn { color: var(--vela-amber); }
.vela-health-metrics small { font-size: .72rem; color: var(--vela-text); }
.vela-health-metrics span { display: block; margin-top: .5rem; color: var(--vela-muted); font-size: .72rem; }
.vela-bitrate { padding: .9rem 1rem; border: 1px solid var(--vela-stroke); border-radius: 14px; background: #111722; }
.vela-bitrate strong { padding: .25rem .55rem; border-radius: 999px; background: rgba(77,226,175,.14); color: var(--vela-green); font-size: .7rem; }
.vela-bitrate p { display: flex; align-items: end; gap: .28rem; min-height: 36px; margin: .8rem 0 0; }
.vela-bitrate i { width: 5px; border-radius: 999px; background: #9ac62e; }
.vela-live-sources { min-height: 0; overflow: auto; }
.vela-live-sources ul { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .75rem; }
.vela-live-sources li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: .5rem; align-items: start; }
.vela-live-sources li > span { width: 22px; height: 12px; border-radius: 999px; background: rgba(255,86,98,.2); position: relative; margin-top: .28rem; }
.vela-live-sources li > span::after { content: ''; position: absolute; left: .42rem; top: .25rem; width: .32rem; height: .32rem; border-radius: 999px; background: var(--vela-red); }
.vela-live-sources strong,
.vela-live-sources small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vela-live-sources small { color: var(--vela-muted); margin-top: .35rem; }
.vela-operator-live-activity {
  display: grid;
  gap: .35rem;
  padding: .7rem .75rem;
  border: 1px solid var(--vela-stroke);
  border-radius: 12px;
  background: #111722;
}
.vela-operator-live-activity h2 {
  margin: 0;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vela-muted);
}
.vela-operator-live-activity p,
.vela-operator-live-activity li {
  margin: 0;
  color: var(--vela-text);
  font-size: .82rem;
}
.vela-operator-live-activity ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .25rem;
}
.vela-operator-live-activity li {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
}
.vela-trainer-live-queues {
  display: grid;
  gap: .85rem;
  margin: 0 0 1.15rem;
  padding: .85rem .9rem;
  border: 1px solid var(--vela-stroke);
  border-radius: 14px;
  background: #111722;
}
.vela-trainer-live-queues h2,
.vela-trainer-live-queues h3 {
  margin: 0 0 .4rem;
}
.vela-trainer-live-queues h2 {
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vela-muted);
}
.vela-trainer-live-queues h3 {
  font-size: .92rem;
}
.vela-trainer-live-queues p,
.vela-trainer-live-queues li,
.vela-trainer-live-queues span,
.vela-trainer-live-queues small,
.vela-trainer-live-queues em {
  margin: 0;
  color: var(--vela-text);
  font-size: .82rem;
}
.vela-trainer-live-queues ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}
.vela-trainer-live-queues li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .45rem .7rem;
}
.vela-trainer-live-queues form {
  margin: 0;
}
.vela-trainer-live-queues button {
  min-height: 2rem;
}
.vela-diagnostics-proof {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.vela-diagnostics-proof h2 { margin: 0 0 .35rem; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--vela-muted); }
.vela-diagnostics-proof > p { margin: 0 0 .6rem; font-weight: 850; }
.vela-diagnostics-proof .operator-diagnostics-badge,
.vela-diagnostics-proof .operator-warning-list li,
.vela-diagnostics-proof .operator-event-list li { background: rgba(255,255,255,.04); }
.vela-health-rail .operator-summary-grid { grid-template-columns: 1fr 1fr; margin: 0; }
.vela-health-rail .operator-summary-card { border: 1px solid var(--vela-stroke); background: #111722; color: var(--vela-text); }
.vela-bottom-bar {
  position: static;
  z-index: 12;
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  border-top: 1px solid var(--vela-stroke);
  background: rgba(17, 23, 34, .96);
  backdrop-filter: blur(14px);
}
.vela-bottom-bar p { margin: 0 auto 0 0; color: var(--vela-muted); font-size: .78rem; }
.vela-bottom-bar .button { min-width: 136px; }
@media (max-width: 1180px) {
  .vela-operator-grid { grid-template-columns: 240px minmax(0, 1fr); }
  .vela-health-rail { display: none; }
  .vela-dashboard-grid { grid-template-columns: 1fr; }
  .vela-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .vela-app-shell,
  .vela-operator-shell { grid-template-columns: 1fr; }
  .vela-sidebar { position: relative; height: auto; grid-template-columns: auto 1fr; grid-template-rows: auto; padding: .75rem; }
  .vela-sidebar nav { display: flex; flex-wrap: wrap; justify-content: center; }
  .vela-sidebar-bottom { display: none !important; }
  .vela-sidebar a[aria-current="page"]::before { display: none; }
  body.operator-dashboard { height: auto; overflow: auto; }
  body.operator-dashboard main { height: auto; overflow: visible; }
  body.operator-dashboard .vela-app-shell { height: auto; overflow: visible; }
  .vela-operator-workspace { height: auto; overflow: visible; }
  .vela-operator-grid { grid-template-columns: 1fr; overflow: visible; padding-bottom: 0; }
  .vela-lobby-rail { grid-template-rows: auto auto minmax(0, 300px) auto; }
  .vela-program-column { min-height: 640px; }
  .vela-bottom-bar { position: static; flex-wrap: wrap; }
  .vela-dashboard-topbar,
  .vela-operator-topbar { flex-direction: column; align-items: stretch; }
  .vela-quick-row { grid-template-columns: 1fr; }
  .vela-search { width: 100%; margin: 0; }
  .vela-recording-grid,
  .vela-stat-grid { grid-template-columns: 1fr; }
}

/* ITER-047 public product skin */
body.public-skin {
  --vela-bg: #0b1012;
  --vela-panel: #141a1c;
  --vela-panel-2: #171f21;
  --vela-stroke: #2a3a38;
  --vela-muted: #93a3a1;
  --vela-text: #eef4f3;
  --public-accent: #6f9d96;
  --public-accent-ink: #071210;
  --public-accent-wash: rgba(111, 157, 150, .18);
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% -4%, rgba(111, 157, 150, .12), transparent 28rem),
    radial-gradient(circle at 88% 0%, rgba(90, 122, 138, .1), transparent 26rem),
    var(--vela-bg);
  color: var(--vela-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.public-skin a { color: inherit; }
body.public-skin main.public-shell { max-width: none; }
.public-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .9rem clamp(1rem, 3vw, 2.5rem);
  border-bottom: 1px solid rgba(37, 48, 68, .9);
  background: rgba(8, 12, 18, .82);
  backdrop-filter: blur(18px);
}
.public-brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--vela-text);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -.03em;
}
.public-brand span {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: .8rem;
  background: var(--public-accent);
  color: var(--public-accent-ink);
  font-size: .92rem;
  font-weight: 900;
}
.public-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
  color: var(--vela-muted);
  font-size: .92rem;
}
.public-nav a {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .48rem .85rem;
  text-decoration: none;
}
.public-nav a:hover,
.public-nav a[aria-current="page"] {
  color: var(--vela-text);
  background: rgba(255, 255, 255, .04);
}
.public-nav-signin {
  background: var(--public-accent) !important;
  color: var(--public-accent-ink) !important;
  font-weight: 800;
}
.public-shell {
  width: min(1440px, calc(100vw - 2rem));
  margin: 0 auto;
  padding: clamp(1.4rem, 3vw, 3.2rem) 0 clamp(3rem, 6vw, 6rem);
}
.public-kicker {
  margin: 0 0 .7rem;
  color: var(--public-accent);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 800;
}
body.public-skin h1,
body.public-skin h2 {
  font-family: Fraunces, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  font-weight: 500;
  letter-spacing: -.04em;
  color: var(--vela-text);
}
body.public-skin h1 {
  font-size: clamp(2.4rem, 6vw, 5.1rem);
  line-height: .96;
  margin: 0 0 1.1rem;
  max-width: 14ch;
}
body.public-skin h2 {
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: 1.05;
  margin: 0 0 1.4rem;
  max-width: 18ch;
}
body.public-skin p { color: var(--vela-muted); line-height: 1.65; }
.public-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .8fr);
  gap: clamp(1.4rem, 3vw, 3rem);
  align-items: stretch;
  min-height: min(34rem, calc(100vh - 8rem));
}
.public-hero-copy p { max-width: 38rem; font-size: 1.12rem; }
.public-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.6rem;
}
.public-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .8rem 1.2rem;
  border-radius: 999px;
  background: var(--public-accent);
  color: var(--public-accent-ink);
  font-weight: 800;
  text-decoration: none;
  border: 1px solid transparent;
}
.public-btn-secondary {
  background: transparent;
  color: var(--vela-text);
  border-color: var(--vela-stroke);
}
.public-hero-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  min-height: 22rem;
  padding: 1.1rem;
  border: 1px solid var(--vela-stroke);
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 15%, var(--public-accent-wash), transparent 12rem),
    linear-gradient(180deg, #111722, #0c121a);
}
.public-hero-stage .public-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
}
.public-stage-tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .25rem;
  min-height: 8.5rem;
  padding: 1rem;
  border-radius: 20px;
  background: rgba(8, 12, 18, .55);
  border: 1px solid rgba(111, 157, 150, .22);
}
.public-stage-tile.is-lead { grid-column: 1 / -1; min-height: 11rem; }
.public-stage-tile span { color: var(--public-accent); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.public-stage-tile strong { color: var(--vela-text); font-size: 1.15rem; }
.public-section { margin-top: clamp(3rem, 7vw, 5.5rem); }
.public-pillar-grid,
.public-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.public-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.public-card {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-height: 12.5rem;
  padding: 1.15rem 1.2rem 1.2rem;
  border: 1px solid var(--vela-stroke);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(17, 23, 34, .96), rgba(12, 17, 26, .96));
}
.public-card h3 {
  margin: 0;
  color: var(--vela-text);
  font-size: 1.2rem;
  letter-spacing: -.02em;
}
.public-card p { margin: 0; font-size: .95rem; }
.public-badge {
  display: inline-flex;
  align-self: flex-start;
  margin-top: auto;
  padding: .28rem .6rem;
  border-radius: 999px;
  background: var(--public-accent-wash);
  color: var(--public-accent);
  font-size: .72rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.public-badge[data-public-state="future"] {
  background: rgba(143, 155, 173, .12);
  color: var(--vela-muted);
}
.public-badge[data-public-state="illustration"] {
  background: rgba(8, 12, 18, .7);
}
.public-cta {
  margin-top: clamp(3rem, 7vw, 5.5rem);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid var(--vela-stroke);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(17, 23, 34, .9), rgba(8, 12, 18, .9));
}
.public-cta h2 { max-width: 14ch; }
.public-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem clamp(1rem, 3vw, 2.5rem) 2rem;
  color: var(--vela-muted);
  border-top: 1px solid var(--vela-stroke);
}
.public-footer p { margin: 0; }
body.public-login-page .public-shell {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 11rem);
}
.public-auth-card,
body.public-skin .auth-card {
  width: min(28rem, 100%);
  padding: 1.6rem 1.5rem 1.5rem;
  border: 1px solid var(--vela-stroke);
  border-radius: 24px;
  background: #111722;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
}
body.public-skin .auth-card h1 { max-width: none; font-size: 2.4rem; }
body.public-skin .auth-card form { display: grid; gap: .85rem; margin-top: 1.1rem; }
body.public-skin .auth-card label { display: grid; gap: .35rem; color: var(--vela-text); font-size: .92rem; }
body.public-skin .auth-card input {
  width: 100%;
  min-height: 46px;
  padding: .7rem .85rem;
  border-radius: 12px;
  border: 1px solid var(--vela-stroke);
  background: #0c121a;
  color: var(--vela-text);
}
body.public-skin .auth-card button[type="submit"] {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--public-accent);
  color: var(--public-accent-ink);
  font-weight: 800;
}
.public-password-field {
  position: relative;
  display: block;
}
.public-password-field input {
  padding-right: 3rem;
}
.public-password-field [data-password-toggle] {
  position: absolute;
  top: 50%;
  right: .3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--vela-muted);
  transform: translateY(-50%);
}
.public-password-field [data-password-toggle]:hover,
.public-password-field [data-password-toggle]:focus-visible {
  color: var(--vela-text);
  background: rgba(255, 255, 255, .06);
  outline: 2px solid rgba(213, 231, 243, .28);
  outline-offset: 0;
}
.public-password-field [data-password-toggle] svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.public-password-field [data-password-toggle][aria-pressed="false"] [data-password-icon="hide"],
.public-password-field [data-password-toggle][aria-pressed="true"] [data-password-icon="show"],
.public-password-field [data-password-toggle] svg[hidden] {
  display: none;
}
body.public-skin .error { color: #ff8f8f; }
.public-auth-help { margin: 1rem 0 0; font-size: .92rem; }
body.public-attendee-page .public-shell { max-width: none; }
body.public-attendee-page .panel,
body.public-attendee-page .prejoin-card {
  border-color: var(--vela-stroke);
  background: linear-gradient(180deg, rgba(17, 23, 34, .96), rgba(12, 17, 26, .96));
  box-shadow: none;
}
body.public-attendee-page .prejoin-shell { max-width: 720px; }
.prejoin-devices { display: grid; gap: .75rem; margin: .85rem 0 1rem; }
.prejoin-preview {
  position: relative;
  min-height: 160px;
  overflow: hidden;
  border: 1px solid var(--vela-stroke, #2a3a38);
  border-radius: 14px;
  background: #0b1018;
}
.prejoin-preview video {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: #0b1018;
}
.prejoin-preview [data-prejoin-preview-empty] {
  margin: 0;
  padding: 1.2rem 1rem;
  color: var(--vela-muted, #93a3a1);
  font-size: .82rem;
}
.vela-device-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; }
.vela-device-list li {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .7rem;
  border: 1px solid rgba(147, 163, 161, .18);
  border-radius: 10px;
  background: #111722;
}
.prejoin-devices [data-prejoin-camera="ready"],
.prejoin-devices [data-prejoin-microphone="ready"],
.prejoin-devices [data-prejoin-speaker="ready"] { border-color: rgba(77, 226, 175, .35); }
.prejoin-devices [data-prejoin-camera="permission-denied"],
.prejoin-devices [data-prejoin-microphone="permission-denied"] { border-color: rgba(255, 86, 98, .4); }
.prejoin-devices [data-prejoin-retry] { justify-self: start; }
.public-attendee-empty h1 { max-width: 16ch; }
body.public-attendee-page a.public-card {
  text-decoration: none;
  color: inherit;
}
body.public-attendee-page .session-pick-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin: 1.25rem 0;
  padding: 0;
  list-style: none;
}
body.public-attendee-page .session-pick-stats li {
  padding: .85rem 1rem;
  border: 1px solid var(--vela-stroke);
  border-radius: 16px;
}
body.public-attendee-page .session-pick-stats span {
  display: block;
  color: var(--public-accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.public-attendee-page .session-pick-stats strong {
  display: block;
  margin: .2rem 0 .15rem;
  color: var(--vela-text);
  font-size: 1.4rem;
}
body.public-attendee-page .session-pick-stats small {
  color: var(--public-muted, var(--muted));
  font-size: .82rem;
}
body.public-attendee-page .session-pick-grid { margin: 1.25rem 0; }
body.session-remote-page .vela-app-shell,
body.room-panel-page .vela-app-shell {
  display: block;
  min-height: 0;
  background: transparent;
}
@media (min-width: 1800px) {
  .public-shell { width: min(1760px, calc(100vw - 4rem)); }
  .public-hero { min-height: min(760px, calc(100vh - 9rem)); }
  .public-pillar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .public-hero,
  .public-pillar-grid,
  .public-steps { grid-template-columns: 1fr 1fr; }
  body.public-skin h1 { max-width: none; }
  body.public-attendee-page .session-pick-stats { grid-template-columns: 1fr 1fr; }
}
.live-commissioned-room {
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--vela-stroke, #2a3a38);
  border-radius: 12px;
  background: #111722;
}
.live-commissioned-room .eyebrow {
  margin: 0 0 .35rem;
  color: var(--vela-lime, #6f9d96);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .68rem;
}
.live-commissioned-room h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.live-commissioned-room p { margin: .2rem 0; color: var(--vela-muted, #93a3a1); font-size: .82rem; }
.live-commissioned-room [data-commissioned-honesty] { font-size: .74rem; }
.live-commissioned-layout {
  display: block;
  width: 100%;
  max-height: 180px;
  margin-top: .7rem;
  background: #0e141d;
  border-radius: 10px;
}
.vela-program-column .live-commissioned-room { flex: 0 0 auto; }
.spatial-wall {
  margin: 0 0 1rem;
  padding: .9rem 1rem 1.05rem;
  border: 1px solid var(--vela-stroke, #2a3a38);
  border-radius: 16px;
  background: #0e141d;
}
.spatial-wall-head { margin: 0 0 .7rem; }
.spatial-wall-head h2 { margin: 0 0 .25rem; font-size: 1.2rem; color: var(--vela-text, #f4f6fb); }
.spatial-wall-head p { margin: .15rem 0; color: var(--vela-muted, #93a3a1); font-size: .82rem; }
.spatial-wall [data-spatial-wall-honesty] { font-size: .74rem; }
.spatial-wall-canvas {
  display: block;
  width: 100%;
  min-height: 280px;
  max-height: min(68vh, 640px);
  overflow: visible;
  background:
    radial-gradient(circle at 18% 16%, rgba(77, 226, 175, .08), transparent 28%),
    #0b1018;
  border-radius: 12px;
}
.spatial-wall-floor {
  fill: rgba(23, 33, 48, .55);
  stroke: rgba(147, 163, 161, .16);
  stroke-width: 1.25;
}
.spatial-wall-zone .install-layout-zone {
  fill: none;
  stroke: none;
}
.spatial-wall-seat-bank {
  fill: rgba(123, 177, 255, .08);
  stroke: rgba(123, 177, 255, .42);
  stroke-dasharray: 6 5;
}
.spatial-wall-label-chip {
  fill: rgba(11, 16, 24, .82);
  stroke: rgba(147, 163, 161, .22);
}
.spatial-wall-furniture:not([data-spatial-scene-emphasized="true"]) {
  opacity: .72;
}
.spatial-wall-furniture-label,
.spatial-wall-seat-caption,
.spatial-wall-seat-initials {
  fill: #e8f1ee;
  font-size: 8px;
  font-weight: 750;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  paint-order: stroke;
  stroke: none;
}
.spatial-wall-seat-initials {
  font-size: 9px;
  font-weight: 800;
  stroke-width: 2.5px;
}
.spatial-wall-furniture .install-layout-icon rect,
.spatial-wall-furniture .install-layout-icon circle,
.spatial-wall-furniture .install-layout-icon polygon,
.spatial-wall-furniture .install-layout-icon path,
.spatial-wall-furniture .install-layout-icon line {
  filter: none;
  stroke-width: 1.7;
}
.spatial-wall-seat-disc {
  fill: #172130;
  stroke: rgba(147, 163, 161, .5);
  stroke-width: 1.4;
}
.spatial-wall-seat[data-spatial-seat-state="empty"] .spatial-wall-seat-initials {
  fill: #8b9b98;
}
.spatial-wall-seat[data-spatial-seat-state="joined"] .spatial-wall-seat-disc,
.spatial-wall-seat[data-spatial-seat-state="assigned"] .spatial-wall-seat-disc {
  fill: rgba(77, 226, 175, .2);
  stroke: rgba(77, 226, 175, .82);
}
.spatial-wall-seat[data-spatial-seat-state="admitted"] .spatial-wall-seat-disc {
  fill: rgba(255, 214, 102, .16);
  stroke: rgba(255, 214, 102, .72);
}
.spatial-wall-legend {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: .3rem .75rem;
  margin: .55rem 0 0;
  color: var(--vela-muted, #93a3a1);
  font-size: .74rem;
}
.spatial-wall-legend p { margin: 0; }
.spatial-wall-legend ul {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.spatial-wall-legend li {
  padding: .12rem .45rem;
  border: 1px solid rgba(147, 163, 161, .22);
  border-radius: 999px;
  background: rgba(23, 33, 48, .7);
  color: #d7e4e1;
  font-size: .68rem;
}
.spatial-wall [data-spatial-wall-overflow]:not([hidden]) {
  margin: .55rem 0 0;
  color: var(--vela-muted, #93a3a1);
  font-size: .78rem;
}
body.display-page .spatial-wall-head .eyebrow,
body.display-page [data-spatial-wall-honesty] { display: none; }
body.display-page .spatial-wall-head { margin: 0 0 .4rem; }
body.display-page .spatial-wall-canvas { min-height: 280px; max-height: min(52vh, 460px); }
.vela-room-panel-lesson .spatial-wall { margin-bottom: 0; }
.vela-trainer-spatial-wall {
  margin: 0 0 1.1rem;
}
.vela-trainer-spatial-wall .spatial-wall {
  margin: 0;
}
.vela-trainer-spatial-wall .spatial-wall-head .eyebrow,
.vela-trainer-spatial-wall [data-spatial-wall-honesty],
.vela-trainer-spatial-wall .spatial-wall-furniture-caption {
  display: none;
}
.vela-trainer-spatial-wall .spatial-wall-canvas {
  min-height: 240px;
  max-height: min(46vh, 380px);
}
.spatial-wall-zone[data-spatial-scene-emphasized="true"] .install-layout-zone,
.spatial-wall [data-spatial-scene-emphasized="true"] .install-layout-zone {
  fill: rgba(77, 226, 175, .16);
  stroke: rgba(77, 226, 175, .78);
  stroke-width: 2;
  stroke-dasharray: none;
}
.spatial-wall-furniture[data-spatial-scene-emphasized="true"] .install-layout-icon rect,
.spatial-wall-furniture[data-spatial-scene-emphasized="true"] .install-layout-icon circle,
.spatial-wall-furniture[data-spatial-scene-emphasized="true"] .install-layout-icon polygon {
  stroke: rgba(77, 226, 175, .95);
}
.live-scene-controls {
  margin: 0 0 1rem;
  padding: .8rem 1rem;
  border: 1px solid var(--vela-stroke, #2a3a38);
  border-radius: 12px;
  background: #111722;
}
.live-scene-controls h2 { margin: 0 0 .3rem; font-size: 1rem; }
.live-scene-controls p { margin: .2rem 0 .65rem; color: var(--vela-muted, #93a3a1); font-size: .8rem; }
.live-scene-controls form { display: flex; flex-wrap: wrap; gap: .45rem; }
.live-scene-controls [aria-pressed="true"] {
  background: rgba(77, 226, 175, .18);
  color: var(--vela-text, #f4f6fb);
  border-color: rgba(77, 226, 175, .55);
}
.vela-display-content:has([data-spatial-wall]) .vela-display-aggregate {
  margin-top: .75rem;
}
.vela-display-content:has([data-spatial-wall]) .vela-display-aggregate ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .35rem;
  padding: 0;
  margin: .4rem 0 0;
  list-style: none;
}
@media (max-width: 760px) {
  .public-topbar { align-items: flex-start; flex-direction: column; }
  .public-nav { justify-content: flex-start; overflow-x: auto; width: 100%; }
  .public-shell { width: min(100% - 1rem, 720px); }
  .public-hero,
  .public-pillar-grid,
  .public-steps,
  .public-footer { grid-template-columns: 1fr; flex-direction: column; align-items: flex-start; }
}

/* ITER-100 — role clarity: one next action, less bubbly chrome */
body.role-clarity {
  --role-now-ink: #eef4f3;
  --role-now-muted: #8fa3a0;
  --role-now-line: #2c3d3a;
  --role-now-fill: #121a1c;
}
.role-now {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem 1rem;
  margin: 0 0 1rem;
  padding: .7rem 0 .85rem;
  border-bottom: 1px solid var(--role-now-line);
  background: transparent;
  border-radius: 0;
}
.role-now-who {
  margin: 0;
  color: var(--role-now-muted);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.role-now-who strong {
  display: inline;
  margin-left: .35rem;
  color: var(--role-now-ink);
  letter-spacing: 0;
  text-transform: none;
  font-size: 1rem;
}
.role-now-next {
  flex: 1 1 16rem;
  margin: 0;
  color: var(--role-now-ink);
  font-size: 1.02rem;
  line-height: 1.35;
}
.role-now-action {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 .8rem;
  border: 1px solid #4f7a74;
  border-radius: 4px;
  background: #6f9d96;
  color: #071210;
  text-decoration: none;
  font-size: .86rem;
  font-weight: 700;
}
.role-now-secondary {
  margin: .75rem 0 0;
  border: 1px solid var(--role-now-line);
  border-radius: 4px;
  background: var(--role-now-fill);
}
.role-now-secondary > summary {
  cursor: pointer;
  list-style: none;
  padding: .65rem .85rem;
  color: var(--role-now-ink);
  font-size: .88rem;
  font-weight: 650;
}
.role-now-secondary > summary::-webkit-details-marker { display: none; }
.role-now-secondary > summary::after {
  content: 'Show';
  float: right;
  color: var(--role-now-muted);
  font-size: .74rem;
  font-weight: 600;
}
.role-now-secondary[open] > summary::after { content: 'Hide'; }
.role-now-secondary > *:not(summary) { margin: 0 .85rem .85rem; }
body.role-clarity .panel,
body.role-clarity .prejoin-card,
body.role-clarity .session-remote-card,
body.role-clarity .vela-room-panel-card,
body.role-clarity .vela-live-card,
body.role-clarity .vela-lobby-card,
body.role-clarity .vela-app-card,
body.role-clarity .public-card,
body.role-clarity .auth-card {
  border-radius: 6px;
}
body.role-clarity .session-live-pill,
body.role-clarity .vela-joined-pill,
body.role-clarity .vela-red-badge,
body.role-clarity .vela-onair-pill,
body.role-clarity .vela-person-pill,
body.role-clarity .vela-trainer-status-pill,
body.role-clarity .vela-trainer-rec-pill,
body.role-clarity .vela-display-status-pill,
body.role-clarity .public-badge,
body.role-clarity .proposal-demo-badge {
  border-radius: 4px;
}
body.role-clarity .button,
body.role-clarity button {
  border-radius: 4px;
}
.vela-bottom-primary { display: flex; align-items: center; gap: .5rem; }
.vela-bottom-more { margin-left: auto; min-width: 8rem; }
.vela-bottom-more > summary {
  cursor: pointer;
  padding: .45rem .7rem;
  border: 1px solid var(--vela-stroke, #2a3444);
  border-radius: 4px;
  color: var(--vela-text, #eef2f6);
  font-size: .82rem;
}
.vela-bottom-more[open] { position: relative; }
.vela-bottom-more[open] > :not(summary) {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .45rem;
}
body.operator-dashboard .vela-operator-topbar .role-now {
  margin: 0;
  padding: .15rem 0 0;
  border-bottom: 0;
}
body.operator-dashboard .vela-operator-topbar .role-now-next {
  font-size: .9rem;
}
body.display-page .role-now,
body.room-panel-page .role-now {
  margin-bottom: .65rem;
}
body.vela-dashboard .role-now { padding-left: 0; }

/* ITER-106 — chrome quieting: one job first, leftover cards in details */
.vela-health-wave { display: none; }
.public-attendee-empty .public-pillar-grid { display: none; }
[data-organizer-metrics] .vela-stat-grid,
[data-schedule-metrics] .vela-stat-grid,
[data-trainer-metrics] .vela-stat-grid {
  margin: 0;
}