:root {
  color-scheme: light;
  --ink: #1c2b27;
  --muted: #6f7c75;
  --paper: #fbfaf6;
  --paper-deep: #f2eee4;
  --line: rgba(35, 65, 56, 0.13);
  --forest: #245948;
  --forest-dark: #163d32;
  --mint: #dcebe4;
  --coral: #e67d5f;
  --amber: #e9bd69;
  --shadow: 0 24px 70px rgba(34, 53, 46, 0.12);
}

.mistake-learning-state-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: center;
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px solid rgba(35, 99, 80, .18);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(232, 244, 239, .95), rgba(248, 246, 236, .95));
}

.mistake-learning-state-card div { display: grid; gap: 3px; }
.mistake-learning-state-card div span { color: #677b74; font-size: 12px; }
.mistake-learning-state-card div strong { color: #173f34; font-size: 16px; }
.mistake-learning-state-card > b {
  min-width: 48px;
  padding: 9px 10px;
  border-radius: 999px;
  background: #236350;
  color: #fff;
  text-align: center;
  font-size: 17px;
}
.mistake-learning-state-card > p { grid-column: 1 / -1; margin: 0; color: #5d6c67; font-size: 13px; }

.mistake-knowledge-structure {
  margin: 10px 0 14px;
  border: 1px solid rgba(35, 99, 80, .16);
  border-radius: 14px;
  background: #fbfcf9;
  overflow: hidden;
}
.mistake-knowledge-structure summary { cursor: pointer; padding: 13px 15px; color: #215847; font-weight: 800; }
.mistake-knowledge-structure[open] summary { border-bottom: 1px solid rgba(35, 99, 80, .12); }
.mistake-knowledge-structure > div { padding: 14px 15px; color: #43534d; line-height: 1.7; }
.mistake-knowledge-structure dl { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px 12px; margin: 0; }
.mistake-knowledge-structure dt { color: #65766f; font-weight: 700; }
.mistake-knowledge-structure dd { margin: 0; }
.mistake-knowledge-structure ol { margin: 0; padding-left: 20px; }

@media (max-width: 760px) {
  .mistake-knowledge-structure dl { grid-template-columns: 1fr; gap: 4px; }
  .mistake-knowledge-structure dd { margin-bottom: 7px; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  isolation: isolate;
  color: var(--ink);
  background:
    linear-gradient(90deg, transparent 0 54px, rgba(230, 125, 95, .055) 54px 55px, transparent 55px),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(36, 89, 72, .035) 31px 32px),
    #f5f1e8;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.48; }

.ambient { position: fixed; z-index: 0; border-radius: 999px; filter: blur(1px); pointer-events: none; }
.ambient-one { width: 420px; height: 420px; right: -120px; top: -150px; background: rgba(188, 220, 201, 0.48); }
.ambient-two { width: 330px; height: 330px; left: -180px; bottom: -120px; background: rgba(233, 189, 105, 0.28); }

.english-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  transition: opacity .25s ease;
}
body[data-subject="chinese"] .english-atmosphere,
body[data-subject="math"] .english-atmosphere { opacity: 0; }
.english-symbol {
  position: absolute;
  left: var(--x);
  top: var(--y);
  color: rgba(36, 89, 72, .1);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
  font-size: calc(clamp(23.75px, 2.5vw, 38.75px) * var(--s, 1));
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
}

.app-shell { position: relative; z-index: 1; width: min(1460px, calc(100% - 48px)); margin: 0 auto; padding: 32px 0 22px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 24px; }
.brand { display: flex; align-items: center; gap: 16px; }
.brand-mark { position: relative; display: grid; flex: 0 0 auto; place-items: center; width: 64px; height: 64px; }
.brand-mark::before {
  content: "";
  position: absolute;
  inset: 9px 7px 4px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(106, 225, 224, .28), rgba(36, 89, 72, .04) 68%, transparent 72%);
  filter: blur(5px);
  animation: mascot-glow 3.2s ease-in-out infinite;
}
.brand-mark::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6ce5e5;
  box-shadow: 0 0 0 4px rgba(108, 229, 229, .13), 0 0 14px rgba(69, 193, 193, .58);
  animation: mascot-spark 3.2s ease-in-out infinite;
}
.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 9px 10px rgba(24, 68, 56, .2));
  transform-origin: 50% 84%;
  animation: mascot-float 3.2s ease-in-out infinite;
}
@keyframes mascot-float {
  0%, 100% { transform: translateY(1px) rotate(-1deg) scale(1); }
  50% { transform: translateY(-4px) rotate(1deg) scale(1.035); }
}
@keyframes mascot-glow {
  0%, 100% { opacity: .48; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes mascot-spark {
  0%, 32%, 100% { opacity: .32; transform: scale(.7); }
  45%, 58% { opacity: 1; transform: scale(1.15); }
}
.eyebrow, .section-label { margin: 0 0 5px; color: var(--forest); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; }
h1, h2 { margin: 0; font-family: "STSong", "Songti SC", serif; font-weight: 700; }
h1 { font-size: clamp(25px, 2.3vw, 38px); letter-spacing: -0.03em; }
h2 { font-size: 23px; }

.session-overview { display: flex; align-items: center; gap: 13px; }
.subject-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(58px, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(36,89,72,.15);
  border-radius: 15px;
  background: rgba(255,255,255,.62);
  box-shadow: 0 8px 22px rgba(36,89,72,.07);
}
.subject-switch-button {
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 11px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.subject-switch-button:hover:not(:disabled) { color: var(--forest); background: rgba(220,235,228,.58); }
.subject-switch-button.active { color: white; background: var(--forest); box-shadow: 0 6px 14px rgba(36,89,72,.2); }
.mode-badge { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.55); font-size: 12px; font-weight: 700; }
.mode-badge.live { color: var(--forest-dark); border-color: rgba(36, 89, 72, .24); background: var(--mint); }
.mode-badge.demo { color: #89542e; border-color: rgba(157, 94, 48, .2); background: #f7ead9; }
.timer-block { min-width: 105px; padding: 8px 15px; border-left: 1px solid var(--line); }
.timer-block span { display: block; color: var(--muted); font-size: 11px; }
.timer-block strong { font-variant-numeric: tabular-nums; font-size: 24px; letter-spacing: .04em; }

.primary-button, .secondary-button, .capture-button { border: 0; border-radius: 14px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.primary-button { padding: 13px 20px; color: white; background: var(--forest); box-shadow: 0 10px 22px rgba(36, 89, 72, .2); }
.primary-button:hover, .capture-button:hover { transform: translateY(-1px); box-shadow: 0 14px 26px rgba(36, 89, 72, .24); }
.primary-button.active { background: #9d4f3c; }
.secondary-button { padding: 11px 15px; color: var(--forest); background: var(--mint); }

.notice { margin: -8px 0 18px; padding: 12px 16px; border: 1px solid rgba(157, 94, 48, .18); border-radius: 13px; color: #73482a; background: rgba(250, 234, 214, .86); font-size: 13px; }
.notice.error { color: #7c3129; background: #f9dfdc; }

.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); grid-template-areas: "camera teacher" "hardware teacher"; align-items: start; gap: 20px; }
.panel { min-height: 690px; padding: 24px; border: 1px solid rgba(255,255,255,.8); border-radius: 26px; background: rgba(251,250,246,.96); box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; color: var(--muted); background: var(--paper-deep); font-size: 12px; font-weight: 700; }
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: #a4aca8; }
.status-pill.ready { color: var(--forest); background: var(--mint); }
.status-pill.ready i { background: #3f9877; box-shadow: 0 0 0 4px rgba(63, 152, 119, .13); }

.camera-card { grid-area: camera; min-height: 0; }
.vision-mode-pill, .debug-mode-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; color: var(--forest); background: var(--mint); font-size: 11px; font-weight: 800; }
.vision-mode-pill i { width: 7px; height: 7px; border-radius: 50%; background: #3f9877; box-shadow: 0 0 0 4px rgba(63,152,119,.13); }
.camera-viewer { overflow: hidden; border-radius: 20px; background: #17221e; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.camera-stage { position: relative; display: grid; place-items: center; width: 100%; height: clamp(430px, 62vh, 720px); overflow: hidden; background: #1c2723; }
.camera-stage video, .camera-stage .camera-empty { grid-area: 1 / 1; }
.camera-stage video { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.camera-stage video { transform-origin: center; transition: transform .22s ease; will-change: transform; user-select: none; -webkit-user-drag: none; }
.camera-stage.connected.pannable { cursor: grab; touch-action: none; }
.camera-stage.connected.pannable.panning { cursor: grabbing; }
.camera-stage.connected.pannable.panning video { transition: none; }
.camera-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #dce4df; text-align: center; }
.camera-empty span { color: #899790; font-size: 13px; }
.camera-icon { width: 55px; height: 38px; margin-bottom: 6px; border: 2px solid #82938b; border-radius: 9px; position: relative; }
.camera-icon::before { content: ""; position: absolute; left: 18px; top: 9px; width: 16px; height: 16px; border: 2px solid #82938b; border-radius: 50%; }
.camera-icon::after { content: ""; position: absolute; right: -9px; top: 9px; border-width: 10px 0 10px 10px; border-style: solid; border-color: transparent transparent transparent #82938b; }
.viewfinder { position: absolute; inset: 15px; pointer-events: none; }
.viewfinder span { position: absolute; width: 34px; height: 34px; border-color: rgba(255,255,255,.66); border-style: solid; }
.viewfinder span:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.viewfinder span:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.viewfinder span:nth-child(3) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.viewfinder span:nth-child(4) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.camera-stage.connected .viewfinder { display: none; }

.camera-viewer-actions {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.75));
}
.zoom-controls {
  display: grid;
  grid-template-columns: 38px auto 38px;
  align-items: center;
  gap: 4px;
  padding: 2px 5px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: default;
}
.zoom-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  background: transparent;
  transition: transform .18s ease, opacity .18s ease;
  touch-action: manipulation;
}
.zoom-button:hover:not(:disabled) { transform: scale(1.08); }
.zoom-button:active:not(:disabled) { transform: scale(.96); }
.zoom-button:disabled { opacity: .28; }
.zoom-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.zoom-value { min-width: 35px; color: white; font-size: 11px; font-weight: 800; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,.95); font-variant-numeric: tabular-nums; }
.viewer-action-button { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 6px; border: 0; border-radius: 12px; color: white; background: transparent; font-size: 11px; font-weight: 800; text-shadow: 0 1px 4px rgba(0,0,0,.95); }
.viewer-action-button:hover { transform: scale(1.04); }
.viewer-action-button:disabled { cursor: not-allowed; opacity: .35; transform: none; }
.viewer-action-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.workspace-grid:fullscreen { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100vh; grid-template-areas: "camera teacher"; align-items: stretch; width: 100vw; height: 100vh; gap: 0; padding: 0; overflow: hidden; background: #0d1512; }
.workspace-grid:fullscreen .camera-card { grid-area: camera; display: flex; align-self: stretch; flex-direction: column; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: #0d1512; box-shadow: none; }
.workspace-grid:fullscreen .camera-card > .panel-heading { display: none; }
.workspace-grid:fullscreen .camera-viewer { display: flex; flex: 1; min-width: 0; min-height: 0; border-radius: 0; }
.workspace-grid:fullscreen .camera-stage { flex: 1; height: auto; min-height: 0; max-height: none; aspect-ratio: auto !important; }
.workspace-grid:fullscreen .camera-stage video { object-fit: cover; }
.workspace-grid:fullscreen .camera-viewer-actions { right: 16px; bottom: 16px; }
.workspace-grid:fullscreen .hardware-card { display: none; }
.workspace-grid:fullscreen .conversation-card { grid-area: teacher; height: 100vh; min-width: 0; min-height: 0; padding: 22px; overflow: hidden; border: 0; border-radius: 0; box-shadow: inset 1px 0 rgba(255,255,255,.75); }
.workspace-grid:fullscreen .transcript { height: auto; min-height: 0; }

.hardware-card { grid-area: hardware; min-height: 0; }
.hardware-debug-stack { display: grid; gap: 14px; }
.hardware-debug-section { padding: 16px; border: 1px solid var(--line); border-radius: 17px; background: rgba(246,243,235,.78); }
.hardware-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.hardware-section-heading > div { display: grid; gap: 2px; }
.hardware-section-heading strong { color: var(--forest-dark); font-size: 14px; }
.hardware-section-heading > div span { color: var(--muted); font-size: 10px; }
.hardware-section-heading .status-pill { white-space: nowrap; }
.camera-mode-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin: -2px 0 11px; }
.camera-mode-row > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.camera-mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: rgba(36,89,72,.05); }
.camera-mode-button { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 36px; padding: 6px 9px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: 10px; cursor: pointer; transition: color .18s ease, background .18s ease, box-shadow .18s ease; }
.camera-mode-button strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.camera-mode-button span { white-space: nowrap; font-variant-numeric: tabular-nums; }
.camera-mode-button.active { color: var(--forest); background: white; box-shadow: 0 4px 12px rgba(36,89,72,.1); }
.camera-mode-button:disabled { cursor: wait; opacity: .55; }
.camera-controls { display: grid; grid-template-columns: minmax(145px, 1fr) auto; align-items: end; gap: 10px; }
.select-field { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.select-field select { width: 100%; min-width: 0; padding: 10px 34px 10px 11px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: white; }
.hardware-note { margin: 8px 1px 0; color: var(--muted); font-size: 10px; line-height: 1.45; }

.audio-device-panel { margin: 0; }
.audio-device-row { display: grid; grid-template-columns: minmax(180px, 1fr) auto; align-items: end; gap: 10px; }
.audio-test-row { display: grid; grid-template-columns: auto auto minmax(130px, 1fr); align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.audio-test-button { padding: 8px 11px; border: 1px solid rgba(36,89,72,.18); border-radius: 10px; color: var(--forest); background: rgba(224,240,232,.62); font-size: 11px; font-weight: 800; }
.audio-test-button:hover:not(:disabled) { background: var(--mint); }
.audio-test-button:disabled { cursor: not-allowed; opacity: .42; }
.audio-test-meter { display: grid; grid-template-columns: auto minmax(58px, 1fr); align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.audio-test-meter div { height: 6px; overflow: hidden; border-radius: 99px; background: rgba(36,89,72,.1); }
.audio-test-meter i { display: block; width: 3%; height: 100%; border-radius: inherit; background: #58a985; transition: width .08s linear; }
.audio-privacy-note { margin: 5px 1px 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.audio-privacy-note { color: #77857f; }

.conversation-card {
  position: sticky;
  top: 16px;
  grid-area: teacher;
  display: flex;
  align-self: start;
  flex-direction: column;
  width: 100%;
  height: clamp(690px, calc(100vh - 32px), 920px);
  min-height: 0;
  max-height: calc(100vh - 32px);
  overflow: hidden;
}
.conversation-heading { margin-bottom: 14px; }
.teacher-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.subject-badge { padding: 4px 8px; border-radius: 999px; color: var(--forest); background: var(--mint); font-size: 10px; font-weight: 800; }
.teacher-capabilities { display: flex; flex-wrap: wrap; gap: 7px; margin: -3px 0 12px; }
.teacher-capabilities span { padding: 6px 9px; border: 1px solid rgba(36,89,72,.13); border-radius: 999px; color: #4d665b; background: rgba(224,240,232,.52); font-size: 11px; font-weight: 700; }
.voice-orb { display: flex; align-items: center; justify-content: center; gap: 3px; width: 58px; height: 58px; border-radius: 50%; background: var(--mint); }
.voice-orb b { width: 3px; height: 12px; border-radius: 3px; background: var(--forest); transition: height .15s ease; }
.voice-orb.listening b { animation: listen 1s ease-in-out infinite alternate; }
.voice-orb.listening b:nth-child(2) { animation-delay: -.45s; }
.voice-orb.listening b:nth-child(3) { animation-delay: -.2s; }
.voice-orb.speaking { background: #fae2d9; }
.voice-orb.speaking b { background: var(--coral); animation: speak .55s ease-in-out infinite alternate; }
.voice-orb.speaking b:nth-child(odd) { animation-delay: -.3s; }
@keyframes listen { to { height: 26px; } }
@keyframes speak { to { height: 30px; } }

.voice-status-card { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-radius: 15px; color: white; background: var(--forest-dark); }
.voice-caption { display: block; margin-bottom: 2px; color: #a9c4b8; font-size: 11px; }
.voice-status-card strong { font-size: 14px; }
.mic-meter { width: 74px; height: 6px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.14); }
.mic-meter i { display: block; width: 3%; height: 100%; border-radius: inherit; background: #8ad3b5; transition: width .08s linear; }

.transcript {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  margin: 15px 0 10px;
  padding-right: 7px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #c9d2cd transparent;
}
.message { max-width: 88%; margin: 0 0 14px; }
.message.user { margin-left: auto; }
.message-role { display: block; margin: 0 7px 5px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.message.user .message-role { text-align: right; }
.message p { margin: 0; padding: 12px 14px; border-radius: 5px 17px 17px 17px; color: #3e4e47; background: var(--paper-deep); font-size: 14px; line-height: 1.65; white-space: pre-wrap; }
.message p .katex { font-size: 1.08em; }
.message p .katex-display { margin: .65em 0; padding: .45em .3em; overflow-x: auto; overflow-y: hidden; text-align: center; }
.message p .katex-display > .katex { white-space: nowrap; }
.message.user p .katex { color: inherit; }
.question-confirmation-card .katex { font-size: 1.06em; }
.question-confirmation-card .katex-display { margin: .65em 0; overflow-x: auto; overflow-y: hidden; }
.message.streaming p { box-shadow: inset 3px 0 0 #79aa96; }
.message.user p { color: white; border-radius: 17px 5px 17px 17px; background: var(--forest); }
.message.system p { color: #6f5831; background: #f7ead1; }

.question-confirmation-card {
  max-width: 92%;
  margin: 0 0 15px;
  padding: 14px;
  border: 1px solid #c9d9d1;
  border-radius: 16px;
  background: #fffdfa;
  box-shadow: 0 9px 24px rgba(25, 65, 52, .08);
}
.question-confirmation-card.pending { border-color: #d4a85d; box-shadow: inset 4px 0 0 #d4a85d, 0 9px 24px rgba(25, 65, 52, .08); }
.question-confirmation-card.confirmed { border-color: #77a995; box-shadow: inset 4px 0 0 #4d9175; }
.question-confirmation-card.replacing { border-color: #6b9cb3; box-shadow: inset 4px 0 0 #6b9cb3; opacity: .88; }
.question-confirmation-card.incorrect,
.question-confirmation-card.cancelled { border-color: #dba49c; box-shadow: inset 4px 0 0 #bd6458; }
.question-confirmation-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--forest); }
.question-confirmation-card header strong { font-size: 14px; }
.question-confirmation-card header span { padding: 4px 9px; border-radius: 99px; color: #50685e; background: #edf4f0; font-size: 11px; font-weight: 800; }
.question-confirmation-figure { margin: 0 0 12px; }
.question-confirmation-image-button { display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid #d8e2dd; border-radius: 12px; background: #f4f7f5; cursor: zoom-in; }
.question-confirmation-image-button img { display: block; width: 100%; max-height: 260px; object-fit: contain; background: #fff; }
.question-confirmation-image-button span { display: block; padding: 7px 10px; color: #456257; background: #edf4f0; font-size: 11px; font-weight: 800; text-align: center; }
.question-confirmation-figure.expanded .question-confirmation-image-button { cursor: zoom-out; }
.question-confirmation-figure.expanded .question-confirmation-image-button img { max-height: none; }
.question-confirmation-card pre { margin: 0; color: #263d34; font: inherit; font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.question-confirmation-answer { margin: 10px 0 0; padding-top: 9px; border-top: 1px dashed #d8e2dd; color: #566b62; font-size: 12px; }
.question-confirmation-instruction { margin: 11px 0 0; padding: 9px 11px; border-radius: 10px; color: #6b5734; background: #f8edd8; font-size: 12px; font-weight: 700; }
.question-confirmation-card.confirmed .question-confirmation-instruction { color: #285f4a; background: #e5f2ec; }
.question-confirmation-card.replacing .question-confirmation-instruction { color: #315f72; background: #e5f1f6; }
.question-confirmation-card.incorrect .question-confirmation-instruction,
.question-confirmation-card.cancelled .question-confirmation-instruction { color: #8c4036; background: #fae9e6; }
.question-confirmation-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.question-confirmation-actions .secondary-button { min-height: 36px; padding: 7px 12px; font-size: 12px; }
.question-confirmation-actions .secondary-button:disabled { display: none; }

.classroom-text-composer { display: grid; gap: 6px; margin-top: 2px; }
.classroom-text-composer > label { color: var(--forest); font-size: 11px; font-weight: 900; }
.classroom-text-composer > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 8px; }
.classroom-text-composer textarea { width: 100%; min-height: 54px; max-height: 120px; resize: vertical; padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: rgba(255,255,255,.92); font: inherit; font-size: 13px; line-height: 1.5; }
.classroom-text-composer textarea:focus { outline: 2px solid rgba(36,89,72,.18); border-color: rgba(36,89,72,.45); }
.classroom-text-composer textarea:disabled { cursor: not-allowed; opacity: .58; background: rgba(240,240,236,.72); }
.classroom-text-composer button { min-width: 72px; padding: 0 14px; border-radius: 13px; }
.classroom-text-composer p { margin: 0 2px; color: var(--muted); font-size: 10px; line-height: 1.4; }

.quick-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 10px; }
.command-button { padding: 9px 5px; border: 1px solid var(--line); border-radius: 11px; color: var(--forest); background: transparent; font-size: 12px; font-weight: 800; }
.command-button:hover { background: var(--mint); }
.command-button:disabled { cursor: not-allowed; opacity: .42; background: transparent; }

.footer-note { display: flex; justify-content: space-between; gap: 20px; padding: 15px 4px 0; color: var(--muted); font-size: 11px; }
.privacy-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #5ea183; }

.developer-launcher {
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 60;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 44px;
  min-height: 104px;
  padding: 11px 7px;
  border: 1px solid rgba(255,255,255,.45);
  border-left: 0;
  border-radius: 0 16px 16px 0;
  color: white;
  background: rgba(36, 89, 72, .94);
  box-shadow: 6px 10px 24px rgba(22, 61, 50, .2);
  transform: translateY(-50%);
  backdrop-filter: blur(10px);
  transition: width .18s ease, background .18s ease;
}
.developer-launcher:hover { width: 49px; background: var(--forest-dark); }
.developer-launcher svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.developer-launcher span { font-size: 12px; font-weight: 900; letter-spacing: .16em; writing-mode: vertical-rl; }

.developer-dialog {
  width: min(1480px, calc(100% - 26px));
  height: calc(100vh - 26px);
  max-height: 950px;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  color: var(--ink);
  background: #f4f7f3;
  box-shadow: 0 30px 90px rgba(12, 39, 31, .3);
}
.developer-dialog::backdrop { background: rgba(10, 30, 25, .24); backdrop-filter: blur(2px); }
.developer-dialog [hidden] { display: none !important; }
.developer-dialog-shell {
  height: 100%;
  max-height: none;
  padding: 24px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: rgba(36,89,72,.28) transparent;
}
.developer-dialog-heading,
.developer-section-heading,
.developer-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.developer-dialog-heading { margin-bottom: 18px; }
.developer-dialog-heading h2 { font-size: 27px; }
.developer-dialog-subtitle { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.dialog-close-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0 0 3px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--forest);
  background: white;
  font-size: 25px;
  line-height: 1;
}
.developer-admin-card {
  padding: 18px;
  border: 1px solid rgba(36,89,72,.13);
  border-radius: 18px;
  background: white;
  box-shadow: 0 12px 30px rgba(36,89,72,.06);
}
.developer-admin-card h3 { margin: 3px 0 6px; font-size: 18px; }
.developer-admin-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.developer-login-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin-top: 15px;
}
.developer-login-form .primary-button { min-height: 43px; }
.developer-admin-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.developer-admin-session > div { display: grid; gap: 3px; }
.developer-admin-session strong { color: var(--forest-dark); font-size: 15px; }
.developer-admin-session small { color: var(--muted); font-size: 10px; }
.developer-protected-content { padding-bottom: 4px; }
.developer-service-grid { display: grid; grid-template-columns: 1.5fr .7fr 1fr; gap: 10px; }
.developer-protected-content .developer-service-grid { margin-top: 14px; }
.developer-service-grid > div { padding: 13px 15px; border-radius: 14px; color: white; background: var(--forest-dark); }
.developer-service-grid span { display: block; margin-bottom: 4px; color: #a9c4b8; font-size: 10px; }
.developer-service-grid strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.developer-section { margin-top: 17px; padding: 16px; border: 1px solid var(--line); border-radius: 17px; background: white; }
.developer-section-heading { margin-bottom: 12px; }
.developer-section-heading h3 { margin: 1px 0 0; font-size: 15px; }
.developer-state-pill {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 9px;
  border-radius: 999px;
  color: #89542e;
  background: #f7ead9;
  font-size: 10px;
  font-weight: 800;
}
.developer-state-pill.ready { color: var(--forest); background: var(--mint); }
.developer-text-button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(36,89,72,.14);
  border-radius: 9px;
  color: var(--forest);
  background: var(--mint);
  font-size: 11px;
  font-weight: 800;
}
.developer-text-button:disabled,
.developer-dialog .primary-button:disabled { cursor: wait; opacity: .55; }
.developer-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.developer-field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  color: var(--forest-dark);
  font-size: 11px;
  font-weight: 800;
}
.developer-field-wide { grid-column: 1 / -1; }
.developer-field input {
  width: 100%;
  min-width: 0;
  height: 43px;
  padding: 0 12px;
  border: 1px solid var(--line);
  outline: none;
  border-radius: 11px;
  color: var(--ink);
  background: #f9fbf9;
  font: 12px/1.3 "Microsoft YaHei", sans-serif;
}
.developer-field textarea {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  resize: vertical;
  border: 1px solid var(--line);
  outline: none;
  border-radius: 11px;
  color: var(--ink);
  background: #f9fbf9;
  font: 12px/1.55 "Microsoft YaHei", sans-serif;
}
.developer-field input:focus,
.developer-field textarea:focus,
.developer-prompt-card textarea:focus {
  border-color: rgba(36,89,72,.45);
  box-shadow: 0 0 0 3px rgba(36,89,72,.07);
}
.developer-field small { color: var(--muted); font-size: 9px; font-weight: 500; line-height: 1.45; }
.developer-form-message {
  min-height: 18px;
  margin-top: 8px !important;
  color: var(--muted);
  font-size: 11px !important;
}
.developer-form-message.success { color: var(--forest); }
.developer-form-message.error { color: #9d4035; }
.developer-endpoint-list { display: grid; gap: 7px; }
.developer-endpoint-row {
  display: grid;
  grid-template-columns: 48px minmax(150px, .8fr) 1.5fr;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--paper-deep);
  font-size: 11px;
}
.developer-endpoint-method { color: var(--forest); font-weight: 900; }
.developer-endpoint-path { font-family: Consolas, "SFMono-Regular", monospace; font-weight: 700; }
.developer-endpoint-purpose { color: var(--muted); }
.developer-prompt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.developer-subject-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 9px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #f3f6f3;
}
.developer-subject-tab {
  min-height: 38px;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 800;
}
.developer-subject-tab.active { color: white; background: var(--forest); box-shadow: 0 6px 14px rgba(36,89,72,.16); }
.developer-subject-marker {
  margin: 0 0 13px;
  color: var(--forest);
  font-size: 11px;
  font-weight: 800;
}
.developer-prompt-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 17px; background: white; }
.developer-prompt-card textarea {
  display: block;
  width: 100%;
  min-height: 290px;
  resize: vertical;
  padding: 13px;
  border: 1px solid var(--line);
  outline: none;
  border-radius: 12px;
  color: #30453d;
  background: #f6f3eb;
  font: 11px/1.65 Consolas, "Microsoft YaHei", monospace;
}
.developer-dialog-footer { margin-top: 13px; padding-bottom: 2px; color: var(--muted); font-size: 11px; }
.developer-dialog-footer .secondary-button { min-height: 38px; }

@media (max-width: 980px) {
  .app-shell { width: min(100% - 28px, 760px); }
  .english-symbol { color: rgba(36, 89, 72, .065); font-size: calc(22.5px * var(--s, 1)); }
  .topbar { align-items: flex-start; flex-direction: column; }
  .subject-switcher { width: 100%; }
  .session-overview { width: 100%; justify-content: space-between; }
  .workspace-grid { grid-template-columns: 1fr; grid-template-areas: "camera" "teacher" "hardware"; }
  .panel { min-height: auto; }
  .conversation-card { position: static; height: min(78vh, 760px); min-height: 560px; max-height: 760px; }
  .developer-prompt-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .english-atmosphere { display: none; }
  .app-shell { width: min(100% - 18px, 520px); padding-top: 18px; }
  .brand-mark { width: 54px; height: 54px; }
  .session-overview { flex-wrap: wrap; }
  .mode-badge { order: 3; }
  .panel { padding: 17px; border-radius: 20px; }
  .camera-controls { grid-template-columns: 1fr 1fr; }
  .select-field { grid-column: 1 / -1; }
  .audio-device-row { grid-template-columns: 1fr auto; }
  .audio-device-row .select-field { grid-column: 1 / -1; }
  .audio-test-row { grid-template-columns: 1fr 1fr; }
  .audio-test-meter { grid-column: 1 / -1; }
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
  .footer-note { flex-direction: column; gap: 6px; }
  .camera-stage { height: min(52vh, 430px); }
  .camera-mode-row { grid-template-columns: 1fr; }
  .camera-viewer-actions { right: 10px; bottom: 10px; }
  .developer-launcher { width: 38px; min-height: 90px; border-radius: 0 13px 13px 0; }
  .developer-dialog { width: calc(100% - 10px); height: calc(100vh - 10px); max-height: none; border-radius: 19px; }
  .developer-dialog-shell { height: 100%; max-height: none; padding: 16px; }
  .developer-service-grid { grid-template-columns: 1fr 1fr; }
  .developer-service-grid > div:first-child { grid-column: 1 / -1; }
  .developer-login-form,
  .developer-config-grid { grid-template-columns: 1fr; }
  .developer-field-wide { grid-column: auto; }
  .developer-endpoint-row { grid-template-columns: 44px 1fr; }
  .developer-endpoint-purpose { grid-column: 1 / -1; }
  .developer-dialog-footer { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark img,
  .brand-mark::before,
  .brand-mark::after { animation: none; }
}

/* Student access gate */
.login-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 85% 5%, rgba(188,220,201,.72), transparent 38%),
    radial-gradient(circle at 8% 90%, rgba(233,189,105,.35), transparent 32%),
    #f5f1e8;
}
body[data-authenticated="true"] .login-gate { display: none; }
body:not([data-authenticated="true"]) .app-shell,
body:not([data-authenticated="true"]) .developer-launcher,
body:not([data-authenticated="true"]) .report-launcher,
body:not([data-authenticated="true"]) .mistake-guide-launcher { visibility: hidden; }
.login-card {
  width: min(430px, 100%);
  padding: 38px;
  border: 1px solid rgba(36,89,72,.12);
  border-radius: 30px;
  background: rgba(251,250,246,.96);
  box-shadow: 0 30px 90px rgba(22,61,50,.18);
  text-align: center;
}
.login-brand-mark { width: 84px; height: 84px; margin: 0 auto 12px; }
.login-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.login-card h1 { margin: 5px 0 9px; font-family: Georgia, "Songti SC", serif; font-size: 31px; }
.login-card > p:not(.eyebrow) { margin: 0 0 24px; color: var(--muted); }
.student-login-form { display: grid; gap: 15px; text-align: left; }
.student-login-form label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.student-login-form input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 13px; outline: none; color: var(--ink); background: white; }
.student-login-form input:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(36,89,72,.1); }
.student-login-form .primary-button { width: 100%; min-height: 50px; margin-top: 3px; }
.login-message, .profile-message { min-height: 18px; margin: 0; color: #9a3d31; font-size: 12px; }
.account-badge { max-width: 126px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; color: var(--forest); background: rgba(255,255,255,.72); font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }

/* Fixed report center entry */
.report-launcher {
  position: fixed;
  left: 0;
  top: calc(50% + 128px);
  z-index: 60;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 44px;
  min-height: 126px;
  padding: 11px 7px;
  border: 1px solid rgba(255,255,255,.45);
  border-left: 0;
  border-radius: 0 16px 16px 0;
  color: white;
  background: rgba(22,61,50,.94);
  box-shadow: 6px 10px 24px rgba(22,61,50,.2);
  transform: translateY(-50%);
  backdrop-filter: blur(10px);
  transition: width .18s ease, background .18s ease;
}
.report-launcher:hover { width: 49px; background: #0e3027; }
.report-launcher svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.report-launcher span { font-size: 11px; font-weight: 900; letter-spacing: .08em; writing-mode: vertical-rl; }

/* Classroom profile */
.student-profile-dialog { width: min(860px, calc(100% - 30px)); max-height: calc(100vh - 30px); padding: 0; border: 0; border-radius: 26px; background: var(--paper); box-shadow: var(--shadow); }
.student-profile-dialog::backdrop, .report-center-dialog::backdrop, .mistake-scan-dialog::backdrop, .mistake-guide-dialog::backdrop { background: rgba(10,30,25,.44); backdrop-filter: blur(3px); }
.student-profile-card { padding: 28px; }
.student-profile-card > header { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.student-profile-card h2 { margin: 3px 0 6px; font-size: 25px; }
.student-profile-card header p:last-child { margin: 0; color: var(--muted); font-size: 13px; }
.student-profile-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; margin: 20px 0; }
.student-profile-grid label, .report-export-options > label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.student-profile-grid input, .student-profile-grid select, .report-export-options select { min-height: 43px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; background: white; color: var(--ink); }
.weakness-selector { padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: #f6f3eb; }
.weakness-selector h3 { margin: 0 0 14px; font-size: 14px; }
.weakness-subject { display: grid; grid-template-columns: 54px 1fr; align-items: start; gap: 10px; margin: 11px 0; }
.weakness-subject > strong { padding-top: 7px; color: var(--forest); font-size: 12px; }
.weakness-subject > div { display: flex; flex-wrap: wrap; gap: 7px; }
.weakness-subject label input { position: absolute; opacity: 0; pointer-events: none; }
.weakness-subject label span { display: block; padding: 7px 11px; border: 1px solid rgba(36,89,72,.15); border-radius: 999px; background: white; color: var(--muted); font-size: 11px; cursor: pointer; }
.weakness-subject label input:checked + span { color: white; border-color: var(--forest); background: var(--forest); }
.student-profile-card footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.student-consent-panel { margin-top: 14px; padding: 16px 18px; border: 1px solid rgba(36,89,72,.18); border-radius: 17px; background: #f2f7f4; }
.student-consent-panel h3 { margin: 0 0 12px; font-size: 14px; color: var(--forest); }
.student-consent-check { display: flex; align-items: flex-start; gap: 9px; margin: 9px 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.student-consent-check input { margin-top: 4px; accent-color: var(--forest); }
.student-consent-check a { color: var(--forest); font-weight: 800; }
.guardian-consent-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(36,89,72,.14); }
.guardian-consent-fields p { grid-column: 1 / -1; margin: 0; color: #8a5b2a; font-size: 12px; }
.guardian-consent-fields label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; }
.guardian-consent-fields input { min-height: 41px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; background: white; }

/* Report center */
.report-center-dialog { width: min(1480px, calc(100% - 26px)); height: calc(100vh - 26px); max-height: 950px; margin: auto; padding: 0; overflow: hidden; border: 0; border-radius: 24px; background: #eef2f0; box-shadow: 0 30px 90px rgba(9,35,27,.3); }
.report-center-shell { display: flex; flex-direction: column; height: 100%; }
.report-center-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 26px; color: white; background: var(--forest-dark); }
.report-center-header h2 { margin: 2px 0; font-size: 24px; }
.report-center-header p:last-child { margin: 4px 0 0; color: rgba(255,255,255,.68); font-size: 11px; }
.report-center-header .eyebrow { color: rgba(255,255,255,.55); }
.report-center-header .dialog-close-button { color: white; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }
.report-center-body { display: grid; grid-template-columns: 210px minmax(0,1fr); min-height: 0; flex: 1; overflow: hidden; }
.report-sidebar { min-height: 0; padding: 24px 14px; overflow-y: auto; overscroll-behavior: contain; background: #12483a; scrollbar-width: thin; }
.report-sidebar button { width: 100%; padding: 14px 16px; border: 0; border-radius: 10px; color: #d8e8e2; background: transparent; text-align: left; font-size: 13px; font-weight: 800; }
.report-sidebar button.active { color: white; background: #2c7561; }
.report-content { min-width: 0; min-height: 0; padding: 26px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(36,89,72,.28) transparent; }
.report-view { display: none; }
.report-view.active { display: block; }
.report-view-heading { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.report-view-heading h3 { margin: 3px 0 0; font-size: 25px; }
.report-view-heading p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.report-kicker { color: #2c7561; font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.report-card { min-width: 0; padding: 20px; border: 1px solid #dce3df; border-radius: 16px; background: white; }
.report-card h4 { margin: 0 0 14px; font-size: 16px; }
.report-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 18px; }
.report-cost-metrics { grid-template-columns: repeat(5,minmax(0,1fr)); }
.report-cost-metrics .report-metric { padding: 13px; }
.report-cost-metrics .report-metric strong { font-size: 18px; }
.report-metric { padding: 18px; border: 1px solid #dce3df; border-radius: 14px; background: white; }
.report-metric span { color: var(--muted); font-size: 11px; }
.report-metric strong { display: block; margin: 5px 0; font-size: 25px; }
.report-metric i { display: block; width: 100%; height: 6px; overflow: hidden; border-radius: 20px; background: #e6ece9; }
.report-metric i::after { content: ""; display: block; width: var(--metric-fill,55%); height: 100%; background: #2c8069; }
.report-two-column { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.report-empty { padding: 36px 12px; color: var(--muted); text-align: center; font-size: 13px; }
.report-class-row, .report-trend-row, .report-weakness-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 15px; padding: 13px 0; border-bottom: 1px solid #edf1ef; }
.report-class-row:last-child, .report-trend-row:last-child, .report-weakness-row:last-child { border-bottom: 0; }
.report-class-row strong, .report-trend-row strong, .report-weakness-row strong { display: block; font-size: 13px; }
.report-class-row small, .report-trend-row small, .report-weakness-row small { color: var(--muted); font-size: 11px; }
.report-subject-bar { display: grid; grid-template-columns: 45px 1fr 35px; align-items: center; gap: 9px; margin: 12px 0; font-size: 11px; }
.report-subject-bar i { height: 8px; overflow: hidden; border-radius: 20px; background: #e5ebe8; }
.report-subject-bar i::after { content: ""; display: block; width: var(--bar-width,0%); height: 100%; background: #2f8069; }
.report-record-layout { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 18px; }
.report-record-list { display: grid; align-content: start; gap: 9px; }
.report-record-button { width: 100%; padding: 14px; border: 1px solid #dce3df; border-radius: 13px; background: white; text-align: left; }
.report-record-button.active { border-color: var(--forest); box-shadow: 0 0 0 2px rgba(36,89,72,.1); }
.report-record-button strong { display: block; color: var(--ink); font-size: 13px; }
.report-record-button span { color: var(--muted); font-size: 11px; }
.report-record-detail { min-height: 470px; }
.report-message { padding: 13px 0; border-bottom: 1px solid #edf1ef; }
.report-message:last-child { border-bottom: 0; }
.report-message header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; color: var(--forest); font-size: 11px; font-weight: 900; }
.report-message p { margin: 0; color: #344a42; font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
.report-evidence { margin-top: 7px; padding: 8px 10px; border-radius: 9px; background: #f6f3eb; color: #52665e; font-size: 11px; line-height: 1.5; }
.report-export-grid { display: grid; grid-template-columns: 390px minmax(560px,1fr); gap: 18px; }
.report-export-options { display: grid; align-content: start; gap: 18px; }
.report-export-options fieldset { display: grid; gap: 9px; margin: 0; padding: 15px; border: 1px solid #dde4e0; border-radius: 12px; }
.report-export-options legend { padding: 0 6px; color: var(--forest); font-size: 11px; font-weight: 900; }
.report-export-options fieldset label { color: #40534c; font-size: 12px; }
.report-preset-options { display: flex; flex-wrap: wrap; gap: 7px; }
.report-preset-options button { padding: 7px 11px; border: 1px solid #d5d1ca; border-radius: 999px; color: #59665f; background: white; font-size: 11px; }
.report-preset-options button.active { color: white; border-color: #5750c9; background: #5750c9; }
.report-dimension-options { display: flex; flex-wrap: wrap; gap: 7px; }
.report-dimension-options label input { position: absolute; opacity: 0; pointer-events: none; }
.report-dimension-options label span { display: block; padding: 7px 10px; border: 1px solid #bbb8ee; border-radius: 999px; color: #5148b8; background: #f6f5ff; font-size: 11px; cursor: pointer; }
.report-dimension-options label input:checked + span { color: white; border-color: #5850c9; background: #5850c9; }
.report-radar-card { display: flex; align-items: stretch; flex-direction: column; min-height: 610px; }
.report-radar-heading { display: flex; justify-content: space-between; gap: 20px; }
.report-radar-heading h4 { margin: 0 0 4px; font-size: 18px; }
.report-radar-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.report-radar-heading > span { align-self: flex-start; padding: 6px 9px; border-radius: 7px; color: #554bc1; background: #efedff; font-size: 10px; }
.report-radar { width: min(100%,650px); height: 430px; margin: 5px auto 0; overflow: visible; }
.report-radar-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.report-radar-summary > div { padding: 13px; border-radius: 10px; background: #f5f2ea; }
.report-radar-summary span { display: block; color: var(--muted); font-size: 10px; }
.report-radar-summary strong { display: block; margin-top: 4px; font-size: 16px; }
.report-evidence-note { margin: 13px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }

@media (max-width: 1000px) {
  .student-profile-grid { grid-template-columns: 1fr 1fr; }
  .report-center-body { grid-template-columns: 160px minmax(0,1fr); }
  .report-metrics { grid-template-columns: 1fr 1fr; }
  .report-two-column, .report-record-layout, .report-export-grid { grid-template-columns: 1fr; }
  .report-export-grid { min-width: 0; }
}

@media (max-width: 650px) {
  .login-card { padding: 27px 21px; }
  .account-badge { order: 2; }
  .report-launcher { top: calc(50% + 108px); width: 38px; min-height: 110px; border-radius: 0 13px 13px 0; }
  .student-profile-card { padding: 18px; }
  .student-profile-grid { grid-template-columns: 1fr; }
  .guardian-consent-fields { grid-template-columns: 1fr; }
  .weakness-subject { grid-template-columns: 1fr; }
.report-center-dialog { width: calc(100% - 10px); height: calc(100vh - 10px); }
  .report-center-header { padding: 16px; }
  .report-center-body { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .report-sidebar { position: sticky; top: 0; z-index: 2; display: flex; gap: 6px; overflow-x: auto; padding: 10px; }
  .report-sidebar button { width: auto; flex: 0 0 auto; padding: 10px 12px; }
  .report-content { padding: 16px; overflow: visible; }
  .report-metrics { grid-template-columns: 1fr 1fr; }
  .report-radar-summary { grid-template-columns: 1fr; }
}

/* Local mistake-guidance prototype */
.mistake-guide-launcher {
  position: fixed; left: 0; top: calc(50% - 122px); z-index: 60;
  display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 7px;
  width: 44px; min-height: 116px; padding: 11px 7px; border: 1px solid rgba(255,255,255,.45); border-left: 0;
  border-radius: 0 16px 16px 0; color: white; background: rgba(182,103,70,.96);
  box-shadow: 6px 10px 24px rgba(82,45,31,.2); transform: translateY(-50%); backdrop-filter: blur(10px);
  transition: width .18s ease, background .18s ease;
}
.mistake-guide-launcher:hover { width: 49px; background: #925137; }
.mistake-guide-launcher svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mistake-guide-launcher span { font-size: 11px; font-weight: 900; letter-spacing: .08em; writing-mode: vertical-rl; }
.mistake-guide-launcher b { position: absolute; right: -6px; top: -7px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border: 2px solid #f5f1e8; border-radius: 999px; color: white; background: #b84938; font-size: 10px; }

.scan-action-button { padding: 0 10px; border: 1px solid rgba(255,255,255,.24); background: rgba(8,29,23,.52); backdrop-filter: blur(8px); }
.scan-action-button:hover:not(:disabled) { background: rgba(36,89,72,.9); }
.scan-action-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mistake-capture-popover { position: absolute; right: 14px; bottom: 70px; z-index: 8; display: grid; grid-template-columns: 104px minmax(210px,1fr); gap: 12px; width: min(430px,calc(100% - 28px)); padding: 12px; border: 1px solid rgba(255,255,255,.38); border-radius: 16px; color: var(--ink); background: rgba(251,250,246,.97); box-shadow: 0 18px 45px rgba(4,20,15,.28); }
.mistake-capture-popover img { width: 104px; height: 82px; border-radius: 10px; object-fit: cover; background: #dfe7e3; }
.mistake-capture-popover > div { display: grid; align-content: center; gap: 4px; min-width: 0; }
.mistake-capture-popover strong { font-size: 13px; }
.mistake-capture-popover span { color: var(--muted); font-size: 10px; line-height: 1.45; }
.mistake-capture-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.mistake-capture-actions button { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--forest); background: white; font-size: 10px; font-weight: 800; }
.mistake-capture-actions button.primary { color: white; border-color: var(--forest); background: var(--forest); }

.mistake-scan-dialog { width: min(1160px,calc(100% - 30px)); max-height: calc(100vh - 30px); margin: auto; padding: 0; overflow: hidden; border: 0; border-radius: 24px; background: #edf2ef; box-shadow: 0 30px 90px rgba(9,35,27,.32); }
.mistake-scan-shell > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 24px; color: white; background: var(--forest-dark); }
.mistake-scan-shell > header h2 { font-size: 24px; }
.mistake-scan-shell > header p:last-child { margin: 5px 0 0; color: rgba(255,255,255,.68); font-size: 11px; }
.mistake-scan-shell > header .eyebrow { color: #a9d1c1; }
.mistake-scan-shell .dialog-close-button, .mistake-guide-header .dialog-close-button { color: white; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); }
.mistake-scan-workspace { display: grid; grid-template-rows: minmax(0,1fr) auto; min-height: 570px; max-height: calc(100vh - 125px); }
.mistake-scan-canvas { position: relative; display: grid; place-items: center; min-width: 0; min-height: 460px; overflow: hidden; padding: 24px; background: #18241f; touch-action: none; user-select: none; }
.mistake-scan-canvas video, .mistake-scan-canvas img { display: block; max-width: 100%; max-height: calc(100vh - 175px); object-fit: contain; }
.mistake-scan-canvas video { width: 100%; height: 100%; }
.mistake-scan-canvas img { filter: var(--scan-filter,none); }
.mistake-scan-canvas video[hidden], .mistake-scan-canvas img[hidden], .mistake-crop-box[hidden] { display: none !important; }
.mistake-crop-box { position: absolute; border: 2px solid #ffd079; background: rgba(255,208,121,.1); box-shadow: 0 0 0 9999px rgba(4,15,12,.45); cursor: move; touch-action: none; }
.mistake-crop-box::before { content: "拖动选择题目"; position: absolute; left: 0; top: -27px; padding: 4px 7px; border-radius: 6px 6px 0 0; color: #3c2a12; background: #ffd079; font-size: 10px; font-weight: 900; white-space: nowrap; }
.mistake-crop-box span { position: absolute; right: -7px; bottom: -7px; width: 15px; height: 15px; border: 2px solid white; border-radius: 50%; background: #d99b34; cursor: nwse-resize; }
.mistake-scan-controls { padding: 12px 24px 18px; background: #fbfaf6; }
.mistake-scan-footer { display: grid; grid-template-columns: minmax(170px,1.4fr) minmax(120px,.8fr) minmax(150px,1fr); gap: 8px; }
.mistake-scan-footer button { min-height: 42px; white-space: nowrap; }

.mistake-guide-dialog { width: min(1480px,calc(100% - 26px)); height: calc(100vh - 26px); max-height: 950px; margin: auto; padding: 0; overflow: hidden; border: 0; border-radius: 24px; background: #eef2f0; box-shadow: 0 30px 90px rgba(9,35,27,.32); }
.mistake-guide-shell { display: flex; flex-direction: column; height: 100%; }
.mistake-guide-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 19px 25px; color: white; background: linear-gradient(120deg,#6d3c2b,#9b5c3f); }
.mistake-guide-header h2 { font-size: 24px; }
.mistake-guide-header p:last-child { margin: 4px 0 0; color: rgba(255,255,255,.7); font-size: 11px; }
.mistake-guide-header .eyebrow { color: #f1cbb7; }
.mistake-guide-header-actions { display: flex; align-items: center; gap: 8px; }
.mistake-guide-header-actions > button:not(.dialog-close-button) { padding: 8px 11px; border: 1px solid rgba(255,255,255,.3); border-radius: 9px; color: white; background: rgba(255,255,255,.08); font-size: 11px; font-weight: 800; }
.mistake-guide-body { display: grid; grid-template-columns: 205px minmax(0,1fr); min-height: 0; flex: 1; overflow: hidden; }
.mistake-guide-sidebar { display: flex; flex-direction: column; gap: 5px; min-height: 0; padding: 20px 12px; overflow-y: auto; overscroll-behavior: contain; background: #183e34; scrollbar-width: thin; }
.mistake-guide-sidebar > button { display: flex; justify-content: space-between; width: 100%; padding: 12px 14px; border: 0; border-radius: 10px; color: #d8e8e2; background: transparent; font-size: 12px; font-weight: 800; text-align: left; }
.mistake-guide-sidebar > button.active { color: white; background: #2c7561; }
.mistake-guide-sidebar b { min-width: 22px; padding: 2px 5px; border-radius: 999px; background: rgba(255,255,255,.12); text-align: center; }
.mistake-guide-storage { display: grid; gap: 5px; margin-top: auto; padding: 13px; border-radius: 12px; color: #d8e8e2; background: rgba(255,255,255,.07); }
.mistake-guide-storage span, .mistake-guide-storage small { color: #aac4ba; font-size: 9px; line-height: 1.5; }
.mistake-guide-storage strong { font-size: 16px; }
.mistake-guide-content { min-width: 0; min-height: 0; padding: 24px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(36,89,72,.28) transparent; }
.mistake-guide-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
.mistake-guide-toolbar h3 { margin: 3px 0 0; font-size: 23px; }
.mistake-guide-toolbar > div:last-child { display: flex; gap: 7px; }
.mistake-guide-toolbar select, .mistake-guide-toolbar button, .mistake-detail-actions button, .mistake-guidance-actions button:not(.primary-button), .mistake-guide-back { min-height: 38px; padding: 0 11px; border: 1px solid #d9e1dd; border-radius: 9px; color: var(--forest); background: white; font-size: 11px; font-weight: 800; }
.mistake-guide-toolbar .mistake-capture-button { color: white; border-color: var(--forest); background: var(--forest); }
.mistake-guide-toolbar .mistake-capture-button:disabled { color: #74867f; border-color: #d5dfda; background: #e6ece9; cursor: not-allowed; }
.mistake-subject-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: -4px 0 17px; }
.mistake-subject-filters button { min-height: 34px; padding: 0 14px; border: 1px solid #ccd8d2; border-radius: 999px; color: #53655e; background: rgba(255,255,255,.78); font-size: 11px; font-weight: 800; }
.mistake-subject-filters button.active { color: white; border-color: var(--forest); background: var(--forest); }
.mistake-module-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: -8px 0 17px; padding: 10px 12px; border: 1px solid #d9e4df; border-radius: 13px; background: rgba(237,244,241,.72); }
.mistake-module-filters button { min-height: 31px; padding: 0 12px; border: 1px solid #c8d7d0; border-radius: 999px; color: #496158; background: white; font-size: 11px; font-weight: 800; }
.mistake-module-filters button.active { color: white; border-color: #39735f; background: #39735f; }
.mistake-library-empty { padding: 80px 20px; border: 1px dashed #c9d4cf; border-radius: 18px; color: var(--muted); text-align: center; background: rgba(255,255,255,.55); }
.mistake-library-empty strong { color: var(--ink); font-size: 17px; }
.mistake-library-empty p { margin: 7px 0 0; font-size: 12px; }
.mistake-library-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 14px; }
.mistake-library-card { overflow: hidden; border: 1px solid #dce3df; border-radius: 15px; background: white; box-shadow: 0 8px 20px rgba(26,58,48,.06); cursor: pointer; }
.mistake-library-card:hover { border-color: #94b1a5; transform: translateY(-1px); }
.mistake-library-card img { display: block; width: 100%; height: 155px; object-fit: cover; background: #edf1ef; }
.mistake-library-card > div { padding: 12px; }
.mistake-library-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.mistake-library-card strong { display: -webkit-box; overflow: hidden; font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mistake-library-card span, .mistake-library-card small { color: var(--muted); font-size: 10px; }
.mistake-library-card footer { display: flex; justify-content: flex-start; gap: 8px; margin-top: 10px; }
.mistake-status { padding: 4px 7px; border-radius: 999px; color: #6a4b1d !important; background: #fff0d2; }
.mistake-guide-detail { min-height: 100%; }
.mistake-guide-back { margin-bottom: 13px; }
.mistake-detail-grid { display: grid; grid-template-columns: minmax(340px,.9fr) minmax(460px,1.1fr); gap: 17px; }
.mistake-question-card, .mistake-guidance-card { padding: 18px; border: 1px solid #dce3df; border-radius: 16px; background: white; }
.mistake-question-card > img { display: block; width: 100%; max-height: 330px; object-fit: contain; border-radius: 11px; background: #edf1ef; }
.mistake-detail-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.mistake-detail-meta span { padding: 5px 8px; border-radius: 999px; color: var(--forest); background: #e7f0ec; font-size: 10px; font-weight: 800; }
.mistake-question-card label, .mistake-guide-answer { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; }
.mistake-question-card textarea, .mistake-guide-answer textarea { width: 100%; resize: vertical; padding: 11px; border: 1px solid #d9e1dd; border-radius: 10px; color: var(--ink); background: #fbfcfb; line-height: 1.6; }
.mistake-detail-actions, .mistake-guidance-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.mistake-detail-actions .danger { color: #983b31; }
.mistake-progress-heading { display: flex; justify-content: space-between; gap: 15px; }
.mistake-progress-heading h3 { margin: 3px 0 0; }
.mistake-progress-heading > span { align-self: center; color: var(--forest); font-size: 12px; font-weight: 900; }
.mistake-mastery-progress { margin: 13px 0 15px; padding: 14px 14px 12px; border: 1px solid rgba(35,99,80,.16); border-radius: 15px; background: linear-gradient(145deg,#f8fbf9,#f4f2e9); }
.mistake-mastery-track { position: relative; height: 14px; overflow: hidden; border: 1px solid #d3ddd8; border-radius: 999px; background: linear-gradient(to right, transparent 24.75%, rgba(255,255,255,.95) 24.75% 25%, transparent 25% 49.75%, rgba(255,255,255,.95) 49.75% 50%, transparent 50% 74.75%, rgba(255,255,255,.95) 74.75% 75%, transparent 75%), #e7ecef; }
.mistake-mastery-track > span { display: block; width: 25%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#d75a58,#e77658); transition: width .45s ease; }
.mistake-mastery-progress[data-level="3"] .mistake-mastery-track > span { background: linear-gradient(90deg,#d69a49,#4d9075); }
.mistake-mastery-progress[data-level="4"] .mistake-mastery-track > span { background: linear-gradient(90deg,#4d9075,#236350); }
.mistake-mastery-levels { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 8px; }
.mistake-mastery-levels > div { display: grid; gap: 2px; justify-items: center; color: #8a9792; text-align: center; }
.mistake-mastery-levels strong { font-size: 14px; }
.mistake-mastery-levels span { font-size: 10px; font-weight: 700; }
.mistake-mastery-levels > div.reached { color: #356b59; }
.mistake-mastery-levels > div.current strong { color: #173f34; }
.mistake-mastery-progress[data-provisional="true"] .mistake-mastery-levels > div.current strong::after { content: " 暂定"; color: #aa6f2d; font-size: 9px; }
.mistake-mastery-progress > p { margin: 10px 0 0; color: #5d6c67; font-size: 11px; line-height: 1.55; text-align: center; }
.mistake-guide-diagnosis { margin: 0 0 10px; padding: 10px 12px; border-left: 3px solid #bd784f; border-radius: 8px; color: #684431; background: #fbede4; font-size: 11px; font-weight: 700; line-height: 1.55; }
.mistake-review-plan { margin: 0 0 10px; padding: 10px 12px; border: 1px solid #bdd8cc; border-radius: 10px; color: #275c4c; background: #edf7f2; font-size: 11px; font-weight: 700; line-height: 1.6; }
.mistake-guide-conversation { display: grid; align-content: start; gap: 8px; min-height: 220px; max-height: 320px; margin-bottom: 12px; padding: 12px; overflow: auto; border-radius: 12px; background: #f4f2eb; }
.mistake-guide-message { max-width: 88%; padding: 9px 11px; border-radius: 11px; color: #405149; background: white; font-size: 11px; line-height: 1.6; white-space: pre-wrap; }
.mistake-guide-message.student { justify-self: end; color: white; background: #39735f; }
.mistake-challenge-card { display: grid; gap: 12px; margin: 0 0 13px; padding: 15px; border: 1px solid #cfded7; border-radius: 14px; background: linear-gradient(145deg,#f8fbf9,#eef5f1); box-shadow: 0 10px 24px rgba(28,72,57,.08); }
.mistake-challenge-card[hidden] { display: none; }
.mistake-challenge-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mistake-challenge-heading span { padding: 5px 9px; border-radius: 999px; color: white; background: var(--forest); font-size: 10px; font-weight: 900; letter-spacing: .06em; }
.mistake-challenge-heading b { color: #6d7e76; font-size: 10px; }
.mistake-challenge-card h4 { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.65; white-space: pre-wrap; }
.mistake-challenge-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.mistake-challenge-options[hidden] { display: none; }
.mistake-challenge-options button { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; min-height: 46px; padding: 8px 10px; border: 1px solid #cad8d2; border-radius: 11px; color: #3f5149; background: white; text-align: left; cursor: pointer; }
.mistake-challenge-options button b { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: var(--forest); background: #e7f0ec; }
.mistake-challenge-options button:hover { border-color: #6a9b88; transform: translateY(-1px); }
.mistake-challenge-options button.selected { color: white; border-color: var(--forest); background: var(--forest); box-shadow: 0 7px 15px rgba(28,72,57,.16); }
.mistake-challenge-options button.selected b { color: var(--forest); background: white; }
.mistake-challenge-field { display: grid; gap: 6px; color: #566b62; font-size: 11px; font-weight: 800; }
.mistake-challenge-field input, .mistake-challenge-field textarea { width: 100%; padding: 10px 11px; border: 1px solid #cddad4; border-radius: 10px; color: var(--ink); background: white; line-height: 1.55; }
.mistake-challenge-field textarea { resize: vertical; }

/* Shared hierarchy for menu, report center and mistake guidance */
.developer-dialog-heading h2,
.report-center-header h2,
.mistake-guide-header h2 { margin: 2px 0; font-size: clamp(27px,2vw,30px); line-height: 1.2; }
.developer-admin-card h3,
.developer-section-heading h3,
.report-view-heading h3,
.mistake-guide-toolbar h3,
.mistake-progress-heading h3 { margin: 3px 0 0; font-size: clamp(20px,1.55vw,24px); line-height: 1.3; }
.report-card h4,
.report-radar-heading h4 { font-size: 18px; line-height: 1.4; }
.developer-dialog-subtitle,
.report-center-header p:last-child,
.mistake-guide-header p:last-child { margin-top: 7px; font-size: 13px; line-height: 1.55; }
.developer-section-heading .section-label,
.report-kicker { font-size: 11px; }
.report-sidebar button,
.mistake-guide-sidebar > button { font-size: 13px; }

@media (max-width: 1000px) {
  .mistake-scan-workspace, .mistake-detail-grid { grid-template-columns: 1fr; }
  .mistake-scan-controls { grid-template-columns: 1fr 1fr; }
  .mistake-scan-footer { grid-column: 1 / -1; }
  .mistake-guide-body { grid-template-columns: 155px minmax(0,1fr); }
}
@media (max-width: 650px) {
  .mistake-guide-launcher { top: calc(50% - 108px); width: 38px; min-height: 102px; border-radius: 0 13px 13px 0; }
  .mistake-capture-popover { grid-template-columns: 74px minmax(0,1fr); right: 8px; bottom: 64px; width: calc(100% - 16px); }
  .mistake-capture-popover img { width: 74px; height: 74px; }
  .mistake-scan-dialog, .mistake-guide-dialog { width: calc(100% - 10px); height: calc(100vh - 10px); max-height: none; }
  .mistake-scan-shell > header, .mistake-guide-header { padding: 15px; }
  .mistake-scan-workspace { display: block; max-height: calc(100vh - 105px); overflow: auto; }
  .mistake-scan-canvas { min-height: 370px; }
  .mistake-scan-controls { display: grid; grid-template-columns: 1fr; }
  .mistake-scan-footer { grid-template-columns: 1fr 1fr; }
  .mistake-scan-footer button:first-child { grid-column: 1 / -1; }
  .mistake-guide-header { align-items: stretch; flex-direction: column; }
  .mistake-guide-header-actions { flex-wrap: wrap; }
  .mistake-guide-body { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .mistake-guide-sidebar { position: sticky; top: 0; z-index: 3; flex-direction: row; overflow-x: auto; padding: 8px; }
  .mistake-guide-sidebar > button { width: auto; flex: 0 0 auto; gap: 7px; }
  .mistake-guide-storage { display: none; }
  .mistake-guide-content { padding: 13px; overflow: visible; }
  .mistake-guide-toolbar { align-items: stretch; flex-direction: column; }
  .mistake-library-list { grid-template-columns: 1fr 1fr; }
  .mistake-detail-grid { grid-template-columns: 1fr; }
  .mistake-challenge-options { grid-template-columns: 1fr; }
}

/* 学生提问小锦囊：机器人拉出/推回右侧停靠面板 */
:root {
  --student-prompt-panel-width: 392px;
  --student-prompt-panel-gap: 22px;
  --student-prompt-layout-reserve: 436px;
  --student-prompt-motion: 1s;
  --student-prompt-ease: cubic-bezier(.22, .78, .24, 1);
}

body {
  transition: padding-right var(--student-prompt-motion) var(--student-prompt-ease);
}

body[data-student-prompt-guide-state="opening"],
body[data-student-prompt-guide-state="open"] {
  padding-right: var(--student-prompt-layout-reserve);
}

body[data-student-prompt-guide-state="closing"],
body[data-student-prompt-guide-state="closed"] {
  padding-right: 0;
}

.student-prompt-guide-launcher {
  position: fixed;
  z-index: 82;
  top: 38%;
  right: -78px;
  width: 170px;
  padding: 0;
  border: 0;
  outline-offset: 4px;
  background: transparent;
  filter: drop-shadow(0 15px 17px rgba(18, 63, 49, .25));
  transform: rotate(-7deg);
  transform-origin: 55% 55%;
}

.student-prompt-guide-launcher img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.student-prompt-guide-launcher:disabled { cursor: progress; opacity: 1; }

.student-prompt-guide-bubble {
  position: fixed;
  z-index: 83;
  top: calc(38% - 67px);
  right: 74px;
  padding: 12px 17px;
  border: 2px solid #23634f;
  border-radius: 18px;
  color: #184b3d;
  background: #fffef9;
  box-shadow: 0 10px 30px rgba(31, 80, 65, .18);
  font-size: 16px;
  font-weight: 900;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  font-variant: normal;
  letter-spacing: 0;
  line-height: 1.25;
  text-rendering: geometricPrecision;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}

.student-prompt-guide-bubble::after { display: none; content: none; }

body:not([data-student-prompt-guide-state="closed"]) .student-prompt-guide-bubble {
  opacity: 0;
  transform: translateX(10px) scale(.96);
}

.student-prompt-guide-panel {
  position: fixed;
  z-index: 80;
  top: var(--student-prompt-panel-gap);
  right: var(--student-prompt-panel-gap);
  bottom: var(--student-prompt-panel-gap);
  width: var(--student-prompt-panel-width);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(35, 99, 79, .24);
  border-radius: 28px;
  color: #183b31;
  background: #fffdf8;
  box-shadow: 0 28px 70px rgba(21, 55, 45, .24);
  visibility: hidden;
  pointer-events: none;
  transform: translateX(calc(100% + 46px));
  transition:
    transform var(--student-prompt-motion) var(--student-prompt-ease),
    visibility 0s linear var(--student-prompt-motion);
}

body[data-student-prompt-guide-state="opening"] .student-prompt-guide-panel,
body[data-student-prompt-guide-state="open"] .student-prompt-guide-panel {
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition:
    transform var(--student-prompt-motion) var(--student-prompt-ease),
    visibility 0s linear 0s;
}

body[data-student-prompt-guide-state="closing"] .student-prompt-guide-panel {
  visibility: visible;
  pointer-events: none;
  transform: translateX(calc(100% + 46px));
  transition:
    transform var(--student-prompt-motion) var(--student-prompt-ease),
    visibility 0s linear var(--student-prompt-motion);
}

body[data-student-prompt-guide-state="opening"] .student-prompt-guide-launcher {
  animation: student-prompt-pull-panel var(--student-prompt-motion) var(--student-prompt-ease) both;
}

body[data-student-prompt-guide-state="open"] .student-prompt-guide-launcher {
  top: 102px;
  right: calc(var(--student-prompt-panel-width) - 20px);
  width: 116px;
  transform: rotate(-4deg);
}

body[data-student-prompt-guide-state="closing"] .student-prompt-guide-launcher {
  animation: student-prompt-push-panel var(--student-prompt-motion) var(--student-prompt-ease) both;
}

@keyframes student-prompt-pull-panel {
  0% { top: 38%; right: -78px; width: 170px; transform: rotate(-7deg); }
  18% { top: 37%; right: -42px; width: 166px; transform: rotate(-12deg); }
  78% { top: 98px; right: calc(var(--student-prompt-panel-width) - 9px); width: 118px; transform: rotate(2deg); }
  100% { top: 102px; right: calc(var(--student-prompt-panel-width) - 20px); width: 116px; transform: rotate(-4deg); }
}

@keyframes student-prompt-push-panel {
  0% { top: 102px; right: calc(var(--student-prompt-panel-width) - 20px); width: 116px; transform: rotate(-4deg); }
  20% { top: 105px; right: calc(var(--student-prompt-panel-width) - 2px); width: 118px; transform: rotate(8deg); }
  82% { top: 37%; right: -42px; width: 166px; transform: rotate(4deg); }
  100% { top: 38%; right: -78px; width: 170px; transform: rotate(-7deg); }
}

.student-prompt-guide-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 22px 18px;
  color: white;
  background: linear-gradient(135deg, #174c3d, #2a725d);
}

.student-prompt-guide-header p {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
}

.student-prompt-guide-header h2 {
  margin: 5px 0 2px;
  color: white;
  font-size: 27px;
  line-height: 1.25;
}

.student-prompt-guide-header span { color: rgba(255,255,255,.78); font-size: 13px; }

.student-prompt-guide-header > button {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  color: white;
  background: rgba(255,255,255,.1);
  font-size: 25px;
}

.student-prompt-guide-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 13px 14px;
  border-bottom: 1px solid #dce4df;
  background: #f5f3eb;
}

.student-prompt-guide-tabs button {
  min-height: 48px;
  padding: 8px 5px;
  border: 1px solid #d7dfda;
  border-radius: 13px;
  color: #496258;
  background: white;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.student-prompt-guide-tabs button.active {
  color: white;
  border-color: #24634f;
  background: #24634f;
  box-shadow: 0 7px 16px rgba(36,99,79,.2);
}

.student-prompt-guide-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  scrollbar-color: rgba(35,99,79,.35) transparent;
}

.student-prompt-guide-page h3 { margin: 0 0 4px; font-size: 23px; }
.student-prompt-guide-page h4 { margin: 20px 0 9px; color: #23634f; font-size: 17px; }
.student-prompt-guide-lead { margin: 0 0 14px; color: #75827c; font-size: 13px; }

.student-prompt-step,
.student-subject-help {
  margin: 10px 0;
  padding: 13px 14px;
  border-left: 4px solid var(--prompt-accent);
  border-radius: 12px;
  background: var(--prompt-soft);
}

.student-prompt-step.blue, .student-subject-help.blue { --prompt-accent: #1774c7; --prompt-soft: #e9f4ff; }
.student-prompt-step.green, .student-subject-help.green { --prompt-accent: #34a357; --prompt-soft: #ebf7ed; }
.student-prompt-step.orange, .student-subject-help.orange { --prompt-accent: #ed821d; --prompt-soft: #fff2e7; }
.student-prompt-step.purple, .student-subject-help.purple { --prompt-accent: #7253d6; --prompt-soft: #f1edff; }
.student-prompt-step strong, .student-subject-help strong { display: block; margin-bottom: 3px; color: var(--prompt-accent); font-size: 15px; }
.student-prompt-step p, .student-subject-help p { margin: 3px 0 0; color: #314b42; font-size: 13px; line-height: 1.65; }

.student-prompt-sentence {
  margin-top: 16px;
  padding: 16px;
  border-radius: 15px;
  color: white;
  background: #092d51;
}

.student-prompt-sentence strong { display: block; margin-bottom: 7px; color: #28cce1; }
.student-prompt-sentence p { margin: 0; font-size: 13px; line-height: 1.8; }
.student-prompt-guide-tip { margin-top: 14px; padding: 12px 13px; border-radius: 12px; color: #705628; background: #fff1cf; font-size: 12px; }

.student-prompt-list { margin: 10px 0 0; padding-left: 22px; color: #334b43; font-size: 13px; line-height: 1.75; }
.student-prompt-list li { margin: 8px 0; }
.student-prompt-list.numbered { padding-left: 24px; }

.student-command-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.student-command-grid > div { padding: 13px; border: 1px solid #dbe4df; border-radius: 13px; background: #f9faf7; }
.student-command-grid strong { color: #23634f; font-size: 14px; }
.student-command-grid p { margin: 5px 0 0; color: #3b5149; font-size: 12px; }

.student-prompt-guide-warning { margin-top: 18px; padding: 14px; border: 1px solid #e6bd64; border-radius: 13px; color: #6e5726; background: #fff7e3; }
.student-prompt-guide-warning strong { display: block; margin-bottom: 5px; }
.student-prompt-guide-warning p { margin: 0; font-size: 12px; line-height: 1.75; }

.student-prompt-guide-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 20px;
  color: #687a72;
  border-top: 1px solid #dde4e0;
  background: #fbfaf6;
  font-size: 12px;
}

.student-prompt-guide-footer b { color: #23634f; }

body:not([data-authenticated="true"]) .student-prompt-guide-launcher,
body:not([data-authenticated="true"]) .student-prompt-guide-bubble,
body:not([data-authenticated="true"]) .student-prompt-guide-panel {
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 1390px) {
  :root {
    --student-prompt-panel-width: 330px;
    --student-prompt-layout-reserve: 370px;
  }
  body[data-student-prompt-guide-state="opening"] .workspace-grid,
  body[data-student-prompt-guide-state="open"] .workspace-grid,
  body[data-student-prompt-guide-state="closing"] .workspace-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "camera" "teacher" "hardware";
  }
  body[data-student-prompt-guide-state="opening"] .topbar,
  body[data-student-prompt-guide-state="open"] .topbar,
  body[data-student-prompt-guide-state="closing"] .topbar { flex-wrap: wrap; }
  .student-prompt-guide-header h2 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  body,
  .student-prompt-guide-panel { transition-duration: .01ms !important; }
  body[data-student-prompt-guide-state="opening"] .student-prompt-guide-launcher,
  body[data-student-prompt-guide-state="closing"] .student-prompt-guide-launcher { animation-duration: .01ms !important; }
}

/* Device drawer and symmetric classroom workspace */
.app-shell {
  width: calc(100% - 180px);
  max-width: none;
  margin-left: 90px;
  margin-right: 90px;
  transition: width .24s ease, margin .24s ease;
}

.workspace-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "camera teacher";
}

.camera-card,
.conversation-card {
  width: 100%;
  height: max(690px, calc(100vh - 190px));
  min-height: 690px;
  max-height: none;
  align-self: start;
}

.camera-card { display: flex; flex-direction: column; }
.camera-panel-heading { min-height: 58px; margin-bottom: 14px; }
.camera-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.camera-title-row h2 { margin: 0; }
.camera-panel-note { color: var(--muted); font-size: 10px; font-weight: 700; text-align: right; }
.camera-viewer { position: relative; flex: 1 1 auto; min-height: 0; }
.camera-stage { height: 100%; min-height: 0; max-height: none; }

.device-drawer-launcher {
  position: fixed;
  left: 0;
  top: calc(50% + 257px);
  z-index: 83;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 44px;
  min-height: 116px;
  padding: 11px 7px;
  border: 1px solid rgba(255,255,255,.45);
  border-left: 0;
  border-radius: 0 16px 16px 0;
  color: white;
  background: rgba(189,112,64,.96);
  box-shadow: 6px 10px 24px rgba(106,61,31,.24);
  transform: translateY(-50%);
  backdrop-filter: blur(10px);
  transition: width .18s ease, background .18s ease;
}
.device-drawer-launcher:hover,
.device-drawer-launcher.active { width: 51px; background: #a95f35; }
.device-drawer-launcher svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.device-drawer-launcher span { font-size: 11px; font-weight: 900; letter-spacing: .08em; writing-mode: vertical-rl; }

.hardware-card {
  position: fixed;
  z-index: 82;
  left: 56px;
  top: 20px;
  bottom: 20px;
  width: 372px;
  height: auto;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: 0 28px 28px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(calc(-100% - 70px));
  transition: opacity .2s ease, visibility .2s ease, transform .24s ease;
}
body.device-drawer-open .hardware-card {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}
body.device-drawer-open .app-shell {
  width: calc(100% - 484px);
  margin-left: 456px;
  margin-right: 28px;
}

.device-drawer-heading {
  flex: 0 0 auto;
  align-items: flex-start;
  min-height: 114px;
  margin: 0;
  padding: 24px 22px 19px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(223,238,230,.82), rgba(251,250,246,.72));
}
.device-drawer-heading > div { min-width: 0; }
.device-drawer-heading .eyebrow { margin: 0 0 5px; color: #8c795d; }
.device-drawer-heading h2 { margin: 0 0 5px; color: var(--forest-dark); font-size: 23px; font-family: Georgia, "Songti SC", serif; }
.device-drawer-heading p:last-child { margin: 0; color: var(--muted); font-size: 11px; }
.device-drawer-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #50645d;
  background: rgba(255,255,255,.72);
  font-size: 23px;
  line-height: 1;
}
.device-drawer-close:hover { color: var(--forest-dark); background: white; }

.hardware-card .hardware-debug-stack {
  flex: 1 1 auto;
  align-content: start;
  gap: 14px;
  min-height: 0;
  padding: 17px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.hardware-card .hardware-debug-section { padding: 14px; border-radius: 19px; }
.hardware-card .hardware-section-heading { margin-bottom: 12px; }
.hardware-card .hardware-section-heading strong { font-size: 15px; }
.hardware-card .camera-mode-row { grid-template-columns: 1fr; gap: 7px; }
.hardware-card .camera-controls,
.hardware-card .audio-device-row { grid-template-columns: 1fr; align-items: stretch; }
.hardware-card .camera-controls .secondary-button,
.hardware-card .audio-device-row .secondary-button { min-height: 42px; }
.hardware-card .audio-test-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hardware-card .audio-test-button { min-height: 38px; }
.hardware-card .audio-test-meter { grid-column: 1 / -1; }
.hardware-card .audio-privacy-note { padding: 10px 11px; border-radius: 10px; background: rgba(233,238,230,.75); line-height: 1.55; }
.device-drawer-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 18px;
  border-top: 1px solid var(--line);
  color: #7a8781;
  background: #f2efe7;
  font-size: 10px;
}
.device-drawer-footer b { color: #2d765e; }

body:not([data-authenticated="true"]) .device-drawer-launcher,
body:not([data-authenticated="true"]) .hardware-card { visibility: hidden; pointer-events: none; }

@media (max-width: 1180px) {
  .workspace-grid { grid-template-columns: 1fr; grid-template-areas: "camera" "teacher"; }
  .camera-card,
  .conversation-card { position: static; height: min(78vh, 760px); min-height: 620px; max-height: 760px; }
}

@media (max-width: 760px) {
  .device-drawer-launcher { top: calc(50% + 222px); width: 38px; min-height: 102px; border-radius: 0 13px 13px 0; }
  .hardware-card { left: 44px; top: 5px; bottom: 5px; width: calc(100% - 49px); border-radius: 0 20px 20px 0; }
  body.device-drawer-open .app-shell { width: calc(100% - 100vw); margin-left: 100vw; margin-right: 0; }
  .device-drawer-heading { padding: 19px 17px 15px; }
  .device-drawer-heading h2 { font-size: 21px; }
  .camera-panel-note { display: none; }
}