/* topperly.css draws its borders with --subtle; OnePrep's token is --border-subtle. */
:root { --subtle: var(--border-subtle); }

/* Question Bank in the OnePrep shell. The captured OnePrep classes carry the
   look; this file adds what the capture has no static state for: open popovers,
   selected and checked answers, the explanation drawer, the question navigator
   and phone layouts. Colours come from the source tokens only. */

.qbx-page { max-width: 1024px; margin: 0 auto; padding: 48px 32px 64px; }
.content .qbx-page { padding: 0; }
.qbx-lead { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
.qbx-back { width: max-content; }
.qbx-back svg, .qbx-topbar svg { opacity: .6; }

/* Filter pills and their popovers */
.qbx-pills { position: relative; }
.qbx-pop-anchor { position: relative; }
.qbx-pill.is-active, .qbx-filters-btn.is-active { background: var(--accent-primary); color: var(--foreground); }
.qbx-pill.is-active .qbx-pill__icon { color: var(--accent-primary-foreground); opacity: 1; }
.qbx-pill__icon { display: inline-flex; color: var(--muted-foreground); opacity: .6; }
.qbx-pill .font-medium { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qbx-caret { transition: transform .2s; }
[aria-expanded='true'] > .qbx-caret { transform: rotate(180deg); }
.qbx-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--foreground); color: var(--background); font-size: 12px; font-weight: 600; }
.qbx-pop {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; min-width: 260px; max-height: min(70vh, 560px); overflow: auto;
  padding: 8px; border: 2px solid var(--border-subtle); border-radius: 16px; background: var(--background);
  box-shadow: 0 2px 8px 0 #00000026, 0 0 0 2px color-mix(in oklch, var(--foreground) 5%, transparent);
}
.qbx-pop--end { left: auto; right: 0; }
.qbx-pop--wide { width: min(640px, calc(100vw - 48px)); }
.qbx-pop__cols { columns: 2 260px; column-gap: 8px; }
.qbx-facet { break-inside: avoid; margin: 0; padding: 4px 0 8px; border: 0; }
.qbx-facet legend { padding: 6px 8px 4px; font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--muted-foreground); }
.qbx-opt { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 4px 8px; border-radius: 10px; font-size: 14px; line-height: 20px; color: var(--foreground); cursor: pointer; }
.qbx-opt:hover { background: var(--muted); }
.qbx-opt > span { flex: 1; min-width: 0; }
.qbx-opt small { font-size: 13px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.qbx-opt.is-empty { opacity: .45; cursor: default; }
.qbx-sub { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.qbx-check { display: inline-grid; place-items: center; cursor: pointer; padding: 0; color: var(--background); }
.qbx-check svg { width: 12px; height: 12px; }
.qbx-check[data-mixed='true'] { background: var(--foreground); border-color: var(--foreground); }
.qbx-check[data-mixed='true']::after { content: ''; width: 8px; height: 2px; border-radius: 2px; background: var(--background); }
.qbx-radio { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 36px; padding: 4px 8px; border: 0; border-radius: 10px; background: none; font-size: 14px; text-align: left; color: var(--foreground); cursor: pointer; }
.qbx-radio::before { content: ''; flex: none; width: 16px; height: 16px; border: 2px solid var(--border); border-radius: 50%; }
.qbx-radio[aria-checked='true']::before { border: 5px solid var(--foreground); }
.qbx-radio:hover { background: var(--muted); }
.qbx-link { border: 0; background: none; padding: 6px 8px; font-size: 13px; font-weight: 500; color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Quick sets, chips, view switch */
.qbx-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.qbx-preset {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 12px; border: 2px solid var(--border-subtle); border-radius: 12px;
  background: var(--background); color: var(--foreground); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: border-color .15s, background-color .15s;
}
.qbx-preset span { min-width: 22px; padding: 1px 6px; border-radius: 8px; background: var(--muted); color: var(--muted-foreground); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.qbx-preset:hover:not(:disabled) { border-color: var(--border); background: var(--muted); }
.qbx-preset.is-on { border-color: var(--foreground); background: var(--foreground); color: var(--background); }
.qbx-preset.is-on span { background: color-mix(in oklch, var(--background) 20%, transparent); color: inherit; }
.qbx-preset:disabled { opacity: .45; cursor: default; }
ul.qbx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.qbx-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 10px; border: 0; border-radius: 8px; background: var(--accent-primary); color: var(--foreground); font-size: 13px; font-weight: 500; cursor: pointer; }
.qbx-chip svg { width: 12px; height: 12px; opacity: .6; }
.qbx-card-actions { display: flex; gap: 8px; }
.qbx-views { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--muted); }
.qbx-views button { height: 30px; padding: 0 14px; border: 0; border-radius: 8px; background: none; font-size: 14px; color: var(--muted-foreground); cursor: pointer; }
.qbx-views button[aria-pressed='true'] { background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px #0000000d; }

/* Topic table */
.qbx-unit { font-size: 14px; color: var(--foreground); }
.qbx-unit__row { display: inline-flex; align-items: center; gap: 12px; }
.qbx-topic:disabled { color: var(--muted-foreground); cursor: default; text-decoration: none; }
.qbx-match { font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.qbx-row-empty .qbx-match { color: var(--destructive); }
.qbx-dot-none { background: var(--border); }

/* Question list (also the review list) */
ol.qbx-list { margin: 0; padding: 0; list-style: none; border: 2px solid var(--border-subtle); border-radius: 16px; overflow: hidden; }
ol.qbx-list > li + li { border-top: 1px solid var(--border); }
.qbx-q { display: flex; width: 100%; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.qbx-q:hover { background: var(--muted); }
.qbx-status { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--border); font-size: 11px; font-weight: 600; color: var(--muted-foreground); }
.qbx-status svg { width: 12px; height: 12px; }
.qbx-status--right { border-color: transparent; background: #dcfce7; color: #15803d; }
.qbx-status--wrong { border-color: transparent; background: var(--destructive-muted, #fee2e2); color: var(--destructive); }
.qbx-status--tried { border-color: transparent; background: var(--muted-hover); }
.qbx-q__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qbx-q__code { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; font-weight: 500; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.qbx-q__mark { display: inline-flex; color: var(--foreground); }
.qbx-q__mark svg { width: 13px; height: 13px; }
.qbx-tag { padding: 1px 7px; border-radius: 6px; background: var(--muted); color: var(--muted-foreground); font-size: 11px; font-weight: 600; }
.qbx-tag--sun { background: #fef3c7; color: #92400e; }
.qbx-q__text { font-size: 15px; line-height: 22px; color: var(--foreground); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qbx-q__meta { font-size: 13px; color: var(--muted-foreground); }
.qbx-q__meta b { color: var(--foreground); font-weight: 600; }
.qbx-diff { flex: none; display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin: 4px 4px 0; }
.qbx-diff i { width: 4px; border-radius: 2px; background: var(--border); }
.qbx-diff i:nth-child(1) { height: 6px; } .qbx-diff i:nth-child(2) { height: 10px; } .qbx-diff i:nth-child(3) { height: 14px; }
.qbx-diff--easy i:nth-child(1), .qbx-diff--medium i:nth-child(-n+2), .qbx-diff--hard i { background: var(--foreground); }
.qbx-more-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 8px; }
.qbx-show-sm, .qbx-sheet-done { display: none; }
.qbx-empty { padding: 32px 16px; border: 2px dashed var(--border-subtle); border-radius: 16px; text-align: center; font-size: 14px; color: var(--muted-foreground); }

/* Practice: full screen, OnePrep test frame */
.qbx-practice { position: fixed; inset: 0; z-index: 10; display: flex; background: var(--background); }
.qbx-practice__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qbx-topbar { flex: none; }
.qbx-topbar__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--muted-foreground); }
.qbx-timer { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.qbx-timer [data-timer] { min-width: 5.5ch; text-align: center; }
.qbx-round { width: 28px; height: 28px; padding: 0; border-radius: 99px; }
.qbx-pill-sm { height: 28px; padding: 0 10px; border-radius: 99px; font-size: 12px; }
.qbx-practice__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 16px 32px; outline: none; }
.qbx-practice__col { max-width: 768px; }
.qbx-markbtn svg { color: var(--muted-foreground); }
.qbx-markbtn.is-on svg { color: var(--foreground); }
.qbx-qmeta { margin-right: 6px; font-size: 12px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.qbx-strike-toggle { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: 4px; border: 0; border-radius: 10px; background: none; color: var(--muted-foreground); cursor: pointer; }
.qbx-strike-toggle:hover { background: var(--secondary); color: var(--foreground); }
.qbx-strike-toggle.is-on { background: var(--foreground); color: var(--background); }
.qbx-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--muted); font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.qbx-note svg { flex: none; }
.qbx-note a { color: var(--foreground); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.qbx-qtext { font-size: 17px; line-height: 1.75; color: var(--foreground); max-width: none; padding-top: 8px; }
.qbx-hint { margin: 0; min-height: 20px; font-size: 13px; color: var(--muted-foreground); }
.qbx-choices { display: flex; flex-direction: column; gap: 12px; }
.qbx-choice-row { display: flex; align-items: center; gap: 12px; }
.qbx-choice {
  flex: 1; display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--background); color: var(--foreground); font: inherit; text-align: left; cursor: pointer; transition: background-color .2s, border-color .2s, box-shadow .2s;
}
.qbx-choice .prose { font-size: 16px; line-height: 1.6; max-width: none; padding-top: 1px; }
.qbx-choice:hover:not(:disabled) { background: var(--muted); }
.qbx-choice:disabled { cursor: default; }
.qbx-letter { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--foreground); border-radius: 50%; background: var(--background); font-weight: 600; font-size: 15px; line-height: 1; color: var(--foreground); }
.qbx-letter svg { width: 14px; height: 14px; }
.qbx-choice.is-selected { border-color: var(--accent-primary-foreground); box-shadow: 0 0 0 2px var(--accent-primary-foreground); }
.qbx-choice.is-selected .qbx-letter { background: var(--accent-primary-foreground); border-color: var(--accent-primary-foreground); color: #fff; }
.qbx-choice.is-struck { opacity: .45; }
.qbx-choice.is-struck .prose { text-decoration: line-through; }
.qbx-choice.is-right { border-color: #16a34a; background: #f0fdf4; box-shadow: 0 0 0 1px #16a34a; opacity: 1; }
.qbx-choice.is-right .qbx-letter, .qbx-letter.is-right { background: #16a34a; border-color: #16a34a; color: #fff; }
.qbx-choice.is-wrong { border-color: var(--destructive); background: color-mix(in oklch, var(--destructive) 6%, var(--background)); box-shadow: 0 0 0 1px var(--destructive); }
.qbx-choice.is-wrong .qbx-letter { background: var(--destructive); border-color: var(--destructive); color: #fff; }
.qbx-strike { position: relative; flex: none; width: 40px; height: 28px; border: 0; background: none; cursor: pointer; }
.qbx-strike span { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--foreground); border-radius: 50%; font-size: 13px; font-weight: 600; }
.qbx-strike i { position: absolute; left: 2px; right: 2px; top: 13px; height: 2px; background: var(--foreground); }
.qbx-strike[aria-pressed='true'] span { background: var(--foreground); color: var(--background); }
.qbx-written__label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.qbx-written textarea { width: 100%; min-height: 160px; resize: vertical; }
.qbx-verdict { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 15px; font-weight: 600; }
.qbx-verdict svg { width: 16px; height: 16px; }
.qbx-verdict.is-right { color: #15803d; }
.qbx-verdict.is-wrong { color: var(--destructive); }
.qbx-self { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; border-radius: 12px; background: var(--muted); font-size: 14px; }
.qbx-self > span { flex-basis: 100%; color: var(--muted-foreground); }
.qbx-bottombar { flex: none; }
.qbx-bottombar__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1152px; margin: 0 auto; padding: 16px; }
.qbx-pop-anchor--up .qbx-pop { top: auto; bottom: calc(100% + 12px); }
.qbx-pop--nav { width: min(420px, calc(100vw - 32px)); padding: 16px; }
.qbx-nav-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 14px; }
.qbx-nav-head span { color: var(--muted-foreground); white-space: nowrap; }
.qbx-nav-legend { display: flex; gap: 14px; margin-bottom: 12px; font-size: 12px; color: var(--muted-foreground); }
.qbx-nav-legend span { display: inline-flex; align-items: center; gap: 6px; }
.qbx-nav-legend i { width: 12px; height: 12px; border-radius: 4px; border: 1.5px dashed var(--border); }
.qbx-nav-legend i.is-current { border: 2px solid var(--foreground); }
.qbx-nav-legend i.is-answered { border: 0; background: var(--accent-primary-foreground); }
.qbx-nav-legend i.is-marked { border: 0; background: #f59e0b; }
.qbx-nav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 8px; max-height: 260px; overflow: auto; margin-bottom: 14px; padding: 2px; }
.qbx-nav-grid button { position: relative; height: 36px; border: 1.5px dashed var(--border); border-radius: 8px; background: var(--background); font-size: 13px; font-weight: 500; color: var(--foreground); cursor: pointer; }
.qbx-nav-grid button.is-answered { border: 0; background: var(--accent-primary-foreground); color: #fff; }
.qbx-nav-grid button.is-answered.is-wrong { background: var(--destructive); }
.qbx-nav-grid button.is-current { outline: 2px solid var(--foreground); outline-offset: 1px; }
.qbx-nav-grid button.is-marked::after { content: ''; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: #f59e0b; border: 2px solid var(--background); }
.qbx-scrim { position: fixed; inset: 0; z-index: 25; border: 0; background: transparent; }

/* Explanation drawer */
.qbx-drawer { flex: none; width: min(460px, 42vw); display: flex; flex-direction: column; margin: 12px 12px 12px 0; border: 2px solid var(--border-subtle); border-radius: 16px; background: var(--background); box-shadow: 0 2px 8px 0 #00000026; }
.qbx-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 0 20px; border-bottom: 2px solid var(--border-subtle); }
.qbx-drawer__tab { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0 10px; border-bottom: 2px solid var(--foreground); margin-bottom: -2px; font-size: 14px; font-weight: 500; }
.qbx-icon-btn { width: 36px; padding: 0; margin-bottom: 6px; }
.qbx-drawer__body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.qbx-correct { padding: 14px; border: 2px solid var(--border-subtle); border-radius: 16px; }
.qbx-correct__label { display: block; margin-bottom: 10px; font-size: 13px; color: var(--muted-foreground); }
.qbx-correct__box { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: #dcfce7; font-size: 15px; line-height: 1.5; }
.qbx-solution h3 { margin: 0 0 8px; font-size: 17px; font-weight: 500; letter-spacing: -.3px; }
.qbx-solution p { margin: 0 0 10px; font-size: 15px; line-height: 1.7; color: var(--foreground); }
.qbx-ext { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
.qbx-muted { margin: 0; font-size: 14px; color: var(--muted-foreground); }

/* Review */
.qbx-review { position: fixed; inset: 0; z-index: 10; overflow-y: auto; background: var(--background); }
.qbx-score { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 !important; }
.qbx-score > div { padding: 16px; border-right: 2px solid var(--border-subtle); }
.qbx-score > div:last-child { border-right: 0; }
.qbx-score strong { display: block; font-size: 24px; line-height: 32px; font-weight: 500; font-variant-numeric: tabular-nums; }
.qbx-score span { font-size: 13px; color: var(--muted-foreground); }

@media (max-width: 900px) {
  .qbx-practice.has-drawer .qbx-drawer { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; width: auto; max-height: 75dvh; margin: 0; border-radius: 16px 16px 0 0; }
}
@media (max-width: 767px) {
  .qbx-page { padding: 24px 16px 48px; }
  .qbx-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .qbx-presets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .qbx-pop, .qbx-pop--wide, .qbx-pop--end, .qbx-pop-anchor--up .qbx-pop {
    position: fixed; z-index: 60; left: 0; right: 0; top: auto; bottom: 0; width: auto; min-width: 0; max-height: 75dvh;
    border-radius: 16px 16px 0 0; padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
  }
  .qbx-pop__cols { columns: 1; }
  .qbx-opt { min-height: 44px; }
  .qbx-card-actions { width: 100%; }
  .qbx-card-actions > * { flex: 1; }
  .qbx-diff { display: none; }
  .qbx-q { padding: 12px; gap: 12px; }
  .qbx-hide-sm { display: none; }
  .qbx-show-sm { display: inline; }
  .qbx-sheet-done { display: inline-flex; width: 100%; margin-top: 8px; position: sticky; bottom: 0; }
  .qbx-prev, .qbx-skip { width: 40px; padding: 0; }
  .qbx-show-sm svg { display: block; }
  .qbx-topbar__title { display: none; }
  .qbx-timer { font-size: 15px; }
  .qbx-qmeta { display: none; }
  .qbx-bottombar__inner { padding: 12px; gap: 8px; }
  .qbx-bottombar__inner .flex { gap: 6px; }
  .qbx-score { grid-template-columns: repeat(2, 1fr); }
  .qbx-score > div:nth-child(2) { border-right: 0; }
  .qbx-score > div:nth-child(-n+2) { border-bottom: 2px solid var(--border-subtle); }
}
@media (prefers-reduced-motion: reduce) { .qbx-choice, .qbx-caret, .qbx-preset { transition: none; } }

/* Answer sheet: write digitally, type or upload (the main app's three ways) */
.qbx-instruction { margin: 0; font-size: 14px; font-weight: 500; color: var(--foreground); }
.qbx-sheet { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 2px solid var(--border-subtle); border-radius: 16px; }
.qbx-sheet__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.qbx-sheet__head h2, .qbx-marks__head h2 { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: -.2px; }
.qbx-modes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--muted); }
.qbx-modes button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: none; font-size: 13.5px; color: var(--muted-foreground); cursor: pointer; }
.qbx-modes button[aria-pressed='true'] { background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px #0000000d; }
.qbx-modes svg { width: 16px; height: 16px; }
.qbx-textarea { width: 100%; resize: vertical; border: 2px solid var(--border) !important; font-family: var(--font-noto-serif), Georgia, serif; font-size: 16px; line-height: 1.7; }
.qbx-sheet__count { margin: 0; font-size: 12.5px; color: var(--muted-foreground); }
.qbx-sheet__count .is-ok { color: #15803d; font-weight: 500; }
.qbx-sheet__count .is-under { color: #92400e; font-weight: 500; }
.qbx-sheet__count .is-over { color: var(--destructive); font-weight: 500; }
.qbx-ink { display: flex; flex-direction: column; gap: 8px; }
.qbx-ink__tools { display: flex; flex-wrap: wrap; gap: 6px; }
.qbx-ink__tools button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 2px solid var(--border-subtle); border-radius: 10px; background: var(--background); font-size: 13px; color: var(--foreground); cursor: pointer; }
.qbx-ink__tools button[aria-pressed='true'] { border-color: var(--foreground); }
.qbx-ink__tools button:disabled { opacity: .45; cursor: default; }
.qbx-ink__tools svg { width: 15px; height: 15px; }
.qbx-ink__canvas { width: 100%; border: 1px solid var(--border); border-radius: 12px; background: var(--background); touch-action: none; cursor: crosshair; }
.qbx-upload { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.qbx-upload label { cursor: pointer; }
ul.qbx-photos { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.qbx-photos li { position: relative; }
.qbx-photos img { width: 120px; height: 160px; object-fit: cover; border: 1px solid var(--border); border-radius: 10px; }
.qbx-photos button { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--foreground); color: var(--background); cursor: pointer; }
.qbx-photos button svg { width: 12px; height: 12px; }

/* Marking your own answer */
.qbx-marks { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--muted); }
.qbx-marks__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.qbx-marks__head span { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.qbx-marks__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 10px; border-top: 1px solid var(--border); }
.qbx-marks__row strong { display: block; font-size: 14px; font-weight: 600; }
.qbx-marks__row small { display: block; font-size: 12.5px; color: var(--muted-foreground); max-width: 420px; }
.qbx-steps { display: inline-flex; gap: 4px; }
.qbx-steps button { min-width: 36px; height: 32px; border: 2px solid var(--border-subtle); border-radius: 10px; background: var(--background); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; }
.qbx-steps button[aria-pressed='true'] { border-color: var(--foreground); background: var(--foreground); color: var(--background); }
ul.qbx-rubric { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.qbx-rubric li { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.qbx-rubric span { color: var(--muted-foreground); font-size: 13px; }

/* Passage or extract on the left, its questions on the right */
.qbx-practice__scroll.is-split { padding: 0; overflow: hidden; display: flex; }
.qbx-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.qbx-passage, .qbx-parts { min-height: 0; overflow-y: auto; padding: 24px 28px 40px; }
.qbx-passage { border-right: 2px solid var(--border-subtle); }
.qbx-passage__lead { margin: 0 0 12px; font-size: 13px; font-weight: 500; color: var(--muted-foreground); }
.qbx-passage__text { max-width: 640px; font-size: 16.5px; line-height: 1.75; color: var(--foreground); }
.qbx-passage__text p { margin: 0 0 14px; }
.qbx-parts { display: flex; flex-direction: column; gap: 14px; }
.qbx-part { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.qbx-part__head { display: flex; justify-content: space-between; font-size: 13px; }
.qbx-part__label { font-weight: 600; }
.qbx-part__marks { color: var(--muted-foreground); }
.qbx-part__text { font-size: 15.5px; line-height: 1.65; }
.qbx-part__input { width: 100%; font-size: 15px; }
.qbx-choices--compact { gap: 8px; }
.qbx-choices--compact .qbx-choice { padding: 8px 10px; font-size: 15px; }
.qbx-choices--compact .qbx-letter { width: 24px; height: 24px; font-size: 13px; }
.qbx-part__self { display: flex; gap: 6px; }
.qbx-part__self button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 2px solid var(--border-subtle); border-radius: 10px; background: var(--background); font-size: 13px; cursor: pointer; }
.qbx-part__self button svg { width: 13px; height: 13px; }
.qbx-part__self button[aria-pressed='true'][data-v='1'] { border-color: #16a34a; background: #f0fdf4; color: #15803d; }
.qbx-part__self button[aria-pressed='true'][data-v='0'] { border-color: var(--destructive); color: var(--destructive); }
@media (max-width: 900px) {
  .qbx-practice__scroll.is-split { overflow-y: auto; display: block; }
  .qbx-split { display: block; }
  .qbx-passage, .qbx-parts { overflow: visible; padding: 18px 16px; }
  .qbx-passage { border-right: 0; border-bottom: 2px solid var(--border-subtle); }
}

/* The model answer inline: phones only, where the drawer would cover the marks */
.qbx-inline-answer { display: none; flex-direction: column; gap: 12px; padding: 14px; border: 2px solid var(--border-subtle); border-radius: 16px; }
@media (max-width: 900px) { .qbx-inline-answer { display: flex; } }

/* ── Exam Papers ─────────────────────────────────────────────────────────── */
.qbx-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.qbx-kind { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 2px solid var(--border-subtle); border-radius: 16px; color: var(--foreground); }
.qbx-kind strong { font-size: 15px; font-weight: 600; }
.qbx-kind span { font-size: 13px; line-height: 18px; color: var(--muted-foreground); }
.qbx-kind:hover { border-color: var(--border); background: var(--muted); }
.qbx-kind.is-on { border-color: var(--foreground); }
.qbx-subjects-row { margin-bottom: 18px; }
a.qbx-preset { text-decoration: none; padding: 0 12px; }
.qbx-setup { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.qbx-sheet-paper { padding: 22px 26px; border: 2px solid var(--border-subtle); border-radius: 16px; font-family: var(--font-noto-serif), Georgia, serif; }
.qbx-sheet-paper__head { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--border); text-align: center; }
.qbx-sheet-paper__head > span { font-family: var(--tp-font); font-size: 12px; color: var(--muted-foreground); letter-spacing: .3px; }
.qbx-sheet-paper__head strong { font-size: 20px; font-weight: 600; letter-spacing: .5px; }
.qbx-sheet-paper__meta { display: flex; justify-content: space-between; width: 100%; font-size: 14px; margin-top: 8px; }
.qbx-sheet-paper__label { margin: 14px 0 6px; font-weight: 600; font-size: 15px; }
.qbx-sheet-paper__list { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.7; }
.qbx-setup-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qbx-setup-label { min-width: 96px; font-size: 13px; font-weight: 600; color: var(--muted-foreground); }
.qbx-make { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.qbx-make__btn { height: 44px; padding: 0 24px; font-size: 15px; }
.qbx-chapters { border: 2px solid var(--border-subtle); border-radius: 16px; padding: 4px 8px; }
.qbx-chapters > summary { cursor: pointer; padding: 10px 8px; font-size: 14px; font-weight: 600; }
.qbx-chapters .qbx-facet { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.qbx-chapters .qbx-facet legend { grid-column: 1 / -1; }
.qbx-paper-row { align-items: center; cursor: default; }
.qbx-paper-row:hover { background: none; }
.qbx-paper-row a { color: var(--foreground); text-decoration: underline; text-underline-offset: 2px; }
.qbx-shelf-head { margin-top: 8px; }
.qbx-resume { margin-bottom: 16px; justify-content: space-between; }

/* The printed paper */
.qbx-paper-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.qbx-check-panel { margin-bottom: 16px; padding: 10px 14px; border-radius: 12px; background: var(--muted); font-size: 14px; }
.qbx-check-panel summary { cursor: pointer; font-weight: 600; }
.qbx-table-plain { width: 100%; margin: 10px 0; border-collapse: collapse; font-size: 13.5px; }
.qbx-table-plain th, .qbx-table-plain td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.qbx-paper { padding: 32px 36px; border: 2px solid var(--border-subtle); border-radius: 16px; font-family: var(--font-noto-serif), Georgia, serif; font-size: 15.5px; line-height: 1.65; }
.qbx-paper-head { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--border); text-align: center; }
.qbx-paper-head > span { font-family: var(--tp-font); font-size: 12px; color: var(--muted-foreground); }
.qbx-paper-head h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: .5px; }
.qbx-paper-head p { margin: 0; font-size: 14px; color: var(--muted-foreground); }
.qbx-paper-section h3 { margin: 26px 0 10px; text-align: center; font-size: 15px; font-weight: 700; letter-spacing: 1px; }
.qbx-paper-q { display: grid; grid-template-columns: 44px minmax(0, 1fr) 32px; gap: 10px; padding: 8px 0; }
.qbx-paper-num { font-weight: 600; font-variant-numeric: tabular-nums; }
.qbx-paper-marks { text-align: right; font-weight: 600; }
.qbx-paper-or { margin: 10px 0; text-align: center; font-weight: 700; }
.qbx-paper-choice { font-weight: 600; margin-right: 6px; }
.qbx-paper-opts { margin: 6px 0 0; padding-left: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 20px; }
.qbx-paper-passage p { margin: 0 0 10px; }
ol.qbx-paper-parts { margin: 8px 0 0; padding: 0; list-style: none; }
.qbx-paper-parts li { display: grid; grid-template-columns: 40px minmax(0, 1fr) 28px; gap: 8px; padding: 4px 0; }
.qbx-paper-any { margin: 14px 0 4px; font-weight: 600; }

/* Marking */
.qbx-mark-total { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0; padding: 14px 16px; border-radius: 16px; background: var(--muted); }
.qbx-mark-total strong { font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.qbx-mark-total span { color: var(--muted-foreground); font-size: 14px; flex: 1; }
.qbx-markq { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; padding: 16px; border: 2px solid var(--border-subtle); border-radius: 16px; }
.qbx-markq.is-pending { border-color: var(--accent-primary-foreground); }
.qbx-markq header { display: flex; align-items: baseline; gap: 10px; }
.qbx-markq header .qbx-muted { flex: 1; }
.qbx-markq__score { font-weight: 600; font-variant-numeric: tabular-nums; }
.qbx-markq details summary { cursor: pointer; font-size: 13px; color: var(--muted-foreground); }
.qbx-markq__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.qbx-markq__cols h4 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--muted-foreground); }
.qbx-markq__cols > div { min-width: 0; font-size: 14.5px; line-height: 1.6; }
.qbx-typed { white-space: pre-wrap; font-family: var(--font-noto-serif), Georgia, serif; padding: 10px 12px; border-radius: 10px; background: var(--muted); }
.qbx-ink-copy { width: 100%; max-height: 360px; color: var(--foreground); border: 1px solid var(--border); border-radius: 10px; }
.qbx-auto { margin: 0; font-size: 14px; font-weight: 500; }
.qbx-parts-mark { display: flex; flex-direction: column; gap: 6px; }
.qbx-parts-mark .qbx-part__self { align-items: center; }
.qbx-parts-mark .qbx-part__self > span { min-width: 44px; font-weight: 600; font-size: 13px; }

/* Checked copy */
.qbx-checked .qbx-paper-head { gap: 6px; }
.qbx-score-big { display: flex; align-items: baseline; gap: 6px; font-family: var(--tp-font); }
.qbx-score-big strong { font-size: 44px; font-weight: 500; color: var(--destructive); font-variant-numeric: tabular-nums; }
.qbx-score-big span { font-size: 16px; color: var(--muted-foreground); }
.qbx-checked__h { margin: 28px 0 10px; font-family: var(--tp-font); font-size: 16px; font-weight: 600; }
.qbx-tab { width: 100%; border-collapse: collapse; font-family: var(--tp-font); font-size: 13.5px; }
.qbx-tab th, .qbx-tab td { padding: 8px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.qbx-tab tfoot td { font-weight: 700; }
.qbx-tab__qs { display: flex; flex-wrap: wrap; gap: 4px; }
.qbx-tab__qs span { display: inline-flex; gap: 6px; padding: 2px 8px; border-radius: 6px; background: var(--muted); }
.qbx-tab__qs b { color: var(--destructive); }
.qbx-bars { display: flex; flex-direction: column; gap: 8px; font-family: var(--tp-font); font-size: 13.5px; }
.qbx-bar-row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 70px; gap: 12px; align-items: center; }
.qbx-bar-row i { height: 8px; border-radius: 99px; background: var(--muted); overflow: hidden; }
.qbx-bar-row b { display: block; height: 100%; background: var(--accent-primary-foreground); }
.qbx-bar-row span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
ul.qbx-weak { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-family: var(--tp-font); font-size: 14px; }
.qbx-weak li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qbx-copy { display: flex; flex-direction: column; }
.qbx-copyq { display: grid; grid-template-columns: 44px minmax(0, 1fr) 84px; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); }
.qbx-copyq__q { margin-bottom: 6px; font-size: 13.5px; color: var(--muted-foreground); font-family: var(--tp-font); }
.qbx-copyq__marks { justify-self: end; align-self: start; display: inline-flex; flex-direction: column; align-items: center; min-width: 56px; padding: 6px 8px; border: 2px solid var(--destructive); border-radius: 999px; color: var(--destructive); font-family: var(--tp-font); font-weight: 700; font-variant-numeric: tabular-nums; }
.qbx-copyq__marks small { font-weight: 500; font-size: 10.5px; }
.qbx-copyq__marks.is-skip { border-color: var(--border); color: var(--muted-foreground); }

/* Exam hall */
.qbx-phase { font-size: 12px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--muted-foreground); }
.qbx-phase.is-reading { color: var(--accent-primary-foreground); }
.qbx-reading-bar { margin: 0; padding: 8px 16px; background: var(--accent-primary); color: var(--foreground); font-size: 13.5px; text-align: center; }
.qbx-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; background: var(--muted); font-size: 14px; }
.qbx-confirm p { margin: 0; }
.qbx-choicetabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qbx-choicetabs button { height: 32px; padding: 0 14px; border: 2px solid var(--border-subtle); border-radius: 10px; background: var(--background); font-size: 14px; font-weight: 600; cursor: pointer; }
.qbx-choicetabs button[aria-selected='true'] { border-color: var(--foreground); background: var(--foreground); color: var(--background); }
.qbx-choicetabs span { font-size: 13px; color: var(--muted-foreground); }
.qbx-nav-section { margin: 8px 0 6px; font-size: 12px; font-weight: 600; color: var(--muted-foreground); }

/* The question as printed */
.qbx-qbody { display: flex; flex-direction: column; gap: 8px; }
.qbx-print { margin: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.qbx-print { position: relative; min-height: 44px; }
.qbx-print::before { content: 'Loading the printed question…'; position: absolute; top: 12px; left: 16px; font: 13px/1.4 var(--tp-font); color: var(--muted-foreground); }
.qbx-paper .qbx-print::before { top: 0; left: 0; }
.qbx-print img { position: relative; z-index: 1; display: block; max-width: 100%; height: auto; background: #fff; }
.qbx-print.is-missing, .qbx-qbody.is-textonly .qbx-print { display: none; }
.qbx-astext > summary { width: fit-content; font-family: var(--tp-font); font-size: 13px; color: var(--muted-foreground); cursor: pointer; }
.qbx-astext > summary:hover { color: var(--foreground); }
.qbx-astext[open] > summary { margin-bottom: 6px; }
.qbx-qbody.is-textonly .qbx-astext > summary { display: none; }
.qbx-paper .qbx-print { padding: 0; border: 0; border-radius: 0; background: none; }
.qbx-orpart b { margin-right: 4px; }
.qbx-or { margin: 10px 0; text-align: center; font-weight: 700; }
.qbx-letters { display: flex; flex-wrap: wrap; gap: 12px; }
.qbx-letter-btn { display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid var(--border-subtle); border-radius: 50%; background: var(--background); color: var(--foreground); font: 600 18px/1 var(--tp-font); cursor: pointer; transition: background-color .2s, border-color .2s; }
.qbx-letter-btn:hover:not(:disabled) { border-color: var(--foreground); }
.qbx-letter-btn:disabled { cursor: default; }
.qbx-letter-btn svg { width: 18px; height: 18px; }
.qbx-letter-btn.is-selected { border-color: var(--accent-primary-foreground); background: var(--accent-primary-foreground); color: #fff; }
.qbx-letter-btn.is-right { border-color: #16a34a; background: #16a34a; color: #fff; }
.qbx-letter-btn.is-wrong { border-color: var(--destructive); background: var(--destructive); color: #fff; }

/* How to sit a paper */
.qbx-sitbox { margin-bottom: 20px; padding: 18px; border: 2px solid var(--border-subtle); border-radius: 16px; }
.qbx-sitbox h2 { margin: 0 0 12px; font-size: 17px; font-weight: 600; }
.qbx-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.qbx-method { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 2px solid var(--border-subtle); border-radius: 12px; background: var(--background); color: var(--foreground); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s; }
.qbx-method:hover { border-color: var(--border); }
.qbx-method strong { font-size: 15px; font-weight: 600; }
.qbx-method span { font-size: 13px; line-height: 1.45; color: var(--muted-foreground); }
.qbx-method.is-on { border-color: var(--foreground); }
.qbx-sitbox__go { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.qbx-choicetabs button[aria-checked='true'] { border-color: var(--foreground); background: var(--foreground); color: var(--background); }

/* Sitting on paper and the whole-paper view */
.qbx-paper-sit { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 860px; margin: 0 auto; padding: 20px 16px 40px; }
.qbx-paper-sit .qbx-paper { background: #fff; }
.qbx-paper-go { margin-top: 10px; font-family: var(--tp-font); }
.qbx-sheet { display: flex; flex-direction: column; gap: 10px; }
.qbx-sheet__head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.qbx-sheetphotos { margin-bottom: 20px; }
ul.qbx-photos--big { gap: 14px; }
.qbx-photos--big li { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted-foreground); }
.qbx-photos--big img { width: 220px; height: auto; max-height: 320px; object-fit: contain; background: var(--muted); }

@media (max-width: 900px) {
  .qbx-methods { grid-template-columns: 1fr; }
  .qbx-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qbx-markq__cols { grid-template-columns: 1fr; }
  .qbx-paper { padding: 20px 16px; }
  .qbx-paper-opts { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .qbx-kinds { grid-template-columns: 1fr; }
  .qbx-paper-q, .qbx-copyq { grid-template-columns: 34px minmax(0, 1fr) 56px; gap: 8px; }
  .qbx-bar-row { grid-template-columns: 1fr 60px; }
  .qbx-bar-row i { grid-column: 1 / -1; grid-row: 2; }
}
@media print {
  .sidebar, .topbar, .noprint, .qbx-paper-actions, .qbx-check-panel, .skip-link, #toast { display: none !important; }
  .app-shell, .page-pane { display: block; height: auto; overflow: visible; margin: 0; background: #fff; }
  .content { padding: 0; max-width: none; }
  .qbx-paper { border: 0; padding: 0; font-size: 12pt; }
  .qbx-paper-q, .qbx-copyq { break-inside: avoid; }
  .qbx-practice, .qbx-practice__main, .qbx-practice__scroll { position: static !important; display: block !important; height: auto !important; overflow: visible !important; }
  .qbx-paper-sit { max-width: none; padding: 0; }
  .qbx-astext, .qbx-paper-go { display: none !important; }
  .qbx-print::before { content: none; }
  .qbx-qbody.is-textonly .qbx-astext { display: block !important; }
  .qbx-qbody.is-textonly .qbx-astext > summary { display: none; }
  @page { size: A4; margin: 16mm 14mm; }
}
.qbx-tab td:last-child, .qbx-tab th:last-child { white-space: nowrap; }

/* Subtopics: a chapter that opens into its parts (Revision of Python → Strings, Lists…) */
.qbx-subtoggle { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px 0 10px; border: 2px solid var(--border-subtle); border-radius: 999px; background: var(--background); color: var(--muted-foreground); font: 500 12.5px/1 var(--tp-font); white-space: nowrap; cursor: pointer; transition: border-color .2s, color .2s; }
.qbx-subtoggle:hover { border-color: var(--border); color: var(--foreground); }
.qbx-subtoggle svg { width: 14px; height: 14px; transition: transform .2s; }
.qbx-subtoggle[aria-expanded='true'] { color: var(--foreground); }
.qbx-subtoggle[aria-expanded='true'] svg { transform: rotate(180deg); }
.qbx-subrow td:first-child { padding-left: 34px; }
.qbx-subrow .qbx-topic { font-weight: 400; }
.qbx-subrow td { padding-top: 6px; padding-bottom: 6px; }
.qbx-chapters .qbx-opt--parent { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.qbx-opt--parent > .qbx-opt { flex: 0 1 auto; }
.qbx-chapters .qbx-subgrid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 0 0 8px 17px; padding-left: 12px; border-left: 2px solid var(--border-subtle); }
.qbx-check[aria-checked='mixed'] { background: var(--foreground); border-color: var(--foreground); }

/* Typed-out printed questions: figures cut from the paper, ruled tables, code. */
.qbx-figure { margin: 10px 0; }
.qbx-fig { display: block; max-width: 100%; height: auto; }
.qbx-figure .qbx-fig { max-height: 340px; }
.qbx-choice .qbx-fig, .qbx-paper-opts .qbx-fig { display: inline-block; max-height: 140px; vertical-align: middle; }
.qbx-table { border-collapse: collapse; margin: 10px 0; font-size: 0.95em; }
.qbx-table td { border: 1px solid var(--border); padding: 5px 9px; vertical-align: top; text-align: left; }
.qbx-table tr:first-child td { font-weight: 500; }
.qbx-code { margin: 8px 0; padding: 9px 12px; border-radius: 10px; background: var(--muted); font: 13.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; overflow-x: auto; }

/* The printed paper in the CBSE sample-paper layout: centred heading, instructions, ruled Q.No | Questions | Marks tables. */
.qbx-sqp { font-family: 'Times New Roman', Times, var(--font-noto-serif), serif; font-size: 15px; line-height: 1.5; color: #000; background: #fff; }
.qbx-sqp-head { text-align: center; }
.qbx-sqp-head p, .qbx-sqp-head h1 { margin: 0; }
.qbx-sqp-brand { font-size: 12px; letter-spacing: .6px; }
.qbx-sqp-head h1 { margin-top: 2px; font-size: 24px; font-weight: 700; letter-spacing: .4px; }
.qbx-sqp-class, .qbx-sqp-kind { font-size: 15px; font-weight: 700; }
.qbx-sqp-meta { display: flex; justify-content: space-between; margin-top: 10px; padding-bottom: 6px; border-bottom: 2px solid #000; font-weight: 700; }
.qbx-sqp-label { margin: 10px 0 2px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.qbx-sqp-list { margin: 0 0 14px; padding-left: 22px; }
.qbx-sqp-list li { margin: 1px 0; }
.qbx-sqp-table { width: 100%; margin: 0 0 14px; border-collapse: collapse; table-layout: fixed; }
.qbx-sqp-table col.qbx-sqp-c1 { width: 56px; }
.qbx-sqp-table col.qbx-sqp-c3 { width: 60px; }
.qbx-sqp-table td, .qbx-sqp-table th { border: 1px solid #000; padding: 6px 8px; vertical-align: top; text-align: left; }
.qbx-sqp-sec td { text-align: center; }
.qbx-sqp-sec b { display: block; font-size: 15.5px; }
.qbx-sqp-sec i { display: block; font-size: 13.5px; }
.qbx-sqp-cols th { font-weight: 700; }
.qbx-sqp-cols th:last-child, .qbx-sqp-marks { text-align: center; }
.qbx-sqp-num { font-weight: 700; }
.qbx-sqp-note td { font-style: italic; }
.qbx-sqp .qbx-paper-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qbx-sqp .qbx-paper-opts.is-long { grid-template-columns: minmax(0, 1fr); }
.qbx-sqp .qbx-paper-or { margin: 6px 0; }
.qbx-sqp .qbx-table td { border-color: #000; }
.qbx-sqp .qbx-code { background: none; border: 1px solid #bbb; }
.qbx-sqp .qbx-print { padding: 0; border: 0; }
.qbx-sqp-table tr { break-inside: avoid; }
@media print { .qbx-sqp { font-size: 11.5pt; } .qbx-sqp-table td, .qbx-sqp-table th { padding: 4px 6px; } }