/* 每日交作业 · 在线批改 —— 纸面红笔风格 */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root {
  --red: #c62828; --red-dark: #a51c1c; --red-bg: #fdf3f2; --red-line: #e8b7b3;
  --ink: #2d2a26; --grey: #8a857e; --paper: #faf7f1; --card: #ffffff; --gold: #b8860b;
}
body {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--paper); color: var(--ink); line-height: 1.65;
  background-image: radial-gradient(#e8e2d5 0.8px, transparent 0.8px); background-size: 22px 22px;
}
#app { max-width: 720px; margin: 0 auto; padding: 14px 14px 60px; }

/* 顶栏 */
.topbar {
  display: flex; align-items: center; gap: 10px; padding: 12px 4px 16px;
}
.topbar .logo {
  width: 38px; height: 38px; border-radius: 10px; background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700;
  box-shadow: 0 3px 8px rgba(198,40,40,.35);
}
.topbar h1 { font-size: 19px; }
.topbar .sub { font-size: 12px; color: var(--grey); }

.card {
  background: var(--card); border: 1px solid #eee4d8; border-radius: 14px;
  padding: 18px 16px; margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(120,90,60,.06);
}
.card h2 { font-size: 17px; margin-bottom: 12px; color: var(--red-dark); }
label.fld { display: block; font-size: 13px; color: var(--grey); margin: 10px 0 4px; }
input[type=text], input[type=password], input[type=tel], select, textarea {
  width: 100%; padding: 11px 12px; font-size: 16px; border: 1.5px solid #e3d9c8;
  border-radius: 10px; background: #fffdf9; color: var(--ink); outline: none;
}
input[type=text]:focus, input[type=password]:focus, input[type=tel]:focus { border-color: var(--red); }
/* ⚠️ 手机上「点输入框、键盘弹不出来」最常见的成因：祖先的 user-select:none 被继承下来
   （iOS / 微信 WebView 里带 user-select:none 的 input 会点不进去），所以这里显式声明 text 兜住；
   touch-action:manipulation 去掉移动端 300ms 点击延迟，点下去反应更快。 */
input, textarea { -webkit-user-select: text; user-select: text; touch-action: manipulation; }
/* 联系电话输入框：加高加大，方便手机上点按和看清 11 位号码 */
input[type=tel] {
  padding: 14px 14px; font-size: 19px; font-weight: 600; letter-spacing: 1px;
  min-height: 52px;
}

/* 密码框：右侧「显示 / 隐藏」小眼睛按钮
   ⚠️ 点一下会把 input 的 type 在 password / text 之间切换，
      所以两种 type 的基础样式必须一致（上面第 33、37 行已同时覆盖 text+password）。
   ⚠️ 2026-10-05（dp）：眼睛从 <button> 换成 <span>（iOS / 微信 WebView 里 button 的点击命中偶发失效），
      所以这里补 display:inline-flex 让 padding 生效，并给 z-index 保证它只压在输入框右侧那一小块上。
   ⚠️ 2026-10-05（dq）：不再用 transform: translateY(-50%) 垂直居中，改成 top/bottom 撑满 ——
      少数安卓 WebView 对带 transform 的元素命中/绘制有偏差，能不用就不用。 */
.pwWrap { position: relative; }
.pwWrap input { padding-right: 66px; }
/* ⚠️⚠️ 2026-10-05（dq）安卓的关键一行：微信安卓内核（X5）会接管 type="password" 去调它自己的
   「安全键盘」，调不起来时键盘就完全不弹（focus 被静默吞掉）。所以安卓上输入框改用 type="text"，
   用 -webkit-text-security 把字符显示成圆点 —— 既绕开拦截，又不会把密码明文露出来。
   data-mask 由 pwInput / pwToggle 控制（点「显示」= 去掉这个属性）。 */
.pwWrap[data-mask="1"] > input { -webkit-text-security: disc; }
.pwEye {
  display: inline-flex; align-items: center; position: absolute; right: 5px; top: 6px; bottom: 6px;
  border: 0; background: transparent; border-radius: 8px; cursor: pointer; z-index: 2;
  color: var(--red); font-family: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: .5px; padding: 0 11px; line-height: 1; white-space: nowrap;
  -webkit-user-select: none; user-select: none;
}
.pwEye:active { background: #f3ece2; }
.pwEye.on { color: var(--grey); }

.btn {
  display: block; width: 100%; border: none; border-radius: 12px; padding: 14px;
  font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 10px; text-align: center;
}
.btn-red { background: var(--red); color: #fff; box-shadow: 0 4px 12px rgba(198,40,40,.3); }
.btn-red:active { background: var(--red-dark); }
.btn-ghost { background: #fff; color: var(--red); border: 1.5px solid var(--red-line); }
.btn:disabled { opacity: .5; }

.notice { font-size: 13px; color: var(--grey); margin-top: 8px; }
.tabs { display: flex; gap: 8px; margin: 4px 0 10px; }
.tab {
  flex: 1; text-align: center; padding: 9px; border-radius: 9px; font-size: 14px;
  background: #f1ebe0; color: #6f6a62; cursor: pointer; border: 1.5px solid transparent;
}
.tab.on { background: var(--red-bg); color: var(--red); border-color: var(--red-line); font-weight: 600; }

/* 答题 */
.qcard { position: relative; }
.qnum {
  display: inline-block; background: var(--red); color: #fff; font-size: 13px; font-weight: 700;
  padding: 2px 10px; border-radius: 8px; margin-bottom: 8px;
}
.qstem { font-size: 16px; margin-bottom: 10px; }
.opt {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin: 8px 0;
  border: 1.5px solid #e8dfcf; border-radius: 10px; cursor: pointer; background: #fffdf9; font-size: 15px;
}
.opt.sel { border-color: var(--red); background: var(--red-bg); }
.opt .k {
  width: 26px; height: 26px; border-radius: 50%; background: #f0e9dc; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 14px; flex: none;
}
.opt.sel .k { background: var(--red); color: #fff; }
.blankInput {
  width: 100%; padding: 12px; font-size: 17px; border: none; border-bottom: 2px dashed #d8b5b0;
  background: transparent; outline: none; font-family: inherit;
}
.blankInput:focus { border-bottom-color: var(--red); }

/* 结果页 · 红笔痕迹 */
.scoreHero { text-align: center; padding: 26px 0 18px; }
.scoreRing {
  width: 150px; height: 150px; margin: 0 auto; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff; border: 6px solid var(--red);
  box-shadow: 0 6px 18px rgba(198,40,40,.25);
}
.scoreRing .n { font-size: 44px; font-weight: 800; color: var(--red); line-height: 1; }
.scoreRing .d { font-size: 13px; color: var(--grey); margin-top: 4px; }
.totalBox {
  margin: 18px auto 0; max-width: 420px; border: 3px solid var(--red); border-radius: 14px;
  padding: 12px 16px; text-align: left; color: var(--red-dark); font-size: 14px;
  transform: rotate(-.6deg); background: #fff;
}
.totalBox b { font-size: 17px; display: block; margin-bottom: 4px; }

.rq { position: relative; }
.rq .mark { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; }
.rq.err { border-color: var(--red-line); }
.tag {
  display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 6px; margin-bottom: 8px;
}
.tag.right { background: #e8f5e9; color: #2e7d32; }
.tag.wrong { background: var(--red-bg); color: var(--red); }
.tag.blank { background: #fff8e1; color: var(--gold); }
.ansLine { font-size: 14px; margin: 6px 0; }
.ansLine .corr { color: var(--red); font-weight: 700; }
.ana {
  margin-top: 10px; background: #fbf6ee; border-left: 4px solid var(--red); border-radius: 0 8px 8px 0;
  padding: 10px 12px; font-size: 14px; color: #5a5348;
}
.ana b { color: var(--red-dark); }
/* 详细解析折叠条：默认收起，点一下展开（学生先看答案、想深究再看解析） */
.anaToggle {
  margin-top: 10px; display: flex; align-items: center; gap: 6px;
  background: #fbf6ee; border: 1px solid #e8dcc8; border-radius: 8px;
  padding: 8px 12px; font-size: 13.5px; color: #8d6e63; cursor: pointer;
  user-select: none;
}
.anaToggle:active { background: #f6efe2; }
.anaToggle .anaArrow { font-size: 11px; line-height: 1; }

.commentBox {
  background: #fffdf7; border: 1.5px dashed var(--red-line); border-radius: 12px;
  padding: 14px 16px; font-size: 14.5px; white-space: pre-wrap;
}
.copyRow { display: flex; gap: 10px; }
.copyRow .btn { margin-top: 8px; }

.pill { display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: 20px; margin-left: 8px; vertical-align: 2px; }
.pill.ok { background: #e8f5e9; color: #2e7d32; }
.pill.pend { background: #fff8e1; color: var(--gold); }
.pill.bad { background: var(--red-bg); color: var(--red); }

.mItem { display: block; }
.mItem .t { font-weight: 600; font-size: 15px; }
.mItem .meta { font-size: 12.5px; color: var(--grey); margin-top: 3px; }

.photoPrev { width: 100%; border-radius: 12px; border: 1.5px solid #e3d9c8; margin-top: 10px; }
/* 老师端照片墙缩略图 */
.thumbCell { background: #fff; border: 1.5px solid #e3d9c8; border-radius: 10px; padding: 5px; cursor: pointer; text-align: center; }
.thumbCell:active { background: #fdf0ef; border-color: #c62828; }
.thumbImgWrap { width: 100%; height: 128px; overflow: hidden; border-radius: 7px; background: #f4efe7; }
.thumbImgWrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbName { font-size: 12px; font-weight: 700; color: #444441; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumbTag { font-size: 11px; line-height: 1.4; }
/* 答案解析页的「预览照」缩略图条 */
.pvGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 8px; }
.pvCell { position: relative; display: block; background: #fff; border: 1.5px solid #e3d9c8; border-radius: 10px; overflow: hidden; text-decoration: none; }
.pvCell:active { border-color: #c62828; }
.pvCell img { width: 100%; height: 150px; object-fit: cover; display: block; }
.pvTag {
  position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px);
  background: rgba(60,54,48,.78); color: #fff; font-size: 11px; line-height: 1.5;
  padding: 1px 7px; border-radius: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pvTagHi { left: auto; right: 6px; background: rgba(198,40,40,.86); }
.big { font-size: 40px; text-align: center; padding: 18px 0 6px; }

table.tk { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tk th, table.tk td { border-bottom: 1px solid #efe7d9; padding: 8px 6px; text-align: left; }
table.tk th { color: var(--grey); font-weight: 600; font-size: 12px; }
.thumb { max-width: 88px; border-radius: 8px; border: 1px solid #e3d9c8; display: block; }

.back { color: var(--red); font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 2px; }
.center { text-align: center; color: var(--grey); font-size: 13px; padding: 14px; }

/* 布置作业：选择题答案字母按钮 */
.lbtn{min-width:44px;height:36px;padding:0 10px;border:1.5px solid #d8cfc2;border-radius:8px;background:#fff;color:#5d4037;font-weight:700;font-size:15px;cursor:pointer;font-family:inherit}
.lbtn.on{background:#c62828;border-color:#c62828;color:#fff}

/* 布置作业：每道题的「题型」——用三个能点的按钮，别用没标签的下拉框（老师反馈找不到） */
.qtypeRow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px}
.qtypeRow .lb{font-size:13px;font-weight:700;color:#6d665e;white-space:nowrap}
.tbtn{padding:6px 12px;border:1.5px solid #d8cfc2;border-radius:8px;background:#fff;color:#5d4037;font-size:13.5px;cursor:pointer;font-family:inherit;white-space:nowrap}
.tbtn.on{background:#c62828;border-color:#c62828;color:#fff;font-weight:700}
.qtypeHint{font-size:12px;color:#8a857e}

/* 班级详情：按作业筛选的胶囊条 */
.asgChip{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border:1.5px solid #d8cfc2;border-radius:16px;background:#fff;color:#5d4037;font-size:13px;cursor:pointer;font-family:inherit;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asgChip b{font-weight:700;color:#8a857e}
.asgChip.on{background:#c62828;border-color:#c62828;color:#fff}
.asgChip.on b{color:#ffd9d9}

/* 页面内弹层：替代原生 confirm / prompt / alert（微信内置浏览器会屏蔽原生弹窗） */
.modalMask{position:fixed;inset:0;background:rgba(30,26,22,.45);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modalBox{background:#fff;border-radius:16px;padding:20px 18px;width:100%;max-width:430px;box-shadow:0 12px 32px rgba(0,0,0,.22);animation:modalIn .16s ease-out;max-height:86vh;overflow:auto}
.modalTitle{font-size:16px;font-weight:700;color:var(--red-dark);margin-bottom:8px}
.modalText{font-size:14.5px;color:var(--ink);line-height:1.75}
/* ⚠️ 用 .mInput / .pwWrap 而不是 input[type=text]：密码框切明文后 type 变 text，
   若按 type 选择器写，会突然多出上边距、输入框往下跳一下。 */
.modalBox > .mInput, .modalBox > .pwWrap{margin-top:12px}
.modalBtns{display:flex;gap:10px;margin-top:18px}
.modalBtns .btn{flex:1;margin:0}
@keyframes modalIn{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.chartWrap{background:#fff;border:1px solid #efe9df;border-radius:12px;padding:8px 10px;margin:8px 0 6px;overflow:hidden}
.chartLegend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:#8a857e;margin:2px 0 4px}

/* 错题本：一次作业一组，组里每行一道错题（学生端多一个「我已订正」按钮） */
.wbRow{padding:10px 0;border-top:1px dashed #e8e0d4}
.wbHead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wbNo{font-size:15px}
.wbState{font-size:12px;padding:2px 10px;border-radius:20px;white-space:nowrap}
.wbState.ok{background:#e8f5e9;color:#2e7d32}
.wbState.bad{background:var(--red-bg);color:var(--red)}
/* 订正按钮顶到最右边：一排题扫过去，位置固定才好连点 */
.wbBtn{width:auto;padding:4px 12px;font-size:12.5px;margin:0 0 0 auto}
/* 「移出错题本」单独一行放右下角：它是「去掉」类操作，别和「✓ 我已订正」挤在一排被误点。
   做成描边灰字（不是红按钮）：移出是可逆的，别吓人。 */
.wbFoot{display:flex;justify-content:flex-end;margin-top:10px}
.wbDel{width:auto;padding:5px 12px;font-size:12.5px;margin:0;color:#8a857e;border-color:#e3dbcf;background:#fff}
.wbDel:disabled{opacity:.6}
.wbStem{font-size:13.5px;color:#5d4037;margin-top:6px;line-height:1.65}
/* AI 从照片誊下来的题干：明说这是机器识别的，别让学生把 OCR 的小错当成老师写错了 */
.wbStemSrc{font-size:12px;color:#8a857e;margin-top:4px;line-height:1.55}
.wbOpts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.wbOpt{font-size:12.5px;background:#fff;border:1px solid #e5dfd5;border-radius:10px;padding:1px 8px;color:#5d4037}
.wbAns{font-size:13.5px;margin-top:8px;line-height:1.95}
.wbLb{display:inline-block;min-width:5.2em;color:#8a857e;font-size:12.5px}
.wbBad{color:var(--red)}
.wbGood{color:#2e7d32}
.wbBar{height:8px;background:#efe7dc;border-radius:4px;overflow:hidden;margin-top:8px}
.wbBar span{display:block;height:100%;background:#2e7d32;border-radius:4px}
/* 拍照作业的「题干」= 那一页原卷的缩略图。
   拍照作业老师基本不填题干（题目印在学生的纸上），所以错题行用这张图当题干。
   ⚠️ 不要用 .pvCell 那套大格子（那是整卷预览，一页占一大块）；这里只是「题目在这一页」的提示，
   所以限制宽度、靠左，别把一屏撑得全是图。 */
.wbPaper{margin-top:8px}
.wbPaper a{display:inline-block;background:#fff;border:1.5px solid #e3d9c8;border-radius:10px;overflow:hidden;text-decoration:none;line-height:0}
.wbPaper a:active{border-color:var(--red)}
.wbPaper img{width:158px;height:118px;object-fit:cover;display:block}
.wbPaperCap{font-size:12.5px;color:#8a857e;margin-top:4px;line-height:1.5}
/* 已经有题干文字的时候，原卷就缩成一行链接，不再占版面 */
.wbPaperLink{margin-top:6px;font-size:12.5px}
.wbPaperLink a{color:#8a6d3b;text-decoration:none;border-bottom:1px dashed #d8c9b4}
.wbPaperLink a:active{color:var(--red);border-bottom-color:var(--red)}
.wbStripHead{font-size:13px;color:#5d4037;margin-top:10px;font-weight:600}
/* 「我的提交记录」里每张卡底部的操作按钮行（本份错题 / 查看答案解析）——
   不用 .copyRow 是因为那个是「主按钮撑满」的排版，这里要两个小号按钮并排靠左 */
.mActs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.mActs .btn{width:auto;padding:6px 12px;font-size:13px;margin:0}
/* 「加入错题本」：答案解析 / 批改结果里每道题底下一个小按钮。
   未加入 = 描边空心（☆），已加入 = 实心暖黄（★），一眼能扫出哪些题已经收了。 */
.pickRow{display:flex;justify-content:flex-end;margin-top:10px}
.pickBtn{width:auto;padding:5px 13px;font-size:13px;margin:0;color:#8a6d3b;border-color:#e0d3bd;background:#fffdf8}
.pickBtn.on{background:#fff3d6;border-color:#e6c982;color:#8a5a00;font-weight:600}
.pickBtn:disabled{opacity:.6}
/* 错题本里区分「做错的题」与「自己挑进来的题」 */
.wbPickTag{font-size:11.5px;background:#fff3d6;color:#8a5a00;border-radius:20px;padding:2px 9px;white-space:nowrap}
.pill.picked{background:#fff3d6;color:#8a5a00}
.chartLegend span{display:inline-flex;align-items:center;gap:5px}
.chartLegend i{display:inline-block;width:10px;height:10px;border-radius:3px}
/* ===== 拍题出解析（学生随手拍一道题问 AI）=====
   结果页要「一眼能读」：题目 → 答案 → 分步解析 → 易错点，四块分开。
   ⚠️ 题干/答案/解析都是 AI 写的纯文本（含 ^ √ ≤ 与换行），一律 white-space:pre-wrap，
      否则模型写的分行公式会被压成一坨看不清。 */
.svRow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px dashed #eee4d8;cursor:pointer}
.svRow:first-of-type{border-top:none}
.svThumb{width:46px;height:46px;object-fit:cover;border-radius:8px;flex:none;border:1px solid #eee4d8}
.svThumbTxt{display:flex;align-items:center;justify-content:center;font-size:22px;background:#faf7f1}
.svRowTx{flex:1;min-width:0}
.svRowT{font-size:13.5px;color:#5d4037;line-height:1.55}
.svArrow{color:#d3c8bb;font-size:22px;flex:none}
.svBlock{margin-top:14px}
.svLbl{font-size:12.5px;color:#8a857e;margin-bottom:5px}
.svStem{font-size:14.5px;color:#2d2a26;line-height:1.85;white-space:pre-wrap;background:#faf7f1;border:1px solid #efe7da;border-radius:10px;padding:10px 12px}
.svBlockAns .svLbl{color:#2e7d32}
.svAns{font-size:16px;font-weight:700;color:#1b5e20;line-height:1.85;white-space:pre-wrap;background:#f2fbf4;border:1px solid #b6e2c2;border-radius:10px;padding:10px 12px}
.svSteps{margin:0;padding-left:22px}
.svSteps li{margin-bottom:10px;line-height:1.85}
.svStepT{font-size:14px;font-weight:700;color:#8a5a00}
.svStepB{font-size:14px;color:#2d2a26;white-space:pre-wrap}
.svBlockTips .svLbl{color:#8d5a00}
.svTips{font-size:13.5px;color:#8d5a00;line-height:1.8;white-space:pre-wrap;background:#fff8e0;border:1px solid #ffd54f;border-radius:10px;padding:9px 12px}

/* ---------- ⭐ 手动框选范围（svCrop 页） ----------
   ⚠️ 两个不能删的点：
     1) .cropBox 的 touch-action:none —— 少了它手指一拖就变成「滚页面」，框画不出来；
     2) .cropBox 的 overflow:hidden —— .cropRect 的 9999px box-shadow 靠它裁在照片范围内，
        框外才会压暗；去掉就会把整页都变黑。 */
.cropWrap{width:100%;display:flex;justify-content:center;align-items:flex-start;margin-top:10px}
.cropBox{position:relative;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:10px;background:#f5f1ea}
.cropBox img{display:block;margin:0}
.cropRect{position:absolute;left:0;top:0;width:0;height:0;box-sizing:border-box;border:2px dashed #e53935;background:rgba(229,57,53,.10);box-shadow:0 0 0 9999px rgba(0,0,0,.34);pointer-events:none}
.cropTag{position:absolute;left:4px;bottom:4px;background:#2e7d32;color:#fff;font-size:11px;line-height:1.5;padding:2px 6px;border-radius:6px}

/* ---------- ⭐ 拍照批改「按题切片」视图（2026-10-16 胡说要的） ----------
   每道题一张小卡片：卷面上那一块被单独裁出来（canvas 裁 marks[].box），配题号 + 对错徽章。
   右侧「整页对照」是原来的整页大图（带红勾红叉），两个页签来回切。
   ⚠️ .slSrc 是「供裁剪的源图」：必须**看得见地加载**（opacity:0 而不是 display:none ——
      微信老版 WebView 对 display:none 的图片会推迟加载，canvas 就裁不出来），但不能占布局、不能挡点击。 */
.slWrap{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.slCard{position:relative;background:#fff;border:1.5px solid #eee4d8;border-radius:12px;padding:12px 12px 10px;box-shadow:0 2px 8px rgba(120,90,60,.06)}
.slCard.err{border-color:#e8b7b3;background:#fffcfb}
.slHead{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.slNo{font-size:15px;color:#2d2a26}
.slPg{font-size:11.5px;color:#8a857e;margin-left:auto}
.slBadge{font-size:12px;font-weight:700;line-height:1;padding:5px 9px;border-radius:20px;white-space:nowrap}
.slBadge.ok{background:#eef9f0;color:#2e7d32;border:1px solid #b6e2c2}
.slBadge.err{background:#fdecea;color:#c62828;border:1px solid #f0c2be}
.slBadge.blank{background:#fff7e0;color:#8d5a00;border:1px solid #ffd54f}
.slCv{display:block;width:100%;height:auto;border-radius:8px;border:1px solid #efe7da;background:#faf7f1}
.slSrc{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.slAns{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.slAns>div{flex:1;min-width:130px;background:#faf7f1;border:1px solid #efe7da;border-radius:9px;padding:7px 10px}
.slAns span{display:block;font-size:11.5px;color:#8a857e;margin-bottom:2px}
.slAns b{font-size:14.5px;line-height:1.5;word-break:break-all}
.slAns .bad{color:#c62828}
.slAns .good{color:#2e7d32}
.slNote{margin-top:8px;font-size:13px;color:#5d4037;line-height:1.7;background:#fffdf9;border-left:3px solid #e0d3bd;border-radius:0 8px 8px 0;padding:7px 10px}

/* 页签：切片 / 整页 */
.pvTabs{display:flex;gap:8px;margin-top:10px}
.pvTab{flex:1;text-align:center;font-size:13.5px;font-weight:600;color:#8a857e;padding:9px 4px;border-radius:10px;background:#f4efe6;border:1px solid #e8dfd0;cursor:pointer;-webkit-user-select:none;user-select:none}
.pvTab.on{color:#fff;background:var(--red);border-color:var(--red);box-shadow:0 2px 6px rgba(198,40,40,.25)}
.pvPane{margin-top:0}