/* Your data */

.data .panel { display: grid; gap: 14px; align-content: start; }
.data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
@media (max-width: 760px) { .data-grid { grid-template-columns: minmax(0, 1fr); } }

.stored { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stored li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
}
.stored li.none { color: var(--muted); }
.stored strong { font-variant-numeric: tabular-nums; }

.restore-step { display: grid; gap: 10px; border-top: 2px solid var(--line); padding-top: 14px; }
.notice-line { background: var(--secondary-light); border-radius: var(--r-sm); padding: 10px 14px; font-size: 0.92rem; }

.danger-zone { border: 2px solid var(--secondary-light); box-shadow: none; }
.wipe-confirm { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; }

/* App lock settings */
.lock-panel .chip.on { background: var(--primary); color: var(--on-primary); }
.lock-form { display: grid; gap: 14px; }
.pin-input { font-family: var(--font-mono); letter-spacing: 0.3em; font-size: 1.1rem; }
.inline-field { grid-auto-flow: column; align-items: center; gap: 10px; }
.inline-field .input { width: auto; }
.lock-more { border-top: 2px solid var(--line); padding-top: 12px; }
.lock-more summary { cursor: pointer; font-weight: 800; color: var(--link); padding: 4px 0; }
.lock-more[open] summary { margin-bottom: 12px; }
#lock-off, #lock-on { display: grid; gap: 14px; }
#lock-off[hidden], #lock-on[hidden] { display: none; }

/* Backup: when the last one was, and a soft highlight when opened from the reminder */
.backup-panel { scroll-margin-top: 120px; transition: box-shadow .4s ease; }
.backup-panel.flash { box-shadow: 0 0 0 3px var(--lav), 0 0 30px rgba(155, 93, 229, 0.35); }
.last-backup { font-weight: 800; font-size: 0.92rem; color: var(--link); margin-top: -4px; }
.last-backup[data-state="never"], .last-backup[data-state="old"] { color: #FFB3D6; }