/**
 * NeuroCraft Theme — CSS custom property overrides
 *
 * Educational warm palette: approachable, age-appropriate, inviting.
 * No !important, no tag selectors, only --hp-* tokens.
 */

/* Warm blue-teal primary — friendly, educational */
:root {
    --hp-hue-1: 210;
    --hp-sat-1: 65;
    --hp-hue-2: 160;
    --hp-sat-2: 50;
    --hp-hue-accent: 35;          /* warm amber — achievements, highlights */

    /* Shape & rhythm */
    --hp-corner-scale: 1.1;        /* slightly rounder — friendly feel */
    --hp-density: 1.0;             /* standard density — comfortable reading */
    --hp-text-scale: 1.05;         /* slightly larger text for young learners */
    --hp-shadow-intensity: 0.06;   /* gentle shadows */
    --hp-shadow-blur: 1.3;
    --hp-style-weight: 0.9;
    --hp-range: 1.0;
    --hp-transition-speed: 0.9;    /* slightly slower — less jarring for students */
    --hp-neutral-warmth: 0.3;      /* warm neutrals */
    --hp-surface-tint: 1;
}

/* Typography — Inter for UI, Poppins for headings */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

.neurocraft-app {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ─── No footer ─── */
.neurocraft-app .ui-pageframe-footer-wrap {
    display: none;
}

/* ─── Stage breathing room ─── */
.neurocraft-app .ui-pageframe-stage {
    padding: var(--ui-space-5) var(--ui-space-6);
}

/* ─── Header gradient — warm educational blue ─── */
.neurocraft-app .ui-pageframe-header {
    background: linear-gradient(135deg,
        hsl(var(--hp-hue-1), calc(var(--hp-sat-1) * 1%), 45%),
        hsl(var(--hp-hue-2), calc(var(--hp-sat-2) * 1%), 40%));
}

/* ─── Full-width header — no max-width centering ─── */
.neurocraft-app .ui-pageframe-header-inner {
    max-width: none;
    padding: 0 var(--ui-space-4);
}

/* ─── Subject color cards ─── */
.nc-subject-card {
    border-radius: var(--ui-radius-lg);
    padding: var(--ui-space-4);
    background: var(--ui-white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    box-shadow: var(--ui-shadow-sm);
    transition: box-shadow calc(var(--hp-transition-speed) * 200ms) ease;
}

.nc-subject-card:hover {
    box-shadow: var(--ui-shadow-md);
}

/* ─── Progress bar ─── */
.nc-progress-bar {
    height: 8px;
    border-radius: var(--ui-radius-full);
    background: var(--ui-gray-100);
    overflow: hidden;
}

.nc-progress-fill {
    height: 100%;
    border-radius: var(--ui-radius-full);
    background: linear-gradient(90deg,
        var(--ui-primary),
        var(--ui-secondary));
    transition: width calc(var(--hp-transition-speed) * 400ms) ease;
}

/* ─── Achievement badge ─── */
.nc-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-1) var(--ui-space-3);
    border-radius: var(--ui-radius-full);
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
    background: var(--ui-accent-50);
    color: var(--ui-accent-700);
    border: var(--ui-border-width) solid var(--ui-accent-200);
}

/* ─── Lesson card ─── */
.nc-lesson-card {
    padding: var(--ui-space-3) var(--ui-space-4);
    border-radius: var(--ui-radius-md);
    background: var(--ui-white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    cursor: pointer;
    transition: all calc(var(--hp-transition-speed) * 200ms) ease;
}

.nc-lesson-card:hover {
    border-color: var(--ui-primary-300);
    box-shadow: var(--ui-shadow-sm);
}

.nc-lesson-card.completed {
    border-left: 3px solid var(--ui-secondary);
}

.nc-lesson-card.active {
    border-left: 3px solid var(--ui-primary);
    background: var(--ui-primary-50);
}

/* ─── Streak display ─── */
.nc-streak {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-accent-600);
}

.nc-streak i {
    color: var(--ui-accent-500);
}

/* ─── Module grid ─── */
.nc-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--ui-space-4);
}

/* ─── Pathway node ─── */
.nc-pathway-node {
    padding: var(--ui-space-3);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-white);
    border: 2px solid var(--ui-gray-200);
    text-align: center;
    min-width: 120px;
}

.nc-pathway-node.completed {
    border-color: var(--ui-secondary);
    background: var(--ui-secondary-50);
}

.nc-pathway-node.current {
    border-color: var(--ui-primary);
    background: var(--ui-primary-50);
    box-shadow: var(--ui-shadow-md);
}

.nc-pathway-node.locked {
    opacity: 0.5;
    border-style: dashed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NeuroCraftLessonEngine — Rich lesson rendering styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── A. Gated Test Questions ─── */

.nc-engine-test-box {
    background: var(--ui-primary-50);
    padding: var(--ui-space-4);
    border-radius: var(--ui-radius-lg);
    border: 2px solid var(--ui-primary-200);
    margin-top: var(--ui-space-4);
}

.nc-engine-test-header {
    font-weight: var(--ui-font-bold);
    color: var(--ui-primary-800);
    margin-bottom: var(--ui-space-3);
    font-size: var(--ui-text-base);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}

.nc-engine-test-question {
    color: var(--ui-primary-700);
    margin-bottom: var(--ui-space-4);
    font-size: var(--ui-text-sm);
    line-height: 1.7;
}

.nc-engine-test-options {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
}

.nc-engine-test-option {
    padding: var(--ui-space-3);
    background: var(--ui-white);
    border-radius: var(--ui-radius-md);
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 150ms ease;
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    font-size: var(--ui-text-sm);
}

.nc-engine-test-option:hover {
    background: var(--ui-primary-100);
}

.nc-engine-test-option.correct {
    border-color: var(--ui-secondary);
    background: var(--ui-secondary-50);
}

.nc-engine-test-option.incorrect {
    border-color: #ef4444;
    background: #fef2f2;
}

.nc-engine-test-letter {
    width: 26px;
    height: 26px;
    border-radius: var(--ui-radius-full);
    background: var(--ui-primary-200);
    color: var(--ui-primary-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-bold);
    flex-shrink: 0;
}

.nc-engine-test-option.correct .nc-engine-test-letter {
    background: var(--ui-secondary);
    color: var(--ui-white);
}

.nc-engine-test-option.incorrect .nc-engine-test-letter {
    background: #ef4444;
    color: var(--ui-white);
}

.nc-engine-test-feedback {
    margin-top: var(--ui-space-3);
    padding: var(--ui-space-3);
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-text-sm);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}

.nc-engine-test-feedback.correct {
    background: var(--ui-secondary-50);
    color: var(--ui-secondary-800);
    border: var(--ui-border-width) solid var(--ui-secondary-200);
}

.nc-engine-test-feedback.incorrect {
    background: #fef2f2;
    color: #991b1b;
    border: var(--ui-border-width) solid #fecaca;
}

/* ─── B. Animated Step-by-Step Examples ─── */

.nc-engine-animated-box {
    background: linear-gradient(135deg, var(--ui-secondary-50), var(--ui-primary-50));
    padding: var(--ui-space-4);
    border-radius: var(--ui-radius-lg);
    border: 2px solid var(--ui-secondary-200);
    margin-top: var(--ui-space-4);
}

.nc-engine-animated-title {
    font-weight: var(--ui-font-bold);
    color: var(--ui-secondary-800);
    margin-bottom: var(--ui-space-3);
    font-size: var(--ui-text-base);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}

.nc-engine-animated-steps {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
    margin-bottom: var(--ui-space-4);
}

.nc-engine-animated-step {
    padding: var(--ui-space-3);
    border-radius: var(--ui-radius-md);
    transition: all 400ms ease;
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-3);
    background: var(--ui-gray-100);
    opacity: 0.3;
}

.nc-engine-animated-step.visible {
    background: var(--ui-white);
    opacity: 0.7;
}

.nc-engine-animated-step.active {
    background: var(--ui-white);
    box-shadow: var(--ui-shadow-md);
    border: 2px solid var(--ui-secondary-300);
    opacity: 1;
}

.nc-engine-step-number {
    width: 26px;
    height: 26px;
    border-radius: var(--ui-radius-full);
    background: var(--ui-secondary-200);
    color: var(--ui-secondary-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-bold);
    flex-shrink: 0;
}

.nc-engine-step-number.active {
    background: var(--ui-secondary);
    color: var(--ui-white);
}

.nc-engine-step-content {
    font-size: var(--ui-text-sm);
    line-height: 1.6;
    color: var(--ui-gray-700);
}

.nc-engine-animated-controls {
    display: flex;
    gap: var(--ui-space-2);
}

/* ─── Shared Button Styles ─── */

.nc-engine-btn {
    padding: var(--ui-space-2) var(--ui-space-3);
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    gap: var(--ui-space-1);
    transition: all 150ms ease;
}

.nc-engine-btn.primary {
    background: var(--ui-primary);
    color: var(--ui-white);
}

.nc-engine-btn.primary:hover {
    filter: brightness(1.1);
}

.nc-engine-btn.secondary {
    background: var(--ui-secondary-100);
    color: var(--ui-secondary-800);
    border: var(--ui-border-width) solid var(--ui-secondary-200);
}

.nc-engine-btn.secondary:hover {
    background: var(--ui-secondary-200);
}

.nc-engine-btn.muted {
    background: var(--ui-gray-200);
    color: var(--ui-gray-700);
}

.nc-engine-btn.muted:hover {
    background: var(--ui-gray-300);
}

/* ─── C. Practice Quiz ─── */

.nc-engine-quiz-box {
    border: 2px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-white);
    overflow: hidden;
}

.nc-engine-quiz-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ui-space-3) var(--ui-space-4);
    background: var(--ui-gray-50);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
    font-weight: var(--ui-font-bold);
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-700);
}

.nc-engine-quiz-score {
    padding: var(--ui-space-1) var(--ui-space-3);
    border-radius: var(--ui-radius-full);
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-bold);
}

.nc-engine-quiz-score.perfect {
    background: var(--ui-secondary-100);
    color: var(--ui-secondary-800);
}

.nc-engine-quiz-score.good {
    background: var(--ui-primary-100);
    color: var(--ui-primary-800);
}

.nc-engine-quiz-score.needs-work {
    background: var(--ui-accent-100);
    color: var(--ui-accent-800);
}

.nc-engine-quiz-questions {
    padding: var(--ui-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-3);
}

.nc-engine-quiz-q {
    display: flex;
    gap: var(--ui-space-3);
    padding: var(--ui-space-3);
    background: var(--ui-gray-50);
    border-radius: var(--ui-radius-md);
    border: var(--ui-border-width) solid var(--ui-gray-100);
}

.nc-engine-quiz-qnum {
    width: 32px;
    height: 32px;
    border-radius: var(--ui-radius-full);
    background: var(--ui-primary-100);
    color: var(--ui-primary-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-text-2xs);
    font-weight: var(--ui-font-bold);
    flex-shrink: 0;
}

.nc-engine-quiz-qcontent {
    flex: 1;
    min-width: 0;
}

.nc-engine-quiz-qtext {
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-700);
    margin-bottom: var(--ui-space-2);
    line-height: 1.6;
}

.nc-engine-quiz-options-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
}

.nc-engine-quiz-opt {
    padding: var(--ui-space-2) var(--ui-space-3);
    background: var(--ui-white);
    border: 2px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md);
    cursor: pointer;
    font-size: var(--ui-text-xs);
    transition: all 150ms ease;
}

.nc-engine-quiz-opt:hover {
    border-color: var(--ui-primary-300);
}

.nc-engine-quiz-opt.selected {
    border-color: var(--ui-primary);
    background: var(--ui-primary-50);
    font-weight: var(--ui-font-semibold);
}

.nc-engine-quiz-opt.correct-answer {
    border-color: var(--ui-secondary);
    background: var(--ui-secondary-50);
}

.nc-engine-quiz-opt.wrong-answer {
    border-color: #ef4444;
    background: #fef2f2;
}

.nc-engine-quiz-input-row {
    margin-bottom: var(--ui-space-2);
}

.nc-engine-quiz-input {
    padding: var(--ui-space-2) var(--ui-space-3);
    border: 2px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-text-sm);
    width: 100%;
    max-width: 200px;
    transition: border-color 150ms ease;
}

.nc-engine-quiz-input:focus {
    outline: none;
    border-color: var(--ui-primary-400);
}

.nc-engine-quiz-solution {
    display: none;
    margin-top: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-3);
    background: var(--ui-accent-50);
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-text-xs);
    color: var(--ui-accent-800);
    line-height: 1.6;
    border: var(--ui-border-width) solid var(--ui-accent-200);
}

.nc-engine-quiz-result {
    display: none;
    margin-top: var(--ui-space-2);
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
}

.nc-engine-quiz-result.correct {
    color: var(--ui-secondary-700);
}

.nc-engine-quiz-result.incorrect {
    color: #dc2626;
}

.nc-engine-quiz-controls {
    display: flex;
    gap: var(--ui-space-2);
    padding: var(--ui-space-3) var(--ui-space-4);
    border-top: var(--ui-border-width) solid var(--ui-gray-200);
    background: var(--ui-gray-50);
}

/* ─── E. Interactive Manipulatives ─── */

.nc-engine-manipulative {
    border: 2px solid var(--ui-primary-200);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-white);
    overflow: hidden;
}

.nc-engine-manip-title {
    padding: var(--ui-space-3) var(--ui-space-4);
    background: var(--ui-primary-50);
    border-bottom: var(--ui-border-width) solid var(--ui-primary-200);
    font-weight: var(--ui-font-bold);
    font-size: var(--ui-text-sm);
    color: var(--ui-primary-800);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}

.nc-engine-manip-viz {
    padding: var(--ui-space-4);
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nc-engine-manip-frac-display {
    text-align: center;
    padding: var(--ui-space-2) var(--ui-space-4);
    border-top: var(--ui-border-width) solid var(--ui-gray-100);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
}

.nc-engine-manip-controls {
    padding: var(--ui-space-3) var(--ui-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
}

.nc-engine-manip-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
}

.nc-engine-manip-label {
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-600);
    min-width: 85px;
    font-weight: var(--ui-font-medium);
}

.nc-engine-manip-slider {
    flex: 1;
    accent-color: var(--ui-primary);
    cursor: pointer;
}

.nc-engine-manip-val {
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-font-bold);
    color: var(--ui-primary-700);
    min-width: 30px;
    text-align: right;
}

/* ─── Player gating styles ─── */

.nc-engine-nav-locked {
    background: var(--ui-gray-300) !important;
    color: var(--ui-gray-500) !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

.nc-engine-nav-unlocked {
    animation: nc-unlock-pulse 500ms ease;
}

@keyframes nc-unlock-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); box-shadow: var(--ui-shadow-md); }
    100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Progress Dashboard
   ═══════════════════════════════════════════════════════════════════════════ */

.nc-progress-dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-4);
    padding: var(--ui-space-5) var(--ui-space-6);
}

.nc-progress-metrics {
    display: flex;
    gap: var(--ui-space-3);
    flex-wrap: wrap;
}

.nc-progress-section-header {
    border-left: 3px solid var(--ui-accent-200);
    background: var(--ui-gray-50);
    padding: var(--ui-space-2) var(--ui-space-3);
    border-radius: var(--ui-radius-sm);
}

.nc-progress-section-header span {
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-700);
}

/* Streak card */
.nc-progress-streak-card {
    background: var(--ui-white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
    padding: var(--ui-space-4);
}

.nc-progress-streak-header {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    margin-bottom: var(--ui-space-3);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-700);
}

.nc-progress-streak-header i {
    font-size: var(--ui-text-xl);
    color: var(--ui-accent-500);
}

.nc-progress-streak-value {
    font-size: var(--ui-text-2xl);
    font-weight: var(--ui-font-bold);
    color: var(--ui-accent-600);
    margin-bottom: var(--ui-space-2);
}

.nc-progress-streak-unit {
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-font-normal);
    color: var(--ui-gray-500);
}

.nc-progress-streak-details {
    display: flex;
    gap: var(--ui-space-4);
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-500);
}

/* Achievement card override */
.nc-achievement-card {
    min-width: 160px;
}

/* Programme progress cards */
.nc-progress-programmes {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-3);
}

.nc-progress-programme-card {
    background: var(--ui-white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    padding: var(--ui-space-3) var(--ui-space-4);
}

.nc-progress-programme-name {
    font-weight: var(--ui-font-semibold);
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-800);
    margin-bottom: var(--ui-space-1);
}

.nc-progress-programme-stats {
    display: flex;
    justify-content: space-between;
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-500);
    margin-bottom: var(--ui-space-2);
}

/* Leaderboard */
.nc-progress-leaderboard {
    background: var(--ui-white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
    padding: var(--ui-space-4);
}

.nc-progress-leaderboard-title {
    font-size: var(--ui-text-2xs);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--ui-space-3);
}

.nc-progress-leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
}

.nc-progress-leaderboard-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    padding: var(--ui-space-2);
    border-radius: var(--ui-radius-md);
    background: var(--ui-gray-50);
}

.nc-progress-leaderboard-rank {
    font-weight: var(--ui-font-bold);
    color: var(--ui-gray-400);
    width: 24px;
    text-align: center;
}

.nc-progress-leaderboard-name {
    flex: 1;
    font-size: var(--ui-text-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tag Chips & Filters
   ═══════════════════════════════════════════════════════════════════════════ */

.nc-tag-row {
    display: flex;
    gap: var(--ui-space-1);
    flex-wrap: wrap;
    margin-top: 2px;
}

.nc-tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--ui-space-2);
    border-radius: var(--ui-radius-full);
    font-size: 10px;
    font-weight: var(--ui-font-medium);
    color: var(--nc-tag-color, var(--ui-gray-600));
    background: color-mix(in srgb, var(--nc-tag-color, var(--ui-gray-400)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--nc-tag-color, var(--ui-gray-400)) 25%, transparent);
}

.nc-curriculum-tag-filter {
    padding: var(--ui-space-2) var(--ui-space-3);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
    margin-bottom: var(--ui-space-2);
}

.nc-curriculum-filter-label {
    font-size: var(--ui-text-2xs);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--ui-space-1);
}

.nc-curriculum-tag-select {
    width: 100%;
    padding: var(--ui-space-1) var(--ui-space-2);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-700);
    background: var(--ui-white);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Pathway Graph
   ═══════════════════════════════════════════════════════════════════════════ */

.nc-pathway-graph {
    background: var(--ui-white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
    padding: var(--ui-space-3);
    min-height: 300px;
    margin-bottom: var(--ui-space-4);
}

.nc-pathway-node-complete {
    opacity: 1;
}

.nc-pathway-node {
    opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Notifications
   ═══════════════════════════════════════════════════════════════════════════ */

.nc-notification-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ui-radius-full);
    cursor: pointer;
    color: var(--ui-gray-500);
    transition: color 200ms, background 200ms;
}

.nc-notification-badge:hover {
    color: var(--ui-primary);
    background: var(--ui-gray-100);
}

.nc-notification-count {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    border-radius: var(--ui-radius-full);
    background: var(--ui-accent-500);
    color: var(--ui-white);
    font-size: 10px;
    font-weight: var(--ui-font-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

.nc-notification-panel {
    position: fixed;
    z-index: 1000;
    width: 320px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--ui-white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-lg);
}

.nc-notification-empty {
    padding: var(--ui-space-4);
    text-align: center;
    color: var(--ui-gray-400);
    font-size: var(--ui-text-sm);
}

.nc-notification-item {
    padding: var(--ui-space-3);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
    cursor: pointer;
    transition: background 150ms;
}

.nc-notification-item:hover {
    background: var(--ui-gray-50);
}

.nc-notification-item.unread {
    background: var(--ui-primary-50);
    border-left: 3px solid var(--ui-primary);
}

.nc-notification-subject {
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-800);
    margin-bottom: 2px;
}

.nc-notification-body {
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Interactive Teaching Tools (6 tools)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Shared Tool Styles ─── */

.nc-tool-header {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-3) var(--ui-space-4);
    background: var(--ui-gray-50);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
    font-weight: var(--ui-font-bold);
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-700);
}

.nc-tool-title {
    flex: 1;
}

.nc-tool-hint {
    padding: var(--ui-space-2) var(--ui-space-3);
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-500);
    background: var(--ui-primary-50);
    border-bottom: var(--ui-border-width) solid var(--ui-primary-100);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}

.nc-tool-hint-complete {
    background: var(--ui-secondary-50);
    border-color: var(--ui-secondary-100);
    color: var(--ui-secondary-700);
    font-weight: var(--ui-font-semibold);
}

/* ─── 1. ImageHotspot ─── */

.nc-tool-hotspot {
    border: 2px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-white);
    overflow: hidden;
}

.nc-tool-hotspot-progress {
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-bold);
    color: var(--ui-primary);
    background: var(--ui-primary-100);
    padding: 2px var(--ui-space-2);
    border-radius: var(--ui-radius-full);
}

.nc-tool-hotspot-image-wrap {
    position: relative;
    background: var(--ui-gray-100);
    min-height: 200px;
    overflow: hidden;
}

.nc-tool-hotspot-image {
    width: 100%;
    display: block;
    user-select: none;
}

.nc-tool-hotspot-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: var(--ui-space-4);
}

.nc-tool-hotspot-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
}

.nc-tool-hotspot-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: all;
    cursor: pointer;
    z-index: 2;
}

.nc-tool-hotspot-pulse {
    width: 24px;
    height: 24px;
    border-radius: var(--ui-radius-full);
    background: var(--ui-primary);
    opacity: 0.7;
    animation: nc-hotspot-pulse 2s ease-in-out infinite;
    border: 3px solid var(--ui-white);
    box-shadow: var(--ui-shadow-md);
}

@keyframes nc-hotspot-pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.3); opacity: 0.9; }
}

.nc-tool-hotspot-marker.nc-tool-hotspot-found .nc-tool-hotspot-pulse {
    background: var(--ui-secondary);
    opacity: 1;
    animation: none;
}

.nc-tool-hotspot-hidden {
    opacity: 0;
    transition: opacity 300ms ease;
}

.nc-tool-hotspot-hidden:hover {
    opacity: 0;
}

.nc-tool-hotspot-marker.nc-tool-hotspot-found {
    opacity: 1;
}

.nc-tool-hotspot-wrong .nc-tool-hotspot-pulse {
    background: var(--ui-danger, #ef4444);
    animation: nc-hotspot-shake 300ms ease;
}

@keyframes nc-hotspot-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.nc-tool-hotspot-info {
    padding: var(--ui-space-3) var(--ui-space-4);
    border-top: var(--ui-border-width) solid var(--ui-gray-100);
    min-height: 42px;
}

.nc-tool-hotspot-labels {
    padding: var(--ui-space-2) var(--ui-space-4);
    display: flex;
    gap: var(--ui-space-2);
    flex-wrap: wrap;
}

.nc-tool-hotspot-label-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--ui-space-2);
    border-radius: var(--ui-radius-full);
    font-size: var(--ui-text-2xs);
    font-weight: var(--ui-font-medium);
    background: var(--ui-secondary-100);
    color: var(--ui-secondary-700);
    border: var(--ui-border-width) solid var(--ui-secondary-200);
}

/* ─── 2. TextHighlighter ─── */

.nc-tool-highlighter {
    border: 2px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-white);
    overflow: hidden;
}

.nc-tool-highlighter-categories {
    padding: var(--ui-space-2) var(--ui-space-3);
    display: flex;
    gap: var(--ui-space-2);
    flex-wrap: wrap;
    border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
}

.nc-tool-highlighter-cat-pill {
    padding: var(--ui-space-1) var(--ui-space-3);
    border-radius: var(--ui-radius-full);
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 150ms ease;
    opacity: 0.6;
}

.nc-tool-highlighter-cat-pill.nc-tool-cat-active {
    opacity: 1;
    box-shadow: var(--ui-shadow-sm);
    transform: scale(1.05);
}

.nc-tool-highlighter-passage {
    padding: var(--ui-space-4);
    font-size: var(--ui-text-sm);
    line-height: 2;
    color: var(--ui-gray-800);
}

.nc-tool-highlighter-word {
    cursor: pointer;
    transition: background 100ms ease;
    border-radius: 2px;
    padding: 1px 0;
}

.nc-tool-highlighter-word:hover {
    background: var(--ui-gray-100);
}

.nc-tool-highlighter-summary {
    padding: var(--ui-space-3) var(--ui-space-4);
    border-top: var(--ui-border-width) solid var(--ui-gray-100);
    background: var(--ui-gray-50);
    min-height: 36px;
}

.nc-tool-highlight-correct {
    background: #dcfce7;
    border-bottom: 2px solid #4ade80;
}

.nc-tool-highlight-wrong {
    background: #fee2e2;
    border-bottom: 2px solid #f87171;
    text-decoration: line-through;
}

.nc-tool-highlight-missed {
    background: #fef9c3;
    border-bottom: 2px dashed #fde047;
}

/* ─── 3. DragDropLabeler ─── */

.nc-tool-dragdrop {
    border: 2px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-white);
    overflow: hidden;
}

.nc-tool-dragdrop-zone {
    position: absolute;
    transform: translate(-50%, -50%);
    min-width: 40px;
    min-height: 28px;
    border: 2px dashed var(--ui-primary-300);
    border-radius: var(--ui-radius-md);
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    cursor: pointer;
    transition: all 200ms ease;
    padding: 2px var(--ui-space-2);
}

.nc-tool-dragdrop-zone-hover {
    border-color: var(--ui-primary);
    background: var(--ui-primary-50);
    box-shadow: var(--ui-shadow-md);
    transform: translate(-50%, -50%) scale(1.05);
}

.nc-tool-dragdrop-zone-num {
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-bold);
    color: var(--ui-primary-400);
}

.nc-tool-dragdrop-placed {
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-primary-700);
    cursor: pointer;
}

.nc-tool-dragdrop-correct {
    border-color: var(--ui-secondary);
    background: var(--ui-secondary-50);
    border-style: solid;
}

.nc-tool-dragdrop-correct .nc-tool-dragdrop-placed {
    color: var(--ui-secondary-800);
}

.nc-tool-dragdrop-wrong {
    border-color: #ef4444;
    background: #fef2f2;
    border-style: solid;
}

.nc-tool-dragdrop-wrong .nc-tool-dragdrop-placed {
    color: #991b1b;
    text-decoration: line-through;
}

.nc-tool-dragdrop-missed {
    border-color: #fde047;
    background: #fefce8;
}

.nc-tool-dragdrop-bank-label {
    padding: var(--ui-space-2) var(--ui-space-3);
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    border-top: var(--ui-border-width) solid var(--ui-gray-100);
}

.nc-tool-dragdrop-bank {
    padding: var(--ui-space-2) var(--ui-space-3);
    display: flex;
    gap: var(--ui-space-2);
    flex-wrap: wrap;
}

.nc-tool-dragdrop-chip {
    padding: var(--ui-space-1) var(--ui-space-3);
    background: var(--ui-primary-100);
    border: var(--ui-border-width) solid var(--ui-primary-200);
    border-radius: var(--ui-radius-full);
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-primary-700);
    cursor: grab;
    transition: all 150ms ease;
    user-select: none;
}

.nc-tool-dragdrop-chip:hover {
    background: var(--ui-primary-200);
    box-shadow: var(--ui-shadow-sm);
}

.nc-tool-dragdrop-chip.nc-tool-dragdrop-dragging {
    opacity: 0.4;
}

.nc-tool-dragdrop-feedback {
    padding: var(--ui-space-3) var(--ui-space-4);
    min-height: 20px;
}

/* ─── 4. MarkTheWords ─── */

.nc-tool-markwords {
    border: 2px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-white);
    overflow: hidden;
}

.nc-tool-markwords-info {
    padding: var(--ui-space-2) var(--ui-space-3);
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
}

.nc-tool-markwords-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--ui-space-1) var(--ui-space-3);
    border-radius: var(--ui-radius-full);
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
}

.nc-tool-markwords-word {
    cursor: pointer;
    transition: all 100ms ease;
    border-radius: 2px;
    padding: 1px 2px;
}

.nc-tool-markwords-word:hover {
    background: var(--ui-gray-100);
}

.nc-tool-markwords-counter {
    padding: var(--ui-space-2) var(--ui-space-3);
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-500);
    border-top: var(--ui-border-width) solid var(--ui-gray-100);
    text-align: center;
}

/* ─── 5. SortParagraphs ─── */

.nc-tool-sort {
    border: 2px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-white);
    overflow: hidden;
}

.nc-tool-sort-list {
    padding: var(--ui-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
}

.nc-tool-sort-item {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-3);
    padding: var(--ui-space-3);
    background: var(--ui-gray-50);
    border: 2px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md);
    cursor: grab;
    transition: all 200ms ease;
    user-select: none;
}

.nc-tool-sort-item:hover {
    border-color: var(--ui-primary-300);
    box-shadow: var(--ui-shadow-sm);
}

.nc-tool-sort-item.nc-tool-sort-dragging {
    opacity: 0.4;
    box-shadow: var(--ui-shadow-lg);
}

.nc-tool-sort-over-top {
    border-top: 3px solid var(--ui-primary);
}

.nc-tool-sort-over-bottom {
    border-bottom: 3px solid var(--ui-primary);
}

.nc-tool-sort-grip {
    color: var(--ui-gray-400);
    font-size: var(--ui-text-sm);
    padding-top: 2px;
    cursor: grab;
}

.nc-tool-sort-num {
    width: 26px;
    height: 26px;
    border-radius: var(--ui-radius-full);
    background: var(--ui-primary-100);
    color: var(--ui-primary-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-bold);
    flex-shrink: 0;
}

.nc-tool-sort-text {
    flex: 1;
    font-size: var(--ui-text-sm);
    line-height: 1.6;
    color: var(--ui-gray-700);
    min-width: 0;
}

.nc-tool-sort-hint {
    color: var(--ui-gray-400);
    cursor: help;
    flex-shrink: 0;
}

.nc-tool-sort-correct {
    border-color: var(--ui-secondary);
    background: var(--ui-secondary-50);
}

.nc-tool-sort-correct .nc-tool-sort-num {
    background: var(--ui-secondary);
    color: var(--ui-white);
}

.nc-tool-sort-wrong {
    border-color: #ef4444;
    background: #fef2f2;
}

.nc-tool-sort-wrong .nc-tool-sort-num {
    background: #ef4444;
    color: var(--ui-white);
}

/* ─── 6. CauseEffectChain ─── */

.nc-tool-causeeffect {
    border: 2px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-white);
    overflow: hidden;
}

.nc-tool-ce-layout {
    display: flex;
    padding: var(--ui-space-3);
    gap: 0;
    min-height: 250px;
}

.nc-tool-ce-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
    min-width: 0;
}

.nc-tool-ce-col-header {
    font-size: var(--ui-text-2xs);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--ui-space-1) var(--ui-space-2);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}

.nc-tool-ce-svg-wrap {
    width: 80px;
    min-width: 80px;
    flex-shrink: 0;
    position: relative;
}

.nc-tool-ce-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.nc-tool-ce-node {
    padding: var(--ui-space-2) var(--ui-space-3);
    border: 2px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-text-xs);
    cursor: pointer;
    transition: all 150ms ease;
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    background: var(--ui-white);
}

.nc-tool-ce-node:hover {
    border-color: var(--ui-primary-300);
    box-shadow: var(--ui-shadow-sm);
}

.nc-tool-ce-node-num {
    width: 22px;
    height: 22px;
    border-radius: var(--ui-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: var(--ui-font-bold);
    flex-shrink: 0;
}

.nc-tool-ce-cause .nc-tool-ce-node-num {
    background: var(--ui-primary-100);
    color: var(--ui-primary-700);
}

.nc-tool-ce-effect .nc-tool-ce-node-num {
    background: var(--ui-secondary-100);
    color: var(--ui-secondary-700);
}

.nc-tool-ce-selected {
    border-color: var(--ui-primary);
    background: var(--ui-primary-50);
    box-shadow: var(--ui-shadow-md);
}

.nc-tool-ce-correct {
    border-color: var(--ui-secondary);
    background: var(--ui-secondary-50);
}

.nc-tool-ce-wrong {
    border-color: #ef4444;
    background: #fef2f2;
}

.nc-tool-ce-missed {
    border-color: #fde047;
    background: #fefce8;
    border-style: dashed;
}

.nc-tool-ce-summary {
    padding: var(--ui-space-2) var(--ui-space-4);
    border-top: var(--ui-border-width) solid var(--ui-gray-100);
    min-height: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIER 1 TOOLS — Flashcard, Branching, Video, Crossword, Memory, Exit, Cornell
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Flashcard Deck ── */
.nc-tool-flashcard { padding: var(--ui-space-3); }
.nc-tool-flashcard-scene {
    perspective: 900px;
    width: 100%; max-width: 400px; height: 220px;
    margin: var(--ui-space-3) auto; cursor: pointer;
}
.nc-tool-flashcard-card {
    width: 100%; height: 100%; position: relative;
    transform-style: preserve-3d; transition: transform 0.6s ease;
}
.nc-tool-flashcard-card.flipped { transform: rotateY(180deg); }
.nc-tool-flashcard-front, .nc-tool-flashcard-back {
    position: absolute; inset: 0; backface-visibility: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: var(--ui-space-4); border-radius: var(--ui-radius-lg);
    border: var(--ui-border-width) solid var(--ui-gray-200); box-shadow: var(--ui-shadow-sm);
    font-size: var(--ui-text-base); text-align: center;
}
.nc-tool-flashcard-front { background: var(--ui-white); }
.nc-tool-flashcard-back {
    background: var(--ui-primary-50); transform: rotateY(180deg);
    border-color: var(--ui-primary-200);
}
.nc-tool-flashcard-progress {
    height: 6px; background: var(--ui-gray-100); border-radius: var(--ui-radius-full);
    margin-top: var(--ui-space-2); overflow: hidden;
}
.nc-tool-flashcard-progress-fill {
    height: 100%; background: var(--ui-primary); border-radius: var(--ui-radius-full);
    transition: width 0.3s ease;
}

/* ── Branching Scenario ── */
.nc-tool-branch { padding: var(--ui-space-3); }
.nc-tool-branch-node {
    background: var(--ui-white); border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg); padding: var(--ui-space-4); box-shadow: var(--ui-shadow-sm);
    margin-bottom: var(--ui-space-3);
}
.nc-tool-branch-text {
    font-size: var(--ui-text-sm); line-height: 1.6; color: var(--ui-gray-700);
    margin-bottom: var(--ui-space-3);
}
.nc-tool-branch-choices { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.nc-tool-branch-choice {
    display: flex; align-items: center; gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-3); border-radius: var(--ui-radius-md);
    border: var(--ui-border-width) solid var(--ui-gray-200); cursor: pointer;
    font-size: var(--ui-text-sm); transition: all 0.15s ease; background: var(--ui-white);
}
.nc-tool-branch-choice:hover {
    border-color: var(--ui-primary-300); background: var(--ui-primary-50);
}
.nc-tool-branch-choice-letter {
    width: 24px; height: 24px; border-radius: var(--ui-radius-full);
    background: var(--ui-primary-100); color: var(--ui-primary-700);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--ui-text-xs); font-weight: var(--ui-font-bold); flex-shrink: 0;
}
.nc-tool-branch-feedback {
    font-size: var(--ui-text-xs); color: var(--ui-gray-500); font-style: italic;
    padding: var(--ui-space-2); margin-top: var(--ui-space-2);
    background: var(--ui-gray-50); border-radius: var(--ui-radius-md);
}
.nc-tool-branch-path {
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
    font-size: var(--ui-text-xs); color: var(--ui-gray-400);
    margin-bottom: var(--ui-space-2);
}
.nc-tool-branch-path-node {
    padding: 2px 8px; border-radius: var(--ui-radius-full);
    background: var(--ui-gray-100); color: var(--ui-gray-600);
}
.nc-tool-branch-path-node.current {
    background: var(--ui-primary-100); color: var(--ui-primary-700);
}
.nc-tool-branch-end {
    text-align: center; padding: var(--ui-space-5);
    border-radius: var(--ui-radius-lg); border: 2px solid;
}
.nc-tool-branch-end.success { border-color: #4ade80; background: #f0fdf4; }
.nc-tool-branch-end.partial { border-color: #fbbf24; background: #fffbeb; }
.nc-tool-branch-end.failure { border-color: #f87171; background: #fef2f2; }

/* ── Interactive Video ── */
.nc-tool-ivideo { padding: var(--ui-space-3); }
.nc-tool-ivideo-player {
    background: var(--ui-gray-900); border-radius: var(--ui-radius-lg);
    aspect-ratio: 16/9; max-height: 300px; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: var(--ui-gray-400); font-size: var(--ui-text-sm);
}
.nc-tool-ivideo-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.85);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: var(--ui-space-4); color: var(--ui-white); z-index: 2;
}
.nc-tool-ivideo-timeline {
    height: 8px; background: var(--ui-gray-200); border-radius: var(--ui-radius-full);
    margin: var(--ui-space-3) 0; position: relative; cursor: pointer;
}
.nc-tool-ivideo-timeline-fill {
    height: 100%; background: var(--ui-primary); border-radius: var(--ui-radius-full);
    transition: width 0.1s linear;
}
.nc-tool-ivideo-marker {
    position: absolute; top: -4px; width: 16px; height: 16px;
    border-radius: var(--ui-radius-full); border: 2px solid var(--ui-white);
    transform: translateX(-50%); z-index: 1;
}
.nc-tool-ivideo-marker.upcoming { background: var(--ui-gray-400); }
.nc-tool-ivideo-marker.answered-correct { background: #4ade80; }
.nc-tool-ivideo-marker.answered-wrong { background: #f87171; }
.nc-tool-ivideo-controls {
    display: flex; align-items: center; gap: var(--ui-space-2);
    font-size: var(--ui-text-xs); color: var(--ui-gray-500);
}

/* ── Crossword Generator ── */
.nc-tool-crossword { padding: var(--ui-space-3); }
.nc-tool-crossword-layout {
    display: flex; gap: var(--ui-space-4); flex-wrap: wrap;
}
.nc-tool-crossword-grid-wrap { flex: 1; min-width: 280px; }
.nc-tool-crossword-grid {
    display: inline-grid; gap: 1px; background: var(--ui-gray-300);
    border: 2px solid var(--ui-gray-400); border-radius: var(--ui-radius-md);
}
.nc-tool-crossword-cell {
    width: 32px; height: 32px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.nc-tool-crossword-cell-block { background: var(--ui-gray-700); }
.nc-tool-crossword-cell-active { background: var(--ui-white); }
.nc-tool-crossword-input {
    width: 100%; height: 100%; border: none; text-align: center;
    font-size: var(--ui-text-sm); font-weight: var(--ui-font-bold);
    text-transform: uppercase; background: transparent; outline: none;
}
.nc-tool-crossword-input:focus { background: var(--ui-primary-50); }
.nc-tool-crossword-cell-num {
    position: absolute; top: 1px; left: 2px;
    font-size: 8px; color: var(--ui-gray-500); line-height: 1;
}
.nc-tool-crossword-correct { background: #dcfce7 !important; color: #166534; }
.nc-tool-crossword-wrong { background: #fee2e2 !important; color: #991b1b; }
.nc-tool-crossword-cell-highlight { background: var(--ui-primary-100); }
.nc-tool-crossword-clues {
    flex: 1; min-width: 200px; max-height: 400px; overflow-y: auto;
    font-size: var(--ui-text-xs);
}
.nc-tool-crossword-clue-item {
    padding: 4px var(--ui-space-2); cursor: pointer; border-radius: var(--ui-radius-sm);
}
.nc-tool-crossword-clue-item:hover { background: var(--ui-gray-100); }
.nc-tool-crossword-clue-active { background: var(--ui-primary-50); color: var(--ui-primary-700); }
.nc-tool-crossword-clue-heading {
    font-size: var(--ui-text-xs); font-weight: var(--ui-font-bold);
    color: var(--ui-gray-600); margin-bottom: var(--ui-space-1);
    display: flex; align-items: center; gap: var(--ui-space-1);
}
.nc-tool-crossword-clue-num { font-weight: var(--ui-font-bold); color: var(--ui-gray-500); }
.nc-tool-crossword-clue-section { margin-bottom: var(--ui-space-2); }

/* ── Memory Game ── */
.nc-tool-memory { padding: var(--ui-space-3); }
.nc-tool-memory-grid {
    display: grid; gap: var(--ui-space-2);
}
.nc-tool-memory-card {
    perspective: 800px; cursor: pointer; min-height: 80px;
}
.nc-tool-memory-inner {
    width: 100%; height: 100%; min-height: 80px; position: relative;
    transform-style: preserve-3d; transition: transform 0.5s ease;
}
.nc-tool-memory-card--flipped .nc-tool-memory-inner { transform: rotateY(180deg); }
.nc-tool-memory-back, .nc-tool-memory-front {
    position: absolute; inset: 0; backface-visibility: hidden;
    border-radius: var(--ui-radius-lg); display: flex; align-items: center; justify-content: center;
    padding: var(--ui-space-2); font-size: var(--ui-text-xs); text-align: center;
    border: var(--ui-border-width) solid var(--ui-gray-200);
}
.nc-tool-memory-back {
    background: linear-gradient(135deg, var(--ui-primary-100), var(--ui-secondary-100));
    color: var(--ui-primary-400); font-size: var(--ui-text-xl);
}
.nc-tool-memory-front {
    background: var(--ui-white); transform: rotateY(180deg);
}
.nc-tool-memory-front--term { border-left: 3px solid var(--ui-primary-400); }
.nc-tool-memory-front--def { border-left: 3px solid var(--ui-secondary-400); }
.nc-tool-memory-card--matched .nc-tool-memory-front {
    background: #f0fdf4; border-color: #86efac;
}
.nc-tool-memory-stats {
    display: flex; gap: var(--ui-space-4); font-size: var(--ui-text-xs);
    color: var(--ui-gray-500); margin-bottom: var(--ui-space-2);
}
.nc-tool-memory-banner {
    text-align: center; padding: var(--ui-space-4);
    background: #f0fdf4; border: 2px solid #4ade80; border-radius: var(--ui-radius-lg);
    margin-top: var(--ui-space-3);
}

/* ── Exit Ticket ── */
.nc-tool-exit { padding: var(--ui-space-3); }
.nc-tool-exit-ticket {
    background: var(--ui-white); border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-sm);
    border-top: 3px dashed var(--ui-primary-300); padding: var(--ui-space-4);
}
.nc-tool-exit-lesson-ref {
    font-size: var(--ui-text-xs); color: var(--ui-gray-500);
    padding-bottom: var(--ui-space-2); margin-bottom: var(--ui-space-3);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
}
.nc-tool-exit-question {
    margin-bottom: var(--ui-space-4);
}
.nc-tool-exit-q-label {
    font-size: var(--ui-text-sm); font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-700); margin-bottom: var(--ui-space-2);
    display: flex; align-items: center; gap: var(--ui-space-2);
}
.nc-tool-exit-q-num {
    width: 22px; height: 22px; border-radius: var(--ui-radius-full);
    background: var(--ui-primary-100); color: var(--ui-primary-700);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--ui-text-xs); font-weight: var(--ui-font-bold); flex-shrink: 0;
}
.nc-tool-exit-options { display: flex; flex-direction: column; gap: var(--ui-space-1); }
.nc-tool-exit-option {
    display: flex; align-items: center; gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-3); border-radius: var(--ui-radius-md);
    border: var(--ui-border-width) solid var(--ui-gray-200); cursor: pointer;
    font-size: var(--ui-text-sm); transition: all 0.15s ease;
}
.nc-tool-exit-option:hover { border-color: var(--ui-primary-300); }
.nc-tool-exit-option-letter {
    width: 22px; height: 22px; border-radius: var(--ui-radius-full);
    background: var(--ui-gray-100); color: var(--ui-gray-600);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--ui-text-xs); font-weight: var(--ui-font-bold); flex-shrink: 0;
}
.nc-tool-exit-option-active {
    border-color: var(--ui-primary-400); background: var(--ui-primary-50);
}
.nc-tool-exit-option-active .nc-tool-exit-option-letter {
    background: var(--ui-primary); color: var(--ui-white);
}
.nc-tool-exit-option-correct { border-color: #4ade80; background: #f0fdf4; }
.nc-tool-exit-option-wrong { border-color: #f87171; background: #fef2f2; }
.nc-tool-exit-scale { margin-top: var(--ui-space-1); }
.nc-tool-exit-scale-labels {
    display: flex; justify-content: space-between;
    font-size: var(--ui-text-2xs); color: var(--ui-gray-400); margin-bottom: 4px;
}
.nc-tool-exit-scale-btns { display: flex; gap: var(--ui-space-1); }
.nc-tool-exit-scale-btn {
    width: 36px; height: 36px; border-radius: var(--ui-radius-full);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--ui-text-sm); cursor: pointer; transition: all 0.15s ease;
    background: var(--ui-white);
}
.nc-tool-exit-scale-btn:hover { border-color: var(--ui-primary-300); }
.nc-tool-exit-scale-active {
    background: var(--ui-primary); color: var(--ui-white); border-color: var(--ui-primary);
}
.nc-tool-exit-textarea {
    width: 100%; min-height: 60px; border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md); padding: var(--ui-space-2);
    font-size: var(--ui-text-sm); font-family: inherit; resize: vertical;
}
.nc-tool-exit-textarea:focus { border-color: var(--ui-primary-400); outline: none; }
.nc-tool-exit-q-feedback {
    font-size: var(--ui-text-xs); margin-top: var(--ui-space-1);
    padding: var(--ui-space-1) var(--ui-space-2); border-radius: var(--ui-radius-sm);
}

/* ── Cornell Notes ── */
.nc-tool-cornell { padding: var(--ui-space-3); }
.nc-tool-cornell-header {
    display: flex; gap: var(--ui-space-4); align-items: center;
    padding-bottom: var(--ui-space-2); margin-bottom: var(--ui-space-3);
    border-bottom: 2px solid var(--ui-gray-300);
}
.nc-tool-cornell-header input {
    border: none; border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
    font-size: var(--ui-text-sm); padding: 4px 8px; flex: 1;
    font-family: inherit;
}
.nc-tool-cornell-header input:focus { border-color: var(--ui-primary-400); outline: none; }
.nc-tool-cornell-body {
    display: flex; gap: 0; min-height: 300px;
    border: var(--ui-border-width) solid var(--ui-gray-200); border-radius: var(--ui-radius-lg);
    overflow: hidden;
}
.nc-tool-cornell-cue-col {
    width: 30%; background: var(--ui-gray-50);
    border-right: 2px solid var(--ui-gray-300); padding: var(--ui-space-2);
    display: flex; flex-direction: column; gap: var(--ui-space-2);
}
.nc-tool-cornell-note-col {
    width: 70%; padding: var(--ui-space-2);
    display: flex; flex-direction: column; gap: var(--ui-space-2);
}
.nc-tool-cornell-col-label {
    font-size: var(--ui-text-2xs); font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-400); text-transform: uppercase; letter-spacing: 0.05em;
    padding-bottom: var(--ui-space-1); border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
}
.nc-tool-cornell-row-cue, .nc-tool-cornell-row-note {
    min-height: 50px; border: none; border-bottom: var(--ui-border-width) dashed var(--ui-gray-200);
    padding: var(--ui-space-1); font-size: var(--ui-text-sm); font-family: inherit;
    resize: none; width: 100%; background: transparent;
}
.nc-tool-cornell-row-cue:focus, .nc-tool-cornell-row-note:focus { outline: none; background: var(--ui-white); }
.nc-tool-cornell-row-cue::placeholder, .nc-tool-cornell-row-note::placeholder {
    color: var(--ui-gray-300); font-style: italic;
}
.nc-tool-cornell-summary {
    border-top: 2px solid var(--ui-gray-300); padding: var(--ui-space-3);
    margin-top: var(--ui-space-3);
}
.nc-tool-cornell-summary textarea {
    width: 100%; min-height: 60px; border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md); padding: var(--ui-space-2);
    font-size: var(--ui-text-sm); font-family: inherit; resize: vertical;
}
.nc-tool-cornell-summary textarea:focus { border-color: var(--ui-primary-400); outline: none; }
.nc-tool-cornell-wordcount {
    font-size: var(--ui-text-2xs); color: var(--ui-gray-400);
    text-align: right; margin-top: var(--ui-space-1);
}

/* ──────────────────────────────────────────────────────────────
   Reference Cards — Tool documentation in Experiments gallery
   ────────────────────────────────────────────────────────────── */

.nc-ref-card {
    background: var(--ui-gray-50); border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md); margin-bottom: var(--ui-space-3);
    overflow: hidden; transition: all 0.2s;
}
.nc-ref-card-header {
    display: flex; align-items: center; gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-3); cursor: pointer;
    font-size: var(--ui-text-xs); color: var(--ui-gray-500);
}
.nc-ref-card-header:hover { background: var(--ui-gray-100); }
.nc-ref-card-header .nc-ref-chevron {
    transition: transform 0.2s; font-size: var(--ui-text-2xs);
}
.nc-ref-card-header .nc-ref-chevron.open { transform: rotate(90deg); }
.nc-ref-card-body {
    display: none; padding: var(--ui-space-3);
    border-top: var(--ui-border-width) solid var(--ui-gray-200);
}
.nc-ref-card-body.open { display: block; }

.nc-ref-badge {
    display: inline-block; font-family: 'SF Mono', 'Consolas', monospace;
    font-size: var(--ui-text-2xs); background: var(--ui-primary-50);
    color: var(--ui-primary-700); padding: 1px 8px;
    border-radius: var(--ui-radius-full); border: var(--ui-border-width) solid var(--ui-primary-200);
}
.nc-ref-keyword {
    display: inline-block; font-family: 'SF Mono', 'Consolas', monospace;
    font-size: var(--ui-text-2xs); background: var(--ui-secondary-50);
    color: var(--ui-secondary-700); padding: 1px 8px;
    border-radius: var(--ui-radius-full); border: var(--ui-border-width) solid var(--ui-secondary-200);
}
.nc-ref-chip {
    display: inline-block; font-size: var(--ui-text-2xs);
    padding: 1px 6px; border-radius: var(--ui-radius-full);
    background: var(--ui-gray-100); color: var(--ui-gray-600);
    margin: 1px 2px;
}
.nc-ref-chip.science { background: hsl(157, 40%, 92%); color: hsl(157, 50%, 30%); }
.nc-ref-chip.subject { background: hsl(210, 40%, 92%); color: hsl(210, 50%, 30%); }

.nc-ref-config-table {
    width: 100%; border-collapse: collapse;
    font-size: var(--ui-text-2xs); margin-top: var(--ui-space-2);
}
.nc-ref-config-table th {
    text-align: left; padding: 3px 8px;
    background: var(--ui-gray-100); color: var(--ui-gray-500);
    font-weight: var(--ui-font-semibold); text-transform: uppercase;
    letter-spacing: 0.04em; border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
}
.nc-ref-config-table td {
    padding: 3px 8px; border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
    color: var(--ui-gray-700); vertical-align: top;
}
.nc-ref-config-table td:first-child {
    font-family: 'SF Mono', 'Consolas', monospace; color: var(--ui-primary-700);
    white-space: nowrap;
}
.nc-ref-config-table td:nth-child(2) {
    font-family: 'SF Mono', 'Consolas', monospace; color: var(--ui-gray-500);
    white-space: nowrap;
}

.nc-ref-section-label {
    font-size: var(--ui-text-2xs); font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-400); text-transform: uppercase; letter-spacing: 0.04em;
    margin-top: var(--ui-space-2); margin-bottom: var(--ui-space-1);
}

.nc-ref-desc {
    font-size: var(--ui-text-xs); color: var(--ui-gray-600);
    line-height: 1.5; margin-bottom: var(--ui-space-2);
}

/* Tier header in Manipulatives gallery */
.nc-tier-header {
    padding: var(--ui-space-3) var(--ui-space-4); margin-top: var(--ui-space-5);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
}
.nc-tier-header-title {
    font-size: var(--ui-text-sm); font-weight: var(--ui-font-semibold); color: var(--ui-gray-700);
}
.nc-tier-header-desc {
    font-size: var(--ui-text-xs); color: var(--ui-gray-500); margin-top: 2px;
}
.nc-tier-header-philosophy {
    font-size: var(--ui-text-xs); color: var(--ui-gray-400); margin-top: var(--ui-space-1);
    font-style: italic; line-height: 1.5;
}

/* ─── Phase 17: ARIA / Accessibility ──────────────────────────────────────── */

/* Screen-reader only text — visually hidden but accessible */
.nc-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Focus-visible ring for all interactive tool elements */
.nc-tool-wrap :focus-visible,
[class*="nc-"] :focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 2px;
    border-radius: var(--ui-radius-sm);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .nc-tool-wrap *, [class*="nc-"] * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast focus for accessibility tools (Tier 4) */
.nc-a11y-focus:focus-visible {
    outline: 3px solid var(--ui-secondary);
    outline-offset: 3px;
}

/* Live region styling (visually hidden by default, shown on update) */
[aria-live] { min-height: 1px; }

/* ─── Lesson Module Modal (R6) ─── */

.nc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.nc-modal-card {
    background: var(--ui-white);
    border-radius: var(--ui-radius-xl);
    box-shadow: var(--ui-shadow-2xl);
    overflow: hidden;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.nc-modal-header {
    padding: var(--ui-space-4) var(--ui-space-5);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nc-modal-header h3 {
    font-size: var(--ui-text-lg);
    font-weight: var(--ui-font-bold);
    color: var(--ui-gray-800);
    margin: 0;
}

.nc-modal-close {
    color: var(--ui-gray-400);
    font-size: var(--ui-text-xl);
    font-weight: var(--ui-font-bold);
    background: none;
    border: none;
    cursor: pointer;
}

.nc-modal-close:hover { color: var(--ui-gray-600); }

.nc-modal-body {
    padding: var(--ui-space-4) var(--ui-space-5);
    overflow-y: auto;
    flex: 1;
}

.nc-modal-footer {
    padding: var(--ui-space-3) var(--ui-space-5);
    border-top: var(--ui-border-width) solid var(--ui-gray-200);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.nc-modal-btn {
    padding: 8px 16px;
    border-radius: var(--ui-radius-lg);
    font-weight: var(--ui-font-medium);
    border: none;
    cursor: pointer;
}

.nc-modal-btn-primary {
    background: var(--ui-primary);
    color: white;
}

.nc-modal-btn-primary:hover { background: var(--ui-primary-700); }

.nc-modal-btn-secondary {
    background: var(--ui-gray-100);
    color: var(--ui-gray-700);
}

.nc-modal-btn-secondary:hover { background: var(--ui-gray-200); }

/* ─── Lesson Module Focus & Keyboard Support (R5) ─── */

/* Focus ring for lesson accordion items and test question options */
[role="option"]:focus-visible,
[role="radio"]:focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 2px;
    border-radius: var(--ui-radius-lg);
}

/* ─── Subject Module Header Banner ─── */
/* Provides visible gradient background for white text in subject UIs.
   Set --nc-banner-hue on the element to customise per subject. */
.nc-module-banner {
    background: linear-gradient(135deg,
        hsl(var(--nc-banner-hue, 210), 60%, 35%),
        hsl(var(--nc-banner-hue, 210), 65%, 25%));
    color: var(--ui-white);
    padding: var(--ui-space-6);
    border-radius: var(--ui-radius-lg);
    margin-bottom: var(--ui-space-6);
}

/* ─── Lesson Sidebar Nav Items ─── */
.nc-lesson-item {
    padding: var(--ui-space-3);
    border-radius: var(--ui-radius-lg);
    margin-bottom: var(--ui-space-2);
    cursor: pointer;
    background: var(--ui-gray-50);
    border: 2px solid transparent;
    transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.nc-lesson-item:hover {
    background: var(--ui-gray-100);
    border-color: var(--ui-gray-300);
}
.nc-lesson-item.nc-lesson-active {
    background: var(--ui-primary-50);
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 1px var(--ui-primary-200);
}
.nc-lesson-item.nc-lesson-active:hover {
    background: var(--ui-primary-100);
}
.nc-lesson-item * {
    cursor: pointer;
}