/* =============================================================================
   EZ Web Streams — Studio theme
   A pure PRESENTATION layer over record.html. No behaviour, no ids, no handlers:
   every rule here restyles markup that already exists, so removing the <link>
   (and studio-theme.js) returns the page to its previous appearance exactly.

   Loaded LAST in <body> on purpose — record.html's component CSS lives in an
   inline <style> in the body, so document order is what lets these win without
   an !important on every line.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root, html body {
  /* ---- surfaces ---- */
  --s-bg:        #0A1020;
  --s-nav:       #0D1428;
  --s-panel:     #111B30;
  --s-panel2:    #151F36;
  --s-hover:     #1B2947;
  --s-border:    rgba(255,255,255,.08);
  --s-divider:   rgba(255,255,255,.06);
  --s-surface:   linear-gradient(180deg,#131D34,#10182C);
  /* ---- brand ---- */
  --s-blue:      #4E7BFF;
  --s-blue-h:    #5E8CFF;
  --s-blue-p:    #3D6FFF;
  --s-glow:      rgba(78,123,255,.25);
  --s-primary:   #355CFF;
  --s-primary-h: #4A71FF;
  --s-danger:    #E5484D;
  --s-danger-h:  #F15B61;
  --s-success:   #3DDC84;
  /* ---- text ---- */
  --s-t1:        #FFFFFF;
  --s-t2:        #B9C3D9;
  --s-t3:        #7F8AA3;
  --s-t4:        #5D6882;
  /* ---- elevation ---- */
  --s-shadow-card: 0 18px 50px rgba(0,0,0,.35);
  --s-shadow-btn:  0 6px 18px rgba(0,0,0,.22);
  --s-shadow-hov:  0 10px 24px rgba(0,0,0,.28);
  /* ---- rhythm ---- */
  --s-pad: 24px; --s-gap: 12px; --s-sec: 24px;

  /* Re-point the app's own tokens so untouched components inherit the dark system
     instead of the light one they were built against. */
  --bg: #151F36; --card: #111B30; --line: rgba(255,255,255,.08);
  --txt: #FFFFFF; --dim: #B9C3D9; --muted: #7F8AA3;
  --acc: #4E7BFF; --accd: #3D6FFF; --danger: #E5484D;
}

/* ---------- foundation ---------- */
html body {
  background: var(--s-bg);
  color: var(--s-t1);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html body * { font-family: inherit; }
/* One ambient wash so the flat navy reads as depth, not paint. */
html body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 500px at 18% -8%, rgba(78,123,255,.10), transparent 62%),
    radial-gradient(760px 460px at 88% 6%, rgba(78,123,255,.06), transparent 60%);
}
html body > * { position: relative; z-index: 1; }
::selection { background: rgba(78,123,255,.32); color: #fff; }

/* Never square. Never a stray outline. */
html body :focus { outline: none; }
html body :focus-visible { outline: 2px solid var(--s-blue); outline-offset: 2px; border-radius: 12px; }

/* ---------- scrollbars ---------- */
html body ::-webkit-scrollbar { width: 10px; height: 10px; }
html body ::-webkit-scrollbar-track { background: transparent; }
html body ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
html body ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); background-clip: content-box; }

/* =============================================================================
   TOP NAVIGATION — one calm 72px rail. Brand left, destinations centre,
   account right. Nothing operational lives up here.
   ============================================================================= */
html body header.nav {
  background: var(--s-nav);
  border-bottom: 1px solid var(--s-divider);
  padding: 0 var(--s-pad); min-height: 72px; gap: 18px;
  box-shadow: none;
}
html body header.nav .brand,
html body header.nav a.brand {
  font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--s-t1);
  display: inline-flex; align-items: center; gap: 11px; text-decoration: none;
}
html body header.nav .brand span { color: var(--s-blue); }
html body header.nav .brand-ico,
html body header.nav .brand img { width: 34px; height: 34px; border-radius: 10px; }

/* Destination tabs injected by studio-theme.js */
html body .st-navtabs { display: inline-flex; align-items: center; gap: 6px; }
html body .st-tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  height: 46px; padding: 0 18px; border-radius: 14px;
  font-size: 16px; font-weight: 600; color: var(--s-t3);
  transition: color .2s ease-out, background .2s ease-out;
}
html body .st-tab svg { width: 20px; height: 20px; stroke-width: 2; color: currentColor; }
html body .st-tab:hover { color: var(--s-t2); background: rgba(255,255,255,.04); }
html body .st-tab.on { color: var(--s-t1); background: rgba(78,123,255,.12); box-shadow: inset 0 -2px 0 var(--s-blue); }

/* Ideate is not a destination, it is an action - the same kind of control as Editor, which is
   already a pill. Matching that treatment says so before the label is read, and stops the tab
   group from implying Ideate is a third page. Values copied from .chip so the two pills are
   genuinely identical rather than approximately so. */
html body .st-tab.st-tab-action {
  min-height: 44px; height: 44px; padding: 0 16px; border-radius: 14px;
  font-size: 15px; font-weight: 500; margin-left: 6px;
  /* These three come from `.nav .navbtn` in record.html, which overrides .chip's own background -
     so matching .chip alone left Ideate and Editor sitting side by side in different greys. */
  background: rgba(255,255,255,.08); color: #e8edf6; border: 1px solid rgba(255,255,255,.16);
}
html body .st-tab.st-tab-action:hover {
  background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.42);
  transform: translateY(-1px); color: #fff;
}
html body .st-tab.st-tab-action svg { color: var(--s-t3); }

/* PRO PLAN pill + help + avatar */
html body .navright { gap: 12px; display: flex; align-items: center; }
html body .ed-navplan,
html body #navPlan {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px;
  border-radius: 14px; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  background: rgba(78,123,255,.14); color: #CFDBFF; border: 1px solid rgba(78,123,255,.30);
}
html body .ed-navplan.pro { background: rgba(78,123,255,.16); color: #DCE6FF; }
html body .ezn-avatar,
html body #btnProfile {
  width: 44px; height: 44px; border-radius: 999px; padding: 0;
  background: var(--s-panel2); border: 1px solid var(--s-border); color: var(--s-t2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease-out, transform .2s ease-out;
}
html body .ezn-avatar:hover { background: var(--s-hover); transform: translateY(-1px); }
html body .navright #helpWrap .bbbtn,
html body .navright #helpWrap .chip,
html body .navright #helpWrap > button {
  width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 999px;
  background: var(--s-panel2); border: 1px solid var(--s-border); justify-content: center;
}
html body .navright #helpWrap > button > span:not(.ic) { display: none; }
html body #signInBtn {
  height: 44px; border-radius: 14px; padding: 0 18px; font-size: 15px; font-weight: 600;
  background: var(--s-panel2); border: 1px solid var(--s-border); color: var(--s-t1);
}

/* Account menu — glass card */
html body .ed-profmenu {
  background: rgba(17,27,48,.92); backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--s-border); border-radius: 20px; padding: 10px;
  box-shadow: var(--s-shadow-card); min-width: 244px;
}
html body .ed-profhead { color: var(--s-t3); font-size: 13px; font-weight: 500; border-bottom: 1px solid var(--s-divider); padding: 10px 12px 12px; }
html body .ed-profitem {
  color: var(--s-t2); font-size: 15px; font-weight: 500; border-radius: 12px; padding: 10px 12px; gap: 11px;
  transition: background .2s ease-out, color .2s ease-out;
}
html body .ed-profitem:hover { background: var(--s-hover); color: var(--s-t1); }
html body .ed-pi-ico { background: var(--s-panel2); border: 1px solid var(--s-border); border-radius: 10px; }
html body .profdiv, html body hr.profdiv { border-top: 1px solid var(--s-divider); }

/* =============================================================================
   CONTROL TOOLBAR — grouped, 52px tall, generous, six clusters max.
   ============================================================================= */
html body .stagebar,
html body .bbwrap, html body .bb {
  background: transparent; border: 0; box-shadow: none;
  gap: var(--s-gap); padding: 0;
}
html body .st-toolbar {
  display: flex; align-items: center; gap: var(--s-gap); flex-wrap: nowrap;
  margin: 0 0 4px; min-width: 0;   /* 24 -> 4: with recwrap's 24px row-gap this is 28px above the stage, was 48 */
}
/* One row is the whole point of grouping — so the clusters give way before the row
   does: they shrink, labels ellipsize, and the primary/danger actions stay put. */
html body .st-toolgroup { min-width: 0; flex: 0 0 auto; }
/* A relocated primary (Share Screen) sitting inside a cluster must read as a peer,
   not compete with Invite/End Stream for attention. Hierarchy over colour. */
html body .st-toolgroup .navshare,
html body .bbmenu .navshare {
  background: transparent; border-color: transparent; color: var(--s-t1);
  box-shadow: none; font-weight: 600;
}
html body .st-toolgroup .navshare:hover,
html body .bbmenu .navshare:hover { background: var(--s-hover); box-shadow: none; }
html body .st-toolgroup .navshare .ic, html body .bbmenu .navshare .ic { color: var(--s-t3); }
html body .bbmenu .navshare { width: 100%; justify-content: flex-start; height: 46px; border-radius: 12px; }
html body .st-toolbar > .cta,
html body .st-toolbar > .navshare,
/* Invite arrives as its wrapper rather than a bare button (its menu is a child), so the
   wrapper has to hold its size in the rail like the buttons on either side of it. */
html body .st-toolbar > .navdd,
html body .st-toolbar > .navend { flex: 0 0 auto; }
html body .st-toolbar > .navdd { position: relative; }
html body .st-toolgroup .bbbtn { min-width: 0; }
html body .st-toolgroup .bbbtn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Below a comfortable desktop the SECOND control in a cluster drops its label and
   keeps its icon + chevron. The cluster's own identity is carried by its first
   control, so nothing becomes ambiguous — and the row never clips an action. */
@media (max-width: 1400px) {
  /* index on the GROUP's children — the controls are wrapped in .bbdd spans, so
     :not(:first-child) on .bbbtn itself would always match nothing. */
  html body .st-toolgroup > *:not(:first-child) .bbbtn > span:not(.st-state),
  html body .st-toolgroup > button.bbbtn:not(:first-child) > span:not(.st-state) { display: none; }
  html body .st-toolgroup > *:not(:first-child) .bbbtn,
  html body .st-toolgroup > button.bbbtn:not(:first-child) { padding: 0 12px; }
}
@media (max-width: 1180px) {
  html body .st-toolbar { flex-wrap: wrap; }
  /* below this the labels cost more than they explain — icons carry it */
  html body .st-toolgroup .bbbtn > span:not(.st-state) { display: none; }
  html body .st-toolgroup .bbbtn { padding: 0 14px; }
}
/* Interview "equal" arrangement → the cards sit as EQUAL COLUMNS beside the host,
   matching what the canvas composites. "featured" keeps them stacked (the default
   flex-direction: column on .st-guestrail). */
/* ---- Presentation: solo, full-width stage, no invite affordances anywhere ---- */
html body.preso-on #stGuestRail,
html body.demo-on  #stGuestRail { display: none !important; }
html body.preso-on .st-stagegrid,
html body.demo-on  .st-stagegrid { grid-template-columns: 1fr !important; }
html body.preso-on #btnInviteNav,
html body.preso-on #btnInvite,
html body.preso-on #inviteWrap { display: none !important; }

/* Guest-card styles are retained (harmless, unused) in case the rail is ever
   wanted as an out-of-canvas concept — but nothing renders them today. */
html body .st-toolgroup {
  display: flex; align-items: center; gap: 2px;
  background: linear-gradient(180deg,#131D34,#10182C);
  border: 1px solid rgba(255,255,255,.07); border-radius: 20px;
  padding: 6px; box-shadow: var(--s-shadow-btn);
}
html body .st-spacer { flex: 1 1 auto; }

/* the workhorse control */
html body .bbbtn,
html body button.bbbtn {
  height: 52px; min-height: 52px; padding: 0 16px; border-radius: 16px; gap: 10px;
  background: #18233E; border: 1px solid rgba(255,255,255,.08); color: var(--s-t1);
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  box-shadow: none; white-space: nowrap;
  transition: background .2s ease-out, transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out;
}
html body .st-toolgroup .bbbtn { background: transparent; border-color: transparent; }
html body .bbbtn:hover { background: #223252; transform: translateY(-1px); box-shadow: var(--s-shadow-hov); }
html body .bbbtn:active { transform: translateY(0); }
html body .bbbtn .ic { width: 20px; height: 20px; stroke-width: 2; color: var(--s-t3); transition: color .2s ease-out; }
html body .bbbtn:hover .ic { color: var(--s-t2); }
html body .bbbtn.active { background: rgba(78,123,255,.14); border-color: rgba(78,123,255,.28); color: var(--s-t1); }
html body .bbbtn.active .ic { color: var(--s-blue); }
html body .bbbtn.muted { background: rgba(229,72,77,.14); border-color: rgba(229,72,77,.30); }
html body .bbbtn.muted .ic { color: var(--s-danger); }
html body .bbbtn:disabled { opacity: .42; cursor: default; transform: none; box-shadow: none; }
html body .bbbtn .ic-chev { width: 16px; height: 16px; opacity: .5; }
/* ON / OFF state word, as in the reference */
html body .st-state { font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--s-success); }
html body .st-state.off { color: var(--s-t4); }

html body .bb-sep, html body .st-divider {
  width: 1px; height: 28px; background: var(--s-divider); margin: 0 4px; border: 0; flex: none;
}

/* primary + danger */
html body .cta, html body .navshare, html body button.cta {
  height: 52px; padding: 0 18px; border-radius: 16px; gap: 10px;
  background: var(--s-primary); color: #fff; border: 1px solid transparent;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  box-shadow: var(--s-shadow-btn);
  transition: background .2s ease-out, transform .2s ease-out, box-shadow .2s ease-out;
}
html body .cta:hover, html body .navshare:hover { background: var(--s-primary-h); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(53,92,255,.30); }
html body .cta .ic, html body .navshare .ic { color: #fff; }
/* ONE primary in the rail. Share Screen and Invite were both painted as the main action, so neither
   read as one. Share Screen is the thing you came here to do; Invite is a step beside it. */
html body #btnInviteNav {
  background: rgba(255,255,255,.08); color: #e8edf6;
  border: 1px solid rgba(255,255,255,.16); box-shadow: none;
}
html body #btnInviteNav:hover {
  background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.42);
  box-shadow: none; color: #fff;
}
html body #btnInviteNav .ic { color: #dfe6f2; }
/* Record, before it is pressed: the same neutral chrome as everything beside it, with the red dot
   carrying the meaning. The dot keeps its own fill, so it stays red whatever the button does. */
html body #btnRecordNav:not(.recording) {
  background: rgba(255,255,255,.08); color: #e8edf6;
  border: 1px solid rgba(255,255,255,.16); border-radius: 16px; box-shadow: none;   /* 16, not 14: its neighbours on the rail are 16 */
}
html body #btnRecordNav:not(.recording):hover {
  background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.42);
  box-shadow: none; color: #fff;
}
/* The recording status light must not inherit the primary's fill, or the whole point is lost. */
html body .navrec.recording {
  background: transparent; border-color: transparent; box-shadow: none;
}
html body .navrec.recording:hover { background: rgba(255,255,255,.06); transform: none; }
html body .navend, html body button.navend {
  height: 52px; padding: 0 18px; border-radius: 16px; gap: 10px;
  background: var(--s-danger); color: #fff; border: 1px solid transparent;
  font-size: 15px; font-weight: 600; box-shadow: 0 6px 18px rgba(229,72,77,.24);
  transition: background .2s ease-out, transform .2s ease-out, box-shadow .2s ease-out;
}
html body .navend:hover { background: var(--s-danger-h); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(229,72,77,.32); }
html body .navend .ic { color: #fff; }

/* neutral chips */
html body .chip, html body button.chip {
  min-height: 44px; border-radius: 14px; padding: 0 16px; gap: 9px;
  background: var(--s-panel2); border: 1px solid var(--s-border); color: var(--s-t1);
  font-size: 15px; font-weight: 500; box-shadow: none;
  transition: background .2s ease-out, transform .2s ease-out, border-color .2s ease-out;
}
html body .chip:hover { background: var(--s-hover); transform: translateY(-1px); border-color: rgba(255,255,255,.14); }
html body .chip .ic { color: var(--s-t3); width: 20px; height: 20px; stroke-width: 2; }
html body .chip.active { background: rgba(78,123,255,.14); border-color: rgba(78,123,255,.28); color: var(--s-t1); }
html body .chip.active .ic { color: var(--s-blue); }

/* =============================================================================
   DROPDOWNS — fade + 8px slide, glass, generous rows.
   ============================================================================= */
html body .bbmenu, html body .campanel, html body .ed-profmenu, html body .navmenu {
  background: rgba(17,27,48,.94); backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--s-border); border-radius: 20px;
  box-shadow: var(--s-shadow-card); padding: 12px; min-width: 268px;
}
html body .bbmenu:not(.hidden), html body .campanel:not(.hidden) { animation: stPop .2s ease-out; }
@keyframes stPop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
/* menus that open UPWARD from the toolbar slide the other way */
html body .stagebar .bbmenu:not(.hidden) { animation: stPopUp .2s ease-out; }
@keyframes stPopUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

html body .bbmenu .chip, html body .bbmenu .bbbtn {
  width: 100%; justify-content: flex-start; min-height: 44px; height: auto;
  border-radius: 12px; background: transparent; border-color: transparent;
  font-size: 15px; font-weight: 500; color: var(--s-t2); padding: 0 12px;
  text-align: left;
}
/* The Record Mode rows carry .ivrow .chip{justify-content:center} from the page's
   own stylesheet — beat it explicitly rather than relying on load order, and let
   each row own a full line so the labels form one clean left edge. */
html body .bbmenu .ivrow { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
html body .bbmenu .ivrow .chip {
  flex: 0 0 auto; width: 100%; justify-content: flex-start; text-align: left;
}
html body .bbmenu .ivmenu { padding: 2px; min-width: 232px; }
/* First group has no heading now, so it needs its own top breathing room. */
html body .bbmenu .ivmenu > .ivrow:first-child { margin-top: 4px; }
/* Display panel has no heading now either — give the first row the same top breathing room. */
html body #displayPanel .ivmenu > div:first-child { margin-top: 4px; }
html body .bbmenu .ivmenu h3 { margin: 4px 12px 6px; }
html body .bbmenu .ivsep { margin: 6px 2px; }
html body .bbmenu .chip:hover, html body .bbmenu .bbbtn:hover {
  background: var(--s-hover); color: var(--s-t1); transform: none; box-shadow: none;
}
/* SELECTED row. `.bbmenu .chip` resets background to transparent, and it lands after the
   generic `.chip.active` rule at equal specificity — so the selection was being erased.
   Restated here, stronger, and after: tinted surface, white text, blue left edge. */
html body .bbmenu .chip.active, html body .bbmenu .bbbtn.active {
  background: rgba(78,123,255,.20);
  border-color: rgba(78,123,255,.42);
  color: #fff; font-weight: 600;
  box-shadow: inset 3px 0 0 var(--s-blue);
}
html body .bbmenu .chip.active:hover, html body .bbmenu .bbbtn.active:hover {
  background: rgba(78,123,255,.28);
}
/* Record Mode + Layout are single-CHOICE lists, so the selected row also gets a tick.
   The Display rows are toggles whose label already states the state — no tick there. */
html body #interviewPanel .ivrow .chip { position: relative; padding-right: 36px; }
html body #interviewPanel .ivrow .chip.active::after {
  content: ''; position: absolute; right: 15px; top: 50%;
  width: 6px; height: 11px; margin-top: -8px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg); opacity: .95;
}
/* Webcam rows: full camera name on ONE line, then the Settings + Effects icon
   buttons. The name must not wrap — "Main Camera ON" reading as three stacked
   words was the bug in the reference shot. */
html body #webcamPanel .navdd { display: flex; align-items: center; gap: 8px; width: 100%; }
html body #webcamPanel .navdd > .chip:first-child { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
html body #webcamPanel .navdd > .chip:first-child span { white-space: nowrap; }
html body #webcamPanel .navdd > .chip + .chip {
  flex: 0 0 auto; width: 44px; min-width: 44px; padding: 0; justify-content: center;
}
/* "Camera 2 Not Detected" — a statement of fact, not a control: no hover lift, no
   pointer, muted text, and its icon slots collapse so the row stays quiet. */
html body #webcamPanel .navdd.cam-missing > .chip:first-child,
html body .bbmenu .chip.cam-none {
  background: transparent; border-color: transparent; color: var(--s-t4);
  cursor: default; font-weight: 400;
}
html body .bbmenu .chip.cam-none:hover { background: transparent; transform: none; box-shadow: none; }
html body .bbmenu .chip.cam-none .ic { display: none; }

/* OFF state reads red, exactly like MIC OFF */
html body .bbmenu .chip.muted, html body .bbbtn.muted {
  background: rgba(229,72,77,.14); border-color: rgba(229,72,77,.30); color: #FF9A9D;
}
html body .bbmenu .chip.muted:hover, html body .bbbtn.muted:hover {
  background: rgba(229,72,77,.24); border-color: rgba(229,72,77,.44); color: #FFB9BB;
}
html body .bbmenu .chip.muted .ic, html body .bbbtn.muted .ic { color: var(--s-danger); }

/* Every heading inside Effects adopts the same quiet section label used by RECORD MODE
   and LAYOUT — small, uppercase, tracked out, muted. Headings should organise the panel,
   not compete with the controls inside it. */
html body #hostVolPanel .fxhd,
html body #fxPanel .fxhd,
html body #fxPanel h3,
html body #fxPanel .fxbglabel {
  font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--s-t3); margin: 0 0 6px;
}
html body #fxPanel .fxbglabel .ic { display: none; }   /* the sibling headings carry no icon */
/* A hairline above BACKGROUND and PRIVACY BLUR, so the panel reads as three sections
   rather than one long column. 10px of air each side of the rule. */
html body #fxPanel .fxbglabel,
html body #fxPanel .fxblurhd,
html body #fxPanel h3:not(.fxhd) {
  border-top: 1px solid var(--s-divider);
  margin-top: 10px; padding-top: 10px;
}
html body #fxPanel .bgmodes { margin-bottom: 10px; }
/* Reset stays a quiet inline action on the Camera Effects row */
html body #fxPanel .fxhd .fxreset { font-size: 12px; text-transform: none; letter-spacing: 0; }
/* The Effects panel now hangs off the Webcams trigger, so anchor it there. */
html body #webcamWrap #fxPanel { left: 0; right: auto; }
/* "Mic Volume" / "Sound Volume" must stay on ONE line — wrapped, they squeeze the very
   fader they label. The meter row shares the slider's column so all three line up. */
/* Wide enough that label + fader + readout share one line without the slider being
   squeezed to a stub. 268px (the default menu width) could not hold "Sound Volume". */
/* The Main Camera / Camera 2 / Branding pill row and the "add a 2nd cam" hint are
   retired: Camera 2 now has its own gear in the Webcams list (which appears the moment
   one is detected) and Branding is a first-class toolbar button. Hidden rather than
   deleted — recorder.js still toggles their state, and hiding keeps that harmless. */
html body #camPanel .campills,
html body #camPanel #cam2Hint { display: none !important; }

/* Upload logo: icon and label on ONE line. The chip was wrapping because the row is
   narrow and the label had nowhere to go — keep it inline and let the row scroll the
   preview instead of breaking the button. */
html body #camPanel .brandlogorow { align-items: center; gap: 10px; flex-wrap: nowrap; }
html body #camPanel .brandlogorow label.chip,
html body #camPanel label[for="logoFile"] {
  display: inline-flex; flex-direction: row; align-items: center; gap: 9px;
  white-space: nowrap; flex: 0 0 auto; min-height: 44px; padding: 0 16px;
}
html body #camPanel .brandlogorow .logoprev { flex: 0 1 auto; min-width: 0; }

html body #hostVolPanel { min-width: 366px; }
/* Reset is a trailing action, not part of the title — push it to the far edge so the
   heading reads as a heading and the action sits where actions live. */
html body #hostVolPanel .fxhd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
}
html body #hostVolPanel .fxhd .fxreset { margin-left: auto; }
html body #hostVolPanel .sld { white-space: nowrap; gap: 10px; }
html body #hostVolPanel .sld input[type=range] { flex: 1 1 auto; min-width: 90px; }
html body #hostVolPanel .sld > span:last-child { flex: 0 0 auto; min-width: 62px; text-align: right; }
html body #hostVolPanel .hostmeter { flex: 1 1 auto; min-width: 90px; margin: 0; }
/* Test Speaker: a full-width secondary action. Quiet by default — it's a utility, not
   something the host should be drawn to mid-broadcast — but it lifts on hover like
   every other control so it still reads as pressable. */
html body #hostVolPanel #btnNoiseToggle,
html body #hostVolPanel #btnHostTestSpk2,
html body .audblock #btnHostTestSpk {
  display: flex; width: 100%; justify-content: center; align-items: center;
  min-height: 44px; margin-top: 12px; padding: 0 16px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid var(--s-border);
  color: var(--s-t2); font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  cursor: pointer; transition: background .2s ease-out, color .2s ease-out, transform .2s ease-out;
}
html body #hostVolPanel #btnNoiseToggle:hover,
html body #hostVolPanel #btnHostTestSpk2:hover,
html body .audblock #btnHostTestSpk:hover {
  background: var(--s-hover); color: var(--s-t1); transform: translateY(-1px);
}
/* ON reads as a lit state, not just a pressed button — this is a setting, not an action. */
html body #hostVolPanel #btnNoiseToggle { margin-top: 8px; gap: 10px; }
/* The mic glyph beside "Reduce background noise" duplicated the label; the toggle
   already says which way it's set. Selects below are self-describing too — a device
   name IS the label — so those field captions are gone as well. */
html body #camPanel .tglrow .tgllbl .ic { display: none; }
/* Audio block adopts the Volume dropdown's row rhythm exactly: one line per control,
   label left, fader flexible, readout right-aligned on a shared column. */
html body .audblock .sld {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  white-space: nowrap; margin: 12px 0 0;
  font-size: 13.5px; font-weight: 600; color: var(--s-t2);
}
html body .audblock .sld input[type=range] { flex: 1 1 auto; min-width: 90px; width: auto; margin: 0; }
html body .audblock .sld .audval { flex: 0 0 auto; min-width: 52px; text-align: right; }
html body .audblock .hostmeter { flex: 1 1 auto; min-width: 90px; margin: 0; }
html body .audblock .micpill { flex: 0 0 auto; }
html body .audblock .audhint { display: none; }          /* moved behind the "?" */
/* The help dot — quiet until you look for it. Tooltip comes from data-qtip, not title. */
html body .qhelp {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 17px; height: 17px; border-radius: 50%; cursor: help;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  color: var(--s-t3); font-size: 11px; font-weight: 700; line-height: 1;
  text-transform: none; letter-spacing: 0; transition: background .2s ease-out, color .2s ease-out;
}
html body .qhelp:hover { background: rgba(78,123,255,.20); border-color: rgba(78,123,255,.40); color: #fff; }
html body #camPanel .camresrow .pf,
html body #camPanel label.pf { gap: 0; }
html body #hostVolPanel #btnNoiseToggle.active {
  background: rgba(78,123,255,.16); border-color: rgba(78,123,255,.34); color: #fff;
}
html body #hostVolPanel #btnNoiseToggle::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--s-t4); transition: background .2s ease-out, box-shadow .2s ease-out;
}
html body #hostVolPanel #btnNoiseToggle.active::before {
  background: var(--s-success); box-shadow: 0 0 0 3px rgba(61,220,132,.20);
}

html body .st-menuhead {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--s-t4); padding: 6px 12px 10px;
}

/* panel internals: sliders, toggles, fields */
html body .vidsettings h3, html body .fxhd, html body #camPanelTitle {
  font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--s-t1); margin: 0 0 4px;
}
html body .sld, html body .fxrow > label, html body .audrow {
  font-size: 15px; font-weight: 500; color: var(--s-t2);
}
html body input[type=range] { accent-color: var(--s-blue); height: 6px; }
html body .pf, html body .fld { color: var(--s-t2); font-size: 15px; font-weight: 500; }
html body select, html body input[type=text], html body input[type=email] {
  background: #0E1729; color: var(--s-t1); border: 1px solid var(--s-border);
  border-radius: 12px; padding: 12px 14px; font-size: 15px; font-weight: 500;
  transition: border-color .2s ease-out, box-shadow .2s ease-out;
}
html body select:focus, html body input[type=text]:focus {
  border-color: var(--s-blue); box-shadow: 0 0 0 4px var(--s-glow);
}
html body .tglslider { background: #2A3654; }
html body .tgl input:checked + .tglslider { background: var(--s-blue); }
html body .campill {
  border-radius: 12px; font-size: 15px; font-weight: 500; color: var(--s-t3);
  background: transparent; padding: 9px 16px;
}
html body .campill.active { background: rgba(78,123,255,.14); color: var(--s-t1); }
html body .campills { background: #0E1729; border: 1px solid var(--s-border); border-radius: 16px; padding: 4px; gap: 4px; }

/* =============================================================================
   STAGE — the video is the hero. Everything else defers to it.
   ============================================================================= */
html body main.recwrap { padding: var(--s-pad); max-width: 1720px; margin: 0 auto; gap: var(--s-sec); }
html body #previewCard, html body #setupCard, html body .card {
  background: var(--s-surface); border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px; box-shadow: var(--s-shadow-card); padding: var(--s-pad);
}
html body .stagewrap { gap: var(--s-sec); }
html body #stage, html body canvas#stage {
  border-radius: 22px; border: 1px solid var(--s-border);
  background: #05080F; box-shadow: 0 24px 60px rgba(0,0,0,.42); display: block;
  /* The canvas BITMAP is 16:9 at every supported resolution. If the element box is a
     different shape, `object-fit: contain` letterboxes the drawing INSIDE the element —
     which is where the black bars beside the feeds came from. Lock the box to the same
     ratio and let height follow width, so painted pixels meet the border exactly. */
}
/* style.css has `.recwrap.theater #stage{max-height:78vh;object-fit:contain}` — higher
   specificity than a bare #stage, and that 78vh cap is what forced a 1438x780 box around
   a 1280x720 bitmap. Cap the WIDTH instead so the element box always matches 16:9 and the
   drawing never has to be letterboxed inside it. */
/* ---- The STUDIO fits the viewport; the marketing footer lives below the fold ----
   A host should never have to scroll to reach a control or read the status bar mid-
   broadcast. So nav + toolbar + stage + status bar are sized to fit exactly, and the
   16:9 stage takes whatever height is left over. The site footer (Privacy / Terms) is
   NOT studio chrome — reserving viewport for it would shrink the video to buy space
   for links nobody needs while live, so it stays one scroll away. */
html body main.recwrap { min-height: calc(100vh - 72px); display: flex; flex-direction: column; }
/* While LIVE the studio is a fixed-height box, so the stage is forced to shrink to fit
   rather than pushing the status bar off-screen. `min-height` alone let children overflow
   — which is why 1366x768 still scrolled. The setup card keeps its natural height. */
html body main.recwrap.theater {
  height: calc(100vh - 72px); min-height: 0; overflow: hidden;
}
html body #previewCard {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}
html body .st-stagegrid { flex: 1 1 auto; min-height: 0; }
html body .stagewrap { min-height: 0; height: 100%; justify-content: center; }
html body #stStatusBar { flex: 0 0 auto; }
/* ---- focused sub-panel (Banner) — same surface as every other dropdown ---- */
html body .st-minipanel {
  min-width: 340px; padding: 16px;
  /* Fully opaque. The shared .bbmenu surface leans on backdrop-filter, which leaves this
     small panel looking washed out where it overlaps the bright video behind it. */
  background: linear-gradient(180deg, #16223C, #111A2E);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
html body .st-minipanel .st-menuhead { padding: 0 0 12px; display: flex; align-items: center; gap: 8px; }
/* Logo panel is taller than the banner one — give it room and keep it scrollable. */
html body #logoMiniPanel { min-width: 360px; max-height: min(70vh, 560px); overflow-y: auto; }
html body #logoMiniPanel .brandlogorow { align-items: center; gap: 10px; }
html body #logoMiniPanel select { width: 100%; }
/* Toggle rows fill the panel, exactly like Banner Settings. `align-self` is the one that
   matters — the column parent was letting each row size to its content. */
html body #logoMiniPanel .brandtoggles { display: flex; flex-direction: column; gap: 8px; width: 100%; align-items: stretch; }
/* There is an UNCLASSED flex-row wrapper between .brandtoggles and the toggle row —
   measured, not assumed. Without collapsing it the row sizes to its content (150px in a
   326px column). */
html body #logoMiniPanel .brandtoggles > div {
  display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 8px;
}
html body #logoMiniPanel .tglrow,
html body .st-minipanel .tglrow { width: 100%; flex: 1 1 auto; align-self: stretch; box-sizing: border-box; }
html body #logoMiniPanel .brandlogorow { justify-content: flex-start; }
/* Host Name / Title — same rhythm as the other two sub-panels. */
html body #ltMiniPanel { min-width: 360px; max-height: min(70vh, 560px); overflow-y: auto; }
html body #ltMiniPanel .brandnamerow { display: flex; flex-direction: column; gap: 12px; }
html body #ltMiniPanel .brandtoggles > div { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 8px; }
html body #ltMiniPanel input[type=text], html body #ltMiniPanel select { width: 100%; }
/* The style picker and the Show-names action were inheriting content-width from the
   original two-column Branding layout — stretch them to match the other rows. */
html body #ltMiniPanel .brandnamerow > *, html body #ltMiniPanel > .brandbody > * { width: 100%; }
html body #ltMiniPanel select { align-self: stretch; margin: 0; }
html body #ltMiniPanel #btnLtShow {
  width: 100%; justify-content: center; min-height: 44px; margin-top: 4px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid var(--s-border); color: var(--s-t2);
  font-size: 15px; font-weight: 600;
}
html body #ltMiniPanel #btnLtShow:hover { background: var(--s-hover); color: var(--s-t1); transform: translateY(-1px); }
html body .st-minipanel .brandbody { display: flex; flex-direction: column; gap: 14px; }
/* Position + Reset share one line — .st-minipanel .pf forces a column, which stacked and
   centred them (see the Logo panel screenshot). This row opts back out. */
html body .st-minipanel .lgposrow {
  flex-direction: row !important; align-items: center; justify-content: space-between;
  gap: 10px; text-align: left;
}
html body .st-minipanel .lgposrow .fxreset { margin-left: auto; }
html body .st-minipanel .pf,
html body .st-minipanel label.pf {
  display: flex; flex-direction: column; gap: 7px; margin: 0;
  font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--s-t3);
}
html body .st-minipanel input[type=text] {
  width: 100%; font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: 0;
  background: #0C1424; color: var(--s-t1); border: 1px solid rgba(255,255,255,.12);
}
html body .st-minipanel input[type=text]::placeholder { color: var(--s-t4); }
html body .st-minipanel .brandtoggles { display: flex; flex-direction: column; gap: 8px; margin: 0; }
html body .st-minipanel .tglrow {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 12px; margin: 0; border-radius: 12px;
  background: rgba(255,255,255,.04); text-align: left;
}
html body .st-minipanel .tglrow .tgllbl { flex: 1 1 auto; text-align: left; }
html body .st-minipanel .tglrow .tgl { flex: 0 0 auto; }
html body .st-minipanel .tgllbl { font-size: 15px; font-weight: 600; color: var(--s-t1); }
html body .st-minipanel .brandhint {
  margin: 0; font-size: 12.5px; font-weight: 400; line-height: 1.45; color: var(--s-t3);
  text-transform: none; letter-spacing: 0;
}

/* ---- Hover tooltip: a speech bubble UNDER the control ----
   `text-wrap: balance` evens the lines so a single trailing word can't be left stranded
   on its own row (the "screen" widow). min-width stops very short tips looking pinched. */
html body #qtip {
  max-width: 260px; min-width: 0; padding: 9px 12px; border-radius: 11px;
  background: #0E1524; color: var(--s-t1);
  font-size: 12.5px; font-weight: 500; line-height: 1.45;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  text-wrap: balance; text-align: center;
}
html body #qtip::after {          /* the little cartoon point */
  content: ''; position: absolute; left: var(--qtip-arrow, 50%);
  width: 10px; height: 10px; margin-left: -5px;
  background: #0E1524; transform: rotate(45deg);
  border: 1px solid rgba(255,255,255,.10);
}
html body #qtip.qtip-below::after { top: -6px; border-right: 0; border-bottom: 0; }
html body #qtip.qtip-above::after { bottom: -6px; border-left: 0; border-top: 0; }

/* ---- Offer cards: premium hover ----
   Same language as the Invite Guest cards — lift, warm, bloom, and scale the icon — so the
   two card families read as one system. The whole card is the hover target, not the icon. */
html body .offerfeat {
  transition: transform .2s ease-out, background .2s ease-out,
              border-color .2s ease-out, box-shadow .2s ease-out;
  cursor: default;
}
html body .offerfeat .offf-ic {
  transition: transform .2s ease-out, box-shadow .2s ease-out;
  will-change: transform;
}
html body .offerfeat:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg,#16203A,#111828);
  border-color: rgba(120,168,255,.30);
  box-shadow: 0 18px 40px rgba(0,0,0,.38), 0 0 44px rgba(78,123,255,.22),
              inset 0 0 0 1px rgba(120,168,255,.10);
}
html body .offerfeat:hover .offf-ic {
  transform: scale(1.14) rotate(-3deg);
  box-shadow: 0 10px 24px rgba(0,0,0,.34);
}
html body .offerfeat:hover b { color: #fff; }
html body .offerfeat:hover small { color: #B9CBF2; }
@media (prefers-reduced-motion: reduce) {
  html body .offerfeat:hover, html body .offerfeat:hover .offf-ic { transform: none; }
}

/* ---- "Video downloaded" confirmation ---- */
html body .modalcard.dldone { max-width: 520px; padding: 30px 28px 24px; text-align: center; }
html body .dldone-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; }
html body .dldone-ic {
  width: 56px; height: 56px; border-radius: 999px; display: grid; place-items: center;
  font-size: 26px; color: #0A1020; font-weight: 800;
  background: linear-gradient(180deg,#4ADE80,#22C55E);
  box-shadow: 0 12px 30px rgba(34,197,94,.30);
}
html body .dldone h1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 0; }
html body .dldone-sub { font-size: 15px; color: var(--s-t2); margin: 0; }
html body .dldone-file {
  margin: 18px 0 0; padding: 11px 14px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid var(--s-border);
  font-size: 14px; font-weight: 600; color: var(--s-t1);
  overflow-wrap: anywhere;
}
html body .dldone-specs {
  display: grid; grid-template-columns: auto 1fr; gap: 8px 18px;
  margin: 14px 0 0; padding: 14px 16px; text-align: left;
  background: rgba(255,255,255,.03); border: 1px solid var(--s-divider); border-radius: 12px;
}
html body .dldone-specs dt {
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--s-t4); margin: 0; white-space: nowrap;
}
html body .dldone-specs dd {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--s-t1);
  font-variant-numeric: tabular-nums; text-align: right;
}
html body .dldone-note {
  margin: 16px 2px 18px; font-size: 13px; line-height: 1.6; color: var(--s-t3); text-align: left;
}
html body .dldone-note strong { color: var(--s-t2); }

/* The status bar is app chrome — plan, credit and network are never hidden. */
/* Display rows that carry a gear: the toggle takes the width, the gear is a square cap. */
html body #displayPanel .dsp-row { display: flex; align-items: center; gap: 8px; width: 100%; }
html body #displayPanel .dsp-row > .chip:first-child { flex: 1 1 auto; min-width: 0; }
html body #displayPanel .dsp-gear {
  flex: 0 0 auto; width: 44px; min-width: 44px; padding: 0; justify-content: center;
}
/* Laptop heights (1366x768 and friends): the fixed chrome plus a 24px rhythm leaves the
   stage too little room, and the guest cards' 220px floor pushes the row taller than the
   video. Tighten the rhythm and let the cards shrink so the studio still fits in one screen. */
@media (max-height: 840px) {
  html body main.recwrap { padding: 16px; gap: 16px; min-height: calc(100vh - 72px); }
  html body #previewCard { padding: 16px; }
  html body .st-toolbar { margin-bottom: 16px; }
  html body .st-statusbar { height: 56px; margin-top: 16px; }
  html body .st-guestrail { gap: 16px; }
  html body .st-guestcard { min-height: 0; }
  html body .st-gc-ico { width: 56px; height: 56px; }
  html body .st-gc-ico svg { width: 28px; height: 28px; }
  html body .st-gc-title { font-size: 15px; }
  html body .st-gc-desc { font-size: 13.5px; }
}

html body .recwrap.theater #stage,
html body .recwrap #stage,
html body #stage {
  /* Fit inside whatever box is left, preserving 16:9 — height-bound on short screens,
     width-bound on wide ones. No fixed vh cap, so it adapts to any window. */
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  /* NO forced aspect-ratio. The composite canvas takes the SHARED SOURCE's aspect
     (recorder.js: W = H * c.w/c.h), so a 16:10 monitor or an ultrawide produces a
     non-16:9 bitmap. Pinning the box to 16/9 and filling it stretched that bitmap --
     the "squished circle / squished logo" during screen share. width/height:auto on a
     replaced element uses the intrinsic bitmap size, and the two max-* constraints
     scale it down while PRESERVING its ratio, so the box always matches the canvas. */
  aspect-ratio: auto;
  object-fit: contain;
  margin: auto;
}
html body .stagewrap { min-width: 0; align-items: center; }
/* Live layout: video ~68% with the guest rail beside it. */
html body .st-stagegrid {
  display: grid; grid-template-columns: minmax(0,68fr) minmax(300px,32fr);
  gap: var(--s-sec); align-items: stretch;
}
@media (max-width: 1120px) { html body .st-stagegrid { grid-template-columns: 1fr; } }

/* HOST badge — top-left of the feed */
html body .st-hostbadge {
  position: absolute; top: 18px; left: 18px; z-index: 6;
  display: inline-flex; align-items: center; gap: 10px;
  height: 30px; padding: 0 6px 0 6px; border-radius: 999px;
  background: rgba(18,26,45,.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--s-border);
}
html body .st-hostbadge b {
  display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 11px;
  border-radius: 999px; background: var(--s-blue); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
}
html body .st-hostbadge span { font-size: 14px; font-weight: 600; color: var(--s-t1); padding-right: 12px; }
/* Name removed — the chip hugs the HOST pill instead of padding out for absent text. */
html body .st-hostbadge.st-hostbadge-solo { padding: 0; background: none; border: 0; backdrop-filter: none; }

/* =============================================================================
   GUEST CARDS — these are destinations, not empty holes.
   ============================================================================= */
html body .st-guestrail { display: flex; flex-direction: column; gap: var(--s-sec); }
html body .st-guestcard {
  flex: 1 1 0; min-height: 220px; position: relative; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(180deg,#0B1121,#090E1A);   /* 50% darker; dashed rule unchanged */
  border: 1px solid rgba(255,255,255,.07); border-radius: 22px; padding: var(--s-pad);
  box-shadow: var(--s-shadow-card);
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}
html body .st-guestcard::after {
  content: ''; position: absolute; inset: 14px; border-radius: 16px;
  border: 1px dashed rgba(82,140,255,.45); pointer-events: none;
  transition: border-color .2s ease-out;
}
/* Premium hover: the card lifts, warms and blooms; the dashed rule brightens and tightens,
   and the avatar grows a touch. Mirrors the canvas cards so both renderers agree. */
html body .st-guestcard:hover {
  transform: translateY(-2px) scale(1.012);
  background: linear-gradient(180deg,#16203A,#111828);
  border-color: rgba(120,168,255,.30);
  box-shadow: var(--s-shadow-card), 0 0 44px rgba(78,123,255,.26), inset 0 0 0 1px rgba(120,168,255,.10);
}
html body .st-guestcard:hover::after { border-color: rgba(140,182,255,.95); inset: 12px; }
html body .st-guestcard .st-gc-ico { transition: transform .2s ease-out, box-shadow .2s ease-out; }
html body .st-guestcard:hover .st-gc-ico { transform: scale(1.07); box-shadow: 0 12px 30px rgba(49,92,244,.48); }
html body .st-guestcard .st-gc-title, html body .st-guestcard .st-gc-desc { transition: color .2s ease-out; }
html body .st-guestcard:hover .st-gc-desc { color: #B9CBF2; }
html body .st-guestcard:active { transform: translateY(0) scale(1.004); }
html body .st-gc-ico {
  width: 72px; height: 72px; border-radius: 999px; flex: none;
  background: linear-gradient(180deg,#2445A8,#315CF4);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(49,92,244,.32);
}
html body .st-gc-ico svg { width: 36px; height: 36px; stroke: #fff; stroke-width: 2; }
html body .st-gc-title { font-size: 18px; font-weight: 700; color: var(--s-t1); letter-spacing: -.02em; }
html body .st-gc-desc { font-size: 15px; font-weight: 400; color: #93A3C8; text-align: center; max-width: 260px; line-height: 1.5; }

/* =============================================================================
   STATUS BAR — quiet, factual, all pills.
   ============================================================================= */
html body .st-statusbar {
  height: 64px; display: flex; align-items: center; gap: var(--s-gap);
  padding: 0 var(--s-pad); margin-top: 4px;   /* 24 -> 4: with the 24px row-gap that's 28px below the stage, was 48 */
  background: var(--s-surface); border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px; box-shadow: var(--s-shadow-card);
}
html body .st-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.04); border-radius: 999px; padding: 8px 14px;
  font-size: 13px; font-weight: 500; color: var(--s-t2); white-space: nowrap;
}
html body .st-pill svg { width: 16px; height: 16px; stroke-width: 2; }
html body .st-pill.ok svg { color: var(--s-success); }
/* Three verdicts, and the icon carries the colour rather than the whole pill - this sits in a
   status bar, not an alert bar, and a fully red chip beside "Powered by" reads as a site error
   rather than as one guest on poor wifi. */
html body .st-pill.warn svg { color: #d9932b; }
html body .st-pill.bad svg  { color: #e05561; }
html body .st-pill.bad      { border-color: rgba(224,85,97,.42); }
html body .st-credit { flex: 1; text-align: center; font-size: 13px; font-weight: 500; color: var(--s-t3); }
html body .st-credit a { color: var(--s-blue); text-decoration: none; font-weight: 600; }
html body .st-credit a:hover { text-decoration: underline; }

/* plan pill + rate chip + timer in the bar */
html body #planBadge, html body .bb-badge {
  background: rgba(255,255,255,.04); border: 0; border-radius: 999px;
  padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--s-t2);
}
html body #planBadge.plan-pro { background: rgba(78,123,255,.14); color: #CFDBFF; }
html body .ratechip {
  background: rgba(255,255,255,.04); border: 0; border-radius: 999px;
  padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--s-t2);
}
html body .timer, html body #timer {
  font-size: 13px; font-weight: 600; color: var(--s-t2); font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.04); border-radius: 999px; padding: 8px 14px;
}
html body .recbadge { border-radius: 999px; font-size: 13px; font-weight: 600; }

/* modals inherit the same surface language */
html body .modal, html body .ed-modal { background: rgba(6,10,20,.72); backdrop-filter: blur(8px); }
html body .modalcard, html body .cb-card {
  background: var(--s-surface); border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px; box-shadow: var(--s-shadow-card); color: var(--s-t1);
}
/* Toasts carry the primary blue - the same fill as the Record / CTA buttons - so a
   notification (the copied stream link especially) reads as a deliberate signal instead of
   blending into the dark chrome behind it. */
html body .toast {
  background: var(--s-primary); backdrop-filter: blur(20px); color: #fff;
  border: 1px solid var(--s-primary-h); border-radius: 16px;
  box-shadow: 0 14px 38px rgba(53,92,255,.34), var(--s-shadow-card);
  font-size: 15px; font-weight: 600; padding: 14px 18px;
}
html body .toast a { color: #fff; text-decoration: underline; }

/* audio block / mic pill restyle */
html body .micpill { border-radius: 999px; font-size: 13px; font-weight: 500; padding: 8px 14px; }
html body .micpill.mic-ok { background: rgba(61,220,132,.14); border-color: rgba(61,220,132,.32); color: var(--s-success); }
html body .micpill.mic-off { background: rgba(255,255,255,.04); border-color: transparent; color: var(--s-t3); }
html body .micpill.mic-warn { background: rgba(242,181,68,.16); border-color: rgba(242,181,68,.34); color: #F2B544; }
html body .hostmeter { background: rgba(255,255,255,.07); border-radius: 999px; }
html body .hostmeter > span { background: var(--s-success); }
html body .audhead, html body .fxsectitle {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--s-t4);
}
html body .michelp { background: rgba(242,181,68,.10); border-color: rgba(242,181,68,.28); color: #E8C88A; border-radius: 14px; }
html body .michelp b { color: #F5DFB0; }
html body .morempty { color: var(--s-t3); font-size: 13px; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  html body * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html body .bbbtn:hover, html body .chip:hover, html body .cta:hover, html body .st-guestcard:hover { transform: none; }
}

/* phone */
@media (max-width: 860px) {
  html body main.recwrap { padding: 16px; }
  html body .st-toolbar { flex-wrap: wrap; }
  html body .bbbtn { height: 46px; padding: 0 16px; font-size: 14px; }
  html body .st-statusbar { height: auto; flex-wrap: wrap; padding: 14px 16px; gap: 8px; }
  html body .st-credit { flex-basis: 100%; order: 9; }
}
