/* =============================================================================
 * teacher.css —— 教师版专属（工作台 / 改作业 / 智组卷 / 学情 / 错题本）
 * 与 student.css 共用 components.css 的组件；这里只写教师版的组合。
 * ========================================================================== */

/* 工作台：左「模块入口 + 进行中的任务」，右「工作总览 + 师德学习」 */
.tch-home {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--gap);
  align-items: start;
}
@media (max-width: 1100px) { .tch-home { grid-template-columns: minmax(0, 1fr); } }

.tch-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
@media (max-width: 700px) { .tch-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tch-module {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 132px; padding: var(--s4) var(--s2);
  border-radius: var(--r-md); background: rgba(255, 255, 255, 0.18); color: #fff;
  transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.tch-module:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); }
.tch-module img { width: 56px; height: 56px; object-fit: contain; }
.tch-module__title { font-size: var(--f-body); font-weight: 700; }

/* 进行中的任务 */
.task-card {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.16); color: #fff; width: 100%; text-align: left;
  transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.task-card:hover { background: rgba(255, 255, 255, 0.26); transform: translateX(2px); }
.task-card__ico { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); display: grid; place-items: center; flex: 0 0 auto; }
.task-card__ico svg { width: 22px; height: 22px; color: var(--brand-dd); }
.task-card__main { flex: 1 1 auto; min-width: 0; }
.task-card__title { font-size: var(--f-body); font-weight: 600; }
.task-card__sub { font-size: var(--f-xs); color: rgba(255, 255, 255, 0.8); }
.task-card__ring { width: 44px; height: 44px; flex: 0 0 auto; }
.task-card__ring .ring__track { stroke: rgba(255, 255, 255, 0.35); }
.task-card__ring .ring__val { stroke: #fff; }
.task-card__ring .ring__text { fill: #fff; font-size: var(--f-xs); }
.task-card__title, .task-card__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 工作总览 */
.tch-overview { display: flex; flex-direction: column; gap: var(--s4); }
.tch-stat {
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s2); border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.16); color: #fff;
}
.tch-stat__ico { width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); display: grid; place-items: center; }
.tch-stat__ico svg { width: 24px; height: 24px; color: var(--brand-dd); }
.tch-stat__label { font-size: var(--f-sm); font-weight: 600; }
.tch-stat__val { font-family: var(--font-num); font-size: var(--f-h3); font-weight: 700; }

/* 整改/流程步骤 */
.tch-flow { display: flex; flex-wrap: wrap; gap: var(--s3); }
.tch-flow__step { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4) var(--s2) var(--s2); border-radius: var(--r-pill); background: var(--surface-3); font-size: var(--f-sm); color: var(--ink-3); }
.tch-flow__no { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: var(--f-xs); font-weight: 700; }

/* 主从分栏（批改：左列表 + 右详情） */
.tch-split { display: grid; grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.6fr); gap: var(--gap); align-items: start; }
@media (max-width: 1100px) { .tch-split { grid-template-columns: minmax(0, 1fr); } }

/* 答题卡 / 问卷扫描件的作答框 */
.scan-sheet { position: relative; border-radius: var(--r-md); overflow: hidden; background: #fff; box-shadow: var(--sh-md); }
.scan-sheet img { width: 100%; }
.scan-sheet__mark { position: absolute; border: 2px solid var(--green); border-radius: var(--r-xs); background: rgba(53, 199, 89, 0.12); }
.scan-sheet__mark--err { border-color: var(--red); background: rgba(255, 90, 95, 0.12); }

/* 分数框 / 逐题评分 */
.score-box { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.score-box input { width: 84px; text-align: center; font-family: var(--font-num); font-weight: 700; }
@media (max-width: 700px) { .score-box input { width: 64px; } }
/* 答题卡 .q-nav 已下沉到 components.css（学生做题页与教师批改页共用） */

/* 组卷：题型配额行 */
.qtype-row { display: grid; grid-template-columns: 1.2fr repeat(3, minmax(0, 0.8fr)) auto; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
@media (max-width: 700px) { .qtype-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.total-check { display: flex; align-items: center; justify-content: space-between; padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--brand-50); color: var(--brand-dd); font-weight: 600; }
.total-check.is-bad { background: var(--red-50); color: var(--red-d); }

/* 题库条目 */
.bank-item { display: flex; gap: var(--s3); padding: var(--s4); border-radius: var(--r-md); background: #fff; box-shadow: var(--sh-sm); }
.bank-item:hover { box-shadow: var(--sh-md); }
.bank-item__no { width: 28px; height: 28px; border-radius: var(--r-xs); background: var(--brand-50); color: var(--brand-dd); display: grid; place-items: center; font-size: var(--f-sm); font-weight: 700; flex: 0 0 auto; }
.bank-item__body { flex: 1 1 auto; min-width: 0; }

/* 班级学情：知识点树 + 排行榜 */
.kp-tree { display: flex; flex-direction: column; gap: 6px; }
.kp-tree__row { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-sm); }
.kp-tree__row:hover { background: var(--surface-2); }
.kp-tree__name { flex: 1 1 auto; min-width: 0; font-size: var(--f-sm); color: var(--ink-1); }
.kp-tree__bar { width: 120px; height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; flex: 0 0 auto; }
.kp-tree__bar > i { display: block; height: 100%; background: var(--brand); border-radius: var(--r-pill); }

/* ============ 组卷向导：主区 + 右侧实时预览 ============ */
.wizard { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gap); align-items: start; }
@media (max-width: 1100px) { .wizard { grid-template-columns: minmax(0, 1fr); } }
.wizard-main { display: flex; flex-direction: column; gap: var(--gap); }

/* 难度滑块（组卷 / 选题用；四档离散值，用 datalist 语义对应） */
.range { width: 100%; height: 6px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--brand-200), var(--brand)); -webkit-appearance: none; appearance: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--sh-md); border: 2px solid var(--brand); cursor: pointer; }
.range-scale { display: flex; justify-content: space-between; font-size: var(--f-xs); color: var(--ink-4); margin-top: 4px; }

/* 题型配额行：手机改两列卡片式 */
.qtype-row__no { font-family: var(--font-num); font-weight: 700; color: var(--ink-1); }
.qtype-row .total { font-family: var(--font-num); font-weight: 700; color: var(--ink-1); text-align: right; }

/* ============ 试卷纸（预览 / 导出用） ============ */
.paper-sheet {
  background: #fff; border-radius: var(--r-sm); box-shadow: var(--sh-md);
  padding: var(--s10) var(--s10) var(--s12); max-width: 920px; margin: 0 auto; color: var(--ink-1);
}
@media (max-width: 700px) { .paper-sheet { padding: var(--s5) var(--s4) var(--s8); } }
.paper-sheet__title { text-align: center; font-size: var(--f-h2); font-weight: 700; letter-spacing: 2px; }
.paper-sheet__sub { text-align: center; font-size: var(--f-sm); color: var(--ink-3); margin-top: 4px; }
.paper-sheet__meta {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); justify-content: space-between;
  margin: var(--s5) 0; padding-bottom: var(--s3); border-bottom: 1px dashed var(--line-2);
  font-size: var(--f-sm); color: var(--ink-3);
}
.paper-sheet__score { display: flex; gap: 2px; align-items: center; }
.paper-sheet__score i { display: inline-block; width: 34px; height: 22px; border: 1px solid var(--line-2); border-radius: 4px; }
.q-block { margin-top: var(--s6); }
.q-block__title { font-size: var(--f-body); font-weight: 700; margin-bottom: var(--s3); }
.q-item { margin-top: var(--s4); line-height: var(--lh-loose); font-size: var(--f-body); }
.q-item__opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2) var(--s4); margin-top: 6px; }
@media (max-width: 700px) { .q-item__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.q-item__blank { display: inline-block; min-width: 90px; border-bottom: 1px solid var(--ink-5); }
.q-item__space { height: 88px; border-radius: var(--r-xs); background: repeating-linear-gradient(transparent 0 27px, var(--line) 27px 28px); }

/* ============ 参考答案识别（OCR 核对） ============ */
.ocr-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.ocr-row:last-child { border-bottom: 0; }
.ocr-row__no { width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--r-xs); background: var(--surface-3); color: var(--ink-3); display: grid; place-items: center; font-weight: 700; font-family: var(--font-num); }
.ocr-row.is-low .ocr-row__no { background: var(--orange-50); color: var(--orange-d); }
.ocr-row.is-miss .ocr-row__no { background: var(--red-50); color: var(--red-d); }
.ocr-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ocr-row__ans { font-size: var(--f-body); color: var(--ink-1); }
.ocr-row__side { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s2); }
.conf { font-family: var(--font-num); font-size: var(--f-xs); padding: 2px 8px; border-radius: var(--r-pill); }
.conf--high { background: var(--green-50); color: var(--green-d); }
.conf--low { background: var(--orange-50); color: var(--orange-d); }
.conf--miss { background: var(--red-50); color: var(--red-d); }

/* ============ AI 出卷：生成中 / 失败 三态（原稿只有「转圈」） ============ */
.ring--xl { width: 168px; height: 168px; }
.ring--xl .ring__track, .ring--xl .ring__val { stroke-width: 7; }
.ring--xl .ring__text { font-size: var(--f-h1); }
.gen-steps { display: flex; flex-direction: column; gap: 2px; }
.gen-step { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0; font-size: var(--f-sm); color: var(--ink-4); }
.gen-step__mark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); flex: 0 0 auto; display: grid; place-items: center; font-size: 12px; }
.gen-step.is-done { color: var(--green-d); }
.gen-step.is-done .gen-step__mark { background: var(--green); border-color: var(--green); color: #fff; }
.gen-step.is-doing { color: var(--brand-dd); font-weight: 700; }
.gen-step.is-doing .gen-step__mark { border-color: var(--brand); border-top-color: transparent; animation: spin 0.8s linear infinite; }
.gen-log { max-height: 220px; }
.gen-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--f-sm); color: var(--ink-4); }

/* ============ 下载中心 ============ */
.dl-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.dl-row:last-child { border-bottom: 0; }
.dl-ico { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--brand-50); color: var(--brand-dd); display: grid; place-items: center; flex: 0 0 auto; }
.dl-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-name { font-size: var(--f-body); font-weight: 600; color: var(--ink-1); }
.dl-sub { font-size: var(--f-xs); color: var(--ink-4); }

/* ============ 错题解析：错因分布 ============ */
.err-list { display: flex; flex-direction: column; gap: var(--s2); }
.err-row { display: flex; align-items: center; gap: var(--s3); }
.err-row__ans { min-width: 64px; font-family: var(--font-num); font-weight: 700; color: var(--red-d); }
.err-row__cnt { min-width: 52px; text-align: right; font-size: var(--f-sm); color: var(--ink-4); font-family: var(--font-num); }
.teacher-quote { border-left: 3px solid var(--brand); padding-left: var(--s3); font-size: var(--f-sm); color: var(--ink-3); }