:root{
  --paper:#f7f1e4; --ink:#3d3327; --sub:#7a6a55;
  --line:#e0d4bd; --card:#fffdf7;
  --green:#4f8a5b; --green-l:#e6f2e8;
  --orange:#e0813a; --orange-l:#fdefe0;
  --blue:#3f6f96; --blue-l:#e4eef6;
  --red:#c14a3d; --red-l:#fbe9e6;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  background:var(--paper); color:var(--ink); line-height:1.7;
  background-image:radial-gradient(circle at 20% 10%,rgba(224,168,58,.06),transparent 40%),
                   radial-gradient(circle at 80% 80%,rgba(79,138,91,.06),transparent 40%);
}
body.tch{ background:#f2efe8; }
.wrap{max-width:760px;margin:0 auto;padding:18px 16px 60px}
.wrap.wide{max-width:1080px}

/* header */
.hd{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px}
.hd h1{font-size:22px;margin:0;letter-spacing:.5px}
.sub{margin:2px 0 0;font-size:13px;color:var(--sub)}
.hd-r{text-align:right;font-size:13px;color:var(--sub);display:flex;gap:8px;align-items:center}
.who{background:var(--green-l);color:var(--green);padding:3px 10px;border-radius:20px;font-weight:600}
.prog{background:#fff;border:1px solid var(--line);padding:3px 10px;border-radius:20px}

.bar{height:6px;background:#e8dfcc;border-radius:6px;overflow:hidden;margin-bottom:16px}
.bar-in{height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--green));transition:.4s;border-radius:6px}

/* card */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:14px;
  box-shadow:0 2px 0 rgba(0,0,0,.03)}
.card h2{font-size:19px;margin:0 0 6px}
.card h3{font-size:15px;margin:18px 0 8px;color:var(--sub)}
.lead{color:var(--sub);font-size:14px;margin:0 0 14px}
.sub-lead{color:var(--sub);font-size:13.5px;margin:0 0 12px;line-height:1.55}
.tip{font-size:12.5px;color:#9a8b74;margin:10px 0 0}
.tag{display:inline-block;font-size:12px;padding:3px 10px;border-radius:20px;margin-bottom:8px;font-weight:600}
.tag-pre{background:var(--blue-l);color:var(--blue)}
.tag-post{background:var(--green-l);color:var(--green)}
.tag-task{background:var(--orange-l);color:var(--orange)}
.tag-exp{background:var(--orange-l);color:var(--orange)}
.tag-ai{background:#ece7f7;color:#6b57a8}

/* form */
.row{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}
.row label{flex:1;min-width:200px;font-size:14px}
label.full{display:block;margin:12px 0;font-size:14px}
input,textarea{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  font-family:inherit;font-size:14px;background:#fffdf8;color:var(--ink);margin-top:4px}
textarea{resize:vertical;line-height:1.65}
input:focus,textarea:focus{outline:2px solid var(--orange);outline-offset:1px}
.row input{width:auto;min-width:64px;display:inline-block}

.btn{background:var(--green);color:#fff;border:0;border-radius:10px;padding:11px 20px;
  font-size:15px;font-family:inherit;cursor:pointer;font-weight:600;transition:.15s}
.btn:hover{filter:brightness(1.07)}
.btn:disabled{background:#bdb5a5;cursor:default}
.btn.big{font-size:16px;padding:13px 26px;margin-top:8px}
.btn.sm{padding:5px 12px;font-size:12.5px;border-radius:7px}
.btn.ghost{background:#fff;color:var(--sub);border:1px solid var(--line)}
.btn.ai{background:#6b57a8;width:100%;margin-top:10px}
.btn.danger{background:#fff;color:var(--red);border:1.5px solid #e09d94}
.btn.danger:hover{background:var(--red-l);border-color:var(--red)}

/* quiz */
.q{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;background:#fffefa}
.qstem{font-size:15px;font-weight:600;margin-bottom:10px;display:flex;gap:8px}
.qno{background:var(--orange);color:#fff;width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;margin-top:2px}
.opts{display:flex;flex-direction:column;gap:7px}
.opt{display:flex;gap:9px;align-items:flex-start;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:9px 12px;font-size:14px;cursor:pointer;font-family:inherit;color:var(--ink)}
.opt:hover{border-color:var(--orange)}
.opt.sel{background:var(--orange-l);border-color:var(--orange);font-weight:600}
.opt .ok{background:#efe8db;color:var(--sub);width:20px;height:20px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;margin-top:1px}
.opt.sel .ok{background:var(--orange);color:#fff}

.steps{margin:10px 0 14px;padding-left:20px;font-size:14px;color:var(--sub)}
.steps li{margin-bottom:5px}

/* ai card */
.aicard{border:1px dashed #b9aede;border-radius:12px;padding:14px;background:#faf8ff;margin:12px 0}
.aicard-h{display:flex;gap:10px;align-items:center}
.aiicon{font-size:26px}
.aititle{font-weight:600;font-size:15px}
.aistage{font-size:12px;color:#8b7ba8}
.aistatus{font-size:13px;margin-top:8px;min-height:20px;line-height:1.5;display:block;width:100%}
.aistatus.loading{color:var(--sub);width:100%;display:block}
.aistatus.ok, .aistatus.st-ok{color:var(--green);width:100%;height:auto;border-radius:0;display:block}
.aistatus.fb, .aistatus.st-fb{color:var(--orange);width:100%;height:auto;border-radius:0;display:block}

/* claim */
.claim{background:var(--red-l);border-left:4px solid var(--red);border-radius:9px;padding:14px;margin:12px 0}
.claimtxt{font-size:16px;font-weight:600;color:#8f3529}
.claimfrom{font-size:12.5px;color:#a8705f;margin-top:6px}
.verdicts{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.vd{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:14px;
  cursor:pointer;font-family:inherit;color:var(--ink)}
.vd:hover{border-color:var(--orange)}
.vd.sel{background:var(--green-l);border-color:var(--green);font-weight:600}

/* nav */
.nav{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.navtip{font-size:12.5px;color:#9a8b74}

/* done */
.card.done{text-align:center}
.big-emoji{font-size:52px;margin-bottom:6px}
.sumbox{background:#fffefa;border:1px solid var(--line);border-radius:11px;padding:12px;margin:14px 0;text-align:left}
.si{display:flex;justify-content:space-between;padding:6px 2px;border-bottom:1px dashed var(--line);font-size:14px}
.si:last-child{border-bottom:0}
.si span{color:var(--sub)}

.step{display:none}
.step.on{display:block;animation:fade .3s}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ===== 教师端 ===== */
.gate{max-width:420px;margin:60px auto;text-align:center}
.gate input{margin-bottom:12px}
.cards{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.cards.sm{margin:10px 0}
.kpi{flex:1;min-width:120px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.kpi span{font-size:12.5px;color:var(--sub)}
.kpi b{font-size:26px;color:var(--ink)}
.kpi.hl b{color:var(--green)}
.kpi b.up,.up{color:var(--green)}
.kpi b.down,.down{color:var(--red)}

.qz{border:1px solid var(--line);border-radius:11px;padding:13px;margin-bottom:11px;background:#fffefa}
.qzt{font-size:14px;font-weight:600;display:flex;gap:8px;margin-bottom:9px}
.qzrow{display:flex;gap:16px;flex-wrap:wrap}
.qzside{flex:1;min-width:220px}
.qzl{font-size:13px;color:var(--sub);display:flex;gap:6px;align-items:center}
.qzbar{height:12px;background:#efe8db;border-radius:8px;overflow:hidden;margin-top:4px}
.qzbar i{display:block;height:100%;background:var(--blue);border-radius:8px;transition:.5s}
.qzbar i.g{background:var(--green)}
.qzd{font-size:12px;color:#9a8b74;margin-top:8px}

.expcmp{display:flex;gap:16px;flex-wrap:wrap}
.expbox{flex:1;min-width:240px;background:#fffefa;border:1px solid var(--line);border-radius:11px;padding:14px}
.explab{font-size:13px;color:var(--sub);margin-bottom:8px}
.expbar{height:20px;background:#efe8db;border-radius:10px;overflow:hidden}
.expbar i{display:block;height:100%;background:var(--orange);border-radius:10px;transition:.6s;min-width:2px}
.expbar i.g{background:var(--green)}
.expnum{font-size:14px;margin-top:7px}
.expnum b{font-size:19px}
.expnum span{color:var(--sub);font-size:13px}
.gain{margin-top:14px;padding:12px;background:var(--green-l);border-radius:10px;font-size:14px}
.gain b{font-size:17px}

.vstat{display:flex;flex-direction:column;gap:9px;margin:12px 0}
.vs{display:flex;align-items:center;gap:12px;font-size:14px}
.vs>span{width:120px;flex-shrink:0}
.vs>b{width:40px;text-align:right}
.vs .bar{flex:1;height:14px;background:#efe8db;border-radius:8px;overflow:hidden}
.vs .bar u{display:block;height:100%;background:var(--green);border-radius:8px;transition:.5s}
.vs .bar u.p{background:var(--orange)}
.vs .bar u.w{background:var(--red)}
.reasons{max-height:340px;overflow:auto}
.rs{border-bottom:1px dashed var(--line);padding:8px 0}
.rs b{font-size:13px}
.rs p{margin:3px 0 0;font-size:13.5px;color:#5b4f3d}

.aikeys{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.ak{background:#faf8ff;border:1px solid #ddd4f0;border-radius:9px;padding:8px 12px;font-size:13px}
.ak b{color:#6b57a8}
.stulist{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.st{border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:13px;background:#fffefa;
  display:flex;flex-direction:column;gap:1px}
.st.ok{border-color:var(--green);background:var(--green-l)}
.st span{color:var(--sub);font-size:12px}
.st em{font-style:normal;font-size:12px;color:var(--sub)}
.st.ok em{color:var(--green);font-weight:600}

/* ==== 对齐版新增 ==== */
.rulebox{background:#fff8ec;border:1px solid #ecd8b0;border-left:4px solid var(--orange);
  border-radius:9px;padding:12px 14px;font-size:14px;margin:10px 0;line-height:1.75}
.rulebox.g{background:var(--green-l);border-color:#bcd9c1;border-left-color:var(--green)}
.rulebox b{color:#8a5a2a}
.rulebox.g b{color:var(--green)}

.starq{background:#faf8ff;border:1px dashed #b9aede;border-radius:11px;padding:13px;margin:12px 0}
.starq-h{font-size:12.5px;font-weight:700;color:#6b57a8;margin-bottom:6px}
.starq p{margin:0 0 8px;font-size:14px}

.checks{display:flex;flex-wrap:wrap;gap:9px;margin:10px 0}
.ck{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:8px 12px;font-size:14px;cursor:pointer}
.ck:hover{border-color:var(--orange)}
.ck input{width:auto;margin:0}

.comprow{margin-top:10px}
.cmp{background:var(--green-l);border-radius:10px;padding:11px 14px;font-size:14.5px;text-align:center}
.cmp b{font-size:18px;color:var(--green)}

.substat{margin-top:8px;font-size:13.5px;color:var(--sub);text-align:center}
.substat b{font-size:15px;color:var(--ink)}
.reasons p{white-space:pre-wrap}

/* ===== 免打字组件 ===== */
.notype{background:var(--blue-l);border:1px dashed #9dbdd6;border-radius:10px;
  padding:9px 13px;font-size:13px;color:var(--blue);margin-bottom:12px;text-align:center}

/* 恢复进度提示条 */
.resume-bar{background:var(--green-l);border:1px solid #b7ddbe;border-radius:10px;
  padding:9px 14px;font-size:13px;color:var(--green);font-weight:600;display:flex;
  align-items:center;justify-content:space-between;margin-bottom:12px;animation:fade .25s}
.rb-reset{background:#fff;border:1px solid #b7ddbe;color:var(--green);border-radius:6px;
  padding:3px 9px;font-size:12px;cursor:pointer;font-family:inherit;font-weight:600;transition:.15s}
.rb-reset:hover{background:#f0f7f1}
.reset-link{display:inline-block;font-size:11.5px;color:#a89a84;margin-left:6px;
  text-decoration:none;cursor:pointer;font-weight:normal}
.reset-link:hover{color:var(--orange);text-decoration:underline}

/* 数字点选 0-10 */
.nwrap{display:inline-flex;flex-wrap:wrap;gap:4px;margin:0 4px;vertical-align:middle}
.nbtn{min-width:34px;height:34px;padding:0 6px;border:1px solid var(--line);background:#fff;
  border-radius:8px;font-size:14px;cursor:pointer;font-family:inherit;color:var(--ink);font-weight:600;transition:.15s}
.nbtn:hover{border-color:var(--orange);background:var(--orange-l)}
.nbtn.sel{background:var(--orange);color:#fff;border-color:var(--orange)}

/* 大号数字点选 (环节二贴纸等核心活动) */
.np-lg .nwrap{gap:6px}
.np-lg .nbtn{min-width:44px;height:44px;font-size:18px;font-weight:700;border-radius:10px;border-width:1.5px}
.np-lg .nbtn:hover{transform:translateY(-1px)}
.np-lg .nbtn.sel{box-shadow:0 3px 8px rgba(224,129,58,.35)}

/* 环节二贴圆点大任务卡 */
.mission-box{background:#fff9ed;border:1.5px solid #f0dcad;border-left:5px solid var(--orange);
  border-radius:12px;padding:14px 16px;margin:12px 0 16px;display:flex;align-items:flex-start;gap:12px}
.mb-icon{font-size:32px;line-height:1;flex-shrink:0}
.mb-body{flex:1}
.mb-title{font-size:16.5px;font-weight:800;color:#7d4513;margin-bottom:4px}
.mb-desc{font-size:14px;color:#5a4933;line-height:1.55}

/* ===== 独立问题块卡片 (Question / Task Block Card) ===== */
.head-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 20px;
  margin-bottom:14px;
  box-shadow:0 2px 0 rgba(0,0,0,.03);
}
.head-card h2{font-size:20px;margin:0 0 6px;color:var(--ink)}
.head-card .lead{margin:0;font-size:14px;color:var(--sub)}

.block-card{
  background:#ffffff;
  border:1.5px solid #e7ded0;
  border-radius:14px;
  padding:18px 20px;
  margin-bottom:14px;
  box-shadow:0 3px 8px rgba(61,51,39,.04);
  transition:border-color .15s, box-shadow .15s;
}
.block-card:hover{border-color:#d4c4b2}

.block-hd{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px dashed #ede3d4;
  flex-wrap:wrap;
}
.block-num{
  font-size:12px;
  font-weight:800;
  padding:3px 10px;
  border-radius:20px;
  background:#f0e7d8;
  color:#7d6b54;
  letter-spacing:.5px;
  flex-shrink:0;
}
.block-title{
  font-size:16px;
  font-weight:800;
  color:var(--ink);
  margin:0;
  flex:1;
}

/* 语义色彩强调主题 */
.block-card.theme-rule{
  border-left:5px solid var(--green);
}
.block-card.theme-rule .block-num{
  background:var(--green-l);
  color:var(--green);
}

.block-card.theme-ai{
  border-left:5px solid #6b57a8;
  background:#fdfcff;
}
.block-card.theme-ai .block-num{
  background:#ede7f8;
  color:#6b57a8;
}

.block-card.theme-data{
  border-left:5px solid var(--orange);
}
.block-card.theme-data .block-num{
  background:var(--orange-l);
  color:#a8581e;
}

.block-card.theme-result{
  border-left:5px solid #3b82f6;
  background:#fafcfe;
}
.block-card.theme-result .block-num{
  background:#e6f0fa;
  color:#2563eb;
}

.step-footer{
  margin:18px 0 10px;
}

/* ===== 环节分块与模块化布局 (Subcard Architecture) ===== */
.subcard{
  background:#ffffff;
  border:1.5px solid #e7ded0;
  border-radius:14px;
  padding:16px 18px;
  margin:14px 0;
  box-shadow:0 2px 6px rgba(61,51,39,.03);
  transition:border-color .2s, box-shadow .2s;
}
.subcard:hover{border-color:#d8caba}
.subcard-hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px dashed #ece2d2;
  flex-wrap:wrap;
  gap:8px;
}
.subcard-title{
  font-size:15px;
  font-weight:800;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:8px;
}
.subcard-badge{
  font-size:11.5px;
  font-weight:700;
  padding:3px 9px;
  border-radius:20px;
  background:#f0e9db;
  color:#7a6a55;
}
.subcard-badge.orange{background:var(--orange-l);color:#a8581e}
.subcard-badge.green{background:var(--green-l);color:var(--green)}
.subcard-badge.purple{background:#f1edfb;color:#6b57a8}

/* 主题分块 */
.subcard.rule-subcard{
  background:#f7faf8;
  border-color:#cce4d2;
  border-left:5px solid var(--green);
}
.subcard.ai-subcard{
  background:#fbf9ff;
  border-color:#dcd3f5;
  border-left:5px solid #6b57a8;
}
.subcard.data-subcard{
  background:#ffffff;
  border-color:#e5dac9;
  border-left:5px solid var(--orange);
}
.subcard.result-subcard{
  background:#f4faf6;
  border-color:#bfe5c7;
  border-left:5px solid #3b82f6;
}

/* 实验录入网格卡片 (Step 3 & Step 5) */
.exp-input-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:8px;
}
.exp-input-card{
  background:#fffefa;
  border:1px solid #ebdcc5;
  border-radius:12px;
  padding:12px 14px;
  transition:all .2s;
}
.exp-input-card:hover{border-color:var(--orange)}
.exp-input-card.highlight{
  background:#fdfaf4;
  border:1.5px solid #e28a47;
  box-shadow:0 2px 8px rgba(224,129,58,.08);
}
.eic-hd{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.eic-icon{font-size:22px;line-height:1}
.eic-meta{flex:1}
.eic-name{font-size:14.5px;font-weight:700;color:var(--ink)}
.eic-hint{font-size:12px;color:var(--sub);margin-top:1px}
.eic-body{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding-left:32px;
}
.eic-unit{font-size:14px;font-weight:600;color:var(--sub)}

/* 成效对比看板 (Cmp Banner) */
.cmp-banner{
  background:#ffffff;
  border:1.5px solid #a3d9b1;
  border-radius:12px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-around;
  flex-wrap:wrap;
  gap:12px;
  box-shadow:0 3px 8px rgba(46,125,50,.06);
}
.cmp-col{display:flex;flex-direction:column;align-items:center;gap:4px}
.cmp-lab{font-size:12.5px;color:var(--sub)}
.cmp-val{font-size:17px;font-weight:800}
.cmp-val.v1{color:#8c7353}
.cmp-val.v2{color:var(--green)}
.cmp-arrow{font-size:20px;color:#8fb998;font-weight:bold}
.cmp-gain{
  font-size:13.5px;
  font-weight:800;
  padding:5px 12px;
  border-radius:20px;
  background:#eaf7ed;
  color:#2e7d32;
  border:1px solid #b7e4c7;
}

.gesture-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px;margin:14px 0 18px}
.gesture-card{background:#fff;border:2px solid #e5d9c2;border-radius:14px;padding:16px 18px;
  box-shadow:0 3px 6px rgba(0,0,0,.03);transition:.2s}
.gesture-card:hover{border-color:var(--orange)}
.gc-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;border-bottom:1px dashed #efe4ce;padding-bottom:10px}
.gc-emoji{font-size:38px;line-height:1}
.gc-info{flex:1}
.gc-title{font-size:18px;font-weight:800;color:var(--ink)}
.gc-sub{font-size:13px;color:var(--sub);margin-top:2px}
.gc-pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gc-unit{font-size:16px;font-weight:700;color:var(--sub)}

/* 步进器 */
.stepper{display:inline-flex;align-items:center;gap:8px;margin:0 4px;vertical-align:middle}
.sbtn{width:36px;height:36px;border:1px solid var(--line);background:#fff;border-radius:9px;
  font-size:19px;cursor:pointer;color:var(--ink);line-height:1;font-family:inherit}
.sbtn:hover{border-color:var(--orange);background:var(--orange-l)}
.sval{min-width:44px;text-align:center;font-size:18px;font-weight:700;color:var(--orange)}

/* 短语点选 */
.ph{margin:14px 0 8px}
.pht{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px}
.phopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px}
.phbtn{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;
  font-size:14px;cursor:pointer;font-family:inherit;color:var(--ink);text-align:left;line-height:1.5;transition:.15s}
.phbtn:hover{border-color:var(--green);background:#f2f8f3}
.phbtn.sel{background:var(--green-l);border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.phbtn.sm{min-width:46px;padding:8px 6px;text-align:center;font-weight:600}

/* 双层卡片式短语按钮 */
.phbtn.card-btn{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.ph-tag{font-size:14.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:4px}
.ph-tag::before{content:"✦";font-size:10px;color:var(--green)}
.ph-desc{font-size:12.5px;color:var(--sub);line-height:1.35}
.phbtn.sel .ph-tag{color:var(--green)}
.phbtn.sel .ph-desc{color:#496d50}

/* 可折叠补充文本框 */
.extra-toggle{margin:6px 0 10px;text-align:left}
.et-link{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:#8f7f68;
  cursor:pointer;padding:4px 8px;border-radius:6px;background:#f6f1e6;border:1px dashed #d5c8b2;transition:.15s}
.et-link:hover{background:#ede5d5;color:var(--ink)}
.extra-box{margin-top:4px;animation:fade .2s}

/* 实验流程徽章条 */
.step-flow{display:flex;align-items:center;gap:6px;margin:10px 0 14px;flex-wrap:wrap}
.sf-item{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);
  padding:5px 11px;border-radius:20px;font-size:13px;font-weight:600;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.02)}
.sf-num{background:var(--orange-l);color:var(--orange);width:18px;height:18px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.sf-arrow{color:#bfae95;font-size:12px;user-select:none}

/* 数据带入胶囊 */
.data-badge{background:#f4efe4;border:1px solid #dfd3be;border-radius:10px;
  padding:10px 14px;margin:10px 0 14px;font-size:13.5px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.data-badge b{color:var(--orange);font-size:16px}
.data-badge .db-vals{color:var(--ink)}

textarea[readonly]{background:#f6f4ee;color:#5b4f3d}

/* 班级 / 小组 点选：网格排列 */
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:7px;margin-top:6px}
.picks .phbtn{width:100%;min-width:0;padding:9px 4px;text-align:center}
#pk_group{grid-template-columns:repeat(auto-fill,minmax(46px,1fr))}

/* ===== 学生端：左栏环节导航 + 正文 ===== */
.app{display:flex;gap:18px;align-items:flex-start;max-width:1010px;margin:0 auto;padding:16px 16px 60px}
.main{flex:1;min-width:0;max-width:770px}

.side{width:206px;flex-shrink:0;position:sticky;top:16px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:13px 11px;box-shadow:0 2px 0 rgba(0,0,0,.03)}
.side-hd{border-bottom:1px dashed var(--line);padding-bottom:9px;margin-bottom:6px}
.side-t{font-size:15px;font-weight:700}
.side-sub{font-size:12px;color:var(--sub);margin-top:2px}
.nav-list{list-style:none;margin:0;padding:0}
.ng{font-size:11px;font-weight:700;color:#a4977f;letter-spacing:1px;margin:9px 0 3px;padding-left:7px}
.ni{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;
  font-size:13.5px;color:var(--sub);margin-bottom:2px;transition:.15s}
.nico{font-size:15px;width:19px;text-align:center;flex-shrink:0}
.nlab{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nst{font-size:12px;color:var(--green);font-weight:700}
.ni.can{cursor:pointer}
.ni.can:hover{background:var(--orange-l);color:var(--ink)}
.ni.done{color:var(--ink);background:#f2f7f3}
.ni.cur{background:var(--green);color:#fff;font-weight:700;box-shadow:0 2px 6px rgba(79,138,91,.3)}
.ni.cur .nst{color:#fff}
.ni.lock{opacity:.4}
.side-ft{margin-top:10px;border-top:1px dashed var(--line);padding-top:9px;
  font-size:12.5px;color:var(--sub);text-align:center;font-weight:600}

/* 本轮规则：大字版 */
.rb-big{font-size:17px;font-weight:800;color:#8a5a2a;letter-spacing:.5px}
.rulebox.g .rb-big{color:var(--green)}
.rb-sub{font-size:13px;color:var(--sub);margin-top:4px}
.rulebox.g .rb-sub{color:#5c7a62}
.main .steps{color:#5b4f3d;margin:10px 0 14px}

/* AI 回答气泡与徽章排版 */
.aibubble{
  background:#fff;
  border:1.5px solid #dcd3f5;
  border-radius:14px;
  padding:14px 16px;
  margin-top:10px;
  box-shadow:0 3px 10px rgba(107,87,168,.05);
  transition:border-color .2s, box-shadow .2s;
}
.aibubble.is-ai{
  border-color:#b7e1cd;
  box-shadow:0 3px 12px rgba(46,125,50,.07);
}
.aibubble.is-fb{
  border-color:#fed7aa;
  box-shadow:0 3px 12px rgba(217,119,6,.07);
}
.aibubble.empty{
  background:#faf8ff;
  border:1.5px dashed #cfc5ea;
  color:#9a8eb7;
  box-shadow:none;
  padding:14px 16px;
}
.aibubble.loading{
  background:#faf8ff;
  border:1.5px dashed #a797d6;
  color:#6b57a8;
}
.aibubble-hd{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid #f0ecf9;
  flex-wrap:wrap;
  gap:6px;
}
.ai-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:700;
  padding:4px 11px;
  border-radius:20px;
  line-height:1.4;
}
.ai-badge.ai{
  background:#e8f5e9;
  color:#2e7d32;
  border:1px solid #c8e6c9;
}
.ai-badge.fb{
  background:#fff3e0;
  color:#d97706;
  border:1px solid #ffe082;
}
.ai-badge-sub{
  font-size:12px;
  color:#8e7fb0;
  font-weight:500;
}
.aibubble-txt{
  font-size:14.5px;
  line-height:1.8;
  color:#352b20;
  word-break:break-word;
}
.aibubble-txt strong{
  color:#1b5e20;
  font-weight:700;
}
.aibubble-empty-tip{
  font-size:13.5px;
  color:#9587b3;
  display:flex;
  align-items:center;
  gap:6px;
}
.aibubble-loading-box{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:600;
  color:#6b57a8;
  padding:4px 0;
}
.ai-spin{
  display:inline-block;
  font-size:20px;
  animation:aiPulse 1.2s ease-in-out infinite alternate;
}
@keyframes aiPulse{
  0%{transform:scale(0.92) rotate(-5deg);opacity:0.7}
  100%{transform:scale(1.1) rotate(5deg);opacity:1}
}
.aistatus-hint{
  font-size:12.5px;
  color:#6b57a8;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:4px;
}

/* 教师端：更宽的主区 + 分区定位 */
.app.tcha{max-width:1300px}
.main.wide{max-width:none}
.main > [id^="sec-"]{scroll-margin-top:14px}
.tch-side .nst{font-size:11.5px;font-weight:700}
.tch-side .nlab{font-size:13px}

/* 窄屏：导航变成顶部横向条 */
@media (max-width:880px){
  .app{flex-direction:column;gap:10px;padding:12px 12px 50px}
  .main{max-width:none;width:100%}
  .side{position:static;width:100%;display:block;padding:10px}
  .side-hd,.side-ft{display:none}
  .tch-side{position:sticky;top:0;z-index:5}
  .nav-list{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
  .ng{display:none}
  .ni{flex-direction:row;gap:5px;padding:7px 10px;margin:0;white-space:nowrap;
    border:1px solid var(--line);border-radius:20px;font-size:12.5px}
  .ni.lock{opacity:.35}
  .nico{width:auto}
  .nst{display:none}
}

/* ========== 页面助手（小向导雷小锋）========== */
#mascotWrap{
  position:fixed; z-index:999;
  display:flex; flex-direction:column;
  align-items:flex-end; /* 默认靠右对齐 */
  gap:10px; user-select:none;
  /* 初始位置在右下角 */
  right:20px; bottom:24px;
}
/* 靠左吸附时，内容向右内部展开 */
#mascotWrap.dock-left{
  align-items:flex-start;
  left:20px;
  right:auto;
}
/* 靠右吸附时，内容向左内部展开 */
#mascotWrap.dock-right{
  align-items:flex-end;
  right:20px;
  left:auto;
}
/* 拖动时禁止选中，鼠标光标抓取 */
#mascotWrap.dragging{
  user-select:none;
}
#mascotWrap.dragging #mascotBtn{
  cursor:grabbing !important;
  transform:scale(1.04);
}

/* 人物头像按钮 */
#mascotBtn{
  width:76px; height:130px; border:none; background:transparent;
  padding:0; cursor:grab; position:relative; flex-shrink:0;
  filter:drop-shadow(0 4px 12px rgba(61,51,39,.18));
  transition:transform .15s, filter .15s;
  touch-action:none; /* 关键：阻止移动端/触摸屏默认滚动，保障顺畅拖动 */
  -webkit-touch-callout:none;
  outline:none;
}
#mascotBtn:hover{ transform:scale(1.06); filter:drop-shadow(0 8px 18px rgba(61,51,39,.25)); }
#mascotBtn:active{ transform:scale(0.97); }

/* 图片精灵：整图 1440×620，4格，每格宽360×高620
   state: idle(0) / thinking(1) / talking(2) / happy(3) */
#mascotSprite{
  width:360px; height:620px;
  background:url('/static/mascot_front_sheet.png') no-repeat;
  background-size:1440px 620px;
  background-position:0 0;          /* idle: 第1格 */
  transform-origin:left top;
  transform:scale(0.2111);          /* 76 / 360 = 0.2111 */
  position:absolute; top:0; left:0; pointer-events:none;
  transition:background-position .12s step-end;
}
#mascotSprite.st-thinking{ background-position:-360px 0; }
#mascotSprite.st-talking  { background-position:-720px 0; }
#mascotSprite.st-happy    { background-position:-1080px 0; }

/* 呼吸小动画 */
@keyframes mascot-idle{
  0%,100%{ transform:scale(0.2111) translateY(0); }
  50%     { transform:scale(0.2111) translateY(-6px); }
}
#mascotSprite:not(.talking-anim){ animation:mascot-idle 3s ease-in-out infinite; }

/* 对话气泡（打开时） */
#mascotPanel{
  display:none;
  width:330px;
  background:var(--card);
  border:2px solid var(--orange);
  border-radius:18px 18px 4px 18px;
  box-shadow:0 8px 32px rgba(0,0,0,.13);
  overflow:hidden;
  flex-direction:column;
  max-height:70vh;
}
#mascotWrap.dock-left #mascotPanel{
  border-radius:18px 18px 18px 4px;
}
#mascotWrap.dock-right #mascotPanel{
  border-radius:18px 18px 4px 18px;
}
#mascotPanel.open{ display:flex; }

/* 面板头 */
.mcp-head{
  background:linear-gradient(135deg,var(--orange),#d4962a);
  color:#fff; padding:11px 14px; display:flex;
  align-items:center; gap:10px; font-size:14px; font-weight:700;
}
.mcp-avatar-wrap{
  position:relative; display:inline-block; flex-shrink:0;
}
.mcp-avatar{
  width:36px; height:36px; object-fit:contain; object-position:top center;
  border-radius:50%; background:#fff; padding:2px;
  box-shadow:0 2px 6px rgba(0,0,0,.15); display:block;
}
.mcp-status-dot{
  position:absolute; bottom:0; right:0;
  width:10px; height:10px; border-radius:50%;
  border:2px solid #fff;
  transition:background-color .2s, box-shadow .2s;
}
.mcp-status-dot.st-online{
  background:#22c55e;
  box-shadow:0 0 6px rgba(34,197,94,0.7);
}
.mcp-status-dot.st-thinking{
  background:#f59e0b;
  box-shadow:0 0 6px rgba(245,158,11,0.7);
}
.mcp-status-dot.st-talking{
  background:#3b82f6;
  box-shadow:0 0 6px rgba(59,130,246,0.7);
}
.mcp-head-info{ flex:1; min-width:0; }
.mcp-head-title{ display:flex; align-items:center; gap:6px; font-size:14px; font-weight:700; }
.mcp-head-sub{ font-size:11.5px; opacity:.92; font-weight:400; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mcp-online-badge{
  display:inline-flex; align-items:center; gap:4px;
  padding:1px 7px; border-radius:10px;
  font-size:11px; font-weight:600; line-height:1.4;
}
.mcp-online-badge.st-online{
  background:rgba(34,197,94,0.25);
  color:#ecfdf5; border:1px solid rgba(255,255,255,0.45);
}
.mcp-online-badge.st-thinking{
  background:rgba(245,158,11,0.3);
  color:#fffbeb; border:1px solid rgba(255,255,255,0.45);
}
.mcp-online-badge.st-talking{
  background:rgba(59,130,246,0.3);
  color:#eff6ff; border:1px solid rgba(255,255,255,0.45);
}
.status-pulse{
  width:6px; height:6px; border-radius:50%;
  background:currentColor; display:inline-block;
  animation:status-pulse-anim 1.4s infinite;
}
@keyframes status-pulse-anim{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.35; transform:scale(0.75); }
}
.mcp-close{
  margin-left:auto; background:rgba(255,255,255,.25);
  border:none; border-radius:50%; width:26px; height:26px;
  color:#fff; font-size:16px; cursor:pointer; line-height:26px;
  padding:0; flex-shrink:0;
}
.mcp-close:hover{ background:rgba(255,255,255,.4); }

/* 对话历史 */
.mcp-msgs{
  flex:1; overflow-y:auto; padding:12px 12px 4px;
  display:flex; flex-direction:column; gap:10px;
  scroll-behavior:smooth;
}
/* 消息气泡 */
.msg-row{ display:flex; gap:8px; align-items:flex-end; }
.msg-row.user{ flex-direction:row-reverse; }
.msg-bubble{
  max-width:78%; padding:9px 13px; border-radius:16px;
  font-size:13.5px; line-height:1.6; word-break:break-all;
}
.msg-row.ai   .msg-bubble{ background:var(--orange-l); border-bottom-left-radius:4px; }
.msg-row.user .msg-bubble{ background:var(--green-l);  color:var(--green); border-bottom-right-radius:4px; }
.msg-source{
  font-size:10px; color:var(--sub); padding:0 4px;
  align-self:flex-end; white-space:nowrap;
}
/* 快捷问题列表 */
.mcp-quick{
  padding:8px 10px 10px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:5px;
}
.mcp-quick-title{ font-size:11px; color:var(--sub); padding:2px 2px 4px; }
.mcp-qbtn{
  background:var(--orange-l); border:1px solid #f0c988;
  border-radius:10px; padding:6px 10px; font-size:12.5px;
  color:var(--ink); text-align:left; cursor:pointer; width:100%;
  transition:background .12s;
}
.mcp-qbtn:hover{ background:#fde5b8; }

/* 输入区 */
.mcp-input-row{
  padding:10px 12px 12px; border-top:1px solid var(--line);
  background:#f8fafc; display:flex; gap:8px; align-items:flex-end;
}
.mcp-input{
  flex:1; border:1.5px solid #cbd5e1; border-radius:12px;
  padding:10px 12px; font-size:13.5px; resize:none; outline:none;
  font-family:inherit; background:#fff; line-height:1.5;
  min-height:56px; max-height:110px; overflow-y:auto;
  transition:border-color .15s, box-shadow .15s;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.03);
}
.mcp-input:focus{
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(245,158,11,0.15);
}
.mcp-send{
  background:var(--orange); border:none; border-radius:12px;
  color:#fff; font-size:14.5px; padding:0 16px; height:56px;
  cursor:pointer; flex-shrink:0; transition:all .15s;
  font-weight:700; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(245,158,11,0.25);
}
.mcp-send:hover{ background:#d4962a; transform:translateY(-1px); }
.mcp-send:disabled{ background:#cbd5e1; cursor:default; box-shadow:none; transform:none; }

/* 思考中动画文字 */
.mcp-thinking{
  font-size:13px; color:var(--sub); font-style:italic;
  padding:4px 2px;
}
.mcp-thinking::after{
  content:''; display:inline-block;
  animation:dots 1.2s steps(4,end) infinite;
}
@keyframes dots{
  0%  { content:''; }
  25% { content:'.'; }
  50% { content:'..'; }
  75% { content:'...'; }
}

/* 气泡提示（未打开时的招呼语） */
#mascotHint{
  background:#fff; border:1.5px solid var(--orange);
  border-radius:12px 12px 4px 12px;
  padding:8px 12px; font-size:13px; color:var(--ink);
  box-shadow:0 3px 10px rgba(0,0,0,.1);
  max-width:180px; line-height:1.5;
  animation:hint-pop .35s ease-out;
  position:relative;
}
#mascotWrap.dock-left #mascotHint{
  border-radius:12px 12px 12px 4px;
}
#mascotWrap.dock-right #mascotHint{
  border-radius:12px 12px 4px 12px;
}
@keyframes hint-pop{
  from{ opacity:0; transform:scale(.8) translateY(8px); }
  to  { opacity:1; transform:scale(1) translateY(0); }
}


/* ========== 教师端：现代化教学数据驾驶舱与自适应网格 ========== */
.tch-mode-tabs{
  display:flex; gap:10px; margin-bottom:18px;
  background:#e2e8f0; padding:5px; border-radius:12px;
}
.tch-tab-btn{
  flex:1; border:none; padding:11px 18px; font-size:15px; font-weight:700;
  border-radius:9px; cursor:pointer; background:transparent; color:#64748b;
  transition:all .15s; display:flex; align-items:center; justify-content:center; gap:8px;
}
.tch-tab-btn.active{
  background:#fff; color:#0f172a; box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.tch-tab-btn:hover:not(.active){ background:rgba(255,255,255,0.5); }

/* 顶部 KPI 驾驶舱 */
.kpi-cockpit{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:18px;
}
@media (max-width:960px){
  .kpi-cockpit{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:540px){
  .kpi-cockpit{ grid-template-columns:1fr; }
}
.kpi-card{
  background:#fff; border:1px solid #cbd5e1; border-radius:14px;
  padding:14px 16px; position:relative; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.03); transition:transform .15s, box-shadow .15s;
}
.kpi-card:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,0.06); }
.kpi-card.kpi-primary{ border-top:4px solid var(--orange); }
.kpi-card.kpi-success{ border-top:4px solid var(--green); }
.kpi-card.kpi-blue{ border-top:4px solid #3b82f6; }
.kpi-card.kpi-purple{ border-top:4px solid #8b5cf6; }
.kpi-card-title{ font-size:13px; color:#64748b; font-weight:600; display:flex; justify-content:space-between; align-items:center; }
.kpi-card-val{ font-size:27px; font-weight:800; color:#0f172a; margin-top:6px; line-height:1.2; letter-spacing:-.5px; }
.kpi-card-sub{ font-size:12px; color:#94a3b8; margin-top:4px; }

/* 2列响应式自适应网格 */
.tch-dashboard-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start;
  transition:all .2s ease;
}
.tch-dashboard-grid.focused-single{
  grid-template-columns:1fr;
}
@media (max-width:1080px){
  .tch-dashboard-grid{ grid-template-columns:1fr; }
}

/* 方案B：课堂时序步骤切换条 */
.tch-stage-stepper{
  background:#ffffff; border:1px solid #cbd5e1; border-radius:12px;
  padding:10px 14px; margin-bottom:16px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  box-shadow:0 2px 6px rgba(0,0,0,0.02);
}
.stepper-label{ display:flex; align-items:center; gap:8px; }
.stepper-badge{
  font-size:12px; font-weight:700; color:#0369a1; background:#e0f2fe;
  padding:3px 9px; border-radius:6px; border:1px solid #bae6fd;
}
.stepper-hint{ font-size:12.5px; color:#64748b; }
.stepper-btns{ display:flex; gap:6px; flex-wrap:wrap; }
.stepper-btn{
  background:#f8fafc; border:1px solid #cbd5e1; border-radius:8px;
  padding:7px 12px; font-size:13.5px; font-weight:600; color:#334155;
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  transition:all .15s ease;
}
.stepper-btn:hover{ background:#f1f5f9; border-color:#94a3b8; color:#0f172a; }
.stepper-btn.active{
  background:#0284c7; border-color:#0284c7; color:#ffffff;
  box-shadow:0 2px 8px rgba(2,132,199,0.35);
}
.stepper-btn.active .s-icon{ filter:drop-shadow(0 1px 2px rgba(0,0,0,0.2)); }

/* 聚焦模式下的卡片强化与分栏 */
.tch-stage-card{
  position:relative;
}
.tch-card-header{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;
}
.tch-back-to-all{
  display:none; font-size:12px; padding:4px 10px; border-radius:6px;
}
.focused-single .tch-back-to-all{
  display:inline-flex; align-items:center; gap:4px;
}
.focused-single .tch-stage-card{
  box-shadow:0 6px 20px rgba(0,0,0,0.06);
  border-color:#93c5fd;
}

/* 单元卡片内部分栏容器 */
.stage-body-split{
  display:flex; flex-direction:column; gap:16px;
}
@media (min-width:920px){
  .focused-single .stage-body-split{
    display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch;
  }
  .focused-single .stage-body-split > div:first-child{
    padding-right:16px; border-right:1px solid #f1f5f9;
  }
}

/* 单元卡片内嵌美化 */
.tch-block-tag{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:6px; font-size:11.5px; font-weight:700;
  margin-bottom:8px;
}
.tch-block-tag.t-1{ background:#e0f2fe; color:#0369a1; }
.tch-block-tag.t-2{ background:#fef3c7; color:#92400e; }
.tch-block-tag.t-3{ background:#ecfdf5; color:#065f46; }
.tch-block-tag.t-4{ background:#f3e8ff; color:#6b21a8; }

/* 雷小锋动态问答流 */
.ai-stream-list{
  display:flex; flex-direction:column; gap:10px; max-height:360px; overflow-y:auto; padding-right:4px;
}
.ai-stream-item{
  background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:10px 12px; font-size:13px;
  line-height:1.5; transition:border-color .15s;
}
.ai-stream-item:hover{ border-color:#cbd5e1; background:#f1f5f9; }
.ai-stream-meta{ display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; font-size:11.5px; }
.ai-stream-who{ font-weight:700; color:#1e293b; display:flex; align-items:center; gap:4px; }
.ai-stream-time{ color:#94a3b8; }
.ai-stream-q{ color:#0369a1; background:#e0f2fe; padding:4px 8px; border-radius:6px; font-weight:600; margin-bottom:5px; display:inline-block; }
.ai-stream-a{ color:#334155; font-size:12.5px; line-height:1.55; }

/* 后测自适应推题分档徽章 */
.tier-badges{ display:flex; gap:8px; margin-top:8px; }
.tier-badge{ flex:1; text-align:center; padding:8px 6px; border-radius:8px; border:1px solid #e2e8f0; background:#f8fafc; }
.tier-badge b{ display:block; font-size:18px; color:#0f172a; margin-top:2px; font-weight:800; }

/* 班级视图筛选栏（整体概览 / 单班级细看） */
.tch-class-bar{
  background:#ffffff; border:1px solid #cbd5e1; border-radius:12px;
  padding:10px 14px; margin-bottom:14px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  box-shadow:0 2px 6px rgba(0,0,0,0.02);
}
.class-bar-hd{ display:flex; align-items:center; gap:8px; }
.class-bar-badge{
  font-size:12px; font-weight:700; color:#0f766e; background:#ccfbf1;
  padding:3px 9px; border-radius:6px; border:1px solid #99f6e4;
}
.class-bar-title{ font-size:13px; font-weight:700; color:#334155; }
.class-pills{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.class-pill{
  background:#f8fafc; border:1px solid #cbd5e1; border-radius:8px;
  padding:6px 12px; font-size:13px; font-weight:600; color:#334155;
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  transition:all .15s ease;
}
.class-pill:hover{ background:#f1f5f9; border-color:#94a3b8; color:#0f172a; }
.class-pill.active{
  background:#0d9488; border-color:#0d9488; color:#ffffff;
  box-shadow:0 2px 8px rgba(13,148,136,0.3);
}
.class-pill .c-badge{
  font-size:11px; font-weight:700; padding:1px 6px; border-radius:10px;
  background:#e2e8f0; color:#475569; margin-left:2px;
}
.class-pill.active .c-badge{
  background:rgba(255,255,255,0.25); color:#ffffff;
}
.class-bar-status{ font-size:12.5px; color:#64748b; }
.class-bar-status b{ color:#0f766e; }

/* 选择题选项具体文字与正答高亮呈现 */
.qz-options-list{
  display:flex; flex-direction:column; gap:6px; margin-top:8px;
}
.qz-opt-row{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
  padding:7px 10px; border-radius:8px; background:#f8fafc; border:1px solid #e2e8f0;
  font-size:12.5px; line-height:1.45; transition:background .15s;
}
.qz-opt-row.is-correct-opt{
  background:#f0fdf4; border-color:#86efac;
}
.qz-opt-left{
  display:flex; align-items:center; gap:6px; flex:1; min-width:200px;
}
.qz-opt-letter{
  font-weight:800; color:#475569; width:18px;
}
.is-correct-opt .qz-opt-letter{
  color:#15803d;
}
.qz-opt-text{
  color:#1e293b; font-weight:500;
}
.is-correct-opt .qz-opt-text{
  color:#14532d; font-weight:700;
}
.qz-opt-badge{
  font-size:11px; font-weight:700; color:#15803d; background:#dcfce7;
  padding:1px 6px; border-radius:4px; border:1px solid #bbf7d0; white-space:nowrap;
}
.qz-opt-right{
  display:flex; align-items:center; gap:8px; min-width:140px; justify-content:flex-end;
}
.qz-opt-num{
  font-size:11.5px; font-weight:700; color:#64748b; white-space:nowrap;
}
.is-correct-opt .qz-opt-num{
  color:#166534;
}
.qz-opt-bar-wrap{
  width:60px; height:6px; background:#e2e8f0; border-radius:3px; overflow:hidden;
}
.qz-opt-bar-fill{
  height:100%; border-radius:3px; transition:width .3s ease;
}
.qz-opt-bar-fill.fill-correct{
  background:#22c55e;
}
.qz-opt-bar-fill.fill-other{
  background:#94a3b8;
}