/* ============================================================
   系统层：数据安全面板、性能（骨架屏 / 懒加载）、手势反馈、可访问性与动效降级。
   ============================================================ */

/* ---------- P3-4 数据安全 ---------- */
.cap-top { display:flex; align-items:baseline; gap:8px; margin: 2px 0 8px; }
.cap-top b { font-size: calc(23px * var(--fs)); font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--text); }
.cap-top span { font-size: calc(12px * var(--fs)); color:var(--text-secondary); }
.cap-bar { height:9px; border-radius:999px; background:var(--border); overflow:hidden; }
.cap-bar i { display:block; height:100%; border-radius:999px; background:var(--accent); transition:width .3s ease; }
.cap-bar i.warn { background:#f59e0b; }
.cap-bar i.danger { background:var(--danger); }
.cap-note { font-size: calc(11.5px * var(--fs)); color:var(--text-tertiary); margin-top:7px; line-height:1.5; }
.size-row { display:flex; align-items:center; gap:9px; margin-top:9px; }
.size-row .sname { flex:0 0 86px; font-size: calc(12.5px * var(--fs)); font-weight:600; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.size-row .sbar { flex:1; height:7px; border-radius:999px; background:var(--border); overflow:hidden; }
.size-row .sbar i { display:block; height:100%; border-radius:999px; background:var(--module-2); }
.size-row .skb { flex:0 0 66px; text-align:right; font-size: calc(11.5px * var(--fs)); color:var(--text-secondary); font-variant-numeric:tabular-nums; }
.snap-sec { margin-top:16px; }
.snap-sec > h3 { font-size: calc(12.5px * var(--fs)); font-weight:700; color:var(--text-secondary); }
.snap-row { display:flex; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--border); }
.snap-row:last-child { border-bottom:none; }
.snap-row .sday { font-size: calc(13.5px * var(--fs)); font-weight:700; color:var(--text); }
.snap-row .smeta { font-size: calc(11.5px * var(--fs)); color:var(--text-secondary); margin-top:1px; }
.snap-row .sact { margin-left:auto; }
.chk-line { display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid var(--border);
  cursor:pointer; font-size: calc(14px * var(--fs)); font-weight:600; color:var(--text); }
.chk-line:last-child { border-bottom:none; }
.chk-line .cbox { width:18px; height:18px; border-radius:5px; border:1.5px solid var(--border-input);
  display:grid; place-items:center; color:#fff; flex:0 0 auto; }
.chk-line .cbox svg { opacity:0; }
.chk-line.on .cbox { background:var(--accent); border-color:var(--accent); }
.chk-line.on .cbox svg { opacity:1; }
.chk-line .cnum { margin-left:auto; font-size: calc(11.5px * var(--fs)); color:var(--text-secondary); font-variant-numeric:tabular-nums; }

/* ---------- P3-3 性能与规模 ---------- */
.sk { padding-top: 6px; }
.sk-row { height: 64px; border-radius: var(--radius-card); background: var(--surface-card);
  border: 1px solid var(--border); margin-bottom: 10px; position: relative; overflow: hidden; }
.sk-row::after { content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 7%, transparent), transparent);
  animation: skg 1.2s ease-in-out infinite; }
@keyframes skg { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.rec-more { display:flex; align-items:center; justify-content:center; gap:7px; padding:15px 0 8px;
  font-size: calc(13px * var(--fs)); font-weight:600; color:var(--text-secondary); cursor:pointer;
  -webkit-tap-highlight-color: transparent; }
.rec-more:active { color:var(--accent); }

/* ---------- P3-5 手势与反馈 ---------- */
html, body { overscroll-behavior-y: contain; }
.rec { touch-action: pan-y; }
.rec.swiping { padding: 0; overflow: hidden; background: transparent; }
.rec-slide { position:relative; padding: 13px 14px; background: var(--surface-card);
  border-radius: calc(var(--radius-tile) - 1px); will-change: transform; }
.rec.swiping .rec-slide { transition: transform .2s cubic-bezier(.22,1,.36,1); }
.rec-bg { position:absolute; inset:0; display:flex; align-items:center; gap:6px;
  padding: 0 18px; font-size: calc(12.5px * var(--fs)); font-weight: 700; color:#fff; opacity:0;
  border-radius: var(--radius-tile); transition: opacity .12s linear; }
.rec-bg svg { flex: 0 0 auto; }
.rec-bg.lb { justify-content: flex-start; background: var(--accent); }
.rec-bg.rb { justify-content: flex-end; background: var(--danger); }
.ptr { position: fixed; left: 50%; top: calc(var(--safe-t) + 6px); z-index: 45;
  transform: translate(-50%, -180%); display: flex; align-items: center; gap: 7px;
  padding: 7px 15px; border-radius: 999px; background: var(--surface-card);
  border: 1px solid var(--border); box-shadow: var(--shadow-card);
  font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--text-secondary);
  transition: transform .24s cubic-bezier(.22,1,.36,1); -webkit-tap-highlight-color: transparent; }
.ptr.show { transform: translate(-50%, 0); }
.ptr.ready { color: var(--accent); border-color: var(--accent); }
.ptr .spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--border);
  border-top-color: var(--accent); animation: spin .7s linear infinite; }
.ptr.busy .spin { display: block; }
.ptr:not(.busy) .spin { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- P3-6 可访问性 ---------- */
/* 键盘可达时给出清晰的焦点圈（触摸/鼠标点击不显示，避免视觉噪音） */
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-control); }
.rec .chk:focus-visible, .seg .opt:focus-visible, .ditem:focus-visible, .n:focus-visible { outline-offset: 1px; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .sk-row::after { display: none; }
}