/* NeuroCraft theme — warm minimalist canvas, sparse saturated accents, owl. */

:root {
    /* Crisp canvas — clean white, dark ink */
    --nc-canvas:        #ffffff;
    --nc-canvas-2:      #f9fafb;
    --nc-ink:           #111827;
    --nc-ink-soft:      #6b7280;
    --nc-edge:          #e5e7eb;

    /* Per-subject hues — used boldly: avatar fills, button fills, accent rules */
    --nc-subject-maths:     #2563eb;
    --nc-subject-english:   #7c3aed;
    --nc-subject-geography: #059669;
    --nc-subject-history:   #d97706;
    --nc-subject-afrikaans: #0891b2;
    --nc-subject-nst:       #dc2626;
    --nc-subject-life-skills:#ec4899;

    /* Saturated accent pops — owl bowtie, status pills, "Reveal" button */
    --nc-pop-coral:    #f43f5e;
    --nc-pop-gold:     #f59e0b;
    --nc-pop-magenta:  #d946ef;
    --nc-pop-emerald:  #10b981;
}

body {
    background: var(--nc-canvas);
    color: var(--nc-ink);
}

/* Lexend if loaded; otherwise system sans with rounded weights. */
@supports (font-variation-settings: normal) {
    body { font-family: 'Lexend', system-ui, -apple-system, sans-serif; letter-spacing: -0.005em; }
}

/* Subject-hue binding — each subject host root inherits its hue into --nc-hue */
.nc-subject-maths     { --nc-hue: var(--nc-subject-maths);     --nc-hue-soft: #dbeafe; }
.nc-subject-english   { --nc-hue: var(--nc-subject-english);   --nc-hue-soft: #ede9fe; }
.nc-subject-geography { --nc-hue: var(--nc-subject-geography); --nc-hue-soft: #d1fae5; }
.nc-subject-history   { --nc-hue: var(--nc-subject-history);   --nc-hue-soft: #fef3c7; }
.nc-subject-afrikaans { --nc-hue: var(--nc-subject-afrikaans); --nc-hue-soft: #cffafe; }
.nc-subject-nst        { --nc-hue: var(--nc-subject-nst);        --nc-hue-soft: #fee2e2; }
.nc-subject-life-skills{ --nc-hue: var(--nc-subject-life-skills); --nc-hue-soft: #fce7f3; }

/* Section underline + quiz-title accent — uses the saturated magenta pop */
.nc-section, .nc-quiz-title {
    position: relative;
}
.nc-section::after, .nc-quiz-title::after {
    content: ''; display: block; width: 2.5rem; height: 3px;
    background: var(--nc-pop-magenta); border-radius: 2px;
    margin-top: 5px;
}

/* Card grid — compact, avatar + title on one row, tags hidden, colour rotation */
.nc-card {
    border: 1px solid var(--nc-edge) !important;
    background: #ffffff !important;
    transition: all .15s ease;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: 0 0.95rem !important;
    padding: 0.55rem 0.75rem !important;
    align-content: start !important;
    min-height: 0 !important;
}
.nc-card:hover {
    border-color: var(--nc-card-accent, var(--nc-subject-maths)) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
/* Avatar — smaller, solid colour pulled from --nc-card-accent (set by nth-child rotation) */
.nc-card-icon {
    background: var(--nc-card-accent, var(--nc-subject-maths)) !important;
    color: #ffffff !important;
    width: 2rem !important; height: 2rem !important;
    border-radius: 50% !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    font-size: 0.95rem !important;
    grid-row: 1 / 2 !important; grid-column: 1 / 2 !important;
    align-self: center !important;
}
.nc-card-title {
    color: var(--nc-ink) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    grid-row: 1 / 2 !important; grid-column: 2 / 3 !important;
    align-self: center !important;
    line-height: 1.2 !important;
}
.nc-card-desc {
    grid-row: 2 / 3 !important; grid-column: 1 / 4 !important;
    color: var(--nc-ink-soft) !important;
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 4px 0 0 0 !important;
}
.nc-card-num {
    grid-row: 1 / 2 !important; grid-column: 3 / 4 !important;
    align-self: center !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: var(--nc-card-accent, var(--nc-subject-maths)) !important;
    background: rgba(0,0,0,0.04) !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    font-variant-numeric: tabular-nums;
}
.nc-card-tags { display: none !important; }

/* Rotate avatar colour through six hues so the grid doesn't look mono-blue */
.nc-card:nth-child(6n+1) { --nc-card-accent: var(--nc-subject-maths); }
.nc-card:nth-child(6n+2) { --nc-card-accent: var(--nc-pop-emerald); }
.nc-card:nth-child(6n+3) { --nc-card-accent: var(--nc-subject-history); }
.nc-card:nth-child(6n+4) { --nc-card-accent: var(--nc-pop-magenta); }
.nc-card:nth-child(6n+5) { --nc-card-accent: var(--nc-pop-coral); }
.nc-card:nth-child(6n+6) { --nc-card-accent: var(--nc-subject-english); }

/* Nav bar — left "Back to {subject}", centre prev/next-unit + prev/next-lesson + crumb */
.nc-unit-bar {
    display: flex !important;
    align-items: center !important;
    gap: var(--ui-space-4) !important;
    background: #ffffff !important;
    border-bottom: 1px solid var(--nc-edge) !important;
    padding: var(--ui-space-2) var(--ui-space-4) !important;
}
.nc-unit-bar-left   { flex: 0 0 auto; }
.nc-unit-bar-centre { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.nc-unit-bar-centre .nc-nav-unit:first-of-type { margin-right: 4rem; }
.nc-unit-bar-centre .nc-nav-unit:last-of-type  { margin-left:  4rem; }
.nc-unit-back {
    background: var(--nc-hue, var(--nc-subject-maths)) !important;
    color: #ffffff !important;
    border: 0 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
}
.nc-unit-back:hover { filter: brightness(1.1); }
.nc-unit-crumb {
    font-weight: 600 !important;
    color: var(--nc-ink) !important;
    padding: 0 0.75rem !important;
    font-size: 0.9rem !important;
    white-space: nowrap;
}
.nc-nav-btn {
    width: 2rem; height: 2rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--nc-edge);
    background: #ffffff;
    color: var(--nc-ink-soft);
    border-radius: 6px;
    cursor: pointer;
    transition: all .12s ease;
    padding: 0;
}
.nc-nav-btn:hover:not(:disabled) {
    background: var(--nc-hue, var(--nc-subject-maths));
    color: #ffffff;
    border-color: var(--nc-hue, var(--nc-subject-maths));
}
.nc-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.nc-nav-unit   { color: var(--nc-hue, var(--nc-subject-maths)); border-color: var(--nc-hue, var(--nc-subject-maths)); }
.nc-nav-lesson { color: var(--nc-ink); }

/* ── Accordion open/close animation — body is a single-row grid containing
   one wrapper (.nc-panel-inner). Animating grid-template-rows 1fr↔0fr
   transitions ACTUAL content height — no overshoot, no end-bounce.
   The wrapper keeps the visual padding. */
.nc-unit-host .ui-accordion-body,
.nc-unit-host .ui-accordion-content {
    display: grid !important;
    grid-template-rows: 1fr;
    overflow: hidden;
    padding: 0 !important;
    transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    opacity: 1;
}
.nc-unit-host .nc-panel-inner {
    overflow: hidden;
    min-height: 0;
}
.nc-unit-host .ui-accordion-item:not(.ui-active) > .ui-accordion-body,
.nc-unit-host .ui-accordion-entry:not(.ui-active) > .ui-accordion-content {
    grid-template-rows: 0fr !important;
    opacity: 0;
}
.nc-unit-host .ui-accordion-head::after {
    transition: transform 0.25s ease;
}

/* Numbered chip strip for LanguageRenderer item navigation */
.nc-item-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    padding: 0.5rem 0;
}
.nc-item-chip {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--nc-edge);
    background: #ffffff;
    color: var(--nc-ink-soft);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all .12s ease;
    font-variant-numeric: tabular-nums;
}
.nc-item-chip:hover {
    border-color: var(--nc-hue, var(--nc-subject-maths));
    color: var(--nc-hue, var(--nc-subject-maths));
}
.nc-item-chip-active {
    background: var(--nc-hue, var(--nc-subject-maths)) !important;
    color: #ffffff !important;
    border-color: var(--nc-hue, var(--nc-subject-maths)) !important;
}

/* nc-num highlight uses the subject hue instead of fixed blue */
.nc-num { color: var(--nc-hue, var(--nc-subject-maths)) !important; }

/* Examples row — compact horizontal pills with small visual + text */
.nc-examples {
    padding: 0.5rem 0.75rem !important;
    gap: 0.5rem !important;
    justify-content: center;
}
.nc-example {
    flex-direction: row !important;
    width: auto !important;
    max-width: 220px !important;
    padding: 0.35rem 0.75rem !important;
    gap: 0.5rem !important;
    border: 1px solid var(--nc-edge);
    border-radius: 999px !important;
    background: #ffffff !important;
    align-items: center !important;
}
.nc-example:hover {
    border-color: var(--nc-hue, var(--nc-subject-maths)) !important;
    background: #ffffff !important;
}
.nc-example-vis {
    width: 2rem !important;
    height: 2rem;
    flex: 0 0 auto;
}
.nc-example-vis .nc-circle-svg { width: 2rem !important; height: 2rem !important; }
.nc-example-desc {
    text-align: left !important;
    font-size: 0.78rem !important;
    color: var(--nc-ink) !important;
    line-height: 1.25 !important;
}

/* (Quiz button hover styling moved to consolidated rules below.) */

/* Reveal card — solid subject-coloured left bar on plain white */
.nc-quiz-reveal {
    background: #ffffff !important;
    border: 1px solid var(--nc-edge) !important;
    border-left: 4px solid var(--nc-hue, var(--nc-pop-coral)) !important;
}
.nc-quiz-reveal-ans strong { color: var(--nc-hue, var(--nc-pop-coral)) !important; }

/* Unit interior — pure white, clean */
.nc-unit-host, .nc-stage-layout { background: #ffffff; }
.nc-visual-host { background: #ffffff; }
.nc-examples { border-bottom-color: var(--nc-edge); background: #ffffff; }
.nc-statement { background: #ffffff; }
.nc-quiz { background: #ffffff; border-top-color: var(--nc-edge); }

/* Cards landing — white canvas, cards size to their own content (no row stretch) */
.nc-cards-wrap { background: #ffffff; padding: var(--ui-space-4) var(--ui-space-3); }
.nc-cards-grid { align-items: start !important; }
.nc-cards-title { color: var(--nc-ink); }

/* Statement: solid subject left rule, bold strong in subject hue, em as coral pop */
.nc-statement { border-left: 4px solid var(--nc-hue, var(--nc-subject-maths)); padding-left: var(--ui-space-4); margin-left: var(--ui-space-3); }
.nc-statement strong { color: var(--nc-hue, var(--nc-subject-maths)); font-weight: 700; }
.nc-statement em { color: var(--nc-pop-coral); font-style: normal; font-weight: 600; }

/* Owl avatar — sits inside a solid coloured circle (subject hue or coral by default) */
.nc-owl {
    width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    background: var(--nc-hue, var(--nc-pop-coral));
    border-radius: 50%;
    padding: 3px;
    box-sizing: border-box;
}
.nc-owl svg { width: 100%; height: 100%; display: block; }
.nc-owl-eye { fill: #111827; }
.nc-owl-eye-shine { fill: #ffffff; }
.nc-owl-body { fill: #ffffff; }
.nc-owl-belly { fill: rgba(255,255,255,0.55); }
.nc-owl-beak { fill: var(--nc-pop-gold); }
.nc-owl-tie  { fill: var(--nc-pop-coral); }
.nc-owl-ear  { fill: rgba(0,0,0,0.18); }

/* (Try-button styling moved to consolidated .nc-quiz-btn rules below.) */

/* Reveal card — warm cream with magenta-accent edge instead of green flood */


.nc-panel        { display: flex; flex-direction: column; gap: var(--ui-space-2); padding: var(--ui-space-3); }
.nc-section      { font-size: var(--ui-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-gray-500); padding-top: var(--ui-space-2); border-top: 1px solid var(--ui-gray-200); margin-top: var(--ui-space-1); }
.nc-section:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.nc-row          { display: flex; flex-direction: column; gap: var(--ui-space-1); }
.nc-row-head     { display: flex; justify-content: space-between; align-items: baseline; }
.nc-row-label    { font-size: var(--ui-text-sm); color: var(--ui-gray-700); }
.nc-row-value    { font-size: var(--ui-text-sm); font-weight: 600; color: var(--ui-gray-900); }
.nc-row-control  { display: flex; }
.nc-range        { flex: 1; }
.nc-row-control input[type="color"] { width: 100%; height: 2rem; border: 1px solid var(--ui-gray-300); border-radius: var(--ui-radius-md); padding: 2px; }

.nc-stage-layout { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.nc-visual-host  { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.nc-visual-host > * { flex: 1 1 auto; min-height: 0; }

/* Statement — concept prose */
.nc-statement    { flex: 0 0 auto; padding: var(--ui-space-3) var(--ui-space-4); font-size: 0.95rem; line-height: 1.55; color: var(--ui-gray-800); max-width: 72ch; margin: 0 auto; }
.nc-statement p  { margin: 0 0 var(--ui-space-2) 0; }
.nc-statement p:last-child { margin-bottom: 0; }
.nc-num          { color: var(--ui-blue-700, #1d4ed8); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Examples — row of small worked examples, click to apply */
.nc-examples     { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: var(--ui-space-3); justify-content: center; padding: 0 var(--ui-space-4) var(--ui-space-3); border-bottom: 1px solid var(--ui-gray-200); }
.nc-example      { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-1); width: 150px; padding: var(--ui-space-2); border-radius: var(--ui-radius-md, 6px); cursor: pointer; transition: var(--ui-transition-fast, all .15s ease); }
.nc-example:hover { background: var(--ui-blue-50, #eff6ff); }
.nc-example-vis  { width: 110px; }
.nc-example-vis .nc-circle-host { padding: 0; gap: var(--ui-space-1); height: auto; }
.nc-example-vis .nc-circle-svg  { width: 110px; height: 110px; aspect-ratio: 1; }
.nc-example-vis .nc-circle-caption { display: none; }
.nc-example-desc { font-size: 0.8rem; color: var(--ui-gray-700); text-align: center; line-height: 1.35; }

.nc-quiz         { flex: 0 0 auto; padding: var(--ui-space-3) var(--ui-space-4); max-width: 72ch; margin: 0 auto; width: 100%; box-sizing: border-box; border-top: 1px solid var(--ui-gray-200); }
.nc-quiz-header  { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ui-space-2); }
.nc-quiz-title   { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-gray-500); }
.nc-quiz-shuffle { width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ui-radius-md, 6px); border: 1px solid var(--ui-gray-300); background: var(--ui-gray-50, #f9fafb); color: var(--ui-gray-600); cursor: pointer; font-size: 0.85rem; }
.nc-quiz-shuffle:hover { background: var(--ui-blue-50, #eff6ff); color: var(--ui-blue-700, #1d4ed8); border-color: var(--ui-blue-300, #93c5fd); }
/* Subjects nav dropdown — sits inside the Subjects tab's button as a
 * native <select>. No body picker row. The select is styled to read as
 * part of the tab button while keeping native OS-level dropdown behaviour.
 * Click stopPropagation lives in JS so opening the select does not double-
 * fire the tab button's click. */
.nc-subjects-tab-wrap   { display: inline-flex; align-items: center; gap: 0.4rem; }
.nc-subjects-dropdown   { font: inherit; color: inherit; background: transparent; border: 0; padding: 0.15rem 1.4rem 0.15rem 0.2rem; margin: 0; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='currentColor'/></svg>"); background-repeat: no-repeat; background-position: right 0.2rem center; }
.nc-subjects-dropdown:focus { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.6); border-radius: 4px; }
/* Options pick up the OS native rendering once opened — give them a
 * sensible background since the trigger is transparent on a coloured nav. */
.nc-subjects-dropdown option { color: var(--nc-ink, #1f2937); background: #ffffff; }

/* Worked examples — step-by-step solved problems between visual + quiz.
 * Each card carries a numbered question line, an ordered step list, then
 * the final answer. Subject hue accents the left border so the section
 * reads as "the teacher walked me through this" rather than "another quiz". */
.nc-worked-host        { display: flex; flex-direction: column; gap: var(--ui-space-3); margin: var(--ui-space-4) 0; }
.nc-worked-head        { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nc-ink-soft); display: inline-flex; align-items: center; gap: 0.5rem; }
.nc-worked-head::after { content: ''; flex: 1; height: 2px; background: var(--nc-hue, var(--nc-pop-gold)); border-radius: 1px; opacity: 0.5; margin-left: 0.5rem; }
.nc-worked-card        { background: #ffffff; border: 1px solid var(--nc-edge, var(--ui-gray-200)); border-left: 4px solid var(--nc-hue, var(--nc-pop-coral)); border-radius: var(--ui-radius-md, 6px); padding: var(--ui-space-3) var(--ui-space-4); line-height: 1.55; }
.nc-worked-q           { display: flex; align-items: flex-start; gap: 0.75rem; font-weight: 600; color: var(--nc-ink); margin-bottom: var(--ui-space-2); }
.nc-worked-q-num       { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--nc-hue, var(--nc-pop-coral)); color: #fff; font-size: 0.85rem; font-weight: 700; }
.nc-worked-q-text      { flex: 1 1 auto; padding-top: 0.15rem; }
.nc-worked-steps       { list-style: decimal; padding-left: 2.4rem; margin: 0 0 var(--ui-space-2) 0; color: var(--ui-gray-800); }
.nc-worked-steps li    { padding: 0.15rem 0; }
.nc-worked-steps li::marker { color: var(--nc-hue, var(--nc-pop-coral)); font-weight: 700; }
.nc-worked-ans         { margin-left: 2.4rem; padding: var(--ui-space-2) var(--ui-space-3); background: var(--ui-bg-muted, #f3f4f6); border-radius: var(--ui-radius-sm, 4px); color: var(--nc-ink); }
.nc-worked-ans strong  { color: var(--nc-hue, var(--nc-pop-coral)); }

.nc-quiz-row     { display: flex; align-items: center; gap: var(--ui-space-3); padding: var(--ui-space-2) 0; border-top: 1px solid var(--ui-gray-200); font-size: 0.9rem; }
.nc-quiz-row:first-of-type { border-top: 0; }
.nc-quiz-q       { flex: 1 1 auto; color: var(--ui-gray-800); line-height: 1.45; }

/* Quiz actions — labelled buttons. "Try it" is the primary CTA; "Show me
 * how" is secondary. Both carry visible text so a new user does not need
 * to guess what each icon means. */
.nc-quiz-btn         { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem; height: 2.1rem; padding: 0 0.75rem; border-radius: var(--ui-radius-md, 6px); border: 0; cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: var(--ui-transition-fast, all .15s ease); white-space: nowrap; }
.nc-quiz-btn-label   { display: inline-block; }
.nc-quiz-btn-try     { background: var(--nc-hue, var(--nc-pop-coral)); color: #fff !important; padding-left: 0.45rem; }
.nc-quiz-btn-try .nc-owl { width: 1.6rem; height: 1.6rem; flex-shrink: 0; }
.nc-quiz-btn-try:hover   { filter: brightness(1.1); transform: translateY(-1px); }
.nc-quiz-btn-show        { background: var(--ui-bg-muted, #f3f4f6); color: var(--nc-ink, var(--ui-gray-700)) !important; border: 1px solid var(--ui-border, var(--ui-gray-300)); }
.nc-quiz-btn-show:hover  { background: var(--ui-gray-100); color: var(--nc-ink) !important; }
.nc-quiz-btn-show .fa    { color: var(--nc-pop-gold, #f59e0b); }

.nc-quiz-reveal       { margin: 0 0 var(--ui-space-2) 2.5rem; padding: var(--ui-space-2) var(--ui-space-3); background: var(--nc-canvas-2); border-left: 3px solid var(--nc-pop-gold); border-radius: var(--ui-radius-md, 6px); font-size: 0.9rem; color: var(--nc-ink); line-height: 1.45; }
.nc-quiz-reveal-ans   { font-weight: 600; color: var(--nc-ink); }
.nc-quiz-reveal-ans strong { color: var(--nc-pop-coral); }
.nc-quiz-reveal-sol   { margin-top: var(--ui-space-1); color: var(--nc-ink-soft); }

.nc-quiz-modal   { display: flex; flex-direction: column; gap: var(--ui-space-3); padding: var(--ui-space-3); min-width: 22rem; }
.nc-quiz-modal-q { font-size: 1rem; line-height: 1.5; color: var(--ui-gray-800); }
.nc-quiz-modal-input input { width: 100%; }
.nc-quiz-modal-buttons { display: flex; justify-content: flex-end; }
.nc-quiz-modal-feedback { font-size: 0.95rem; min-height: 1.5em; display: flex; align-items: center; gap: 0.4rem; }
.nc-quiz-modal-feedback.nc-match-ok { color: var(--ui-green-600, #16a34a); font-weight: 600; }
.nc-quiz-modal-feedback.nc-match-no { color: var(--ui-red-600,   #dc2626); font-weight: 600; }

/* ── V2 quiz modal ──────────────────────────────────────────────────────── */
.nc-quiz-modal-v2 { display: flex; flex-direction: column; gap: var(--ui-space-3); padding: var(--ui-space-4); min-width: 28rem; max-width: 36rem; }
.nc-quiz-modal-v2 .nc-quiz-modal-q { font-size: 1.1rem; line-height: 1.5; color: var(--ui-gray-900); font-weight: 500; padding-bottom: var(--ui-space-2); border-bottom: 1px solid var(--ui-gray-200); }
.nc-quiz-modal-v2 .nc-quiz-modal-buttons { justify-content: space-between; gap: var(--ui-space-2); padding-top: var(--ui-space-2); border-top: 1px solid var(--ui-gray-200); }
.nc-quiz-tally   { font-size: 0.85rem; font-weight: 700; color: var(--ui-green-700, #15803d); background: var(--ui-green-50, #f0fdf4); padding: 2px 8px; border-radius: 10px; margin-right: auto; margin-left: var(--ui-space-2); }

/* Multiple-choice — big tap buttons */
.nc-quiz-choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-space-2); }
.nc-quiz-choice  { padding: var(--ui-space-3) var(--ui-space-4); background: white; border: 2px solid var(--ui-blue-200, #bfdbfe); border-radius: var(--ui-radius-lg, 10px); font-size: 1.05rem; font-weight: 600; color: var(--ui-gray-900); cursor: pointer; transition: var(--ui-transition-fast, all .15s ease); }
.nc-quiz-choice:hover { background: var(--ui-blue-50, #eff6ff); border-color: var(--ui-blue-500, #3b82f6); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(59,130,246,0.18); }
.nc-quiz-choice:active { transform: translateY(0); }
.nc-quiz-yesno   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-space-3); }
.nc-quiz-yes     { color: var(--ui-green-700, #15803d); border-color: var(--ui-green-300, #86efac); background: var(--ui-green-50, #f0fdf4); }
.nc-quiz-no      { color: var(--ui-red-700,   #b91c1c); border-color: var(--ui-red-300,   #fca5a5); background: var(--ui-red-50,   #fef2f2); }

/* Number stepper */
.nc-quiz-stepper { display: flex; align-items: center; gap: var(--ui-space-3); justify-content: center; padding: var(--ui-space-3) 0; }
.nc-quiz-step-btn { width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--ui-blue-300, #93c5fd); background: var(--ui-blue-50, #eff6ff); color: var(--ui-blue-700, #1d4ed8); cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: var(--ui-transition-fast, all .15s ease); }
.nc-quiz-step-btn:hover { background: var(--ui-blue-100, #dbeafe); transform: scale(1.05); }
.nc-quiz-step-display { font-size: 2.25rem; font-weight: 800; color: var(--ui-gray-900); min-width: 4.5rem; text-align: center; font-variant-numeric: tabular-nums; }

/* Fraction builder — two steppers separated by a horizontal bar */
.nc-quiz-fraction { display: flex; align-items: center; justify-content: center; gap: var(--ui-space-4); padding: var(--ui-space-3) 0; }
.nc-quiz-fraction-col { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-1); }
.nc-quiz-fraction-cap { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-gray-500); }
.nc-quiz-fraction-bar { width: 4rem; height: 3px; background: var(--ui-gray-700); border-radius: 2px; }
.nc-quiz-fraction .nc-quiz-stepper { padding: 0; }

/* Unit picker */
.nc-quiz-unitpicker { display: flex; align-items: center; gap: var(--ui-space-3); justify-content: center; }
.nc-quiz-unit-select { padding: var(--ui-space-2); font-size: 1rem; border: 2px solid var(--ui-gray-300); border-radius: var(--ui-radius-md, 6px); background: white; }

/* Typed answer */
.nc-quiz-typed input { width: 100%; padding: var(--ui-space-3); font-size: 1.1rem; }

/* Hint cards */
.nc-quiz-hint-area { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.nc-quiz-hint { display: flex; align-items: flex-start; gap: var(--ui-space-2); padding: var(--ui-space-2) var(--ui-space-3); background: var(--ui-amber-50, #fffbeb); border-left: 3px solid var(--ui-amber-400, #fbbf24); border-radius: var(--ui-radius-md, 6px); font-size: 0.95rem; line-height: 1.45; color: var(--ui-gray-800); }
.nc-quiz-hint i { color: var(--ui-amber-600, #d97706); margin-top: 2px; }

/* Solution card */
.nc-quiz-solution-area { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.nc-quiz-solution { padding: var(--ui-space-3); border-radius: var(--ui-radius-lg, 10px); border: 2px solid; }
.nc-quiz-correct  { background: var(--ui-green-50, #f0fdf4); border-color: var(--ui-green-400, #4ade80); }
.nc-quiz-given    { background: var(--ui-blue-50,  #eff6ff); border-color: var(--ui-blue-400,  #60a5fa); }
.nc-quiz-solution-head { font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: var(--ui-space-2); margin-bottom: var(--ui-space-2); }
.nc-quiz-correct .nc-quiz-solution-head { color: var(--ui-green-800, #166534); }
.nc-quiz-given   .nc-quiz-solution-head { color: var(--ui-blue-800,  #1e40af); }
.nc-quiz-solution-answer { font-size: 1rem; color: var(--ui-gray-800); margin-bottom: var(--ui-space-2); }
.nc-quiz-solution-body { font-size: 0.95rem; line-height: 1.55; color: var(--ui-gray-700); }

/* Locked input — visually muted after answer revealed */
.nc-quiz-modal-input.nc-quiz-locked { opacity: 0.55; pointer-events: none; }

/* Shake animation for wrong attempts */
@keyframes nc-shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-4px); } 40%,80% { transform: translateX(4px); } }
.nc-shake { animation: nc-shake 0.32s ease-in-out; }

/* I'm-stuck button — softer than primary */
.nc-quiz-stuck { background: var(--ui-gray-100, #f3f4f6); color: var(--ui-gray-700); border: 1px solid var(--ui-gray-300); }
.nc-quiz-stuck:hover { background: var(--ui-amber-100, #fef3c7); color: var(--ui-amber-800, #92400e); border-color: var(--ui-amber-400, #fbbf24); }

.nc-stage-layout > .nc-circle-host { flex: 1 1 auto; height: auto; }
.nc-circle-host  { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); width: 100%; height: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-circle-svg   { width: min(80%, 460px); height: auto; aspect-ratio: 1; }
.nc-circle-caption { font-size: 1.75rem; font-weight: 700; color: var(--ui-gray-800); letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.5rem; }
.nc-match          { font-size: 2rem; font-weight: 800; }
.nc-match-ok       { color: var(--ui-green-600, #16a34a); }
.nc-match-no       { color: var(--ui-red-600,   #dc2626); }

/* ── Clock face (uiClockFace) ──────────────────────────────────────────────
 * Self-contained interactive visual: SVG clock + digital readout + lap
 * counter + slider/button control row. Sized to live in the stage area
 * but stays usable on small surfaces. */
.nc-stage-layout > .nc-clock-host { flex: 1 1 auto; height: auto; }
.nc-clock-host        { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--ui-space-3); width: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-clock-svg         { width: min(70%, 320px); height: auto; aspect-ratio: 1; }
.nc-clock-readout     { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 2.25rem; font-weight: 700; color: var(--ui-blue-700, #1d4ed8); letter-spacing: 0.04em; }
.nc-clock-lap         { font-size: 0.9rem; color: var(--ui-gray-700, #374151); text-align: center; }
.nc-clock-lap strong  { color: var(--ui-gray-900, #111827); }
.nc-clock-controls    { display: flex; flex-direction: column; gap: 0.6rem; width: min(100%, 360px); padding: 0.75rem 1rem; background: var(--ui-gray-50, #f9fafb); border: 1px solid var(--ui-gray-200, #e5e7eb); border-radius: 8px; }
.nc-clock-ctrl-row    { display: flex; align-items: center; gap: 0.75rem; }
.nc-clock-ctrl-row label { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--ui-gray-800, #1f2937); min-width: 7rem; }
.nc-clock-ctrl-row label span { font-family: ui-monospace, monospace; color: var(--ui-blue-700, #1d4ed8); min-width: 1.6rem; text-align: right; }
.nc-clock-ctrl-row input[type="range"] { flex: 1 1 auto; accent-color: var(--ui-blue-600, #2563eb); }
.nc-clock-ctrl-buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.nc-clock-btn         { background: #ffffff; border: 1px solid var(--ui-gray-300, #d1d5db); padding: 0.4rem 0.75rem; border-radius: 6px; font-size: 0.9rem; font-weight: 600; color: var(--ui-gray-800, #1f2937); cursor: pointer; }
.nc-clock-btn:hover   { background: var(--ui-blue-50, #eff6ff); border-color: var(--ui-blue-300, #93c5fd); color: var(--ui-blue-700, #1d4ed8); }
.nc-clock-btn-reset   { margin-left: auto; }
.nc-clock-caption     { font-size: 1rem; color: var(--ui-gray-700, #374151); text-align: center; }
.nc-clock-content     { width: min(100%, 560px); margin-top: var(--ui-space-3); }

/* ── Card landing page (SubjectTabRenderer) ────────────────────────────── */
.nc-cards-wrap   { padding: var(--ui-space-4); max-width: 1100px; margin: 0 auto; }
.nc-cards-title  { font-size: 1.25rem; font-weight: 700; color: var(--ui-gray-700); margin-bottom: var(--ui-space-4); text-align: center; }
.nc-cards-grid   { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--ui-space-3); }
.nc-card         { background: white; border: 1px solid var(--ui-gray-200); border-radius: var(--ui-radius-lg, 10px); padding: var(--ui-space-4); cursor: pointer; display: flex; flex-direction: column; gap: var(--ui-space-2); transition: var(--ui-transition-fast, all .15s ease); min-height: 180px; }
.nc-card:hover   { border-color: var(--ui-blue-400, #60a5fa); box-shadow: 0 4px 12px rgba(59,130,246,0.15); transform: translateY(-2px); }
.nc-card-icon    { font-size: 2rem; color: var(--ui-blue-600, #2563eb); }
.nc-card-title   { font-size: 1.05rem; font-weight: 700; color: var(--ui-gray-900); }
.nc-card-desc    { font-size: 0.85rem; color: var(--ui-gray-600); line-height: 1.4; flex: 1 1 auto; }
.nc-card-tags    { display: flex; flex-wrap: wrap; gap: var(--ui-space-1); }
.nc-card-tag     { font-size: 0.7rem; font-weight: 600; color: var(--ui-blue-700, #1d4ed8); background: var(--ui-blue-50, #eff6ff); padding: 2px 8px; border-radius: 10px; letter-spacing: 0.04em; }

.nc-unit-bar     { display: flex; align-items: center; gap: var(--ui-space-3); padding: var(--ui-space-2) var(--ui-space-4); background: var(--ui-gray-50, #f9fafb); border-bottom: 1px solid var(--ui-gray-200); }
.nc-unit-back    { display: inline-flex; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-1) var(--ui-space-3); border: 1px solid var(--ui-gray-300); background: white; border-radius: var(--ui-radius-md, 6px); cursor: pointer; font-size: 0.85rem; color: var(--ui-gray-700); }
.nc-unit-back:hover { background: var(--ui-blue-50, #eff6ff); color: var(--ui-blue-700, #1d4ed8); border-color: var(--ui-blue-300, #93c5fd); }
.nc-unit-crumb   { font-size: 0.85rem; color: var(--ui-gray-600); font-weight: 500; }
.nc-unit-host    { /* container that loadUnitFromContent renders into */ }
.nc-error        { padding: var(--ui-space-4); color: var(--ui-red-700, #b91c1c); }

/* ── Language lesson visuals (uiTextPanel) ────────────────────────────── */
.nc-stage-layout > .nc-textpanel-host { flex: 1 1 auto; height: auto; }
.nc-textpanel-host    { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); width: 100%; height: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-textpanel-content { width: 100%; max-width: 640px; }

/* Vocab card — front (Afrikaans) + back (English) */
.afr-vocab-card  { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-4); background: var(--ui-blue-50, #eff6ff); border: 2px solid var(--ui-blue-200, #bfdbfe); border-radius: var(--ui-radius-lg, 10px); }
.afr-source      { font-size: 2rem; font-weight: 700; color: var(--ui-blue-800, #1e40af); }
.afr-target      { font-size: 1.5rem; font-weight: 600; color: var(--ui-green-700, #15803d); }
.afr-hidden      { color: var(--ui-gray-400); font-size: 0.95rem; font-style: italic; font-weight: 400; }
.afr-example     { font-size: 0.95rem; color: var(--ui-gray-700); font-style: italic; margin-top: var(--ui-space-2); text-align: center; line-height: 1.5; }
.afr-note        { font-size: 0.85rem; color: var(--ui-gray-600); margin-top: var(--ui-space-1); text-align: center; }

/* Grammar card — Q + optional options + answer */
.afr-grammar-card { display: flex; flex-direction: column; gap: var(--ui-space-3); padding: var(--ui-space-4); background: white; border: 2px solid var(--ui-gray-200); border-radius: var(--ui-radius-lg, 10px); }
.afr-question    { font-size: 1.2rem; font-weight: 600; color: var(--ui-gray-900); line-height: 1.45; }
.afr-options     { display: flex; flex-direction: column; gap: var(--ui-space-1); list-style: none; padding: 0; margin: 0; }
.afr-options li  { padding: var(--ui-space-2) var(--ui-space-3); background: var(--ui-gray-50, #f9fafb); border-radius: var(--ui-radius-md, 6px); font-size: 1rem; }
.afr-options li.afr-correct { background: var(--ui-green-50, #f0fdf4); border: 2px solid var(--ui-green-400, #4ade80); color: var(--ui-green-900, #14532d); font-weight: 600; }
.afr-options-inline { font-size: 0.95rem; color: var(--ui-gray-700); display: inline-block; margin-top: 4px; }
.afr-answer      { font-size: 1.1rem; color: var(--ui-green-700, #15803d); }
.afr-answer.afr-hidden { color: var(--ui-gray-400); font-style: italic; }

/* Poem card — title + body + question + answer */
.afr-poem-card   { display: flex; flex-direction: column; gap: var(--ui-space-3); padding: var(--ui-space-4); background: white; border: 2px solid var(--ui-gray-200); border-radius: var(--ui-radius-lg, 10px); }
.afr-poem-title  { font-size: 1.3rem; font-weight: 700; color: var(--ui-blue-800, #1e40af); text-align: center; margin: 0; }
.afr-poem-body   { font-size: 1rem; line-height: 1.7; color: var(--ui-gray-800); white-space: pre-wrap; font-style: italic; padding: var(--ui-space-3); background: var(--ui-gray-50, #f9fafb); border-radius: var(--ui-radius-md, 6px); }
.afr-poem-q      { font-size: 1.05rem; color: var(--ui-gray-900); line-height: 1.45; }
.afr-poem-a      { font-size: 1rem; color: var(--ui-green-700, #15803d); line-height: 1.45; padding-top: var(--ui-space-2); border-top: 1px dashed var(--ui-gray-300); }
.afr-poem-a.afr-hidden { color: var(--ui-gray-400); font-style: italic; }
.afr-empty       { text-align: center; color: var(--ui-gray-500); font-style: italic; }

/* ── Maths visuals ─────────────────────────────────────────────────────── */
.nc-stage-layout > .nc-place-host    { flex: 1 1 auto; height: auto; }
.nc-stage-layout > .nc-numline-host  { flex: 1 1 auto; height: auto; }

.nc-place-host   { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-4); width: 100%; height: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-place-grid   { display: flex; align-items: flex-end; gap: var(--ui-space-1); }
.nc-place-col    { display: flex; flex-direction: column; align-items: center; min-width: 60px; padding: var(--ui-space-1); border-radius: var(--ui-radius-md, 6px); }
.nc-place-col-hi { background: var(--ui-blue-50, #eff6ff); border: 2px solid var(--ui-blue-400, #60a5fa); }
.nc-place-label  { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ui-gray-500); text-transform: none; margin-bottom: var(--ui-space-1); }
.nc-place-col-hi .nc-place-label { color: var(--ui-blue-700, #1d4ed8); }
.nc-place-digit  { font-size: 3rem; font-weight: 800; color: var(--ui-gray-900); font-variant-numeric: tabular-nums; line-height: 1; padding: var(--ui-space-2) var(--ui-space-1); border-bottom: 2px solid var(--ui-gray-300); min-width: 50px; text-align: center; }
.nc-place-col-hi .nc-place-digit { color: var(--ui-blue-800, #1e40af); border-bottom-color: var(--ui-blue-500, #3b82f6); }
.nc-place-point  { font-size: 3rem; font-weight: 800; color: var(--ui-gray-700); align-self: flex-end; padding: 0 var(--ui-space-1); }

.nc-numline-host { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); width: 100%; height: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-numline-svg  { width: min(100%, 760px); height: auto; }

/* uiPercentGrid — 10×10 cells, N filled for N% */
.nc-stage-layout > .nc-percent-host { flex: 1 1 auto; height: auto; }
.nc-percent-host    { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); width: 100%; height: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-percent-readout { font-size: 2.25rem; font-weight: 800; color: var(--ui-blue-700, #1d4ed8); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.nc-percent-grid    { display: grid; grid-template-columns: repeat(10, 24px); grid-template-rows: repeat(10, 24px); gap: 2px; padding: 4px; background: var(--ui-gray-200, #e5e7eb); border-radius: var(--ui-radius-md, 6px); }
.nc-percent-cell    { width: 24px; height: 24px; background: white; border-radius: 2px; }
.nc-percent-cell-on { background: var(--ui-blue-500, #3b82f6); }
.nc-percent-label   { font-size: 0.95rem; color: var(--ui-gray-700); font-weight: 500; }

/* uiRatioBar — proportional coloured segments */
.nc-stage-layout > .nc-ratio-host { flex: 1 1 auto; height: auto; }
.nc-ratio-host    { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); width: 100%; height: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-ratio-labels  { display: flex; width: min(80%, 640px); gap: 4px; }
.nc-ratio-label   { font-size: 0.9rem; font-weight: 600; color: var(--ui-gray-700); text-align: center; }
.nc-ratio-bar     { display: flex; width: min(80%, 640px); height: 56px; border-radius: var(--ui-radius-md, 6px); overflow: hidden; gap: 4px; }
.nc-ratio-seg     { display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; font-weight: 800; min-width: 32px; font-variant-numeric: tabular-nums; }
.nc-ratio-seg-0   { background: var(--ui-blue-500, #3b82f6); }
.nc-ratio-seg-1   { background: var(--ui-red-500,  #ef4444); }
.nc-ratio-seg-2   { background: var(--ui-green-600,#16a34a); }
.nc-ratio-seg-3   { background: var(--ui-amber-500,#f59e0b); }
.nc-ratio-readout { font-size: 1.75rem; font-weight: 800; color: var(--ui-gray-800); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }

/* uiDoubleNumberLine — two parallel axes for rate lessons */
.nc-stage-layout > .nc-dbline-host { flex: 1 1 auto; height: auto; }
.nc-dbline-host { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); width: 100%; height: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-dbline-svg  { width: min(100%, 820px); height: auto; }

/* uiShape2D — SVG 2D shapes (triangles, quads, polygons, circles) */
.nc-stage-layout > .nc-shape-host { flex: 1 1 auto; height: auto; }
.nc-shape-host { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); width: 100%; height: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-shape-svg  { width: min(100%, 520px); height: auto; }

/* uiShape3D — oblique-projection 3D shapes + nets */
.nc-stage-layout > .nc-shape3d-host { flex: 1 1 auto; height: auto; }
.nc-shape3d-host { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); width: 100%; height: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-shape3d-svg  { width: min(100%, 560px); height: auto; }

/* uiBarChart — vertical bar chart with axes + value labels */
.nc-stage-layout > .nc-barchart-host { flex: 1 1 auto; height: auto; }
.nc-barchart-host { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); width: 100%; height: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-barchart-svg  { width: min(100%, 700px); height: auto; }

/* NST science visuals — uiParticleBox · uiBeaker · uiFoodWeb */
.nc-stage-layout > .nc-particle-host,
.nc-stage-layout > .nc-beaker-host,
.nc-stage-layout > .nc-foodweb-host { flex: 1 1 auto; height: auto; }
.nc-particle-host, .nc-beaker-host, .nc-foodweb-host { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); width: 100%; height: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-particle-svg { width: min(100%, 560px); height: auto; }
.nc-beaker-svg   { width: min(100%, 460px); height: auto; }
.nc-foodweb-svg  { width: min(100%, 680px); height: auto; }

/* ── V2 quiz: multipleSelect ──────────────────────────────────────────── */
.nc-quiz-choice.nc-quiz-choice-selected { background: var(--ui-blue-100, #dbeafe); border-color: var(--ui-blue-600, #2563eb); color: var(--ui-blue-900, #1e3a8a); }

/* ── V2 quiz: slider ───────────────────────────────────────────────────── */
.nc-quiz-slider-wrap    { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-3) 0; }
.nc-quiz-slider-display { font-size: 2.25rem; font-weight: 800; color: var(--ui-blue-700, #1d4ed8); font-variant-numeric: tabular-nums; }
.nc-quiz-slider-input   { width: 100%; max-width: 28rem; }
.nc-quiz-slider-bounds  { display: flex; justify-content: space-between; width: 100%; max-width: 28rem; font-size: 0.85rem; color: var(--ui-gray-600); }

/* ── V2 quiz: ordering ─────────────────────────────────────────────────── */
.nc-quiz-ordering    { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.nc-quiz-order-row   { display: flex; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-2) var(--ui-space-3); background: var(--ui-blue-50, #eff6ff); border: 2px solid var(--ui-blue-200, #bfdbfe); border-radius: var(--ui-radius-md, 6px); }
.nc-quiz-order-num   { font-weight: 800; color: var(--ui-blue-700, #1d4ed8); min-width: 1.5rem; }
.nc-quiz-order-label { flex: 1 1 auto; color: var(--ui-gray-900); font-size: 1rem; }
.nc-quiz-order-btn   { width: 2.25rem; height: 2.25rem; border-radius: var(--ui-radius-md, 6px); border: 1px solid var(--ui-gray-300); background: white; color: var(--ui-gray-700); cursor: pointer; }
.nc-quiz-order-btn:hover { background: var(--ui-blue-100, #dbeafe); }

/* ── V2 quiz: matching ─────────────────────────────────────────────────── */
.nc-quiz-matching        { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.nc-quiz-matching-label  { font-size: 0.85rem; color: var(--ui-gray-600); text-align: center; }
.nc-quiz-matching-cols   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-space-3); }
.nc-quiz-matching-col    { display: flex; flex-direction: column; gap: var(--ui-space-1); }
.nc-quiz-match-item      { padding: var(--ui-space-2) var(--ui-space-3); background: white; border: 2px solid var(--ui-blue-200, #bfdbfe); border-radius: var(--ui-radius-md, 6px); cursor: pointer; font-size: 0.95rem; text-align: left; }
.nc-quiz-match-item:hover{ background: var(--ui-blue-50, #eff6ff); }
.nc-quiz-match-picked    { background: var(--ui-amber-100, #fef3c7); border-color: var(--ui-amber-500, #f59e0b); }
.nc-quiz-matching-paired { display: flex; flex-direction: column; gap: 4px; margin-top: var(--ui-space-2); border-top: 1px dashed var(--ui-gray-300); padding-top: var(--ui-space-2); }
.nc-quiz-match-pair      { display: flex; align-items: center; justify-content: center; gap: var(--ui-space-2); padding: var(--ui-space-1) var(--ui-space-3); background: var(--ui-green-50, #f0fdf4); border: 1px solid var(--ui-green-300, #86efac); border-radius: var(--ui-radius-md, 6px); cursor: pointer; font-size: 0.9rem; color: var(--ui-green-900, #14532d); }

/* ── V2 quiz: categorise ───────────────────────────────────────────────── */
.nc-quiz-categorise        { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.nc-quiz-cat-label         { font-size: 0.85rem; color: var(--ui-gray-600); text-align: center; }
.nc-quiz-cat-unsorted      { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); padding: var(--ui-space-2); background: var(--ui-gray-50, #f9fafb); border: 1px dashed var(--ui-gray-300); border-radius: var(--ui-radius-md, 6px); min-height: 3rem; }
.nc-quiz-cat-item          { padding: var(--ui-space-1) var(--ui-space-3); background: white; border: 2px solid var(--ui-blue-200, #bfdbfe); border-radius: var(--ui-radius-md, 6px); cursor: pointer; font-size: 0.9rem; }
.nc-quiz-cat-picked        { background: var(--ui-amber-100, #fef3c7); border-color: var(--ui-amber-500, #f59e0b); }
.nc-quiz-cat-buckets       { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--ui-space-2); }
.nc-quiz-cat-bucket        { display: flex; flex-direction: column; gap: 4px; padding: var(--ui-space-2); background: var(--ui-blue-50, #eff6ff); border: 2px solid var(--ui-blue-300, #93c5fd); border-radius: var(--ui-radius-md, 6px); min-height: 5rem; cursor: pointer; }
.nc-quiz-cat-bucket-head   { font-weight: 700; font-size: 0.9rem; color: var(--ui-blue-800, #1e40af); padding-bottom: 4px; border-bottom: 1px solid var(--ui-blue-200, #bfdbfe); }
.nc-quiz-cat-tag           { padding: 2px var(--ui-space-2); background: white; border: 1px solid var(--ui-gray-300); border-radius: var(--ui-radius-sm, 4px); font-size: 0.85rem; cursor: pointer; }

/* ── V2 quiz: fillBlank ───────────────────────────────────────────────── */
.nc-quiz-fillblank        { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); font-size: 1.05rem; line-height: 1.8; }
.nc-quiz-fillblank-text   { color: var(--ui-gray-900); }
.nc-quiz-fillblank-select { padding: var(--ui-space-1) var(--ui-space-2); font-size: 1rem; border: 2px solid var(--ui-blue-300, #93c5fd); border-radius: var(--ui-radius-md, 6px); background: white; cursor: pointer; }