.activity-card, .checkpoint-card, .assessment-card, .assignment-card {
  margin-top: var(--section-gap);
  padding: var(--space-6);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-xl);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.activity-card { border-top: 5px solid var(--blue-700); }
.activity-card select { min-height: 44px; }
.checkpoint-card { border-top: 5px solid var(--red-700); }
.assessment-card { border-top: 5px solid var(--amber-700); }
.assignment-card { border-top: 5px solid var(--green-700); }
.activity-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.activity-head h2 { margin: var(--space-1) 0 0; font: 700 var(--text-2xl)/1.2 var(--font-display); }
.activity-head p { margin: var(--space-2) 0 0; color: var(--ink-600); }
.activity-tag { flex: 0 0 auto; padding: .38rem .6rem; border-radius: var(--radius-pill); color: var(--blue-800); background: var(--blue-50); font: 700 .68rem/1 var(--font-mono); text-transform: uppercase; }
.activity-criteria { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-4); margin: calc(var(--space-2) * -1) 0 var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--ink-200); border-left: 4px solid var(--green-700); border-radius: var(--radius-md); background: var(--ink-50); }
.activity-criteria p { margin: 2px 0 0; color: var(--green-800); font: 700 .68rem/1.25 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.activity-criteria ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; }
.activity-criteria li { display: flex; gap: var(--space-2); color: var(--ink-700); font-size: var(--text-sm); }
.activity-criteria li::before { content: "✓"; flex: 0 0 auto; color: var(--green-700); font-weight: 800; }
.activity-feedback { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); color: var(--ink-700); background: var(--ink-50); border: 1px solid var(--ink-100); }
.activity-feedback.is-success { color: var(--green-800); background: var(--green-50); border-color: var(--green-100); }
.activity-feedback.is-error { color: var(--red-800); background: var(--red-50); border-color: var(--red-100); }
.activity-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.activity-actions .activity-hint { margin-left: auto; color: var(--ink-500); font-size: var(--text-sm); }

.drag-handle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--ink-500);
  cursor: grab;
  font: 700 var(--text-sm)/1 var(--font-mono);
  touch-action: none;
  user-select: none;
}
.drag-handle:active { cursor: grabbing; }
.is-sortable-ghost { opacity: .3; }
.is-sortable-chosen { border-color: var(--blue-700) !important; box-shadow: var(--shadow-focus) !important; }
.is-sortable-dragging { cursor: grabbing; }

.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.choice-card, .token-choice, .scenario-card {
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
  background: var(--paper);
  text-align: left;
  cursor: pointer;
}
.choice-card:hover, .token-choice:hover, .scenario-card:hover { border-color: var(--blue-700); background: var(--blue-50); }
.choice-card[aria-pressed="true"], .token-choice[aria-pressed="true"], .scenario-card[aria-pressed="true"] { border-color: var(--blue-700); background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--blue-700); }
.choice-card.is-correct { border-color: var(--green-700); background: var(--green-50); }
.choice-card.is-wrong { border-color: var(--red-700); background: var(--red-50); }
.choice-card b { display: block; margin-bottom: 2px; }
.choice-card small { color: var(--ink-600); }

.classify-workspace { display: grid; gap: var(--space-5); }
.classify-dropzone { transition: border-color 160ms var(--ease), background-color 160ms var(--ease); }
.case-bank { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); min-height: 68px; margin-top: var(--space-2); padding: var(--space-3); border: 1px dashed var(--ink-300); border-radius: var(--radius-md); background: var(--ink-50); }
.case-token { min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-2); padding: .5rem .7rem .5rem .45rem; border: 1px solid var(--ink-200); border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--shadow-sm); cursor: grab; font-size: var(--text-sm); text-align: left; touch-action: none; user-select: none; }
.case-token:active { cursor: grabbing; }
.case-token .drag-handle { width: 26px; height: 26px; border-right: 1px solid var(--ink-200); pointer-events: none; }
.case-token:hover { border-color: var(--blue-700); background: var(--blue-50); }
.case-token[aria-pressed="true"] { color: var(--paper); background: var(--ink-950); border-color: var(--ink-950); }
.case-token[aria-pressed="true"] .drag-handle { color: #dbe6f5; border-right-color: rgb(255 255 255 / .2); }
.classify-zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.classify-zone { min-height: 150px; padding: var(--space-3); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); background: var(--paper); }
.classify-zone h3 { margin: 0; font: 700 var(--text-md)/1.3 var(--font-display); }
.classify-zone p { margin: .25rem 0 var(--space-3); color: var(--ink-500); font-size: var(--text-xs); }
.classify-zone__place { width: 100%; margin-bottom: var(--space-2); }
.classify-zone__items { min-height: 62px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--space-2); padding: var(--space-2); border: 1px dashed var(--ink-200); border-radius: var(--radius-md); background: var(--ink-50); }
.dropzone-empty { align-self: center; margin: auto; color: var(--ink-500); font-size: var(--text-xs); pointer-events: none; }
.classify-zone .case-token { white-space: normal; }
.classify-zone.is-target { border-color: var(--blue-700); background: var(--blue-50); }
.activity-card.is-dragging .classify-dropzone { border-color: var(--blue-700); background: var(--blue-50); }

.sequence-board { display: grid; gap: var(--space-2); }
.sequence-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--ink-200); border-radius: var(--radius-md); background: var(--paper); cursor: grab; touch-action: none; user-select: none; }
.sequence-item:active { cursor: grabbing; }
.sequence-item__number { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--paper); background: var(--ink-950); font: 700 var(--text-xs)/1 var(--font-mono); }
.sequence-item > .drag-handle { width: 40px; height: 40px; border: 1px dashed var(--ink-300); border-radius: var(--radius-sm); background: var(--ink-50); }
.sequence-item.is-sortable-chosen { background: var(--blue-50); }

.match-board { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-4); }
.match-prompts, .match-options { display: grid; gap: var(--space-2); }
.match-prompt { padding: var(--space-3); border-left: 3px solid var(--red-700); background: var(--ink-50); }
.match-prompt b { display: block; margin-bottom: var(--space-2); }
.match-prompt select { width: 100%; min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--ink-200); border-radius: var(--radius-sm); color: var(--ink-950); background: var(--paper); }
.match-option { padding: var(--space-3); border: 1px solid var(--ink-200); border-radius: var(--radius-md); color: var(--ink-700); background: var(--paper); font-size: var(--text-sm); }
.match-option code { color: var(--red-800); }

.attention-lab { overflow: hidden; border: 1px solid var(--ink-200); border-radius: var(--radius-lg); }
.attention-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3); color: var(--paper); background: var(--ink-950); }
.attention-toolbar span { margin-right: auto; font: 700 var(--text-xs)/1 var(--font-mono); text-transform: uppercase; }
.head-button { min-height: var(--control-min); padding: .45rem .7rem; border: 1px solid rgb(255 255 255 / .25); border-radius: var(--radius-pill); color: #d9e7fa; background: transparent; cursor: pointer; font-size: var(--text-xs); }
.head-button[aria-pressed="true"] { color: var(--ink-950); background: var(--paper); }
.head-button:disabled { cursor: not-allowed; opacity: .45; }
.attention-canvas { position: relative; min-height: 270px; padding: var(--space-8) var(--space-5); background: var(--ink-50); }
.attention-map { position: relative; min-height: 174px; padding-bottom: 132px; }
.sentence-tokens { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.token-choice { min-height: 44px; padding: .55rem .7rem; font: 700 var(--text-md)/1 var(--font-mono); text-align: center; }
.token-choice[data-focus="true"] { color: var(--paper); background: var(--red-700); border-color: var(--red-700); }
.attention-lines { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }
.attention-lines path { fill: none; stroke: var(--blue-700); stroke-linecap: round; opacity: var(--line-opacity, .2); stroke-width: var(--line-width, 2); transition: opacity 180ms var(--ease), stroke-width 180ms var(--ease); }
.attention-reading { max-width: 640px; min-height: 3em; margin: 0 auto; color: var(--ink-700); text-align: center; }

.token-calculator { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(300px, 1.1fr); gap: var(--space-5); }
.calculator-controls { display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-2); }
.field label, .field-label { color: var(--ink-700); font-size: var(--text-sm); font-weight: 700; }
.field input[type="number"], .field input[type="text"], .field textarea, .field select,
.assignment-form input, .assignment-form textarea, .assignment-form select {
  width: 100%;
  min-height: 44px;
  padding: .65rem .75rem;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
  color: var(--ink-950);
  background: var(--paper);
}
.field textarea, .assignment-form textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus,
.assignment-form input:focus, .assignment-form textarea:focus, .assignment-form select:focus { border-color: var(--blue-700); outline: 0; box-shadow: var(--shadow-focus); }
.range-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: var(--space-3); align-items: center; }
.range-row input[type="range"] { min-height: var(--control-min); }
.range-row output { padding: .35rem .5rem; border-radius: var(--radius-sm); background: var(--ink-100); font: 700 var(--text-sm)/1 var(--font-mono); text-align: center; }
.bill { padding: var(--space-5); border-radius: var(--radius-lg); color: var(--paper); background: var(--ink-950); }
.bill__row { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid rgb(255 255 255 / .12); }
.bill__row span { color: #b9c9da; }
.bill__row strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.bill__total { margin-top: var(--space-5); }
.bill__total small { display: block; color: #b9c9da; }
.bill__total strong { display: block; margin-top: var(--space-1); color: #ff98aa; font: 700 2rem/1 var(--font-mono); }
.bill__rail { display: flex; align-items: center; gap: 3px; margin-top: var(--space-5); }
.bill__token { height: 14px; flex: 1 1 8px; max-width: 18px; border-radius: 4px; background: var(--blue-600); }
.bill__token.is-history { background: var(--red-700); }
.bill__token.is-output { background: #f2b544; }
.bill__legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); color: #c7d4e3; font-size: var(--text-xs); }
.bill__legend i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 3px; }

.code-lab { overflow: hidden; border: 1px solid #2e4762; border-radius: var(--radius-lg); background: #0c1b2c; }
.code-tabs { display: flex; align-items: center; justify-content: space-between; padding: .55rem .8rem; color: #b8c7d8; background: #142941; border-bottom: 1px solid #2e4762; font: 600 var(--text-xs)/1 var(--font-mono); }
.code-editor { display: grid; grid-template-columns: 42px minmax(0, 1fr); min-height: 280px; }
.code-lines { padding: var(--space-4) var(--space-2); color: #8ea1b5; background: #0a1725; font: var(--text-sm)/1.62 var(--font-mono); text-align: right; user-select: none; white-space: pre; }
.code-editor textarea { min-width: 0; min-height: 280px; padding: var(--space-4); border: 0; outline: 0; resize: vertical; color: #dbe8f6; background: #0c1b2c; font: var(--text-sm)/1.62 var(--font-mono); tab-size: 2; }
.code-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); border-top: 1px solid #2e4762; }
.code-actions small { color: #8ea1b5; }
.code-output { margin-top: var(--space-4); overflow: hidden; border: 1px solid var(--ink-200); border-radius: var(--radius-md); }
.code-output__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); background: var(--ink-100); font: 700 var(--text-xs)/1 var(--font-mono); }
.code-output pre { margin: 0; padding: var(--space-4); overflow-x: auto; color: #dbe8f6; background: var(--ink-950); font: var(--text-sm)/1.55 var(--font-mono); }
.test-list { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.test-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--ink-600); background: var(--ink-50); font-size: var(--text-sm); }
.test-item.is-pass { color: var(--green-800); background: var(--green-50); }
.test-item.is-fail { color: var(--red-800); background: var(--red-50); }

.quiz-list { display: grid; gap: var(--space-5); }
.quiz-progress { margin-bottom: var(--space-4); }
.quiz-progress__copy { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); color: var(--ink-600); font-size: var(--text-sm); }
.quiz-progress__copy strong { color: var(--ink-950); font-family: var(--font-mono); }
.quiz-progress__track { height: 5px; overflow: hidden; border-radius: var(--radius-pill); background: var(--ink-100); }
.quiz-progress__track span { display: block; height: 100%; border-radius: inherit; background: var(--red-700); transition: width 180ms var(--ease); }
.gate-quiz-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--ink-200); }
.gate-quiz-summary > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); color: var(--ink-600); font-size: var(--text-sm); }
.gate-quiz-summary > div span + span::before { content: "·"; margin-right: var(--space-4); color: var(--ink-300); }
.gate-quiz-summary b { color: var(--ink-950); font-family: var(--font-mono); }
.quiz-timing { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: calc(var(--space-2) * -1) 0 var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--amber-100); border-radius: var(--radius-md); color: var(--amber-800); background: var(--amber-50); font-size: var(--text-sm); }
.quiz-timing b { font-family: var(--font-mono); }
.quiz-timing strong { min-width: 3.4rem; display: inline-block; color: var(--ink-950); font: 700 var(--text-sm)/1 var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.quiz-question { padding: var(--space-4); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); }
.quiz-question--single { min-height: 0; }
.quiz-question--single:focus { outline: 2px solid var(--blue-700); outline-offset: 3px; }
.quiz-question legend { width: 100%; padding: 0; font-weight: 700; }
.quiz-question__number { color: var(--red-700); font: 700 var(--text-xs)/1 var(--font-mono); }
.quiz-options { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.quiz-option { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--ink-200); border-radius: var(--radius-md); cursor: pointer; }
.quiz-option:hover { border-color: var(--blue-700); background: var(--blue-50); }
.quiz-option:has(input:checked) { border-color: var(--blue-700); background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--blue-700); }
.quiz-option input { margin-top: .2rem; accent-color: var(--blue-700); }
.quiz-option.is-correct,
.quiz-option.is-correct:has(input:checked) { border-color: var(--green-700); background: var(--green-50); box-shadow: inset 0 0 0 1px var(--green-700); }
.quiz-option.is-wrong,
.quiz-option.is-wrong:has(input:checked) { border-color: var(--red-700); background: var(--red-50); box-shadow: inset 0 0 0 1px var(--red-700); }
.question-feedback { margin: var(--space-3) 0 0; color: var(--ink-600); font-size: var(--text-sm); }
.question-feedback.is-correct strong { color: var(--green-800); }
.question-feedback.is-wrong strong { color: var(--red-800); }
.score-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-4); margin-top: var(--space-5); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--ink-50); }
.score-panel__number { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; color: var(--paper); background: var(--ink-950); font: 700 var(--text-xl)/1 var(--font-mono); }
.score-panel.is-pass .score-panel__number { background: var(--green-700); }
.score-panel.is-warn .score-panel__number { background: var(--amber-700); }
.score-panel h3, .score-panel p { margin: 0; }
.score-panel p { color: var(--ink-600); }

.gate-mistakes { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--ink-200); }
.gate-mistakes__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.gate-mistakes__head .eyebrow { margin: 0; color: var(--red-800); }
.gate-mistakes__head h3 { margin: var(--space-1) 0 0; font: 700 var(--text-lg)/1.25 var(--font-display); }
.gate-mistakes__head > span { flex: 0 0 auto; padding: .35rem .55rem; color: var(--red-800); background: var(--red-50); font: 700 .68rem/1 var(--font-mono); white-space: nowrap; }
.gate-mistakes__list { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.gate-miss { overflow: hidden; border: 1px solid var(--ink-200); border-left: 4px solid var(--red-700); border-radius: var(--radius-md); background: var(--paper); }
.gate-miss summary { min-height: 58px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); padding: var(--space-3); cursor: pointer; list-style: none; }
.gate-miss summary::-webkit-details-marker { display: none; }
.gate-miss summary::after { content: "+"; width: 24px; color: var(--blue-800); font: 700 var(--text-lg)/1 var(--font-mono); text-align: center; }
.gate-miss[open] summary::after { content: "−"; }
.gate-miss[open] summary { background: var(--red-50); border-bottom: 1px solid var(--red-100); }
.gate-miss__number { color: var(--red-800); font: 700 .7rem/1 var(--font-mono); white-space: nowrap; }
.gate-miss summary strong { min-width: 0; font-size: var(--text-sm); line-height: 1.35; }
.gate-miss__state { color: var(--red-800); font: 700 .68rem/1 var(--font-mono); white-space: nowrap; }
.gate-miss__body { display: grid; gap: var(--space-4); padding: var(--space-4); }
.gate-miss__answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.gate-miss__answer { min-width: 0; padding: var(--space-3); border: 1px solid var(--ink-200); background: var(--ink-50); }
.gate-miss__answer.is-selected { border-color: var(--red-100); background: var(--red-50); }
.gate-miss__answer.is-correct { border-color: var(--green-100); background: var(--green-50); }
.gate-miss__answer small { display: block; margin-bottom: var(--space-1); color: var(--ink-600); font: 700 .66rem/1.2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.gate-miss__answer.is-selected small { color: var(--red-800); }
.gate-miss__answer.is-correct small { color: var(--green-800); }
.gate-miss__answer p { margin: 0; color: var(--ink-900); font-size: var(--text-sm); font-weight: 700; }
.gate-miss__explanation { margin: 0; color: var(--ink-700); font-size: var(--text-sm); }
.gate-miss__explanation b { color: var(--ink-950); }
.gate-miss__module { min-height: 44px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: .6rem .75rem; border: 1px solid var(--ink-200); color: var(--ink-900); background: var(--paper); cursor: pointer; text-align: left; }
.gate-miss__module:hover { color: var(--blue-800); border-color: var(--blue-700); background: var(--blue-50); }
.gate-miss__module span { color: var(--red-800); font: 700 .68rem/1.2 var(--font-mono); white-space: nowrap; }
.gate-miss__module strong { min-width: 0; overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.gate-miss__module i { color: var(--blue-800); font-style: normal; }

.gate-review { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--ink-200); }
.gate-review__head, .teachback__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.gate-review__head .eyebrow, .teachback__head .eyebrow { margin: 0; color: var(--blue-800); }
.gate-review__head h3, .teachback__head h3 { margin: var(--space-1) 0 0; font: 700 var(--text-lg)/1.25 var(--font-display); }
.gate-review__head > span { padding: .35rem .55rem; border-radius: var(--radius-pill); color: var(--ink-600); background: var(--ink-100); font: 700 .68rem/1 var(--font-mono); white-space: nowrap; }
.gate-review__route { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-4); }
.gate-review__link { min-height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); padding: var(--space-3); border: 1px solid var(--ink-200); border-left: 4px solid var(--red-700); border-radius: var(--radius-md); color: var(--ink-950); background: var(--paper); cursor: pointer; text-align: left; }
.gate-review__link:hover { border-color: var(--blue-700); background: var(--blue-50); }
.gate-review__link span { grid-column: 1; color: var(--red-800); font: 700 var(--text-xs)/1 var(--font-mono); }
.gate-review__link strong { grid-column: 1; font-size: var(--text-sm); }
.gate-review__link i { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--blue-800); font-style: normal; }
.gate-review__clear { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-3); border: 1px solid var(--green-100); border-radius: var(--radius-md); color: var(--green-800); background: var(--green-50); }
.gate-review__clear > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--paper); background: var(--green-700); }
.gate-review__clear p { margin: 0; font-size: var(--text-sm); }

.teachback { margin-top: var(--space-5); padding: var(--space-5); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); background: var(--ink-50); }
.teachback > p { margin: var(--space-3) 0 var(--space-4); color: var(--ink-700); }
.teachback textarea { min-height: 112px; background: var(--paper); }
.teachback__checks { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.teachback__checks label { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--ink-700); font-size: var(--text-sm); cursor: pointer; }
.teachback__checks input { margin-top: .18rem; accent-color: var(--green-700); }
.teachback__status { margin: var(--space-3) 0 0 !important; color: var(--ink-500) !important; font: 700 var(--text-xs)/1.4 var(--font-mono); }
.teachback__status.is-ready { color: var(--green-800) !important; }

.assignment-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); gap: var(--space-5); align-items: start; }
.assignment-form { display: grid; gap: var(--space-4); }
.assignment-form .field small { color: var(--ink-500); }
.feature-card-preview { position: sticky; top: calc(var(--header-h) + var(--space-4)); overflow: hidden; border: 1px solid var(--ink-200); border-radius: var(--radius-xl); background: var(--paper); box-shadow: var(--shadow-md); }
.feature-card-preview__head { padding: var(--space-5); color: var(--paper); background: var(--ink-950); }
.feature-card-preview__head small { color: #b9c9da; font: 700 var(--text-xs)/1 var(--font-mono); text-transform: uppercase; }
.feature-card-preview__head h3 { margin: var(--space-2) 0 0; font: 700 var(--text-xl)/1.2 var(--font-display); }
.feature-card-preview__body { display: grid; gap: var(--space-4); padding: var(--space-5); }
.preview-row { display: grid; gap: 3px; }
.preview-row small { color: var(--ink-500); font: 700 .68rem/1.2 var(--font-mono); text-transform: uppercase; }
.preview-row p { margin: 0; color: var(--ink-800); white-space: pre-wrap; }
.rubric { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--ink-200); }
.rubric h3 { margin: 0 0 var(--space-3); font: 700 var(--text-md)/1.2 var(--font-display); }
.rubric-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); padding: .45rem 0; color: var(--ink-600); font-size: var(--text-sm); }
.rubric-row strong { color: var(--ink-950); font-family: var(--font-mono); }

.completion-banner { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-8); padding: var(--space-5); border: 1px solid var(--green-100); border-radius: var(--radius-lg); color: var(--green-800); background: var(--green-50); }
.completion-banner__mark { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--paper); background: var(--green-700); font-weight: 700; }
.completion-banner h3, .completion-banner p { margin: 0; }
.completion-banner p { margin-top: 2px; color: var(--green-800); }

@media (max-width: 760px) {
  .activity-card, .checkpoint-card, .assessment-card, .assignment-card { padding: var(--space-4); }
  .activity-head { display: block; }
  .activity-tag { display: inline-flex; margin-top: var(--space-3); }
  .activity-criteria { grid-template-columns: 1fr; gap: var(--space-2); }
  .activity-criteria ul { display: grid; gap: var(--space-2); }
  .gate-quiz-summary { align-items: flex-start; }
  .gate-quiz-summary .activity-tag { margin-top: 0; }
  .gate-quiz-summary > div { gap: var(--space-1) var(--space-2); }
  .gate-quiz-summary > div span + span::before { margin-right: var(--space-2); }
  .choice-grid, .classify-zones, .match-board, .token-calculator, .assignment-layout { grid-template-columns: 1fr; }
  .classify-zone { min-height: 120px; }
  .activity-actions .activity-hint { width: 100%; margin-left: 0; }
  .assessment-card--progressive .activity-actions .activity-hint { width: auto; margin-left: auto; }
  .quiz-timing { align-items: flex-start; flex-direction: column; }
  .gate-mistakes__head { align-items: flex-start; }
  .gate-miss summary { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2); }
  .gate-miss__state { display: none; }
  .gate-miss__answers { grid-template-columns: 1fr; }
  .gate-miss__module { grid-template-columns: minmax(0, 1fr) auto; }
  .gate-miss__module span { grid-column: 1; }
  .gate-miss__module strong { grid-column: 1; white-space: normal; }
  .gate-miss__module i { grid-column: 2; grid-row: 1 / 3; }
  .gate-review__route { grid-template-columns: 1fr; }
  .teachback { padding: var(--space-4); }
  .feature-card-preview { position: static; }
  .score-panel { grid-template-columns: 58px minmax(0, 1fr); }
  .score-panel__number { width: 58px; height: 58px; font-size: var(--text-md); }
}