/* =========================================================================
   MCQ LIVE SOLVER - SESSION SCREEN
   =========================================================================
   Owns everything inside #session-panel (plus the resume modal, which is a
   sibling so it can render before the session exists).

   Rules:
   - Every selector is scoped to #session-panel / #mcq-resume-modal /
     body.mcq-in-session.  Nothing here may leak onto the setup or results
     panels, which are still styled by styles.css.
   - All colour comes from the --mcq-* tokens declared below.  A theme swap
     is the token block, never a duplicated rule.
   - Plain ASCII comments only (styles.css has mojibake from a cp1252
     round-trip; do not reintroduce it).
   - Never put !important on `display` - styles.css relies on
     [hidden]{display:none!important} to keep this panel hidden.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. TOKENS
   Dark is the bare default, so a missing attribute (JS off, script blocked)
   still renders the brand session look rather than an unstyled page.
   ------------------------------------------------------------------------- */
#session-panel,
#mcq-resume-modal,
#paper-view-panel,
[data-mcq-theme="dark"] #session-panel,
[data-mcq-theme="dark"] #mcq-resume-modal,
[data-mcq-theme="dark"] #paper-view-panel {
  /* geometry + motion - theme independent, declared once */
  --mcq-r: 14px;
  --mcq-r-lg: 22px;
  --mcq-ease: cubic-bezier(.22,.61,.36,1);

  /* canvas + chrome */
  --mcq-canvas: linear-gradient(165deg,#241338 0%,#2E1B4A 45%,#3A2358 100%);
  --mcq-bar: rgba(36,19,56,.94);
  --mcq-bar-border: rgba(232,145,58,.22);
  --mcq-bar-shadow: 0 2px 20px rgba(0,0,0,.45);
  --mcq-surface: #2A1743;
  --mcq-surface-2: rgba(255,255,255,.055);
  --mcq-surface-border: rgba(232,145,58,.20);

  /* text on canvas/chrome */
  --mcq-text: #F3EDE2;
  --mcq-text-muted: rgba(243,237,226,.64);
  --mcq-text-faint: rgba(243,237,226,.38);

  /* the question card - a LIGHT sheet of paper in both themes, because the
     question crops are black ink on white and must never be inverted */
  --mcq-paper: #EFE9DD;
  --mcq-paper-ink: #1A1A2E;
  --mcq-paper-muted: #5A5A72;
  --mcq-paper-border: rgba(232,145,58,.32);
  --mcq-paper-shadow: 0 24px 60px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.30);

  /* accent */
  --mcq-accent: #E8913A;
  --mcq-accent-text: #E8913A;
  --mcq-accent-ink: #2E1B4A;
  --mcq-accent-soft: rgba(232,145,58,.16);
  --mcq-accent-border: rgba(232,145,58,.42);
  --mcq-accent-glow: rgba(232,145,58,.32);

  /* answer tiles */
  --mcq-tile-bg: rgba(255,255,255,.055);
  --mcq-tile-border: rgba(232,222,200,.16);
  --mcq-tile-text: #F3EDE2;
  --mcq-tile-hover-bg: rgba(232,145,58,.13);
  --mcq-tile-hover-border: rgba(232,145,58,.50);
  --mcq-tile-hover-shadow: 0 10px 26px rgba(0,0,0,.40);
  --mcq-letter-bg: rgba(232,145,58,.13);
  --mcq-letter-border: rgba(232,145,58,.34);
  --mcq-letter-text: #E8913A;
  --mcq-kbd-bg: rgba(255,255,255,.07);
  --mcq-kbd-text: rgba(243,237,226,.42);

  /* Verdict states. On a deep purple canvas a low-alpha pastil tint goes muddy
     grey, so dark mode leans on a SOLID pastel border + a solid letter disc
     (-solid / -on) rather than on the background tint to carry the signal. */
  --mcq-correct-bg: rgba(169,224,195,.22);
  --mcq-correct-ink: #C6EFD8;
  --mcq-correct-border: #A9E0C3;
  --mcq-correct-solid: #A9E0C3;
  --mcq-correct-on: #0F5136;
  --mcq-correct-glow: rgba(169,224,195,.30);
  --mcq-wrong-bg: rgba(243,189,211,.22);
  --mcq-wrong-ink: #FAD2E1;
  --mcq-wrong-border: #F3BDD3;
  --mcq-wrong-solid: #F3BDD3;
  --mcq-wrong-on: #7A1F49;
  --mcq-wrong-glow: rgba(243,189,211,.30);
  --mcq-chosen-bg: rgba(201,189,240,.22);
  --mcq-chosen-ink: #DCD5F7;
  --mcq-chosen-border: #C9BDF0;
  --mcq-chosen-solid: #C9BDF0;
  --mcq-chosen-on: #38206E;
  --mcq-chosen-glow: rgba(201,189,240,.30);
  --mcq-skipped-bg: rgba(240,224,168,.20);
  --mcq-skipped-ink: #F5E9BE;
  --mcq-skipped-border: #F0E0A8;
  --mcq-dot-bg: rgba(255,255,255,.07);
  --mcq-dot-ink: rgba(243,237,226,.50);

  /* ring + progress */
  --mcq-ring-track: rgba(255,255,255,.13);
  --mcq-ring-fill: #E8913A;
  --mcq-ring-warn: #E8913A;
  --mcq-ring-danger: #F3BDD3;
  --mcq-progress-track: rgba(255,255,255,.08);
  --mcq-progress-fill: linear-gradient(90deg,#E8913A,#F2B366);

  /* overlays + misc */
  --mcq-scrim: rgba(20,10,34,.80);
  --mcq-focus: #E8913A;
  --mcq-danger-bg: rgba(243,189,211,.18);
  --mcq-danger-ink: #F3BDD3;
  --mcq-flag-bg: rgba(232,145,58,.20);
  --mcq-flag-ink: #E8913A;
}

[data-mcq-theme="light"] #session-panel,
[data-mcq-theme="light"] #mcq-resume-modal,
[data-mcq-theme="light"] #paper-view-panel {
  --mcq-canvas: linear-gradient(165deg,#FDF9F3 0%,#F7F0E4 100%);
  --mcq-bar: rgba(255,255,255,.94);
  --mcq-bar-border: #E8DFCE;
  --mcq-bar-shadow: 0 2px 14px rgba(46,27,74,.08);
  --mcq-surface: #FFFFFF;
  --mcq-surface-2: #F7F0E4;
  --mcq-surface-border: #E8DFCE;

  --mcq-text: #1A1A2E;
  --mcq-text-muted: #5A5A72;
  --mcq-text-faint: #8A8AA0;

  --mcq-paper: #FFFFFF;
  --mcq-paper-ink: #1A1A2E;
  --mcq-paper-muted: #5A5A72;
  --mcq-paper-border: #E8DFCE;
  --mcq-paper-shadow: 0 10px 30px rgba(46,27,74,.08);

  /* gold as TEXT on cream is only 2.1:1 - darken it, keep #E8913A for fills */
  --mcq-accent-text: #A8551A;
  --mcq-accent-soft: rgba(232,145,58,.18);
  --mcq-accent-border: rgba(232,145,58,.55);
  --mcq-accent-glow: rgba(232,145,58,.28);

  --mcq-tile-bg: #FFFFFF;
  --mcq-tile-border: #E8DFCE;
  --mcq-tile-text: #2E1B4A;
  --mcq-tile-hover-bg: #FFF6EC;
  --mcq-tile-hover-border: #E8913A;
  --mcq-tile-hover-shadow: 0 8px 20px rgba(232,145,58,.22);
  --mcq-letter-bg: #FBE2CC;
  --mcq-letter-border: #F2C69E;
  --mcq-letter-text: #B0541C;
  --mcq-kbd-bg: #F7F0E4;
  --mcq-kbd-text: #5A5A72;

  /* light uses the site's pastel triples exactly as every other page does */
  --mcq-correct-bg: #D4F0E0;
  --mcq-correct-ink: #16704A;
  --mcq-correct-border: #16704A;
  --mcq-correct-solid: #16704A;
  --mcq-correct-on: #FFFFFF;
  --mcq-correct-glow: rgba(22,112,74,.22);
  --mcq-wrong-bg: #FBDCE8;
  --mcq-wrong-ink: #B0326E;
  --mcq-wrong-border: #B0326E;
  --mcq-wrong-solid: #B0326E;
  --mcq-wrong-on: #FFFFFF;
  --mcq-wrong-glow: rgba(176,50,110,.22);
  --mcq-chosen-bg: #E4DEF9;
  --mcq-chosen-ink: #4A2E8F;
  --mcq-chosen-border: #4A2E8F;
  --mcq-chosen-solid: #4A2E8F;
  --mcq-chosen-on: #FFFFFF;
  --mcq-chosen-glow: rgba(74,46,143,.22);
  --mcq-skipped-bg: #FBF2D2;
  --mcq-skipped-ink: #866312;
  --mcq-skipped-border: #F0E0A8;
  --mcq-dot-bg: #F7F0E4;
  --mcq-dot-ink: #8A8AA0;

  /* gold on white is 2.1:1, under the 3:1 non-text floor - use purple */
  --mcq-ring-track: #E8DFCE;
  --mcq-ring-fill: #6B3FA0;
  --mcq-ring-warn: #B0541C;
  --mcq-ring-danger: #B0326E;
  --mcq-progress-track: #E8DFCE;
  --mcq-progress-fill: linear-gradient(90deg,#6B3FA0,#4C2E72);

  --mcq-scrim: rgba(46,27,74,.45);
  --mcq-focus: #6B3FA0;
  --mcq-danger-bg: #FBDCE8;
  --mcq-danger-ink: #B0326E;
  --mcq-flag-bg: #FBE2CC;
  --mcq-flag-ink: #B0541C;
}


/* -------------------------------------------------------------------------
   2. PANEL SHELL
   ------------------------------------------------------------------------- */
#session-panel {
  display: flex; flex-direction: column; min-height: 100vh;
  background: var(--mcq-canvas);
  color: var(--mcq-text);
}

/* The site header is sticky at z-index 50 and would sit on top of the
   session bar (z 20), and its cream band breaks the full-screen feel. */
body.mcq-in-session .site-header { display: none !important; }
body.mcq-in-session .fb-tab { display: none !important; }
body.mcq-in-session #tour-fab { display: none !important; }
body.mcq-in-session .pwt-chatbot-fab { display: none !important; }
body.mcq-in-session .pwt-chatbot-panel { display: none !important; }
body.mcq-in-session [id*="bp-web-widget"],
body.mcq-in-session [id^="botpress-webchat"],
body.mcq-in-session [class*="bpw-floating"] { display: none !important; }

#session-panel :focus-visible {
  outline: 2px solid var(--mcq-focus); outline-offset: 2px; border-radius: 8px;
}


/* -------------------------------------------------------------------------
   3. SESSION BAR
   ------------------------------------------------------------------------- */
#session-panel .mcq-session-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 12px 22px; min-height: 68px;
  background: var(--mcq-bar);
  border-bottom: 1px solid var(--mcq-bar-border);
  box-shadow: var(--mcq-bar-shadow);
  position: sticky; top: 0; z-index: 20;
}
#session-panel .mcq-bar-left,
#session-panel .mcq-bar-right { display: flex; align-items: center; gap: 10px; }
#session-panel .mcq-bar-center { display: flex; align-items: center; gap: 12px; }

#session-panel .mcq-bar-btn {
  background: var(--mcq-surface-2);
  border: 1px solid var(--mcq-surface-border);
  color: var(--mcq-text-muted);
  border-radius: 11px; padding: 8px 13px; line-height: 1;
  cursor: pointer; font-size: 1.05rem;
  transition: background .18s, border-color .18s, color .18s, transform .15s;
}
#session-panel .mcq-bar-btn:hover {
  background: var(--mcq-accent-soft); border-color: var(--mcq-accent-border);
  color: var(--mcq-accent-text); transform: translateY(-1px);
}
#session-panel .mcq-quit-btn:hover {
  background: var(--mcq-danger-bg); border-color: var(--mcq-wrong-border);
  color: var(--mcq-danger-ink);
}

#session-panel .mcq-session-subject-label {
  font-family: "Archivo", sans-serif; font-size: .82rem;
  letter-spacing: .04em; color: var(--mcq-text-faint);
}

#session-panel .mcq-q-counter {
  font-family: "Archivo", sans-serif; font-size: 1.1rem; font-weight: 800;
  color: var(--mcq-text); letter-spacing: .03em; white-space: nowrap;
}

/* Streak badge - hidden by JS below 2 */
#session-panel .mcq-streak {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--mcq-accent-soft); border: 1px solid var(--mcq-accent-border);
  color: var(--mcq-accent-text);
  border-radius: 999px; padding: 4px 12px;
  font-family: "Archivo", sans-serif; font-size: .78rem; font-weight: 800;
  letter-spacing: .04em; white-space: nowrap;
}
#session-panel .mcq-streak-n { font-size: .92rem; }
#session-panel .mcq-streak-lbl { font-weight: 600; opacity: .75; text-transform: lowercase; }
#session-panel .mcq-streak.is-hot {
  background: var(--mcq-accent); border-color: var(--mcq-accent);
  color: var(--mcq-accent-ink);
  box-shadow: 0 2px 14px var(--mcq-accent-glow);
}
#session-panel .mcq-streak.is-pop { animation: mcq-streak-pop .34s var(--mcq-ease); }
@keyframes mcq-streak-pop {
  0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); }
}

#session-panel .mcq-overall-timer {
  font-family: "Archivo", sans-serif; font-size: 1.05rem; font-weight: 700;
  color: var(--mcq-accent-text); letter-spacing: .06em; white-space: nowrap;
}
#session-panel .mcq-score-live {
  font-family: "Archivo", sans-serif; font-size: .85rem; font-weight: 700;
  color: var(--mcq-text); background: var(--mcq-surface-2);
  border: 1px solid var(--mcq-surface-border);
  border-radius: 10px; padding: 6px 14px; white-space: nowrap;
}

/* Exam countdown (full-paper mode) */
#session-panel .mcq-paper-time {
  font-family: "Archivo", sans-serif; font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; white-space: nowrap;
  color: var(--mcq-text-muted);
  padding: 5px 11px; border-radius: 9px;
  border: 1px solid var(--mcq-surface-border);
  background: var(--mcq-surface-2);
  transition: color .2s, border-color .2s, background .2s;
}
#session-panel .mcq-paper-time.is-warn {
  color: var(--mcq-accent-text); border-color: var(--mcq-accent-border);
  background: var(--mcq-accent-soft);
}
#session-panel .mcq-paper-time.is-danger {
  color: var(--mcq-wrong-ink); border-color: var(--mcq-wrong-border);
  background: var(--mcq-wrong-bg);
}

/* Flag button */
#session-panel .mcq-flag-btn.is-flagged {
  background: var(--mcq-flag-bg); border-color: var(--mcq-accent-border);
  color: var(--mcq-flag-ink);
}

/* Theme toggle - CSS decides which icon shows */
#session-panel .mcq-theme-ico-light { display: none; }
[data-mcq-theme="light"] #session-panel .mcq-theme-ico-light { display: inline; }
[data-mcq-theme="light"] #session-panel .mcq-theme-ico-dark { display: none; }


/* -------------------------------------------------------------------------
   4. PROGRESS BAR
   ------------------------------------------------------------------------- */
#session-panel .mcq-progress-wrap {
  height: 3px; background: var(--mcq-progress-track); overflow: hidden;
}
#session-panel .mcq-progress-fill {
  height: 100%; width: 0; background: var(--mcq-progress-fill);
  transition: width .4s var(--mcq-ease);
}


/* -------------------------------------------------------------------------
   5. RING TIMER
   ------------------------------------------------------------------------- */
#session-panel .mcq-ring-wrap { position: relative; width: 50px; height: 50px; flex: none; }
#session-panel .mcq-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
#session-panel .mcq-ring-track { fill: none; stroke: var(--mcq-ring-track); stroke-width: 8; }
#session-panel .mcq-ring-fill {
  fill: none; stroke: var(--mcq-ring-fill); stroke-width: 8; stroke-linecap: round;
  transition: stroke-dashoffset .5s linear, stroke .3s ease;
}
#session-panel .mcq-ring-wrap.is-warn .mcq-ring-fill { stroke: var(--mcq-ring-warn); }
#session-panel .mcq-ring-wrap.is-danger .mcq-ring-fill { stroke: var(--mcq-ring-danger); }
#session-panel .mcq-ring-wrap.is-danger { animation: mcq-ring-pulse .9s ease-in-out infinite; }
@keyframes mcq-ring-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
#session-panel .mcq-ring-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Archivo", sans-serif; font-size: .72rem; font-weight: 800;
  color: var(--mcq-text);
}


/* -------------------------------------------------------------------------
   6. QUESTION AREA
   ------------------------------------------------------------------------- */
#session-panel .mcq-question-wrap {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 18px; width: 100%; max-width: 820px; margin: 0 auto;
  padding: 26px 22px 48px;
}

/* The card is a light sheet in BOTH themes. Never invert the crop - these
   images contain circuit diagrams and shaded graphs that invert to garbage. */
#session-panel .mcq-question-card {
  width: 100%;
  background: var(--mcq-paper);
  color: var(--mcq-paper-ink);
  border: 1px solid var(--mcq-paper-border);
  border-radius: var(--mcq-r-lg);
  box-shadow: var(--mcq-paper-shadow);
  padding: 22px 26px;
}
#session-panel .mcq-card-enter { animation: mcq-card-in .38s var(--mcq-ease) both; }
@keyframes mcq-card-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* These four sit ON the paper, so they take paper ink, not canvas text. */
#session-panel .mcq-q-ref {
  font-family: "Archivo", sans-serif; font-size: .74rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--mcq-paper-muted); margin-bottom: 8px;
}
#session-panel .mcq-q-topic-badge {
  display: inline-block; margin-bottom: 14px;
  background: var(--mcq-chosen-bg); border: 1px solid var(--mcq-chosen-border);
  color: var(--mcq-chosen-ink);
  border-radius: 999px; padding: 4px 14px; font-size: .78rem; font-weight: 600;
}
/* the chosen-bg token is a translucent tint in dark mode, which would let the
   cream paper show through wrong - pin the chip to the light triple here */
[data-mcq-theme="dark"] #session-panel .mcq-q-topic-badge {
  background: #E4DEF9; border-color: #C9BDF0; color: #4A2E8F;
}

#session-panel .mcq-q-img-wrap {
  min-height: 120px; display: flex; align-items: center; justify-content: center;
  position: relative;
}
/* multiply dissolves the PNG's own white rectangle into the paper colour, so
   there is no white-on-cream seam. On a pure white card it is a no-op. */
#session-panel .mcq-q-img,
#session-panel .mcq-feedback-ms-img { mix-blend-mode: multiply; }
#session-panel .mcq-q-img {
  max-width: 100%; max-height: 440px; object-fit: contain; border-radius: 8px;
}
#session-panel .mcq-q-spinner {
  color: var(--mcq-paper-muted); font-size: .9rem;
  animation: mcq-fade-pulse 1.5s ease-in-out infinite;
}
@keyframes mcq-fade-pulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
#session-panel .mcq-q-img-error { text-align: center; color: var(--mcq-paper-muted); }
#session-panel .mcq-q-img-error span { display: block; font-size: 1.35rem; margin-bottom: 8px; }
#session-panel .mcq-q-text-fallback {
  font-size: .88rem; color: var(--mcq-paper-muted); max-width: 480px;
  text-align: center; line-height: 1.55;
}

/* Card-view annotation canvas */
#session-panel .mcq-q-img-wrap { position: relative; }
#session-panel .mcq-annot-canvas {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none; cursor: default;
}
#session-panel .mcq-annot-canvas.pv-drawing { pointer-events: auto; cursor: crosshair; }
#session-panel .mcq-annot-canvas.pv-erasing { pointer-events: auto; cursor: cell; }

/* Card-view annotation bar */
#session-panel .mcq-annot-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 10px; margin-top: 8px;
  background: var(--mcq-bar); border-radius: var(--mcq-r);
  border: 1px solid var(--mcq-surface-border);
}


/* -------------------------------------------------------------------------
   7. ANSWER TILES
   The options A-D live inside the question crop, so these are letter-only
   tiles. Four across reads like an answer sheet; a 2x2 grid of empty pills
   does not.
   ------------------------------------------------------------------------- */
#session-panel .mcq-answers {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; width: 100%;
}
#session-panel .mcq-ans-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; padding: 18px 12px;
  background: var(--mcq-tile-bg);
  border: 1.5px solid var(--mcq-tile-border);
  border-radius: var(--mcq-r-lg);
  color: var(--mcq-tile-text); cursor: pointer;
  transition: background .2s var(--mcq-ease), border-color .2s var(--mcq-ease),
              transform .2s var(--mcq-ease), box-shadow .2s var(--mcq-ease);
}
#session-panel .mcq-ans-btn:hover:not(:disabled) {
  background: var(--mcq-tile-hover-bg);
  border-color: var(--mcq-tile-hover-border);
  transform: translateY(-3px);
  box-shadow: var(--mcq-tile-hover-shadow);
}
#session-panel .mcq-ans-btn:active:not(:disabled) {
  transform: translateY(0) scale(.97); transition-duration: .08s;
}
#session-panel .mcq-ans-btn:disabled { cursor: default; }

#session-panel .mcq-ans-letter {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--mcq-letter-bg); border: 1.5px solid var(--mcq-letter-border);
  color: var(--mcq-letter-text);
  font-family: "Archivo", sans-serif; font-size: 1.3rem; font-weight: 900;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
#session-panel .mcq-ans-btn:hover:not(:disabled) .mcq-ans-letter { transform: scale(1.06); }

#session-panel .mcq-ans-kbd {
  font-family: "Archivo", sans-serif; font-size: .62rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--mcq-kbd-bg); color: var(--mcq-kbd-text);
  border-radius: 5px; padding: 2px 8px;
}
#session-panel .mcq-ans-kbd::before { content: "press "; opacity: .7; }

/* Verdict states. JS resets className to "mcq-ans-btn" on every load, so
   these must be self-contained - no reliance on a persistent extra class. */
#session-panel .mcq-ans-btn.mcq-ans-correct {
  background: var(--mcq-correct-bg); border-color: var(--mcq-correct-border);
  box-shadow: 0 0 0 1px var(--mcq-correct-border), 0 6px 22px var(--mcq-correct-glow);
  animation: mcq-correct-pop .4s var(--mcq-ease);
}
/* Solid disc, not a tint — this is what reads at a glance on a dark canvas. */
#session-panel .mcq-ans-btn.mcq-ans-correct .mcq-ans-letter {
  background: var(--mcq-correct-solid); border-color: var(--mcq-correct-solid);
  color: var(--mcq-correct-on);
  box-shadow: 0 0 16px var(--mcq-correct-glow);
}
#session-panel .mcq-ans-btn.mcq-ans-correct .mcq-ans-kbd {
  background: transparent; color: var(--mcq-correct-ink);
}
@keyframes mcq-correct-pop {
  0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); }
}

#session-panel .mcq-ans-btn.mcq-ans-wrong {
  background: var(--mcq-wrong-bg); border-color: var(--mcq-wrong-border);
  box-shadow: 0 0 0 1px var(--mcq-wrong-border), 0 6px 22px var(--mcq-wrong-glow);
  animation: mcq-wrong-shake .4s ease;
}
#session-panel .mcq-ans-btn.mcq-ans-wrong .mcq-ans-letter {
  background: var(--mcq-wrong-solid); border-color: var(--mcq-wrong-solid);
  color: var(--mcq-wrong-on);
  box-shadow: 0 0 16px var(--mcq-wrong-glow);
}
#session-panel .mcq-ans-btn.mcq-ans-wrong .mcq-ans-kbd {
  background: transparent; color: var(--mcq-wrong-ink);
}
@keyframes mcq-wrong-shake {
  0%,100% { transform: translateX(0); } 15% { transform: translateX(-4px); }
  30% { transform: translateX(4px); } 45% { transform: translateX(-3px); }
  60% { transform: translateX(3px); } 75% { transform: translateX(-1px); }
}

#session-panel .mcq-ans-btn.mcq-ans-selected {
  background: var(--mcq-chosen-bg); border-color: var(--mcq-chosen-border);
  box-shadow: 0 0 0 1px var(--mcq-chosen-border), 0 6px 22px var(--mcq-chosen-glow);
}
#session-panel .mcq-ans-btn.mcq-ans-selected .mcq-ans-letter {
  background: var(--mcq-chosen-solid); border-color: var(--mcq-chosen-solid);
  color: var(--mcq-chosen-on);
  box-shadow: 0 0 16px var(--mcq-chosen-glow);
}

#session-panel .mcq-session-footer { display: flex; justify-content: center; width: 100%; }


/* -------------------------------------------------------------------------
   8. SESSION BUTTONS
   Deliberately NOT .btn/.btn-outline/.btn-dark - those are light-theme
   components whose hover states forced four !important overrides here.
   ------------------------------------------------------------------------- */
#session-panel .mcqb,
#mcq-resume-modal .mcqb {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1.5px solid transparent; border-radius: 999px;
  padding: 10px 22px; cursor: pointer;
  font: 700 .9rem "Hanken Grotesk", system-ui, sans-serif;
  transition: background .18s, border-color .18s, color .18s,
              transform .15s, box-shadow .2s;
}
#session-panel .mcqb:active,
#mcq-resume-modal .mcqb:active { transform: scale(.97); }
#session-panel .mcqb:disabled,
#mcq-resume-modal .mcqb:disabled { opacity: .55; cursor: default; transform: none; }

#session-panel .mcqb-primary,
#mcq-resume-modal .mcqb-primary {
  background: var(--mcq-accent); border-color: var(--mcq-accent);
  color: var(--mcq-accent-ink);
  box-shadow: 0 4px 16px var(--mcq-accent-glow);
}
#session-panel .mcqb-primary:hover:not(:disabled),
#mcq-resume-modal .mcqb-primary:hover:not(:disabled) {
  transform: translateY(-2px); box-shadow: 0 8px 24px var(--mcq-accent-glow);
}

#session-panel .mcqb-ghost,
#mcq-resume-modal .mcqb-ghost {
  background: transparent; border-color: var(--mcq-surface-border);
  color: var(--mcq-text-muted);
}
#session-panel .mcqb-ghost:hover:not(:disabled),
#mcq-resume-modal .mcqb-ghost:hover:not(:disabled) {
  background: var(--mcq-accent-soft); border-color: var(--mcq-accent-border);
  color: var(--mcq-accent-text);
}

#session-panel .mcq-skip-btn { min-width: 150px; }
#session-panel .mcq-next-btn { min-width: 180px; }


/* -------------------------------------------------------------------------
   9. INLINE FEEDBACK
   ------------------------------------------------------------------------- */
#session-panel .mcq-inline-feedback {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 15px 20px; border-radius: var(--mcq-r-lg);
  border: 1.5px solid transparent; font-size: .95rem;
  animation: mcq-fb-in .3s var(--mcq-ease);
}
@keyframes mcq-fb-in {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to { opacity: 1; transform: none; }
}
#session-panel .mcq-inline-feedback.mcq-fb-correct {
  background: var(--mcq-correct-bg); border-color: var(--mcq-correct-border);
  color: var(--mcq-correct-ink);
}
#session-panel .mcq-inline-feedback.mcq-fb-wrong {
  background: var(--mcq-wrong-bg); border-color: var(--mcq-wrong-border);
  color: var(--mcq-wrong-ink);
}
#session-panel .mcq-fb-icon {
  font-size: 1.45rem; line-height: 1; flex-shrink: 0;
  animation: mcq-icon-pop .35s var(--mcq-ease);
}
@keyframes mcq-icon-pop {
  0% { transform: scale(0) rotate(-20deg); opacity: 0; }
  60% { transform: scale(1.3) rotate(5deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
#session-panel .mcq-fb-body { flex: 1; min-width: 0; }
#session-panel .mcq-fb-result {
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.02rem;
}
#session-panel .mcq-fb-letters { font-size: .85rem; margin-top: 2px; opacity: .9; }
#session-panel .mcq-fb-action { flex-shrink: 0; font-size: .82rem; padding: 8px 16px; }

/* Scoped so the results table's own .mcq-letter-* rules are untouched. */
#session-panel .mcq-letter-correct { color: var(--mcq-correct-ink); font-weight: 900; }
#session-panel .mcq-letter-wrong { color: var(--mcq-wrong-ink); font-weight: 900; }


/* -------------------------------------------------------------------------
   10. AI EXPLANATION PANEL
   ------------------------------------------------------------------------- */
#session-panel .mcq-explanation-panel {
  width: 100%; overflow: hidden;
  background: var(--mcq-surface); border: 1px solid var(--mcq-surface-border);
  border-radius: var(--mcq-r-lg);
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
  animation: mcq-explain-in .35s var(--mcq-ease);
}
@keyframes mcq-explain-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
#session-panel .mcq-explanation-header {
  display: flex; align-items: center; gap: 10px; padding: 13px 18px;
  border-bottom: 1px solid var(--mcq-surface-border);
  background: var(--mcq-accent-soft);
}
#session-panel .mcq-explanation-icon { font-size: 1.15rem; }
#session-panel .mcq-explanation-title {
  flex: 1; font-family: "Archivo", sans-serif; font-size: .84rem; font-weight: 800;
  letter-spacing: .05em; color: var(--mcq-accent-text);
}
#session-panel .mcq-explanation-close {
  background: none; border: none; cursor: pointer;
  color: var(--mcq-text-faint); font-size: 1.3rem; line-height: 1;
  padding: 3px 8px; border-radius: 6px; transition: background .15s, color .15s;
}
#session-panel .mcq-explanation-close:hover {
  background: var(--mcq-surface-2); color: var(--mcq-text);
}
#session-panel .mcq-explanation-body { padding: 17px 20px; }
#session-panel .mcq-explanation-content {
  font-size: .92rem; line-height: 1.65; color: var(--mcq-text);
}
#session-panel .mcq-explanation-content p { margin: 0 0 10px; }
#session-panel .mcq-explanation-content p:last-child { margin-bottom: 0; }
#session-panel .mcq-explanation-content strong { color: var(--mcq-accent-text); }
#session-panel .mcq-explanation-content h3 {
  font-family: "Archivo", sans-serif; font-size: .86rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--mcq-accent-text); margin: 16px 0 8px;
  padding-bottom: 5px; border-bottom: 1px solid var(--mcq-surface-border);
}
#session-panel .mcq-explanation-content h3:first-child { margin-top: 0; }
/* Numbered working steps — the explanation is meant to read like a worked
   solution, so give the list real structure instead of runs of <p>. */
#session-panel .mcq-explanation-content ol,
#session-panel .mcq-explanation-content ul {
  margin: 0 0 12px; padding-left: 0; list-style: none; counter-reset: mcq-step;
}
#session-panel .mcq-explanation-content ol > li {
  position: relative; counter-increment: mcq-step;
  padding: 0 0 10px 34px; margin-bottom: 10px;
  border-bottom: 1px dashed var(--mcq-surface-border);
}
#session-panel .mcq-explanation-content ol > li:last-child {
  border-bottom: 0; margin-bottom: 0; padding-bottom: 0;
}
#session-panel .mcq-explanation-content ol > li::before {
  content: counter(mcq-step);
  position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--mcq-accent-soft); border: 1px solid var(--mcq-accent-border);
  color: var(--mcq-accent-text);
  font-family: "Archivo", sans-serif; font-size: .74rem; font-weight: 800;
}
#session-panel .mcq-explanation-content ul > li {
  position: relative; padding-left: 18px; margin-bottom: 6px;
}
#session-panel .mcq-explanation-content ul > li::before {
  content: "•"; position: absolute; left: 4px; color: var(--mcq-accent-text);
}
/* Inline working / equations the model emits as <code> */
#session-panel .mcq-explanation-content code {
  background: var(--mcq-surface-2); border: 1px solid var(--mcq-surface-border);
  border-radius: 5px; padding: 1px 6px;
  font-family: "Archivo", ui-monospace, monospace; font-size: .9em;
  color: var(--mcq-text);
}
#session-panel .mcq-explain-err { color: var(--mcq-text-muted); margin: 0; }

/* Auto-loaded explanations open without a click, so the panel needs to say
   why it appeared. */
#session-panel .mcq-explanation-auto {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--mcq-wrong-bg); color: var(--mcq-wrong-ink);
  border: 1px solid var(--mcq-wrong-border);
  border-radius: 999px; padding: 2px 9px;
}

#session-panel .mcq-explanation-loading { display: flex; flex-direction: column; gap: 10px; }
#session-panel .mcq-shimmer-line {
  height: 14px; border-radius: 7px; background-size: 200% 100%;
  background-image: linear-gradient(90deg,
    var(--mcq-surface-2) 25%, var(--mcq-accent-soft) 50%, var(--mcq-surface-2) 75%);
  animation: mcq-shimmer 1.5s ease-in-out infinite;
}
#session-panel .mcq-shimmer-line.short { width: 60%; }
@keyframes mcq-shimmer {
  0% { background-position: 200% 0; } 100% { background-position: -200% 0; }
}


/* -------------------------------------------------------------------------
   11. MARK-SCHEME OVERLAY (questions with no stored answer)
   ------------------------------------------------------------------------- */
#session-panel .mcq-feedback-overlay {
  position: fixed; inset: 0; z-index: 40; background: var(--mcq-scrim);
  display: flex; align-items: flex-end; justify-content: center;
}
#session-panel .mcq-feedback-card {
  width: 100%; max-width: 720px;
  background: var(--mcq-surface); border: 1px solid var(--mcq-surface-border);
  border-bottom: 0; border-radius: var(--mcq-r-lg) var(--mcq-r-lg) 0 0;
  padding: 26px 30px 30px;
  box-shadow: 0 -8px 40px rgba(0,0,0,.35);
  animation: mcq-slide-up .35s var(--mcq-ease);
}
@keyframes mcq-slide-up {
  from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; }
}
#session-panel .mcq-feedback-result {
  font-family: "Archivo", sans-serif; font-size: 1.4rem; font-weight: 900;
  margin-bottom: 8px;
}
#session-panel .mcq-result-correct { color: var(--mcq-correct-ink); }
#session-panel .mcq-result-wrong { color: var(--mcq-wrong-ink); }
#session-panel .mcq-result-nokey { color: var(--mcq-chosen-ink); }
#session-panel .mcq-feedback-letters {
  font-size: .98rem; color: var(--mcq-text-muted); margin-bottom: 18px;
}
/* The MS crop is also black-on-white, so its well is paper too. */
#session-panel .mcq-feedback-ms-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--mcq-paper); border: 1px solid var(--mcq-paper-border);
  border-radius: var(--mcq-r); padding: 16px; margin-bottom: 18px;
}
#session-panel .mcq-feedback-ms-label {
  font-family: "Archivo", sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--mcq-paper-muted); margin: 0;
}
#session-panel .mcq-feedback-ms-img {
  max-width: 100%; max-height: 280px; object-fit: contain; border-radius: 8px;
}
#session-panel .mcq-feedback-ms-wrap .mcq-q-spinner,
#session-panel .mcq-feedback-ms-wrap .mcq-q-img-error { color: var(--mcq-paper-muted); }
#session-panel .mcq-feedback-actions { display: flex; justify-content: center; }


/* -------------------------------------------------------------------------
   12. PAUSE OVERLAY
   ------------------------------------------------------------------------- */
#session-panel .mcq-pause-overlay {
  position: fixed; inset: 0; z-index: 50; background: var(--mcq-scrim);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  color: var(--mcq-text);
}
#session-panel .mcq-pause-box {
  text-align: center; animation: mcq-pause-breathe 3s ease-in-out infinite;
}
@keyframes mcq-pause-breathe {
  0%,100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.02); opacity: 1; }
}
#session-panel .mcq-pause-icon { font-size: 3.2rem; margin-bottom: 16px; }
#session-panel .mcq-pause-box h2 {
  font-family: "Archivo", sans-serif; font-size: 2.1rem; font-weight: 900;
  color: var(--mcq-text); margin-bottom: 8px;
}
#session-panel .mcq-pause-box p { color: var(--mcq-text-muted); margin-bottom: 22px; }

/* Pause progress readout */
#session-panel .mcq-pause-stats {
  display: grid; grid-template-columns: repeat(4, minmax(96px, 1fr));
  gap: 10px; margin-bottom: 24px;
}
#session-panel .mcq-pause-stat {
  background: var(--mcq-surface); border: 1px solid var(--mcq-surface-border);
  border-radius: var(--mcq-r); padding: 14px 12px;
}
#session-panel .mcq-pause-stat b {
  display: block; font-family: "Archivo", sans-serif;
  font-size: 1.35rem; font-weight: 900; line-height: 1.15; color: var(--mcq-text);
}
#session-panel .mcq-pause-stat span {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mcq-text-faint);
}
#session-panel .mcq-pause-stat.is-accent b { color: var(--mcq-accent-text); }
#session-panel .mcq-pause-stat.is-good b { color: var(--mcq-correct-ink); }

#session-panel .mcq-pause-bar {
  height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--mcq-progress-track); margin-bottom: 10px;
}
#session-panel .mcq-pause-bar i {
  display: block; height: 100%; width: 0;
  background: var(--mcq-progress-fill); transition: width .3s var(--mcq-ease);
}
#session-panel .mcq-pause-hint {
  font-size: .8rem; color: var(--mcq-text-faint); margin-bottom: 22px;
}
@media (max-width: 600px) {
  #session-panel .mcq-pause-stats { grid-template-columns: repeat(2, 1fr); }
  #session-panel .mcq-pause-box { padding: 0 14px; }
}


/* -------------------------------------------------------------------------
   13. QUESTION NAVIGATOR
   styles.css keeps the neutral .mcq-nd* rules because the RESULTS grid uses
   them too. Everything below is scoped so results is never touched.
   ------------------------------------------------------------------------- */
#session-panel .mcq-q-nav {
  position: fixed; bottom: 22px; left: 22px; z-index: 30;
  display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 10px;
}
#session-panel .mcq-nav-tab {
  display: flex; align-items: center; gap: 8px;
  background: var(--mcq-accent); color: var(--mcq-accent-ink);
  border-radius: var(--mcq-r); padding: 10px 17px;
  font-family: "Archivo", sans-serif; font-size: .85rem; font-weight: 800;
  cursor: pointer; user-select: none;
  box-shadow: 0 4px 20px var(--mcq-accent-glow);
  transition: transform .15s, box-shadow .15s;
}
#session-panel .mcq-nav-tab:hover,
#session-panel .mcq-nav-open .mcq-nav-tab {
  transform: translateY(-2px); box-shadow: 0 8px 28px var(--mcq-accent-glow);
}
#session-panel .mcq-nav-tab-icon { font-size: .95rem; opacity: .75; }

#session-panel .mcq-nav-panel {
  background: var(--mcq-surface); border: 1px solid var(--mcq-surface-border);
  border-radius: var(--mcq-r-lg); padding: 15px 17px;
  box-shadow: 0 12px 44px rgba(0,0,0,.35);
  max-width: min(330px, calc(100vw - 44px)); max-height: 55vh; overflow-y: auto;
}
/* A 2-column grid, not a wrapping text run: the old version let a chip and its
   label break across lines ("Now" orphaned under "Flagged"). Each item is now
   an atomic cell. */
#session-panel .mcq-nav-legend {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  font-size: .72rem; color: var(--mcq-text-muted);
  margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--mcq-surface-border);
}
#session-panel .mcq-lg {
  display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap;
}
/* Legend swatches are indicators, not buttons — smaller, and never hoverable. */
#session-panel .mcq-lg .mcq-nd {
  width: 20px; height: 20px; border-radius: 6px; font-size: .66rem;
  flex: none; cursor: default; font-style: normal;
}
#session-panel .mcq-lg .mcq-nd:hover { transform: none; box-shadow: none; }
#session-panel .mcq-lg .mcq-nd-flagged::after {
  width: 5px; height: 5px; top: 1px; right: 1px;
}
#session-panel .mcq-nav-dots { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }

/* Overrides only. #session-panel .mcq-nd-x is (1,1,0) vs the styles.css
   (0,1,0), so these win here regardless of file order and never elsewhere. */
#session-panel .mcq-nd {
  position: relative; border-radius: 8px; border-color: transparent;
  background: var(--mcq-dot-bg); color: var(--mcq-dot-ink);
}
#session-panel .mcq-nd-now {
  background: var(--mcq-accent); color: var(--mcq-accent-ink);
  border-color: var(--mcq-accent); box-shadow: 0 2px 10px var(--mcq-accent-glow);
}
#session-panel .mcq-nd-blank { background: var(--mcq-dot-bg); color: var(--mcq-dot-ink); }
#session-panel .mcq-nd-correct {
  background: var(--mcq-correct-bg); color: var(--mcq-correct-ink);
  border-color: var(--mcq-correct-border);
}
#session-panel .mcq-nd-wrong {
  background: var(--mcq-wrong-bg); color: var(--mcq-wrong-ink);
  border-color: var(--mcq-wrong-border);
}
#session-panel .mcq-nd-skipped {
  background: var(--mcq-skipped-bg); color: var(--mcq-skipped-ink);
  border-color: var(--mcq-skipped-border);
}
#session-panel .mcq-nd-nokey {
  background: var(--mcq-chosen-bg); color: var(--mcq-chosen-ink);
  border-color: var(--mcq-chosen-border);
}
/* flag marker - needs the position:relative added just above */
#session-panel .mcq-nd-flagged::after {
  content: ""; position: absolute; top: 2px; right: 2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mcq-accent);
  box-shadow: 0 0 0 1.5px var(--mcq-surface);
}


/* -------------------------------------------------------------------------
   14. RESUME MODAL (sibling of #session-panel, rendered on boot)
   ------------------------------------------------------------------------- */
#mcq-resume-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: var(--mcq-scrim);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#mcq-resume-modal .mcq-resume-box {
  width: 100%; max-width: 440px; text-align: center;
  background: var(--mcq-surface); color: var(--mcq-text);
  border: 1px solid var(--mcq-surface-border);
  border-radius: var(--mcq-r-lg); padding: 32px 30px 28px;
  box-shadow: 0 28px 80px rgba(0,0,0,.35);
  animation: mcq-card-in .3s var(--mcq-ease) both;
}
#mcq-resume-modal .mcq-resume-ico {
  font-size: 2.4rem; color: var(--mcq-accent-text); margin-bottom: 10px; line-height: 1;
}
#mcq-resume-modal h2 {
  font-family: "Playfair Display", Georgia, serif; font-size: 1.5rem; font-weight: 800;
  color: var(--mcq-text); margin-bottom: 8px;
}
#mcq-resume-modal .mcq-resume-info {
  color: var(--mcq-text-muted); font-size: .92rem; line-height: 1.55; margin-bottom: 22px;
}
#mcq-resume-modal .mcq-resume-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
#mcq-resume-modal .mcq-resume-err {
  margin-top: 14px; font-size: .86rem; color: var(--mcq-wrong-ink);
}


/* -------------------------------------------------------------------------
   15. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 760px) {
  #session-panel .mcq-answers { grid-template-columns: repeat(2, 1fr); gap: 11px; }
}
@media (max-width: 600px) {
  #session-panel .mcq-session-bar { padding: 10px 13px; gap: 8px; min-height: 60px; }
  #session-panel .mcq-session-subject-label { display: none; }
  #session-panel .mcq-q-counter { font-size: .95rem; }
  #session-panel .mcq-streak-lbl { display: none; }
  #session-panel .mcq-overall-timer { font-size: .95rem; }
  #session-panel .mcq-score-live { padding: 5px 10px; font-size: .8rem; }
  #session-panel .mcq-bar-btn { padding: 7px 10px; font-size: .95rem; }
  #session-panel .mcq-question-wrap { padding: 18px 14px 40px; gap: 14px; }
  #session-panel .mcq-question-card { padding: 18px 16px; border-radius: 18px; }
  #session-panel .mcq-ans-btn { padding: 14px 10px; border-radius: 16px; }
  #session-panel .mcq-ans-letter { width: 44px; height: 44px; font-size: 1.1rem; }
  #session-panel .mcq-ans-kbd { display: none; }
  #session-panel .mcq-inline-feedback { padding: 12px 15px; gap: 10px; flex-wrap: wrap; }
  #session-panel .mcq-explanation-body { padding: 14px 15px; }
  #session-panel .mcq-feedback-card { padding: 22px 18px 24px; }
  #session-panel .mcq-q-nav { bottom: 14px; left: 12px; }
  #session-panel .mcq-nav-tab { padding: 8px 14px; font-size: .8rem; }
  #session-panel .mcq-nav-dots { grid-template-columns: repeat(6, 1fr); }
}

/* Site convention: reduced motion kills animation, never layout. */
@media (prefers-reduced-motion: reduce) {
  #session-panel *, #mcq-resume-modal *, #paper-view-panel * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* =========================================================================
   16. PAPER VIEW PANEL — redesigned split-pane layout
   ========================================================================= */

#paper-view-panel {
  display: flex; flex-direction: column; height: 100vh;
  background: var(--mcq-canvas);
  color: var(--mcq-text);
  overflow: hidden;
}

/* ---- 16a. Top bar ---- */
#paper-view-panel .pv-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 16px; min-height: 52px;
  background: var(--mcq-bar);
  border-bottom: 1px solid var(--mcq-bar-border);
  box-shadow: var(--mcq-bar-shadow);
  position: relative; z-index: 20; flex-shrink: 0;
}
#paper-view-panel .pv-bar-left,
#paper-view-panel .pv-bar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
#paper-view-panel .pv-bar-center {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap;
}
#paper-view-panel .pv-subject-label {
  font-family: "Archivo", sans-serif; font-size: .75rem; letter-spacing: .04em;
  color: var(--mcq-text-faint); white-space: nowrap;
}

/* Stat pills in the center bar */
#paper-view-panel .pv-stat-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--mcq-surface-2); border: 1px solid var(--mcq-surface-border);
  border-radius: 999px; padding: 4px 12px;
  font-family: "Archivo", sans-serif; font-size: .76rem; font-weight: 700;
  color: var(--mcq-text); white-space: nowrap; line-height: 1.3;
}
#paper-view-panel .pv-stat-ico { font-size: .85rem; opacity: .8; }
#paper-view-panel .pv-stat-correct { color: var(--mcq-correct-ink); border-color: var(--mcq-correct-border); }
#paper-view-panel .pv-stat-timer { gap: 4px; }

/* Timer toggle button (play/pause) */
#paper-view-panel .pv-timer-toggle {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--mcq-accent); border: none; color: var(--mcq-accent-ink);
  cursor: pointer; font-size: .62rem; line-height: 1;
  transition: transform .15s, background .15s;
}
#paper-view-panel .pv-timer-toggle:hover { transform: scale(1.12); }
#paper-view-panel .pv-timer-toggle.is-running { background: var(--mcq-surface-2); color: var(--mcq-text-muted); border: 1px solid var(--mcq-surface-border); }

/* Live check switch */
#paper-view-panel .pv-stat-live { gap: 7px; }
#paper-view-panel .pv-live-switch {
  position: relative; width: 34px; height: 18px;
  background: none; border: none; padding: 0; cursor: pointer;
}
#paper-view-panel .pv-switch-track {
  display: block; width: 100%; height: 100%; border-radius: 9px;
  background: var(--mcq-correct-bg); border: 1.5px solid var(--mcq-correct-border);
  transition: background .2s, border-color .2s;
  position: relative;
}
#paper-view-panel .pv-switch-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--mcq-correct-ink);
  transition: left .2s var(--mcq-ease), background .2s;
}
#paper-view-panel .pv-live-switch[aria-pressed="true"] .pv-switch-thumb { left: 18px; }
#paper-view-panel .pv-live-switch[aria-pressed="false"] .pv-switch-track {
  background: var(--mcq-surface-2); border-color: var(--mcq-surface-border);
}
#paper-view-panel .pv-live-switch[aria-pressed="false"] .pv-switch-thumb {
  background: var(--mcq-text-muted); left: 2px;
}

/* Bar icon buttons */
#paper-view-panel .pv-bar-icon-btn {
  background: var(--mcq-surface-2);
  border: 1px solid var(--mcq-surface-border);
  color: var(--mcq-text-muted);
  border-radius: 9px; padding: 5px 10px; line-height: 1;
  cursor: pointer; font-size: .78rem; font-weight: 600;
  font-family: "Archivo", sans-serif;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
  white-space: nowrap;
}
#paper-view-panel .pv-bar-icon-btn:hover {
  background: var(--mcq-accent-soft); border-color: var(--mcq-accent-border);
  color: var(--mcq-accent-text); transform: translateY(-1px);
}
#paper-view-panel .pv-quit-btn:hover {
  background: var(--mcq-danger-bg); border-color: var(--mcq-wrong-border);
  color: var(--mcq-danger-ink);
}
#paper-view-panel .pv-bar-icon-btn[aria-pressed="true"] {
  background: var(--mcq-accent-soft); border-color: var(--mcq-accent-border);
  color: var(--mcq-accent-text);
}

/* Theme toggle: light/dark icon visibility */
#paper-view-panel .pv-theme-btn .mcq-theme-ico-light { display: none; }
[data-mcq-theme="light"] #paper-view-panel .pv-theme-btn .mcq-theme-ico-light { display: inline; }
[data-mcq-theme="light"] #paper-view-panel .pv-theme-btn .mcq-theme-ico-dark { display: none; }

/* Paper time (exam countdown) */
#paper-view-panel .mcq-paper-time {
  font-family: "Archivo", sans-serif; font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; white-space: nowrap; color: var(--mcq-text-muted);
  padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--mcq-surface-border); background: var(--mcq-surface-2);
  transition: color .2s, border-color .2s, background .2s;
}
#paper-view-panel .mcq-paper-time.is-warn {
  color: var(--mcq-accent-text); border-color: var(--mcq-accent-border);
  background: var(--mcq-accent-soft);
}
#paper-view-panel .mcq-paper-time.is-danger {
  color: var(--mcq-wrong-ink); border-color: var(--mcq-wrong-border);
  background: var(--mcq-wrong-bg);
}

/* Progress bar (shared class) */
#paper-view-panel .mcq-progress-wrap {
  height: 3px; background: var(--mcq-progress-track); overflow: hidden; flex-shrink: 0;
}
#paper-view-panel .mcq-progress-fill {
  height: 100%; width: 0; background: var(--mcq-progress-fill);
  transition: width .4s var(--mcq-ease);
}

/* ---- 16b. Split pane body ---- */
#paper-view-panel .pv-body {
  flex: 1; display: flex; overflow: hidden;
  min-height: 0;
}

/* Left: PDF pane */
#paper-view-panel .pv-pdf-pane {
  flex: 1; min-width: 200px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
#paper-view-panel .pv-pdf-container {
  flex: 1; position: relative; overflow: hidden;
}
#paper-view-panel .pv-pdf-container embed,
#paper-view-panel .pv-pdf-container iframe {
  display: block; width: 100%; height: 100%; border: none;
}
/* Annotation canvas overlays the PDF */
#paper-view-panel .pv-annot-canvas {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none; cursor: default;
}
#paper-view-panel .pv-annot-canvas.pv-drawing {
  pointer-events: auto; cursor: crosshair;
}
#paper-view-panel .pv-annot-canvas.pv-erasing { cursor: cell; pointer-events: auto; }
#paper-view-panel .pv-annot-canvas.pv-texting { cursor: text; pointer-events: auto; }

/* PDF loading state */
#paper-view-panel .pv-pdf-loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: var(--mcq-text-muted); font-size: .9rem;
}
#paper-view-panel .pv-pdf-loading .pv-load-spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid var(--mcq-surface-border);
  border-top-color: var(--mcq-accent);
  animation: pv-spin .8s linear infinite;
}
@keyframes pv-spin { to { transform: rotate(360deg); } }

/* ---- 16c. Annotation toolbar ---- */
#paper-view-panel .pv-annot-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; padding: 6px 12px; flex-shrink: 0;
  background: var(--mcq-bar);
  border-top: 1px solid var(--mcq-bar-border);
}
#paper-view-panel .pv-annot-group { display: flex; align-items: center; gap: 3px; }
#paper-view-panel .pv-annot-sep {
  width: 1px; height: 20px; background: var(--mcq-surface-border); margin: 0 6px; flex-shrink: 0;
}
#paper-view-panel .pv-annot-btn {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid transparent;
  color: var(--mcq-text-muted); cursor: pointer;
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: .8rem;
  transition: background .12s, border-color .12s, color .12s, transform .1s;
}
#paper-view-panel .pv-annot-btn:hover {
  background: var(--mcq-surface-2); border-color: var(--mcq-surface-border);
  color: var(--mcq-text);
}
#paper-view-panel .pv-annot-btn.active {
  background: var(--mcq-accent); border-color: var(--mcq-accent);
  color: var(--mcq-accent-ink);
}

/* Color dots */
#paper-view-panel .pv-color-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--dot); border: 2px solid transparent;
  cursor: pointer; transition: transform .12s, border-color .12s;
  padding: 0;
}
#paper-view-panel .pv-color-dot:hover { transform: scale(1.2); }
#paper-view-panel .pv-color-dot.active { border-color: var(--mcq-text); transform: scale(1.15); }

/* Eraser mode buttons */
#paper-view-panel .pv-eraser-mode {
  padding: 3px 9px; border-radius: 6px; cursor: pointer;
  background: transparent; border: 1px solid transparent;
  color: var(--mcq-text-muted);
  font-family: "Archivo", sans-serif; font-size: .68rem; font-weight: 700;
  transition: background .12s, color .12s, border-color .12s;
}
#paper-view-panel .pv-eraser-mode:hover { background: var(--mcq-surface-2); color: var(--mcq-text); }
#paper-view-panel .pv-eraser-mode.active {
  background: var(--mcq-accent-soft); border-color: var(--mcq-accent-border);
  color: var(--mcq-accent-text);
}

/* ---- 16d. Resize handle ---- */
#paper-view-panel .pv-resize-handle {
  width: 8px; flex-shrink: 0; cursor: col-resize;
  background: var(--mcq-bar);
  border-left: 1px solid var(--mcq-bar-border);
  border-right: 1px solid var(--mcq-bar-border);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  z-index: 5;
}
#paper-view-panel .pv-resize-handle:hover,
#paper-view-panel .pv-resize-handle.pv-dragging {
  background: var(--mcq-accent-soft);
}
#paper-view-panel .pv-resize-dots {
  display: flex; flex-direction: column; gap: 3px;
}
#paper-view-panel .pv-resize-dots span {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--mcq-text-faint);
}

/* ---- 16e. Answer panel (right) ---- */
#paper-view-panel .pv-answer-pane {
  width: 380px; min-width: 280px; max-width: 50vw; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--mcq-bar);
  overflow: hidden;
}
#paper-view-panel .pv-answer-pane.pv-pane-hidden { display: none; }

/* Answer header */
#paper-view-panel .pv-ans-header {
  padding: 10px 14px 8px; flex-shrink: 0;
  border-bottom: 1px solid var(--mcq-surface-border);
}
#paper-view-panel .pv-ans-header-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
#paper-view-panel .pv-ans-title {
  font-family: "Archivo", sans-serif; font-size: .88rem; font-weight: 800;
  color: var(--mcq-text);
}
#paper-view-panel .pv-ans-actions { display: flex; gap: 6px; }
#paper-view-panel .pv-action-btn {
  padding: 5px 14px; border-radius: 8px; cursor: pointer;
  background: var(--mcq-surface-2); border: 1px solid var(--mcq-surface-border);
  color: var(--mcq-text-muted);
  font-family: "Archivo", sans-serif; font-size: .74rem; font-weight: 700;
  transition: background .15s, border-color .15s, color .15s;
}
#paper-view-panel .pv-action-btn:hover {
  background: var(--mcq-accent-soft); border-color: var(--mcq-accent-border);
  color: var(--mcq-accent-text);
}
#paper-view-panel .pv-finish-btn {
  background: var(--mcq-accent); border-color: var(--mcq-accent);
  color: var(--mcq-accent-ink);
}
#paper-view-panel .pv-finish-btn:hover {
  background: var(--mcq-accent); filter: brightness(1.08); color: var(--mcq-accent-ink);
}

/* Scrollable answer cards */
#paper-view-panel .pv-ans-scroll {
  flex: 1; overflow-y: auto; padding: 8px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--mcq-surface-border) transparent;
}

/* Individual question card */
#paper-view-panel .pv-q-card {
  background: var(--mcq-surface-2);
  border: 1px solid var(--mcq-surface-border);
  border-radius: 12px; padding: 0;
  margin-bottom: 6px;
  transition: border-color .2s, box-shadow .2s;
}
#paper-view-panel .pv-q-card:hover {
  border-color: var(--mcq-accent-border);
}
#paper-view-panel .pv-q-card.pv-q-active {
  border-color: var(--mcq-accent);
  box-shadow: 0 0 0 1px var(--mcq-accent-border), 0 2px 12px var(--mcq-accent-glow);
}

/* Card header row */
#paper-view-panel .pv-q-card-head {
  display: flex; align-items: center; padding: 8px 12px 6px;
  gap: 8px;
}
#paper-view-panel .pv-q-card-num {
  font-family: "Archivo", sans-serif; font-weight: 900; font-size: .82rem;
  color: var(--mcq-text);
}
#paper-view-panel .pv-q-card-ref {
  font-family: "Archivo", sans-serif; font-size: .62rem; font-weight: 600;
  color: var(--mcq-text-faint); letter-spacing: .03em;
}
#paper-view-panel .pv-q-card-topic {
  font-size: .6rem; padding: 1px 7px; border-radius: 999px;
  background: var(--mcq-chosen-bg); border: 1px solid var(--mcq-chosen-border);
  color: var(--mcq-chosen-ink); font-weight: 600;
  margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 120px;
}
[data-mcq-theme="dark"] #paper-view-panel .pv-q-card-topic {
  background: #E4DEF9; border-color: #C9BDF0; color: #4A2E8F;
}
#paper-view-panel .pv-q-card-bookmark {
  background: none; border: none; cursor: pointer;
  color: var(--mcq-text-faint); font-size: .9rem; padding: 2px;
  transition: color .15s, transform .15s; flex-shrink: 0;
}
#paper-view-panel .pv-q-card-bookmark:hover { color: var(--mcq-accent-text); transform: scale(1.15); }
#paper-view-panel .pv-q-card-bookmark.is-bookmarked { color: var(--mcq-accent); }

/* Radio-style A/B/C/D row */
#paper-view-panel .pv-q-card-opts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 5px; padding: 4px 12px 8px;
}
#paper-view-panel .pv-opt-btn {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 4px; border-radius: 8px; cursor: pointer;
  background: var(--mcq-tile-bg); border: 1.5px solid var(--mcq-tile-border);
  color: var(--mcq-tile-text);
  font-family: "Archivo", sans-serif; font-size: .74rem; font-weight: 700;
  transition: background .12s, border-color .12s, color .12s, transform .1s;
}
#paper-view-panel .pv-opt-btn:hover:not(:disabled) {
  background: var(--mcq-tile-hover-bg); border-color: var(--mcq-tile-hover-border);
  transform: translateY(-1px);
}
#paper-view-panel .pv-opt-btn:active:not(:disabled) { transform: scale(.96); }
#paper-view-panel .pv-opt-btn:disabled { cursor: default; }

/* Radio circle indicator */
#paper-view-panel .pv-opt-radio {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--mcq-tile-border);
  background: transparent;
  transition: background .12s, border-color .12s;
  position: relative;
}
#paper-view-panel .pv-opt-radio::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: transparent; transition: background .12s;
}

/* Selected state */
#paper-view-panel .pv-opt-btn.pv-selected {
  background: var(--mcq-chosen-bg); border-color: var(--mcq-chosen-border);
  color: var(--mcq-chosen-ink);
}
#paper-view-panel .pv-opt-btn.pv-selected .pv-opt-radio {
  border-color: var(--mcq-chosen-solid);
}
#paper-view-panel .pv-opt-btn.pv-selected .pv-opt-radio::after {
  background: var(--mcq-chosen-solid);
}

/* Correct state */
#paper-view-panel .pv-opt-btn.pv-correct {
  background: var(--mcq-correct-bg); border-color: var(--mcq-correct-border);
  color: var(--mcq-correct-ink);
}
#paper-view-panel .pv-opt-btn.pv-correct .pv-opt-radio {
  border-color: var(--mcq-correct-solid);
}
#paper-view-panel .pv-opt-btn.pv-correct .pv-opt-radio::after {
  background: var(--mcq-correct-solid);
}

/* Wrong state */
#paper-view-panel .pv-opt-btn.pv-wrong {
  background: var(--mcq-wrong-bg); border-color: var(--mcq-wrong-border);
  color: var(--mcq-wrong-ink);
}
#paper-view-panel .pv-opt-btn.pv-wrong .pv-opt-radio {
  border-color: var(--mcq-wrong-solid);
}
#paper-view-panel .pv-opt-btn.pv-wrong .pv-opt-radio::after {
  background: var(--mcq-wrong-solid);
}

/* Verdict icon in card header */
#paper-view-panel .pv-q-card-verdict {
  font-size: .82rem; font-weight: 800; min-width: 16px; flex-shrink: 0;
}
#paper-view-panel .pv-v-correct { color: var(--mcq-correct-ink); }
#paper-view-panel .pv-v-wrong   { color: var(--mcq-wrong-ink); }

/* Explain button inside card */
#paper-view-panel .pv-explain-trigger {
  display: none; align-items: center; justify-content: center; gap: 6px;
  width: calc(100% - 24px); margin: 0 12px 8px; padding: 7px 0;
  border-radius: 8px; cursor: pointer;
  background: var(--mcq-correct-bg); border: 1px solid var(--mcq-correct-border);
  color: var(--mcq-correct-ink);
  font-family: "Archivo", sans-serif; font-size: .72rem; font-weight: 700;
  transition: background .15s, transform .1s;
}
#paper-view-panel .pv-explain-trigger:hover { filter: brightness(1.06); transform: translateY(-1px); }
#paper-view-panel .pv-q-card.pv-has-explain .pv-explain-trigger { display: flex; }

/* Footer with prev/next */
#paper-view-panel .pv-ans-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; flex-shrink: 0;
  border-top: 1px solid var(--mcq-surface-border);
}
#paper-view-panel .pv-nav-btn {
  padding: 6px 18px; border-radius: 8px; cursor: pointer;
  background: var(--mcq-surface-2); border: 1px solid var(--mcq-surface-border);
  color: var(--mcq-text-muted);
  font-family: "Archivo", sans-serif; font-size: .78rem; font-weight: 700;
  transition: background .15s, color .15s, border-color .15s;
}
#paper-view-panel .pv-nav-btn:hover:not(:disabled) {
  background: var(--mcq-accent-soft); border-color: var(--mcq-accent-border);
  color: var(--mcq-accent-text);
}
#paper-view-panel .pv-nav-btn:disabled { opacity: .4; cursor: default; }
#paper-view-panel .pv-nav-next-btn {
  background: var(--mcq-accent); border-color: var(--mcq-accent);
  color: var(--mcq-accent-ink);
}
#paper-view-panel .pv-nav-next-btn:hover:not(:disabled) {
  background: var(--mcq-accent); filter: brightness(1.08); color: var(--mcq-accent-ink);
}
#paper-view-panel .pv-page-label {
  font-family: "Archivo", sans-serif; font-size: .72rem; font-weight: 600;
  color: var(--mcq-text-faint);
}

/* ---- 16f. Explanation drawer ---- */
#paper-view-panel .pv-explain-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--mcq-scrim);
  display: flex; align-items: stretch; justify-content: flex-end;
}
#paper-view-panel .pv-explain-drawer {
  width: min(520px, 90vw); height: 100%;
  background: var(--mcq-surface); color: var(--mcq-text);
  display: flex; flex-direction: column;
  box-shadow: -8px 0 40px rgba(0,0,0,.35);
  animation: pv-drawer-in .3s var(--mcq-ease);
}
@keyframes pv-drawer-in {
  from { transform: translateX(100%); } to { transform: none; }
}
#paper-view-panel .pv-explain-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--mcq-surface-border);
  flex-shrink: 0;
}
#paper-view-panel .pv-explain-back {
  background: var(--mcq-surface-2); border: 1px solid var(--mcq-surface-border);
  color: var(--mcq-text-muted); border-radius: 8px; padding: 4px 10px;
  cursor: pointer; font-size: .9rem; transition: background .15s, color .15s;
}
#paper-view-panel .pv-explain-back:hover { background: var(--mcq-accent-soft); color: var(--mcq-accent-text); }
#paper-view-panel .pv-explain-title {
  font-family: "Archivo", sans-serif; font-size: .88rem; font-weight: 800;
  color: var(--mcq-text);
}
#paper-view-panel .pv-explain-qbadge {
  font-family: "Archivo", sans-serif; font-size: .68rem; font-weight: 800;
  background: var(--mcq-accent-soft); border: 1px solid var(--mcq-accent-border);
  color: var(--mcq-accent-text); border-radius: 6px; padding: 2px 8px;
}
#paper-view-panel .pv-explain-icon-btn {
  background: none; border: none; cursor: pointer;
  color: var(--mcq-text-faint); font-size: 1.1rem; padding: 4px 6px;
  border-radius: 6px; transition: background .12s, color .12s;
}
#paper-view-panel .pv-explain-icon-btn:hover {
  background: var(--mcq-surface-2); color: var(--mcq-text);
}

#paper-view-panel .pv-explain-body {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  scrollbar-width: thin; scrollbar-color: var(--mcq-surface-border) transparent;
}
/* Reuse the session panel explanation content styles */
#paper-view-panel .pv-explain-content { font-size: .92rem; line-height: 1.65; color: var(--mcq-text); }
#paper-view-panel .pv-explain-content p { margin: 0 0 10px; }
#paper-view-panel .pv-explain-content p:last-child { margin-bottom: 0; }
#paper-view-panel .pv-explain-content strong { color: var(--mcq-accent-text); }
#paper-view-panel .pv-explain-content h3 {
  font-family: "Archivo", sans-serif; font-size: .86rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--mcq-accent-text); margin: 16px 0 8px;
  padding-bottom: 5px; border-bottom: 1px solid var(--mcq-surface-border);
}
#paper-view-panel .pv-explain-content h3:first-child { margin-top: 0; }
#paper-view-panel .pv-explain-content ol,
#paper-view-panel .pv-explain-content ul {
  margin: 0 0 12px; padding-left: 0; list-style: none; counter-reset: mcq-step;
}
#paper-view-panel .pv-explain-content ol > li {
  position: relative; counter-increment: mcq-step;
  padding: 0 0 10px 34px; margin-bottom: 10px;
  border-bottom: 1px dashed var(--mcq-surface-border);
}
#paper-view-panel .pv-explain-content ol > li:last-child {
  border-bottom: 0; margin-bottom: 0; padding-bottom: 0;
}
#paper-view-panel .pv-explain-content ol > li::before {
  content: counter(mcq-step);
  position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--mcq-accent-soft); border: 1px solid var(--mcq-accent-border);
  color: var(--mcq-accent-text);
  font-family: "Archivo", sans-serif; font-size: .74rem; font-weight: 800;
}
#paper-view-panel .pv-explain-content ul > li {
  position: relative; padding-left: 18px; margin-bottom: 6px;
}
#paper-view-panel .pv-explain-content ul > li::before {
  content: "\2022"; position: absolute; left: 4px; color: var(--mcq-accent-text);
}
#paper-view-panel .pv-explain-content code {
  background: var(--mcq-surface-2); border: 1px solid var(--mcq-surface-border);
  border-radius: 5px; padding: 1px 6px;
  font-family: "Archivo", ui-monospace, monospace; font-size: .9em;
  color: var(--mcq-text);
}
#paper-view-panel .pv-explain-content table {
  width: 100%; border-collapse: collapse; margin: 12px 0;
  font-size: .85rem;
}
#paper-view-panel .pv-explain-content th,
#paper-view-panel .pv-explain-content td {
  padding: 8px 12px; text-align: left;
  border-bottom: 1px solid var(--mcq-surface-border);
}
#paper-view-panel .pv-explain-content th {
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: .76rem;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--mcq-text-muted); background: var(--mcq-surface-2);
}
#paper-view-panel .pv-explain-content td:first-child {
  font-weight: 700; white-space: nowrap; color: var(--mcq-accent-text);
}

/* Shimmer lines (reuse from session panel) */
#paper-view-panel .pv-explain-loading { display: flex; flex-direction: column; gap: 10px; }

/* Footer: feedback + follow-up */
#paper-view-panel .pv-explain-footer {
  padding: 12px 16px; flex-shrink: 0;
  border-top: 1px solid var(--mcq-surface-border);
  display: flex; flex-direction: column; gap: 10px;
}
#paper-view-panel .pv-explain-feedback {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: .78rem; color: var(--mcq-text-muted);
}
#paper-view-panel .pv-fb-btns { display: flex; gap: 6px; }
#paper-view-panel .pv-fb-btn {
  padding: 4px 12px; border-radius: 6px; cursor: pointer;
  background: var(--mcq-surface-2); border: 1px solid var(--mcq-surface-border);
  color: var(--mcq-text-muted);
  font-size: .74rem; font-weight: 600;
  transition: background .12s, color .12s, border-color .12s;
}
#paper-view-panel .pv-fb-btn:hover {
  background: var(--mcq-accent-soft); border-color: var(--mcq-accent-border);
  color: var(--mcq-accent-text);
}
#paper-view-panel .pv-fb-btn.is-active {
  background: var(--mcq-accent-soft); border-color: var(--mcq-accent-border);
  color: var(--mcq-accent-text);
}

/* Follow-up input */
#paper-view-panel .pv-followup-row {
  display: flex; gap: 6px; align-items: center;
}
#paper-view-panel .pv-followup-input {
  flex: 1; padding: 8px 12px; border-radius: 8px;
  background: var(--mcq-surface-2); border: 1px solid var(--mcq-surface-border);
  color: var(--mcq-text); font-size: .84rem;
  outline: none; transition: border-color .15s;
}
#paper-view-panel .pv-followup-input::placeholder { color: var(--mcq-text-faint); }
#paper-view-panel .pv-followup-input:focus { border-color: var(--mcq-accent-border); }
#paper-view-panel .pv-followup-send {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--mcq-accent); border: none; color: var(--mcq-accent-ink);
  cursor: pointer; font-size: .9rem;
  transition: transform .12s, opacity .12s;
}
#paper-view-panel .pv-followup-send:disabled { opacity: .4; cursor: default; }
#paper-view-panel .pv-followup-send:hover:not(:disabled) { transform: scale(1.08); }

/* Layout hint in setup panel */
.mcq-layout-hint { font-size: .82rem; margin-top: 6px; }

/* ---- 16g. Responsive ---- */
@media (max-width: 767px) {
  #paper-view-panel .pv-body { flex-direction: column; }
  #paper-view-panel .pv-pdf-pane { min-height: 40vh; }
  #paper-view-panel .pv-resize-handle {
    width: 100%; height: 8px; cursor: row-resize;
    border-left: none; border-right: none;
    border-top: 1px solid var(--mcq-bar-border);
    border-bottom: 1px solid var(--mcq-bar-border);
  }
  #paper-view-panel .pv-resize-dots { flex-direction: row; }
  #paper-view-panel .pv-answer-pane {
    width: 100% !important; max-width: none; min-width: 0;
    max-height: 50vh;
  }
  #paper-view-panel .pv-bar-center { gap: 4px; }
  #paper-view-panel .pv-stat-pill { padding: 3px 8px; font-size: .68rem; }
  #paper-view-panel .pv-bar-icon-btn { padding: 4px 7px; font-size: .72rem; }
  #paper-view-panel .pv-subject-label { display: none; }
  #paper-view-panel .pv-annot-bar { padding: 4px 8px; }
  #paper-view-panel .pv-annot-btn { width: 28px; height: 28px; }
  #paper-view-panel .pv-explain-drawer { width: 100vw; }
}