html,
body,
#app,
.popup-root {
  width: 320px;
  min-height: 520px;
  height: 520px;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--bg);
  color: var(--t0);
  font-family: var(--font-ui);
  font-weight: 300;
  position: relative;
}

* {
  box-sizing: border-box;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
}

.popup-root {
  position: relative;
  overflow: hidden;
}

.peach-theme {
  color: var(--peach-t0);
  font-family: var(--font-ui);
  font-weight: 300;
  box-sizing: border-box;
  text-align: left;
}
.peach-theme, .peach-theme * { box-sizing: inherit; }

.peach-brand-mark {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.peach-status-pip.is-hidden {
  display: none;
}

.peach-status-pip.unlocked {
  background: var(--peach-health-ok);
  box-shadow: 0 0 6px rgba(100, 210, 100, 0.6);
}

.peach-status-pip.pulse {
  animation: pip-pulse 400ms var(--peach-curve-settle) both;
}

/* Shell */
.peach-shell, .peach-screen {
  background:
    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),
    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),
    var(--peach-bg);
  border: 1px solid var(--peach-t3);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.55),
    0 14px 48px rgba(0,0,0,0.7),
    0 0 0 1px rgba(240,232,216,0.04);
  overflow: hidden;
}
.peach-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 520px;
  position: relative;
  isolation: isolate;
}

.peach-shell[data-surface="extension"] {
  width: min(320px, 100vw);
  border-radius: 0;
  height: 520px;
  max-height: 520px;
  overflow: hidden;
}

/* ── Lock screen – full-window lock/create stage ── */
.lock-screen--vault-stage {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 18px 18px;
  justify-content: flex-start;
}
.lock-screen--vault-stage .peach-lock-panel {
  margin-top: auto;
}
.peach-lock-headline--unlock {
  max-width: 220px;
}
.peach-lock-hero--unlock {
  padding-top: 14px;
}
.peach-lock-panel--unlock {
  gap: 10px;
}

.peach-lock-restore-link {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--t1);
  padding: 5px 0;
  text-align: left;
  transition: color 150ms ease;
}

.peach-lock-restore-link:hover {
  color: var(--t0);
}
.peach-shell[data-surface="extension"] .peach-stage {
  min-height: 250px;
}

/* Screen (unlock) */
.peach-screen {
  width: min(320px, 100vw);
  min-height: 100%;
  height: 100%;
  border-radius: 0;
  padding: 16px 20px 18px;
  display: grid;
  gap: 14px;
}
.peach-screen[data-motion-phase="enter"] {
  animation: peach-screen-enter var(--peach-dur-600) var(--peach-curve-arrival) both;
}
.peach-screen-header { min-height: 20px; }

/* Wordmark */
.peach-wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-style: italic;
  letter-spacing: 0.03em;
  color: var(--peach-t0);
  display: inline-flex;
  min-height: 1em;
}

/* Motion text / char animation */
.peach-motion-text { display: inline-flex; min-height: 1em; }
.peach-motion-char {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  transform: translateY(0.22em);
  animation: peach-char-enter var(--peach-motion-duration, 380ms) var(--peach-curve-arrival) forwards;
  animation-delay: calc(var(--peach-char-index, 0) * 20ms);
}

/* Chrome */
.peach-chrome {
  position: relative;
  z-index: 10;
  padding: 16px 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense
     fallback) per §15 regression guard. Without pointer-events:none, the
     empty header strip also sits above `.peach-overlay-view` (z-index:2)
     and swallows clicks meant for an overlay's back button / top search. */
  pointer-events: none;
}
.peach-chrome .peach-btn { pointer-events: auto; }
.peach-chrome.is-hidden-for-overlay,
.peach-search-wrap.is-hidden-for-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* The pair-device surface owns its own header and header — fully collapse the global
   chrome row so the warm gradient reaches the popup edge. */
.peach-chrome.is-collapsed,
.peach-search-wrap.is-collapsed {
  display: none;
}
.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }
.peach-status-pip {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--peach-t3);
  display: inline-flex;
  flex-shrink: 0;
  transition: background 400ms ease, box-shadow 400ms ease;
}
.peach-chrome-actions { display: flex; gap: 6px; }

/* Shell body */
.peach-shell-body {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  height: 100%;
}
.peach-shell-veil {
  position: absolute; inset: 0;
  background: #000; opacity: 0;
  pointer-events: none; z-index: 1;
}
.peach-shell[data-motion-phase="enter"] .peach-shell-body {
  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;
}
.peach-shell[data-motion-phase="exit"] .peach-shell-veil {
  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;
}

/* Content frame */
.peach-content-frame {
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  transition: opacity 80ms ease, transform 80ms ease;
}
.peach-content-frame.navigating {
  opacity: 0.93;
  transform: translateX(2px);
}
.peach-content-frame[data-content-phase="enter"] {
  animation: peach-content-enter 135ms ease-out both;
}
.peach-content-frame[data-content-phase="exit"] {
  animation: peach-content-exit 95ms ease-in forwards;
}
.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }

/* Stage */
.peach-stage {
  padding: 10px 20px 12px;
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}
.peach-stage::-webkit-scrollbar { display: none; }

/* Entry name */
.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }
.peach-entry-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.peach-entry-header-name {
  flex: 1;
  min-width: 0;
}
.peach-entry-name {
  margin: 0;
  padding-bottom: 0.12em;
  font-family: var(--font-display);
  font-style: italic; font-weight: 400;
  font-size: 44px; line-height: 0.95;
  color: var(--peach-t0);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: balance;
}
.peach-entry-name--lg { font-size: 40px; }
.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }
.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }
.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }

/* Trash icon in entry header */
.peach-entry-trash-btn {
  flex-shrink: 0;
  padding: 4px;
  margin-top: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--peach-t2);
  border-radius: 4px;
  transition: color 140ms ease, background 140ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.peach-entry-trash-btn:hover {
  color: var(--peach-t1);
  background: var(--peach-t3);
}
.peach-entry-trash-confirm {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-top: 6px;
  flex-wrap: nowrap;
}
.peach-entry-trash-confirm-label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  color: var(--peach-t2);
  white-space: nowrap;
}
.peach-entry-name-button {
  padding: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  display: block;
}
.peach-entry-name-char {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  transform: translateY(0.22em);
  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;
  animation-delay: calc(var(--char-index, 0) * 20ms);
}

/* Domain */
.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }
.peach-domain-row {
  width: 100%; border: 0; background: transparent; color: inherit;
  padding: 0; display: flex; justify-content: space-between; align-items: baseline;
  cursor: default;
}
.peach-domain-value {
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  font-size: 0.625rem; font-style: italic;
  letter-spacing: 0.12em; color: var(--peach-t1);
}

/* Fields */
.peach-fields { display: grid; gap: 10px; }
.peach-field-card { display: grid; gap: 7px; }
.peach-label {
  font-family: Inter, system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.5rem; color: var(--peach-t2);
}
.peach-add-field-btn {
  align-self: flex-start;
  background: none; border: none; padding: 2px 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.6875rem; color: var(--peach-accent);
  cursor: pointer; opacity: 0.75;
  letter-spacing: 0.02em;
}
.peach-add-field-btn:hover { opacity: 1; }
.peach-field-value-row {
  display: flex; justify-content: space-between;
  align-items: center; gap: 8px;
  min-width: 0;
}
.peach-field-value {
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  font-size: 0.8125rem; color: var(--peach-t1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.peach-password-value {
  display: inline-flex;
  align-items: center;
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  font-size: 1rem; letter-spacing: 0.3em; color: var(--peach-t0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  max-width: 100%;
}
.peach-password-value.is-revealed {
  font-size: 0.875rem;
  letter-spacing: 0.08em;
}
.peach-password-text,
.peach-password-mask {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  /* Render as uniform mid-line bullets, not baseline periods */
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.625rem;
  letter-spacing: 3px;
  user-select: none;
}
.peach-field-actions { display: flex; gap: 4px; align-items: center; }
.peach-password-strength { display: flex; align-items: center; gap: 8px; }
.peach-strength-bar { display: flex; gap: 3px; }
.peach-strength-seg { width: 28px; height: 4px; border-radius: 2px; background: #eee; }
.peach-strength-label {
  font-family: "IBM Plex Mono", monospace;
  font-style: italic;
  font-size: 0.5625rem;
  font-weight: 300;
  min-width: 36px;
  text-align: right;
  color: var(--peach-t2);
  letter-spacing: 0.06em;
}

.peach-strength-hairline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -2px;
}

.peach-strength-hairline-track {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--peach-s2);
  overflow: hidden;
}

.peach-strength-hairline-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),
    background 400ms ease;
}

/* Note content (display) */
.peach-note-content {
  border-top: 1px solid var(--peach-t3);
  padding-top: 10px;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--peach-t1);
}

/* ── Inline editing ─────────────────────────────────────────────────── */

/* Clickable display values */
.peach-inline-clickable {
  cursor: text;
  border-radius: 3px;
  transition: background 150ms ease;
}
.peach-inline-clickable:hover {
  background: rgba(240, 232, 216, 0.05);
}

/* Subtle "edit" hint that appears on hover */
.peach-inline-edit-hint {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--peach-t2);
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
  margin-left: 6px;
  flex-shrink: 0;
}
.peach-domain-row:hover .peach-inline-edit-hint {
  opacity: 1;
}

/* Title editing */
.peach-inline-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.peach-inline-title-input {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 40px;
  line-height: 0.95;
  color: var(--peach-t0);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--peach-accent);
  outline: none;
  width: 100%;
  padding: 2px 0;
}

/* Generic inline field */
.peach-inline-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.peach-inline-input {
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  font-size: 0.8125rem;
  color: var(--peach-t0);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--peach-accent);
  outline: none;
  width: 100%;
  padding: 3px 0;
}
.peach-inline-textarea {
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  font-size: 0.6875rem;
  line-height: 1.7;
  color: var(--peach-t0);
  background: rgba(240, 232, 216, 0.04);
  border: 1px solid var(--peach-accent);
  border-radius: 4px;
  outline: none;
  width: 100%;
  padding: 8px;
  resize: vertical;
  min-height: 80px;
}

/* Save / cancel row */
.peach-inline-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.peach-inline-save-btn,
.peach-inline-cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background 140ms ease, opacity 140ms ease;
  flex-shrink: 0;
}
.peach-inline-save-btn {
  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);
  color: var(--peach-accent);
}
.peach-inline-save-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--peach-accent) 30%, transparent);
}
.peach-inline-cancel-btn {
  background: rgba(240, 232, 216, 0.06);
  color: var(--peach-t2);
}
.peach-inline-cancel-btn:hover:not(:disabled) {
  background: rgba(240, 232, 216, 0.12);
  color: var(--peach-t1);
}
.peach-inline-save-btn:disabled,
.peach-inline-cancel-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Inline password generator wrapper */
.peach-inline-generator-wrap {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--peach-t3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.peach-inline-generator-cancel {
  align-self: flex-start;
  font-size: 0.6875rem;
  color: var(--peach-t2);
}

/* "is-editing" card state */
.peach-field-card.is-editing {
  background: rgba(240, 232, 216, 0.02);
  border-radius: 6px;
  padding: 8px;
  margin: -8px;
}

/* Inline tag editor on Entry detail view */
.peach-inline-tag-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Quiet inline "+ add X" link in the entry detail body */
.peach-entry-add-link {
  justify-self: start;
  margin-top: 8px;
}

/* Additional URLs editor revealed by clicking the URL field */
.peach-additional-urls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.peach-additional-urls-label {
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--peach-t2);
  margin-bottom: 2px;
}
/* UI-5 / LV-4: recovery words grid in the view-words reveal. */
.peach-recovery-words-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
}
.peach-recovery-word {
  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
  font-size: 11px;
  color: var(--peach-t0);
}
.peach-recovery-word b {
  color: var(--peach-t2);
  font-weight: 400;
  margin-right: 4px;
}

/* UI-1 / HV-1b: dismissible sync alert banners at the top of the vault view. */
.peach-sync-alerts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px 0;
}
.peach-sync-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  background: color-mix(in srgb, #C8A840 14%, transparent);
  border: 1px solid color-mix(in srgb, #C8A840 38%, transparent);
}
.peach-sync-alert-text {
  flex: 1;
  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
  font-size: 10px;
  line-height: 1.45;
  color: var(--peach-t0);
}
.peach-sync-alert-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--peach-t2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.peach-sync-alert-dismiss:hover { color: var(--peach-t0); }

/* UI-8 / LV-2: non-blocking homograph warning under the URL editor. */
.peach-homograph-warning {
  margin: 4px 0 2px;
  padding: 6px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--peach-breach) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--peach-breach) 36%, transparent);
  color: var(--peach-t1);
  font-size: 0.6875rem;
  line-height: 1.4;
}
.peach-additional-url-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }
.peach-additional-url-remove {
  background: transparent;
  border: 1px solid var(--peach-t3);
  color: var(--peach-t2);
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 120ms ease, border-color 120ms ease;
}
.peach-additional-url-remove:hover:not(:disabled) {
  color: var(--peach-accent);
  border-color: var(--peach-border-accent);
}
.peach-additional-urls-add { align-self: flex-start; }

/* Delete row */
.peach-entry-delete-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 18px;
  margin-top: 8px;
  border-top: 1px solid var(--peach-t3);
}
.peach-delete-btn {
  font-size: 0.6875rem;
  color: var(--peach-t2);
  padding: 4px 0;
}
.peach-delete-confirm-text {
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  font-size: 0.6875rem;
  font-style: italic;
  color: var(--peach-t2);
  flex-shrink: 0;
}

/* TOTP band */
.peach-totp-band {
  border-top: 1px solid var(--peach-t3);
  padding: 12px 20px 14px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.peach-totp-main {
  min-width: 0;
  cursor: pointer;
  user-select: none;
}
.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }
.peach-totp-code-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-width: 0;
}
.peach-totp-code {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 38px; color: var(--peach-accent);
  line-height: 0.95; min-height: 1em;
  min-width: 0;
}
.peach-totp-code-text {
  display: inline-flex;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.peach-totp-copy-btn {
  margin-bottom: 2px;
  flex-shrink: 0;
  border-color: transparent;
}
.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }
.peach-totp-countdown {
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  font-size: 22px; color: var(--peach-t1);
}
.peach-totp-ring { transform: rotate(-90deg); }
.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }
.peach-totp-ring-progress {
  fill: none; stroke: var(--peach-accent); stroke-width: 2;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear, stroke 500ms ease;
}
/* Search bar */
.peach-search-wrap {
  border-top: 1px solid var(--peach-t3);
  background: var(--peach-s1);
  min-height: 54px; position: relative;
  box-shadow: inset 0 6px 18px transparent;
  transition: box-shadow 700ms ease;
}
.peach-search-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: var(--peach-totp-progress, 0%);
  background: var(--peach-accent);
  opacity: 0;
  transition: width 1s linear, opacity 180ms ease;
  pointer-events: none;
}
.peach-shell[data-totp-active="true"] .peach-search-wrap::before {
  opacity: 0.9;
}
.peach-shell[data-totp-active="true"] .peach-search-wrap {
  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);
}

@keyframes peach-totp-code-flare {
  0%   { filter: brightness(1); }
  25%  { filter: brightness(1.3); }
  100% { filter: brightness(1); }
}
.peach-totp-code.is-hot {
  animation: peach-totp-code-flare 3000ms ease-in-out both;
}
.peach-search-bar {
  min-height: 54px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px; padding: 0 9px 0 12px;
}
.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }
.peach-search-input {
  border: 0; background: transparent; color: var(--peach-t0);
  font-family: var(--font-display);
  font-style: italic; font-size: 18px;
  outline: none; width: 100%; min-width: 0; padding: 0;
  caret-color: var(--peach-accent);
}
.peach-search-input::placeholder { color: var(--peach-t2); }
.peach-search-meta {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: end;
  gap: 6px;
  min-width: max-content;
}
.peach-search-counter {
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  font-size: 0.625rem; color: var(--peach-t2);
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }

/* Buttons */
.peach-btn {
  border: 1px solid transparent; border-radius: 12px;
  background: transparent; color: var(--peach-t0);
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;
  cursor: pointer;
  transition:
    background-color var(--peach-dur-80) var(--peach-curve-arrival),
    color var(--peach-dur-80) var(--peach-curve-arrival),
    border-color var(--peach-dur-150) var(--peach-curve-arrival);
}
.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }
.peach-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }
.peach-btn--md { min-height: 38px; }
.peach-btn--accent {
  background: var(--peach-accent);
  color: rgba(0,0,0,0.92);
  font-weight: 500;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),
    0 3px 16px var(--peach-glow),
    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);
}
.peach-btn--accent:hover:not(:disabled) {
  background: var(--peach-accent);
  filter: brightness(1.10) saturate(1.05);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),
    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),
    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);
}
.peach-btn--ghost:not(.peach-icon-btn) { border-color: var(--peach-t3); color: var(--peach-t1); }
.peach-btn--ghost.peach-icon-btn { color: var(--peach-t1); }
.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }
.peach-icon-btn {
  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-color: transparent;
  transition:
    color var(--peach-dur-80) var(--peach-curve-arrival),
    box-shadow var(--peach-dur-150) var(--peach-curve-arrival),
    background-color var(--peach-dur-80) var(--peach-curve-arrival);
}
.peach-icon-btn:hover:not(:disabled) {
  background: transparent;
  color: var(--peach-accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--peach-accent) 28%, transparent),
              0 0 4px color-mix(in srgb, var(--peach-accent) 16%, transparent);
}

/* Topbar sync. Only rendered when a device is paired, so it never sits there
   as a control that cannot do anything. */
.peach-sync-btn.is-syncing { color: var(--peach-accent); }
.peach-sync-btn.is-syncing .peach-sync-icon {
  animation: peach-sync-spin 900ms linear infinite;
  transform-origin: 50% 50%;
}
.peach-sync-btn.is-ok { color: var(--peach-accent); }
.peach-sync-btn.is-error { color: var(--peach-breach, #d66); }
@keyframes peach-sync-spin { to { transform: rotate(360deg); } }

/* Sync indicator light — same taxonomy as the Settings pip, sized for the
   14px topbar icon. Unlit when nothing has happened yet; never green when
   sync is not actually working. */
.peach-sync-btn { position: relative; }
.peach-sync-pip {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
}
.peach-sync-pip.is-ok,
.peach-sync-pip.is-busy {
  background: var(--peach-health-ok);
  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-health-ok) 60%, transparent);
}
.peach-sync-pip.is-busy { animation: peach-sync-pip-pulse 1600ms ease-in-out infinite; }
.peach-sync-pip.is-error {
  background: var(--peach-breach);
  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-breach) 60%, transparent);
}
@keyframes peach-sync-pip-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .peach-sync-btn.is-syncing .peach-sync-icon { animation: none; opacity: 0.6; }
  .peach-sync-pip.is-busy { animation: none; }
}

.peach-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);
}

/* Lock button */
.peach-lock-icon { transform-origin: center; }
.peach-lock-btn { color: var(--peach-accent); }
.peach-lock-btn.is-locking .peach-lock-icon {
  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);
}

/* Biometric unlock button */
.peach-biometric-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
}

/* Copy button */
.peach-copy-btn {
  position: relative; overflow: hidden;
  color: var(--peach-t2); border-color: var(--peach-t3);
}
.peach-copy-icon {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.peach-copy-icon-svg { display: block; }
.peach-copy-sheen {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--peach-accent) 18%, transparent) 30%, color-mix(in srgb, var(--peach-accent) 8%, transparent) 100%);
  opacity: 0; transform: scaleX(0.15); transform-origin: left center;
}
.peach-copy-btn.is-copied {
  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),
    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),
    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);
}
.peach-copy-btn.is-copied .peach-copy-icon {
  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;
}
.peach-copy-btn.is-copied .peach-copy-sheen {
  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;
}
.peach-copy-btn.is-retreat {
  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;
}
.peach-copy-btn.is-retreat .peach-copy-sheen {
  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;
}
.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }
.peach-copy-drain-bar {
  display: block; width: 100%; height: 100%;
  background: var(--peach-accent); opacity: 0.7;
  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;
}

/* Unlock screen elements */
.peach-underline-input {
  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);
  padding: 6px 0; background: transparent; color: var(--peach-t0);
  outline: none;
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  font-size: 0.8125rem;
  caret-color: var(--peach-accent);
}
.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }
.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }
.peach-hint {
  margin: 0;
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  font-size: 0.625rem; color: var(--peach-t2);
}
.peach-unlock-footer {
  margin-top: 4px; display: flex; align-items: center; gap: 7px;
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  font-size: 0.625rem; color: var(--peach-t2);
}
.peach-unlock-footer--lock {
  padding-top: 2px;
}

/* Desktop helper (peach-sync) code pairing — additive hooks. The shared pairing
   classes (peach-pair-*) carry the shared layout; these only style the parts
   unique to the typed-code path. Inline styles cover the SAS/confirm gate. */
.peach-desktop-pair { display: flex; flex-direction: column; }
.peach-desktop-enter,
.peach-desktop-searching,
.peach-desktop-paired,
.peach-desktop-error {
  display: flex; flex-direction: column; gap: 8px;
  padding: 4px 18px 16px; text-align: center; align-items: center;
}
.peach-desktop-enter .peach-label { align-self: flex-start; }
/* Sized for a full 19-character pairing code (A74H-48J3-KI32-OEP4) in a
   320px popup — a 6-digit legacy helper code still reads fine at this size. */
.peach-code-input {
  text-align: center; letter-spacing: 0.12em; padding-left: 0.12em;
  font-size: 15px;
}
.peach-code-input::placeholder { letter-spacing: 0.12em; }

/* Sync card "pair a device" options — bordered, raised tappable rows that read
   as buttons on any card hue (theme-neutral light overlay, not the peach accent). */
.peach-sync-pair-option {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  padding: 11px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);
  color: var(--peach-t0);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.peach-sync-pair-option + .peach-sync-pair-option { margin-top: 8px; }
.peach-sync-pair-option:hover {
  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);
  border-color: color-mix(in srgb, var(--peach-t0) 28%, transparent);
}
.peach-sync-pair-option:active { transform: translateY(1px); }
.peach-sync-pair-option:disabled { opacity: 0.5; cursor: default; }
.peach-sync-pair-option-icon { flex-shrink: 0; display: flex; align-items: center; color: var(--peach-t1); margin-top: 1px; }
.peach-sync-pair-option-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.peach-sync-pair-option-title { font-size: 0.8125rem; font-weight: 600; }
.peach-sync-pair-option-sub { font-size: 0.6875rem; line-height: 1.45; color: var(--peach-t2); }
.peach-sync-pair-option-chevron { flex-shrink: 0; color: var(--peach-t2); font-size: 1.05rem; line-height: 1.3; }

/* Breach badge */
.peach-breach-badge {
  display: flex;
  position: relative;
  z-index: 1;
  align-items: center;
  gap: 7px;
  font-size: 0.5625rem;
  color: var(--peach-breach);
  padding: 5px 10px;
  margin-bottom: 4px;
  border-radius: 8px;
  background: rgba(220, 80, 60, 0.07);
  border: 1px solid rgba(220, 80, 60, 0.18);
  letter-spacing: 0.04em;
}

.peach-password-value.is-breached {
  color: rgba(220, 80, 60, 0.75);
  border-bottom: 1px solid rgba(220, 80, 60, 0.22);
}

/* ── Overlay views ─────────────────────────────────────────────────── */
.peach-overlay-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),
    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),
    var(--peach-bg);
  z-index: 2;
  overflow: hidden;
  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.peach-overlay-view:has(.stk-shell) {
  background: var(--peach-bg);
}
@keyframes overlay-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.peach-overlay-view.ov-enter-up {
  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.peach-overlay-view.ov-exit-up {
  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;
}
.peach-overlay-view.ov-enter-right {
  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.peach-overlay-view.ov-exit-right {
  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes ov-enter-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ov-exit-up {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-12px); }
}
@keyframes ov-enter-right {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ov-exit-right {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* Overlay shared header */
.peach-overlay-header {
  padding: 10px 12px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* Back button — circular pill matching the settings stack masthead (.stk-back) */
.peach-overlay-header .peach-btn--ghost.peach-icon-btn {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 999px;
  border: 1px solid var(--peach-border);
  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);
  color: var(--peach-t1);
  padding: 0;
}
.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {
  color: var(--peach-t0);
  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);
  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);
}
.peach-overlay-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: var(--peach-t0);
  flex: 1;
  text-align: center;
}
/* Balances the 28px back button so the title stays visually centred */
.peach-overlay-spacer {
  width: 28px;
  flex: 0 0 28px;
}

.peach-overlay-card {
  background: var(--peach-s1);
  border: 1px solid var(--peach-t3);
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
}

.peach-onboarding-alt-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
}

.peach-settings-copy {
  margin: 0 0 10px;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--peach-t2);
}

.peach-settings-copy strong {
  color: var(--peach-t0);
}

.peach-settings-copy--spacious {
  margin-bottom: 12px;
}

.peach-settings-copy--result {
  color: var(--peach-accent);
  font-size: 0.8125rem;
  text-align: center;
  padding: 8px 0;
}

.peach-settings-copy--danger {
  color: var(--peach-breach);
}

.peach-settings-copy--success {
  color: var(--peach-accent);
}

.peach-inline-feedback {
  font-size: 0.6875rem;
  margin: 10px 0 0;
}

.peach-inline-feedback--ok {
  color: var(--peach-accent);
}

.peach-inline-feedback--error {
  color: var(--peach-breach);
}

.peach-inline-feedback--muted {
  color: var(--peach-t2);
  font-size: 0.625rem;
  margin: 4px 0;
}

.peach-inline-feedback--spaced {
  margin-top: 12px;
}

.peach-settings-actions--row {
  display: flex;
  gap: 6px;
}

.peach-settings-actions--end {
  margin-top: 14px;
  justify-content: flex-end;
}

.peach-settings-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.peach-settings-stack--tight {
  gap: 4px;
}

.peach-settings-stack--spacious {
  gap: 8px;
}

.peach-settings-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--peach-t0);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  outline: none;
  transition: border-color 120ms ease, background 120ms ease;
}

.peach-settings-input:focus {
  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);
  background: rgba(0, 0, 0, 0.28);
}

.peach-settings-input[type="password"] {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.peach-hidden-file-input {
  display: none;
}

.peach-checkbox-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.6875rem;
  color: var(--peach-t1);
  cursor: pointer;
  margin: 12px 0;
}

.peach-checkbox-note input {
  margin-top: 1px;
}

.peach-danger-notice {
  background: rgba(220, 80, 60, 0.08);
  border: 1px solid rgba(220, 80, 60, 0.2);
  border-radius: 6px;
  padding: 9px 11px;
  font-size: 0.6875rem;
  color: var(--peach-t1);
  line-height: 1.5;
}

.peach-info-notice {
  font-size: 0.6875rem;
  color: var(--peach-t1);
  line-height: 1.5;
  background: var(--surface-card);
  border: 1px solid var(--peach-t3);
  border-radius: 6px;
  padding: 8px 10px;
}

.peach-info-notice--warn {
  border-color: rgba(220, 38, 38, 0.4);
  background: rgba(220, 38, 38, 0.06);
  color: rgba(220, 38, 38, 0.92);
  margin-bottom: 8px;
}

/* Warm helpful-context note — reads as a soft aside, not an alert. */
.peach-info-notice--note {
  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);
  border-color: color-mix(in srgb, var(--peach-accent) 18%, transparent);
  color: var(--peach-t2);
}

.peach-strength-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.peach-strength-track {
  flex: 1;
  height: 4px;
  background: var(--peach-s2);
  border-radius: 2px;
  overflow: hidden;
}

.peach-strength-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 120ms ease, background 120ms ease;
}

/* ── Type selector tabs ── */
.peach-type-tabs {
  display: flex;
  gap: 0;
  background: var(--peach-t4);
  border-radius: 8px;
  padding: 3px;
}

.peach-type-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--peach-t1);
  transition: background 150ms ease, color 150ms ease;
}

.peach-type-tab.is-active {
  background: var(--peach-s2);
  color: var(--peach-t0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.peach-type-tab:not(.is-active):hover {
  color: var(--peach-t0);
}

.peach-type-tab svg {
  opacity: 0.7;
  flex-shrink: 0;
}

.peach-type-tab.is-active svg {
  opacity: 1;
}

/* ── List view ───────────────────────────────────────────────────────── */
.peach-list-top {
  padding: 0 10px;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--peach-t3);
  flex-shrink: 0;
  background: var(--peach-s1);
}

.peach-vault-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
}
.peach-vault-list::-webkit-scrollbar { display: none; }

/* Scrollbar — vault list */
.peach-vault-list {
  scrollbar-width: thin;
  scrollbar-color: var(--peach-t3) transparent;
}

.peach-vault-list::-webkit-scrollbar {
  width: 3px;
}

.peach-vault-list::-webkit-scrollbar-thumb {
  background: var(--peach-t3);
  border-radius: 2px;
}

.peach-entry-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--peach-t3);
  cursor: pointer;
  color: inherit;
  text-align: left;
  transition: background 80ms ease;
}
.peach-entry-row:hover { background: rgba(240,232,216,0.03); }
.peach-entry-row:last-child { border-bottom: none; }
.peach-entry-row.is-active {
  box-shadow: inset 2px 0 0 var(--peach-accent);
  background: rgba(240,232,216,0.03);
}
.peach-entry-row:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--peach-border-accent);
  background: rgba(240,232,216,0.03);
}
.peach-entry-row-icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  border: 1px solid var(--peach-t3);
  display: flex; align-items: center; justify-content: center;
  color: var(--peach-t2);
  flex-shrink: 0;
}
.peach-entry-row-icon.is-breach {
  border-color: rgba(220,80,60,0.3);
  color: rgba(220,80,60,0.7);
}

/* Title-initials chip used as the favicon fallback for login entries whose
 * real favicon hasn't been cached by the browser yet (freshly-imported,
 * never-visited domains). Background colour is hashed from the title so
 * the same entry always shows the same chip. The chip fits the same
 * 26×26 row icon slot the favicon would take. */
.peach-favicon-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(240, 232, 216, 0.92);
  text-transform: uppercase;
  user-select: none;
}
.peach-entry-row-info { flex: 1; min-width: 0; }
.peach-entry-row-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-style: italic;
  font-weight: 400;
  color: var(--peach-t0);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.peach-entry-row-meta {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  color: var(--peach-t2);
  margin-top: 1px;
  letter-spacing: 0.05em;
}
.peach-entry-row-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(220,80,60,0.7);
  flex-shrink: 0;
}
.peach-new-entry-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 11px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--peach-t3);
  color: var(--peach-t2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 120ms ease, background 120ms ease;
}
.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }

/* ── Multi-select mode ─────────────────────────────────────────────── */

/* Select-mode trigger button in sort bar — same shape as trash btn */
.peach-sort-select-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--peach-t2);
  border-radius: 4px;
  transition: color 140ms ease, background 140ms ease;
}
.peach-sort-select-btn:hover {
  color: var(--peach-t1);
  background: var(--peach-t3);
}

/* Sort bar in select mode */
.peach-select-cancel-btn {
  background: transparent;
  border: none;
  padding: 0 4px;
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--peach-t2);
  transition: color 140ms ease;
  flex-shrink: 0;
}
.peach-select-cancel-btn:hover { color: var(--peach-t0); }

.peach-select-count-label {
  flex: 1;
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--peach-t1);
}

.peach-select-all-btn {
  background: transparent;
  border: none;
  padding: 0 4px;
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--peach-t2);
  transition: color 140ms ease;
  flex-shrink: 0;
}
.peach-select-all-btn:hover { color: var(--peach-accent); }

/* List in select mode */
.peach-vault-list.is-selecting .peach-entry-row {
  cursor: default;
}
.peach-vault-list.is-selecting .peach-entry-row:hover {
  background: rgba(240,232,216,0.02);
}
.peach-vault-list.is-selecting .peach-entry-row.is-selected {
  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);
}
.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {
  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);
}

/* Select indicator circles in icon slot */
.peach-entry-row-icon.is-select-icon {
  color: var(--peach-t2);
}
.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {
  color: var(--peach-accent);
}

/* Delete action bar at bottom (replaces new-entry row) */
.peach-select-action-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 11px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--peach-t3);
  color: var(--peach-t1);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 120ms ease, background 120ms ease;
}
.peach-select-action-bar:not(:disabled):hover {
  color: var(--peach-t0);
  background: rgba(220,80,60,0.06);
}
.peach-select-action-bar:not(:disabled):hover svg {
  stroke: rgba(220,80,60,0.8);
}
.peach-select-action-bar:disabled,
.peach-select-action-bar.is-empty {
  color: var(--peach-t2);
  cursor: default;
  opacity: 0.5;
}
.peach-search-counter-list {
  white-space: nowrap;
  flex-shrink: 0;
}
.peach-list-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  color: var(--peach-t2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
}

/* ── Settings view ───────────────────────────────────────────────────── */
.peach-settings-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 2px 0 10px;
}
.peach-settings-group {
  margin: 4px 10px;
  padding: 9px 14px 11px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(26, 20, 16, 0.60);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
}

.peach-settings-group + .peach-settings-group {
  margin-top: 6px;
}

@supports not (backdrop-filter: blur(1px)) {
  .peach-settings-group {
    background: rgba(26, 20, 16, 0.90);
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);
  }
}

.light .peach-settings-group,
[data-theme="light"] .peach-settings-group {
  background: rgba(245, 237, 226, 0.70);
  border-color: rgba(26, 18, 8, 0.08);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}

@supports not (backdrop-filter: blur(1px)) {
  .light .peach-settings-group,
  [data-theme="light"] .peach-settings-group {
    background: rgba(245, 237, 226, 0.97);
    border-color: rgba(26, 18, 8, 0.10);
  }
}
.peach-export-intro {
  padding-bottom: 8px;
}
.peach-export-card {
  display: grid;
  gap: 10px;
}
.peach-rune-canvas {
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  flex: 1;
  align-self: center;
}
.peach-script-input {
  font-family: "PeachScript", monospace;
  font-size: 0.6875rem;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--peach-t0);
  background: rgba(0, 0, 0, 0.22);
  border: none;
  border-radius: 6px;
  padding: 12px;
  width: 100%;
  min-height: 96px;
  resize: vertical;
  word-break: break-all;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.peach-script-input::-webkit-scrollbar { display: none; }
.peach-csv-warning {
  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);
  color: var(--peach-t0);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 0.75rem;
  line-height: 1.45;
}
.peach-export-card--primary {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));
}

/* Export menu — distribute the three format cards across the popup. */
.peach-export-menu {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.peach-export-menu .peach-settings-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

/* Result view — the script-string fills the remaining vertical surface. */
.peach-export-result-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-bottom: none;
}
.peach-export-result-group .peach-export-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.peach-export-result-group .peach-export-card-copy {
  flex-shrink: 0;
}
.peach-export-result-group .peach-settings-label {
  flex-shrink: 0;
}
.peach-export-result-group button {
  flex-shrink: 0;
}
.peach-export-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.peach-export-card-copy {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--peach-t1);
}
.peach-export-note {
  margin: 0;
  font-size: 0.625rem;
  line-height: 1.5;
  color: var(--peach-t2);
}
.peach-export-strength-track {
  height: 3px;
  background: var(--peach-border);
  border-radius: 2px;
  margin: 4px 0 2px;
  overflow: hidden;
}
.peach-export-strength-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 250ms ease, background 250ms ease;
}
.peach-export-strength-warn {
  margin: 0;
  font-size: 0.625rem;
  line-height: 1.5;
  color: #e84040;
  font-family: "IBM Plex Mono", monospace;
}
.peach-export-strength-hint {
  margin: 0;
  font-size: 0.625rem;
  line-height: 1.5;
  color: var(--peach-t2);
  font-family: "IBM Plex Mono", monospace;
}
.peach-export-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);
  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);
  color: var(--peach-accent);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.peach-export-pill--danger {
  border-color: rgba(220,80,60,0.22);
  background: rgba(220,80,60,0.08);
  color: var(--peach-breach);
}
.peach-settings-label {
  margin: 0 0 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--peach-t2);
}
.peach-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  padding: 6px 0;
  font-size: 0.8125rem;
  color: var(--peach-t1);
}
.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }
.peach-settings-value {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  color: var(--peach-t2);
}

.peach-settings-value--status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.peach-settings-link {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  color: var(--peach-accent);
  text-decoration: none;
  cursor: pointer;
}
.peach-settings-link:hover {
  text-decoration: underline;
}

.peach-settings-row--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.peach-settings-row--top {
  align-items: flex-start;
}

.peach-settings-row-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.peach-toggle {
  width: 28px; height: 16px;
  border-radius: 999px;
  background: var(--peach-t3);
  border: 1px solid var(--peach-t3);
  display: flex; align-items: center; justify-content: flex-start; padding: 2px;
  flex-shrink: 0;
  transition: background 200ms ease, border-color 200ms ease;
  cursor: pointer;
}
.peach-toggle.is-on {
  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);
}
.peach-toggle-knob {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--peach-t2);
  flex-shrink: 0;
  transform: translateX(0px);
  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);
}
.peach-toggle.is-on .peach-toggle-knob {
  background: var(--peach-accent);
  transform: translateX(12px);
}
.peach-settings-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 14px 16px 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  color: var(--peach-t2);
}

/* ── Settings home navigation ──────────────────────────────────────────── */
.peach-settings-nav-label {
  margin: 0 0 2px;
  padding: 12px 16px 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--peach-t2);
}

.peach-settings-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--peach-t3);
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: background var(--peach-dur-80) ease;
}
.peach-settings-cat-row:hover {
  background: var(--peach-t3);
}
.peach-settings-cat-row:last-child {
  border-bottom: none;
}

.peach-settings-cat-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);
  color: var(--peach-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Light theme: peach-on-cream is too low-contrast — both colors are warm.
   Darken the icon stroke to ink and bump the bg tint so the icon reads
   sharply while the cell still feels accent-tinted. */
.light .peach-settings-cat-icon {
  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);
  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));
}

.peach-settings-cat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.peach-settings-cat-name {
  font-size: 0.8125rem;
  font-weight: 450;
  color: var(--peach-t0);
  line-height: 1.2;
}

.peach-settings-cat-desc {
  font-size: 0.625rem;
  color: var(--peach-t2);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.peach-settings-cat-chevron {
  color: var(--peach-t2);
  flex-shrink: 0;
  opacity: 0.5;
}

/* ── Settings sub-view section labels ──────────────────────────────────── */
.peach-settings-sub-label {
  margin: 12px 0 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--peach-t2);
}
.peach-settings-sub-label:first-child {
  margin-top: 4px;
}

/* ── Settings: collapsible Advanced section ─────────────────────────────── */
.peach-settings-advanced-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 0 4px;
  margin: 0;
  color: inherit;
}
.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {
  color: var(--peach-t1);
}
.peach-settings-advanced-chevron {
  font-size: 0.5625rem;
  color: var(--peach-t3);
  letter-spacing: 0;
  transition: color 120ms ease;
}

/* ── Feedback form ──────────────────────────────────────────────────────── */
.peach-feedback-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-bottom: none;
}

.peach-feedback-intro {
  margin: 4px 0 14px;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--peach-t1);
}

.peach-feedback-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.peach-feedback-chip {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--peach-t3);
  background: none;
  color: var(--peach-t2);
  font-size: 0.6875rem;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,
    background var(--peach-dur-80) ease;
}
.peach-feedback-chip:hover {
  border-color: var(--peach-t2);
  color: var(--peach-t1);
}
.peach-feedback-chip.is-active {
  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);
  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));
  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),
    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);
  font-weight: 700;
}

.peach-feedback-textarea {
  flex: 1;
  width: 100%;
  min-height: 120px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--peach-t0);
  font-size: 0.75rem;
  font-family: var(--font-ui);
  line-height: 1.5;
  padding: 8px 10px;
  resize: none;
  outline: none;
  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;
}
.peach-feedback-textarea:focus {
  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);
  background: rgba(0, 0, 0, 0.28);
}
.peach-feedback-textarea:focus {
  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);
}
.peach-feedback-textarea::placeholder {
  color: var(--peach-t2);
}

.peach-feedback-meta {
  margin: 6px 0 0;
  font-size: 0.625rem;
  color: var(--peach-t2);
  font-family: "IBM Plex Mono", monospace;
}

.peach-feedback-result {
  margin: 8px 0 0;
  font-size: 0.6875rem;
  font-family: "IBM Plex Mono", monospace;
}
.peach-feedback-result--ok { color: var(--peach-sync-ok); }
.peach-feedback-result--err { color: var(--peach-breach); }

.peach-feedback-submit {
  width: 100%;
  margin-top: 12px;
  justify-content: center;
}

.peach-feedback-anon {
  margin: 8px 0 0;
  font-size: 0.625rem;
  color: var(--peach-t2);
  text-align: center;
}

.peach-feedback-thanks {
  margin: auto 0;
  padding: 18px 14px;
  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),
    rgba(0, 0, 0, 0.18);
  color: var(--peach-t1);
  text-align: center;
}

.peach-feedback-thanks p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
}

.peach-feedback-thanks-title {
  color: var(--peach-t0);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.375rem !important;
  line-height: 1.1 !important;
  margin-bottom: 8px !important;
}

.peach-passkey-badge {
  margin-left: 8px;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--peach-t2);
  font-family: var(--font-ui);
  vertical-align: middle;
}

.peach-passkey-delete-btn {
  color: var(--peach-breach);
  border-color: rgba(229, 85, 85, 0.25);
}

.peach-passkey-delete-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(229, 85, 85, 0.06);
  border: 1px solid rgba(229, 85, 85, 0.2);
  border-radius: 6px;
}

.peach-passkey-delete-confirm-copy {
  flex: 1;
  font-size: 0.6875rem;
  color: var(--peach-t1);
}

.peach-passkey-delete-btn--confirm {
  color: var(--peach-breach);
  border-color: rgba(229, 85, 85, 0.4);
}

.peach-passkey-activity {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.peach-passkey-meta {
  font-size: 0.6875rem;
  color: var(--peach-t2);
}

.peach-passkey-actions {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.peach-passkey-approval {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 20px 14px;
  gap: 8px;
  text-align: center;
}

.peach-passkey-approval-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--peach-s2);
  border: 1px solid var(--peach-t3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--peach-accent);
}

.peach-passkey-approval-icon img,
.peach-passkey-approval-icon svg {
  width: 22px;
  height: 22px;
  border-radius: 5px;
}

.peach-passkey-approval-rp {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--peach-t2);
  letter-spacing: 0.03em;
}

.peach-passkey-approval-action {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  color: var(--peach-t0);
  line-height: 1.1;
  margin: 1px 0;
}

.peach-passkey-approval-user {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--peach-t1);
  background: var(--peach-s2);
  border: 1px solid var(--peach-t3);
  border-radius: 4px;
  padding: 3px 8px;
}

.peach-passkey-approval-notice {
  font-size: 0.625rem;
  color: var(--peach-t2);
  line-height: 1.5;
  max-width: 220px;
}

.peach-passkey-approval-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}

.peach-passkey-approval-actions .peach-btn {
  flex: 1;
}

/* ── Inline generator drawer ── */
.peach-generator-drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--peach-curve-arrival);
  overflow: hidden;
}
.peach-generator-drawer.is-open {
  grid-template-rows: 1fr;
}
.peach-generator-drawer-inner {
  min-height: 0;
  overflow: hidden;
}
.peach-generator-drawer-content {
  border-top: 1px solid var(--peach-t3);
  padding: 8px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Compact generator (inside entry edit) ── */
.peach-generator-drawer-content--compact {
  border-top: 1px solid var(--peach-t3);
  padding: 8px 0 2px;
  gap: 7px;
}
.peach-pwgen-compact-display-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.peach-pwgen-compact-output {
  flex: 1;
  min-width: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--peach-t0);
  background: rgba(240, 232, 216, 0.04);
  border: 1px solid var(--peach-t3);
  border-radius: 5px;
  padding: 5px 8px;
  line-height: 1.5;
  outline: none;
  transition: border-color 120ms ease;
}

.peach-pwgen-compact-output:focus {
  border-color: var(--peach-t1);
}
.peach-pwgen-compact-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.peach-pwgen-compact-slider {
  flex: 1;
  min-width: 0;
  height: 2px !important;
}
.peach-pwgen-compact-controls .peach-pwgen-len-num {
  flex-shrink: 0;
  min-width: 18px;
  text-align: right;
}
.peach-pwgen-compact-pills {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
.peach-pwgen-compact-pills .peach-pwgen-pill {
  padding: 2px 7px;
  font-size: 0.5rem;
}
.peach-pwgen-compact-use {
  flex-shrink: 0;
  font-size: 0.625rem !important;
  padding: 3px 9px !important;
  min-height: 22px !important;
  border-radius: 5px !important;
}

/* ── Password edit row (input + eye toggle side-by-side) ── */
.peach-password-edit-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.peach-password-edit-row .peach-inline-input {
  flex: 1;
  min-width: 0;
}

/* ── Generate toggle link ── */
.peach-generate-toggle-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  color: var(--peach-t2);
  letter-spacing: 0.04em;
  transition: color 120ms ease;
  align-self: flex-start;
}
.peach-generate-toggle-link:hover {
  color: var(--peach-accent);
}

/* Holds the generate + history toggle links on one row under the editor. */
.peach-password-edit-links {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── Past-password history list ── */
.peach-password-history {
  display: grid;
  gap: 4px;
  margin-top: 2px;
  max-height: 168px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.peach-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);
}
.peach-history-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.peach-history-pw {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
  color: var(--peach-t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.peach-history-pw .peach-password-mask {
  letter-spacing: 0.08em;
  color: var(--peach-t2);
}
.peach-history-age {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  color: var(--peach-t3, var(--peach-t2));
  letter-spacing: 0.03em;
}
.peach-history-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.peach-history-use {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.05em;
  padding: 3px 7px;
}
.peach-history-empty {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  line-height: 1.45;
  color: var(--peach-t2);
  padding: 6px 8px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);
}

/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */
.peach-entry-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 10px 20px 14px;
  min-width: 0;
  min-height: 0;
}
.peach-entry-body::-webkit-scrollbar { display: none; }

/* Type-toggle pills + inline note toolbar */
.peach-new-type-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.peach-new-type-btn {
  background: transparent;
  border: 1px solid var(--peach-t3);
  border-radius: 12px;
  padding: 3px 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--peach-t2);
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.peach-new-type-btn.is-active {
  color: var(--peach-t0);
  border-color: var(--peach-accent);
  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);
}
.peach-new-type-btn:not(.is-active):hover {
  color: var(--peach-t1);
  border-color: var(--peach-t2);
}

/* Editable title */
.peach-new-title-wrap { margin: 0 0 2px; }
.peach-new-title-input {
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  color: var(--peach-t0);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 40px;
  line-height: 0.95;
  caret-color: var(--peach-accent);
}
.peach-new-title-input::placeholder { color: var(--peach-t2); }

/* Editable domain field */
.peach-domain-edit-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.peach-domain-edit-row .peach-domain-value--edit {
  flex: 1;
  width: 0;
}

.peach-domain-url-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--peach-t3);
  padding: 2px 3px;
  display: flex;
  align-items: center;
  line-height: 0;
  border-radius: 3px;
  transition: color 120ms ease;
}

.peach-domain-url-btn:hover {
  color: var(--peach-accent);
}

.peach-domain-value--edit {
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  font-size: 0.625rem;
  font-style: italic;
  letter-spacing: 0.12em;
  color: var(--peach-t1);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--peach-t3);
  outline: none;
  width: 100%;
  padding: 2px 0;
  caret-color: var(--peach-accent);
  transition: border-color 140ms ease, color 140ms ease;
}
.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }
.peach-domain-value--edit:focus {
  border-bottom-color: rgba(240, 232, 216, 0.28);
  color: var(--peach-t0);
}

/* Editable field values (username, password, totp) */
.peach-field-value--edit {
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  font-size: 0.8125rem;
  color: var(--peach-t0);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--peach-t3);
  outline: none;
  flex: 1;
  min-width: 0;
  padding: 3px 0;
  caret-color: var(--peach-accent);
  transition: border-color 140ms ease, color 140ms ease;
}
.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }
.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }
.peach-field-value--edit:focus {
  border-bottom-color: rgba(240, 232, 216, 0.28);
  color: var(--peach-t0);
}

/* "+ add optional field" links */
.peach-entry-add-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: -2px;
}
.peach-add-field-link {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--peach-t2);
  transition: color 140ms ease;
}
.peach-add-field-link:hover { color: var(--peach-accent); }

/* ── New entry form (legacy classes) ────────────────────────────────── */
.peach-new-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 20px 14px;
}
.peach-new-name-input {
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  color: var(--peach-t0);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 40px;
  line-height: 0.95;
  caret-color: var(--peach-accent);
}
.peach-new-name-input::placeholder { color: var(--peach-t2); }
.peach-new-field-input {
  background: transparent;
  border: none;
  outline: none;
  flex: 1;
  min-width: 0;
  caret-color: var(--peach-accent);
}
.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }

/* ── Canary card ── */
.peach-canary-card {
  border: 1px solid rgba(217, 160, 48, 0.2);
  background: rgba(217, 160, 48, 0.03);
  border-radius: 8px;
  padding: 12px;
}

.peach-canary-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.peach-canary-card .peach-label {
  color: rgba(217, 160, 48, 0.85);
}

.peach-canary-card .peach-new-field-input {
  border-color: rgba(217, 160, 48, 0.25);
}

.peach-canary-card .peach-new-field-input:focus {
  border-color: rgba(217, 160, 48, 0.5);
}

.peach-canary-body {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.peach-canary-explainer {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(217, 160, 48, 0.06);
  border: 1px solid rgba(217, 160, 48, 0.22);
  margin-bottom: 4px;
}

.peach-canary-explainer-icon {
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1.2;
}

.peach-canary-explainer-title {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(217, 160, 48, 0.9);
  margin: 0 0 3px;
}

.peach-canary-explainer-copy {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  color: var(--peach-t2);
  line-height: 1.55;
  margin: 0;
}

.peach-canary-hint {
  font-size: 0.625rem;
  color: var(--peach-t2);
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.5;
  margin-top: 4px;
}

.peach-canary-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.peach-canary-test-btn {
  border-color: rgba(217, 160, 48, 0.3);
  color: rgba(217, 160, 48, 0.85);
}

.peach-canary-test-result {
  font-size: 0.625rem;
  font-family: Inter, system-ui, sans-serif;
}

.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }
.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }

.peach-canary-badge {
  display: flex;
  position: relative;
  z-index: 1;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(217, 160, 48, 0.12);
  border: 1px solid rgba(217, 160, 48, 0.35);
  border-radius: 6px;
  margin-bottom: 6px;
  width: fit-content;
}

.peach-canary-badge-label {
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: rgba(217, 160, 48, 0.9);
  font-family: var(--font-ui);
  text-transform: uppercase;
}

.peach-canary-badge-icon {
  font-size: 0.6875rem;
}

.peach-canary-suppress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(217, 160, 48, 0.08);
  border-radius: 6px;
  margin-bottom: 8px;
}

.peach-canary-suppress-label {
  font-size: 0.6875rem;
  color: rgba(217, 160, 48, 0.85);
  cursor: pointer;
  font-family: var(--font-ui);
  letter-spacing: 0.04em;
}

.peach-regen-panel {
  position: relative;
  z-index: 1;
  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
}

.peach-regen-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.peach-regen-panel-title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);
}

.peach-regen-output {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  word-break: break-all;
  color: var(--peach-t1);
}

.peach-regen-actions {
  display: flex;
  gap: 6px;
}

.peach-regen-actions--spaced {
  margin-bottom: 8px;
}

.peach-regen-action-grow {
  flex: 1;
}

.peach-regen-copy-btn {
  padding: 0 8px;
}

.peach-regen-success {
  position: relative;
  z-index: 1;
  background: rgba(40, 180, 80, 0.1);
  border: 1px solid rgba(40, 180, 80, 0.3);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  color: rgba(40, 180, 80, 0.9);
}

/* ── Note editor overlay ── */
.peach-note-editor {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),
    var(--peach-bg);
  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.peach-note-editor-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--peach-t3);
  flex-shrink: 0;
}

.peach-note-editor-back {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--peach-t2);
  padding: 4px 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: color 120ms ease, background 120ms ease;
  flex-shrink: 0;
}
.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }

.peach-note-editor-label {
  flex: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--peach-t1);
  letter-spacing: 0.02em;
}

.peach-note-editor-save-btn {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);
  border-radius: 8px;
  color: var(--peach-accent);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.peach-note-editor-save-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);
}
.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.peach-note-toolbar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px 14px 5px;
  border-bottom: 1px solid var(--peach-t3);
  flex-shrink: 0;
}

.peach-note-tool-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--peach-t2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  cursor: pointer;
  line-height: 1.6;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.peach-note-tool-btn:hover {
  background: var(--peach-t4);
  color: var(--peach-t0);
  border-color: var(--peach-t3);
}

.peach-note-tool-icon {
  padding: 3px 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.peach-note-tool-divider {
  width: 1px;
  height: 14px;
  background: var(--peach-t3);
  margin: 0 4px;
  flex-shrink: 0;
}

.peach-note-editor-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 20px;
  outline: none;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--peach-t0);
  scrollbar-width: none;
  word-break: break-word;
}
.peach-note-editor-body:empty::before {
  content: "write your note…";
  color: var(--peach-t3);
  font-style: italic;
  pointer-events: none;
}

/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */
.peach-note-editor-inline {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.peach-note-editor-body--inline {
  flex: 1;
  min-height: 0;
  font-size: 0.9375rem;
  padding: 10px 20px 14px;
}

/* Full-width toolbar row inside the body (Add.tsx note type).
   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */
.peach-note-toolbar-body {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px 20px 4px;
  margin: 2px -20px 0;
  border-bottom: 1px solid var(--peach-t3);
  flex-shrink: 0;
}

/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)
   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn
   and .peach-note-tool-divider button-level styles. */
.peach-note-toolbar-inline {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  padding-left: 10px;
  border-left: 1px solid var(--peach-t3);
  min-height: 22px;
}

/* Entry.tsx toolbar row (no tabs, toolbar only) */
.peach-entry-note-toolbar-row {
  display: flex;
  align-items: center;
  margin: 4px 0 6px;
  position: relative;
  z-index: 1;
}
.peach-entry-note-toolbar-row .peach-note-toolbar-inline {
  border-left: none;
  padding-left: 0;
  margin-left: 0;
}

/* Note body — fills available vertical space in Add.tsx and Entry.tsx */
.peach-note-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin: 4px 0 0;
}
.peach-entry-body--new .peach-note-body {
  margin: 8px -20px 0;
}

/* Add.tsx body is a grid by default; swap to a flex column when a note is
   active so the note body can stretch and pin the tags row to the bottom. */
.peach-entry-body--new:has(.peach-note-body) {
  display: flex;
  flex-direction: column;
}

/* Rich content element styles (editor + display) */
.peach-note-editor-body h2,
.peach-note-content h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  font-style: italic;
  color: var(--peach-t0);
  margin: 6px 0 2px;
  line-height: 1.3;
}
.peach-note-editor-body ul,
.peach-note-content ul {
  padding-left: 18px;
  margin: 3px 0;
  list-style: disc;
}
.peach-note-editor-body ol,
.peach-note-content ol {
  padding-left: 18px;
  margin: 3px 0;
  list-style: decimal;
}
.peach-note-editor-body li,
.peach-note-content li { margin: 2px 0; }
.peach-note-editor-body hr,
.peach-note-content hr {
  border: none;
  border-top: 1px solid var(--peach-t3);
  margin: 10px 0;
}

/* font size elements from execCommand */
.peach-note-editor-body font[size="1"],
.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }
.peach-note-editor-body font[size="2"],
.peach-note-content font[size="2"] { font-size: 0.8125rem; }
.peach-note-editor-body font[size="3"],
.peach-note-content font[size="3"] { font-size: 1rem; }
.peach-note-editor-body font[size="4"],
.peach-note-content font[size="4"] { font-size: 20px; }
.peach-note-editor-body font[size="5"],
.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }

/* bold / italic inside the editor and note display */
.peach-note-editor-body b, .peach-note-editor-body strong,
.peach-note-content b, .peach-note-content strong { font-weight: 700; }
.peach-note-editor-body em, .peach-note-editor-body i,
.peach-note-content em, .peach-note-content i { font-style: italic; }

/* note display — rendered HTML, no pre-wrap */
.peach-note-content {
  overflow: auto;
  max-height: 340px;
  word-break: break-word;
}

/* ── Note textarea ── */
.peach-note-textarea {
  width: 100%;
  min-height: 180px;
  max-height: 280px;
  resize: vertical;
  background: var(--peach-t4);
  border: 1px solid var(--peach-t3);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--peach-t1);
  outline: none;
  transition: border-color 150ms ease;
}

.peach-note-textarea:focus {
  border-color: var(--peach-t2);
}

.peach-note-char-count {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  color: var(--peach-t3);
  text-align: right;
  margin-top: 4px;
  letter-spacing: 0.1em;
}

/* ── Field input baseline ── */
.peach-new-field-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--peach-t3);
  padding: 4px 0;
  color: var(--peach-t1);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8125rem;
  outline: none;
  transition: border-color 150ms ease;
}

.peach-new-field-input:focus {
  border-bottom-color: var(--peach-t0);
  color: var(--peach-t0);
}

.peach-new-name-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--peach-t3);
  padding: 6px 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  color: var(--peach-t0);
  outline: none;
  transition: border-color 150ms ease;
}

.peach-new-name-input:focus {
  border-bottom-color: var(--peach-t1);
}

.peach-new-name-input::placeholder {
  color: var(--peach-t2);
  font-style: italic;
}

.peach-new-field-input::placeholder {
  color: var(--peach-t3);
}

/* ── Demo entrance animation ── */
#hd-shell {
  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;
}
@keyframes hd-shell-enter {
  from { opacity: 0; transform: scale(0.96) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Keyframes ── */
@keyframes peach-char-enter {
  from { opacity: 0; transform: translateY(0.22em); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes peach-content-enter {
  from { opacity: 0.96; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes peach-content-exit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0.92; transform: translateY(-3px); }
}
@keyframes peach-screen-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes peach-shell-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes peach-veil-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes peach-lock-settle {
  0%   { transform: scale(0.9); }
  65%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes peach-copy-confirm {
  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }
  to   { color: var(--peach-accent); border-color: color-mix(in srgb, var(--peach-accent) 42%, transparent); background-color: color-mix(in srgb, var(--peach-accent) 9%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--peach-accent) 22%, transparent), inset 0 0 18px color-mix(in srgb, var(--peach-accent) 12%, transparent); }
}
@keyframes peach-copy-retreat {
  from { color: var(--peach-accent); border-color: color-mix(in srgb, var(--peach-accent) 42%, transparent); background-color: color-mix(in srgb, var(--peach-accent) 9%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--peach-accent) 22%, transparent), inset 0 0 18px color-mix(in srgb, var(--peach-accent) 12%, transparent); }
  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }
}
@keyframes peach-copy-flood {
  from { opacity: 0; transform: scaleX(0.15); }
  to   { opacity: 1; transform: scaleX(1); }
}
@keyframes peach-copy-icon-settle {
  from  { transform: scale(0.84); }
  70%   { transform: scale(1.08); }
  to    { transform: scale(1); }
}
@keyframes peach-copy-sheen-retreat {
  from { opacity: 1; transform: scaleX(1); }
  to   { opacity: 0; transform: scaleX(0.15); }
}
@keyframes peach-copy-drain {
  from { width: 100%; }
  to   { width: 0; }
}
@keyframes peach-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

@keyframes pip-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(2.2); }
  100% { transform: scale(1); }
}


/* ── Password generator ── */
.peach-pwgen-body {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column;
}
.peach-policy-badge {
  display: flex; align-items: center;
  padding: 6px 20px 0;
  font-size: 0.625rem; font-family: Inter, sans-serif;
  color: var(--peach-t2); letter-spacing: 0.04em;
}
.peach-pwgen-display {
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--peach-t3);
  display: flex; align-items: flex-start; gap: 10px;
}
.peach-pwgen-display-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--peach-t3);
}
.peach-pwgen-output {
  flex: 1; min-width: 0; margin: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8125rem; color: var(--peach-t0);
  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;
  white-space: normal;
  padding: 10px 12px;
  background: var(--peach-t4);
  border-radius: 6px;
  min-height: 36px;
}
.peach-pwgen-output-display {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 32px;
  line-height: 1.05;
  color: var(--peach-t0);
  word-break: break-all;
  overflow-wrap: break-word;
  white-space: normal;
  letter-spacing: 0.02em;
}
.peach-pwgen-display-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  margin-top: 2px;
}
.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }
.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }
.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }
.peach-pwgen-len-num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem; color: var(--peach-accent);
}
.peach-pwgen-len-num--edit {
  cursor: text;
  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);
}
.peach-pwgen-len-input {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  color: var(--peach-accent);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--peach-accent);
  outline: none;
  width: 32px;
  text-align: right;
  padding: 0;
}
.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }
.peach-pwgen-toggles { display: flex; flex-direction: column; }
.peach-pwgen-charset-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.peach-pwgen-pill {
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--peach-t3);
  background: transparent;
  color: var(--peach-t2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 150ms ease;
}
.peach-pwgen-pill.is-on {
  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);
  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);
  color: var(--peach-accent);
}
.peach-pwgen-pill:not(.is-on):hover {
  color: var(--peach-t1);
  border-color: var(--peach-t2);
}
.peach-pwgen-use-btn {
  width: 100%;
  min-height: 34px;
  border-radius: 8px;
  margin-top: 2px;
}
.peach-generator-constraint-note {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--peach-t3);
  letter-spacing: 0.04em;
  margin: 0;
  transition: opacity 200ms ease;
}
.peach-pwgen-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);
}
.peach-pwgen-toggle-row:last-child { border-bottom: none; }
.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }

/* Peach popup should not expose native scrollbars on internal panels. */
.peach-settings-body,
.peach-new-body,
.peach-pwgen-body,
.lock-screen,
.peach-import-preview {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}
.peach-settings-body::-webkit-scrollbar,
.peach-new-body::-webkit-scrollbar,
.peach-pwgen-body::-webkit-scrollbar,
.lock-screen::-webkit-scrollbar,
.peach-import-preview::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.lock-screen {
  height: 100%;
  min-height: 100%;
  overflow-y: auto;
  padding: 18px 18px 16px;
  gap: 14px;
  grid-template-rows: auto auto auto 1fr auto;
  align-content: stretch;
  position: relative;
  isolation: isolate;
}
.peach-screen.lock-screen--vault-stage {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 18px;
  padding: 20px 18px 18px;
  overflow: hidden;
}
.peach-screen.lock-screen--vault-stage .peach-lock-panel {
  margin-top: 0;
}
.lock-screen--onboarding {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-start;
}

.lock-screen::before {
  content: "";
  position: absolute;
  inset: 12px 18px auto auto;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 42%, transparent 72%);
  filter: blur(6px);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

.peach-lock-rune-string {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: PeachScript, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  pointer-events: none;
  user-select: none;
  position: relative;
  z-index: 1;
}

.peach-lock-rune-string span {
  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);
  text-shadow:
    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),
    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);
  transition: color 0.9s ease, text-shadow 0.9s ease;
}

.peach-lock-rune-string span.is-glowing {
  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);
  text-shadow:
    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),
    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);
}

.lock-screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.lock-password-input.shake {
  animation: peach-shake 300ms ease-in-out;
}

.peach-hint-error {
  color: rgba(220, 80, 60, 0.92);
}

.peach-onboarding-headline {
  margin: 0;
  font-family: var(--font-display);
  font-size: 35px;
  line-height: 0.88;
  font-style: italic;
  font-weight: 400;
  max-width: 252px;
}

.peach-lock-copy {
  display: grid;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.peach-lock-copy--onboarding {
  gap: 10px;
}

.peach-lock-hero {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  min-height: 0;
  padding: 4px 2px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.peach-lock-hero-art {
  position: absolute;
  right: -8px;
  top: -6px;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.12;
  filter: saturate(0.9);
}
.peach-lock-hero-mark {
  width: 100%;
  height: 100%;
}
/* Peach body stays brand-peach across every accent — we don't want a
   green or blue peach when sage/sky is selected. Leaf + vein keep the
   sage tint because a real peach has a sage leaf. In the new brand-kit
   mark the leaf is path 1 and the vein stroke is path 2; the body and
   back-lobe (paths 3 + 4) must stay untouched. */
.peach-lock-hero-mark path:nth-child(1) {
  fill: rgba(123, 144, 96, 0.88);
}
.peach-lock-hero-mark path:nth-child(2) {
  stroke: rgba(94, 122, 66, 0.95);
}
.peach-lock-hero > *:not(.peach-lock-hero-art) {
  position: relative;
  z-index: 1;
}

.peach-lock-eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);
  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);
  color: var(--peach-t0);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.peach-lock-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}

.peach-lock-reveal-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  color: var(--peach-t2);
  padding: 2px 0;
  transition: color 150ms ease;
}

.peach-lock-reveal-btn:hover {
  color: var(--peach-t1);
}

.peach-lock-warning {
  color: rgba(220, 80, 60, 0.85) !important;
  line-height: 1.5;
}

.peach-onboarding-cards {
  display: grid;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.peach-lock-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
  padding: 14px 16px 15px;
  border-radius: 18px;
  border: 1px solid var(--peach-t3);
  background:
    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));
  box-shadow:
    inset 0 1px 0 rgba(240, 232, 216, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.12);
}

/* Glass surface — lock panel and settings groups */
.peach-glass {
  background: rgba(26, 20, 16, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
}

@supports not (backdrop-filter: blur(1px)) {
  .peach-glass {
    background: rgba(26, 20, 16, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);
  }
}

.light .peach-glass,
[data-theme="light"] .peach-glass {
  background: rgba(240, 233, 223, 0.72);
  border: 1px solid rgba(26, 18, 8, 0.08);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

@supports not (backdrop-filter: blur(1px)) {
  .light .peach-glass,
  [data-theme="light"] .peach-glass {
    background: rgba(240, 233, 223, 0.97);
    border: 1px solid rgba(26, 18, 8, 0.10);
  }
}

/* Lock panel keeps its own border-radius over the generic glass token */
.peach-lock-panel.peach-glass {
  border-radius: 18px;
  background: rgba(26, 20, 16, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 28px rgba(0, 0, 0, 0.3);
}

.light .peach-lock-panel.peach-glass,
[data-theme="light"] .peach-lock-panel.peach-glass {
  background: rgba(240, 233, 223, 0.82);
  border: 1px solid rgba(26, 18, 8, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 8px 24px rgba(80, 56, 32, 0.15);
}

@supports not (backdrop-filter: blur(1px)) {
  .peach-lock-panel.peach-glass {
    background: rgba(26, 20, 16, 0.92);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 12px 28px rgba(0, 0, 0, 0.4);
  }
  .light .peach-lock-panel.peach-glass,
  [data-theme="light"] .peach-lock-panel.peach-glass {
    background: rgba(240, 233, 223, 0.98);
  }
}

.peach-lock-panel--secondary {
  gap: 12px;
}

.peach-lock-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.peach-lock-option-grid {
  display: grid;
  gap: 10px;
}

.peach-lock-option {
  width: 100%;
  display: grid;
  gap: 6px;
  padding: 14px 15px;
  border-radius: 16px;
  border: 1px solid rgba(240, 232, 216, 0.08);
  background: rgba(240, 232, 216, 0.02);
  color: var(--peach-t0);
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.peach-lock-option:hover {
  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);
  background: rgba(240, 232, 216, 0.04);
  transform: translateY(-1px);
}

.peach-lock-option-title {
  font-size: 0.75rem;
  color: var(--peach-t0);
}

.peach-lock-option-copy {
  font-size: 0.6875rem;
  line-height: 1.55;
  color: var(--peach-t1);
}

.peach-onboarding-stack {
  margin-top: 2px;
}
.peach-lock-panel-footer {
  display: grid;
  gap: 6px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(240, 232, 216, 0.06);
}

/* ── Restore tab view ─────────────────────────────────────────────────────
   Tab-based restore screen replacing the old three-card picker. */

.peach-restore-tabview {
  overflow: hidden;
}

.peach-restore-tabcard {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  cursor: default;
  user-select: none;
  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Tab selector ─────────────────────────────────────────────────────── */

.peach-restore-tabs {
  display: flex;
  justify-content: space-around;
  padding: 14px 10px 10px;
  border-bottom: 1px solid var(--peach-t3);
  gap: 2px;
  overflow: hidden;
  scrollbar-width: none;
}
.peach-restore-tabs::-webkit-scrollbar { display: none; }

.peach-restore-tab {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 2px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 11px;
  color: var(--peach-t2);
  transition: color 150ms ease, text-shadow 150ms ease;
  flex: 1;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.peach-restore-tab:hover {
  color: var(--peach-accent);
  text-shadow:
    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),
    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);
}
.peach-restore-tab.is-active {
  color: var(--peach-accent);
  text-shadow:
    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),
    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);
}

/* ── Content area ─────────────────────────────────────────────────────── */

.peach-restore-content {
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  scrollbar-width: none;
  flex: 1;
}
.peach-restore-content::-webkit-scrollbar { display: none; }
.peach-restore-content > * {
  overflow: hidden;
  scrollbar-width: none;
}
.peach-restore-content > *::-webkit-scrollbar { display: none; }

/* ── Shared tab inner layout ──────────────────────────────────────────── */

.peach-rt-symbols,
.peach-rt-csv,
.peach-rt-phone,
.peach-restore-codex {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.peach-restore-codex {
  min-height: 0;
  justify-content: center;
}

.peach-restore-codex-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  color: var(--peach-t0);
}

.peach-restore-codex-copy {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--peach-t1);
}

.peach-restore-codex-button {
  width: 100%;
  justify-content: center;
}

.peach-rt-submit {
  width: 100%;
}

.peach-rt-error {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--peach-breach);
  line-height: 1.4;
}

/* ── PeachScript tab ──────────────────────────────────────────────────── */

.peach-restore-symbols-textarea {
  font-family: 'PeachScript', monospace;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.1em;
  word-break: break-all;
  resize: none;
  width: 100%;
  min-height: 56px;
  max-height: 72px;
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-sizing: border-box;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--peach-t3);
  background: rgba(240, 232, 216, 0.03);
  color: var(--peach-t0);
}
.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }
.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }

.peach-restore-symbols-pass {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--peach-t3);
  background: rgba(240, 232, 216, 0.03);
  color: var(--peach-t0);
  font-size: 0.8125rem;
}
.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }
.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }

.peach-rt-divider {
  text-align: center;
  font-size: 0.6875rem;
  color: var(--peach-t2);
  font-style: italic;
}

.peach-rt-file-label {
  width: 100%;
  justify-content: center;
}

.peach-rt-anim-canvas {
  width: 100%;
  height: 180px;
  border-radius: 10px;
  overflow: hidden;
  display: block;
}

/* ── CSV tab ──────────────────────────────────────────────────────────── */

.peach-rt-csv-sources {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--peach-t2);
  line-height: 1.5;
  text-align: center;
}

.peach-rt-csv-warning {
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  color: var(--peach-breach);
  text-align: center;
}

/* ── From Phone tab ───────────────────────────────────────────────────── */

.peach-rt-phone-code {
  margin: 0;
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 22px;
  letter-spacing: 0.18em;
  color: var(--peach-t0);
}

.peach-rt-phone-qr {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto;
  border-radius: 6px;
  image-rendering: pixelated;
  overflow: hidden;
}

.peach-rt-phone-hint {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--peach-t2);
  line-height: 1.55;
  text-align: center;
}

/* ── Intro popup ──────────────────────────────────────────────────────── */

.peach-restore-intro-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(12, 10, 6, 0.7);
  backdrop-filter: blur(4px);
  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.peach-restore-intro-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px 20px;
  border-radius: 16px;
  border: 1px solid var(--peach-t3);
  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);
}

.peach-restore-intro-headline {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  font-weight: 400;
  color: var(--peach-t0);
}

.peach-restore-intro-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.peach-restore-intro-body p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--peach-t1);
  line-height: 1.5;
}

.peach-restore-intro-btn {
  width: 100%;
  margin-top: 4px;
}

/* Snapshot restore panel */
.peach-snapshot-panel {
  gap: 10px;
  overflow-y: auto;
  max-height: 340px;
}
.peach-snapshot-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.peach-snapshot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(240, 232, 216, 0.07);
  background: transparent;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
  text-align: left;
  gap: 8px;
}
.peach-snapshot-row:hover {
  border-color: rgba(240, 232, 216, 0.14);
  background: rgba(240, 232, 216, 0.03);
}
.peach-snapshot-row.is-selected {
  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);
  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);
}
.peach-snapshot-time {
  font-size: 11.5px;
  color: var(--peach-t0);
  flex: 1;
}
.peach-snapshot-count {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  color: var(--peach-t2);
  flex-shrink: 0;
}
.peach-snapshot-confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(240, 232, 216, 0.06);
}
.peach-snapshot-warning {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 10.5px;
  color: rgba(220, 80, 60, 0.85);
  line-height: 1.55;
}
.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }
.peach-snapshot-confirm-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.peach-snapshot-restore-btn {
  width: 100%;
}
.peach-lock-hero--unlock .peach-lock-hero-art {
  width: 112px;
  height: 112px;
  right: 0;
  top: 2px;
  opacity: 0.1;
}

.peach-card {
  border: 1px solid var(--peach-t3);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);
  box-shadow:
    inset 0 0 0 1px var(--peach-border-accent),
    inset 0 1px 0 rgba(240, 232, 216, 0.04),
    0 12px 32px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}

.peach-card-active {
  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(240, 232, 216, 0.05),
    0 16px 38px rgba(0, 0, 0, 0.18),
    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);
}

.peach-card-disabled {
  opacity: 0.72;
}

.peach-card-header {
  width: 100%;
  padding: 13px 16px 11px;
  background: transparent;
  color: var(--peach-t0);
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  font-size: 0.75rem;
}

.peach-card-body {
  padding: 0 16px 16px;
  display: grid;
  gap: 9px;
}

.peach-card-tag {
  color: var(--peach-t2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.peach-empty-copy {
  display: grid;
  gap: 6px;
  color: var(--peach-t1);
  font-size: 0.8125rem;
}

.peach-lock-submit {
  width: 100%;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),
    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),
    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);
}

.peach-lock-secondary {
  width: 100%;
  border-color: var(--peach-t3);
  background: rgba(240, 232, 216, 0.02);
}

.peach-lock-secondary:hover {
  background: rgba(240, 232, 216, 0.04);
}

.peach-lock-note {
  max-width: none;
  line-height: 1.55;
  margin: 0;
}

.peach-overlay-action {
  font-size: 0.625rem;
  padding: 4px 8px;
  letter-spacing: 0.06em;
  min-width: 44px;
  text-align: center;
}

.peach-inline-action {
  flex-shrink: 0;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 7px;
}
.peach-password-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 26px;
  padding: 0 7px;
  border: 1px solid var(--peach-t3);
  border-radius: 999px;
  background: rgba(240, 232, 216, 0.04);
  color: var(--peach-t2);
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.peach-password-toggle-btn:hover {
  border-color: var(--peach-t2);
  color: var(--peach-t0);
  background: rgba(240, 232, 216, 0.06);
}

.peach-new-textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--peach-t1);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  line-height: 1.65;
  caret-color: var(--peach-accent);
}

.peach-new-textarea::placeholder {
  color: var(--peach-t2);
  opacity: 0.7;
}

.peach-settings-actions {
  display: grid;
  gap: 8px;
}

.peach-sync-section-label {
  font-size: 0.6875rem;
  color: var(--peach-t2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.peach-sync-network-note {
  margin: 0 0 6px;
  font-size: 0.75rem;
  color: var(--peach-t2);
  line-height: 1.4;
}

.peach-settings-row--tappable {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: var(--peach-t1);
  font-size: 0.8125rem;
}
.peach-settings-row--tappable:hover {
  color: var(--peach-t0);
}

.peach-sync-pro-hint {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 0 4px;
}

.peach-sync-device-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--peach-t3);
}

.peach-sync-device-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.peach-sync-device-name {
  font-size: 0.8125rem;
  color: var(--peach-t0);
}

.peach-sync-device-meta {
  font-size: 0.6875rem;
  color: var(--peach-t2);
}

.peach-sync-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
}

.peach-sync-remove-btn {
  color: var(--peach-breach);
}

.peach-sync-advanced-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  gap: 12px;
}

.peach-sync-advanced-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.peach-sync-advanced-name {
  font-size: 0.8125rem;
  color: var(--peach-t0);
}

.peach-sync-reset-confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--peach-breach);
  border-radius: 10px;
  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);
}

.peach-sync-reset-confirm-headline {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--peach-t0);
  margin: 0;
}

.peach-sync-reset-confirm-body {
  font-size: 0.75rem;
  color: var(--peach-t1);
  margin: 0;
  line-height: 1.4;
}

.peach-btn--danger {
  background: var(--peach-breach);
  color: #fff;
  border-color: var(--peach-breach);
}
.peach-btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--peach-breach) 88%, #000);
}
.peach-btn--danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.peach-sync-hero-icon {
  color: var(--peach-t1);
  opacity: 0.85;
}

.peach-import-preview {
  margin-bottom: 12px;
  max-height: 152px;
  overflow-y: auto;
  border: 1px solid var(--peach-t3);
  border-radius: 10px;
  padding: 8px 10px;
  display: grid;
  gap: 8px;
  background: rgba(240, 232, 216, 0.02);
}

.peach-import-preview-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.6875rem;
  color: var(--peach-t1);
}

.peach-import-preview-title {
  color: var(--peach-t0);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.peach-import-preview-meta {
  color: var(--peach-t2);
  flex-shrink: 0;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.peach-import-preview-more {
  color: var(--peach-t2);
  font-size: 0.625rem;
}

.peach-restore-copy {
  margin: 0;
  color: var(--peach-t1);
  font-size: 0.6875rem;
  line-height: 1.6;
}

.peach-restore-warning {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);
  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);
  color: var(--peach-t0);
  font-size: 0.6875rem;
  line-height: 1.55;
}

.peach-provider-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.peach-provider-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--peach-t3);
  background: rgba(240, 232, 216, 0.02);
  color: var(--peach-t1);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.peach-restore-file,
.peach-restore-input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--peach-t3);
  background: var(--peach-s2);
  color: var(--peach-t0);
  font-size: 0.75rem;
}

.peach-restore-file {
  padding: 9px 10px;
}

.peach-restore-file::file-selector-button {
  margin-right: 10px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);
  color: var(--peach-t0);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.peach-restore-input {
  padding: 10px 12px;
}

.peach-auth-grid {
  display: grid;
  gap: 10px;
}

.peach-import-summary {
  color: var(--peach-t1);
  font-size: 0.75rem;
  line-height: 1.6;
  margin-bottom: 12px;
}

.peach-restore-error {
  color: rgba(220, 80, 60, 0.95);
  font-size: 0.75rem;
  line-height: 1.55;
}

.peach-passkey-card {
  max-width: 400px;
  margin: auto 16px;
  align-self: center;
  width: calc(100% - 32px);
}

/* Center the approval card vertically inside the overlay-view (which sets
 * flex-direction: column without justify-content). Without this, the card
 * sits at the top with a tall empty band below — looks unfinished on the
 * 320px popup. */
.peach-overlay-view:has(.peach-passkey-card) {
  justify-content: center;
}

.peach-pro-badge {
  padding: 2px 6px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);
  color: var(--peach-accent);
}

/* ── Shortcuts rebind table ─────────────────────────────────── */
.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }
.peach-shortcut-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.peach-shortcut-row-label {
  flex: 1;
  font-size: 0.75rem;
  color: var(--peach-t0);
}
.peach-shortcut-chip {
  min-width: 64px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--peach-t3);
  background: var(--peach-input-bg, var(--surface-card));
  color: var(--peach-t0);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: center;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }
.peach-shortcut-chip.is-custom {
  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);
  color: var(--peach-accent);
}
.peach-shortcut-chip.is-capturing {
  border-color: var(--peach-accent);
  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);
  color: var(--peach-accent);
  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;
}
@keyframes peach-shortcut-capture-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }
  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }
}
.peach-shortcut-reset {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--peach-t2);
  padding: 4px 6px;
  border-radius: 5px;
  font-size: 0.875rem;
  line-height: 1;
  transition: color 120ms ease, background 120ms ease;
}
.peach-shortcut-reset:hover {
  color: var(--peach-t0);
  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);
}
.peach-shortcuts-conflict {
  margin: 4px 0 0;
  padding: 8px 10px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--peach-t0);
}

/* ── Help dialog overlay (? to open) ────────────────────────── */
.peach-shortcuts-help-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: peach-help-fade-in 140ms ease forwards;
}
@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }
.peach-shortcuts-help-card {
  width: min(320px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  border-radius: 14px;
  border: 1px solid var(--peach-t3);
  background: var(--peach-bg);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.peach-shortcuts-help-head {
  display: flex; align-items: center; justify-content: space-between;
}
.peach-shortcuts-help-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  color: var(--peach-t0);
}
.peach-shortcuts-help-close {
  background: transparent;
  border: none;
  color: var(--peach-t2);
  cursor: pointer;
  font-size: 0.875rem;
  padding: 4px 8px;
  border-radius: 5px;
}
.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }
.peach-shortcuts-help-body ul {
  list-style: none; padding: 0; margin: 4px 0 12px;
  display: grid; gap: 8px;
}
.peach-shortcuts-help-body li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 0.75rem; color: var(--peach-t0);
}
.peach-shortcuts-help-body kbd {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface-card);
  border: 1px solid var(--peach-t3);
  color: var(--peach-accent);
  letter-spacing: 0.04em;
}

/* ── Pro promo on Account screen ────────────────────────────── */
.peach-pro-promo {
  position: relative;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),
    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),
    var(--surface-card);
  overflow: hidden;
  margin-bottom: 14px;
}
.peach-pro-promo-glow {
  position: absolute;
  inset: -40% -20% auto auto;
  width: 220px; height: 220px;
  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);
  pointer-events: none;
  filter: blur(8px);
}
.peach-pro-promo-inner {
  position: relative;
  padding: 18px 18px 16px;
}
.peach-pro-promo-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--peach-t0);
  margin: 0 0 4px;
}
.peach-pro-promo-tagline {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--peach-t2);
  margin: 0 0 14px;
}
.peach-pro-promo-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 9px;
}
.peach-pro-promo-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.75rem;
  color: var(--peach-t1);
  line-height: 1.4;
}
.peach-pro-promo-list svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--peach-accent);
  margin-top: 2px;
}
.peach-pro-promo-list span {
  color: var(--peach-t0);
}
.peach-pro-promo-cta {
  width: 100%;
  background: var(--peach-accent);
  color: #fff;
  border: none;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--font-ui);
  letter-spacing: 0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;
  box-shadow: 0 2px 16px var(--peach-glow);
}
.peach-pro-promo-cta:hover {
  filter: brightness(1.07);
  box-shadow: 0 4px 24px var(--peach-glow);
  transform: translateY(-1px);
}
.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }

.peach-pro-or-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--peach-t2);
  text-transform: uppercase;
}
.peach-pro-or-divider::before,
.peach-pro-or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--peach-t3);
}

.peach-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  animation: peach-loading-pulse 1.2s ease-in-out infinite;
}

@keyframes peach-loading-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ── Health Dashboard ─────────────────────────────────────────────────── */
.peach-health-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* Hide the platform scrollbar — every other scrollable surface in the
   * popup hides it; the Health view was the one outlier and it ruined the
   * polish. Behavior unchanged, just no rail rendered. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.peach-health-body::-webkit-scrollbar { display: none; }

/* Loading screen for the Vault Health view. The advanced report computation
 * can run for a few seconds on a large vault — without a clear loading
 * screen the surface looked broken (the entry view bleeds through the
 * empty body). Centered glyph + title + copy + indeterminate progress bar. */
.peach-health-loading-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 28px;
  text-align: center;
}

.peach-health-loading-glyph {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);
  color: var(--peach-accent);
}

.peach-health-loading-title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 19px;
  line-height: 1.2;
  color: var(--peach-t0);
}

.peach-health-loading-copy {
  margin: 0;
  max-width: 240px;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--peach-t2);
}

.peach-health-loading-track {
  width: 200px;
  height: 3px;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(240, 232, 216, 0.06);
  overflow: hidden;
}

.peach-health-loading-fill {
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--peach-accent) 50%,
    transparent 100%
  );
  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;
}

@keyframes peach-health-loading-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

[data-motion="reduce"] .peach-health-loading-fill,
[data-motion="reduce"] .peach-health-loading-glyph svg path {
  animation: none;
}

.peach-health-summary {
  padding: 10px 16px 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
}
.peach-health-summary-warn { color: rgba(220,80,60,0.9); }
.peach-health-summary-ok { color: var(--peach-t2); }

.peach-health-check-row {
  padding: 0 16px 10px;
}
.peach-health-check-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.peach-health-sections {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.peach-health-section {
  border-bottom: 1px solid var(--peach-t3);
}

.peach-health-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  background: transparent;
  cursor: pointer;
  color: var(--peach-t0);
}

.peach-health-section-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.peach-health-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(220,80,60,0.15);
  border: 1px solid rgba(220,80,60,0.25);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  color: rgba(220,80,60,0.9);
}

.peach-health-section-title {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--peach-t1);
}

.peach-health-chevron {
  color: var(--peach-t2);
  transition: transform 200ms ease;
  flex-shrink: 0;
}
.peach-health-chevron.is-expanded {
  transform: rotate(180deg);
}

.peach-health-section-body {
  padding: 0 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.peach-health-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(240,232,216,0.02);
}

.peach-health-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.peach-health-row-name {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-style: italic;
  font-weight: 400;
  color: var(--peach-t0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.peach-health-row-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  color: var(--peach-t2);
  letter-spacing: 0.05em;
}

.peach-health-fix-btn {
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.peach-health-empty {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  color: var(--peach-t2);
  padding: 6px 0;
}

.peach-health-loading {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  color: var(--peach-t2);
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.peach-health-loading::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--peach-t3);
  border-top-color: var(--peach-accent);
  border-radius: 50%;
  animation: peach-spin 600ms linear infinite;
}

@keyframes peach-spin {
  to { transform: rotate(360deg); }
}

.peach-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid var(--peach-s2);
  border-top-color: var(--peach-accent);
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: peach-spin 0.8s linear infinite;
}

.peach-progress-screen {
  text-align: center;
  padding: 32px 16px;
}

.peach-progress-screen-title {
  font-size: 0.8125rem;
  color: var(--peach-t0);
  margin-bottom: 16px;
}

.peach-progress-screen-stage {
  font-size: 0.6875rem;
  color: var(--peach-t2);
  min-height: 14px;
}

.peach-progress-screen-note {
  font-size: 0.625rem;
  color: var(--peach-t2);
  margin-top: 8px;
}

/* Tag chips */
.peach-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);
  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);
  color: var(--peach-t0);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
}

.peach-tag-chip-remove {
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  padding: 0;
  font-size: 0.75rem;
  line-height: 1;
}

.peach-tag-chip-remove:hover {
  opacity: 1;
}

/* Tag input */
.peach-tag-input-wrap {
  border-bottom: 1px solid var(--peach-t3);
}

.peach-tag-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 0;
}

.peach-tag-suggestion {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--peach-t3);
  background: var(--peach-s2);
  color: var(--peach-t1);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  cursor: pointer;
  transition: border-color 80ms ease, background 80ms ease;
}

.peach-tag-suggestion:hover {
  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);
  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);
}

/* Identity suggestions — shown below username/email inputs in new-entry form */
@keyframes peach-suggest-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.peach-identity-suggestions {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 4px;
  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.peach-identity-filter-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0 5px;
}

.peach-identity-collapse-btn {
  margin-left: auto;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--peach-t3);
  padding: 2px 4px;
  display: flex;
  align-items: center;
  line-height: 0;
  border-radius: 3px;
  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.peach-identity-collapse-btn:hover {
  color: var(--peach-t1);
}

.peach-identity-collapse-btn.is-collapsed {
  transform: rotate(-90deg);
}

.peach-identity-rows {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.peach-identity-rows.is-collapsed {
  grid-template-rows: 0fr;
}

.peach-identity-rows-inner {
  overflow-y: auto;
  min-height: 0;
  max-height: 148px;
  scrollbar-width: thin;
  scrollbar-color: var(--peach-t3) transparent;
  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);
}

.peach-identity-rows-inner::-webkit-scrollbar {
  width: 4px;
}

.peach-identity-rows-inner::-webkit-scrollbar-track {
  background: transparent;
}

.peach-identity-rows-inner::-webkit-scrollbar-thumb {
  background: var(--peach-t3);
  border-radius: 2px;
}

.peach-identity-filter-pill {
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--peach-t3);
  background: transparent;
  color: var(--peach-t2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6rem;
  cursor: pointer;
  transition: border-color 80ms, background 80ms, color 80ms;
}

.peach-identity-filter-pill.is-on {
  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);
  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);
  color: var(--peach-accent);
}

.peach-identity-suggestion {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 6px;
  border-radius: 5px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 80ms ease;
}

.peach-identity-suggestion:hover,
.peach-identity-suggestion:focus {
  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);
  outline: none;
}

.peach-identity-suggestion-value {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  color: var(--peach-t1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.peach-identity-suggestion-type {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.55rem;
  font-weight: 600;
  flex-shrink: 0;
  padding: 1px 4px;
  border-radius: 3px;
}

.peach-identity-suggestion-type--email {
  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);
  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);
}

.peach-identity-suggestion-type--username {
  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);
  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);
}

.peach-identity-suggestion-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6rem;
  color: var(--peach-t3);
  flex-shrink: 0;
}

/* Tag filter strip */
.peach-tag-filter-strip {
  border-bottom: 1px solid var(--peach-t3);
  flex-shrink: 0;
}

.peach-tag-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--peach-t3);
  background: transparent;
  color: var(--peach-t2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
  white-space: nowrap;
}

.peach-tag-filter-chip:hover {
  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);
  color: var(--peach-t1);
}

.peach-tag-filter-chip.is-selected {
  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);
  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);
  color: var(--peach-t0);
}

/* ─────────────────────────────────────────────────────────────────────────
   v1.4.12 additions
   ─────────────────────────────────────────────────────────────────────── */

/* Sort bar */
.peach-sort-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--peach-t3);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.peach-sort-btn {
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--peach-t2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
  white-space: nowrap;
}

.peach-sort-btn:hover {
  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);
  color: var(--peach-t1);
}

.peach-sort-btn.is-active {
  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);
  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);
  color: var(--peach-t0);
}

.peach-sort-scope-btn {
  padding-inline: 8px;
  font-size: 0.53125rem;
  letter-spacing: 0.05em;
}

.peach-sort-domain-hint {
  margin-left: auto;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}

/* Tab-match badge on entry rows */
.peach-tab-match-badge {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);
  margin-left: 5px;
  vertical-align: middle;
  flex-shrink: 0;
  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);
}

.peach-entry-row.is-tab-match {
  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);
  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);
}

.peach-entry-row.is-tab-match:hover {
  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);
}

/* Entry list stagger entrance */
@keyframes peach-entry-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.peach-vault-list .peach-entry-row {
  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Button press micro-interaction */
.peach-btn:active {
  transform: scale(0.95);
  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.peach-sort-btn:active,
.peach-tag-filter-chip:active {
  transform: scale(0.93);
  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Password strength bar (Lock view + shared) */
.peach-password-strength {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.peach-strength-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--peach-t3);
  overflow: hidden;
}

.peach-strength-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background 300ms ease;
}

.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }
.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }
.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }
.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }

.peach-strength-label {
  font-family: "IBM Plex Mono", monospace;
  font-style: italic;
  font-size: 0.5625rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--peach-t2);
  min-width: 36px;
  text-align: right;
}

.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }
.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }
.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }
.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }

/* Duress form */
.peach-duress-status {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--peach-t3);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--peach-t2);
  flex-shrink: 0;
}

.peach-duress-status.is-active {
  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);
  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);
  color: var(--peach-t0);
}

.peach-duress-form {
  padding: 8px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.peach-duress-form .peach-label {
  margin-top: 4px;
}

.peach-duress-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}

.peach-duress-actions .peach-btn:first-child {
  margin-right: auto;
}

/* Improved overlay spring entrance */
.peach-overlay-view.ov-enter-up {
  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes ov-enter-up-spring {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.peach-overlay-view.ov-enter-right {
  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes ov-enter-right-spring {
  from { opacity: 0; transform: translateX(18px) scale(0.98); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ── Onboarding-mode restore screens (file import) ── */
/* Used when MainImportView renders during onboarding (no vault yet).
   Animates like a lock-screen transition. */
.peach-lock-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),
    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),
    var(--peach-bg);
  z-index: 2;
  overflow: hidden;
  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.peach-lock-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  flex-shrink: 0;
}

/* ───────── Settings: auto-lock select ───────── */
.peach-settings-select {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
  background: transparent;
  border: 1px solid var(--peach-t3);
  border-radius: 4px;
  color: var(--peach-t1);
  padding: 3px 6px;
  cursor: pointer;
  outline: none;
}
.peach-settings-select:focus {
  border-color: var(--peach-accent);
}

/* ───────── Duress status pill (new polished) ───────── */
.peach-duress-status-pill {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--peach-t3);
  color: var(--peach-t2);
  flex-shrink: 0;
}
.peach-duress-status-pill.is-active {
  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);
  color: var(--peach-accent);
}

/* ───────── Entry advanced disclosure (canary) ───────── */
.peach-entry-advanced {
  margin-top: 12px;
  border-top: 1px solid var(--peach-t3);
  padding-top: 10px;
  position: relative;
  z-index: 1;
}
.peach-entry-advanced-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--peach-t2);
}
.peach-canary-section {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

/* ───────── Import: merge/replace radio choices ───────── */
.peach-import-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--peach-t3);
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 6px;
  transition: border-color 120ms ease, background 120ms ease;
}
.peach-import-choice:hover {
  border-color: var(--peach-accent);
}
.peach-import-choice input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--peach-accent);
  flex-shrink: 0;
}
.peach-import-choice-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.peach-import-choice-label {
  font-size: 0.75rem;
  color: var(--peach-t0);
}
.peach-import-choice-sub {
  font-size: 0.6875rem;
  color: var(--peach-t2);
  line-height: 1.5;
}

/* ───────── Export: success confirmation strip ───────── */
.peach-export-success {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(150, 175, 110, 0.3);
  background: rgba(150, 175, 110, 0.08);
  color: var(--peach-t0);
  font-size: 0.75rem;
  line-height: 1.55;
}
.peach-export-success-check {
  color: rgba(150, 175, 110, 0.9);
  font-size: 0.875rem;
  flex-shrink: 0;
}

/* ── Trash view ──────────────────────────────────────────────────────── */
.peach-trash-entry-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--peach-border);
}
.peach-trash-entry-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.peach-trash-entry-title {
  font-size: 0.8125rem;
  color: var(--peach-t0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.peach-trash-entry-meta {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  color: var(--peach-t2);
  letter-spacing: 0.04em;
}
.peach-trash-entry-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.peach-trash-delete-btn {
  background: transparent;
  border: 0;
  color: var(--peach-t3);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
  transition: color 0.15s;
}
.peach-trash-delete-btn:hover { color: var(--peach-breach); }
.peach-trash-list {
  overflow-y: auto;
}
.peach-trash-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 0;
  border-top: 1px solid var(--peach-border);
  margin-top: 4px;
}
.peach-trash-purge-all {
  background: transparent;
  border: 0;
  color: var(--peach-t3);
  font-size: 0.625rem;
  cursor: pointer;
  padding: 4px 0;
  letter-spacing: 0.03em;
  transition: color 0.2s;
}
.peach-trash-purge-all:hover { color: var(--peach-breach); }
.peach-trash-purge-confirm-label {
  font-size: 0.625rem;
  color: var(--peach-t1);
  flex: 1;
}

/* ── Settings shortcuts grid ─────────────────────────────────────────── */
.peach-shortcuts-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  align-items: center;
  padding: 4px 0;
}
.peach-shortcut-key {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--peach-t0);
  background: var(--peach-t3);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
  text-align: center;
}
.peach-shortcut-desc {
  font-size: 0.6875rem;
  color: var(--peach-t1);
}

/* ── Sort bar trash button ───────────────────────────────────────────── */
.peach-sort-trash-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--peach-t2);
  border-radius: 4px;
  transition: color 140ms ease, background 140ms ease;
}
.peach-sort-trash-btn:hover {
  color: var(--peach-t1);
  background: var(--peach-t3);
}
.peach-sort-trash-btn.is-active {
  color: var(--peach-accent);
}

/* Accent color picker */
.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }
.peach-accent-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 2px 0;
}
.peach-accent-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 100ms;
  outline-offset: 2px;
}
.peach-accent-swatch:hover { transform: scale(1.15); }
.peach-accent-swatch.is-active {
  border-color: var(--peach-t0);
  transform: scale(1.1);
}

.peach-pill-group {
  display: flex;
  gap: 6px;
}
.peach-pill-group .peach-btn.is-active {
  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);
  border-color: var(--peach-accent);
  color: var(--peach-t0);
}

/* ── Card entry styles ───────────────────────────────────────── */
.peach-card-number {
  font-family: var(--peach-mono);
  letter-spacing: 0.08em;
}

.peach-card-network-badge {
  font-size: 0.625rem;
  padding: 1px 5px;
  border-radius: 4px;
  border: 0.5px solid var(--peach-border);
  color: var(--peach-text-dim);
  margin-left: 6px;
  vertical-align: middle;
}

.peach-card-expiry-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.peach-card-expiry-sep {
  color: var(--peach-text-dim);
}

/* ── Pro tier — upgrade screen ──────────────────────────────── */
.peach-pro-mark {
  font-size: 0.5625rem;
  color: var(--peach-accent);
  margin-left: 6px;
  vertical-align: super;
  opacity: 0.7;
}

.peach-pro-mini-badge {
  display: block;
  font-size: 0.625rem;
  font-style: italic;
  color: var(--peach-accent);
  letter-spacing: 0.04em;
  margin-top: -2px;
  padding-left: 2px;
  opacity: 0.85;
  text-align: center;
}

.peach-wordmark-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

/* ── Pro tier — upgrade page ─────────────────────────────────── */
/* ── Pro upgrade — redesigned editorial layout ─────────────────── */

.peach-pro-upgrade {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 2px 2px 12px;
}

.peach-pro-eyebrow {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--peach-accent);
}

.peach-pro-headline {
  margin: 0;
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-size: 30px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.05;
  color: var(--peach-t0);
  letter-spacing: -0.01em;
}
.peach-pro-headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--peach-accent);
}

.peach-pro-subtitle {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--peach-t1);
}

/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */
.peach-pro-section-label {
  margin: 6px 0 0;
  font-family: var(--font-ui);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--peach-t2);
}

/* 2-column numbered feature grid */
.peach-pro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--peach-border);
  border-left: 1px solid var(--peach-border);
}

.peach-pro-grid-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 9px;
  border-right: 1px solid var(--peach-border);
  border-bottom: 1px solid var(--peach-border);
}

.peach-pro-grid-item--wide {
  grid-column: 1 / -1;
}

.peach-pro-grid-num {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  color: var(--peach-accent);
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.peach-pro-grid-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--peach-t0);
  line-height: 1.2;
}

.peach-pro-grid-desc {
  font-size: 0.625rem;
  color: var(--peach-t1);
  line-height: 1.4;
}

.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {
  animation: peach-pulse-accent 600ms ease-out forwards;
}

@keyframes peach-pulse-accent {
  0%   { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0.85; transform: scale(1); }
}

/* Actions */
.peach-pro-upgrade-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.peach-pro-pricing {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--peach-t0);
  letter-spacing: 0.01em;
}
.peach-pro-pricing-sub {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--peach-t1);
  letter-spacing: 0.02em;
}

.peach-pro-upgrade-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);
  border: 1px solid var(--peach-accent);
  border-radius: 10px;
  color: var(--peach-accent);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 11px 16px;
  transition: background 0.15s ease, color 0.15s ease;
}
.peach-pro-upgrade-cta:hover {
  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);
}

.peach-pro-key-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--peach-t2);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
}
.peach-pro-key-divider::before,
.peach-pro-key-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--peach-border);
}

/* Inline key entry row */
.peach-pro-key-inline {
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);
  border: 1px solid var(--peach-border);
  border-radius: 8px;
  overflow: hidden;
}
.peach-pro-key-inline-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--peach-t1);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  padding: 9px 10px;
}
.peach-pro-key-inline-input::placeholder {
  color: var(--peach-t2);
}
.peach-pro-key-apply {
  background: transparent;
  border: none;
  border-left: 1px solid var(--peach-border);
  color: var(--peach-t2);
  font-family: var(--font-ui);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 9px 10px;
  cursor: pointer;
  transition: color 0.15s ease;
  flex-shrink: 0;
}
.peach-pro-key-apply:not(:disabled):hover {
  color: var(--peach-accent);
}
.peach-pro-key-apply:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Pro tier — key ceremony ─────────────────────────────────── */
.peach-pro-key-ceremony {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 4px 16px;
}

.peach-pro-key-ceremony .peach-lock-rune-string {
  font-size: 1rem;
  gap: 12px;
  flex: 0;
  justify-content: center;
}

.peach-pro-key-ceremony-label {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--peach-t2);
  font-style: italic;
  letter-spacing: 0.04em;
}

.peach-pro-key-input {
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.06em;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.peach-pro-key-error {
  margin: 0;
  font-size: 0.75rem;
  text-align: center;
  color: var(--peach-breach, #e55);
  padding: 0;
}

.peach-pro-key-activate {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  padding: 10px 20px;
  font-size: 0.8125rem;
}

.peach-pro-key-cancel {
  background: transparent;
  border: 0;
  color: var(--peach-t2);
  font-size: 0.6875rem;
  cursor: pointer;
  padding: 2px 8px;
  transition: color 0.2s;
}

.peach-pro-key-cancel:hover { color: var(--peach-accent); }

/* ── Pro tier — active state ─────────────────────────────────── */
.peach-pro-active {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 8px 4px 16px;
  min-height: 280px;
}

.peach-pro-active-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 0 8px;
}

.peach-pro-active-mark-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.peach-pro-active-mark {
  width: 60px;
  height: 60px;
}

.peach-pro-active-title {
  font-family: var(--font-display, var(--font-ui));
  font-size: 26px;
  margin: 0;
  color: var(--peach-t0);
  letter-spacing: 0.01em;
}

.peach-pro-active-since {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--peach-t2);
  font-style: italic;
}

.peach-pro-active-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 14px 8px 0;
  border-top: 1px solid var(--peach-border);
  flex: 1;
}

.peach-pro-active-feature {
  display: flex;
  align-items: center;
  gap: 9px;
}

.peach-pro-active-feature-mark {
  color: var(--peach-accent);
  font-size: 0.625rem;
  opacity: 0.65;
  flex-shrink: 0;
}

.peach-pro-active-feature-name {
  font-size: 0.75rem;
  color: var(--peach-t1);
}

.peach-pro-deactivate {
  align-self: center;
  background: transparent;
  border: 0;
  color: var(--peach-t3);
  font-size: 0.625rem;
  cursor: pointer;
  padding: 8px 0 0;
  margin-top: 16px;
  letter-spacing: 0.03em;
  transition: color 0.2s;
}

.peach-pro-deactivate:hover { color: var(--peach-t2); }

.peach-pro-deactivate:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── Pro card activation sparkles & thank-you ── */
button.peach-pro-active-mark-wrap {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  overflow: visible;
}

.peach-pro-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.peach-pro-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 9px;
  line-height: 1;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;
}

@keyframes peach-pro-spark-fly {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  25%  { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(
      calc(-50% + var(--spark-x, 0px)),
      calc(-50% + var(--spark-y, -40px))
    ) scale(0.8);
  }
}

.peach-pro-thankyou-text {
  margin: 4px 0 0;
  font-size: 0.6875rem;
  font-style: italic;
  color: currentColor;
  opacity: 0;
  animation: peach-pro-thankyou-flash 2.5s ease both;
}

@keyframes peach-pro-thankyou-flash {
  0%   { opacity: 0; transform: translateY(4px); }
  15%  { opacity: 0.75; transform: translateY(0); }
  75%  { opacity: 0.75; }
  100% { opacity: 0; }
}

/* ── Pro advanced health remediation queue ──────────────────── */
.peach-health-pro-queue {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  margin: 0 0 12px;
  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);
  border-radius: 10px;
}

.peach-health-pro-queue-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.peach-health-pro-queue-title {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--peach-accent);
}

.peach-health-pro-queue-score {
  font-size: 0.6875rem;
  color: var(--peach-t2);
}

.peach-health-pro-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--peach-border);
}

.peach-health-pro-row-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.peach-health-pro-action {
  flex: 0 0 auto;
  padding: 4px 8px;
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.peach-health-pro-row-name {
  font-size: 0.8125rem;
  color: var(--peach-t0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.peach-health-pro-row-meta {
  font-size: 0.6875rem;
  color: var(--peach-t2);
}

.peach-health-pro-bar {
  height: 2px;
  background: var(--peach-border);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}

.peach-health-pro-bar-fill {
  height: 100%;
  background: var(--peach-accent);
  transition: width 200ms ease-out;
}

/* ── Pro activation celebration ── */
@keyframes peach-pro-bloom {
  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }
  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))
                 drop-shadow(0 0 48px var(--peach-glow)); }
  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }
}

@keyframes peach-pro-wordmark-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes peach-pro-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.peach-pro-celebration {
  background:
    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),
    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),
    var(--peach-bg);
  border: 1px solid var(--peach-t3);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.55),
    0 14px 48px rgba(0,0,0,0.7),
    0 0 0 1px rgba(240,232,216,0.04);
  overflow: hidden;
  width: 320px;
  height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 24px;
  text-align: center;
}

.peach-pro-celebration.is-leaving {
  animation: peach-pro-fade-out 400ms ease forwards;
}

.peach-pro-bloom-target {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  margin-bottom: 12px;
}

.peach-pro-bloom-icon {
  width: 48px;
  height: 48px;
}

.peach-pro-wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  font-weight: 400;
  color: var(--peach-accent);
  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;
}

.peach-pro-thankyou {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--peach-t2);
  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;
}


/* ── Pending Pro notice banner (shown after background sync gate fires) ── */
.peach-pro-notice-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));
  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);
  font-size: 0.6875rem;
  color: var(--peach-t2);
  font-family: "IBM Plex Mono", monospace;
  flex-shrink: 0;
}

.peach-pro-notice-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0.6875rem;
  color: var(--peach-accent);
  font-family: "IBM Plex Mono", monospace;
  margin-left: auto;
  white-space: nowrap;
}

.peach-pro-notice-close {
  background: none;
  border: none;
  padding: 0 0 0 4px;
  cursor: pointer;
  font-size: 0.625rem;
  color: var(--peach-t3);
  line-height: 1;
}

/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────
   Renders over whatever view is showing. 60-second expiry; the popup ticks
   the countdown each second and clears the banner when it hits zero. */
.peach-pair-request-banner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));
  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);
  font-family: "IBM Plex Mono", monospace;
  flex-shrink: 0;
}

.peach-pair-toast {
  padding: 8px 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  color: var(--peach-t1);
  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));
  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);
  flex-shrink: 0;
  text-align: center;
}

.peach-pair-toast strong {
  color: var(--peach-t0);
  font-weight: 500;
}

.peach-pair-request-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--peach-t1);
}

.peach-pair-request-mark {
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
}

.peach-pair-request-icon {
  width: 1em;
  height: 1em;
}

.peach-pair-request-title {
  font-weight: 600;
  color: var(--peach-t0);
}

.peach-pair-request-countdown {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--peach-t2);
  font-size: 0.6875rem;
}

.peach-pair-request-body {
  margin: 0;
  font-size: 0.75rem;
  color: var(--peach-t1);
  line-height: 1.4;
}

.peach-pair-request-body strong {
  color: var(--peach-t0);
  font-weight: 600;
}

.peach-pair-request-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ─── First-run onboarding ──────────────────────────────────────────────
   Three-card welcome shown once before vault creation. The PeachScript
   rune background drifts behind everything at very low opacity — it's
   atmosphere, not focus. The cards themselves use the same panel
   language as the rest of the popup so the transition into NewVault is
   continuous, not a jarring switch of visual register. */

.peach-onboarding {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 16px 16px 18px;
  box-sizing: border-box;
  overflow: hidden;
  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.peach-onboarding.is-completing {
  animation: peach-onboard-exit 200ms ease-out forwards;
}

.peach-rune-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  transition: opacity 500ms ease-out;
}

.peach-onboarding.is-completing .peach-rune-background {
  opacity: 0;
}

.peach-onboarding-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}

.peach-onboarding-card {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px;
  border-radius: 16px;
  border: 1px solid var(--peach-t3);
  background:
    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow:
    inset 0 1px 0 rgba(240, 232, 216, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  user-select: none;
  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.peach-onboarding-card.is-exiting {
  animation: peach-card-out 120ms ease-in forwards;
  pointer-events: none;
}

.peach-onboarding-card-headline {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.05;
  color: var(--peach-t0);
  white-space: pre-line;
}

.peach-onboarding-divider {
  margin: 4px 0 6px;
  border: 0;
  border-top: 1px solid var(--peach-t3);
  width: 100%;
}

.peach-onboarding-body {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--peach-t1);
}

.peach-onboarding-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--peach-t3);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--peach-t1);
}

.peach-onboarding-warning-icon {
  color: var(--peach-accent);
  font-size: 0.8125rem;
  line-height: 1.5;
  flex: 0 0 auto;
}

.peach-onboarding-nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 0 4px;
}

.peach-onboarding-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.peach-onboarding-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--peach-t2);
  transition: width 200ms ease, height 200ms ease, background 200ms ease;
}

.peach-onboarding-dot.is-active {
  width: 8px;
  height: 8px;
  background: var(--peach-accent);
}

.peach-onboarding-next {
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--peach-t1);
  transition: color 150ms ease;
}

.peach-onboarding-next:hover {
  color: var(--peach-t0);
}

.peach-onboarding-next:disabled {
  opacity: 0.5;
  cursor: default;
}

.peach-onboarding-back {
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--peach-t2);
  transition: color 150ms ease;
}

.peach-onboarding-back:hover {
  color: var(--peach-t0);
}

.peach-onboarding-back:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Reserve back-button width on the first card so the dots stay centred */
.peach-onboarding-back-spacer {
  width: 44px;
}

.peach-onboarding-choice-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 14px;
}

.peach-onboarding-choice {
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);
  border-radius: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);
  color: var(--peach-t0);
  font-size: 0.76rem;
  font-weight: 700;
  text-align: left;
}

.peach-onboarding-choice--adopt {
  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);
  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);
}

.peach-adopt-vault {
  position: relative;
  min-height: 100%;
  padding: 22px;
  display: grid;
  place-items: center;
}

.peach-adopt-card {
  position: relative;
  z-index: 1;
  width: min(100%, 330px);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);
  background: color-mix(in srgb, var(--peach-surface) 90%, transparent);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
}

.peach-adopt-card h1 {
  margin: 0 0 10px;
  font-size: 1.28rem;
  line-height: 1.15;
}

.peach-adopt-card p {
  margin: 0 0 14px;
  color: var(--peach-t1);
  line-height: 1.35;
}

.peach-adopt-input {
  margin-bottom: 12px;
}

.peach-adopt-card textarea.peach-adopt-input {
  width: 100%;
  resize: vertical;
  overflow-wrap: anywhere;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.64rem;
}

.peach-adopt-qr-video {
  display: block;
  width: 100%;
  max-height: 220px;
  margin: 0 0 12px;
  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);
  border-radius: 8px;
  background: #000;
  object-fit: cover;
}

.peach-adoption-source-invitation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px 18px 16px;
  text-align: center;
}

.peach-pair-qr {
  display: block;
  max-width: min(224px, 100%);
  height: auto;
  padding: 8px;
  border-radius: 10px;
  background: #fff;
}

/* The same invitation the QR carries, as text — the fallback when a camera
   won't cooperate. Monospace and full width so it can be read out loud. */
.peach-pair-invitation-text {
  width: 100%;
  resize: none;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--peach-border);
  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);
  color: var(--peach-t1);
  font-family: var(--peach-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10px;
  line-height: 1.5;
  word-break: break-all;
}

.peach-adopt-card > .peach-btn + .peach-btn {
  margin-top: 8px;
}

.peach-adopt-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.peach-adopt-actions > button {
  flex: 1;
}

.peach-adopt-birds {
  width: 120px;
  height: 54px;
  margin-bottom: 14px;
  position: relative;
}

.peach-adopt-birds::before {
  content: "";
  position: absolute;
  left: 29px;
  right: 29px;
  top: 25px;
  height: 1px;
  background: color-mix(in srgb, var(--peach-accent) 50%, transparent);
}

.peach-adopt-birds span {
  position: absolute;
  top: 11px;
  width: 34px;
  height: 28px;
  border-radius: 50% 50% 46% 46%;
  background: color-mix(in srgb, var(--peach-accent) 45%, var(--peach-t0));
  box-shadow: 0 0 18px color-mix(in srgb, var(--peach-accent) 24%, transparent);
  animation: peach-adopt-bob 1.8s ease-in-out infinite;
}

.peach-adopt-birds span:first-child {
  left: 12px;
}

.peach-adopt-birds span:last-child {
  right: 12px;
  animation-delay: 0.25s;
}

.peach-adopt-sas {
  margin: 18px 0;
  padding: 14px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);
  color: var(--peach-t0);
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

@keyframes peach-adopt-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.peach-onboarding-mobile-card-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

@keyframes peach-onboard-enter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes peach-onboard-exit {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes peach-card-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes peach-card-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-12px); }
}

/* ─── New vault screen — matched to onboarding card language ─────────── */

/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage
   rule (same element) without loosening the unlock/restore screens. The
   create-vault screen is the only vault-stage view tall enough to overflow
   the 520px popup, so its spacing is tuned to fit header → card → restore →
   recovery warning with nothing clipped. */
.peach-screen.peach-newvault {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 12px;
  overflow: hidden;
}

/* Suppress the warm-blob ambient art inherited from .lock-screen — the
   new vault card now carries the visual weight. */
.peach-newvault::before {
  content: none;
}

.peach-newvault-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.peach-newvault-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: var(--peach-t2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 120ms ease, background 120ms ease;
}

.peach-newvault-back:hover {
  color: var(--peach-t0);
  background: rgba(240, 232, 216, 0.04);
}

.peach-newvault-mark {
  position: absolute;
  right: -12px;
  top: 6px;
  width: 110px;
  height: 110px;
  pointer-events: none;
  opacity: 0.10;
  filter: saturate(0.9);
  z-index: 0;
}
.peach-newvault-mark-art {
  width: 100%;
  height: 100%;
}
.peach-newvault-mark-art path:nth-child(1) {
  fill: rgba(123, 144, 96, 0.88);
}
.peach-newvault-mark-art path:nth-child(2) {
  stroke: rgba(94, 122, 66, 0.95);
}

.peach-newvault-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px 14px;
  border-radius: 16px;
  border: 1px solid var(--peach-t3);
  background:
    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow:
    inset 0 1px 0 rgba(240, 232, 216, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.12);
  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.peach-newvault-headline {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.05;
  color: var(--peach-t0);
  white-space: pre-line;
}

.peach-newvault-divider {
  margin: 2px 0 4px;
  border: 0;
  border-top: 1px solid var(--peach-t3);
  width: 100%;
}

.peach-newvault-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.peach-newvault-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Monospace input scaled to the card. Replaces the 22px unlock-input
   so the placeholder no longer overflows and the field reads as part
   of the same surface as the body copy. */
.peach-newvault-input {
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  padding: 8px 0;
}
.peach-newvault-input::placeholder {
  letter-spacing: 0.18em;
  color: var(--peach-t2);
}

.peach-newvault-hint {
  margin: 2px 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  color: var(--peach-t2);
  letter-spacing: 0.04em;
}

.peach-newvault-submit {
  margin-top: 4px;
}

.peach-newvault-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 2px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--peach-t3);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--peach-t1);
}

.peach-newvault-warning-icon {
  color: var(--peach-accent);
  font-size: 0.8125rem;
  line-height: 1.4;
  flex: 0 0 auto;
}

/* Restore options sit inside the card, directly under "create vault", so
   they are always reachable without scrolling. The top divider mirrors the
   warning's so the choice reads as a deliberate fork, not a footnote. */
.peach-newvault-restore {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--peach-t3);
}

/* Settings body — warm accent gradient gives the glass something to blur against */
.peach-settings-body {
  background:
    radial-gradient(
      ellipse at 30% 20%,
      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,
      transparent 60%
    );
}

/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */
/* ── Danger cards (Replace + Destroy) ────────────────────────────────────
 * Two severity levels: "warn" for actions that are dangerous-but-recoverable
 * (replacing the vault from a backup file) and "hazard" for actions that
 * are absolutely irreversible (Panic). Both use the same card scaffold so
 * they read as a pair, but the colour family signals the severity at a
 * glance — yellow for caution, red for don't.
 */
.peach-danger-card {
  --danger-tint: 235, 158, 52; /* amber */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  margin-top: 10px;
  border-radius: 12px;
  border: 1px solid rgba(var(--danger-tint), 0.32);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),
    rgba(var(--danger-tint), 0.04);
  box-shadow:
    inset 0 1px 0 rgba(var(--danger-tint), 0.08),
    0 0 24px rgba(var(--danger-tint), 0.04);
  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;
}

.peach-danger-card:hover {
  border-color: rgba(var(--danger-tint), 0.55);
  box-shadow:
    inset 0 1px 0 rgba(var(--danger-tint), 0.12),
    0 0 36px rgba(var(--danger-tint), 0.10);
}

.peach-danger-card--hazard {
  --danger-tint: 220, 38, 38; /* red */
}

.peach-danger-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.peach-danger-card-glyph {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(var(--danger-tint), 0.12);
  color: rgba(var(--danger-tint), 0.95);
  font-size: 1rem;
  line-height: 1;
}

.peach-danger-card-title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(var(--danger-tint), 0.92);
  letter-spacing: 0.01em;
}

.peach-danger-card-copy {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--peach-t2);
}

.peach-danger-card-button {
  width: 100%;
  padding: 9px;
  margin-top: 4px;
  background: transparent;
  border: 1px solid rgba(var(--danger-tint), 0.45);
  border-radius: 8px;
  color: rgba(var(--danger-tint), 0.9);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.peach-danger-card-button:hover {
  background: rgba(var(--danger-tint), 0.10);
  border-color: rgba(var(--danger-tint), 0.75);
  color: rgb(var(--danger-tint));
}

.peach-adoption-consent-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 10, 5, 0.72);
}

.peach-adoption-consent {
  width: min(100%, 340px);
  border: 1px solid color-mix(in srgb, #f59e0b 54%, var(--peach-border));
  border-radius: 8px;
  padding: 18px;
  background: color-mix(in srgb, #2c1b08 84%, var(--peach-surface));
  color: var(--peach-t0);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);
}

.peach-adoption-consent-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f59e0b;
  color: #1f1304;
  font-weight: 800;
}

.peach-adoption-consent h2 {
  margin: 12px 0 8px;
  font-size: 1.22rem;
  line-height: 1.15;
}

.peach-adoption-consent-device,
.peach-adoption-consent-warning {
  margin: 0 0 12px;
  color: var(--peach-t1);
  line-height: 1.35;
}

.peach-adoption-consent-device strong {
  color: var(--peach-t0);
}

.peach-adoption-consent-warning {
  color: #ffd79a;
}

.peach-adoption-consent-sas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  padding: 10px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.12);
}

/* Tracking, not interleaved spaces: eight digits with per-digit spaces no
   longer fit beside the label at 320px. */
.peach-adoption-consent-sas strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.18em;
  white-space: nowrap;
}

.peach-adoption-consent-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

.peach-adoption-consent-actions > button {
  flex: 1;
}

/* ── Panic flow (three-step destruction) ───────────────────────────────── */
.peach-panic {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 28px 20px 20px;
  gap: 18px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.peach-panic::-webkit-scrollbar { display: none; }

.peach-panic-step2 {
  background: rgba(220, 38, 38, 0.04);
}

.peach-panic-step3 {
  position: relative;
  background: #0f0505;
  color: #ffffff;
  overflow: hidden;
}

.peach-panic-rune-bg {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  pointer-events: none;
  overflow: hidden;
}

.peach-panic-rune-bg canvas {
  width: 100% !important;
  height: 100% !important;
}

.peach-panic-icon {
  font-size: 32px;
  color: rgb(220, 38, 38);
  line-height: 1;
}

.peach-panic-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--peach-t1);
}

.peach-panic-title--severe {
  font-size: 20px;
  font-weight: 700;
  color: rgb(220, 38, 38);
}

.peach-panic-body {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--peach-t2);
}

.peach-panic-body--severe {
  color: rgba(220, 38, 38, 0.85);
}

.peach-panic-body--final {
  font-size: 1rem;
  font-weight: 700;
  color: rgb(255, 80, 80);
  line-height: 1.4;
}

.peach-panic-body--final-intro {
  font-size: 1rem;
  color: #ffffff;
  font-weight: 400;
}

.peach-panic-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

.peach-panic-confirm-input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(220, 38, 38, 0.4);
  border-radius: 8px;
  color: var(--peach-t1);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.peach-panic-confirm-input:focus {
  outline: none;
  border-color: rgb(220, 38, 38);
}

.peach-panic-confirm-input--match {
  border-color: rgb(220, 38, 38);
  color: rgb(220, 38, 38);
}

.peach-panic-confirm-label {
  font-size: 0.6875rem;
  color: var(--peach-t2);
  margin: 0 0 -8px;
  letter-spacing: 0.06em;
}

.peach-panic-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.peach-panic-button {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.peach-panic-button--primary {
  background: var(--peach-accent);
  border: 1px solid var(--peach-accent);
  color: #ffffff;
  font-weight: 600;
}

.peach-panic-button--primary:hover {
  background: color-mix(in srgb, var(--peach-accent) 88%, white);
}

.peach-panic-button--danger {
  background: rgb(220, 38, 38);
  border: 1px solid rgb(220, 38, 38);
  color: #ffffff;
  font-weight: 600;
}

.peach-panic-button--danger:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.peach-panic-button--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--peach-t2);
}

.peach-panic-button--ghost:hover {
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--peach-t1);
}

.peach-panic-link {
  background: transparent;
  border: none;
  padding: 4px 0;
  color: rgba(220, 38, 38, 0.65);
  font-size: 0.75rem;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.peach-panic-link:hover {
  color: rgb(220, 38, 38);
}

.peach-panic-bar {
  background: rgb(220, 38, 38);
  padding: 16px 20px;
  margin: -28px -20px 0;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #ffffff;
}

.peach-panic-final-button {
  width: 100%;
  padding: 14px;
  background: rgb(220, 38, 38);
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  animation: peach-panic-pulse 2s ease-in-out infinite;
}

.peach-settings-license {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--peach-t3);
}

.peach-settings-label {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--peach-t3);
  display: block;
  margin-bottom: 6px;
}

.peach-settings-license-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.peach-settings-license-key {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  color: var(--peach-t0);
  letter-spacing: 0.04em;
  word-break: break-all;
  flex: 1;
  min-width: 0;
}

.peach-settings-license-key--masked {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  color: var(--peach-t1);
  letter-spacing: 0.18em;
  user-select: none;
}

.peach-settings-license-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.peach-settings-license-copy {
  font-size: 0.6875rem;
  color: var(--peach-accent);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: opacity 150ms ease;
}

.peach-settings-license-copy:hover {
  opacity: 0.75;
}

.peach-settings-license-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  color: var(--peach-t2);
  transition: color 150ms ease;
}

.peach-settings-license-toggle:hover {
  color: var(--peach-t1);
}

@keyframes peach-panic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

[data-motion="reduce"] .peach-panic-final-button {
  animation: none;
}

/* Vault History — Settings → Vault sub-view */

.peach-history-list {
  border: 1px solid var(--peach-border);
  border-radius: 8px;
  overflow: hidden;
  margin: 8px 0 4px;
}

.peach-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  gap: 10px;
  border-bottom: 1px solid var(--peach-border);
}

.peach-history-row:last-child {
  border-bottom: none;
}

.peach-history-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.peach-history-time {
  font-size: 0.75rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--peach-t0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.peach-history-sub {
  font-size: 0.625rem;
  color: var(--peach-t2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.peach-history-btn {
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 56px;
  text-align: center;
}

.peach-history-btn.is-busy {
  opacity: 0.65;
}

.peach-history-footer {
  font-size: 0.625rem;
  color: var(--peach-t3);
  letter-spacing: 0.05em;
  text-align: right;
  margin: 0;
  padding: 2px 0 0;
}

/* ── Context menu + swipe-copy flash ─────────────────────── */
.peach-context-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: peach-ctx-fade 140ms ease both;
}
.peach-context-menu {
  width: min(360px, calc(100vw - 24px));
  margin-bottom: max(env(safe-area-inset-bottom), 12px);
  background: var(--peach-bg);
  border: 1px solid var(--peach-t3);
  border-radius: 14px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes peach-ctx-rise {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.peach-context-menu-item {
  background: transparent;
  color: var(--peach-t0);
  border: 0;
  border-radius: 10px;
  padding: 12px 14px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.peach-context-menu-item:hover,
.peach-context-menu-item:focus-visible {
  background: var(--peach-t3);
}
.peach-context-menu-item--danger {
  color: var(--peach-health-bad, #d96868);
}
.peach-context-menu-item--cancel {
  color: var(--peach-t2);
  margin-top: 4px;
  border-top: 1px solid var(--peach-t3);
  border-radius: 0 0 10px 10px;
}

/* Swipe-to-copy flash */
.peach-entry-row.is-copy-flash {
  animation: peach-copy-flash 600ms ease both;
}
@keyframes peach-copy-flash {
  0%   { background: transparent; }
  20%  { background: rgba(217, 153, 51, 0.32); }
  100% { background: transparent; }
}

html { font-size: 16px; }

/* ── Recovery word entry ─────────────────────────────────────────── */
.peach-lock-recover-link {
  display: block;
  width: 100%;
  margin-top: 12px;
  background: none;
  border: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--peach-t2);
  cursor: pointer;
  text-align: center;
  padding: 4px;
  transition: color 120ms ease;
}
.peach-lock-recover-link:hover {
  color: var(--peach-t0);
}

.lock-screen--recovery {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12px 20px 24px;
  overflow: hidden;
}

.peach-recovery-nav {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  margin-bottom: 4px;
}

/* Mask runes to the top decorative band only — keep inputs and the
   bottom CTA button clear. The bottom of the popup is reserved for
   submit buttons; rendering runes there overlaps the button glyph. */
.peach-rune-background--recovery {
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0px, black 85px,
    transparent 110px,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 0px, black 85px,
    transparent 110px,
    transparent 100%
  );
}

.peach-recovery-header {
  text-align: center;
  margin-bottom: 16px;
  margin-top: 4px;
}
.peach-recovery-header .peach-onboarding-headline {
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  margin: 0 0 4px;
}
.peach-recovery-header .peach-hint {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  color: var(--peach-t2);
  letter-spacing: 0.04em;
  margin: 0;
}

/* 12-word grid: 2 columns × 6 rows */
.peach-recovery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 20px;
  width: 100%;
  margin-bottom: 0;
}

.peach-recovery-word-slot {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.peach-recovery-word-index {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.35);
  min-width: 14px;
  flex-shrink: 0;
  text-align: right;
  letter-spacing: 0.04em;
}

.peach-recovery-word-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--peach-t0);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  padding: 5px 2px 4px;
  outline: none;
  text-transform: lowercase;
  transition: border-color 120ms ease;
}
.peach-recovery-word-input::placeholder {
  color: rgba(255, 255, 255, 0.18);
}
.peach-recovery-word-input:focus {
  border-bottom-color: var(--peach-accent);
}

.peach-recovery-submit {
  width: 100%;
  margin-top: auto;
}

.peach-recovery-new-password-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 8px;
}
.peach-recovery-new-password-form .peach-newvault-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Recovery words display (post-create) ────────────────────────── */
.lock-screen--recovery-display {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 20px 20px;
  min-height: 0;
  overflow-y: auto;
}

.peach-recovery-words-display {
  width: 100%;
  margin-bottom: 16px;
  border: 1px solid var(--peach-t3);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(245, 240, 234, 0.04);
}

.peach-recovery-words-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  color: var(--peach-t2);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.peach-recovery-word-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 16px;
}

.peach-recovery-word-item {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.peach-recovery-word-num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5rem;
  color: var(--peach-t2);
  width: 14px;
  flex: 0 0 14px;
  text-align: right;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.peach-recovery-download-btn {
  display: block;
  margin: 10px auto 0;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--peach-border);
  border-radius: 6px;
  color: var(--peach-t2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.peach-recovery-download-btn:hover {
  border-color: var(--peach-accent);
  color: var(--peach-t0);
}

.peach-recovery-word-text {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--peach-t0);
  text-transform: lowercase;
}

.peach-hint--warning {
  color: var(--peach-accent);
  font-style: italic;
}
.peach-hint--success {
  color: var(--peach-t2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
}

/* Confirmation step */
.peach-recovery-confirm {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.peach-recovery-confirm-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
  color: var(--peach-t2);
  text-align: center;
  margin: 0 0 12px;
}
.peach-recovery-confirm-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 10px;
}
.peach-recovery-confirm-field {
  display: flex;
  align-items: center;
  gap: 8px;
}
.peach-recovery-confirm-num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5rem;
  color: var(--peach-t2);
  min-width: 44px;
  letter-spacing: 0.04em;
}
.peach-recovery-confirm-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--peach-t3);
  color: var(--peach-t0);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  padding: 4px 2px 3px;
  outline: none;
  text-transform: lowercase;
  transition: border-color 120ms ease;
}
.peach-recovery-confirm-input:focus {
  border-bottom-color: var(--peach-accent);
}
.peach-recovery-confirm-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.peach-recovery-confirm-btn {
  width: 100%;
  margin-top: auto;
}

/* ============================================================
   Sync info sheet
   ============================================================ */

.peach-sync-info-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-end;
  animation: peach-fade-in 200ms ease forwards;
}

@keyframes peach-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.peach-sync-info-sheet {
  width: 100%;
  background: var(--peach-bg-card, var(--peach-bg));
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 12px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;
}

@keyframes peach-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.peach-sync-info-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--peach-border);
  margin: 0 auto 4px;
  flex-shrink: 0;
}

.peach-sync-info-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 26px;
  font-weight: 600;
  color: var(--peach-t0);
  margin: 0;
  line-height: 1.2;
}

.peach-sync-info-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.peach-sync-info-point {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--peach-t2);
  line-height: 1.6;
  margin: 0;
}

.peach-sync-info-icon {
  color: var(--peach-accent);
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.peach-sync-info-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.peach-sync-info-pro-link {
  background: none;
  border: none;
  font-size: 13px;
  color: var(--peach-t3);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  text-align: center;
  transition: color 150ms ease;
}

.peach-sync-info-pro-link:hover {
  color: var(--peach-accent);
}

.peach-btn--full {
  width: 100%;
}

/* ── Sync screen ── */

.peach-sync-coming-soon {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--peach-s1);
  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);
  border-radius: 10px;
}
.peach-sync-coming-soon__icon {
  flex-shrink: 0;
  color: var(--peach-accent);
  margin-top: 1px;
  line-height: 0;
}
.peach-sync-coming-soon__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--peach-accent);
  margin: 0 0 5px;
  line-height: 1.3;
}
.peach-sync-coming-soon__body {
  font-size: 12px;
  color: var(--peach-t1);
  line-height: 1.55;
  margin: 0;
}

.peach-sync-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.peach-sync-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Intro (State A) */
.peach-sync-headline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 28px;
  font-weight: 600;
  color: var(--peach-t0);
  margin: 0 0 10px;
  line-height: 1.2;
}

.peach-sync-intro-body {
  font-size: 14px;
  color: var(--peach-t1);
  line-height: 1.6;
  margin: 0;
}

.peach-sync-pro-note {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--peach-t3);
  border-radius: 10px;
  padding: 12px 14px;
}

.peach-sync-pro-note-text {
  font-size: 12px;
  color: var(--peach-t2);
  line-height: 1.5;
  margin: 0;
}

.peach-sync-pro-link {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--peach-accent);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  text-align: left;
}

/* Status (State C) */
.peach-sync-status {
  padding: 12px 0;
  border-bottom: 1px solid var(--peach-border);
}

.peach-sync-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.peach-sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.peach-sync-dot--green { background: var(--peach-health-ok); }
.peach-sync-dot--amber { background: var(--peach-accent); }

.peach-sync-status-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--peach-t2);
}

/* Paired devices */
.peach-sync-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.peach-sync-section-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--peach-t3);
  margin: 0 0 10px;
}

.peach-sync-device-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--peach-border);
  gap: 12px;
}

.peach-sync-device-name {
  font-size: 14px;
  color: var(--peach-t1);
}

.peach-sync-device-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--peach-t3);
  white-space: nowrap;
}

.peach-sync-hub-note {
  padding: 14px 16px;
  border: 1px solid var(--peach-border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);
}

.peach-sync-hub-note-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--peach-t0);
  margin: 0;
}

.peach-sync-hub-note-body {
  font-size: 12px;
  color: var(--peach-t2);
  line-height: 1.6;
  margin: 0;
}

/* Action buttons */
.peach-sync-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Upgrade prompt (State B) */
.peach-sync-upgrade {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--peach-border);
  border-radius: 10px;
}

.peach-sync-upgrade-text {
  font-size: 13px;
  color: var(--peach-t2);
  line-height: 1.6;
  margin: 0;
}

/* Network note */
.peach-sync-network-note {
  font-size: 12px;
  color: var(--peach-t3);
  line-height: 1.6;
  margin: 0;
}

/* Advanced */
.peach-sync-advanced {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--peach-border);
}

.peach-sync-advanced-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--peach-t3);
  cursor: pointer;
  padding: 0;
  text-transform: uppercase;
}

.peach-sync-advanced-chevron {
  display: inline-block;
  transition: transform 200ms ease;
  font-size: 10px;
}

.peach-sync-advanced-chevron.is-open {
  transform: rotate(90deg);
}

.peach-sync-advanced-content {
  margin-top: 14px;
}

.peach-sync-advanced-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.peach-sync-advanced-title {
  font-size: 14px;
  color: var(--peach-t1);
  margin: 0 0 2px;
}

.peach-sync-advanced-subtitle {
  font-size: 12px;
  color: var(--peach-t3);
  margin: 0;
  line-height: 1.5;
}

/* ── Notes Mode ── */

/* Overlay that crossfades over the vault */
.peach-notes-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  animation: peach-mode-in 220ms ease-in forwards;
}

.peach-notes-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

@keyframes peach-mode-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Top-level notes surface */
.peach-notes-mode {
  position: absolute;
  inset: 0;
  background: var(--peach-bg);
  display: flex;
  flex-direction: column;
}

/* Rune canvas positioned behind content */
.peach-note-rune-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* TOC wrapper */
.peach-notes-toc-wrapper {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 200ms ease;
}

.peach-notes-toc-wrapper.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Editor wrapper */
.peach-notes-editor-wrapper {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.peach-notes-editor-wrapper.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* TOC inner */
.peach-notes-toc {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Shared header */
.peach-notes-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 12px;
  flex-shrink: 0;
  min-height: 52px;
  position: relative;
  z-index: 2;
}

.peach-notes-back {
  font-size: 22px;
  color: var(--peach-t2);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
  transition: color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.peach-notes-back:active { color: var(--peach-t0); }

.peach-notes-header-title {
  flex: 1;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--peach-t0);
  text-align: center;
}

.peach-notes-header-title.is-breadcrumb {
  font-family: 'IBM Plex Mono', monospace;
  font-style: normal;
  font-size: 11px;
  color: var(--peach-t3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.peach-notes-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.peach-notes-header-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--peach-t2);
  cursor: pointer;
  border-radius: 8px;
  font-size: 16px;
  transition: color 150ms ease, background 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.peach-notes-header-btn:active {
  background: rgba(255,255,255,0.06);
  color: var(--peach-t0);
}

/* Inline search bar */
.peach-notes-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--peach-t0);
  padding: 4px 0;
  letter-spacing: 0.02em;
}

.peach-notes-search-input::placeholder {
  color: var(--peach-t3);
}

/* TOC list */
.peach-notes-list-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  position: relative;
  z-index: 1;
}

.peach-notes-list-container::-webkit-scrollbar { display: none; }

/* Note row */
.peach-note-row {
  position: relative;
  display: grid;
  grid-template-columns: 44px 8px 1fr 8px auto;
  align-items: center;
  min-height: 72px;
  padding: 16px 20px;
  border-bottom: 0.5px solid var(--peach-border);
  cursor: pointer;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.peach-note-row:first-child {
  border-top: 0.5px solid var(--peach-border);
}

.peach-note-row:active {
  background: rgba(255,255,255,0.02);
}

.peach-note-numeral {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--peach-accent);
  text-align: right;
  line-height: 1;
  flex-shrink: 0;
}

.peach-note-title-gap { /* grid spacer */ }

.peach-note-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--peach-t0);
  line-height: 1.3;
  min-width: 0;
  overflow-wrap: break-word;
}

.peach-note-title-match {
  color: var(--peach-accent);
}

.peach-note-date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--peach-t2);
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
  grid-column: 5;
}

/* Swipe underlays */
.peach-note-row-underlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 24px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  pointer-events: none;
  z-index: 0;
}

.peach-note-row-underlay--delete {
  background: #8B2020;
  color: rgba(255,255,255,0.9);
  justify-content: flex-end;
}

.peach-note-row-underlay--archive {
  background: var(--peach-accent);
  color: #0C0A06;
  justify-content: flex-start;
}

/* Delete confirm strip */
.peach-note-delete-confirm {
  position: absolute;
  inset: 0;
  background: var(--peach-bg);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--peach-t1);
  letter-spacing: 0.04em;
  animation: peach-delete-confirm-in 150ms ease both;
  z-index: 10;
}

@keyframes peach-delete-confirm-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.peach-note-delete-confirm-btn {
  background: #8B2020;
  color: rgba(255,255,255,0.9);
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  cursor: pointer;
  letter-spacing: 0.06em;
}

.peach-note-delete-cancel-btn {
  background: none;
  border: none;
  color: var(--peach-t3);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  cursor: pointer;
  letter-spacing: 0.06em;
  padding: 4px 6px;
}

/* + New note button */
.peach-notes-new-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--peach-t3);
  text-align: center;
  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.peach-notes-new-btn:active { color: var(--peach-accent); }

/* Empty state */
.peach-notes-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 48px 32px;
  gap: 16px;
}

.peach-notes-empty-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--peach-t3);
  text-align: center;
  margin: 0;
  line-height: 1.4;
  white-space: pre-line;
}

/* ── Editor surface ── */

.peach-note-editor-surface {
  position: absolute;
  inset: 0;
  background: var(--peach-bg);
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
}

.peach-note-editor-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 24px 120px;
  position: relative;
  z-index: 1;
}

.peach-note-editor-scroll::-webkit-scrollbar { display: none; }

/* Desktop toolbar (always visible above body) */
.peach-note-toolbar-desktop-inline {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 0 12px;
  margin-bottom: 4px;
  border-bottom: 0.5px solid var(--peach-border);
}

/* Title field */
.peach-note-title-field {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 32px;
  font-weight: 600;
  color: var(--peach-t0);
  line-height: 1.2;
  padding: 8px 0 0;
  outline: none;
  min-height: 44px;
  word-break: break-word;
  position: relative;
  z-index: 1;
}

.peach-note-title-field:empty::before {
  content: attr(data-placeholder);
  color: var(--peach-t3);
  pointer-events: none;
}

/* Hairline separator */
.peach-note-hairline {
  height: 0.5px;
  background: var(--peach-border);
  margin: 12px 0 20px;
  position: relative;
  z-index: 1;
}

/* Body field */
.peach-note-body-field {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: var(--peach-t0);
  line-height: 1.85;
  padding: 0;
  outline: none;
  min-height: 240px;
  word-break: break-word;
  position: relative;
  z-index: 1;
}

.peach-note-body-field:empty::before {
  content: attr(data-placeholder);
  color: var(--peach-t3);
  font-style: italic;
  pointer-events: none;
}

.peach-note-body-field h2 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 600;
  color: var(--peach-t0);
  margin: 20px 0 8px;
}

.peach-note-body-field blockquote {
  border-left: 2px solid var(--peach-accent);
  margin: 12px 0;
  padding-left: 16px;
  color: var(--peach-t1);
  font-style: italic;
}

.peach-note-body-field ul,
.peach-note-body-field ol {
  padding-left: 20px;
  margin: 8px 0;
}

.peach-note-body-field li {
  margin: 4px 0;
}

.peach-note-body-field hr {
  border: none;
  border-top: 0.5px solid var(--peach-border);
  margin: 16px 0;
}

/* Saved indicator */
.peach-note-saved-indicator {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--peach-t3);
  letter-spacing: 0.04em;
  text-align: right;
  padding: 6px 24px;
  flex-shrink: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
  position: relative;
  z-index: 1;
}

/* Mobile keyboard toolbar */
.peach-note-toolbar-mobile {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--peach-bg);
  border-top: 0.5px solid var(--peach-border);
  gap: 4px;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

.peach-note-toolbar-btn {
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--peach-t1);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  transition: background 100ms ease, color 100ms ease;
  -webkit-tap-highlight-color: transparent;
}

.peach-note-toolbar-btn--italic { font-style: italic; }
.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }
.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }

.peach-note-toolbar-divider {
  width: 0.5px;
  height: 20px;
  background: var(--peach-border);
  margin: 0 4px;
  flex-shrink: 0;
}

.peach-note-toolbar-spacer { flex: 1; }

/* Desktop: larger headline in TOC */
@media (min-width: 400px) {
  .peach-notes-header-title:not(.is-breadcrumb) {
    font-size: 32px;
  }

  .peach-note-row {
    min-height: 64px;
    padding: 14px 16px;
  }
}

/* Flying title — shared element during expansion/collapse */

/* ─── Light theme overrides ───────────────────────────────────────────────
   Tokens that cannot be expressed as variable substitutions — hardcoded
   context-specific values that need separate light-mode rules. */

/* Settings section headers: use text-label (#79766F) per restoration brief —
   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY
   presence without fighting the light parchment background. */
.light .peach-settings-sub-label,
[data-theme="light"] .peach-settings-sub-label,
.light .peach-settings-nav-label,
[data-theme="light"] .peach-settings-nav-label {
  color: #79766F;
}

/* Secondary action buttons (ghost / subtle): filled with input-well surface
   so they read as recessed against the parchment card background. */
.light .peach-btn--ghost:not(.peach-icon-btn),
[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {
  background: #EEE7DD;
  border-color: #DDD5CB;
  color: #1A1208;
}
.light .peach-icon-btn,
[data-theme="light"] .peach-icon-btn {
  background: transparent;
  border-color: transparent;
}
.light .peach-btn--subtle,
[data-theme="light"] .peach-btn--subtle {
  background: #EEE7DD;
  border-color: #DDD5CB;
}

/* Wide secondary action button on the lock screen — override the
   hardcoded dark-mode rgba values with warm parchment equivalents. */
.light .peach-lock-secondary,
[data-theme="light"] .peach-lock-secondary {
  background: #EEE7DD;
  border-color: #DDD5CB;
  color: #1A1208;
}
.light .peach-lock-secondary:hover,
[data-theme="light"] .peach-lock-secondary:hover {
  background: #F0E9DF;
}

/* Entry row hover: bg-row lifts the row above the card surface. */
.light .peach-entry-row:hover,
[data-theme="light"] .peach-entry-row:hover {
  background: #F2EBE1;
}
.light .peach-entry-row.is-active,
[data-theme="light"] .peach-entry-row.is-active {
  background: #F2EBE1;
}
.light .peach-entry-row.is-selected,
[data-theme="light"] .peach-entry-row.is-selected {
  background: #F5EDE2;
}

/* ──────────────────────────────────────────────────────────────────────────
   Pair-device flow — bird-stage animation (Phase 1)
   See src/popup/components/PairingBirds.tsx and the brief §6.2.
   Three-act animation gated on the [data-phase] attribute of
   .peach-pair-pair; child layers (birds, sound arcs, flight wave, dot)
   each react via either pose class or visibility flag.
   Tokens: accent surfaces use var(--peach-accent); bird illustration
   colours are baked into the SVG per the brand-peach exception in §3.1.
   ────────────────────────────────────────────────────────────────────── */

.peach-pair-pair {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding: 14px 12px 12px;
  width: 100%;
  box-sizing: border-box;
  gap: 0;
  background:
    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),
    var(--peach-bg);
  color: var(--peach-t0);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  isolation: isolate;
  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes peach-pair-overlay-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.peach-pair-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }
.peach-pair-pair::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);
  z-index: 0;
}
.peach-pair-pair > * { position: relative; z-index: 1; }

/* Header --------------------------------------------------------------- */
.peach-pair-head {
  display: flex; align-items: center; gap: 10px;
}
.peach-pair-back {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--peach-t1);
  cursor: pointer;
  transition: color 0.15s ease, box-shadow 0.15s ease;
}
.peach-pair-back:hover {
  color: var(--peach-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);
}
.peach-pair-title {
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--peach-t0);
  line-height: 1;
}
.peach-pair-head-spacer { flex: 1; }

/* Chip row ------------------------------------------------------------- */
.peach-pair-chip-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 12px;
}
.peach-pair-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 8px;
  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);
  border-radius: 999px;
  font-family: var(--peach-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));
}
.peach-pair-chip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--peach-accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);
}
.peach-pair-chip[data-phase="paired"] {
  background: color-mix(in srgb, #4f9eda 12%, transparent);
  border-color: color-mix(in srgb, #4f9eda 28%, transparent);
  color: #76b6e8;
}
.peach-pair-chip[data-phase="paired"] .peach-pair-chip-dot {
  background: #76b6e8;
  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);
}
.peach-pair-chip[data-phase="timeout"],
.peach-pair-chip[data-phase="mic_denied"],
.peach-pair-chip[data-phase="version_mismatch"],
.peach-pair-chip[data-phase="handshake_failed"] {
  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);
  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);
  color: var(--peach-warn, #d29257);
}
.peach-pair-chip[data-phase="timeout"] .peach-pair-chip-dot,
.peach-pair-chip[data-phase="mic_denied"] .peach-pair-chip-dot,
.peach-pair-chip[data-phase="version_mismatch"] .peach-pair-chip-dot,
.peach-pair-chip[data-phase="handshake_failed"] .peach-pair-chip-dot {
  background: var(--peach-warn, #d29257);
  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);
}

/* Bird stage ----------------------------------------------------------- */
.peach-pair-stage {
  position: relative;
  /* Never let the flex column steal the stage's height to fit whatever is
     below it — that is what clipped the birds to their legs before. Anything
     that does not fit has to give somewhere else. */
  flex: none;
  margin: 14px 0 8px;
  height: 180px;
  border-radius: 12px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),
    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),
    color-mix(in srgb, var(--peach-bg) 92%, #000);
  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);
  overflow: hidden;
  isolation: isolate;
}
.peach-pair-stage::after {
  content: '';
  position: absolute;
  left: 12%; right: 12%;
  bottom: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);
}

.peach-pair-bird-slot {
  position: absolute;
  bottom: 8px;
  width: 100px;
  height: 110px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.peach-pair-bird-slot-desktop { left: 28px; }
.peach-pair-bird-slot-mobile { right: 28px; }

/* The QR screen is the tallest in the flow: a 180px stage plus headline, sub,
   QR and action overflows the popup, and the stage is what gets clipped — you
   saw bird legs and nothing else. Shrink the stage and the birds with it here
   only, so the birds stay whole and the QR stays comfortably above the fold.
   Uses the individual `scale` property rather than `transform`, which the
   mobile bird's hop animation already owns. */
.peach-adoption-source[data-phase="invitation"] .peach-pair-stage {
  height: 108px;
  margin: 8px 0 6px;
}
.peach-adoption-source[data-phase="invitation"] .peach-pair-bird-slot {
  scale: 0.62;
  transform-origin: center bottom;
}
.peach-adoption-source[data-phase="invitation"] .peach-pair-stage::after {
  bottom: 20px;
}

/* Mobile bird hops in from the right when handshake begins */
.peach-pair-bird-slot-mobile {
  opacity: 1;
  transform: translateX(-6px);
  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);
}
.peach-pair-stage.act-listening .peach-pair-bird-slot-mobile,
.peach-pair-stage.act-chirping .peach-pair-bird-slot-mobile,
.peach-pair-stage.act-idle .peach-pair-bird-slot-mobile {
  opacity: 0;
  transform: translateX(60px) rotate(8deg);
}
.peach-pair-stage.act-handshake .peach-pair-bird-slot-desktop,
.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop {
  transform: translateX(6px);
  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);
}

/* Paired: both birds bob together */
.peach-pair-stage.act-paired .peach-pair-bird-slot {
  animation: peach-pair-happy-bob 1.2s ease-in-out infinite;
}
.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { animation-delay: 0.2s; }
.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop { --bb-x: 6px; }
.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { --bb-x: -6px; }
@keyframes peach-pair-happy-bob {
  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }
  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }
}

/* Bird internal -------------------------------------------------------- */
.peach-pair-bird {
  width: 108px;
  height: 108px;
  transform-origin: 50% 95%;
}
.peach-pair-bird svg { width: 100%; height: 100%; overflow: visible; }

.peach-pair-bird-body {
  transform-origin: 50% 80%;
  animation: peach-pair-bird-bob 2.4s ease-in-out infinite;
}
@keyframes peach-pair-bird-bob {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }
}

.peach-pair-bird-eye-group {
  animation: peach-pair-blink 5.2s steps(1, end) infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes peach-pair-blink {
  0%, 92%, 96%, 100% { transform: scaleY(1); }
  94%                { transform: scaleY(0.05); }
}

/* Pose: chirping — beak opens, head bobs, aura blooms */
.peach-pair-bird-pose-chirping .peach-pair-bird-body {
  animation:
    peach-pair-bird-bob 2.4s ease-in-out infinite,
    peach-pair-squeeze 1.7s ease-in-out infinite;
}
@keyframes peach-pair-squeeze {
  0%, 70%, 100% { transform-origin: 50% 85%; }
  78%           { transform: scale(1.04, 0.96) translateY(1px); }
  86%           { transform: scale(0.98, 1.02); }
}
.peach-pair-bird-pose-chirping .peach-pair-bird-head-group {
  animation: peach-pair-head-bob 1.7s ease-in-out infinite;
}
@keyframes peach-pair-head-bob {
  0%, 70%, 100% { transform: translateY(0) rotate(0); }
  78%           { transform: translateY(-3px) rotate(-4deg); }
  86%           { transform: translateY(-1px) rotate(-2deg); }
}
.peach-pair-bird-pose-chirping .peach-pair-bird-beak {
  animation: peach-pair-beak-open 1.7s ease-in-out infinite;
}
@keyframes peach-pair-beak-open {
  0%, 70%, 100% { transform: rotate(0) scaleX(1); }
  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }
  86%           { transform: rotate(-6deg); }
}
.peach-pair-bird-pose-chirping .peach-pair-bird-aura {
  animation: peach-pair-aura 1.7s ease-in-out infinite;
}
@keyframes peach-pair-aura {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.8; }
}
.peach-pair-bird-pose-chirping .peach-pair-bird-tail {
  animation: peach-pair-tail-twitch 1.7s ease-in-out infinite;
  transform-origin: 100% 50%;
}
@keyframes peach-pair-tail-twitch {
  0%, 75%, 100% { transform: rotate(0); }
  82%           { transform: rotate(-3deg) translateX(-1px); }
}

/* Pose: attentive — head tilts toward partner */
.peach-pair-bird-pose-attentive .peach-pair-bird-head-group {
  animation: peach-pair-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;
}
@keyframes peach-pair-head-tilt {
  0%   { transform: rotate(0) translateY(0); }
  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }
  100% { transform: rotate(-6deg); }
}
.peach-pair-bird-pose-attentive .peach-pair-bird-tail {
  animation: peach-pair-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;
  transform-origin: 100% 50%;
}
@keyframes peach-pair-tail-cock {
  0%   { transform: rotate(0); }
  100% { transform: rotate(-4deg); }
}

/* Pose: happy — wing flutter, tuft perk, tail wag */
.peach-pair-bird-pose-happy .peach-pair-bird-wing {
  transform-origin: 80% 60%;
  animation: peach-pair-wing-flutter 0.32s ease-in-out 5;
}
@keyframes peach-pair-wing-flutter {
  0%, 100% { transform: rotate(0) translateY(0); }
  50%      { transform: rotate(-16deg) translateY(-2px); }
}
.peach-pair-bird-pose-happy .peach-pair-bird-tuft {
  transform-origin: 0% 100%;
  animation: peach-pair-tuft-perk 0.4s ease-in-out 3;
}
@keyframes peach-pair-tuft-perk {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(-15deg) translateY(-1px); }
}
.peach-pair-bird-pose-happy .peach-pair-bird-tail {
  transform-origin: 100% 50%;
  animation: peach-pair-tail-wag 0.5s ease-in-out 4;
}
@keyframes peach-pair-tail-wag {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(6deg); }
  75%      { transform: rotate(-6deg); }
}
.peach-pair-bird-pose-happy .peach-pair-bird-head-group {
  animation: peach-pair-head-perk 0.5s ease-out;
}
@keyframes peach-pair-head-perk {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-3px) rotate(2deg); }
  100% { transform: translateY(0); }
}

/* Pose: sad — body droops forward */
.peach-pair-bird-pose-sad .peach-pair-bird-body {
  transform: translateY(5px) rotate(-2deg);
  animation: none;
}
.peach-pair-bird-pose-sad .peach-pair-bird-head-group {
  transform: translateY(4px) rotate(8deg);
}
.peach-pair-bird-pose-sad .peach-pair-bird-tuft { transform: rotate(15deg) translateY(2px); }
.peach-pair-bird-pose-sad .peach-pair-bird-tail { transform: rotate(8deg) translateY(2px); }

.peach-pair-bird-pose-hidden { opacity: 0; }

/* Sound arcs ----------------------------------------------------------- */
.peach-pair-arcs {
  position: absolute;
  top: 18px;
  width: 96px;
  height: 70px;
  pointer-events: none;
}
.peach-pair-arcs-right { right: -60px; }
.peach-pair-arcs-left  { left: -60px; transform: scaleX(-1); }
.peach-pair-arc {
  position: absolute;
  top: 50%;
  left: 0;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border: 1.2px solid #f4d5a8;
  border-color: transparent #f4d5a8 transparent transparent;
  border-radius: 50%;
  opacity: 0;
  animation: peach-pair-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;
}
@keyframes peach-pair-arc-expand {
  0%   { transform: scale(0.4); opacity: 0; }
  20%  { opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Flight wave ---------------------------------------------------------- */
.peach-pair-flight-track {
  position: absolute;
  inset: 32px 36px 38px 36px;
  pointer-events: none;
}
.peach-pair-flight-wave {
  position: absolute;
  top: 8px;
  left: 76px;
  right: 76px;
  height: 60px;
  width: auto;
  opacity: 0;
  transition: opacity 0.15s ease;
  stroke: #f4d5a8;
  fill: none;
}
.peach-pair-flight-wave[data-from="mobile"] { transform: scaleX(-1); }
.peach-pair-flight-wave.is-visible { opacity: 1; }
.peach-pair-flight-path,
.peach-pair-flight-path-2 {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  stroke-linecap: round;
  fill: none;
}
.peach-pair-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }
.peach-pair-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }
.peach-pair-flight-wave.is-visible .peach-pair-flight-path {
  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;
}
.peach-pair-flight-wave.is-visible .peach-pair-flight-path-2 {
  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;
}
@keyframes peach-pair-fly {
  0%   { stroke-dashoffset: 240; opacity: 0; }
  20%  { opacity: 1; }
  100% { stroke-dashoffset: -120; opacity: 0; }
}

/* Connection dot ------------------------------------------------------- */
.peach-pair-dot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  color: var(--peach-accent);
}
.peach-pair-dot.is-visible { opacity: 1; }
.peach-pair-dot-glow {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0.55;
  background: var(--peach-accent);
  animation: peach-pair-dot-bloom 1.4s ease-out;
}
.peach-pair-dot-core {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--peach-accent);
  box-shadow: 0 0 12px currentColor;
  animation: peach-pair-dot-core 1.4s ease-out;
}
.peach-pair-dot-ring {
  position: absolute; top: 50%; left: 50%;
  width: 60px; height: 60px;
  transform: translate(-50%, -50%);
  animation: peach-pair-dot-ring 1.4s linear;
  stroke: var(--peach-accent);
}
@keyframes peach-pair-dot-bloom {
  0%   { width: 4px; height: 4px; opacity: 0; }
  35%  { width: 60px; height: 60px; opacity: 0.7; }
  100% { width: 38px; height: 38px; opacity: 0.55; }
}
@keyframes peach-pair-dot-core {
  0%   { width: 0; height: 0; }
  35%  { width: 12px; height: 12px; }
  100% { width: 8px; height: 8px; }
}
@keyframes peach-pair-dot-ring {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}

/* Motes — drift upward across the stage */
.peach-pair-motes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.peach-pair-mote {
  position: absolute;
  width: 2px; height: 2px;
  background: color-mix(in srgb, var(--peach-text) 35%, transparent);
  border-radius: 50%;
  bottom: 32px;
  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);
  opacity: 0;
  animation: peach-pair-mote-drift 6s linear infinite;
  animation-delay: calc(var(--mote-i, 0) * 0.7s);
}
@keyframes peach-pair-mote-drift {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.1; }
  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }
}

/* Status copy ---------------------------------------------------------- */
.peach-pair-copy-host {
  margin: 4px 4px 10px;
  text-align: center;
  min-height: 50px;
}
.peach-pair-copy {
  animation: peach-pair-copy-in 0.35s ease both;
}
@keyframes peach-pair-copy-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.peach-pair-headline {
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--peach-t0);
  margin-bottom: 6px;
}
.peach-pair-copy-listening .peach-pair-headline,
.peach-pair-copy-chirping .peach-pair-headline,
.peach-pair-copy-idle .peach-pair-headline {
  font-family: inherit;
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  color: var(--peach-t0);
  letter-spacing: 0;
}
.peach-pair-copy-paired .peach-pair-headline {
  color: var(--peach-t0);
  font-weight: 600;
}
.peach-pair-sub {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--peach-t1);
  max-width: 280px;
  margin: 0 auto;
  text-wrap: pretty;
}

/* Status action -------------------------------------------------------- */
.peach-pair-action {
  margin: 2px 4px 10px;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.peach-pair-action-waiting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.peach-pair-cancel {
  min-width: 96px;
}
.peach-pair-listening {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--peach-mono, ui-monospace, monospace);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--peach-t1);
  padding: 8px 10px;
}
.peach-pair-listen-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);
  animation: peach-pair-listen-pulse 1.2s ease-in-out infinite;
}
.peach-pair-listen-dot:nth-child(2) { animation-delay: 0.2s; }
.peach-pair-listen-dot:nth-child(3) { animation-delay: 0.4s; }
.peach-pair-listen-label { margin-left: 6px; }
@keyframes peach-pair-listen-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.9); }
  50%      { opacity: 1;     transform: scale(1.15); }
}

.peach-pair-action-handshake {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
}
.peach-pair-meter {
  width: 100%;
  max-width: 280px;
  height: 2px;
  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.peach-pair-meter-bar {
  position: absolute;
  top: 0; bottom: 0;
  width: 30%;
  left: -30%;
  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);
  animation: peach-pair-meter-sweep 1.4s ease-in-out infinite;
}
@keyframes peach-pair-meter-sweep {
  0%   { left: -30%; }
  100% { left: 100%; }
}
.peach-pair-meter-label {
  font-family: var(--peach-mono, ui-monospace, monospace);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--peach-t1);
}

.peach-pair-action-paired {
  display: flex;
  align-items: center;
  gap: 10px;
}
.peach-pair-device-confirm {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 9px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, #76b6e8 12%, transparent);
  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);
  font-size: 12.5px;
  color: var(--peach-t0);
  min-width: 0;
}
.peach-pair-device-confirm-glyph {
  display: inline-flex;
  color: #76b6e8;
}
.peach-pair-device-confirm-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.peach-pair-device-confirm-trust {
  font-family: var(--peach-mono, ui-monospace, monospace);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #76b6e8;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, #76b6e8 14%, transparent);
}
.peach-pair-done {
  min-width: 80px;
}
.peach-pair-retry {
  align-self: center;
  display: block;
  margin: 6px auto 0;
  min-width: 120px;
}
.peach-pair-mic-help {
  font-size: 12px;
  color: var(--peach-t1);
  text-align: center;
  max-width: 320px;
  margin: 0 auto;
}

/* Rest state — bird stage at idle pose, primary CTA + paired list */
.peach-pair-pair[data-phase="idle"] .peach-pair-stage {
  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */
  height: 160px;
}
.peach-pair-pair-start {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--peach-accent);
  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);
  color: #1a0905;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.peach-pair-pair-start:hover { filter: brightness(1.08); }
.peach-pair-pair-start:active { transform: translateY(1px); }

.peach-pair-paired-section {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.peach-pair-paired-heading {
  margin: 0;
  font-family: var(--peach-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--peach-t1);
}

/* Footer --------------------------------------------------------------- */
.peach-pair-foot {
  margin: 10px -4px -2px;
  margin-top: auto;
}
.peach-pair-foot-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);
  margin-bottom: 10px;
}
.peach-pair-foot-text {
  font-size: 11px;
  line-height: 1.5;
  color: var(--peach-t1);
  text-align: center;
  padding: 0 4px;
  text-wrap: pretty;
}

/* Screen-reader-only live region. Kept off the visual flow but read by
   assistive tech as the pairing phase advances. */
.peach-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced motion — stage simplifies to opacity transitions only */
@media (prefers-reduced-motion: reduce) {
  .peach-pair-bird-body,
  .peach-pair-bird-head-group,
  .peach-pair-bird-beak,
  .peach-pair-bird-wing,
  .peach-pair-bird-tuft,
  .peach-pair-bird-tail,
  .peach-pair-bird-eye-group,
  .peach-pair-bird-aura,
  .peach-pair-arc,
  .peach-pair-flight-path,
  .peach-pair-flight-path-2,
  .peach-pair-dot-glow,
  .peach-pair-dot-core,
  .peach-pair-dot-ring,
  .peach-pair-mote,
  .peach-pair-meter-bar,
  .peach-pair-listen-dot,
  .peach-pair-bird-slot,
  .peach-pair-bird-slot-mobile {
    animation: none !important;
    transition: opacity 0.2s linear !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Settings → Sync surface. Wraps the same bird
   animation used by the pairing flow with a paired-devices list and
   the "Pair a device" CTA.
   ───────────────────────────────────────────────────────────────── */
.peach-pair-settings {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 14px 12px 12px;
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  /* Same warm surface as the pairing screen — unifies the two views. */
  background:
    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),
    var(--peach-bg);
  color: var(--peach-t0);
  isolation: isolate;
  /* Hide native scrollbar — content fits 99% of the time and a chunky
     gutter ruins the surface. */
  scrollbar-width: none;
  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
.peach-pair-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }
.peach-pair-settings::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);
  z-index: 0;
}
.peach-pair-settings > * { position: relative; z-index: 1; }

.peach-pair-settings--pairing {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  background: none;
  isolation: auto;
}
.peach-pair-settings--pairing::before { display: none; }

.peach-pair-settings-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.peach-pair-settings-title {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  color: var(--peach-t0);
  letter-spacing: 0.005em;
}
.peach-pair-settings-section {
  margin: 6px 0 -4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--peach-text-muted);
}
.peach-pair-settings-error {
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);
  color: var(--peach-text);
}
.peach-pair-settings-footer {
  margin-top: auto;
  padding-top: 18px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--peach-text-muted);
  text-align: center;
}

/* Hero card shown when no devices are paired yet. */
.peach-pair-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 12px 8px;
  text-align: center;
}
.peach-pair-hero-svg {
  display: block;
  max-width: 100%;
  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));
}
.peach-pair-hero-headline {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--peach-t0);
}
.peach-pair-hero-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--peach-t1);
  max-width: 320px;
  text-wrap: pretty;
}

.peach-pair-pair-cta {
  display: flex;
  justify-content: center;
  padding: 4px 0 6px;
}
.peach-pair-pair-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  justify-content: center;
}
.peach-pair-pair-button-icon {
  flex: 0 0 auto;
}

/* Paired devices list. Roomy rows that look at home next to the rest
   of Settings; stale rows get a soft warm-warning border tint. */
.peach-pair-device-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.peach-pair-device-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);
  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);
}
.peach-pair-device-row[data-stale="true"] {
  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);
}
.peach-pair-device-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--peach-text);
  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);
}
.peach-pair-device-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.peach-pair-device-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--peach-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.peach-pair-device-meta {
  font-size: 11.5px;
  color: var(--peach-text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.peach-pair-device-badge {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);
  color: var(--peach-text);
}
.peach-pair-device-stale {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--peach-warn, #d29257);
}
.peach-pair-device-remove {
  flex: 0 0 auto;
  color: var(--peach-text-muted);
}
.peach-pair-device-remove:hover {
  color: var(--peach-danger, #c25b4a);
}
.peach-pair-unpair-confirm {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */
.peach-pair-pro-card {
  position: relative;
  margin: 18px 12px;
  padding: 18px 20px 22px;
  border-radius: 22px;
  background:
    radial-gradient(140% 90% at 50% 0%,
      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,
      transparent 60%),
    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);
  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,
    0 18px 40px -24px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  overflow: hidden;
}
.peach-pair-pro-stage {
  position: relative;
  width: 220px;
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 2px;
}
.peach-pair-pro-bird-slot {
  width: 140px;
  height: 132px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}
.peach-pair-pro-bird-slot .peach-pair-bird {
  width: 100%;
  height: 100%;
}
.peach-pair-pro-bird-slot .peach-pair-bird svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.peach-pair-pro-headline {
  margin: 4px 0 0;
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--peach-t0);
  max-width: 280px;
  line-height: 1.25;
}
.peach-pair-pro-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--peach-t1);
  max-width: 300px;
}
.peach-pair-pro-cta {
  margin-top: 4px;
}
.peach-pair-pro-foot {
  margin: 2px 0 0;
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--peach-t2);
  opacity: 0.75;
}

/* Shell border and shadow in light mode: match dark mode's near-invisible
   border weight so the popup frame looks the same in both themes. */
.light .peach-shell,
.light .peach-screen {
  border-color: rgba(26, 18, 8, 0.07);
  box-shadow:
    0 2px 8px rgba(80, 56, 32, 0.08),
    0 14px 48px rgba(80, 56, 32, 0.10),
    0 0 0 1px rgba(26, 18, 8, 0.04);
}

/* HOLE 4: the revoke confirmation carries its own disclosure, so it needs the
   full row width rather than sitting inline beside the device name. */
.peach-settings-row:has(> .peach-unpair-confirm) { flex-wrap: wrap; }
.peach-unpair-confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.peach-unpair-confirm-note {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--peach-t2);
}

/* Sync mode selector — three named choices (public / private / off). Replaces
   the old binary "local network only" toggle; see docs/sync-lan-retirement.md. */
.peach-sync-mode {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  margin-top: 8px;
  border-radius: 10px;
  border: 1px solid var(--peach-border);
  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);
  color: var(--peach-t1);
  cursor: pointer;
  transition: border-color var(--peach-dur-80) var(--peach-curve-arrival),
              background-color var(--peach-dur-80) var(--peach-curve-arrival);
}
.peach-sync-mode:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);
}
.peach-sync-mode.is-active {
  border-color: var(--peach-accent);
  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);
}
.peach-sync-mode:disabled { opacity: 0.6; cursor: default; }
.peach-sync-mode-main { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.peach-sync-mode-title { font-size: 12px; }
.peach-sync-mode-sub {
  font-size: 11px;
  line-height: 1.5;
  color: var(--peach-t2);
}
.peach-sync-mode-pip {
  flex: none;
  margin-top: 3px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid var(--peach-t3);
}
.peach-sync-mode.is-active .peach-sync-mode-pip {
  border-color: var(--peach-accent);
  background:
    radial-gradient(circle at 50% 50%, var(--peach-accent) 0 42%, transparent 44%);
}
.peach-sync-mode-disclosure {
  margin: 10px 2px 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--peach-t2);
}
.peach-sync-mode-warn { color: var(--peach-breach); }

/* Compact form, used mid-pairing: a quiet line, not a decision to make. */
.peach-sync-mode-summary {
  margin: 8px 2px 0;
  font-size: 11px;
  color: var(--peach-t2);
  text-align: center;
}
.peach-sync-mode-change {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--peach-accent);
  text-decoration: underline;
  cursor: pointer;
}