:root {
  --font-ui: Arial, Helvetica, sans-serif;
  --font-explanation: "Segoe UI", "Noto Sans", Arial, Helvetica, sans-serif;
  --text: #111111;
  --muted: #666666;
  --line: #c9c9c9;
  --line-soft: #dddddd;
  --surface: #f1f2ec;
  --surface-hover: #efefef;
  --blue: #418ec8;
  --blue-soft: #cfe5f6;
  --blue-selected: #b9d7ee;
  --green: #2f9d57;
  --green-soft: #dff2e6;
  --red: #cc3a3a;
  --red-soft: #fde4e4;
  --amber: #b47a00;
  --gray-answer: #a7a7a7;
  --footer-h: 58px;
  --topbar-h: 70px;
  --part-gap: 16px;
  --radius: 4px;
  --shadow-modal: 0 24px 70px rgba(0,0,0,.22);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { font-family: var(--font-ui); color: var(--text); background: #fff; overflow: hidden; }
button, input, select { font: inherit; }
button { color: inherit; }

::-webkit-scrollbar { width: 17px; height: 17px; }
::-webkit-scrollbar-thumb { background: #8a8a8a; border-radius: 0; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }

#app { width: 100%; height: 100%; }

.boot-screen, .fatal-screen {
  width: 100%; height: 100%; display: grid; place-items: center; padding: 24px; background: #f7f7f7;
}
.boot-card, .fatal-card {
  width: min(760px, 100%); background: #fff; border: 1px solid #d6d6d6; padding: 28px; border-radius: 8px;
}
.boot-card { display: grid; grid-template-columns: 28px 1fr; gap: 8px 14px; align-items: center; }
.boot-card span { grid-column: 2; color: var(--muted); font-size: 14px; }
.boot-spinner { width: 24px; height: 24px; border: 3px solid #ddd; border-top-color: #222; border-radius: 50%; animation: spin .8s linear infinite; grid-row: 1 / 3; }
@keyframes spin { to { transform: rotate(360deg); } }
.fatal-card h1 { margin: 0 0 10px; font-size: 24px; }
.fatal-card p { line-height: 1.5; }
.fatal-card pre { overflow: auto; max-height: 55vh; white-space: pre-wrap; background: #161616; color: #f1f1f1; padding: 16px; border-radius: 4px; font: 13px/1.5 Consolas, monospace; }
.fatal-hint { color: #555; font-size: 14px; }
.error-kicker { font-size: 12px; font-weight: 800; color: #b00020; letter-spacing: .08em; }
.data-error-card { border-top: 5px solid #b00020; }

.exam-shell { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: #fff; font-weight: 500; line-height: 1.5; }

.topbar {
  min-height: var(--topbar-h); border-bottom: 1px solid #c1c1c1; display: flex; align-items: center; gap: 14px; padding: 8px 14px;
}
.brand-block { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; }
.brand-logo { display:block; height: 38px; width:auto; max-width: 255px; object-fit:contain; }
.test-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.test-meta strong { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.test-meta span { font-size: 14px; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.test-picker-label { min-height:38px; display:flex; align-items:center; gap:5px; border:1px solid #c8c8c8; border-radius:4px; padding:4px 7px; background:#fff; }
.test-picker-label > span { font-size:10px; color:#777; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.test-picker-label select { border:none; outline:none; max-width:245px; background:transparent; font-size:13px; font-weight:600; }
.icon-btn { width: 38px; height: 38px; border: 0; background: transparent; border-radius: 4px; cursor: pointer; font-size: 21px; }
.icon-btn:hover { background: rgba(0,0,0,.05); }
.storage-pill { font-size: 11px; border: 1px solid #d4d4d4; padding: 6px 8px; border-radius: 999px; color: #666; white-space: nowrap; }
.score-pill { min-height:38px; display:flex; align-items:center; gap:9px; border:1px solid #a9d6b8; background:#eff9f2; padding:6px 12px; border-radius:999px; white-space:nowrap; font-size:14px; }
.score-pill strong { color:#1e7b42; font-size:16px; }
.score-pill span { color:#355c43; }
.score-pill b { color:#166c39; font-size:16px; }

.part-banner { margin: 14px 16px; border: 1px solid #d5d5d5; background: var(--surface); border-radius: var(--radius); padding: 13px 16px; }
.part-banner > div { display: flex; flex-direction: column; }
.part-banner strong { font-size: 18px; font-weight: 900; line-height: 1.25; }
.part-banner span { font-size: 16px; }

.workspace { min-height: 0; display: flex; flex-direction: row; padding: 0 18px 12px; overflow: hidden; }
.pane { min-width: 0; overflow: hidden; position: relative; flex-grow: 1; flex-shrink: 1; }
.pane-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; }
.passage-pane .pane-scroll { padding: 0 18px 28px 14px; }
.question-pane .pane-scroll { padding: 0 18px 90px 14px; }
.splitter { width: 30px; flex: 0 0 30px; position: relative; cursor: col-resize; display: grid; place-items: center; touch-action: none; outline: none; }
.splitter::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: #a9a9a9; }
.splitter span { position: relative; z-index: 1; border: 1px solid #8d8d8d; background: #fff; width: 30px; height: 36px; display: grid; place-items: center; font-size: 18px; }
.splitter:hover span, .splitter:focus span, .splitter.is-dragging span { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(65,142,200,.16); }

.passage-title { margin: 0 0 8px; text-align: center; font-size: 22px; font-weight: 900; }
.passage-intro { margin: 0 0 14px; }
.passage-block { margin: 0 0 13px; font-size: 17px; line-height: 1.48; }
.passage-label { font-size: 18px; }
.passage-subheading { font-size: 17px; margin: 18px 0 8px; }
.passage-image img { max-width: 100%; display: block; }
.passage-heading-answer { margin: 14px 0 5px; border: 2px dashed #cfd8e1; min-height: 30px; display: flex; align-items: center; justify-content: center; padding: 2px; }
.passage-heading-answer .bank-slot-wrap { width: 100%; justify-content: center; }
.passage-heading-answer .bank-slot { min-width: 110px; width: auto; background: #fff; }

.question-group { margin: 0 0 30px; }
.group-header { margin: 0 0 10px; }
.group-header h3 { font-size: 16px; margin: 0 0 6px; font-weight: 800; }
.group-instruction { font-size: 16px; line-height: 1.45; }
.rich-instruction strong { font-weight: 900; }

.question-card { border-radius: 4px; margin: 0 0 14px; scroll-margin: 90px 0; }
.question-head { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: start; margin: 0 0 8px; }
.question-prompt { font-size: 16px; padding-top: 3px; }
.question-number { position: relative; min-width: 34px; height: 32px; padding: 0 5px; background: #fff; border: 1px solid transparent; border-radius: 4px; font-weight: 800; cursor: pointer; }
.question-number::before { content: ''; position: absolute; left: 2px; right: 2px; top: -4px; height: 3px; background: linear-gradient(to right, var(--green) var(--answer-progress, 0%), #d2d2d2 var(--answer-progress, 0%)); }
.question-number.is-current { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.bookmark-btn { border: 0; background: transparent; width: 30px; height: 30px; cursor: pointer; color: #222; font-size: 19px; line-height: 1; }
.bookmark-btn.is-marked { color: var(--red); }
.bookmark-btn:hover { background: #f3f3f3; }

.choice-list { display: grid; gap: 1px; }
.choice-row { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 10px; cursor: pointer; border-radius: 2px; transition: background .12s; }
.choice-row:hover { background: #e4e4e4; }
.choice-row.is-selected { background: var(--blue-selected); }
.choice-row input { margin: 0; width: 15px; height: 15px; accent-color: var(--blue); }
.choice-row.is-correct { background: var(--green-soft); box-shadow: inset 4px 0 var(--green); }
.choice-row.is-wrong { background: var(--red-soft); box-shadow: inset 4px 0 var(--red); }
.is-review .choice-row { cursor: default; }
.is-review .choice-row:hover { background: inherit; }
.is-review .choice-row.is-correct:hover { background: var(--green-soft); }
.is-review .choice-row.is-wrong:hover { background: var(--red-soft); }

.completion-row { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 10px; border: 1px solid #bcbcbc; border-bottom-width: 0; scroll-margin: 90px 0; }
.completion-row:last-child { border-bottom-width: 1px; }
.completion-bullet { font-weight: 900; }
.completion-text { flex: 1 1 auto; }
.slot-wrap { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; scroll-margin: 90px 0; }
.text-slot { width: var(--slot-width, 132px); min-width: 84px; max-width: 210px; height: 31px; border: 1px solid #777; border-radius: 4px; padding: 3px 8px; text-align: center; background: #fff; outline: none; }
.text-slot:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(65,142,200,.13); }
.text-slot::placeholder { color: #111; font-weight: 800; opacity: 1; }
.text-slot.review-correct { border-color: var(--green); background: var(--green-soft); color: #166d38; font-weight: 700; }
.text-slot.review-wrong { border-color: var(--red); background: var(--red-soft); color: #9e2222; font-weight: 700; }
.text-slot.review-skipped { border-color: #999; background: #f3f3f3; }
.completion-template { border: 1px solid #666; padding: 14px; line-height: 2.15; font-size: 16px; }
.note-completion { white-space: normal; }
.summary-completion, .word-bank-template { line-height: 2.05; }

.table-wrap, .matrix-wrap { overflow-x: auto; }
.completion-table, .matching-matrix { width: 100%; border-collapse: collapse; font-size: 15px; }
.completion-table th, .completion-table td, .matching-matrix th, .matching-matrix td { border: 1px solid #666; padding: 9px; vertical-align: middle; }
.completion-table th, .matching-matrix th { font-weight: 800; background: #fff; }
.completion-table .text-slot { width: 125px; }

.matching-matrix { table-layout: fixed; }
.matching-matrix .matrix-statement-col { width: 58%; }
.matching-matrix .matrix-bookmark-col { width: 42px; }
.matrix-prompt { line-height: 1.35; }
.matrix-choice { text-align: center; width: 44px; }
.matrix-choice label { display: grid; place-items: center; width: 100%; height: 38px; cursor: pointer; }
.matrix-choice input { accent-color: var(--blue); }
.matrix-choice.is-selected { background: var(--blue-soft); }
.matrix-choice.is-correct { background: var(--green-soft); }
.matrix-choice.is-wrong { background: var(--red-soft); }
.matrix-bookmark { text-align: center; }
.matrix-row { scroll-margin: 90px 0; }

.matching-row { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(140px, .85fr); gap: 8px; align-items: center; padding: 8px 0; scroll-margin: 90px 0; }
.matching-fixed { line-height: 1.35; }
.matching-arrow { color: #777; }
.bank-slot-wrap { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; scroll-margin: 90px 0; }
.bank-slot { min-height: 32px; min-width: 115px; max-width: 320px; padding: 4px 8px; border: 1px dashed #b9c8d6; background: #fff; border-radius: 4px; cursor: pointer; font-weight: 700; }
.bank-slot.has-answer { border-style: solid; border-color: #99aec0; background: #f7fbfe; }
.bank-slot.is-current { box-shadow: 0 0 0 2px rgba(65,142,200,.18); border-color: var(--blue); }
.bank-slot.review-correct { border-color: var(--green); background: var(--green-soft); color: #166d38; }
.bank-slot.review-wrong { border-color: var(--red); background: var(--red-soft); color: #9e2222; }
.bank-slot.review-skipped { background: #f3f3f3; border-color: #999; }
.slot-clear { width: 25px; height: 25px; border: 0; border-radius: 50%; background: #eee; cursor: pointer; }
.slot-clear:hover { background: #ddd; }

.option-pool { margin-top: 14px; }
.pool-title { font-weight: 800; margin-bottom: 5px; }
.pool-help { font-size: 12px; color: #888; margin-bottom: 8px; }
.pool-items { display: flex; flex-wrap: wrap; gap: 7px; }
.pool-chip { border: 1px solid #c9c9c9; background: #fff; border-radius: 5px; padding: 5px 9px; cursor: grab; }
.pool-chip:hover { border-color: var(--blue); }
.pool-chip.is-selected { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(65,142,200,.15); background: #f2f8fc; }
.heading-pool .pool-items { align-items: flex-start; flex-direction: column; }
.heading-pool .pool-chip { text-align: left; }

.diagram-figure { margin: 0; }
.diagram-figure figcaption { text-align: center; font-weight: 800; margin-bottom: 8px; }
.diagram-stage { position: relative; width: 100%; min-width: 460px; }
.diagram-image { width: 100%; height: auto; display: block; }
.diagram-slot { position: absolute; transform: translate(-50%, -50%); }
.diagram-slot .slot-wrap { width: 100%; }
.diagram-slot .text-slot { width: 100%; min-width: 0; max-width: none; background: rgba(255,255,255,.95); }
.diagram-missing { min-height: 320px; display: grid; place-items: center; background: #fafafa; border: 1px dashed #bbb; }

.inline-review-stack { display: grid; gap: 6px; margin-top: 10px; }
.review-inline { display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 4px; font-size: 13px; }
.review-inline > div { display: flex; flex-direction: column; }
.review-inline.is-correct { background: var(--green-soft); color: #1b6638; }
.review-inline.is-wrong { background: var(--red-soft); }
.review-inline.is-skipped { background: #f2f2f2; }
.review-label { color: #666; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.correct-text { color: #16723a; }
.wrong-text { color: #a32121; }
.explain-btn { margin-left: auto; border: 1px solid #b63737; background: #fff; color: #9b2424; border-radius: 4px; padding: 5px 9px; cursor: pointer; }
.explain-btn:hover { background: #fff6f6; }

.floating-nav { position: absolute; right: 22px; bottom: 15px; display: flex; gap: 8px; z-index: 4; }
.floating-nav button { width: 54px; height: 50px; border: 0; border-radius: 3px; background: #555; color: #fff; font-size: 27px; cursor: pointer; }
.floating-nav .next { background: #000; }
.floating-nav button:hover { filter: brightness(.92); }

.bottom-nav { min-height: var(--footer-h); border-top: 1px solid #ddd; background: #f6f8fa; display: flex; align-items: stretch; }
.part-tabs { min-width: 0; flex: 1; display: flex; align-items: stretch; overflow-x: auto; }
.part-tab { border: 0; background: transparent; min-width: 190px; padding: 0 20px; display: flex; align-items: center; gap: 8px; cursor: pointer; border-right: 1px solid #e4e4e4; }
.part-tab:hover { background: var(--surface-hover); }
.part-tab span { color: #555; }
.active-part { display: flex; align-items: center; gap: 2px; padding: 0 14px; white-space: nowrap; }
.active-part > strong { margin-right: 14px; }
.nav-q { position: relative; min-width: 30px; height: 34px; border: 1px solid transparent; border-radius: 4px; background: transparent; cursor: pointer; padding: 0 5px; }
.nav-q::before { content: ''; position: absolute; left: 2px; right: 2px; top: -4px; height: 3px; background: linear-gradient(to right, var(--green) var(--answer-progress, 0%), #d2d2d2 var(--answer-progress, 0%)); }
.nav-q.is-current { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; background: #fff; }
.nav-q.is-bookmarked::after { content: '◆'; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); color: var(--red); font-size: 8px; }
.is-review .nav-q.review-correct::before { background: var(--green); }
.is-review .nav-q.review-wrong::before { background: var(--red); }
.is-review .nav-q.review-skipped::before { background: #aaa; }
.submit-btn { width: 62px; border: 0; border-left: 1px solid #ddd; background: #f7f7f7; font-size: 28px; cursor: pointer; }
.submit-btn:hover { background: #efefef; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.36); display: grid; place-items: center; z-index: 30; padding: 20px; }
.explanation-modal { position: relative; width: min(620px, 100%); max-height: 84vh; overflow: auto; background: #fff; border-radius: 8px; box-shadow: var(--shadow-modal); padding: 24px; }
.modal-close { position: absolute; right: 14px; top: 12px; width: 34px; height: 34px; border: 0; background: transparent; font-size: 28px; cursor: pointer; }
.modal-kicker { color: #777; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.explanation-modal h2 { margin: 5px 0 18px; }
.explain-answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.explain-answer-grid > div { border: 1px solid #ddd; padding: 10px; border-radius: 4px; display: flex; flex-direction: column; }
.explain-answer-grid span { color: #777; font-size: 12px; margin-bottom: 3px; }
.explanation-copy { line-height: 1.6; background: #f8f8f8; border-left: 4px solid #333; padding: 14px; }
.modal-done { margin-top: 18px; border: 0; background: #111; color: #fff; border-radius: 4px; padding: 9px 18px; cursor: pointer; }

.dev-warning { position: fixed; right: 12px; bottom: calc(var(--footer-h) + 10px); max-width: 520px; padding: 10px 12px; background: #fff4ce; border: 1px solid #d7b757; border-radius: 4px; z-index: 20; font: 12px/1.45 var(--font-ui); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.renderer-error, .broken-slot { background: #fff0f0; color: #9e2222; border: 1px solid #d99999; padding: 10px; }
.renderer-error pre { white-space: pre-wrap; font-size: 12px; }

@media (max-width: 1050px) {
  .storage-pill { display: none; }
  .test-picker-label select { max-width: 190px; }
  .brand-logo { height:32px; max-width:215px; }
  .test-meta strong { max-width: 28vw; }
}

@media (max-width: 768px) {
  body { overflow: auto; }
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  .exam-shell { min-height: 100vh; height: auto; display: block; }
  .topbar { align-items:flex-start; flex-wrap:wrap; }
  .brand-logo { height:30px; max-width:min(230px,72vw); }
  .test-meta { flex: 1 1 60%; }
  .test-meta strong { max-width: 100%; }
  .top-actions { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .test-picker-label { flex: 1; }
  .test-picker-label select { max-width: none; width: 100%; }
  .workspace { display: block; overflow: visible; padding: 0 12px; }
  .pane { min-height: 58vh; }
  .pane-scroll { position: relative; inset: auto; max-height: 58vh; }
  .splitter { display: none; }
  .question-pane { margin-top: 16px; }
  .bottom-nav { position: sticky; bottom: 0; z-index: 15; }
  .part-tab { min-width: 145px; padding: 0 10px; }
  .active-part { padding: 0 8px; }
  .active-part > strong { margin-right: 5px; }
  .matching-row { grid-template-columns: 1fr; }
  .matching-arrow { display: none; }
  .diagram-stage { min-width: 560px; }
  .diagram-figure { overflow-x: auto; }
}

/* ===== V3: docked annotations, real-test rich templates, detailed explanations ===== */
.reading-app { width:100%; height:100%; display:flex; overflow:hidden; }
.reading-app > .exam-shell { flex:1 1 auto; min-width:0; }
.notes-toggle { position:relative; width:40px; height:38px; border:1px solid #d0d0d0; background:#fff; border-radius:4px; cursor:pointer; display:grid; place-items:center; font-size:20px; }
.notes-toggle:hover, .notes-toggle.is-open { background:#f2f7fb; border-color:var(--blue); }
.notes-toggle b { position:absolute; right:-5px; top:-6px; min-width:17px; height:17px; border-radius:999px; padding:0 4px; background:#111; color:#fff; font:700 10px/17px var(--font-ui); }

.annotation-segment { border-radius:2px; padding:0 1px; transition:background .12s; }
.annotation-segment.ann-highlight { background:#a4293f; color:#fff; }
.annotation-segment.ann-note { background:#536bd6; color:#fff; cursor:pointer; }
.annotation-segment.ann-note.ann-highlight { background:linear-gradient(180deg,#536bd6 0 50%,#a4293f 50% 100%); }
.annotation-segment.annotations-hidden { background:transparent !important; color:inherit !important; }
.annotation-jump-flash { animation:annotationFlash 1.1s ease; }
@keyframes annotationFlash { 0%,100%{background:transparent} 35%{background:#fff1a8} }

.selection-menu { position:fixed; z-index:100; display:flex; overflow:hidden; background:#111; color:#fff; border-radius:5px; box-shadow:0 8px 28px rgba(0,0,0,.28); }
.selection-menu button { border:0; background:transparent; color:#fff; min-width:94px; padding:9px 11px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; }
.selection-menu button + button { border-left:1px solid rgba(255,255,255,.2); }
.selection-menu button:hover { background:#2d2d2d; }
.selection-menu span { font-size:15px; }

.notes-drawer { width:365px; flex:0 0 365px; height:100%; border-left:1px solid #cfcfcf; background:#fff; display:flex; flex-direction:column; min-width:0; }
.notes-drawer-head { min-height:66px; border-bottom:1px solid #d6d6d6; padding:10px 12px 10px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.notes-drawer-head > div:first-child { display:flex; flex-direction:column; }
.notes-drawer-head strong { font-size:16px; }
.notes-drawer-head span { font-size:11px; color:#777; }
.drawer-head-actions { display:flex; gap:3px; }
.drawer-head-actions button { width:34px; height:34px; border:0; background:transparent; cursor:pointer; font-size:20px; border-radius:4px; }
.drawer-head-actions button:hover { background:#f1f1f1; }
.drawer-scroll { min-height:0; flex:1; overflow:auto; padding:14px; }
.drawer-section + .drawer-section { margin-top:22px; padding-top:16px; border-top:1px solid #e5e5e5; }
.notes-only-section { margin-top:0; padding-top:0; border-top:0; }
.highlight-menu button { min-width:176px; }
.drawer-section h3 { margin:0 0 10px; font-size:14px; }
.drawer-empty { padding:12px; background:#f7f7f7; color:#666; font-size:13px; line-height:1.45; border-radius:4px; }
.drawer-empty.compact { padding:8px 10px; }
.note-card { border:1px solid #d6d6d6; border-radius:5px; overflow:hidden; margin-bottom:12px; }
.note-card.is-active { border-color:#788ce7; box-shadow:0 0 0 2px rgba(83,107,214,.12); }
.annotation-jump { width:100%; border:0; background:#f7f8fb; padding:8px 10px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:2px; }
.annotation-jump:hover { background:#eef1fb; }
.annotation-jump strong { font-size:11px; color:#536bd6; }
.annotation-jump span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%; font-size:13px; }
.note-editor { display:block; width:calc(100% - 16px); min-height:80px; margin:8px; resize:vertical; border:1px solid #bdbdbd; border-radius:3px; padding:8px; font:14px/1.45 var(--font-ui); outline:none; }
.note-editor:focus { border-color:var(--blue); box-shadow:0 0 0 2px rgba(65,142,200,.12); }
.annotation-delete { display:block; margin:0 8px 8px auto; border:0; background:transparent; font-size:12px; cursor:pointer; text-decoration:underline; }
.highlight-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px; align-items:center; border:1px solid #e0d2d6; border-left:4px solid #a4293f; border-radius:4px; margin-bottom:8px; overflow:hidden; }
.highlight-card .annotation-jump { background:#fff8fa; }
.highlight-card .annotation-jump strong { color:#a4293f; }
.highlight-remove { width:32px; height:32px; border:0; background:transparent; cursor:pointer; font-size:19px; }

.delete-confirm { width:min(430px,100%); background:#fff; border-radius:7px; padding:22px; box-shadow:var(--shadow-modal); }
.delete-confirm h2 { margin:0 0 10px; font-size:20px; }
.delete-confirm blockquote { margin:10px 0; padding:10px 12px; border-left:3px solid #888; background:#f6f6f6; font-size:14px; }
.delete-confirm p { color:#666; }
.confirm-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.confirm-actions button { border:1px solid #bbb; background:#fff; padding:8px 14px; border-radius:4px; cursor:pointer; }
.confirm-actions .danger { background:#b72f3d; border-color:#b72f3d; color:#fff; }

.source-rich-template { line-height:1.7; }
.source-rich-template figure { margin:0; }
.source-rich-template table { width:100%; border-collapse:collapse; }
.source-rich-template td, .source-rich-template th { border:1px solid #747474; padding:9px 10px; vertical-align:top; }
.source-rich-template h3 { margin:0; font-size:16px; }
.source-rich-template p { margin:5px 0; }
.source-rich-template ul, .source-rich-template ol { margin:6px 0; padding-left:22px; }
.source-rich-template li { margin:5px 0; }
.source-rich-template .slot-wrap { margin:0 4px; }
.short-answer-completion li { margin:10px 0; }

.detailed-explanation { width:min(820px,100%); font-family:var(--font-explanation); }
.detailed-explanation, .detailed-explanation * { font-family:var(--font-explanation) !important; }
.explain-section-label { color:#777; font-size:11px; text-transform:uppercase; letter-spacing:.07em; font-weight:800; margin-bottom:5px; }
.explain-strategy { margin:14px 0 18px; border:1px solid #dbe5ed; background:#f6fafc; padding:14px 16px; border-radius:5px; }
.explain-strategy h3 { margin:0 0 8px; font-size:16px; }
.explain-strategy ol { margin:0; padding-left:21px; }
.explain-strategy li { margin:6px 0; line-height:1.5; }
.source-explanation { border-top:1px solid #ddd; padding-top:16px; }
.source-explanation-body { line-height:1.62; background:#fafafa; border-left:4px solid #333; padding:14px 16px; }
.source-explanation-body p { margin:7px 0; }
.source-explanation-body ul, .source-explanation-body ol { padding-left:22px; }
.source-explanation-body strong { font-weight:800; }

@media (max-width: 1100px) {
  .notes-drawer { width:320px; flex-basis:320px; }
}
@media (max-width: 820px) {
  .reading-app { display:block; overflow:auto; }
  .notes-drawer { position:fixed; inset:0 0 0 auto; z-index:25; width:min(360px,92vw); height:100vh; box-shadow:-12px 0 34px rgba(0,0,0,.2); }
}


.start-screen{width:100%;height:100%;display:grid;place-items:center;padding:24px;background:#f7f7f7;overflow:auto;}
.start-card{width:min(860px,100%);background:#fff;border:1px solid #d6d6d6;border-radius:8px;padding:28px;}
.start-card { display:grid; gap:18px; }
.start-brand { display:flex; align-items:center; gap:16px; border-bottom:1px solid #e4e4e4; padding-bottom:18px; }
.start-brand img { height:44px; width:auto; max-width:280px; object-fit:contain; }
.start-brand div { display:flex; flex-direction:column; gap:2px; }
.start-brand strong { font-size:13px; }
.start-brand span { font-size:11px; color:var(--muted); letter-spacing:.08em; }
.start-card h1 { margin:0; font-size:28px; }
.entry-heading { display:grid; gap:8px; }
.entry-heading p { margin:0; color:#444; line-height:1.55; }
.start-meta { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; background:var(--surface); padding:14px; border:1px solid #d7d7d7; border-radius:4px; }
.start-meta small { color:var(--muted); display:block; margin-top:2px; }
.mode-picker { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mode-card { border:1px solid #cfcfcf; border-radius:5px; padding:12px 14px; display:flex; align-items:flex-start; gap:10px; cursor:pointer; background:#fff; }
.mode-card:hover { border-color:#999; background:#fafafa; }
.mode-card.is-selected { border-color:var(--blue); box-shadow:0 0 0 2px rgba(65,142,200,.12); background:#f7fbfe; }
.mode-card input { margin-top:3px; accent-color:var(--blue); }
.mode-card span { display:flex; flex-direction:column; gap:2px; }
.mode-card small { color:var(--muted); line-height:1.35; }
.saved-mode { display:flex; align-items:center; gap:8px; border:1px solid #d7d7d7; background:#fafafa; padding:9px 12px; border-radius:4px; width:max-content; }
.saved-mode span { color:#777; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.entry-rule { margin-top:5px !important; }
.start-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.autosave-note { color:#666; font-size:13px; }
.entry-buttons { margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.entry-btn { min-width:150px; border:1px solid #aaa; background:#fff; color:#111; padding:11px 16px; border-radius:4px; cursor:pointer; font-weight:800; }
.entry-btn:hover { background:#f2f2f2; }
.entry-btn.primary { min-width:180px; background:#111; color:#fff; border-color:#111; }
.entry-btn.primary:hover { background:#000; }
.entry-btn.danger { background:#a72c38; color:#fff; border-color:#a72c38; }
.entry-btn.danger:hover { background:#922530; }
.entry-btn[disabled] { opacity:.6; cursor:wait; }
.entry-alert { border:1px solid #d69a9a; border-left:4px solid var(--red); background:#fff6f6; padding:12px 14px; border-radius:4px; display:grid; gap:5px; }
.entry-alert strong { color:#9d2531; }
.entry-alert p { margin:0; white-space:pre-wrap; line-height:1.45; font-size:13px; }
.entry-alert small { color:#666; line-height:1.45; }
.restart-confirm { border:1px solid #d7b757; background:#fff9e7; border-radius:4px; padding:13px 14px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.restart-confirm > div:first-child { display:grid; gap:3px; }
.restart-confirm span { color:#665f4a; font-size:13px; }
.restart-confirm-actions { display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
.test-picker-label { min-height:38px; display:flex; align-items:center; gap:5px; border:1px solid #c8c8c8; border-radius:4px; padding:4px 7px; background:#fff; }
.test-picker-label > span { font-size:10px; color:#777; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }

/* Writing-specific, source-native IPA exam layout adapter.
   Shared Exam structure/styles originate from IPA Reading v4.4;
   entry controls from IPA Listening v1.4.10. */
:root{--topbar-h:64px;--footer-h:62px;--surface:#f1f2ec;--blue:#418ec8;--line:#c9c9c9}
.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
#app,.app-shell{height:100%;min-height:0}.start-screen{height:100%;min-height:0}.start-card{box-shadow:0 12px 34px #00000009}
.start-brand{gap:14px}.start-brand .ipa-logo{height:auto;width:260px;max-width:50%}.entry-year{font-weight:800;font-size:14px;color:#3a3a3a;border:1px solid #ccc;padding:6px 10px;border-radius:3px}
.mode-picker{grid-template-columns:repeat(3,minmax(0,1fr))}.mode-card{min-height:80px;text-align:left}.mode-card span strong{font-size:14px}.mode-card input{pointer-events:none}
.selection-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.selection-grid label{font-size:12px;font-weight:700;display:flex;flex-direction:column;gap:6px}.selection-grid label:first-child{grid-column:1/-1}.selection-grid label small,.count-meta{font-size:11px;font-weight:400;color:#777}.selection-grid input,.selection-grid select{min-width:0;width:100%;height:40px;border:1px solid #bbb;border-radius:4px;padding:0 10px;background:white;font-size:13px;color:#181818}
.selection-grid select{font-size:12px}.entry-heading h1{font-size:25px}.start-actions{margin-top:2px}.entry-buttons{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}.entry-buttons .entry-btn{min-width:0}.autosave-note{max-width:430px;margin:0;font-size:12px;line-height:1.45}.saved-notice{display:flex;justify-content:space-between;align-items:center;gap:14px;background:#f6f9fb;border:1px solid #bdd4e3;padding:10px 14px;border-radius:4px}.saved-notice p{margin:4px 0 0;font-size:12px}.saved-buttons{display:flex;gap:7px}.saved-buttons .entry-btn{min-width:0;padding:9px 13px;font-size:12px}
.exam-shell{height:100%;min-height:0;overflow:hidden;grid-template-rows:64px auto minmax(0,1fr) 62px}
.exam-shell>.topbar{min-height:64px;max-height:64px;padding:8px 15px;gap:16px}.exam-shell .brand-logo{height:39px;max-width:240px}.exam-shell .test-meta{min-width:0;flex:1}.exam-shell .test-meta strong{font-size:15px;max-width:100%}.exam-shell .test-meta span{font-size:12px;color:#666}.exam-shell .top-actions{gap:9px}
.ipa-clock{display:flex;align-items:center;gap:8px;margin-right:8px;white-space:nowrap}.ipa-clock small{font-size:10px;font-weight:700;color:#777;letter-spacing:.06em}.ipa-clock strong{font-variant-numeric:tabular-nums;font-size:23px;line-height:1.1;letter-spacing:.02em}.ipa-clock strong.warning{color:#a82828}
.ipa-action{height:37px;border:1px solid #a6a6a6;background:#fff;padding:0 13px;min-width:0;border-radius:4px;font-weight:750;font-size:12px;cursor:pointer}.ipa-action:hover{background:#f3f3f3}.ipa-action.ipa-submit{background:#111;border-color:#111;color:#fff}.ipa-action.ipa-submit:hover{background:#333}
.exam-shell>.part-banner{margin:12px 16px;padding:9px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}.part-banner>div:first-child{display:flex;flex-direction:column}.part-banner strong{font-size:16px}.part-banner span{font-size:13px}.ipa-banner-meta{font-weight:800;font-size:11px;color:#666;white-space:nowrap}
.exam-shell>.workspace{display:flex;min-height:0;overflow:hidden;padding:0 16px 12px}.workspace .pane{min-height:0;flex-grow:1;flex-shrink:1}.workspace .pane-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}.passage-pane .pane-scroll{padding:6px 18px 24px 5px}.question-pane .pane-scroll{padding:0}
.ipa-paper{max-width:810px;margin:0 auto;line-height:1.6}.ipa-paper-label{color:#666;font-weight:800;font-size:12px;letter-spacing:.04em;margin:0 0 12px}.ipa-question-text{font-size:16px;line-height:1.58;white-space:pre-wrap;overflow-wrap:break-word}.ipa-visual{margin:18px 0 14px}.ipa-image-button{background:#fff;width:100%;border:1px solid #ccc;padding:14px 12px;display:flex;align-items:center;flex-direction:column;gap:8px;cursor:zoom-in}.ipa-image-button:hover{border-color:#888}.ipa-image-button img{display:block;width:100%;max-height:65vh;object-fit:contain}.ipa-image-button span{font-size:11px;color:#666}.ipa-minimum{font-size:15px;font-weight:800;padding-top:14px;border-top:1px solid #ddd}
.workspace>.splitter{width:30px;flex:0 0 30px}.ipa-answer-pane{border-left:0}.ipa-answer-heading{border-bottom:1px solid #ddd;padding:9px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:57px}.ipa-answer-heading strong{display:block;font-size:15px}.ipa-answer-heading small{font-size:11px;color:#777;display:block}.ipa-wordcount{font-size:12px;font-weight:800;color:#666;padding:6px 9px;background:#f4f4f4;border:1px solid #ddd;border-radius:3px;white-space:nowrap}.ipa-wordcount.passed{color:#1e6e3b;background:#ecf7f0;border-color:#b8d9c5}.ipa-editor{border:0;resize:none;outline:none;width:100%;height:calc(100% - 96px);overflow:auto;display:block;padding:18px 19px;font:16px/1.83 Arial,Helvetica,sans-serif;letter-spacing:.005em;color:#111;background:white;min-height:0}.ipa-editor:focus{box-shadow:inset 0 0 0 1px #a0c7e4}.ipa-editor::placeholder{color:#aaa}.ipa-answer-status{height:39px;border-top:1px solid #ddd;padding:0 12px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;color:#777}
.exam-shell>.bottom-nav{height:62px;min-height:62px;display:flex;align-items:stretch;justify-content:space-between}.bottom-nav .part-tabs{flex:1;display:flex;align-items:stretch}.bottom-nav .part-tab{min-width:188px;font-weight:700;font-size:13px;text-align:left}.bottom-nav .part-tab.active{background:#e7f1f9;border-bottom:3px solid #418ec8}.bottom-nav .part-tab span{font-weight:400;color:#666;font-size:11px;margin-left:6px}.ipa-footer-meta{display:flex;align-items:center;padding:0 18px;color:#888;font-size:11px;white-space:nowrap}
.ipa-complete{width:min(650px,100%)}.ipa-complete h1{font-size:26px}.ipa-complete>p{margin:0;color:#555}.ipa-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.summary-item{border:1px solid #ddd;background:#fafafa;padding:13px}.summary-item strong{font-size:22px;display:block}.summary-item small{display:block;color:#666}
.ipa-modal{position:fixed;z-index:30;inset:0;background:#000b;padding:20px;display:grid;place-items:center}.ipa-modal-inner{background:#fff;border-radius:4px;width:min(96vw,1500px);height:min(94vh,1050px);display:flex;flex-direction:column;overflow:hidden}.ipa-modal-top{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #ddd}.ipa-modal-inner>img{width:100%;height:calc(100% - 60px);object-fit:contain;padding:10px}
@media(max-width:1000px){.exam-shell>.topbar{gap:8px}.exam-shell .brand-logo{max-width:180px;height:auto}.ipa-clock{gap:4px}.ipa-clock small{display:none}.ipa-action{padding:0 8px}.ipa-footer-meta{display:none}}
@media(max-width:768px){body{overflow:hidden}.exam-shell{height:100%;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}.exam-shell>.topbar{max-height:none;min-height:65px;flex-wrap:nowrap;align-items:center}.exam-shell .test-meta{min-width:0;flex:1}.exam-shell .test-meta span{display:none}.exam-shell .top-actions{width:auto;flex:0 0 auto;margin-left:auto}.ipa-action{font-size:11px}.exam-shell>.workspace{display:flex;flex-direction:column;overflow:hidden;padding:0 10px 8px;gap:7px}.workspace>.pane{min-height:0;width:100%;flex:1 1 auto}.workspace>.passage-pane{flex:0 0 42%!important}.workspace>.ipa-answer-pane{flex:1 1 auto!important}.workspace .pane-scroll{position:absolute;inset:0;max-height:none;overflow:auto}.workspace>.splitter{display:none}.ipa-answer-pane .ipa-editor{height:calc(100% - 96px)}.bottom-nav .part-tab{min-width:140px;padding:0 12px}.entry-year{display:none}.start-screen{padding:12px;overflow:auto;display:flex;align-items:flex-start;justify-content:center}.start-card{margin:auto;padding:16px}.mode-picker{grid-template-columns:1fr}.selection-grid{grid-template-columns:1fr}.selection-grid label:first-child{grid-column:auto}}
@media(max-width:520px){.exam-shell>.topbar{gap:4px;padding:7px}.exam-shell .brand-logo{max-width:115px}.exam-shell .test-meta strong{font-size:11px}.exam-shell .ipa-clock strong{font-size:18px}.exam-shell .ipa-action{font-size:10px;padding:0 6px;height:30px}.exam-shell>.part-banner{margin:7px 8px;padding:8px}.ipa-paper-label{margin-bottom:3px}.ipa-question-text{font-size:14px}.ipa-answer-heading{padding:7px}.ipa-editor{font-size:14px;padding:10px}.ipa-footer-meta{display:none}.bottom-nav .part-tab{min-width:50%;font-size:11px}.start-brand .ipa-logo{max-width:100%}.start-brand{flex-direction:column;align-items:flex-start}.entry-buttons{justify-content:stretch}.entry-buttons .entry-btn{flex:1}}
@media(max-width:520px){.exam-shell .test-meta{display:none}.exam-shell .brand-block{flex:0 0 auto}.exam-shell .top-actions{margin-left:auto}}

/* Checkpoint 22 Oct: equal-size test mode cards and compact question-only previews. */
.mode-picker{align-items:stretch;gap:10px}
.mode-card{min-width:0;min-height:76px;display:flex;align-items:center;gap:10px;padding:12px!important}
.mode-card>span{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0}
.mode-card span strong{line-height:1.25}.mode-card span small{line-height:1.35}
.selection-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:11px;align-items:start}
.question-preview{min-width:0;padding:12px 13px;background:#f8f9f9;border:1px solid #d6d8db;border-radius:4px;line-height:1.45}
.preview-top{display:flex;justify-content:space-between;gap:9px;align-items:baseline;flex-wrap:wrap;border-bottom:1px solid #e1e3e5;padding-bottom:7px}
.preview-top strong{font-size:12px}.preview-top span{font-size:11px;color:#777}
.question-preview p{margin:8px 0 0;white-space:pre-line;font-size:12px;line-height:1.5;color:#30343a}
.preview-image{display:block;width:100%;max-height:120px;object-fit:contain;object-position:left center;margin-top:10px;background:#fff;border:1px solid #e3e3e3}
.ipa-submission-status{border:1px solid #c3ccd5;background:#f5f8fa;padding:12px;font-size:13px}
.ipa-submission-status[data-state="confirmed"]{border-color:#92c0a4;background:#f1f9f3}
.ipa-submission-status[data-state="pending"]{border-color:#e3cda1;background:#fffbf2}
@media(max-width:768px){.mode-picker{grid-template-columns:1fr}.selection-preview{grid-template-columns:1fr}.question-preview{padding:10px}.preview-image{max-height:95px}}

/* Google Forms manual PDF-submission completion state; IPA exam shell stays unchanged. */
.ipa-complete{width:min(770px,100%)}
.ipa-submission-steps{font-size:13px;line-height:1.5;color:#333;border:1px solid #d9dee3;border-radius:4px;background:#f8fafc;padding:6px 14px}
.ipa-submission-steps p{margin:7px 0}
.ipa-pdf-status{font-size:12px;color:#596774;margin:2px 0;padding:8px;border-left:3px solid #aac5d5}
.ipa-pdf-status[data-state="ready"]{border-color:#54956b;background:#eff8f0}
.ipa-pdf-status[data-state="error"]{border-color:#c54b36;color:#7d2922;background:#fff5f2}
.ipa-form-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#162f46;background:#e6f0f8;border-color:#adc8db;font-weight:800;min-height:40px}
.ipa-form-link:hover{background:#d8e8f4}
.ipa-backup{padding:6px 0;font-size:12px;color:#566}.ipa-backup>summary{cursor:pointer;font-weight:650}.ipa-backup .entry-buttons{padding:9px 0}
.ipa-submission-buttons{display:flex;gap:10px;flex-wrap:wrap}.ipa-submission-buttons>*{flex:1 1 230px}
@media(max-width:520px){.ipa-submission-buttons>*{flex:1 1 100%}.ipa-complete{padding:15px}}