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

[data-quiz-engine-admin][hidden] { display: none !important; }
.qe {
  --qe-blue: #0a56a7;
  --qe-blue-soft: #eaf3ff;
  --qe-green: #087453;
  --qe-ink: #162b40;
  --qe-muted: #526579;
  --qe-border: #cbd8df;
  --qe-paper: #fffcf7;
  --qe-ground: #f4efe7;
  --qe-sage: #dcefe5;
  --qe-gold: #f6e7b0;
  --qe-danger: #a32636;
  --qe-spring: cubic-bezier(.34, 1.56, .64, 1);
  --qe-ease: cubic-bezier(.2, .85, .3, 1);
  --qe-r-pill: 999px;
  --qe-r-card: 22px;
  --qe-r-hero: 26px;
  --qe-ledge: #c9def5;
  --qe-ledge-dark: #06376b;
  color: var(--qe-ink);
  font: 400 16px/1.5 'Plus Jakarta Sans', Inter, Arial, sans-serif;
}
.qe *, .qe *::before, .qe *::after { box-sizing: border-box; }
.qe h2, .qe h3, .qe h4, .qe p { margin: 0; }
.qe h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; letter-spacing: -.03em; }
.qe h3 { font-size: 20px; line-height: 1.3; }
.qe-dialog { width: min(1180px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--qe-border); border-radius: 24px; background: var(--qe-ground); box-shadow: 0 24px 100px #102c4a40; }
.qe-dialog::backdrop { background: #0c2135b8; }
.qe-dialog { scroll-padding-top: 130px; }
@keyframes qe-dialog-in {
  from { opacity: 0; transform: scale(.9) translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes qe-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.qe-dialog[open] { animation: qe-dialog-in 460ms var(--qe-spring); }
.qe-dialog[open]::backdrop { animation: qe-backdrop-in 300ms ease; }
.qe-dialog.qe-page {
  position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh;
  max-height: none; margin: 0; border-radius: 0; border: 0;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--qe-ground);
}
.qe-dialog.qe-page[open] { animation: none; }
.qe-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 32px; border-bottom: 1px solid var(--qe-border); background: #fffdf9ed; backdrop-filter: blur(18px); }
.qe-body { padding: 24px 32px 40px; display: grid; gap: 24px; }
.qe-page .qe-body { width: min(1120px, 100%); margin-inline: auto; }
.qe-eyebrow { color: var(--qe-blue); font-size: 12px; font-weight: 800; letter-spacing: .12em; margin-bottom: 8px; }
.qe-message { padding: 0 32px; color: var(--qe-green); overflow-wrap: anywhere; }
.qe-message:not(:empty) { padding-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--qe-border); background: var(--qe-paper); }
.qe-error { color: var(--qe-danger); }
.qe-button {
  display: inline-flex; justify-content: center; align-items: center;
  min-height: 44px; padding: 11px 20px;
  border: 0; border-radius: var(--qe-r-pill);
  background: var(--qe-paper); color: var(--qe-ink);
  font: 800 14px/1.4 'Plus Jakarta Sans', Inter, Arial, sans-serif;
  cursor: pointer; text-align: center; text-decoration: none;
  box-shadow: 0 4px 0 var(--qe-ledge), 0 8px 18px #0a56a724;
  transition: transform 160ms var(--qe-spring), box-shadow 160ms ease, background-color 160ms ease;
}
.qe-button:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 7px 0 var(--qe-ledge), 0 16px 26px #0a56a733;
}
.qe-button:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--qe-ledge), 0 3px 8px #0a56a733;
}
.qe-button:disabled { opacity: .55; cursor: default; box-shadow: 0 2px 0 var(--qe-ledge); }
.qe-button:focus-visible, .qe-input:focus-visible, .qe input:focus-visible, .qe-rail-item:focus-visible { outline: 3px solid var(--qe-blue); outline-offset: 3px; }
.qe-primary {
  background: linear-gradient(180deg, #1e6bc4, var(--qe-blue)); color: #fff;
  box-shadow: 0 4px 0 var(--qe-ledge-dark), 0 10px 22px #0a56a757;
}
.qe-primary:hover:not(:disabled) {
  color: #fff;
  box-shadow: 0 7px 0 var(--qe-ledge-dark), 0 18px 32px #0a56a766;
}
.qe-primary:active:not(:disabled) { box-shadow: 0 0 0 var(--qe-ledge-dark), 0 3px 8px #0a56a757; }
.qe-quiet { background: transparent; box-shadow: 0 2px 0 var(--qe-border); }
/* M1 fix: .qe-quiet is (0,1,0) but .qe-button:hover:not(:disabled) /
   :active:not(:disabled) are (0,3,0), so the full blue ledge repainted the
   quiet grey edge on hover. Doubling the class to (0,4,0), matching the
   .qe-button.qe-selected.qe-selected idiom already used below, beats those
   without touching transform (still inherited from .qe-button:hover/:active)
   so the button still lifts, just with its grey edge instead of the blue one. */
.qe-quiet.qe-quiet:hover:not(:disabled) { box-shadow: 0 7px 0 var(--qe-border); }
.qe-quiet.qe-quiet:active:not(:disabled) { box-shadow: 0 0 0 var(--qe-border); }
.qe-danger { color: var(--qe-danger); }
.qe-button.qe-selected.qe-selected {
  background: var(--qe-blue-soft); color: var(--qe-blue);
  box-shadow: inset 0 0 0 2px var(--qe-blue), 0 4px 0 var(--qe-ledge), 0 8px 18px #0a56a724;
}
.qe-button.qe-selected.qe-selected:hover:not(:disabled) {
  box-shadow: inset 0 0 0 2px var(--qe-blue), 0 7px 0 var(--qe-ledge), 0 16px 26px #0a56a733;
}
.qe-button.qe-selected.qe-selected:active:not(:disabled) {
  box-shadow: inset 0 0 0 2px var(--qe-blue), 0 0 0 var(--qe-ledge), 0 3px 8px #0a56a733;
}
.qe-muted, .qe-small { color: var(--qe-muted); }
.qe-small { font-size: 13px; }
/* I1 fix (spec §3.2): the hero was still in the pre-redesign visual language
   (20px radius, 1px blue border, no decoration) sitting directly above 22px
   ledge cards, and --qe-r-hero was dead for its named purpose. Brought in
   line with the ledge language used elsewhere: --qe-r-hero radius, a 2px
   white border, a soft outer shadow plus an inset white top-edge highlight,
   and a decorative radial blob. position: relative + overflow: hidden make
   the card a positioning context for the ::after blob and clip it to the
   rounded corner so it can't bleed past it. */
.qe-plus-card {
  display: grid; gap: 12px; padding: 28px; position: relative; overflow: hidden;
  border: 2px solid #fff; border-radius: var(--qe-r-hero);
  background: linear-gradient(150deg, #E3F0FF, #EAF7F1);
  box-shadow: 0 10px 22px #0f172a12, inset 0 1px 0 #ffffffcc;
}
/* .qe-plus-card::after is (0,1,1) — a new selector, nothing to outrank.
   pointer-events: none keeps the decorative blob from ever intercepting a
   click on the CTA beneath it; the blob is static, no animated properties. */
.qe-plus-card::after {
  content: ''; position: absolute; top: -50px; right: -50px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, #ffffffb3, transparent 70%);
  pointer-events: none;
}
.qe-plus-card > .qe-button { justify-self: start; position: relative; z-index: 1; }
.qe-inline, .qe-actions, .qe-editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.qe-inline > .qe-field { flex: 1 1 220px; }
.qe-inline > button { align-self: end; }
.qe-editor-toolbar > .qe-small { margin-right: auto; }
.qe-library { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: start; }
.qe-library-main { display: grid; gap: 16px; min-width: 0; }
.qe-rail { position: relative; display: grid; gap: 8px; align-content: start; }
.qe-rail-indicator {
  /* Row pitch is 44px min-height + 8px gap = 52px; see the matching transform
     step in ui.mjs's renderLibrary(). top: 2px centers the 40px-tall indicator
     within each 44px-tall row. */
  position: absolute; left: 0; top: 2px; width: 100%; height: 40px;
  border-radius: var(--qe-r-pill); pointer-events: none;
  background: linear-gradient(180deg, #1e6bc4, var(--qe-blue));
  box-shadow: 0 3px 0 var(--qe-ledge-dark), 0 8px 16px #0a56a747;
  transition: transform 420ms var(--qe-spring);
}
.qe-rail-item {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  border: 0; border-radius: var(--qe-r-pill);
  background: transparent; color: var(--qe-muted);
  font: 700 13px/1 Inter, Arial, sans-serif; text-align: left; cursor: pointer;
  transition: color 300ms ease;
}
.qe-rail-label {
  /* A row must never exceed 44px, or the indicator's hardcoded 52px step
     (activeIndex * 52 in ui.mjs) desyncs from the real layout. min-width: 0
     lets this flex child actually shrink instead of forcing the row wider;
     nowrap + ellipsis keep a long/translated label to one line at any width. */
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.qe-rail-item:hover { color: var(--qe-blue); }
.qe-rail-active { color: #fff; }
/* M2 fix: .qe-rail-active:hover tied .qe-rail-item:hover at (0,2,0) and only
   won on source order — the exact latent-bug shape fixed elsewhere in this
   file with specificity. Doubling the class to (0,3,0) makes the white label
   win regardless of ordering. */
.qe-rail-active.qe-rail-active:hover { color: #fff; }
.qe-count {
  margin-left: auto; border-radius: var(--qe-r-pill); padding: 2px 8px;
  background: #edf3fa; color: var(--qe-muted);
  font: 800 11px/1.4 Inter, Arial, sans-serif;
}
.qe-rail-active .qe-count { background: #ffffff40; color: #fff; }
.qe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.qe-card {
  display: grid; align-content: start; gap: 16px; padding: 24px;
  border: 2px solid var(--qe-paper); border-radius: var(--qe-r-card);
  background: var(--qe-paper); min-width: 0; overflow-wrap: anywhere;
  box-shadow: 0 4px 0 #e4ecf5, 0 10px 22px #0f172a12;
}
.qe-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qe-chip {
  display: inline-block; border-radius: var(--qe-r-pill); padding: 4px 11px;
  font: 800 10px/1.6 Inter, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.qe-chip-live { background: #e3f5ec; color: #07593f; }
.qe-chip-draft { background: #fff3dc; color: #8a5a08; }
.qe-chip-danger { background: #fff0f1; color: var(--qe-danger); }
.qe-chip-unlisted { background: #eef0ff; color: #4338ac; }
.qe-icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 44px;
  border: 0; border-radius: var(--qe-r-pill);
  background: var(--qe-paper); font-size: 17px; line-height: 1; cursor: pointer;
  box-shadow: 0 3px 0 #e4ecf5, 0 6px 14px #0f172a12;
  transition: transform 160ms var(--qe-spring), box-shadow 160ms ease;
}
.qe-icon-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 5px 0 #dbe7f3, 0 10px 20px #0f172a1f; }
.qe-icon-button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 #e4ecf5; }
.qe-bookmark[aria-pressed="true"] { background: var(--qe-blue-soft); box-shadow: 0 3px 0 var(--qe-ledge), 0 6px 14px #0a56a724; }
/* Specificity note: .qe-icon-button:hover/:active are (0,3,0). A plain
   .qe-bookmark[aria-pressed="true"]:hover selector would tie at (0,3,0) and
   lose to source order (or worse, win/lose unpredictably on reorder). Adding
   :not(:disabled) here pushes these to (0,4,0) so the pressed ring always
   outranks the generic hover/active ledge, regardless of source order. */
.qe-bookmark[aria-pressed="true"]:hover:not(:disabled) { box-shadow: 0 5px 0 var(--qe-ledge), 0 10px 20px #0a56a733; }
.qe-bookmark[aria-pressed="true"]:active:not(:disabled) { box-shadow: 0 0 0 var(--qe-ledge); }
.qe-actions .qe-icon-button { margin-left: auto; }
.qe-icon-button:focus-visible { outline: 3px solid var(--qe-blue); outline-offset: 3px; }
.qe-field { display: grid; gap: 8px; min-width: 0; font-size: 14px; font-weight: 600; }
.qe-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
input.qe-control, select.qe-control { width: auto; flex: 1 1 200px; border-radius: var(--qe-r-pill); padding: 12px 18px; }
.qe-controls select.qe-control { flex: 0 1 200px; cursor: pointer; }
.qe-input {
  display: block; width: 100%; min-height: 44px;
  border: 0; border-radius: 14px; padding: 11px 14px;
  color: var(--qe-ink); background: var(--qe-paper);
  font: 400 16px/1.5 'Plus Jakarta Sans', Inter, Arial, sans-serif;
  box-shadow: inset 0 2px 6px #0f172a14;
}
.qe textarea { resize: vertical; }
.qe input[type=checkbox], .qe input[type=radio] { accent-color: var(--qe-blue); width: 24px; height: 24px; margin: 10px; flex-shrink: 0; }
.qe-subject-select { min-height: 132px; }
.qe-subject-select option { padding: 6px; }
.qe-empty {
  display: grid; justify-items: center; gap: 16px;
  padding: 40px 28px; border: 0; border-radius: var(--qe-r-hero);
  background: linear-gradient(150deg, #eaf3ff, #f0faf5);
  color: var(--qe-muted); text-align: center; grid-column: 1 / -1;
}
.qe-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@keyframes qe-shimmer { to { background-position: -300% 0; } }
.qe-skeleton {
  height: 132px; border-radius: var(--qe-r-card);
  background: linear-gradient(100deg, #e8eef6 8%, #f6fafd 26%, #e8eef6 44%);
  background-size: 300% 100%;
  animation: qe-shimmer 1500ms linear infinite;
}
.qe-builder { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.qe-builder-sidebar { padding: 16px; }
.qe-question-list { display: grid; gap: 8px; max-height: 440px; overflow-y: auto; padding: 4px; }
.qe-question-item { display: block; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.qe-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qe-block { justify-content: flex-start; text-align: left; }
.qe-choices { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; min-width: 0; }
.qe-choices legend { margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.qe-choice-row { display: flex; align-items: center; gap: 8px; }
.qe-choice-row .qe-input { min-width: 0; }
.qe-suggestion { display: grid; gap: 12px; padding: 20px; background: var(--qe-blue-soft); border: 1px solid var(--qe-blue); border-radius: 14px; }
.qe-publish { grid-template-columns: 1fr auto; align-items: end; }
.qe-publish .qe-small { grid-column: 1 / -1; }
.qe-player { max-width: 840px; width: 100%; justify-self: center; padding: 28px; gap: 18px; background: var(--qe-paper); }
.qe-question-block { display: grid; gap: 14px; padding: 22px 24px; border: 1px solid #c9dced; border-radius: 18px; background: var(--qe-blue-soft); }
.qe-player-prompt { max-width: 760px; white-space: pre-wrap; font-size: 20px !important; line-height: 1.55 !important; font-weight: 600; letter-spacing: -.018em; text-wrap: pretty; }
.qe-player-choices { display: grid; gap: 12px; padding: 2px 0; }
.qe-player-choice { justify-content: flex-start; text-align: left; min-height: 54px; padding: 14px 18px; border: 1px solid #d9e2e5; border-radius: 16px; background: #fffdf9; font-size: 15px; font-weight: 600; line-height: 1.55; white-space: pre-wrap; }
.qe-player-choice:disabled { opacity: 1; }
.qe-button.qe-correct.qe-correct {
  background: #e5f6ed; color: #07593f;
  box-shadow: inset 0 0 0 2px var(--qe-green), 0 4px 0 var(--qe-ledge), 0 8px 18px #0a56a724;
}
.qe-button.qe-incorrect.qe-incorrect {
  background: #fff0f1; color: var(--qe-danger);
  box-shadow: inset 0 0 0 2px var(--qe-danger), 0 4px 0 var(--qe-ledge), 0 8px 18px #0a56a724;
}
.qe-button-spinner { width: 18px; height: 18px; flex: 0 0 18px; animation: qe-upload-spin 800ms linear infinite; }
.qe-button[aria-busy="true"] { cursor: progress; }
@keyframes qe-swell {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}
@keyframes qe-shake {
  0%, 100% { transform: translateX(0); }
  18%  { transform: translateX(-7px); }
  38%  { transform: translateX(6px); }
  58%  { transform: translateX(-4px); }
  78%  { transform: translateX(2px); }
}
.qe-player-choice.qe-correct { animation: qe-swell 500ms var(--qe-spring); }
.qe-player-choice.qe-incorrect { animation: qe-shake 420ms ease; }
.qe-feedback { padding: 18px; border: 1px solid #c8dfd3; background: var(--qe-sage); border-radius: 16px; white-space: pre-wrap; }
.qe-feedback p { margin-top: 8px; }
.qe-context { padding: 14px 16px; border-left: 3px solid var(--qe-blue); background: #fffdf9; border-radius: 0 12px 12px 0; font-size: 14px; white-space: pre-wrap; }
.qe-progress { width: 100%; height: 8px; accent-color: var(--qe-green); }
.qe-score { font-size: 48px !important; color: var(--qe-blue); }
.qe-subject { display: grid; gap: 20px; margin: 8px 0 24px; }
.qe-subject .qe-inline h3 { margin-right: auto; }
.qe-launch-card { padding: 20px; display: grid; gap: 12px; border: 1px solid var(--qe-border); background: var(--qe-blue-soft); border-radius: 16px; }
.qe-launch-card .qe-plus-logo-heading { line-height: 0; }
.qe-plus-logo-heading img {
  display: block;
  width: min(100%, 320px);
  height: auto;
}
@keyframes qe-rise {
  from { opacity: 0; transform: translateY(18px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes qe-bump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.qe-message:has(.qe-celebrate) { display: flex; align-items: center; gap: 14px; }
.qe-celebrate { position: relative; width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; }
.qe-celebrate-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid var(--qe-green); opacity: 0;
  animation: qe-ripple 800ms var(--qe-ease) forwards;
}
.qe-celebrate-ring:nth-child(2) { animation-delay: 140ms; }
.qe-celebrate-check {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(180deg, #0b9169, var(--qe-green)); color: #fff;
  font: 800 17px/1 Inter, Arial, sans-serif; transform: scale(0);
  box-shadow: 0 3px 0 #05563d, 0 8px 18px #08745357;
  animation: qe-check-pop 550ms var(--qe-spring) forwards;
}
@keyframes qe-ripple {
  from { transform: scale(.55); opacity: .85; }
  to   { transform: scale(1.7); opacity: 0; }
}
@keyframes qe-check-pop { to { transform: scale(1); } }
/* .qe-grid is also used by mountSubject() outside the dialog (Task 5); the
   rise-in on section render reads correctly there too, so this is left
   unscoped to the dialog on purpose. */
.qe-grid > .qe-card, .qe-grid > .qe-empty { animation: qe-rise 500ms var(--qe-spring) both; }
.qe-grid > .qe-card:nth-child(1) { animation-delay: 0ms; }
.qe-grid > .qe-card:nth-child(2) { animation-delay: 55ms; }
.qe-grid > .qe-card:nth-child(3) { animation-delay: 110ms; }
.qe-grid > .qe-card:nth-child(4) { animation-delay: 165ms; }
.qe-grid > .qe-card:nth-child(5) { animation-delay: 220ms; }
.qe-grid > .qe-card:nth-child(n+6) { animation-delay: 275ms; }
/* Task 6: unlike the brief's original .qe-count / .qe-bookmark[aria-pressed="true"]
   selectors, the pop is scoped to a .qe-pop modifier class that ui.mjs applies
   only when a count or bookmark state genuinely changed since the last render
   (see the countSnapshot/bookmarkSnapshot notes in ui.mjs). renderLibrary()
   rebuilds every rail badge and every card on nearly every render (tab switch,
   search keystroke, any refresh()), so an unconditional selector would replay
   the pop on every already-bookmarked card and every unchanged count on every
   such render, not only on a real toggle/change.
   Specificity: .qe-count.qe-pop is (0,2,0); the existing .qe-count (0,1,0) and
   .qe-rail-active .qe-count (0,2,0) rules only set background/color/padding/etc,
   never animation, so there is no property collision to resolve.
   .qe-bookmark.qe-pop is (0,2,0); the existing .qe-bookmark[aria-pressed="true"]
   rules (base (0,2,0), :hover (0,4,0), :active (0,4,0)) only set
   background/box-shadow, never animation, so this composes with all three
   rather than competing with them — the pop still plays while hovered, which
   is the normal case right after a click. */
.qe-count.qe-pop { animation: qe-bump 500ms var(--qe-spring); }
.qe-bookmark.qe-pop { animation: qe-bump 500ms var(--qe-spring); }
@media (max-width: 700px) {
  .qe-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 16px; }
  .qe-header { padding: 20px 16px; }
  .qe-body { padding: 16px; }
  .qe-message { padding-left: 16px; padding-right: 16px; }
  .qe-builder { grid-template-columns: 1fr; gap: 16px; }
  .qe-question-list { max-height: 140px; }
  .qe-card, .qe-plus-card { padding: 18px; }
  .qe-blocks { grid-template-columns: 1fr; }
  .qe-publish { grid-template-columns: 1fr; }
  .qe-choice-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); }
  .qe-choice-row button { grid-column: 2; justify-self: end; }
  .qe-library { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .qe-rail {
    grid-auto-flow: column; grid-auto-columns: max-content;
    overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; scrollbar-width: none;
  }
  .qe-rail::-webkit-scrollbar { display: none; }
  .qe-grid { grid-template-columns: minmax(0, 1fr); }
  .qe-controls .qe-control { flex: 1 1 100%; }
  /* Specificity: .qe-rail-indicator (0,1,0) here matches the base rule at
     line 94 — this wins on source order (later in the cascade), not
     specificity, which is fine since both are unconditional for this
     selector. .qe-rail-active (0,1,0) below ties the base .qe-rail-active
     rule (line 121) the same way: this block comes later in the file, so it
     wins on source order for the properties it sets (background/color/
     box-shadow), while color: #fff duplicates rather than conflicts with the
     base rule's color: #fff. */
  .qe-rail-indicator { display: none; }
  .qe-rail-active {
    background: linear-gradient(180deg, #1e6bc4, var(--qe-blue)); color: #fff;
    box-shadow: 0 3px 0 var(--qe-ledge-dark), 0 8px 16px #0a56a747;
  }
}
@media (prefers-reduced-motion: reduce) {
  .qe *, .qe *::before, .qe *::after,
  .qe-dialog, .qe-dialog[open], .qe-dialog[open]::backdrop {
    animation: none !important;
    transition: none !important;
  }
  .qe-button:hover:not(:disabled), .qe-button:active:not(:disabled) { transform: none; }
  .qe-icon-button:hover:not(:disabled), .qe-icon-button:active:not(:disabled) { transform: none; }
  /* I2 fix: with animation: none !important above, the check and rings would
     otherwise freeze at their pre-animation start state (scale(0) / opacity 0)
     instead of the finished state qe-check-pop/qe-ripple animate toward —
     erasing the publish confirmation instead of just un-animating it. Both
     selectors are (0,1,0), tying the base rules at lines 255/261; this block
     comes later in the file, so it wins on source order, matching the idiom
     already used for .qe-button:hover/:active above. */
  .qe-celebrate-check { transform: scale(1); }
  .qe-celebrate-ring { display: none; }
}

/* Resource-first quiz creation. */
.qe-upload { max-width: 820px; margin-inline: auto; display: grid; gap: 20px; padding: 30px; background: #fffcf7; }
.qe-create-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0; padding: 0; list-style: none; }
.qe-create-step { display: grid; grid-template-columns: 32px 1fr; gap: 2px 10px; align-items: center; padding: 14px; border: 1px solid #d2dfdf; border-radius: 16px; background: linear-gradient(145deg, #fffdf9, #f2f7f3); animation: qe-rise 500ms var(--qe-spring) both; }
.qe-create-step:nth-child(2) { animation-delay: 70ms; }
.qe-create-step:nth-child(3) { animation-delay: 140ms; }
.qe-create-step > span:last-child { grid-column: 2; color: var(--qe-muted); font-size: 11px; line-height: 1.4; }
.qe-step-number { grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--qe-blue); color: white; font-weight: 800; box-shadow: 0 3px 0 var(--qe-ledge-dark); }
.qe-create-step:nth-child(2) .qe-step-number { background: linear-gradient(180deg, #be123c, var(--qe-danger)); box-shadow: 0 3px 0 #711827; }
.qe-create-step:nth-child(3) .qe-step-number { background: linear-gradient(180deg, #0b9169, var(--qe-green)); box-shadow: 0 3px 0 #05563d; }
.qe-dropzone { display: grid; justify-items: center; gap: 10px; padding: 28px 24px; border: 2px dashed #a9bfd0; border-radius: 22px; background: linear-gradient(145deg, var(--qe-blue-soft), #f5faf6); text-align: center; transition: transform 180ms var(--qe-spring), border-color 180ms ease, background-color 180ms ease; }
.qe-dropzone.qe-dragover, .qe-dropzone:focus-within { border-color: var(--qe-blue); transform: translateY(-2px); }
.qe-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.qe-upload-icon { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; background: #fffdf9; color: var(--qe-blue); box-shadow: 0 4px 0 var(--qe-ledge), 0 10px 20px #0a56a720; transition: transform 220ms var(--qe-spring); }
.qe-upload-icon svg { width: 31px; height: 31px; }
.qe-dropzone:hover .qe-upload-icon, .qe-dropzone:focus-within .qe-upload-icon { transform: translateY(-4px) scale(1.04); }
.qe-upload-copy { display: grid; gap: 2px; }
.qe-upload-copy span { color: var(--qe-muted); font-size: 13px; }
.qe-file-button { cursor: pointer; }
.qe-resource-status { padding: 13px 16px; border: 1px solid #d8e1dc; border-radius: 14px; background: #f7f4ed; color: var(--qe-muted); font-size: 13px; }
.qe-file-ready { border-style: solid; border-color: #7ab89f; background: var(--qe-sage); }
.qe-file-ready .qe-upload-icon { color: var(--qe-green); animation: qe-check-pop 500ms var(--qe-spring); }
.qe-file-loading { border-style: solid; border-color: #87add4; background: var(--qe-blue-soft); }
.qe-file-loading .qe-upload-icon { color: var(--qe-blue); }
.qe-file-loading .qe-upload-icon svg { animation: qe-upload-spin 900ms linear infinite; }
.qe-file-error { border-style: solid; border-color: #d99aa4; background: #fff0f1; }
.qe-file-error .qe-upload-icon { color: var(--qe-danger); animation: qe-shake 420ms ease; }
.qe-file-error + .qe-resource-status { border-color: #e1adb5; background: #fff7f7; color: var(--qe-danger); font-weight: 600; }
.qe-file-ready + .qe-resource-status { border-color: #9bc8b5; background: #f0faf5; color: #07593f; font-weight: 600; }
@keyframes qe-upload-spin { to { transform: rotate(360deg); } }
.qe-create-details { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px; border: 1px solid #e2d8c8; border-radius: 20px; background: #f8f2e9; }
.qe-create-details > .qe-field:first-child { grid-column: 1 / -1; }
.qe-field-help { color: var(--qe-muted); font-size: 11px; font-weight: 500; }
.qe-picker-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 12px 15px; border: 1px solid #d2dce0; border-radius: 14px; background: var(--qe-paper); color: var(--qe-ink); font: 600 15px/1.4 'Plus Jakarta Sans', Inter, Arial, sans-serif; text-align: left; cursor: pointer; box-shadow: inset 0 2px 6px #0f172a0d; }
.qe-picker-trigger:focus-visible { outline: 3px solid var(--qe-blue); outline-offset: 3px; }
.qe-picker-chevron { color: var(--qe-blue); font-size: 25px; line-height: 1; transform: rotate(90deg); }
.qe-picker { width: min(680px, calc(100vw - 32px)); max-height: min(760px, calc(100dvh - 32px)); padding: 0; border: 0; border-radius: 24px; background: transparent; overflow: visible; }
.qe-picker::backdrop { background: #0c2135b8; backdrop-filter: blur(3px); animation: qe-backdrop-in 260ms ease; }
.qe-picker[open] { animation: qe-dialog-in 420ms var(--qe-spring); }
.qe-picker-panel { display: grid; gap: 18px; max-height: min(760px, calc(100dvh - 32px)); min-height: 0; padding: 24px; border: 1px solid #bbceda; border-radius: 24px; background: var(--qe-ground); box-shadow: 0 28px 90px #102c4a59; overflow: hidden; }
.qe-picker-searchable .qe-picker-panel { height: min(760px, calc(100dvh - 32px)); grid-template-rows: auto auto minmax(0, 1fr); }
.qe-picker-searchable.qe-picker-multiple .qe-picker-panel { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.qe-picker-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.qe-picker-head > div { display: grid; gap: 5px; }
.qe-picker-list { display: grid; align-content: start; gap: 9px; min-height: 0; padding: 3px 8px 6px 3px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; }
.qe-picker-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 2px; }
.qe-picker-footer .qe-button { min-width: 120px; }
.qe-picker-group { position: sticky; top: 0; z-index: 1; padding: 10px 8px 5px; background: var(--qe-ground); color: var(--qe-blue); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.qe-picker-option { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 10px; min-height: 60px; padding: 13px 15px; border: 1px solid #d6e0df; border-radius: 16px; background: #fffdf9; color: var(--qe-ink); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 3px 0 #dbe6e3; animation: qe-rise 360ms var(--qe-spring) both; }
.qe-picker-option:hover { border-color: #93b8d9; transform: translateY(-1px); }
.qe-picker-selected { border-color: var(--qe-blue); background: var(--qe-blue-soft); box-shadow: inset 0 0 0 1px var(--qe-blue), 0 3px 0 var(--qe-ledge); }
.qe-picker-mark { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #edf2ef; color: var(--qe-green); font-weight: 800; }
.qe-picker-selected .qe-picker-mark { background: var(--qe-sage); animation: qe-bump 450ms var(--qe-spring); }
.qe-picker-copy { display: grid; gap: 3px; }
.qe-picker-copy span { color: var(--qe-muted); font-size: 12px; line-height: 1.45; }
.qe-remove-choice { color: var(--qe-danger); border: 1px solid #efc3c9; background: #fff7f7; box-shadow: 0 3px 0 #efd7d7; }
.qe-remove-choice:hover { background: #fff0f1; box-shadow: 0 3px 0 #e7c2c7, 0 7px 14px #a3263618; }
.qe-remove-choice svg { width: 19px; height: 19px; }
.qe-templates summary { cursor: pointer; padding-block: 12px; }
.qe-upload [hidden] { display: none !important; }
@media (max-width: 700px) {
  .qe-player { padding: 18px; gap: 14px; }
  .qe-question-block { padding: 18px; }
  .qe-player-prompt { font-size: 18px !important; line-height: 1.55 !important; }
  .qe-player-choice { min-height: 50px; padding: 13px 15px; font-size: 15px; }
  .qe-create-steps { grid-template-columns: 1fr; }
  .qe-create-step { grid-template-columns: 32px 1fr; }
  .qe-create-details { grid-template-columns: 1fr; padding: 16px; }
  .qe-create-details > .qe-field:first-child { grid-column: auto; }
  .qe-dropzone { padding: 22px 16px; }
  .qe-picker { width: 100vw; max-width: none; max-height: 88dvh; margin: auto 0 0; border-radius: 24px 24px 0 0; }
  .qe-picker[open] { animation-name: qe-sheet-in; }
  .qe-picker-panel { max-height: 88dvh; padding: 20px 16px max(20px, env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; }
  .qe-picker-searchable .qe-picker-panel { height: 88dvh; }
  .qe-picker-footer { position: relative; }
}
@keyframes qe-sheet-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---- Plus access code dialog ------------------------------------------- */
.qe-pass {
  width: min(564px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  overflow: visible;
}
.qe-pass::backdrop { background: #04101ed9; backdrop-filter: blur(3px); }
.qe-pass[open] { animation: qe-dialog-in 420ms var(--qe-spring); }
.qe-pass[open]::backdrop { animation: qe-backdrop-in 260ms ease; }

.qe-pass-panel {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 26px 28px 24px;
  border: 1px solid #2f5f96;
  border-radius: 20px;
  background: linear-gradient(160deg, #0f365f, #061729);
  box-shadow: 0 30px 80px #02080fbf, inset 0 1px 0 #ffffff1f;
  color: #e9f1fa;
  overflow: hidden;
}
/* Faint scan grid, matching the subscription page's hero. */
.qe-pass-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#ffffff0a 1px, transparent 1px), linear-gradient(90deg, #ffffff0a 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000, transparent 72%);
  pointer-events: none;
}
.qe-pass-panel > * { position: relative; }

.qe-pass-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qe-pass-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid #ffffff2e;
  border-radius: var(--qe-r-pill);
  background: #ffffff12;
  color: #b9d4f2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.qe-pass-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f0b429;
  box-shadow: 0 0 0 3px #f0b4292e;
  animation: qe-pass-pulse 2.4s ease-in-out infinite;
}
@keyframes qe-pass-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.qe-pass-close {
  min-height: 32px;
  padding: 6px 14px;
  border: 1px solid #ffffff2e;
  border-radius: var(--qe-r-pill);
  background: #ffffff0f;
  color: #cfe0f2;
  font: 800 12px/1 Inter, Arial, sans-serif;
  box-shadow: none;
  cursor: pointer;
}
.qe-pass-close:hover { background: #ffffff1f; color: #fff; transform: none; }

.qe-pass-title { margin: 0; font-size: 23px; font-weight: 800; letter-spacing: -.025em; color: #fff; }
.qe-pass-lede { margin: -6px 0 0; color: #a9c4e0; font-size: 14px; line-height: 1.55; }

/* ---- The readout ---- */
.qe-pass-stage { position: relative; margin-top: 4px; }
.qe-pass-readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 16px 12px;
  border: 1px solid #2c5c94;
  border-radius: 14px;
  background: radial-gradient(120% 140% at 50% 0%, #0d2d4f, #071d33);
  box-shadow: inset 0 2px 14px #020c17a6;
}
.qe-pass-prefix {
  color: #5fa8f0;
  font: 800 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .2em;
  opacity: .9;
}
.qe-pass-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.qe-pass-group { display: flex; gap: 4px; }
.qe-pass-cell {
  display: grid;
  place-items: center;
  width: 22px;
  height: 32px;
  border: 1px solid #2e5f97;
  border-radius: 6px;
  background: #0a2440;
  color: #eaf3ff;
  font: 700 16px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  transition: border-color 140ms var(--qe-ease), background 140ms var(--qe-ease), box-shadow 140ms var(--qe-ease);
}
.qe-pass-cell-filled { border-color: #4f9dff; background: #123a63; box-shadow: 0 0 12px #4f9dff33; }
.qe-pass-cell-active { border-color: #7cc0ff; box-shadow: 0 0 0 2px #7cc0ff3d, 0 0 16px #4f9dff4d; }
.qe-pass-cell-active::after {
  content: "";
  width: 11px;
  height: 2px;
  border-radius: 1px;
  background: #7cc0ff;
  animation: qe-pass-caret 1.05s steps(1) infinite;
}
@keyframes qe-pass-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* The real field sits over the readout, invisible but focusable and typable. */
.qe-pass-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px; /* keeps iOS from zooming the dialog on focus */
  cursor: text;
}
.qe-pass-field::selection { background: transparent; }
.qe-pass-field:focus { outline: none; }
.qe-pass-field:focus-visible + .qe-pass-readout, .qe-pass-stage:focus-within .qe-pass-readout { border-color: #4f9dff; }

.qe-pass-hint { margin: 0; color: #7fa0c2; font-size: 12px; letter-spacing: .02em; }
.qe-pass-note:empty { display: none; }
.qe-pass-note { margin: 0; font-size: 13px; font-weight: 600; color: #ffb4b4; }
.qe-pass-granted .qe-pass-note { color: #7ee2b8; }

.qe-pass-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; }
.qe-pass-submit { flex: 1 1 auto; }
.qe-pass-submit:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.qe-pass-help { color: #8fc2ff; font-size: 13px; font-weight: 700; text-decoration: none; border-bottom: 1px solid #8fc2ff59; }
.qe-pass-help:hover { color: #fff; border-bottom-color: #fff; }

/* ---- Feedback states ---- */
.qe-pass-working .qe-pass-readout { border-color: #7cc0ff; }
@keyframes qe-pass-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}
.qe-pass-denied { animation: qe-pass-shake 480ms var(--qe-ease); }
.qe-pass-denied .qe-pass-readout { border-color: #e0576b; box-shadow: inset 0 2px 14px #020c17a6, 0 0 0 3px #e0576b2e; }
.qe-pass-denied .qe-pass-cell { border-color: #a8455a; }
.qe-pass-granted .qe-pass-readout { border-color: #4fd6a0; box-shadow: inset 0 2px 14px #020c17a6, 0 0 0 3px #4fd6a02e; }
.qe-pass-granted .qe-pass-cell { border-color: #3fae85; background: #0f3d30; box-shadow: 0 0 12px #4fd6a033; }

.qe-plus-help { color: var(--qe-blue); font-weight: 700; }

@media (max-width: 460px) {
  .qe-pass-panel { padding: 22px 18px 20px; }
  .qe-pass-cell { width: 20px; height: 29px; font-size: 13px; }
  .qe-pass-prefix { font-size: 12px; letter-spacing: .16em; }
  .qe-pass-actions { flex-direction: column; align-items: stretch; }
  .qe-pass-help { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .qe-pass[open], .qe-pass-denied, .qe-pass-eyebrow::before, .qe-pass-cell-active::after { animation: none; }
  .qe-pass-cell { transition: none; }
}

/* ---- Highlighted route to the subscription page ------------------------ */
.qe-plus-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 9px 15px;
  border: 1px solid #b9d4f2;
  border-radius: var(--qe-r-pill);
  background: var(--qe-blue-soft);
  color: var(--qe-blue);
  font: 800 12.5px/1 Inter, Arial, sans-serif;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background 160ms var(--qe-ease), border-color 160ms var(--qe-ease), transform 160ms var(--qe-spring);
}
.qe-plus-link span { transition: transform 200ms var(--qe-ease); }
.qe-plus-link:hover { background: var(--qe-blue); border-color: var(--qe-blue); color: #fff; }
.qe-plus-link:hover span { transform: translateX(3px); }

/* ---- Admin: Plus access codes ------------------------------------------ */
.qe-codes { display: grid; gap: 12px; font: 400 14px/1.5 Inter, Arial, sans-serif; }
.qe-codes-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qe-codes-select { flex: 1 1 180px; min-width: 0; }
.qe-codes-count { width: 88px; flex: none; }
.qe-codes-status { margin: 0; min-height: 18px; color: var(--qe-muted); font-size: 13px; }
.qe-codes-status:empty { min-height: 0; }

.qe-codes-summary { display: flex; gap: 8px; }
.qe-codes-stat {
  flex: 1;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--qe-border);
  border-radius: 12px;
  background: var(--qe-paper);
}
.qe-codes-stat-value { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.qe-codes-stat-label { color: var(--qe-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.qe-codes-table { display: grid; gap: 6px; max-height: 340px; overflow-y: auto; }
.qe-codes-empty { margin: 0; padding: 14px; color: var(--qe-muted); font-size: 13px; text-align: center; }
.qe-codes-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--qe-border);
  border-radius: 12px;
  background: var(--qe-paper);
}
.qe-codes-redeemed { background: #f7fafd; }
.qe-codes-revoked { opacity: .55; }
.qe-codes-cell { display: grid; gap: 3px; min-width: 0; }
.qe-codes-right { justify-items: end; text-align: right; }
.qe-codes-code {
  font: 700 13px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}
.qe-codes-revoked .qe-codes-code { text-decoration: line-through; }
.qe-codes-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--qe-muted); font-size: 11px; }
.qe-codes-tier { font-weight: 800; color: var(--qe-blue); }
.qe-codes-badge {
  padding: 3px 9px;
  border-radius: var(--qe-r-pill);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.qe-codes-badge-available { background: var(--qe-blue-soft); color: var(--qe-blue); }
.qe-codes-badge-redeemed { background: #e3f6ee; color: var(--qe-green); }
.qe-codes-badge-revoked { background: #f3e6e8; color: var(--qe-danger); }
.qe-codes-note { color: var(--qe-muted); font-size: 11px; }
.qe-codes-uid { color: var(--qe-muted); font-size: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.qe-codes-revoke { color: var(--qe-danger); }

@media (prefers-reduced-motion: reduce) {
  .qe-plus-link, .qe-plus-link span { transition: none; }
  .qe-plus-link:hover { transform: none; }
  .qe-plus-link:hover span { transform: none; }
}