popup.css

1html,2body,3#app,4.popup-root {5  width: 320px;6  min-height: 520px;7  height: 520px;8  margin: 0;9}1011body {12  overflow: hidden;13  background: var(--bg);14  color: var(--t0);15  font-family: var(--font-ui);16  font-weight: 300;17  position: relative;18}1920* {21  box-sizing: border-box;22}2324button,25input,26textarea,27select {28  font: inherit;29}3031button {32  border: 0;33}3435.popup-root {36  position: relative;37  overflow: hidden;38}3940.peach-theme {41  color: var(--peach-t0);42  font-family: var(--font-ui);43  font-weight: 300;44  box-sizing: border-box;45  text-align: left;46}47.peach-theme, .peach-theme * { box-sizing: inherit; }4849.peach-brand-mark {50  width: 14px;51  height: 14px;52  flex-shrink: 0;53}5455.peach-status-pip.is-hidden {56  display: none;57}5859.peach-status-pip.unlocked {60  background: var(--peach-health-ok);61  box-shadow: 0 0 6px rgba(100, 210, 100, 0.6);62}6364.peach-status-pip.pulse {65  animation: pip-pulse 400ms var(--peach-curve-settle) both;66}6768/* Shell */69.peach-shell, .peach-screen {70  background:71    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),72    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),73    var(--peach-bg);74  border: 1px solid var(--peach-t3);75  box-shadow:76    0 2px 8px rgba(0,0,0,0.55),77    0 14px 48px rgba(0,0,0,0.7),78    0 0 0 1px rgba(240,232,216,0.04);79  overflow: hidden;80}81.peach-shell {82  display: grid;83  grid-template-rows: auto 1fr;84  min-height: 520px;85  position: relative;86  isolation: isolate;87}8889.peach-shell[data-surface="extension"] {90  width: min(320px, 100vw);91  border-radius: 0;92  height: 520px;93  max-height: 520px;94  overflow: hidden;95}9697/* ── Lock screen – full-window lock/create stage ── */98.lock-screen--vault-stage {99  display: flex;100  flex-direction: column;101  gap: 18px;102  padding: 20px 18px 18px;103  justify-content: flex-start;104}105.lock-screen--vault-stage .peach-lock-panel {106  margin-top: auto;107}108.peach-lock-headline--unlock {109  max-width: 220px;110  text-align: center;111  margin: 0 auto;112  padding: 0;113}114.peach-lock-hero--unlock {115  flex: 1 1 auto;116  padding-top: 0;117}118.peach-lock-panel--unlock {119  gap: 10px;120}121122.peach-lock-restore-link {123  background: transparent;124  border: none;125  cursor: pointer;126  font-family: var(--font-mono);127  font-size: 0.625rem;128  letter-spacing: 0.08em;129  color: var(--t1);130  padding: 5px 0;131  text-align: left;132  transition: color 150ms ease;133}134135.peach-lock-restore-link:hover {136  color: var(--t0);137}138.peach-shell[data-surface="extension"] .peach-stage {139  min-height: 250px;140}141142/* Screen (unlock) */143.peach-screen {144  width: min(320px, 100vw);145  min-height: 100%;146  height: 100%;147  border-radius: 0;148  padding: 16px 20px 18px;149  display: grid;150  gap: 14px;151}152.peach-screen[data-motion-phase="enter"] {153  animation: peach-screen-enter var(--peach-dur-600) var(--peach-curve-arrival) both;154}155.peach-screen-header { min-height: 20px; }156157/* Wordmark */158.peach-wordmark {159  margin: 0;160  font-family: var(--font-display);161  font-size: 0.9375rem;162  font-style: italic;163  letter-spacing: 0.03em;164  color: var(--peach-t0);165  display: inline-flex;166  min-height: 1em;167}168169/* Motion text / char animation */170.peach-motion-text { display: inline-flex; min-height: 1em; }171.peach-motion-char {172  display: inline-block;173  white-space: pre;174  opacity: 0;175  transform: translateY(0.22em);176  animation: peach-char-enter var(--peach-motion-duration, 380ms) var(--peach-curve-arrival) forwards;177  animation-delay: calc(var(--peach-char-index, 0) * 20ms);178}179180/* Chrome */181.peach-chrome {182  position: relative;183  z-index: 10;184  padding: 16px 20px 0;185  display: flex;186  justify-content: space-between;187  align-items: center;188  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense189     fallback) per §15 regression guard. Without pointer-events:none, the190     empty header strip also sits above `.peach-overlay-view` (z-index:2)191     and swallows clicks meant for an overlay's back button / top search. */192  pointer-events: none;193}194.peach-chrome .peach-btn { pointer-events: auto; }195.peach-chrome.is-hidden-for-overlay,196.peach-search-wrap.is-hidden-for-overlay {197  opacity: 0;198  visibility: hidden;199  pointer-events: none;200}201/* The pair-device surface owns its own header and header — fully collapse the global202   chrome row so the warm gradient reaches the popup edge. */203.peach-chrome.is-collapsed,204.peach-search-wrap.is-collapsed {205  display: none;206}207.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }208.peach-status-pip {209  width: 5px;210  height: 5px;211  border-radius: 50%;212  background: var(--peach-t3);213  display: inline-flex;214  flex-shrink: 0;215  transition: background 400ms ease, box-shadow 400ms ease;216}217.peach-chrome-actions { display: flex; gap: 6px; }218219/* Shell body */220.peach-shell-body {221  position: relative;222  display: grid;223  grid-template-rows: 1fr auto;224  min-height: 0;225  min-width: 0;226  width: 100%;227  overflow: hidden;228  height: 100%;229}230.peach-shell-veil {231  position: absolute; inset: 0;232  background: #000; opacity: 0;233  pointer-events: none; z-index: 1;234}235.peach-shell[data-motion-phase="enter"] .peach-shell-body {236  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;237}238.peach-shell[data-motion-phase="exit"] .peach-shell-veil {239  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;240}241242/* Content frame */243.peach-content-frame {244  display: grid;245  grid-template-rows: 1fr auto;246  grid-template-columns: minmax(0, 1fr);247  align-content: start;248  min-height: 0;249  min-width: 0;250  overflow: hidden;251  transition: opacity 80ms ease, transform 80ms ease;252}253.peach-content-frame.navigating {254  opacity: 0.93;255  transform: translateX(2px);256}257.peach-content-frame[data-content-phase="enter"] {258  animation: peach-content-enter 135ms ease-out both;259}260.peach-content-frame[data-content-phase="exit"] {261  animation: peach-content-exit 95ms ease-in forwards;262}263.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }264265/* Stage */266.peach-stage {267  padding: 10px 20px 12px;268  display: grid;269  gap: 12px;270  align-content: start;271  min-width: 0;272  min-height: 0;273  max-width: 100%;274  overflow-y: auto;275  overflow-x: hidden;276  scrollbar-width: none;277  -ms-overflow-style: none;278  overscroll-behavior: contain;279}280.peach-stage::-webkit-scrollbar { display: none; }281282/* Entry name */283.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }284.peach-entry-header {285  position: relative;286  z-index: 1;287  display: flex;288  align-items: flex-start;289  gap: 6px;290  min-width: 0;291}292.peach-entry-header-name {293  flex: 1;294  min-width: 0;295}296.peach-entry-name {297  margin: 0;298  padding-bottom: 0.12em;299  font-family: var(--font-display);300  font-style: italic; font-weight: 400;301  font-size: 44px; line-height: 0.95;302  color: var(--peach-t0);303  display: -webkit-box;304  -webkit-line-clamp: 2;305  -webkit-box-orient: vertical;306  overflow: hidden;307  text-wrap: balance;308}309.peach-entry-name--lg { font-size: 40px; }310.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }311.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }312.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }313314/* Trash icon in entry header */315.peach-entry-trash-btn {316  flex-shrink: 0;317  padding: 4px;318  margin-top: 4px;319  background: transparent;320  border: none;321  cursor: pointer;322  color: var(--peach-t2);323  border-radius: 4px;324  transition: color 140ms ease, background 140ms ease;325  display: flex;326  align-items: center;327  justify-content: center;328}329.peach-entry-trash-btn:hover {330  color: var(--peach-t1);331  background: var(--peach-t3);332}333.peach-entry-trash-confirm {334  display: flex;335  align-items: center;336  gap: 6px;337  flex-shrink: 0;338  margin-top: 6px;339  flex-wrap: nowrap;340}341.peach-entry-trash-confirm-label {342  font-family: var(--font-mono);343  font-size: 0.5625rem;344  letter-spacing: 0.1em;345  color: var(--peach-t2);346  white-space: nowrap;347}348.peach-entry-name-button {349  padding: 0;350  background: transparent;351  text-align: left;352  cursor: pointer;353  max-width: 100%;354  overflow: hidden;355  display: block;356}357.peach-entry-name-char {358  display: inline-block;359  white-space: pre;360  opacity: 0;361  transform: translateY(0.22em);362  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;363  animation-delay: calc(var(--char-index, 0) * 20ms);364}365366/* Domain */367.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }368.peach-domain-row {369  width: 100%; border: 0; background: transparent; color: inherit;370  padding: 0; display: flex; justify-content: space-between; align-items: baseline;371  cursor: default;372}373.peach-domain-value {374  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;375  font-size: 0.625rem; font-style: italic;376  letter-spacing: 0.12em; color: var(--peach-t1);377}378379/* Fields */380.peach-fields { display: grid; gap: 10px; }381.peach-field-card { display: grid; gap: 7px; }382.peach-label {383  font-family: Inter, system-ui, sans-serif;384  text-transform: uppercase; letter-spacing: 0.2em;385  font-size: 0.5rem; color: var(--peach-t2);386}387.peach-add-field-btn {388  align-self: flex-start;389  background: none; border: none; padding: 2px 0;390  font-family: Inter, system-ui, sans-serif;391  font-size: 0.6875rem; color: var(--peach-accent);392  cursor: pointer; opacity: 0.75;393  letter-spacing: 0.02em;394}395.peach-add-field-btn:hover { opacity: 1; }396.peach-field-value-row {397  display: flex; justify-content: space-between;398  align-items: center; gap: 8px;399  min-width: 0;400}401.peach-field-value {402  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;403  font-size: 0.8125rem; color: var(--peach-t1);404  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;405  flex: 1;406  min-width: 0;407}408.peach-password-value {409  display: inline-flex;410  align-items: center;411  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;412  font-size: 1rem; letter-spacing: 0.3em; color: var(--peach-t0);413  overflow: hidden;414  text-overflow: ellipsis;415  white-space: nowrap;416  flex: 1;417  min-width: 0;418  max-width: 100%;419}420.peach-password-value.is-revealed {421  font-size: 0.875rem;422  letter-spacing: 0.08em;423}424.peach-password-text,425.peach-password-mask {426  display: block;427  width: 100%;428  overflow: hidden;429  white-space: nowrap;430  /* Render as uniform mid-line bullets, not baseline periods */431  font-family: Inter, system-ui, sans-serif;432  font-size: 0.625rem;433  letter-spacing: 3px;434  user-select: none;435}436.peach-field-actions { display: flex; gap: 4px; align-items: center; }437.peach-password-strength { display: flex; align-items: center; gap: 8px; }438.peach-strength-bar { display: flex; gap: 3px; }439.peach-strength-seg { width: 28px; height: 4px; border-radius: 2px; background: #eee; }440.peach-strength-label {441  font-family: "IBM Plex Mono", monospace;442  font-style: italic;443  font-size: 0.5625rem;444  font-weight: 300;445  min-width: 36px;446  text-align: right;447  color: var(--peach-t2);448  letter-spacing: 0.06em;449}450451.peach-strength-hairline {452  display: flex;453  align-items: center;454  gap: 10px;455  margin-top: -2px;456}457458.peach-strength-hairline-track {459  flex: 1;460  height: 3px;461  border-radius: 2px;462  background: var(--peach-s2);463  overflow: hidden;464}465466.peach-strength-hairline-fill {467  height: 100%;468  border-radius: 2px;469  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),470    background 400ms ease;471}472473/* Note content (display) */474.peach-note-content {475  border-top: 1px solid var(--peach-t3);476  padding-top: 10px;477  font-family: var(--font-display);478  font-size: 0.9375rem;479  line-height: 1.75;480  color: var(--peach-t1);481}482483/* ── Inline editing ─────────────────────────────────────────────────── */484485/* Clickable display values */486.peach-inline-clickable {487  cursor: text;488  border-radius: 3px;489  transition: background 150ms ease;490}491.peach-inline-clickable:hover {492  background: rgba(240, 232, 216, 0.05);493}494495/* Subtle "edit" hint that appears on hover */496.peach-inline-edit-hint {497  font-family: Inter, system-ui, sans-serif;498  font-size: 0.5625rem;499  text-transform: uppercase;500  letter-spacing: 0.14em;501  color: var(--peach-t2);502  opacity: 0;503  transition: opacity 120ms ease;504  pointer-events: none;505  margin-left: 6px;506  flex-shrink: 0;507}508.peach-domain-row:hover .peach-inline-edit-hint {509  opacity: 1;510}511512/* Title editing */513.peach-inline-title-wrap {514  display: flex;515  flex-direction: column;516  gap: 6px;517}518.peach-inline-title-input {519  font-family: var(--font-display);520  font-style: italic;521  font-weight: 400;522  font-size: 40px;523  line-height: 0.95;524  color: var(--peach-t0);525  background: transparent;526  border: none;527  border-bottom: 1px solid var(--peach-accent);528  outline: none;529  width: 100%;530  padding: 2px 0;531}532533/* Generic inline field */534.peach-inline-field-wrap {535  display: flex;536  flex-direction: column;537  gap: 6px;538}539.peach-inline-input {540  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;541  font-size: 0.8125rem;542  color: var(--peach-t0);543  background: transparent;544  border: none;545  border-bottom: 1px solid var(--peach-accent);546  outline: none;547  width: 100%;548  padding: 3px 0;549}550.peach-inline-textarea {551  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;552  font-size: 0.6875rem;553  line-height: 1.7;554  color: var(--peach-t0);555  background: rgba(240, 232, 216, 0.04);556  border: 1px solid var(--peach-accent);557  border-radius: 4px;558  outline: none;559  width: 100%;560  padding: 8px;561  resize: vertical;562  min-height: 80px;563}564565/* Save / cancel row */566.peach-inline-actions {567  display: flex;568  gap: 6px;569  align-items: center;570}571.peach-inline-save-btn,572.peach-inline-cancel-btn {573  display: inline-flex;574  align-items: center;575  justify-content: center;576  width: 26px;577  height: 26px;578  border-radius: 4px;579  border: none;580  cursor: pointer;581  transition: background 140ms ease, opacity 140ms ease;582  flex-shrink: 0;583}584.peach-inline-save-btn {585  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);586  color: var(--peach-accent);587}588.peach-inline-save-btn:hover:not(:disabled) {589  background: color-mix(in srgb, var(--peach-accent) 30%, transparent);590}591.peach-inline-cancel-btn {592  background: rgba(240, 232, 216, 0.06);593  color: var(--peach-t2);594}595.peach-inline-cancel-btn:hover:not(:disabled) {596  background: rgba(240, 232, 216, 0.12);597  color: var(--peach-t1);598}599.peach-inline-save-btn:disabled,600.peach-inline-cancel-btn:disabled {601  opacity: 0.4;602  cursor: not-allowed;603}604605/* Inline password generator wrapper */606.peach-inline-generator-wrap {607  margin-top: 10px;608  padding-top: 10px;609  border-top: 1px solid var(--peach-t3);610  display: flex;611  flex-direction: column;612  gap: 8px;613}614.peach-inline-generator-cancel {615  align-self: flex-start;616  font-size: 0.6875rem;617  color: var(--peach-t2);618}619620/* "is-editing" card state */621.peach-field-card.is-editing {622  background: rgba(240, 232, 216, 0.02);623  border-radius: 6px;624  padding: 8px;625  margin: -8px;626}627628/* Inline tag editor on Entry detail view */629.peach-inline-tag-editor {630  display: flex;631  flex-direction: column;632  gap: 6px;633}634635/* Quiet inline "+ add X" link in the entry detail body */636.peach-entry-add-link {637  justify-self: start;638  margin-top: 8px;639}640641/* Additional URLs editor revealed by clicking the URL field */642.peach-additional-urls {643  display: flex;644  flex-direction: column;645  gap: 6px;646  margin-top: 8px;647}648.peach-additional-urls-label {649  font-size: 0.5625rem;650  letter-spacing: 0.1em;651  text-transform: uppercase;652  color: var(--peach-t2);653  margin-bottom: 2px;654}655/* UI-5 / LV-4: recovery words grid in the view-words reveal. */656.peach-recovery-words-grid {657  display: grid;658  grid-template-columns: 1fr 1fr;659  gap: 4px 10px;660}661.peach-recovery-word {662  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;663  font-size: 11px;664  color: var(--peach-t0);665}666.peach-recovery-word b {667  color: var(--peach-t2);668  font-weight: 400;669  margin-right: 4px;670}671672/* UI-1 / HV-1b: dismissible sync alert banners at the top of the vault view. */673.peach-sync-alerts {674  display: flex;675  flex-direction: column;676  gap: 6px;677  padding: 8px 12px 0;678  /* Grid item of .peach-shell: without a zero min-width the nowrap alert text679     sizes this item to its min-content, blowing the fixed-width shell past680     320px and clipping/distorting everything else in it. */681  min-width: 0;682}683.peach-sync-alert {684  display: flex;685  align-items: center;686  gap: 8px;687  padding: 8px 10px;688  border-radius: 7px;689  min-width: 0;690  max-width: 100%;691  background: color-mix(in srgb, #C8A840 14%, transparent);692  border: 1px solid color-mix(in srgb, #C8A840 38%, transparent);693}694.peach-sync-alert-text {695  flex: 1;696  min-width: 0;697  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;698  font-size: 10px;699  line-height: 1.45;700  color: var(--peach-t0);701  overflow: hidden;702  text-overflow: ellipsis;703  white-space: nowrap;704}705.peach-sync-alert-flip {706  flex-shrink: 0;707  background: none;708  border: none;709  color: var(--peach-t2);710  font-size: 14px;711  line-height: 1;712  cursor: pointer;713  padding: 0 2px;714}715.peach-sync-alert-flip:hover { color: var(--peach-t0); }716.peach-sync-alert-count {717  flex-shrink: 0;718  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;719  font-size: 9px;720  color: var(--peach-t2);721  min-width: 24px;722  text-align: center;723}724.peach-sync-alert-dismiss {725  flex-shrink: 0;726  background: none;727  border: none;728  color: var(--peach-t2);729  font-size: 14px;730  line-height: 1;731  cursor: pointer;732  padding: 0 2px;733}734.peach-sync-alert-dismiss:hover { color: var(--peach-t0); }735736/* UI-8 / LV-2: non-blocking homograph warning under the URL editor. */737.peach-homograph-warning {738  margin: 4px 0 2px;739  padding: 6px 8px;740  border-radius: 6px;741  background: color-mix(in srgb, var(--peach-breach) 12%, transparent);742  border: 1px solid color-mix(in srgb, var(--peach-breach) 36%, transparent);743  color: var(--peach-t1);744  font-size: 0.6875rem;745  line-height: 1.4;746}747.peach-additional-url-row {748  display: flex;749  align-items: center;750  gap: 6px;751}752.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }753.peach-additional-url-remove {754  background: transparent;755  border: 1px solid var(--peach-t3);756  color: var(--peach-t2);757  width: 22px;758  height: 22px;759  border-radius: 4px;760  cursor: pointer;761  font-size: 0.875rem;762  line-height: 1;763  display: inline-flex;764  align-items: center;765  justify-content: center;766  flex-shrink: 0;767  transition: color 120ms ease, border-color 120ms ease;768}769.peach-additional-url-remove:hover:not(:disabled) {770  color: var(--peach-accent);771  border-color: var(--peach-border-accent);772}773.peach-additional-urls-add { align-self: flex-start; }774775/* Delete row */776.peach-entry-delete-row {777  display: flex;778  align-items: center;779  gap: 8px;780  padding-top: 18px;781  margin-top: 8px;782  border-top: 1px solid var(--peach-t3);783}784.peach-delete-btn {785  font-size: 0.6875rem;786  color: var(--peach-t2);787  padding: 4px 0;788}789.peach-delete-confirm-text {790  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;791  font-size: 0.6875rem;792  font-style: italic;793  color: var(--peach-t2);794  flex-shrink: 0;795}796797/* TOTP band */798.peach-totp-band {799  border-top: 1px solid var(--peach-t3);800  padding: 12px 20px 14px;801  position: relative;802  display: grid;803  grid-template-columns: 1fr auto;804  gap: 10px;805}806.peach-totp-main {807  min-width: 0;808  cursor: pointer;809  user-select: none;810}811.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }812.peach-totp-code-row {813  display: flex;814  align-items: flex-end;815  gap: 10px;816  min-width: 0;817}818.peach-totp-code {819  margin: 2px 0 0;820  font-family: var(--font-display);821  font-style: italic;822  font-weight: 300;823  font-size: 38px; color: var(--peach-accent);824  line-height: 0.95; min-height: 1em;825  min-width: 0;826}827.peach-totp-code-text {828  display: inline-flex;829  overflow: hidden;830  text-overflow: ellipsis;831  white-space: nowrap;832}833.peach-totp-copy-btn {834  margin-bottom: 2px;835  flex-shrink: 0;836  border-color: transparent;837}838.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }839.peach-totp-countdown {840  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;841  font-size: 22px; color: var(--peach-t1);842}843.peach-totp-ring { transform: rotate(-90deg); }844.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }845.peach-totp-ring-progress {846  fill: none; stroke: var(--peach-accent); stroke-width: 2;847  stroke-linecap: round;848  transition: stroke-dashoffset 1s linear, stroke 500ms ease;849}850/* Search bar */851.peach-search-wrap {852  border-top: 1px solid var(--peach-t3);853  background: var(--peach-s1);854  min-height: 54px; position: relative;855  box-shadow: inset 0 6px 18px transparent;856  transition: box-shadow 700ms ease;857}858.peach-search-wrap::before {859  content: "";860  position: absolute;861  left: 0;862  top: 0;863  height: 2px;864  width: var(--peach-totp-progress, 0%);865  background: var(--peach-accent);866  opacity: 0;867  transition: width 1s linear, opacity 180ms ease;868  pointer-events: none;869}870.peach-shell[data-totp-active="true"] .peach-search-wrap::before {871  opacity: 0.9;872}873.peach-shell[data-totp-active="true"] .peach-search-wrap {874  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);875}876877@keyframes peach-totp-code-flare {878  0%   { filter: brightness(1); }879  25%  { filter: brightness(1.3); }880  100% { filter: brightness(1); }881}882.peach-totp-code.is-hot {883  animation: peach-totp-code-flare 3000ms ease-in-out both;884}885.peach-search-bar {886  min-height: 54px;887  display: grid;888  grid-template-columns: auto minmax(0, 1fr) auto;889  align-items: center;890  gap: 8px; padding: 0 9px 0 12px;891}892.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }893.peach-search-input {894  border: 0; background: transparent; color: var(--peach-t0);895  font-family: var(--font-display);896  font-style: italic; font-size: 18px;897  outline: none; width: 100%; min-width: 0; padding: 0;898  caret-color: var(--peach-accent);899}900.peach-search-input::placeholder { color: var(--peach-t2); }901.peach-search-meta {902  display: grid;903  grid-auto-flow: column;904  align-items: center;905  justify-content: end;906  gap: 6px;907  min-width: max-content;908}909.peach-search-counter {910  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;911  font-size: 0.625rem; color: var(--peach-t2);912  display: inline-flex;913  align-items: center;914  line-height: 1;915}916.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }917918/* Buttons */919.peach-btn {920  border: 1px solid transparent; border-radius: 12px;921  background: transparent; color: var(--peach-t0);922  font-family: Inter, system-ui, sans-serif;923  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;924  cursor: pointer;925  transition:926    background-color var(--peach-dur-80) var(--peach-curve-arrival),927    color var(--peach-dur-80) var(--peach-curve-arrival),928    border-color var(--peach-dur-150) var(--peach-curve-arrival);929}930.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }931.peach-btn:disabled {932  opacity: 0.45;933  cursor: not-allowed;934}935.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }936.peach-btn--md { min-height: 38px; }937.peach-btn--accent {938  background: var(--peach-accent);939  color: rgba(0,0,0,0.92);940  font-weight: 500;941  box-shadow:942    0 1px 0 rgba(255,255,255,0.08) inset,943    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),944    0 3px 16px var(--peach-glow),945    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);946}947.peach-btn--accent:hover:not(:disabled) {948  background: var(--peach-accent);949  filter: brightness(1.10) saturate(1.05);950  box-shadow:951    0 1px 0 rgba(255,255,255,0.10) inset,952    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),953    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),954    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);955}956.peach-btn--ghost:not(.peach-icon-btn) { border-color: var(--peach-t3); color: var(--peach-t1); }957.peach-btn--ghost.peach-icon-btn { color: var(--peach-t1); }958.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }959.peach-icon-btn {960  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;961  display: inline-flex; align-items: center; justify-content: center;962  border-color: transparent;963  transition:964    color var(--peach-dur-80) var(--peach-curve-arrival),965    box-shadow var(--peach-dur-150) var(--peach-curve-arrival),966    background-color var(--peach-dur-80) var(--peach-curve-arrival);967}968.peach-icon-btn:hover:not(:disabled) {969  background: transparent;970  color: var(--peach-accent);971  box-shadow: 0 0 12px color-mix(in srgb, var(--peach-accent) 28%, transparent),972              0 0 4px color-mix(in srgb, var(--peach-accent) 16%, transparent);973}974975/* Topbar sync. Only rendered when a device is paired, so it never sits there976   as a control that cannot do anything. */977.peach-sync-btn.is-syncing { color: var(--peach-accent); }978.peach-sync-btn.is-syncing .peach-sync-icon {979  animation: peach-sync-spin 900ms linear infinite;980  transform-origin: 50% 50%;981}982.peach-sync-btn.is-ok { color: var(--peach-accent); }983.peach-sync-btn.is-error { color: var(--peach-breach, #d66); }984@keyframes peach-sync-spin { to { transform: rotate(360deg); } }985986/* Sync indicator light — same taxonomy as the Settings pip, sized for the987   14px topbar icon. Unlit when nothing has happened yet; never green when988   sync is not actually working. */989.peach-sync-btn { position: relative; }990.peach-sync-pip {991  position: absolute;992  top: 2px;993  right: 2px;994  width: 5px;995  height: 5px;996  border-radius: 50%;997  background: transparent;998}999.peach-sync-pip.is-ok,1000.peach-sync-pip.is-busy {1001  background: var(--peach-health-ok);1002  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-health-ok) 60%, transparent);1003}1004.peach-sync-pip.is-busy { animation: peach-sync-pip-pulse 1600ms ease-in-out infinite; }1005/* Yellow — the dial did not reach the peer, but the alarm will retry. Distinct1006   from is-error (red) so a transient network miss does not look like a real1007   fault. */1008.peach-sync-pip.is-warn {1009  background: var(--peach-health-warn);1010  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-health-warn) 60%, transparent);1011}1012.peach-sync-pip.is-error {1013  background: var(--peach-breach);1014  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-breach) 60%, transparent);1015}1016@keyframes peach-sync-pip-pulse {1017  0%, 100% { opacity: 1; }1018  50% { opacity: 0.35; }1019}1020@media (prefers-reduced-motion: reduce) {1021  .peach-sync-btn.is-syncing .peach-sync-icon { animation: none; opacity: 0.6; }1022  .peach-sync-pip.is-busy { animation: none; }1023}10241025.peach-btn:focus-visible {1026  outline: none;1027  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);1028}10291030/* Lock button */1031.peach-lock-icon { transform-origin: center; }1032.peach-lock-btn { color: var(--peach-accent); }1033.peach-lock-btn.is-locking .peach-lock-icon {1034  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);1035}10361037/* Biometric unlock button */1038.peach-biometric-btn {1039  display: flex;1040  align-items: center;1041  justify-content: center;1042  gap: 6px;1043  margin-top: 8px;1044  width: 100%;1045}10461047/* Copy button */1048.peach-copy-btn {1049  position: relative; overflow: hidden;1050  color: var(--peach-t2); border-color: var(--peach-t3);1051}1052.peach-copy-icon {1053  display: inline-flex; align-items: center; justify-content: center;1054  position: relative; z-index: 1;1055}1056.peach-copy-icon-svg { display: block; }1057.peach-copy-sheen {1058  position: absolute; inset: 0;1059  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%);1060  opacity: 0; transform: scaleX(0.15); transform-origin: left center;1061}1062.peach-copy-btn.is-copied {1063  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;1064  box-shadow:1065    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),1066    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),1067    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);1068}1069.peach-copy-btn.is-copied .peach-copy-icon {1070  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;1071}1072.peach-copy-btn.is-copied .peach-copy-sheen {1073  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;1074}1075.peach-copy-btn.is-retreat {1076  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;1077}1078.peach-copy-btn.is-retreat .peach-copy-sheen {1079  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;1080}1081.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }1082.peach-copy-drain-bar {1083  display: block; width: 100%; height: 100%;1084  background: var(--peach-accent); opacity: 0.7;1085  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;1086}10871088/* Unlock screen elements */1089.peach-underline-input {1090  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);1091  padding: 6px 0; background: transparent; color: var(--peach-t0);1092  outline: none;1093  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1094  font-size: 0.8125rem;1095  caret-color: var(--peach-accent);1096}1097.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }1098.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }1099.peach-hint {1100  margin: 0;1101  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1102  font-size: 0.625rem; color: var(--peach-t2);1103}1104.peach-unlock-footer {1105  margin-top: 4px; display: flex; align-items: center; gap: 7px;1106  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1107  font-size: 0.625rem; color: var(--peach-t2);1108}1109.peach-unlock-footer--lock {1110  padding-top: 2px;1111}11121113/* Desktop helper (peach-sync) code pairing — additive hooks. The shared pairing1114   classes (peach-pair-*) carry the shared layout; these only style the parts1115   unique to the typed-code path. Inline styles cover the SAS/confirm gate. */1116.peach-desktop-pair { display: flex; flex-direction: column; }1117.peach-desktop-enter,1118.peach-desktop-searching,1119.peach-desktop-paired,1120.peach-desktop-error {1121  display: flex; flex-direction: column; gap: 8px;1122  padding: 4px 18px 16px; text-align: center; align-items: center;1123}1124.peach-desktop-enter .peach-label { align-self: flex-start; }1125/* Sized for a full 19-character pairing code (A74H-48J3-KI32-OEP4) in a1126   320px popup — a 6-digit legacy helper code still reads fine at this size. */1127.peach-code-input {1128  text-align: center; letter-spacing: 0.12em; padding-left: 0.12em;1129  font-size: 15px;1130}1131.peach-code-input::placeholder { letter-spacing: 0.12em; }11321133/* Sync card "pair a device" options — bordered, raised tappable rows that read1134   as buttons on any card hue (theme-neutral light overlay, not the peach accent). */1135.peach-sync-pair-option {1136  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;1137  width: 100%; text-align: left; cursor: pointer; font-family: inherit;1138  padding: 11px 12px; border-radius: 10px;1139  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);1140  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);1141  color: var(--peach-t0);1142  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;1143}1144.peach-sync-pair-option + .peach-sync-pair-option { margin-top: 8px; }1145.peach-sync-pair-option:hover {1146  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);1147  border-color: color-mix(in srgb, var(--peach-t0) 28%, transparent);1148}1149.peach-sync-pair-option:active { transform: translateY(1px); }1150.peach-sync-pair-option:disabled { opacity: 0.5; cursor: default; }1151.peach-sync-pair-option-icon { flex-shrink: 0; display: flex; align-items: center; color: var(--peach-t1); margin-top: 1px; }1152.peach-sync-pair-option-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }1153.peach-sync-pair-option-title { font-size: 0.8125rem; font-weight: 600; }1154.peach-sync-pair-option-sub { font-size: 0.6875rem; line-height: 1.45; color: var(--peach-t2); }1155.peach-sync-pair-option-chevron { flex-shrink: 0; color: var(--peach-t2); font-size: 1.05rem; line-height: 1.3; }11561157/* Breach badge */1158.peach-breach-badge {1159  display: flex;1160  position: relative;1161  z-index: 1;1162  align-items: center;1163  gap: 7px;1164  font-size: 0.5625rem;1165  color: var(--peach-breach);1166  padding: 5px 10px;1167  margin-bottom: 4px;1168  border-radius: 8px;1169  background: rgba(220, 80, 60, 0.07);1170  border: 1px solid rgba(220, 80, 60, 0.18);1171  letter-spacing: 0.04em;1172}11731174.peach-password-value.is-breached {1175  color: rgba(220, 80, 60, 0.75);1176  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1177}11781179/* ── Overlay views ─────────────────────────────────────────────────── */1180.peach-overlay-view {1181  position: absolute;1182  inset: 0;1183  display: flex;1184  flex-direction: column;1185  background:1186    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1187    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1188    var(--peach-bg);1189  z-index: 2;1190  overflow: hidden;1191  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1192}11931194.peach-overlay-view:has(.stk-shell) {1195  background: var(--peach-bg);1196}1197@keyframes overlay-in {1198  from { opacity: 0; transform: translateY(8px); }1199  to   { opacity: 1; transform: translateY(0); }1200}1201.peach-overlay-view.ov-enter-up {1202  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1203}1204.peach-overlay-view.ov-exit-up {1205  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1206}1207.peach-overlay-view.ov-enter-right {1208  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1209}1210.peach-overlay-view.ov-exit-right {1211  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1212}12131214@keyframes ov-enter-up {1215  from { opacity: 0; transform: translateY(18px); }1216  to   { opacity: 1; transform: translateY(0); }1217}1218@keyframes ov-exit-up {1219  from { opacity: 1; transform: translateY(0); }1220  to   { opacity: 0; transform: translateY(-12px); }1221}1222@keyframes ov-enter-right {1223  from { opacity: 0; transform: translateX(20px); }1224  to   { opacity: 1; transform: translateX(0); }1225}1226@keyframes ov-exit-right {1227  from { opacity: 1; transform: translateX(0); }1228  to   { opacity: 0; transform: translateX(20px); }1229}12301231/* Overlay shared header */1232.peach-overlay-header {1233  padding: 10px 12px 8px;1234  display: flex;1235  align-items: center;1236  gap: 10px;1237  flex-shrink: 0;1238}1239/* Back button — circular pill matching the settings stack masthead (.stk-back) */1240.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1241  width: 28px;1242  height: 28px;1243  flex: 0 0 28px;1244  border-radius: 999px;1245  border: 1px solid var(--peach-border);1246  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1247  color: var(--peach-t1);1248  padding: 0;1249}1250.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1251  color: var(--peach-t0);1252  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1253  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1254}1255.peach-overlay-title {1256  font-family: var(--font-display);1257  font-style: italic;1258  font-weight: 400;1259  font-size: 20px;1260  line-height: 1;1261  color: var(--peach-t0);1262  flex: 1;1263  text-align: center;1264}1265/* Balances the 28px back button so the title stays visually centred */1266.peach-overlay-spacer {1267  width: 28px;1268  flex: 0 0 28px;1269}12701271.peach-overlay-card {1272  background: var(--peach-s1);1273  border: 1px solid var(--peach-t3);1274  border-radius: 12px;1275  overflow: hidden;1276  width: 100%;1277}12781279.peach-onboarding-alt-actions {1280  display: flex;1281  flex-direction: column;1282  gap: 4px;1283  padding: 0;1284}12851286.peach-settings-copy {1287  margin: 0 0 10px;1288  font-size: 0.6875rem;1289  line-height: 1.5;1290  color: var(--peach-t2);1291}12921293.peach-settings-copy strong {1294  color: var(--peach-t0);1295}12961297.peach-settings-copy--spacious {1298  margin-bottom: 12px;1299}13001301.peach-settings-copy--result {1302  color: var(--peach-accent);1303  font-size: 0.8125rem;1304  text-align: center;1305  padding: 8px 0;1306}13071308.peach-settings-copy--danger {1309  color: var(--peach-breach);1310}13111312.peach-settings-copy--success {1313  color: var(--peach-accent);1314}13151316.peach-inline-feedback {1317  font-size: 0.6875rem;1318  margin: 10px 0 0;1319}13201321.peach-inline-feedback--ok {1322  color: var(--peach-accent);1323}13241325.peach-inline-feedback--error {1326  color: var(--peach-breach);1327}13281329.peach-inline-feedback--muted {1330  color: var(--peach-t2);1331  font-size: 0.625rem;1332  margin: 4px 0;1333}13341335.peach-inline-feedback--spaced {1336  margin-top: 12px;1337}13381339.peach-settings-actions--row {1340  display: flex;1341  gap: 6px;1342}13431344.peach-settings-actions--end {1345  margin-top: 14px;1346  justify-content: flex-end;1347}13481349.peach-settings-stack {1350  display: flex;1351  flex-direction: column;1352  gap: 6px;1353}13541355.peach-settings-stack--tight {1356  gap: 4px;1357}13581359.peach-settings-stack--spacious {1360  gap: 8px;1361}13621363.peach-settings-input {1364  width: 100%;1365  box-sizing: border-box;1366  padding: 8px 10px;1367  background: rgba(0, 0, 0, 0.22);1368  border: 1px solid transparent;1369  border-radius: 6px;1370  color: var(--peach-t0);1371  font-family: var(--font-ui);1372  font-size: 0.75rem;1373  outline: none;1374  transition: border-color 120ms ease, background 120ms ease;1375}13761377.peach-settings-input:focus {1378  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1379  background: rgba(0, 0, 0, 0.28);1380}13811382.peach-settings-input[type="password"] {1383  font-family: var(--font-mono);1384  letter-spacing: 0.04em;1385}13861387.peach-hidden-file-input {1388  display: none;1389}13901391.peach-checkbox-note {1392  display: flex;1393  align-items: flex-start;1394  gap: 8px;1395  font-size: 0.6875rem;1396  color: var(--peach-t1);1397  cursor: pointer;1398  margin: 12px 0;1399}14001401.peach-checkbox-note input {1402  margin-top: 1px;1403}14041405.peach-danger-notice {1406  background: rgba(220, 80, 60, 0.08);1407  border: 1px solid rgba(220, 80, 60, 0.2);1408  border-radius: 6px;1409  padding: 9px 11px;1410  font-size: 0.6875rem;1411  color: var(--peach-t1);1412  line-height: 1.5;1413}14141415.peach-info-notice {1416  font-size: 0.6875rem;1417  color: var(--peach-t1);1418  line-height: 1.5;1419  background: var(--surface-card);1420  border: 1px solid var(--peach-t3);1421  border-radius: 6px;1422  padding: 8px 10px;1423}14241425.peach-info-notice--warn {1426  border-color: rgba(220, 38, 38, 0.4);1427  background: rgba(220, 38, 38, 0.06);1428  color: rgba(220, 38, 38, 0.92);1429  margin-bottom: 8px;1430}14311432/* Warm helpful-context note — reads as a soft aside, not an alert. */1433.peach-info-notice--note {1434  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);1435  border-color: color-mix(in srgb, var(--peach-accent) 18%, transparent);1436  color: var(--peach-t2);1437}14381439.peach-strength-row {1440  display: flex;1441  align-items: center;1442  gap: 8px;1443  margin-bottom: 10px;1444}14451446.peach-strength-track {1447  flex: 1;1448  height: 4px;1449  background: var(--peach-s2);1450  border-radius: 2px;1451  overflow: hidden;1452}14531454.peach-strength-fill {1455  height: 100%;1456  border-radius: 2px;1457  transition: width 120ms ease, background 120ms ease;1458}14591460/* ── Type selector tabs ── */1461.peach-type-tabs {1462  display: flex;1463  gap: 0;1464  background: var(--peach-t4);1465  border-radius: 8px;1466  padding: 3px;1467}14681469.peach-type-tab {1470  flex: 1;1471  display: flex;1472  align-items: center;1473  justify-content: center;1474  gap: 6px;1475  padding: 6px 10px;1476  border-radius: 6px;1477  border: none;1478  background: transparent;1479  cursor: pointer;1480  font-family: Inter, system-ui, sans-serif;1481  font-size: 0.6875rem;1482  font-weight: 400;1483  letter-spacing: 0.04em;1484  color: var(--peach-t1);1485  transition: background 150ms ease, color 150ms ease;1486}14871488.peach-type-tab.is-active {1489  background: var(--peach-s2);1490  color: var(--peach-t0);1491  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1492}14931494.peach-type-tab:not(.is-active):hover {1495  color: var(--peach-t0);1496}14971498.peach-type-tab svg {1499  opacity: 0.7;1500  flex-shrink: 0;1501}15021503.peach-type-tab.is-active svg {1504  opacity: 1;1505}15061507/* ── List view ───────────────────────────────────────────────────────── */1508.peach-list-top {1509  padding: 0 10px;1510  min-height: 46px;1511  display: flex;1512  align-items: center;1513  gap: 6px;1514  border-bottom: 1px solid var(--peach-t3);1515  flex-shrink: 0;1516  background: var(--peach-s1);1517}15181519.peach-vault-list {1520  flex: 1;1521  overflow-y: auto;1522  scrollbar-width: none;1523}1524.peach-vault-list::-webkit-scrollbar { display: none; }15251526/* Scrollbar — vault list */1527.peach-vault-list {1528  scrollbar-width: thin;1529  scrollbar-color: var(--peach-t3) transparent;1530}15311532.peach-vault-list::-webkit-scrollbar {1533  width: 3px;1534}15351536.peach-vault-list::-webkit-scrollbar-thumb {1537  background: var(--peach-t3);1538  border-radius: 2px;1539}15401541.peach-entry-row {1542  width: 100%;1543  display: flex;1544  align-items: center;1545  gap: 10px;1546  padding: 9px 16px;1547  background: transparent;1548  border: none;1549  border-bottom: 1px solid var(--peach-t3);1550  cursor: pointer;1551  color: inherit;1552  text-align: left;1553  transition: background 80ms ease;1554}1555.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1556.peach-entry-row:last-child { border-bottom: none; }1557.peach-entry-row.is-active {1558  box-shadow: inset 2px 0 0 var(--peach-accent);1559  background: rgba(240,232,216,0.03);1560}1561.peach-entry-row:focus-visible {1562  outline: none;1563  box-shadow: 0 0 0 1px var(--peach-border-accent);1564  background: rgba(240,232,216,0.03);1565}1566.peach-entry-row-icon {1567  width: 26px; height: 26px;1568  border-radius: 7px;1569  border: 1px solid var(--peach-t3);1570  display: flex; align-items: center; justify-content: center;1571  color: var(--peach-t2);1572  flex-shrink: 0;1573}1574.peach-entry-row-icon.is-breach {1575  border-color: rgba(220,80,60,0.3);1576  color: rgba(220,80,60,0.7);1577}15781579/* Title-initials chip used as the favicon fallback for login entries whose1580 * real favicon hasn't been cached by the browser yet (freshly-imported,1581 * never-visited domains). Background colour is hashed from the title so1582 * the same entry always shows the same chip. The chip fits the same1583 * 26×26 row icon slot the favicon would take. */1584.peach-favicon-initials {1585  display: inline-flex;1586  align-items: center;1587  justify-content: center;1588  width: 100%;1589  height: 100%;1590  border-radius: 4px;1591  font-family: "IBM Plex Mono", monospace;1592  font-size: 0.5625rem;1593  font-weight: 600;1594  letter-spacing: 0.04em;1595  color: rgba(240, 232, 216, 0.92);1596  text-transform: uppercase;1597  user-select: none;1598}1599.peach-entry-row-info { flex: 1; min-width: 0; }1600.peach-entry-row-name {1601  display: block;1602  font-family: var(--font-display);1603  font-size: 1.0625rem;1604  font-style: italic;1605  font-weight: 400;1606  color: var(--peach-t0);1607  line-height: 1.2;1608  white-space: nowrap;1609  overflow: hidden;1610  text-overflow: ellipsis;1611}1612.peach-entry-row-meta {1613  display: block;1614  font-family: "IBM Plex Mono", monospace;1615  font-size: 0.5625rem;1616  color: var(--peach-t2);1617  margin-top: 1px;1618  letter-spacing: 0.05em;1619}1620.peach-entry-row-dot {1621  width: 5px; height: 5px;1622  border-radius: 50%;1623  background: rgba(220,80,60,0.7);1624  flex-shrink: 0;1625}1626.peach-new-entry-row {1627  display: flex;1628  align-items: center;1629  justify-content: center;1630  gap: 6px;1631  width: 100%;1632  padding: 11px;1633  background: transparent;1634  border: none;1635  border-top: 1px solid var(--peach-t3);1636  color: var(--peach-t2);1637  font-family: "IBM Plex Mono", monospace;1638  font-size: 0.5625rem;1639  text-transform: uppercase;1640  letter-spacing: 0.14em;1641  cursor: pointer;1642  flex-shrink: 0;1643  transition: color 120ms ease, background 120ms ease;1644}1645.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }16461647/* ── Multi-select mode ─────────────────────────────────────────────── */16481649/* Select-mode trigger button in sort bar — same shape as trash btn */1650.peach-sort-select-btn {1651  display: flex;1652  align-items: center;1653  justify-content: center;1654  padding: 3px 5px;1655  background: transparent;1656  border: none;1657  cursor: pointer;1658  color: var(--peach-t2);1659  border-radius: 4px;1660  transition: color 140ms ease, background 140ms ease;1661}1662.peach-sort-select-btn:hover {1663  color: var(--peach-t1);1664  background: var(--peach-t3);1665}16661667/* Sort bar in select mode */1668.peach-select-cancel-btn {1669  background: transparent;1670  border: none;1671  padding: 0 4px;1672  cursor: pointer;1673  font-family: "IBM Plex Mono", monospace;1674  font-size: 0.5625rem;1675  letter-spacing: 0.12em;1676  text-transform: uppercase;1677  color: var(--peach-t2);1678  transition: color 140ms ease;1679  flex-shrink: 0;1680}1681.peach-select-cancel-btn:hover { color: var(--peach-t0); }16821683.peach-select-count-label {1684  flex: 1;1685  text-align: center;1686  font-family: "IBM Plex Mono", monospace;1687  font-size: 0.5625rem;1688  letter-spacing: 0.14em;1689  text-transform: uppercase;1690  color: var(--peach-t1);1691}16921693.peach-select-all-btn {1694  background: transparent;1695  border: none;1696  padding: 0 4px;1697  cursor: pointer;1698  font-family: "IBM Plex Mono", monospace;1699  font-size: 0.5625rem;1700  letter-spacing: 0.12em;1701  text-transform: uppercase;1702  color: var(--peach-t2);1703  transition: color 140ms ease;1704  flex-shrink: 0;1705}1706.peach-select-all-btn:hover { color: var(--peach-accent); }17071708/* List in select mode */1709.peach-vault-list.is-selecting .peach-entry-row {1710  cursor: default;1711}1712.peach-vault-list.is-selecting .peach-entry-row:hover {1713  background: rgba(240,232,216,0.02);1714}1715.peach-vault-list.is-selecting .peach-entry-row.is-selected {1716  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1717}1718.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1719  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1720}17211722/* Select indicator circles in icon slot */1723.peach-entry-row-icon.is-select-icon {1724  color: var(--peach-t2);1725}1726.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1727  color: var(--peach-accent);1728}17291730/* Delete action bar at bottom (replaces new-entry row) */1731.peach-select-action-bar {1732  display: flex;1733  align-items: center;1734  justify-content: center;1735  gap: 7px;1736  width: 100%;1737  padding: 11px;1738  background: transparent;1739  border: none;1740  border-top: 1px solid var(--peach-t3);1741  color: var(--peach-t1);1742  font-family: "IBM Plex Mono", monospace;1743  font-size: 0.5625rem;1744  text-transform: uppercase;1745  letter-spacing: 0.14em;1746  cursor: pointer;1747  flex-shrink: 0;1748  transition: color 120ms ease, background 120ms ease;1749}1750.peach-select-action-bar:not(:disabled):hover {1751  color: var(--peach-t0);1752  background: rgba(220,80,60,0.06);1753}1754.peach-select-action-bar:not(:disabled):hover svg {1755  stroke: rgba(220,80,60,0.8);1756}1757.peach-select-action-bar:disabled,1758.peach-select-action-bar.is-empty {1759  color: var(--peach-t2);1760  cursor: default;1761  opacity: 0.5;1762}1763.peach-search-counter-list {1764  white-space: nowrap;1765  flex-shrink: 0;1766}1767.peach-list-empty {1768  min-height: 180px;1769  display: grid;1770  place-items: center;1771  color: var(--peach-t2);1772  font-family: "IBM Plex Mono", monospace;1773  font-size: 0.6875rem;1774}17751776/* ── Settings view ───────────────────────────────────────────────────── */1777.peach-settings-body {1778  flex: 1;1779  overflow-y: auto;1780  min-height: 0;1781  display: flex;1782  flex-direction: column;1783  padding: 2px 0 10px;1784}1785.peach-settings-group {1786  margin: 4px 10px;1787  padding: 9px 14px 11px;1788  border-radius: 12px;1789  border: 1px solid rgba(255, 255, 255, 0.07);1790  background: rgba(26, 20, 16, 0.60);1791  backdrop-filter: blur(10px) saturate(1.3);1792  -webkit-backdrop-filter: blur(10px) saturate(1.3);1793}17941795.peach-settings-group + .peach-settings-group {1796  margin-top: 6px;1797}17981799@supports not (backdrop-filter: blur(1px)) {1800  .peach-settings-group {1801    background: rgba(26, 20, 16, 0.90);1802    border-color: rgba(255, 255, 255, 0.09);1803    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1804  }1805}18061807.light .peach-settings-group,1808[data-theme="light"] .peach-settings-group {1809  background: rgba(245, 237, 226, 0.70);1810  border-color: rgba(26, 18, 8, 0.08);1811  backdrop-filter: blur(10px) saturate(1.2);1812  -webkit-backdrop-filter: blur(10px) saturate(1.2);1813}18141815@supports not (backdrop-filter: blur(1px)) {1816  .light .peach-settings-group,1817  [data-theme="light"] .peach-settings-group {1818    background: rgba(245, 237, 226, 0.97);1819    border-color: rgba(26, 18, 8, 0.10);1820  }1821}1822.peach-export-intro {1823  padding-bottom: 8px;1824}1825.peach-export-card {1826  display: grid;1827  gap: 10px;1828}1829.peach-rune-canvas {1830  border-radius: 8px;1831  background: rgba(0, 0, 0, 0.22);1832  flex: 1;1833  align-self: center;1834}1835.peach-script-input {1836  font-family: "PeachScript", monospace;1837  font-size: 0.6875rem;1838  line-height: 1.9;1839  letter-spacing: 0.06em;1840  color: var(--peach-t0);1841  background: rgba(0, 0, 0, 0.22);1842  border: none;1843  border-radius: 6px;1844  padding: 12px;1845  width: 100%;1846  min-height: 96px;1847  resize: vertical;1848  word-break: break-all;1849  scrollbar-width: none;1850  -ms-overflow-style: none;1851}18521853.peach-script-input::-webkit-scrollbar { display: none; }1854.peach-csv-warning {1855  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1856  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1857  color: var(--peach-t0);1858  border-radius: 6px;1859  padding: 10px 12px;1860  margin-bottom: 8px;1861  font-size: 0.75rem;1862  line-height: 1.45;1863}1864.peach-export-card--primary {1865  background:1866    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1867}18681869/* Export menu — distribute the three format cards across the popup. */1870.peach-export-menu {1871  display: flex;1872  flex-direction: column;1873  flex: 1;1874  min-height: 0;1875}1876.peach-export-menu .peach-settings-group {1877  flex: 1;1878  display: flex;1879  flex-direction: column;1880  justify-content: center;1881  gap: 10px;1882}18831884/* Result view — the script-string fills the remaining vertical surface. */1885.peach-export-result-group {1886  flex: 1;1887  display: flex;1888  flex-direction: column;1889  min-height: 0;1890  border-bottom: none;1891}1892.peach-export-result-group .peach-export-card {1893  flex: 1;1894  min-height: 0;1895  display: flex;1896  flex-direction: column;1897  gap: 10px;1898}1899.peach-export-result-group .peach-export-card-copy {1900  flex-shrink: 0;1901}1902.peach-export-result-group .peach-settings-label {1903  flex-shrink: 0;1904}1905.peach-export-result-group button {1906  flex-shrink: 0;1907}1908.peach-export-card-head {1909  display: flex;1910  align-items: center;1911  justify-content: space-between;1912  gap: 10px;1913}1914.peach-export-card-copy {1915  margin: 0;1916  font-size: 0.75rem;1917  line-height: 1.55;1918  color: var(--peach-t1);1919}1920.peach-export-note {1921  margin: 0;1922  font-size: 0.625rem;1923  line-height: 1.5;1924  color: var(--peach-t2);1925}1926.peach-export-strength-track {1927  height: 3px;1928  background: var(--peach-border);1929  border-radius: 2px;1930  margin: 4px 0 2px;1931  overflow: hidden;1932}1933.peach-export-strength-fill {1934  height: 100%;1935  border-radius: 2px;1936  transition: width 250ms ease, background 250ms ease;1937}1938.peach-export-strength-warn {1939  margin: 0;1940  font-size: 0.625rem;1941  line-height: 1.5;1942  color: #e84040;1943  font-family: "IBM Plex Mono", monospace;1944}1945.peach-export-strength-hint {1946  margin: 0;1947  font-size: 0.625rem;1948  line-height: 1.5;1949  color: var(--peach-t2);1950  font-family: "IBM Plex Mono", monospace;1951}1952.peach-export-pill {1953  display: inline-flex;1954  align-items: center;1955  padding: 4px 8px;1956  border-radius: 999px;1957  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1958  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1959  color: var(--peach-accent);1960  font-family: "IBM Plex Mono", monospace;1961  font-size: 0.5rem;1962  letter-spacing: 0.12em;1963  text-transform: uppercase;1964  white-space: nowrap;1965}1966.peach-export-pill--danger {1967  border-color: rgba(220,80,60,0.22);1968  background: rgba(220,80,60,0.08);1969  color: var(--peach-breach);1970}1971.peach-settings-label {1972  margin: 0 0 6px;1973  font-family: "IBM Plex Mono", monospace;1974  font-size: 0.5rem;1975  text-transform: uppercase;1976  letter-spacing: 0.18em;1977  color: var(--peach-t2);1978}1979.peach-settings-row {1980  display: flex;1981  align-items: center;1982  justify-content: space-between;1983  gap: 12px;1984  min-height: 34px;1985  padding: 6px 0;1986  font-size: 0.8125rem;1987  color: var(--peach-t1);1988}1989.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1990.peach-settings-value {1991  font-family: "IBM Plex Mono", monospace;1992  font-size: 0.625rem;1993  color: var(--peach-t2);1994}19951996.peach-settings-value--status {1997  display: flex;1998  align-items: center;1999  gap: 6px;2000}20012002.peach-settings-link {2003  font-family: "IBM Plex Mono", monospace;2004  font-size: 0.625rem;2005  color: var(--peach-accent);2006  text-decoration: none;2007  cursor: pointer;2008}2009.peach-settings-link:hover {2010  text-decoration: underline;2011}20122013.peach-settings-row--stack {2014  flex-direction: column;2015  align-items: stretch;2016  gap: 6px;2017}20182019.peach-settings-row--top {2020  align-items: flex-start;2021}20222023.peach-settings-row-main {2024  display: flex;2025  flex-direction: column;2026  gap: 4px;2027  flex: 1;2028}2029.peach-toggle {2030  width: 28px; height: 16px;2031  border-radius: 999px;2032  background: var(--peach-t3);2033  border: 1px solid var(--peach-t3);2034  display: flex; align-items: center; justify-content: flex-start; padding: 2px;2035  flex-shrink: 0;2036  transition: background 200ms ease, border-color 200ms ease;2037  cursor: pointer;2038}2039.peach-toggle.is-on {2040  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);2041  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2042}2043.peach-toggle-knob {2044  width: 10px; height: 10px;2045  border-radius: 50%;2046  background: var(--peach-t2);2047  flex-shrink: 0;2048  transform: translateX(0px);2049  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);2050}2051.peach-toggle.is-on .peach-toggle-knob {2052  background: var(--peach-accent);2053  transform: translateX(12px);2054}2055.peach-settings-footer {2056  display: flex;2057  align-items: center;2058  gap: 8px;2059  margin-top: auto;2060  padding: 14px 16px 8px;2061  font-family: "IBM Plex Mono", monospace;2062  font-size: 0.5625rem;2063  color: var(--peach-t2);2064}20652066/* ── Settings home navigation ──────────────────────────────────────────── */2067.peach-settings-nav-label {2068  margin: 0 0 2px;2069  padding: 12px 16px 4px;2070  font-family: "IBM Plex Mono", monospace;2071  font-size: 0.5rem;2072  text-transform: uppercase;2073  letter-spacing: 0.18em;2074  color: var(--peach-t2);2075}20762077.peach-settings-cat-row {2078  display: flex;2079  align-items: center;2080  gap: 10px;2081  width: 100%;2082  padding: 9px 16px;2083  background: none;2084  border: none;2085  border-bottom: 1px solid var(--peach-t3);2086  cursor: pointer;2087  text-align: left;2088  color: inherit;2089  transition: background var(--peach-dur-80) ease;2090}2091.peach-settings-cat-row:hover {2092  background: var(--peach-t3);2093}2094.peach-settings-cat-row:last-child {2095  border-bottom: none;2096}20972098.peach-settings-cat-icon {2099  width: 28px;2100  height: 28px;2101  border-radius: 7px;2102  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2103  color: var(--peach-accent);2104  display: flex;2105  align-items: center;2106  justify-content: center;2107  flex-shrink: 0;2108}2109/* Light theme: peach-on-cream is too low-contrast — both colors are warm.2110   Darken the icon stroke to ink and bump the bg tint so the icon reads2111   sharply while the cell still feels accent-tinted. */2112.light .peach-settings-cat-icon {2113  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);2114  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));2115}21162117.peach-settings-cat-content {2118  flex: 1;2119  display: flex;2120  flex-direction: column;2121  gap: 2px;2122  min-width: 0;2123}21242125.peach-settings-cat-name {2126  font-size: 0.8125rem;2127  font-weight: 450;2128  color: var(--peach-t0);2129  line-height: 1.2;2130}21312132.peach-settings-cat-desc {2133  font-size: 0.625rem;2134  color: var(--peach-t2);2135  line-height: 1.3;2136  white-space: nowrap;2137  overflow: hidden;2138  text-overflow: ellipsis;2139}21402141.peach-settings-cat-chevron {2142  color: var(--peach-t2);2143  flex-shrink: 0;2144  opacity: 0.5;2145}21462147/* ── Settings sub-view section labels ──────────────────────────────────── */2148.peach-settings-sub-label {2149  margin: 12px 0 4px;2150  font-family: "IBM Plex Mono", monospace;2151  font-size: 0.5rem;2152  text-transform: uppercase;2153  letter-spacing: 0.18em;2154  color: var(--peach-t2);2155}2156.peach-settings-sub-label:first-child {2157  margin-top: 4px;2158}21592160/* ── Settings: collapsible Advanced section ─────────────────────────────── */2161.peach-settings-advanced-toggle {2162  display: flex;2163  align-items: center;2164  justify-content: space-between;2165  width: 100%;2166  background: none;2167  border: none;2168  cursor: pointer;2169  padding: 12px 0 4px;2170  margin: 0;2171  color: inherit;2172}2173.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2174  color: var(--peach-t1);2175}2176.peach-settings-advanced-chevron {2177  font-size: 0.5625rem;2178  color: var(--peach-t3);2179  letter-spacing: 0;2180  transition: color 120ms ease;2181}21822183.peach-sync-disclosure-toggle {2184  min-height: 48px;2185  padding: 10px 0;2186  text-align: left;2187}21882189.peach-sync-disclosure-toggle > span:first-child {2190  display: flex;2191  flex-direction: column;2192  gap: 3px;2193}21942195.peach-sync-disclosure-summary {2196  color: var(--peach-t2);2197  font-size: 0.6875rem;2198  line-height: 1.35;2199}22002201.peach-sync-disclosure-content {2202  padding-bottom: 4px;2203}22042205/* ── Feedback form ──────────────────────────────────────────────────────── */2206.peach-feedback-group {2207  flex: 1;2208  display: flex;2209  flex-direction: column;2210  border-bottom: none;2211}22122213.peach-feedback-intro {2214  margin: 4px 0 14px;2215  font-size: 0.75rem;2216  line-height: 1.55;2217  color: var(--peach-t1);2218}22192220.peach-feedback-chips {2221  display: flex;2222  flex-wrap: wrap;2223  gap: 6px;2224  margin-bottom: 14px;2225}22262227.peach-feedback-chip {2228  padding: 4px 10px;2229  border-radius: 999px;2230  border: 1px solid var(--peach-t3);2231  background: none;2232  color: var(--peach-t2);2233  font-size: 0.6875rem;2234  font-family: var(--font-ui);2235  cursor: pointer;2236  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2237    background var(--peach-dur-80) ease;2238}2239.peach-feedback-chip:hover {2240  border-color: var(--peach-t2);2241  color: var(--peach-t1);2242}2243.peach-feedback-chip.is-active {2244  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2245  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2246  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2247  box-shadow:2248    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2249    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2250  font-weight: 700;2251}22522253.peach-feedback-textarea {2254  flex: 1;2255  width: 100%;2256  min-height: 120px;2257  box-sizing: border-box;2258  background: rgba(0, 0, 0, 0.22);2259  border: 1px solid transparent;2260  border-radius: 6px;2261  color: var(--peach-t0);2262  font-size: 0.75rem;2263  font-family: var(--font-ui);2264  line-height: 1.5;2265  padding: 8px 10px;2266  resize: none;2267  outline: none;2268  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2269}2270.peach-feedback-textarea:focus {2271  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2272  background: rgba(0, 0, 0, 0.28);2273}2274.peach-feedback-textarea:focus {2275  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2276}2277.peach-feedback-textarea::placeholder {2278  color: var(--peach-t2);2279}22802281.peach-feedback-meta {2282  margin: 6px 0 0;2283  font-size: 0.625rem;2284  color: var(--peach-t2);2285  font-family: "IBM Plex Mono", monospace;2286}22872288.peach-feedback-result {2289  margin: 8px 0 0;2290  font-size: 0.6875rem;2291  font-family: "IBM Plex Mono", monospace;2292}2293.peach-feedback-result--ok { color: var(--peach-sync-ok); }2294.peach-feedback-result--err { color: var(--peach-breach); }22952296.peach-feedback-submit {2297  width: 100%;2298  margin-top: 12px;2299  justify-content: center;2300}23012302.peach-feedback-anon {2303  margin: 8px 0 0;2304  font-size: 0.625rem;2305  color: var(--peach-t2);2306  text-align: center;2307}23082309.peach-feedback-thanks {2310  margin: auto 0;2311  padding: 18px 14px;2312  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2313  border-radius: 8px;2314  background:2315    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2316    rgba(0, 0, 0, 0.18);2317  color: var(--peach-t1);2318  text-align: center;2319}23202321.peach-feedback-thanks p {2322  margin: 0;2323  font-size: 0.75rem;2324  line-height: 1.5;2325}23262327.peach-feedback-thanks-title {2328  color: var(--peach-t0);2329  font-family: "Cormorant Garamond", serif;2330  font-size: 1.375rem !important;2331  line-height: 1.1 !important;2332  margin-bottom: 8px !important;2333}23342335.peach-passkey-badge {2336  margin-left: 8px;2337  font-size: 0.625rem;2338  letter-spacing: 0.06em;2339  text-transform: uppercase;2340  color: var(--peach-t2);2341  font-family: var(--font-ui);2342  vertical-align: middle;2343}23442345.peach-passkey-delete-btn {2346  color: var(--peach-breach);2347  border-color: rgba(229, 85, 85, 0.25);2348}23492350.peach-passkey-delete-confirm {2351  display: flex;2352  align-items: center;2353  gap: 8px;2354  padding: 8px 10px;2355  background: rgba(229, 85, 85, 0.06);2356  border: 1px solid rgba(229, 85, 85, 0.2);2357  border-radius: 6px;2358}23592360.peach-passkey-delete-confirm-copy {2361  flex: 1;2362  font-size: 0.6875rem;2363  color: var(--peach-t1);2364}23652366.peach-passkey-delete-btn--confirm {2367  color: var(--peach-breach);2368  border-color: rgba(229, 85, 85, 0.4);2369}23702371.peach-passkey-activity {2372  flex-direction: column;2373  align-items: flex-start;2374  gap: 4px;2375}23762377.peach-passkey-meta {2378  font-size: 0.6875rem;2379  color: var(--peach-t2);2380}23812382.peach-passkey-actions {2383  position: relative;2384  z-index: 1;2385  margin-top: 14px;2386  display: flex;2387  flex-direction: column;2388  gap: 8px;2389}23902391.peach-passkey-approval {2392  display: flex;2393  flex-direction: column;2394  align-items: center;2395  padding: 16px 20px 14px;2396  gap: 8px;2397  text-align: center;2398}23992400.peach-passkey-approval-icon {2401  width: 36px;2402  height: 36px;2403  border-radius: 10px;2404  background: var(--peach-s2);2405  border: 1px solid var(--peach-t3);2406  display: flex;2407  align-items: center;2408  justify-content: center;2409  flex-shrink: 0;2410  color: var(--peach-accent);2411}24122413.peach-passkey-approval-icon img,2414.peach-passkey-approval-icon svg {2415  width: 22px;2416  height: 22px;2417  border-radius: 5px;2418}24192420.peach-passkey-approval-rp {2421  font-family: var(--font-ui);2422  font-size: 0.75rem;2423  color: var(--peach-t2);2424  letter-spacing: 0.03em;2425}24262427.peach-passkey-approval-action {2428  font-family: var(--font-display);2429  font-style: italic;2430  font-weight: 300;2431  font-size: 18px;2432  color: var(--peach-t0);2433  line-height: 1.1;2434  margin: 1px 0;2435}24362437.peach-passkey-approval-user {2438  font-family: var(--font-mono);2439  font-size: 0.6875rem;2440  color: var(--peach-t1);2441  background: var(--peach-s2);2442  border: 1px solid var(--peach-t3);2443  border-radius: 4px;2444  padding: 3px 8px;2445}24462447.peach-passkey-approval-notice {2448  font-size: 0.625rem;2449  color: var(--peach-t2);2450  line-height: 1.5;2451  max-width: 220px;2452}24532454.peach-passkey-approval-actions {2455  display: flex;2456  gap: 8px;2457  width: 100%;2458  margin-top: 6px;2459}24602461.peach-passkey-approval-actions .peach-btn {2462  flex: 1;2463}24642465/* ── Inline generator drawer ── */2466.peach-generator-drawer {2467  display: grid;2468  grid-template-rows: 0fr;2469  transition: grid-template-rows 320ms var(--peach-curve-arrival);2470  overflow: hidden;2471}2472.peach-generator-drawer.is-open {2473  grid-template-rows: 1fr;2474}2475.peach-generator-drawer-inner {2476  min-height: 0;2477  overflow: hidden;2478}2479.peach-generator-drawer-content {2480  border-top: 1px solid var(--peach-t3);2481  padding: 8px 0 4px;2482  display: flex;2483  flex-direction: column;2484  gap: 8px;2485}24862487/* ── Compact generator (inside entry edit) ── */2488.peach-generator-drawer-content--compact {2489  border-top: 1px solid var(--peach-t3);2490  padding: 8px 0 2px;2491  gap: 7px;2492}2493.peach-pwgen-compact-display-row {2494  display: flex;2495  align-items: center;2496  gap: 6px;2497}2498.peach-pwgen-compact-output {2499  flex: 1;2500  min-width: 0;2501  font-family: "IBM Plex Mono", monospace;2502  font-size: 0.6875rem;2503  font-weight: 400;2504  letter-spacing: 0.04em;2505  color: var(--peach-t0);2506  background: rgba(240, 232, 216, 0.04);2507  border: 1px solid var(--peach-t3);2508  border-radius: 5px;2509  padding: 5px 8px;2510  line-height: 1.5;2511  outline: none;2512  transition: border-color 120ms ease;2513}25142515.peach-pwgen-compact-output:focus {2516  border-color: var(--peach-t1);2517}2518.peach-pwgen-compact-controls {2519  display: flex;2520  align-items: center;2521  gap: 6px;2522}2523.peach-pwgen-compact-slider {2524  flex: 1;2525  min-width: 0;2526  height: 2px !important;2527}2528.peach-pwgen-compact-controls .peach-pwgen-len-num {2529  flex-shrink: 0;2530  min-width: 18px;2531  text-align: right;2532}2533.peach-pwgen-compact-pills {2534  display: flex;2535  gap: 3px;2536  flex-shrink: 0;2537}2538.peach-pwgen-compact-pills .peach-pwgen-pill {2539  padding: 2px 7px;2540  font-size: 0.5rem;2541}2542.peach-pwgen-compact-use {2543  flex-shrink: 0;2544  font-size: 0.625rem !important;2545  padding: 3px 9px !important;2546  min-height: 22px !important;2547  border-radius: 5px !important;2548}25492550/* ── Password edit row (input + eye toggle side-by-side) ── */2551.peach-password-edit-row {2552  display: flex;2553  align-items: center;2554  gap: 6px;2555}2556.peach-password-edit-row .peach-inline-input {2557  flex: 1;2558  min-width: 0;2559}25602561/* ── Generate toggle link ── */2562.peach-generate-toggle-link {2563  display: inline-flex;2564  align-items: center;2565  gap: 5px;2566  background: none;2567  border: none;2568  padding: 0;2569  cursor: pointer;2570  font-family: "IBM Plex Mono", monospace;2571  font-size: 0.625rem;2572  color: var(--peach-t2);2573  letter-spacing: 0.04em;2574  transition: color 120ms ease;2575  align-self: flex-start;2576}2577.peach-generate-toggle-link:hover {2578  color: var(--peach-accent);2579}25802581/* Holds the generate + history toggle links on one row under the editor. */2582.peach-password-edit-links {2583  display: flex;2584  align-items: center;2585  gap: 14px;2586  flex-wrap: wrap;2587}25882589/* ── Past-password history list ── */2590.peach-password-history {2591  display: grid;2592  gap: 4px;2593  margin-top: 2px;2594  max-height: 168px;2595  overflow-y: auto;2596  scrollbar-width: thin;2597}2598.peach-history-row {2599  display: flex;2600  align-items: center;2601  justify-content: space-between;2602  gap: 8px;2603  padding: 5px 7px;2604  border-radius: 7px;2605  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2606  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2607}2608.peach-history-main {2609  display: flex;2610  flex-direction: column;2611  gap: 1px;2612  min-width: 0;2613  flex: 1;2614}2615.peach-history-pw {2616  font-family: "IBM Plex Mono", monospace;2617  font-size: 0.6875rem;2618  color: var(--peach-t1);2619  white-space: nowrap;2620  overflow: hidden;2621  text-overflow: ellipsis;2622}2623.peach-history-pw .peach-password-mask {2624  letter-spacing: 0.08em;2625  color: var(--peach-t2);2626}2627.peach-history-age {2628  font-family: "IBM Plex Mono", monospace;2629  font-size: 0.5625rem;2630  color: var(--peach-t3, var(--peach-t2));2631  letter-spacing: 0.03em;2632}2633.peach-history-actions {2634  display: flex;2635  align-items: center;2636  gap: 2px;2637  flex-shrink: 0;2638}2639.peach-history-use {2640  font-family: "IBM Plex Mono", monospace;2641  font-size: 0.5625rem;2642  letter-spacing: 0.05em;2643  padding: 3px 7px;2644}2645.peach-history-empty {2646  font-family: "IBM Plex Mono", monospace;2647  font-size: 0.625rem;2648  line-height: 1.45;2649  color: var(--peach-t2);2650  padding: 6px 8px;2651  border-radius: 7px;2652  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);2653  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);2654}26552656/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2657.peach-entry-body {2658  flex: 1;2659  overflow-y: auto;2660  overflow-x: hidden;2661  scrollbar-width: none;2662  -ms-overflow-style: none;2663  overscroll-behavior: contain;2664  display: grid;2665  gap: 10px;2666  align-content: start;2667  padding: 10px 20px 14px;2668  min-width: 0;2669  min-height: 0;2670}2671.peach-entry-body::-webkit-scrollbar { display: none; }26722673/* Type-toggle pills + inline note toolbar */2674.peach-new-type-row {2675  display: flex;2676  align-items: center;2677  gap: 6px;2678  margin-bottom: 2px;2679}2680.peach-new-type-btn {2681  background: transparent;2682  border: 1px solid var(--peach-t3);2683  border-radius: 12px;2684  padding: 3px 10px;2685  font-family: "IBM Plex Mono", monospace;2686  font-size: 0.5625rem;2687  letter-spacing: 0.12em;2688  text-transform: uppercase;2689  color: var(--peach-t2);2690  cursor: pointer;2691  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2692}2693.peach-new-type-btn.is-active {2694  color: var(--peach-t0);2695  border-color: var(--peach-accent);2696  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2697}2698.peach-new-type-btn:not(.is-active):hover {2699  color: var(--peach-t1);2700  border-color: var(--peach-t2);2701}27022703/* Editable title */2704.peach-new-title-wrap { margin: 0 0 2px; }2705.peach-new-title-input {2706  background: transparent;2707  border: none;2708  outline: none;2709  width: 100%;2710  color: var(--peach-t0);2711  font-family: var(--font-display);2712  font-style: italic;2713  font-weight: 400;2714  font-size: 40px;2715  line-height: 0.95;2716  caret-color: var(--peach-accent);2717}2718.peach-new-title-input::placeholder { color: var(--peach-t2); }27192720/* Editable domain field */2721.peach-domain-edit-row {2722  display: flex;2723  align-items: center;2724  gap: 6px;2725}27262727.peach-domain-edit-row .peach-domain-value--edit {2728  flex: 1;2729  width: 0;2730}27312732.peach-domain-url-btn {2733  flex-shrink: 0;2734  background: transparent;2735  border: none;2736  cursor: pointer;2737  color: var(--peach-t3);2738  padding: 2px 3px;2739  display: flex;2740  align-items: center;2741  line-height: 0;2742  border-radius: 3px;2743  transition: color 120ms ease;2744}27452746.peach-domain-url-btn:hover {2747  color: var(--peach-accent);2748}27492750.peach-domain-value--edit {2751  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2752  font-size: 0.625rem;2753  font-style: italic;2754  letter-spacing: 0.12em;2755  color: var(--peach-t1);2756  background: transparent;2757  border: none;2758  border-bottom: 1px solid var(--peach-t3);2759  outline: none;2760  width: 100%;2761  padding: 2px 0;2762  caret-color: var(--peach-accent);2763  transition: border-color 140ms ease, color 140ms ease;2764}2765.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2766.peach-domain-value--edit:focus {2767  border-bottom-color: rgba(240, 232, 216, 0.28);2768  color: var(--peach-t0);2769}27702771/* Editable field values (username, password, totp) */2772.peach-field-value--edit {2773  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2774  font-size: 0.8125rem;2775  color: var(--peach-t0);2776  background: transparent;2777  border: none;2778  border-bottom: 1px solid var(--peach-t3);2779  outline: none;2780  flex: 1;2781  min-width: 0;2782  padding: 3px 0;2783  caret-color: var(--peach-accent);2784  transition: border-color 140ms ease, color 140ms ease;2785}2786.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2787.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2788.peach-field-value--edit:focus {2789  border-bottom-color: rgba(240, 232, 216, 0.28);2790  color: var(--peach-t0);2791}27922793/* "+ add optional field" links */2794.peach-entry-add-links {2795  display: flex;2796  gap: 12px;2797  flex-wrap: wrap;2798  margin-top: -2px;2799}2800.peach-add-field-link {2801  background: transparent;2802  border: none;2803  padding: 0;2804  cursor: pointer;2805  font-family: "IBM Plex Mono", monospace;2806  font-size: 0.5625rem;2807  letter-spacing: 0.1em;2808  text-transform: uppercase;2809  color: var(--peach-t2);2810  transition: color 140ms ease;2811}2812.peach-add-field-link:hover { color: var(--peach-accent); }28132814/* ── New entry form (legacy classes) ────────────────────────────────── */2815.peach-new-body {2816  flex: 1;2817  overflow-y: auto;2818  padding: 10px 20px 14px;2819}2820.peach-new-name-input {2821  background: transparent;2822  border: none;2823  outline: none;2824  width: 100%;2825  color: var(--peach-t0);2826  font-family: var(--font-display);2827  font-style: italic;2828  font-weight: 400;2829  font-size: 40px;2830  line-height: 0.95;2831  caret-color: var(--peach-accent);2832}2833.peach-new-name-input::placeholder { color: var(--peach-t2); }2834.peach-new-field-input {2835  background: transparent;2836  border: none;2837  outline: none;2838  flex: 1;2839  min-width: 0;2840  caret-color: var(--peach-accent);2841}2842.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }28432844/* ── Canary card ── */2845.peach-canary-card {2846  border: 1px solid rgba(217, 160, 48, 0.2);2847  background: rgba(217, 160, 48, 0.03);2848  border-radius: 8px;2849  padding: 12px;2850}28512852.peach-canary-settings-header {2853  display: flex;2854  align-items: center;2855  justify-content: space-between;2856  cursor: pointer;2857  user-select: none;2858}28592860.peach-canary-card .peach-label {2861  color: rgba(217, 160, 48, 0.85);2862}28632864.peach-canary-card .peach-new-field-input {2865  border-color: rgba(217, 160, 48, 0.25);2866}28672868.peach-canary-card .peach-new-field-input:focus {2869  border-color: rgba(217, 160, 48, 0.5);2870}28712872.peach-canary-body {2873  margin-top: 12px;2874  display: flex;2875  flex-direction: column;2876  gap: 10px;2877}28782879.peach-canary-explainer {2880  display: flex;2881  gap: 10px;2882  padding: 10px 12px;2883  border-radius: 10px;2884  background: rgba(217, 160, 48, 0.06);2885  border: 1px solid rgba(217, 160, 48, 0.22);2886  margin-bottom: 4px;2887}28882889.peach-canary-explainer-icon {2890  font-size: 1rem;2891  flex-shrink: 0;2892  line-height: 1.2;2893}28942895.peach-canary-explainer-title {2896  font-family: var(--font-ui);2897  font-size: 0.6875rem;2898  font-weight: 500;2899  color: rgba(217, 160, 48, 0.9);2900  margin: 0 0 3px;2901}29022903.peach-canary-explainer-copy {2904  font-family: var(--font-ui);2905  font-size: 0.625rem;2906  color: var(--peach-t2);2907  line-height: 1.55;2908  margin: 0;2909}29102911.peach-canary-hint {2912  font-size: 0.625rem;2913  color: var(--peach-t2);2914  font-family: Inter, system-ui, sans-serif;2915  line-height: 1.5;2916  margin-top: 4px;2917}29182919.peach-canary-actions-row {2920  display: flex;2921  align-items: center;2922  gap: 8px;2923}29242925.peach-canary-test-btn {2926  border-color: rgba(217, 160, 48, 0.3);2927  color: rgba(217, 160, 48, 0.85);2928}29292930.peach-canary-test-result {2931  font-size: 0.625rem;2932  font-family: Inter, system-ui, sans-serif;2933}29342935.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2936.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }29372938.peach-canary-badge {2939  display: flex;2940  position: relative;2941  z-index: 1;2942  align-items: center;2943  gap: 5px;2944  padding: 4px 10px;2945  background: rgba(217, 160, 48, 0.12);2946  border: 1px solid rgba(217, 160, 48, 0.35);2947  border-radius: 6px;2948  margin-bottom: 6px;2949  width: fit-content;2950}29512952.peach-canary-badge-label {2953  font-size: 0.625rem;2954  letter-spacing: 0.06em;2955  color: rgba(217, 160, 48, 0.9);2956  font-family: var(--font-ui);2957  text-transform: uppercase;2958}29592960.peach-canary-badge-icon {2961  font-size: 0.6875rem;2962}29632964.peach-canary-suppress-row {2965  display: flex;2966  align-items: center;2967  gap: 8px;2968  padding: 6px 10px;2969  background: rgba(217, 160, 48, 0.08);2970  border-radius: 6px;2971  margin-bottom: 8px;2972}29732974.peach-canary-suppress-label {2975  font-size: 0.6875rem;2976  color: rgba(217, 160, 48, 0.85);2977  cursor: pointer;2978  font-family: var(--font-ui);2979  letter-spacing: 0.04em;2980}29812982.peach-regen-panel {2983  position: relative;2984  z-index: 1;2985  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2986  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2987  border-radius: 8px;2988  padding: 12px;2989  margin-bottom: 8px;2990}29912992.peach-regen-panel-header {2993  display: flex;2994  align-items: center;2995  justify-content: space-between;2996  margin-bottom: 10px;2997}29982999.peach-regen-panel-title {3000  font-size: 0.6875rem;3001  font-weight: 600;3002  letter-spacing: 0.06em;3003  text-transform: uppercase;3004  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);3005}30063007.peach-regen-output {3008  background: rgba(0, 0, 0, 0.2);3009  border-radius: 6px;3010  padding: 10px;3011  margin-bottom: 10px;3012  font-family: var(--font-mono);3013  font-size: 0.8125rem;3014  word-break: break-all;3015  color: var(--peach-t1);3016}30173018.peach-regen-actions {3019  display: flex;3020  gap: 6px;3021}30223023.peach-regen-actions--spaced {3024  margin-bottom: 8px;3025}30263027.peach-regen-action-grow {3028  flex: 1;3029}30303031.peach-regen-copy-btn {3032  padding: 0 8px;3033}30343035.peach-regen-success {3036  position: relative;3037  z-index: 1;3038  background: rgba(40, 180, 80, 0.1);3039  border: 1px solid rgba(40, 180, 80, 0.3);3040  border-radius: 8px;3041  padding: 10px 12px;3042  margin-bottom: 8px;3043  display: flex;3044  align-items: center;3045  gap: 8px;3046  font-size: 0.6875rem;3047  color: rgba(40, 180, 80, 0.9);3048}30493050/* ── Note editor overlay ── */3051.peach-note-editor {3052  position: absolute;3053  inset: 0;3054  z-index: 200;3055  display: flex;3056  flex-direction: column;3057  background:3058    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),3059    var(--peach-bg);3060  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;3061}30623063.peach-note-editor-header {3064  display: flex;3065  align-items: center;3066  gap: 10px;3067  padding: 14px 16px 10px;3068  border-bottom: 1px solid var(--peach-t3);3069  flex-shrink: 0;3070}30713072.peach-note-editor-back {3073  background: transparent;3074  border: none;3075  cursor: pointer;3076  color: var(--peach-t2);3077  padding: 4px 6px;3078  border-radius: 6px;3079  display: flex;3080  align-items: center;3081  transition: color 120ms ease, background 120ms ease;3082  flex-shrink: 0;3083}3084.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }30853086.peach-note-editor-label {3087  flex: 1;3088  font-family: var(--font-display);3089  font-style: italic;3090  font-size: 0.9375rem;3091  color: var(--peach-t1);3092  letter-spacing: 0.02em;3093}30943095.peach-note-editor-save-btn {3096  background: transparent;3097  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);3098  border-radius: 8px;3099  color: var(--peach-accent);3100  font-family: "IBM Plex Mono", monospace;3101  font-size: 0.625rem;3102  letter-spacing: 0.06em;3103  text-transform: uppercase;3104  padding: 3px 10px;3105  cursor: pointer;3106  transition: background 120ms ease, border-color 120ms ease;3107}3108.peach-note-editor-save-btn:hover:not(:disabled) {3109  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3110  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3111}3112.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }31133114.peach-note-toolbar {3115  display: flex;3116  align-items: center;3117  gap: 3px;3118  padding: 6px 14px 5px;3119  border-bottom: 1px solid var(--peach-t3);3120  flex-shrink: 0;3121}31223123.peach-note-tool-btn {3124  background: transparent;3125  border: 1px solid transparent;3126  border-radius: 5px;3127  color: var(--peach-t2);3128  font-family: "IBM Plex Mono", monospace;3129  font-size: 0.625rem;3130  letter-spacing: 0.04em;3131  padding: 2px 8px;3132  cursor: pointer;3133  line-height: 1.6;3134  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;3135}3136.peach-note-tool-btn:hover {3137  background: var(--peach-t4);3138  color: var(--peach-t0);3139  border-color: var(--peach-t3);3140}31413142.peach-note-tool-icon {3143  padding: 3px 7px;3144  display: inline-flex;3145  align-items: center;3146  justify-content: center;3147}31483149.peach-note-tool-divider {3150  width: 1px;3151  height: 14px;3152  background: var(--peach-t3);3153  margin: 0 4px;3154  flex-shrink: 0;3155}31563157.peach-note-editor-body {3158  flex: 1;3159  overflow-y: auto;3160  padding: 16px 20px 20px;3161  outline: none;3162  font-family: var(--font-display);3163  font-size: 1rem;3164  line-height: 1.75;3165  color: var(--peach-t0);3166  scrollbar-width: none;3167  word-break: break-word;3168}3169.peach-note-editor-body:empty::before {3170  content: "write your note…";3171  color: var(--peach-t3);3172  font-style: italic;3173  pointer-events: none;3174}31753176/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */3177.peach-note-editor-inline {3178  display: flex;3179  flex-direction: column;3180  flex: 1;3181  min-height: 0;3182}3183.peach-note-editor-body--inline {3184  flex: 1;3185  min-height: 0;3186  font-size: 0.9375rem;3187  padding: 10px 20px 14px;3188}31893190/* Full-width toolbar row inside the body (Add.tsx note type).3191   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */3192.peach-note-toolbar-body {3193  display: flex;3194  align-items: center;3195  gap: 3px;3196  padding: 5px 20px 4px;3197  margin: 2px -20px 0;3198  border-bottom: 1px solid var(--peach-t3);3199  flex-shrink: 0;3200}32013202/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)3203   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn3204   and .peach-note-tool-divider button-level styles. */3205.peach-note-toolbar-inline {3206  display: flex;3207  align-items: center;3208  gap: 3px;3209  margin-left: auto;3210  padding-left: 10px;3211  border-left: 1px solid var(--peach-t3);3212  min-height: 22px;3213}32143215/* Entry.tsx toolbar row (no tabs, toolbar only) */3216.peach-entry-note-toolbar-row {3217  display: flex;3218  align-items: center;3219  margin: 4px 0 6px;3220  position: relative;3221  z-index: 1;3222}3223.peach-entry-note-toolbar-row .peach-note-toolbar-inline {3224  border-left: none;3225  padding-left: 0;3226  margin-left: 0;3227}32283229/* Note body — fills available vertical space in Add.tsx and Entry.tsx */3230.peach-note-body {3231  display: flex;3232  flex-direction: column;3233  flex: 1;3234  min-height: 0;3235  margin: 4px 0 0;3236}3237.peach-entry-body--new .peach-note-body {3238  margin: 8px -20px 0;3239}32403241/* Add.tsx body is a grid by default; swap to a flex column when a note is3242   active so the note body can stretch and pin the tags row to the bottom. */3243.peach-entry-body--new:has(.peach-note-body) {3244  display: flex;3245  flex-direction: column;3246}32473248/* Rich content element styles (editor + display) */3249.peach-note-editor-body h2,3250.peach-note-content h2 {3251  font-family: var(--font-display);3252  font-size: 20px;3253  font-weight: 600;3254  font-style: italic;3255  color: var(--peach-t0);3256  margin: 6px 0 2px;3257  line-height: 1.3;3258}3259.peach-note-editor-body ul,3260.peach-note-content ul {3261  padding-left: 18px;3262  margin: 3px 0;3263  list-style: disc;3264}3265.peach-note-editor-body ol,3266.peach-note-content ol {3267  padding-left: 18px;3268  margin: 3px 0;3269  list-style: decimal;3270}3271.peach-note-editor-body li,3272.peach-note-content li { margin: 2px 0; }3273.peach-note-editor-body hr,3274.peach-note-content hr {3275  border: none;3276  border-top: 1px solid var(--peach-t3);3277  margin: 10px 0;3278}32793280/* font size elements from execCommand */3281.peach-note-editor-body font[size="1"],3282.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3283.peach-note-editor-body font[size="2"],3284.peach-note-content font[size="2"] { font-size: 0.8125rem; }3285.peach-note-editor-body font[size="3"],3286.peach-note-content font[size="3"] { font-size: 1rem; }3287.peach-note-editor-body font[size="4"],3288.peach-note-content font[size="4"] { font-size: 20px; }3289.peach-note-editor-body font[size="5"],3290.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }32913292/* bold / italic inside the editor and note display */3293.peach-note-editor-body b, .peach-note-editor-body strong,3294.peach-note-content b, .peach-note-content strong { font-weight: 700; }3295.peach-note-editor-body em, .peach-note-editor-body i,3296.peach-note-content em, .peach-note-content i { font-style: italic; }32973298/* note display — rendered HTML, no pre-wrap */3299.peach-note-content {3300  overflow: auto;3301  max-height: 340px;3302  word-break: break-word;3303}33043305/* ── Note textarea ── */3306.peach-note-textarea {3307  width: 100%;3308  min-height: 180px;3309  max-height: 280px;3310  resize: vertical;3311  background: var(--peach-t4);3312  border: 1px solid var(--peach-t3);3313  border-radius: 8px;3314  padding: 10px 12px;3315  font-family: "IBM Plex Mono", monospace;3316  font-size: 0.75rem;3317  line-height: 1.7;3318  color: var(--peach-t1);3319  outline: none;3320  transition: border-color 150ms ease;3321}33223323.peach-note-textarea:focus {3324  border-color: var(--peach-t2);3325}33263327.peach-note-char-count {3328  font-family: "IBM Plex Mono", monospace;3329  font-size: 0.5625rem;3330  color: var(--peach-t3);3331  text-align: right;3332  margin-top: 4px;3333  letter-spacing: 0.1em;3334}33353336/* ── Field input baseline ── */3337.peach-new-field-input {3338  width: 100%;3339  background: transparent;3340  border: none;3341  border-bottom: 1px solid var(--peach-t3);3342  padding: 4px 0;3343  color: var(--peach-t1);3344  font-family: "IBM Plex Mono", monospace;3345  font-size: 0.8125rem;3346  outline: none;3347  transition: border-color 150ms ease;3348}33493350.peach-new-field-input:focus {3351  border-bottom-color: var(--peach-t0);3352  color: var(--peach-t0);3353}33543355.peach-new-name-input {3356  width: 100%;3357  background: transparent;3358  border: none;3359  border-bottom: 1px solid var(--peach-t3);3360  padding: 6px 0;3361  font-family: var(--font-display);3362  font-style: italic;3363  font-size: 28px;3364  color: var(--peach-t0);3365  outline: none;3366  transition: border-color 150ms ease;3367}33683369.peach-new-name-input:focus {3370  border-bottom-color: var(--peach-t1);3371}33723373.peach-new-name-input::placeholder {3374  color: var(--peach-t2);3375  font-style: italic;3376}33773378.peach-new-field-input::placeholder {3379  color: var(--peach-t3);3380}33813382/* ── Demo entrance animation ── */3383#hd-shell {3384  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3385}3386@keyframes hd-shell-enter {3387  from { opacity: 0; transform: scale(0.96) translateY(16px); }3388  to   { opacity: 1; transform: scale(1) translateY(0); }3389}33903391/* ── Keyframes ── */3392@keyframes peach-char-enter {3393  from { opacity: 0; transform: translateY(0.22em); }3394  to   { opacity: 1; transform: translateY(0); }3395}3396@keyframes peach-content-enter {3397  from { opacity: 0.96; transform: translateY(4px); }3398  to   { opacity: 1; transform: translateY(0); }3399}3400@keyframes peach-content-exit {3401  from { opacity: 1; transform: translateY(0); }3402  to   { opacity: 0.92; transform: translateY(-3px); }3403}3404@keyframes peach-screen-enter {3405  from { opacity: 0; transform: translateY(14px); }3406  to   { opacity: 1; transform: translateY(0); }3407}3408@keyframes peach-shell-fade-in {3409  from { opacity: 0; }3410  to   { opacity: 1; }3411}3412@keyframes peach-veil-in {3413  from { opacity: 0; }3414  to   { opacity: 1; }3415}3416@keyframes peach-lock-settle {3417  0%   { transform: scale(0.9); }3418  65%  { transform: scale(1.08); }3419  100% { transform: scale(1); }3420}3421@keyframes peach-copy-confirm {3422  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3423  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); }3424}3425@keyframes peach-copy-retreat {3426  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); }3427  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3428}3429@keyframes peach-copy-flood {3430  from { opacity: 0; transform: scaleX(0.15); }3431  to   { opacity: 1; transform: scaleX(1); }3432}3433@keyframes peach-copy-icon-settle {3434  from  { transform: scale(0.84); }3435  70%   { transform: scale(1.08); }3436  to    { transform: scale(1); }3437}3438@keyframes peach-copy-sheen-retreat {3439  from { opacity: 1; transform: scaleX(1); }3440  to   { opacity: 0; transform: scaleX(0.15); }3441}3442@keyframes peach-copy-drain {3443  from { width: 100%; }3444  to   { width: 0; }3445}3446@keyframes peach-shake {3447  0%, 100% { transform: translateX(0); }3448  20%      { transform: translateX(-6px); }3449  40%      { transform: translateX(6px); }3450  60%      { transform: translateX(-4px); }3451  80%      { transform: translateX(4px); }3452}34533454@keyframes pip-pulse {3455  0% { transform: scale(1); }3456  40% { transform: scale(2.2); }3457  100% { transform: scale(1); }3458}345934603461/* ── Password generator ── */3462.peach-pwgen-body {3463  flex: 1; overflow-y: auto;3464  display: flex; flex-direction: column;3465}3466.peach-policy-badge {3467  display: flex; align-items: center;3468  padding: 6px 20px 0;3469  font-size: 0.625rem; font-family: Inter, sans-serif;3470  color: var(--peach-t2); letter-spacing: 0.04em;3471}3472.peach-pwgen-display {3473  padding: 14px 20px 12px;3474  border-bottom: 1px solid var(--peach-t3);3475  display: flex; align-items: flex-start; gap: 10px;3476}3477.peach-pwgen-display-row {3478  display: flex;3479  align-items: flex-start;3480  gap: 8px;3481  padding-bottom: 8px;3482  border-bottom: 1px solid var(--peach-t3);3483}3484.peach-pwgen-output {3485  flex: 1; min-width: 0; margin: 0;3486  font-family: "IBM Plex Mono", monospace;3487  font-size: 0.8125rem; color: var(--peach-t0);3488  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3489  white-space: normal;3490  padding: 10px 12px;3491  background: var(--peach-t4);3492  border-radius: 6px;3493  min-height: 36px;3494}3495.peach-pwgen-output-display {3496  flex: 1;3497  min-width: 0;3498  margin: 0;3499  font-family: var(--font-display);3500  font-style: italic;3501  font-weight: 300;3502  font-size: 32px;3503  line-height: 1.05;3504  color: var(--peach-t0);3505  word-break: break-all;3506  overflow-wrap: break-word;3507  white-space: normal;3508  letter-spacing: 0.02em;3509}3510.peach-pwgen-display-actions {3511  display: flex;3512  flex-direction: column;3513  gap: 4px;3514  flex-shrink: 0;3515  margin-top: 2px;3516}3517.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3518.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3519.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3520.peach-pwgen-len-num {3521  font-family: "IBM Plex Mono", monospace;3522  font-size: 0.75rem; color: var(--peach-accent);3523}3524.peach-pwgen-len-num--edit {3525  cursor: text;3526  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3527}3528.peach-pwgen-len-input {3529  font-family: "IBM Plex Mono", monospace;3530  font-size: 0.75rem;3531  color: var(--peach-accent);3532  background: transparent;3533  border: none;3534  border-bottom: 1px solid var(--peach-accent);3535  outline: none;3536  width: 32px;3537  text-align: right;3538  padding: 0;3539}3540.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3541.peach-pwgen-toggles { display: flex; flex-direction: column; }3542.peach-pwgen-charset-pills {3543  display: flex;3544  gap: 6px;3545  flex-wrap: wrap;3546}3547.peach-pwgen-pill {3548  padding: 4px 11px;3549  border-radius: 999px;3550  border: 1px solid var(--peach-t3);3551  background: transparent;3552  color: var(--peach-t2);3553  font-family: "IBM Plex Mono", monospace;3554  font-size: 0.5625rem;3555  letter-spacing: 0.08em;3556  cursor: pointer;3557  transition: all 150ms ease;3558}3559.peach-pwgen-pill.is-on {3560  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3561  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3562  color: var(--peach-accent);3563}3564.peach-pwgen-pill:not(.is-on):hover {3565  color: var(--peach-t1);3566  border-color: var(--peach-t2);3567}3568.peach-pwgen-use-btn {3569  width: 100%;3570  min-height: 34px;3571  border-radius: 8px;3572  margin-top: 2px;3573}3574.peach-generator-constraint-note {3575  font-family: 'IBM Plex Mono', monospace;3576  font-size: 10px;3577  color: var(--peach-t3);3578  letter-spacing: 0.04em;3579  margin: 0;3580  transition: opacity 200ms ease;3581}3582.peach-pwgen-toggle-row {3583  display: flex; align-items: center; justify-content: space-between;3584  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3585}3586.peach-pwgen-toggle-row:last-child { border-bottom: none; }3587.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }35883589/* Peach popup should not expose native scrollbars on internal panels. */3590.peach-settings-body,3591.peach-new-body,3592.peach-pwgen-body,3593.lock-screen,3594.peach-import-preview {3595  scrollbar-width: none;3596  -ms-overflow-style: none;3597  overscroll-behavior: contain;3598}3599.peach-settings-body::-webkit-scrollbar,3600.peach-new-body::-webkit-scrollbar,3601.peach-pwgen-body::-webkit-scrollbar,3602.lock-screen::-webkit-scrollbar,3603.peach-import-preview::-webkit-scrollbar {3604  width: 0;3605  height: 0;3606  display: none;3607}36083609.lock-screen {3610  height: 100%;3611  min-height: 100%;3612  overflow-y: auto;3613  padding: 18px 18px 16px;3614  gap: 14px;3615  grid-template-rows: auto auto auto 1fr auto;3616  align-content: stretch;3617  position: relative;3618  isolation: isolate;3619}3620.peach-screen.lock-screen--vault-stage {3621  display: flex;3622  flex-direction: column;3623  justify-content: flex-start;3624  gap: 18px;3625  padding: 20px 18px 18px;3626  overflow: hidden;3627}3628.peach-screen.lock-screen--vault-stage .peach-lock-panel {3629  margin-top: 0;3630}3631.lock-screen--onboarding {3632  display: flex;3633  flex-direction: column;3634  gap: 12px;3635  justify-content: flex-start;3636}36373638.lock-screen::before {3639  content: "";3640  position: absolute;3641  inset: 12px 18px auto auto;3642  width: 160px;3643  height: 160px;3644  border-radius: 999px;3645  background:3646    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%);3647  filter: blur(6px);3648  opacity: 0.7;3649  pointer-events: none;3650  z-index: 0;3651}36523653.peach-lock-rune-string {3654  flex: 1;3655  display: flex;3656  align-items: center;3657  justify-content: center;3658  gap: 6px;3659  font-family: PeachScript, monospace;3660  font-size: 0.8125rem;3661  letter-spacing: 0.05em;3662  pointer-events: none;3663  user-select: none;3664  position: relative;3665  z-index: 1;3666}36673668.peach-lock-rune-string span {3669  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3670  text-shadow:3671    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3672    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3673  transition: color 0.9s ease, text-shadow 0.9s ease;3674}36753676.peach-lock-rune-string span.is-glowing {3677  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3678  text-shadow:3679    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3680    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3681}36823683.lock-screen-header {3684  display: flex;3685  align-items: center;3686  justify-content: space-between;3687  position: relative;3688  z-index: 1;3689}36903691.lock-password-input.shake {3692  animation: peach-shake 300ms ease-in-out;3693}36943695.peach-hint-error {3696  color: rgba(220, 80, 60, 0.92);3697}36983699.peach-onboarding-headline {3700  margin: 0;3701  font-family: var(--font-display);3702  font-size: 35px;3703  line-height: 0.88;3704  font-style: italic;3705  font-weight: 400;3706  max-width: 252px;3707}37083709.peach-lock-copy {3710  display: grid;3711  gap: 8px;3712  position: relative;3713  z-index: 1;3714}37153716.peach-lock-copy--onboarding {3717  gap: 10px;3718}37193720.peach-lock-hero {3721  position: relative;3722  z-index: 1;3723  display: flex;3724  flex-direction: column;3725  align-items: center;3726  justify-content: center;3727  text-align: center;3728  gap: 10px;3729  min-height: 0;3730  padding: 4px 2px 0;3731  border: none;3732  border-radius: 0;3733  background: transparent;3734  box-shadow: none;3735}3736.peach-lock-hero > * {3737  position: relative;3738  z-index: 1;3739}37403741.peach-lock-eyebrow {3742  display: inline-flex;3743  align-items: center;3744  width: fit-content;3745  padding: 4px 9px;3746  border-radius: 999px;3747  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3748  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3749  color: var(--peach-t0);3750  font-family: "IBM Plex Mono", monospace;3751  font-size: 0.5rem;3752  letter-spacing: 0.18em;3753  text-transform: uppercase;3754}37553756.peach-lock-label-row {3757  display: flex;3758  align-items: center;3759  justify-content: space-between;3760  margin-bottom: 0;3761}37623763.peach-lock-reveal-btn {3764  display: inline-flex;3765  align-items: center;3766  gap: 4px;3767  background: none;3768  border: none;3769  cursor: pointer;3770  font-family: "IBM Plex Mono", monospace;3771  font-size: 0.5625rem;3772  letter-spacing: 0.06em;3773  color: var(--peach-t2);3774  padding: 2px 0;3775  transition: color 150ms ease;3776}37773778.peach-lock-reveal-btn:hover {3779  color: var(--peach-t1);3780}37813782.peach-lock-warning {3783  color: rgba(220, 80, 60, 0.85) !important;3784  line-height: 1.5;3785}37863787.peach-onboarding-cards {3788  display: grid;3789  gap: 8px;3790  position: relative;3791  z-index: 1;3792}37933794.peach-lock-panel {3795  position: relative;3796  z-index: 1;3797  display: grid;3798  gap: 9px;3799  padding: 14px 16px 15px;3800  border-radius: 18px;3801  border: 1px solid var(--peach-t3);3802  background:3803    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3804  box-shadow:3805    inset 0 1px 0 rgba(240, 232, 216, 0.04),3806    0 12px 28px rgba(0, 0, 0, 0.12);3807}38083809/* Glass surface — lock panel and settings groups */3810.peach-glass {3811  background: rgba(26, 20, 16, 0.65);3812  border: 1px solid rgba(255, 255, 255, 0.08);3813  border-radius: 12px;3814  backdrop-filter: blur(12px) saturate(1.4);3815  -webkit-backdrop-filter: blur(12px) saturate(1.4);3816}38173818@supports not (backdrop-filter: blur(1px)) {3819  .peach-glass {3820    background: rgba(26, 20, 16, 0.92);3821    border: 1px solid rgba(255, 255, 255, 0.10);3822    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3823  }3824}38253826.light .peach-glass,3827[data-theme="light"] .peach-glass {3828  background: rgba(240, 233, 223, 0.72);3829  border: 1px solid rgba(26, 18, 8, 0.08);3830  backdrop-filter: blur(12px) saturate(1.2);3831  -webkit-backdrop-filter: blur(12px) saturate(1.2);3832}38333834@supports not (backdrop-filter: blur(1px)) {3835  .light .peach-glass,3836  [data-theme="light"] .peach-glass {3837    background: rgba(240, 233, 223, 0.97);3838    border: 1px solid rgba(26, 18, 8, 0.10);3839  }3840}38413842/* Lock panel keeps its own border-radius over the generic glass token */3843.peach-lock-panel.peach-glass {3844  border-radius: 18px;3845  background: rgba(26, 20, 16, 0.65);3846  border: 1px solid rgba(255, 255, 255, 0.08);3847  box-shadow:3848    inset 0 1px 0 rgba(255, 255, 255, 0.05),3849    0 12px 28px rgba(0, 0, 0, 0.3);3850}38513852.light .peach-lock-panel.peach-glass,3853[data-theme="light"] .peach-lock-panel.peach-glass {3854  background: rgba(240, 233, 223, 0.82);3855  border: 1px solid rgba(26, 18, 8, 0.08);3856  box-shadow:3857    inset 0 1px 0 rgba(255, 255, 255, 0.4),3858    0 8px 24px rgba(80, 56, 32, 0.15);3859}38603861@supports not (backdrop-filter: blur(1px)) {3862  .peach-lock-panel.peach-glass {3863    background: rgba(26, 20, 16, 0.92);3864    box-shadow:3865      inset 0 1px 0 rgba(255, 255, 255, 0.05),3866      0 12px 28px rgba(0, 0, 0, 0.4);3867  }3868  .light .peach-lock-panel.peach-glass,3869  [data-theme="light"] .peach-lock-panel.peach-glass {3870    background: rgba(240, 233, 223, 0.98);3871  }3872}38733874.peach-lock-panel--secondary {3875  gap: 12px;3876}38773878.peach-lock-panel-header {3879  display: flex;3880  align-items: baseline;3881  justify-content: space-between;3882  gap: 12px;3883}38843885.peach-lock-option-grid {3886  display: grid;3887  gap: 10px;3888}38893890.peach-lock-option {3891  width: 100%;3892  display: grid;3893  gap: 6px;3894  padding: 14px 15px;3895  border-radius: 16px;3896  border: 1px solid rgba(240, 232, 216, 0.08);3897  background: rgba(240, 232, 216, 0.02);3898  color: var(--peach-t0);3899  text-align: left;3900  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3901}39023903.peach-lock-option:hover {3904  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3905  background: rgba(240, 232, 216, 0.04);3906  transform: translateY(-1px);3907}39083909.peach-lock-option-title {3910  font-size: 0.75rem;3911  color: var(--peach-t0);3912}39133914.peach-lock-option-copy {3915  font-size: 0.6875rem;3916  line-height: 1.55;3917  color: var(--peach-t1);3918}39193920.peach-onboarding-stack {3921  margin-top: 2px;3922}3923.peach-lock-panel-footer {3924  display: grid;3925  gap: 6px;3926  margin-top: 2px;3927  padding-top: 10px;3928  border-top: 1px solid rgba(240, 232, 216, 0.06);3929}39303931/* ── Restore tab view ─────────────────────────────────────────────────────3932   Tab-based restore screen replacing the old three-card picker. */39333934.peach-restore-tabview {3935  overflow: hidden;3936}39373938.peach-restore-tabcard {3939  flex: 1;3940  display: flex;3941  flex-direction: column;3942  gap: 0;3943  padding: 0;3944  overflow: hidden;3945  cursor: default;3946  user-select: none;3947  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3948}39493950/* ── Tab selector ─────────────────────────────────────────────────────── */39513952.peach-restore-tabs {3953  display: flex;3954  justify-content: space-around;3955  padding: 14px 10px 10px;3956  border-bottom: 1px solid var(--peach-t3);3957  gap: 2px;3958  overflow: hidden;3959  scrollbar-width: none;3960}3961.peach-restore-tabs::-webkit-scrollbar { display: none; }39623963.peach-restore-tab {3964  background: none;3965  border: none;3966  cursor: pointer;3967  padding: 3px 2px;3968  font-family: 'Cormorant Garamond', Georgia, serif;3969  font-style: italic;3970  font-size: 11px;3971  color: var(--peach-t2);3972  transition: color 150ms ease, text-shadow 150ms ease;3973  flex: 1;3974  min-width: 0;3975  text-align: center;3976  white-space: nowrap;3977  overflow: hidden;3978  text-overflow: ellipsis;3979}3980.peach-restore-tab:hover {3981  color: var(--peach-accent);3982  text-shadow:3983    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3984    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3985}3986.peach-restore-tab.is-active {3987  color: var(--peach-accent);3988  text-shadow:3989    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3990    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3991}39923993/* ── Content area ─────────────────────────────────────────────────────── */39943995.peach-restore-content {3996  padding: 16px 16px 14px;3997  display: flex;3998  flex-direction: column;3999  gap: 8px;4000  overflow: hidden;4001  scrollbar-width: none;4002  flex: 1;4003}4004.peach-restore-content::-webkit-scrollbar { display: none; }4005.peach-restore-content > * {4006  overflow: hidden;4007  scrollbar-width: none;4008}4009.peach-restore-content > *::-webkit-scrollbar { display: none; }40104011/* ── Shared tab inner layout ──────────────────────────────────────────── */40124013.peach-rt-symbols,4014.peach-rt-csv,4015.peach-rt-phone,4016.peach-restore-codex {4017  display: flex;4018  flex-direction: column;4019  gap: 8px;4020  overflow: hidden;4021}40224023.peach-restore-codex {4024  min-height: 0;4025  justify-content: center;4026}40274028.peach-restore-codex-title {4029  margin: 0;4030  font-family: var(--font-display);4031  font-size: 1rem;4032  font-style: italic;4033  color: var(--peach-t0);4034}40354036.peach-restore-codex-copy {4037  margin: 0;4038  font-size: 0.75rem;4039  line-height: 1.5;4040  color: var(--peach-t1);4041}40424043.peach-restore-codex-button {4044  width: 100%;4045  justify-content: center;4046}40474048.peach-rt-submit {4049  width: 100%;4050}40514052.peach-rt-error {4053  margin: 0;4054  font-size: 0.6875rem;4055  color: var(--peach-breach);4056  line-height: 1.4;4057}40584059/* ── PeachScript tab ──────────────────────────────────────────────────── */40604061.peach-restore-symbols-textarea {4062  font-family: 'PeachScript', monospace;4063  font-size: 13px;4064  line-height: 1.9;4065  letter-spacing: 0.1em;4066  word-break: break-all;4067  resize: none;4068  width: 100%;4069  min-height: 56px;4070  max-height: 72px;4071  overflow: hidden;4072  scrollbar-width: none;4073  -ms-overflow-style: none;4074  box-sizing: border-box;4075  padding: 6px 8px;4076  border-radius: 8px;4077  border: 1px solid var(--peach-t3);4078  background: rgba(240, 232, 216, 0.03);4079  color: var(--peach-t0);4080}4081.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }4082.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40834084.peach-restore-symbols-pass {4085  width: 100%;4086  box-sizing: border-box;4087  padding: 7px 10px;4088  border-radius: 8px;4089  border: 1px solid var(--peach-t3);4090  background: rgba(240, 232, 216, 0.03);4091  color: var(--peach-t0);4092  font-size: 0.8125rem;4093}4094.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }4095.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40964097.peach-rt-divider {4098  text-align: center;4099  font-size: 0.6875rem;4100  color: var(--peach-t2);4101  font-style: italic;4102}41034104.peach-rt-file-label {4105  width: 100%;4106  justify-content: center;4107}41084109.peach-rt-anim-canvas {4110  width: 100%;4111  height: 180px;4112  border-radius: 10px;4113  overflow: hidden;4114  display: block;4115}41164117/* ── CSV tab ──────────────────────────────────────────────────────────── */41184119.peach-rt-csv-sources {4120  margin: 0;4121  font-size: 0.6875rem;4122  color: var(--peach-t2);4123  line-height: 1.5;4124  text-align: center;4125}41264127.peach-rt-csv-warning {4128  margin: 0;4129  font-family: "IBM Plex Mono", monospace;4130  font-size: 0.5625rem;4131  letter-spacing: 0.12em;4132  color: var(--peach-breach);4133  text-align: center;4134}41354136/* ── From Phone tab ───────────────────────────────────────────────────── */41374138.peach-rt-phone-code {4139  margin: 0;4140  text-align: center;4141  font-family: "IBM Plex Mono", monospace;4142  font-size: 22px;4143  letter-spacing: 0.18em;4144  color: var(--peach-t0);4145}41464147.peach-rt-phone-qr {4148  display: block;4149  width: 96px;4150  height: 96px;4151  margin: 0 auto;4152  border-radius: 6px;4153  image-rendering: pixelated;4154  overflow: hidden;4155}41564157.peach-rt-phone-hint {4158  margin: 0;4159  font-size: 0.6875rem;4160  color: var(--peach-t2);4161  line-height: 1.55;4162  text-align: center;4163}41644165/* ── Intro popup ──────────────────────────────────────────────────────── */41664167.peach-restore-intro-overlay {4168  position: absolute;4169  inset: 0;4170  z-index: 100;4171  display: flex;4172  align-items: center;4173  justify-content: center;4174  padding: 20px;4175  background: rgba(12, 10, 6, 0.7);4176  backdrop-filter: blur(4px);4177  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4178}41794180.peach-restore-intro-card {4181  width: 100%;4182  display: flex;4183  flex-direction: column;4184  gap: 12px;4185  padding: 22px 20px 20px;4186  border-radius: 16px;4187  border: 1px solid var(--peach-t3);4188  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));4189  backdrop-filter: blur(4px);4190  -webkit-backdrop-filter: blur(4px);4191  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);4192}41934194.peach-restore-intro-headline {4195  margin: 0;4196  font-family: var(--font-display);4197  font-style: italic;4198  font-size: 20px;4199  font-weight: 400;4200  color: var(--peach-t0);4201}42024203.peach-restore-intro-body {4204  display: flex;4205  flex-direction: column;4206  gap: 8px;4207}4208.peach-restore-intro-body p {4209  margin: 0;4210  font-size: 0.75rem;4211  color: var(--peach-t1);4212  line-height: 1.5;4213}42144215.peach-restore-intro-btn {4216  width: 100%;4217  margin-top: 4px;4218}42194220/* Snapshot restore panel */4221.peach-snapshot-panel {4222  gap: 10px;4223  overflow-y: auto;4224  max-height: 340px;4225}4226.peach-snapshot-list {4227  display: flex;4228  flex-direction: column;4229  gap: 4px;4230}4231.peach-snapshot-row {4232  display: flex;4233  align-items: center;4234  justify-content: space-between;4235  width: 100%;4236  padding: 8px 10px;4237  border-radius: 8px;4238  border: 1px solid rgba(240, 232, 216, 0.07);4239  background: transparent;4240  cursor: pointer;4241  transition: border-color 120ms, background 120ms;4242  text-align: left;4243  gap: 8px;4244}4245.peach-snapshot-row:hover {4246  border-color: rgba(240, 232, 216, 0.14);4247  background: rgba(240, 232, 216, 0.03);4248}4249.peach-snapshot-row.is-selected {4250  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4251  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4252}4253.peach-snapshot-time {4254  font-size: 11.5px;4255  color: var(--peach-t0);4256  flex: 1;4257}4258.peach-snapshot-count {4259  font-family: "IBM Plex Mono", monospace;4260  font-size: 0.625rem;4261  color: var(--peach-t2);4262  flex-shrink: 0;4263}4264.peach-snapshot-confirm {4265  display: flex;4266  flex-direction: column;4267  gap: 8px;4268  padding-top: 10px;4269  border-top: 1px solid rgba(240, 232, 216, 0.06);4270}4271.peach-snapshot-warning {4272  display: flex;4273  align-items: flex-start;4274  gap: 6px;4275  font-size: 10.5px;4276  color: rgba(220, 80, 60, 0.85);4277  line-height: 1.55;4278}4279.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4280.peach-snapshot-confirm-row {4281  display: flex;4282  gap: 6px;4283  align-items: center;4284}4285.peach-snapshot-restore-btn {4286  width: 100%;4287}4288.peach-lock-hero--unlock .peach-lock-hero-art {4289  display: none;4290}42914292.peach-card {4293  border: 1px solid var(--peach-t3);4294  border-radius: 18px;4295  background:4296    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4297  box-shadow:4298    inset 0 0 0 1px var(--peach-border-accent),4299    inset 0 1px 0 rgba(240, 232, 216, 0.04),4300    0 12px 32px rgba(0, 0, 0, 0.14);4301  overflow: hidden;4302}43034304.peach-card-active {4305  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4306  box-shadow:4307    inset 0 1px 0 rgba(240, 232, 216, 0.05),4308    0 16px 38px rgba(0, 0, 0, 0.18),4309    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4310}43114312.peach-card-disabled {4313  opacity: 0.72;4314}43154316.peach-card-header {4317  width: 100%;4318  padding: 13px 16px 11px;4319  background: transparent;4320  color: var(--peach-t0);4321  display: flex;4322  justify-content: space-between;4323  align-items: center;4324  text-align: left;4325  font-size: 0.75rem;4326}43274328.peach-card-body {4329  padding: 0 16px 16px;4330  display: grid;4331  gap: 9px;4332}43334334.peach-card-tag {4335  color: var(--peach-t2);4336  font-family: "IBM Plex Mono", monospace;4337  font-size: 0.5625rem;4338  letter-spacing: 0.12em;4339  text-transform: uppercase;4340}43414342.peach-empty-copy {4343  display: grid;4344  gap: 6px;4345  color: var(--peach-t1);4346  font-size: 0.8125rem;4347}43484349.peach-lock-submit {4350  width: 100%;4351  box-shadow:4352    0 1px 0 rgba(255,255,255,0.10) inset,4353    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4354    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4355    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4356}43574358.peach-lock-secondary {4359  width: 100%;4360  border-color: var(--peach-t3);4361  background: rgba(240, 232, 216, 0.02);4362}43634364.peach-lock-secondary:hover {4365  background: rgba(240, 232, 216, 0.04);4366}43674368.peach-lock-note {4369  max-width: none;4370  line-height: 1.55;4371  margin: 0;4372}43734374.peach-overlay-action {4375  font-size: 0.625rem;4376  padding: 4px 8px;4377  letter-spacing: 0.06em;4378  min-width: 44px;4379  text-align: center;4380}43814382.peach-inline-action {4383  flex-shrink: 0;4384  font-size: 0.5625rem;4385  letter-spacing: 0.1em;4386  text-transform: uppercase;4387  padding: 4px 7px;4388}4389.peach-password-toggle-btn {4390  display: inline-flex;4391  align-items: center;4392  justify-content: center;4393  min-width: 30px;4394  min-height: 26px;4395  padding: 0 7px;4396  border: 1px solid var(--peach-t3);4397  border-radius: 999px;4398  background: rgba(240, 232, 216, 0.04);4399  color: var(--peach-t2);4400  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4401}4402.peach-password-toggle-btn:hover {4403  border-color: var(--peach-t2);4404  color: var(--peach-t0);4405  background: rgba(240, 232, 216, 0.06);4406}44074408.peach-new-textarea {4409  width: 100%;4410  min-height: 88px;4411  resize: vertical;4412  border: 0;4413  outline: none;4414  background: transparent;4415  color: var(--peach-t1);4416  font-family: "IBM Plex Mono", monospace;4417  font-size: 0.75rem;4418  line-height: 1.65;4419  caret-color: var(--peach-accent);4420}44214422.peach-new-textarea::placeholder {4423  color: var(--peach-t2);4424  opacity: 0.7;4425}44264427.peach-settings-actions {4428  display: grid;4429  gap: 8px;4430}44314432.peach-sync-section-label {4433  font-size: 0.6875rem;4434  color: var(--peach-t2);4435  text-transform: uppercase;4436  letter-spacing: 0.05em;4437}44384439.peach-sync-network-note {4440  margin: 0 0 6px;4441  font-size: 0.75rem;4442  color: var(--peach-t2);4443  line-height: 1.4;4444}44454446.peach-settings-row--tappable {4447  background: none;4448  border: none;4449  width: 100%;4450  text-align: left;4451  cursor: pointer;4452  color: var(--peach-t1);4453  font-size: 0.8125rem;4454}4455.peach-settings-row--tappable:hover {4456  color: var(--peach-t0);4457}44584459.peach-sync-pro-hint {4460  display: flex;4461  flex-direction: column;4462  align-items: flex-start;4463  gap: 8px;4464  padding: 12px 0 4px;4465}44664467.peach-sync-device-row {4468  display: flex;4469  justify-content: space-between;4470  align-items: center;4471  padding: 6px 0;4472  border-bottom: 1px solid var(--peach-t3);4473}44744475.peach-sync-device-info {4476  display: flex;4477  flex-direction: column;4478  gap: 2px;4479}44804481.peach-sync-device-name {4482  font-size: 0.8125rem;4483  color: var(--peach-t0);4484}44854486.peach-sync-device-meta {4487  font-size: 0.6875rem;4488  color: var(--peach-t2);4489}44904491.peach-sync-status-dot {4492  display: inline-block;4493  width: 8px;4494  height: 8px;4495  border-radius: 50%;4496  vertical-align: middle;4497}44984499.peach-sync-remove-btn {4500  color: var(--peach-breach);4501}45024503.peach-sync-advanced-row {4504  display: flex;4505  justify-content: space-between;4506  align-items: center;4507  padding: 6px 0;4508  gap: 12px;4509}45104511.peach-sync-advanced-info {4512  display: flex;4513  flex-direction: column;4514  gap: 2px;4515  flex: 1;4516}45174518.peach-sync-advanced-name {4519  font-size: 0.8125rem;4520  color: var(--peach-t0);4521}45224523.peach-sync-reset-confirm {4524  display: flex;4525  flex-direction: column;4526  gap: 8px;4527  padding: 10px;4528  border: 1px solid var(--peach-breach);4529  border-radius: 10px;4530  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4531}45324533.peach-sync-reset-confirm-headline {4534  font-size: 0.8125rem;4535  font-weight: 600;4536  color: var(--peach-t0);4537  margin: 0;4538}45394540.peach-sync-reset-confirm-body {4541  font-size: 0.75rem;4542  color: var(--peach-t1);4543  margin: 0;4544  line-height: 1.4;4545}45464547.peach-btn--danger {4548  background: var(--peach-breach);4549  color: #fff;4550  border-color: var(--peach-breach);4551}4552.peach-btn--danger:hover:not(:disabled) {4553  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4554}4555.peach-btn--danger:disabled {4556  opacity: 0.55;4557  cursor: not-allowed;4558}45594560.peach-sync-hero-icon {4561  color: var(--peach-t1);4562  opacity: 0.85;4563}45644565.peach-import-preview {4566  margin-bottom: 12px;4567  max-height: 152px;4568  overflow-y: auto;4569  border: 1px solid var(--peach-t3);4570  border-radius: 10px;4571  padding: 8px 10px;4572  display: grid;4573  gap: 8px;4574  background: rgba(240, 232, 216, 0.02);4575}45764577.peach-import-preview-row {4578  display: flex;4579  justify-content: space-between;4580  gap: 10px;4581  font-size: 0.6875rem;4582  color: var(--peach-t1);4583}45844585.peach-import-preview-title {4586  color: var(--peach-t0);4587  flex: 1;4588  min-width: 0;4589  overflow: hidden;4590  text-overflow: ellipsis;4591  white-space: nowrap;4592}45934594.peach-import-preview-meta {4595  color: var(--peach-t2);4596  flex-shrink: 0;4597  max-width: 42%;4598  overflow: hidden;4599  text-overflow: ellipsis;4600  white-space: nowrap;4601}46024603.peach-import-preview-more {4604  color: var(--peach-t2);4605  font-size: 0.625rem;4606}46074608.peach-restore-copy {4609  margin: 0;4610  color: var(--peach-t1);4611  font-size: 0.6875rem;4612  line-height: 1.6;4613}46144615.peach-restore-warning {4616  padding: 10px 12px;4617  border-radius: 12px;4618  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4619  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4620  color: var(--peach-t0);4621  font-size: 0.6875rem;4622  line-height: 1.55;4623}46244625.peach-provider-chips {4626  display: flex;4627  flex-wrap: wrap;4628  gap: 6px;4629}46304631.peach-provider-chip {4632  display: inline-flex;4633  align-items: center;4634  padding: 5px 8px;4635  border-radius: 999px;4636  border: 1px solid var(--peach-t3);4637  background: rgba(240, 232, 216, 0.02);4638  color: var(--peach-t1);4639  font-family: "IBM Plex Mono", monospace;4640  font-size: 0.5rem;4641  letter-spacing: 0.08em;4642  text-transform: uppercase;4643}46444645.peach-restore-file,4646.peach-restore-input {4647  width: 100%;4648  border-radius: 10px;4649  border: 1px solid var(--peach-t3);4650  background: var(--peach-s2);4651  color: var(--peach-t0);4652  font-size: 0.75rem;4653}46544655.peach-restore-file {4656  padding: 9px 10px;4657}46584659.peach-restore-file::file-selector-button {4660  margin-right: 10px;4661  padding: 7px 10px;4662  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4663  border-radius: 999px;4664  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4665  color: var(--peach-t0);4666  font-size: 0.625rem;4667  letter-spacing: 0.08em;4668  text-transform: uppercase;4669  cursor: pointer;4670}46714672.peach-restore-input {4673  padding: 10px 12px;4674}46754676.peach-auth-grid {4677  display: grid;4678  gap: 10px;4679}46804681.peach-import-summary {4682  color: var(--peach-t1);4683  font-size: 0.75rem;4684  line-height: 1.6;4685  margin-bottom: 12px;4686}46874688.peach-restore-error {4689  color: rgba(220, 80, 60, 0.95);4690  font-size: 0.75rem;4691  line-height: 1.55;4692}46934694.peach-passkey-card {4695  max-width: 400px;4696  margin: auto 16px;4697  align-self: center;4698  width: calc(100% - 32px);4699}47004701/* Center the approval card vertically inside the overlay-view (which sets4702 * flex-direction: column without justify-content). Without this, the card4703 * sits at the top with a tall empty band below — looks unfinished on the4704 * 320px popup. */4705.peach-overlay-view:has(.peach-passkey-card) {4706  justify-content: center;4707}47084709.peach-pro-badge {4710  padding: 2px 6px;4711  border-radius: 999px;4712  font-family: var(--font-ui);4713  font-size: 0.625rem;4714  letter-spacing: 0.08em;4715  text-transform: uppercase;4716  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4717  color: var(--peach-accent);4718}47194720/* ── Shortcuts rebind table ─────────────────────────────────── */4721.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4722.peach-shortcut-row {4723  display: flex;4724  align-items: center;4725  gap: 10px;4726  padding: 6px 0;4727}4728.peach-shortcut-row-label {4729  flex: 1;4730  font-size: 0.75rem;4731  color: var(--peach-t0);4732}4733.peach-shortcut-chip {4734  min-width: 64px;4735  padding: 4px 10px;4736  border-radius: 6px;4737  border: 1px solid var(--peach-t3);4738  background: var(--peach-input-bg, var(--surface-card));4739  color: var(--peach-t0);4740  font-family: var(--font-mono);4741  font-size: 0.6875rem;4742  letter-spacing: 0.04em;4743  cursor: pointer;4744  text-align: center;4745  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4746}4747.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4748.peach-shortcut-chip.is-custom {4749  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4750  color: var(--peach-accent);4751}4752.peach-shortcut-chip.is-capturing {4753  border-color: var(--peach-accent);4754  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4755  color: var(--peach-accent);4756  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4757}4758@keyframes peach-shortcut-capture-pulse {4759  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4760  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4761}4762.peach-shortcut-reset {4763  background: transparent;4764  border: none;4765  cursor: pointer;4766  color: var(--peach-t2);4767  padding: 4px 6px;4768  border-radius: 5px;4769  font-size: 0.875rem;4770  line-height: 1;4771  transition: color 120ms ease, background 120ms ease;4772}4773.peach-shortcut-reset:hover {4774  color: var(--peach-t0);4775  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4776}4777.peach-shortcuts-conflict {4778  margin: 4px 0 0;4779  padding: 8px 10px;4780  border-radius: 7px;4781  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4782  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4783  font-family: var(--font-mono);4784  font-size: 0.6875rem;4785  color: var(--peach-t0);4786}47874788/* ── Help dialog overlay (? to open) ────────────────────────── */4789.peach-shortcuts-help-backdrop {4790  position: fixed;4791  inset: 0;4792  background: rgba(0, 0, 0, 0.55);4793  backdrop-filter: blur(2px);4794  display: flex;4795  align-items: center;4796  justify-content: center;4797  z-index: 1000;4798  animation: peach-help-fade-in 140ms ease forwards;4799}4800@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4801.peach-shortcuts-help-card {4802  width: min(320px, 92vw);4803  max-height: 80vh;4804  overflow-y: auto;4805  border-radius: 14px;4806  border: 1px solid var(--peach-t3);4807  background: var(--peach-bg);4808  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4809  padding: 16px 18px 18px;4810  display: flex;4811  flex-direction: column;4812  gap: 12px;4813}4814.peach-shortcuts-help-head {4815  display: flex; align-items: center; justify-content: space-between;4816}4817.peach-shortcuts-help-head h3 {4818  margin: 0;4819  font-family: var(--font-display);4820  font-style: italic;4821  font-weight: 400;4822  font-size: 22px;4823  color: var(--peach-t0);4824}4825.peach-shortcuts-help-close {4826  background: transparent;4827  border: none;4828  color: var(--peach-t2);4829  cursor: pointer;4830  font-size: 0.875rem;4831  padding: 4px 8px;4832  border-radius: 5px;4833}4834.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4835.peach-shortcuts-help-body ul {4836  list-style: none; padding: 0; margin: 4px 0 12px;4837  display: grid; gap: 8px;4838}4839.peach-shortcuts-help-body li {4840  display: flex; align-items: center; justify-content: space-between; gap: 12px;4841  font-size: 0.75rem; color: var(--peach-t0);4842}4843.peach-shortcuts-help-body kbd {4844  font-family: var(--font-mono);4845  font-size: 0.6875rem;4846  padding: 3px 8px;4847  border-radius: 6px;4848  background: var(--surface-card);4849  border: 1px solid var(--peach-t3);4850  color: var(--peach-accent);4851  letter-spacing: 0.04em;4852}48534854/* ── Pro promo on Account screen ────────────────────────────── */4855.peach-pro-promo {4856  position: relative;4857  border-radius: 14px;4858  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4859  background:4860    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4861    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4862    var(--surface-card);4863  overflow: hidden;4864  margin-bottom: 14px;4865}4866.peach-pro-promo-glow {4867  position: absolute;4868  inset: -40% -20% auto auto;4869  width: 220px; height: 220px;4870  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4871  pointer-events: none;4872  filter: blur(8px);4873}4874.peach-pro-promo-inner {4875  position: relative;4876  padding: 18px 18px 16px;4877}4878.peach-pro-promo-title {4879  font-family: var(--font-display);4880  font-style: italic;4881  font-weight: 400;4882  font-size: 28px;4883  line-height: 1;4884  letter-spacing: -0.005em;4885  color: var(--peach-t0);4886  margin: 0 0 4px;4887}4888.peach-pro-promo-tagline {4889  font-family: var(--font-mono);4890  font-size: 0.625rem;4891  letter-spacing: 0.06em;4892  color: var(--peach-t2);4893  margin: 0 0 14px;4894}4895.peach-pro-promo-list {4896  list-style: none;4897  margin: 0 0 16px;4898  padding: 0;4899  display: grid;4900  gap: 9px;4901}4902.peach-pro-promo-list li {4903  display: flex;4904  align-items: flex-start;4905  gap: 9px;4906  font-size: 0.75rem;4907  color: var(--peach-t1);4908  line-height: 1.4;4909}4910.peach-pro-promo-list svg {4911  width: 14px;4912  height: 14px;4913  flex-shrink: 0;4914  color: var(--peach-accent);4915  margin-top: 2px;4916}4917.peach-pro-promo-list span {4918  color: var(--peach-t0);4919}4920.peach-pro-promo-cta {4921  width: 100%;4922  background: var(--peach-accent);4923  color: #fff;4924  border: none;4925  padding: 9px 12px;4926  border-radius: 9px;4927  font-size: 0.75rem;4928  font-weight: 500;4929  font-family: var(--font-ui);4930  letter-spacing: 0.02em;4931  text-decoration: none;4932  display: inline-flex;4933  align-items: center;4934  justify-content: center;4935  cursor: pointer;4936  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4937  box-shadow: 0 2px 16px var(--peach-glow);4938}4939.peach-pro-promo-cta:hover {4940  filter: brightness(1.07);4941  box-shadow: 0 4px 24px var(--peach-glow);4942  transform: translateY(-1px);4943}4944.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }49454946.peach-pro-or-divider {4947  display: flex;4948  align-items: center;4949  gap: 10px;4950  margin: 4px 0 12px;4951  font-family: var(--font-mono);4952  font-size: 0.625rem;4953  letter-spacing: 0.06em;4954  color: var(--peach-t2);4955  text-transform: uppercase;4956}4957.peach-pro-or-divider::before,4958.peach-pro-or-divider::after {4959  content: "";4960  flex: 1;4961  height: 1px;4962  background: var(--peach-t3);4963}49644965.peach-loading {4966  position: absolute;4967  inset: 0;4968  display: flex;4969  align-items: center;4970  justify-content: center;4971  background: var(--bg);4972  animation: peach-loading-pulse 1.2s ease-in-out infinite;4973}49744975@keyframes peach-loading-pulse {4976  0%, 100% { opacity: 0.6; }4977  50% { opacity: 1; }4978}49794980/* ── Health Dashboard ─────────────────────────────────────────────────── */4981.peach-health-body {4982  flex: 1;4983  overflow-y: auto;4984  display: flex;4985  flex-direction: column;4986  /* Hide the platform scrollbar — every other scrollable surface in the4987   * popup hides it; the Health view was the one outlier and it ruined the4988   * polish. Behavior unchanged, just no rail rendered. */4989  scrollbar-width: none;4990  -ms-overflow-style: none;4991}4992.peach-health-body::-webkit-scrollbar { display: none; }49934994/* Loading screen for the Vault Health view. The advanced report computation4995 * can run for a few seconds on a large vault — without a clear loading4996 * screen the surface looked broken (the entry view bleeds through the4997 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4998.peach-health-loading-screen {4999  flex: 1;5000  display: flex;5001  flex-direction: column;5002  align-items: center;5003  justify-content: center;5004  gap: 14px;5005  padding: 32px 28px;5006  text-align: center;5007}50085009.peach-health-loading-glyph {5010  width: 48px;5011  height: 48px;5012  display: flex;5013  align-items: center;5014  justify-content: center;5015  border-radius: 14px;5016  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5017  color: var(--peach-accent);5018}50195020.peach-health-loading-title {5021  margin: 0;5022  font-family: var(--font-display);5023  font-style: italic;5024  font-weight: 300;5025  font-size: 19px;5026  line-height: 1.2;5027  color: var(--peach-t0);5028}50295030.peach-health-loading-copy {5031  margin: 0;5032  max-width: 240px;5033  font-size: 0.75rem;5034  line-height: 1.55;5035  color: var(--peach-t2);5036}50375038.peach-health-loading-track {5039  width: 200px;5040  height: 3px;5041  margin-top: 6px;5042  border-radius: 999px;5043  background: rgba(240, 232, 216, 0.06);5044  overflow: hidden;5045}50465047.peach-health-loading-fill {5048  width: 40%;5049  height: 100%;5050  border-radius: inherit;5051  background: linear-gradient(5052    90deg,5053    transparent 0%,5054    var(--peach-accent) 50%,5055    transparent 100%5056  );5057  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;5058}50595060@keyframes peach-health-loading-sweep {5061  0%   { transform: translateX(-100%); }5062  100% { transform: translateX(350%); }5063}50645065[data-motion="reduce"] .peach-health-loading-fill,5066[data-motion="reduce"] .peach-health-loading-glyph svg path {5067  animation: none;5068}50695070.peach-health-summary {5071  padding: 10px 16px 6px;5072  font-family: "IBM Plex Mono", monospace;5073  font-size: 0.6875rem;5074}5075.peach-health-summary-warn { color: rgba(220,80,60,0.9); }5076.peach-health-summary-ok { color: var(--peach-t2); }50775078.peach-health-check-row {5079  padding: 0 16px 10px;5080}5081.peach-health-check-btn {5082  width: 100%;5083  display: flex;5084  align-items: center;5085  justify-content: center;5086}50875088.peach-health-sections {5089  flex: 1;5090  display: flex;5091  flex-direction: column;5092}50935094.peach-health-section {5095  border-bottom: 1px solid var(--peach-t3);5096}50975098.peach-health-section-header {5099  width: 100%;5100  display: flex;5101  align-items: center;5102  justify-content: space-between;5103  padding: 9px 16px;5104  background: transparent;5105  cursor: pointer;5106  color: var(--peach-t0);5107}51085109.peach-health-section-title-row {5110  display: flex;5111  align-items: center;5112  gap: 8px;5113}51145115.peach-health-count-badge {5116  display: inline-flex;5117  align-items: center;5118  justify-content: center;5119  min-width: 20px;5120  height: 18px;5121  padding: 0 5px;5122  border-radius: 999px;5123  background: rgba(220,80,60,0.15);5124  border: 1px solid rgba(220,80,60,0.25);5125  font-family: "IBM Plex Mono", monospace;5126  font-size: 0.5625rem;5127  color: rgba(220,80,60,0.9);5128}51295130.peach-health-section-title {5131  font-family: "IBM Plex Mono", monospace;5132  font-size: 0.6875rem;5133  text-transform: uppercase;5134  letter-spacing: 0.1em;5135  color: var(--peach-t1);5136}51375138.peach-health-chevron {5139  color: var(--peach-t2);5140  transition: transform 200ms ease;5141  flex-shrink: 0;5142}5143.peach-health-chevron.is-expanded {5144  transform: rotate(180deg);5145}51465147.peach-health-section-body {5148  padding: 0 16px 10px;5149  display: flex;5150  flex-direction: column;5151  gap: 4px;5152}51535154.peach-health-row {5155  display: flex;5156  align-items: flex-start;5157  justify-content: space-between;5158  gap: 8px;5159  padding: 6px 8px;5160  border-radius: 8px;5161  background: rgba(240,232,216,0.02);5162}51635164.peach-health-row-info {5165  flex: 1;5166  min-width: 0;5167  display: flex;5168  flex-direction: column;5169  gap: 2px;5170}51715172.peach-health-row-name {5173  font-family: var(--font-display);5174  font-size: 0.9375rem;5175  font-style: italic;5176  font-weight: 400;5177  color: var(--peach-t0);5178  white-space: nowrap;5179  overflow: hidden;5180  text-overflow: ellipsis;5181}51825183.peach-health-row-meta {5184  font-family: "IBM Plex Mono", monospace;5185  font-size: 0.5625rem;5186  color: var(--peach-t2);5187  letter-spacing: 0.05em;5188}51895190.peach-health-fix-btn {5191  font-size: 0.5625rem;5192  letter-spacing: 0.08em;5193  text-transform: uppercase;5194  padding: 4px 7px;5195  flex-shrink: 0;5196  display: flex;5197  align-items: center;5198}51995200.peach-health-empty {5201  font-family: "IBM Plex Mono", monospace;5202  font-size: 0.625rem;5203  color: var(--peach-t2);5204  padding: 6px 0;5205}52065207.peach-health-loading {5208  font-family: "IBM Plex Mono", monospace;5209  font-size: 0.625rem;5210  color: var(--peach-t2);5211  padding: 6px 0;5212  display: flex;5213  align-items: center;5214  gap: 6px;5215}52165217.peach-health-loading::before {5218  content: "";5219  width: 10px;5220  height: 10px;5221  border: 1.5px solid var(--peach-t3);5222  border-top-color: var(--peach-accent);5223  border-radius: 50%;5224  animation: peach-spin 600ms linear infinite;5225}52265227@keyframes peach-spin {5228  to { transform: rotate(360deg); }5229}52305231.peach-spinner {5232  width: 32px;5233  height: 32px;5234  border: 2px solid var(--peach-s2);5235  border-top-color: var(--peach-accent);5236  border-radius: 50%;5237  margin: 0 auto 16px;5238  animation: peach-spin 0.8s linear infinite;5239}52405241.peach-progress-screen {5242  text-align: center;5243  padding: 32px 16px;5244}52455246.peach-progress-screen-title {5247  font-size: 0.8125rem;5248  color: var(--peach-t0);5249  margin-bottom: 16px;5250}52515252.peach-progress-screen-stage {5253  font-size: 0.6875rem;5254  color: var(--peach-t2);5255  min-height: 14px;5256}52575258.peach-progress-screen-note {5259  font-size: 0.625rem;5260  color: var(--peach-t2);5261  margin-top: 8px;5262}52635264/* Pairing commits the vault key before the first entry sync. Keep that5265   implementation detail off-screen until the paired source records a real,5266   durable sync completion. */5267.peach-initial-sync {5268  position: relative;5269  display: flex;5270  align-items: center;5271  justify-content: center;5272  overflow: hidden;5273}52745275.peach-initial-sync-card {5276  position: relative;5277  z-index: 1;5278  width: min(100%, 320px);5279  display: flex;5280  flex-direction: column;5281  align-items: center;5282  gap: 10px;5283  padding: 36px 26px;5284  text-align: center;5285}52865287.peach-initial-sync-mark {5288  width: 54px;5289  height: 54px;5290  display: flex;5291  align-items: center;5292  justify-content: center;5293  border-radius: 18px;5294  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5295  margin-bottom: 4px;5296}52975298.peach-initial-sync-mark svg {5299  width: 34px;5300  height: 34px;5301}53025303.peach-initial-sync-card h1 {5304  margin: 0;5305  color: var(--peach-t0);5306  font-family: var(--font-display);5307  font-size: 1.55rem;5308  font-style: italic;5309  font-weight: 400;5310}53115312.peach-initial-sync-card > p {5313  margin: 0;5314}53155316.peach-initial-sync-card #initial-sync-copy {5317  color: var(--peach-t1);5318  font-size: 0.78rem;5319  line-height: 1.55;5320}53215322.peach-initial-sync-progress {5323  width: 100%;5324  height: 3px;5325  overflow: hidden;5326  border-radius: 999px;5327  background: color-mix(in srgb, var(--peach-t0) 8%, transparent);5328  margin: 8px 0 2px;5329}53305331.peach-initial-sync-progress span {5332  display: block;5333  width: 42%;5334  height: 100%;5335  border-radius: inherit;5336  background: var(--peach-accent);5337  animation: peach-initial-sync-progress 1.4s cubic-bezier(0.2, 0, 0, 1) infinite;5338}53395340@keyframes peach-initial-sync-progress {5341  from { transform: translateX(-115%); }5342  to { transform: translateX(340%); }5343}53445345.peach-initial-sync-note {5346  color: var(--peach-t2);5347  font-size: 0.625rem;5348  line-height: 1.45;5349}53505351.peach-initial-sync-slow {5352  width: 100%;5353  display: flex;5354  flex-direction: column;5355  gap: 10px;5356  padding-top: 10px;5357  border-top: 1px solid var(--peach-border);5358}53595360.peach-initial-sync-slow p {5361  margin: 0;5362  color: var(--peach-t2);5363  font-size: 0.6875rem;5364  line-height: 1.45;5365}53665367.peach-initial-sync-slow .peach-btn {5368  width: 100%;5369}53705371@media (prefers-reduced-motion: reduce) {5372  .peach-initial-sync-progress span {5373    width: 100%;5374    opacity: 0.7;5375    animation: none;5376  }5377}53785379/* Tag chips */5380.peach-tag-chip {5381  display: inline-flex;5382  align-items: center;5383  gap: 4px;5384  padding: 3px 8px;5385  border-radius: 999px;5386  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5387  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5388  color: var(--peach-t0);5389  font-family: "IBM Plex Mono", monospace;5390  font-size: 0.625rem;5391  letter-spacing: 0.04em;5392}53935394.peach-tag-chip-remove {5395  background: transparent;5396  border: none;5397  color: inherit;5398  opacity: 0.6;5399  cursor: pointer;5400  padding: 0;5401  font-size: 0.75rem;5402  line-height: 1;5403}54045405.peach-tag-chip-remove:hover {5406  opacity: 1;5407}54085409/* Tag input */5410.peach-tag-input-wrap {5411  border-bottom: 1px solid var(--peach-t3);5412}54135414.peach-tag-suggestions {5415  display: flex;5416  flex-wrap: wrap;5417  gap: 4px;5418  padding: 6px 0;5419}54205421.peach-tag-suggestion {5422  padding: 2px 8px;5423  border-radius: 999px;5424  border: 1px solid var(--peach-t3);5425  background: var(--peach-s2);5426  color: var(--peach-t1);5427  font-family: "IBM Plex Mono", monospace;5428  font-size: 0.625rem;5429  cursor: pointer;5430  transition: border-color 80ms ease, background 80ms ease;5431}54325433.peach-tag-suggestion:hover {5434  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5435  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5436}54375438/* Identity suggestions — shown below username/email inputs in new-entry form */5439@keyframes peach-suggest-in {5440  from { opacity: 0; transform: translateY(-4px); }5441  to   { opacity: 1; transform: none; }5442}54435444.peach-identity-suggestions {5445  display: flex;5446  flex-direction: column;5447  gap: 1px;5448  margin-top: 4px;5449  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5450}54515452.peach-identity-filter-row {5453  display: flex;5454  align-items: center;5455  gap: 4px;5456  padding: 2px 0 5px;5457}54585459.peach-identity-collapse-btn {5460  margin-left: auto;5461  background: transparent;5462  border: none;5463  cursor: pointer;5464  color: var(--peach-t3);5465  padding: 2px 4px;5466  display: flex;5467  align-items: center;5468  line-height: 0;5469  border-radius: 3px;5470  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5471}54725473.peach-identity-collapse-btn:hover {5474  color: var(--peach-t1);5475}54765477.peach-identity-collapse-btn.is-collapsed {5478  transform: rotate(-90deg);5479}54805481.peach-identity-rows {5482  display: grid;5483  grid-template-rows: 1fr;5484  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5485}54865487.peach-identity-rows.is-collapsed {5488  grid-template-rows: 0fr;5489}54905491.peach-identity-rows-inner {5492  overflow-y: auto;5493  min-height: 0;5494  max-height: 148px;5495  scrollbar-width: thin;5496  scrollbar-color: var(--peach-t3) transparent;5497  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5498  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5499}55005501.peach-identity-rows-inner::-webkit-scrollbar {5502  width: 4px;5503}55045505.peach-identity-rows-inner::-webkit-scrollbar-track {5506  background: transparent;5507}55085509.peach-identity-rows-inner::-webkit-scrollbar-thumb {5510  background: var(--peach-t3);5511  border-radius: 2px;5512}55135514.peach-identity-filter-pill {5515  padding: 2px 7px;5516  border-radius: 999px;5517  border: 1px solid var(--peach-t3);5518  background: transparent;5519  color: var(--peach-t2);5520  font-family: "IBM Plex Mono", monospace;5521  font-size: 0.6rem;5522  cursor: pointer;5523  transition: border-color 80ms, background 80ms, color 80ms;5524}55255526.peach-identity-filter-pill.is-on {5527  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5528  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5529  color: var(--peach-accent);5530}55315532.peach-identity-suggestion {5533  display: flex;5534  align-items: center;5535  gap: 6px;5536  width: 100%;5537  padding: 4px 6px;5538  border-radius: 5px;5539  border: none;5540  background: transparent;5541  cursor: pointer;5542  text-align: left;5543  transition: background 80ms ease;5544}55455546.peach-identity-suggestion:hover,5547.peach-identity-suggestion:focus {5548  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5549  outline: none;5550}55515552.peach-identity-suggestion-value {5553  font-family: "IBM Plex Mono", monospace;5554  font-size: 0.7rem;5555  color: var(--peach-t1);5556  overflow: hidden;5557  text-overflow: ellipsis;5558  white-space: nowrap;5559  flex: 1;5560  min-width: 0;5561}55625563.peach-identity-suggestion-type {5564  font-family: "IBM Plex Mono", monospace;5565  font-size: 0.55rem;5566  font-weight: 600;5567  flex-shrink: 0;5568  padding: 1px 4px;5569  border-radius: 3px;5570}55715572.peach-identity-suggestion-type--email {5573  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5574  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5575}55765577.peach-identity-suggestion-type--username {5578  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5579  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5580}55815582.peach-identity-suggestion-meta {5583  font-family: "IBM Plex Mono", monospace;5584  font-size: 0.6rem;5585  color: var(--peach-t3);5586  flex-shrink: 0;5587}55885589/* Tag filter strip */5590.peach-tag-filter-strip {5591  border-bottom: 1px solid var(--peach-t3);5592  flex-shrink: 0;5593}55945595.peach-tag-filter-chip {5596  display: inline-flex;5597  align-items: center;5598  padding: 4px 10px;5599  border-radius: 999px;5600  border: 1px solid var(--peach-t3);5601  background: transparent;5602  color: var(--peach-t2);5603  font-family: "IBM Plex Mono", monospace;5604  font-size: 0.5625rem;5605  letter-spacing: 0.06em;5606  text-transform: uppercase;5607  cursor: pointer;5608  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5609  white-space: nowrap;5610}56115612.peach-tag-filter-chip:hover {5613  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5614  color: var(--peach-t1);5615}56165617.peach-tag-filter-chip.is-selected {5618  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5619  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5620  color: var(--peach-t0);5621}56225623/* ─────────────────────────────────────────────────────────────────────────5624   v1.4.12 additions5625   ─────────────────────────────────────────────────────────────────────── */56265627/* Sort bar */5628.peach-sort-bar {5629  display: flex;5630  align-items: center;5631  gap: 4px;5632  padding: 5px 12px;5633  border-bottom: 1px solid var(--peach-t3);5634  flex-shrink: 0;5635  overflow-x: auto;5636  scrollbar-width: none;5637}56385639.peach-sort-btn {5640  padding: 2px 9px;5641  border-radius: 999px;5642  border: 1px solid transparent;5643  background: transparent;5644  color: var(--peach-t2);5645  font-family: "IBM Plex Mono", monospace;5646  font-size: 0.5625rem;5647  letter-spacing: 0.07em;5648  text-transform: uppercase;5649  cursor: pointer;5650  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5651  white-space: nowrap;5652}56535654.peach-sort-btn:hover {5655  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5656  color: var(--peach-t1);5657}56585659.peach-sort-btn.is-active {5660  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5661  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5662  color: var(--peach-t0);5663}56645665.peach-sort-scope-btn {5666  padding-inline: 8px;5667  font-size: 0.53125rem;5668  letter-spacing: 0.05em;5669}56705671.peach-sort-domain-hint {5672  margin-left: auto;5673  font-family: "IBM Plex Mono", monospace;5674  font-size: 0.5625rem;5675  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5676  white-space: nowrap;5677  overflow: hidden;5678  text-overflow: ellipsis;5679  max-width: 110px;5680}56815682/* Tab-match badge on entry rows */5683.peach-tab-match-badge {5684  display: inline-block;5685  width: 6px;5686  height: 6px;5687  border-radius: 50%;5688  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5689  margin-left: 5px;5690  vertical-align: middle;5691  flex-shrink: 0;5692  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5693}56945695.peach-entry-row.is-tab-match {5696  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5697  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5698}56995700.peach-entry-row.is-tab-match:hover {5701  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5702}57035704/* Entry list stagger entrance */5705@keyframes peach-entry-fadein {5706  from { opacity: 0; transform: translateY(4px); }5707  to   { opacity: 1; transform: translateY(0); }5708}57095710.peach-vault-list .peach-entry-row {5711  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5712}57135714/* Button press micro-interaction */5715.peach-btn:active {5716  transform: scale(0.95);5717  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5718}57195720.peach-sort-btn:active,5721.peach-tag-filter-chip:active {5722  transform: scale(0.93);5723  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5724}57255726/* Password strength bar (Lock view + shared) */5727.peach-password-strength {5728  display: flex;5729  align-items: center;5730  gap: 8px;5731  margin-top: 6px;5732}57335734.peach-strength-bar {5735  flex: 1;5736  height: 3px;5737  border-radius: 2px;5738  background: var(--peach-t3);5739  overflow: hidden;5740}57415742.peach-strength-fill {5743  height: 100%;5744  border-radius: 2px;5745  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5746              background 300ms ease;5747}57485749.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5750.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5751.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5752.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }57535754.peach-strength-label {5755  font-family: "IBM Plex Mono", monospace;5756  font-style: italic;5757  font-size: 0.5625rem;5758  font-weight: 300;5759  letter-spacing: 0.06em;5760  color: var(--peach-t2);5761  min-width: 36px;5762  text-align: right;5763}57645765.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5766.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5767.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5768.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }57695770/* Duress form */5771.peach-duress-status {5772  padding: 2px 8px;5773  border-radius: 999px;5774  border: 1px solid var(--peach-t3);5775  font-family: "IBM Plex Mono", monospace;5776  font-size: 0.5625rem;5777  letter-spacing: 0.07em;5778  text-transform: uppercase;5779  color: var(--peach-t2);5780  flex-shrink: 0;5781}57825783.peach-duress-status.is-active {5784  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5785  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5786  color: var(--peach-t0);5787}57885789.peach-duress-form {5790  padding: 8px 0 4px;5791  display: flex;5792  flex-direction: column;5793  gap: 6px;5794}57955796.peach-duress-form .peach-label {5797  margin-top: 4px;5798}57995800.peach-duress-actions {5801  display: flex;5802  gap: 6px;5803  align-items: center;5804  margin-top: 4px;5805}58065807.peach-duress-actions .peach-btn:first-child {5808  margin-right: auto;5809}58105811/* Improved overlay spring entrance */5812.peach-overlay-view.ov-enter-up {5813  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5814}58155816@keyframes ov-enter-up-spring {5817  from { opacity: 0; transform: translateY(16px) scale(0.98); }5818  to   { opacity: 1; transform: translateY(0) scale(1); }5819}58205821.peach-overlay-view.ov-enter-right {5822  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5823}58245825@keyframes ov-enter-right-spring {5826  from { opacity: 0; transform: translateX(18px) scale(0.98); }5827  to   { opacity: 1; transform: translateX(0) scale(1); }5828}58295830/* ── Onboarding-mode restore screens (file import) ── */5831/* Used when MainImportView renders during onboarding (no vault yet).5832   Animates like a lock-screen transition. */5833.peach-lock-view {5834  position: absolute;5835  inset: 0;5836  display: flex;5837  flex-direction: column;5838  background:5839    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5840    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5841    var(--peach-bg);5842  z-index: 2;5843  overflow: hidden;5844  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5845}58465847.peach-lock-view-header {5848  display: flex;5849  align-items: center;5850  justify-content: space-between;5851  padding: 16px 18px 12px;5852  flex-shrink: 0;5853}58545855/* ───────── Settings: auto-lock select ───────── */5856.peach-settings-select {5857  font-family: "IBM Plex Mono", monospace;5858  font-size: 0.6875rem;5859  background: transparent;5860  border: 1px solid var(--peach-t3);5861  border-radius: 4px;5862  color: var(--peach-t1);5863  padding: 3px 6px;5864  cursor: pointer;5865  outline: none;5866}5867.peach-settings-select:focus {5868  border-color: var(--peach-accent);5869}58705871/* ───────── Duress status pill (new polished) ───────── */5872.peach-duress-status-pill {5873  font-family: "IBM Plex Mono", monospace;5874  font-size: 0.5625rem;5875  text-transform: uppercase;5876  letter-spacing: 0.12em;5877  padding: 2px 8px;5878  border-radius: 12px;5879  background: var(--peach-t3);5880  color: var(--peach-t2);5881  flex-shrink: 0;5882}5883.peach-duress-status-pill.is-active {5884  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5885  color: var(--peach-accent);5886}58875888/* ───────── Entry advanced disclosure (canary) ───────── */5889.peach-entry-advanced {5890  margin-top: 12px;5891  border-top: 1px solid var(--peach-t3);5892  padding-top: 10px;5893  position: relative;5894  z-index: 1;5895}5896.peach-entry-advanced-toggle {5897  display: flex;5898  align-items: center;5899  justify-content: space-between;5900  width: 100%;5901  background: transparent;5902  border: none;5903  cursor: pointer;5904  padding: 0;5905  color: var(--peach-t2);5906}5907.peach-canary-section {5908  margin-top: 10px;5909  display: grid;5910  gap: 6px;5911}59125913/* ───────── Import: merge/replace radio choices ───────── */5914.peach-import-choice {5915  display: flex;5916  align-items: flex-start;5917  gap: 10px;5918  padding: 8px 10px;5919  border: 1px solid var(--peach-t3);5920  border-radius: 10px;5921  cursor: pointer;5922  margin-bottom: 6px;5923  transition: border-color 120ms ease, background 120ms ease;5924}5925.peach-import-choice:hover {5926  border-color: var(--peach-accent);5927}5928.peach-import-choice input[type="radio"] {5929  margin-top: 3px;5930  accent-color: var(--peach-accent);5931  flex-shrink: 0;5932}5933.peach-import-choice-main {5934  display: flex;5935  flex-direction: column;5936  gap: 2px;5937  min-width: 0;5938}5939.peach-import-choice-label {5940  font-size: 0.75rem;5941  color: var(--peach-t0);5942}5943.peach-import-choice-sub {5944  font-size: 0.6875rem;5945  color: var(--peach-t2);5946  line-height: 1.5;5947}59485949/* ───────── Export: success confirmation strip ───────── */5950.peach-export-success {5951  display: flex;5952  align-items: flex-start;5953  gap: 10px;5954  padding: 12px;5955  border-radius: 12px;5956  border: 1px solid rgba(150, 175, 110, 0.3);5957  background: rgba(150, 175, 110, 0.08);5958  color: var(--peach-t0);5959  font-size: 0.75rem;5960  line-height: 1.55;5961}5962.peach-export-success-check {5963  color: rgba(150, 175, 110, 0.9);5964  font-size: 0.875rem;5965  flex-shrink: 0;5966}59675968/* ── Trash view ──────────────────────────────────────────────────────── */5969.peach-trash-entry-row {5970  display: flex;5971  align-items: center;5972  justify-content: space-between;5973  gap: 8px;5974  padding: 8px 0;5975  border-bottom: 1px solid var(--peach-border);5976}5977.peach-trash-entry-info {5978  flex: 1;5979  min-width: 0;5980  display: flex;5981  flex-direction: column;5982  gap: 2px;5983}5984.peach-trash-entry-title {5985  font-size: 0.8125rem;5986  color: var(--peach-t0);5987  overflow: hidden;5988  text-overflow: ellipsis;5989  white-space: nowrap;5990}5991.peach-trash-entry-meta {5992  font-family: var(--font-mono);5993  font-size: 0.5625rem;5994  color: var(--peach-t2);5995  letter-spacing: 0.04em;5996}5997.peach-trash-entry-actions {5998  display: flex;5999  align-items: center;6000  gap: 4px;6001  flex-shrink: 0;6002}6003.peach-trash-delete-btn {6004  background: transparent;6005  border: 0;6006  color: var(--peach-t3);6007  font-size: 1rem;6008  line-height: 1;6009  cursor: pointer;6010  padding: 2px 5px;6011  transition: color 0.15s;6012}6013.peach-trash-delete-btn:hover { color: var(--peach-breach); }6014.peach-trash-list {6015  overflow-y: auto;6016}6017.peach-trash-footer {6018  display: flex;6019  align-items: center;6020  gap: 8px;6021  padding: 8px 0 0;6022  border-top: 1px solid var(--peach-border);6023  margin-top: 4px;6024}6025.peach-trash-purge-all {6026  background: transparent;6027  border: 0;6028  color: var(--peach-t3);6029  font-size: 0.625rem;6030  cursor: pointer;6031  padding: 4px 0;6032  letter-spacing: 0.03em;6033  transition: color 0.2s;6034}6035.peach-trash-purge-all:hover { color: var(--peach-breach); }6036.peach-trash-purge-confirm-label {6037  font-size: 0.625rem;6038  color: var(--peach-t1);6039  flex: 1;6040}60416042/* ── Settings shortcuts grid ─────────────────────────────────────────── */6043.peach-shortcuts-grid {6044  display: grid;6045  grid-template-columns: auto 1fr;6046  gap: 6px 12px;6047  align-items: center;6048  padding: 4px 0;6049}6050.peach-shortcut-key {6051  font-family: var(--font-mono);6052  font-size: 0.625rem;6053  color: var(--peach-t0);6054  background: var(--peach-t3);6055  border-radius: 4px;6056  padding: 2px 6px;6057  white-space: nowrap;6058  text-align: center;6059}6060.peach-shortcut-desc {6061  font-size: 0.6875rem;6062  color: var(--peach-t1);6063}60646065/* ── Sort bar trash button ───────────────────────────────────────────── */6066.peach-sort-trash-btn {6067  display: flex;6068  align-items: center;6069  justify-content: center;6070  padding: 3px 5px;6071  background: transparent;6072  border: none;6073  cursor: pointer;6074  color: var(--peach-t2);6075  border-radius: 4px;6076  transition: color 140ms ease, background 140ms ease;6077}6078.peach-sort-trash-btn:hover {6079  color: var(--peach-t1);6080  background: var(--peach-t3);6081}6082.peach-sort-trash-btn.is-active {6083  color: var(--peach-accent);6084}60856086/* Accent color picker */6087.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }6088.peach-accent-picker {6089  display: flex;6090  flex-wrap: wrap;6091  gap: 7px;6092  padding: 2px 0;6093}6094.peach-accent-swatch {6095  width: 22px;6096  height: 22px;6097  border-radius: 50%;6098  border: 2px solid transparent;6099  cursor: pointer;6100  padding: 0;6101  transition: transform 100ms;6102  outline-offset: 2px;6103}6104.peach-accent-swatch:hover { transform: scale(1.15); }6105.peach-accent-swatch.is-active {6106  border-color: var(--peach-t0);6107  transform: scale(1.1);6108}61096110.peach-pill-group {6111  display: flex;6112  gap: 6px;6113}6114.peach-pill-group .peach-btn.is-active {6115  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);6116  border-color: var(--peach-accent);6117  color: var(--peach-t0);6118}61196120/* ── Card entry styles ───────────────────────────────────────── */6121.peach-card-number {6122  font-family: var(--peach-mono);6123  letter-spacing: 0.08em;6124}61256126.peach-card-network-badge {6127  font-size: 0.625rem;6128  padding: 1px 5px;6129  border-radius: 4px;6130  border: 0.5px solid var(--peach-border);6131  color: var(--peach-text-dim);6132  margin-left: 6px;6133  vertical-align: middle;6134}61356136.peach-card-expiry-row {6137  display: flex;6138  align-items: center;6139  gap: 8px;6140}61416142.peach-card-expiry-sep {6143  color: var(--peach-text-dim);6144}61456146/* ── Pro tier — upgrade screen ──────────────────────────────── */6147.peach-pro-mark {6148  font-size: 0.5625rem;6149  color: var(--peach-accent);6150  margin-left: 6px;6151  vertical-align: super;6152  opacity: 0.7;6153}61546155.peach-pro-mini-badge {6156  display: block;6157  font-size: 0.625rem;6158  font-style: italic;6159  color: var(--peach-accent);6160  letter-spacing: 0.04em;6161  margin-top: -2px;6162  padding-left: 2px;6163  opacity: 0.85;6164  text-align: center;6165}61666167.peach-wordmark-stack {6168  display: inline-flex;6169  flex-direction: column;6170  align-items: center;6171}61726173/* ── Pro tier — upgrade page ─────────────────────────────────── */6174/* ── Pro upgrade — redesigned editorial layout ─────────────────── */61756176.peach-pro-upgrade {6177  display: flex;6178  flex-direction: column;6179  align-items: stretch;6180  gap: 10px;6181  padding: 2px 2px 12px;6182}61836184.peach-pro-eyebrow {6185  margin: 0;6186  font-family: var(--font-ui);6187  font-size: 0.625rem;6188  font-weight: 500;6189  letter-spacing: 0.12em;6190  color: var(--peach-accent);6191}61926193.peach-pro-headline {6194  margin: 0;6195  font-family: var(--font-display, "Cormorant Garamond", serif);6196  font-size: 30px;6197  font-weight: 700;6198  font-style: normal;6199  line-height: 1.05;6200  color: var(--peach-t0);6201  letter-spacing: -0.01em;6202}6203.peach-pro-headline em {6204  font-style: italic;6205  font-weight: 400;6206  color: var(--peach-accent);6207}62086209.peach-pro-subtitle {6210  margin: 0;6211  font-size: 0.6875rem;6212  line-height: 1.5;6213  color: var(--peach-t1);6214}62156216/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6217.peach-pro-section-label {6218  margin: 6px 0 0;6219  font-family: var(--font-ui);6220  font-size: 0.5625rem;6221  font-weight: 500;6222  letter-spacing: 0.12em;6223  text-transform: uppercase;6224  color: var(--peach-t2);6225}62266227/* 2-column numbered feature grid */6228.peach-pro-grid {6229  display: grid;6230  grid-template-columns: 1fr 1fr;6231  border-top: 1px solid var(--peach-border);6232  border-left: 1px solid var(--peach-border);6233}62346235.peach-pro-grid-item {6236  display: flex;6237  flex-direction: column;6238  gap: 2px;6239  padding: 8px 9px;6240  border-right: 1px solid var(--peach-border);6241  border-bottom: 1px solid var(--peach-border);6242}62436244.peach-pro-grid-item--wide {6245  grid-column: 1 / -1;6246}62476248.peach-pro-grid-num {6249  font-family: var(--font-mono);6250  font-size: 0.5625rem;6251  color: var(--peach-accent);6252  letter-spacing: 0.06em;6253  opacity: 0.85;6254}62556256.peach-pro-grid-name {6257  font-size: 0.8125rem;6258  font-weight: 500;6259  color: var(--peach-t0);6260  line-height: 1.2;6261}62626263.peach-pro-grid-desc {6264  font-size: 0.625rem;6265  color: var(--peach-t1);6266  line-height: 1.4;6267}62686269.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6270  animation: peach-pulse-accent 600ms ease-out forwards;6271}62726273@keyframes peach-pulse-accent {6274  0%   { opacity: 1; transform: scale(1.2); }6275  100% { opacity: 0.85; transform: scale(1); }6276}62776278/* Actions */6279.peach-pro-upgrade-actions {6280  display: flex;6281  flex-direction: column;6282  align-items: stretch;6283  gap: 10px;6284}62856286.peach-pro-pricing {6287  margin: 0;6288  font-size: 1rem;6289  font-weight: 600;6290  color: var(--peach-t0);6291  letter-spacing: 0.01em;6292}6293.peach-pro-pricing-sub {6294  font-size: 0.75rem;6295  font-weight: 400;6296  color: var(--peach-t1);6297  letter-spacing: 0.02em;6298}62996300.peach-pro-upgrade-cta {6301  display: flex;6302  align-items: center;6303  justify-content: center;6304  text-decoration: none;6305  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6306  border: 1px solid var(--peach-accent);6307  border-radius: 10px;6308  color: var(--peach-accent);6309  font-family: var(--font-ui);6310  font-size: 0.8125rem;6311  font-weight: 600;6312  letter-spacing: 0.06em;6313  padding: 11px 16px;6314  transition: background 0.15s ease, color 0.15s ease;6315}6316.peach-pro-upgrade-cta:hover {6317  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6318}63196320/* Pairing's terminal entitlement fallback reuses the Peach Pro card's6321   editorial hierarchy without embedding the settings deck itself. */6322.peach-pair-pro-required {6323  width: 100%;6324  display: flex;6325  flex-direction: column;6326  align-items: stretch;6327  gap: 10px;6328  text-align: left;6329}6330.peach-pair-pro-required .peach-pro-headline {6331  font-size: 1.75rem;6332}6333.peach-pair-pro-required .peach-pro-subtitle {6334  font-size: 0.6875rem;6335}6336.peach-pair-pro-grid {6337  grid-template-columns: 1fr;6338}6339.peach-pair-pro-button {6340  width: 100%;6341  cursor: pointer;6342}6343.peach-desktop-error--pro {6344  width: min(100%, 320px);6345  overflow-y: auto;6346}63476348.peach-pro-key-divider {6349  display: flex;6350  align-items: center;6351  gap: 8px;6352  color: var(--peach-t2);6353  font-size: 0.5625rem;6354  letter-spacing: 0.1em;6355}6356.peach-pro-key-divider::before,6357.peach-pro-key-divider::after {6358  content: "";6359  flex: 1;6360  height: 1px;6361  background: var(--peach-border);6362}63636364/* Inline key entry row */6365.peach-pro-key-inline {6366  display: flex;6367  align-items: center;6368  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6369  border: 1px solid var(--peach-border);6370  border-radius: 8px;6371  overflow: hidden;6372}6373.peach-pro-key-inline-input {6374  flex: 1;6375  background: transparent;6376  border: none;6377  outline: none;6378  color: var(--peach-t1);6379  font-family: var(--font-mono);6380  font-size: 0.625rem;6381  letter-spacing: 0.06em;6382  padding: 9px 10px;6383}6384.peach-pro-key-inline-input::placeholder {6385  color: var(--peach-t2);6386}6387.peach-pro-key-apply {6388  background: transparent;6389  border: none;6390  border-left: 1px solid var(--peach-border);6391  color: var(--peach-t2);6392  font-family: var(--font-ui);6393  font-size: 0.5625rem;6394  font-weight: 600;6395  letter-spacing: 0.08em;6396  padding: 9px 10px;6397  cursor: pointer;6398  transition: color 0.15s ease;6399  flex-shrink: 0;6400}6401.peach-pro-key-apply:not(:disabled):hover {6402  color: var(--peach-accent);6403}6404.peach-pro-key-apply:disabled {6405  opacity: 0.35;6406  cursor: not-allowed;6407}64086409/* ── Pro tier — key ceremony ─────────────────────────────────── */6410.peach-pro-key-ceremony {6411  display: flex;6412  flex-direction: column;6413  align-items: center;6414  gap: 12px;6415  padding: 20px 4px 16px;6416}64176418.peach-pro-key-ceremony .peach-lock-rune-string {6419  font-size: 1rem;6420  gap: 12px;6421  flex: 0;6422  justify-content: center;6423}64246425.peach-pro-key-ceremony-label {6426  margin: 0;6427  font-size: 0.6875rem;6428  color: var(--peach-t2);6429  font-style: italic;6430  letter-spacing: 0.04em;6431}64326433.peach-pro-key-input {6434  font-family: var(--font-mono, monospace);6435  letter-spacing: 0.06em;6436  text-align: center;6437  width: 100%;6438  box-sizing: border-box;6439}64406441.peach-pro-key-error {6442  margin: 0;6443  font-size: 0.75rem;6444  text-align: center;6445  color: var(--peach-breach, #e55);6446  padding: 0;6447}64486449.peach-pro-key-activate {6450  width: 100%;6451  text-align: center;6452  box-sizing: border-box;6453  padding: 10px 20px;6454  font-size: 0.8125rem;6455}64566457.peach-pro-key-cancel {6458  background: transparent;6459  border: 0;6460  color: var(--peach-t2);6461  font-size: 0.6875rem;6462  cursor: pointer;6463  padding: 2px 8px;6464  transition: color 0.2s;6465}64666467.peach-pro-key-cancel:hover { color: var(--peach-accent); }64686469/* ── Pro tier — active state ─────────────────────────────────── */6470.peach-pro-active {6471  display: flex;6472  flex-direction: column;6473  align-items: center;6474  gap: 0;6475  padding: 8px 4px 16px;6476  min-height: 280px;6477}64786479.peach-pro-active-hero {6480  display: flex;6481  flex-direction: column;6482  align-items: center;6483  gap: 6px;6484  padding: 20px 0 8px;6485}64866487.peach-pro-active-mark-wrap {6488  display: flex;6489  align-items: center;6490  justify-content: center;6491  margin-bottom: 4px;6492}64936494.peach-pro-active-mark {6495  width: 60px;6496  height: 60px;6497}64986499.peach-pro-active-title {6500  font-family: var(--font-display, var(--font-ui));6501  font-size: 26px;6502  margin: 0;6503  color: var(--peach-t0);6504  letter-spacing: 0.01em;6505}65066507.peach-pro-active-since {6508  margin: 0;6509  font-size: 0.6875rem;6510  color: var(--peach-t2);6511  font-style: italic;6512}65136514.peach-pro-active-features {6515  display: flex;6516  flex-direction: column;6517  gap: 8px;6518  width: 100%;6519  padding: 14px 8px 0;6520  border-top: 1px solid var(--peach-border);6521  flex: 1;6522}65236524.peach-pro-active-feature {6525  display: flex;6526  align-items: center;6527  gap: 9px;6528}65296530.peach-pro-active-feature-mark {6531  color: var(--peach-accent);6532  font-size: 0.625rem;6533  opacity: 0.65;6534  flex-shrink: 0;6535}65366537.peach-pro-active-feature-name {6538  font-size: 0.75rem;6539  color: var(--peach-t1);6540}65416542.peach-pro-deactivate {6543  align-self: center;6544  background: transparent;6545  border: 0;6546  color: var(--peach-t3);6547  font-size: 0.625rem;6548  cursor: pointer;6549  padding: 8px 0 0;6550  margin-top: 16px;6551  letter-spacing: 0.03em;6552  transition: color 0.2s;6553}65546555.peach-pro-deactivate:hover { color: var(--peach-t2); }65566557.peach-pro-deactivate:disabled {6558  opacity: 0.5;6559  cursor: default;6560}65616562/* ── Pro card activation sparkles & thank-you ── */6563button.peach-pro-active-mark-wrap {6564  background: transparent;6565  border: 0;6566  padding: 0;6567  cursor: pointer;6568  position: relative;6569  overflow: visible;6570}65716572.peach-pro-sparks {6573  position: absolute;6574  inset: 0;6575  pointer-events: none;6576  overflow: visible;6577}65786579.peach-pro-spark {6580  position: absolute;6581  top: 50%;6582  left: 50%;6583  font-size: 9px;6584  line-height: 1;6585  opacity: 0;6586  transform: translate(-50%, -50%);6587  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6588}65896590@keyframes peach-pro-spark-fly {6591  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6592  25%  { opacity: 1; }6593  100% {6594    opacity: 0;6595    transform: translate(6596      calc(-50% + var(--spark-x, 0px)),6597      calc(-50% + var(--spark-y, -40px))6598    ) scale(0.8);6599  }6600}66016602.peach-pro-thankyou-text {6603  margin: 4px 0 0;6604  font-size: 0.6875rem;6605  font-style: italic;6606  color: currentColor;6607  opacity: 0;6608  animation: peach-pro-thankyou-flash 2.5s ease both;6609}66106611@keyframes peach-pro-thankyou-flash {6612  0%   { opacity: 0; transform: translateY(4px); }6613  15%  { opacity: 0.75; transform: translateY(0); }6614  75%  { opacity: 0.75; }6615  100% { opacity: 0; }6616}66176618/* ── Pro advanced health remediation queue ──────────────────── */6619.peach-health-pro-queue {6620  display: flex;6621  flex-direction: column;6622  gap: 10px;6623  padding: 12px;6624  margin: 0 0 12px;6625  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6626  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6627  border-radius: 10px;6628}66296630.peach-health-pro-queue-head {6631  display: flex;6632  justify-content: space-between;6633  align-items: baseline;6634}66356636.peach-health-pro-queue-title {6637  font-size: 0.75rem;6638  font-weight: 500;6639  letter-spacing: 0.04em;6640  text-transform: uppercase;6641  color: var(--peach-accent);6642}66436644.peach-health-pro-queue-score {6645  font-size: 0.6875rem;6646  color: var(--peach-t2);6647}66486649.peach-health-pro-row {6650  display: flex;6651  gap: 10px;6652  align-items: center;6653  padding: 8px 0;6654  border-top: 1px solid var(--peach-border);6655}66566657.peach-health-pro-row-info {6658  flex: 1;6659  display: flex;6660  flex-direction: column;6661  gap: 4px;6662  min-width: 0;6663}66646665.peach-health-pro-action {6666  flex: 0 0 auto;6667  padding: 4px 8px;6668  font-size: 0.5625rem;6669  letter-spacing: 0.08em;6670  text-transform: uppercase;6671}66726673.peach-health-pro-row-name {6674  font-size: 0.8125rem;6675  color: var(--peach-t0);6676  overflow: hidden;6677  text-overflow: ellipsis;6678  white-space: nowrap;6679}66806681.peach-health-pro-row-meta {6682  font-size: 0.6875rem;6683  color: var(--peach-t2);6684}66856686.peach-health-pro-bar {6687  height: 2px;6688  background: var(--peach-border);6689  border-radius: 2px;6690  overflow: hidden;6691  margin-top: 2px;6692}66936694.peach-health-pro-bar-fill {6695  height: 100%;6696  background: var(--peach-accent);6697  transition: width 200ms ease-out;6698}66996700/* ── Pro activation celebration ── */6701@keyframes peach-pro-bloom {6702  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6703  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6704                 drop-shadow(0 0 48px var(--peach-glow)); }6705  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6706}67076708@keyframes peach-pro-wordmark-in {6709  from { opacity: 0; transform: translateY(4px); }6710  to   { opacity: 1; transform: translateY(0); }6711}67126713@keyframes peach-pro-fade-out {6714  from { opacity: 1; }6715  to   { opacity: 0; }6716}67176718.peach-pro-celebration {6719  background:6720    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6721    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6722    var(--peach-bg);6723  border: 1px solid var(--peach-t3);6724  box-shadow:6725    0 2px 8px rgba(0,0,0,0.55),6726    0 14px 48px rgba(0,0,0,0.7),6727    0 0 0 1px rgba(240,232,216,0.04);6728  overflow: hidden;6729  width: 320px;6730  height: 520px;6731  display: flex;6732  flex-direction: column;6733  align-items: center;6734  justify-content: center;6735  gap: 8px;6736  padding: 32px 24px;6737  text-align: center;6738}67396740.peach-pro-celebration.is-leaving {6741  animation: peach-pro-fade-out 400ms ease forwards;6742}67436744.peach-pro-bloom-target {6745  display: flex;6746  align-items: center;6747  justify-content: center;6748  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6749  margin-bottom: 12px;6750}67516752.peach-pro-bloom-icon {6753  width: 48px;6754  height: 48px;6755}67566757.peach-pro-wordmark {6758  font-family: var(--font-display);6759  font-size: 22px;6760  font-style: italic;6761  font-weight: 400;6762  color: var(--peach-accent);6763  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6764}67656766.peach-pro-thankyou {6767  font-size: 0.75rem;6768  font-style: italic;6769  color: var(--peach-t2);6770  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6771}677267736774/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6775.peach-pro-notice-banner {6776  display: flex;6777  align-items: center;6778  gap: 8px;6779  padding: 7px 12px;6780  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6781  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6782  font-size: 0.6875rem;6783  color: var(--peach-t2);6784  font-family: "IBM Plex Mono", monospace;6785  flex-shrink: 0;6786}67876788.peach-pro-notice-link {6789  background: none;6790  border: none;6791  padding: 0;6792  cursor: pointer;6793  font-size: 0.6875rem;6794  color: var(--peach-accent);6795  font-family: "IBM Plex Mono", monospace;6796  margin-left: auto;6797  white-space: nowrap;6798}67996800.peach-pro-notice-close {6801  background: none;6802  border: none;6803  padding: 0 0 0 4px;6804  cursor: pointer;6805  font-size: 0.625rem;6806  color: var(--peach-t3);6807  line-height: 1;6808}68096810/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6811   Renders over whatever view is showing. 60-second expiry; the popup ticks6812   the countdown each second and clears the banner when it hits zero. */6813.peach-pair-request-banner {6814  display: flex;6815  flex-direction: column;6816  gap: 8px;6817  padding: 10px 12px;6818  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6819  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6820  font-family: "IBM Plex Mono", monospace;6821  flex-shrink: 0;6822}68236824.peach-pair-toast {6825  padding: 8px 12px;6826  font-family: "IBM Plex Mono", monospace;6827  font-size: 0.75rem;6828  color: var(--peach-t1);6829  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6830  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6831  flex-shrink: 0;6832  text-align: center;6833}68346835.peach-pair-toast strong {6836  color: var(--peach-t0);6837  font-weight: 500;6838}68396840.peach-pair-request-header {6841  display: flex;6842  align-items: center;6843  gap: 8px;6844  font-size: 0.75rem;6845  color: var(--peach-t1);6846}68476848.peach-pair-request-mark {6849  font-size: 0.875rem;6850  display: inline-flex;6851  align-items: center;6852}68536854.peach-pair-request-icon {6855  width: 1em;6856  height: 1em;6857}68586859.peach-pair-request-title {6860  font-weight: 600;6861  color: var(--peach-t0);6862}68636864.peach-pair-request-countdown {6865  margin-left: auto;6866  font-variant-numeric: tabular-nums;6867  color: var(--peach-t2);6868  font-size: 0.6875rem;6869}68706871.peach-pair-request-body {6872  margin: 0;6873  font-size: 0.75rem;6874  color: var(--peach-t1);6875  line-height: 1.4;6876}68776878.peach-pair-request-body strong {6879  color: var(--peach-t0);6880  font-weight: 600;6881}68826883.peach-pair-request-actions {6884  display: flex;6885  gap: 8px;6886  justify-content: flex-end;6887}68886889/* ─── First-run onboarding ──────────────────────────────────────────────6890   Three-card welcome shown once before vault creation. The PeachScript6891   rune background drifts behind everything at very low opacity — it's6892   atmosphere, not focus. The cards themselves use the same panel6893   language as the rest of the popup so the transition into NewVault is6894   continuous, not a jarring switch of visual register. */68956896.peach-onboarding {6897  position: relative;6898  display: flex;6899  flex-direction: column;6900  width: 100%;6901  height: 100%;6902  padding: 16px 16px 18px;6903  box-sizing: border-box;6904  overflow: hidden;6905  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6906}69076908.peach-onboarding.is-completing {6909  animation: peach-onboard-exit 200ms ease-out forwards;6910}69116912.peach-rune-background {6913  position: absolute;6914  inset: 0;6915  width: 100%;6916  height: 100%;6917  pointer-events: none;6918  z-index: 0;6919  transition: opacity 500ms ease-out;6920}69216922.peach-onboarding.is-completing .peach-rune-background {6923  opacity: 0;6924}69256926.peach-onboarding-header {6927  position: relative;6928  z-index: 1;6929  display: flex;6930  align-items: center;6931  margin-bottom: 14px;6932}69336934.peach-onboarding-card {6935  position: relative;6936  z-index: 1;6937  flex: 1;6938  display: flex;6939  flex-direction: column;6940  gap: 10px;6941  padding: 22px 20px;6942  border-radius: 16px;6943  border: 1px solid var(--peach-t3);6944  background:6945    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6946  backdrop-filter: blur(3px);6947  -webkit-backdrop-filter: blur(3px);6948  box-shadow:6949    inset 0 1px 0 rgba(240, 232, 216, 0.04),6950    0 12px 28px rgba(0, 0, 0, 0.12);6951  cursor: pointer;6952  user-select: none;6953  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6954}69556956.peach-onboarding-card.is-exiting {6957  animation: peach-card-out 120ms ease-in forwards;6958  pointer-events: none;6959}69606961.peach-onboarding-card-headline {6962  margin: 0;6963  font-family: var(--font-display);6964  font-style: italic;6965  font-weight: 400;6966  font-size: 22px;6967  line-height: 1.05;6968  color: var(--peach-t0);6969  white-space: pre-line;6970}69716972.peach-onboarding-divider {6973  margin: 4px 0 6px;6974  border: 0;6975  border-top: 1px solid var(--peach-t3);6976  width: 100%;6977}69786979.peach-onboarding-body {6980  margin: 0;6981  font-size: 0.8125rem;6982  line-height: 1.6;6983  color: var(--peach-t1);6984}69856986.peach-onboarding-warning {6987  display: flex;6988  align-items: flex-start;6989  gap: 8px;6990  margin: 6px 0 0;6991  padding-top: 8px;6992  border-top: 1px dashed var(--peach-t3);6993  font-size: 0.8125rem;6994  line-height: 1.5;6995  color: var(--peach-t1);6996}69976998.peach-onboarding-warning-icon {6999  color: var(--peach-accent);7000  font-size: 0.8125rem;7001  line-height: 1.5;7002  flex: 0 0 auto;7003}70047005.peach-onboarding-nav {7006  position: relative;7007  z-index: 1;7008  display: flex;7009  align-items: center;7010  justify-content: space-between;7011  margin-top: 12px;7012  padding: 0 4px;7013}70147015.peach-onboarding-dots {7016  display: flex;7017  align-items: center;7018  gap: 6px;7019}70207021.peach-onboarding-dot {7022  width: 6px;7023  height: 6px;7024  border-radius: 50%;7025  background: var(--peach-t2);7026  transition: width 200ms ease, height 200ms ease, background 200ms ease;7027}70287029.peach-onboarding-dot.is-active {7030  width: 8px;7031  height: 8px;7032  background: var(--peach-accent);7033}70347035.peach-onboarding-next {7036  background: none;7037  border: none;7038  padding: 4px 0;7039  cursor: pointer;7040  font-family: "IBM Plex Mono", monospace;7041  font-size: 0.6875rem;7042  letter-spacing: 0.04em;7043  color: var(--peach-t1);7044  transition: color 150ms ease;7045}70467047.peach-onboarding-next:hover {7048  color: var(--peach-t0);7049}70507051.peach-onboarding-next:disabled {7052  opacity: 0.5;7053  cursor: default;7054}70557056.peach-onboarding-back {7057  background: none;7058  border: none;7059  padding: 4px 0;7060  cursor: pointer;7061  font-family: "IBM Plex Mono", monospace;7062  font-size: 0.6875rem;7063  letter-spacing: 0.04em;7064  color: var(--peach-t2);7065  transition: color 150ms ease;7066}70677068.peach-onboarding-back:hover {7069  color: var(--peach-t0);7070}70717072.peach-onboarding-back:disabled {7073  opacity: 0.5;7074  cursor: default;7075}70767077/* Reserve back-button width on the first card so the dots stay centred */7078.peach-onboarding-back-spacer {7079  width: 44px;7080}70817082.peach-onboarding-choice-row {7083  display: grid;7084  grid-template-columns: 1fr;7085  gap: 8px;7086}70877088.peach-onboarding-choice-heading {7089  margin: 8px 0 -2px;7090  color: var(--peach-t1);7091  font-family: "IBM Plex Mono", monospace;7092  font-size: 0.6875rem;7093  letter-spacing: 0.04em;7094  text-transform: uppercase;7095}70967097.peach-onboarding-choice {7098  min-height: 48px;7099  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);7100  border-radius: 8px;7101  padding: 8px 10px;7102  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);7103  color: var(--peach-t0);7104  font-size: 0.76rem;7105  font-weight: 700;7106  text-align: left;7107}71087109.peach-onboarding-choice-label,7110.peach-onboarding-choice-detail {7111  display: block;7112}71137114.peach-onboarding-choice-detail {7115  margin-top: 2px;7116  color: var(--peach-t1);7117  font-size: 0.625rem;7118  font-weight: 400;7119  line-height: 1.35;7120}71217122.peach-onboarding-choice--adopt {7123  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);7124  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);7125}71267127.peach-adopt-vault {7128  position: relative;7129  min-height: 100%;7130  padding: 22px;7131  display: grid;7132  place-items: center;7133}71347135.peach-adopt-vault--pair {7136  padding: 10px;7137  overflow-y: auto;7138  scrollbar-width: none;7139}71407141.peach-adopt-vault--pair::-webkit-scrollbar {7142  display: none;7143}71447145.peach-adopt-card {7146  position: relative;7147  z-index: 1;7148  width: min(100%, 330px);7149  padding: 20px;7150  border-radius: 8px;7151  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);7152  background: color-mix(in srgb, var(--peach-surface) 90%, transparent);7153  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);7154}71557156.peach-adopt-card--pair {7157  width: 100%;7158  max-height: 500px;7159  margin: auto;7160  padding: 14px 16px 12px;7161  overflow-y: auto;7162  scrollbar-width: none;7163  border: 0;7164  border-radius: 16px;7165  background:7166    radial-gradient(7167      circle at 50% -10%,7168      color-mix(in srgb, var(--peach-accent) 14%, transparent),7169      transparent 38%7170    ),7171    color-mix(in srgb, var(--peach-surface) 94%, transparent);7172}71737174.peach-adopt-card--pair::-webkit-scrollbar {7175  display: none;7176}71777178.peach-adopt-card h1 {7179  margin: 0 0 10px;7180  font-size: 1.28rem;7181  line-height: 1.15;7182}71837184.peach-adopt-card p {7185  margin: 0 0 14px;7186  color: var(--peach-t1);7187  line-height: 1.35;7188}71897190.peach-adopt-card .peach-hint-relay {7191  margin: 12px 0 0;7192  font-size: 11px;7193  line-height: 1.4;7194  color: var(--peach-t2);7195  opacity: 0.85;7196}71977198.peach-adopt-input {7199  margin-bottom: 12px;7200}72017202.peach-adopt-card textarea.peach-adopt-input {7203  width: 100%;7204  resize: vertical;7205  overflow-wrap: anywhere;7206  font-family: "IBM Plex Mono", monospace;7207  font-size: 0.64rem;7208}72097210.peach-adopt-qr-video {7211  display: block;7212  width: 100%;7213  max-height: 220px;7214  margin: 0 0 12px;7215  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);7216  border-radius: 8px;7217  background: #000;7218  object-fit: cover;7219}72207221.peach-adoption-source-invitation {7222  display: flex;7223  flex-direction: column;7224  align-items: center;7225  gap: 10px;7226  padding: 4px 18px 16px;7227  text-align: center;7228}72297230.peach-pair-qr {7231  display: block;7232  margin-inline: auto;7233  max-width: min(224px, 100%);7234  height: auto;7235  padding: 8px;7236  border-radius: 10px;7237  background: #fff;7238}72397240.peach-adopt-card > .peach-btn + .peach-btn {7241  margin-top: 8px;7242}72437244.peach-adopt-actions {7245  display: flex;7246  gap: 10px;7247  margin-top: 14px;7248}72497250.peach-adopt-actions > button {7251  flex: 1;7252}72537254.peach-adopt-sas {7255  margin: 18px 0;7256  padding: 14px;7257  border-radius: 8px;7258  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);7259  color: var(--peach-t0);7260  font-size: 1.35rem;7261  font-weight: 800;7262  font-variant-numeric: tabular-nums;7263  text-align: center;7264}72657266.peach-adopt-pairing {7267  text-align: center;7268}72697270.peach-adopt-pairing h1 {7271  max-width: 260px;7272  margin: 0 auto 6px;7273  color: var(--peach-t0);7274  font-family: var(--font-display, Georgia, serif);7275  font-size: 1.42rem;7276  font-style: italic;7277  font-weight: 500;7278  line-height: 1.12;7279  text-wrap: balance;7280}72817282.peach-adopt-pairing .peach-adopt-pair-lede {7283  max-width: 258px;7284  margin: 0 auto;7285  color: color-mix(in srgb, var(--peach-t0) 82%, var(--peach-bg));7286  font-size: 0.73rem;7287  line-height: 1.42;7288  text-wrap: pretty;7289}72907291.peach-pair-stage.peach-adopt-bird-stage {7292  width: min(100%, 260px);7293  height: 102px;7294  margin: -6px auto 2px;7295}72967297.peach-adopt-bird-stage .peach-pair-bird-slot,7298.peach-adopt-bird-stage .peach-pair-bird {7299  width: 90px;7300  height: 90px;7301}73027303.peach-adopt-bird-stage .peach-pair-bird-slot-desktop {7304  left: 12px;7305}73067307.peach-adopt-bird-stage .peach-pair-bird-slot-mobile {7308  right: 12px;7309}73107311.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-desktop {7312  --bb-x: 12px;7313  transform: translateX(12px);7314}73157316.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-mobile {7317  --bb-x: -12px;7318  transform: translateX(-12px);7319}73207321.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot {7322  animation: peach-adopt-happy-bob 0.8s ease-in-out infinite;7323}73247325.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-mobile {7326  animation-delay: 0.18s;7327  animation-direction: reverse;7328}73297330.peach-adopt-pairing.is-complete .peach-pair-stage.peach-adopt-bird-stage {7331  width: 100%;7332  height: 135px;7333  margin: -8px auto 6px;7334}73357336.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot,7337.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird {7338  width: 112px;7339  height: 112px;7340}73417342.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot-desktop {7343  left: 0;7344  --bb-x: 0;7345  transform: translateX(0);7346}73477348.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot-mobile {7349  right: 0;7350  --bb-x: 0;7351  transform: translateX(0);7352}73537354.peach-adopt-pairing.is-complete h1 {7355  font-size: 1.6rem;7356}73577358.peach-adopt-pairing.is-complete .peach-adopt-pair-lede {7359  font-size: 0.78rem;7360}73617362@keyframes peach-adopt-happy-bob {7363  0%, 100% {7364    transform: translateX(var(--bb-x, 0)) translateY(0) rotate(0deg);7365  }7366  35% {7367    transform: translateX(var(--bb-x, 0)) translateY(-8px) rotate(-3deg);7368  }7369  70% {7370    transform: translateX(var(--bb-x, 0)) translateY(-3px) rotate(2deg);7371  }7372}73737374.peach-adopt-connection {7375  position: absolute;7376  left: 50%;7377  bottom: 38px;7378  width: 78px;7379  height: 1px;7380  translate: -50% 0;7381  background: color-mix(in srgb, var(--peach-accent) 62%, transparent);7382  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 56%, transparent);7383}73847385.peach-adopt-pairing.is-complete .peach-adopt-connection {7386  bottom: 49px;7387  width: 92px;7388}73897390.peach-adopt-connection::after {7391  content: "";7392  position: absolute;7393  left: 50%;7394  top: 50%;7395  width: 7px;7396  height: 7px;7397  border-radius: 50%;7398  translate: -50% -50%;7399  background: var(--peach-accent);7400  box-shadow:7401    0 0 0 4px color-mix(in srgb, var(--peach-accent) 17%, transparent),7402    0 0 14px color-mix(in srgb, var(--peach-accent) 74%, transparent);7403  animation: peach-adopt-connection-pulse 1.1s ease-in-out infinite;7404}74057406@keyframes peach-adopt-connection-pulse {7407  0%, 100% { scale: 0.8; opacity: 0.72; }7408  50% { scale: 1.14; opacity: 1; }7409}74107411.peach-adopt-qr-wrap {7412  min-height: 160px;7413  display: grid;7414  place-items: center;7415}74167417.peach-adopt-qr-wrap .peach-hint-error {7418  margin: 12px 0;7419}74207421.peach-adopt-pairing .peach-adopt-pair-status {7422  margin: 0;7423  color: var(--peach-t0);7424  font-size: 0.75rem;7425}74267427.peach-adopt-confirmation {7428  margin-top: 18px;7429  padding: 8px 0 4px;7430}74317432.peach-adopt-confirmation .peach-adopt-confirmation-label {7433  margin: 0 0 7px;7434  color: color-mix(in srgb, var(--peach-accent) 72%, var(--peach-t0));7435  font-family: var(--peach-mono, "IBM Plex Mono", monospace);7436  font-size: 0.625rem;7437  font-weight: 700;7438  letter-spacing: 0.14em;7439}74407441.peach-adopt-confirmation .peach-adoption-sas {7442  margin: 0 auto;7443  padding: 12px 14px;7444  border-color: color-mix(in srgb, var(--peach-accent) 36%, transparent);7445  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);7446}74477448.peach-adopt-confirmation .peach-adoption-sas strong {7449  color: color-mix(in srgb, var(--peach-accent) 84%, var(--peach-t0));7450  font-size: 1.58rem;7451  text-shadow: 0 0 16px color-mix(in srgb, var(--peach-accent) 30%, transparent);7452}74537454.peach-adopt-confirmation .peach-adopt-confirmation-help {7455  max-width: 270px;7456  margin: 8px auto 0;7457  color: color-mix(in srgb, var(--peach-t0) 78%, var(--peach-bg));7458  font-size: 0.7rem;7459  line-height: 1.45;7460}74617462.peach-adopt-privacy {7463  display: flex;7464  align-items: flex-start;7465  gap: 9px;7466  margin-top: 10px;7467  padding: 8px 9px;7468  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);7469  border-radius: 10px;7470  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);7471  text-align: left;7472}74737474.peach-adopt-privacy svg {7475  width: 16px;7476  height: 16px;7477  flex: 0 0 auto;7478  margin-top: 1px;7479  fill: none;7480  stroke: color-mix(in srgb, var(--peach-accent) 74%, var(--peach-t0));7481  stroke-linecap: round;7482  stroke-linejoin: round;7483  stroke-width: 1.7;7484}74857486.peach-adopt-pairing .peach-adopt-privacy p {7487  margin: 0;7488  color: color-mix(in srgb, var(--peach-t0) 76%, var(--peach-bg));7489  font-size: 0.62rem;7490  line-height: 1.4;7491}74927493.peach-adopt-privacy strong {7494  color: var(--peach-t0);7495  font-weight: 700;7496}74977498.peach-adopt-pair-actions {7499  margin-top: 9px;7500}75017502.peach-adopt-pair-actions > button {7503  width: 100%;7504}75057506.peach-adopt-paired-status {7507  display: inline-flex;7508  align-items: center;7509  gap: 8px;7510  margin: 22px auto 18px;7511  padding: 9px 13px;7512  border: 1px solid color-mix(in srgb, var(--peach-accent) 30%, transparent);7513  border-radius: 999px;7514  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);7515  color: color-mix(in srgb, var(--peach-accent) 78%, var(--peach-t0));7516  font-family: var(--peach-mono, "IBM Plex Mono", monospace);7517  font-size: 0.66rem;7518  font-weight: 700;7519  letter-spacing: 0.04em;7520}75217522.peach-adopt-paired-status span {7523  width: 7px;7524  height: 7px;7525  border-radius: 50%;7526  background: var(--peach-accent);7527  box-shadow: 0 0 8px color-mix(in srgb, var(--peach-accent) 68%, transparent);7528}75297530@media (prefers-reduced-motion: reduce) {7531  .peach-adopt-connection::after {7532    animation: none;7533  }7534}75357536.peach-onboarding-mobile-card-buttons {7537  display: flex;7538  flex-direction: column;7539  gap: 8px;7540  margin-top: 16px;7541}75427543@keyframes peach-onboard-enter {7544  from { opacity: 0; transform: translateY(20px); }7545  to   { opacity: 1; transform: translateY(0); }7546}75477548@keyframes peach-onboard-exit {7549  from { opacity: 1; }7550  to   { opacity: 0; }7551}75527553@keyframes peach-card-in {7554  from { opacity: 0; transform: translateX(12px); }7555  to   { opacity: 1; transform: translateX(0); }7556}75577558@keyframes peach-card-out {7559  from { opacity: 1; transform: translateX(0); }7560  to   { opacity: 0; transform: translateX(-12px); }7561}75627563/* ─── New vault screen — matched to onboarding card language ─────────── */75647565/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage7566   rule (same element) without loosening the unlock/restore screens. The7567   create-vault screen is the only vault-stage view tall enough to overflow7568   the 520px popup, so its spacing is tuned to fit header → card → restore →7569   recovery warning with nothing clipped. */7570.peach-screen.peach-newvault {7571  position: relative;7572  display: flex;7573  flex-direction: column;7574  gap: 12px;7575  padding: 14px 16px 12px;7576  overflow: hidden;7577}75787579/* Suppress the warm-blob ambient art inherited from .lock-screen — the7580   new vault card now carries the visual weight. */7581.peach-newvault::before {7582  content: none;7583}75847585.peach-newvault-header {7586  position: relative;7587  z-index: 2;7588  display: flex;7589  align-items: center;7590  gap: 10px;7591  margin-bottom: 2px;7592}75937594.peach-newvault-back {7595  display: inline-flex;7596  align-items: center;7597  gap: 4px;7598  background: transparent;7599  border: none;7600  color: var(--peach-t2);7601  font-family: "IBM Plex Mono", monospace;7602  font-size: 0.625rem;7603  letter-spacing: 0.06em;7604  cursor: pointer;7605  padding: 4px 6px;7606  border-radius: 6px;7607  transition: color 120ms ease, background 120ms ease;7608}76097610.peach-newvault-back:hover {7611  color: var(--peach-t0);7612  background: rgba(240, 232, 216, 0.04);7613}76147615.peach-newvault-mark {7616  position: absolute;7617  right: -12px;7618  top: 6px;7619  width: 110px;7620  height: 110px;7621  pointer-events: none;7622  opacity: 0.10;7623  filter: saturate(0.9);7624  z-index: 0;7625}7626.peach-newvault-mark-art {7627  width: 100%;7628  height: 100%;7629}7630.peach-newvault-mark-art path:nth-child(1) {7631  fill: rgba(123, 144, 96, 0.88);7632}7633.peach-newvault-mark-art path:nth-child(2) {7634  stroke: rgba(94, 122, 66, 0.95);7635}76367637.peach-newvault-card {7638  position: relative;7639  z-index: 1;7640  display: flex;7641  flex-direction: column;7642  gap: 8px;7643  padding: 16px 20px 14px;7644  border-radius: 16px;7645  border: 1px solid var(--peach-t3);7646  background:7647    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7648  backdrop-filter: blur(3px);7649  -webkit-backdrop-filter: blur(3px);7650  box-shadow:7651    inset 0 1px 0 rgba(240, 232, 216, 0.04),7652    0 12px 28px rgba(0, 0, 0, 0.12);7653  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7654}76557656.peach-newvault-headline {7657  margin: 0;7658  font-family: var(--font-display);7659  font-style: italic;7660  font-weight: 400;7661  font-size: 24px;7662  line-height: 1.05;7663  color: var(--peach-t0);7664  white-space: pre-line;7665}76667667.peach-newvault-divider {7668  margin: 2px 0 4px;7669  border: 0;7670  border-top: 1px solid var(--peach-t3);7671  width: 100%;7672}76737674.peach-newvault-field {7675  display: flex;7676  flex-direction: column;7677  gap: 4px;7678}76797680.peach-newvault-label-row {7681  display: flex;7682  align-items: center;7683  justify-content: space-between;7684}76857686/* Monospace input scaled to the card. Replaces the 22px unlock-input7687   so the placeholder no longer overflows and the field reads as part7688   of the same surface as the body copy. */7689.peach-newvault-input {7690  font-size: 0.875rem;7691  letter-spacing: 0.18em;7692  padding: 8px 0;7693}7694.peach-newvault-input::placeholder {7695  letter-spacing: 0.18em;7696  color: var(--peach-t2);7697}76987699.peach-newvault-hint {7700  margin: 2px 0 0;7701  font-family: "IBM Plex Mono", monospace;7702  font-size: 0.625rem;7703  color: var(--peach-t2);7704  letter-spacing: 0.04em;7705}77067707.peach-newvault-submit {7708  margin-top: 4px;7709}77107711.peach-newvault-warning {7712  display: flex;7713  align-items: flex-start;7714  gap: 8px;7715  margin: 2px 0 0;7716  padding-top: 8px;7717  border-top: 1px dashed var(--peach-t3);7718  font-size: 0.75rem;7719  line-height: 1.45;7720  color: var(--peach-t1);7721}77227723.peach-newvault-warning-icon {7724  color: var(--peach-accent);7725  font-size: 0.8125rem;7726  line-height: 1.4;7727  flex: 0 0 auto;7728}77297730/* Restore options sit inside the card, directly under "create vault", so7731   they are always reachable without scrolling. The top divider mirrors the7732   warning's so the choice reads as a deliberate fork, not a footnote. */7733.peach-newvault-restore {7734  position: relative;7735  z-index: 1;7736  display: flex;7737  flex-direction: column;7738  gap: 4px;7739  margin-top: 4px;7740  padding-top: 10px;7741  border-top: 1px dashed var(--peach-t3);7742}77437744/* Settings body — warm accent gradient gives the glass something to blur against */7745.peach-settings-body {7746  background:7747    radial-gradient(7748      ellipse at 30% 20%,7749      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7750      transparent 60%7751    );7752}77537754/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7755/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7756 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7757 * (replacing the vault from a backup file) and "hazard" for actions that7758 * are absolutely irreversible (Panic). Both use the same card scaffold so7759 * they read as a pair, but the colour family signals the severity at a7760 * glance — yellow for caution, red for don't.7761 */7762.peach-danger-card {7763  --danger-tint: 235, 158, 52; /* amber */7764  display: flex;7765  flex-direction: column;7766  gap: 8px;7767  padding: 14px;7768  margin-top: 10px;7769  border-radius: 12px;7770  border: 1px solid rgba(var(--danger-tint), 0.32);7771  background:7772    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7773    rgba(var(--danger-tint), 0.04);7774  box-shadow:7775    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7776    0 0 24px rgba(var(--danger-tint), 0.04);7777  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7778}77797780.peach-danger-card:hover {7781  border-color: rgba(var(--danger-tint), 0.55);7782  box-shadow:7783    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7784    0 0 36px rgba(var(--danger-tint), 0.10);7785}77867787.peach-danger-card--hazard {7788  --danger-tint: 220, 38, 38; /* red */7789}77907791.peach-danger-card-head {7792  display: flex;7793  align-items: center;7794  gap: 10px;7795}77967797.peach-danger-card-glyph {7798  width: 28px;7799  height: 28px;7800  flex-shrink: 0;7801  display: flex;7802  align-items: center;7803  justify-content: center;7804  border-radius: 8px;7805  background: rgba(var(--danger-tint), 0.12);7806  color: rgba(var(--danger-tint), 0.95);7807  font-size: 1rem;7808  line-height: 1;7809}78107811.peach-danger-card-title {7812  margin: 0;7813  font-size: 0.8125rem;7814  font-weight: 600;7815  color: rgba(var(--danger-tint), 0.92);7816  letter-spacing: 0.01em;7817}78187819.peach-danger-card-copy {7820  margin: 0;7821  font-size: 0.6875rem;7822  line-height: 1.5;7823  color: var(--peach-t2);7824}78257826.peach-danger-card-button {7827  width: 100%;7828  padding: 9px;7829  margin-top: 4px;7830  background: transparent;7831  border: 1px solid rgba(var(--danger-tint), 0.45);7832  border-radius: 8px;7833  color: rgba(var(--danger-tint), 0.9);7834  font-size: 0.75rem;7835  font-weight: 500;7836  letter-spacing: 0.02em;7837  cursor: pointer;7838  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7839}78407841.peach-danger-card-button:hover {7842  background: rgba(var(--danger-tint), 0.10);7843  border-color: rgba(var(--danger-tint), 0.75);7844  color: rgb(var(--danger-tint));7845}78467847.peach-adoption-sas {7848  margin: 16px auto 0;7849  padding: 12px 16px;7850  border: 1px solid color-mix(in srgb, var(--peach-t0) 18%, transparent);7851  border-radius: 10px;7852  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);7853  color: var(--peach-t0);7854  text-align: center;7855}78567857.peach-adoption-sas strong {7858  font-size: 1.65rem;7859  font-variant-numeric: tabular-nums;7860  letter-spacing: 0.18em;7861  white-space: nowrap;7862}78637864/* ── Panic flow (three-step destruction) ───────────────────────────────── */7865.peach-panic {7866  display: flex;7867  flex-direction: column;7868  flex: 1;7869  min-height: 0;7870  padding: 28px 20px 20px;7871  gap: 18px;7872  overflow-y: auto;7873  scrollbar-width: none;7874  -ms-overflow-style: none;7875}78767877.peach-panic::-webkit-scrollbar { display: none; }78787879.peach-panic-step2 {7880  background: rgba(220, 38, 38, 0.04);7881}78827883.peach-panic-step3 {7884  position: relative;7885  background: #0f0505;7886  color: #ffffff;7887  overflow: hidden;7888}78897890.peach-panic-rune-bg {7891  position: absolute;7892  inset: 0;7893  opacity: 0.22;7894  pointer-events: none;7895  overflow: hidden;7896}78977898.peach-panic-rune-bg canvas {7899  width: 100% !important;7900  height: 100% !important;7901}79027903.peach-panic-icon {7904  font-size: 32px;7905  color: rgb(220, 38, 38);7906  line-height: 1;7907}79087909.peach-panic-title {7910  margin: 0;7911  font-size: 18px;7912  font-weight: 500;7913  color: var(--peach-t1);7914}79157916.peach-panic-title--severe {7917  font-size: 20px;7918  font-weight: 700;7919  color: rgb(220, 38, 38);7920}79217922.peach-panic-body {7923  margin: 0;7924  font-size: 0.8125rem;7925  line-height: 1.55;7926  color: var(--peach-t2);7927}79287929.peach-panic-body--severe {7930  color: rgba(220, 38, 38, 0.85);7931}79327933.peach-panic-body--final {7934  font-size: 1rem;7935  font-weight: 700;7936  color: rgb(255, 80, 80);7937  line-height: 1.4;7938}79397940.peach-panic-body--final-intro {7941  font-size: 1rem;7942  color: #ffffff;7943  font-weight: 400;7944}79457946.peach-panic-divider {7947  height: 1px;7948  background: rgba(255, 255, 255, 0.08);7949  margin: 4px 0;7950}79517952.peach-panic-confirm-input {7953  width: 100%;7954  padding: 10px 12px;7955  background: rgba(255, 255, 255, 0.02);7956  border: 1px solid rgba(220, 38, 38, 0.4);7957  border-radius: 8px;7958  color: var(--peach-t1);7959  font-family: "IBM Plex Mono", monospace;7960  font-size: 0.875rem;7961  letter-spacing: 0.12em;7962  text-transform: uppercase;7963}79647965.peach-panic-confirm-input:focus {7966  outline: none;7967  border-color: rgb(220, 38, 38);7968}79697970.peach-panic-confirm-input--match {7971  border-color: rgb(220, 38, 38);7972  color: rgb(220, 38, 38);7973}79747975.peach-panic-confirm-label {7976  font-size: 0.6875rem;7977  color: var(--peach-t2);7978  margin: 0 0 -8px;7979  letter-spacing: 0.06em;7980}79817982.peach-panic-actions {7983  display: flex;7984  flex-direction: column;7985  gap: 10px;7986  margin-top: auto;7987}79887989.peach-panic-button {7990  width: 100%;7991  padding: 12px;7992  border-radius: 8px;7993  font-size: 0.8125rem;7994  cursor: pointer;7995  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7996}79977998.peach-panic-button--primary {7999  background: var(--peach-accent);8000  border: 1px solid var(--peach-accent);8001  color: #ffffff;8002  font-weight: 600;8003}80048005.peach-panic-button--primary:hover {8006  background: color-mix(in srgb, var(--peach-accent) 88%, white);8007}80088009.peach-panic-button--danger {8010  background: rgb(220, 38, 38);8011  border: 1px solid rgb(220, 38, 38);8012  color: #ffffff;8013  font-weight: 600;8014}80158016.peach-panic-button--danger:disabled {8017  opacity: 0.35;8018  cursor: not-allowed;8019}80208021.peach-panic-button--ghost {8022  background: transparent;8023  border: 1px solid rgba(255, 255, 255, 0.18);8024  color: var(--peach-t2);8025}80268027.peach-panic-button--ghost:hover {8028  border-color: rgba(255, 255, 255, 0.32);8029  color: var(--peach-t1);8030}80318032.peach-panic-link {8033  background: transparent;8034  border: none;8035  padding: 4px 0;8036  color: rgba(220, 38, 38, 0.65);8037  font-size: 0.75rem;8038  cursor: pointer;8039  text-align: left;8040  text-decoration: underline;8041  text-underline-offset: 3px;8042}80438044.peach-panic-link:hover {8045  color: rgb(220, 38, 38);8046}80478048.peach-panic-bar {8049  background: rgb(220, 38, 38);8050  padding: 16px 20px;8051  margin: -28px -20px 0;8052  text-align: center;8053  font-size: 0.8125rem;8054  font-weight: 700;8055  letter-spacing: 0.12em;8056  color: #ffffff;8057}80588059.peach-panic-final-button {8060  width: 100%;8061  padding: 14px;8062  background: rgb(220, 38, 38);8063  border: none;8064  border-radius: 8px;8065  color: #ffffff;8066  font-size: 0.875rem;8067  font-weight: 700;8068  letter-spacing: 0.08em;8069  text-transform: uppercase;8070  cursor: pointer;8071  animation: peach-panic-pulse 2s ease-in-out infinite;8072}80738074.peach-settings-license {8075  margin-top: 10px;8076  padding-top: 10px;8077  border-top: 1px solid var(--peach-t3);8078}80798080.peach-settings-label {8081  font-size: 0.625rem;8082  letter-spacing: 0.08em;8083  color: var(--peach-t3);8084  display: block;8085  margin-bottom: 6px;8086}80878088.peach-settings-license-row {8089  display: flex;8090  align-items: center;8091  justify-content: space-between;8092  gap: 8px;8093}80948095.peach-settings-license-key {8096  font-family: 'IBM Plex Mono', monospace;8097  font-size: 0.75rem;8098  color: var(--peach-t0);8099  letter-spacing: 0.04em;8100  word-break: break-all;8101  flex: 1;8102  min-width: 0;8103}81048105.peach-settings-license-key--masked {8106  font-family: 'IBM Plex Mono', monospace;8107  font-size: 0.6rem;8108  color: var(--peach-t1);8109  letter-spacing: 0.18em;8110  user-select: none;8111}81128113.peach-settings-license-actions {8114  display: flex;8115  align-items: center;8116  gap: 2px;8117  flex-shrink: 0;8118}81198120.peach-settings-license-copy {8121  font-size: 0.6875rem;8122  color: var(--peach-accent);8123  background: transparent;8124  border: none;8125  cursor: pointer;8126  padding: 4px 8px;8127  border-radius: 4px;8128  flex-shrink: 0;8129  transition: opacity 150ms ease;8130}81318132.peach-settings-license-copy:hover {8133  opacity: 0.75;8134}81358136.peach-settings-license-toggle {8137  display: flex;8138  align-items: center;8139  justify-content: center;8140  background: transparent;8141  border: none;8142  cursor: pointer;8143  padding: 4px 6px;8144  border-radius: 4px;8145  color: var(--peach-t2);8146  transition: color 150ms ease;8147}81488149.peach-settings-license-toggle:hover {8150  color: var(--peach-t1);8151}81528153@keyframes peach-panic-pulse {8154  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }8155  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }8156}81578158[data-motion="reduce"] .peach-panic-final-button {8159  animation: none;8160}81618162/* Vault History — Settings → Vault sub-view */81638164.peach-history-list {8165  border: 1px solid var(--peach-border);8166  border-radius: 8px;8167  overflow: hidden;8168  margin: 8px 0 4px;8169}81708171.peach-history-row {8172  display: flex;8173  align-items: center;8174  justify-content: space-between;8175  padding: 9px 12px;8176  gap: 10px;8177  border-bottom: 1px solid var(--peach-border);8178}81798180.peach-history-row:last-child {8181  border-bottom: none;8182}81838184.peach-history-meta {8185  display: flex;8186  flex-direction: column;8187  gap: 2px;8188  min-width: 0;8189  flex: 1;8190}81918192.peach-history-time {8193  font-size: 0.75rem;8194  font-family: 'IBM Plex Mono', ui-monospace, monospace;8195  color: var(--peach-t0);8196  white-space: nowrap;8197  overflow: hidden;8198  text-overflow: ellipsis;8199}82008201.peach-history-sub {8202  font-size: 0.625rem;8203  color: var(--peach-t2);8204  letter-spacing: 0.06em;8205  text-transform: uppercase;8206  white-space: nowrap;8207  overflow: hidden;8208  text-overflow: ellipsis;8209}82108211.peach-history-btn {8212  flex-shrink: 0;8213  white-space: nowrap;8214  min-width: 56px;8215  text-align: center;8216}82178218.peach-history-btn.is-busy {8219  opacity: 0.65;8220}82218222.peach-history-footer {8223  font-size: 0.625rem;8224  color: var(--peach-t3);8225  letter-spacing: 0.05em;8226  text-align: right;8227  margin: 0;8228  padding: 2px 0 0;8229}82308231/* ── Context menu + swipe-copy flash ─────────────────────── */8232.peach-context-menu-backdrop {8233  position: fixed;8234  inset: 0;8235  background: rgba(0, 0, 0, 0.45);8236  z-index: 100;8237  display: flex;8238  align-items: flex-end;8239  justify-content: center;8240  animation: peach-ctx-fade 140ms ease both;8241}8242.peach-context-menu {8243  width: min(360px, calc(100vw - 24px));8244  margin-bottom: max(env(safe-area-inset-bottom), 12px);8245  background: var(--peach-bg);8246  border: 1px solid var(--peach-t3);8247  border-radius: 14px;8248  padding: 6px;8249  display: flex;8250  flex-direction: column;8251  gap: 2px;8252  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);8253  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;8254}8255@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }8256@keyframes peach-ctx-rise {8257  from { transform: translateY(16px); opacity: 0; }8258  to   { transform: translateY(0);    opacity: 1; }8259}8260.peach-context-menu-item {8261  background: transparent;8262  color: var(--peach-t0);8263  border: 0;8264  border-radius: 10px;8265  padding: 12px 14px;8266  text-align: left;8267  font: inherit;8268  cursor: pointer;8269}8270.peach-context-menu-item:hover,8271.peach-context-menu-item:focus-visible {8272  background: var(--peach-t3);8273}8274.peach-context-menu-item--danger {8275  color: var(--peach-health-bad, #d96868);8276}8277.peach-context-menu-item--cancel {8278  color: var(--peach-t2);8279  margin-top: 4px;8280  border-top: 1px solid var(--peach-t3);8281  border-radius: 0 0 10px 10px;8282}82838284/* Swipe-to-copy flash */8285.peach-entry-row.is-copy-flash {8286  animation: peach-copy-flash 600ms ease both;8287}8288@keyframes peach-copy-flash {8289  0%   { background: transparent; }8290  20%  { background: rgba(217, 153, 51, 0.32); }8291  100% { background: transparent; }8292}82938294html { font-size: 16px; }82958296/* ── Recovery word entry ─────────────────────────────────────────── */8297.peach-lock-recover-link {8298  display: block;8299  width: 100%;8300  margin-top: 12px;8301  background: none;8302  border: none;8303  font-family: "IBM Plex Mono", monospace;8304  font-size: 0.625rem;8305  letter-spacing: 0.06em;8306  color: var(--peach-t2);8307  cursor: pointer;8308  text-align: center;8309  padding: 4px;8310  transition: color 120ms ease;8311}8312.peach-lock-recover-link:hover {8313  color: var(--peach-t0);8314}83158316.lock-screen--recovery {8317  display: flex;8318  flex-direction: column;8319  align-items: stretch;8320  padding: 12px 20px 24px;8321  overflow: hidden;8322}83238324.peach-recovery-nav {8325  display: flex;8326  align-items: center;8327  position: relative;8328  z-index: 1;8329  margin-bottom: 4px;8330}83318332/* Mask runes to the top decorative band only — keep inputs and the8333   bottom CTA button clear. The bottom of the popup is reserved for8334   submit buttons; rendering runes there overlaps the button glyph. */8335.peach-rune-background--recovery {8336  -webkit-mask-image: linear-gradient(8337    to bottom,8338    black 0px, black 85px,8339    transparent 110px,8340    transparent 100%8341  );8342  mask-image: linear-gradient(8343    to bottom,8344    black 0px, black 85px,8345    transparent 110px,8346    transparent 100%8347  );8348}83498350.peach-recovery-header {8351  text-align: center;8352  margin-bottom: 16px;8353  margin-top: 4px;8354}8355.peach-recovery-header .peach-onboarding-headline {8356  font-size: 1.25rem;8357  font-weight: 300;8358  letter-spacing: 0.02em;8359  margin: 0 0 4px;8360}8361.peach-recovery-header .peach-hint {8362  font-family: "IBM Plex Mono", monospace;8363  font-size: 0.625rem;8364  color: var(--peach-t2);8365  letter-spacing: 0.04em;8366  margin: 0;8367}83688369/* 12-word grid: 2 columns × 6 rows */8370.peach-recovery-grid {8371  display: grid;8372  grid-template-columns: repeat(2, 1fr);8373  gap: 12px 20px;8374  width: 100%;8375  margin-bottom: 0;8376}83778378.peach-recovery-word-slot {8379  display: flex;8380  align-items: center;8381  gap: 6px;8382  min-width: 0;8383}83848385.peach-recovery-word-index {8386  font-family: "IBM Plex Mono", monospace;8387  font-size: 0.5rem;8388  color: rgba(255, 255, 255, 0.35);8389  min-width: 14px;8390  flex-shrink: 0;8391  text-align: right;8392  letter-spacing: 0.04em;8393}83948395.peach-recovery-word-input {8396  flex: 1;8397  min-width: 0;8398  background: transparent;8399  border: none;8400  border-bottom: 1px solid rgba(255, 255, 255, 0.22);8401  color: var(--peach-t0);8402  font-family: "IBM Plex Mono", monospace;8403  font-size: 0.6875rem;8404  letter-spacing: 0.06em;8405  padding: 5px 2px 4px;8406  outline: none;8407  text-transform: lowercase;8408  transition: border-color 120ms ease;8409}8410.peach-recovery-word-input::placeholder {8411  color: rgba(255, 255, 255, 0.18);8412}8413.peach-recovery-word-input:focus {8414  border-bottom-color: var(--peach-accent);8415}84168417.peach-recovery-submit {8418  width: 100%;8419  margin-top: auto;8420}84218422.peach-recovery-new-password-form {8423  width: 100%;8424  display: flex;8425  flex-direction: column;8426  gap: 16px;8427  margin-bottom: 8px;8428}8429.peach-recovery-new-password-form .peach-newvault-field {8430  display: flex;8431  flex-direction: column;8432  gap: 4px;8433}84348435/* ── Recovery words display (post-create) ────────────────────────── */8436.lock-screen--recovery-display {8437  display: flex;8438  flex-direction: column;8439  align-items: stretch;8440  padding: 0 20px 20px;8441  min-height: 0;8442  overflow-y: auto;8443}84448445.peach-recovery-words-display {8446  width: 100%;8447  margin-bottom: 16px;8448  border: 1px solid var(--peach-t3);8449  border-radius: 8px;8450  padding: 12px 14px;8451  background: rgba(245, 240, 234, 0.04);8452}84538454.peach-recovery-words-label {8455  font-family: "IBM Plex Mono", monospace;8456  font-size: 0.5rem;8457  letter-spacing: 0.08em;8458  color: var(--peach-t2);8459  text-transform: uppercase;8460  margin-bottom: 10px;8461}84628463.peach-recovery-word-list {8464  list-style: none;8465  margin: 0;8466  padding: 0;8467  display: grid;8468  grid-template-columns: repeat(2, 1fr);8469  gap: 6px 16px;8470}84718472.peach-recovery-word-item {8473  display: flex;8474  align-items: baseline;8475  gap: 5px;8476}84778478.peach-recovery-word-num {8479  font-family: "IBM Plex Mono", monospace;8480  font-size: 0.5rem;8481  color: var(--peach-t2);8482  width: 14px;8483  flex: 0 0 14px;8484  text-align: right;8485  letter-spacing: 0.04em;8486  font-variant-numeric: tabular-nums;8487}84888489.peach-recovery-download-btn {8490  display: block;8491  margin: 10px auto 0;8492  padding: 4px 10px;8493  background: transparent;8494  border: 1px solid var(--peach-border);8495  border-radius: 6px;8496  color: var(--peach-t2);8497  font-family: "IBM Plex Mono", monospace;8498  font-size: 0.5625rem;8499  letter-spacing: 0.06em;8500  text-transform: lowercase;8501  cursor: pointer;8502  transition: border-color 0.15s, color 0.15s;8503}85048505.peach-recovery-download-btn:hover {8506  border-color: var(--peach-accent);8507  color: var(--peach-t0);8508}85098510.peach-recovery-word-text {8511  font-family: "IBM Plex Mono", monospace;8512  font-size: 0.6875rem;8513  letter-spacing: 0.06em;8514  color: var(--peach-t0);8515  text-transform: lowercase;8516}85178518.peach-hint--warning {8519  color: var(--peach-accent);8520  font-style: italic;8521}8522.peach-hint--success {8523  color: var(--peach-t2);8524  font-family: "IBM Plex Mono", monospace;8525  font-size: 0.625rem;8526  letter-spacing: 0.06em;8527}85288529/* Confirmation step */8530.peach-recovery-confirm {8531  width: 100%;8532  flex: 1;8533  display: flex;8534  flex-direction: column;8535}8536.peach-recovery-confirm-label {8537  font-family: "IBM Plex Mono", monospace;8538  font-size: 0.5625rem;8539  letter-spacing: 0.04em;8540  color: var(--peach-t2);8541  text-align: center;8542  margin: 0 0 12px;8543}8544.peach-recovery-confirm-fields {8545  display: flex;8546  flex-direction: column;8547  gap: 14px;8548  margin-bottom: 10px;8549}8550.peach-recovery-confirm-field {8551  display: flex;8552  align-items: center;8553  gap: 8px;8554}8555.peach-recovery-confirm-num {8556  font-family: "IBM Plex Mono", monospace;8557  font-size: 0.5rem;8558  color: var(--peach-t2);8559  min-width: 44px;8560  letter-spacing: 0.04em;8561}8562.peach-recovery-confirm-input {8563  flex: 1;8564  background: transparent;8565  border: none;8566  border-bottom: 1px solid var(--peach-t3);8567  color: var(--peach-t0);8568  font-family: "IBM Plex Mono", monospace;8569  font-size: 0.6875rem;8570  letter-spacing: 0.06em;8571  padding: 4px 2px 3px;8572  outline: none;8573  text-transform: lowercase;8574  transition: border-color 120ms ease;8575}8576.peach-recovery-confirm-input:focus {8577  border-bottom-color: var(--peach-accent);8578}8579.peach-recovery-confirm-input:disabled {8580  opacity: 0.4;8581  cursor: not-allowed;8582}8583.peach-recovery-confirm-btn {8584  width: 100%;8585  margin-top: auto;8586}85878588/* ============================================================8589   Sync info sheet8590   ============================================================ */85918592.peach-sync-info-backdrop {8593  position: fixed;8594  inset: 0;8595  z-index: 200;8596  background: rgba(0, 0, 0, 0.55);8597  display: flex;8598  align-items: flex-end;8599  animation: peach-fade-in 200ms ease forwards;8600}86018602@keyframes peach-fade-in {8603  from { opacity: 0; }8604  to   { opacity: 1; }8605}86068607.peach-sync-info-sheet {8608  width: 100%;8609  background: var(--peach-bg-card, var(--peach-bg));8610  border-top-left-radius: 20px;8611  border-top-right-radius: 20px;8612  padding: 12px 24px 32px;8613  display: flex;8614  flex-direction: column;8615  gap: 20px;8616  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8617}86188619@keyframes peach-sheet-up {8620  from { transform: translateY(100%); }8621  to   { transform: translateY(0); }8622}86238624.peach-sync-info-handle {8625  width: 36px;8626  height: 4px;8627  border-radius: 2px;8628  background: var(--peach-border);8629  margin: 0 auto 4px;8630  flex-shrink: 0;8631}86328633.peach-sync-info-title {8634  font-family: 'Cormorant Garamond', serif;8635  font-style: italic;8636  font-size: 26px;8637  font-weight: 600;8638  color: var(--peach-t0);8639  margin: 0;8640  line-height: 1.2;8641}86428643.peach-sync-info-body {8644  display: flex;8645  flex-direction: column;8646  gap: 14px;8647}86488649.peach-sync-info-point {8650  display: flex;8651  gap: 12px;8652  align-items: flex-start;8653  font-size: 14px;8654  color: var(--peach-t2);8655  line-height: 1.6;8656  margin: 0;8657}86588659.peach-sync-info-icon {8660  color: var(--peach-accent);8661  font-size: 16px;8662  flex-shrink: 0;8663  margin-top: 1px;8664}86658666.peach-sync-info-actions {8667  display: flex;8668  flex-direction: column;8669  gap: 12px;8670  margin-top: 4px;8671}86728673.peach-sync-info-pro-link {8674  background: none;8675  border: none;8676  font-size: 13px;8677  color: var(--peach-t3);8678  cursor: pointer;8679  padding: 0;8680  font-family: inherit;8681  text-align: center;8682  transition: color 150ms ease;8683}86848685.peach-sync-info-pro-link:hover {8686  color: var(--peach-accent);8687}86888689.peach-btn--full {8690  width: 100%;8691}86928693/* ── Sync screen ── */86948695.peach-sync-coming-soon {8696  display: flex;8697  align-items: flex-start;8698  gap: 10px;8699  padding: 12px 14px;8700  background: var(--peach-s1);8701  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8702  border-radius: 10px;8703}8704.peach-sync-coming-soon__icon {8705  flex-shrink: 0;8706  color: var(--peach-accent);8707  margin-top: 1px;8708  line-height: 0;8709}8710.peach-sync-coming-soon__title {8711  font-family: 'Cormorant Garamond', serif;8712  font-weight: 500;8713  font-size: 13px;8714  color: var(--peach-accent);8715  margin: 0 0 5px;8716  line-height: 1.3;8717}8718.peach-sync-coming-soon__body {8719  font-size: 12px;8720  color: var(--peach-t1);8721  line-height: 1.55;8722  margin: 0;8723}87248725.peach-sync-screen {8726  display: flex;8727  flex-direction: column;8728  height: 100%;8729}87308731.peach-sync-content {8732  flex: 1;8733  overflow-y: auto;8734  padding: 24px 20px 40px;8735  display: flex;8736  flex-direction: column;8737  gap: 24px;8738}87398740/* Intro (State A) */8741.peach-sync-headline {8742  font-family: 'Cormorant Garamond', serif;8743  font-style: italic;8744  font-size: 28px;8745  font-weight: 600;8746  color: var(--peach-t0);8747  margin: 0 0 10px;8748  line-height: 1.2;8749}87508751.peach-sync-intro-body {8752  font-size: 14px;8753  color: var(--peach-t1);8754  line-height: 1.6;8755  margin: 0;8756}87578758.peach-sync-pro-note {8759  display: flex;8760  flex-direction: column;8761  gap: 8px;8762  background: var(--peach-t3);8763  border-radius: 10px;8764  padding: 12px 14px;8765}87668767.peach-sync-pro-note-text {8768  font-size: 12px;8769  color: var(--peach-t2);8770  line-height: 1.5;8771  margin: 0;8772}87738774.peach-sync-pro-link {8775  background: none;8776  border: none;8777  font-size: 12px;8778  color: var(--peach-accent);8779  cursor: pointer;8780  padding: 0;8781  font-family: inherit;8782  text-align: left;8783}87848785/* Status (State C) */8786.peach-sync-status {8787  padding: 12px 0;8788  border-bottom: 1px solid var(--peach-border);8789}87908791.peach-sync-status-row {8792  display: flex;8793  align-items: center;8794  gap: 8px;8795}87968797.peach-sync-dot {8798  width: 7px;8799  height: 7px;8800  border-radius: 50%;8801  flex-shrink: 0;8802}88038804.peach-sync-dot--green { background: var(--peach-health-ok); }8805.peach-sync-dot--amber { background: var(--peach-accent); }88068807.peach-sync-status-text {8808  font-family: 'IBM Plex Mono', monospace;8809  font-size: 11px;8810  color: var(--peach-t2);8811}88128813/* Paired devices */8814.peach-sync-section {8815  display: flex;8816  flex-direction: column;8817  gap: 2px;8818}88198820.peach-sync-section-label {8821  font-family: 'IBM Plex Mono', monospace;8822  font-size: 10px;8823  letter-spacing: 0.1em;8824  color: var(--peach-t3);8825  margin: 0 0 10px;8826}88278828.peach-sync-device-row {8829  display: flex;8830  justify-content: space-between;8831  align-items: baseline;8832  padding: 10px 0;8833  border-bottom: 1px solid var(--peach-border);8834  gap: 12px;8835}88368837.peach-sync-device-name {8838  font-size: 14px;8839  color: var(--peach-t1);8840}88418842.peach-sync-device-meta {8843  font-family: 'IBM Plex Mono', monospace;8844  font-size: 11px;8845  color: var(--peach-t3);8846  white-space: nowrap;8847}88488849.peach-sync-hub-note {8850  padding: 14px 16px;8851  border: 1px solid var(--peach-border);8852  border-radius: 10px;8853  display: flex;8854  flex-direction: column;8855  gap: 6px;8856  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8857}88588859.peach-sync-hub-note-title {8860  font-size: 13px;8861  font-weight: 600;8862  color: var(--peach-t0);8863  margin: 0;8864}88658866.peach-sync-hub-note-body {8867  font-size: 12px;8868  color: var(--peach-t2);8869  line-height: 1.6;8870  margin: 0;8871}88728873/* Action buttons */8874.peach-sync-actions {8875  display: flex;8876  gap: 10px;8877  flex-wrap: wrap;8878}88798880/* Upgrade prompt (State B) */8881.peach-sync-upgrade {8882  display: flex;8883  flex-direction: column;8884  gap: 12px;8885  padding: 16px;8886  border: 1px solid var(--peach-border);8887  border-radius: 10px;8888}88898890.peach-sync-upgrade-text {8891  font-size: 13px;8892  color: var(--peach-t2);8893  line-height: 1.6;8894  margin: 0;8895}88968897/* Network note */8898.peach-sync-network-note {8899  font-size: 12px;8900  color: var(--peach-t3);8901  line-height: 1.6;8902  margin: 0;8903}89048905/* Advanced */8906.peach-sync-advanced {8907  margin-top: auto;8908  padding-top: 16px;8909  border-top: 1px solid var(--peach-border);8910}89118912.peach-sync-advanced-toggle {8913  display: flex;8914  align-items: center;8915  gap: 8px;8916  background: none;8917  border: none;8918  font-family: 'IBM Plex Mono', monospace;8919  font-size: 11px;8920  letter-spacing: 0.08em;8921  color: var(--peach-t3);8922  cursor: pointer;8923  padding: 0;8924  text-transform: uppercase;8925}89268927.peach-sync-advanced-chevron {8928  display: inline-block;8929  transition: transform 200ms ease;8930  font-size: 10px;8931}89328933.peach-sync-advanced-chevron.is-open {8934  transform: rotate(90deg);8935}89368937.peach-sync-advanced-content {8938  margin-top: 14px;8939}89408941.peach-sync-advanced-row {8942  display: flex;8943  justify-content: space-between;8944  align-items: center;8945  gap: 16px;8946}89478948.peach-sync-advanced-title {8949  font-size: 14px;8950  color: var(--peach-t1);8951  margin: 0 0 2px;8952}89538954.peach-sync-advanced-subtitle {8955  font-size: 12px;8956  color: var(--peach-t3);8957  margin: 0;8958  line-height: 1.5;8959}89608961/* ── Notes Mode ── */89628963/* Overlay that crossfades over the vault */8964.peach-notes-overlay {8965  position: fixed;8966  inset: 0;8967  z-index: 90;8968  opacity: 0;8969  pointer-events: none;8970  animation: peach-mode-in 220ms ease-in forwards;8971}89728973.peach-notes-overlay.is-visible {8974  opacity: 1;8975  pointer-events: auto;8976}89778978@keyframes peach-mode-in {8979  from { opacity: 0; }8980  to   { opacity: 1; }8981}89828983/* Top-level notes surface */8984.peach-notes-mode {8985  position: absolute;8986  inset: 0;8987  background: var(--peach-bg);8988  display: flex;8989  flex-direction: column;8990}89918992/* Rune canvas positioned behind content */8993.peach-note-rune-canvas {8994  position: absolute;8995  inset: 0;8996  width: 100%;8997  height: 100%;8998  pointer-events: none;8999  z-index: 0;9000}90019002/* TOC wrapper */9003.peach-notes-toc-wrapper {9004  position: absolute;9005  inset: 0;9006  z-index: 1;9007  opacity: 1;9008  pointer-events: auto;9009  transition: opacity 200ms ease;9010}90119012.peach-notes-toc-wrapper.is-hidden {9013  opacity: 0;9014  pointer-events: none;9015}90169017/* Editor wrapper */9018.peach-notes-editor-wrapper {9019  position: absolute;9020  inset: 0;9021  z-index: 2;9022  opacity: 0;9023  pointer-events: none;9024  transition: opacity 200ms ease;9025}90269027.peach-notes-editor-wrapper.is-visible {9028  opacity: 1;9029  pointer-events: auto;9030}90319032/* TOC inner */9033.peach-notes-toc {9034  position: relative;9035  display: flex;9036  flex-direction: column;9037  height: 100%;9038  padding-top: env(safe-area-inset-top, 0px);9039  padding-bottom: env(safe-area-inset-bottom, 0px);9040}90419042/* Shared header */9043.peach-notes-header {9044  display: flex;9045  align-items: center;9046  padding: 12px 16px;9047  gap: 12px;9048  flex-shrink: 0;9049  min-height: 52px;9050  position: relative;9051  z-index: 2;9052}90539054.peach-notes-back {9055  font-size: 22px;9056  color: var(--peach-t2);9057  background: none;9058  border: none;9059  padding: 4px;9060  cursor: pointer;9061  line-height: 1;9062  flex-shrink: 0;9063  transition: color 150ms ease;9064  -webkit-tap-highlight-color: transparent;9065}90669067.peach-notes-back:active { color: var(--peach-t0); }90689069.peach-notes-header-title {9070  flex: 1;9071  font-family: 'Cormorant Garamond', serif;9072  font-style: italic;9073  font-size: 22px;9074  color: var(--peach-t0);9075  text-align: center;9076}90779078.peach-notes-header-title.is-breadcrumb {9079  font-family: 'IBM Plex Mono', monospace;9080  font-style: normal;9081  font-size: 11px;9082  color: var(--peach-t3);9083  letter-spacing: 0.08em;9084  text-transform: uppercase;9085  cursor: pointer;9086}90879088.peach-notes-header-actions {9089  display: flex;9090  gap: 8px;9091  flex-shrink: 0;9092}90939094.peach-notes-header-btn {9095  width: 36px;9096  height: 36px;9097  display: flex;9098  align-items: center;9099  justify-content: center;9100  background: none;9101  border: none;9102  color: var(--peach-t2);9103  cursor: pointer;9104  border-radius: 8px;9105  font-size: 16px;9106  transition: color 150ms ease, background 150ms ease;9107  -webkit-tap-highlight-color: transparent;9108}91099110.peach-notes-header-btn:active {9111  background: rgba(255,255,255,0.06);9112  color: var(--peach-t0);9113}91149115/* The header + glyph is larger than the search svg so the two right-side9116 * buttons feel visually balanced. The base .peach-notes-header-btn caps font9117 * at 16px which would render the + too small. */9118.peach-notes-new-btn-icon {9119  font-size: 22px;9120  font-weight: 300;9121  line-height: 1;9122}91239124/* Inline search bar */9125.peach-notes-search-input {9126  flex: 1;9127  background: none;9128  border: none;9129  outline: none;9130  font-family: 'IBM Plex Mono', monospace;9131  font-size: 13px;9132  color: var(--peach-t0);9133  padding: 4px 0;9134  letter-spacing: 0.02em;9135}91369137.peach-notes-search-input::placeholder {9138  color: var(--peach-t3);9139}91409141/* TOC list */9142.peach-notes-list-container {9143  flex: 1;9144  overflow-y: auto;9145  overflow-x: hidden;9146  scrollbar-width: none;9147  -webkit-overflow-scrolling: touch;9148  overscroll-behavior: contain;9149  position: relative;9150  z-index: 1;9151}91529153.peach-notes-list-container::-webkit-scrollbar { display: none; }91549155/* Note row */9156.peach-note-row {9157  position: relative;9158  display: grid;9159  grid-template-columns: 44px 8px 1fr 8px auto;9160  align-items: center;9161  min-height: 72px;9162  padding: 16px 20px;9163  border-bottom: 0.5px solid var(--peach-border);9164  cursor: pointer;9165  overflow: hidden;9166  touch-action: pan-y;9167  user-select: none;9168  -webkit-user-select: none;9169  -webkit-tap-highlight-color: transparent;9170}91719172.peach-note-row:first-child {9173  border-top: 0.5px solid var(--peach-border);9174}91759176.peach-note-row:active {9177  background: rgba(255,255,255,0.02);9178}91799180.peach-note-numeral {9181  font-family: 'Cormorant Garamond', serif;9182  font-style: italic;9183  font-size: 15px;9184  color: var(--peach-accent);9185  text-align: right;9186  line-height: 1;9187  flex-shrink: 0;9188}91899190.peach-note-title-gap { /* grid spacer */ }91919192.peach-note-title {9193  font-family: 'Cormorant Garamond', serif;9194  font-style: italic;9195  font-size: 18px;9196  color: var(--peach-t0);9197  line-height: 1.3;9198  min-width: 0;9199  overflow-wrap: break-word;9200}92019202.peach-note-title-match {9203  color: var(--peach-accent);9204}92059206.peach-note-date {9207  font-family: 'IBM Plex Mono', monospace;9208  font-size: 11px;9209  color: var(--peach-t2);9210  white-space: nowrap;9211  text-align: right;9212  flex-shrink: 0;9213  grid-column: 5;9214}92159216/* Swipe underlays */9217.peach-note-row-underlay {9218  position: absolute;9219  inset: 0;9220  display: flex;9221  align-items: center;9222  padding: 0 24px;9223  font-family: 'IBM Plex Mono', monospace;9224  font-size: 11px;9225  letter-spacing: 0.1em;9226  pointer-events: none;9227  z-index: 0;9228}92299230.peach-note-row-underlay--delete {9231  background: #8B2020;9232  color: rgba(255,255,255,0.9);9233  justify-content: flex-end;9234}92359236.peach-note-row-underlay--archive {9237  background: var(--peach-accent);9238  color: #0C0A06;9239  justify-content: flex-start;9240}92419242/* Delete confirm strip */9243.peach-note-delete-confirm {9244  position: absolute;9245  inset: 0;9246  background: var(--peach-bg);9247  display: flex;9248  align-items: center;9249  gap: 12px;9250  padding: 0 20px;9251  font-family: 'IBM Plex Mono', monospace;9252  font-size: 11px;9253  color: var(--peach-t1);9254  letter-spacing: 0.04em;9255  animation: peach-delete-confirm-in 150ms ease both;9256  z-index: 10;9257}92589259@keyframes peach-delete-confirm-in {9260  from { opacity: 0; }9261  to   { opacity: 1; }9262}92639264.peach-note-delete-confirm-btn {9265  background: #8B2020;9266  color: rgba(255,255,255,0.9);9267  border: none;9268  border-radius: 6px;9269  padding: 4px 10px;9270  font-family: 'IBM Plex Mono', monospace;9271  font-size: 10px;9272  cursor: pointer;9273  letter-spacing: 0.06em;9274}92759276.peach-note-delete-cancel-btn {9277  background: none;9278  border: none;9279  color: var(--peach-t3);9280  font-family: 'IBM Plex Mono', monospace;9281  font-size: 10px;9282  cursor: pointer;9283  letter-spacing: 0.06em;9284  padding: 4px 6px;9285}92869287/* + New note button */9288.peach-notes-new-btn {9289  font-family: 'IBM Plex Mono', monospace;9290  font-size: 12px;9291  color: var(--peach-t3);9292  text-align: center;9293  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));9294  background: none;9295  border: none;9296  width: 100%;9297  cursor: pointer;9298  letter-spacing: 0.04em;9299  transition: color 150ms ease;9300  -webkit-tap-highlight-color: transparent;9301}93029303.peach-notes-new-btn:active { color: var(--peach-accent); }93049305/* Empty state */9306.peach-notes-empty {9307  display: flex;9308  flex-direction: column;9309  align-items: center;9310  justify-content: center;9311  flex: 1;9312  padding: 48px 32px;9313  gap: 16px;9314}93159316.peach-notes-empty-text {9317  font-family: 'Cormorant Garamond', serif;9318  font-style: italic;9319  font-size: 20px;9320  color: var(--peach-t3);9321  text-align: center;9322  margin: 0;9323  line-height: 1.4;9324  white-space: pre-line;9325}93269327/* ── Editor surface ── */93289329.peach-note-editor-surface {9330  position: absolute;9331  inset: 0;9332  background: var(--peach-bg);9333  display: flex;9334  flex-direction: column;9335  padding-top: env(safe-area-inset-top, 0px);9336}93379338.peach-note-editor-scroll {9339  flex: 1;9340  overflow-y: auto;9341  overflow-x: hidden;9342  scrollbar-width: none;9343  -webkit-overflow-scrolling: touch;9344  padding: 0 24px 120px;9345  position: relative;9346  z-index: 1;9347}93489349.peach-note-editor-scroll::-webkit-scrollbar { display: none; }93509351/* Desktop toolbar (always visible above body) */9352.peach-note-toolbar-desktop-inline {9353  display: flex;9354  align-items: center;9355  gap: 2px;9356  padding: 6px 0 12px;9357  margin-bottom: 4px;9358  border-bottom: 0.5px solid var(--peach-border);9359}93609361/* Title field */9362.peach-note-title-field {9363  font-family: 'Cormorant Garamond', serif;9364  font-style: italic;9365  font-size: 32px;9366  font-weight: 600;9367  color: var(--peach-t0);9368  line-height: 1.2;9369  padding: 8px 0 0;9370  outline: none;9371  min-height: 44px;9372  word-break: break-word;9373  position: relative;9374  z-index: 1;9375}93769377.peach-note-title-field:empty::before {9378  content: attr(data-placeholder);9379  color: var(--peach-t3);9380  pointer-events: none;9381}93829383/* Hairline separator */9384.peach-note-hairline {9385  height: 0.5px;9386  background: var(--peach-border);9387  margin: 12px 0 20px;9388  position: relative;9389  z-index: 1;9390}93919392/* Body field */9393.peach-note-body-field {9394  font-family: 'DM Sans', sans-serif;9395  font-size: 16px;9396  color: var(--peach-t0);9397  line-height: 1.85;9398  padding: 0;9399  outline: none;9400  min-height: 240px;9401  word-break: break-word;9402  position: relative;9403  z-index: 1;9404}94059406.peach-note-body-field:empty::before {9407  content: attr(data-placeholder);9408  color: var(--peach-t3);9409  font-style: italic;9410  pointer-events: none;9411}94129413.peach-note-body-field h2 {9414  font-family: 'Cormorant Garamond', serif;9415  font-style: italic;9416  font-size: 22px;9417  font-weight: 600;9418  color: var(--peach-t0);9419  margin: 20px 0 8px;9420}94219422.peach-note-body-field blockquote {9423  border-left: 2px solid var(--peach-accent);9424  margin: 12px 0;9425  padding-left: 16px;9426  color: var(--peach-t1);9427  font-style: italic;9428}94299430.peach-note-body-field ul,9431.peach-note-body-field ol {9432  padding-left: 20px;9433  margin: 8px 0;9434}94359436.peach-note-body-field li {9437  margin: 4px 0;9438}94399440.peach-note-body-field hr {9441  border: none;9442  border-top: 0.5px solid var(--peach-border);9443  margin: 16px 0;9444}94459446/* Saved indicator */9447.peach-note-saved-indicator {9448  font-family: 'IBM Plex Mono', monospace;9449  font-size: 11px;9450  color: var(--peach-t3);9451  letter-spacing: 0.04em;9452  text-align: right;9453  padding: 6px 24px;9454  flex-shrink: 0;9455  transition: opacity 300ms ease;9456  pointer-events: none;9457  position: relative;9458  z-index: 1;9459}94609461/* Mobile keyboard toolbar */9462.peach-note-toolbar-mobile {9463  display: flex;9464  align-items: center;9465  padding: 8px 16px;9466  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));9467  background: var(--peach-bg);9468  border-top: 0.5px solid var(--peach-border);9469  gap: 4px;9470  flex-shrink: 0;9471  position: relative;9472  z-index: 10;9473}94749475.peach-note-toolbar-btn {9476  min-width: 36px;9477  height: 36px;9478  display: flex;9479  align-items: center;9480  justify-content: center;9481  background: none;9482  border: none;9483  border-radius: 8px;9484  cursor: pointer;9485  font-size: 14px;9486  color: var(--peach-t1);9487  font-family: 'DM Sans', sans-serif;9488  font-weight: 600;9489  transition: background 100ms ease, color 100ms ease;9490  -webkit-tap-highlight-color: transparent;9491}94929493.peach-note-toolbar-btn--italic { font-style: italic; }9494.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }9495.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }94969497.peach-note-toolbar-divider {9498  width: 0.5px;9499  height: 20px;9500  background: var(--peach-border);9501  margin: 0 4px;9502  flex-shrink: 0;9503}95049505.peach-note-toolbar-spacer { flex: 1; }95069507/* Desktop: larger headline in TOC */9508@media (min-width: 400px) {9509  .peach-notes-header-title:not(.is-breadcrumb) {9510    font-size: 32px;9511  }95129513  .peach-note-row {9514    min-height: 64px;9515    padding: 14px 16px;9516  }9517}95189519/* Flying title — shared element during expansion/collapse */95209521/* ─── Light theme overrides ───────────────────────────────────────────────9522   Tokens that cannot be expressed as variable substitutions — hardcoded9523   context-specific values that need separate light-mode rules. */95249525/* Settings section headers: use text-label (#79766F) per restoration brief —9526   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY9527   presence without fighting the light parchment background. */9528.light .peach-settings-sub-label,9529[data-theme="light"] .peach-settings-sub-label,9530.light .peach-settings-nav-label,9531[data-theme="light"] .peach-settings-nav-label {9532  color: #79766F;9533}95349535/* Secondary action buttons (ghost / subtle): filled with input-well surface9536   so they read as recessed against the parchment card background. */9537.light .peach-btn--ghost:not(.peach-icon-btn),9538[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {9539  background: #EEE7DD;9540  border-color: #DDD5CB;9541  color: #1A1208;9542}9543.light .peach-icon-btn,9544[data-theme="light"] .peach-icon-btn {9545  background: transparent;9546  border-color: transparent;9547}9548.light .peach-btn--subtle,9549[data-theme="light"] .peach-btn--subtle {9550  background: #EEE7DD;9551  border-color: #DDD5CB;9552}95539554/* Wide secondary action button on the lock screen — override the9555   hardcoded dark-mode rgba values with warm parchment equivalents. */9556.light .peach-lock-secondary,9557[data-theme="light"] .peach-lock-secondary {9558  background: #EEE7DD;9559  border-color: #DDD5CB;9560  color: #1A1208;9561}9562.light .peach-lock-secondary:hover,9563[data-theme="light"] .peach-lock-secondary:hover {9564  background: #F0E9DF;9565}95669567/* Entry row hover: bg-row lifts the row above the card surface. */9568.light .peach-entry-row:hover,9569[data-theme="light"] .peach-entry-row:hover {9570  background: #F2EBE1;9571}9572.light .peach-entry-row.is-active,9573[data-theme="light"] .peach-entry-row.is-active {9574  background: #F2EBE1;9575}9576.light .peach-entry-row.is-selected,9577[data-theme="light"] .peach-entry-row.is-selected {9578  background: #F5EDE2;9579}95809581/* ──────────────────────────────────────────────────────────────────────────9582   Pair-device flow — bird-stage animation (Phase 1)9583   See src/popup/components/PairingBirds.tsx and the brief §6.2.9584   Three-act animation gated on the [data-phase] attribute of9585   .peach-pair-pair; child layers (birds, sound arcs, flight wave, dot)9586   each react via either pose class or visibility flag.9587   Tokens: accent surfaces use var(--peach-accent); bird illustration9588   colours are baked into the SVG per the brand-peach exception in §3.1.9589   ────────────────────────────────────────────────────────────────────── */95909591.peach-pair-pair {9592  position: absolute;9593  inset: 0;9594  z-index: 3;9595  display: flex;9596  flex-direction: column;9597  padding: 14px 12px 12px;9598  width: 100%;9599  box-sizing: border-box;9600  gap: 0;9601  background:9602    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9603    var(--peach-bg);9604  color: var(--peach-t0);9605  overflow-y: auto;9606  overflow-x: hidden;9607  scrollbar-width: none;9608  isolation: isolate;9609  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9610}9611@keyframes peach-pair-overlay-in {9612  from { opacity: 0; transform: translateY(8px); }9613  to   { opacity: 1; transform: translateY(0); }9614}9615.peach-pair-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9616.peach-pair-pair::before {9617  content: '';9618  position: absolute;9619  inset: 0;9620  border-radius: inherit;9621  pointer-events: none;9622  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9623  z-index: 0;9624}9625.peach-pair-pair > * { position: relative; z-index: 1; }96269627/* Header --------------------------------------------------------------- */9628.peach-pair-head {9629  display: flex; align-items: center; gap: 10px;9630}9631.peach-pair-back {9632  width: 32px; height: 32px;9633  display: inline-flex; align-items: center; justify-content: center;9634  background: transparent;9635  border: none;9636  border-radius: 8px;9637  color: var(--peach-t1);9638  cursor: pointer;9639  transition: color 0.15s ease, box-shadow 0.15s ease;9640}9641.peach-pair-back:hover {9642  color: var(--peach-accent);9643  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9644}9645.peach-pair-title {9646  font-family: var(--font-display, Georgia, serif);9647  font-style: italic;9648  font-size: 24px;9649  font-weight: 500;9650  letter-spacing: 0.005em;9651  color: var(--peach-t0);9652  line-height: 1;9653}9654.peach-pair-head-spacer { flex: 1; }96559656/* Chip row ------------------------------------------------------------- */9657.peach-pair-chip-row {9658  display: flex;9659  align-items: center;9660  justify-content: flex-start;9661  margin-top: 12px;9662}9663.peach-pair-chip {9664  display: inline-flex; align-items: center; gap: 8px;9665  padding: 5px 10px 5px 8px;9666  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9667  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9668  border-radius: 999px;9669  font-family: var(--peach-mono, ui-monospace, monospace);9670  font-size: 11px;9671  letter-spacing: 0.04em;9672  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9673}9674.peach-pair-chip-dot {9675  width: 6px; height: 6px; border-radius: 50%;9676  background: var(--peach-accent);9677  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9678}9679.peach-pair-chip[data-phase="paired"] {9680  background: color-mix(in srgb, #4f9eda 12%, transparent);9681  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9682  color: #76b6e8;9683}9684.peach-pair-chip[data-phase="paired"] .peach-pair-chip-dot {9685  background: #76b6e8;9686  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9687}9688.peach-pair-chip[data-phase="timeout"],9689.peach-pair-chip[data-phase="mic_denied"],9690.peach-pair-chip[data-phase="version_mismatch"],9691.peach-pair-chip[data-phase="handshake_failed"] {9692  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9693  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9694  color: var(--peach-warn, #d29257);9695}9696.peach-pair-chip[data-phase="timeout"] .peach-pair-chip-dot,9697.peach-pair-chip[data-phase="mic_denied"] .peach-pair-chip-dot,9698.peach-pair-chip[data-phase="version_mismatch"] .peach-pair-chip-dot,9699.peach-pair-chip[data-phase="handshake_failed"] .peach-pair-chip-dot {9700  background: var(--peach-warn, #d29257);9701  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9702}970397049705/* Bird stage ----------------------------------------------------------- */9706.peach-pair-stage {9707  position: relative;9708  height: 180px;9709  margin: 8px auto 18px;9710  width: 300px;9711  display: flex;9712  align-items: flex-end;9713  justify-content: center;9714}9715.peach-pair-bird-slot {9716  position: absolute;9717  bottom: 0;9718  width: 108px;9719  height: 108px;9720  transform-origin: 50% 95%;9721}9722.peach-pair-bird-slot-desktop { left: 12px; }9723.peach-pair-bird-slot-mobile { right: 12px; }9724.peach-pair-stage.act-handshake .peach-pair-bird-slot-desktop,9725.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop {9726  transform: translateX(6px);9727  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9728}9729.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop { --bb-x: 6px; }9730.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { --bb-x: -6px; }9731.peach-pair-stage.act-paired .peach-pair-bird-slot {9732  animation: peach-pair-happy-bob 1.2s ease-in-out infinite;9733}9734.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { animation-delay: 0.2s; }9735@keyframes peach-pair-happy-bob {9736  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9737  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9738}97399740/* Bird internal -------------------------------------------------------- */9741.peach-pair-bird {9742  width: 108px;9743  height: 108px;9744  transform-origin: 50% 95%;9745}9746.peach-pair-bird svg { width: 100%; height: 100%; overflow: visible; }97479748.peach-pair-bird-body {9749  transform-origin: 50% 80%;9750  animation: peach-pair-bird-bob 2.4s ease-in-out infinite;9751}9752.peach-pair-bird-pose-chirping .peach-pair-bird-body { animation-duration: 1.4s; }9753.peach-pair-bird-pose-happy .peach-pair-bird-body   { animation: peach-pair-bird-celebrate 0.9s ease-in-out infinite; }9754.peach-pair-bird-pose-attentive .peach-pair-bird-body { animation-duration: 2.0s; }97559756@keyframes peach-pair-bird-bob {9757  0%, 100% { transform: translateY(0) rotate(0deg); }9758  50%      { transform: translateY(-2px) rotate(-1deg); }9759}9760@keyframes peach-pair-bird-celebrate {9761  0%, 100% { transform: translateY(0) rotate(0deg); }9762  25%      { transform: translateY(-4px) rotate(-2deg); }9763  75%      { transform: translateY(-4px) rotate(2deg); }9764}97659766.peach-pair-bird-wing {9767  transform-origin: 50% 50%;9768  animation: peach-pair-bird-flap 0.9s ease-in-out infinite;9769}9770.peach-pair-bird-pose-happy .peach-pair-bird-wing { animation-duration: 0.35s; }9771.peach-pair-bird-pose-attentive .peach-pair-bird-wing { animation-duration: 1.4s; }9772@keyframes peach-pair-bird-flap {9773  0%, 100% { transform: scaleY(1); }9774  50%      { transform: scaleY(0.85); }9775}97769777.peach-pair-bird-head-group {9778  transform-origin: 95px 52px;9779  animation: peach-pair-bird-bob-head 2.6s ease-in-out infinite;9780}9781.peach-pair-bird-pose-chirping .peach-pair-bird-head-group { animation-duration: 0.45s; }9782.peach-pair-bird-pose-attentive .peach-pair-bird-head-group { animation: none; }9783@keyframes peach-pair-bird-bob-head {9784  0%, 100% { transform: rotate(0deg); }9785  50%      { transform: rotate(3deg); }9786}97879788.peach-pair-bird-eye-group { transform-origin: center; }9789.peach-pair-bird-blink { animation: peach-pair-bird-blink 4s ease-in-out infinite; }9790@keyframes peach-pair-bird-blink {9791  0%, 92%, 100% { transform: scaleY(1); }9792  95%           { transform: scaleY(0.1); }9793}97949795.peach-pair-bird-aura {9796  animation: peach-pair-bird-aura 2.6s ease-in-out infinite;9797}9798.peach-pair-bird-pose-happy .peach-pair-bird-aura { animation-duration: 1.4s; }9799@keyframes peach-pair-bird-aura {9800  0%, 100% { opacity: 0; }9801  50%      { opacity: 0.18; }9802}98039804.peach-pair-bird-tail {9805  transform-origin: 50% 100%;9806  animation: peach-pair-bird-tail-wag 3s ease-in-out infinite;9807}9808@keyframes peach-pair-bird-tail-wag {9809  0%, 100% { transform: rotate(0deg); }9810  50%      { transform: rotate(2deg); }9811}98129813.peach-pair-bird-pose-happy .peach-pair-bird-shadow { animation: peach-pair-bird-shadow-pulse 0.9s ease-in-out infinite; }9814@keyframes peach-pair-bird-shadow-pulse {9815  0%, 100% { transform: scaleX(1); opacity: 0.45; }9816  50%      { transform: scaleX(0.92); opacity: 0.3; }9817}98189819/* Per-pose variants --------------------------------------------------- */9820.peach-pair-bird-pose-sad .peach-pair-bird-head-group { transform: translateY(4px) rotate(8deg); }9821.peach-pair-bird-pose-sad .peach-pair-bird-tuft { transform: rotate(15deg) translateY(2px); }9822.peach-pair-bird-pose-sad .peach-pair-bird-tail { transform: rotate(8deg) translateY(2px); }9823.peach-pair-bird-pose-hidden { opacity: 0; }98249825/* Rest state — bird stage at idle pose, primary CTA + paired list */9826.peach-pair-pair[data-phase="idle"] .peach-pair-stage {9827  height: 160px;9828}98299830/* Sound arcs ----------------------------------------------------------- */9831.peach-pair-arcs {9832  position: absolute;9833  top: 18px;9834  width: 96px;9835  height: 70px;9836  pointer-events: none;9837}9838.peach-pair-arcs-right { right: -60px; }9839.peach-pair-arcs-left  { left: -60px; transform: scaleX(-1); }9840.peach-pair-arc {9841  position: absolute;9842  top: 50%;9843  left: 0;9844  width: 40px;9845  height: 40px;9846  margin-top: -20px;9847  border: 1.2px solid #f4d5a8;9848  border-color: transparent #f4d5a8 transparent transparent;9849  border-radius: 50%;9850  opacity: 0;9851  animation: peach-pair-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9852}9853@keyframes peach-pair-arc-expand {9854  0%   { transform: scale(0.4); opacity: 0; }9855  20%  { opacity: 0.9; }9856  100% { transform: scale(1.6); opacity: 0; }9857}98589859/* Flight wave ---------------------------------------------------------- */9860.peach-pair-flight-track {9861  position: absolute;9862  inset: 32px 36px 38px 36px;9863  pointer-events: none;9864}9865.peach-pair-flight-wave {9866  position: absolute;9867  top: 8px;9868  left: 76px;9869  right: 76px;9870  height: 60px;9871  width: auto;9872  opacity: 0;9873  transition: opacity 0.15s ease;9874  stroke: #f4d5a8;9875  fill: none;9876}9877.peach-pair-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9878.peach-pair-flight-wave.is-visible { opacity: 1; }9879.peach-pair-flight-path,9880.peach-pair-flight-path-2 {9881  stroke-dasharray: 240;9882  stroke-dashoffset: 240;9883  stroke-linecap: round;9884  fill: none;9885}9886.peach-pair-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9887.peach-pair-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9888.peach-pair-flight-wave.is-visible .peach-pair-flight-path {9889  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9890}9891.peach-pair-flight-wave.is-visible .peach-pair-flight-path-2 {9892  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9893}9894@keyframes peach-pair-fly {9895  0%   { stroke-dashoffset: 240; opacity: 0; }9896  20%  { opacity: 1; }9897  100% { stroke-dashoffset: -120; opacity: 0; }9898}98999900/* Connection dot ------------------------------------------------------- */9901.peach-pair-dot {9902  position: absolute;9903  top: 50%; left: 50%;9904  transform: translate(-50%, -50%);9905  width: 40px; height: 40px;9906  opacity: 0;9907  pointer-events: none;9908  transition: opacity 0.3s ease;9909  color: var(--peach-accent);9910}9911.peach-pair-dot.is-visible { opacity: 1; }9912.peach-pair-dot-glow {9913  position: absolute; top: 50%; left: 50%;9914  transform: translate(-50%, -50%);9915  width: 38px; height: 38px;9916  border-radius: 50%;9917  filter: blur(10px);9918  opacity: 0.55;9919  background: var(--peach-accent);9920  animation: peach-pair-dot-bloom 1.4s ease-out;9921}9922.peach-pair-dot-core {9923  position: absolute; top: 50%; left: 50%;9924  transform: translate(-50%, -50%);9925  width: 8px; height: 8px;9926  border-radius: 50%;9927  background: var(--peach-accent);9928  box-shadow: 0 0 12px currentColor;9929  animation: peach-pair-dot-core 1.4s ease-out;9930}9931.peach-pair-dot-ring {9932  position: absolute; top: 50%; left: 50%;9933  width: 60px; height: 60px;9934  transform: translate(-50%, -50%);9935  animation: peach-pair-dot-ring 1.4s linear;9936  stroke: var(--peach-accent);9937}9938@keyframes peach-pair-dot-bloom {9939  0%   { width: 4px; height: 4px; opacity: 0; }9940  35%  { width: 60px; height: 60px; opacity: 0.7; }9941  100% { width: 38px; height: 38px; opacity: 0.55; }9942}9943@keyframes peach-pair-dot-core {9944  0%   { width: 0; height: 0; }9945  35%  { width: 12px; height: 12px; }9946  100% { width: 8px; height: 8px; }9947}9948@keyframes peach-pair-dot-ring {9949  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9950  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9951  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9952}99539954/* Motes — drift upward across the stage */9955.peach-pair-motes {9956  position: absolute;9957  inset: 0;9958  pointer-events: none;9959}9960.peach-pair-mote {9961  position: absolute;9962  width: 2px; height: 2px;9963  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9964  border-radius: 50%;9965  bottom: 32px;9966  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9967  opacity: 0;9968  animation: peach-pair-mote-drift 6s linear infinite;9969  animation-delay: calc(var(--mote-i, 0) * 0.7s);9970}9971@keyframes peach-pair-mote-drift {9972  0%   { transform: translateY(0); opacity: 0; }9973  10%  { opacity: 0.6; }9974  90%  { opacity: 0.1; }9975  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9976}99779978/* Status copy ---------------------------------------------------------- */9979.peach-pair-copy-host {9980  margin: 4px 4px 10px;9981  text-align: center;9982  min-height: 50px;9983}9984.peach-pair-copy {9985  animation: peach-pair-copy-in 0.35s ease both;9986}9987@keyframes peach-pair-copy-in {9988  from { opacity: 0; transform: translateY(4px); }9989  to   { opacity: 1; transform: translateY(0); }9990}9991.peach-pair-headline {9992  font-family: var(--font-display, Georgia, serif);9993  font-style: italic;9994  font-size: 20px;9995  font-weight: 500;9996  line-height: 1.2;9997  letter-spacing: 0.005em;9998  color: var(--peach-t0);9999  margin-bottom: 6px;10000}10001.peach-pair-copy-listening .peach-pair-headline,10002.peach-pair-copy-chirping .peach-pair-headline,10003.peach-pair-copy-idle .peach-pair-headline {10004  font-family: inherit;10005  font-style: normal;10006  font-weight: 500;10007  font-size: 15px;10008  color: var(--peach-t0);10009  letter-spacing: 0;10010}10011.peach-pair-copy-paired .peach-pair-headline {10012  color: var(--peach-t0);10013  font-weight: 600;10014}10015.peach-pair-sub {10016  font-size: 12.5px;10017  line-height: 1.45;10018  color: var(--peach-t1);10019  max-width: 280px;10020  margin: 0 auto;10021  text-wrap: pretty;10022}1002310024/* Status action -------------------------------------------------------- */10025.peach-pair-action {10026  margin: 2px 4px 10px;10027  margin-top: auto;10028  display: flex;10029  flex-direction: column;10030  gap: 8px;10031}10032.peach-pair-action-waiting {10033  display: flex;10034  align-items: center;10035  justify-content: space-between;10036  gap: 12px;10037}10038.peach-pair-cancel {10039  min-width: 96px;10040}10041.peach-pair-listening {10042  display: inline-flex; align-items: center; gap: 4px;10043  font-family: var(--peach-mono, ui-monospace, monospace);10044  font-size: 9.5px;10045  text-transform: uppercase;10046  letter-spacing: 0.12em;10047  color: var(--peach-t1);10048  padding: 8px 10px;10049}10050.peach-pair-listen-dot {10051  width: 4px; height: 4px;10052  border-radius: 50%;10053  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);10054  animation: peach-pair-listen-pulse 1.2s ease-in-out infinite;10055}10056.peach-pair-listen-dot:nth-child(2) { animation-delay: 0.2s; }10057.peach-pair-listen-dot:nth-child(3) { animation-delay: 0.4s; }10058.peach-pair-listen-label { margin-left: 6px; }10059@keyframes peach-pair-listen-pulse {10060  0%, 100% { opacity: 0.25; transform: scale(0.9); }10061  50%      { opacity: 1;     transform: scale(1.15); }10062}1006310064.peach-pair-action-handshake {10065  display: flex;10066  flex-direction: column;10067  align-items: center;10068  gap: 8px;10069  padding: 8px 4px;10070}10071.peach-pair-meter {10072  width: 100%;10073  max-width: 280px;10074  height: 2px;10075  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);10076  border-radius: 2px;10077  position: relative;10078  overflow: hidden;10079}10080.peach-pair-meter-bar {10081  position: absolute;10082  top: 0; bottom: 0;10083  width: 30%;10084  left: -30%;10085  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);10086  animation: peach-pair-meter-sweep 1.4s ease-in-out infinite;10087}10088@keyframes peach-pair-meter-sweep {10089  0%   { left: -30%; }10090  100% { left: 100%; }10091}10092.peach-pair-meter-label {10093  font-family: var(--peach-mono, ui-monospace, monospace);10094  font-size: 9.5px;10095  text-transform: uppercase;10096  letter-spacing: 0.14em;10097  color: var(--peach-t1);10098}1009910100.peach-pair-action-paired {10101  display: flex;10102  align-items: center;10103  gap: 10px;10104}10105.peach-pair-device-confirm {10106  flex: 1;10107  display: inline-flex;10108  align-items: center;10109  gap: 8px;10110  padding: 9px 10px 9px 12px;10111  border-radius: 10px;10112  background: color-mix(in srgb, #76b6e8 12%, transparent);10113  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);10114  font-size: 12.5px;10115  color: var(--peach-t0);10116  min-width: 0;10117}10118.peach-pair-device-confirm-glyph {10119  display: inline-flex;10120  color: #76b6e8;10121}10122.peach-pair-device-confirm-name {10123  flex: 1;10124  overflow: hidden;10125  text-overflow: ellipsis;10126  white-space: nowrap;10127}10128.peach-pair-device-confirm-trust {10129  font-family: var(--peach-mono, ui-monospace, monospace);10130  font-size: 9.5px;10131  text-transform: uppercase;10132  letter-spacing: 0.1em;10133  color: #76b6e8;10134  padding: 2px 6px;10135  border-radius: 4px;10136  background: color-mix(in srgb, #76b6e8 14%, transparent);10137}10138.peach-pair-done {10139  min-width: 80px;10140}10141.peach-pair-retry {10142  align-self: center;10143  display: block;10144  margin: 6px auto 0;10145  min-width: 120px;10146}10147.peach-pair-mic-help {10148  font-size: 12px;10149  color: var(--peach-t1);10150  text-align: center;10151  max-width: 320px;10152  margin: 0 auto;10153}1015410155/* Rest state — bird stage at idle pose, primary CTA + paired list */10156.peach-pair-pair[data-phase="idle"] .peach-pair-stage {10157  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */10158  height: 160px;10159}10160.peach-pair-pair-start {10161  width: 100%;10162  display: inline-flex;10163  align-items: center;10164  justify-content: center;10165  gap: 8px;10166  padding: 11px 14px;10167  border-radius: 10px;10168  background: var(--peach-accent);10169  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);10170  color: #1a0905;10171  font-family: inherit;10172  font-size: 13px;10173  font-weight: 600;10174  letter-spacing: 0.01em;10175  cursor: pointer;10176  transition: filter 0.15s ease, transform 0.1s ease;10177}10178.peach-pair-pair-start:hover { filter: brightness(1.08); }10179.peach-pair-pair-start:active { transform: translateY(1px); }1018010181.peach-pair-paired-section {10182  margin-top: 14px;10183  display: flex;10184  flex-direction: column;10185  gap: 8px;10186}10187.peach-pair-paired-heading {10188  margin: 0;10189  font-family: var(--peach-mono, ui-monospace, monospace);10190  font-size: 10px;10191  font-weight: 500;10192  letter-spacing: 0.14em;10193  text-transform: uppercase;10194  color: var(--peach-t1);10195}1019610197/* Footer --------------------------------------------------------------- */10198.peach-pair-foot {10199  margin: 10px -4px -2px;10200  margin-top: auto;10201}10202.peach-pair-foot-divider {10203  height: 1px;10204  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);10205  margin-bottom: 10px;10206}10207.peach-pair-foot-text {10208  font-size: 11px;10209  line-height: 1.5;10210  color: var(--peach-t1);10211  text-align: center;10212  padding: 0 4px;10213  text-wrap: pretty;10214}1021510216/* Screen-reader-only live region. Kept off the visual flow but read by10217   assistive tech as the pairing phase advances. */10218.peach-sr-only {10219  position: absolute;10220  width: 1px; height: 1px;10221  padding: 0; margin: -1px;10222  overflow: hidden;10223  clip: rect(0, 0, 0, 0);10224  white-space: nowrap;10225  border: 0;10226}1022710228/* Reduced motion — stage simplifies to opacity transitions only */10229@media (prefers-reduced-motion: reduce) {10230  .peach-pair-bird-body,10231  .peach-pair-bird-head-group,10232  .peach-pair-bird-beak,10233  .peach-pair-bird-wing,10234  .peach-pair-bird-tuft,10235  .peach-pair-bird-tail,10236  .peach-pair-bird-eye-group,10237  .peach-pair-bird-aura,10238  .peach-pair-arc,10239  .peach-pair-flight-path,10240  .peach-pair-flight-path-2,10241  .peach-pair-dot-glow,10242  .peach-pair-dot-core,10243  .peach-pair-dot-ring,10244  .peach-pair-mote,10245  .peach-pair-meter-bar,10246  .peach-pair-listen-dot,10247  .peach-pair-bird-slot,10248  .peach-pair-bird-slot-mobile {10249    animation: none !important;10250    transition: opacity 0.2s linear !important;10251  }10252}1025310254/* ─────────────────────────────────────────────────────────────────10255   Settings → Sync surface. Wraps the same bird10256   animation used by the pairing flow with a paired-devices list and10257   the "Pair a device" CTA.10258   ───────────────────────────────────────────────────────────────── */10259.peach-pair-settings {10260  position: absolute;10261  inset: 0;10262  z-index: 3;10263  display: flex;10264  flex-direction: column;10265  gap: 18px;10266  padding: 14px 12px 12px;10267  width: 100%;10268  box-sizing: border-box;10269  overflow-y: auto;10270  overflow-x: hidden;10271  /* Same warm surface as the pairing screen — unifies the two views. */10272  background:10273    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),10274    var(--peach-bg);10275  color: var(--peach-t0);10276  isolation: isolate;10277  /* Hide native scrollbar — content fits 99% of the time and a chunky10278     gutter ruins the surface. */10279  scrollbar-width: none;10280  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;10281}10282.peach-pair-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }10283.peach-pair-settings::before {10284  content: '';10285  position: absolute;10286  inset: 0;10287  pointer-events: none;10288  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);10289  z-index: 0;10290}10291.peach-pair-settings > * { position: relative; z-index: 1; }1029210293.peach-pair-settings--pairing {10294  padding: 0;10295  align-items: stretch;10296  justify-content: stretch;10297  background: none;10298  isolation: auto;10299}10300.peach-pair-settings--pairing::before { display: none; }1030110302.peach-pair-settings-header {10303  display: flex;10304  align-items: center;10305  gap: 10px;10306}10307.peach-pair-settings-title {10308  margin: 0;10309  font-family: var(--font-display, Georgia, serif);10310  font-style: italic;10311  font-size: 24px;10312  font-weight: 500;10313  line-height: 1;10314  color: var(--peach-t0);10315  letter-spacing: 0.005em;10316}10317.peach-pair-settings-section {10318  margin: 6px 0 -4px;10319  font-size: 11px;10320  font-weight: 600;10321  letter-spacing: 0.08em;10322  text-transform: uppercase;10323  color: var(--peach-text-muted);10324}10325.peach-pair-settings-error {10326  font-size: 12px;10327  padding: 8px 10px;10328  border-radius: 8px;10329  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);10330  color: var(--peach-text);10331}10332.peach-pair-settings-footer {10333  margin-top: auto;10334  padding-top: 18px;10335  font-size: 11.5px;10336  line-height: 1.5;10337  color: var(--peach-text-muted);10338  text-align: center;10339}1034010341/* Hero card shown when no devices are paired yet. */10342.peach-pair-hero {10343  display: flex;10344  flex-direction: column;10345  align-items: center;10346  gap: 12px;10347  padding: 20px 12px 8px;10348  text-align: center;10349}10350.peach-pair-hero-svg {10351  display: block;10352  max-width: 100%;10353  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));10354}10355.peach-pair-hero-headline {10356  margin: 0;10357  font-family: var(--font-display, Georgia, serif);10358  font-style: italic;10359  font-size: 20px;10360  font-weight: 500;10361  line-height: 1.2;10362  letter-spacing: 0.005em;10363  color: var(--peach-t0);10364}10365.peach-pair-hero-sub {10366  margin: 0;10367  font-size: 13px;10368  line-height: 1.5;10369  color: var(--peach-t1);10370  max-width: 320px;10371  text-wrap: pretty;10372}1037310374.peach-pair-pair-cta {10375  display: flex;10376  justify-content: center;10377  padding: 4px 0 6px;10378}10379.peach-pair-pair-button {10380  display: inline-flex;10381  align-items: center;10382  gap: 8px;10383  min-width: 220px;10384  justify-content: center;10385}10386.peach-pair-pair-button-icon {10387  flex: 0 0 auto;10388}1038910390/* Paired devices list. Roomy rows that look at home next to the rest10391   of Settings; stale rows get a soft warm-warning border tint. */10392.peach-pair-device-list {10393  list-style: none;10394  margin: 0;10395  padding: 0;10396  display: flex;10397  flex-direction: column;10398  gap: 8px;10399}10400.peach-pair-device-row {10401  display: flex;10402  align-items: center;10403  gap: 12px;10404  padding: 12px;10405  border-radius: 10px;10406  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10407  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);10408}10409.peach-pair-device-row[data-stale="true"] {10410  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);10411}10412.peach-pair-device-icon {10413  width: 32px;10414  height: 32px;10415  display: flex;10416  align-items: center;10417  justify-content: center;10418  border-radius: 8px;10419  color: var(--peach-text);10420  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);10421}10422.peach-pair-device-info {10423  flex: 1;10424  display: flex;10425  flex-direction: column;10426  gap: 2px;10427  min-width: 0;10428}10429.peach-pair-device-name {10430  font-size: 14px;10431  font-weight: 600;10432  color: var(--peach-text);10433  overflow: hidden;10434  text-overflow: ellipsis;10435  white-space: nowrap;10436}10437.peach-pair-device-meta {10438  font-size: 11.5px;10439  color: var(--peach-text-muted);10440  display: flex;10441  flex-wrap: wrap;10442  align-items: center;10443  gap: 8px;10444}10445.peach-pair-device-badge {10446  font-size: 10.5px;10447  font-weight: 500;10448  letter-spacing: 0.02em;10449  padding: 2px 6px;10450  border-radius: 999px;10451  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);10452  color: var(--peach-text);10453}10454.peach-pair-device-stale {10455  font-size: 10.5px;10456  font-weight: 500;10457  color: var(--peach-warn, #d29257);10458}10459.peach-pair-device-remove {10460  flex: 0 0 auto;10461  color: var(--peach-text-muted);10462}10463.peach-pair-device-remove:hover {10464  color: var(--peach-danger, #c25b4a);10465}10466.peach-pair-unpair-confirm {10467  display: flex;10468  gap: 6px;10469  align-items: center;10470}1047110472/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10473.peach-pair-pro-card {10474  position: relative;10475  margin: 18px 12px;10476  padding: 18px 20px 22px;10477  border-radius: 22px;10478  background:10479    radial-gradient(140% 90% at 50% 0%,10480      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10481      transparent 60%),10482    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10483  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10484  box-shadow:10485    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10486    0 18px 40px -24px rgba(0, 0, 0, 0.45);10487  display: flex;10488  flex-direction: column;10489  align-items: center;10490  gap: 10px;10491  text-align: center;10492  overflow: hidden;10493}10494.peach-pair-pro-stage {10495  position: relative;10496  width: 220px;10497  height: 140px;10498  display: flex;10499  align-items: flex-end;10500  justify-content: center;10501  margin-bottom: 2px;10502}10503.peach-pair-pro-bird-slot {10504  width: 140px;10505  height: 132px;10506  display: flex;10507  align-items: flex-end;10508  justify-content: center;10509  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10510}10511.peach-pair-pro-bird-slot .peach-pair-bird {10512  width: 100%;10513  height: 100%;10514}10515.peach-pair-pro-bird-slot .peach-pair-bird svg {10516  width: 100%;10517  height: 100%;10518  overflow: visible;10519}10520.peach-pair-pro-headline {10521  margin: 4px 0 0;10522  font-family: var(--font-display, "Cormorant Garamond", serif);10523  font-style: italic;10524  font-size: 19px;10525  font-weight: 500;10526  letter-spacing: 0.01em;10527  color: var(--peach-t0);10528  max-width: 280px;10529  line-height: 1.25;10530}10531.peach-pair-pro-body {10532  margin: 0;10533  font-size: 13px;10534  line-height: 1.55;10535  color: var(--peach-t1);10536  max-width: 300px;10537}10538.peach-pair-pro-cta {10539  margin-top: 4px;10540}10541.peach-pair-pro-foot {10542  margin: 2px 0 0;10543  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10544  font-size: 0.625rem;10545  letter-spacing: 0.08em;10546  text-transform: uppercase;10547  color: var(--peach-t2);10548  opacity: 0.75;10549}1055010551/* Shell border and shadow in light mode: match dark mode's near-invisible10552   border weight so the popup frame looks the same in both themes. */10553.light .peach-shell,10554.light .peach-screen {10555  border-color: rgba(26, 18, 8, 0.07);10556  box-shadow:10557    0 2px 8px rgba(80, 56, 32, 0.08),10558    0 14px 48px rgba(80, 56, 32, 0.10),10559    0 0 0 1px rgba(26, 18, 8, 0.04);10560}1056110562/* HOLE 4: the revoke confirmation carries its own disclosure, so it needs the10563   full row width rather than sitting inline beside the device name. */10564.peach-settings-row:has(> .peach-unpair-confirm) { flex-wrap: wrap; }10565.peach-unpair-confirm {10566  display: flex;10567  flex-direction: column;10568  gap: 8px;10569  width: 100%;10570}10571.peach-unpair-confirm-note {10572  margin: 0;10573  font-size: 0.6875rem;10574  line-height: 1.5;10575  color: var(--peach-t2);10576}1057710578/* Sync mode selector — three named choices (public / private / off). Replaces10579   the old binary "local network only" toggle; see docs/sync-lan-retirement.md. */10580.peach-sync-mode {10581  display: flex;10582  align-items: flex-start;10583  gap: 10px;10584  width: 100%;10585  text-align: left;10586  padding: 10px 12px;10587  margin-top: 8px;10588  border-radius: 10px;10589  border: 1px solid var(--peach-border);10590  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);10591  color: var(--peach-t1);10592  cursor: pointer;10593  transition: border-color var(--peach-dur-80) var(--peach-curve-arrival),10594              background-color var(--peach-dur-80) var(--peach-curve-arrival);10595}10596.peach-sync-mode:hover:not(:disabled) {10597  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);10598}10599.peach-sync-mode.is-active {10600  border-color: var(--peach-accent);10601  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);10602}10603.peach-sync-mode:disabled { opacity: 0.6; cursor: default; }10604.peach-sync-mode-main { display: flex; flex-direction: column; gap: 3px; flex: 1; }10605.peach-sync-mode-title { font-size: 12px; }10606.peach-sync-mode-sub {10607  font-size: 11px;10608  line-height: 1.5;10609  color: var(--peach-t2);10610}10611.peach-sync-mode-pip {10612  flex: none;10613  margin-top: 3px;10614  width: 12px; height: 12px;10615  border-radius: 50%;10616  border: 1px solid var(--peach-t3);10617}10618.peach-sync-mode.is-active .peach-sync-mode-pip {10619  border-color: var(--peach-accent);10620  background:10621    radial-gradient(circle at 50% 50%, var(--peach-accent) 0 42%, transparent 44%);10622}10623.peach-sync-mode-disclosure {10624  margin: 10px 2px 0;10625  font-size: 11px;10626  line-height: 1.5;10627  color: var(--peach-t2);10628}10629.peach-sync-mode-warn { color: var(--peach-breach); }1063010631/* Compact form, used mid-pairing: a quiet line, not a decision to make. */10632.peach-sync-mode-summary {10633  margin: 8px 2px 0;10634  font-size: 11px;10635  color: var(--peach-t2);10636  text-align: center;10637}10638.peach-sync-mode-change {10639  background: none;10640  border: none;10641  padding: 0;10642  font: inherit;10643  color: var(--peach-accent);10644  text-decoration: underline;10645  cursor: pointer;10646}