/* 错题消 V1 —— 「纸·墨·红笔」视觉：错题本的世界。
   纸=方格纸白（冷调，非米黄）；墨=蓝黑墨水（正文与主按钮）；
   红笔=批改红（只用在有意义处：待消、强调、印章、焦点圈）；
   消绿=已消。零外部字体/图标/框架，7 页共用。 */
:root{
  --纸:#F4F7FA; --纸白:#FFFFFF; --格线:#E4EBF2;
  --墨:#1E2B3A; --墨2:#5A6B7E;
  /* 设-34(2026-08-20)：红调深一档 #D24040→#B83030，全站同修 AA。
     旧值 #D24040 在纸底(#F4F7FA)上 ≈4.29:1、在红淡底(#FBEDED)上 ≈4.05:1，系统性略欠 AA（小字/常规字重）。
     #B83030：纸底 ≈5.58:1、红淡底 ≈5.27:1、白底红字标签 ≈5.58:1，全过 4.5:1。
     一支红只改一处，链接/待消标签/印章/焦点圈/消息条全部跟着受益。 */
  --红:#B83030; --红淡:#FBEDED;
  --消绿:#2E7D5B; --消绿淡:#E8F3EE;
  --黄:#8A6A12; --黄淡:#F7EFD4;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Courier New",monospace;
  --楷体:"KaiTi","STKaiti","KaiTi SC",serif;
}
/* 设-24⑤(2026-08-20)：绑定码与倒计时是「要照着念/照着输」的数字——等宽栈，
   每个数字同宽，念码和输码不会因字形宽窄错位（DESIGN.md 数字有分量 Rule 点名绑定码）。 */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
*{box-sizing:border-box}
body{margin:0;background:var(--纸);color:var(--墨);
  font-family:-apple-system,"HarmonyOS Sans SC","MiSans","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased}
::selection{background:var(--红淡)}
/* 底部让位（真机回归缺陷2，2026-08-30）：手机端固定底栏 .tabbar 会随系统字号放大与
   env(safe-area-inset-bottom)（手势条/全面屏）长高——它算了安全区、.wrap 没算，
   原余量只剩 7~18px，真机（/audit 折叠尾、/more 预约到店末项）末屏内容被压到栏下点不到。
   全站一处修：让位量 = 底栏留足余量 + 与 .tabbar 同口径补安全区（env 在桌面为 0，不影响宽屏）。 */
.wrap{max-width:640px;margin:0 auto;padding:16px 14px calc(90px + env(safe-area-inset-bottom,0px))}
h1{font-size:1.3em;font-weight:900;margin:8px 0 4px;letter-spacing:.02em}
/* h2 前一短红杠：本子页边上的批注线，节标题不再是一团灰字 */
h2{font-size:1.02em;font-weight:700;margin:22px 0 8px;color:var(--墨)}
h2::before{content:"";display:inline-block;width:14px;height:3px;background:var(--红);
  border-radius:2px;margin-right:8px;vertical-align:middle;transform:rotate(-1.5deg)}
/* 顶栏双细线：作业本页眉那条双规线 */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:8px;
  border-bottom:3px double var(--墨);padding-bottom:8px;margin-bottom:14px;flex-wrap:wrap}
.topbar .who{font-size:.85em;color:var(--墨2);background:var(--格线);
  border-radius:999px;padding:2px 10px}
/* 卡片：白纸 + 极淡方格纹（纯 CSS），像贴在错题本上的一页 */
.card{background-color:var(--纸白);
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 15px,rgba(30,43,58,.04) 15px,rgba(30,43,58,.04) 16px),
    repeating-linear-gradient(90deg,transparent,transparent 15px,rgba(30,43,58,.04) 15px,rgba(30,43,58,.04) 16px);
  border:1px solid var(--格线);border-radius:10px;
  padding:14px;margin:10px 0;
  box-shadow:0 1px 2px rgba(30,43,58,.05)}
label{display:block;font-size:.9em;color:var(--墨2);margin:10px 0 2px}
input,select,textarea{width:100%;padding:10px;border:1.5px solid var(--格线);
  border-radius:8px;font-size:1em;background:#fff;color:var(--墨);
  transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--墨);
  box-shadow:0 0 0 3px rgba(30,43,58,.08)}
textarea{min-height:70px}
/* 按钮：墨为主，红不轻用 */
button{padding:10px 18px;border:none;border-radius:8px;background:var(--墨);
  color:#fff;font-size:1em;font-weight:600;cursor:pointer;margin-top:10px;
  transition:background .15s,transform .1s}
button:hover{background:#2B3E55}
button:active{transform:translateY(1px)}
button.ghost{background:#fff;color:var(--墨);border:1.5px solid var(--墨)}
button.ghost:hover{background:var(--格线)}
button.small{padding:5px 12px;font-size:.85em;margin:0}
button:disabled{opacity:.55;cursor:default}
/* 焦点圈＝红笔把你圈出来：键盘可见焦点 */
:focus-visible{outline:2px solid var(--红);outline-offset:2px}
/* 设-07(2026-08-20)：.msg 族改版——**默认可见**的中性消息条，不再「裸 .msg＝隐形」。
   旧口径 .msg{display:none} 是 API 设计地雷：student/practice 两页把服务端算好的 AI 六态
   文案写进裸 .msg，全部静默消失，AI 复核回路整段不可见（P0，第四页还会再踩）。
   现在裸 .msg＝中性灰蓝可见（随手写 class="msg" 也看得见，地雷拆除）；
   .ok/.bad 仍为绿/红覆盖态；:empty 兜住页面初始的空容器（不显示空白条）。 */
.msg{display:block;padding:8px 12px;border-radius:8px;margin:10px 0;font-size:.92em;
  background:#EEF2F6;color:var(--墨2);border-left:3px solid var(--墨2)}
.msg:empty{display:none}
/* 设-34：消息条字重提到 600——成败消息是小字承载最关键的信息，深色+加粗双保险过 AA */
.msg.ok{background:var(--消绿淡);color:var(--消绿);border-left:3px solid var(--消绿);font-weight:600}
.msg.bad{background:var(--红淡);color:var(--红);border-left:3px solid var(--红);font-weight:600}
/* 状态标签＝老师的批改记号：
   待消＝红笔圈出来；消题中＝墨色平记；已消＝绿字划掉（划掉线就是"消"的本义） */
.tag{display:inline-block;font-size:.75em;padding:1px 9px;border-radius:999px;font-weight:700}
.t-bad{background:#fff;color:var(--红);border:1.5px solid var(--红)}
.t-warn{background:#EEF2F6;color:var(--墨)}
.t-ok{background:var(--消绿淡);color:var(--消绿);
  text-decoration:line-through;text-decoration-thickness:2px}
.t-acc{background:var(--格线);color:var(--墨)}
/* loop缺陷回流 UX-①（20260825）：列表项离屏跳渲染——57 项错题本全量渲染实测整页 86k px，
   content-visibility:auto 让视口外的 .item 不参与布局/绘制（滚动条用 contain-intrinsic-size 的
   600px 估高占位，auto 前缀＝渲染过一次后记住真实高度，跳动最小）。student 错题本 / trace 溯源 /
   review 等全部用 .item 的列表一处全治；export 打印页用 .wq-item 不用 .item，打印面不受影响。 */
.item{border-bottom:1px solid var(--格线);padding:10px 0;
  content-visibility:auto;contain-intrinsic-size:auto 600px}
.item:last-child{border-bottom:none}
.item .meta{font-size:.8em;color:var(--墨2)}
/* 数字有分量：等宽表格数字，像写在本子上的 */
/* 卡片与排版轮（2026-09-01）抖动根因④：统计格异步填充无占位——空 grid 高 0，数据到了整块弹出，
   把下方列表/页脚整体顶开（CLS 位移源实测就是它）。min-height 预留一格高，填充前后零位移。 */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:10px 0;min-height:78px}
.stat{background:var(--纸白);border:1px solid var(--格线);border-radius:10px;
  padding:10px;text-align:center}
.stat .n{font-size:1.7em;font-weight:800;color:var(--墨);
  font-family:var(--mono);font-variant-numeric:tabular-nums;line-height:1.2}
.stat .t{font-size:.8em;color:var(--墨2)}
.stat-待消 .n{color:var(--红)}
.stat-已消 .n{color:var(--消绿)}
/* 纯 HTML 条形（不引外部图表库） */
.bar-row{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:.88em}
.bar-row .bl{width:110px;flex:none;text-align:right;color:var(--墨2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row .bt{flex:1;background:#EEF2F6;border-radius:4px;height:18px;overflow:hidden}
.bar-row .bf{height:100%;background:var(--墨);border-radius:4px;transition:width .4s ease}
.bar-row .bn{width:56px;flex:none;font-size:.9em;color:var(--墨2);
  font-family:var(--mono);font-variant-numeric:tabular-nums}
.opt{display:block;width:100%;text-align:left;background:var(--纸白);color:var(--墨);
  border:1.5px solid var(--格线);margin:6px 0;transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--墨2)}
.opt.sel{border:2px solid var(--墨);background:#F2F6FA;font-weight:600}
/* 错题照片：白边微转角，像贴进本子的一张相片 */
img.thumb{max-width:100%;background:#fff;padding:6px;border:1px solid var(--格线);
  border-radius:4px;box-shadow:0 1px 3px rgba(30,43,58,.12);transform:rotate(-.8deg)}
/* 设-26(2026-08-20)：列表里的照片限高限宽——密排教辅照片在 640px 内读得吃力，
   列表只作「识别」用途，读题看大图去 practice（那里有点击放大）。练习页不加这层限制。 */
.item img.thumb{max-height:200px;width:auto;margin-top:6px}
/* 设-26：图片点击放大——全屏暗底查看原图，点击任意处关闭（零依赖 overlay，practice 读题用） */
.zoom-mask{position:fixed;inset:0;background:rgba(30,43,58,.74);display:flex;
  align-items:center;justify-content:center;z-index:99;cursor:zoom-out}
.zoom-mask img{max-width:92vw;max-height:88vh;background:#fff;padding:6px;
  border-radius:4px;box-shadow:0 2px 12px rgba(30,43,58,.35)}
/* 设-17/18：admin 预约表行内成败反馈（状态变更不再整表重建，反馈落在那一行的单元格里） */
.cell-msg{font-size:.78em;display:block;margin-top:4px}
.cell-msg.ok{color:var(--消绿)}
.cell-msg.bad{color:var(--红)}
/* 周报转化钩子：一张贴上去的便利贴 */
.hook{background:var(--黄淡);border:1px solid #E4D28C;border-radius:6px;
  padding:14px;margin:16px 0;text-align:center;transform:rotate(-.4deg);
  box-shadow:0 2px 4px rgba(30,43,58,.08)}
table{border-collapse:collapse;width:100%;font-size:.85em}
th,td{border-bottom:1px solid var(--格线);padding:6px 8px;text-align:left}
th{background:#EEF2F6;font-weight:700;color:var(--墨)}
.tablewrap{overflow-x:auto}
a{color:var(--红);font-weight:600;text-decoration:none}
a:hover{text-decoration:underline}
.foot{margin-top:24px;font-size:.78em;color:var(--墨2);text-align:center}

/* ============ 签名元素 ①：消字印章 ============ */
/* 连对达标那一刻，卡上盖一枚红章；登录页当作品牌标记静态使用 */
.seal{display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border:3px solid var(--红);border-radius:50%;
  color:var(--红);font-weight:900;font-size:28px;font-family:var(--楷体);
  box-shadow:inset 0 0 0 2.5px rgba(210,64,64,.22);
  transform:rotate(-12deg);opacity:.92;user-select:none;flex:none}
.seal.stamp{animation:盖章 .3s cubic-bezier(.2,1.5,.4,1)}
@keyframes 盖章{
  0%{transform:rotate(-12deg) scale(2.1);opacity:0}
  60%{transform:rotate(-12deg) scale(.94);opacity:.96}
  100%{transform:rotate(-12deg) scale(1);opacity:.92}}

/* ============ 签名元素 ②：正字计数 ============ */
/* 每答对一次画一笔（正＝5 笔）；没画的笔画画在灰格上，进度一眼可感 */
.zheng{position:relative;display:inline-block;width:20px;height:22px;
  vertical-align:-5px;margin:0 2px;transform:rotate(-2deg)}
.zheng i{position:absolute;background:#D9E2EB;border-radius:1px}
.zheng i.on{background:var(--红)}
.zheng i:nth-child(1){left:1px;top:3px;width:17px;height:2.6px}
.zheng i:nth-child(2){left:2px;top:3px;width:2.6px;height:16px}
.zheng i:nth-child(3){left:2px;top:10px;width:12px;height:2.6px}
.zheng i:nth-child(4){left:13.5px;top:10px;width:2.6px;height:9px}
.zheng i:nth-child(5){left:1px;top:18.5px;width:17px;height:2.6px}

/* 登录页品牌标记 */
.wordmark{display:flex;align-items:center;gap:14px;margin:12px 0 8px}
.wordmark .seal{width:58px;height:58px;font-size:27px}
.wordmark .wm b{display:block;font-size:1.55em;font-weight:900;letter-spacing:.08em}
.wordmark .wm small{color:var(--墨2);font-size:.8em}

/* 动效从简：尊重系统"减少动态"设置 */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* V2修复: 窄屏断点——第 1 轮全项目零媒体查询，小屏手机（≤480px）上
   字号偏大、留白偏宽、按钮触区不够。触区按 44px 最小可点高度（移动端通行标准）。 */
@media (max-width:480px){
  body{font-size:15px}
  .wrap{padding:12px 10px calc(84px + env(safe-area-inset-bottom,0px))}
  h1{font-size:1.15em}
  h2{font-size:1em;margin:16px 0 6px}
  .card{padding:12px;margin:8px 0}
  button{min-height:44px;padding:11px 16px}
  button.small{min-height:36px;padding:6px 12px}
  /* 设-07 顺带：消息条里的小按钮（practice「我确定做对了」）是那条消息的主操作，
     触区不随 .small 缩到 36px——抬到 44px 触控下限 */
  .msg button.small{min-height:44px}
  input,select,textarea{min-height:44px}
  /* 卡片与排版轮（2026-09-01）：两列时三格换行成两行（实测 ≈142px），占位同步抬高——
     78px 的单行占位在手机上少留 64px，统计格一到就把列表整体顶开（CLS 位移源 rect 实测）。 */
  .stat-row{grid-template-columns:repeat(2,1fr);gap:8px;min-height:142px}
  .stat .n{font-size:1.4em}
  .bar-row .bl{width:84px;font-size:.95em}
  .bar-row .bn{width:64px}
  th,td{padding:6px 6px;font-size:.95em}
}
/* 公式渲染（2026-08-24，零依赖 LaTeX 子集）：分式/根号/行内块级排版 */
.minline{font-family:var(--mono);font-size:.95em;white-space:nowrap;padding:0 1px}
/* 卡片与排版轮（2026-09-01）抖动根因②：MathJax 排版前是一行源码（~1.6em），排版后 SVG 块高
   2~3em——每个块级公式都把下文顶开一截。预留 min-height 吃掉大部分差值（排完矮于预留=恒定，零位移）。 */
.mblock{display:block;text-align:center;margin:6px 0;font-family:var(--mono);font-size:1em;
  overflow-x:auto;white-space:nowrap;min-height:2.4em}
.mfrac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;
  margin:0 2px;line-height:1.15}
.mnum{padding:0 4px;border-bottom:1px solid var(--墨)}
.mden{padding:0 4px}
.msqrt{display:inline-flex;align-items:stretch;vertical-align:middle;margin:0 1px}
.msqrt-bar{font-size:1.05em;line-height:1}
.msqrt-in{border-top:1px solid var(--墨);padding:0 3px}
.minline sup,.minline sub,.mblock sup,.mblock sub,.mfrac sup,.mfrac sub{font-size:.75em}
/* 分析/生成中等待指示（2026-08-24）：小转圈 + 文案，让用户知道「在分析，不是卡死」 */
.spinner{display:inline-block;width:12px;height:12px;border:2px solid var(--格线);
  border-top-color:var(--墨2);border-radius:50%;animation:spin .8s linear infinite;
  vertical-align:-2px;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}
/* 拆页导航（2026-08-24）：错题本主页的功能跳转按钮 */
.btn-nav{display:inline-block;background:var(--纸白);border:1px solid var(--格线);
  border-radius:8px;padding:8px 12px;font-size:.9em;font-weight:600;color:var(--墨);
  text-decoration:none;transition:background .15s}
.btn-nav:hover{background:var(--格线)}

/* ============ 家长/管理员/学生多页导航（2026-08-25 页面拆分，app.js 渲染导航 注入；样式三轮 A 学生接入）============
   形态：移动端底部 tab（主场景是 WebView 手机——安卓壳＋小程序壳，底部 tab 是拇指区原生 App 心智），
   宽屏（≥768px）自动变顶部通栏横排菜单——同一份 DOM，媒体查询切换。
   卡片化轮 B（20260825 老板截图反馈）：菜单 DOM 由 app.js 插在各页 topbar 之后（原来挂 body 末尾，
   宽屏静态排版时退到页面末尾左下角）；本断点只改形态——贴 topbar 之下、横排铺满内容区全宽、当前项高亮。
   手机（<768px）维持固定底部居中不变（position:fixed 不受 DOM 位置影响）。
   当前项高亮＝红字＋短红杠（h2::before 同款批注线记号）；no-print 类由 export 页打印样式吃掉。
   样式三轮 A（20260826）：学生端同款接入；第五格「更多」是 button.tab-more（不是链接），
   点开 .tabmore 弹层收绑定/导出/退出——选择器从 .tabbar a 放宽到 .tabbar a,.tabbar .tab-more，
   两类项同一张脸；.当前 同步放宽到 .tabbar .当前。 */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;justify-content:space-around;
  background:var(--纸白);border-top:1px solid var(--格线);
  padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));margin:0;box-shadow:0 -1px 4px rgba(30,43,58,.06)}
.tabbar a,.tabbar .tab-more{flex:1;text-align:center;padding:8px 4px;font-size:.88em;font-weight:600;color:var(--墨2);
  text-decoration:none;border-radius:8px;min-width:52px}
/* 钮形态归一：全局 button 底色/边框/外距全清，长成链接的样子（字体也要继承——UA 钮默认不继承正文字体） */
.tabbar .tab-more{background:none;border:none;margin:0;cursor:pointer;font-family:inherit;line-height:inherit}
.tabbar a:hover,.tabbar .tab-more:hover{text-decoration:none;background:var(--格线)}
.tabbar .当前{color:var(--红);font-weight:800}
.tabbar .当前::after{content:"";display:block;width:18px;height:3px;background:var(--红);
  border-radius:2px;margin:3px auto 0;transform:rotate(-1.5deg)}
/* 学生「更多」弹层：绝对定位挂在 nav 里——手机贴底部 tab 之上、宽屏落横排菜单之下（跟着媒体查询走）。
   no-print 由 app.js 挂类；点外收起在 app.js。 */
.tabmore{position:absolute;bottom:100%;right:4px;margin-bottom:8px;min-width:176px;display:none;
  background:var(--纸白);border:1px solid var(--格线);border-radius:10px;padding:6px;
  box-shadow:0 2px 12px rgba(30,43,58,.14);z-index:70}
.tabmore a,.tabmore button{display:block;width:100%;text-align:left;padding:10px 12px;margin:0;
  border:none;border-radius:8px;background:none;color:var(--墨);font-size:.95em;font-weight:600;
  font-family:inherit;cursor:pointer;text-decoration:none}
.tabmore a:hover,.tabmore button:hover{background:var(--格线);text-decoration:none}
@media (min-width:768px){
  /* relative：给 .tabmore 当定位锚（手机侧 fixed 自带锚定，宽屏 static 挂不住弹层） */
  .tabbar{position:relative;border-top:none;border-bottom:3px double var(--墨);box-shadow:none;
    padding:6px 0;margin:0 0 14px;gap:6px;justify-content:space-between}
  .tabbar a,.tabbar .tab-more{flex:none;padding:6px 16px}
  .tabmore{bottom:auto;top:100%;margin-top:8px;right:0}
}

/* ============ 实时聊天（2026-08-29 老板拍板 QA4）：tab 角标 + 聊天页气泡 ============
   角标挂在「消息」tab 链接里（app.js 挂聊天角标 注入/移除），红底白字小胶囊；
   聊天页（chat.html）气泡：自己的右、对方的左，纸墨红令牌同全站。 */
.chat-badge{display:inline-block;min-width:18px;padding:0 5px;margin-left:3px;border-radius:9px;
  background:var(--红);color:#fff;font-size:.72em;font-weight:700;line-height:18px;
  text-align:center;vertical-align:2px}
.chat-wrap{display:flex;flex-direction:column;min-height:60vh}
.chat-msgs{display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:56vh;
  padding:8px 2px;scroll-behavior:smooth}
.chat-bubble{max-width:78%;padding:8px 12px;border-radius:12px;font-size:.95em;line-height:1.5;
  white-space:pre-wrap;word-break:break-word}
.chat-mine{align-self:flex-end;background:var(--红);color:#fff;border-bottom-right-radius:4px}
.chat-theirs{align-self:flex-start;background:var(--格线);color:var(--墨);border-bottom-left-radius:4px}
.chat-meta{font-size:.75em;opacity:.75;margin-top:3px}
.chat-theirs .chat-meta{opacity:.8}
.chat-row{display:flex;flex-direction:column}
.chat-row-mine{align-items:flex-end}
.chat-row-theirs{align-items:flex-start}

/* ============ 薄弱知识点卡（样式三轮 B/C①，2026-08-26；app.js 薄弱卡HTML 一处实现三处同脸）============
   家长看板 top3 / export 薄弱清单 tab / 学情报告§三 共用。纸墨红笔令牌：卡名与总错次是墨，
   未消数是红笔（待消的才要紧），学科是灰徽章。打印安全：只有边框与文字、不依赖底色，
   break-inside 防 A4 上半张卡撕在两页。 */
.wkc{border:1px solid var(--格线);border-radius:8px;background:var(--纸白);padding:10px 12px;
  margin:8px 0;break-inside:avoid;page-break-inside:avoid}
.wkc-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.wkc-top b{overflow-wrap:anywhere}
.wkc-nums{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline;margin-top:6px;
  font-size:.85em;color:var(--墨2)}
.wkc-nums b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.5em;
  color:var(--墨);margin-right:2px}
.wkc-nums .wkc-red b{color:var(--红)}
.wkc-recent{margin-left:auto}

/* ============ 折叠区（UX 优化轮 2026-08-25，老板拍板七项之 3/5/6）============
   原生 <details>/<summary>——开合零 JS（键盘可达、读屏自带展开语义），样式仿 h2 节标题
   （同款红批注线记号），箭头 ▸ 转 90° 示开。summary 里的 .sum-meta 常驻关键摘要
   （如「每日上限 120 分钟」），收起也能一眼读到要点。触区按 ≥44px 行高。 */
.fold{margin:14px 0}
.fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:1.02em;font-weight:700;color:var(--墨);min-height:44px;user-select:none}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::before{content:"";display:inline-block;width:14px;height:3px;background:var(--红);
  border-radius:2px;transform:rotate(-1.5deg);flex:none}
.fold>summary::after{content:"▸";margin-left:auto;color:var(--墨2);font-size:.8em;flex:none}
.fold[open]>summary::after{content:"▾"}
.fold>summary .sum-meta{font-size:.78em;font-weight:400;color:var(--墨2)}
.fold>summary:focus-visible{outline:2px solid var(--红);outline-offset:2px;border-radius:4px}

/* ============ 变式卡（2026-08-25 变式样式重排；app.js 变式卡HTML 一处实现，四处同一脸）============
   老板反馈「样式很难看、一点都不平整，手机上一行放不下」——旧 audit 变式题审核是 10 列表格
   （375px 实测超宽 186px）、选项字母双写、题干与选项挤一行。新口径：
   题号+题型徽章一行 ｜ 题干独立块自动换行 ｜ 选项逐行块级（绝不与题干同行）｜ 答案/解析分块折叠。 */
.vcard{border:1px solid var(--格线);border-radius:8px;background:var(--纸白);
  padding:12px;margin:10px 0}
.vcard:first-child{margin-top:6px}
.vcard:last-child{margin-bottom:2px}
.vhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:26px}
.vno{font-size:.82em;font-weight:600;color:var(--墨2);font-variant-numeric:tabular-nums}
/* 题干独立块：正文正常换行；长公式串可折行（.minline 默认 nowrap 防拆分式，这里平整优先；
   $$…$$ 块级公式仍走 .mblock 自带的 overflow-x:auto 横向滚动——兜底只限公式块，不放大正文） */
.vstem{margin:8px 0 0;overflow-wrap:anywhere;word-break:break-word}
.vstem .minline,.vv .minline{white-space:normal;overflow-wrap:anywhere}
/* 选项逐行块级：字母列等宽对齐（A./B./C./D. 竖着看齐），触屏行高 ≥44px 由下方断点兜住可点形态 */
.vopts{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.vopt{display:flex;gap:8px;align-items:flex-start;width:100%;text-align:left;margin:0;
  padding:7px 10px;border:1.5px solid var(--格线);border-radius:8px;background:var(--纸白);
  color:var(--墨);font-size:.95em;line-height:1.55}
.vopt b{flex:none;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--墨2)}
button.vopt{cursor:pointer;font-weight:400}
button.vopt:hover{border-color:var(--墨2);background:#F2F6FA}
/* 答案/解析分块：标签胶囊 + 内容自适应宽（min-width:0 是 flex 子项能换行的前提，少了必溢出） */
.vans{margin-top:10px;border-top:1px dashed var(--格线);padding-top:6px}
.vans>summary{cursor:pointer;color:var(--墨2);font-size:.85em;font-weight:600;min-height:34px;
  display:flex;align-items:center}
.vans-row{display:flex;gap:8px;align-items:flex-start;margin-top:6px}
.vk{flex:none;font-size:.75em;font-weight:700;color:var(--墨2);background:var(--格线);
  border-radius:999px;padding:2px 9px;margin-top:3px}
.vv{flex:1;min-width:0;font-size:.92em;line-height:1.6;overflow-wrap:anywhere;word-break:break-word}
.vfoot{margin-top:8px;font-size:.8em;color:var(--墨2);line-height:1.6}
.vfoot .tag{font-size:.95em}
/* 审核卡操作行（audit 变式题 tab 配套）：按钮换行不挤；修正表单展开后整行占满 */
.rvacts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.rvacts .rvFix{display:block;width:100%}
.rvacts textarea{width:100%;max-width:26em}
@media (max-width:480px){
  .vcard{padding:10px}
  button.vopt{min-height:44px}
}

/* ============ 学情反馈卡（2026-08-26 反馈卡重排；more.html 反馈区专用，容器复用变式卡 .vcard 族）============
   老板截图反馈「样式差、不平整」：旧版表单横挤一行、历史是裸 .item 列表。新口径与薄弱卡/变式卡同一语言：
   每条反馈一张卡；t-amber/t-green 只是给既有色 token（黄/消绿）挂 .tag 形制的两个新档，
   与 t-bad/t-ok 同构——咨询墨蓝(t-warn)/投诉红(t-bad)/故障琥珀(t-amber)/建议绿(t-green)。
   老师回复块=缩进+消绿左条（视觉从属正文）；关闭卡整卡降不透明度（收档，终态感）。 */
.t-amber{background:var(--黄淡);color:var(--黄)}
.t-green{background:var(--消绿淡);color:var(--消绿)}
.fbc-off{opacity:.62}
.fbc-when{margin-left:auto}
.fbreply{margin:10px 0 0 10px;padding:2px 0 2px 12px;border-left:3px solid var(--消绿)}
.fbreply-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.fbreply-head b{font-size:.82em;color:var(--消绿)}
.fbreply-body{margin-top:2px;font-size:.92em;line-height:1.6;
  white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
/* 反馈正文 textarea 随内容长高（Chromium 123+ 原生；不支持的浏览器回落 rows=3 不误事） */
#fbText{field-sizing:content}

/* ============ 表格卡片化（2026-08-25 卡片化合并轮 A，老板拍板：窗口 <768px 数据表变卡片）============
   模式＝标准 responsive table-to-card，零依赖纯 CSS：<768px 隐藏表头行，每 tr 一张白纸卡，
   td 变块级「字段名：值」逐行堆叠；≥768px 本节整体不生效，表格原样（桌面口径一行不改）。
   字段名取 td 的 data-label——由 app.js「表格卡片化标签」观察器按首行表头自动写入并挂 .卡表 类，
   五页十余处渲染点零改动（逐处手写必漏，铁律 3 教训）；规则只认 .卡表，无表头的布局小表不受牵连。
   行内高亮（待联系/超时的行内联背景）留在卡上；操作格里的下拉/输入/按钮是块级流普通内容，卡内照常可用。
   打印面不受影响：A4 纵向打印视口 ≈794px > 768px，export 页打印口径原样。 */
@media (max-width:767.98px){
  table.卡表{display:block}
  table.卡表 tr:first-child{display:none}   /* 表头行（观察器口径：首行＝表头） */
  table.卡表 tr{display:block;border:1px solid var(--格线);border-radius:8px;
    background:var(--纸白);margin:8px 0;padding:2px 0}
  table.卡表 td{display:block;border-bottom:1px dashed var(--格线);padding:7px 10px}
  table.卡表 tr td:last-child{border-bottom:none}
  table.卡表 td:not([data-label=""])::before{content:attr(data-label)"：";
    font-weight:700;color:var(--墨2);margin-right:6px;font-size:.92em}
  /* 图片格（老板拍板口径）：卡面默认不渲染题图，「查看图片」小按钮（app.js 注入）→ 放大查看 遮罩；
     ≥768px 反过来（图照常、按钮隐藏）。现有各表暂无图片格，规则为将来题图列预置 */
  table.卡表 td img{display:none}
}
@media (min-width:768px){ .卡图钮{display:none} }

/* ============ 长解析折叠（2026-08-28 学生端五连修④）============
   错因分析卡/深化讲解卡（student.html）内容可收起。形态＝details open：默认展开（首屏可见），
   标题行即开关——与全仓折叠先例同一做法（变式卡 .vans、.fold 折叠区、手动补录 details），
   开合零 JS、键盘可达；箭头记号与 .fold 同语言（▸ 收起 / ▾ 展开）。 */
.析折>summary{cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:6px;
  min-height:34px;user-select:none}
.析折>summary::-webkit-details-marker{display:none}
.析折>summary::after{content:"▸";margin-left:auto;color:var(--墨2);font-size:.85em;flex:none}
.析折[open]>summary::after{content:"▾"}

/* ============ 列表卡片化（2026-09-01 卡片与排版轮，吴总意见「用卡片式会好一些，参考题库系统 UI」）============
   学题库系统卡片的「形」（白底独立卡、1px 浅边框、圆角 10px、内边距 12~15px、卡间距），
   配色仍是错题消自己的纸墨令牌（格线边框/纸白底/墨字）——学形不学色。
   接法零重构：容器 HTML 只加一个 .cardlist 类（原 .card 保留）；:has 支持时容器自身卸下大卡外衣、
   每个 .item 自成一卡；:has 不支持的老内核自动落回原样（一张大卡+分隔线），只旧不坏。
   空态/加载态（容器里没有 .item 只有一句话）不命中 :has(.item)，维持 .card 白卡框住，不裸奔。 */
.cardlist:has(.item){background:none;border:none;box-shadow:none;padding:0;margin:10px 0}
.cardlist:has(.item)>.item{background:var(--纸白);border:1px solid var(--格线);border-radius:10px;
  padding:12px 14px;margin:10px 0;box-shadow:0 1px 2px rgba(30,43,58,.05)}
.cardlist:has(.item)>.item:last-child{border-bottom:1px solid var(--格线)} /* 盖掉 .item:last-child 的去线 */
.cardlist:has(.item)>a.item{display:block}
@media (max-width:480px){ .cardlist:has(.item)>.item{padding:11px 12px;margin:8px 0} }

/* ============ 长文结构化（2026-09-01 卡片与排版轮，吴总意见「答案和解析可读性差，大段文字和符号」）============
   app.js 长文HTML() 的配套样式：只动呈现不动内容——按换行成段、按 ①②③ 切点、
   「答案：/思路：/步骤：」行首加粗；行距 1.75、段间距、块级公式独立成行（.mblock 既有）。 */
.长文段{margin:6px 0;line-height:1.75;overflow-wrap:anywhere}
.长文段:first-child{margin-top:2px}
.长文点{padding-left:1.3em;text-indent:-1.3em;margin:4px 0}
.长文点 .mblock{text-indent:0}
.长文头{font-weight:700;color:var(--墨)}