/* ============================================================================
   Basirah — Live Session Polls
   Extension layer on top of admin-redesign.css (loaded first).
   Reuses the admin design tokens: --brand-*, --slate-*, --gradient,
   --radius, --shadow-sm/md, --success/--warning/--danger.
   Adds live-poll components + a standalone Public Session Portal shell.
   ============================================================================ */

:root {
  --live: #e11d48;
  --live-soft: #fff1f3;
  --stage-bg: radial-gradient(1200px 700px at 78% -10%, rgba(99, 102, 241, .35), transparent 60%),
              linear-gradient(160deg, #0b1224, #081020 62%, #05070f);
}

/* ---- Session state + live status pills ---------------------------------- */
.state-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}
.state-pill i { width: 13px; height: 13px; }
.state-draft { color: var(--slate-600); background: var(--slate-100); }
.state-scheduled { color: #4338ca; background: #eef2ff; }
.state-lobby { color: #0e7490; background: #ecfeff; }
.state-live { color: #be123c; background: var(--live-soft); }
.state-paused { color: #b45309; background: #fffbeb; }
.state-closed { color: var(--slate-600); background: var(--slate-100); }
.state-finalized { color: #166534; background: #f0fdf4; }

.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 rgba(225, 29, 72, .5);
  animation: livePulse 1.6s infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(225, 29, 72, .5); }
  70% { box-shadow: 0 0 0 7px rgba(225, 29, 72, 0); }
  100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); }
}

.freshness-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 8px;
  font-size: 10px; font-weight: 750;
  color: #166534; background: #f0fdf4;
}
.freshness-chip i { width: 12px; height: 12px; }
.freshness-chip.degraded { color: #b45309; background: #fffbeb; }
.freshness-chip.offline { color: #991b1b; background: #fef2f2; }

/* ---- Public Session Portal shell (standalone, no admin sidebar) --------- */
.portal { min-height: 100vh; display: flex; flex-direction: column; background: var(--canvas); }
.portal-bar {
  position: sticky; top: 0; z-index: 40;
  min-height: 62px;
  padding: 10px 22px;
  display: flex; align-items: center; gap: 14px;
  border-block-end: 1px solid rgba(148, 163, 184, .18);
  color: #e2e8f0;
  background: linear-gradient(180deg, var(--navy-900), var(--navy-950));
}
.portal-bar img { width: 116px; height: auto; }
.portal-mode {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, .24);
  color: #a5f3fc; background: rgba(34, 211, 238, .08);
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.portal-mode i { width: 12px; height: 12px; }
.portal-session {
  min-width: 0;
  display: flex; flex-direction: column;
}
.portal-session strong { color: #f8fafc; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-session span { color: var(--slate-400); font-size: 10px; }
.portal-bar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.portal-btn {
  min-height: 36px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(148, 163, 184, .22); border-radius: 9px;
  color: #dbe7ff; background: rgba(255, 255, 255, .04);
  font-size: 11.5px; font-weight: 700; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.portal-btn:hover { background: rgba(255, 255, 255, .09); border-color: rgba(148, 163, 184, .4); }
.portal-btn i { width: 15px; height: 15px; }
.portal-btn.danger { color: #fecaca; border-color: rgba(248, 113, 113, .3); background: rgba(239, 68, 68, .1); }
.portal-body { flex: 1; width: min(1280px, 100%); margin: 0 auto; padding: 22px 24px 44px; }
.portal-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .9fr); gap: 16px; align-items: start; }

/* ---- Control-lease / governance banners --------------------------------- */
.control-banner {
  margin-block-end: 16px; padding: 13px 16px;
  display: flex; align-items: center; gap: 12px;
  border: 1px solid #c7d2fe; border-radius: 13px;
  background: linear-gradient(100deg, #eef2ff, #f5f3ff);
}
.control-banner.warn { border-color: #fed7aa; background: linear-gradient(100deg, #fffbeb, #fff7ed); }
.control-banner.lock { border-color: var(--slate-200); background: var(--slate-50); }
.control-banner > i:first-child { width: 20px; height: 20px; flex: 0 0 auto; color: #4f46e5; }
.control-banner.warn > i:first-child { color: #b45309; }
.control-banner.lock > i:first-child { color: var(--slate-500); }
.control-banner-copy { flex: 1; min-width: 0; }
.control-banner-copy strong { display: block; font-size: 12px; }
.control-banner-copy span { display: block; margin-top: 2px; color: var(--slate-500); font-size: 10.5px; line-height: 1.45; }

/* ---- Active question card (host + participant + stage) ------------------- */
.question-stage {
  padding: 20px; border: 1px solid var(--slate-200);
  border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm);
}
.question-meta { display: flex; align-items: center; gap: 8px; margin-block-end: 12px; flex-wrap: wrap; }
.qtype-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  color: #4338ca; background: #eef2ff;
  font-size: 10px; font-weight: 750;
}
.qtype-chip i { width: 12px; height: 12px; }
.version-chip {
  padding: 3px 8px; border-radius: 6px;
  color: var(--slate-500); background: var(--slate-100);
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.question-prompt { margin: 0 0 4px; font-size: clamp(18px, 2vw, 23px); line-height: 1.28; letter-spacing: -.02em; }
.question-sub { margin: 0; color: var(--slate-500); font-size: 12px; }

/* ---- Live result bars --------------------------------------------------- */
.result-list { margin-block-start: 18px; display: grid; gap: 11px; }
.result-row { display: grid; gap: 6px; }
.result-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.result-label { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 12.5px; font-weight: 650; color: var(--slate-800); }
.result-key {
  width: 24px; height: 24px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 7px;
  color: #4338ca; background: #eef2ff;
  font-size: 11px; font-weight: 800;
}
.result-num { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.result-num b { font-size: 14px; letter-spacing: -.02em; }
.result-num span { color: var(--slate-400); font-size: 10.5px; }
.result-track { height: 14px; border-radius: 999px; background: var(--slate-100); overflow: hidden; }
.result-fill {
  height: 100%; border-radius: inherit; min-width: 6px;
  background: linear-gradient(90deg, #818cf8, #4f46e5);
  transition: width .8s cubic-bezier(.22, 1, .36, 1);
}
.result-row:nth-child(2n) .result-fill { background: linear-gradient(90deg, #67e8f9, #3b82f6); }
.result-row.correct .result-fill { background: linear-gradient(90deg, #4ade80, #16a34a); }
.result-row.correct .result-key { color: #166534; background: #f0fdf4; }
.result-row.leading .result-label { font-weight: 800; }

/* ---- Timer ring --------------------------------------------------------- */
.timer-ring {
  --pct: 66;
  position: relative; width: 74px; height: 74px; flex: 0 0 auto;
  border-radius: 50%;
  background: conic-gradient(var(--brand-indigo) calc(var(--pct) * 1%), var(--slate-200) 0);
  display: grid; place-items: center;
}
.timer-ring.warn { background: conic-gradient(var(--warning) calc(var(--pct) * 1%), var(--slate-200) 0); }
.timer-ring.crit { background: conic-gradient(var(--danger) calc(var(--pct) * 1%), var(--slate-200) 0); }
.timer-ring::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.timer-ring b { position: relative; z-index: 1; font-size: 17px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.timer-inline {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  color: #b45309; background: #fffbeb;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.timer-inline i { width: 14px; height: 14px; }

/* ---- Host control deck -------------------------------------------------- */
.control-deck { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px; margin-block-start: 18px; }
.deck-btn {
  min-height: 56px; padding: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--slate-200); border-radius: 12px; background: #fff;
  color: var(--slate-700); font-size: 11px; font-weight: 750; cursor: pointer;
  transition: border-color .13s, background .13s, transform .1s;
}
.deck-btn:hover { border-color: #c7d2fe; background: #fafaff; }
.deck-btn:active { transform: translateY(1px); }
.deck-btn i { width: 18px; height: 18px; color: #4f46e5; }
.deck-btn.primary { color: #fff; border-color: transparent; background: var(--gradient); box-shadow: 0 8px 18px rgba(99, 102, 241, .22); }
.deck-btn.primary i { color: #fff; }
.deck-btn.stop { color: #b91c1c; border-color: #fecaca; background: #fff7f7; }
.deck-btn.stop i { color: #dc2626; }

/* ---- Agenda list (builder + host) --------------------------------------- */
.agenda { display: grid; gap: 8px; }
.agenda-item {
  padding: 12px 13px; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 11px;
  border: 1px solid var(--slate-200); border-radius: 12px; background: #fff;
}
.agenda-item.active { border-color: #c7d2fe; box-shadow: inset 3px 0 0 var(--brand-indigo); background: #fafaff; }
html[dir="rtl"] .agenda-item.active { box-shadow: inset -3px 0 0 var(--brand-indigo); }
.agenda-handle { display: grid; place-items: center; color: var(--slate-300); cursor: grab; }
.agenda-handle i { width: 15px; height: 15px; }
.agenda-copy { min-width: 0; }
.agenda-copy strong { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-copy span { display: block; margin-top: 3px; color: var(--slate-500); font-size: 10px; }
.agenda-side { display: flex; align-items: center; gap: 8px; }

/* ---- Participant device frame ------------------------------------------- */
.device-wrap { display: flex; justify-content: center; padding-block: 6px; }
.device {
  width: min(390px, 100%);
  border: 1px solid var(--slate-200); border-radius: 26px; overflow: hidden;
  background: #fff; box-shadow: var(--shadow-md);
}
.device-top {
  padding: 12px 16px; display: flex; align-items: center; gap: 10px;
  color: #e2e8f0; background: linear-gradient(180deg, var(--navy-900), var(--navy-850));
}
.device-top img { width: 92px; }
.device-top .state-pill { margin-inline-start: auto; }
.device-screen { padding: 18px 16px 22px; display: grid; gap: 14px; }
.vote-option {
  width: 100%; padding: 15px 15px; display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--slate-200); border-radius: 14px; background: #fff;
  color: var(--slate-800); font-size: 14px; font-weight: 650; text-align: start; cursor: pointer;
  transition: border-color .13s, background .13s, transform .1s;
}
.vote-option:hover { border-color: #a5b4fc; background: #fafaff; }
.vote-option:active { transform: scale(.99); }
.vote-option.selected { border-color: #6366f1; background: #f5f5ff; box-shadow: inset 0 0 0 1px #c7d2fe; }
.vote-option.selected .vote-key { color: #fff; background: var(--brand-indigo); }
.vote-key {
  width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 9px; color: #4338ca; background: #eef2ff; font-size: 13px; font-weight: 800;
}
.vote-check { margin-inline-start: auto; width: 18px; height: 18px; color: #6366f1; }
.receipt {
  padding: 12px 14px; display: flex; align-items: center; gap: 10px;
  border: 1px solid #bbf7d0; border-radius: 12px; background: #f0fdf4;
  color: #166534; font-size: 12px; font-weight: 700;
}
.receipt i { width: 17px; height: 17px; }

/* ---- Join / QR block ---------------------------------------------------- */
.join-card {
  padding: 18px; display: grid; gap: 14px; text-align: center;
  border: 1px solid var(--slate-200); border-radius: 14px; background: #fff;
}
.join-code {
  font-size: clamp(28px, 5vw, 44px); font-weight: 850; letter-spacing: .18em;
  color: var(--slate-950); font-variant-numeric: tabular-nums;
}
.join-url { display: inline-flex; align-items: center; gap: 8px; justify-content: center; color: var(--slate-500); font-size: 12px; }
.qr-box {
  width: 148px; height: 148px; margin: 0 auto; border-radius: 12px; padding: 10px;
  background:
    linear-gradient(45deg, #0f172a 25%, transparent 0) 0 0/22px 22px,
    linear-gradient(-45deg, #0f172a 25%, transparent 0) 0 0/22px 22px,
    #fff;
  border: 1px solid var(--slate-200);
  display: grid; place-items: center;
}
.qr-box i { width: 74px; height: 74px; color: #0f172a; background: #fff; padding: 6px; border-radius: 8px; }

/* ---- Q&A moderation ----------------------------------------------------- */
.qa-list { display: grid; gap: 9px; }
.qa-item {
  padding: 13px 14px; border: 1px solid var(--slate-200); border-radius: 12px; background: #fff;
  display: grid; gap: 9px;
}
.qa-item.pending { border-color: #fed7aa; background: #fffdf7; }
.qa-item.pinned { border-color: #c7d2fe; box-shadow: inset 3px 0 0 var(--brand-indigo); }
html[dir="rtl"] .qa-item.pinned { box-shadow: inset -3px 0 0 var(--brand-indigo); }
.qa-head { display: flex; align-items: center; gap: 9px; }
.qa-avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #4338ca; background: #eef2ff; font-size: 10px; font-weight: 800; }
.qa-head strong { font-size: 11.5px; }
.qa-head span { color: var(--slate-400); font-size: 10px; }
.qa-upvotes { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: var(--slate-100); color: var(--slate-600); font-size: 10.5px; font-weight: 800; }
.qa-upvotes i { width: 12px; height: 12px; }
.qa-text { margin: 0; color: var(--slate-700); font-size: 12.5px; line-height: 1.5; }
.qa-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- Integration profile / webhook cards -------------------------------- */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 11px; }
.profile-card { padding: 14px; border: 1px solid var(--slate-200); border-radius: 13px; background: #fff; }
.profile-card.selected { border-color: #818cf8; background: #f7f7ff; box-shadow: inset 0 0 0 1px #c7d2fe; }
.profile-card h4 { margin: 0 0 5px; display: flex; align-items: center; gap: 7px; font-size: 12px; }
.profile-card h4 i { width: 15px; height: 15px; color: #4f46e5; }
.profile-card p { margin: 0 0 10px; color: var(--slate-500); font-size: 10.5px; line-height: 1.45; }
.scope-tag {
  display: inline-flex; align-items: center; gap: 4px; margin: 0 4px 4px 0;
  padding: 3px 8px; border-radius: 7px;
  color: var(--slate-600); background: var(--slate-100);
  font-size: 10px; font-weight: 700; font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
}
html[dir="rtl"] .scope-tag { margin: 0 0 4px 4px; }
.scope-tag.on { color: #166534; background: #f0fdf4; }
.code-block {
  margin: 0; padding: 14px; overflow-x: auto;
  border: 1px solid var(--slate-200); border-radius: 11px;
  background: var(--slate-950); color: #cbd5e1;
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px; line-height: 1.65;
}
.code-block .k { color: #93c5fd; }
.code-block .s { color: #86efac; }
.code-block .c { color: #64748b; }

/* ---- Toggles / switches ------------------------------------------------- */
.switch-row { padding: 12px 14px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--slate-200); border-radius: 11px; background: #fff; }
.switch-row + .switch-row { margin-top: 8px; }
.switch-copy { flex: 1; min-width: 0; }
.switch-copy strong { display: block; font-size: 12px; }
.switch-copy span { display: block; margin-top: 3px; color: var(--slate-500); font-size: 10.5px; line-height: 1.45; }
.switch { position: relative; width: 42px; height: 24px; flex: 0 0 auto; border: 0; border-radius: 999px; background: var(--slate-300); cursor: pointer; transition: background .16s; }
.switch::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: inset-inline-start .16s; }
.switch.on { background: var(--brand-indigo); }
.switch.on::after { inset-inline-start: 21px; }
.switch.locked { background: var(--slate-200); cursor: not-allowed; opacity: .8; }

/* ---- Stat mini row (presence, votes, latency) --------------------------- */
.live-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.live-stat { padding: 13px; border: 1px solid var(--slate-200); border-radius: 12px; background: #fff; }
.live-stat span { display: block; color: var(--slate-500); font-size: 10px; font-weight: 700; }
.live-stat strong { display: block; margin-top: 5px; font-size: 22px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.live-stat small { display: block; margin-top: 3px; color: var(--slate-400); font-size: 9.5px; }

/* ---- Readiness checklist ------------------------------------------------ */
.checklist { display: grid; gap: 2px; }
.check-row { padding: 11px 12px; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; border-block-end: 1px solid var(--slate-100); }
.check-row:last-child { border: 0; }
.check-row > i:first-child { width: 17px; height: 17px; }
.check-row.done > i:first-child { color: var(--success); }
.check-row.pending > i:first-child { color: var(--warning); }
.check-row.todo > i:first-child { color: var(--slate-300); }
.check-copy strong { display: block; font-size: 11.5px; }
.check-copy span { display: block; margin-top: 2px; color: var(--slate-400); font-size: 10px; }

/* ---- Stage display (dark, large format) --------------------------------- */
.stage {
  min-height: 100vh; padding: 34px 44px;
  display: grid; grid-template-rows: auto 1fr auto; gap: 24px;
  color: #f8fafc; background: var(--stage-bg);
}
.stage-top { display: flex; align-items: center; gap: 18px; }
.stage-top img { width: 150px; }
.stage-top .state-pill { font-size: 13px; padding: 6px 14px; }
.stage-join { margin-inline-start: auto; display: flex; align-items: center; gap: 20px; }
.stage-join-copy { text-align: end; }
.stage-join-copy span { display: block; color: var(--slate-400); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.stage-join-copy strong { display: block; margin-top: 4px; font-size: 30px; font-weight: 850; letter-spacing: .16em; font-variant-numeric: tabular-nums; }
.stage-qr { width: 96px; height: 96px; padding: 8px; border-radius: 12px; background: #fff; display: grid; place-items: center; }
.stage-qr i { width: 60px; height: 60px; color: #0f172a; }
.stage-main { display: grid; align-content: center; gap: 26px; }
.stage-question { margin: 0; font-size: clamp(30px, 5vw, 60px); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; max-width: 22ch; }
.stage-results { display: grid; gap: 16px; max-width: 1000px; }
.stage-result-row { display: grid; gap: 8px; }
.stage-result-top { display: flex; align-items: center; justify-content: space-between; font-size: clamp(16px, 2vw, 24px); font-weight: 700; }
.stage-track { height: 30px; border-radius: 999px; background: rgba(148, 163, 184, .18); overflow: hidden; }
.stage-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #818cf8, #6366f1); transition: width 1s cubic-bezier(.22, 1, .36, 1); }
.stage-result-row:nth-child(2n) .stage-fill { background: linear-gradient(90deg, #67e8f9, #22d3ee); }
.stage-bottom { display: flex; align-items: center; gap: 22px; color: var(--slate-400); font-size: 15px; }
.stage-bottom .live-dot { width: 12px; height: 12px; }
.stage-count { margin-inline-start: auto; font-size: 18px; font-weight: 800; color: #e2e8f0; font-variant-numeric: tabular-nums; }

/* ---- Small helpers ------------------------------------------------------ */
.muted { color: var(--slate-500); }
.divider { height: 1px; margin-block: 14px; background: var(--slate-100); }
.inline-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-note { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--slate-300); color: var(--slate-500); font-size: 10.5px; font-weight: 650; }
.pill-note i { width: 12px; height: 12px; }

@media (max-width: 1120px) {
  .portal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .portal-bar { padding: 10px 14px; }
  .portal-body { padding: 18px 14px 34px; }
  .portal-session span { display: none; }
  .stage { padding: 20px; }
  .stage-top { flex-wrap: wrap; }
  .stage-join { margin-inline-start: 0; }
}

/* ============================================================================
   SIGNATURE ELEVATION LAYER
   A distinctive, premium "live plane" identity for the polling module.
   Only polls pages load this file, so these overrides never touch the base
   survey admin theme — the shell stays familiar, the content surfaces feel
   like their own enterprise product.
   ============================================================================ */
:root {
  --live-grad: linear-gradient(135deg, #22d3ee, #6366f1 52%, #8b5cf6);
  --live-grad-strong: linear-gradient(135deg, #06b6d4, #4f46e5 55%, #7c3aed);
  --panel-glow: 0 24px 60px -30px rgba(79, 70, 229, .45);
  --hairline: linear-gradient(135deg, rgba(34, 211, 238, .55), rgba(139, 92, 246, .45));
}

::selection { background: rgba(99, 102, 241, .18); }

/* Signature backdrop on the polling surfaces (subtle aurora over the canvas) */
.main-column, .portal {
  background:
    radial-gradient(940px 440px at 100% -10%, rgba(99, 102, 241, .08), transparent 60%),
    radial-gradient(720px 360px at -6% 2%, rgba(34, 211, 238, .06), transparent 55%),
    var(--canvas);
}

/* Gradient module eyebrow + hero headline */
.eyebrow { background: linear-gradient(90deg, #4f46e5, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy h2 { background: linear-gradient(92deg, #0b1224, #4338ca); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Premium cards + hero */
.card { border-color: rgba(148, 163, 184, .3); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 20px 44px -34px rgba(30, 41, 59, .32); }
.hero-strip { border-color: rgba(99, 102, 241, .2); background: linear-gradient(115deg, #ffffff 8%, #f2f3ff 54%, #eafaff); box-shadow: var(--panel-glow); }
.hero-strip::after { background: radial-gradient(circle, rgba(99, 102, 241, .18), transparent 66%); }

/* KPI: top accent rail + gradient value + hover glow */
.kpi { position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 3px; background: var(--live-grad); }
.kpi:hover { border-color: #c7d2fe; box-shadow: 0 18px 36px -20px rgba(79, 70, 229, .42); }
.kpi-value { background: linear-gradient(135deg, #111a30, #4338ca); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Active question panel: gradient hairline + lift */
.question-stage { position: relative; border-color: rgba(99, 102, 241, .22); box-shadow: var(--panel-glow); }
.question-stage::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--hairline);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .55; pointer-events: none;
}

/* Result visualization — the signature element */
.result-track { height: 15px; background: #eceff5; box-shadow: inset 0 1px 2px rgba(15, 23, 42, .07); }
.result-fill { position: relative; overflow: hidden; background: linear-gradient(90deg, #6366f1, #4338ca); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.result-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent); transform: translateX(-100%); }
.result-row:nth-child(2n) .result-fill { background: linear-gradient(90deg, #22d3ee, #3b82f6); }
.result-row.leading .result-fill { background: var(--live-grad-strong); }
.result-row.leading .result-fill::after { animation: lpShimmer 2.8s ease-in-out infinite; }
.result-row.leading .result-key { color: #fff; background: var(--live-grad-strong); box-shadow: 0 6px 14px -8px rgba(99, 102, 241, .7); }
.result-row.correct .result-fill { background: linear-gradient(90deg, #34d399, #059669); }
@keyframes lpShimmer { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }

/* Live state + pulse refinements */
.state-live { box-shadow: inset 0 0 0 1px rgba(225, 29, 72, .18); }
.timer-ring::after { box-shadow: 0 4px 12px -5px rgba(15, 23, 42, .3); }

/* Public Session Portal bar — aurora sheen */
.portal-bar {
  background:
    radial-gradient(640px 220px at 100% -70%, rgba(99, 102, 241, .5), transparent 62%),
    linear-gradient(180deg, #0d1730, #070c18);
  box-shadow: 0 12px 34px -20px rgba(2, 6, 18, .85);
}
.portal-mode { box-shadow: 0 0 0 1px rgba(34, 211, 238, .16), 0 8px 20px -12px rgba(34, 211, 238, .4); }

/* Join code as gradient display type */
.join-code, .stage-join-copy strong { background: var(--live-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Glassy banners + premium primary actions */
.control-banner { backdrop-filter: blur(4px); box-shadow: 0 16px 36px -26px rgba(79, 70, 229, .45); }
.deck-btn.primary { background: var(--live-grad-strong); box-shadow: 0 12px 26px -12px rgba(99, 102, 241, .62); }
.vote-option.selected { box-shadow: inset 0 0 0 1px #c7d2fe, 0 12px 26px -18px rgba(99, 102, 241, .6); }
.vote-option.selected .vote-key { background: var(--live-grad-strong); }
.profile-card.selected { box-shadow: inset 0 0 0 1px #c7d2fe, 0 14px 30px -22px rgba(99, 102, 241, .55); }

/* Stage display — cinematic aurora + display type */
.stage {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1200px 720px at 78% -14%, rgba(99, 102, 241, .42), transparent 58%),
    radial-gradient(900px 640px at 8% 122%, rgba(34, 211, 238, .2), transparent 55%),
    linear-gradient(160deg, #0b1224, #070b16 62%, #05070f);
}
.stage::before {
  content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg at 70% 15%, rgba(99, 102, 241, .16), rgba(34, 211, 238, .1), rgba(139, 92, 246, .16), rgba(99, 102, 241, .16));
  filter: blur(60px); opacity: .55; animation: lpAurora 22s linear infinite;
}
.stage > * { position: relative; z-index: 1; }
.stage-question { background: linear-gradient(118deg, #ffffff, #c7d2fe); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stage-fill { position: relative; overflow: hidden; background: var(--live-grad); }
.stage-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); transform: translateX(-100%); animation: lpShimmer 3.2s ease-in-out infinite; }
.stage-result-row:nth-child(2n) .stage-fill { background: linear-gradient(90deg, #22d3ee, #6366f1); }
@keyframes lpAurora { to { transform: rotate(1turn); } }

/* ========================================================================== 
   Unified Live Session Polls UX — merged control-room system
   ========================================================================== */
:root {
  --un-bg: #07111f;
  --un-panel: #0c1727;
  --un-panel-2: #101d2f;
  --un-line: rgba(157, 175, 205, .17);
  --un-line-strong: rgba(157, 175, 205, .3);
  --un-text: #f5f8ff;
  --un-muted: #8d9cb3;
  --un-indigo: #818cf8;
  --un-indigo-strong: #6366f1;
  --un-cyan: #52d6ec;
  --un-green: #55d6af;
  --un-amber: #f4bc5f;
  --un-red: #ef7189;
  --un-shadow: 0 22px 60px rgba(0, 0, 0, .24);
}

.unified-live-shell { margin: 0; min-width: 320px; color: var(--un-text); background: var(--un-bg); overflow: hidden; }
.unified-live-shell * { box-sizing: border-box; }
.unified-live-shell button, .unified-live-shell select, .unified-live-shell textarea { font: inherit; }
.unified-live-shell button:focus-visible, .unified-live-shell a:focus-visible, .unified-live-shell select:focus-visible, .unified-live-shell input:focus-visible, .unified-live-shell textarea:focus-visible { outline: 3px solid rgba(82, 214, 236, .55); outline-offset: 2px; }
.unified-live-topbar { height: 72px; display: grid; grid-template-columns: minmax(210px, .8fr) minmax(260px, 1fr) auto; align-items: center; gap: 18px; padding: 0 18px; border-bottom: 1px solid var(--un-line); background: rgba(7, 17, 31, .95); box-shadow: 0 10px 30px rgba(0, 0, 0, .14); position: relative; z-index: 30; }
.unified-brand { display: flex; align-items: center; gap: 13px; min-width: 0; color: inherit; text-decoration: none; }
.unified-brand img { width: 110px; height: auto; filter: brightness(0) invert(1); }
.unified-mode { padding: 5px 8px; border: 1px solid rgba(129, 140, 248, .3); border-radius: 6px; color: #c9ceff; background: rgba(99, 102, 241, .13); font-size: 11px; font-weight: 750; white-space: nowrap; }
.unified-session-title { min-width: 0; text-align: center; }
.unified-session-title strong, .unified-session-title span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unified-session-title strong { font-size: 14px; letter-spacing: -.01em; }
.unified-session-title > span { margin-top: 3px; color: var(--un-muted); font-size: 11px; }
.unified-top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.unified-live-chip, .unified-health, .unified-lease, .unified-health-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 9px; border: 1px solid var(--un-line); border-radius: 8px; color: #b5c0d2; background: rgba(255, 255, 255, .025); font-size: 11px; font-weight: 700; white-space: nowrap; }
.unified-live-chip { color: #ff9bad; border-color: rgba(239, 113, 137, .28); background: rgba(239, 113, 137, .08); letter-spacing: .08em; }
.unified-live-chip .live-dot, .unified-state .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--un-red); box-shadow: 0 0 0 4px rgba(239, 113, 137, .12); animation: unifiedPulse 1.7s ease-out infinite; }
.unified-health svg, .unified-lease svg { width: 14px; height: 14px; color: var(--un-green); }
.unified-lease svg { color: var(--un-indigo); }
.unified-icon-btn, .unified-secondary-btn, .unified-primary-btn, .unified-danger-btn, .unified-reveal-btn { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 1px solid var(--un-line-strong); border-radius: 9px; color: #d8e0ed; background: #111e30; cursor: pointer; text-decoration: none; font-size: 11px; font-weight: 750; transition: transform .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease; }
.unified-icon-btn:hover, .unified-secondary-btn:hover, .unified-primary-btn:hover, .unified-danger-btn:hover, .unified-reveal-btn:hover { transform: translateY(-1px); border-color: rgba(129, 140, 248, .6); }
.unified-icon-btn svg, .unified-secondary-btn svg, .unified-primary-btn svg, .unified-danger-btn svg, .unified-reveal-btn svg { width: 15px; height: 15px; }
.unified-icon-btn.icon-only { width: 36px; padding: 0; }
.unified-icon-btn.danger, .unified-danger-btn { color: #ffc0cb; border-color: rgba(239, 113, 137, .35); background: rgba(239, 113, 137, .1); }
.unified-primary-btn { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--un-indigo-strong), #7c3aed); box-shadow: 0 12px 28px rgba(99, 102, 241, .18); }
.unified-primary-btn:disabled, .unified-reveal-btn:disabled { cursor: not-allowed; opacity: .42; transform: none; }
.unified-secondary-btn.compact { min-height: 32px; padding: 0 9px; }
.unified-primary-btn.full, .unified-secondary-btn.full { width: 100%; }
.is-hidden { display: none !important; }

.unified-live-workspace { height: calc(100vh - 72px); min-height: 610px; display: grid; grid-template-columns: minmax(250px, 292px) minmax(550px, 1fr) minmax(300px, 346px); gap: 12px; padding: 12px; background: radial-gradient(circle at 52% -20%, rgba(99, 102, 241, .12), transparent 42%), var(--un-bg); }
.unified-agenda-panel, .unified-intelligence-panel, .unified-presentation-card { min-height: 0; border: 1px solid var(--un-line); border-radius: 14px; background: var(--un-panel); box-shadow: var(--un-shadow); }
.unified-agenda-panel, .unified-intelligence-panel { display: flex; flex-direction: column; overflow: hidden; }
.unified-panel-head { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; border-bottom: 1px solid var(--un-line); }
.unified-panel-head h2, .unified-panel-head p { margin: 0; }
.unified-panel-head h2 { font-size: 14px; }
.unified-kicker { margin-bottom: 3px !important; color: var(--un-cyan); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.unified-agenda-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin: 10px 12px 6px; padding: 10px 0; border: 1px solid var(--un-line); border-radius: 10px; background: rgba(255, 255, 255, .025); }
.unified-agenda-summary span { text-align: center; border-inline-end: 1px solid var(--un-line); }
.unified-agenda-summary span:last-child { border: 0; }
.unified-agenda-summary strong, .unified-agenda-summary small { display: block; }
.unified-agenda-summary strong { font-size: 16px; }
.unified-agenda-summary small { margin-top: 2px; color: var(--un-muted); font-size: 9px; }
.unified-agenda-list { min-height: 0; overflow: auto; padding: 6px 9px 12px; scrollbar-width: thin; scrollbar-color: #334155 transparent; }
.unified-agenda-item { width: 100%; min-height: 65px; display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px; border: 1px solid transparent; border-radius: 10px; color: #dbe4f1; background: transparent; cursor: pointer; text-align: start; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.unified-agenda-item + .unified-agenda-item { margin-top: 4px; }
.unified-agenda-item:hover { background: rgba(255, 255, 255, .035); }
.unified-agenda-item.selected { border-color: rgba(129, 140, 248, .52); background: linear-gradient(100deg, rgba(99, 102, 241, .16), rgba(99, 102, 241, .045)); box-shadow: inset 3px 0 0 var(--un-indigo); }
html[dir="rtl"] .unified-agenda-item.selected { box-shadow: inset -3px 0 0 var(--un-indigo); }
.unified-agenda-item.completed { opacity: .72; }
.unified-q-index { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid var(--un-line-strong); border-radius: 8px; color: #aebcd0; background: #142237; font-size: 10px; font-weight: 800; }
.unified-q-index svg { width: 14px; color: var(--un-green); }
.unified-q-copy { min-width: 0; }
.unified-q-copy strong, .unified-q-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unified-q-copy strong { font-size: 11px; }
.unified-q-copy small { margin-top: 4px; color: var(--un-muted); font-size: 9px; }
.unified-state { min-height: 23px; display: inline-flex; align-items: center; gap: 5px; padding: 0 7px; border-radius: 999px; color: #96a5bb; background: #152235; font-size: 9px; font-weight: 800; }
.unified-state.live { color: #ffadbb; background: rgba(239, 113, 137, .1); }
.unified-state.pending { color: #aeb8ca; }
.unified-state.closed { color: #84dfc3; background: rgba(85, 214, 175, .09); }
.unified-agenda-foot { margin-top: auto; padding: 11px 13px; border-top: 1px solid var(--un-line); color: var(--un-muted); background: rgba(255, 255, 255, .018); font-size: 10px; line-height: 1.45; }
.unified-agenda-foot > span { display: flex; gap: 8px; }
.unified-agenda-foot svg { width: 15px; min-width: 15px; color: var(--un-green); }

.unified-stage-center { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; }
.unified-control-strip { min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 9px 11px; border: 1px solid var(--un-line); border-radius: 13px; background: rgba(12, 23, 39, .94); box-shadow: var(--un-shadow); }
.unified-timer { display: flex; align-items: center; gap: 9px; padding-inline-end: 11px; border-inline-end: 1px solid var(--un-line); }
.unified-timer-ring { --timer-pct: 73%; width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--un-cyan) var(--timer-pct), #243247 0); position: relative; }
.unified-timer-ring::after { content: ""; position: absolute; inset: 4px; border-radius: inherit; background: var(--un-panel); }
.unified-timer-ring strong { position: relative; z-index: 1; font-size: 10px; font-variant-numeric: tabular-nums; }
.unified-timer > span:last-child strong, .unified-timer > span:last-child small { display: block; white-space: nowrap; }
.unified-timer > span:last-child small { color: var(--un-muted); font-size: 9px; }
.unified-timer > span:last-child strong { margin-top: 2px; font-size: 10px; }
.unified-control-group, .unified-primary-actions { display: flex; align-items: center; gap: 6px; }
.unified-primary-actions { margin-inline-start: auto; }
.unified-presentation-card { overflow: auto; padding: clamp(20px, 3vh, 34px) clamp(22px, 3vw, 50px); background: radial-gradient(circle at 88% 0, rgba(99, 102, 241, .15), transparent 33%), linear-gradient(145deg, #101c2d, #0b1626 65%); }
.unified-question-meta, .unified-response-line, .unified-results-toolbar { display: flex; align-items: center; gap: 8px; }
.unified-question-meta { flex-wrap: wrap; }
.unified-type-chip, .unified-version-chip, .unified-freshness, .unified-host-only, .unified-private { min-height: 27px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid var(--un-line); border-radius: 7px; color: #b9c5d6; background: rgba(255, 255, 255, .025); font-size: 9px; font-weight: 750; }
.unified-type-chip { color: #d4d8ff; border-color: rgba(129, 140, 248, .28); background: rgba(99, 102, 241, .1); }
.unified-type-chip svg, .unified-freshness svg, .unified-host-only svg, .unified-private svg { width: 13px; height: 13px; }
.unified-freshness { margin-inline-start: auto; }
.unified-freshness svg { color: var(--un-green); }
.unified-host-only { color: #f9cb80; border-color: rgba(244, 188, 95, .25); background: rgba(244, 188, 95, .07); }
.unified-slide-label { margin: clamp(24px, 4vh, 38px) 0 8px; color: var(--un-cyan); font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.unified-presentation-card h1 { max-width: 950px; margin: 0; color: var(--un-text); font-size: clamp(25px, 2.7vw, 43px); line-height: 1.13; letter-spacing: -.035em; }
.unified-response-line { justify-content: space-between; margin: 17px 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--un-line); color: var(--un-muted); font-size: 11px; }
.unified-response-line strong { color: #fff; font-size: 14px; }
.unified-correct-count { display: inline-flex; align-items: center; gap: 6px; color: #9fe6ce; }
.unified-correct-count svg { width: 15px; }
.unified-results-toolbar { margin-bottom: 18px; }
.unified-segmented { display: inline-flex; padding: 3px; border: 1px solid var(--un-line); border-radius: 10px; background: rgba(0, 0, 0, .14); }
.unified-segmented button { min-height: 32px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border: 0; border-radius: 7px; color: var(--un-muted); background: transparent; cursor: pointer; font-size: 10px; font-weight: 750; }
.unified-segmented button.active { color: #fff; background: #273653; box-shadow: 0 5px 12px rgba(0, 0, 0, .2); }
.unified-segmented svg { width: 14px; }
.unified-audience-toggle { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; color: #d4ddea; cursor: pointer; }
.unified-audience-toggle input { width: 17px; height: 17px; accent-color: var(--un-indigo); }
.unified-audience-toggle strong, .unified-audience-toggle small { display: block; }
.unified-audience-toggle strong { font-size: 10px; }
.unified-audience-toggle small { margin-top: 2px; color: var(--un-muted); font-size: 8px; }
.unified-reveal-btn { color: #061d18; border-color: transparent; background: var(--un-green); }
.result-director { margin: 0 0 20px; overflow: hidden; border: 1px solid rgba(129, 140, 248, .27); border-radius: 14px; background: linear-gradient(145deg, rgba(28, 40, 64, .82), rgba(12, 23, 39, .94)); box-shadow: 0 20px 48px -34px rgba(99, 102, 241, .75); }
.result-director-head, .result-director-foot { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.result-director-head { justify-content: space-between; border-bottom: 1px solid var(--un-line); background: rgba(99, 102, 241, .055); }
.result-director-head > div, .result-director-head > div > span:last-child { display: flex; align-items: center; gap: 9px; }
.result-director-head > div > span:last-child { align-items: flex-start; flex-direction: column; gap: 2px; }
.result-director-head strong { color: #f4f7fc; font-size: 12px; }
.result-director-head small { color: var(--un-muted); font-size: 8px; }
.result-director-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #c9ceff; background: rgba(99, 102, 241, .16); }
.result-director-icon svg { width: 16px; }
.result-live-state, .result-preview-state { display: inline-flex; align-items: center; gap: 6px; color: #bfcbda; font-size: 9px; font-weight: 750; white-space: nowrap; }
.result-live-state { min-height: 28px; padding: 0 9px; border: 1px solid var(--un-line); border-radius: 999px; background: rgba(255, 255, 255, .025); }
.result-live-state.pending { color: #ffe1a8; border-color: rgba(244, 188, 95, .3); background: rgba(244, 188, 95, .08); }
.result-director-grid { display: grid; grid-template-columns: minmax(210px, .8fr) minmax(360px, 1.5fr); gap: 12px; padding: 13px 14px 9px; }
.result-control-field { min-width: 0; display: grid; gap: 6px; color: #aeb9ca; font-size: 8px; font-weight: 800; }
.result-control-field select { width: 100%; min-height: 35px; padding: 0 32px 0 10px; border: 1px solid var(--un-line-strong); border-radius: 8px; color: #e4eaf4; background: #101e31; font: inherit; font-size: 9px; }
.result-scene-picker { display: grid; grid-template-columns: repeat(4, minmax(70px, 1fr)); gap: 5px; }
.result-scene-picker button { min-height: 35px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--un-line); border-radius: 8px; color: var(--un-muted); background: rgba(255, 255, 255, .025); cursor: pointer; font-size: 9px; font-weight: 750; }
.result-scene-picker button.active { color: #fff; border-color: rgba(129, 140, 248, .54); background: rgba(99, 102, 241, .19); box-shadow: inset 0 0 0 1px rgba(129, 140, 248, .12); }
.result-scene-picker svg { width: 13px; }
.result-director-options { display: grid; grid-template-columns: auto minmax(105px, .35fr) minmax(310px, 1fr); align-items: end; gap: 12px; padding: 9px 14px 13px; }
.result-director-options > div:first-child { display: grid; gap: 6px; }
.result-option-label { color: #aeb9ca; font-size: 8px; font-weight: 800; }
.result-control-field.compact { align-self: stretch; }
.result-display-toggles { display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 6px; }
.result-display-toggles label, .result-targets label { min-height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid var(--un-line); border-radius: 7px; color: #c5cfdd; background: rgba(255, 255, 255, .02); cursor: pointer; font-size: 8px; font-weight: 700; }
.result-display-toggles input, .result-targets input { width: 14px; height: 14px; accent-color: var(--un-indigo); }
.result-director-foot { justify-content: space-between; flex-wrap: wrap; border-top: 1px solid var(--un-line); background: rgba(0, 0, 0, .1); }
.result-targets, .result-director-actions { display: flex; align-items: center; gap: 6px; }
.result-targets > span { margin-inline-end: 2px; color: var(--un-muted); font-size: 8px; font-weight: 800; }
.result-targets label > span { display: inline-flex; align-items: center; gap: 4px; }
.result-targets svg { width: 12px; }
.result-preview-state { color: #b9c5d7; }
.result-preview-state svg { width: 13px; color: #f4bc5f; }
.result-clear-btn, .result-take-live { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 11px; border-radius: 8px; cursor: pointer; font-size: 9px; font-weight: 800; }
.result-clear-btn { border: 1px solid var(--un-line-strong); color: #cbd5e2; background: #101e31; }
.result-take-live { border: 0; color: #061b16; background: linear-gradient(135deg, #55d6af, #2fc59b); box-shadow: 0 10px 24px rgba(47, 197, 155, .16); }
.result-clear-btn svg, .result-take-live svg { width: 14px; }
.result-take-live:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; }
.unified-presentation-card.hide-question-title > h1 { display: none; }
.unified-chart.hide-counts .result-count, .unified-chart.hide-percentages .result-percent { display: none; }
.unified-chart.hide-correct .correct { color: inherit; background: transparent; }
.unified-chart.hide-correct .correct em, .unified-chart.hide-correct .result-correct { display: none; }
.unified-chart.hide-correct .correct .unified-track span, .unified-chart.hide-correct .unified-column.correct i { background: linear-gradient(90deg, var(--un-indigo), var(--un-cyan)); }
.unified-chart { min-height: 255px; }
.unified-bar-view { display: grid; gap: 13px; }
.unified-result-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.unified-result-top > span { min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 11px; }
.unified-result-top b { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #ccd5e3; background: #1b2a40; font-size: 9px; }
.unified-result-top em { padding: 3px 6px; border-radius: 999px; color: #9be7cd; background: rgba(85, 214, 175, .1); font-size: 8px; font-style: normal; font-weight: 800; }
.unified-result-top > strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.unified-result-top > strong small { margin-inline-start: 5px; color: var(--un-muted); font-size: 9px; font-weight: 600; }
.unified-track { height: 8px; overflow: hidden; border-radius: 999px; background: #1b293d; }
.unified-track span { width: var(--value); height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--un-indigo-strong), var(--un-cyan)); transition: width .45s ease; }
.unified-result-row.correct .unified-track span { background: linear-gradient(90deg, #32b890, var(--un-green)); }
.unified-column-view { min-height: 260px; display: flex; align-items: end; justify-content: center; gap: clamp(16px, 3vw, 44px); padding: 25px 20px 0; border-bottom: 1px solid var(--un-line); }
.unified-column { width: clamp(64px, 8vw, 110px); height: 245px; display: grid; grid-template-rows: 22px minmax(0, 1fr) 23px 20px; align-items: end; text-align: center; }
.unified-column > span { align-self: start; color: #dce5f3; font-size: 11px; font-weight: 800; }
.unified-column i { width: 100%; height: var(--value); align-self: end; border-radius: 9px 9px 0 0; background: linear-gradient(#8b93ff, #4f46e5); }
.unified-column.correct i { background: linear-gradient(#69e0bc, #279d7a); }
.unified-column strong { margin-top: 6px; font-size: 10px; }
.unified-column small { color: var(--un-muted); font-size: 8px; }
.unified-donut-view { min-height: 260px; display: grid; grid-template-columns: minmax(190px, .85fr) minmax(220px, 1fr); align-items: center; gap: 30px; }
.unified-donut { width: min(240px, 90%); aspect-ratio: 1; margin: auto; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--un-green) 0 71%, var(--un-indigo) 71% 89%, var(--un-amber) 89% 97%, var(--un-red) 97%); position: relative; }
.unified-donut::after { content: ""; position: absolute; inset: 25%; border-radius: inherit; background: #0d1929; }
.unified-donut > span { position: relative; z-index: 1; text-align: center; }
.unified-donut strong, .unified-donut small { display: block; }
.unified-donut strong { font-size: 28px; }
.unified-donut small { color: var(--un-muted); font-size: 9px; }
.unified-legend { display: grid; gap: 10px; }
.unified-legend > span { display: grid; grid-template-columns: 10px 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px; border-bottom: 1px solid var(--un-line); color: #cbd5e4; font-size: 10px; }
.unified-legend i { width: 9px; height: 9px; border-radius: 3px; background: var(--legend); }
.unified-table-view { overflow: auto; }
.unified-table-view table { width: 100%; border-collapse: collapse; font-size: 10px; }
.unified-table-view caption { padding: 10px 0; color: var(--un-muted); text-align: start; }
.unified-table-view th, .unified-table-view td { padding: 12px 10px; border-bottom: 1px solid var(--un-line); text-align: start; }
.unified-table-view th { color: var(--un-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.unified-table-view tr.correct td { color: #9be7cd; background: rgba(85, 214, 175, .035); }
.unified-live-footer { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 10px; color: var(--un-muted); font-size: 9px; }
.unified-live-footer > span:first-child { display: inline-flex; align-items: center; gap: 6px; color: #a8ddcb; }
.status-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; }
.status-dot.healthy { background: var(--un-green); box-shadow: 0 0 0 3px rgba(85, 214, 175, .1); }
.unified-live-footer code { color: #93a3ba; font-size: 9px; }

.unified-health-badge { min-height: 27px; color: #9fe6ce; }
.unified-intel-tabs { display: grid; grid-template-columns: repeat(4, 1fr); padding: 7px; border-bottom: 1px solid var(--un-line); gap: 3px; }
.unified-intel-tabs button { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 8px; color: var(--un-muted); background: transparent; cursor: pointer; font-size: 9px; font-weight: 750; }
.unified-intel-tabs button.active { color: #fff; background: #17263b; }
.unified-intel-tabs svg { width: 14px; }
.unified-intel-tabs b { min-width: 16px; padding: 2px 4px; border-radius: 999px; color: #fff; background: var(--un-indigo-strong); font-size: 8px; }
.unified-intel-body { min-height: 0; overflow: auto; padding: 12px; }
.unified-intel-view { display: none; }
.unified-intel-view.active { display: block; }
.unified-fast-head > div, .unified-fast-head, .unified-fast-policy { display: flex; align-items: center; gap: 9px; }
.unified-fast-head { justify-content: space-between; padding-bottom: 11px; border-bottom: 1px solid var(--un-line); }
.unified-trophy { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #ffe0a0; background: rgba(244, 188, 95, .12); }
.unified-trophy svg { width: 17px; }
.unified-fast-head strong, .unified-fast-head small { display: block; }
.unified-fast-head strong { font-size: 11px; }
.unified-fast-head small { margin-top: 2px; color: var(--un-muted); font-size: 8px; }
.unified-private { min-height: 24px; color: #f6c979; }
.unified-fast-list { margin: 8px 0 12px; padding: 0; list-style: none; }
.unified-fast-list li { min-height: 55px; display: grid; grid-template-columns: 22px 31px minmax(0, 1fr) auto; align-items: center; gap: 8px; border-bottom: 1px solid var(--un-line); }
.unified-fast-list li > b { color: var(--un-amber); font-size: 12px; text-align: center; }
.unified-fast-list .avatar { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: #e1e5ff; background: #29345c; font-size: 8px; }
.unified-fast-list strong, .unified-fast-list small { display: block; }
.unified-fast-list strong { font-size: 10px; }
.unified-fast-list small { margin-top: 3px; color: var(--un-muted); font-size: 8px; }
.unified-fast-list time { color: #fff; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.unified-fast-policy { align-items: flex-start; margin: 10px 0; padding: 10px; border: 1px solid rgba(82, 214, 236, .15); border-radius: 9px; color: #91a9bd; background: rgba(82, 214, 236, .04); font-size: 9px; line-height: 1.5; }
.unified-fast-policy svg { width: 14px; min-width: 14px; color: var(--un-cyan); }
.unified-metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.unified-metric-grid > div { min-height: 86px; padding: 11px; border: 1px solid var(--un-line); border-radius: 10px; background: rgba(255, 255, 255, .025); }
.unified-metric-grid span, .unified-metric-grid strong, .unified-metric-grid small { display: block; }
.unified-metric-grid span { color: var(--un-muted); font-size: 9px; }
.unified-metric-grid strong { margin: 8px 0 4px; font-size: 20px; }
.unified-metric-grid small { color: #8edac1; font-size: 8px; }
.unified-mini-section { margin-top: 14px; padding: 12px; border: 1px solid var(--un-line); border-radius: 10px; }
.unified-mini-section h3 { margin: 0; font-size: 11px; }
.unified-mini-section > small { color: var(--un-muted); font-size: 8px; }
.unified-spark { height: 76px; display: flex; align-items: end; gap: 5px; margin: 12px 0 6px; }
.unified-spark i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(var(--un-cyan), var(--un-indigo-strong)); opacity: .8; }
.unified-qa-card { padding: 11px; border: 1px solid var(--un-line); border-radius: 10px; background: rgba(255, 255, 255, .022); }
.unified-qa-card + .unified-qa-card { margin-top: 8px; }
.unified-qa-card > div { display: flex; justify-content: space-between; gap: 7px; }
.unified-qa-card p { margin: 9px 0 12px; color: #d8e1ef; font-size: 10px; line-height: 1.55; }
.unified-upvotes { color: #aeb7ff; font-size: 9px; font-weight: 800; }
.unified-approved { color: #8fe0c5; font-size: 8px; }
.unified-qa-card button { min-height: 29px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid var(--un-line); border-radius: 7px; color: #b9c6d8; background: #152337; cursor: pointer; font-size: 8px; }
.unified-qa-card button svg { width: 12px; }
.unified-qa-card + .unified-secondary-btn { margin-top: 10px; }
.unified-audit-list article { min-height: 64px; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 8px; position: relative; }
.unified-audit-list article > span { width: 8px; height: 8px; margin-top: 4px; border: 2px solid #3c4f6b; border-radius: 50%; background: var(--un-indigo); }
.unified-audit-list article:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 3px; top: 15px; bottom: 3px; border-inline-start: 1px solid #334158; }
.unified-audit-list strong, .unified-audit-list small { display: block; }
.unified-audit-list strong { font-size: 10px; }
.unified-audit-list small { margin-top: 4px; color: var(--un-muted); font-size: 8px; line-height: 1.4; }

.unified-mobile-dock { display: none; }
.featured-card { border-color: rgba(99, 102, 241, .32) !important; background: linear-gradient(145deg, rgba(238, 242, 255, .9), #fff) !important; box-shadow: 0 18px 44px -28px rgba(79, 70, 229, .65) !important; }

@keyframes unifiedPulse { 0% { box-shadow: 0 0 0 0 rgba(239, 113, 137, .38); } 70%, 100% { box-shadow: 0 0 0 7px rgba(239, 113, 137, 0); } }

@media (max-width: 1320px) {
  .unified-live-workspace { grid-template-columns: 260px minmax(520px, 1fr) 312px; }
  .unified-health, .unified-lease { display: none; }
  .unified-audience-toggle small { display: none; }
  .result-director-options { grid-template-columns: minmax(300px, 1fr) 130px; }
  .result-display-toggles { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(90px, 1fr)); }
}
@media (max-width: 1080px) {
  .unified-live-shell { overflow: auto; }
  .unified-live-topbar { grid-template-columns: auto minmax(200px, 1fr) auto; }
  .unified-live-workspace { height: auto; min-height: calc(100vh - 72px); grid-template-columns: minmax(220px, 270px) minmax(0, 1fr); padding-bottom: 72px; }
  .unified-intelligence-panel { grid-column: 1 / -1; min-height: 420px; }
  .unified-intel-body { overflow: visible; }
}
@media (max-width: 780px) {
  .unified-live-topbar { height: 62px; grid-template-columns: 1fr auto; padding: 0 10px; }
  .unified-brand img { width: 92px; }
  .unified-mode, .unified-session-title, .unified-icon-btn.danger span { display: none; }
  .unified-icon-btn.danger { width: 36px; padding: 0; }
  .unified-live-workspace { min-height: calc(100vh - 62px); grid-template-columns: 1fr; padding: 8px 8px 70px; }
  .unified-agenda-panel, .unified-intelligence-panel { display: none; min-height: calc(100vh - 140px); }
  .unified-live-workspace.mobile-agenda .unified-agenda-panel, .unified-live-workspace.mobile-intelligence .unified-intelligence-panel { display: flex; }
  .unified-live-workspace.mobile-agenda .unified-stage-center, .unified-live-workspace.mobile-intelligence .unified-stage-center { display: none; }
  .unified-control-strip { flex-wrap: wrap; }
  .unified-primary-actions { width: 100%; margin: 0; }
  .unified-primary-actions > * { flex: 1; }
  .unified-presentation-card { padding: 20px 16px; }
  .unified-presentation-card h1 { font-size: clamp(24px, 7vw, 34px); }
  .unified-question-meta .unified-freshness { margin-inline-start: 0; }
  .unified-response-line, .unified-results-toolbar { align-items: flex-start; flex-direction: column; }
  .unified-audience-toggle { margin: 0; }
  .unified-segmented { width: 100%; }
  .unified-segmented button { flex: 1; justify-content: center; }
  .unified-segmented button span { display: none; }
  .unified-reveal-btn { width: 100%; }
  .result-director-grid, .result-director-options { grid-template-columns: 1fr; }
  .result-display-toggles { grid-column: auto; grid-template-columns: repeat(2, 1fr); }
  .result-director-head { align-items: flex-start; flex-direction: column; }
  .result-director-foot { align-items: stretch; flex-direction: column; }
  .result-targets, .result-director-actions { width: 100%; }
  .result-targets label, .result-director-actions button { flex: 1; }
  .result-preview-state { order: -1; }
  .unified-donut-view { grid-template-columns: 1fr; }
  .unified-donut { width: 190px; }
  .unified-live-footer > span:nth-child(2) { display: none; }
  .unified-mobile-dock { position: fixed; z-index: 40; inset-inline: 8px; bottom: 8px; height: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border: 1px solid var(--un-line-strong); border-radius: 14px; background: rgba(12, 23, 39, .96); box-shadow: 0 16px 40px rgba(0, 0, 0, .4); backdrop-filter: blur(14px); }
  .unified-mobile-dock button { display: flex; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 10px; color: var(--un-muted); background: transparent; font-size: 9px; font-weight: 750; }
  .unified-mobile-dock button.active { color: #fff; background: #263550; }
  .unified-mobile-dock svg { width: 15px; }
}
@media (max-width: 480px) {
  .unified-top-actions { gap: 4px; }
  .unified-live-chip { padding: 0 7px; }
  .unified-control-group { width: calc(100% - 138px); }
  .unified-control-group > * { flex: 1; padding: 0 7px; }
  .unified-control-group button:first-child span { display: none; }
  .unified-column-view { gap: 8px; padding-inline: 0; }
  .unified-column { width: 22%; }
  .unified-legend > span { grid-template-columns: 10px 18px minmax(0, 1fr) auto; }
}
@media (prefers-reduced-motion: reduce) {
  .unified-live-shell *, .unified-live-shell *::before, .unified-live-shell *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Builder additions */
.quiz-option-list { display: grid; gap: 8px; }
.quiz-option { min-height: 44px; display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--slate-200); border-radius: 9px; background: #fff; cursor: pointer; }
.quiz-option:has(> input[type="radio"]:checked) { border-color: #86d7be; background: #f2fdf9; box-shadow: inset 3px 0 0 #24a77f; }
html[dir="rtl"] .quiz-option:has(> input[type="radio"]:checked) { box-shadow: inset -3px 0 0 #24a77f; }
.quiz-option > input[type="radio"] { width: 16px; height: 16px; accent-color: #16a179; }
.quiz-letter { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: #4f46e5; background: #eef2ff; font-size: 9px; font-weight: 850; }
.quiz-option .input { min-height: 32px; border: 0; padding: 0; box-shadow: none; background: transparent; }
.correct-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; border-radius: 999px; color: #08765a; background: #dff8ef; font-size: 8px; font-weight: 800; }
.correct-chip svg { width: 11px; height: 11px; }
.competition-config { padding: 13px; border: 1px solid #d9ddff; border-radius: 11px; background: linear-gradient(145deg, #f7f8ff, #fff); }
.competition-head { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding-bottom: 11px; border-bottom: 1px solid #e7e9f4; }
.competition-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #a26908; background: #fff4d8; }
.competition-icon svg { width: 17px; }
.competition-head strong, .competition-head small { display: block; }
.competition-head strong { font-size: 10px; }
.competition-head small { margin-top: 3px; color: var(--slate-400); font-size: 8px; }
.competition-grid { display: grid; grid-template-columns: .55fr 1.2fr 1fr; gap: 9px; margin-top: 11px; }
.competition-rule { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; padding: 9px; border-radius: 8px; color: #526173; background: #edf8fb; font-size: 8px; line-height: 1.5; }
.competition-rule svg { width: 13px; min-width: 13px; color: #0891b2; }
@media (max-width: 780px) { .competition-grid { grid-template-columns: 1fr; } .quiz-option { grid-template-columns: 18px 26px minmax(0, 1fr); } .quiz-option .correct-chip { grid-column: 3; justify-self: start; } }

/* Unified participant */
.unified-participant-page { min-height: 100vh; margin: 0; background: radial-gradient(circle at 48% -10%, #e9eaff, transparent 34%), #f3f5f9; color: #122033; }
.participant-preview-bar { min-height: 52px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 18px; border-bottom: 1px solid #e2e7ef; background: rgba(255, 255, 255, .86); backdrop-filter: blur(12px); }
.participant-preview-bar > a, .participant-preview-bar > span, .participant-preview-bar > button { display: inline-flex; align-items: center; gap: 7px; color: #5b687a; font-size: 10px; font-weight: 750; }
.participant-preview-bar > a { text-decoration: none; }
.participant-preview-bar > span { justify-self: center; }
.participant-preview-bar > button { justify-self: end; min-height: 32px; padding: 0 9px; border: 1px solid #dce2eb; border-radius: 8px; background: #fff; cursor: pointer; }
.participant-preview-bar svg { width: 14px; }
.participant-preview-canvas { min-height: calc(100vh - 52px); display: grid; grid-template-columns: minmax(330px, 430px) minmax(300px, 430px); align-items: center; justify-content: center; gap: clamp(28px, 6vw, 86px); padding: 34px 24px; }
.participant-device { width: min(100%, 410px); height: min(820px, calc(100vh - 86px)); min-height: 620px; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); overflow: hidden; border: 7px solid #142034; border-radius: 35px; background: #f8fafc; box-shadow: 0 38px 85px -35px rgba(30, 41, 59, .55); }
.participant-app-head { min-height: 57px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; background: #fff; }
.participant-app-head img { width: 106px; }
.participant-app-head button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #e1e6ee; border-radius: 8px; color: #5e6a7c; background: #fff; }
.participant-app-head svg { width: 14px; }
.participant-session-strip { min-height: 38px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 15px; color: #cbd6e6; background: #111d30; font-size: 8px; }
.participant-session-strip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.participant-session-strip > span:first-child { display: inline-flex; align-items: center; gap: 5px; color: #ff9cad; }
.participant-session-strip .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #ef7189; }
.participant-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 7px 9px; border-bottom: 1px solid #e8edf4; background: #fff; }
.participant-nav button { min-height: 37px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 8px; color: #7c899b; background: transparent; font-size: 9px; font-weight: 750; }
.participant-nav button.active { color: #4f46e5; background: #eef0ff; }
.participant-nav svg { width: 13px; }
.participant-nav b { min-width: 15px; padding: 2px 4px; border-radius: 999px; color: #fff; background: #6366f1; font-size: 7px; }
.participant-scroll { min-height: 0; overflow: auto; padding: 14px; }
.participant-question-card, .participant-waiting-card, .participant-results-card { padding: 16px; border: 1px solid #e1e7ef; border-radius: 15px; background: #fff; box-shadow: 0 12px 30px -24px rgba(15, 23, 42, .35); }
.participant-question-meta, .participant-results-card > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #7c899a; font-size: 8px; }
.participant-question-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.participant-question-meta svg { width: 13px; }
.quiz-pill { min-height: 25px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: 999px; color: #5046c7; background: #eff0ff; font-size: 8px; font-weight: 800; }
.quiz-pill svg { width: 12px; }
.participant-question-number { margin: 18px 0 6px !important; color: #0891b2 !important; font-size: 8px !important; font-weight: 850; letter-spacing: .12em; }
.participant-question-card h1, .participant-waiting-card h1 { margin: 0; color: #172033; font-size: 19px; line-height: 1.25; letter-spacing: -.025em; }
.participant-question-card > p:last-of-type, .participant-waiting-card > p:last-of-type { margin: 8px 0 15px; color: #718095; font-size: 9px; line-height: 1.5; }
.unified-answer-list { display: grid; gap: 8px; }
.unified-answer-option { min-height: 49px; display: grid; grid-template-columns: 31px minmax(0, 1fr) 20px; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid #dfe5ee; border-radius: 11px; color: #26364a; background: #fff; cursor: pointer; text-align: start; }
.unified-answer-option:hover { border-color: #adb5ff; }
.unified-answer-option > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; color: #4f46e5; background: #eff1ff; font-size: 9px; font-weight: 850; }
.unified-answer-option strong { font-size: 10px; }
.unified-answer-option svg { width: 16px; color: transparent; }
.unified-answer-option.selected { border-color: #7c83ff; background: #f6f7ff; box-shadow: inset 3px 0 0 #6366f1; }
html[dir="rtl"] .unified-answer-option.selected { box-shadow: inset -3px 0 0 #6366f1; }
.unified-answer-option.selected svg { color: #6366f1; }
.participant-submit { width: 100%; min-height: 45px; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 13px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #6366f1, #7c3aed); box-shadow: 0 12px 25px -15px rgba(79, 70, 229, .65); cursor: pointer; font-size: 10px; font-weight: 800; }
.participant-submit:disabled { cursor: not-allowed; opacity: .43; box-shadow: none; }
.participant-submit.accepted { background: #1ca379; opacity: 1; }
.participant-submit svg { width: 15px; }
.participant-receipt { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px; border-radius: 9px; color: #0e795b; background: #eafaf4; }
.participant-receipt[hidden] { display: none; }
.participant-receipt svg { width: 18px; min-width: 18px; }
.participant-receipt strong, .participant-receipt small { display: block; }
.participant-receipt strong { font-size: 9px; }
.participant-receipt small { margin-top: 3px; font-size: 7px; }
.participant-privacy { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 11px; border: 1px solid #dce7ee; border-radius: 11px; color: #577080; background: #f5fafc; }
.participant-privacy svg { width: 16px; min-width: 16px; color: #0b9b77; }
.participant-privacy strong, .participant-privacy small { display: block; }
.participant-privacy strong { font-size: 9px; }
.participant-privacy small { margin-top: 3px; font-size: 7px; line-height: 1.45; }
.participant-waiting-card { text-align: center; padding: 42px 20px; }
.participant-waiting-card[hidden], .participant-question-card[hidden], .participant-results-card[hidden] { display: none; }
.waiting-orbit { width: 62px; height: 62px; display: grid; place-items: center; margin: 0 auto 17px; border-radius: 50%; color: #6366f1; background: #eff0ff; box-shadow: 0 0 0 9px #f7f7ff; }
.waiting-orbit svg { width: 24px; }
.participant-results-card { margin-top: 10px; }
.participant-result-prompt { margin: 12px 0 4px; color: #25334a; font-size: 10px; font-weight: 800; line-height: 1.45; }
.participant-results-card h2 { margin: 15px 0 8px; font-size: 12px; }
.participant-correct-answer { display: grid; grid-template-columns: 28px minmax(0, 1fr) 18px; align-items: center; gap: 8px; padding: 10px; border: 1px solid #b9eadb; border-radius: 9px; color: #0b7458; background: #ecfbf6; }
.participant-correct-answer > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: #23a67f; font-size: 8px; font-weight: 800; }
.participant-correct-answer strong { font-size: 9px; }
.participant-correct-answer svg { width: 15px; }
.participant-mini-bars { display: grid; gap: 8px; margin-top: 13px; }
.participant-mini-bars > span { display: grid; grid-template-columns: 52px minmax(0, 1fr) 28px; align-items: center; gap: 6px; font-size: 8px; }
.participant-mini-bars b { overflow: hidden; text-overflow: ellipsis; }
.participant-mini-bars > span > strong { display: grid; gap: 1px; text-align: end; }
.participant-mini-bars .result-count { color: #8b97a8; font-size: 6px; font-weight: 700; }
.participant-mini-bars i { height: 5px; overflow: hidden; border-radius: 999px; background: #edf0f5; }
.participant-mini-bars em { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #6366f1, #22c4d6); }
.participant-mini-donut { width: 150px; aspect-ratio: 1; display: none; place-items: center; margin: 14px auto 0; border-radius: 50%; background: conic-gradient(#55d6af 0 71%, #818cf8 71% 89%, #f4bc5f 89% 97%, #ef7189 97%); position: relative; }
.participant-mini-donut::after { content: ""; position: absolute; inset: 26%; border-radius: inherit; background: #fff; }
.participant-mini-donut > span { position: relative; z-index: 1; text-align: center; }
.participant-mini-donut strong, .participant-mini-donut small { display: block; }
.participant-mini-donut strong { font-size: 18px; }
.participant-mini-donut small { color: #8490a1; font-size: 7px; }
.participant-results-card[data-chart="donut"] .participant-mini-bars { display: none; }
.participant-results-card[data-chart="donut"] .participant-mini-donut { display: grid; }
.participant-results-card[data-chart="table"] .participant-mini-bars > span { grid-template-columns: minmax(0, 1fr) 40px; padding: 6px 0; border-bottom: 1px solid #edf0f5; }
.participant-results-card[data-chart="table"] .participant-mini-bars i { display: none; }
.participant-results-card[data-chart="column"] .participant-mini-bars { height: 125px; display: flex; align-items: end; justify-content: center; gap: 8px; }
.participant-results-card[data-chart="column"] .participant-mini-bars > span { width: 22%; height: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 4px; text-align: center; }
.participant-results-card[data-chart="column"] .participant-mini-bars i { width: 100%; height: 75px; display: flex; align-items: end; border-radius: 5px 5px 0 0; }
.participant-results-card[data-chart="column"] .participant-mini-bars em { width: 100% !important; height: var(--column-height, 60%); }
.participant-results-card[data-chart="column"] .participant-mini-bars > span:nth-child(1) em { --column-height: 71%; }
.participant-results-card[data-chart="column"] .participant-mini-bars > span:nth-child(2) em { --column-height: 18%; }
.participant-results-card[data-chart="column"] .participant-mini-bars > span:nth-child(3) em { --column-height: 8%; }
.participant-results-card[data-chart="column"] .participant-mini-bars > span:nth-child(4) em { --column-height: 3%; }
.participant-results-card.hide-question-title .participant-result-prompt { display: none; }
.participant-results-card.hide-correct .participant-correct-answer, .participant-results-card.hide-correct h2 { display: none; }
.participant-results-card.hide-percentages .result-percent, .participant-results-card.hide-counts .result-count { display: none; }
.participant-preview-notes { align-self: center; }
.participant-preview-notes .eyebrow { color: #4f46e5; }
.participant-preview-notes h2 { max-width: 390px; margin: 8px 0 12px; color: #152238; font-size: clamp(28px, 3vw, 42px); line-height: 1.07; letter-spacing: -.04em; }
.participant-preview-notes > p:not(.eyebrow) { max-width: 420px; color: #68768a; font-size: 11px; line-height: 1.7; }
.participant-flow-list { display: grid; gap: 8px; margin-top: 24px; }
.participant-flow-list > span { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px; border: 1px solid #e0e5ee; border-radius: 11px; background: rgba(255, 255, 255, .65); }
.participant-flow-list > span > b { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #4f46e5; background: #e9ebff; font-size: 10px; }
.participant-flow-list strong, .participant-flow-list small { display: block; }
.participant-flow-list strong { font-size: 10px; }
.participant-flow-list small { margin-top: 3px; color: #8490a1; font-size: 8px; }
.participant-host-link { min-height: 44px; display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 0 13px; border-radius: 10px; color: #fff; background: #17243a; text-decoration: none; font-size: 10px; font-weight: 750; }
.participant-host-link svg { width: 14px; }
.participant-host-link svg:last-child { margin-inline-start: auto; }
@media (max-width: 820px) { .participant-preview-bar { grid-template-columns: 1fr auto; } .participant-preview-bar > span { display: none; } .participant-preview-canvas { grid-template-columns: 1fr; padding: 16px; } .participant-preview-notes { display: none; } .participant-device { height: calc(100vh - 84px); margin: auto; } }

/* Unified stage */
.unified-stage-page { min-width: 760px; min-height: 100vh; margin: 0; overflow: hidden; color: #f7f9ff; background: radial-gradient(circle at 80% -5%, rgba(99, 102, 241, .3), transparent 38%), radial-gradient(circle at 4% 108%, rgba(25, 190, 201, .17), transparent 38%), #07111f; }
.unified-stage-head { height: 76px; display: grid; grid-template-columns: 180px 1fr auto; align-items: center; gap: 18px; padding: 0 30px; border-bottom: 1px solid rgba(160, 178, 205, .16); background: rgba(7, 17, 31, .83); }
.unified-stage-head img { width: 126px; filter: brightness(0) invert(1); }
.unified-stage-head > div { text-align: center; }
.unified-stage-head strong, .unified-stage-head span { display: block; }
.unified-stage-head > div strong { font-size: 14px; }
.unified-stage-head > div span { margin-top: 4px; color: #8494aa; font-size: 10px; }
.stage-live { min-height: 32px; display: inline-flex !important; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid rgba(239, 113, 137, .3); border-radius: 8px; color: #ff9cad; background: rgba(239, 113, 137, .08); font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.stage-live .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #ef7189; animation: unifiedPulse 1.7s ease-out infinite; }
.unified-stage-main { height: calc(100vh - 128px); display: grid; place-items: center; padding: clamp(30px, 5vh, 70px) clamp(40px, 7vw, 120px); }
.unified-stage-scene { width: min(1450px, 100%); }
.unified-stage-scene[hidden] { display: none; }
.stage-scene-meta { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.stage-scene-meta > span { min-height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid rgba(150, 169, 196, .2); border-radius: 9px; color: #c3cfdf; background: rgba(255, 255, 255, .035); font-size: clamp(10px, 1vw, 14px); font-weight: 750; }
.stage-scene-meta svg { width: 17px; color: #7ce0ef; }
.unified-stage-scene > p { margin: clamp(30px, 5vh, 60px) 0 11px; color: #5cd8ec; font-size: clamp(11px, 1.1vw, 16px); font-weight: 850; letter-spacing: .17em; }
.unified-stage-scene > h1 { max-width: 1300px; margin: 0; color: #fff; font-size: clamp(38px, 5.2vw, 82px); line-height: 1.07; letter-spacing: -.045em; text-wrap: balance; }
.stage-answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(34px, 6vh, 70px); }
.stage-answer-grid > span { min-height: clamp(62px, 8vh, 90px); display: flex; align-items: center; gap: 16px; padding: 0 21px; border: 1px solid rgba(152, 171, 198, .18); border-radius: 14px; color: #dce6f4; background: rgba(255, 255, 255, .038); font-size: clamp(14px, 1.6vw, 23px); font-weight: 700; }
.stage-answer-grid b { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #d8dcff; background: rgba(99, 102, 241, .22); font-size: 13px; }
.stage-response-progress { display: grid; grid-template-columns: auto minmax(200px, 1fr) auto; align-items: center; gap: 15px; margin-top: 24px; color: #8d9db3; font-size: 10px; }
.stage-response-progress strong { color: #fff; font-size: 14px; }
.stage-response-progress i { height: 6px; overflow: hidden; border-radius: 999px; background: #1b293d; }
.stage-response-progress em { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #6366f1, #52d6ec); }
.stage-waiting-scene { text-align: center; }
.stage-waiting-icon { width: 94px; height: 94px; display: grid; place-items: center; margin: 0 auto 30px; border: 1px solid rgba(129, 140, 248, .28); border-radius: 50%; color: #aab0ff; background: rgba(99, 102, 241, .1); box-shadow: 0 0 0 16px rgba(99, 102, 241, .035); }
.stage-waiting-icon svg { width: 36px; }
.stage-waiting-scene > p { margin-top: 0; }
.stage-waiting-scene > h1 { margin-inline: auto; }
.stage-waiting-note { display: block; margin-top: 22px; color: #8d9db3; font-size: clamp(11px, 1.2vw, 17px); }
.stage-result-scene > p { margin-top: 24px; }
.stage-result-scene > h1 { font-size: clamp(28px, 3.4vw, 54px); }
.stage-adaptive-results { margin-top: clamp(28px, 4vh, 52px); }
.stage-chart-bars { display: grid; gap: clamp(13px, 2vh, 22px); }
.stage-adaptive-row { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(300px, 1.5fr) 65px; align-items: center; gap: 18px; }
.stage-adaptive-row > span { display: flex; align-items: center; gap: 10px; color: #d9e3f1; font-size: clamp(12px, 1.4vw, 20px); }
.stage-adaptive-row b { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; color: #d8dcff; background: #202e49; font-size: 10px; }
.stage-adaptive-row em { padding: 5px 8px; border-radius: 999px; color: #86e3c6; background: rgba(85, 214, 175, .1); font-size: 9px; font-style: normal; font-weight: 800; }
.stage-adaptive-row > i { height: 15px; overflow: hidden; border-radius: 999px; background: #18263a; }
.stage-adaptive-row u { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #6366f1, #52d6ec); text-decoration: none; }
.stage-adaptive-row.correct u { background: linear-gradient(90deg, #279d7a, #55d6af); }
.stage-adaptive-row > strong { font-size: clamp(15px, 1.8vw, 25px); text-align: end; }
.stage-chart-columns, .stage-chart-donut, .stage-chart-table { display: none; }
.stage-adaptive-results[data-chart="column"] .stage-chart-bars, .stage-adaptive-results[data-chart="donut"] .stage-chart-bars, .stage-adaptive-results[data-chart="table"] .stage-chart-bars { display: none; }
.stage-adaptive-results[data-chart="column"] .stage-chart-columns { min-height: 310px; display: flex; align-items: end; justify-content: center; gap: clamp(24px, 5vw, 80px); border-bottom: 1px solid rgba(152, 171, 198, .2); }
.stage-chart-columns > div { width: clamp(100px, 10vw, 155px); height: 300px; display: grid; grid-template-rows: 28px minmax(0, 1fr) 38px; text-align: center; }
.stage-chart-columns strong { font-size: 15px; }
.stage-chart-columns i { width: 100%; height: var(--v); align-self: end; border-radius: 12px 12px 0 0; background: linear-gradient(#818cf8, #4f46e5); }
.stage-chart-columns .correct i { background: linear-gradient(#66dfba, #279d7a); }
.stage-chart-columns span { padding-top: 10px; color: #bdc9d9; font-size: 10px; }
.stage-adaptive-results[data-chart="donut"] .stage-chart-donut { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(300px, 1fr); align-items: center; gap: 70px; }
.stage-chart-donut > div { width: min(350px, 80%); aspect-ratio: 1; display: grid; place-items: center; margin: auto; border-radius: 50%; background: conic-gradient(#55d6af 0 71%, #818cf8 71% 89%, #f4bc5f 89% 97%, #ef7189 97%); position: relative; }
.stage-chart-donut > div::after { content: ""; position: absolute; inset: 27%; border-radius: inherit; background: #0b1625; }
.stage-chart-donut > div span { position: relative; z-index: 1; text-align: center; }
.stage-chart-donut > div strong, .stage-chart-donut > div small { display: block; }
.stage-chart-donut > div strong { font-size: 38px; }
.stage-chart-donut > div small { color: #8d9db3; font-size: 10px; }
.stage-chart-donut ul { margin: 0; padding: 0; list-style: none; }
.stage-chart-donut li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; padding: 14px; border-bottom: 1px solid rgba(152, 171, 198, .15); color: #d7e0ee; font-size: 13px; }
.stage-chart-donut li i { width: 11px; height: 11px; border-radius: 3px; background: var(--c); }
.stage-adaptive-results[data-chart="table"] .stage-chart-table { display: block; }
.stage-chart-table table { width: 100%; border-collapse: collapse; font-size: clamp(12px, 1.3vw, 18px); }
.stage-chart-table th, .stage-chart-table td { padding: 16px; border-bottom: 1px solid rgba(152, 171, 198, .18); text-align: start; }
.stage-chart-table th { color: #8393a9; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.stage-chart-table tr.correct { color: #88e5c7; background: rgba(85, 214, 175, .04); }
.stage-result-scene.hide-question-title > h1 { display: none; }
.stage-result-scene.hide-correct .correct { color: inherit; background: transparent; }
.stage-result-scene.hide-correct .correct em, .stage-result-scene.hide-correct .result-correct, .stage-result-scene.hide-correct [data-stage-correct-meta] { display: none; }
.stage-result-scene.hide-correct .stage-adaptive-row.correct u, .stage-result-scene.hide-correct .stage-chart-columns .correct i { background: linear-gradient(90deg, #6366f1, #52d6ec); }
.stage-result-scene.hide-percentages .result-percent, .stage-result-scene.hide-counts .result-count { display: none; }
.stage-fastest-scene > h1 { font-size: clamp(36px, 4vw, 64px); }
.stage-podium { min-height: 330px; display: flex; align-items: end; justify-content: center; gap: 18px; margin-top: 18px; }
.stage-podium article { width: min(240px, 25%); min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 20px; border: 1px solid rgba(152, 171, 198, .2); border-radius: 18px 18px 0 0; background: rgba(255, 255, 255, .04); position: relative; }
.stage-podium article.first { min-height: 300px; border-color: rgba(244, 188, 95, .45); background: linear-gradient(rgba(244, 188, 95, .11), rgba(255, 255, 255, .035)); }
.stage-podium article.second { min-height: 250px; }
.stage-podium article.third { min-height: 220px; }
.stage-podium article > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #ffe09b; background: rgba(244, 188, 95, .12); font-size: 14px; font-weight: 900; }
.stage-podium article > svg { width: 28px; margin-bottom: 8px; color: #f4bc5f; }
.stage-podium .avatar { width: 64px; height: 64px; display: grid; place-items: center; margin: 16px 0 12px; border-radius: 50%; color: #e5e7ff; background: #29345d; font-size: 16px; font-weight: 800; }
.stage-podium article strong { font-size: clamp(12px, 1.2vw, 17px); text-align: center; }
.stage-podium time { margin-top: 7px; color: #7fe2c4; font-size: clamp(15px, 1.6vw, 22px); font-weight: 850; }
.stage-runner-list { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; gap: 10px; margin-top: 10px; }
.stage-runner-list > span { min-height: 48px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid rgba(152, 171, 198, .16); border-radius: 10px; background: rgba(255, 255, 255, .03); }
.stage-runner-list b { color: #f4bc5f; }
.stage-runner-list strong { font-size: 11px; }
.stage-runner-list time { color: #8fdcc5; font-size: 12px; font-weight: 800; }
.unified-stage-foot { height: 52px; display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 16px; padding: 0 30px; border-top: 1px solid rgba(152, 171, 198, .15); color: #8c9bb0; background: rgba(7, 17, 31, .9); font-size: 9px; }
.unified-stage-foot > span:first-child { display: inline-flex; align-items: center; gap: 7px; color: #94ddc5; }
.unified-stage-foot > strong { padding: 6px 9px; border-radius: 7px; color: #fff; background: rgba(99, 102, 241, .18); letter-spacing: .1em; }

/* Reported fastest-correct evidence */
.report-fastest-block { margin-top: 15px; padding: 12px; border: 1px solid #dde1ff; border-radius: 11px; background: linear-gradient(145deg, #f8f8ff, #fff); }
.report-fastest-head, .report-fastest-head > span:first-child { display: flex; align-items: center; gap: 8px; }
.report-fastest-head { justify-content: space-between; }
.report-fastest-head > span:first-child > i, .report-fastest-head > span:first-child > svg { width: 27px; height: 27px; padding: 6px; border-radius: 8px; color: #a36a08; background: #fff2cf; }
.report-fastest-head strong, .report-fastest-head small { display: block; }
.report-fastest-head strong { font-size: 10px; }
.report-fastest-head small { margin-top: 3px; color: var(--slate-400); font-size: 8px; }
.report-fastest-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-top: 11px; }
.report-fastest-grid > span { min-height: 47px; display: grid; grid-template-columns: 21px minmax(0, 1fr); align-items: center; gap: 6px; padding: 7px; border: 1px solid var(--slate-200); border-radius: 8px; background: #fff; }
.report-fastest-grid b { grid-row: span 2; color: #a36a08; text-align: center; }
.report-fastest-grid strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.report-fastest-grid time { color: #168265; font-size: 9px; font-weight: 800; }
@media (max-width: 920px) { .report-fastest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Access & launch management */
.access-launch-card { overflow: hidden; }
.access-launch-steps { display: grid; grid-template-columns: repeat(4, 1fr); padding: 16px; border-bottom: 1px solid var(--slate-200); background: linear-gradient(90deg, #f8f9ff, #fbfeff); }
.access-launch-steps > span { min-width: 0; display: grid; grid-template-columns: 29px minmax(0, 1fr); align-items: center; gap: 8px; position: relative; }
.access-launch-steps > span:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 14px; inset-inline-start: 35px; inset-inline-end: 7px; height: 2px; background: #dfe4ec; }
.access-launch-steps b { width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid #d8dee8; border-radius: 50%; color: #8794a5; background: #fff; font-size: 9px; position: relative; z-index: 1; }
.access-launch-steps b svg { width: 13px; }
.access-launch-steps .done b { color: #fff; border-color: #21a47d; background: #21a47d; }
.access-launch-steps .active b { color: #fff; border-color: #6366f1; background: #6366f1; box-shadow: 0 0 0 5px #eceeff; }
.access-launch-steps strong, .access-launch-steps small { display: block; }
.access-launch-steps strong { font-size: 9px; }
.access-launch-steps small { margin-top: 3px; color: var(--slate-400); font-size: 7px; }
.access-launch-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 12px; padding: 14px; }
.access-card { padding: 13px; border: 1px solid var(--slate-200); border-radius: 11px; background: #fff; }
.access-card-head { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding-bottom: 11px; border-bottom: 1px solid var(--slate-200); }
.access-card-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; }
.access-card-icon.indigo { color: #4f46e5; background: #eef0ff; }
.access-card-icon.cyan { color: #087f98; background: #e8f9fc; }
.access-card-icon svg { width: 17px; }
.access-card-head strong, .access-card-head small { display: block; }
.access-card-head strong { font-size: 10px; }
.access-card-head small { margin-top: 3px; color: var(--slate-400); font-size: 8px; }
.access-identity { min-height: 54px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.access-identity .avatar { width: 31px; height: 31px; font-size: 8px; }
.access-identity strong, .access-identity small { display: block; }
.access-identity strong { font-size: 9px; }
.access-identity small { margin-top: 2px; color: var(--slate-400); font-size: 7px; }
.access-card > label { display: block; margin: 4px 0 5px; color: var(--slate-500); font-size: 8px; font-weight: 750; }
.access-link-field { min-height: 38px; display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; border: 1px solid var(--slate-200); border-radius: 8px; background: var(--slate-50); overflow: hidden; }
.access-link-field code { overflow: hidden; padding: 0 9px; color: #46566c; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.access-link-field button { height: 100%; display: grid; place-items: center; border: 0; border-inline-start: 1px solid var(--slate-200); color: #5f6d80; background: #fff; cursor: pointer; }
.access-link-field svg { width: 13px; }
.access-meta { display: grid; gap: 5px; margin: 9px 0; color: var(--slate-400); font-size: 7px; }
.access-meta > span { display: flex; align-items: center; gap: 5px; }
.access-meta svg { width: 11px; }
.access-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.danger-text { color: #c23c55 !important; }
.participant-access-main { min-height: 84px; display: flex; align-items: center; gap: 12px; }
.access-qr { width: 66px; height: 66px; display: grid; place-items: center; border: 1px solid var(--slate-200); border-radius: 9px; background: #fff; box-shadow: 0 5px 16px rgba(15, 23, 42, .07); }
.access-qr svg { width: 48px; height: 48px; color: #111827; }
.participant-access-main > div:last-child > span, .participant-access-main > div:last-child > strong, .participant-access-main > div:last-child > small { display: block; }
.participant-access-main > div:last-child > span { color: var(--slate-400); font-size: 8px; }
.participant-access-main > div:last-child > strong { margin: 3px 0; color: #3730a3; font-size: 21px; letter-spacing: .12em; }
.participant-access-main > div:last-child > small { color: var(--slate-500); font-size: 8px; }
.admission-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 9px; padding: 8px 0; border: 1px solid var(--slate-200); border-radius: 8px; background: var(--slate-50); }
.admission-stats > span { padding: 0 8px; border-inline-end: 1px solid var(--slate-200); }
.admission-stats > span:last-child { border: 0; }
.admission-stats small, .admission-stats strong { display: block; }
.admission-stats small { color: var(--slate-400); font-size: 7px; }
.admission-stats strong { margin-top: 4px; font-size: 11px; }
.access-warning { display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; align-items: center; gap: 7px; margin-top: 10px; padding: 8px; border-radius: 8px; color: #725616; background: #fff8e5; font-size: 7px; line-height: 1.45; }
.access-warning svg { width: 13px; }
.access-warning button { border: 0; color: #86620f; background: transparent; cursor: pointer; font-size: 7px; font-weight: 800; white-space: nowrap; }

/* Host admission controls */
.host-admission-card { margin: 4px 10px 7px; padding: 9px; border: 1px solid rgba(82, 214, 236, .18); border-radius: 10px; background: rgba(82, 214, 236, .045); }
.host-admission-card > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.host-admission-card > div:first-child > span { display: inline-flex; align-items: center; gap: 6px; color: #b8e8da; font-size: 9px; }
.host-admission-card > div:first-child button { min-height: 26px; display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border: 1px solid rgba(239, 113, 137, .25); border-radius: 7px; color: #ffaabc; background: rgba(239, 113, 137, .08); cursor: pointer; font-size: 8px; }
.host-admission-card svg { width: 12px; }
.host-join-code { display: grid; grid-template-columns: minmax(0, 1fr) 28px 28px; align-items: center; gap: 5px; margin-top: 8px; }
.host-join-code small, .host-join-code strong { display: block; }
.host-join-code small { color: var(--un-muted); font-size: 7px; }
.host-join-code strong { margin-top: 2px; color: #d7dcff; font-size: 14px; letter-spacing: .11em; }
.host-join-code button, .host-join-code a { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--un-line); border-radius: 7px; color: #9eacc0; background: #142237; cursor: pointer; }
.host-admission-count { display: block; margin-top: 6px; color: var(--un-muted); font-size: 8px; }
.host-admission-count strong { color: #fff; }
.status-dot.closed { background: var(--un-red); box-shadow: 0 0 0 3px rgba(239, 113, 137, .1); }
.host-admission-card.closed { border-color: rgba(239, 113, 137, .2); background: rgba(239, 113, 137, .045); }
.host-admission-card.closed .host-join-code { opacity: .55; }

/* Secure host activation */
.host-activation-page { min-height: 100vh; margin: 0; color: #eaf0fa; background: radial-gradient(circle at 50% -15%, rgba(99, 102, 241, .32), transparent 38%), #07111f; }
.activation-head { height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid rgba(154, 173, 201, .16); }
.activation-head img { width: 112px; filter: brightness(0) invert(1); }
.activation-head span { color: #8494aa; font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.activation-canvas { min-height: calc(100vh - 60px); display: grid; place-items: center; padding: 30px 18px; }
.activation-card { width: min(100%, 520px); padding: 30px; border: 1px solid rgba(154, 173, 201, .2); border-radius: 18px; background: linear-gradient(145deg, #101d2f, #0b1625); box-shadow: 0 35px 80px -38px rgba(0, 0, 0, .75); }
.activation-card[hidden] { display: none; }
.activation-status { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 999px; color: #8ee1c5; background: rgba(85, 214, 175, .08); font-size: 8px; }
.activation-status > span { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; color: #071d17; background: #55d6af; font-weight: 900; }
.activation-eyebrow { margin: 26px 0 7px !important; color: #61d7ea !important; font-size: 9px !important; font-weight: 850; letter-spacing: .14em; }
.activation-card h1 { margin: 0; font-size: clamp(28px, 5vw, 40px); line-height: 1.08; letter-spacing: -.04em; }
.activation-card > p:not(.activation-eyebrow):not(.activation-footnote) { margin: 12px 0 20px; color: #92a1b6; font-size: 10px; line-height: 1.65; }
.activation-session { min-height: 64px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid rgba(154, 173, 201, .16); border-radius: 11px; background: rgba(255, 255, 255, .025); }
.activation-mark { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 10px; color: #e1e5ff; background: #29345c; font-size: 10px; font-weight: 850; }
.activation-session strong, .activation-session small { display: block; }
.activation-session strong { font-size: 10px; }
.activation-session small { margin-top: 4px; color: #8494aa; font-size: 8px; }
.activation-role { padding: 5px 7px; border-radius: 999px; color: #cdd1ff; background: rgba(99, 102, 241, .14); font-size: 8px; font-weight: 800; }
.activation-role.ready { color: #8ee1c5; background: rgba(85, 214, 175, .09); }
.activation-details { margin: 16px 0; border-top: 1px solid rgba(154, 173, 201, .15); }
.activation-details > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(154, 173, 201, .12); }
.activation-details dt { color: #7f8ea3; font-size: 8px; }
.activation-details dd { margin: 0; color: #d5deeb; font-size: 9px; font-weight: 650; }
.activation-primary { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #6366f1, #7c3aed); box-shadow: 0 16px 30px -18px rgba(99, 102, 241, .7); cursor: pointer; text-decoration: none; font-size: 10px; font-weight: 800; }
.activation-primary b { margin-inline-start: auto; font-size: 16px; }
.activation-sso-mark { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; color: #4f46e5; background: #fff; }
.activation-security { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; margin-top: 13px; padding: 10px; border-radius: 9px; color: #849aae; background: rgba(82, 214, 236, .045); font-size: 8px; line-height: 1.5; }
.activation-security > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; color: #52d6ec; background: rgba(82, 214, 236, .08); }
.activation-security p { margin: 0; }
.activation-security strong { color: #b9cbd8; }
.activation-back { display: block; margin-top: 15px; color: #8797ad; font-size: 8px; text-align: center; text-decoration: none; }
.activation-success { text-align: center; }
.activation-success-mark { width: 68px; height: 68px; display: grid; place-items: center; margin: 0 auto; border-radius: 50%; color: #071d17; background: #55d6af; box-shadow: 0 0 0 11px rgba(85, 214, 175, .06); font-size: 27px; font-weight: 900; }
.activation-success .activation-session { margin: 17px 0; text-align: start; }
.activation-clean-url { margin: 16px 0; padding: 11px; border: 1px solid rgba(154, 173, 201, .15); border-radius: 9px; text-align: start; background: rgba(0, 0, 0, .12); }
.activation-clean-url small, .activation-clean-url code { display: block; }
.activation-clean-url small { color: #7f8ea3; font-size: 7px; }
.activation-clean-url code { margin-top: 5px; color: #8ee1c5; font-size: 8px; }
.activation-footnote { margin: 14px 0 0; color: #79899f; font-size: 8px; line-height: 1.5; }

/* Participant join and lobby */
.participant-join-page { min-height: 100vh; margin: 0; color: #172033; background: radial-gradient(circle at 50% -10%, #e8eaff, transparent 35%), #f4f6fa; }
.join-page-head { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid #e1e6ee; background: rgba(255, 255, 255, .85); backdrop-filter: blur(12px); }
.join-page-head img { width: 108px; }
.join-page-head button { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid #dfe4ec; border-radius: 8px; color: #58677a; background: #fff; font-size: 9px; }
.join-page-head svg { width: 13px; }
.join-page-canvas { min-height: calc(100vh - 104px); display: grid; place-items: center; padding: 28px 16px; }
.join-card { width: min(100%, 440px); padding: 27px; border: 1px solid #dfe5ed; border-radius: 18px; background: #fff; box-shadow: 0 28px 70px -40px rgba(30, 41, 59, .5); }
.join-card[hidden] { display: none; }
.join-live-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 999px; color: #0d7b5d; background: #e9faf4; font-size: 8px; font-weight: 850; letter-spacing: .08em; }
.join-eyebrow { margin: 22px 0 7px !important; color: #4f46e5 !important; font-size: 8px !important; font-weight: 850; letter-spacing: .13em; }
.join-card h1 { margin: 0; color: #162238; font-size: 30px; line-height: 1.08; letter-spacing: -.04em; }
.join-card > p:not(.join-eyebrow) { margin: 10px 0 18px; color: #748195; font-size: 9px; line-height: 1.6; }
.join-code-entry label, .join-alias-field label { display: block; margin-bottom: 5px; color: #546276; font-size: 8px; font-weight: 750; }
.join-code-entry > div { height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; border: 2px solid #7b82f5; border-radius: 10px; background: #f9f9ff; }
.join-code-entry input { min-width: 0; height: 100%; padding: 0 13px; border: 0; outline: 0; color: #312e81; background: transparent; font-size: 18px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.join-code-entry > div span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #22a37c; font-size: 9px; }
.join-code-entry > small, .join-alias-field > small { display: block; margin-top: 5px; color: #1a8b6a; font-size: 7px; }
.join-session-preview { min-height: 61px; display: grid; grid-template-columns: 37px minmax(0, 1fr) auto; align-items: center; gap: 9px; margin: 13px 0; padding: 9px; border: 1px solid #e1e6ee; border-radius: 10px; background: #fafbfc; }
.join-session-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; color: #4f46e5; background: #e9ebff; font-size: 9px; font-weight: 850; }
.join-session-preview strong, .join-session-preview small { display: block; }
.join-session-preview strong { font-size: 9px; }
.join-session-preview small { margin-top: 3px; color: #8490a2; font-size: 7px; }
.identity-policy-config { display: grid; gap: 12px; }
.identity-policy-summary { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; padding: 11px; border: 1px solid #dce3fb; border-radius: 10px; color: #26334b; background: linear-gradient(135deg, #f5f6ff, #f8fbff); }
.identity-policy-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; color: #5148cd; background: #e8eaff; }
.identity-policy-icon svg { width: 17px; }
.identity-policy-summary strong, .identity-policy-summary small { display: block; }
.identity-policy-summary strong { font-size: 10px; }
.identity-policy-summary small { margin-top: 3px; color: #718096; font-size: 8px; line-height: 1.5; }
.identity-policy-config .hint { display: flex; align-items: flex-start; gap: 6px; }
.identity-policy-config .hint svg { width: 13px; min-width: 13px; }
.join-identity-banner { min-height: 51px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; margin: 14px 0 8px; padding: 9px; border: 1px solid #e1e5f8; border-radius: 10px; text-align: start; background: linear-gradient(135deg, #f7f7ff, #fbfcff); }
.join-identity-icon { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 9px; color: #5046c8; background: #e8eaff; }
.join-identity-icon svg { width: 16px; }
.join-identity-banner small, .join-identity-banner strong { display: block; }
.join-identity-banner small { color: #8b94a6; font-size: 6px; font-weight: 850; letter-spacing: .08em; }
.join-identity-banner strong { margin-top: 2px; color: #28344b; font-size: 9px; }
.join-identity-panel[hidden], .join-verified-identity[hidden], .join-pseudonymous-verified[hidden], .join-otp[hidden], .join-identity-error[hidden] { display: none; }
.join-mode { min-height: 53px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #edf0f4; border-bottom: 1px solid #edf0f4; }
.join-mode strong, .join-mode small { display: block; }
.join-mode strong { font-size: 9px; }
.join-mode small { margin-top: 3px; color: #7e8b9e; font-size: 7px; }
.identity-status-safe { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; border-radius: 999px; color: #0d8061; background: #e9faf4; font-size: 7px; font-weight: 800; }
.identity-status-safe svg { width: 11px; }
.join-alias-field { margin-top: 12px; }
.join-alias-field input { width: 100%; min-height: 39px; padding: 0 10px; border: 1px solid #dfe5ed; border-radius: 9px; outline: 0; font-size: 9px; }
.join-alias-field input:focus { border-color: #7c83ff; box-shadow: 0 0 0 3px #eff0ff; }
.join-auth-method { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; padding: 11px 0; text-align: start; }
.join-auth-logo { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #6366f1, #4f46e5); font-size: 13px; font-weight: 900; }
.join-auth-logo.violet { color: #5a45ca; background: #efecff; }
.join-auth-logo.amber { color: #a15f00; background: #fff3d8; }
.join-auth-logo svg { width: 17px; }
.join-auth-method strong, .join-auth-method small { display: block; }
.join-auth-method strong { color: #253249; font-size: 9px; }
.join-auth-method small { margin-top: 3px; color: #7b8799; font-size: 7px; line-height: 1.45; }
.join-auth-button { width: 100%; min-height: 42px; display: grid; grid-template-columns: 18px minmax(0, 1fr) 18px; place-items: center; gap: 6px; padding: 0 11px; border: 1px solid #d7dcf4; border-radius: 9px; color: #3d35af; background: #f4f4ff; cursor: pointer; font-size: 9px; font-weight: 800; }
.join-auth-button.secondary { grid-template-columns: 18px minmax(0, 1fr); color: #4c5b6d; border-color: #dfe5ed; background: #f8fafc; }
.join-auth-button:disabled { cursor: wait; opacity: .65; }
.join-auth-button svg { width: 14px; }
.join-verified-identity { display: grid; grid-template-columns: 35px minmax(0, 1fr) 19px; align-items: center; gap: 9px; margin-top: 9px; padding: 10px; border: 1px solid #bdebdc; border-radius: 9px; text-align: start; color: #175d4b; background: #effbf7; }
.join-verified-identity .avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #27a47f; font-size: 8px; font-weight: 850; }
.join-verified-identity small, .join-verified-identity strong, .join-verified-identity span span { display: block; }
.join-verified-identity small { font-size: 6px; font-weight: 850; letter-spacing: .07em; }
.join-verified-identity strong { margin: 2px 0; font-size: 9px; }
.join-verified-identity span span { color: #5b7c72; font-size: 7px; }
.join-verified-identity > svg { width: 17px; }
.join-pseudonymous-verified { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding: 9px; border-radius: 9px; text-align: start; color: #5146b9; background: #f1efff; }
.join-pseudonymous-verified svg { width: 16px; min-width: 16px; }
.join-pseudonymous-verified strong, .join-pseudonymous-verified small { display: block; }
.join-pseudonymous-verified strong { font-size: 8px; }
.join-pseudonymous-verified small { margin-top: 2px; font-size: 7px; }
.join-consent { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: flex-start; gap: 8px; margin-top: 10px; padding: 9px; border: 1px solid #e3e7ed; border-radius: 9px; text-align: start; color: #536174; background: #fafbfc; cursor: pointer; }
.join-consent input { margin-top: 1px; accent-color: #6366f1; }
.join-consent strong, .join-consent small { display: block; }
.join-consent strong { font-size: 8px; }
.join-consent small { margin-top: 3px; font-size: 7px; line-height: 1.4; }
.join-identity-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 9px; text-align: start; }
.join-identity-fields label, .join-otp label { display: block; margin-bottom: 5px; color: #546276; font-size: 8px; font-weight: 750; }
.join-identity-fields input, .join-otp input { width: 100%; min-height: 39px; padding: 0 10px; border: 1px solid #dfe5ed; border-radius: 9px; outline: 0; font-size: 9px; }
.join-identity-fields input:focus, .join-otp input:focus { border-color: #7c83ff; box-shadow: 0 0 0 3px #eff0ff; }
.join-otp { margin-top: 9px; text-align: start; }
.join-otp > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.join-otp button { padding: 0 13px; border: 0; border-radius: 8px; color: #fff; background: #6366f1; cursor: pointer; font-size: 8px; font-weight: 800; }
.join-otp small { display: block; margin-top: 4px; color: #758296; font-size: 7px; }
.join-identity-error { display: flex; align-items: center; gap: 6px; margin-top: 9px; padding: 8px; border-radius: 8px; color: #a83d50; background: #fff0f3; text-align: start; font-size: 8px; font-weight: 750; }
.join-identity-error svg { width: 14px; min-width: 14px; }
.join-primary { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #6366f1, #7c3aed); cursor: pointer; text-decoration: none; font-size: 10px; font-weight: 800; }
.join-primary:disabled { cursor: not-allowed; opacity: .48; filter: saturate(.65); }
.join-primary svg { width: 14px; }
.join-privacy { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 9px; border-radius: 9px; color: #607180; background: #f3faf8; }
.join-privacy svg { width: 15px; min-width: 15px; color: #159372; }
.join-privacy strong, .join-privacy small { display: block; }
.join-privacy strong { font-size: 8px; }
.join-privacy small { margin-top: 3px; font-size: 7px; line-height: 1.4; }
.join-waiting, .join-closed { text-align: center; }
.join-success-mark, .join-closed-mark { width: 66px; height: 66px; display: grid; place-items: center; margin: 0 auto; border-radius: 50%; color: #fff; background: #25a87f; box-shadow: 0 0 0 10px #ecfaf5; }
.join-success-mark svg, .join-closed-mark svg { width: 26px; }
.join-closed-mark { color: #c1445c; background: #fff0f3; box-shadow: 0 0 0 10px #fff7f8; }
.join-membership-receipt { display: grid; grid-template-columns: repeat(3, 1fr); margin: 18px 0; padding: 10px 0; border: 1px solid #e1e6ee; border-radius: 10px; background: #fafbfc; text-align: start; }
.join-membership-receipt > span { padding: 0 9px; border-inline-end: 1px solid #e1e6ee; }
.join-membership-receipt > span:last-child { border: 0; }
.join-membership-receipt small, .join-membership-receipt strong { display: block; }
.join-membership-receipt small { color: #8490a2; font-size: 7px; }
.join-membership-receipt strong { margin-top: 4px; font-size: 8px; }
.join-waiting-animation { width: 72px; height: 72px; display: grid; place-items: center; margin: 5px auto 16px; border-radius: 50%; color: #6366f1; background: #eff0ff; position: relative; }
.join-waiting-animation svg { width: 25px; }
.join-waiting-animation span { position: absolute; inset: 0; border: 1px solid #9ca3ff; border-radius: 50%; animation: joinWave 2s ease-out infinite; }
.join-waiting-animation span:last-child { animation-delay: 1s; }
.join-secondary { min-height: 37px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding: 0 13px; border: 1px solid #dfe5ed; border-radius: 9px; color: #667488; background: #fff; cursor: pointer; font-size: 8px; }
.join-secondary svg { width: 13px; }
.join-page-foot { min-height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; color: #8a96a6; font-size: 7px; }
.join-page-foot > span:last-child { display: flex; gap: 13px; }
.join-page-foot a { color: inherit; text-decoration: none; }
@keyframes joinWave { from { transform: scale(.7); opacity: .8; } to { transform: scale(1.45); opacity: 0; } }

/* Stage header join affordance */
.unified-stage-head { grid-template-columns: 170px minmax(260px, 1fr) auto auto; }
.stage-join-compact { display: flex; align-items: center; gap: 10px; }
.stage-join-compact > span:first-child { text-align: end; }
.stage-join-compact small, .stage-join-compact strong { display: block; }
.stage-join-compact small { color: #8595aa; font-size: 7px; }
.stage-join-compact strong { margin-top: 2px; color: #d8dcff; font-size: 15px; letter-spacing: .13em; }
.stage-join-qr { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; color: #111827; background: #fff; }
.stage-join-qr svg { width: 34px; height: 34px; }
.stage-join-compact.closed { opacity: .6; }
.stage-join-compact.closed strong { color: #ff9cad; text-decoration: line-through; }

@media (max-width: 940px) {
  .access-launch-grid { grid-template-columns: 1fr; }
  .access-launch-steps { grid-template-columns: repeat(2, 1fr); gap: 13px; }
  .access-launch-steps > span::after { display: none; }
}
@media (max-width: 620px) {
  .access-launch-steps, .access-launch-grid { padding: 10px; }
  .access-launch-steps { grid-template-columns: 1fr; }
  .access-card-head { grid-template-columns: 34px minmax(0, 1fr); }
  .access-card-head > :last-child { grid-column: 2; justify-self: start; }
  .participant-access-main { align-items: flex-start; }
  .activation-card, .join-card { padding: 21px; }
  .activation-details > div { grid-template-columns: 1fr; gap: 3px; }
  .join-membership-receipt { grid-template-columns: 1fr; gap: 9px; }
  .join-membership-receipt > span { border: 0; }
  .join-identity-fields { grid-template-columns: 1fr; }
}