/*
 * sebook-quiz.css
 *
 * Presentation rules live in CSS modules, not inline HTML style blocks.
 * Keep light mode, dark mode (html.dark-mode), and print behavior together
 * with the component/page rules they affect.
 */

/* Extracted from _includes/quiz.html. */

  /* Flex wrapper: quiz on the left, avatar character on the right */
  .quiz-outer-wrap {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: 18px 0;
  }

  .quiz-outer-wrap > .quiz-container {
    flex: 1;
    min-width: 0;
    margin: 0; /* outer wrap provides vertical margin */
  }

  .quiz-avatar-side {
    width: clamp(220px, 18vw, 320px);
    flex-shrink: 0;
    position: sticky;
    top: 80px; /* clear fixed navbar */
  }

  .quiz-avatar-side:empty {
    display: none;
  }

  .quiz-avatar-side [data-gym-hero-svg] {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 22px rgba(0, 47, 82, 0.22));
  }

  html.dark-mode .quiz-avatar-side [data-gym-hero-svg] {
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.48));
  }

  @media (max-width: 900px) {
    .quiz-outer-wrap {
      flex-direction: column;
    }

    .quiz-avatar-side {
      width: clamp(150px, 45vw, 220px);
      align-self: center;
      position: static;
      order: -1;
    }
  }

  .quiz-container {
    background:
      radial-gradient(circle at 100% 0%, rgba(139, 184, 232, 0.2) 0 88px, transparent 90px),
      linear-gradient(180deg, #ffffff, #f7fbff);
    border: 1.5px solid #8BB8E8;
    border-radius: 8px;
    padding: 18px;
    margin: 18px 0;
    box-shadow: 0 16px 34px rgba(0, 59, 92, 0.14);
    font-family: 'Inter', sans-serif;
    position: relative;
  }

  .quiz-container::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(90deg, #2774AE 0 44%, #FFD100 44% 56%, #2774AE 56% 100%);
  }

  .quiz-container > * {
    position: relative;
    z-index: 1;
  }

  .quiz-header h3 {
    margin-top: 0;
    color: var(--color-primary, #2774AE);
    font-weight: 700;
  }

  .quiz-progress-bar {
    height: 10px;
    background: #dbeeff;
    border: 1px solid #547fa4;
    border-radius: 999px;
    margin: 12px 0 16px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 59, 92, 0.12);
  }

  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2774AE 0 76%, #FFD100 76% 100%);
    transition: width 0.4s ease;
  }

  .quiz-question-card {
    display: none;
    animation: fadeIn 0.4s ease;
  }

  .quiz-question-card.active {
    display: block;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .question-text {
    font-size: 1.08em;
    font-weight: 600;
    margin: 0 0 16px;
    padding: 0 0 16px;
    line-height: 1.35;
    color: #17324d;
    border-bottom: 1px solid #c8d6e2;
  }

  .question-text p,
  .option-content p,
  .explanation-text p {
    margin: 0;
  }

  .quiz-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .quiz-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    min-height: 52px;
    border: 1.5px solid #9db7cc;
    border-radius: 8px;
    background: #ffffff;
    text-align: left;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    font-size: 0.95em;
    line-height: 1.35;
    width: 100%;
    box-shadow: 0 5px 14px rgba(0, 59, 92, 0.06);
  }

  .option-content {
    min-width: 0;
    overflow-wrap: anywhere;
    padding-top: 2px;
  }

  .question-text img,
  .question-text svg,
  .option-content img,
  .option-content svg,
  .explanation-text img,
  .explanation-text svg {
    max-width: 100%;
    height: auto;
  }

  .question-text pre,
  .option-content pre,
  .explanation-text pre,
  .question-text .highlighter-rouge,
  .option-content .highlighter-rouge,
  .explanation-text .highlighter-rouge {
    max-width: 100%;
    overflow-x: auto;
  }

  .quiz-option:focus-visible,
  .submit-answer-btn:focus-visible,
  .next-btn:focus-visible,
  .restart-btn:focus-visible,
  .review-btn:focus-visible,
  .parsons-check-btn:focus-visible,
  .parsons-reset-btn:focus-visible,
  .parsons-line:focus-visible,
  .se-gym-toggle:focus-visible {
    outline: var(--focus-width, 3px) solid var(--focus-color, #2774AE);
    outline-offset: var(--focus-offset, 2px);
  }

  /* Screen-reader-only utility, scoped to quiz */
  .quiz-container .sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
  }

  .quiz-option:hover:not([disabled]):not(.selected) {
    border-color: var(--color-primary, #2774AE);
    background: #eef7ff;
    box-shadow: 0 8px 20px rgba(0, 59, 92, 0.12);
    transform: translateY(-1px);
  }

  .quiz-option.selected {
    border-color: var(--color-primary, #2774AE);
    background: #eef6fc;
    box-shadow: 0 0 0 2px rgba(39, 116, 174, 0.18), 0 8px 20px rgba(0, 59, 92, 0.12);
  }

  .quiz-option.correct {
    border-color: var(--color-success, #1f7a3d);
    background: #e6ffed;
    color: #155724;
  }

  .quiz-option.incorrect {
    border-color: var(--color-error, #b81e2c);
    background: #ffeef0;
    color: #721c24;
  }

  .quiz-option.correct::after,
  .quiz-option.incorrect::after {
    margin-left: auto;
    padding-left: 12px;
    font-weight: 800;
    font-size: 1.1em;
    line-height: 1;
  }

  .quiz-option.correct::after { content: "✓"; }
  .quiz-option.incorrect::after { content: "✗"; }

  /* Difficulty chip — color-coded but always carries a text label so meaning
     does not depend on color alone (WCAG 1.4.1). Each level chooses a
     background+text pair that clears 4.5:1 in light mode; the dark-mode block
     re-pairs them for the darker surface. */
  .quiz-difficulty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.95em;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 14px;
    border: 1px solid transparent;
  }
  .quiz-difficulty-prefix {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
  }
  .quiz-difficulty-label {
    text-transform: capitalize;
  }
  .quiz-difficulty-basic {
    background: #e6f4ea;
    color: #14532d;
    border-color: #98c8a8;
  }
  .quiz-difficulty-intermediate {
    background: #e0ecf6;
    color: #173a5e;
    border-color: #97b8d6;
  }
  .quiz-difficulty-advanced {
    background: #fdf0d8;
    color: #5a3500;
    border-color: #d6a35c;
  }
  .quiz-difficulty-expert {
    background: #fbe2e2;
    color: #5a0d10;
    border-color: #d29193;
  }
  html.dark-mode .quiz-difficulty-basic {
    background: #1a3a2a;
    color: #b8f0c8;
    border-color: #2f6a4a;
  }
  html.dark-mode .quiz-difficulty-intermediate {
    background: #15283f;
    color: #b8d6f3;
    border-color: #3d6a99;
  }
  html.dark-mode .quiz-difficulty-advanced {
    background: #3a2a08;
    color: #fbd99a;
    border-color: #886433;
  }
  html.dark-mode .quiz-difficulty-expert {
    background: #3d1a1a;
    color: #ffc7c7;
    border-color: #8a3d3d;
  }

  html.dark-mode .quiz-container {
    background:
      radial-gradient(circle at 100% 0%, rgba(139, 184, 232, 0.16) 0 88px, transparent 90px),
      linear-gradient(180deg, #111f31, #0f1722) !important;
    border-color: #8BB8E8 !important;
    color: #e6f4ff !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.46), inset 0 0 0 1px rgba(139, 184, 232, 0.16) !important;
  }

  html.dark-mode .quiz-container::before {
    background: linear-gradient(90deg, #8BB8E8 0 44%, #FFD100 44% 56%, #8BB8E8 56% 100%);
  }

  html.dark-mode .quiz-progress-bar {
    background: #172536 !important;
    border-color: #718499 !important;
  }

  html.dark-mode .progress-fill {
    background: linear-gradient(90deg, #8BB8E8 0 76%, #FFD100 76% 100%) !important;
  }

  html.dark-mode .quiz-container .question-text {
    color: #f0f7ff !important;
    border-bottom-color: #31455d;
  }

  /* Per-option misconception feedback (hidden by default; revealed on validation) */
  .option-feedback {
    margin: 2px 0 8px 50px;
    padding: 10px 12px;
    border-left: 3px solid #d97706;
    background: #fff7ed;
    border-radius: 8px;
    font-size: 0.92em;
    line-height: 1.35;
    color: #7c2d12;
  }
  .option-feedback p { margin: 0; }
  .option-feedback p + p { margin-top: 4px; }
  .option-feedback code {
    background: rgba(217, 119, 6, 0.15);
    padding: 1px 4px;
    border-radius: 3px;
  }
  .option-feedback.is-hidden { display: none; }
  html.dark-mode .option-feedback {
    background: rgba(217, 119, 6, 0.12);
    color: #fed7aa;
    border-left-color: #ea8a14;
  }
  html.dark-mode .option-feedback code {
    background: rgba(217, 119, 6, 0.25);
    color: #fde9c8;
  }

  .option-checkbox {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid #6b879d;
    border-radius: 5px;
    margin-top: 5px;
    flex-shrink: 0;
    transition: all 0.2s;
    background: white;
  }

  /* Dark-mode overrides for quiz-option states. The general
     `html.dark-mode .quiz-option` rule in css/portfolio.css uses
     `!important`, so these higher-specificity rules also need
     `!important` to win. Without these, selecting a quiz option
     in dark mode produces no visual feedback (everything keeps
     the default dark-gray background). */
  html.dark-mode .quiz-option.selected {
    border-color: #8BB8E8 !important;
    background-color: #18314a !important;
    box-shadow: 0 0 0 2px rgba(139, 184, 232, 0.24), 0 9px 22px rgba(0, 0, 0, 0.42);
  }

  html.dark-mode .quiz-container .quiz-option {
    background: #172536 !important;
    border-color: #46566a !important;
    color: #e6f4ff !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
  }

  html.dark-mode .quiz-container .quiz-option:hover:not([disabled]):not(.selected) {
    border-color: #8BB8E8 !important;
    background: #20344b !important;
    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.42);
  }

  html.dark-mode .quiz-container .quiz-option.correct {
    border-color: #4fa34f !important;
    background: rgba(26, 127, 60, 0.24) !important;
    color: #b7f5b7 !important;
  }

  html.dark-mode .quiz-container .quiz-option.incorrect {
    border-color: #ff8585 !important;
    background: rgba(184, 30, 44, 0.24) !important;
    color: #ffd2d2 !important;
  }

  html.dark-mode .option-checkbox {
    background: #0b1f33 !important;
    border-color: #8BB8E8 !important;
  }

  html.dark-mode .quiz-container .option-label {
    background: #0b1f33;
    border-color: #8BB8E8;
    color: #d9ecff !important;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.26);
  }

  html.dark-mode .quiz-container .submit-answer-btn:disabled {
    background: #46566a;
    color: #d9ecff;
  }

  html.dark-mode .quiz-container .quiz-explanation {
    background: #14283f !important;
    border-color: #8BB8E8 !important;
    border-left-color: #FFD100 !important;
    color: #e6f4ff !important;
  }

  html.dark-mode .quiz-container .explanation-title {
    color: #FFD100 !important;
  }

  html.dark-mode .quiz-container .quiz-correct-answers {
    color: #d9ecff;
  }

  html.dark-mode .quiz-container .correct-label-badge {
    background: #FFD100;
    color: #061d31;
    border-color: #fff6c2;
  }

  [data-type="multiple"] .option-checkbox {
    display: block;
  }

  .quiz-option.selected .option-checkbox {
    background: var(--color-primary, #2774AE);
    border-color: var(--color-primary, #2774AE);
  }

  .quiz-option.selected .option-checkbox::after {
    content: '';
    display: block;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin: 1px 5px;
  }

  .option-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #dbeeff;
    border: 1px solid #8BB8E8;
    font-weight: 800;
    flex-shrink: 0;
    line-height: 1;
    box-shadow: inset 0 -3px 0 rgba(0, 59, 92, 0.08);
    /* WCAG 1.4.3: #6a737d on white sits at ~4.82:1 — barely passes the 4.5:1
       text minimum and reads as "low contrast" against bright option text.
       #5a6573 gives ~5.9:1, keeping the muted-grey feel. Dark-mode override
       lives in css/portfolio.css. */
    color: #17324d;
  }

  [data-type="multiple"] .option-label {
    display: inline-flex;
  }

  .quiz-explanation {
    margin-top: 16px;
    padding: 14px 16px;
    background: #eef7ff;
    border: 1.5px solid #8BB8E8;
    border-left: 5px solid #2774AE;
    border-radius: 8px;
    font-size: 0.95em;
    line-height: 1.45;
    color: #17324d;
  }

  .explanation-title {
    font-weight: 700;
    color: #17324d;
    margin-bottom: var(--sp-sm, 8px);
    font-size: 0.95em;
    text-transform: uppercase;
  }

  .submit-answer-btn,
  .next-btn,
  .restart-btn,
  .review-btn {
    background: var(--color-primary, #2774AE);
    color: var(--color-text-on-primary, white);
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-md, 8px);
    font-weight: 700;
    margin-top: var(--sp-md, 10px);
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
    width: 100%;
    font-size: 0.95em;
    min-height: 42px;
    box-shadow: 0 7px 16px rgba(0, 59, 92, 0.18);
  }

  .submit-answer-btn:disabled {
    background: #a1c2db;
    color: #17324d;
    cursor: not-allowed;
    box-shadow: none;
  }

  .submit-answer-btn:hover:not(:disabled),
  .next-btn:hover,
  .restart-btn:hover,
  .review-btn:hover {
    background: var(--color-primary-hover, #1e5c8a);
  }

  .quiz-results {
    text-align: center;
    padding: 32px 0;
  }

  .quiz-connect-answers,
  .quiz-correct-answers {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-weight: 600;
    color: #17324d;
    flex-wrap: wrap;
  }

  .correct-labels {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
  }

  .correct-label-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    background: #FFD100;
    color: #061d31;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.95em;
    border: 1px solid #b38b00;
  }

  .optional-answer-note {
    margin-left: 8px;
    font-size: 0.95em;
    font-weight: 700;
    color: #555;
  }

  @media (prefers-reduced-motion: reduce) {
    .quiz-question-card,
    .progress-fill,
    .quiz-option,
    .submit-answer-btn,
    .next-btn,
    .restart-btn,
    .review-btn {
      animation: none !important;
      transition: none !important;
    }

    .quiz-option:hover:not([disabled]),
    .submit-answer-btn:hover:not(:disabled),
    .next-btn:hover,
    .restart-btn:hover,
    .review-btn:hover {
      transform: none !important;
    }
  }

  .score-display {
    font-size: 2em;
    font-weight: 800;
    margin: var(--sp-xl, 20px) 0;
    color: var(--color-primary, #2774AE);
  }

  .hidden {
    display: none !important;
  }

  .quiz-title-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-right: 0;
  }

  .quiz-title-row h2,
  .quiz-title-row h3 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
  }

  .quiz-container .se-gym-toggle {
    background: none;
    border: 2px solid #ccc;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
    transition: all 0.2s;
    padding: 0;
    position: static;
    flex: 0 0 auto;
    margin: 1px 0 0 auto;
  }

  .se-gym-toggle:hover {
    border-color: var(--color-primary, #2774AE);
    color: var(--color-primary, #2774AE);
  }

  .se-gym-toggle.in-gym {
    background: var(--color-success, #1f7a3d);
    border-color: var(--color-success, #1f7a3d);
    color: var(--color-text-on-primary, white);
  }

  .se-gym-toggle.in-gym:hover {
    background: var(--color-error, #b81e2c);
    border-color: var(--color-error, #b81e2c);
  }

  /* The neutral pill (border #ccc, color #999) reads fine on light surfaces
     but turns into a harsh near-white ring on the dark quiz background.
     Pair both. */
  html.dark-mode .quiz-container .se-gym-toggle {
    border-color: #555 !important;
    color: #b0b0b0 !important;
  }
  html.dark-mode .quiz-container .se-gym-toggle:hover {
    border-color: var(--color-primary, #5fa8d3) !important;
    color: var(--color-primary, #5fa8d3) !important;
  }

  /* ── Parsons Problem Styles ─────────────────────────────────────────── */
  .parsons-container { margin-top: var(--sp-md, 12px); }
  .parsons-label { font-size: 0.95em; color: #555; margin-bottom: var(--sp-sm, 8px); }
  .parsons-bank, .parsons-target {
    min-height: 48px; padding: var(--sp-sm, 8px); border-radius: var(--radius-md, 8px);
    display: flex; flex-direction: column; gap: var(--sp-xs, 4px);
  }
  .parsons-bank { background: #f5f5f8; border: 1.5px dashed #6b7078; }
  .parsons-target { background: #f0f8f0; border: 2px dashed #2f7a2f; }
  .parsons-separator { text-align: center; padding: 6px; color: #555; font-size: 0.95em; }
  .parsons-line {
    display: inline-flex; align-items: center; gap: var(--sp-sm, 8px);
    padding: 6px 10px; background: var(--color-surface, #fff); border: 1px solid var(--color-border-strong, #767676);
    border-radius: var(--radius-sm, 4px);
    cursor: grab; font-size: 0.95em; transition: border-color 0.2s, background 0.2s;
    user-select: none;
  }
  .parsons-line:hover { border-color: var(--color-primary, #2774AE); background: #e8f0ff; }
  .parsons-line.dragging { opacity: 0.4; }
  .parsons-line code {
    font-family: var(--font-mono, 'Fira Code', 'Consolas', monospace); font-size: 1em;
    white-space: pre; color: #333; background: transparent; padding: 0;
  }
  .parsons-grip { color: #555; font-size: 14px; line-height: 1; flex-shrink: 0; }
  .parsons-line.parsons-correct { border-color: var(--color-success, #1f7a3d); background: #e6ffed; }
  .parsons-line.parsons-incorrect { border-color: var(--color-error, #b81e2c); background: #ffeef0; }
  .parsons-line.parsons-correct::before,
  .parsons-line.parsons-incorrect::before {
    font-weight: 800;
    min-width: 1em;
    text-align: center;
  }
  .parsons-line.parsons-correct::before { content: "✓"; }
  .parsons-line.parsons-incorrect::before { content: "✗"; }
  .parsons-actions { display: flex; gap: var(--sp-sm, 8px); margin-top: var(--sp-md, 10px); }
  .parsons-check-btn, .parsons-reset-btn {
    padding: var(--sp-sm, 6px) var(--sp-lg, 16px); border-radius: var(--radius-md, 8px); border: none; cursor: pointer;
    font-size: 0.95em; font-weight: 600;
  }
  .parsons-check-btn { background: var(--color-primary, #2774AE); color: var(--color-text-on-primary, white); }
  .parsons-check-btn:hover:not(:disabled) { background: var(--color-primary-hover, #1e5c8a); }
  .parsons-reset-btn { background: #eee; color: #333; }
  .parsons-reset-btn:hover:not(:disabled) { background: #ddd; }
  .parsons-check-btn:disabled, .parsons-reset-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  /* Inline variant (regex, shell) — horizontal chip layout */
  .parsons-container.parsons-inline .parsons-bank,
  .parsons-container.parsons-inline .parsons-target {
    flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: center;
  }
  .parsons-container.parsons-inline .parsons-line { padding: 4px 10px; }
  .parsons-container.parsons-inline .parsons-line code { white-space: nowrap; }
  .parsons-container.parsons-inline .parsons-target { min-height: 40px; }
  /* Dark mode overrides for Parsons */
  html.dark-mode .parsons-label { color: var(--color-text-muted, #b8b8c8); }
  html.dark-mode .parsons-bank { background: #1a1a28; border-color: var(--color-border-strong, #6a737d); }
  html.dark-mode .parsons-target { background: #1c2a1c; border-color: var(--color-success, #4fa34f); }
  html.dark-mode .parsons-separator { color: var(--color-text-muted, #b8b8c8); }
  html.dark-mode .parsons-line { background: #2a2a3e; border-color: var(--color-border-strong, #6a737d); }
  html.dark-mode .parsons-line:hover { border-color: var(--color-primary, #5fa8d3); background: #2a2a50; }
  html.dark-mode .parsons-line code { color: #e0e0f0; }
  html.dark-mode .parsons-grip { color: var(--color-text-muted, #b8b8c8); }
  html.dark-mode .parsons-line.parsons-correct { border-color: var(--color-success, #4fa34f); background: rgba(79, 163, 79, 0.15); }
  html.dark-mode .parsons-line.parsons-incorrect { border-color: var(--color-error, #ff8585); background: rgba(255, 133, 133, 0.12); }
  html.dark-mode .parsons-reset-btn { background: var(--color-border, #333); color: #ccc; }
  html.dark-mode .parsons-reset-btn:hover:not(:disabled) { background: var(--color-divider, #444); }
  /* Correct-answer display for parsons */
  .quiz-correct-answers code {
    font-family: 'Fira Code', 'Consolas', monospace; font-size: 0.95em;
    background: #f0f0f5; padding: 1px 4px; border-radius: 2px;
  }

  /* ── Print: show all questions and all option feedback ───────────────── */
  @media print {
    .quiz-progress-bar,
    .quiz-header p,
    .submit-answer-btn,
    .next-btn,
    .restart-btn,
    .review-btn,
    .parsons-actions,
    .se-gym-toggle,
    .quiz-results { display: none !important; }
    .quiz-question-card { display: block !important; animation: none !important; }
    .quiz-container {
      padding: 4px 8px;
      margin: 6px 0;
      box-shadow: none;
      border-radius: 4px;
      page-break-inside: avoid;
    }
    html.dark-mode .quiz-container {
      background: #fff !important;
      border-color: #e1e4e8 !important;
      color: #111 !important;
      box-shadow: none !important;
    }
    html.dark-mode .quiz-container::before {
      background: #2774AE !important;
    }
    html.dark-mode .quiz-container .question-text {
      color: #000 !important;
      border-bottom-color: #ddd !important;
    }
    html.dark-mode .quiz-container .quiz-option,
    html.dark-mode .quiz-container .quiz-option:hover:not([disabled]):not(.selected),
    html.dark-mode .quiz-container .quiz-option.selected {
      background: #fcfcfc !important;
      border-color: #767676 !important;
      color: #111 !important;
      box-shadow: none !important;
    }
    html.dark-mode .quiz-container .quiz-option.correct {
      background: #e8f5e9 !important;
      border-color: #2e7d32 !important;
      color: #1a472a !important;
    }
    html.dark-mode .quiz-container .quiz-option.incorrect {
      background: #fbe9e7 !important;
      border-color: #c62828 !important;
      color: #7f1d1d !important;
    }
    html.dark-mode .quiz-container .option-label {
      background: #fff !important;
      border-color: #2774AE !important;
      color: #2774AE !important;
      box-shadow: none !important;
    }
    html.dark-mode .quiz-container .option-checkbox {
      background: #fff !important;
      border-color: #6b879d !important;
      box-shadow: none !important;
    }
    html.dark-mode .quiz-container .quiz-option.selected .option-checkbox {
      background: #2774AE !important;
      border-color: #2774AE !important;
    }
    html.dark-mode .quiz-container .quiz-option.selected .option-checkbox::after {
      border-color: #fff !important;
    }
    html.dark-mode .option-feedback {
      background: #fff7ed !important;
      border-left-color: #d97706 !important;
      color: #7c2d12 !important;
    }
    html.dark-mode .option-feedback code {
      background: rgba(217, 119, 6, 0.15) !important;
      color: #111 !important;
    }
    html.dark-mode .quiz-difficulty-basic {
      background: #e8f5e9 !important;
      color: #1a472a !important;
      border-color: #6fbf73 !important;
    }
    html.dark-mode .quiz-difficulty-intermediate {
      background: #e8f1fb !important;
      color: #17324d !important;
      border-color: #8BB8E8 !important;
    }
    html.dark-mode .quiz-difficulty-advanced {
      background: #fdf0d8 !important;
      color: #5a3500 !important;
      border-color: #d6a35c !important;
    }
    html.dark-mode .quiz-difficulty-expert {
      background: #fbe2e2 !important;
      color: #5a0d10 !important;
      border-color: #d29193 !important;
    }
    .quiz-explanation { display: block !important; background: transparent; padding: 4px 0; }
    html.dark-mode .quiz-container .quiz-explanation {
      background: transparent !important;
      border-color: #d0e3ff !important;
      border-left-color: #2774AE !important;
      color: #111 !important;
    }
    html.dark-mode .quiz-container .explanation-title {
      color: #2774AE !important;
    }
    html.dark-mode .quiz-container .quiz-correct-answers {
      background: #f0f7ff !important;
      border-color: #d0e3ff !important;
      color: #1e5c8a !important;
    }
    html.dark-mode .quiz-container .correct-label-badge {
      background: #2774AE !important;
      color: #fff !important;
      border-color: #2774AE !important;
    }
    /* Always show every option's feedback in print, regardless of student state */
    .option-feedback,
    .option-feedback.is-hidden { display: block !important; page-break-inside: avoid; }
  }