:root { font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; color: #202538; background: #f5f6fb; }

* { box-sizing: border-box; }
 body { margin: 0; }
.page-shell { width: min(1280px, calc(100% - 40px)); margin: 38px auto; }

.page-header { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(210px, .55fr); align-items: center; gap: 13px; }
.teacher-brand { width: 64px; height: 54px; margin: 0; overflow: hidden; border: 2px solid #fff; border-radius: 15px; background: #fff; box-shadow: 0 3px 10px #1724471f; }
.teacher-brand img { display: block; width: 100%; height: 100%; object-fit: cover; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.course-picker { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 12px; font-weight: 700; font-size: 17px; }
.voice-picker { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }

select { width: 100%; border: 1px solid #dde1ea; border-radius: 10px; padding: 12px 16px; color: #6d7482; background: #fff; font: inherit; }
.lesson-status { margin-top: 16px; overflow: hidden; border-radius: 8px; background: #fff3c8; }
.lesson-status strong { display: block; padding: 12px 16px; }
.progress-track { height: 7px; background: #dfe1e7; }
.progress-track i { display: block; width: 0; height: 100%; background: #4ba4e8; transition: width .25s ease; }

.lesson-controls { display: flex; gap: 10px; margin: 22px 0; }
.lesson-range-control { display: grid; grid-template-columns: auto minmax(100px, 150px) 46px; align-items: center; gap: 9px; padding: 7px 11px; border: 1px solid #d7dfeb; border-radius: 9px; background: #fff; color: #55647a; font-size: 14px; font-weight: 700; }
.speech-rate-control { margin-left: auto; }
.lesson-range-control input { width: 100%; accent-color: #5a7ee8; cursor: pointer; }
.lesson-range-control output { color: #4567ca; font-variant-numeric: tabular-nums; text-align: right; }
.button { border: 0; border-radius: 9px; padding: 13px 25px; color: #fff; font: 700 17px/1 inherit; cursor: pointer; box-shadow: 0 1px 2px #0001; }
.button:disabled { cursor: not-allowed; opacity: .45; }
.start { background: #54b878; }
.resume { background: #ff9d11; }
.stop { background: #ef3341; }

.classroom { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, 1fr); gap: 22px; align-items: start; }
h2 { margin: 0 0 10px 5px; font-size: 17px; }
.visual-panel { margin-bottom: 22px; }
.visual-panel[hidden] { display: none; }
.visual-card { margin: 0; padding: 16px; border: 1px solid #d9e3ee; border-radius: 14px; background: #fff; box-shadow: 0 1px 6px #17244711; text-align: center; }
.lesson-image { display: block; width: auto; max-width: 100%; height: auto; max-height: 560px; margin: 0 auto; border-radius: 8px; object-fit: contain; }
.lesson-image[hidden] { display: none; }
.visual-status { margin: 8px 0; color: #68788e; font-size: 14px; }
.visual-status:empty { display: none; }
.visual-card figcaption { margin-top: 10px; color: #55647a; font-size: 14px; }
.pdf-panel { margin-bottom: 22px; }
.pdf-panel[hidden] { display: none; }
.pdf-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pdf-heading h2 { margin-bottom: 10px; }
.pdf-heading a { margin-bottom: 10px; color: #1764d2; font-size: 13px; font-weight: 700; }
.pdf-card { padding: 14px; border: 1px solid #d9e3ee; border-radius: 14px; background: #fff; box-shadow: 0 1px 6px #17244711; }
.pdf-card strong { display: block; color: #38465b; }
.pdf-toolbar { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.pdf-toolbar button { border: 1px solid #c8d5e5; border-radius: 7px; padding: 7px 10px; background: #fff; color: #365372; cursor: pointer; font: 700 13px inherit; }
.pdf-toolbar button:hover { border-color: #2777e8; color: #1764d2; }
.pdf-toolbar button:disabled { cursor: default; opacity: .45; }
.pdf-page-control { color: #55647a; font-size: 13px; white-space: nowrap; }
.pdf-page-control input { width: 54px; border: 1px solid #c8d5e5; border-radius: 6px; padding: 6px; font: inherit; text-align: center; }
.pdf-page-control output, .pdf-toolbar > output { color: #365372; font-variant-numeric: tabular-nums; }
.pdf-toolbar-spacer { flex: 1; }
.pdf-status { margin: 8px 0; color: #68788e; font-size: 13px; }
.pdf-status:empty { display: none; }
.pdf-page-viewport { min-height: 220px; overflow: auto; padding: 12px; border-radius: 8px; background: #e8edf3; }
.pdf-page-canvas { display: block; margin: 0 auto; background: #fff; box-shadow: 0 2px 8px #17244733; }
.pdf-page-canvas[hidden] { display: none; }
.reading-card, .transcript-card { border-radius: 14px; background: #fffef0; box-shadow: 0 1px 6px #17244711; }
.reading-card { min-height: 610px; padding: 21px; }
.reading-card.presentation { background: #f8fbff; }
.reading-card.presentation .paragraph { margin-bottom: 16px; padding: 14px; border: 1px solid #d9e8f4; background: #fff; line-height: 1.75; }
.story-title { margin: 0 0 6px; padding: 10px 12px; border: 1px solid #a9daf5; border-left: 5px solid #319ad4; border-radius: 6px; background: #def2ff; font-size: 20px; }
.reading-hint { margin: 0 0 16px; padding-bottom: 14px; border-bottom: 2px solid #f0edda; color: #6e7480; font-size: 13px; }
.paragraph { margin: 0 0 22px; padding: 0 12px; color: #303242; font-size: 17px; line-height: 1.9; white-space: pre-line; border-radius: 6px; transition: background .2s, box-shadow .2s; }
.paragraph.active, .story-title.active { background: #e1f4ff; box-shadow: inset 4px 0 #3d9ed5; }

.question-card { min-height: 90px; padding: 16px 18px; border: 1px solid #b8e1fb; border-radius: 14px; background: #e2f3ff; color: #38465b; box-shadow: 0 2px 6px #1f8ed411; }
.question-card strong { display: block; font-size: 16px; }
.question-card p { margin: 7px 0 0; font-size: 17px; line-height: 1.5; }
.message.pronunciation-feedback { padding: 14px 16px; border: 1px solid #b8e1fb; background: #f5fbff; color: #38465b; }
.pronunciation-feedback[data-outcome="retry"] { border-color: #edb454; background: #fff9ed; }
.pronunciation-feedback[data-outcome="complete"] { border-color: #8acaa4; background: #f2fbf5; }
.pronunciation-feedback-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pronunciation-outcome { border-radius: 999px; padding: 3px 9px; background: #e8edf3; color: #53677e; font-size: 13px; font-weight: 700; }
.pronunciation-feedback[data-outcome="retry"] .pronunciation-outcome { background: #fff0cf; color: #925d00; }
.pronunciation-feedback[data-outcome="complete"] .pronunciation-outcome { background: #daf3e3; color: #176c3c; }
.pronunciation-summary, .pronunciation-focus { margin: 9px 0 0; line-height: 1.5; }
.pronunciation-focus:empty { display: none; }
.pronunciation-scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 0; }
.pronunciation-scores div { padding: 8px; border-radius: 8px; background: #fff; }
.pronunciation-scores dt { color: #68788e; font-size: 12px; }
.pronunciation-scores dd { margin: 3px 0 0; color: #213d5d; font-size: 17px; font-variant-numeric: tabular-nums; font-weight: 700; }
.submit-answer { display: block; width: 100%; min-height: 56px; margin-top: 10px; padding: 14px 20px; border: 2px solid #1764d2; border-radius: 12px; background: #1764d2; color: #fff; font: inherit; font-size: 18px; font-weight: 700; line-height: 1.4; cursor: pointer; box-shadow: 0 4px 12px #1764d233; }
.submit-answer:hover:not(:disabled) { background: #124fa8; border-color: #124fa8; }
.submit-answer:focus-visible { outline: 3px solid #142b50; outline-offset: 3px; }
.submit-answer:disabled { background: #e4ecf7; border-color: #b7c9e2; color: #53677e; cursor: not-allowed; box-shadow: none; }
.transcript-card { min-height: 340px; max-height: 500px; margin-top: 14px; padding: 18px; overflow: auto; background: #fff; }
.message { margin: 0 0 13px; padding: 12px 14px; border-radius: 10px; line-height: 1.55; white-space: pre-wrap; }
.message.teacher { background: #f7e5f9; }
.message.teacher + .message.teacher { margin-top: 20px; border: 1px solid #e6c8eb; }
.message.student { background: #eef3f8; }
.message.asr { background: #fff8d9; }
.message-meta { display: flex; width: 100%; min-height: 25px; align-items: center; justify-content: space-between; margin-top: 10px; }
.message-time { margin-left: auto; color: #9099a7; font-size: .78em; line-height: 1; white-space: nowrap; }
.teacher-replay { border: 1px solid #b99dc1; border-radius: 6px; padding: 4px 8px; background: #fff; color: #76517f; cursor: pointer; font: 700 12px inherit; }
.teacher-replay:hover { border-color: #865d91; color: #593460; }
.teacher-replay:disabled { cursor: not-allowed; opacity: .6; }
.history-divider { margin: 15px 0 10px; color: #7c899b; font-size: 12px; font-weight: 700; text-align: center; }
.mic-status { margin: 12px 0 0; padding: 10px 16px; border-radius: 10px; background: #f1f3f7; color: #7b8595; font-weight: 700; }
.mic-status.live { color: #2d8d57; }
.mic-status[data-state="ready"] { color: #277fc3; }
.mic-status[data-state="error"] { color: #d13f4b; }
.mic-status.checking { color: #a36e00; animation: microphone-pulse 1.1s ease-in-out infinite; }
@keyframes microphone-pulse { 0%, 100% { opacity: .45; transform: scale(.99); }
 50% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 5px #f8d36544; }
 }

/* Learning reports belong with the reading material, not the live controls. */
.learning-panel { min-width: 0; }
.reports-panel { margin-top: 22px; }
.reports-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reports-heading h2 { margin-bottom: 10px; }
.reports-heading button { margin-bottom: 10px; border: 1px solid #b8d8ee; border-radius: 999px; padding: 6px 12px; background: #fff; color: #2777a8; cursor: pointer; font: 700 13px/1 inherit; }
.reports-heading button:hover { border-color: #2777e8; color: #1764d2; }
.reports-heading button:disabled { border-color: #e2e7ec; color: #95a1ad; cursor: default; }
.reports-drawer { overflow: hidden; border: 1px solid #c7e3d0; border-radius: 14px; background: #f5fcf7; box-shadow: 0 1px 6px #1724470c; }
.reports-list { max-height: 430px; overflow: auto; padding: 8px; }
.report-entry { border-bottom: 1px solid #dceee1; }
.report-entry:last-child { border-bottom: 0; }
.report-entry summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 12px; color: #26513a; cursor: pointer; list-style: none; }
.report-entry summary::-webkit-details-marker { display: none; }
.report-entry summary::after { content: "⌄"; order: 3; color: #57916b; font-size: 18px; transition: transform .18s ease; }
.report-entry[open] summary::after { transform: rotate(180deg); }
.report-entry summary time { margin-left: auto; color: #788d80; font-size: 12px; font-weight: 400; white-space: nowrap; }
.report-body { margin: 0 12px 14px; padding: 13px 14px; border-radius: 9px; background: #fff; color: #384a40; font-size: 15px; line-height: 1.7; white-space: pre-wrap; }
.report-visuals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 12px 14px; }
.report-visual-section { min-width: 0; padding: 12px; border: 1px solid #dcebe1; border-radius: 10px; background: #fff; }
.report-visual-section h3 { margin: 0 0 10px; color: #397456; font-size: 13px; }
.report-summary-section { grid-column: 1 / -1; border-top: 2px solid #6a90e8; background: #f7f9ff; }
.report-summary-section h3 { color: #426cc6; }
.report-summary-conclusion { margin: 0; color: #354967; font-size: 15px; font-weight: 700; line-height: 1.55; }
.report-summary-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.report-summary-group { padding: 10px 12px; border-radius: 8px; }
.report-summary-group.mastered { background: #eff9f4; color: #287356; }
.report-summary-group.practice { background: #fff5eb; color: #b3672c; }
.report-summary-group h4 { margin: 0 0 6px; font-size: 12px; }
.report-summary-group ul { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.6; }
.report-next-action { margin: 10px 0 0; padding: 9px 11px; border-left: 3px solid #5c82d4; background: #fff; color: #3d536f; font-size: 12px; line-height: 1.55; }
.report-overview-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.report-overview-cards div { padding: 8px 4px; border-radius: 8px; background: #f1f8f3; text-align: center; }
.report-overview-cards span { display: block; color: #71867a; font-size: 11px; }
.report-overview-cards strong { color: #26513a; font-size: 21px; font-variant-numeric: tabular-nums; }
.report-mastery, .report-journey { display: grid; gap: 8px; }
.report-mastery > div { display: grid; grid-template-columns: minmax(70px, 1fr) 74px auto; align-items: center; gap: 6px; color: #536b5d; font-size: 11px; }
.report-mastery i { height: 6px; overflow: hidden; border-radius: 999px; background: #edf1ef; }
.report-mastery b { display: block; height: 100%; border-radius: inherit; background: #55a978; }
.report-mastery em { color: #4b8c65; font-size: 10px; font-style: normal; white-space: nowrap; }
.report-journey div { position: relative; padding-left: 14px; color: #52695b; font-size: 11px; line-height: 1.35; }
.report-journey div:not(:last-child)::after { content: ""; position: absolute; top: 12px; bottom: -9px; left: 3px; border-left: 1px solid #c7d4e3; }
.report-journey div::before { content: ""; position: absolute; top: 3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #e19a4c; }
.report-journey div.complete::before { background: #55a978; }
.report-visual-section svg { display: block; width: 100%; height: auto; }
.report-svg-label, .report-svg-score { fill: #50665a; font-size: 12px; }
.report-svg-score { font-weight: 700; }
.report-visual-empty { margin: 0; color: #71867a; font-size: 12px; line-height: 1.5; }
.report-map-line { fill: none; stroke: #bad8c4; stroke-width: 4; stroke-linecap: round; }
.report-map-line.extension { stroke: #d4b9e4; }
.report-map-leaf-line { stroke: #c6dfce; stroke-width: 1.5; }
.report-map-leaf-line.extension { stroke: #dcc9e9; }
.report-map-branch { fill: #e7f5ea; stroke: #a9d4b5; }
.report-map-branch.extension { fill: #f3eafa; stroke: #cfb3e0; }
.report-map-label { fill: #32704b; font-size: 18px; font-weight: 700; }
.report-map-label.extension { fill: #774e91; }
.report-map-item-box { fill: #f8fcf8; stroke: #d4e8da; }
.report-map-item-box.extension { fill: #fcf8fe; stroke: #e0d0eb; }
.report-map-item { fill: #61786a; font-size: 15px; }
.report-map-item.extension { fill: #765f87; }
.report-map-root { fill: #397456; }
.report-map-root-text { fill: #fff; font-size: 22px; font-weight: 700; }
.report-map-root-subtext { fill: #d8f0df; font-size: 14px; }
.report-mind-map-section { grid-column: 1 / -1; }
.report-map-controls { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.report-map-controls span { margin-right: auto; color: #71867a; font-size: 11px; }
.report-map-controls button { border: 1px solid #b9d2c1; border-radius: 6px; padding: 4px 8px; background: #fff; color: #397456; cursor: pointer; font: 700 12px inherit; }
.report-map-controls button:hover { border-color: #679d79; background: #f2faf4; }
.report-map-viewport { overflow: auto; max-height: 580px; padding: 8px; border-radius: 10px; background: linear-gradient(135deg, #f7fcf8, #fbf7fd); }
.report-mind-map { min-width: 1120px; min-height: 720px; transition: width .18s ease; }
.report-mind-map[data-theme="garden"] .branch-0 { stroke: #4e9c72; fill: #e2f5e8; }
.report-mind-map[data-theme="garden"] .branch-1 { stroke: #3e88bd; fill: #e5f1fb; }
.report-mind-map[data-theme="garden"] .branch-2 { stroke: #d48b47; fill: #fff0dd; }
.report-mind-map[data-theme="aurora"] { filter: drop-shadow(0 8px 12px #4e56a41a); }
.report-mind-map[data-theme="aurora"] .report-map-root { fill: #4d58a8; }
.report-mind-map[data-theme="aurora"] .report-map-root-subtext { fill: #e7e9ff; }
.report-mind-map[data-theme="aurora"] .branch-0 { stroke: #4e7dd7; fill: #e8efff; }
.report-mind-map[data-theme="aurora"] .branch-1 { stroke: #27a4a0; fill: #e2f8f6; }
.report-mind-map[data-theme="aurora"] .branch-2 { stroke: #8a68c7; fill: #f1eaff; }
.report-mind-map[data-theme="aurora"] .branch-3, .report-mind-map[data-theme="aurora"] .branch-4 { stroke: #c16ea9; fill: #fbeaf5; }
.report-mind-map[data-theme="sunset"] { filter: drop-shadow(0 8px 12px #b65b2c1a); }
.report-mind-map[data-theme="sunset"] .report-map-root { fill: #bd623a; }
.report-mind-map[data-theme="sunset"] .report-map-root-subtext { fill: #fff0dc; }
.report-mind-map[data-theme="sunset"] .branch-0 { stroke: #e28845; fill: #fff0df; }
.report-mind-map[data-theme="sunset"] .branch-1 { stroke: #d06169; fill: #fde8e9; }
.report-mind-map[data-theme="sunset"] .branch-2 { stroke: #b77a35; fill: #fff4d9; }
.report-mind-map[data-theme="sunset"] .branch-3, .report-mind-map[data-theme="sunset"] .branch-4 { stroke: #8f6cba; fill: #f3edfb; }
.report-mind-map[data-theme="ink"] { filter: none; }
.report-mind-map[data-theme="ink"] .report-map-root { fill: #27364a; }
.report-mind-map[data-theme="ink"] .report-map-root-subtext { fill: #dce6ef; }
.report-mind-map[data-theme="ink"] .report-map-line, .report-mind-map[data-theme="ink"] .report-map-leaf-line { stroke: #53657a; stroke-dasharray: 7 5; }
.report-mind-map[data-theme="ink"] .report-map-branch, .report-mind-map[data-theme="ink"] .report-map-item-box { fill: #fffdf7; stroke: #53657a; }
.report-mind-map[data-theme="ink"] .report-map-label, .report-mind-map[data-theme="ink"] .report-map-item { fill: #35465c; }
.report-mind-map[data-theme] .report-map-label { fill: #1f5135; }
.report-mind-map[data-theme] .report-map-label.extension { fill: #643b80; }
.report-mind-map[data-theme] .report-map-item { fill: #3d5247; font-weight: 600; }
.report-mind-map[data-theme] .report-map-item.extension { fill: #643b80; }
.report-interaction { margin: 0 12px 14px; border-top: 1px solid #dceee1; }
.report-interaction > summary { padding: 11px 2px 6px; color: #397456; cursor: pointer; font-size: 13px; font-weight: 700; }
.report-interaction-content { max-height: 310px; overflow: auto; padding: 10px; border-radius: 9px; background: #fff; color: #61718a; font-size: 13px; }
.report-interaction-content .message { font-size: 13px; }
.report-empty { padding: 3px 8px; border-radius: 999px; background: #eef1f4; color: #78838e; font-size: 12px; white-space: nowrap; }
@media (max-width: 760px) { .reports-panel { margin-top: 18px; }.reports-list { max-height: 360px; }.report-entry summary { align-items: flex-start; flex-wrap: wrap; }.report-entry summary time { margin-left: 0; width: 100%; }.report-visuals, .report-summary-groups { grid-template-columns: 1fr; }.report-map-controls { flex-wrap: wrap; }.report-map-controls span { width: 100%; }.report-mind-map { min-width: 1120px; } }
.report-card:not(:empty) { margin-top: 14px; padding: 14px; border-radius: 10px; background: #edf9f1; white-space: pre-wrap; }

.question-card { min-height: 90px; padding: 16px 18px; border: 1px solid #b8e1fb; border-radius: 14px; background: #e2f3ff; color: #38465b; box-shadow: 0 2px 6px #1f8ed411; }
.question-card strong { display: block; font-size: 16px; }
.question-card p { margin: 7px 0 0; font-size: 17px; line-height: 1.5; }
.transcript-card { min-height: 340px; max-height: 500px; margin-top: 14px; padding: 18px; overflow: auto; background: #fff; }
.message { margin: 0 0 13px; padding: 12px 14px; border-radius: 10px; line-height: 1.55; white-space: pre-wrap; }
.message.teacher { background: #f7e5f9; }
.message.student { background: #eef3f8; }
.message.asr { background: #fff8d9; }
.mic-console { margin-top: 14px; padding: 14px 16px; border: 1px solid #e0e6ee; border-radius: 12px; background: #f9fbfd; }
.mic-console-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mic-status { color: #7b8595; font-size: 13px; font-weight: 700; }
.mic-status.live, .mic-status[data-state="student"] { color: #2d8d57; }
.mic-status[data-state="ready"] { color: #277fc3; }
.mic-status[data-state="speaking"], .mic-status[data-state="listen-off"] { color: #8a5b00; }
.mic-status[data-state="error"] { color: #d13f4b; }
.mic-status.checking { color: #a36e00; animation: microphone-pulse 1.1s ease-in-out infinite; }
.live-waveform { display: flex; height: 34px; align-items: center; gap: 3px; margin: 12px 0 7px; }
.live-waveform i { width: 3px; min-height: 3px; border-radius: 2px; background: #cfd7e2; transition: height .08s, background .12s; }
.live-waveform.active i { background: #377ee8; }
.noise-calibration { margin: 0; color: #78859a; font-size: 12px; }
.sensitivity-control { display: grid; grid-template-columns: 48px 1fr 38px; align-items: center; gap: 8px; margin-top: 11px; font-size: 13px; }
.sensitivity-control input { width: 100%; accent-color: #2777e8; }
.sensitivity-control output { color: #2777e8; text-align: right; }
.auto-submit-settings { display: grid; gap: 8px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #e3eaf1; }
.auto-submit-control { display: grid; grid-template-columns: 88px 1fr 42px; align-items: center; gap: 8px; color: #53677e; font-size: 12px; }
.auto-submit-control input { width: 100%; accent-color: #2d9b5d; }
.auto-submit-control output { color: #2777a8; text-align: right; white-space: nowrap; }
.mic-actions { display: flex; gap: 8px; margin-top: 12px; }
.mic-actions button { border: 1px solid #cbd6e5; border-radius: 6px; padding: 5px 9px; background: #fff; color: #3d5878; cursor: pointer; font: inherit; font-size: 13px; }
.mic-actions button:hover { border-color: #2777e8; color: #1764d2; }
@keyframes microphone-pulse { 0%, 100% { opacity: .45; transform: scale(.99); }
 50% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 5px #f8d36544; }
 }
.report-card:not(:empty) { margin-top: 14px; padding: 14px; border-radius: 10px; background: #edf9f1; white-space: pre-wrap; }

.question-card { min-height: 90px; padding: 16px 18px; border: 1px solid #b8e1fb; border-radius: 14px; background: #e2f3ff; color: #38465b; box-shadow: 0 2px 6px #1f8ed411; }
.question-card strong { display: block; font-size: 16px; }
.question-card p { margin: 7px 0 0; font-size: 17px; line-height: 1.5; }
.transcript-card { min-height: 340px; max-height: 500px; margin-top: 14px; padding: 18px; overflow: auto; background: #fff; }
.message { margin: 0 0 13px; padding: 12px 14px; border-radius: 10px; line-height: 1.55; white-space: pre-wrap; }
.message.teacher { background: #f7e5f9; }
.message.student { background: #eef3f8; }
.message.asr { background: #fff8d9; }
.mic-console { margin-top: 14px; padding: 14px 16px; border: 1px solid #e0e6ee; border-radius: 12px; background: #f9fbfd; }
.mic-console-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mic-status { color: #7b8595; font-size: 13px; font-weight: 700; }
.mic-status.live, .mic-status[data-state="student"] { color: #2d8d57; }
.mic-status[data-state="ready"] { color: #277fc3; }
.mic-status[data-state="speaking"], .mic-status[data-state="listen-off"] { color: #8a5b00; }
.mic-status[data-state="error"] { color: #d13f4b; }
.mic-status.checking { color: #a36e00; animation: microphone-pulse 1.1s ease-in-out infinite; }
.live-waveform { display: flex; height: 34px; align-items: center; gap: 3px; margin: 12px 0 7px; }
.live-waveform i { width: 3px; min-height: 3px; border-radius: 2px; background: #cfd7e2; transition: height .08s, background .12s; }
.live-waveform.active i { background: #377ee8; }
.noise-calibration { margin: 0; color: #78859a; font-size: 12px; }
.sensitivity-control { display: grid; grid-template-columns: 48px 1fr 38px; align-items: center; gap: 8px; margin-top: 11px; font-size: 13px; }
.sensitivity-control input { width: 100%; accent-color: #2777e8; }
.sensitivity-control output { color: #2777e8; text-align: right; }
.mic-actions { display: flex; gap: 8px; margin-top: 12px; }
.mic-actions button { border: 1px solid #cbd6e5; border-radius: 6px; padding: 5px 9px; background: #fff; color: #3d5878; cursor: pointer; font: inherit; font-size: 13px; }
.mic-actions button:hover { border-color: #2777e8; color: #1764d2; }
@keyframes microphone-pulse { 0%, 100% { opacity: .45; transform: scale(.99); }
 50% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 5px #f8d36544; }
 }
.report-card:not(:empty) { margin-top: 14px; padding: 14px; border-radius: 10px; background: #edf9f1; white-space: pre-wrap; }

@media (max-width: 760px) { .page-shell { width: min(100% - 24px, 1280px); margin: 20px auto; }
.page-header { grid-template-columns: 64px minmax(0, 1fr); }
.course-picker, .voice-picker { grid-template-columns: 1fr; gap: 5px; }
.voice-picker { grid-column: 1 / -1; }
.classroom { grid-template-columns: 1fr; }
.pdf-toolbar { flex-wrap: wrap; }
.pdf-toolbar-spacer { display: none; }
.reading-card { min-height: auto; }
.lesson-controls { flex-wrap: wrap; }
.button { flex: 1; padding-inline: 12px; }
.lesson-range-control { flex: 1 0 100%; grid-template-columns: auto minmax(0, 1fr) 46px; }
.speech-rate-control { margin-left: 0; }
 }

.device-modal { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 22px; background: #263b6a44; }
.device-modal[hidden] { display: none; }
.device-dialog { position: relative; width: min(534px, 100%); max-height: calc(100vh - 44px); overflow: auto; padding: 28px 32px 26px; border-radius: 14px; background: #fff; box-shadow: 0 16px 44px #1a285144; }
.device-dialog h2 { margin: 0 0 26px; font-size: 21px; }
.dialog-close { position: absolute; top: 20px; right: 28px; border: 0; background: none; color: #62718a; font-size: 28px; line-height: 1; cursor: pointer; }
.device-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 26px; align-items: center; gap: 10px; margin-top: 18px; }
.device-row label { font-weight: 700; font-size: 16px; }
.device-row select { min-width: 0; padding: 7px 12px; border-radius: 2px; font-size: 14px; }
.device-result { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #16b765; color: #fff; font-size: 13px; font-weight: 900; }
.camera-preview { display: block; width: calc(100% - 98px); max-height: 202px; min-height: 150px; margin: 20px 0 12px 82px; object-fit: cover; border-radius: 3px; background: #e9edf3; }
.camera-preview.mirrored { transform: scaleX(-1); }
.mirror-toggle { display: block; margin-left: 82px; font-size: 14px; }
.mirror-toggle input { accent-color: #1269f3; }
.device-tip { margin: 8px 0 10px 82px; color: #8490a3; font-size: 12px; }
.input-meter, .speaker-test, .network-check { display: flex; align-items: center; gap: 11px; margin-left: 82px; font-size: 14px; }
.meter-bars { display: flex; flex: 1; gap: 4px; }
.meter-bars i { width: 5px; height: 13px; border-radius: 4px; background: #edf0f4; transition: background .08s; }
.meter-bars i.active { background: #146cff; }
.speaker-test { margin-top: 18px; }
.round-button { display: grid; place-items: center; width: 19px; height: 19px; padding: 0; border: 2px solid #176dff; border-radius: 50%; background: #fff; color: #176dff; font-size: 10px; cursor: pointer; }
.speaker-test time { font-size: 12px; }
.volume-icon { border: 0; padding: 0; background: none; color: #176dff; cursor: pointer; }
.speaker-test input { flex: 1; accent-color: #176dff; }
.network-check { margin-top: 24px; }
.network-check span { font-weight: 700; }
.link-button { border: 0; padding: 0; background: none; color: #176dff; cursor: pointer; font: inherit; }
.network-check em { color: #16a861; font-size: 12px; font-style: normal; }
.confirm-device { width: 100%; margin-top: 24px; padding: 11px; border: 0; border-radius: 6px; background: #1269f3; color: #fff; font: 700 15px inherit; cursor: pointer; }
.confirm-device:disabled { opacity: .45; cursor: not-allowed; }
.resume-dialog { width: min(430px, 100%); }
.resume-dialog p { margin: -10px 0 20px; color: #61718a; }
.resume-choice-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.resume-choice-actions .confirm-device { margin-top: 0; }
.restart-lesson { margin-top: 0; border: 1px solid #aebbd0; border-radius: 6px; background: #fff; color: #42536c; font: 700 15px inherit; cursor: pointer; }
.report-generating { z-index: 11; }
.report-generating-dialog { width: min(390px, 100%); text-align: center; }
.report-generating-dialog h2 { margin-bottom: 10px; }
.report-generating-dialog p { margin: 0; color: #61718a; }
@media (max-width: 540px) { .device-dialog { padding: 24px 18px; }
.device-row { grid-template-columns: 62px minmax(0, 1fr) 20px; }
.camera-preview, .mirror-toggle, .device-tip, .input-meter, .speaker-test, .network-check { margin-left: 72px; }
.camera-preview { width: calc(100% - 82px); }
 }
.hand-console { padding: 12px; border: 1px solid #d5dfed; border-radius: 12px; background: #f5f8ff; }
.hand-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hand-console button { min-height: 44px; padding: 8px 14px; border: 1px solid #9bb3d9; border-radius: 8px; background: white; color: #193d77; font: inherit; cursor: pointer; }
.hand-console button[aria-pressed="true"] { background: #e1ebff; }
.hand-console button:disabled { opacity: .5; cursor: default; }
.hand-console button:focus-visible, .hand-console textarea:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.hand-console p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; }
.hand-console label { display: block; margin-top: 10px; font-size: 13px; }
.hand-console textarea { box-sizing: border-box; width: 100%; margin: 6px 0; padding: 8px; border: 1px solid #9bb3d9; border-radius: 6px; font: inherit; resize: vertical; }