.question-card{padding:30px;border:1px solid #171717;border-radius:18px;background:#f8f8f8}.question-top{margin-bottom:20px}.question-number{display:inline-grid;place-items:center;min-width:61px;height:39px;padding:0 12px;border-radius:9px;background:#050505;color:#fff;font-size:18px;font-weight:900;letter-spacing:-.5px}.question-image{border-color:#d5d5d5;border-radius:11px;background:#fff}.submission-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:25px}.take-photo,.unlock-button,.memo-button{height:53px;border-radius:9px;font-size:16px;font-weight:800}.take-photo{display:inline-flex;align-items:center;gap:10px;padding:0 19px;border:1px solid #d0d0d0;background:#fff;color:#596371}.take-photo span{font-size:19px}.take-photo input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.unlock-button,.memo-button{min-width:226px;padding:0 19px;border:1px solid #111;background:#111;color:#fff}.unlock-button:disabled{border-color:#d0d0d0;background:#fafafa;color:#a5abb2;cursor:not-allowed}.submission-row.submitted{padding:13px 0 0;color:var(--good);font-size:14px;font-weight:800}.memo-button{height:43px;min-width:184px;background:#111;font-size:13px}.marks{font-size:13px}@media(max-width:620px){.question-card{padding:18px}.submission-row{align-items:stretch;flex-direction:column;gap:12px}.take-photo,.unlock-button{width:100%;justify-content:center}.unlock-button,.memo-button{min-width:0}.submission-row.submitted{align-items:flex-start}.memo-button{width:100%}}
/* Practice previews should show the original question clearly before it is opened. */
.intro-preview {
  height: auto;
  max-height: 430px;
  padding: 12px;
  background: #fff;
}

.intro-preview img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

/* One-question practice view: consistent card, clean source image, no stretching. */
.focused-question {
  max-width: 780px;
  margin: 0 auto 16px;
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.focused-question .question-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 24px;
  border-bottom: 1px solid #e2e5e8;
  background: #f4f6f8;
}

.question-progress strong { color: #203647; font-size: 16px; }
.question-progress span { color: #697682; font-size: 12px; font-weight: 700; }
.focused-question .question-top { margin: 0; padding: 20px 24px 15px; }
.question-image-stage { display: flex; justify-content: center; padding: 0 24px; background: #fff; }

.focused-question .question-image {
  display: block;
  width: 100%;
  max-height: none;
  border: 1px solid #d9dde1;
  border-radius: 10px;
  background: #fff;
  object-fit: contain;
  image-rendering: auto;
}

.focused-question .submission-row { margin: 0; padding: 22px 24px 25px; }
.question-scroll { display: grid; gap: 18px; }
.question-scroll .focused-question { margin: 0 auto; }
.question-pager { display: flex; align-items: center; justify-content: center; gap: 15px; max-width: 780px; margin: 0 auto; color: #66727d; font-size: 13px; font-weight: 800; }
.pager-button { min-width: 120px; padding: 11px 14px; border: 1px solid #cfd5d9; border-radius: 9px; background: #fff; color: #27313a; font-size: 13px; font-weight: 900; }
.pager-button.dark { border-color: #111; background: #111; color: #fff; }
.pager-button:disabled { opacity: .38; cursor: not-allowed; }

@media (max-width: 620px) {
  .focused-question .question-progress { align-items: flex-start; flex-direction: column; gap: 4px; padding: 15px; }
  .focused-question .question-top { padding: 16px 15px 12px; }
  .question-image-stage { padding: 0 15px; }
  .focused-question .submission-row { padding: 17px 15px; }
  .question-pager { gap: 8px; }
  .pager-button { min-width: 0; flex: 1; padding: 11px 8px; }
}

/* Statistics uses one answer submission for each numbered subquestion. */
.submission-stack {
  margin-top: 24px;
  border-top: 1px solid #d9dde1;
  background: #fbfbfb;
}

.submission-stack-heading {
  padding: 15px 24px;
  color: #53606b;
  background: #f4f6f8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .25px;
  text-transform: uppercase;
}

.focused-question .submission-stack .submission-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) minmax(180px, 226px);
  gap: 14px;
  margin: 0;
  padding: 15px 24px;
  border-top: 1px solid #e2e5e8;
}

.submission-part-label {
  display: inline-flex;
  align-items: center;
  color: #203647;
  font-size: 13px;
  font-weight: 900;
}

.submission-stack .take-photo,
.submission-stack .unlock-button {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

@media (max-width: 620px) {
  .submission-stack-heading { padding: 14px 15px; }
  .focused-question .submission-stack .submission-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 15px;
  }
  .submission-part-label { min-height: 22px; }
}

/* Learner identity and private teacher review. */
.topbar-actions{display:flex;align-items:center;gap:8px}.learner-chip{max-width:150px;overflow:hidden;border:1px solid var(--line);border-radius:999px;padding:7px 11px;background:#f5f6f7;color:#202a34;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:800}.learner-signin-overlay{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:18px;background:rgba(10,14,18,.78);backdrop-filter:blur(5px)}.learner-signin-card{width:min(430px,100%);padding:27px;border-radius:20px;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.3)}.signin-brand{display:flex;align-items:center;gap:9px;margin-bottom:20px}.signin-brand i{display:grid;width:36px;height:36px;place-items:center;border-radius:10px;background:#111;font-style:normal}.learner-signin-card h1{margin:0 0 9px;font-size:27px;line-height:1.08;letter-spacing:-.8px}.learner-signin-card>p:not(.eyebrow){margin:0 0 21px;color:#5f6b76;font-size:14px;line-height:1.5}.learner-signin-card form{display:grid;gap:13px}.learner-signin-card label{display:grid;gap:6px;color:#26313b;font-size:12px;font-weight:900}.learner-signin-card input{width:100%;padding:12px;border:1px solid #cfd5da;border-radius:9px;background:#fff;color:#111;font-size:16px;outline:none}.learner-signin-card input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(0,0,0,.08)}.learner-signin-card form>button{min-height:46px;border:0;border-radius:9px;background:#111;color:#fff;font-weight:900}.learner-signin-card form>button:disabled{opacity:.55}.learner-signin-card form>.signin-cancel{border:1px solid #d5d9dd;background:#fff;color:#27313a}.signin-error{min-height:18px;color:#b42318;font-size:12px;font-weight:800}.teacher-dashboard{max-width:900px;margin:0 auto}.teacher-dashboard-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.teacher-dashboard-heading h1{margin-bottom:8px}.teacher-dashboard-heading p{margin:0;color:#65717c;font-size:14px}.submission-summary{margin:20px 0 10px;padding:12px 14px;border-radius:10px;background:#f3f5f6;color:#52606b;font-size:13px;font-weight:800}.teacher-submission-list{display:grid;border:1px solid #e0e4e7;border-radius:13px;overflow:hidden}.teacher-submission{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px;border-bottom:1px solid #e6e9eb;background:#fff}.teacher-submission:last-child{border-bottom:0}.teacher-submission>div{display:grid;gap:4px;min-width:0}.teacher-submission strong{font-size:15px}.teacher-submission span{color:#4e5c68;font-size:13px}.teacher-submission time{color:#7a858f;font-size:11px}.teacher-submission button{flex:0 0 auto}
@media(max-width:620px){.topbar{padding:0 10px}.brand{gap:6px}.brand span{display:none}.topbar-actions{gap:5px}.learner-chip{max-width:92px;padding:6px 8px;font-size:10px}.admin-toggle{padding:7px 8px;font-size:10px}.learner-signin-card{padding:22px 18px;border-radius:16px}.learner-signin-card h1{font-size:23px}.teacher-dashboard{padding:18px 12px}.teacher-dashboard-heading{display:block}.teacher-dashboard-heading button{width:100%;margin-top:14px}.teacher-submission{align-items:stretch;flex-direction:column}.teacher-submission button{width:100%}}

/* Clean NSC-style pages transcribed from the uploaded Number Patterns document. */
.typed-question-page {
  padding: 8px 24px 26px;
  background: #fff;
  color: #111;
}
.typed-question-sheet {
  max-width: 920px;
  min-height: 520px;
  margin: 0 auto;
  padding: 24px 18px 30px;
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(10px, 2.06vw, 19px);
  line-height: 1.48;
}
.typed-question-title {
  margin: 0 0 1.3em;
  font-size: 1.26em;
  font-weight: 700;
  letter-spacing: .15px;
}
.exam-intro {
  margin: 1.1em 0 .9em;
  padding-left: 4.3em;
}
.exam-intro-section { margin-top: 2.8em; }
.exam-question-gap { height: 1.35em; }
.typed-question-title + .exam-intro { margin-top: 0; }
.exam-note {
  display: inline-block;
  margin-top: .8em;
  font-weight: 700;
}
.exam-row {
  display: grid;
  grid-template-columns: 3.55em minmax(0, 1fr) 2.2em;
  column-gap: .75em;
  align-items: start;
  margin: 1em 0;
}
.exam-row-empty { min-height: 4rem; }
.exam-number,
.exam-marks { font-weight: 400; }
.exam-marks {
  justify-self: end;
  white-space: nowrap;
}
.exam-copy { min-width: 0; }
.exam-expression {
  display: inline-block;
  margin: 0 3px;
  white-space: nowrap;
}
.exam-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-width: 1.15em;
  margin: 0 .14em;
  vertical-align: middle;
  text-align: center;
  font-size: .88em;
  line-height: .88;
}
.exam-frac > span { display: block; padding: 0 .12em; }
.exam-frac > span:first-child { padding-bottom: .08em; border-bottom: 1px solid currentColor; }
.exam-frac > span:last-child { padding-top: .08em; }
.exam-sigma {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 1.85em;
  margin: 0 .3em 0 .14em;
  vertical-align: middle;
  line-height: 1;
}
.exam-sigma-upper,
.exam-sigma-lower {
  display: block;
  min-height: .62em;
  font-size: .62em;
  line-height: 1;
  white-space: nowrap;
}
.exam-sigma-upper { margin-bottom: -.08em; }
.exam-sigma-symbol {
  display: block;
  font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
  font-size: 2.08em;
  font-weight: 400;
  line-height: .72;
}
.exam-sigma-lower { margin-top: -.02em; }
.exam-sigma-body { display: inline-block; margin-left: .05em; vertical-align: middle; white-space: nowrap; }

@media (max-width: 620px) {
  .typed-question-page { padding: 2px 10px 18px; }
  .typed-question-sheet { min-height: 0; padding: 18px 5px 24px; line-height: 1.45; }
  .exam-expression { white-space: normal; }
}

/* Past-paper Number Patterns scans use the full phone width; tapping the image opens it. */
.number-pattern-scan-stage {
  position: relative;
  padding: 0 10px;
}
.number-pattern-scan-image {
  image-rendering: -webkit-optimize-contrast;
  filter: contrast(1.12);
}
.focused-question.functions-high-resolution-card .question-image,
.focused-question.calculus-high-resolution-card .question-image {
  width: auto;
  max-width: 100%;
  height: auto;
  image-rendering: auto;
  filter: none;
}
.modal-close {
  position: fixed;
  z-index: 2;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #111;
  box-shadow: 0 5px 18px rgba(0,0,0,.32);
  font-size: 28px;
  line-height: 1;
}
.readable-scan-modal {
  display: block;
  place-items: initial;
  align-items: initial;
  justify-items: initial;
  overflow: auto;
  padding: 70px 24px 36px;
  text-align: left;
  overscroll-behavior: contain;
}
.readable-scan-modal img {
  display: block;
  width: max(920px, 100%);
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0 auto;
  background: #fff;
}

@media (max-width: 620px) {
  .number-pattern-scan-card {
    width: calc(100% + 28px);
    max-width: none;
    margin-left: -14px;
    margin-right: -14px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }
  .number-pattern-scan-stage { padding: 0 4px; }
  .number-pattern-scan-stage .question-image {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }
  .readable-scan-modal { padding: 64px 0 32px; }
  .readable-scan-modal img {
    width: 860px;
    position: relative;
    left: 0;
    margin: 0;
  }
}