/* =========================================================
   practice.css · 在线练习
   与 #/real、#/select 同一套版式：主栏 + 右侧信息栏两栏网格
   ========================================================= */

/* ---------- 两栏布局 ---------- */
.pr-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 20px;
  align-items: stretch;
}
/* 主栏撑满整行高度；记录多时练习记录吃掉剩余空间，两栏底部齐平 */
.pr-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pr-main > .pr-his-fill { flex: 1 1 auto; }
.pr-side {
  min-width: 0; display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: 88px;
}
/* 视口太矮时侧栏不再吸顶，避免底部内容被截断 */
@media (max-height: 640px) { .pr-side { position: static; } }

/* ---------- 引导页：主视觉 ---------- */
.pr-hero { display: flex; align-items: flex-start; gap: 18px; padding: 22px 24px; }
.pr-hero-ico {
  flex: none; width: 54px; height: 54px; border-radius: 18px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--blue), var(--purple));
  box-shadow: 0 10px 24px rgba(29, 75, 118, .28);
}
.pr-hero-b { min-width: 0; }
.pr-hero-b h3 { font-size: 18px; font-weight: 700; letter-spacing: .2px; margin-bottom: 6px; }
.pr-hero-b p { font-size: 14px; line-height: 1.75; color: var(--t2); max-width: 660px; }
.pr-hero-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ---------- 引导页：四个数字 ---------- */
.pr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pr-stat { padding: 14px 16px; border-radius: var(--r-l); }
.pr-stat-v {
  font-size: 25px; font-weight: 700; letter-spacing: .4px;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.pr-stat-v small { font-size: 12.5px; font-weight: 500; color: var(--t3); margin-left: 2px; }
.pr-stat-l { font-size: 12.5px; color: var(--t3); margin-top: 3px; }

/* ---------- 引导页：侧栏三步流程 ---------- */
.pr-steps { display: flex; flex-direction: column; gap: 12px; }
.pr-steps li { display: flex; align-items: flex-start; gap: 10px; }
.pr-step-n {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue);
  font-size: 12.5px; font-weight: 700;
}
.pr-step-b { min-width: 0; }
.pr-step-b b { display: flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 650; }
.pr-step-b p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--t2); }

/* ---------- 练习记录（列宽固定，逐行对齐） ---------- */
.pr-his { padding: 14px 18px 16px; }
.pr-his-t {
  display: flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 700; color: var(--t1);
}
.pr-his-t .chip { font-weight: 550; }
.pr-his-list { margin-top: 6px; display: flex; flex-direction: column; }
.pr-his-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-top: 1px solid var(--line);
}
.pr-his-row:first-child { border-top: 0; }
.pr-his-head {
  padding: 0 0 7px; font-size: 12px; color: var(--t3); font-weight: 600;
  border-top: 0; border-bottom: 1px solid var(--line);
}
/* 表头与下面的圆角标签视觉对齐（标签自带左右内边距） */
.pr-his-head .pr-his-chip { padding-left: 7px; }
.pr-his-head + .pr-his-row { border-top: 0; }
.pr-his-d { flex: none; width: 104px; font-size: 13px; color: var(--t3); font-variant-numeric: tabular-nums; }
.pr-his-n { flex: none; width: 58px; font-size: 13.5px; color: var(--t2); }
.pr-his-s { flex: none; width: 108px; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pr-his-chip { flex: none; width: 58px; }
.pr-his-r { margin-left: auto; flex: none; display: flex; align-items: center; gap: 8px; }
.pr-his-empty { text-align: center; padding: 16px 8px 10px; color: var(--t3); }
.pr-his-empty p { margin-top: 8px; font-size: 13px; line-height: 1.7; }
/* 空状态里点一句：分享出去的记录不在这一栏 */
.pr-his-tip { font-size: 12.5px !important; color: var(--t3); opacity: .9; }
.pr-his-more {
  margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line);
  text-align: center; font-size: 12px; color: var(--t3);
}

/* ---------- 答题头部：进度与元信息 ---------- */
.pr-head { padding: 14px 18px; }
.pr-prog-wrap { display: flex; align-items: center; gap: 10px; }
.pr-prog { flex: 1; height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; }
.pr-prog i { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--blue), var(--purple)); transition: width .35s ease; }
.pr-prog-t { font-size: 12.5px; color: var(--t2); white-space: nowrap; font-variant-numeric: tabular-nums; }

.pr-meta { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pr-clock { display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--t3); font-variant-numeric: tabular-nums; }
/* 宽屏答题卡常驻在右栏，按钮只在窄屏出现 */
@media (min-width: 981px) { .pr-cardbtn { display: none; } }

/* ---------- 题目区 ---------- */
.pr-body { padding: 18px 22px; }
.pr-body-h {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.pr-no { font-size: 13.5px; font-weight: 650; color: var(--t1); }
.pr-sc { margin-left: auto; font-size: 12.5px; color: var(--t3); font-variant-numeric: tabular-nums; }
.pr-body .q-stem { font-size: 16px; line-height: 1.85; }

.pr-kps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kp-mini {
  padding: 2px 9px; border-radius: 999px; font-size: 12px; color: var(--t2);
  background: rgba(24, 31, 43, .04); border: 1px solid var(--line);
}

/* ---------- 选项 ---------- */
.pr-opts { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.pr-opt {
  display: flex; align-items: flex-start; gap: 11px; width: 100%;
  padding: 12px 14px; text-align: left; cursor: pointer;
  border: 1.5px solid var(--line-2); border-radius: var(--r-s);
  background: var(--glass-2); color: var(--t1);
  font: inherit; font-size: 15px; line-height: 1.7;
  transition: border-color .18s, background .18s, transform .12s;
}
.pr-opt:hover { border-color: rgba(29, 75, 118, .45); background: var(--glass-solid); }
.pr-opt:active { transform: scale(.995); }
.pr-opt.on {
  border-color: var(--blue); background: var(--blue-soft);
  box-shadow: 0 0 0 3px rgba(29, 75, 118, .12);
}
.pr-key {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 600;
  background: var(--line); color: var(--t2); transition: background .18s, color .18s;
}
.pr-opt.on .pr-key { background: var(--blue); color: #fff; }
.pr-text { flex: 1; }

/* ---------- 填空 / 解答 ---------- */
.pr-fill { margin-top: 16px; }
.pr-fill .input { width: 100%; font-size: 15px; }
.pr-fill .hint { margin-top: 8px; font-size: 12.5px; line-height: 1.7; color: var(--t3); }

/* ---------- 答案截图 ----------
   虚线框是「这里可以放东西」的通用语义：没图时整块是按钮，
   有图时变成缩略图 + 一个更小的加号。四条上传路径都落在这一块里。 */
.pr-up {
  margin-top: 10px; padding: 10px; border-radius: var(--r-m);
  border: 1.5px dashed var(--line-2); background: var(--glass-2);
  transition: border-color .16s, background .16s;
}
.pr-up.is-over { border-color: var(--blue); background: var(--blue-soft); }
.pr-shots { display: flex; flex-wrap: wrap; gap: 10px; }
.pr-shots:not(:empty) { margin-bottom: 10px; }
.pr-shot {
  position: relative; margin: 0; width: 132px; height: 100px;
  border-radius: var(--r-s); overflow: hidden;
  background: #fff; border: 1px solid var(--line-2);
}
.pr-shot img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  background: #fff; cursor: zoom-in;
}
.pr-shot-x {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  display: grid; place-items: center; border: 0; cursor: pointer;
  border-radius: 50%; background: rgba(20, 24, 30, .6); color: #fff;
  transition: background .15s;
}
.pr-shot-x:hover { background: rgba(20, 24, 30, .88); }
.pr-up-add {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 10px; border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--t3); font: inherit; cursor: pointer;
  transition: color .15s, background .15s;
}
.pr-up-add b { font-size: 13.5px; font-weight: 600; color: var(--t2); }
.pr-up-add small { font-size: 12px; color: var(--t3); }
.pr-up-add:hover { background: var(--blue-soft); }
.pr-up-add:hover b, .pr-up-add:hover small { color: var(--blue); }
.pr-up-add.is-busy { cursor: progress; opacity: .62; }
.pr-up-max { font-size: 12px; color: var(--t3); padding: 4px 2px; }

/* 折叠的「改成拍照作答」：填空题默认打字，需要时再展开 */
.pr-more { margin-top: 10px; }
.pr-more > summary {
  display: flex; align-items: center; gap: 6px; width: fit-content;
  cursor: pointer; list-style: none; font-size: 13px; color: var(--t2);
}
.pr-more > summary::-webkit-details-marker { display: none; }
.pr-more > summary:hover { color: var(--blue); }
.pr-more[open] > summary { color: var(--blue); font-weight: 600; }

/* 结果页里的只读截图 + 过期占位 */
.pr-shots-ro img.is-gone {
  width: 92px; height: 92px; object-fit: cover;
  border: 1px dashed var(--line-2); border-radius: var(--r-s);
  background: var(--glass-2);
}

/* 识别原文：让学生自己判断「是我写错了」还是「机器认错了」 */
.pr-ocr {
  margin: 8px 0 0; padding: 9px 11px; border-radius: var(--r-s);
  border: 1px dashed var(--line-2); background: var(--glass-2);
  font-size: 13px; line-height: 1.75; color: var(--t2); word-break: break-word;
}
/* 只给「机器读成」这个标签上底色。
   千万别写成 .pr-ocr span —— KaTeX 会把每个数学符号都渲染成 <span>，
   一条通配规则能把整行公式刷成一排灰块。 */
.pr-ocr .pr-ocr-t {
  display: inline-block; margin-right: 6px; padding: 1px 6px;
  border-radius: 6px; background: var(--line); color: var(--t3);
  font-size: 11.5px; vertical-align: 1px;
}
.pr-parts { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pr-part {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border: 1px solid var(--line-2); border-radius: var(--r-s);
  background: var(--glass-2); font-size: 13px;
}
.pr-part-l { flex: none; font-weight: 650; color: var(--t3); }
.pr-part-g { flex: 1; min-width: 0; color: var(--t1); word-break: break-word; }
.pr-part-m { flex: none; font-weight: 700; font-size: 14px; }
.pr-part.ok { border-color: rgba(22, 163, 74, .32); background: var(--green-soft); }
.pr-part.ok .pr-part-m { color: var(--green); }
.pr-part.bad { border-color: rgba(229, 72, 77, .3); background: var(--red-soft); }
.pr-part.bad .pr-part-m { color: var(--red); }
.pr-part-hint { margin-top: 6px; font-size: 12px; color: var(--t3); }
.pr-grerr {
  display: flex; align-items: flex-start; gap: 6px; margin: 0 0 6px;
  font-size: 12.5px; line-height: 1.7; color: var(--orange);
}

/* 自评：只有解析、没有标准答案的题靠这一步定分 */
.pr-selfbox {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--r-m);
  border: 1px solid rgba(234, 140, 0, .3); background: var(--orange-soft);
}
.pr-selfbox.done { border-color: var(--line-2); background: var(--glass-2); }
.pr-selfbox-t {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 650; color: var(--t1);
}
.pr-selfbox.done .pr-selfbox-t { color: var(--t2); }
/* 自评分数框：一道题写了七成对，就该能拿七成分，不是只有满分和 0 分两档 */
.pr-selfsc { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.pr-selfsc .pr-selfsc-in {
  width: 80px; padding: 8px 10px; text-align: right;
  font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.pr-selfsc .pr-selfsc-in::-webkit-outer-spin-button,
.pr-selfsc .pr-selfsc-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pr-selfsc-u { font-size: 13px; color: var(--t2); }
.pr-selfbox-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pr-selfbox-h { margin-top: 8px; font-size: 12px; color: var(--t3); }

/* 结果页顶部：还有几道待自评 */
.pr-selfbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; cursor: pointer;
  border-color: rgba(234, 140, 0, .3); background: var(--orange-soft);
  font-size: 13px; color: var(--t2);
}
.pr-selfbar span { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; line-height: 1.7; }
.pr-selfbar b { color: var(--blue); white-space: nowrap; }
.pr-selfbar:hover b { text-decoration: underline; }
.pr-item.pend { border-color: rgba(234, 140, 0, .28); }

/* 判分遮罩：解答题要一题一题过模型，等待必须有进度 */
.pr-grading {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: rgba(246, 247, 250, .84);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pr-grading-b {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 28px 36px; text-align: center;
  border-radius: var(--r-l); border: 1px solid var(--line-2);
  background: var(--glass-solid, #fff); box-shadow: var(--sh-2);
}
.pr-grading-b b { font-size: 15px; color: var(--t1); }
.pr-grading-b p { margin: 0; font-size: 12.5px; color: var(--t3); }
.pr-ring {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--blue);
  animation: pr-spin .8s linear infinite;
}
@keyframes pr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pr-ring { animation-duration: 2s; }
}

/* ---------- 答题卡 / 逐题结果导航 ---------- */
.pr-card { padding: 14px 16px; }
.pr-card-t {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 650; color: var(--t2); margin-bottom: 10px;
}
.pr-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.pr-cell {
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--line-2); background: var(--glass-2);
  color: var(--t2); font: inherit; font-size: 13.5px; font-weight: 600;
  transition: all .16s;
}
.pr-cell:hover { border-color: var(--blue); color: var(--blue); }
.pr-cell.done, .pr-cell.ok { background: var(--green-soft); border-color: rgba(22, 163, 74, .4); color: var(--green); }
.pr-cell.cur { border-color: var(--blue); background: var(--blue); color: #fff; }
.pr-cell.part { background: var(--orange-soft); border-color: rgba(234, 140, 0, .4); color: var(--orange); }
.pr-cell.bad { background: var(--red-soft); border-color: rgba(229, 72, 77, .4); color: var(--red); }
.pr-legend { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12px; color: var(--t3); }
.pr-legend .pr-cell { width: 24px; height: 24px; cursor: default; font-size: 12px; }

/* ---------- 侧栏：本场信息 / 小结 ---------- */
.pr-sess { padding: 14px 16px; }
.pr-sess-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 0; font-size: 13px;
}
.pr-sess-row span { color: var(--t3); }
.pr-sess-row b { font-weight: 650; color: var(--t1); font-variant-numeric: tabular-nums; }
.pr-sess-tip {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line);
  font-size: 12px; line-height: 1.65; color: var(--t3);
}
.pr-sess-act {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line);
}
.pr-sum { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.pr-sum-t { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; }
.pr-sum-t span { color: var(--t3); }
.pr-sum-t b { font-size: 15px; font-variant-numeric: tabular-nums; }
.pr-sum-bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 6px; }
.pr-sum-bar i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--blue), var(--purple));
}

/* ---------- 底部操作 ---------- */
.pr-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pr-foot .btn:disabled { background: rgba(24, 31, 43, .03); border: 1px solid var(--line); color: var(--t3); }
/* 停止练习：与「交卷」区分开，用红色描边提示这是放弃本场 */
.pr-stop { color: var(--red); border: 1px solid rgba(229, 72, 77, .28); }
.pr-stop:hover { background: var(--red-soft); border-color: rgba(229, 72, 77, .45); }
.pr-stop .ico { color: var(--red); }

/* ---------- 结果：得分卡 ---------- */
.pr-score {
  display: flex; align-items: center; gap: 22px;
  padding: 20px 24px;
}
.pr-score-b { flex: none; min-width: 200px; }
.pr-score-n { font-size: 42px; font-weight: 700; color: var(--t1); line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.pr-score-n small { font-size: 18px; font-weight: 500; color: var(--t3); margin-left: 4px; }
.pr-score-l { font-size: 13px; color: var(--t3); margin-top: 2px; }
.pr-score-say { margin-top: 10px; display: inline-flex; }
.pr-score-grid {
  flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; padding-left: 22px; border-left: 1px solid var(--line);
}
.pr-score-grid div { display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center; }
.pr-score-grid b { font-size: 17px; color: var(--t1); font-variant-numeric: tabular-nums; }
.pr-score-grid span { font-size: 12px; color: var(--t3); }

/* ---------- 结果：错题操作条 ---------- */
.pr-wrongbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px;
  border-left: 3px solid var(--orange);
}
.pr-wrongbar.ok { border-left-color: var(--green); color: var(--green); }
.pr-wrongbar-l { display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; color: var(--t1); }
.pr-wrongbar-r { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

/* ---------- 结果：逐题 ---------- */
.pr-list { display: flex; flex-direction: column; gap: 12px; }
.pr-item { padding: 16px 18px; scroll-margin-top: 88px; }
.pr-item.ok { border-left: 3px solid var(--green); }
.pr-item.bad { border-left: 3px solid var(--red); }
.pr-item-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pr-item-no {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--line); color: var(--t2); font-size: 13px; font-weight: 600;
}
.pr-item-sc { font-size: 12.5px; color: var(--t3); font-variant-numeric: tabular-nums; }
.pr-pick { display: inline-flex; align-items: center; gap: 5px;
  margin-left: auto; font-size: 13px; color: var(--t2); cursor: pointer; }

.pr-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.pr-cmp-c { padding: 10px 12px; border-radius: var(--r-xs); background: var(--line); }
/* 正确答案统一用绿色打底，我的答案答错标红、部分正确标橙，一眼看出差在哪 */
.pr-cmp-c.is-ok { background: var(--green-soft); }
.pr-cmp-c.is-ok h5 { color: var(--green); }
.pr-cmp-c.is-bad { background: var(--red-soft); }
.pr-cmp-c.is-bad h5 { color: var(--red); }
.pr-cmp-c.is-part { background: var(--orange-soft); }
.pr-cmp-c.is-part h5 { color: var(--orange); }
.pr-cmp-c h5 { font-size: 12px; color: var(--t3); margin: 0 0 4px; font-weight: 600; }
.pr-cmp-c p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--t1); word-break: break-word; }
.pr-sol { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-xs);
  background: var(--blue-soft); }
.pr-sol h5 { font-size: 12px; color: var(--blue); margin: 0 0 4px; font-weight: 600; }
.pr-sol p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--t1); }

/* ---------- 解答题：只有解析，没有「正确答案」 ----------
   这类题的答案多半就是一句结论或者「见解析」，摆出来对学生没意义。
   于是两栏合一栏，解析升格为主角：字号大一点、留白多一点，
   毕竟学生要对着它给自己打分。 */
.pr-cmp-one { grid-template-columns: minmax(0, 1fr); }
.pr-sol-main { padding: 14px 16px; }
.pr-sol-main h5 { font-size: 12.5px; margin-bottom: 6px; }
.pr-sol-main p { font-size: 14.5px; line-height: 1.9; }

/* 填空整组已传照片的提示（只在组内非最后一道出现） */
.pr-fill-done {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 8px 0 4px; font-size: 12.5px; color: var(--green);
  background: var(--green-soft); border-radius: var(--r-xs); padding: 5px 10px;
}

/* ---------- 选错题弹窗（错题重练共用） ---------- */
.wr-pick-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.wr-pick-top .spacer,
.modal-foot .spacer { margin-left: auto; }
.seg-sm button { padding: 5px 12px; font-size: 12.5px; }
.wr-pick-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: min(52vh, 420px); overflow: auto; padding: 2px;
}
.wr-pick-row {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 9px 11px; border-radius: var(--r-s);
  border: 1.5px solid var(--line-2); background: var(--glass-2);
  transition: border-color .16s, background .16s;
}
.wr-pick-row:hover { border-color: rgba(29, 75, 118, .4); background: var(--glass-solid); }
.wr-pick-row input { margin-top: 3px; flex: none; }
.wr-pick-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wr-pick-stem {
  font-size: 14px; color: var(--t1); line-height: 1.6;
  /* 题干带 KaTeX 行内公式时按渲染结果截两行；按源码字符切会把公式切坏（B72） */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.wr-pick-meta { font-size: 12px; color: var(--t3); }
.wr-pick-n { font-size: 13px; color: var(--t2); }
.wr-pick-n b { font-size: 15px; color: var(--t1); }

/* 已处理完的勾选项：变绿并弱化，避免重复操作 */
.pr-pick.done { color: var(--green); }
.pr-pick input:disabled { opacity: .55; }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
  .pr-layout { grid-template-columns: minmax(0, 1fr); }
  .pr-side { position: static; }
}
@media (max-width: 640px) {
  .pr-hero { flex-direction: column; gap: 14px; padding: 18px; }
  .pr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-his-row { gap: 8px; }
  .pr-his-d { width: auto; }
  .pr-his-n { display: none; }
  .pr-his-s { width: auto; }
  .pr-score { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px; }
  .pr-score-b { min-width: 0; text-align: center; }
  .pr-score-grid {
    padding-left: 0; border-left: 0;
    padding-top: 16px; border-top: 1px solid var(--line);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pr-cmp { grid-template-columns: minmax(0, 1fr); }
  .pr-wrongbar-r { margin-left: 0; width: 100%; }
  .pr-pick { margin-left: 0; width: 100%; }
  .pr-body { padding: 16px; }
}

/* =========================================================
   分享练习（作答页 do.js / 管理页 assign.js）
   ---------------------------------------------------------
   作答页故意做得比「在线练习」更朴素：来的人可能第一次用本站，
   不需要侧栏答题卡，也不需要一堆统计，只要题目、作答区、一个交卷。
   底部那条 bar 用 sticky 而不是 fixed —— fixed 会盖住最后一题的作答区。
   ========================================================= */
.chip-gray { background: rgba(24, 31, 43, .07); color: var(--t3); }

/* ---------- 免登录作答页 ---------- */
.dp-wrap { max-width: 760px; }
.dp-loading, .dp-closed { padding: 26px; text-align: center; color: var(--t2); }
.dp-closed h3 { font-size: 17px; font-weight: 650; margin-bottom: 8px; color: var(--t1, #14181e); }
.dp-closed p { font-size: 13.5px; line-height: 1.75; margin-bottom: 16px; }

.dp-meta { padding: 16px 18px; margin-bottom: 14px; }
.dp-meta-row { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13.5px; color: var(--t2); }
.dp-meta-row b { color: var(--t1, #14181e); font-variant-numeric: tabular-nums; }
.dp-name { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.dp-name span { flex: none; font-size: 13.5px; color: var(--t2); }
.dp-name .input { flex: 1 1 auto; }

.dp-list { display: flex; flex-direction: column; gap: 14px; }
.dp-q { padding: 18px 20px; }
.dp-q.is-done { box-shadow: inset 3px 0 0 var(--green, #1d9e75); }
/* 从「去最后一道拍照」跳过来时闪一下，告诉眼睛落点在哪 */
.dp-q.is-flash { animation: dp-flash 1.3s ease-out; }
@keyframes dp-flash {
  0% { box-shadow: 0 0 0 3px rgba(37, 99, 235, .35); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
.dp-q-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dp-q-n {
  width: 24px; height: 24px; border-radius: 8px; flex: none;
  display: grid; place-items: center; font-size: 13px; font-weight: 650;
  background: rgba(24, 31, 43, .06); color: var(--t2);
}
.dp-q.is-done .dp-q-n { background: var(--green-soft); color: var(--green); }
.dp-q-score { margin-left: auto; font-size: 12.5px; color: var(--t3); }
.dp-stem { font-size: 15.5px; line-height: 1.9; margin-bottom: 14px; }

.dp-bar {
  position: sticky; bottom: 12px; z-index: 5;
  display: flex; align-items: center; gap: 14px;
  margin-top: 18px; padding: 12px 16px; border-radius: var(--r-l);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line);
}
.dp-bar-n { font-size: 13.5px; color: var(--t2); }
.dp-bar-n b { color: var(--t1, #14181e); font-variant-numeric: tabular-nums; }
/* 交卷旁边那个「交卷并存入我的练习记录」是次要动作：
   主按钮仍是交卷，但两个要挨在一起，不能一个贴左一个贴右。 */
.dp-bar-acts {
  margin-left: auto; display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap; justify-content: flex-end;
}
.dp-bar .btn { min-width: 118px; }

/* ---------- 交卷结果 ---------- */
.dp-done { padding: 30px 24px; text-align: center; }
.dp-done-ico {
  width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green-soft); color: var(--green);
}
.dp-done h2 { font-size: 19px; font-weight: 650; margin-bottom: 14px; }
.dp-done-score { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.dp-done-score b { font-size: 38px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.dp-done-score span { font-size: 15px; color: var(--t3); }
.dp-done-score em { font-size: 13px; font-style: normal; color: var(--t3); margin-left: 4px; }
.dp-done-stat { display: flex; justify-content: center; gap: 8px; margin: 14px 0 0; flex-wrap: wrap; }
.dp-done-note {
  margin: 16px auto 0; max-width: 520px; font-size: 13px; line-height: 1.75;
  color: var(--t2); text-align: left; padding: 12px 14px;
  background: var(--orange-soft); border-radius: 12px;
}
.dp-done-acts { margin-top: 22px; display: flex; justify-content: center; gap: 10px; }

/* ---------- 交卷后：把记录存进自己的练习记录 ----------
   这条线是注册的主要入口之一：人刚做完一份卷子，正想知道自己错了哪些，
   此刻说「注册后记录就归你」比在任何广告位上都说服力强。 */
.dp-save {
  margin: 18px auto 0; max-width: 560px; text-align: left;
  padding: 14px 16px; border-radius: 14px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--blue-soft); border: 1px solid rgba(0, 122, 255, .18);
}
.dp-save-t { flex: 1; min-width: 200px; font-size: 13px; line-height: 1.7; color: var(--t2); }
.dp-save-t b { color: var(--t1); font-weight: 600; }
.dp-save .btn { margin-left: auto; }
.dp-save.is-done { background: var(--green-soft); border-color: rgba(52, 199, 89, .22); }
.dp-save.is-done .dp-save-t { color: var(--green); }

/* 内嵌注册表单（弹窗里就地填，不跳页面 —— 跳走的话作答就没了） */
.dp-au { display: flex; flex-direction: column; gap: 10px; }
.dp-au-row { display: flex; flex-direction: column; gap: 5px; }
.dp-au-row > span { font-size: 12.5px; color: var(--t3); }
.dp-au-seg { display: flex; gap: 6px; }
.dp-au-seg button {
  flex: 1; padding: 7px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface, #fff);
  font-size: 13px; color: var(--t2);
}
.dp-au-seg button.on { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.dp-au-err { font-size: 12.5px; color: var(--red); min-height: 16px; }
.dp-au-switch { font-size: 12.5px; color: var(--t3); text-align: center; }
.dp-au-switch a { color: var(--blue); cursor: pointer; text-decoration: none; }

.dp-review { margin-top: 22px; text-align: left; }
.dp-review > summary {
  cursor: pointer; font-size: 14px; font-weight: 550; color: var(--t2);
  padding: 10px 0; list-style: none;
}
.dp-review > summary::-webkit-details-marker { display: none; }
.dp-review > summary::before { content: '▸ '; }
.dp-review[open] > summary::before { content: '▾ '; }
.dp-review-list { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.dp-rv-item { padding: 14px 16px; border-radius: 14px; background: rgba(24, 31, 43, .03); }
.dp-rv-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13.5px; }
.dp-rv-b { display: flex; gap: 10px; margin-top: 6px; font-size: 14px; line-height: 1.8; }
.dp-rv-l { flex: none; width: 34px; font-size: 12.5px; color: var(--t3); padding-top: 3px; }

/* ---------- 发布弹窗 ---------- */
.dp-form { display: flex; flex-direction: column; gap: 14px; }
.dp-f { display: flex; align-items: center; gap: 10px; }
.dp-f > span { flex: none; width: 76px; font-size: 13.5px; color: var(--t2); }
.dp-f .input { flex: 1 1 auto; }
.dp-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.6; color: var(--t2); cursor: pointer; }
.dp-check input { margin-top: 3px; flex: none; }
.dp-ok-t { font-size: 16px; font-weight: 650; margin-bottom: 12px; }
.dp-ok-link {
  padding: 12px 14px; border-radius: 12px; word-break: break-all;
  background: rgba(24, 31, 43, .05); font-size: 13px; line-height: 1.6;
  font-family: var(--font-mono, ui-monospace, monospace); color: var(--t1, #14181e);
}

/* ---------- 管理页：任务列表 ---------- */
.dp-tasks { display: flex; flex-direction: column; gap: 12px; }
.dp-task { display: flex; align-items: center; gap: 16px; padding: 16px 18px; }
.dp-task-main { min-width: 0; flex: 1 1 auto; }
.dp-task-t { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; flex-wrap: wrap; }
.dp-task-m { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 7px; font-size: 12.5px; color: var(--t3); }
.dp-task-m b { color: var(--t1, #14181e); font-variant-numeric: tabular-nums; }
.dp-task-act { flex: none; display: flex; gap: 8px; }
/* 同名的两份练习常分不清谁是谁，分享码用小字等宽摆出来 */
.dp-task-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
/* 收到作答是本页最重要的信息，给它一点颜色 */
.dp-task-hit { color: var(--blue); }
.dp-task-hit b { color: var(--blue); }
.dp-empty { padding: 34px 24px; text-align: center; }
.dp-empty h3 { font-size: 16px; font-weight: 650; margin-bottom: 8px; }
.dp-empty p { font-size: 13.5px; line-height: 1.8; color: var(--t2); max-width: 460px; margin: 0 auto 18px; }

/* ---------- 管理页：详情 ---------- */
.dp-dhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.dp-dhead-t { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 650; }
.dp-dhead-act { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.dp-dhead-act .dp-del { color: var(--red); }
.dp-stats { margin-bottom: 14px; }
.dp-sec-t { font-size: 13.5px; font-weight: 600; color: var(--t2); margin-bottom: 12px; }
.dp-per { padding: 16px 18px; margin-bottom: 14px; }
.dp-per-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; }
.dp-per-n { flex: none; width: 22px; text-align: right; color: var(--t3); font-variant-numeric: tabular-nums; }
.dp-per-type { flex: none; width: 58px; color: var(--t3); }
.dp-per-bar { flex: 1 1 auto; height: 7px; border-radius: 999px; background: rgba(24, 31, 43, .07); overflow: hidden; }
.dp-per-bar i { display: block; height: 100%; border-radius: 999px; background: var(--green, #1d9e75); }
.dp-per-v { flex: none; width: 44px; text-align: right; font-variant-numeric: tabular-nums; color: var(--t2); }
.dp-per-c { flex: none; width: 52px; text-align: right; color: var(--t3); font-variant-numeric: tabular-nums; }

.dp-att { padding: 16px 18px; }
.dp-att-list { display: flex; flex-direction: column; }
.dp-att-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--line); font-size: 13.5px;
}
.dp-att-row:first-child { border-top: 0; }
.dp-att-n { flex: none; width: 96px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-att-d { flex: none; width: 96px; color: var(--t3); font-variant-numeric: tabular-nums; }
.dp-att-u { flex: none; width: 96px; color: var(--t3); }
.dp-att-s { flex: none; width: 74px; font-weight: 650; font-variant-numeric: tabular-nums; }
.dp-att-s small { font-weight: 400; color: var(--t3); }
.dp-att-row .btn { margin-left: auto; }

/* ---------- 一份作答的明细 ---------- */
.dp-am-h { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; font-size: 13.5px; color: var(--t3); flex-wrap: wrap; }
.dp-am-h b { font-size: 15px; color: var(--t1, #14181e); }
.dp-am-s { margin-left: auto; font-size: 16px; font-weight: 650; color: var(--t1, #14181e); font-variant-numeric: tabular-nums; }
.dp-am-q { padding: 14px 0; border-top: 1px solid var(--line); }
.dp-am-qh { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.dp-am-n {
  width: 22px; height: 22px; border-radius: 7px; flex: none; display: grid; place-items: center;
  background: rgba(24, 31, 43, .06); color: var(--t2); font-size: 12.5px; font-weight: 650;
}
.dp-am-st { font-weight: 600; }
.dp-am-st.dp-ok { color: var(--green); }
.dp-am-st.dp-bad { color: var(--red); }
.dp-am-st.dp-wait { color: var(--orange); }
.dp-am-sc { margin-left: auto; color: var(--t3); font-variant-numeric: tabular-nums; }
.dp-am-b { margin-top: 8px; padding-left: 30px; }
.dp-am-l { display: flex; gap: 10px; font-size: 14px; line-height: 1.8; margin-top: 6px; }
.dp-am-l > span { flex: none; width: 60px; font-size: 12.5px; color: var(--t3); padding-top: 3px; }
.dp-am-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dp-am-img {
  width: 128px; height: 96px; object-fit: contain; cursor: zoom-in;
  border-radius: 10px; border: 1px solid var(--line); background: #fff;
}
.dp-am-more { margin-top: 8px; }
.dp-am-more > summary { cursor: pointer; font-size: 12.5px; color: var(--t3); list-style: none; }
.dp-am-more > summary::-webkit-details-marker { display: none; }
.dp-am-more > summary::before { content: '▸ '; }
.dp-am-more[open] > summary::before { content: '▾ '; }
.dp-am-grade {
  display: flex; align-items: center; gap: 8px; margin: 10px 0 0 30px;
  padding: 10px 12px; border-radius: 12px; background: var(--orange-soft);
  font-size: 12.5px; color: var(--t2);
}
.dp-am-grade .input { width: 84px; flex: none; }
.dp-entry { margin-top: 14px; display: flex; gap: 10px; }

@media (max-width: 640px) {
  .dp-q { padding: 16px; }
  .dp-task { flex-direction: column; align-items: stretch; }
  .dp-task-act { justify-content: flex-end; }
  .dp-att-row { flex-wrap: wrap; }
  .dp-att-n { width: auto; }
  .dp-att-s { width: auto; margin-left: auto; }
  .dp-dhead-act { margin-left: 0; width: 100%; }
  .dp-am-img { width: 96px; height: 72px; }
  .dp-bar .btn { min-width: 96px; }
}