/* System → Data — what is stored, backups, and the reset. */
.dat-note .panel-b { display:flex; flex-direction:column; gap:4px; }
.dat-note b { display:flex; align-items:center; gap:8px; }
.dat-note b .i { width:16px; height:16px; color:var(--gold); }
.dat-note span { color:var(--muted); font-size:13px; }

.dat-tbl tbody tr { cursor:pointer; }
.dat-tbl tbody tr.on { background:color-mix(in srgb, var(--gold-soft) 55%, transparent); }
.dat-tbl input[type="checkbox"], .dat-chk input { width:16px; height:16px; accent-color:var(--gold); }
.dat-tbl tfoot td { border-top:1px solid var(--line); padding-top:10px; }

.dat-chk { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2); cursor:pointer; }
.dat-lead { margin:0; color:var(--muted); font-size:13.5px; max-width:70ch; }
.dat-picked { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.row.wrap { flex-wrap:wrap; gap:8px; }
.row.end { justify-content:flex-end; }

.danger-zone { border-color:color-mix(in srgb, var(--bad) 40%, var(--line)); }
.danger-zone .panel-h { background:color-mix(in srgb, var(--bad-soft) 60%, transparent); }
.danger-zone .panel-h h2 { display:flex; align-items:center; gap:8px; }
.danger-zone .panel-h .i { width:16px; height:16px; color:var(--bad); }

.dat-warnrow { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:10px;
  background:var(--bad-soft); border:1px solid color-mix(in srgb, var(--bad) 32%, transparent); margin-bottom:12px; }
.dat-warnrow .i { width:18px; height:18px; color:var(--bad); flex:none; margin-top:1px; }
.dat-warnrow span { display:block; color:var(--ink-2); font-size:13px; }
.note.bad { border-color:color-mix(in srgb, var(--bad) 30%, transparent); background:var(--bad-soft); }
.dat-form { margin-top:14px; }
.dat-form .code { letter-spacing:.04em; }
.dat-done b { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.dat-done b .i { width:18px; height:18px; color:var(--ok); }