/* Codex Questions tab styles. Surface/text/border/accent values come from
 * theme.css tokens (so dark mode is inherited). The accent is the SHARED theme
 * --primary, NOT a per-tab accent: the UI is reusable and reused, so page color
 * stays uniform across tabs. (A per-tab accent was considered but not adopted;
 * if ever adopted it must apply to every tab at once.)
 * cdx- prefix only, no hex literals in rules. */

/* Stats sub-tab is GLOBAL-only, a faithful re-port of the legacy
 * panel-global-stats: a date-range filter, three KPI boxes, a toughest-questions
 * list and a participation-per-session table.
 *
 * Buttons REUSE the shared cdx- primitives from cohorts.css (.cdx-btn,
 * .cdx-btn-primary, .cdx-btn-danger, .cdx-btn-sm). This stylesheet is loaded
 * site-wide, so Questions must NEVER redefine those global primitives here:
 * doing so repaints every other tab. Questions-only classes are unique
 * (cdx-stats-*, cdx-session-*, cdx-bank-*, etc.). */
/* Stats is the one single-column reading view: now the shell's 1200px cap is
 * dropped (codex.css), keep that measure here so the filter bar, KPIs and table
 * don't sprawl across a wide screen. Centered, matching the old shell look. */
.cdx-stats { display: flex; flex-direction: column; gap: 1rem; max-width: 1200px; margin-inline: auto; width: 100%; }

.cdx-stats-loading,
.cdx-stats-empty {
  color: var(--text-secondary);
  font-size: 0.88rem;
  padding: 0.75rem 0;
}

/* Date-range filter bar (legacy .cp-global-stats-filter) */
.cdx-stats-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border, rgba(127, 127, 127, 0.3));
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
}
.cdx-stats-filter-dates,
.cdx-stats-filter-actions { display: flex; align-items: center; gap: 0.6rem; }
.cdx-stats-flabel {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.cdx-stats-date {
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--background);
  border: 1.5px solid var(--border, rgba(127, 127, 127, 0.3));
  border-radius: 8px;
  outline: none;
  transition: border-color 0.12s;
}
.cdx-stats-date:focus { border-color: var(--primary); }
.cdx-stats-clear {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-decoration: underline;
  padding: 0;
}
.cdx-stats-clear:hover { color: var(--text-primary); }

/* KPI boxes (legacy .kpi-box: centered, big accent value) */
.cdx-stats-kpis { display: flex; flex-wrap: wrap; gap: 1rem; }
.cdx-kpi {
  flex: 1 1 9rem;
  background: var(--surface);
  border: 1px solid var(--border, rgba(127, 127, 127, 0.3));
  border-radius: 12px;
  padding: 1.2rem 1rem;
  text-align: center;
}
.cdx-kpi-val {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 0.3rem;
  color: var(--primary);
}
.cdx-kpi-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

/* Section titles (legacy .cp-global-stats-section) */
.cdx-stats-section-title {
  margin: 1.5rem 0 0.75rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
}

/* Toughest-questions list */
.cdx-stats-qlist { display: flex; flex-direction: column; gap: 0.6rem; }
.cdx-stats-q {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border, rgba(127, 127, 127, 0.3));
  border-radius: 10px;
  padding: 0.9rem 1rem;
}
.cdx-stats-q-text { font-size: 0.92rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.cdx-stats-q-meta { font-size: 0.75rem; color: var(--text-secondary); }
.cdx-stats-bar {
  position: relative;
  height: 1.4rem;
  background: var(--surface-hover, rgba(13, 148, 136, 0.12));
  border-radius: 6px;
  overflow: hidden;
}
.cdx-stats-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--primary);
  opacity: 0.35;
}
.cdx-stats-bar-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
}
.cdx-stats-bar--na {
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  background: var(--surface-hover, rgba(13, 148, 136, 0.12));
}

/* Participation-per-session table (legacy .cp-global-stats-table) */
.cdx-stats-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border, rgba(127, 127, 127, 0.3));
  border-radius: 12px;
  overflow: hidden;
}
.cdx-stats-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.cdx-stats-table th {
  text-align: left;
  padding: 0.8rem 1.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  background: var(--surface-hover, rgba(13, 148, 136, 0.06));
  border-bottom: 1px solid var(--border, rgba(127, 127, 127, 0.3));
}
.cdx-stats-table td {
  padding: 0.8rem 1.1rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border, rgba(127, 127, 127, 0.15));
}
.cdx-stats-table tr:last-child td { border-bottom: none; }
.cdx-stats-num { text-align: center; }
.cdx-stats-table td.cdx-stats-hl { font-weight: 700; color: var(--primary); }

/* ── Sessions sub-tab (faithful panel-sessions) ─────────────────
 * A blatant re-port of the legacy ClassPulse layout: a floating left-edge rail
 * (the ClassVault cv-sm pattern) as the session picker, plus a main area that
 * hosts the selected session. Live hosting is Q2; the main area carries the
 * lifecycle, a host bridge, the per-session stats overlay, and a bottom-of-page
 * protected delete. All colors are theme tokens (dark inherited). */
/* Sessions fills the content area edge-to-edge like the host page. Negative
 * margins negate the shell's top + side padding (.bs-main 2.5rem/1.5rem +
 * .cdx-view 0.5rem/1.5rem = 3rem each) so the surface reaches the content edges
 * WITHOUT width:100vw, which would overflow by the scrollbar gutter and add a
 * horizontal scrollbar. Scoped to Sessions only; the position:fixed sidebar is
 * unaffected. The host content is re-inset 18px below; the bar bleeds back out. */
.cdx-sessions-layout {
  position: relative; min-height: 60vh;
  margin: -3rem -3rem 0;
}

/* Floating rail: hidden offscreen, .cdx-sm--open slides it in. Fixed to the
 * viewport so it runs full height under the chrome (top padding clears the
 * ~64px topbar + ~30px Perguntas sub-row). z-index sits below the topbar. */
.cdx-sessions-sidebar {
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  width: 320px;
  background: var(--surface);
  border-right: 1px solid var(--border, rgba(127, 127, 127, 0.3));
  padding: 1rem;
  padding-top: calc(94px + 1rem);
  overflow-y: auto;
  box-sizing: border-box;
  z-index: 80;
  transform: translateX(-100%);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cdx-sessions-layout.cdx-sm--open .cdx-sessions-sidebar {
  transform: translateX(0);
  box-shadow: 4px 0 16px var(--shadow, rgba(0, 0, 0, 0.25));
}
@media (max-width: 900px) {
  .cdx-sessions-sidebar { width: 80vw; max-width: 320px; }
}

/* Create-session form (compact, mirrors cv-sm density). */
.cdx-create-session {
  display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--background);
  border: 1px solid var(--border, rgba(127, 127, 127, 0.3));
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.7rem;
}
.cdx-create-session-heading {
  margin: 0;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.cdx-create-session-label { font-size: 0.68rem; color: var(--text-secondary); }
.cdx-create-session .cdx-input { padding: 0.45rem 0.65rem; font-size: 0.82rem; }
.cdx-create-session .cdx-btn-primary { font-size: 0.82rem; }

/* Session list + cards (the picker). */
.cdx-sessions-list { display: flex; flex-direction: column; gap: 0.4rem; }
.cdx-sessions-loading { color: var(--text-secondary); font-size: 0.82rem; padding: 0.75rem 0.5rem; }
.cdx-sessions-empty { text-align: center; color: var(--text-secondary); font-size: 0.82rem; padding: 1rem 0.5rem; }
.cdx-sessions-empty-icon { font-size: 1.4rem; margin-bottom: 0.3rem; }

.cdx-session-card {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.7rem; border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border, rgba(127, 127, 127, 0.3));
  cursor: pointer;
}
.cdx-session-card:hover { border-color: var(--primary); }
.cdx-session-card.is-selected { border-color: var(--primary); background: var(--surface-hover, rgba(13, 148, 136, 0.08)); }
.cdx-session-code {
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--text-primary);
}
.cdx-session-info { flex: 1; min-width: 0; }
.cdx-session-title {
  font-size: 0.8rem; font-weight: 600; line-height: 1.25; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cdx-session-meta { font-size: 0.66rem; color: var(--text-secondary); }

/* Live indicator: RED pulsing dot + label, matching the original. */
.cdx-live { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
.cdx-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--error); animation: cdx-live-pulse 2s ease-in-out infinite; }
.cdx-live-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--error); }
@keyframes cdx-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.75); }
}

/* Main host area: placeholder until a session is selected. The 18px side inset
 * matches host.html's screen padding; the host bar bleeds back out (below). */
.cdx-sessions-main { min-height: 60vh; display: flex; flex-direction: column; padding: 0 18px; }
.cdx-sessions-placeholder { margin: auto; text-align: center; padding: 4rem 2rem; color: var(--text-secondary); font-size: 0.92rem; }

/* Selected-session detail (the host surface). */
.cdx-session-detail { flex: 1; display: flex; flex-direction: column; gap: 1rem; max-width: 60rem; }
.cdx-session-detail-head {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding-bottom: 0.75rem; border-bottom: 1px solid var(--border, rgba(127, 127, 127, 0.3));
}
.cdx-session-detail-title { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--text-primary); }
.cdx-session-status { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.cdx-session-status--open { color: var(--error); }
.cdx-session-status--closed { color: var(--text-secondary); }
.cdx-session-detail-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Protected delete, pushed to the bottom of the page. */
.cdx-session-danger {
  margin-top: auto;
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--border, rgba(127, 127, 127, 0.3));
}
.cdx-session-confirm { font-size: 0.82rem; font-weight: 600; color: var(--error); }

/* Per-session stats overlay (legacy openStats panel). Reuses the .cdx-kpi /
 * .cdx-stats-bar / .cdx-stats-q primitives from the global-stats section above. */
.cdx-session-stats { display: flex; flex-direction: column; gap: 1rem; max-width: 60rem; }
.cdx-session-stats-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding-bottom: 0.75rem; border-bottom: 1px solid var(--border, rgba(127, 127, 127, 0.3));
}
.cdx-session-stats-title { margin: 0 0 0.2rem; font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.cdx-session-stats-mm { font-size: 0.88rem; color: var(--text-primary); }
.cdx-session-stats-mm strong { color: var(--error); }

/* ── Bank sub-tab (faithful cp-banks-layout) ────────────────── */
.cdx-bank { display: grid; grid-template-columns: 16rem 1fr; gap: 1.25rem; align-items: start; }

/* Sets sidebar (a bordered card: header + list) */
.cdx-bank-sets {
  background: var(--surface);
  border: 1px solid var(--border, rgba(127, 127, 127, 0.3));
  border-radius: 12px;
  overflow: hidden;
}
.cdx-bank-sets-header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--border, rgba(127, 127, 127, 0.3));
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.cdx-bank-setlist { display: flex; flex-direction: column; padding: 0.4rem; gap: 0.15rem; }
.cdx-bank-set {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  width: 100%; min-width: 0;
  background: transparent; border: none; border-left: 3px solid transparent; border-radius: 8px;
  padding: 0.5rem 0.6rem; cursor: pointer; text-align: left;
  color: var(--text-primary); font-weight: 600; font-size: 0.85rem;
}
.cdx-bank-set:hover { background: var(--surface-hover, rgba(13, 148, 136, 0.08)); }
.cdx-bank-set.active { background: var(--surface-hover, rgba(13, 148, 136, 0.12)); border-left-color: var(--primary); }
.cdx-bank-set-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdx-bank-set-count {
  flex-shrink: 0; font-size: 0.72rem; font-weight: 700; color: var(--text-secondary);
  background: var(--surface-hover, rgba(13, 148, 136, 0.12)); border-radius: 999px; padding: 0.05rem 0.45rem;
}
.cdx-bank-newset-row { display: flex; align-items: center; gap: 0.3rem; padding: 0.2rem; }
.cdx-bank-newset-input { flex: 1; min-width: 0; }
.cdx-bank-iconbtn {
  background: transparent; border: none; cursor: pointer; color: var(--text-secondary);
  font-size: 0.95rem; line-height: 1; padding: 0.25rem 0.4rem; border-radius: 6px;
}
.cdx-bank-iconbtn:hover:not([disabled]) { color: var(--text-primary); background: var(--surface-hover, rgba(13, 148, 136, 0.12)); }
.cdx-bank-iconbtn[disabled] { opacity: 0.35; cursor: default; }
.cdx-bank-empty,
.cdx-bank-loading { color: var(--text-secondary); font-size: 0.88rem; padding: 1rem 0.6rem; }

/* Question area: a white surface card so the search bar + header buttons do not
 * sit teal-on-teal against the page background (--background is a pale teal). */
.cdx-bank-main {
  display: flex; flex-direction: column; gap: 1rem; min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border, rgba(127, 127, 127, 0.3));
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
}
.cdx-bank-search-bar { display: flex; align-items: center; gap: 0.5rem; }
.cdx-bank-search-input { flex: 1; }
.cdx-bank-search-clear { flex-shrink: 0; }
.cdx-bank-body { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.cdx-bank-conjunto-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-bottom: 0.75rem; border-bottom: 1px solid var(--border, rgba(127, 127, 127, 0.3));
}
.cdx-bank-conjunto-title { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.cdx-bank-conjunto-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.cdx-bank-confirm-text { font-size: 0.82rem; font-weight: 600; color: var(--error); }

.cdx-bank-rename-row { display: flex; align-items: center; gap: 0.5rem; }
.cdx-bank-rename-input { flex: 1; min-width: 0; }

.cdx-bank-qheader { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cdx-bank-qheader-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.cdx-bank-qheader-actions { display: flex; align-items: center; gap: 0.4rem; }

.cdx-bank-qlist { display: flex; flex-direction: column; gap: 0.75rem; }

/* Class filter chips (Todas / Genéricas / Variáveis / Únicas). Colors are theme
 * tokens, so dark mode is inherited; mirrors the hub-tab pill language. */
.cdx-bank-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.cdx-bank-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: transparent;
  border: 1px solid var(--border, rgba(127, 127, 127, 0.3));
  border-radius: 999px; padding: 0.25rem 0.7rem;
  font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); cursor: pointer;
  font-family: inherit;
}
.cdx-bank-chip:hover { color: var(--text-primary); }
.cdx-bank-chip.active { color: var(--primary); border-color: var(--primary); background: var(--surface-hover, rgba(13, 148, 136, 0.08)); }
.cdx-bank-chip-count {
  font-size: 0.7rem; font-weight: 700;
  background: var(--surface-hover, rgba(13, 148, 136, 0.12));
  border-radius: 999px; padding: 0.02rem 0.4rem; color: var(--text-secondary);
}
.cdx-bank-chip.active .cdx-bank-chip-count { color: var(--primary); }

/* Cross-bank Variáveis view (synthetic conjunto) */
.cdx-bank-set--variaveis .cdx-bank-set-name { color: var(--primary); }
.cdx-bank-variaveis-hint { font-size: 0.82rem; color: var(--text-secondary); margin: 0; }
.cdx-q-srcbank {
  align-self: flex-start;
  background: transparent; border: none; cursor: pointer; padding: 0;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--primary); font-family: inherit;
}
.cdx-q-srcbank:hover { text-decoration: underline; }

/* Question card (text + options preview + footer) */
.cdx-q {
  display: flex; flex-direction: column; gap: 0.6rem;
  border: 1px solid var(--border, rgba(127, 127, 127, 0.3)); border-radius: 10px;
  padding: 0.9rem 1rem; background: var(--background);
}
.cdx-q-text { font-size: 0.92rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.cdx-q-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; }
.cdx-q-opt { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 0.35rem; }
.cdx-q-opt-letter { font-weight: 700; }
.cdx-q-opt--correct { color: var(--primary); font-weight: 600; }
.cdx-q-opt--correct .cdx-q-opt-letter { color: var(--primary); }
.cdx-q-foot {
  display: flex; align-items: center; gap: 0.4rem;
  padding-top: 0.6rem; border-top: 1px solid var(--border, rgba(127, 127, 127, 0.15));
}
.cdx-q-type {
  margin-right: auto;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--primary); background: var(--surface-hover, rgba(13, 148, 136, 0.1));
  border-radius: 999px; padding: 0.1rem 0.5rem;
}
.cdx-q-confirm { font-size: 0.82rem; font-weight: 600; color: var(--error); }

/* Typed-question class badge + composer class controls + audience matrix */
.cdx-q-class {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  border-radius: 999px; padding: 0.1rem 0.5rem; border: 1px solid var(--border);
  color: var(--text-secondary); background: var(--surface-hover, rgba(13, 148, 136, 0.1));
}
.cdx-q-class--variable { color: var(--primary); border-color: var(--primary); }
.cdx-q-class--unique { color: var(--success); border-color: var(--success); }

.cdx-comp-row2 { display: flex; gap: 0.6rem; }
.cdx-comp-row2 .cdx-comp-field { flex: 1; }
.cdx-comp-class-extra:empty { display: none; }
.cdx-comp-varhint { font-size: 0.78rem; color: var(--text-secondary); margin: 0.2rem 0; }
.cdx-comp-varhint code { background: var(--surface-hover, rgba(13, 148, 136, 0.12)); border-radius: 4px; padding: 0 0.3rem; }
.cdx-comp-preview { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.3rem 0; padding: 0.4rem 0.5rem; background: var(--surface-hover, rgba(13, 148, 136, 0.08)); border-radius: 6px; }
.cdx-comp-preview-row { display: flex; gap: 0.5rem; font-size: 0.82rem; }
.cdx-comp-preview-aud { flex: 0 0 8rem; font-weight: 600; color: var(--text-secondary); }
.cdx-comp-preview-text { color: var(--text-primary); }
.cdx-comp-class-warn { font-size: 0.78rem; color: var(--error); margin-top: 0.2rem; }

.cdx-bank-aud-card { max-width: 760px; width: 92vw; }
.cdx-bank-aud-tab { border: none; background: none; cursor: pointer; padding: 0.3rem 0.2rem; border-bottom: 2px solid transparent; color: var(--text-secondary); font: inherit; }
.cdx-bank-aud-tab.active { color: var(--primary); border-color: var(--primary); }
.cdx-aud-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.6rem; }
.cdx-aud-row { display: flex; align-items: center; gap: 0.5rem; }
.cdx-aud-row .cdx-aud-label { flex: 1; }
.cdx-aud-key { font-size: 0.74rem; color: var(--text-light); font-family: ui-monospace, monospace; }
.cdx-aud-addrow { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.cdx-aud-addrow input { flex: 1; }
.cdx-aud-ai-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.cdx-aud-ai-row input { flex: 1; }
.cdx-bank-import-file-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.cdx-bank-import-banks { margin-bottom: 0.6rem; }
.cdx-bank-import-banks-head { font-size: 0.8rem; color: var(--text-light); margin-bottom: 0.3rem; }
.cdx-bank-import-banklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.cdx-bank-import-bankrow { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.cdx-bank-import-bankname { flex: 1; font-weight: 600; }
.cdx-bank-import-bankcount { color: var(--text-light); }
.cdx-bank-import-banktag { font-size: 0.72rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--border); color: var(--text-light); }
.cdx-bank-import-bankrow--new .cdx-bank-import-banktag { background: var(--primary); color: var(--text-on-accent, #fff); }
.cdx-aud-lint { font-size: 0.78rem; color: var(--error); margin: 0.4rem 0; }
.cdx-var-gridwrap { overflow-x: auto; }
.cdx-var-grid { border-collapse: collapse; width: 100%; }
.cdx-var-grid th, .cdx-var-grid td { border: 1px solid var(--border); padding: 0.35rem; text-align: left; vertical-align: top; }
.cdx-var-grid th { font-size: 0.78rem; color: var(--text-secondary); background: var(--surface-hover, rgba(13, 148, 136, 0.08)); }
.cdx-var-key { font-family: ui-monospace, monospace; font-size: 0.78rem; white-space: nowrap; }
.cdx-var-cell--bad { background: var(--error-bg, rgba(220, 53, 69, 0.08)); }
.cdx-var-cell .cdx-var-text { width: 100%; margin-bottom: 0.2rem; }
.cdx-var-gn { display: flex; gap: 0.3rem; }
.cdx-var-gn select { flex: 1; font-size: 0.74rem; }

/* Cross-set search results */
.cdx-bank-search-head { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); }
.cdx-q--result { cursor: pointer; }
.cdx-q--result:hover { border-color: var(--primary); }
.cdx-bank-result-set { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--primary); }

/* Editor + bulk modals (reuse cohorts .cdx-modal-backdrop / .cdx-modal) */
.cdx-bank-modal[hidden] { display: none; }
/* Cap bank modal height so tall content (typed-question composer, audience grid)
   scrolls inside the modal instead of bleeding off the top/bottom of the screen. */
.cdx-bank-modal .cdx-modal { max-height: 90vh; overflow-y: auto; }
/* Propose-order modal: flex-column so the list scrolls and the action bar is always
   visible, instead of the outer card scrolling (which would create a double scroll). */
#cdx-bank-order .cdx-modal { display: flex; flex-direction: column; overflow: hidden; }
#cdx-bank-order .cdx-bank-order-list { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
#cdx-bank-order .cdx-modal-actions { flex-shrink: 0; }
.cdx-comp-ai-row { display: flex; gap: 0.5rem; margin-top: 0.2rem; }
.cdx-bank-modal-err { font-size: 0.8rem; color: var(--error); min-height: 1rem; margin: 0.5rem 0 0; }

/* Reorder / move mode (Editar banco) */
.cdx-bank-movebar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
  padding: 0.55rem 0.75rem; border-radius: 8px;
  background: var(--surface-hover, rgba(13, 148, 136, 0.1));
  border: 1px solid var(--border, rgba(127, 127, 127, 0.3));
  font-size: 0.82rem; color: var(--text-secondary);
}
.cdx-bank-movebar-count { font-weight: 700; color: var(--text-primary); }
.cdx-bank-move-dest { width: auto; min-width: 8rem; }
.cdx-q--edit { flex-direction: row; align-items: center; gap: 0.6rem; cursor: grab; }
.cdx-q-drag { color: var(--text-secondary); font-size: 1.1rem; line-height: 1; cursor: grab; user-select: none; flex-shrink: 0; }
.cdx-q-select { width: 1rem; height: 1rem; accent-color: var(--primary); flex-shrink: 0; }
.cdx-q-editbody { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.cdx-q-editbody .cdx-q-text { flex: 1; min-width: 8rem; }

/* Bulk generate modal */
.cdx-bank-bulk-card { max-width: 600px; }
.cdx-bank-bulk-row { display: flex; gap: 1rem; }
.cdx-bank-bulk-type-field { flex: 2; }
.cdx-bank-bulk-count-field { flex: 1; }
.cdx-bank-bulk-hint { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 0.8rem; }
.cdx-bank-bulk-list { display: flex; flex-direction: column; gap: 0.8rem; max-height: 50vh; overflow-y: auto; }
.cdx-bank-bulk-item {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.7rem 0.8rem; border: 1px solid var(--border, rgba(127, 127, 127, 0.3));
  border-radius: 8px; background: var(--background); cursor: pointer;
}
.cdx-bank-bulk-item > input { margin-top: 0.2rem; accent-color: var(--primary); flex-shrink: 0; }
.cdx-bank-bulk-item-body { flex: 1; min-width: 0; font-size: 0.85rem; }
.cdx-bank-bulk-item-q { font-weight: 600; color: var(--text-primary); }
.cdx-bank-bulk-item-opts { margin: 0.4rem 0 0 1rem; padding: 0; color: var(--text-secondary); font-size: 0.82rem; }
.cdx-bank-bulk-item-opts .cdx-q-opt--correct { color: var(--primary); font-weight: 600; }

/* e2 proposed order: direction chooser + a checkable list in the suggested order. */
.cdx-bank-order-dir { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.cdx-bank-order-list { list-style: none; margin: 0; padding: 0; }
.cdx-bank-order-item { display: flex; gap: 0.4rem; padding: 0.28rem 0; font-size: 0.88rem; color: var(--text-primary); }
.cdx-bank-order-num { font-variant-numeric: tabular-nums; color: var(--text-secondary); flex-shrink: 0; }
.cdx-bank-order-text { flex: 1; min-width: 0; }

/* Import / Export hub modal */
.cdx-bank-sets-header-actions { display: flex; align-items: center; gap: 0.3rem; }
.cdx-bank-hub-card { max-width: 640px; }
.cdx-bank-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.cdx-bank-hub-tab, .cdx-bank-scope-btn, .cdx-bank-export-tab, .cdx-bank-import-tab, .cdx-bank-order-dir-btn {
  background: transparent;
  border: 1px solid var(--border, rgba(127, 127, 127, 0.3));
  border-radius: 7px; padding: 0.35rem 0.85rem;
  font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); cursor: pointer;
}
.cdx-bank-hub-tab:hover, .cdx-bank-scope-btn:hover, .cdx-bank-export-tab:hover, .cdx-bank-import-tab:hover, .cdx-bank-order-dir-btn:hover { color: var(--text-primary); }
.cdx-bank-hub-tab.active, .cdx-bank-scope-btn.active, .cdx-bank-export-tab.active, .cdx-bank-import-tab.active, .cdx-bank-order-dir-btn.active { color: var(--primary); border-color: var(--primary); }
.cdx-bank-hub-tabs { border-bottom: 1px solid var(--border, rgba(127, 127, 127, 0.3)); padding-bottom: 0.6rem; }
.cdx-bank-hub-scope { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.cdx-bank-hub-scope .cdx-comp-label { margin: 0; }
.cdx-bank-hub-scope .cdx-bank-tabs { margin-bottom: 0; }
.cdx-bank-hub-checklist {
  display: flex; flex-direction: column; gap: 0.25rem;
  max-height: 9rem; overflow-y: auto; margin-bottom: 0.7rem;
  border: 1px solid var(--border, rgba(127, 127, 127, 0.3)); border-radius: 8px; padding: 0.5rem 0.7rem;
}
.cdx-bank-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--text-primary); cursor: pointer; }
.cdx-bank-check input { accent-color: var(--primary); }
.cdx-bank-export-out { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; line-height: 1.4; }
.cdx-bank-import-in { resize: vertical; }
.cdx-bank-import-target-row { max-width: 22rem; }

/* Inputs/selects used by Questions (search, rename, new-set, composer). These
 * class names are Questions-local, not a shared primitive defined elsewhere. */
.cdx-input, .cdx-select, textarea.cdx-input {
  width: 100%; padding: 0.5rem 0.75rem; box-sizing: border-box;
  border: 1.5px solid var(--border, rgba(127, 127, 127, 0.3)); border-radius: 8px;
  background: var(--background); color: var(--text-primary);
  font-size: 0.9rem; font-family: inherit; outline: none; transition: border-color 0.12s;
}
.cdx-input:focus, .cdx-select:focus { border-color: var(--primary); }

/* Question composer (shared with the Q2 live launch form) */
.cdx-comp { display: flex; flex-direction: column; gap: 0.7rem; }
.cdx-comp-field { display: flex; flex-direction: column; gap: 0.25rem; }
.cdx-comp-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.cdx-comp-text { resize: vertical; }
.cdx-comp-opts { display: flex; flex-direction: column; gap: 0.4rem; }
.cdx-comp-optlist { display: flex; flex-direction: column; gap: 0.35rem; }
.cdx-comp-optrow { display: flex; align-items: center; gap: 0.45rem; }
.cdx-comp-opt { flex: 1; min-width: 0; }
.cdx-comp-correct { flex-shrink: 0; width: 1.1rem; height: 1.1rem; accent-color: var(--primary); }
.cdx-comp-optdel {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.3rem;
}
.cdx-comp-optdel:hover { color: var(--error); }
.cdx-comp-addopt { align-self: flex-start; }
.cdx-comp-maxsel-field { max-width: 12rem; }
.cdx-comp-scale { display: flex; gap: 0.6rem; }
.cdx-comp-hint { color: var(--text-secondary); font-size: 0.85rem; }

/* Launch panel only: make the shared composer read like the legacy host launch
   form, lettered option rows (A/B/C...) with the correct-toggle on the right,
   exactly like host.html's .opt-row / .opt-letter / .opt-correct-radio. Scoped
   to .cdx-host-composer so the Bank / Content composer is untouched. */
.cdx-host-composer .cdx-comp { gap: 0.9rem; }
.cdx-host-composer .cdx-comp-optlist { counter-reset: cdx-opt; gap: 0.5rem; }
.cdx-host-composer .cdx-comp-optrow { gap: 0.7rem; }
.cdx-host-composer .cdx-comp-optrow::before {
  counter-increment: cdx-opt;
  content: counter(cdx-opt, upper-alpha);
  flex-shrink: 0; min-width: 32px; text-align: center;
  font-size: 0.75rem; font-weight: 700; color: var(--primary);
  background: rgba(20,184,166,.12); border: 1px solid rgba(20,184,166,.2);
  border-radius: 6px; padding: 0.5rem 0.55rem;
}
.cdx-host-composer .cdx-comp-opt { order: 1; }
.cdx-host-composer .cdx-comp-correct { order: 2; }
.cdx-host-composer .cdx-comp-optdel { order: 3; }

/* =========================================================
   Q2 live host: render element + question renderer
   Faithful port of question-types.css (qr- -> cdx-qr-) + the
   <classpulse-question> container (cpq- -> cdx-cpq-) and the
   shared bar-track/fill base. Colors come from the shared theme
   tokens (theme.css owns their [data-theme="dark"] overrides);
   the two literal-rgba surfaces below carry their own dark rule.
   ========================================================= */

.cdx-cpq-container { display: block; }

/* ── Option buttons (student input) ─────────────────────── */
.cdx-qr-option-btn {
  width: 100%; padding: 14px 18px;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: 12px; font-size: 1.1rem; font-family: inherit;
  color: var(--text-primary); cursor: pointer;
  text-align: left; display: flex; align-items: center; gap: 14px;
  transition: all 0.15s; margin-bottom: 10px;
}
.cdx-qr-option-btn:hover:not(:disabled) { border-color: var(--primary); background: var(--option-hover-bg); }
.cdx-qr-option-btn:disabled { cursor: default; opacity: 0.6; }
.cdx-qr-option-btn.is-selected { border-color: var(--primary); background: var(--option-selected-bg); font-weight: 600; opacity: 1; }
.cdx-qr-option-letter {
  font-size: 0.78rem; font-weight: 700; color: var(--primary-dark);
  background: var(--border); padding: 3px 9px; border-radius: 5px;
  flex-shrink: 0; min-width: 30px; text-align: center;
}
[data-theme="dark"] .cdx-qr-option-letter { background: rgba(20,184,166,.25); color: var(--text-on-accent, #fff); }

/* ── Result bars (shared base, mode overrides below) ────── */
.cdx-qr-bar {
  display: grid; grid-template-columns: 44px 1fr 60px;
  align-items: center; gap: 14px; margin-bottom: 18px;
  padding: 12px 16px; border-radius: 12px;
  border: 3px solid transparent; transition: all 0.3s;
}
.cdx-qr-bar-letter {
  font-size: 0.85rem; font-weight: 700;
  color: var(--primary-dark); background: var(--surface);
  border: 1px solid var(--border); padding: 8px 0;
  border-radius: 8px; text-align: center;
}
.cdx-qr-bar-body { min-width: 0; }
.cdx-qr-bar-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cdx-qr-bar-text { font-size: 1.3rem; color: var(--text-primary); font-weight: 400; }
.cdx-qr-bar-pct  { font-size: 1.1rem; font-weight: 700; color: var(--text-secondary); }
.cdx-qr-bar-track { height: 12px; background: rgba(0,0,0,0.08); border-radius: 6px; overflow: hidden; }
[data-theme="dark"] .cdx-qr-bar-track { background: rgba(255,255,255,0.08); }
.cdx-qr-bar-fill { height: 100%; background: var(--primary); border-radius: 6px; transition: width 0.6s ease; }
.cdx-qr-bar-fill.correct { background: var(--success); }
.cdx-qr-bar-fill.mine    { background: var(--primary-dark); }
.cdx-qr-bar-count { font-size: 1.1rem; font-weight: 600; color: var(--text-secondary); text-align: right; }

/* ── Host mode overrides ─────────────────────────────────── */
.cdx-qr-host .cdx-qr-bar {
  grid-template-columns: 32px 1fr 40px; gap: 0.6rem;
  margin-bottom: 0.75rem; padding: 0; border-radius: 0; border: none;
}
.cdx-qr-host .cdx-qr-bar-letter {
  font-size: 0.75rem; padding: 0.45rem 0;
  background: rgba(20,184,166,.1); border-color: rgba(20,184,166,.2); border-radius: 6px;
}
.cdx-qr-host .cdx-qr-bar-label { margin-bottom: 3px; }
.cdx-qr-host .cdx-qr-bar-text  { font-size: 0.8rem; color: var(--text-primary); }
.cdx-qr-host .cdx-qr-bar-pct   { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
.cdx-qr-host .cdx-qr-bar-track { height: 7px; }
.cdx-qr-host .cdx-qr-bar-count { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); }
.cdx-qr-feed-toggle {
  background: none; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-secondary); font-size: 0.82rem; font-family: inherit;
  padding: 8px 12px; cursor: pointer; width: 100%; text-align: left;
  transition: color 0.2s, border-color 0.2s;
}
.cdx-qr-feed-toggle:hover { color: var(--primary); border-color: var(--primary); }
.cdx-qr-host .cdx-qr-feed-card { background: var(--background); border-color: rgba(20,184,166,.12); }

/* ── Student mode overrides ──────────────────────────────── */
.cdx-qr-student .cdx-qr-bar {
  grid-template-columns: auto 1fr; gap: 10px; margin-bottom: 14px;
  padding: 10px; border-radius: 10px; border-width: 2px;
}
.cdx-qr-student .cdx-qr-bar-letter { font-size: 0.78rem; padding: 3px 9px; border-radius: 5px; min-width: 30px; }
.cdx-qr-student .cdx-qr-bar-text  { font-size: 0.88rem; }
.cdx-qr-student .cdx-qr-bar-pct   { font-size: 0.82rem; font-weight: 700; min-width: 36px; text-align: right; }
.cdx-qr-student .cdx-qr-bar-track { height: 8px; border-radius: 4px; }
.cdx-qr-student .cdx-qr-bar-count { display: none; }

/* ── Correct-answer highlighting ─────────────────────────── */
.cdx-qr-bar.is-correct {
  background-color: var(--success) !important;
  border-color: var(--success) !important; color: var(--text-on-accent, #fff) !important;
}
.cdx-qr-bar.is-correct .cdx-qr-bar-letter { background: rgba(255,255,255,0.2) !important; border-color: transparent !important; color: var(--text-on-accent, #fff) !important; }
.cdx-qr-bar.is-correct .cdx-qr-bar-text,
.cdx-qr-bar.is-correct .cdx-qr-bar-pct,
.cdx-qr-bar.is-correct .cdx-qr-bar-count { color: var(--text-on-accent, #fff) !important; font-weight: 700 !important; }
.cdx-qr-bar.is-correct .cdx-qr-bar-text::after { content: ' \2713'; font-weight: 800; }
.cdx-qr-bar.is-correct .cdx-qr-bar-fill { background: #fff !important; }

/* ── Word cloud ──────────────────────────────────────────── */
.cdx-qr-wordcloud { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; justify-content: center; align-items: center; padding: 1rem; }
.cdx-qr-word { color: var(--primary); font-weight: 600; line-height: 1.2; transition: transform 0.3s; }
.cdx-qr-wc-empty { text-align: center; opacity: .5; font-size: 0.9em; }

/* ── Open-text feed ──────────────────────────────────────── */
.cdx-qr-text-feed { display: flex; flex-direction: column; gap: 8px; }
.cdx-qr-feed-card { display: flex; align-items: baseline; gap: 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.55rem 0.75rem; }
.cdx-qr-feed-name { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--primary); flex-shrink: 0; }
.cdx-qr-feed-text { font-size: 0.9rem; color: var(--text-primary); flex: 1; word-break: break-word; }
.cdx-qr-feed-empty { font-size: 0.85rem; color: var(--text-secondary); padding: 0.5rem 0; text-align: center; }
.cdx-qr-feed-remove { margin-left: auto; background: none; border: none; color: var(--text-light); font-size: 1.1rem; cursor: pointer; padding: 0 0.25rem; line-height: 1; flex-shrink: 0; }
.cdx-qr-feed-remove:hover { color: var(--error); }

/* ── Rating + numeric summaries ──────────────────────────── */
.cdx-qr-rating-summary { display: flex; align-items: baseline; gap: 12px; justify-content: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.cdx-qr-rating-avg { font-size: 3.5rem; font-weight: 800; color: var(--primary); line-height: 1; }
.cdx-qr-rating-total { font-size: 1.1rem; color: var(--text-secondary); }
.cdx-qr-numeric-summary { display: flex; justify-content: space-around; gap: 12px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; text-align: center; }
.cdx-qr-numeric-summary div { font-size: 1rem; color: var(--text-secondary); }
.cdx-qr-numeric-summary strong { color: var(--text-primary); font-size: 1.2rem; display: block; margin-top: 4px; }
.cdx-qr-host .cdx-qr-rating-summary { margin-bottom: 12px; padding-bottom: 12px; }
.cdx-qr-host .cdx-qr-rating-avg { font-size: 2.2rem; }
.cdx-qr-host .cdx-qr-rating-total { font-size: 0.9rem; }
.cdx-qr-host .cdx-qr-numeric-summary { margin-bottom: 12px; padding-bottom: 12px; justify-content: space-between; }
.cdx-qr-host .cdx-qr-numeric-summary div { font-size: 0.85rem; }
.cdx-qr-host .cdx-qr-numeric-summary strong { font-size: 1rem; display: inline; margin-left: 4px; }

/* ── Inputs (student mode) ───────────────────────────────── */
.cdx-qr-open-form, .cdx-qr-wc-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.cdx-qr-input-row { display: flex; justify-content: space-between; align-items: center; }
.cdx-qr-open-textarea { width: 100%; padding: 14px 16px; border-radius: 8px; border: 2px solid var(--border); background: var(--surface); color: var(--text-primary); font-family: inherit; font-size: 1.05rem; outline: none; transition: border-color 0.2s; resize: vertical; min-height: 100px; box-sizing: border-box; }
.cdx-qr-open-textarea:focus { border-color: var(--primary); }
.cdx-qr-char-counter { font-size: 0.85rem; color: var(--text-light); }
.cdx-qr-wc-input { width: 100%; padding: 14px 16px; border-radius: 8px; border: 2px solid var(--border); background: var(--background); color: var(--text-primary); font-size: 1.1rem; outline: none; transition: border-color 0.2s; box-sizing: border-box; }
.cdx-qr-wc-input:focus { border-color: var(--primary); }
.cdx-qr-wc-hint { font-size: 0.85rem; color: var(--text-light); }
.cdx-qr-rating-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.cdx-qr-rating-btn { padding: 12px 18px; border-radius: 8px; border: 2px solid var(--border); background: var(--surface); color: var(--text-primary); font-size: 1.2rem; font-weight: 700; cursor: pointer; transition: all 0.2s; min-width: 48px; }
.cdx-qr-rating-btn:hover { border-color: var(--primary); background: var(--option-hover-bg); }
.cdx-qr-numeric-form { display: flex; gap: 12px; margin-bottom: 16px; }
.cdx-qr-numeric-input { flex: 1; padding: 14px 16px; border-radius: 8px; border: 2px solid var(--border); background: var(--background); color: var(--text-primary); font-size: 1.1rem; outline: none; transition: border-color 0.2s; min-width: 0; }
.cdx-qr-numeric-input:focus { border-color: var(--primary); }
.cdx-qr-submit-btn { padding: 12px 24px; background: var(--primary); color: var(--text-on-accent, #fff); border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s; white-space: nowrap; }
.cdx-qr-submit-btn:hover:not(:disabled) { opacity: 0.85; }
.cdx-qr-submit-btn:disabled { opacity: 0.4; cursor: default; }
.cdx-qr-multi-hint { font-size: 0.82rem; color: var(--text-secondary); margin: 8px 0 4px; text-align: center; }

/* ── Display/embed header (question text + status badge) ── */
.cdx-qr-question-area { margin-bottom: 32px; flex-shrink: 0; }
.cdx-qr-question-status { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.cdx-qr-status-badge { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; }
.cdx-qr-status-badge.live   { background: var(--status-live-bg); color: var(--status-live-text); }
.cdx-qr-status-badge.closed { background: var(--status-closed-bg); color: var(--status-closed-text); }
.cdx-qr-answer-count { font-size: 0.82rem; color: var(--text-light); }
.cdx-qr-question-text-display { font-size: clamp(1.3rem, 2.5vw, 2.8rem); font-weight: 700; color: var(--text-primary); line-height: 1.35; margin-bottom: 32px; text-align: justify; }

/* ── Display mode overrides ──────────────────────────────── */
.cdx-qr-display .cdx-qr-bar {
  margin-bottom: clamp(10px, 1.5vh, 18px);
  padding: clamp(8px, 1.2vh, 12px) clamp(12px, 2vw, 16px);
  gap: clamp(10px, 1.5vw, 14px);
  grid-template-columns: clamp(34px, 4vw, 44px) 1fr clamp(45px, 6vw, 60px);
}
.cdx-qr-display .cdx-qr-bar-letter { font-size: clamp(0.78rem, 1vw, 1rem); padding: clamp(6px, 0.8vh, 8px) 0; }
.cdx-qr-display .cdx-qr-bar-text { font-size: clamp(0.95rem, 1.6vw, 1.6rem); }
.cdx-qr-display .cdx-qr-bar-pct { font-size: clamp(0.82rem, 1.1vw, 1.25rem); }
.cdx-qr-display .cdx-qr-bar-track { height: clamp(10px, 1.2vh, 16px); }
.cdx-qr-display .cdx-qr-bar-count { font-size: clamp(0.82rem, 1.1vw, 1.25rem); }
.cdx-qr-display .cdx-qr-text-feed { gap: 14px; padding-right: 4px; overflow-y: auto; flex: 1; }

/* ── Idle / waiting state (display) ──────────────────────── */
.cdx-qr-center-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; padding: 2rem 1rem; color: var(--text-secondary); }
.cdx-qr-state-icon { font-size: 2rem; }
.cdx-qr-state-text { font-size: 1.05rem; }

/* ── Inactivity-pause overlay (student) ──────────────────── */
.cdx-cpq-resume-overlay { text-align: center; padding: 2.5rem 1rem; cursor: pointer; user-select: none; }
.cdx-cpq-resume-title { font-size: 1.15rem; color: var(--text-secondary); margin-bottom: 1.25rem; }
.cdx-cpq-resume-wait { font-size: 1.05rem; color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.4; }
.cdx-cpq-resume-checking { font-size: 1.1rem; color: var(--text-secondary); }
.cdx-cpq-resume-btn { font-size: 1.1rem; padding: 1rem 2rem; border: none; border-radius: 0.5rem; background: var(--primary); color: var(--text-on-accent, #fff); cursor: pointer; font-family: inherit; font-weight: 500; }

/* =========================================================
   Q2 live host dashboard (live-host.js + live-qa.js)
   Faithful port of the legacy host CSS (host-layout / host-composer /
   host-active-q / host-history / host-sqa / host-session-bar) into
   cdx- classes. Reuses the shared theme tokens (dark overrides owned
   by theme.css) and the shared cdx-btn primitives.
   ========================================================= */

.cdx-host { display: flex; flex-direction: column; min-height: 0; }

/* Session bar: a fixed surface-strip HEADER sibling (flex-shrink:0), not a
   sticky overlay. The dashboard columns below own the scrolling (overflow-y),
   so the bar stays put without position:sticky, per the no-sticky-bar rule. A
   faithful look of the legacy .host-session-bar; the Sessions main area has no
   padding, so the strip already spans edge-to-edge. */
.cdx-host-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; flex-wrap: wrap; flex-shrink: 0; background: var(--surface); border-bottom: 1px solid rgba(20,184,166,.18); padding: 0.4rem 1.1rem; margin: 0 -18px 0.5rem; }
/* Compact the bar buttons exactly like the legacy `.host-session-bar .host-btn`,
   so the bar height matches the host page. */
.cdx-host-bar .cdx-btn { padding: 0.35rem 0.75rem; font-size: 0.78rem; }
.cdx-host-bar-left { display: flex; align-items: center; gap: 0.6rem; }
.cdx-host-bar-actions { display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; }
.cdx-host-connected { display: inline-flex; align-items: center; gap: 4px; padding: 0.25rem 0.55rem; border-radius: 999px; background: var(--surface-hover, rgba(13, 148, 136, 0.18)); font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.cdx-host-code { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.16em; color: var(--primary); }
.cdx-host-live { display: inline-flex; align-items: center; gap: 5px; }
.cdx-host-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: cdx-host-live-pulse 2s ease-in-out infinite; }
.cdx-host-live-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: #ef4444; text-transform: uppercase; }
@keyframes cdx-host-live-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.75); } }

/* Visão column-toggle dropdown */
.cdx-host-visao { position: relative; }
.cdx-host-visao > summary { list-style: none; cursor: pointer; padding: 0.35rem 0.7rem; border-radius: 7px; background: var(--background); border: 1.5px solid rgba(20,184,166,.25); color: var(--text-primary); font-size: 0.82rem; user-select: none; }
.cdx-host-visao > summary::-webkit-details-marker { display: none; }
.cdx-host-visao[open] > summary { background: rgba(20,184,166,.08); border-color: rgba(20,184,166,.4); }
.cdx-host-visao-panel { position: absolute; top: 100%; right: 0; margin-top: 0.4rem; min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 0.7rem; z-index: 50; }
.cdx-host-visao-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 0.5rem; }
.cdx-host-vt { display: flex; width: 100%; justify-content: flex-start; align-items: center; gap: 6px; padding: 5px 10px; margin-bottom: 0.3rem; font-size: 0.78rem; font-weight: 600; font-family: inherit; cursor: pointer; border-radius: 6px; border: 1.5px solid transparent; background: rgba(127,127,127,.08); color: var(--text-secondary); transition: all 0.15s; }
.cdx-host-vt::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: rgba(127,127,127,.4); transition: background 0.15s; }
.cdx-host-vt.is-on { background: rgba(20,184,166,.14); color: var(--primary); }
.cdx-host-vt.is-on::before { background: var(--primary); }
.cdx-host-reset { display: flex; align-items: center; gap: 6px; width: 100%; justify-content: flex-start; margin: 0.45rem 0 0; padding: 0.55rem 0.4rem 0.2rem; border: none; border-top: 1px solid var(--border); background: transparent; color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; font-family: inherit; cursor: pointer; }
.cdx-host-reset:hover { color: var(--text-primary); }

/* 3-column layout. The dashboard is NOT a bounded scroll box: it grows with its
   content and the page (browser chrome) scrolls, so there is no inner vertical
   scrollbar and no per-column scrollbars. The columns scroll together. */
.cdx-host-dashboard { display: flex; gap: 0; flex: 1; min-height: 0; }
.cdx-hd-col { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: visible; padding: 0 0 16px; }
.cdx-hd-col-left { width: 360px; flex-shrink: 0; min-width: 260px; max-width: 600px; padding-left: 0; }
.cdx-hd-col-center { flex: 1; min-width: 280px; }
.cdx-hd-col-right { width: 380px; flex-shrink: 0; min-width: 280px; max-width: 600px; padding-right: 0; }
.cdx-hd-col.cdx-hd-hidden { display: none !important; }
.cdx-hd-resizer { width: 8px; flex-shrink: 0; cursor: col-resize; position: relative; background: transparent; transition: background 0.15s; }
.cdx-hd-resizer::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2px; height: 36px; background: var(--border); border-radius: 1px; transition: background 0.15s, height 0.15s; }
.cdx-hd-resizer:hover { background: rgba(20,184,166,.08); }
.cdx-hd-resizer:hover::before, .cdx-hd-resizer.cdx-hd-dragging::before { background: var(--primary); height: 56px; }
.cdx-hd-resizer.cdx-hd-hidden { display: none; }

/* Cards + composer */
.cdx-host-card { background: var(--surface); border: 1px solid rgba(20,184,166,.15); border-radius: 14px; padding: 1.3rem; }
.cdx-host-card-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 1rem; }
.cdx-host-composer { margin-top: 0.4rem; }
.cdx-host-error { font-size: 0.82rem; color: var(--error); margin: 0.4rem 0 0; min-height: 1.2em; }
.cdx-host-btn-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.75rem; }
.cdx-host-btn-row--end { justify-content: flex-end; }
.cdx-close-options { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.cdx-close-options label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.84rem; color: var(--text-secondary); cursor: pointer; font-weight: 500; }
.cdx-close-options input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }

/* Bank picker */
/* Mode toggle (Do banco | Nova pergunta) + the audience pills share the segmented look. */
.cdx-seg { display: flex; gap: 3px; padding: 3px; background: var(--background); border: 1px solid var(--border); border-radius: 9px; }
.cdx-seg-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.5rem 0.4rem; border: none; background: none; color: var(--text-secondary); font: inherit; font-size: 0.84rem; font-weight: 600; border-radius: 6px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.cdx-seg-btn:hover { color: var(--text-primary); }
.cdx-seg-btn.is-on { background: var(--cdx-btn-primary-bg); color: var(--cdx-btn-primary-text); }
.cdx-bank-mode { margin-bottom: 1rem; }
.cdx-bank-pane[hidden] { display: none; }
.cdx-bank-field { margin-bottom: 0.85rem; }
.cdx-bank-field-label { display: block; font-size: 0.7rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.4rem; }
.cdx-bank-aud-seg { flex-wrap: wrap; }
.cdx-bank-aud-pill { flex: 1 1 auto; min-width: max-content; padding: 0.45rem 0.7rem; border: none; background: none; color: var(--text-secondary); font: inherit; font-size: 0.78rem; font-weight: 600; border-radius: 6px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.cdx-bank-aud-pill:hover { color: var(--text-primary); }
.cdx-bank-aud-pill.is-on { background: var(--cdx-btn-primary-bg); color: var(--cdx-btn-primary-text); }
.cdx-bank-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.cdx-bank-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.32rem 0.65rem; background: var(--background); border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); font: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.cdx-bank-chip:hover { border-color: var(--primary); }
.cdx-bank-chip.is-on { background: rgba(20,184,166,.14); border-color: var(--primary); color: var(--text-primary); }
.cdx-bank-chip.is-disabled { opacity: 0.4; cursor: not-allowed; border-color: var(--border); }
.cdx-bank-chip.is-disabled:hover { border-color: var(--border); }
.cdx-bank-glyph { font-size: 0.7rem; line-height: 1; }
.cdx-bank-glyph-generic { color: var(--text-secondary); }
.cdx-bank-glyph-variable { color: var(--primary); }
.cdx-bank-glyph-unique { color: #d97706; }
.cdx-bank-reorder-bar { display: flex; justify-content: flex-end; margin-top: 0.5rem; }
.cdx-bank-reorder-toggle { padding: 0.25rem 0.55rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-secondary); font: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.cdx-bank-reorder-toggle:hover { border-color: var(--primary); color: var(--text-primary); }
.cdx-bank-reorder-toggle.is-on { background: var(--cdx-btn-primary-bg); border-color: var(--primary); color: var(--cdx-btn-primary-text); }
.cdx-bank-list { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; max-height: 60vh; overflow-y: auto; }
.cdx-bank-item.is-reordering { cursor: grab; border-color: var(--primary); }
.cdx-bank-item.is-reordering:active { cursor: grabbing; }
.cdx-bank-item.is-reordering .cdx-bank-item-head { pointer-events: none; }
.cdx-bank-msg { font-size: 0.82rem; color: var(--text-secondary); padding: 0.4rem 0; }
.cdx-bank-item { display: flex; flex-direction: column; padding: 0.4rem 0.55rem; border: 1px solid rgba(20,184,166,.12); border-radius: 8px; background: var(--background); }
.cdx-bank-item:hover { border-color: var(--primary); }
.cdx-bank-item-head { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.cdx-bank-chevron { flex-shrink: 0; width: 0.85rem; text-align: center; font-size: 0.72rem; color: var(--text-secondary); transition: transform 0.15s ease; }
.cdx-bank-item.is-open .cdx-bank-chevron { transform: rotate(90deg); }
.cdx-bank-item-text { font-size: 0.84rem; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdx-bank-item.is-open .cdx-bank-item-text { white-space: normal; overflow: visible; }
/* worker c: a bank question already applied in this turma — greyed, with a small
   badge. Still launchable (a deliberate re-ask is allowed). */
.cdx-bank-item.is-applied { opacity: 0.6; }
.cdx-bank-item.is-applied:hover { opacity: 0.85; }
.cdx-bank-applied { display: inline-block; margin-left: 0.4rem; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--primary-dark); white-space: nowrap; }
/* Row actions are compact glyph buttons (✎ Editar, ▶ Lançar). */
.cdx-iconbtn { flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-secondary); font-size: 0.9rem; line-height: 1; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.cdx-iconbtn:hover { border-color: var(--primary); color: var(--text-primary); }
.cdx-iconbtn-go { background: var(--cdx-btn-primary-bg); border-color: var(--primary); color: var(--cdx-btn-primary-text); }
.cdx-iconbtn-go:hover { color: var(--cdx-btn-primary-text); }
.cdx-bank-detail { display: none; margin-top: 0.4rem; padding: 0.4rem 0 0.1rem calc(0.85rem + 0.4rem); border-top: 1px dashed var(--border); }
.cdx-bank-item.is-open .cdx-bank-detail { display: block; }
.cdx-bank-detail-meta { font-size: 0.76rem; color: var(--text-secondary); }
.cdx-bank-class { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 999px; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: 1px; }
.cdx-bank-class-generic { background: rgba(127,127,127,.16); color: var(--text-secondary); }
.cdx-bank-class-variable { background: rgba(20,184,166,.16); color: var(--primary); }
.cdx-bank-class-unique { background: rgba(217,119,6,.18); color: #d97706; }
.cdx-bank-detail-opts { margin-top: 0.35rem; display: flex; flex-direction: column; gap: 0.18rem; }
.cdx-bank-opt { font-size: 0.8rem; color: var(--text-secondary); }
.cdx-bank-opt.is-correct { color: var(--primary); font-weight: 600; }

/* Active question panel */
.cdx-active-panel { background: var(--surface); border: 2px solid var(--primary); border-radius: 14px; padding: 1.25rem; display: none; }
.cdx-active-badge { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(20,184,166,.15); color: var(--primary); border-radius: 4px; padding: 0.2rem 0.6rem; margin-bottom: 0.75rem; }
.cdx-active-badge--sqa { background: rgba(245,158,11,.18); color: #b45309; }
.cdx-active-text { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; line-height: 1.4; }
.cdx-active-foot { margin-top: 1rem; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.cdx-active-tally { font-size: 0.82rem; color: var(--text-secondary); }
/* Close-options + the Encerrar button share the right side of the active foot,
   exactly like host.html (the checkboxes sit above the close button). */
.cdx-active-foot-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
.cdx-active-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }

/* Auto-revelar: opt-in control that closes the active question and shows the
   correct answer once a chosen share of the room has answered (or the answers
   plateau as a safety net). Controls/progress/status appear only when toggled on
   (.is-on). Tokens only, so dark mode is inherited. */
.cdx-autoreveal { margin-top: 1rem; padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.cdx-autoreveal-toggle { display: flex; align-items: center; gap: 0.5rem; font-size: 0.84rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.cdx-autoreveal-toggle input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.cdx-autoreveal-controls, .cdx-autoreveal-progress, .cdx-autoreveal-status { display: none; }
.cdx-autoreveal.is-on .cdx-autoreveal-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.cdx-autoreveal.is-on .cdx-autoreveal-progress { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; }
.cdx-autoreveal.is-on .cdx-autoreveal-status:not(:empty) { display: block; margin-top: 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--primary); }
.cdx-autoreveal-num { width: 4rem; padding: 0.3rem 0.4rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text-primary); font-size: 0.84rem; font-family: inherit; }
.cdx-autoreveal-unit { font-size: 0.82rem; color: var(--text-secondary); }
.cdx-autoreveal-connected { min-width: 1.6rem; padding: 0.2rem 0.45rem; border-radius: 6px; background: var(--surface-hover, rgba(13, 148, 136, 0.18)); font-size: 0.84rem; font-weight: 700; color: var(--primary); text-align: center; }
.cdx-autoreveal-target { font-size: 0.84rem; font-weight: 700; color: var(--primary); }
.cdx-autoreveal-bar { flex: 1; height: 8px; border-radius: 6px; background: var(--surface-hover, rgba(13, 148, 136, 0.18)); overflow: hidden; }
.cdx-autoreveal-bar-fill { height: 100%; width: 0; background: var(--primary); border-radius: 6px; transition: width 0.3s ease; }
.cdx-autoreveal-count { font-size: 0.82rem; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.cdx-autoreveal-flash { animation: cdx-autoreveal-flash 1.2s ease; }
@keyframes cdx-autoreveal-flash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px var(--primary); } }

/* Debug-only in-host answer simulator (hidden via [hidden] unless bs_debug is on).
   Border comes from the shared .cdx-dev-only marker (dashed --danger); see Codex
   CLAUDE.md "Developer-mode-only UI". Layout only here. */
.cdx-sim { margin-top: 0.75rem; padding: 0.5rem 0.7rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; border-radius: 10px; }
.cdx-sim-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.cdx-sim-n { width: 4rem; padding: 0.3rem 0.4rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text-primary); font-size: 0.84rem; font-family: inherit; }
.cdx-sim-btn { font-size: 0.8rem; }
.cdx-sim-status { font-size: 0.8rem; color: var(--text-secondary); }

/* Student-Q&A active card */
.cdx-sqa-meta { font-size: 0.85rem; color: var(--text-secondary); margin: 4px 0 8px; }
.cdx-sqa-answer-block { background: rgba(245,158,11,.06); border: 1px dashed rgba(245,158,11,.4); border-radius: 10px; padding: 14px; margin: 14px 0; }
.cdx-sqa-answer-label { font-size: 0.7rem; font-weight: 700; color: #b45309; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.cdx-sqa-answer-input { width: 100%; padding: 10px 12px; font-size: 0.92rem; font-family: inherit; line-height: 1.45; background: var(--surface); color: var(--text-primary); border: 1px solid rgba(245,158,11,.35); border-radius: 8px; outline: none; resize: vertical; min-height: 70px; box-sizing: border-box; }
.cdx-sqa-answer-input:focus { border-color: #f59e0b; }
.cdx-sqa-status { font-size: 0.74rem; color: var(--text-light); margin-top: 6px; }
.cdx-sqa-hint { font-size: 0.76rem; color: var(--text-light); margin-top: 6px; }

/* History card */
.cdx-history-item { padding: 0.75rem 0; border-bottom: 1px solid rgba(20,184,166,.08); }
.cdx-history-item:last-child { border-bottom: none; }
.cdx-hi-text { font-size: 0.88rem; color: var(--text-primary); }
.cdx-hi-type { display: inline-block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 6px; border-radius: 3px; margin: 3px 0 5px; background: rgba(20,184,166,.15); color: var(--primary); }
.cdx-hi-type-tf { background: rgba(99,102,241,.15); color: #6366f1; }
.cdx-hi-type-poll { background: rgba(59,130,246,.15); color: #2563eb; }
.cdx-hi-type-open { background: rgba(124,58,237,.15); color: #7c3aed; }
.cdx-hi-type-wordcloud { background: rgba(217,70,239,.15); color: #c026d3; }
.cdx-hi-type-rating { background: rgba(34,197,94,.15); color: #16a34a; }
.cdx-hi-type-numeric { background: rgba(14,165,233,.15); color: #0284c7; }
.cdx-hi-meta { font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; margin-bottom: 0.4rem; }
.cdx-hi-actions { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.cdx-hi-btn { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: all 0.15s; }
.cdx-hi-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(20,184,166,0.05); }
.cdx-hi-btn-primary { border-color: var(--primary); color: var(--primary); }
.cdx-hi-btn-primary:hover { background: var(--primary); color: var(--text-on-accent, #fff); }
.cdx-hi-btn-danger { border-color: rgba(239,68,68,.35); color: var(--error); }
.cdx-hi-btn-danger:hover { background: var(--error); color: var(--text-on-accent, #fff); border-color: var(--error); }
.cdx-hi-results { margin-top: 0.6rem; background: rgba(0,0,0,0.06); border-radius: 6px; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; }
[data-theme="dark"] .cdx-hi-results { background: rgba(255,255,255,0.06); }
.cdx-hi-bar { display: flex; align-items: center; font-size: 0.72rem; gap: 0.5rem; }
.cdx-hi-bar-label { flex: 1; min-width: 0; color: var(--text-secondary); display: flex; align-items: center; gap: 0.3rem; overflow: hidden; }
.cdx-hi-bar-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdx-hi-bar-badge { font-weight: 700; background: var(--surface); border: 1px solid var(--border); padding: 0.1rem 0.3rem; border-radius: 4px; color: var(--primary); white-space: nowrap; flex-shrink: 0; }
.cdx-hi-bar-badge.correct { background: var(--success); color: var(--text-on-accent, #fff); border-color: var(--success); }
.cdx-hi-bar-pct { font-weight: 600; color: var(--text-primary); width: 32px; text-align: right; }
.cdx-hi-bar-count { color: var(--text-light); width: 20px; text-align: right; }

/* Student Q&A feed (right column) */
.cdx-qa-section { background: var(--surface); border: 1px solid rgba(20,184,166,.15); border-radius: 14px; padding: 1.3rem; }
.cdx-qa-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.cdx-qa-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.cdx-qa-badge { display: inline-block; min-width: 22px; text-align: center; padding: 0.15rem 0.5rem; font-size: 0.72rem; font-weight: 700; color: var(--text-on-accent, #fff); background: #ef4444; border-radius: 999px; }
.cdx-qa-empty { font-size: 0.85rem; color: var(--text-secondary); text-align: center; padding: 1rem 0; }
.cdx-qa-row { padding: 0.8rem; border: 1px solid rgba(20,184,166,.12); border-radius: 10px; margin-bottom: 0.6rem; background: var(--background); transition: border-color .15s; }
.cdx-qa-row.cdx-qa-answered { opacity: 0.75; }
.cdx-qa-row.cdx-qa-dismissed { opacity: 0.45; }
.cdx-qa-row.cdx-qa-pinned { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.cdx-qa-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.3rem; }
.cdx-qa-meta { font-size: 0.72rem; color: var(--text-secondary); }
.cdx-qa-pin-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); background: rgba(20,184,166,.12); padding: 0.15rem 0.45rem; border-radius: 4px; }
.cdx-qa-text { font-size: 0.92rem; color: var(--text-primary); line-height: 1.5; }
.cdx-qa-answer-text { margin-top: 0.4rem; font-size: 0.82rem; color: var(--text-secondary); padding: 0.4rem 0.6rem; background: rgba(20,184,166,.05); border-left: 2px solid var(--primary); border-radius: 0 6px 6px 0; }
.cdx-qa-actions { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.45rem; }
.cdx-qa-answer-input { width: 100%; padding: 0.5rem 0.7rem; background: var(--surface); border: 1px solid rgba(20,184,166,.25); border-radius: 8px; color: var(--text-primary); font-family: inherit; font-size: 0.85rem; line-height: 1.4; outline: none; resize: vertical; box-sizing: border-box; }
.cdx-qa-answer-input:focus { border-color: var(--primary); }
.cdx-qa-action-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cdx-qa-btn-sm { padding: 0.4rem 0.85rem; font-size: 0.78rem; }
.cdx-qa-resolved { margin-top: 0.6rem; }
.cdx-qa-resolved > summary { cursor: pointer; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); padding: 0.4rem 0; user-select: none; }
.cdx-qa-resolved > summary:hover { color: var(--primary); }

@media (max-width: 900px) {
  .cdx-host-dashboard { flex-direction: column; max-height: none; }
  .cdx-hd-col, .cdx-hd-col-left, .cdx-hd-col-center, .cdx-hd-col-right { width: 100% !important; max-width: none !important; overflow-y: visible; padding: 0 0 14px; }
  .cdx-hd-resizer { display: none; }
}

/* Live host fills the width: drop .cdx-view's side padding when the host is
   mounted (scoped via :has so the Sessions list / Bank / other tabs keep theirs,
   and only on desktop where the 3-column layout shows). The bar stays full-bleed;
   the outer columns keep a small 8px gutter so the cards don't touch the edge. */
@media (min-width: 901px) {
  .cdx-view:has(.cdx-host) { padding-left: 0; padding-right: 0; }
  .cdx-view:has(.cdx-host) .cdx-host-bar { margin-left: 0; margin-right: 0; }
  .cdx-view:has(.cdx-host) .cdx-hd-col-left { padding-left: 8px; }
  .cdx-view:has(.cdx-host) .cdx-hd-col-right { padding-right: 8px; }
}

/* =========================================================
   Q2 faithful host port: session bar extras (name, Trilha,
   not-hosted note, Trilha modal) + session-card actions.
   ========================================================= */

/* Session name (left of the bar) is a button: clicking it reveals the protected
   Excluir, per Elder. Stats sits first in the actions group (left of Visao). */
.cdx-host-titlewrap { position: relative; display: flex; align-items: center; min-width: 0; }
.cdx-host-name { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 0; font-family: inherit; font-size: 0.78rem; color: var(--text-secondary); cursor: pointer; text-align: left; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdx-host-name:hover { color: var(--primary); }
.cdx-host-name-caret { font-style: normal; font-size: 0.7em; opacity: 0.7; }
/* Dropdown off the session name: Renomear + Excluir. */
.cdx-host-name-menu { position: absolute; top: calc(100% + 0.3rem); left: 0; min-width: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); padding: 0.4rem; z-index: 60; display: flex; flex-direction: column; gap: 0.2rem; }
.cdx-host-menu-item { width: 100%; text-align: left; padding: 0.5rem 0.7rem; background: var(--background); border: 1px solid var(--border); border-radius: 7px; color: var(--text-primary); font-family: inherit; font-size: 0.85rem; cursor: pointer; }
.cdx-host-menu-item:hover:not(:disabled) { background: rgba(20,184,166,.06); border-color: rgba(20,184,166,.35); }
.cdx-host-menu-item:disabled { opacity: 0.45; cursor: not-allowed; }
.cdx-host-menu-item--danger { color: var(--error); }
.cdx-host-menu-item--danger:hover { background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.35); }
.cdx-host-note { background: rgba(20,184,166,.08); border: 1px solid rgba(20,184,166,.2); border-radius: 10px; padding: 1rem 1.25rem; color: var(--text-secondary); font-size: 0.88rem; text-align: center; margin-bottom: 1rem; }

/* Trilha button + linked dot */
.cdx-host-trail { display: inline-flex; align-items: center; gap: 6px; }
.cdx-host-trail-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(127,127,127,.4); flex-shrink: 0; transition: background 0.15s; }
.cdx-host-trail.is-linked .cdx-host-trail-dot { background: var(--success); box-shadow: 0 0 0 2px rgba(16,185,129,.18); }
/* QR is always present; without a linked turma it reads as disabled (still clickable, explains why). */
.cdx-host-qr { display: inline-flex; align-items: center; gap: 5px; }
.cdx-host-qr.is-disabled { opacity: 0.45; }
/* is-live = window open (countdown running, even if the QR is hidden on the display):
   the button carries the time. is-on = the QR is actually projected: a stronger glow. */
.cdx-host-qr.is-live { border-color: var(--success); color: var(--success); }
.cdx-host-qr.is-on { box-shadow: 0 0 0 2px rgba(16,185,129,.18); }
.cdx-host-qr-rem { font-variant-numeric: tabular-nums; font-size: .78rem; font-weight: 600; }
.cdx-host-qr-rem:empty { display: none; }

/* Trilha modal */
.cdx-trail-modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; align-items: center; justify-content: center; z-index: 200; }
.cdx-trail-modal.open { display: flex; }
.cdx-trail-box { background: var(--surface); border-radius: 16px; padding: 1.6rem; max-width: 420px; width: 90%; text-align: left; }
.cdx-trail-box h3 { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; }
.cdx-trail-status { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.cdx-trail-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; }
.cdx-trail-engine { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.9rem; }
.cdx-trail-link { display: inline-block; font-size: 0.85rem; color: var(--primary); text-decoration: none; margin-bottom: 0.9rem; }
.cdx-trail-link:hover { text-decoration: underline; }
.cdx-trail-box select { width: 100%; margin-bottom: 0.9rem; }
.cdx-trail-empty { color: var(--text-secondary); font-size: 0.85rem; padding: 0.6rem 0; }

/* Inline delete-confirm text (used by the retained, not-yet-wired session
   delete). The rejected per-card action buttons are gone; the sidebar cards
   are bare. */
.cdx-session-confirm { font-size: 0.74rem; color: var(--text-secondary); }