:root { color-scheme: light; font-family: Inter, "Microsoft YaHei", sans-serif; color: #16324a; background: #f4f7fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% 10%, #d9f5ff 0, transparent 32%), radial-gradient(circle at 90% 80%, #ffe7be 0, transparent 34%), #f7f9fc; }
.shell { width: min(1040px, calc(100% - 32px)); min-height: 100vh; margin: auto; display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; padding: 48px 0; }
.eyebrow, .step { color: #0d7f78; font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1 { max-width: 720px; margin: 12px 0 20px; color: #102a43; font-size: clamp(2.6rem, 6vw, 5.8rem); line-height: .98; letter-spacing: -.05em; }
.lead { max-width: 580px; color: #486581; font-size: 1.15rem; line-height: 1.8; }
.join-card { padding: 34px; border: 1px solid rgba(255,255,255,.85); border-radius: 26px; background: rgba(255,255,255,.82); box-shadow: 0 24px 70px rgba(34, 68, 102, .14); backdrop-filter: blur(12px); }
h2 { margin: 10px 0 28px; font-size: 2rem; }
label { display: block; margin-bottom: 9px; font-weight: 700; }
input { width: 100%; padding: 16px; border: 2px solid #bcccdc; border-radius: 13px; font: inherit; font-size: 1.25rem; }
#class-code { letter-spacing: .12em; }
label + input + label { margin-top: 18px; }
button { width: 100%; margin-top: 14px; padding: 16px; border: 0; border-radius: 13px; background: #0d7f78; color: white; font: inherit; font-weight: 800; }
button:disabled, input:disabled { opacity: .58; cursor: not-allowed; }
.notice { margin: 18px 0 0; color: #627d98; font-size: .9rem; line-height: 1.6; }
.notice.error { color: #b42318; }
.notice.success { color: #087443; }
.class-code-result { display: block; margin-top: 18px; padding: 18px; border-radius: 14px; background: #e8fff6; color: #075e54; font-size: 2.4rem; font-weight: 900; letter-spacing: .18em; text-align: center; }
.teacher-classroom { margin-top: 28px; padding-top: 26px; border-top: 1px solid #d9e2ec; }
.teacher-lesson-studio, .teacher-exercises { margin-top: 24px; padding: 22px; border: 1px solid #d9e2ec; border-radius: 18px; background: #fbfdff; }
.teacher-lesson-studio h3, .teacher-exercises h3 { margin: 8px 0 10px; color: #263d63; }
.teacher-demo-tasks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 18px 0; }
.teacher-demo-tasks article { display: grid; gap: 4px; padding: 12px; border-radius: 12px; background: #eef6f7; }
.teacher-demo-tasks span { color: #627d98; font-size: .82rem; }
.teacher-demo-code { width: 100%; min-height: 210px; margin-top: 8px; padding: 14px; resize: vertical; border: 2px solid #9fb3c8; border-radius: 12px; background: #102a43; color: #e6fffa; font: 500 .94rem/1.65 Consolas, monospace; }
.teacher-exercises ol, .student-exercises ol { margin: 12px 0 0; padding-left: 24px; color: #486581; line-height: 1.8; }
.teacher-active-classrooms { margin-top: 26px; padding-top: 24px; border-top: 1px solid #d9e2ec; }
.teacher-active-classrooms h3 { margin: 0; color: #263d63; }
.teacher-feedback-hub { margin-top: 26px; padding: 24px; border: 1px solid #a6e3d6; border-radius: 18px; background: #f4fffc; }
.teacher-feedback-hub h3 { margin: 0; color: #087f78; }
.teacher-feedback-entry { margin-top: 26px; padding: 20px 24px; border: 1px solid #a6e3d6; border-radius: 18px; background: #f4fffc; }
.teacher-feedback-entry h3 { margin: 0; color: #087f78; }
.teacher-feedback-entry a { text-decoration: none; }
.feedback-entry-button { background: #087f78; color: #ffffff; border: 1px solid #087f78; box-shadow: 0 4px 10px rgba(8, 127, 120, .2); }
.feedback-entry-button:hover, .feedback-entry-button:focus-visible { background: #075e54; color: #ffffff; border-color: #075e54; }
.teacher-feedback-sources { display: grid; gap: .7rem; margin-top: .8rem; }
.teacher-feedback-lesson-group { border: 1px solid #c7e8df; border-radius: 14px; background: #ffffff; overflow: hidden; }
.teacher-feedback-lesson-group summary { display: flex; justify-content: space-between; gap: .8rem; align-items: center; padding: .9rem 1rem; cursor: pointer; list-style-position: inside; color: #17324d; }
.teacher-feedback-lesson-group summary strong { color: #087f78; }
.teacher-feedback-lesson-group summary span { color: #55708c; font-size: .88rem; }
.teacher-feedback-classroom-list { display: grid; gap: .55rem; padding: 0 .7rem .7rem; }
.teacher-feedback-source-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .9rem 1rem; border: 1px solid #c7e8df; border-radius: 14px; background: #ffffff; }
.teacher-feedback-source-card strong, .teacher-feedback-source-card span { display: block; }
.teacher-feedback-source-card strong { color: #17324d; }
.teacher-feedback-source-card span { margin-top: .22rem; color: #55708c; font-size: .88rem; }
.teacher-feedback-source-students { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
@media (max-width: 760px) { .teacher-feedback-source-card { grid-template-columns: 1fr; } .teacher-feedback-source-students { justify-content: flex-start; } }
@media (max-width: 560px) { .teacher-feedback-lesson-group summary { align-items: flex-start; flex-direction: column; gap: .2rem; } }
.active-classroom-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 14px; border: 1px solid #d9e2ec; border-radius: 14px; background: #f7fafc; }
.active-classroom-card strong, .active-classroom-card span { display: block; }
.active-classroom-card strong { color: #075e54; font-size: 1.15rem; letter-spacing: .08em; }
.active-classroom-card span { margin-top: 5px; color: #627d98; font-size: .82rem; }
.active-classroom-controls { display: flex; align-items: center; gap: 8px; }
.active-classroom-controls input { width: 72px; padding: 9px 8px; font-size: .9rem; text-align: center; }
.compact-button { width: auto; min-width: 86px; margin: 0; padding: 10px 12px; font-size: .85rem; }
.admin-teacher-list { display: grid; gap: 8px; margin-top: 12px; }
.admin-teacher-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: 10px; background: #f0f4f8; color: #334e68; font-size: .86rem; }
.admin-teacher-item button { flex: none; }
.admin-teacher-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.teacher-classroom-heading, .teacher-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.teacher-classroom-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 18px 0; padding: 16px 18px; border: 3px solid #fff; border-radius: 18px; background: #e8fff6; box-shadow: 0 7px 0 rgba(118, 209, 177, .35); }
.teacher-classroom-toolbar strong { display: block; margin-top: 4px; color: #075e54; font-size: 1.15rem; letter-spacing: .08em; }
.teacher-classroom-toolbar p { margin: 6px 0 0; color: #486581; font-size: .86rem; line-height: 1.5; }
.teacher-toolbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.teacher-toolbar-actions output { align-self: center; padding: 9px 11px; border-radius: 10px; background: #fff; color: #075e54; font-weight: 800; white-space: nowrap; }
.teacher-practice-summary { display: flex; flex-basis: 100%; flex-wrap: wrap; gap: 7px; color: #486581; font-size: .82rem; line-height: 1.5; }
.teacher-practice-summary span { padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.78); }
.teacher-classroom-heading h3 { margin: 0; font-size: 1.25rem; }
.teacher-metric { margin: 20px 0 12px; color: #486581; font-weight: 700; }
.teacher-task-summary, .teacher-students { display: grid; gap: 8px; }
.teacher-task-summary { grid-template-columns: repeat(2, 1fr); }
.teacher-task-summary p, .teacher-students p { margin: 0; padding: 10px 12px; border-radius: 10px; background: #f0f4f8; color: #334e68; font-size: .88rem; }
.teacher-students { max-height: 190px; margin-top: 10px; overflow: auto; }
.teacher-actions { margin-top: 18px; }
.teacher-actions button { flex: 1; }
.secondary-button { background: #486581; }
.danger-button { background: #b42318; }
.teacher { grid-column: 1 / -1; color: #0d7f78; font-weight: 700; }
.teacher a { color: inherit; text-decoration: none; }
.hero-lead { max-width: 720px; margin: 10px auto 0; color: #526d82; font-size: .98rem; line-height: 1.65; }
.site-footer { grid-column: 1 / -1; width: min(920px, 100%); margin: 8px auto 0; padding: 18px 20px; border-top: 1px solid #d9e2ec; color: #526d82; font-size: .84rem; line-height: 1.65; }
.site-footer p { margin: 4px 0; }
.site-footer strong { color: #1f3a5f; }
.site-footer details { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #f7fafc; }
.site-footer summary { cursor: pointer; color: #075e54; font-weight: 800; }
.site-footer .teacher { margin-top: 12px; font-size: .9rem; }
.workbench { grid-column: 1 / -1; width: min(920px, 100%); margin: auto; }
.workbench-header, .mission-heading, .progress-copy { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.workbench-header h2 { margin-bottom: 0; }
.student-badge { flex: none; padding: 12px 16px; border-radius: 999px; background: #102a43; color: white; }
.student-badge small { display: block; margin-top: 3px; color: #bcccdc; font-size: .72rem; text-align: center; }
.progress-copy { margin: 28px 0 8px; color: #486581; font-size: .9rem; }
.progress-track { height: 10px; overflow: hidden; border-radius: 999px; background: #d9e2ec; }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: #0d7f78; transition: width .25s ease; }
.lesson-guide-card { margin: 20px 0; padding: 18px 20px; border: 1px solid #b8ddd8; border-radius: 18px; background: #f3fffb; }
.lesson-guide-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lesson-guide-heading h3 { margin: 0; color: #163b61; font-size: 1.15rem; }
.lesson-guide-card > p { margin: 9px 0 0; color: #334e68; line-height: 1.65; }
.lesson-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; }
.lesson-guide-grid div { padding: 10px 12px; border-radius: 12px; background: #fff; }
.lesson-guide-grid dt { color: #087d6f; font-size: .78rem; font-weight: 800; }
.lesson-guide-grid dd { margin: 5px 0 0; color: #334e68; font-size: .9rem; line-height: 1.55; }
.teacher-tip { padding: 10px 12px; border-left: 4px solid #ffbd54; border-radius: 8px; background: #fff8e8; color: #754b13 !important; font-size: .9rem; }
.task-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 22px 0; padding: 0; list-style: none; }
.task-tab { width: 100%; margin: 0; padding: 12px 8px; border: 2px solid transparent; background: white; color: #486581; box-shadow: 0 5px 18px rgba(34,68,102,.08); }
.task-tab[aria-current="step"] { border-color: #0d7f78; color: #075e54; }
.task-tab.done { background: #e8fff6; color: #087443; }
.mission-card { padding: 30px; border-radius: 24px; background: rgba(255,255,255,.92); box-shadow: 0 24px 70px rgba(34,68,102,.12); }
.mission-kicker { margin: 0 0 6px; color: #0d7f78; font-weight: 800; }
.mission-heading h3 { margin: 0; font-size: 1.7rem; }
.mission-state { padding: 7px 11px; border-radius: 999px; background: #e7f0f7; color: #486581; font-size: .85rem; font-weight: 800; }
.mission-guide { margin: 20px 0; color: #486581; line-height: 1.7; }
.ide-editor-shell { position: relative; display: grid; grid-template-columns: 48px 1fr; min-height: 360px; margin-top: 9px; overflow: hidden; border: 2px solid #9fb3c8; border-radius: 14px; background: #102a43; --editor-font: 400 1rem/1.75 "Cascadia Mono", Consolas, monospace; --editor-line-height: 1.75; }
.ide-line-numbers { z-index: 2; box-sizing: border-box; height: 100%; padding: 20px 10px 20px 0; color: #7890aa; background: #173451; font: var(--editor-font); line-height: var(--editor-line-height); text-align: right; user-select: none; white-space: pre; }
.code-highlight { z-index: 0; position: absolute; inset: 0 0 0 48px; box-sizing: border-box; width: calc(100% - 48px); height: 100%; margin: 0; padding: 20px; overflow: hidden; color: #e6fffa; font: var(--editor-font); line-height: var(--editor-line-height); letter-spacing: 0; font-variant-ligatures: none; tab-size: 2; white-space: pre; pointer-events: none; }
.code-highlight .keyword { color: #ffcf70; }
.code-highlight .string { color: #a8e6cf; }
.code-highlight .comment { color: #8ca8bf; }
.code-highlight .number { color: #f7a072; }
.code-highlight .error-line-highlight { display: inline-block; min-width: 100%; border-radius: 4px; background: rgba(255, 92, 92, .28); box-shadow: inset 4px 0 #ff6b6b; }
.ide-run-button { position: absolute; z-index: 4; right: 14px; bottom: 14px; display: grid; width: 54px; height: 38px; margin: 0; padding: 0; place-items: center; border: 1px solid rgba(158, 234, 221, .65); border-radius: 9px; background: rgba(13, 127, 120, .94); color: #f4fffd; font-size: .92rem; line-height: 1; box-shadow: 0 4px 10px rgba(0, 0, 0, .28); }
.ide-run-button:hover { background: #15988d; transform: scale(1.08); }
.ide-run-button:disabled { opacity: .62; cursor: wait; }
.code-editor { z-index: 1; grid-column: 2; width: 100%; min-height: 360px; padding: 20px; resize: vertical; border: 0; outline: 0; box-sizing: border-box; background: transparent; color: transparent; caret-color: #ffffff; font: var(--editor-font); line-height: var(--editor-line-height); letter-spacing: 0; font-variant-ligatures: none; tab-size: 2; white-space: pre; overflow-wrap: normal; }
.code-editor::selection { color: transparent; background: rgba(91, 155, 213, .45); }
.code-actions { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; flex-wrap: wrap; }
.code-line-help { color: #52708f; font-size: .9rem; }
.code-diagnostics { margin: 8px 0; padding: 10px 14px; border-radius: 10px; background: #fff5f2; color: #b42318; font: 600 .9rem/1.5 Consolas, "Microsoft YaHei", monospace; white-space: pre-wrap; }
.code-inputs { display: grid; gap: 8px; margin: 12px 0; padding: 12px 14px; border: 1px solid #b8d8dd; border-radius: 12px; background: #f1fbfa; }
.code-inputs strong { color: #075e54; }
.code-input-row { display: grid; grid-template-columns: minmax(120px, .35fr) 1fr; gap: 10px; align-items: center; }
.code-input-row input { min-width: 0; }
.code-console { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: #101820; color: #d7f9e9; }
.code-console h4 { margin: 0 0 8px; color: #9dd9c3; }
.code-console pre { min-height: 48px; margin: 0; overflow: auto; color: #d7f9e9; font: 500 .95rem/1.6 Consolas, monospace; white-space: pre-wrap; }
.visual-output { margin-top: 14px; padding: 16px; border: 2px solid #d8c8ff; border-radius: 16px; background: #faf7ff; }
.visual-output-kicker { margin: 0 0 10px; color: #7051a8; font-size: .82rem; font-weight: 800; }
.mood-card { display: flex; align-items: center; gap: 16px; min-height: 100px; padding: 18px; border-radius: 14px; background: linear-gradient(135deg, #fff2b5, #ffd7a8); color: #3d3162; transition: background .25s ease, transform .25s ease; }
.mood-card:hover { transform: translateY(-2px); }
.mood-card-emoji { font-size: 3.2rem; line-height: 1; }
.mood-card h4 { margin: 0 0 6px; font-size: 1.2rem; }
.mood-card p { margin: 0; line-height: 1.6; }
.code-editor:focus { background: transparent; outline: 4px solid rgba(13,127,120,.2); border-color: #0d7f78; }
.code-editor:focus::selection { color: transparent; background: rgba(91, 155, 213, .45); }
.code-editor.error-line { border-color: #c62828; box-shadow: 0 0 0 4px rgba(198,40,40,.18), inset 0 2px 10px rgba(0,0,0,.16); }
.code-help { margin: 8px 0 0; color: #829ab1; font-size: .82rem; }
.run-ide-modal { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(5, 16, 30, .72); backdrop-filter: blur(5px); }
.run-ide-modal[hidden] { display: none; }
.run-ide-window { width: min(900px, 100%); max-height: min(720px, calc(100vh - 40px)); overflow: auto; padding: 24px; border: 1px solid #2c6388; border-radius: 18px; background: #0c1d31; color: #e6fffa; box-shadow: 0 24px 80px rgba(0, 0, 0, .42); }
.run-ide-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.run-ide-header button { width: auto; margin: 0; padding: 8px 18px; border-radius: 9px; font-size: .9rem; }
.run-ide-header h2 { margin: 5px 0 0; color: #e6fffa; font-size: 1.45rem; }
.run-ide-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.run-ide-pane { display: grid; gap: 9px; min-width: 0; color: #9eeadd; font-weight: 800; }
.run-ide-pane small { display: block; margin-top: 3px; color: #8ca8bf; font-size: .75rem; font-weight: 500; }
.run-ide-pane textarea, .run-ide-pane pre { min-height: 260px; margin: 0; padding: 14px; border: 1px solid #2c6388; border-radius: 10px; box-sizing: border-box; background: #102a43; color: #e6fffa; font: 500 .95rem/1.6 Consolas, "Cascadia Mono", monospace; white-space: pre-wrap; }
.run-ide-pane textarea { width: 100%; resize: vertical; outline: none; }
.run-ide-pane textarea:focus { border-color: #2dd4bf; box-shadow: 0 0 0 3px rgba(45, 212, 191, .2); }
.run-ide-status { min-height: 1.5em; margin: 14px 0 0; color: #9eeadd; }
.run-ide-status.error { color: #ffaaa5; }
.run-ide-status.success { color: #a8e6cf; }
.ai-output { margin-top: 22px; padding: 20px; border: 2px solid #b8eadb; border-radius: 16px; background: #effcf6; }
.ai-output h4 { margin: 0 0 12px; color: #075e54; font-size: 1.05rem; }
.ai-output p { margin: 8px 0; color: #234e52; line-height: 1.7; white-space: pre-wrap; }
@media (max-width: 760px) { .shell { grid-template-columns: 1fr; gap: 28px; padding: 36px 0; } h1 { font-size: clamp(2.6rem, 14vw, 4.2rem); } .teacher { grid-column: auto; } }
@media (max-width: 640px) { .workbench-header, .mission-heading, .teacher-classroom-heading, .teacher-classroom-toolbar, .teacher-actions { align-items: flex-start; flex-direction: column; } .task-tabs, .teacher-task-summary { grid-template-columns: 1fr 1fr; } .mission-card { padding: 22px 18px; } .ide-editor-shell, .code-editor { min-height: 280px; font-size: .9rem; } .ide-editor-shell { --editor-font: 400 .9rem/1.85 "Cascadia Mono", Consolas, monospace; --editor-line-height: 1.85; } .teacher-actions button { width: 100%; } }
@media (max-width: 640px) { .run-ide-grid { grid-template-columns: 1fr; } .run-ide-pane textarea, .run-ide-pane pre { min-height: 170px; } }
@media (max-width: 640px) { .lesson-guide-grid { grid-template-columns: 1fr; } }

/* Student-facing adventure theme. The teacher console keeps the compact admin style above. */
.student-mode {
  color: #253858;
  background: radial-gradient(circle at 8% 8%, #c9f7ec 0, transparent 30%),
    radial-gradient(circle at 95% 85%, #ffe3aa 0, transparent 36%), #fffaf1;
}
.student-mode .shell { width: min(1120px, calc(100% - 28px)); grid-template-columns: 1.05fr .95fr; gap: 34px; padding: 34px 0 52px; }
.student-mode .hero { grid-column: 1 / -1; padding: 10px 8px; text-align: center; }
.student-mode .eyebrow, .student-mode .step { color: #0b8b83; letter-spacing: .04em; text-transform: none; }
.student-mode h1 { max-width: 1000px; margin: 7px auto 10px; color: #263d63; font-size: clamp(2rem, 4.2vw, 3.55rem); letter-spacing: -.045em; line-height: 1.08; }
.student-mode #student-panel { grid-column: 1 / -1; width: min(520px, 100%); margin: 0 auto; }
.student-mode .lead { max-width: 520px; color: #596f8c; font-size: 1rem; line-height: 1.6; }
.student-mode .join-card, .student-mode .mission-card { border: 3px solid #fff; border-radius: 30px; background: rgba(255, 255, 255, .9); box-shadow: 0 16px 0 rgba(255, 204, 121, .34), 0 26px 60px rgba(54, 79, 120, .14); }
.student-mode .join-card { padding: 31px; }
.student-mode .join-card h2 { color: #263d63; font-size: 1.85rem; }
.student-start-steps { display: grid; gap: 9px; margin: 0 0 22px; padding: 0; list-style: none; }
.student-start-steps li { display: flex; align-items: center; gap: 10px; color: #486581; font-size: .92rem; line-height: 1.4; }
.student-start-steps strong { display: inline-grid; width: 24px; height: 24px; place-items: center; border-radius: 999px; background: #e5faf5; color: #087d6f; font-size: .8rem; }
.student-mode #class-code { border-color: #9edfd6; color: #263d63; font-size: 1.5rem; text-align: center; }
.student-mode #join-button, .student-mode #run-task-button { background: linear-gradient(135deg, #0b9388, #26b49a); box-shadow: 0 5px 0 #08736e; transition: transform .15s ease, box-shadow .15s ease; }
.student-mode #join-button:hover, .student-mode #run-task-button:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #08736e; }
.student-mode #join-button:active, .student-mode #run-task-button:active { transform: translateY(2px); box-shadow: 0 2px 0 #08736e; }
.student-mode .workbench { grid-column: 1 / -1; }
.student-mode .workbench-header h2 { color: #263d63; }
.student-mode .student-badge { border: 3px solid #fff; background: #263d63; box-shadow: 0 5px 0 #1a2b4a; }
.student-mode .progress-copy { color: #617696; font-weight: 700; }
.student-mode .progress-track { height: 14px; border: 3px solid #fff; background: #dcefe9; box-shadow: inset 0 2px 4px rgba(44, 92, 107, .1); }
.student-mode .progress-track span { background: linear-gradient(90deg, #ffbd54, #ff8a65); }
.student-mode .task-tabs { gap: 12px; }
.student-mode .task-tab { border: 3px solid #fff; border-radius: 17px; color: #486581; font-size: .95rem; box-shadow: 0 6px 0 rgba(149, 180, 189, .25); }
.student-mode .task-tab[aria-current="step"] { border-color: #ffbd54; color: #754b13; background: #fff7df; }
.student-mode .task-tab.done { background: #e7fff4; color: #087d6f; }
.student-mode .mission-card { box-shadow: 0 9px 0 rgba(255, 204, 121, .35), 0 24px 60px rgba(54, 79, 120, .13); }
.student-mode .mission-kicker { color: #0b8b83; }
.student-mode .mission-heading h3 { color: #263d63; }
.student-mode .mission-state { background: #fff1c9; color: #8b5d16; }
.student-mode .ide-editor-shell { border-color: #91d7cb; background: #203b61; --editor-font: 400 1.04rem/1.85 "Cascadia Mono", Consolas, monospace; box-shadow: inset 0 2px 10px rgba(0, 0, 0, .16); }
.student-mode .code-editor { min-height: 600px; border: 0; background: transparent; font: var(--editor-font); }
.student-mode .ai-output { border: 3px solid #9de3d2; border-radius: 22px; background: #effff8; }
.student-mode .ai-output h4 { color: #087d6f; }
.student-mode .visual-output { border: 3px solid #d9c4ff; border-radius: 22px; background: #fbf8ff; }
.student-mode .teacher { color: #0b8b83; }
.teacher-mode .join-card, .admin-mode .join-card { width: min(980px, 100%); margin: 0 auto; }
.admin-mode .shell { width: min(980px, calc(100% - 28px)); grid-template-columns: 1fr; gap: 20px; align-content: start; padding-top: 28px; }
.admin-console { width: min(980px, 100%); margin: 0 auto; padding: 28px; border: 1px solid #d9e2ec; border-radius: 22px; background: #ffffff; box-shadow: 0 10px 24px rgba(34, 68, 102, .08); }
.admin-console-heading { padding-bottom: 20px; border-bottom: 1px solid #d9e2ec; }
.admin-console h2 { margin: 8px 0; color: #243b53; }
.admin-console-heading p { margin: 0; color: #627d98; line-height: 1.65; }
.admin-provision { margin-top: 22px; padding: 22px; border: 1px solid #d9e2ec; border-radius: 16px; background: #fbfdff; }
.admin-provision h3 { margin: 0; color: #243b53; }
.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.admin-actions { display: flex; gap: 12px; margin-top: 18px; }
.admin-actions button { width: auto; margin: 0; }
.student-mode #student-exercises-button { margin-top: 20px; background: #486581; box-shadow: 0 4px 0 #334e68; }
.student-exercises { grid-column: 1 / -1; width: min(920px, 100%); margin: 28px auto 0; padding: 28px; border: 3px solid #fff; border-radius: 24px; background: #fffaf0; box-shadow: 0 8px 0 rgba(255, 204, 121, .35); }
.student-mode .student-exercises h2 { margin: 9px 0 0; color: #263d63; }
.student-mode:not(.teacher-classroom-mode) #teacher-classroom-toolbar { display: none !important; }
.practice-question { margin: 18px 0; padding: 18px; border: 2px solid #d8e8e3; border-radius: 16px; background: rgba(255,255,255,.84); }
.practice-question legend { padding: 0 5px; color: #263d63; font-weight: 800; line-height: 1.55; }
.practice-category { display: inline-block; margin: 2px 0 10px; padding: 4px 8px; border-radius: 999px; background: #e6f7f1; color: #087d6f; font-size: .78rem; font-weight: 800; }
.practice-option { display: flex; align-items: flex-start; gap: 9px; margin: 8px 0; padding: 10px 11px; border: 2px solid transparent; border-radius: 10px; color: #486581; font-weight: 500; cursor: pointer; }
.practice-option input { width: auto; margin: 3px 0 0; padding: 0; accent-color: #0b8b83; }
.practice-option.correct { border-color: #58bd91; background: #e9fff3; color: #087443; }
.practice-option.incorrect { border-color: #ed897e; background: #fff0ed; color: #b42318; }
.practice-explanation { margin: 13px 0 0; padding: 11px 12px; border-radius: 10px; background: #eef6f7; color: #334e68; font-size: .9rem; line-height: 1.7; }
.answered-correct { border-color: #78c9a2; }
.answered-incorrect { border-color: #efb2a8; }
.teacher-mode .shell { width: min(1080px, calc(100% - 40px)); grid-template-columns: 1fr; gap: 24px; align-content: start; padding: 34px 0 52px; }
.teacher-mode .hero { grid-column: 1; padding: 8px 4px; text-align: center; }
.teacher-mode h1 { max-width: none; margin: 6px auto; font-size: clamp(2.7rem, 5vw, 4.4rem); line-height: 1.08; letter-spacing: -.045em; }
.teacher-mode #teacher-panel { grid-column: 1; }
.teacher-mode .teacher-subject-home { padding: 26px; border: 1px solid #d9e2ec; border-radius: 18px; background: #fbfdff; }
.teacher-mode .teacher-subject-home h3 { margin: 8px 0 18px; color: #263d63; font-size: 1.55rem; }
.teacher-subject-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px; border: 2px solid #b8ddd8; border-radius: 18px; background: linear-gradient(145deg, #ffffff, #effbf7); }
.teacher-subject-card h4 { margin: 0 0 6px; color: #263d63; font-size: 1.5rem; }
.teacher-subject-card p { margin: 0; color: #627d98; line-height: 1.6; }
.teacher-subject-card button { flex: none; width: auto; margin: 0; }
.teacher-subject-icon { display: block; margin-bottom: 6px; font-size: 1.8rem; }
.teacher-specialty-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.teacher-specialty-heading h3 { margin: 6px 0 0; color: #263d63; font-size: 1.6rem; }
.teacher-specialty-heading button { flex: none; }
.teacher-mode .teacher-course-carousel { min-width: 0; min-height: 470px; padding: 24px; border: 1px solid #d9e2ec; border-radius: 18px; background: #fbfdff; }
.teacher-mode .teacher-home-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 18px; align-items: start; }
.teacher-mode .teacher-active-classrooms { margin: 0; padding: 24px; border: 1px solid #d9e2ec; border-radius: 18px; background: #f7fafc; }
.teacher-mode .teacher-active-classrooms .notice { margin-top: 8px; }
.teacher-mode .teacher-analytics { margin-top: 18px; padding: 22px; border: 1px solid #d9e2ec; border-radius: 18px; background: #ffffff; }
.teacher-analytics-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.teacher-analytics-heading h3 { margin: 6px 0 0; color: #263d63; }
.teacher-analytics-heading button { flex: none; }
.teacher-analytics-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.teacher-analytics-metric { padding: 12px; border-radius: 12px; background: #f0f7f7; }
.teacher-analytics-metric strong, .teacher-analytics-metric span { display: block; }
.teacher-analytics-metric strong { color: #627d98; font-size: .8rem; }
.teacher-analytics-metric span { margin-top: 5px; color: #075e54; font-size: 1.2rem; font-weight: 800; }
.teacher-weak-points { display: grid; gap: 8px; margin-top: 14px; }
.teacher-weak-points h4 { margin: 0; color: #263d63; }
.teacher-weak-point { padding: 9px 11px; border-radius: 10px; background: #fff6e8; color: #754b13; font-size: .88rem; }
.teacher-analytics-levels { display: grid; gap: 8px; margin-top: 18px; }
.teacher-analytics-levels h4 { margin: 0; color: #263d63; }
.teacher-level-row { padding: 9px 11px; border-radius: 10px; background: #eef6f7; color: #334e68; font-size: .88rem; }
.teacher-student-analytics { display: grid; gap: 8px; margin-top: 18px; }
.teacher-student-analytics h4 { margin: 0; color: #263d63; }
.teacher-student-row { padding: 9px 11px; border-radius: 10px; background: #f7fafc; color: #334e68; font-size: .88rem; }
.active-classroom-empty { margin: 14px 0 0; padding: 14px; border: 1px dashed #9fb3c8; border-radius: 12px; color: #627d98; line-height: 1.6; }
.teacher-mode .teacher-course-carousel h3 { margin: 8px 0; color: #263d63; font-size: 1.55rem; }
.teacher-course-range-tabs { display: flex; gap: 8px; margin: 16px 0 8px; overflow-x: auto; }
.teacher-course-range-tabs button { flex: 1 0 auto; width: auto; margin: 0; padding: 9px 12px; border: 1px solid #b8d8d3; border-radius: 999px; background: #ffffff; color: #486581; font-size: .86rem; box-shadow: none; }
.teacher-course-range-tabs button[aria-selected="true"] { border-color: #087d6f; background: #e8fff6; color: #075e54; }
.teacher-course-track { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x mandatory; scrollbar-color: #78a8b8 transparent; }
.teacher-course-track::-webkit-scrollbar { height: 9px; }
.teacher-course-track::-webkit-scrollbar-thumb { border-radius: 999px; background: #9dc5ca; }
.teacher-mode .teacher-course-card { flex: 0 0 min(350px, 88%); min-height: 270px; padding: 18px; border: 2px solid #d9e8e3; border-radius: 16px; background: linear-gradient(145deg, #ffffff, #f0fbf7); scroll-snap-align: start; box-sizing: border-box; }
.teacher-course-number { display: inline-flex; padding: 4px 9px; border-radius: 999px; background: #e4f5ef; color: #087f78; font-size: .82rem; font-weight: 800; }
.teacher-mode .teacher-course-card h4 { margin: 8px 0; color: #263d63; font-size: 1.3rem; line-height: 1.3; }
.teacher-course-focus { min-height: 44px; margin: 0; color: #075e54; font-size: .86rem; font-weight: 700; line-height: 1.55; }
.teacher-course-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
.teacher-course-actions button { width: 100%; min-width: 0; margin: 0; padding: 9px 6px; font-size: .8rem; line-height: 1.25; }
.teacher-mode #teacher-create { margin-top: 18px; padding: 22px; border: 1px solid #d9e2ec; border-radius: 18px; background: #f7fafc; }
.teacher-mode #teacher-create h3 { margin: 5px 0 8px; color: #243b53; }
.teacher-mode #teacher-create .notice { margin-top: 0; }
.teacher-mode .active-classroom-card { box-shadow: 0 5px 16px rgba(34, 68, 102, .06); }
@media (max-width: 760px) {
  .teacher-mode .teacher-home-grid { grid-template-columns: 1fr; }
  .teacher-mode .teacher-course-card { flex-basis: 86%; }
  .teacher-subject-card { align-items: stretch; flex-direction: column; }
  .teacher-subject-card button { width: 100%; }
  .teacher-analytics-metrics { grid-template-columns: repeat(2, 1fr); }
  .admin-console { padding: 20px; }
  .admin-provision { padding: 18px; }
  .admin-form-grid { grid-template-columns: 1fr; gap: 0; }
  .admin-actions { flex-direction: column; }
  .admin-actions button { width: 100%; }
  .student-mode .shell { gap: 20px; padding-top: 22px; }
  .student-mode .hero { padding: 8px 3px; }
  .student-mode h1 { font-size: clamp(1.7rem, 8vw, 2.45rem); }
  .student-mode .code-editor { min-height: 480px; }
}
@media (max-width: 520px) {
  .active-classroom-card { align-items: stretch; flex-direction: column; }
  .active-classroom-controls { align-items: stretch; flex-wrap: wrap; }
  .active-classroom-controls input { flex: 1; width: auto; }
  .active-classroom-card .compact-button { flex: 1; }
}

/* Lightweight learning-state motion. Every effect is finite and state-driven. */
:root {
  --motion-fast: .18s;
  --motion-normal: .32s;
  --motion-slow: .44s;
  --motion-ease: cubic-bezier(.2, .78, .25, 1);
}
@keyframes ui-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-slide-in { from { opacity: .35; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ui-pop { 0% { opacity: .45; transform: scale(.98); } 65% { transform: scale(1.015); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ui-glow { 0% { box-shadow: 0 0 0 rgba(45, 212, 191, 0); } 45% { box-shadow: 0 0 0 6px rgba(45, 212, 191, .22), 0 0 24px rgba(45, 212, 191, .28); } 100% { box-shadow: 0 0 0 rgba(45, 212, 191, 0); } }
@keyframes ui-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes ui-progress { from { filter: saturate(.8); } 50% { filter: saturate(1.35); } to { filter: saturate(1); } }
@keyframes ui-spin-once { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.motion-enter { animation: ui-fade-up var(--motion-slow) var(--motion-ease) both; animation-delay: calc(var(--motion-index, 0) * 45ms); }
.motion-task-switch { animation: ui-slide-in var(--motion-normal) var(--motion-ease) both; }
.motion-complete { animation: ui-glow var(--motion-slow) var(--motion-ease) both; }
.motion-pop { animation: ui-pop var(--motion-normal) var(--motion-ease) both; }
.motion-progress { animation: ui-progress var(--motion-normal) ease both; }
.motion-output-reveal { animation: ui-fade-in var(--motion-normal) ease both; }
.motion-error { animation: ui-shake var(--motion-fast) ease both; }
.motion-shake { animation: ui-shake var(--motion-fast) ease both; }
.motion-status { animation: ui-fade-in var(--motion-fast) ease both; }
.student-mode .task-tab { transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, border-color var(--motion-fast) ease; }
.student-mode .task-tab:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(13, 127, 120, .16); }
.student-mode .mission-card { transition: box-shadow var(--motion-normal) ease; }
.student-mode .practice-question { transition: border-color var(--motion-normal) ease, box-shadow var(--motion-normal) ease; }
.student-mode .practice-question.answered-correct { box-shadow: 0 0 0 4px rgba(88, 189, 145, .12); }
.student-mode .practice-question.answered-incorrect { box-shadow: 0 0 0 4px rgba(237, 137, 126, .1); }
.student-mode .practice-option { transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, transform var(--motion-fast) ease; }
.student-mode .practice-option:hover { transform: translateX(2px); }
.student-mode .practice-explanation { animation: ui-fade-up var(--motion-normal) var(--motion-ease) both; }
.teacher-mode .teacher-course-card, .teacher-mode .active-classroom-card, .admin-mode .admin-provision, .admin-mode .admin-teacher-item { transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, border-color var(--motion-fast) ease; }
.teacher-mode .teacher-course-card:hover, .teacher-mode .active-classroom-card:hover, .admin-mode .admin-provision:hover, .admin-mode .admin-teacher-item:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(34, 68, 102, .12); }
.run-ide-modal:not([hidden]) { animation: ui-fade-in var(--motion-normal) ease both; }
.run-ide-modal:not([hidden]) .run-ide-window { animation: ui-pop var(--motion-normal) var(--motion-ease) both; }

/* Keep the editable layer, syntax layer and line numbers on one exact text grid. */
.ide-line-numbers,
.code-highlight,
.code-editor {
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 1.04rem;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  text-rendering: geometricPrecision;
  tab-size: 2;
}
.code-highlight,
.code-editor { padding: 20px; }
.ide-line-numbers { padding-top: 20px; padding-bottom: 20px; }
.code-editor { display: block; appearance: none; }
.ide-line-numbers .line-number { display: block; min-height: 1.85em; }
.ide-line-numbers .error-line-number { margin-left: 4px; padding-right: 5px; border-radius: 4px; background: rgba(255, 92, 92, .35); color: #ffe3e3; box-shadow: inset 3px 0 #ff6b6b; }
@media (max-width: 640px) {
  .ide-line-numbers, .code-highlight, .code-editor { font-size: .9rem; line-height: 1.85; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .motion-enter, .motion-task-switch, .motion-complete, .motion-pop, .motion-progress, .motion-output-reveal, .motion-error, .motion-shake, .motion-status { transform: none !important; }
}
/* Final project interaction lab */
.interaction-lab { margin: 1rem 0; padding: 1rem; border: 2px solid #9bded4; border-radius: 18px; background: #effcf9; }
.interaction-lab h4 { margin: 0 0 .35rem; color: #087f78; }
.interaction-stage { min-height: 72px; display: grid; place-items: center; margin: .75rem 0; border-radius: 14px; background: #d9f3ef; color: #173d5e; font-size: 1.1rem; white-space: pre-wrap; }
.interaction-stage video { width: min(100%, 420px); border-radius: 14px; background: #10202f; }
.interaction-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.lesson-outcome { margin: 1.2rem 0; padding: 1.1rem; border: 2px solid #b9e5dc; border-radius: 22px; background: linear-gradient(145deg, #f4fffc, #eef5ff); }
.lesson-outcome-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lesson-outcome h4 { margin: .2rem 0 .35rem; color: #163b61; font-size: 1.35rem; }
.lesson-outcome-status { padding: .35rem .7rem; border-radius: 999px; background: #fff0c2; color: #855d00; font-size: .82rem; font-weight: 800; }
.lesson-outcome > p { margin: .5rem 0; color: #486581; }
.project-stage { min-height: 190px; margin: .8rem 0; padding: 1rem; border-radius: 18px; background: #12253e; color: #e7fff9; overflow: hidden; }
.project-task-tracker { margin: 0 0 .85rem; padding: .7rem; border-radius: 12px; background: rgba(255,255,255,.09); }
.project-task-tracker > strong { display: block; margin-bottom: .45rem; color: #ffe39b; font-size: .9rem; }
.project-task-tracker-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.project-task-tracker-item { width: auto; margin: 0; padding: .35rem .55rem; border: 1px solid rgba(231,255,249,.38); border-radius: 999px; background: transparent; color: #e7fff9; font-size: .78rem; cursor: pointer; }
.project-task-tracker-item.is-active { border-color: #ffe39b; color: #ffe39b; }
.project-task-tracker-item.is-done { background: #087f78; border-color: #64dbc9; }
.project-map { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; max-width: 520px; margin: auto; }
.project-map-heading { display: block; margin: .2rem 0 .55rem; color: #ffe39b; text-align: center; }
.project-cell { min-height: 42px; display: grid; place-items: center; border-radius: 10px; background: #234b70; font-size: 1.3rem; }
.project-cell.room { background: #356c72; }
.project-cell.avatar { background: #f4b942; color: #17324d; box-shadow: 0 0 0 3px #fff3b0; }
.project-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; }
.project-card { padding: .8rem; border-radius: 13px; background: rgba(255,255,255,.13); }
.project-card:is(button) { border: 1px solid rgba(231,255,249,.45); color: #e7fff9; text-align: left; cursor: pointer; }
.project-card:is(button):hover { background: rgba(255,227,155,.24); border-color: #ffe39b; }
.project-card strong { display: block; color: #ffe39b; }
.project-controls { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.project-controls button { width: auto; min-width: 90px; margin-top: 0; padding: .65rem .9rem; }
.project-fallback-input { width: auto; min-width: 220px; padding: .65rem .8rem; font-size: .95rem; }
.vision-upload-panel { display: grid; gap: .35rem; margin-top: .7rem; padding: .8rem; border: 1px solid #9fd9e4; border-radius: 12px; background: #effcff; color: #24586a; }
.vision-upload-panel strong { color: #0b7d77; }
.vision-upload-panel span { font-size: .88rem; line-height: 1.45; }
.vision-upload-status { color: #087f73; }
.ai-action-card { display: grid; gap: .3rem; margin-top: .7rem; padding: .75rem .9rem; border: 1px solid #7ed8c9; border-radius: 12px; background: linear-gradient(135deg, #edfffb, #e8f3ff); color: #164b59; }
.ai-action-card strong { color: #087f73; }
.ai-action-card span { font-size: .92rem; line-height: 1.5; }
.exhibit-effect { display: grid; gap: .25rem; justify-items: center; margin: 0 auto 12px; padding: 14px 18px; border: 2px solid #ffd166; border-radius: 18px; background: linear-gradient(135deg, #fff7cf, #fff1e8); color: #5f4300; box-shadow: 0 8px 20px rgba(226, 169, 56, .25); opacity: 0; transform: translateY(-12px) scale(.96); transition: opacity .22s ease, transform .22s ease; }
.exhibit-effect.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.exhibit-effect-icon { font-size: 2.2rem; animation: exhibit-sparkle .8s ease-in-out infinite alternate; }
.exhibit-effect strong { font-size: 1.05rem; color: #9a6500; }
.exhibit-effect span:last-child { font-size: .9rem; text-align: center; line-height: 1.45; }
@keyframes exhibit-sparkle { from { transform: rotate(-8deg) scale(1); } to { transform: rotate(8deg) scale(1.12); } }
@media (max-width: 680px) { .project-map { gap: .25rem; } .project-cell { min-height: 34px; font-size: 1rem; } }

.teacher-courseware, .teacher-feedback { margin-top: 1rem; padding: 1.2rem; border: 1px solid #a6e3d6; border-radius: 20px; background: #f4fffc; }
.teacher-courseware-heading { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; }
.teacher-courseware-heading h3 { margin: .15rem 0; }
.courseware-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.courseware-grid article { padding: .9rem; border-radius: 14px; background: white; border: 1px solid #d0eee8; }
.courseware-grid .courseware-wide { grid-column: 1 / -1; }
.courseware-grid h4 { margin: 0 0 .35rem; color: #087f78; }
.courseware-grid ul { margin: .2rem 0 0; padding-left: 1.2rem; }
.courseware-grid pre { margin: .2rem 0 0; padding: .9rem; overflow-x: auto; border-radius: 10px; background: #12243d; color: #e7fff9; }
.feedback-card { margin: .8rem 0; padding: 1.1rem; border-radius: 18px; background: linear-gradient(135deg, #effffc, #f8f2ff); border: 1px solid #9cdece; color: #17324d; }
.feedback-card header { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; border-bottom: 1px solid #c7e8df; padding-bottom: .7rem; }
.feedback-card h4 { margin: .18rem 0 .25rem; color: #087f78; }
.feedback-card header p { margin: 0; color: #55708c; font-size: .9rem; }
.feedback-kicker { color: #b16d15; font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.feedback-card .feedback-status { padding: .2rem .55rem; border-radius: 999px; background: #ffe6a7; color: #795700; font-size: .82rem; }
.feedback-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: .8rem; }
.feedback-section { padding: .65rem; border-radius: 12px; background: rgba(255,255,255,.78); }
.feedback-section strong { display: block; color: #087f78; margin-bottom: .2rem; }
.feedback-section span { display: block; line-height: 1.55; }
.feedback-lesson-one-intro { margin-top: .8rem; padding: .8rem .9rem; border-radius: 14px; background: linear-gradient(135deg, #0b8f82, #25aa93); color: white; }
.feedback-lesson-one-intro strong, .feedback-lesson-one-intro span { display: block; }
.feedback-lesson-one-intro strong { margin-bottom: .25rem; color: #ffe7a4; }
.feedback-lesson-one-intro span { line-height: 1.55; }
.feedback-growth-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .85rem; }
.feedback-growth-tags span { padding: .3rem .65rem; border-radius: 999px; background: #e1f4ef; color: #087f78; font-size: .83rem; font-weight: 700; }
.feedback-editor { display: grid; gap: .35rem; }
.feedback-editor textarea { min-height: 64px; resize: vertical; }
.feedback-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .8rem; }
@media (max-width: 680px) { .courseware-grid, .feedback-sections { grid-template-columns: 1fr; } .courseware-grid .courseware-wide { grid-column: auto; } }
@media print {
  body.print-courseware > *:not(main), body.print-feedback > *:not(main) { display: none !important; }
  body.print-courseware main > *:not(#teacher-panel), body.print-feedback main > *:not(#teacher-panel) { display: none !important; }
  body.print-courseware #teacher-panel > *:not(#teacher-console), body.print-feedback #teacher-panel > *:not(#teacher-console) { display: none !important; }
  body.print-courseware #teacher-console > *:not(#teacher-courseware), body.print-feedback #teacher-console > *:not(#teacher-feedback) { display: none !important; }
  body.print-courseware #teacher-courseware, body.print-feedback #teacher-feedback { display: block !important; border: 0; }
}