/* ============================================================================
   待购清单（项目「待购」标签页）
   ----------------------------------------------------------------------------
   ① 采购进度汇总条
   ② 我的待购：按阶段分组 + 勾选已购
   ③ 采购参考库：大类 → 小类 → 物品，可整组或勾选加入
   ========================================================================== */

/* ---------- ① 汇总条 ---------- */
.sh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden; }
.sh-stats > div { background: var(--surface-2); padding: 11px 14px;
  display: flex; flex-direction: column; gap: 5px; }
.sh-stats b { font-size: 19px; font-weight: 700; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; line-height: 1.2; }
.sh-stats b.sh-done { color: var(--st-done); }

/* 分组头里的进度条比预算页窄一些 */
.sh-bar { width: 72px; flex: 0 0 auto; }

/* ---------- ② 我的待购 ---------- */
.sh-row {
  display: flex; align-items: flex-start; gap: 11px; padding: 10px;
  border-radius: var(--r-sm); position: relative;
  transition: background var(--dur) var(--ease);
}
.sh-row:hover { background: var(--surface-2); }
.sh-row.is-done .sh-name { color: var(--text-3); text-decoration: line-through; }
.sh-row.is-done { opacity: 0.72; }

/* 勾选圆框：点击即标记已购 */
.sh-check {
  width: 21px; height: 21px; flex-shrink: 0; margin-top: 1px;
  border-radius: 7px; cursor: pointer; padding: 0;
  display: grid; place-items: center;
  background: var(--surface-3); color: #fff;
  border: 1.5px solid var(--border-strong);
  transition: all var(--dur) var(--ease);
}
.sh-check:hover { border-color: var(--st-done); }
.sh-check.on { background: var(--st-done); border-color: var(--st-done); }
.sh-check:disabled { cursor: default; opacity: 0.55; }

.sh-body { flex: 1; min-width: 0; }
.sh-name { font-size: 14px; line-height: 1.45;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- ③ 采购参考库 ---------- */
.sh-lib-bar { margin-bottom: 14px; }
.sh-lib-group .bg-acc-hd { cursor: pointer; }

.sh-sub { padding: 8px 0 4px; }
.sh-sub + .sh-sub { border-top: 1px dashed var(--border); margin-top: 6px; }
.sh-sub-hd { display: flex; align-items: center; gap: 10px;
  padding: 4px 6px 8px; font-size: 12.5px; font-weight: 640; color: var(--text-2); }

.sh-lib-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px;
  border-radius: var(--r-sm); cursor: pointer; font-size: 13px;
  transition: background var(--dur) var(--ease);
}
.sh-lib-row:hover { background: var(--surface-2); }
.sh-lib-row.picked { background: var(--brand-soft); }
.sh-lib-cb { width: 15px; height: 15px; flex-shrink: 0; cursor: pointer;
  accent-color: var(--brand-1); }
.sh-lib-name { flex-shrink: 0; min-width: 96px; font-weight: 560; }
.sh-lib-row .btn { flex-shrink: 0; opacity: 0; transition: opacity var(--dur) var(--ease); }
.sh-lib-row:hover .btn { opacity: 1; }
/* 触屏无 hover，按钮常显，否则点不到 */
@media (hover: none) {
  .sh-lib-row .btn { opacity: 0.7; }
}

@media (max-width: 720px) {
  .sh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-lib-name { min-width: 0; }
  .sh-lib-row { flex-wrap: wrap; }
}