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-mark {3742  width: 40px;3743  height: 40px;3744  margin: 0 auto 6px;3745  display: block;3746}37473748.peach-lock-eyebrow {3749  display: inline-flex;3750  align-items: center;3751  width: fit-content;3752  margin: 0 auto;3753  padding: 4px 9px;3754  border-radius: 999px;3755  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3756  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3757  color: var(--peach-t0);3758  font-family: "IBM Plex Mono", monospace;3759  font-weight: 600;3760  font-size: 0.55rem;3761  letter-spacing: 0.14em;3762  text-transform: uppercase;3763}37643765.peach-lock-label-row {3766  display: flex;3767  align-items: center;3768  justify-content: space-between;3769  margin-bottom: 0;3770}37713772.peach-lock-reveal-btn {3773  display: inline-flex;3774  align-items: center;3775  gap: 4px;3776  background: none;3777  border: none;3778  cursor: pointer;3779  font-family: "IBM Plex Mono", monospace;3780  font-size: 0.5625rem;3781  letter-spacing: 0.06em;3782  color: var(--peach-t2);3783  padding: 2px 0;3784  transition: color 150ms ease;3785}37863787.peach-lock-reveal-btn:hover {3788  color: var(--peach-t1);3789}37903791.peach-lock-warning {3792  color: rgba(220, 80, 60, 0.85) !important;3793  line-height: 1.5;3794}37953796.peach-onboarding-cards {3797  display: grid;3798  gap: 8px;3799  position: relative;3800  z-index: 1;3801}38023803.peach-lock-panel {3804  position: relative;3805  z-index: 1;3806  display: grid;3807  gap: 9px;3808  padding: 14px 16px 15px;3809  border-radius: 18px;3810  border: 1px solid var(--peach-t3);3811  background:3812    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3813  box-shadow:3814    inset 0 1px 0 rgba(240, 232, 216, 0.04),3815    0 12px 28px rgba(0, 0, 0, 0.12);3816}38173818/* Glass surface — lock panel and settings groups */3819.peach-glass {3820  background: rgba(26, 20, 16, 0.65);3821  border: 1px solid rgba(255, 255, 255, 0.08);3822  border-radius: 12px;3823  backdrop-filter: blur(12px) saturate(1.4);3824  -webkit-backdrop-filter: blur(12px) saturate(1.4);3825}38263827@supports not (backdrop-filter: blur(1px)) {3828  .peach-glass {3829    background: rgba(26, 20, 16, 0.92);3830    border: 1px solid rgba(255, 255, 255, 0.10);3831    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3832  }3833}38343835.light .peach-glass,3836[data-theme="light"] .peach-glass {3837  background: rgba(240, 233, 223, 0.72);3838  border: 1px solid rgba(26, 18, 8, 0.08);3839  backdrop-filter: blur(12px) saturate(1.2);3840  -webkit-backdrop-filter: blur(12px) saturate(1.2);3841}38423843@supports not (backdrop-filter: blur(1px)) {3844  .light .peach-glass,3845  [data-theme="light"] .peach-glass {3846    background: rgba(240, 233, 223, 0.97);3847    border: 1px solid rgba(26, 18, 8, 0.10);3848  }3849}38503851/* Lock panel keeps its own border-radius over the generic glass token */3852.peach-lock-panel.peach-glass {3853  border-radius: 18px;3854  background: rgba(26, 20, 16, 0.65);3855  border: 1px solid rgba(255, 255, 255, 0.08);3856  box-shadow:3857    inset 0 1px 0 rgba(255, 255, 255, 0.05),3858    0 12px 28px rgba(0, 0, 0, 0.3);3859}38603861.light .peach-lock-panel.peach-glass,3862[data-theme="light"] .peach-lock-panel.peach-glass {3863  background: rgba(240, 233, 223, 0.82);3864  border: 1px solid rgba(26, 18, 8, 0.08);3865  box-shadow:3866    inset 0 1px 0 rgba(255, 255, 255, 0.4),3867    0 8px 24px rgba(80, 56, 32, 0.15);3868}38693870@supports not (backdrop-filter: blur(1px)) {3871  .peach-lock-panel.peach-glass {3872    background: rgba(26, 20, 16, 0.92);3873    box-shadow:3874      inset 0 1px 0 rgba(255, 255, 255, 0.05),3875      0 12px 28px rgba(0, 0, 0, 0.4);3876  }3877  .light .peach-lock-panel.peach-glass,3878  [data-theme="light"] .peach-lock-panel.peach-glass {3879    background: rgba(240, 233, 223, 0.98);3880  }3881}38823883.peach-lock-panel--secondary {3884  gap: 12px;3885}38863887.peach-lock-panel-header {3888  display: flex;3889  align-items: baseline;3890  justify-content: space-between;3891  gap: 12px;3892}38933894.peach-lock-option-grid {3895  display: grid;3896  gap: 10px;3897}38983899.peach-lock-option {3900  width: 100%;3901  display: grid;3902  gap: 6px;3903  padding: 14px 15px;3904  border-radius: 16px;3905  border: 1px solid rgba(240, 232, 216, 0.08);3906  background: rgba(240, 232, 216, 0.02);3907  color: var(--peach-t0);3908  text-align: left;3909  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3910}39113912.peach-lock-option:hover {3913  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3914  background: rgba(240, 232, 216, 0.04);3915  transform: translateY(-1px);3916}39173918.peach-lock-option-title {3919  font-size: 0.75rem;3920  color: var(--peach-t0);3921}39223923.peach-lock-option-copy {3924  font-size: 0.6875rem;3925  line-height: 1.55;3926  color: var(--peach-t1);3927}39283929.peach-onboarding-stack {3930  margin-top: 2px;3931}3932.peach-lock-panel-footer {3933  display: grid;3934  gap: 6px;3935  margin-top: 2px;3936  padding-top: 10px;3937  border-top: 1px solid rgba(240, 232, 216, 0.06);3938}39393940/* ── Restore tab view ─────────────────────────────────────────────────────3941   Tab-based restore screen replacing the old three-card picker. */39423943.peach-restore-tabview {3944  overflow: hidden;3945}39463947.peach-restore-tabcard {3948  flex: 1;3949  display: flex;3950  flex-direction: column;3951  gap: 0;3952  padding: 0;3953  overflow: hidden;3954  cursor: default;3955  user-select: none;3956  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3957}39583959/* ── Tab selector ─────────────────────────────────────────────────────── */39603961.peach-restore-tabs {3962  display: flex;3963  justify-content: space-around;3964  padding: 14px 10px 10px;3965  border-bottom: 1px solid var(--peach-t3);3966  gap: 2px;3967  overflow: hidden;3968  scrollbar-width: none;3969}3970.peach-restore-tabs::-webkit-scrollbar { display: none; }39713972.peach-restore-tab {3973  background: none;3974  border: none;3975  cursor: pointer;3976  padding: 3px 2px;3977  font-family: 'Cormorant Garamond', Georgia, serif;3978  font-style: italic;3979  font-size: 11px;3980  color: var(--peach-t2);3981  transition: color 150ms ease, text-shadow 150ms ease;3982  flex: 1;3983  min-width: 0;3984  text-align: center;3985  white-space: nowrap;3986  overflow: hidden;3987  text-overflow: ellipsis;3988}3989.peach-restore-tab:hover {3990  color: var(--peach-accent);3991  text-shadow:3992    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3993    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3994}3995.peach-restore-tab.is-active {3996  color: var(--peach-accent);3997  text-shadow:3998    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3999    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);4000}40014002/* ── Content area ─────────────────────────────────────────────────────── */40034004.peach-restore-content {4005  padding: 16px 16px 14px;4006  display: flex;4007  flex-direction: column;4008  gap: 8px;4009  overflow: hidden;4010  scrollbar-width: none;4011  flex: 1;4012}4013.peach-restore-content::-webkit-scrollbar { display: none; }4014.peach-restore-content > * {4015  overflow: hidden;4016  scrollbar-width: none;4017}4018.peach-restore-content > *::-webkit-scrollbar { display: none; }40194020/* ── Shared tab inner layout ──────────────────────────────────────────── */40214022.peach-rt-symbols,4023.peach-rt-csv,4024.peach-rt-phone,4025.peach-restore-codex {4026  display: flex;4027  flex-direction: column;4028  gap: 8px;4029  overflow: hidden;4030}40314032.peach-restore-codex {4033  min-height: 0;4034  justify-content: center;4035}40364037.peach-restore-codex-title {4038  margin: 0;4039  font-family: var(--font-display);4040  font-size: 1rem;4041  font-style: italic;4042  color: var(--peach-t0);4043}40444045.peach-restore-codex-copy {4046  margin: 0;4047  font-size: 0.75rem;4048  line-height: 1.5;4049  color: var(--peach-t1);4050}40514052.peach-restore-codex-button {4053  width: 100%;4054  justify-content: center;4055}40564057.peach-rt-submit {4058  width: 100%;4059}40604061.peach-rt-error {4062  margin: 0;4063  font-size: 0.6875rem;4064  color: var(--peach-breach);4065  line-height: 1.4;4066}40674068/* ── PeachScript tab ──────────────────────────────────────────────────── */40694070.peach-restore-symbols-textarea {4071  font-family: 'PeachScript', monospace;4072  font-size: 13px;4073  line-height: 1.9;4074  letter-spacing: 0.1em;4075  word-break: break-all;4076  resize: none;4077  width: 100%;4078  min-height: 56px;4079  max-height: 72px;4080  overflow: hidden;4081  scrollbar-width: none;4082  -ms-overflow-style: none;4083  box-sizing: border-box;4084  padding: 6px 8px;4085  border-radius: 8px;4086  border: 1px solid var(--peach-t3);4087  background: rgba(240, 232, 216, 0.03);4088  color: var(--peach-t0);4089}4090.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }4091.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40924093.peach-restore-symbols-pass {4094  width: 100%;4095  box-sizing: border-box;4096  padding: 7px 10px;4097  border-radius: 8px;4098  border: 1px solid var(--peach-t3);4099  background: rgba(240, 232, 216, 0.03);4100  color: var(--peach-t0);4101  font-size: 0.8125rem;4102}4103.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }4104.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }41054106.peach-rt-divider {4107  text-align: center;4108  font-size: 0.6875rem;4109  color: var(--peach-t2);4110  font-style: italic;4111}41124113.peach-rt-file-label {4114  width: 100%;4115  justify-content: center;4116}41174118.peach-rt-anim-canvas {4119  width: 100%;4120  height: 180px;4121  border-radius: 10px;4122  overflow: hidden;4123  display: block;4124}41254126/* ── CSV tab ──────────────────────────────────────────────────────────── */41274128.peach-rt-csv-sources {4129  margin: 0;4130  font-size: 0.6875rem;4131  color: var(--peach-t2);4132  line-height: 1.5;4133  text-align: center;4134}41354136.peach-rt-csv-warning {4137  margin: 0;4138  font-family: "IBM Plex Mono", monospace;4139  font-size: 0.5625rem;4140  letter-spacing: 0.12em;4141  color: var(--peach-breach);4142  text-align: center;4143}41444145/* ── From Phone tab ───────────────────────────────────────────────────── */41464147.peach-rt-phone-code {4148  margin: 0;4149  text-align: center;4150  font-family: "IBM Plex Mono", monospace;4151  font-size: 22px;4152  letter-spacing: 0.18em;4153  color: var(--peach-t0);4154}41554156.peach-rt-phone-qr {4157  display: block;4158  width: 96px;4159  height: 96px;4160  margin: 0 auto;4161  border-radius: 6px;4162  image-rendering: pixelated;4163  overflow: hidden;4164}41654166.peach-rt-phone-hint {4167  margin: 0;4168  font-size: 0.6875rem;4169  color: var(--peach-t2);4170  line-height: 1.55;4171  text-align: center;4172}41734174/* ── Intro popup ──────────────────────────────────────────────────────── */41754176.peach-restore-intro-overlay {4177  position: absolute;4178  inset: 0;4179  z-index: 100;4180  display: flex;4181  align-items: center;4182  justify-content: center;4183  padding: 20px;4184  background: rgba(12, 10, 6, 0.7);4185  backdrop-filter: blur(4px);4186  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4187}41884189.peach-restore-intro-card {4190  width: 100%;4191  display: flex;4192  flex-direction: column;4193  gap: 12px;4194  padding: 22px 20px 20px;4195  border-radius: 16px;4196  border: 1px solid var(--peach-t3);4197  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));4198  backdrop-filter: blur(4px);4199  -webkit-backdrop-filter: blur(4px);4200  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);4201}42024203.peach-restore-intro-headline {4204  margin: 0;4205  font-family: var(--font-display);4206  font-style: italic;4207  font-size: 20px;4208  font-weight: 400;4209  color: var(--peach-t0);4210}42114212.peach-restore-intro-body {4213  display: flex;4214  flex-direction: column;4215  gap: 8px;4216}4217.peach-restore-intro-body p {4218  margin: 0;4219  font-size: 0.75rem;4220  color: var(--peach-t1);4221  line-height: 1.5;4222}42234224.peach-restore-intro-btn {4225  width: 100%;4226  margin-top: 4px;4227}42284229/* Snapshot restore panel */4230.peach-snapshot-panel {4231  gap: 10px;4232  overflow-y: auto;4233  max-height: 340px;4234}4235.peach-snapshot-list {4236  display: flex;4237  flex-direction: column;4238  gap: 4px;4239}4240.peach-snapshot-row {4241  display: flex;4242  align-items: center;4243  justify-content: space-between;4244  width: 100%;4245  padding: 8px 10px;4246  border-radius: 8px;4247  border: 1px solid rgba(240, 232, 216, 0.07);4248  background: transparent;4249  cursor: pointer;4250  transition: border-color 120ms, background 120ms;4251  text-align: left;4252  gap: 8px;4253}4254.peach-snapshot-row:hover {4255  border-color: rgba(240, 232, 216, 0.14);4256  background: rgba(240, 232, 216, 0.03);4257}4258.peach-snapshot-row.is-selected {4259  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4260  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4261}4262.peach-snapshot-time {4263  font-size: 11.5px;4264  color: var(--peach-t0);4265  flex: 1;4266}4267.peach-snapshot-count {4268  font-family: "IBM Plex Mono", monospace;4269  font-size: 0.625rem;4270  color: var(--peach-t2);4271  flex-shrink: 0;4272}4273.peach-snapshot-confirm {4274  display: flex;4275  flex-direction: column;4276  gap: 8px;4277  padding-top: 10px;4278  border-top: 1px solid rgba(240, 232, 216, 0.06);4279}4280.peach-snapshot-warning {4281  display: flex;4282  align-items: flex-start;4283  gap: 6px;4284  font-size: 10.5px;4285  color: rgba(220, 80, 60, 0.85);4286  line-height: 1.55;4287}4288.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4289.peach-snapshot-confirm-row {4290  display: flex;4291  gap: 6px;4292  align-items: center;4293}4294.peach-snapshot-restore-btn {4295  width: 100%;4296}4297.peach-lock-hero--unlock .peach-lock-hero-art {4298  display: none;4299}43004301.peach-card {4302  border: 1px solid var(--peach-t3);4303  border-radius: 18px;4304  background:4305    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4306  box-shadow:4307    inset 0 0 0 1px var(--peach-border-accent),4308    inset 0 1px 0 rgba(240, 232, 216, 0.04),4309    0 12px 32px rgba(0, 0, 0, 0.14);4310  overflow: hidden;4311}43124313.peach-card-active {4314  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4315  box-shadow:4316    inset 0 1px 0 rgba(240, 232, 216, 0.05),4317    0 16px 38px rgba(0, 0, 0, 0.18),4318    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4319}43204321.peach-card-disabled {4322  opacity: 0.72;4323}43244325.peach-card-header {4326  width: 100%;4327  padding: 13px 16px 11px;4328  background: transparent;4329  color: var(--peach-t0);4330  display: flex;4331  justify-content: space-between;4332  align-items: center;4333  text-align: left;4334  font-size: 0.75rem;4335}43364337.peach-card-body {4338  padding: 0 16px 16px;4339  display: grid;4340  gap: 9px;4341}43424343.peach-card-tag {4344  color: var(--peach-t2);4345  font-family: "IBM Plex Mono", monospace;4346  font-size: 0.5625rem;4347  letter-spacing: 0.12em;4348  text-transform: uppercase;4349}43504351.peach-empty-copy {4352  display: grid;4353  gap: 6px;4354  color: var(--peach-t1);4355  font-size: 0.8125rem;4356}43574358.peach-lock-submit {4359  width: 100%;4360  box-shadow:4361    0 1px 0 rgba(255,255,255,0.10) inset,4362    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4363    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4364    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4365}43664367.peach-lock-secondary {4368  width: 100%;4369  border-color: var(--peach-t3);4370  background: rgba(240, 232, 216, 0.02);4371}43724373.peach-lock-secondary:hover {4374  background: rgba(240, 232, 216, 0.04);4375}43764377.peach-lock-note {4378  max-width: none;4379  line-height: 1.55;4380  margin: 0;4381}43824383.peach-overlay-action {4384  font-size: 0.625rem;4385  padding: 4px 8px;4386  letter-spacing: 0.06em;4387  min-width: 44px;4388  text-align: center;4389}43904391.peach-inline-action {4392  flex-shrink: 0;4393  font-size: 0.5625rem;4394  letter-spacing: 0.1em;4395  text-transform: uppercase;4396  padding: 4px 7px;4397}4398.peach-password-toggle-btn {4399  display: inline-flex;4400  align-items: center;4401  justify-content: center;4402  min-width: 30px;4403  min-height: 26px;4404  padding: 0 7px;4405  border: 1px solid var(--peach-t3);4406  border-radius: 999px;4407  background: rgba(240, 232, 216, 0.04);4408  color: var(--peach-t2);4409  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4410}4411.peach-password-toggle-btn:hover {4412  border-color: var(--peach-t2);4413  color: var(--peach-t0);4414  background: rgba(240, 232, 216, 0.06);4415}44164417.peach-new-textarea {4418  width: 100%;4419  min-height: 88px;4420  resize: vertical;4421  border: 0;4422  outline: none;4423  background: transparent;4424  color: var(--peach-t1);4425  font-family: "IBM Plex Mono", monospace;4426  font-size: 0.75rem;4427  line-height: 1.65;4428  caret-color: var(--peach-accent);4429}44304431.peach-new-textarea::placeholder {4432  color: var(--peach-t2);4433  opacity: 0.7;4434}44354436.peach-settings-actions {4437  display: grid;4438  gap: 8px;4439}44404441.peach-sync-section-label {4442  font-size: 0.6875rem;4443  color: var(--peach-t2);4444  text-transform: uppercase;4445  letter-spacing: 0.05em;4446}44474448.peach-sync-network-note {4449  margin: 0 0 6px;4450  font-size: 0.75rem;4451  color: var(--peach-t2);4452  line-height: 1.4;4453}44544455.peach-settings-row--tappable {4456  background: none;4457  border: none;4458  width: 100%;4459  text-align: left;4460  cursor: pointer;4461  color: var(--peach-t1);4462  font-size: 0.8125rem;4463}4464.peach-settings-row--tappable:hover {4465  color: var(--peach-t0);4466}44674468.peach-sync-pro-hint {4469  display: flex;4470  flex-direction: column;4471  align-items: flex-start;4472  gap: 8px;4473  padding: 12px 0 4px;4474}44754476.peach-sync-device-row {4477  display: flex;4478  justify-content: space-between;4479  align-items: center;4480  padding: 6px 0;4481  border-bottom: 1px solid var(--peach-t3);4482}44834484.peach-sync-device-info {4485  display: flex;4486  flex-direction: column;4487  gap: 2px;4488}44894490.peach-sync-device-name {4491  font-size: 0.8125rem;4492  color: var(--peach-t0);4493}44944495.peach-sync-device-meta {4496  font-size: 0.6875rem;4497  color: var(--peach-t2);4498}44994500.peach-sync-status-dot {4501  display: inline-block;4502  width: 8px;4503  height: 8px;4504  border-radius: 50%;4505  vertical-align: middle;4506}45074508.peach-sync-remove-btn {4509  color: var(--peach-breach);4510}45114512.peach-sync-advanced-row {4513  display: flex;4514  justify-content: space-between;4515  align-items: center;4516  padding: 6px 0;4517  gap: 12px;4518}45194520.peach-sync-advanced-info {4521  display: flex;4522  flex-direction: column;4523  gap: 2px;4524  flex: 1;4525}45264527.peach-sync-advanced-name {4528  font-size: 0.8125rem;4529  color: var(--peach-t0);4530}45314532.peach-sync-reset-confirm {4533  display: flex;4534  flex-direction: column;4535  gap: 8px;4536  padding: 10px;4537  border: 1px solid var(--peach-breach);4538  border-radius: 10px;4539  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4540}45414542.peach-sync-reset-confirm-headline {4543  font-size: 0.8125rem;4544  font-weight: 600;4545  color: var(--peach-t0);4546  margin: 0;4547}45484549.peach-sync-reset-confirm-body {4550  font-size: 0.75rem;4551  color: var(--peach-t1);4552  margin: 0;4553  line-height: 1.4;4554}45554556.peach-btn--danger {4557  background: var(--peach-breach);4558  color: #fff;4559  border-color: var(--peach-breach);4560}4561.peach-btn--danger:hover:not(:disabled) {4562  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4563}4564.peach-btn--danger:disabled {4565  opacity: 0.55;4566  cursor: not-allowed;4567}45684569.peach-sync-hero-icon {4570  color: var(--peach-t1);4571  opacity: 0.85;4572}45734574.peach-import-preview {4575  margin-bottom: 12px;4576  max-height: 152px;4577  overflow-y: auto;4578  border: 1px solid var(--peach-t3);4579  border-radius: 10px;4580  padding: 8px 10px;4581  display: grid;4582  gap: 8px;4583  background: rgba(240, 232, 216, 0.02);4584}45854586.peach-import-preview-row {4587  display: flex;4588  justify-content: space-between;4589  gap: 10px;4590  font-size: 0.6875rem;4591  color: var(--peach-t1);4592}45934594.peach-import-preview-title {4595  color: var(--peach-t0);4596  flex: 1;4597  min-width: 0;4598  overflow: hidden;4599  text-overflow: ellipsis;4600  white-space: nowrap;4601}46024603.peach-import-preview-meta {4604  color: var(--peach-t2);4605  flex-shrink: 0;4606  max-width: 42%;4607  overflow: hidden;4608  text-overflow: ellipsis;4609  white-space: nowrap;4610}46114612.peach-import-preview-more {4613  color: var(--peach-t2);4614  font-size: 0.625rem;4615}46164617.peach-restore-copy {4618  margin: 0;4619  color: var(--peach-t1);4620  font-size: 0.6875rem;4621  line-height: 1.6;4622}46234624.peach-restore-warning {4625  padding: 10px 12px;4626  border-radius: 12px;4627  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4628  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4629  color: var(--peach-t0);4630  font-size: 0.6875rem;4631  line-height: 1.55;4632}46334634.peach-provider-chips {4635  display: flex;4636  flex-wrap: wrap;4637  gap: 6px;4638}46394640.peach-provider-chip {4641  display: inline-flex;4642  align-items: center;4643  padding: 5px 8px;4644  border-radius: 999px;4645  border: 1px solid var(--peach-t3);4646  background: rgba(240, 232, 216, 0.02);4647  color: var(--peach-t1);4648  font-family: "IBM Plex Mono", monospace;4649  font-size: 0.5rem;4650  letter-spacing: 0.08em;4651  text-transform: uppercase;4652}46534654.peach-restore-file,4655.peach-restore-input {4656  width: 100%;4657  border-radius: 10px;4658  border: 1px solid var(--peach-t3);4659  background: var(--peach-s2);4660  color: var(--peach-t0);4661  font-size: 0.75rem;4662}46634664.peach-restore-file {4665  padding: 9px 10px;4666}46674668.peach-restore-file::file-selector-button {4669  margin-right: 10px;4670  padding: 7px 10px;4671  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4672  border-radius: 999px;4673  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4674  color: var(--peach-t0);4675  font-size: 0.625rem;4676  letter-spacing: 0.08em;4677  text-transform: uppercase;4678  cursor: pointer;4679}46804681.peach-restore-input {4682  padding: 10px 12px;4683}46844685.peach-auth-grid {4686  display: grid;4687  gap: 10px;4688}46894690.peach-import-summary {4691  color: var(--peach-t1);4692  font-size: 0.75rem;4693  line-height: 1.6;4694  margin-bottom: 12px;4695}46964697.peach-restore-error {4698  color: rgba(220, 80, 60, 0.95);4699  font-size: 0.75rem;4700  line-height: 1.55;4701}47024703.peach-passkey-card {4704  max-width: 400px;4705  margin: auto 16px;4706  align-self: center;4707  width: calc(100% - 32px);4708}47094710/* Center the approval card vertically inside the overlay-view (which sets4711 * flex-direction: column without justify-content). Without this, the card4712 * sits at the top with a tall empty band below — looks unfinished on the4713 * 320px popup. */4714.peach-overlay-view:has(.peach-passkey-card) {4715  justify-content: center;4716}47174718.peach-pro-badge {4719  padding: 2px 6px;4720  border-radius: 999px;4721  font-family: var(--font-ui);4722  font-size: 0.625rem;4723  letter-spacing: 0.08em;4724  text-transform: uppercase;4725  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4726  color: var(--peach-accent);4727}47284729/* ── Shortcuts rebind table ─────────────────────────────────── */4730.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4731.peach-shortcut-row {4732  display: flex;4733  align-items: center;4734  gap: 10px;4735  padding: 6px 0;4736}4737.peach-shortcut-row-label {4738  flex: 1;4739  font-size: 0.75rem;4740  color: var(--peach-t0);4741}4742.peach-shortcut-chip {4743  min-width: 64px;4744  padding: 4px 10px;4745  border-radius: 6px;4746  border: 1px solid var(--peach-t3);4747  background: var(--peach-input-bg, var(--surface-card));4748  color: var(--peach-t0);4749  font-family: var(--font-mono);4750  font-size: 0.6875rem;4751  letter-spacing: 0.04em;4752  cursor: pointer;4753  text-align: center;4754  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4755}4756.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4757.peach-shortcut-chip.is-custom {4758  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4759  color: var(--peach-accent);4760}4761.peach-shortcut-chip.is-capturing {4762  border-color: var(--peach-accent);4763  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4764  color: var(--peach-accent);4765  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4766}4767@keyframes peach-shortcut-capture-pulse {4768  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4769  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4770}4771.peach-shortcut-reset {4772  background: transparent;4773  border: none;4774  cursor: pointer;4775  color: var(--peach-t2);4776  padding: 4px 6px;4777  border-radius: 5px;4778  font-size: 0.875rem;4779  line-height: 1;4780  transition: color 120ms ease, background 120ms ease;4781}4782.peach-shortcut-reset:hover {4783  color: var(--peach-t0);4784  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4785}4786.peach-shortcuts-conflict {4787  margin: 4px 0 0;4788  padding: 8px 10px;4789  border-radius: 7px;4790  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4791  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4792  font-family: var(--font-mono);4793  font-size: 0.6875rem;4794  color: var(--peach-t0);4795}47964797/* ── Help dialog overlay (? to open) ────────────────────────── */4798.peach-shortcuts-help-backdrop {4799  position: fixed;4800  inset: 0;4801  background: rgba(0, 0, 0, 0.55);4802  backdrop-filter: blur(2px);4803  display: flex;4804  align-items: center;4805  justify-content: center;4806  z-index: 1000;4807  animation: peach-help-fade-in 140ms ease forwards;4808}4809@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4810.peach-shortcuts-help-card {4811  width: min(320px, 92vw);4812  max-height: 80vh;4813  overflow-y: auto;4814  border-radius: 14px;4815  border: 1px solid var(--peach-t3);4816  background: var(--peach-bg);4817  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4818  padding: 16px 18px 18px;4819  display: flex;4820  flex-direction: column;4821  gap: 12px;4822}4823.peach-shortcuts-help-head {4824  display: flex; align-items: center; justify-content: space-between;4825}4826.peach-shortcuts-help-head h3 {4827  margin: 0;4828  font-family: var(--font-display);4829  font-style: italic;4830  font-weight: 400;4831  font-size: 22px;4832  color: var(--peach-t0);4833}4834.peach-shortcuts-help-close {4835  background: transparent;4836  border: none;4837  color: var(--peach-t2);4838  cursor: pointer;4839  font-size: 0.875rem;4840  padding: 4px 8px;4841  border-radius: 5px;4842}4843.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4844.peach-shortcuts-help-body ul {4845  list-style: none; padding: 0; margin: 4px 0 12px;4846  display: grid; gap: 8px;4847}4848.peach-shortcuts-help-body li {4849  display: flex; align-items: center; justify-content: space-between; gap: 12px;4850  font-size: 0.75rem; color: var(--peach-t0);4851}4852.peach-shortcuts-help-body kbd {4853  font-family: var(--font-mono);4854  font-size: 0.6875rem;4855  padding: 3px 8px;4856  border-radius: 6px;4857  background: var(--surface-card);4858  border: 1px solid var(--peach-t3);4859  color: var(--peach-accent);4860  letter-spacing: 0.04em;4861}48624863/* ── Pro promo on Account screen ────────────────────────────── */4864.peach-pro-promo {4865  position: relative;4866  border-radius: 14px;4867  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4868  background:4869    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4870    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4871    var(--surface-card);4872  overflow: hidden;4873  margin-bottom: 14px;4874}4875.peach-pro-promo-glow {4876  position: absolute;4877  inset: -40% -20% auto auto;4878  width: 220px; height: 220px;4879  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4880  pointer-events: none;4881  filter: blur(8px);4882}4883.peach-pro-promo-inner {4884  position: relative;4885  padding: 18px 18px 16px;4886}4887.peach-pro-promo-title {4888  font-family: var(--font-display);4889  font-style: italic;4890  font-weight: 400;4891  font-size: 28px;4892  line-height: 1;4893  letter-spacing: -0.005em;4894  color: var(--peach-t0);4895  margin: 0 0 4px;4896}4897.peach-pro-promo-tagline {4898  font-family: var(--font-mono);4899  font-size: 0.625rem;4900  letter-spacing: 0.06em;4901  color: var(--peach-t2);4902  margin: 0 0 14px;4903}4904.peach-pro-promo-list {4905  list-style: none;4906  margin: 0 0 16px;4907  padding: 0;4908  display: grid;4909  gap: 9px;4910}4911.peach-pro-promo-list li {4912  display: flex;4913  align-items: flex-start;4914  gap: 9px;4915  font-size: 0.75rem;4916  color: var(--peach-t1);4917  line-height: 1.4;4918}4919.peach-pro-promo-list svg {4920  width: 14px;4921  height: 14px;4922  flex-shrink: 0;4923  color: var(--peach-accent);4924  margin-top: 2px;4925}4926.peach-pro-promo-list span {4927  color: var(--peach-t0);4928}4929.peach-pro-promo-cta {4930  width: 100%;4931  background: var(--peach-accent);4932  color: #fff;4933  border: none;4934  padding: 9px 12px;4935  border-radius: 9px;4936  font-size: 0.75rem;4937  font-weight: 500;4938  font-family: var(--font-ui);4939  letter-spacing: 0.02em;4940  text-decoration: none;4941  display: inline-flex;4942  align-items: center;4943  justify-content: center;4944  cursor: pointer;4945  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4946  box-shadow: 0 2px 16px var(--peach-glow);4947}4948.peach-pro-promo-cta:hover {4949  filter: brightness(1.07);4950  box-shadow: 0 4px 24px var(--peach-glow);4951  transform: translateY(-1px);4952}4953.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }49544955.peach-pro-or-divider {4956  display: flex;4957  align-items: center;4958  gap: 10px;4959  margin: 4px 0 12px;4960  font-family: var(--font-mono);4961  font-size: 0.625rem;4962  letter-spacing: 0.06em;4963  color: var(--peach-t2);4964  text-transform: uppercase;4965}4966.peach-pro-or-divider::before,4967.peach-pro-or-divider::after {4968  content: "";4969  flex: 1;4970  height: 1px;4971  background: var(--peach-t3);4972}49734974.peach-loading {4975  position: absolute;4976  inset: 0;4977  display: flex;4978  align-items: center;4979  justify-content: center;4980  background: var(--bg);4981  animation: peach-loading-pulse 1.2s ease-in-out infinite;4982}49834984@keyframes peach-loading-pulse {4985  0%, 100% { opacity: 0.6; }4986  50% { opacity: 1; }4987}49884989/* ── Health Dashboard ─────────────────────────────────────────────────── */4990.peach-health-body {4991  flex: 1;4992  overflow-y: auto;4993  display: flex;4994  flex-direction: column;4995  /* Hide the platform scrollbar — every other scrollable surface in the4996   * popup hides it; the Health view was the one outlier and it ruined the4997   * polish. Behavior unchanged, just no rail rendered. */4998  scrollbar-width: none;4999  -ms-overflow-style: none;5000}5001.peach-health-body::-webkit-scrollbar { display: none; }50025003/* Loading screen for the Vault Health view. The advanced report computation5004 * can run for a few seconds on a large vault — without a clear loading5005 * screen the surface looked broken (the entry view bleeds through the5006 * empty body). Centered glyph + title + copy + indeterminate progress bar. */5007.peach-health-loading-screen {5008  flex: 1;5009  display: flex;5010  flex-direction: column;5011  align-items: center;5012  justify-content: center;5013  gap: 14px;5014  padding: 32px 28px;5015  text-align: center;5016}50175018.peach-health-loading-glyph {5019  width: 48px;5020  height: 48px;5021  display: flex;5022  align-items: center;5023  justify-content: center;5024  border-radius: 14px;5025  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5026  color: var(--peach-accent);5027}50285029.peach-health-loading-title {5030  margin: 0;5031  font-family: var(--font-display);5032  font-style: italic;5033  font-weight: 300;5034  font-size: 19px;5035  line-height: 1.2;5036  color: var(--peach-t0);5037}50385039.peach-health-loading-copy {5040  margin: 0;5041  max-width: 240px;5042  font-size: 0.75rem;5043  line-height: 1.55;5044  color: var(--peach-t2);5045}50465047.peach-health-loading-track {5048  width: 200px;5049  height: 3px;5050  margin-top: 6px;5051  border-radius: 999px;5052  background: rgba(240, 232, 216, 0.06);5053  overflow: hidden;5054}50555056.peach-health-loading-fill {5057  width: 40%;5058  height: 100%;5059  border-radius: inherit;5060  background: linear-gradient(5061    90deg,5062    transparent 0%,5063    var(--peach-accent) 50%,5064    transparent 100%5065  );5066  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;5067}50685069@keyframes peach-health-loading-sweep {5070  0%   { transform: translateX(-100%); }5071  100% { transform: translateX(350%); }5072}50735074[data-motion="reduce"] .peach-health-loading-fill,5075[data-motion="reduce"] .peach-health-loading-glyph svg path {5076  animation: none;5077}50785079.peach-health-summary {5080  padding: 10px 16px 6px;5081  font-family: "IBM Plex Mono", monospace;5082  font-size: 0.6875rem;5083}5084.peach-health-summary-warn { color: rgba(220,80,60,0.9); }5085.peach-health-summary-ok { color: var(--peach-t2); }50865087.peach-health-check-row {5088  padding: 0 16px 10px;5089}5090.peach-health-check-btn {5091  width: 100%;5092  display: flex;5093  align-items: center;5094  justify-content: center;5095}50965097.peach-health-sections {5098  flex: 1;5099  display: flex;5100  flex-direction: column;5101}51025103.peach-health-section {5104  border-bottom: 1px solid var(--peach-t3);5105}51065107.peach-health-section-header {5108  width: 100%;5109  display: flex;5110  align-items: center;5111  justify-content: space-between;5112  padding: 9px 16px;5113  background: transparent;5114  cursor: pointer;5115  color: var(--peach-t0);5116}51175118.peach-health-section-title-row {5119  display: flex;5120  align-items: center;5121  gap: 8px;5122}51235124.peach-health-count-badge {5125  display: inline-flex;5126  align-items: center;5127  justify-content: center;5128  min-width: 20px;5129  height: 18px;5130  padding: 0 5px;5131  border-radius: 999px;5132  background: rgba(220,80,60,0.15);5133  border: 1px solid rgba(220,80,60,0.25);5134  font-family: "IBM Plex Mono", monospace;5135  font-size: 0.5625rem;5136  color: rgba(220,80,60,0.9);5137}51385139.peach-health-section-title {5140  font-family: "IBM Plex Mono", monospace;5141  font-size: 0.6875rem;5142  text-transform: uppercase;5143  letter-spacing: 0.1em;5144  color: var(--peach-t1);5145}51465147.peach-health-chevron {5148  color: var(--peach-t2);5149  transition: transform 200ms ease;5150  flex-shrink: 0;5151}5152.peach-health-chevron.is-expanded {5153  transform: rotate(180deg);5154}51555156.peach-health-section-body {5157  padding: 0 16px 10px;5158  display: flex;5159  flex-direction: column;5160  gap: 4px;5161}51625163.peach-health-row {5164  display: flex;5165  align-items: flex-start;5166  justify-content: space-between;5167  gap: 8px;5168  padding: 6px 8px;5169  border-radius: 8px;5170  background: rgba(240,232,216,0.02);5171}51725173.peach-health-row-info {5174  flex: 1;5175  min-width: 0;5176  display: flex;5177  flex-direction: column;5178  gap: 2px;5179}51805181.peach-health-row-name {5182  font-family: var(--font-display);5183  font-size: 0.9375rem;5184  font-style: italic;5185  font-weight: 400;5186  color: var(--peach-t0);5187  white-space: nowrap;5188  overflow: hidden;5189  text-overflow: ellipsis;5190}51915192.peach-health-row-meta {5193  font-family: "IBM Plex Mono", monospace;5194  font-size: 0.5625rem;5195  color: var(--peach-t2);5196  letter-spacing: 0.05em;5197}51985199.peach-health-fix-btn {5200  font-size: 0.5625rem;5201  letter-spacing: 0.08em;5202  text-transform: uppercase;5203  padding: 4px 7px;5204  flex-shrink: 0;5205  display: flex;5206  align-items: center;5207}52085209.peach-health-empty {5210  font-family: "IBM Plex Mono", monospace;5211  font-size: 0.625rem;5212  color: var(--peach-t2);5213  padding: 6px 0;5214}52155216.peach-health-loading {5217  font-family: "IBM Plex Mono", monospace;5218  font-size: 0.625rem;5219  color: var(--peach-t2);5220  padding: 6px 0;5221  display: flex;5222  align-items: center;5223  gap: 6px;5224}52255226.peach-health-loading::before {5227  content: "";5228  width: 10px;5229  height: 10px;5230  border: 1.5px solid var(--peach-t3);5231  border-top-color: var(--peach-accent);5232  border-radius: 50%;5233  animation: peach-spin 600ms linear infinite;5234}52355236@keyframes peach-spin {5237  to { transform: rotate(360deg); }5238}52395240.peach-spinner {5241  width: 32px;5242  height: 32px;5243  border: 2px solid var(--peach-s2);5244  border-top-color: var(--peach-accent);5245  border-radius: 50%;5246  margin: 0 auto 16px;5247  animation: peach-spin 0.8s linear infinite;5248}52495250.peach-progress-screen {5251  text-align: center;5252  padding: 32px 16px;5253}52545255.peach-progress-screen-title {5256  font-size: 0.8125rem;5257  color: var(--peach-t0);5258  margin-bottom: 16px;5259}52605261.peach-progress-screen-stage {5262  font-size: 0.6875rem;5263  color: var(--peach-t2);5264  min-height: 14px;5265}52665267.peach-progress-screen-note {5268  font-size: 0.625rem;5269  color: var(--peach-t2);5270  margin-top: 8px;5271}52725273/* Pairing commits the vault key before the first entry sync. Keep that5274   implementation detail off-screen until the paired source records a real,5275   durable sync completion. */5276.peach-initial-sync {5277  position: relative;5278  display: flex;5279  align-items: center;5280  justify-content: center;5281  overflow: hidden;5282}52835284.peach-initial-sync-card {5285  position: relative;5286  z-index: 1;5287  width: min(100%, 320px);5288  display: flex;5289  flex-direction: column;5290  align-items: center;5291  gap: 10px;5292  padding: 36px 26px;5293  text-align: center;5294}52955296.peach-initial-sync-mark {5297  width: 54px;5298  height: 54px;5299  display: flex;5300  align-items: center;5301  justify-content: center;5302  border-radius: 18px;5303  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5304  margin-bottom: 4px;5305}53065307.peach-initial-sync-mark svg {5308  width: 34px;5309  height: 34px;5310}53115312.peach-initial-sync-card h1 {5313  margin: 0;5314  color: var(--peach-t0);5315  font-family: var(--font-display);5316  font-size: 1.55rem;5317  font-style: italic;5318  font-weight: 400;5319}53205321.peach-initial-sync-card > p {5322  margin: 0;5323}53245325.peach-initial-sync-card #initial-sync-copy {5326  color: var(--peach-t1);5327  font-size: 0.78rem;5328  line-height: 1.55;5329}53305331.peach-initial-sync-progress {5332  width: 100%;5333  height: 3px;5334  overflow: hidden;5335  border-radius: 999px;5336  background: color-mix(in srgb, var(--peach-t0) 8%, transparent);5337  margin: 8px 0 2px;5338}53395340.peach-initial-sync-progress span {5341  display: block;5342  width: 42%;5343  height: 100%;5344  border-radius: inherit;5345  background: var(--peach-accent);5346  animation: peach-initial-sync-progress 1.4s cubic-bezier(0.2, 0, 0, 1) infinite;5347}53485349@keyframes peach-initial-sync-progress {5350  from { transform: translateX(-115%); }5351  to { transform: translateX(340%); }5352}53535354.peach-initial-sync-note {5355  color: var(--peach-t2);5356  font-size: 0.625rem;5357  line-height: 1.45;5358}53595360.peach-initial-sync-slow {5361  width: 100%;5362  display: flex;5363  flex-direction: column;5364  gap: 10px;5365  padding-top: 10px;5366  border-top: 1px solid var(--peach-border);5367}53685369.peach-initial-sync-slow p {5370  margin: 0;5371  color: var(--peach-t2);5372  font-size: 0.6875rem;5373  line-height: 1.45;5374}53755376.peach-initial-sync-slow .peach-btn {5377  width: 100%;5378}53795380@media (prefers-reduced-motion: reduce) {5381  .peach-initial-sync-progress span {5382    width: 100%;5383    opacity: 0.7;5384    animation: none;5385  }5386}53875388/* Tag chips */5389.peach-tag-chip {5390  display: inline-flex;5391  align-items: center;5392  gap: 4px;5393  padding: 3px 8px;5394  border-radius: 999px;5395  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5396  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5397  color: var(--peach-t0);5398  font-family: "IBM Plex Mono", monospace;5399  font-size: 0.625rem;5400  letter-spacing: 0.04em;5401}54025403.peach-tag-chip-remove {5404  background: transparent;5405  border: none;5406  color: inherit;5407  opacity: 0.6;5408  cursor: pointer;5409  padding: 0;5410  font-size: 0.75rem;5411  line-height: 1;5412}54135414.peach-tag-chip-remove:hover {5415  opacity: 1;5416}54175418/* Tag input */5419.peach-tag-input-wrap {5420  border-bottom: 1px solid var(--peach-t3);5421}54225423.peach-tag-suggestions {5424  display: flex;5425  flex-wrap: wrap;5426  gap: 4px;5427  padding: 6px 0;5428}54295430.peach-tag-suggestion {5431  padding: 2px 8px;5432  border-radius: 999px;5433  border: 1px solid var(--peach-t3);5434  background: var(--peach-s2);5435  color: var(--peach-t1);5436  font-family: "IBM Plex Mono", monospace;5437  font-size: 0.625rem;5438  cursor: pointer;5439  transition: border-color 80ms ease, background 80ms ease;5440}54415442.peach-tag-suggestion:hover {5443  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5444  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5445}54465447/* Identity suggestions — shown below username/email inputs in new-entry form */5448@keyframes peach-suggest-in {5449  from { opacity: 0; transform: translateY(-4px); }5450  to   { opacity: 1; transform: none; }5451}54525453.peach-identity-suggestions {5454  display: flex;5455  flex-direction: column;5456  gap: 1px;5457  margin-top: 4px;5458  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5459}54605461.peach-identity-filter-row {5462  display: flex;5463  align-items: center;5464  gap: 4px;5465  padding: 2px 0 5px;5466}54675468.peach-identity-collapse-btn {5469  margin-left: auto;5470  background: transparent;5471  border: none;5472  cursor: pointer;5473  color: var(--peach-t3);5474  padding: 2px 4px;5475  display: flex;5476  align-items: center;5477  line-height: 0;5478  border-radius: 3px;5479  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5480}54815482.peach-identity-collapse-btn:hover {5483  color: var(--peach-t1);5484}54855486.peach-identity-collapse-btn.is-collapsed {5487  transform: rotate(-90deg);5488}54895490.peach-identity-rows {5491  display: grid;5492  grid-template-rows: 1fr;5493  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5494}54955496.peach-identity-rows.is-collapsed {5497  grid-template-rows: 0fr;5498}54995500.peach-identity-rows-inner {5501  overflow-y: auto;5502  min-height: 0;5503  max-height: 148px;5504  scrollbar-width: thin;5505  scrollbar-color: var(--peach-t3) transparent;5506  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5507  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5508}55095510.peach-identity-rows-inner::-webkit-scrollbar {5511  width: 4px;5512}55135514.peach-identity-rows-inner::-webkit-scrollbar-track {5515  background: transparent;5516}55175518.peach-identity-rows-inner::-webkit-scrollbar-thumb {5519  background: var(--peach-t3);5520  border-radius: 2px;5521}55225523.peach-identity-filter-pill {5524  padding: 2px 7px;5525  border-radius: 999px;5526  border: 1px solid var(--peach-t3);5527  background: transparent;5528  color: var(--peach-t2);5529  font-family: "IBM Plex Mono", monospace;5530  font-size: 0.6rem;5531  cursor: pointer;5532  transition: border-color 80ms, background 80ms, color 80ms;5533}55345535.peach-identity-filter-pill.is-on {5536  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5537  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5538  color: var(--peach-accent);5539}55405541.peach-identity-suggestion {5542  display: flex;5543  align-items: center;5544  gap: 6px;5545  width: 100%;5546  padding: 4px 6px;5547  border-radius: 5px;5548  border: none;5549  background: transparent;5550  cursor: pointer;5551  text-align: left;5552  transition: background 80ms ease;5553}55545555.peach-identity-suggestion:hover,5556.peach-identity-suggestion:focus {5557  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5558  outline: none;5559}55605561.peach-identity-suggestion-value {5562  font-family: "IBM Plex Mono", monospace;5563  font-size: 0.7rem;5564  color: var(--peach-t1);5565  overflow: hidden;5566  text-overflow: ellipsis;5567  white-space: nowrap;5568  flex: 1;5569  min-width: 0;5570}55715572.peach-identity-suggestion-type {5573  font-family: "IBM Plex Mono", monospace;5574  font-size: 0.55rem;5575  font-weight: 600;5576  flex-shrink: 0;5577  padding: 1px 4px;5578  border-radius: 3px;5579}55805581.peach-identity-suggestion-type--email {5582  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5583  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5584}55855586.peach-identity-suggestion-type--username {5587  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5588  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5589}55905591.peach-identity-suggestion-meta {5592  font-family: "IBM Plex Mono", monospace;5593  font-size: 0.6rem;5594  color: var(--peach-t3);5595  flex-shrink: 0;5596}55975598/* Tag filter strip */5599.peach-tag-filter-strip {5600  border-bottom: 1px solid var(--peach-t3);5601  flex-shrink: 0;5602}56035604.peach-tag-filter-chip {5605  display: inline-flex;5606  align-items: center;5607  padding: 4px 10px;5608  border-radius: 999px;5609  border: 1px solid var(--peach-t3);5610  background: transparent;5611  color: var(--peach-t2);5612  font-family: "IBM Plex Mono", monospace;5613  font-size: 0.5625rem;5614  letter-spacing: 0.06em;5615  text-transform: uppercase;5616  cursor: pointer;5617  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5618  white-space: nowrap;5619}56205621.peach-tag-filter-chip:hover {5622  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5623  color: var(--peach-t1);5624}56255626.peach-tag-filter-chip.is-selected {5627  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5628  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5629  color: var(--peach-t0);5630}56315632/* ─────────────────────────────────────────────────────────────────────────5633   v1.4.12 additions5634   ─────────────────────────────────────────────────────────────────────── */56355636/* Sort bar */5637.peach-sort-bar {5638  display: flex;5639  align-items: center;5640  gap: 4px;5641  padding: 5px 12px;5642  border-bottom: 1px solid var(--peach-t3);5643  flex-shrink: 0;5644  overflow-x: auto;5645  scrollbar-width: none;5646}56475648.peach-sort-btn {5649  padding: 2px 9px;5650  border-radius: 999px;5651  border: 1px solid transparent;5652  background: transparent;5653  color: var(--peach-t2);5654  font-family: "IBM Plex Mono", monospace;5655  font-size: 0.5625rem;5656  letter-spacing: 0.07em;5657  text-transform: uppercase;5658  cursor: pointer;5659  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5660  white-space: nowrap;5661}56625663.peach-sort-btn:hover {5664  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5665  color: var(--peach-t1);5666}56675668.peach-sort-btn.is-active {5669  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5670  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5671  color: var(--peach-t0);5672}56735674.peach-sort-scope-btn {5675  padding-inline: 8px;5676  font-size: 0.53125rem;5677  letter-spacing: 0.05em;5678}56795680.peach-sort-domain-hint {5681  margin-left: auto;5682  font-family: "IBM Plex Mono", monospace;5683  font-size: 0.5625rem;5684  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5685  white-space: nowrap;5686  overflow: hidden;5687  text-overflow: ellipsis;5688  max-width: 110px;5689}56905691/* Tab-match badge on entry rows */5692.peach-tab-match-badge {5693  display: inline-block;5694  width: 6px;5695  height: 6px;5696  border-radius: 50%;5697  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5698  margin-left: 5px;5699  vertical-align: middle;5700  flex-shrink: 0;5701  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5702}57035704.peach-entry-row.is-tab-match {5705  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5706  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5707}57085709.peach-entry-row.is-tab-match:hover {5710  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5711}57125713/* Entry list stagger entrance */5714@keyframes peach-entry-fadein {5715  from { opacity: 0; transform: translateY(4px); }5716  to   { opacity: 1; transform: translateY(0); }5717}57185719.peach-vault-list .peach-entry-row {5720  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5721}57225723/* Button press micro-interaction */5724.peach-btn:active {5725  transform: scale(0.95);5726  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5727}57285729.peach-sort-btn:active,5730.peach-tag-filter-chip:active {5731  transform: scale(0.93);5732  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5733}57345735/* Password strength bar (Lock view + shared) */5736.peach-password-strength {5737  display: flex;5738  align-items: center;5739  gap: 8px;5740  margin-top: 6px;5741}57425743.peach-strength-bar {5744  flex: 1;5745  height: 3px;5746  border-radius: 2px;5747  background: var(--peach-t3);5748  overflow: hidden;5749}57505751.peach-strength-fill {5752  height: 100%;5753  border-radius: 2px;5754  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5755              background 300ms ease;5756}57575758.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5759.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5760.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5761.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }57625763.peach-strength-label {5764  font-family: "IBM Plex Mono", monospace;5765  font-style: italic;5766  font-size: 0.5625rem;5767  font-weight: 300;5768  letter-spacing: 0.06em;5769  color: var(--peach-t2);5770  min-width: 36px;5771  text-align: right;5772}57735774.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5775.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5776.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5777.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }57785779/* Duress form */5780.peach-duress-status {5781  padding: 2px 8px;5782  border-radius: 999px;5783  border: 1px solid var(--peach-t3);5784  font-family: "IBM Plex Mono", monospace;5785  font-size: 0.5625rem;5786  letter-spacing: 0.07em;5787  text-transform: uppercase;5788  color: var(--peach-t2);5789  flex-shrink: 0;5790}57915792.peach-duress-status.is-active {5793  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5794  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5795  color: var(--peach-t0);5796}57975798.peach-duress-form {5799  padding: 8px 0 4px;5800  display: flex;5801  flex-direction: column;5802  gap: 6px;5803}58045805.peach-duress-form .peach-label {5806  margin-top: 4px;5807}58085809.peach-duress-actions {5810  display: flex;5811  gap: 6px;5812  align-items: center;5813  margin-top: 4px;5814}58155816.peach-duress-actions .peach-btn:first-child {5817  margin-right: auto;5818}58195820/* Improved overlay spring entrance */5821.peach-overlay-view.ov-enter-up {5822  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5823}58245825@keyframes ov-enter-up-spring {5826  from { opacity: 0; transform: translateY(16px) scale(0.98); }5827  to   { opacity: 1; transform: translateY(0) scale(1); }5828}58295830.peach-overlay-view.ov-enter-right {5831  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5832}58335834@keyframes ov-enter-right-spring {5835  from { opacity: 0; transform: translateX(18px) scale(0.98); }5836  to   { opacity: 1; transform: translateX(0) scale(1); }5837}58385839/* ── Onboarding-mode restore screens (file import) ── */5840/* Used when MainImportView renders during onboarding (no vault yet).5841   Animates like a lock-screen transition. */5842.peach-lock-view {5843  position: absolute;5844  inset: 0;5845  display: flex;5846  flex-direction: column;5847  background:5848    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5849    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5850    var(--peach-bg);5851  z-index: 2;5852  overflow: hidden;5853  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5854}58555856.peach-lock-view-header {5857  display: flex;5858  align-items: center;5859  justify-content: space-between;5860  padding: 16px 18px 12px;5861  flex-shrink: 0;5862}58635864/* ───────── Settings: auto-lock select ───────── */5865.peach-settings-select {5866  font-family: "IBM Plex Mono", monospace;5867  font-size: 0.6875rem;5868  background: transparent;5869  border: 1px solid var(--peach-t3);5870  border-radius: 4px;5871  color: var(--peach-t1);5872  padding: 3px 6px;5873  cursor: pointer;5874  outline: none;5875}5876.peach-settings-select:focus {5877  border-color: var(--peach-accent);5878}58795880/* ───────── Duress status pill (new polished) ───────── */5881.peach-duress-status-pill {5882  font-family: "IBM Plex Mono", monospace;5883  font-size: 0.5625rem;5884  text-transform: uppercase;5885  letter-spacing: 0.12em;5886  padding: 2px 8px;5887  border-radius: 12px;5888  background: var(--peach-t3);5889  color: var(--peach-t2);5890  flex-shrink: 0;5891}5892.peach-duress-status-pill.is-active {5893  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5894  color: var(--peach-accent);5895}58965897/* ───────── Entry advanced disclosure (canary) ───────── */5898.peach-entry-advanced {5899  margin-top: 12px;5900  border-top: 1px solid var(--peach-t3);5901  padding-top: 10px;5902  position: relative;5903  z-index: 1;5904}5905.peach-entry-advanced-toggle {5906  display: flex;5907  align-items: center;5908  justify-content: space-between;5909  width: 100%;5910  background: transparent;5911  border: none;5912  cursor: pointer;5913  padding: 0;5914  color: var(--peach-t2);5915}5916.peach-canary-section {5917  margin-top: 10px;5918  display: grid;5919  gap: 6px;5920}59215922/* ───────── Import: merge/replace radio choices ───────── */5923.peach-import-choice {5924  display: flex;5925  align-items: flex-start;5926  gap: 10px;5927  padding: 8px 10px;5928  border: 1px solid var(--peach-t3);5929  border-radius: 10px;5930  cursor: pointer;5931  margin-bottom: 6px;5932  transition: border-color 120ms ease, background 120ms ease;5933}5934.peach-import-choice:hover {5935  border-color: var(--peach-accent);5936}5937.peach-import-choice input[type="radio"] {5938  margin-top: 3px;5939  accent-color: var(--peach-accent);5940  flex-shrink: 0;5941}5942.peach-import-choice-main {5943  display: flex;5944  flex-direction: column;5945  gap: 2px;5946  min-width: 0;5947}5948.peach-import-choice-label {5949  font-size: 0.75rem;5950  color: var(--peach-t0);5951}5952.peach-import-choice-sub {5953  font-size: 0.6875rem;5954  color: var(--peach-t2);5955  line-height: 1.5;5956}59575958/* ───────── Export: success confirmation strip ───────── */5959.peach-export-success {5960  display: flex;5961  align-items: flex-start;5962  gap: 10px;5963  padding: 12px;5964  border-radius: 12px;5965  border: 1px solid rgba(150, 175, 110, 0.3);5966  background: rgba(150, 175, 110, 0.08);5967  color: var(--peach-t0);5968  font-size: 0.75rem;5969  line-height: 1.55;5970}5971.peach-export-success-check {5972  color: rgba(150, 175, 110, 0.9);5973  font-size: 0.875rem;5974  flex-shrink: 0;5975}59765977/* ── Trash view ──────────────────────────────────────────────────────── */5978.peach-trash-entry-row {5979  display: flex;5980  align-items: center;5981  justify-content: space-between;5982  gap: 8px;5983  padding: 8px 0;5984  border-bottom: 1px solid var(--peach-border);5985}5986.peach-trash-entry-info {5987  flex: 1;5988  min-width: 0;5989  display: flex;5990  flex-direction: column;5991  gap: 2px;5992}5993.peach-trash-entry-title {5994  font-size: 0.8125rem;5995  color: var(--peach-t0);5996  overflow: hidden;5997  text-overflow: ellipsis;5998  white-space: nowrap;5999}6000.peach-trash-entry-meta {6001  font-family: var(--font-mono);6002  font-size: 0.5625rem;6003  color: var(--peach-t2);6004  letter-spacing: 0.04em;6005}6006.peach-trash-entry-actions {6007  display: flex;6008  align-items: center;6009  gap: 4px;6010  flex-shrink: 0;6011}6012.peach-trash-delete-btn {6013  background: transparent;6014  border: 0;6015  color: var(--peach-t3);6016  font-size: 1rem;6017  line-height: 1;6018  cursor: pointer;6019  padding: 2px 5px;6020  transition: color 0.15s;6021}6022.peach-trash-delete-btn:hover { color: var(--peach-breach); }6023.peach-trash-list {6024  overflow-y: auto;6025}6026.peach-trash-footer {6027  display: flex;6028  align-items: center;6029  gap: 8px;6030  padding: 8px 0 0;6031  border-top: 1px solid var(--peach-border);6032  margin-top: 4px;6033}6034.peach-trash-purge-all {6035  background: transparent;6036  border: 0;6037  color: var(--peach-t3);6038  font-size: 0.625rem;6039  cursor: pointer;6040  padding: 4px 0;6041  letter-spacing: 0.03em;6042  transition: color 0.2s;6043}6044.peach-trash-purge-all:hover { color: var(--peach-breach); }6045.peach-trash-purge-confirm-label {6046  font-size: 0.625rem;6047  color: var(--peach-t1);6048  flex: 1;6049}60506051/* ── Settings shortcuts grid ─────────────────────────────────────────── */6052.peach-shortcuts-grid {6053  display: grid;6054  grid-template-columns: auto 1fr;6055  gap: 6px 12px;6056  align-items: center;6057  padding: 4px 0;6058}6059.peach-shortcut-key {6060  font-family: var(--font-mono);6061  font-size: 0.625rem;6062  color: var(--peach-t0);6063  background: var(--peach-t3);6064  border-radius: 4px;6065  padding: 2px 6px;6066  white-space: nowrap;6067  text-align: center;6068}6069.peach-shortcut-desc {6070  font-size: 0.6875rem;6071  color: var(--peach-t1);6072}60736074/* ── Sort bar trash button ───────────────────────────────────────────── */6075.peach-sort-trash-btn {6076  display: flex;6077  align-items: center;6078  justify-content: center;6079  padding: 3px 5px;6080  background: transparent;6081  border: none;6082  cursor: pointer;6083  color: var(--peach-t2);6084  border-radius: 4px;6085  transition: color 140ms ease, background 140ms ease;6086}6087.peach-sort-trash-btn:hover {6088  color: var(--peach-t1);6089  background: var(--peach-t3);6090}6091.peach-sort-trash-btn.is-active {6092  color: var(--peach-accent);6093}60946095/* Accent color picker */6096.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }6097.peach-accent-picker {6098  display: flex;6099  flex-wrap: wrap;6100  gap: 7px;6101  padding: 2px 0;6102}6103.peach-accent-swatch {6104  width: 22px;6105  height: 22px;6106  border-radius: 50%;6107  border: 2px solid transparent;6108  cursor: pointer;6109  padding: 0;6110  transition: transform 100ms;6111  outline-offset: 2px;6112}6113.peach-accent-swatch:hover { transform: scale(1.15); }6114.peach-accent-swatch.is-active {6115  border-color: var(--peach-t0);6116  transform: scale(1.1);6117}61186119.peach-pill-group {6120  display: flex;6121  gap: 6px;6122}6123.peach-pill-group .peach-btn.is-active {6124  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);6125  border-color: var(--peach-accent);6126  color: var(--peach-t0);6127}61286129/* ── Card entry styles ───────────────────────────────────────── */6130.peach-card-number {6131  font-family: var(--peach-mono);6132  letter-spacing: 0.08em;6133}61346135.peach-card-network-badge {6136  font-size: 0.625rem;6137  padding: 1px 5px;6138  border-radius: 4px;6139  border: 0.5px solid var(--peach-border);6140  color: var(--peach-text-dim);6141  margin-left: 6px;6142  vertical-align: middle;6143}61446145.peach-card-expiry-row {6146  display: flex;6147  align-items: center;6148  gap: 8px;6149}61506151.peach-card-expiry-sep {6152  color: var(--peach-text-dim);6153}61546155/* ── Pro tier — upgrade screen ──────────────────────────────── */6156.peach-pro-mark {6157  font-size: 0.5625rem;6158  color: var(--peach-accent);6159  margin-left: 6px;6160  vertical-align: super;6161  opacity: 0.7;6162}61636164.peach-pro-mini-badge {6165  display: block;6166  font-size: 0.625rem;6167  font-style: italic;6168  color: var(--peach-accent);6169  letter-spacing: 0.04em;6170  margin-top: -2px;6171  padding-left: 2px;6172  opacity: 0.85;6173  text-align: center;6174}61756176.peach-wordmark-stack {6177  display: inline-flex;6178  flex-direction: column;6179  align-items: center;6180}61816182/* ── Pro tier — upgrade page ─────────────────────────────────── */6183/* ── Pro upgrade — redesigned editorial layout ─────────────────── */61846185.peach-pro-upgrade {6186  display: flex;6187  flex-direction: column;6188  align-items: stretch;6189  gap: 10px;6190  padding: 2px 2px 12px;6191}61926193.peach-pro-eyebrow {6194  margin: 0;6195  font-family: var(--font-ui);6196  font-size: 0.625rem;6197  font-weight: 500;6198  letter-spacing: 0.12em;6199  color: var(--peach-accent);6200}62016202.peach-pro-headline {6203  margin: 0;6204  font-family: var(--font-display, "Cormorant Garamond", serif);6205  font-size: 30px;6206  font-weight: 700;6207  font-style: normal;6208  line-height: 1.05;6209  color: var(--peach-t0);6210  letter-spacing: -0.01em;6211}6212.peach-pro-headline em {6213  font-style: italic;6214  font-weight: 400;6215  color: var(--peach-accent);6216}62176218.peach-pro-subtitle {6219  margin: 0;6220  font-size: 0.6875rem;6221  line-height: 1.5;6222  color: var(--peach-t1);6223}62246225/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6226.peach-pro-section-label {6227  margin: 6px 0 0;6228  font-family: var(--font-ui);6229  font-size: 0.5625rem;6230  font-weight: 500;6231  letter-spacing: 0.12em;6232  text-transform: uppercase;6233  color: var(--peach-t2);6234}62356236/* 2-column numbered feature grid */6237.peach-pro-grid {6238  display: grid;6239  grid-template-columns: 1fr 1fr;6240  border-top: 1px solid var(--peach-border);6241  border-left: 1px solid var(--peach-border);6242}62436244.peach-pro-grid-item {6245  display: flex;6246  flex-direction: column;6247  gap: 2px;6248  padding: 8px 9px;6249  border-right: 1px solid var(--peach-border);6250  border-bottom: 1px solid var(--peach-border);6251}62526253.peach-pro-grid-item--wide {6254  grid-column: 1 / -1;6255}62566257.peach-pro-grid-num {6258  font-family: var(--font-mono);6259  font-size: 0.5625rem;6260  color: var(--peach-accent);6261  letter-spacing: 0.06em;6262  opacity: 0.85;6263}62646265.peach-pro-grid-name {6266  font-size: 0.8125rem;6267  font-weight: 500;6268  color: var(--peach-t0);6269  line-height: 1.2;6270}62716272.peach-pro-grid-desc {6273  font-size: 0.625rem;6274  color: var(--peach-t1);6275  line-height: 1.4;6276}62776278.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6279  animation: peach-pulse-accent 600ms ease-out forwards;6280}62816282@keyframes peach-pulse-accent {6283  0%   { opacity: 1; transform: scale(1.2); }6284  100% { opacity: 0.85; transform: scale(1); }6285}62866287/* Actions */6288.peach-pro-upgrade-actions {6289  display: flex;6290  flex-direction: column;6291  align-items: stretch;6292  gap: 10px;6293}62946295.peach-pro-pricing {6296  margin: 0;6297  font-size: 1rem;6298  font-weight: 600;6299  color: var(--peach-t0);6300  letter-spacing: 0.01em;6301}6302.peach-pro-pricing-sub {6303  font-size: 0.75rem;6304  font-weight: 400;6305  color: var(--peach-t1);6306  letter-spacing: 0.02em;6307}63086309.peach-pro-upgrade-cta {6310  display: flex;6311  align-items: center;6312  justify-content: center;6313  text-decoration: none;6314  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6315  border: 1px solid var(--peach-accent);6316  border-radius: 10px;6317  color: var(--peach-accent);6318  font-family: var(--font-ui);6319  font-size: 0.8125rem;6320  font-weight: 600;6321  letter-spacing: 0.06em;6322  padding: 11px 16px;6323  transition: background 0.15s ease, color 0.15s ease;6324}6325.peach-pro-upgrade-cta:hover {6326  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6327}63286329/* Pairing's terminal entitlement fallback reuses the Peach Pro card's6330   editorial hierarchy without embedding the settings deck itself. */6331.peach-pair-pro-required {6332  width: 100%;6333  display: flex;6334  flex-direction: column;6335  align-items: stretch;6336  gap: 10px;6337  text-align: left;6338}6339.peach-pair-pro-required .peach-pro-headline {6340  font-size: 1.75rem;6341}6342.peach-pair-pro-required .peach-pro-subtitle {6343  font-size: 0.6875rem;6344}6345.peach-pair-pro-grid {6346  grid-template-columns: 1fr;6347}6348.peach-pair-pro-button {6349  width: 100%;6350  cursor: pointer;6351}6352.peach-desktop-error--pro {6353  width: min(100%, 320px);6354  overflow-y: auto;6355}63566357.peach-pro-key-divider {6358  display: flex;6359  align-items: center;6360  gap: 8px;6361  color: var(--peach-t2);6362  font-size: 0.5625rem;6363  letter-spacing: 0.1em;6364}6365.peach-pro-key-divider::before,6366.peach-pro-key-divider::after {6367  content: "";6368  flex: 1;6369  height: 1px;6370  background: var(--peach-border);6371}63726373/* Inline key entry row */6374.peach-pro-key-inline {6375  display: flex;6376  align-items: center;6377  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6378  border: 1px solid var(--peach-border);6379  border-radius: 8px;6380  overflow: hidden;6381}6382.peach-pro-key-inline-input {6383  flex: 1;6384  background: transparent;6385  border: none;6386  outline: none;6387  color: var(--peach-t1);6388  font-family: var(--font-mono);6389  font-size: 0.625rem;6390  letter-spacing: 0.06em;6391  padding: 9px 10px;6392}6393.peach-pro-key-inline-input::placeholder {6394  color: var(--peach-t2);6395}6396.peach-pro-key-apply {6397  background: transparent;6398  border: none;6399  border-left: 1px solid var(--peach-border);6400  color: var(--peach-t2);6401  font-family: var(--font-ui);6402  font-size: 0.5625rem;6403  font-weight: 600;6404  letter-spacing: 0.08em;6405  padding: 9px 10px;6406  cursor: pointer;6407  transition: color 0.15s ease;6408  flex-shrink: 0;6409}6410.peach-pro-key-apply:not(:disabled):hover {6411  color: var(--peach-accent);6412}6413.peach-pro-key-apply:disabled {6414  opacity: 0.35;6415  cursor: not-allowed;6416}64176418/* ── Pro tier — key ceremony ─────────────────────────────────── */6419.peach-pro-key-ceremony {6420  display: flex;6421  flex-direction: column;6422  align-items: center;6423  gap: 12px;6424  padding: 20px 4px 16px;6425}64266427.peach-pro-key-ceremony .peach-lock-rune-string {6428  font-size: 1rem;6429  gap: 12px;6430  flex: 0;6431  justify-content: center;6432}64336434.peach-pro-key-ceremony-label {6435  margin: 0;6436  font-size: 0.6875rem;6437  color: var(--peach-t2);6438  font-style: italic;6439  letter-spacing: 0.04em;6440}64416442.peach-pro-key-input {6443  font-family: var(--font-mono, monospace);6444  letter-spacing: 0.06em;6445  text-align: center;6446  width: 100%;6447  box-sizing: border-box;6448}64496450.peach-pro-key-error {6451  margin: 0;6452  font-size: 0.75rem;6453  text-align: center;6454  color: var(--peach-breach, #e55);6455  padding: 0;6456}64576458.peach-pro-key-activate {6459  width: 100%;6460  text-align: center;6461  box-sizing: border-box;6462  padding: 10px 20px;6463  font-size: 0.8125rem;6464}64656466.peach-pro-key-cancel {6467  background: transparent;6468  border: 0;6469  color: var(--peach-t2);6470  font-size: 0.6875rem;6471  cursor: pointer;6472  padding: 2px 8px;6473  transition: color 0.2s;6474}64756476.peach-pro-key-cancel:hover { color: var(--peach-accent); }64776478/* ── Pro tier — active state ─────────────────────────────────── */6479.peach-pro-active {6480  display: flex;6481  flex-direction: column;6482  align-items: center;6483  gap: 0;6484  padding: 8px 4px 16px;6485  min-height: 280px;6486}64876488.peach-pro-active-hero {6489  display: flex;6490  flex-direction: column;6491  align-items: center;6492  gap: 6px;6493  padding: 20px 0 8px;6494}64956496.peach-pro-active-mark-wrap {6497  display: flex;6498  align-items: center;6499  justify-content: center;6500  margin-bottom: 4px;6501}65026503.peach-pro-active-mark {6504  width: 60px;6505  height: 60px;6506}65076508.peach-pro-active-title {6509  font-family: var(--font-display, var(--font-ui));6510  font-size: 26px;6511  margin: 0;6512  color: var(--peach-t0);6513  letter-spacing: 0.01em;6514}65156516.peach-pro-active-since {6517  margin: 0;6518  font-size: 0.6875rem;6519  color: var(--peach-t2);6520  font-style: italic;6521}65226523.peach-pro-active-features {6524  display: flex;6525  flex-direction: column;6526  gap: 8px;6527  width: 100%;6528  padding: 14px 8px 0;6529  border-top: 1px solid var(--peach-border);6530  flex: 1;6531}65326533.peach-pro-active-feature {6534  display: flex;6535  align-items: center;6536  gap: 9px;6537}65386539.peach-pro-active-feature-mark {6540  color: var(--peach-accent);6541  font-size: 0.625rem;6542  opacity: 0.65;6543  flex-shrink: 0;6544}65456546.peach-pro-active-feature-name {6547  font-size: 0.75rem;6548  color: var(--peach-t1);6549}65506551.peach-pro-deactivate {6552  align-self: center;6553  background: transparent;6554  border: 0;6555  color: var(--peach-t3);6556  font-size: 0.625rem;6557  cursor: pointer;6558  padding: 8px 0 0;6559  margin-top: 16px;6560  letter-spacing: 0.03em;6561  transition: color 0.2s;6562}65636564.peach-pro-deactivate:hover { color: var(--peach-t2); }65656566.peach-pro-deactivate:disabled {6567  opacity: 0.5;6568  cursor: default;6569}65706571/* ── Pro card activation sparkles & thank-you ── */6572button.peach-pro-active-mark-wrap {6573  background: transparent;6574  border: 0;6575  padding: 0;6576  cursor: pointer;6577  position: relative;6578  overflow: visible;6579}65806581.peach-pro-sparks {6582  position: absolute;6583  inset: 0;6584  pointer-events: none;6585  overflow: visible;6586}65876588.peach-pro-spark {6589  position: absolute;6590  top: 50%;6591  left: 50%;6592  font-size: 9px;6593  line-height: 1;6594  opacity: 0;6595  transform: translate(-50%, -50%);6596  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6597}65986599@keyframes peach-pro-spark-fly {6600  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6601  25%  { opacity: 1; }6602  100% {6603    opacity: 0;6604    transform: translate(6605      calc(-50% + var(--spark-x, 0px)),6606      calc(-50% + var(--spark-y, -40px))6607    ) scale(0.8);6608  }6609}66106611.peach-pro-thankyou-text {6612  margin: 4px 0 0;6613  font-size: 0.6875rem;6614  font-style: italic;6615  color: currentColor;6616  opacity: 0;6617  animation: peach-pro-thankyou-flash 2.5s ease both;6618}66196620@keyframes peach-pro-thankyou-flash {6621  0%   { opacity: 0; transform: translateY(4px); }6622  15%  { opacity: 0.75; transform: translateY(0); }6623  75%  { opacity: 0.75; }6624  100% { opacity: 0; }6625}66266627/* ── Pro advanced health remediation queue ──────────────────── */6628.peach-health-pro-queue {6629  display: flex;6630  flex-direction: column;6631  gap: 10px;6632  padding: 12px;6633  margin: 0 0 12px;6634  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6635  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6636  border-radius: 10px;6637}66386639.peach-health-pro-queue-head {6640  display: flex;6641  justify-content: space-between;6642  align-items: baseline;6643}66446645.peach-health-pro-queue-title {6646  font-size: 0.75rem;6647  font-weight: 500;6648  letter-spacing: 0.04em;6649  text-transform: uppercase;6650  color: var(--peach-accent);6651}66526653.peach-health-pro-queue-score {6654  font-size: 0.6875rem;6655  color: var(--peach-t2);6656}66576658.peach-health-pro-row {6659  display: flex;6660  gap: 10px;6661  align-items: center;6662  padding: 8px 0;6663  border-top: 1px solid var(--peach-border);6664}66656666.peach-health-pro-row-info {6667  flex: 1;6668  display: flex;6669  flex-direction: column;6670  gap: 4px;6671  min-width: 0;6672}66736674.peach-health-pro-action {6675  flex: 0 0 auto;6676  padding: 4px 8px;6677  font-size: 0.5625rem;6678  letter-spacing: 0.08em;6679  text-transform: uppercase;6680}66816682.peach-health-pro-row-name {6683  font-size: 0.8125rem;6684  color: var(--peach-t0);6685  overflow: hidden;6686  text-overflow: ellipsis;6687  white-space: nowrap;6688}66896690.peach-health-pro-row-meta {6691  font-size: 0.6875rem;6692  color: var(--peach-t2);6693}66946695.peach-health-pro-bar {6696  height: 2px;6697  background: var(--peach-border);6698  border-radius: 2px;6699  overflow: hidden;6700  margin-top: 2px;6701}67026703.peach-health-pro-bar-fill {6704  height: 100%;6705  background: var(--peach-accent);6706  transition: width 200ms ease-out;6707}67086709/* ── Pro activation celebration ── */6710@keyframes peach-pro-bloom {6711  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6712  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6713                 drop-shadow(0 0 48px var(--peach-glow)); }6714  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6715}67166717@keyframes peach-pro-wordmark-in {6718  from { opacity: 0; transform: translateY(4px); }6719  to   { opacity: 1; transform: translateY(0); }6720}67216722@keyframes peach-pro-fade-out {6723  from { opacity: 1; }6724  to   { opacity: 0; }6725}67266727.peach-pro-celebration {6728  background:6729    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6730    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6731    var(--peach-bg);6732  border: 1px solid var(--peach-t3);6733  box-shadow:6734    0 2px 8px rgba(0,0,0,0.55),6735    0 14px 48px rgba(0,0,0,0.7),6736    0 0 0 1px rgba(240,232,216,0.04);6737  overflow: hidden;6738  width: 320px;6739  height: 520px;6740  display: flex;6741  flex-direction: column;6742  align-items: center;6743  justify-content: center;6744  gap: 8px;6745  padding: 32px 24px;6746  text-align: center;6747}67486749.peach-pro-celebration.is-leaving {6750  animation: peach-pro-fade-out 400ms ease forwards;6751}67526753.peach-pro-bloom-target {6754  display: flex;6755  align-items: center;6756  justify-content: center;6757  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6758  margin-bottom: 12px;6759}67606761.peach-pro-bloom-icon {6762  width: 48px;6763  height: 48px;6764}67656766.peach-pro-wordmark {6767  font-family: var(--font-display);6768  font-size: 22px;6769  font-style: italic;6770  font-weight: 400;6771  color: var(--peach-accent);6772  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6773}67746775.peach-pro-thankyou {6776  font-size: 0.75rem;6777  font-style: italic;6778  color: var(--peach-t2);6779  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6780}678167826783/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6784.peach-pro-notice-banner {6785  display: flex;6786  align-items: center;6787  gap: 8px;6788  padding: 7px 12px;6789  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6790  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6791  font-size: 0.6875rem;6792  color: var(--peach-t2);6793  font-family: "IBM Plex Mono", monospace;6794  flex-shrink: 0;6795}67966797.peach-pro-notice-link {6798  background: none;6799  border: none;6800  padding: 0;6801  cursor: pointer;6802  font-size: 0.6875rem;6803  color: var(--peach-accent);6804  font-family: "IBM Plex Mono", monospace;6805  margin-left: auto;6806  white-space: nowrap;6807}68086809.peach-pro-notice-close {6810  background: none;6811  border: none;6812  padding: 0 0 0 4px;6813  cursor: pointer;6814  font-size: 0.625rem;6815  color: var(--peach-t3);6816  line-height: 1;6817}68186819/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6820   Renders over whatever view is showing. 60-second expiry; the popup ticks6821   the countdown each second and clears the banner when it hits zero. */6822.peach-pair-request-banner {6823  display: flex;6824  flex-direction: column;6825  gap: 8px;6826  padding: 10px 12px;6827  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6828  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6829  font-family: "IBM Plex Mono", monospace;6830  flex-shrink: 0;6831}68326833.peach-pair-toast {6834  padding: 8px 12px;6835  font-family: "IBM Plex Mono", monospace;6836  font-size: 0.75rem;6837  color: var(--peach-t1);6838  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6839  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6840  flex-shrink: 0;6841  text-align: center;6842}68436844.peach-pair-toast strong {6845  color: var(--peach-t0);6846  font-weight: 500;6847}68486849.peach-pair-request-header {6850  display: flex;6851  align-items: center;6852  gap: 8px;6853  font-size: 0.75rem;6854  color: var(--peach-t1);6855}68566857.peach-pair-request-mark {6858  font-size: 0.875rem;6859  display: inline-flex;6860  align-items: center;6861}68626863.peach-pair-request-icon {6864  width: 1em;6865  height: 1em;6866}68676868.peach-pair-request-title {6869  font-weight: 600;6870  color: var(--peach-t0);6871}68726873.peach-pair-request-countdown {6874  margin-left: auto;6875  font-variant-numeric: tabular-nums;6876  color: var(--peach-t2);6877  font-size: 0.6875rem;6878}68796880.peach-pair-request-body {6881  margin: 0;6882  font-size: 0.75rem;6883  color: var(--peach-t1);6884  line-height: 1.4;6885}68866887.peach-pair-request-body strong {6888  color: var(--peach-t0);6889  font-weight: 600;6890}68916892.peach-pair-request-actions {6893  display: flex;6894  gap: 8px;6895  justify-content: flex-end;6896}68976898/* ─── First-run onboarding ──────────────────────────────────────────────6899   Three-card welcome shown once before vault creation. The PeachScript6900   rune background drifts behind everything at very low opacity — it's6901   atmosphere, not focus. The cards themselves use the same panel6902   language as the rest of the popup so the transition into NewVault is6903   continuous, not a jarring switch of visual register. */69046905.peach-onboarding {6906  position: relative;6907  display: flex;6908  flex-direction: column;6909  width: 100%;6910  height: 100%;6911  padding: 16px 16px 18px;6912  box-sizing: border-box;6913  overflow: hidden;6914  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6915}69166917.peach-onboarding.is-completing {6918  animation: peach-onboard-exit 200ms ease-out forwards;6919}69206921.peach-rune-background {6922  position: absolute;6923  inset: 0;6924  width: 100%;6925  height: 100%;6926  pointer-events: none;6927  z-index: 0;6928  transition: opacity 500ms ease-out;6929}69306931.peach-onboarding.is-completing .peach-rune-background {6932  opacity: 0;6933}69346935.peach-onboarding-header {6936  position: relative;6937  z-index: 1;6938  display: flex;6939  align-items: center;6940  margin-bottom: 14px;6941}69426943.peach-onboarding-card {6944  position: relative;6945  z-index: 1;6946  flex: 1;6947  display: flex;6948  flex-direction: column;6949  gap: 10px;6950  padding: 22px 20px;6951  border-radius: 16px;6952  border: 1px solid var(--peach-t3);6953  background:6954    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6955  backdrop-filter: blur(3px);6956  -webkit-backdrop-filter: blur(3px);6957  box-shadow:6958    inset 0 1px 0 rgba(240, 232, 216, 0.04),6959    0 12px 28px rgba(0, 0, 0, 0.12);6960  cursor: pointer;6961  user-select: none;6962  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6963}69646965.peach-onboarding-card.is-exiting {6966  animation: peach-card-out 120ms ease-in forwards;6967  pointer-events: none;6968}69696970.peach-onboarding-card-headline {6971  margin: 0;6972  font-family: var(--font-display);6973  font-style: italic;6974  font-weight: 400;6975  font-size: 22px;6976  line-height: 1.05;6977  color: var(--peach-t0);6978  white-space: pre-line;6979}69806981.peach-onboarding-divider {6982  margin: 4px 0 6px;6983  border: 0;6984  border-top: 1px solid var(--peach-t3);6985  width: 100%;6986}69876988.peach-onboarding-body {6989  margin: 0;6990  font-size: 0.8125rem;6991  line-height: 1.6;6992  color: var(--peach-t1);6993}69946995.peach-onboarding-warning {6996  display: flex;6997  align-items: flex-start;6998  gap: 8px;6999  margin: 6px 0 0;7000  padding-top: 8px;7001  border-top: 1px dashed var(--peach-t3);7002  font-size: 0.8125rem;7003  line-height: 1.5;7004  color: var(--peach-t1);7005}70067007.peach-onboarding-warning-icon {7008  color: var(--peach-accent);7009  font-size: 0.8125rem;7010  line-height: 1.5;7011  flex: 0 0 auto;7012}70137014.peach-onboarding-nav {7015  position: relative;7016  z-index: 1;7017  display: flex;7018  align-items: center;7019  justify-content: space-between;7020  margin-top: 12px;7021  padding: 0 4px;7022}70237024.peach-onboarding-dots {7025  display: flex;7026  align-items: center;7027  gap: 6px;7028}70297030.peach-onboarding-dot {7031  width: 6px;7032  height: 6px;7033  border-radius: 50%;7034  background: var(--peach-t2);7035  transition: width 200ms ease, height 200ms ease, background 200ms ease;7036}70377038.peach-onboarding-dot.is-active {7039  width: 8px;7040  height: 8px;7041  background: var(--peach-accent);7042}70437044.peach-onboarding-next {7045  background: none;7046  border: none;7047  padding: 4px 0;7048  cursor: pointer;7049  font-family: "IBM Plex Mono", monospace;7050  font-size: 0.6875rem;7051  letter-spacing: 0.04em;7052  color: var(--peach-t1);7053  transition: color 150ms ease;7054}70557056.peach-onboarding-next:hover {7057  color: var(--peach-t0);7058}70597060.peach-onboarding-next:disabled {7061  opacity: 0.5;7062  cursor: default;7063}70647065.peach-onboarding-back {7066  background: none;7067  border: none;7068  padding: 4px 0;7069  cursor: pointer;7070  font-family: "IBM Plex Mono", monospace;7071  font-size: 0.6875rem;7072  letter-spacing: 0.04em;7073  color: var(--peach-t2);7074  transition: color 150ms ease;7075}70767077.peach-onboarding-back:hover {7078  color: var(--peach-t0);7079}70807081.peach-onboarding-back:disabled {7082  opacity: 0.5;7083  cursor: default;7084}70857086/* Reserve back-button width on the first card so the dots stay centred */7087.peach-onboarding-back-spacer {7088  width: 44px;7089}70907091.peach-onboarding-choice-row {7092  display: grid;7093  grid-template-columns: 1fr;7094  gap: 8px;7095}70967097.peach-onboarding-choice-heading {7098  margin: 8px 0 -2px;7099  color: var(--peach-t1);7100  font-family: "IBM Plex Mono", monospace;7101  font-size: 0.6875rem;7102  letter-spacing: 0.04em;7103  text-transform: uppercase;7104}71057106.peach-onboarding-choice {7107  min-height: 48px;7108  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);7109  border-radius: 8px;7110  padding: 8px 10px;7111  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);7112  color: var(--peach-t0);7113  font-size: 0.76rem;7114  font-weight: 700;7115  text-align: left;7116}71177118.peach-onboarding-choice-label,7119.peach-onboarding-choice-detail {7120  display: block;7121}71227123.peach-onboarding-choice-detail {7124  margin-top: 2px;7125  color: var(--peach-t1);7126  font-size: 0.625rem;7127  font-weight: 400;7128  line-height: 1.35;7129}71307131.peach-onboarding-choice--adopt {7132  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);7133  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);7134}71357136.peach-adopt-vault {7137  position: relative;7138  min-height: 100%;7139  padding: 22px;7140  display: grid;7141  place-items: center;7142}71437144.peach-adopt-vault--pair {7145  padding: 10px;7146  overflow-y: auto;7147  scrollbar-width: none;7148}71497150.peach-adopt-vault--pair::-webkit-scrollbar {7151  display: none;7152}71537154.peach-adopt-card {7155  position: relative;7156  z-index: 1;7157  width: min(100%, 330px);7158  padding: 20px;7159  border-radius: 8px;7160  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);7161  background: color-mix(in srgb, var(--peach-surface) 90%, transparent);7162  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);7163}71647165.peach-adopt-card--pair {7166  width: 100%;7167  max-height: 500px;7168  margin: auto;7169  padding: 14px 16px 12px;7170  overflow-y: auto;7171  scrollbar-width: none;7172  border: 0;7173  border-radius: 16px;7174  background:7175    radial-gradient(7176      circle at 50% -10%,7177      color-mix(in srgb, var(--peach-accent) 14%, transparent),7178      transparent 38%7179    ),7180    color-mix(in srgb, var(--peach-surface) 94%, transparent);7181}71827183.peach-adopt-card--pair::-webkit-scrollbar {7184  display: none;7185}71867187.peach-adopt-card h1 {7188  margin: 0 0 10px;7189  font-size: 1.28rem;7190  line-height: 1.15;7191}71927193.peach-adopt-card p {7194  margin: 0 0 14px;7195  color: var(--peach-t1);7196  line-height: 1.35;7197}71987199.peach-adopt-card .peach-hint-relay {7200  margin: 12px 0 0;7201  font-size: 11px;7202  line-height: 1.4;7203  color: var(--peach-t2);7204  opacity: 0.85;7205}72067207.peach-adopt-input {7208  margin-bottom: 12px;7209}72107211.peach-adopt-card textarea.peach-adopt-input {7212  width: 100%;7213  resize: vertical;7214  overflow-wrap: anywhere;7215  font-family: "IBM Plex Mono", monospace;7216  font-size: 0.64rem;7217}72187219.peach-adopt-qr-video {7220  display: block;7221  width: 100%;7222  max-height: 220px;7223  margin: 0 0 12px;7224  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);7225  border-radius: 8px;7226  background: #000;7227  object-fit: cover;7228}72297230.peach-adoption-source-invitation {7231  display: flex;7232  flex-direction: column;7233  align-items: center;7234  gap: 10px;7235  padding: 4px 18px 16px;7236  text-align: center;7237}72387239.peach-pair-qr {7240  display: block;7241  margin-inline: auto;7242  max-width: min(224px, 100%);7243  height: auto;7244  padding: 8px;7245  border-radius: 10px;7246  background: #fff;7247}72487249.peach-adopt-card > .peach-btn + .peach-btn {7250  margin-top: 8px;7251}72527253.peach-adopt-actions {7254  display: flex;7255  gap: 10px;7256  margin-top: 14px;7257}72587259.peach-adopt-actions > button {7260  flex: 1;7261}72627263.peach-adopt-sas {7264  margin: 18px 0;7265  padding: 14px;7266  border-radius: 8px;7267  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);7268  color: var(--peach-t0);7269  font-size: 1.35rem;7270  font-weight: 800;7271  font-variant-numeric: tabular-nums;7272  text-align: center;7273}72747275.peach-adopt-pairing {7276  text-align: center;7277}72787279.peach-adopt-pairing h1 {7280  max-width: 260px;7281  margin: 0 auto 6px;7282  color: var(--peach-t0);7283  font-family: var(--font-display, Georgia, serif);7284  font-size: 1.42rem;7285  font-style: italic;7286  font-weight: 500;7287  line-height: 1.12;7288  text-wrap: balance;7289}72907291.peach-adopt-pairing .peach-adopt-pair-lede {7292  max-width: 258px;7293  margin: 0 auto;7294  color: color-mix(in srgb, var(--peach-t0) 82%, var(--peach-bg));7295  font-size: 0.73rem;7296  line-height: 1.42;7297  text-wrap: pretty;7298}72997300.peach-pair-stage.peach-adopt-bird-stage {7301  width: min(100%, 260px);7302  height: 102px;7303  margin: -6px auto 2px;7304}73057306.peach-adopt-bird-stage .peach-pair-bird-slot,7307.peach-adopt-bird-stage .peach-pair-bird {7308  width: 90px;7309  height: 90px;7310}73117312.peach-adopt-bird-stage .peach-pair-bird-slot-desktop {7313  left: 12px;7314}73157316.peach-adopt-bird-stage .peach-pair-bird-slot-mobile {7317  right: 12px;7318}73197320.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-desktop {7321  --bb-x: 12px;7322  transform: translateX(12px);7323}73247325.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-mobile {7326  --bb-x: -12px;7327  transform: translateX(-12px);7328}73297330.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot {7331  animation: peach-adopt-happy-bob 0.8s ease-in-out infinite;7332}73337334.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-mobile {7335  animation-delay: 0.18s;7336  animation-direction: reverse;7337}73387339.peach-adopt-pairing.is-complete .peach-pair-stage.peach-adopt-bird-stage {7340  width: 100%;7341  height: 135px;7342  margin: -8px auto 6px;7343}73447345.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot,7346.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird {7347  width: 112px;7348  height: 112px;7349}73507351.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot-desktop {7352  left: 0;7353  --bb-x: 0;7354  transform: translateX(0);7355}73567357.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot-mobile {7358  right: 0;7359  --bb-x: 0;7360  transform: translateX(0);7361}73627363.peach-adopt-pairing.is-complete h1 {7364  font-size: 1.6rem;7365}73667367.peach-adopt-pairing.is-complete .peach-adopt-pair-lede {7368  font-size: 0.78rem;7369}73707371@keyframes peach-adopt-happy-bob {7372  0%, 100% {7373    transform: translateX(var(--bb-x, 0)) translateY(0) rotate(0deg);7374  }7375  35% {7376    transform: translateX(var(--bb-x, 0)) translateY(-8px) rotate(-3deg);7377  }7378  70% {7379    transform: translateX(var(--bb-x, 0)) translateY(-3px) rotate(2deg);7380  }7381}73827383.peach-adopt-connection {7384  position: absolute;7385  left: 50%;7386  bottom: 38px;7387  width: 78px;7388  height: 1px;7389  translate: -50% 0;7390  background: color-mix(in srgb, var(--peach-accent) 62%, transparent);7391  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 56%, transparent);7392}73937394.peach-adopt-pairing.is-complete .peach-adopt-connection {7395  bottom: 49px;7396  width: 92px;7397}73987399.peach-adopt-connection::after {7400  content: "";7401  position: absolute;7402  left: 50%;7403  top: 50%;7404  width: 7px;7405  height: 7px;7406  border-radius: 50%;7407  translate: -50% -50%;7408  background: var(--peach-accent);7409  box-shadow:7410    0 0 0 4px color-mix(in srgb, var(--peach-accent) 17%, transparent),7411    0 0 14px color-mix(in srgb, var(--peach-accent) 74%, transparent);7412  animation: peach-adopt-connection-pulse 1.1s ease-in-out infinite;7413}74147415@keyframes peach-adopt-connection-pulse {7416  0%, 100% { scale: 0.8; opacity: 0.72; }7417  50% { scale: 1.14; opacity: 1; }7418}74197420.peach-adopt-qr-wrap {7421  min-height: 160px;7422  display: grid;7423  place-items: center;7424}74257426.peach-adopt-qr-wrap .peach-hint-error {7427  margin: 12px 0;7428}74297430.peach-adopt-pairing .peach-adopt-pair-status {7431  margin: 0;7432  color: var(--peach-t0);7433  font-size: 0.75rem;7434}74357436.peach-adopt-confirmation {7437  margin-top: 18px;7438  padding: 8px 0 4px;7439}74407441.peach-adopt-confirmation .peach-adopt-confirmation-label {7442  margin: 0 0 7px;7443  color: color-mix(in srgb, var(--peach-accent) 72%, var(--peach-t0));7444  font-family: var(--peach-mono, "IBM Plex Mono", monospace);7445  font-size: 0.625rem;7446  font-weight: 700;7447  letter-spacing: 0.14em;7448}74497450.peach-adopt-confirmation .peach-adoption-sas {7451  margin: 0 auto;7452  padding: 12px 14px;7453  border-color: color-mix(in srgb, var(--peach-accent) 36%, transparent);7454  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);7455}74567457.peach-adopt-confirmation .peach-adoption-sas strong {7458  color: color-mix(in srgb, var(--peach-accent) 84%, var(--peach-t0));7459  font-size: 1.58rem;7460  text-shadow: 0 0 16px color-mix(in srgb, var(--peach-accent) 30%, transparent);7461}74627463.peach-adopt-confirmation .peach-adopt-confirmation-help {7464  max-width: 270px;7465  margin: 8px auto 0;7466  color: color-mix(in srgb, var(--peach-t0) 78%, var(--peach-bg));7467  font-size: 0.7rem;7468  line-height: 1.45;7469}74707471.peach-adopt-privacy {7472  display: flex;7473  align-items: flex-start;7474  gap: 9px;7475  margin-top: 10px;7476  padding: 8px 9px;7477  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);7478  border-radius: 10px;7479  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);7480  text-align: left;7481}74827483.peach-adopt-privacy svg {7484  width: 16px;7485  height: 16px;7486  flex: 0 0 auto;7487  margin-top: 1px;7488  fill: none;7489  stroke: color-mix(in srgb, var(--peach-accent) 74%, var(--peach-t0));7490  stroke-linecap: round;7491  stroke-linejoin: round;7492  stroke-width: 1.7;7493}74947495.peach-adopt-pairing .peach-adopt-privacy p {7496  margin: 0;7497  color: color-mix(in srgb, var(--peach-t0) 76%, var(--peach-bg));7498  font-size: 0.62rem;7499  line-height: 1.4;7500}75017502.peach-adopt-privacy strong {7503  color: var(--peach-t0);7504  font-weight: 700;7505}75067507.peach-adopt-pair-actions {7508  margin-top: 9px;7509}75107511.peach-adopt-pair-actions > button {7512  width: 100%;7513}75147515.peach-adopt-paired-status {7516  display: inline-flex;7517  align-items: center;7518  gap: 8px;7519  margin: 22px auto 18px;7520  padding: 9px 13px;7521  border: 1px solid color-mix(in srgb, var(--peach-accent) 30%, transparent);7522  border-radius: 999px;7523  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);7524  color: color-mix(in srgb, var(--peach-accent) 78%, var(--peach-t0));7525  font-family: var(--peach-mono, "IBM Plex Mono", monospace);7526  font-size: 0.66rem;7527  font-weight: 700;7528  letter-spacing: 0.04em;7529}75307531.peach-adopt-paired-status span {7532  width: 7px;7533  height: 7px;7534  border-radius: 50%;7535  background: var(--peach-accent);7536  box-shadow: 0 0 8px color-mix(in srgb, var(--peach-accent) 68%, transparent);7537}75387539@media (prefers-reduced-motion: reduce) {7540  .peach-adopt-connection::after {7541    animation: none;7542  }7543}75447545.peach-onboarding-mobile-card-buttons {7546  display: flex;7547  flex-direction: column;7548  gap: 8px;7549  margin-top: 16px;7550}75517552@keyframes peach-onboard-enter {7553  from { opacity: 0; transform: translateY(20px); }7554  to   { opacity: 1; transform: translateY(0); }7555}75567557@keyframes peach-onboard-exit {7558  from { opacity: 1; }7559  to   { opacity: 0; }7560}75617562@keyframes peach-card-in {7563  from { opacity: 0; transform: translateX(12px); }7564  to   { opacity: 1; transform: translateX(0); }7565}75667567@keyframes peach-card-out {7568  from { opacity: 1; transform: translateX(0); }7569  to   { opacity: 0; transform: translateX(-12px); }7570}75717572/* ─── New vault screen — matched to onboarding card language ─────────── */75737574/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage7575   rule (same element) without loosening the unlock/restore screens. The7576   create-vault screen is the only vault-stage view tall enough to overflow7577   the 520px popup, so its spacing is tuned to fit header → card → restore →7578   recovery warning with nothing clipped. */7579.peach-screen.peach-newvault {7580  position: relative;7581  display: flex;7582  flex-direction: column;7583  gap: 12px;7584  padding: 14px 16px 12px;7585  overflow: hidden;7586}75877588/* Suppress the warm-blob ambient art inherited from .lock-screen — the7589   new vault card now carries the visual weight. */7590.peach-newvault::before {7591  content: none;7592}75937594.peach-newvault-header {7595  position: relative;7596  z-index: 2;7597  display: flex;7598  align-items: center;7599  gap: 10px;7600  margin-bottom: 2px;7601}76027603.peach-newvault-back {7604  display: inline-flex;7605  align-items: center;7606  gap: 4px;7607  background: transparent;7608  border: none;7609  color: var(--peach-t2);7610  font-family: "IBM Plex Mono", monospace;7611  font-size: 0.625rem;7612  letter-spacing: 0.06em;7613  cursor: pointer;7614  padding: 4px 6px;7615  border-radius: 6px;7616  transition: color 120ms ease, background 120ms ease;7617}76187619.peach-newvault-back:hover {7620  color: var(--peach-t0);7621  background: rgba(240, 232, 216, 0.04);7622}76237624.peach-newvault-mark {7625  position: absolute;7626  right: -12px;7627  top: 6px;7628  width: 110px;7629  height: 110px;7630  pointer-events: none;7631  opacity: 0.10;7632  filter: saturate(0.9);7633  z-index: 0;7634}7635.peach-newvault-mark-art {7636  width: 100%;7637  height: 100%;7638}7639.peach-newvault-mark-art path:nth-child(1) {7640  fill: rgba(123, 144, 96, 0.88);7641}7642.peach-newvault-mark-art path:nth-child(2) {7643  stroke: rgba(94, 122, 66, 0.95);7644}76457646.peach-newvault-card {7647  position: relative;7648  z-index: 1;7649  display: flex;7650  flex-direction: column;7651  gap: 8px;7652  padding: 16px 20px 14px;7653  border-radius: 16px;7654  border: 1px solid var(--peach-t3);7655  background:7656    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7657  backdrop-filter: blur(3px);7658  -webkit-backdrop-filter: blur(3px);7659  box-shadow:7660    inset 0 1px 0 rgba(240, 232, 216, 0.04),7661    0 12px 28px rgba(0, 0, 0, 0.12);7662  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7663}76647665.peach-newvault-headline {7666  margin: 0;7667  font-family: var(--font-display);7668  font-style: italic;7669  font-weight: 400;7670  font-size: 24px;7671  line-height: 1.05;7672  color: var(--peach-t0);7673  white-space: pre-line;7674}76757676.peach-newvault-divider {7677  margin: 2px 0 4px;7678  border: 0;7679  border-top: 1px solid var(--peach-t3);7680  width: 100%;7681}76827683.peach-newvault-field {7684  display: flex;7685  flex-direction: column;7686  gap: 4px;7687}76887689.peach-newvault-label-row {7690  display: flex;7691  align-items: center;7692  justify-content: space-between;7693}76947695/* Monospace input scaled to the card. Replaces the 22px unlock-input7696   so the placeholder no longer overflows and the field reads as part7697   of the same surface as the body copy. */7698.peach-newvault-input {7699  font-size: 0.875rem;7700  letter-spacing: 0.18em;7701  padding: 8px 0;7702}7703.peach-newvault-input::placeholder {7704  letter-spacing: 0.18em;7705  color: var(--peach-t2);7706}77077708.peach-newvault-hint {7709  margin: 2px 0 0;7710  font-family: "IBM Plex Mono", monospace;7711  font-size: 0.625rem;7712  color: var(--peach-t2);7713  letter-spacing: 0.04em;7714}77157716.peach-newvault-submit {7717  margin-top: 4px;7718}77197720.peach-newvault-warning {7721  display: flex;7722  align-items: flex-start;7723  gap: 8px;7724  margin: 2px 0 0;7725  padding-top: 8px;7726  border-top: 1px dashed var(--peach-t3);7727  font-size: 0.75rem;7728  line-height: 1.45;7729  color: var(--peach-t1);7730}77317732.peach-newvault-warning-icon {7733  color: var(--peach-accent);7734  font-size: 0.8125rem;7735  line-height: 1.4;7736  flex: 0 0 auto;7737}77387739/* Restore options sit inside the card, directly under "create vault", so7740   they are always reachable without scrolling. The top divider mirrors the7741   warning's so the choice reads as a deliberate fork, not a footnote. */7742.peach-newvault-restore {7743  position: relative;7744  z-index: 1;7745  display: flex;7746  flex-direction: column;7747  gap: 4px;7748  margin-top: 4px;7749  padding-top: 10px;7750  border-top: 1px dashed var(--peach-t3);7751}77527753/* Settings body — warm accent gradient gives the glass something to blur against */7754.peach-settings-body {7755  background:7756    radial-gradient(7757      ellipse at 30% 20%,7758      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7759      transparent 60%7760    );7761}77627763/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7764/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7765 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7766 * (replacing the vault from a backup file) and "hazard" for actions that7767 * are absolutely irreversible (Panic). Both use the same card scaffold so7768 * they read as a pair, but the colour family signals the severity at a7769 * glance — yellow for caution, red for don't.7770 */7771.peach-danger-card {7772  --danger-tint: 235, 158, 52; /* amber */7773  display: flex;7774  flex-direction: column;7775  gap: 8px;7776  padding: 14px;7777  margin-top: 10px;7778  border-radius: 12px;7779  border: 1px solid rgba(var(--danger-tint), 0.32);7780  background:7781    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7782    rgba(var(--danger-tint), 0.04);7783  box-shadow:7784    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7785    0 0 24px rgba(var(--danger-tint), 0.04);7786  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7787}77887789.peach-danger-card:hover {7790  border-color: rgba(var(--danger-tint), 0.55);7791  box-shadow:7792    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7793    0 0 36px rgba(var(--danger-tint), 0.10);7794}77957796.peach-danger-card--hazard {7797  --danger-tint: 220, 38, 38; /* red */7798}77997800.peach-danger-card-head {7801  display: flex;7802  align-items: center;7803  gap: 10px;7804}78057806.peach-danger-card-glyph {7807  width: 28px;7808  height: 28px;7809  flex-shrink: 0;7810  display: flex;7811  align-items: center;7812  justify-content: center;7813  border-radius: 8px;7814  background: rgba(var(--danger-tint), 0.12);7815  color: rgba(var(--danger-tint), 0.95);7816  font-size: 1rem;7817  line-height: 1;7818}78197820.peach-danger-card-title {7821  margin: 0;7822  font-size: 0.8125rem;7823  font-weight: 600;7824  color: rgba(var(--danger-tint), 0.92);7825  letter-spacing: 0.01em;7826}78277828.peach-danger-card-copy {7829  margin: 0;7830  font-size: 0.6875rem;7831  line-height: 1.5;7832  color: var(--peach-t2);7833}78347835.peach-danger-card-button {7836  width: 100%;7837  padding: 9px;7838  margin-top: 4px;7839  background: transparent;7840  border: 1px solid rgba(var(--danger-tint), 0.45);7841  border-radius: 8px;7842  color: rgba(var(--danger-tint), 0.9);7843  font-size: 0.75rem;7844  font-weight: 500;7845  letter-spacing: 0.02em;7846  cursor: pointer;7847  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7848}78497850.peach-danger-card-button:hover {7851  background: rgba(var(--danger-tint), 0.10);7852  border-color: rgba(var(--danger-tint), 0.75);7853  color: rgb(var(--danger-tint));7854}78557856.peach-adoption-sas {7857  margin: 16px auto 0;7858  padding: 12px 16px;7859  border: 1px solid color-mix(in srgb, var(--peach-t0) 18%, transparent);7860  border-radius: 10px;7861  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);7862  color: var(--peach-t0);7863  text-align: center;7864}78657866.peach-adoption-sas strong {7867  font-size: 1.65rem;7868  font-variant-numeric: tabular-nums;7869  letter-spacing: 0.18em;7870  white-space: nowrap;7871}78727873/* ── Panic flow (three-step destruction) ───────────────────────────────── */7874.peach-panic {7875  display: flex;7876  flex-direction: column;7877  flex: 1;7878  min-height: 0;7879  padding: 28px 20px 20px;7880  gap: 18px;7881  overflow-y: auto;7882  scrollbar-width: none;7883  -ms-overflow-style: none;7884}78857886.peach-panic::-webkit-scrollbar { display: none; }78877888.peach-panic-step2 {7889  background: rgba(220, 38, 38, 0.04);7890}78917892.peach-panic-step3 {7893  position: relative;7894  background: #0f0505;7895  color: #ffffff;7896  overflow: hidden;7897}78987899.peach-panic-rune-bg {7900  position: absolute;7901  inset: 0;7902  opacity: 0.22;7903  pointer-events: none;7904  overflow: hidden;7905}79067907.peach-panic-rune-bg canvas {7908  width: 100% !important;7909  height: 100% !important;7910}79117912.peach-panic-icon {7913  font-size: 32px;7914  color: rgb(220, 38, 38);7915  line-height: 1;7916}79177918.peach-panic-title {7919  margin: 0;7920  font-size: 18px;7921  font-weight: 500;7922  color: var(--peach-t1);7923}79247925.peach-panic-title--severe {7926  font-size: 20px;7927  font-weight: 700;7928  color: rgb(220, 38, 38);7929}79307931.peach-panic-body {7932  margin: 0;7933  font-size: 0.8125rem;7934  line-height: 1.55;7935  color: var(--peach-t2);7936}79377938.peach-panic-body--severe {7939  color: rgba(220, 38, 38, 0.85);7940}79417942.peach-panic-body--final {7943  font-size: 1rem;7944  font-weight: 700;7945  color: rgb(255, 80, 80);7946  line-height: 1.4;7947}79487949.peach-panic-body--final-intro {7950  font-size: 1rem;7951  color: #ffffff;7952  font-weight: 400;7953}79547955.peach-panic-divider {7956  height: 1px;7957  background: rgba(255, 255, 255, 0.08);7958  margin: 4px 0;7959}79607961.peach-panic-confirm-input {7962  width: 100%;7963  padding: 10px 12px;7964  background: rgba(255, 255, 255, 0.02);7965  border: 1px solid rgba(220, 38, 38, 0.4);7966  border-radius: 8px;7967  color: var(--peach-t1);7968  font-family: "IBM Plex Mono", monospace;7969  font-size: 0.875rem;7970  letter-spacing: 0.12em;7971  text-transform: uppercase;7972}79737974.peach-panic-confirm-input:focus {7975  outline: none;7976  border-color: rgb(220, 38, 38);7977}79787979.peach-panic-confirm-input--match {7980  border-color: rgb(220, 38, 38);7981  color: rgb(220, 38, 38);7982}79837984.peach-panic-confirm-label {7985  font-size: 0.6875rem;7986  color: var(--peach-t2);7987  margin: 0 0 -8px;7988  letter-spacing: 0.06em;7989}79907991.peach-panic-actions {7992  display: flex;7993  flex-direction: column;7994  gap: 10px;7995  margin-top: auto;7996}79977998.peach-panic-button {7999  width: 100%;8000  padding: 12px;8001  border-radius: 8px;8002  font-size: 0.8125rem;8003  cursor: pointer;8004  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;8005}80068007.peach-panic-button--primary {8008  background: var(--peach-accent);8009  border: 1px solid var(--peach-accent);8010  color: #ffffff;8011  font-weight: 600;8012}80138014.peach-panic-button--primary:hover {8015  background: color-mix(in srgb, var(--peach-accent) 88%, white);8016}80178018.peach-panic-button--danger {8019  background: rgb(220, 38, 38);8020  border: 1px solid rgb(220, 38, 38);8021  color: #ffffff;8022  font-weight: 600;8023}80248025.peach-panic-button--danger:disabled {8026  opacity: 0.35;8027  cursor: not-allowed;8028}80298030.peach-panic-button--ghost {8031  background: transparent;8032  border: 1px solid rgba(255, 255, 255, 0.18);8033  color: var(--peach-t2);8034}80358036.peach-panic-button--ghost:hover {8037  border-color: rgba(255, 255, 255, 0.32);8038  color: var(--peach-t1);8039}80408041.peach-panic-link {8042  background: transparent;8043  border: none;8044  padding: 4px 0;8045  color: rgba(220, 38, 38, 0.65);8046  font-size: 0.75rem;8047  cursor: pointer;8048  text-align: left;8049  text-decoration: underline;8050  text-underline-offset: 3px;8051}80528053.peach-panic-link:hover {8054  color: rgb(220, 38, 38);8055}80568057.peach-panic-bar {8058  background: rgb(220, 38, 38);8059  padding: 16px 20px;8060  margin: -28px -20px 0;8061  text-align: center;8062  font-size: 0.8125rem;8063  font-weight: 700;8064  letter-spacing: 0.12em;8065  color: #ffffff;8066}80678068.peach-panic-final-button {8069  width: 100%;8070  padding: 14px;8071  background: rgb(220, 38, 38);8072  border: none;8073  border-radius: 8px;8074  color: #ffffff;8075  font-size: 0.875rem;8076  font-weight: 700;8077  letter-spacing: 0.08em;8078  text-transform: uppercase;8079  cursor: pointer;8080  animation: peach-panic-pulse 2s ease-in-out infinite;8081}80828083.peach-settings-license {8084  margin-top: 10px;8085  padding-top: 10px;8086  border-top: 1px solid var(--peach-t3);8087}80888089.peach-settings-label {8090  font-size: 0.625rem;8091  letter-spacing: 0.08em;8092  color: var(--peach-t3);8093  display: block;8094  margin-bottom: 6px;8095}80968097.peach-settings-license-row {8098  display: flex;8099  align-items: center;8100  justify-content: space-between;8101  gap: 8px;8102}81038104.peach-settings-license-key {8105  font-family: 'IBM Plex Mono', monospace;8106  font-size: 0.75rem;8107  color: var(--peach-t0);8108  letter-spacing: 0.04em;8109  word-break: break-all;8110  flex: 1;8111  min-width: 0;8112}81138114.peach-settings-license-key--masked {8115  font-family: 'IBM Plex Mono', monospace;8116  font-size: 0.6rem;8117  color: var(--peach-t1);8118  letter-spacing: 0.18em;8119  user-select: none;8120}81218122.peach-settings-license-actions {8123  display: flex;8124  align-items: center;8125  gap: 2px;8126  flex-shrink: 0;8127}81288129.peach-settings-license-copy {8130  font-size: 0.6875rem;8131  color: var(--peach-accent);8132  background: transparent;8133  border: none;8134  cursor: pointer;8135  padding: 4px 8px;8136  border-radius: 4px;8137  flex-shrink: 0;8138  transition: opacity 150ms ease;8139}81408141.peach-settings-license-copy:hover {8142  opacity: 0.75;8143}81448145.peach-settings-license-toggle {8146  display: flex;8147  align-items: center;8148  justify-content: center;8149  background: transparent;8150  border: none;8151  cursor: pointer;8152  padding: 4px 6px;8153  border-radius: 4px;8154  color: var(--peach-t2);8155  transition: color 150ms ease;8156}81578158.peach-settings-license-toggle:hover {8159  color: var(--peach-t1);8160}81618162@keyframes peach-panic-pulse {8163  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }8164  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }8165}81668167[data-motion="reduce"] .peach-panic-final-button {8168  animation: none;8169}81708171/* Vault History — Settings → Vault sub-view */81728173.peach-history-list {8174  border: 1px solid var(--peach-border);8175  border-radius: 8px;8176  overflow: hidden;8177  margin: 8px 0 4px;8178}81798180.peach-history-row {8181  display: flex;8182  align-items: center;8183  justify-content: space-between;8184  padding: 9px 12px;8185  gap: 10px;8186  border-bottom: 1px solid var(--peach-border);8187}81888189.peach-history-row:last-child {8190  border-bottom: none;8191}81928193.peach-history-meta {8194  display: flex;8195  flex-direction: column;8196  gap: 2px;8197  min-width: 0;8198  flex: 1;8199}82008201.peach-history-time {8202  font-size: 0.75rem;8203  font-family: 'IBM Plex Mono', ui-monospace, monospace;8204  color: var(--peach-t0);8205  white-space: nowrap;8206  overflow: hidden;8207  text-overflow: ellipsis;8208}82098210.peach-history-sub {8211  font-size: 0.625rem;8212  color: var(--peach-t2);8213  letter-spacing: 0.06em;8214  text-transform: uppercase;8215  white-space: nowrap;8216  overflow: hidden;8217  text-overflow: ellipsis;8218}82198220.peach-history-btn {8221  flex-shrink: 0;8222  white-space: nowrap;8223  min-width: 56px;8224  text-align: center;8225}82268227.peach-history-btn.is-busy {8228  opacity: 0.65;8229}82308231.peach-history-footer {8232  font-size: 0.625rem;8233  color: var(--peach-t3);8234  letter-spacing: 0.05em;8235  text-align: right;8236  margin: 0;8237  padding: 2px 0 0;8238}82398240/* ── Context menu + swipe-copy flash ─────────────────────── */8241.peach-context-menu-backdrop {8242  position: fixed;8243  inset: 0;8244  background: rgba(0, 0, 0, 0.45);8245  z-index: 100;8246  display: flex;8247  align-items: flex-end;8248  justify-content: center;8249  animation: peach-ctx-fade 140ms ease both;8250}8251.peach-context-menu {8252  width: min(360px, calc(100vw - 24px));8253  margin-bottom: max(env(safe-area-inset-bottom), 12px);8254  background: var(--peach-bg);8255  border: 1px solid var(--peach-t3);8256  border-radius: 14px;8257  padding: 6px;8258  display: flex;8259  flex-direction: column;8260  gap: 2px;8261  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);8262  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;8263}8264@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }8265@keyframes peach-ctx-rise {8266  from { transform: translateY(16px); opacity: 0; }8267  to   { transform: translateY(0);    opacity: 1; }8268}8269.peach-context-menu-item {8270  background: transparent;8271  color: var(--peach-t0);8272  border: 0;8273  border-radius: 10px;8274  padding: 12px 14px;8275  text-align: left;8276  font: inherit;8277  cursor: pointer;8278}8279.peach-context-menu-item:hover,8280.peach-context-menu-item:focus-visible {8281  background: var(--peach-t3);8282}8283.peach-context-menu-item--danger {8284  color: var(--peach-health-bad, #d96868);8285}8286.peach-context-menu-item--cancel {8287  color: var(--peach-t2);8288  margin-top: 4px;8289  border-top: 1px solid var(--peach-t3);8290  border-radius: 0 0 10px 10px;8291}82928293/* Swipe-to-copy flash */8294.peach-entry-row.is-copy-flash {8295  animation: peach-copy-flash 600ms ease both;8296}8297@keyframes peach-copy-flash {8298  0%   { background: transparent; }8299  20%  { background: rgba(217, 153, 51, 0.32); }8300  100% { background: transparent; }8301}83028303html { font-size: 16px; }83048305/* ── Recovery word entry ─────────────────────────────────────────── */8306.peach-lock-recover-link {8307  display: block;8308  width: 100%;8309  margin-top: 12px;8310  background: none;8311  border: none;8312  font-family: "IBM Plex Mono", monospace;8313  font-size: 0.625rem;8314  letter-spacing: 0.06em;8315  color: var(--peach-t2);8316  cursor: pointer;8317  text-align: center;8318  padding: 4px;8319  transition: color 120ms ease;8320}8321.peach-lock-recover-link:hover {8322  color: var(--peach-t0);8323}83248325.lock-screen--recovery {8326  display: flex;8327  flex-direction: column;8328  align-items: stretch;8329  padding: 12px 20px 24px;8330  overflow: hidden;8331}83328333.peach-recovery-nav {8334  display: flex;8335  align-items: center;8336  position: relative;8337  z-index: 1;8338  margin-bottom: 4px;8339}83408341/* Mask runes to the top decorative band only — keep inputs and the8342   bottom CTA button clear. The bottom of the popup is reserved for8343   submit buttons; rendering runes there overlaps the button glyph. */8344.peach-rune-background--recovery {8345  -webkit-mask-image: linear-gradient(8346    to bottom,8347    black 0px, black 85px,8348    transparent 110px,8349    transparent 100%8350  );8351  mask-image: linear-gradient(8352    to bottom,8353    black 0px, black 85px,8354    transparent 110px,8355    transparent 100%8356  );8357}83588359.peach-recovery-header {8360  text-align: center;8361  margin-bottom: 16px;8362  margin-top: 4px;8363}8364.peach-recovery-header .peach-onboarding-headline {8365  font-size: 1.25rem;8366  font-weight: 300;8367  letter-spacing: 0.02em;8368  margin: 0 0 4px;8369}8370.peach-recovery-header .peach-hint {8371  font-family: "IBM Plex Mono", monospace;8372  font-size: 0.625rem;8373  color: var(--peach-t2);8374  letter-spacing: 0.04em;8375  margin: 0;8376}83778378/* 12-word grid: 2 columns × 6 rows */8379.peach-recovery-grid {8380  display: grid;8381  grid-template-columns: repeat(2, 1fr);8382  gap: 12px 20px;8383  width: 100%;8384  margin-bottom: 0;8385}83868387.peach-recovery-word-slot {8388  display: flex;8389  align-items: center;8390  gap: 6px;8391  min-width: 0;8392}83938394.peach-recovery-word-index {8395  font-family: "IBM Plex Mono", monospace;8396  font-size: 0.5rem;8397  color: rgba(255, 255, 255, 0.35);8398  min-width: 14px;8399  flex-shrink: 0;8400  text-align: right;8401  letter-spacing: 0.04em;8402}84038404.peach-recovery-word-input {8405  flex: 1;8406  min-width: 0;8407  background: transparent;8408  border: none;8409  border-bottom: 1px solid rgba(255, 255, 255, 0.22);8410  color: var(--peach-t0);8411  font-family: "IBM Plex Mono", monospace;8412  font-size: 0.6875rem;8413  letter-spacing: 0.06em;8414  padding: 5px 2px 4px;8415  outline: none;8416  text-transform: lowercase;8417  transition: border-color 120ms ease;8418}8419.peach-recovery-word-input::placeholder {8420  color: rgba(255, 255, 255, 0.18);8421}8422.peach-recovery-word-input:focus {8423  border-bottom-color: var(--peach-accent);8424}84258426.peach-recovery-submit {8427  width: 100%;8428  margin-top: auto;8429}84308431.peach-recovery-new-password-form {8432  width: 100%;8433  display: flex;8434  flex-direction: column;8435  gap: 16px;8436  margin-bottom: 8px;8437}8438.peach-recovery-new-password-form .peach-newvault-field {8439  display: flex;8440  flex-direction: column;8441  gap: 4px;8442}84438444/* ── Recovery words display (post-create) ────────────────────────── */8445.lock-screen--recovery-display {8446  display: flex;8447  flex-direction: column;8448  align-items: stretch;8449  padding: 0 20px 20px;8450  min-height: 0;8451  overflow-y: auto;8452}84538454.peach-recovery-words-display {8455  width: 100%;8456  margin-bottom: 16px;8457  border: 1px solid var(--peach-t3);8458  border-radius: 8px;8459  padding: 12px 14px;8460  background: rgba(245, 240, 234, 0.04);8461}84628463.peach-recovery-words-label {8464  font-family: "IBM Plex Mono", monospace;8465  font-size: 0.5rem;8466  letter-spacing: 0.08em;8467  color: var(--peach-t2);8468  text-transform: uppercase;8469  margin-bottom: 10px;8470}84718472.peach-recovery-word-list {8473  list-style: none;8474  margin: 0;8475  padding: 0;8476  display: grid;8477  grid-template-columns: repeat(2, 1fr);8478  gap: 6px 16px;8479}84808481.peach-recovery-word-item {8482  display: flex;8483  align-items: baseline;8484  gap: 5px;8485}84868487.peach-recovery-word-num {8488  font-family: "IBM Plex Mono", monospace;8489  font-size: 0.5rem;8490  color: var(--peach-t2);8491  width: 14px;8492  flex: 0 0 14px;8493  text-align: right;8494  letter-spacing: 0.04em;8495  font-variant-numeric: tabular-nums;8496}84978498.peach-recovery-download-btn {8499  display: block;8500  margin: 10px auto 0;8501  padding: 4px 10px;8502  background: transparent;8503  border: 1px solid var(--peach-border);8504  border-radius: 6px;8505  color: var(--peach-t2);8506  font-family: "IBM Plex Mono", monospace;8507  font-size: 0.5625rem;8508  letter-spacing: 0.06em;8509  text-transform: lowercase;8510  cursor: pointer;8511  transition: border-color 0.15s, color 0.15s;8512}85138514.peach-recovery-download-btn:hover {8515  border-color: var(--peach-accent);8516  color: var(--peach-t0);8517}85188519.peach-recovery-word-text {8520  font-family: "IBM Plex Mono", monospace;8521  font-size: 0.6875rem;8522  letter-spacing: 0.06em;8523  color: var(--peach-t0);8524  text-transform: lowercase;8525}85268527.peach-hint--warning {8528  color: var(--peach-accent);8529  font-style: italic;8530}8531.peach-hint--success {8532  color: var(--peach-t2);8533  font-family: "IBM Plex Mono", monospace;8534  font-size: 0.625rem;8535  letter-spacing: 0.06em;8536}85378538/* Confirmation step */8539.peach-recovery-confirm {8540  width: 100%;8541  flex: 1;8542  display: flex;8543  flex-direction: column;8544}8545.peach-recovery-confirm-label {8546  font-family: "IBM Plex Mono", monospace;8547  font-size: 0.5625rem;8548  letter-spacing: 0.04em;8549  color: var(--peach-t2);8550  text-align: center;8551  margin: 0 0 12px;8552}8553.peach-recovery-confirm-fields {8554  display: flex;8555  flex-direction: column;8556  gap: 14px;8557  margin-bottom: 10px;8558}8559.peach-recovery-confirm-field {8560  display: flex;8561  align-items: center;8562  gap: 8px;8563}8564.peach-recovery-confirm-num {8565  font-family: "IBM Plex Mono", monospace;8566  font-size: 0.5rem;8567  color: var(--peach-t2);8568  min-width: 44px;8569  letter-spacing: 0.04em;8570}8571.peach-recovery-confirm-input {8572  flex: 1;8573  background: transparent;8574  border: none;8575  border-bottom: 1px solid var(--peach-t3);8576  color: var(--peach-t0);8577  font-family: "IBM Plex Mono", monospace;8578  font-size: 0.6875rem;8579  letter-spacing: 0.06em;8580  padding: 4px 2px 3px;8581  outline: none;8582  text-transform: lowercase;8583  transition: border-color 120ms ease;8584}8585.peach-recovery-confirm-input:focus {8586  border-bottom-color: var(--peach-accent);8587}8588.peach-recovery-confirm-input:disabled {8589  opacity: 0.4;8590  cursor: not-allowed;8591}8592.peach-recovery-confirm-btn {8593  width: 100%;8594  margin-top: auto;8595}85968597/* ============================================================8598   Sync info sheet8599   ============================================================ */86008601.peach-sync-info-backdrop {8602  position: fixed;8603  inset: 0;8604  z-index: 200;8605  background: rgba(0, 0, 0, 0.55);8606  display: flex;8607  align-items: flex-end;8608  animation: peach-fade-in 200ms ease forwards;8609}86108611@keyframes peach-fade-in {8612  from { opacity: 0; }8613  to   { opacity: 1; }8614}86158616.peach-sync-info-sheet {8617  width: 100%;8618  background: var(--peach-bg-card, var(--peach-bg));8619  border-top-left-radius: 20px;8620  border-top-right-radius: 20px;8621  padding: 12px 24px 32px;8622  display: flex;8623  flex-direction: column;8624  gap: 20px;8625  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8626}86278628@keyframes peach-sheet-up {8629  from { transform: translateY(100%); }8630  to   { transform: translateY(0); }8631}86328633.peach-sync-info-handle {8634  width: 36px;8635  height: 4px;8636  border-radius: 2px;8637  background: var(--peach-border);8638  margin: 0 auto 4px;8639  flex-shrink: 0;8640}86418642.peach-sync-info-title {8643  font-family: 'Cormorant Garamond', serif;8644  font-style: italic;8645  font-size: 26px;8646  font-weight: 600;8647  color: var(--peach-t0);8648  margin: 0;8649  line-height: 1.2;8650}86518652.peach-sync-info-body {8653  display: flex;8654  flex-direction: column;8655  gap: 14px;8656}86578658.peach-sync-info-point {8659  display: flex;8660  gap: 12px;8661  align-items: flex-start;8662  font-size: 14px;8663  color: var(--peach-t2);8664  line-height: 1.6;8665  margin: 0;8666}86678668.peach-sync-info-icon {8669  color: var(--peach-accent);8670  font-size: 16px;8671  flex-shrink: 0;8672  margin-top: 1px;8673}86748675.peach-sync-info-actions {8676  display: flex;8677  flex-direction: column;8678  gap: 12px;8679  margin-top: 4px;8680}86818682.peach-sync-info-pro-link {8683  background: none;8684  border: none;8685  font-size: 13px;8686  color: var(--peach-t3);8687  cursor: pointer;8688  padding: 0;8689  font-family: inherit;8690  text-align: center;8691  transition: color 150ms ease;8692}86938694.peach-sync-info-pro-link:hover {8695  color: var(--peach-accent);8696}86978698.peach-btn--full {8699  width: 100%;8700}87018702/* ── Sync screen ── */87038704.peach-sync-coming-soon {8705  display: flex;8706  align-items: flex-start;8707  gap: 10px;8708  padding: 12px 14px;8709  background: var(--peach-s1);8710  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8711  border-radius: 10px;8712}8713.peach-sync-coming-soon__icon {8714  flex-shrink: 0;8715  color: var(--peach-accent);8716  margin-top: 1px;8717  line-height: 0;8718}8719.peach-sync-coming-soon__title {8720  font-family: 'Cormorant Garamond', serif;8721  font-weight: 500;8722  font-size: 13px;8723  color: var(--peach-accent);8724  margin: 0 0 5px;8725  line-height: 1.3;8726}8727.peach-sync-coming-soon__body {8728  font-size: 12px;8729  color: var(--peach-t1);8730  line-height: 1.55;8731  margin: 0;8732}87338734.peach-sync-screen {8735  display: flex;8736  flex-direction: column;8737  height: 100%;8738}87398740.peach-sync-content {8741  flex: 1;8742  overflow-y: auto;8743  padding: 24px 20px 40px;8744  display: flex;8745  flex-direction: column;8746  gap: 24px;8747}87488749/* Intro (State A) */8750.peach-sync-headline {8751  font-family: 'Cormorant Garamond', serif;8752  font-style: italic;8753  font-size: 28px;8754  font-weight: 600;8755  color: var(--peach-t0);8756  margin: 0 0 10px;8757  line-height: 1.2;8758}87598760.peach-sync-intro-body {8761  font-size: 14px;8762  color: var(--peach-t1);8763  line-height: 1.6;8764  margin: 0;8765}87668767.peach-sync-pro-note {8768  display: flex;8769  flex-direction: column;8770  gap: 8px;8771  background: var(--peach-t3);8772  border-radius: 10px;8773  padding: 12px 14px;8774}87758776.peach-sync-pro-note-text {8777  font-size: 12px;8778  color: var(--peach-t2);8779  line-height: 1.5;8780  margin: 0;8781}87828783.peach-sync-pro-link {8784  background: none;8785  border: none;8786  font-size: 12px;8787  color: var(--peach-accent);8788  cursor: pointer;8789  padding: 0;8790  font-family: inherit;8791  text-align: left;8792}87938794/* Status (State C) */8795.peach-sync-status {8796  padding: 12px 0;8797  border-bottom: 1px solid var(--peach-border);8798}87998800.peach-sync-status-row {8801  display: flex;8802  align-items: center;8803  gap: 8px;8804}88058806.peach-sync-dot {8807  width: 7px;8808  height: 7px;8809  border-radius: 50%;8810  flex-shrink: 0;8811}88128813.peach-sync-dot--green { background: var(--peach-health-ok); }8814.peach-sync-dot--amber { background: var(--peach-accent); }88158816.peach-sync-status-text {8817  font-family: 'IBM Plex Mono', monospace;8818  font-size: 11px;8819  color: var(--peach-t2);8820}88218822/* Paired devices */8823.peach-sync-section {8824  display: flex;8825  flex-direction: column;8826  gap: 2px;8827}88288829.peach-sync-section-label {8830  font-family: 'IBM Plex Mono', monospace;8831  font-size: 10px;8832  letter-spacing: 0.1em;8833  color: var(--peach-t3);8834  margin: 0 0 10px;8835}88368837.peach-sync-device-row {8838  display: flex;8839  justify-content: space-between;8840  align-items: baseline;8841  padding: 10px 0;8842  border-bottom: 1px solid var(--peach-border);8843  gap: 12px;8844}88458846.peach-sync-device-name {8847  font-size: 14px;8848  color: var(--peach-t1);8849}88508851.peach-sync-device-meta {8852  font-family: 'IBM Plex Mono', monospace;8853  font-size: 11px;8854  color: var(--peach-t3);8855  white-space: nowrap;8856}88578858.peach-sync-hub-note {8859  padding: 14px 16px;8860  border: 1px solid var(--peach-border);8861  border-radius: 10px;8862  display: flex;8863  flex-direction: column;8864  gap: 6px;8865  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8866}88678868.peach-sync-hub-note-title {8869  font-size: 13px;8870  font-weight: 600;8871  color: var(--peach-t0);8872  margin: 0;8873}88748875.peach-sync-hub-note-body {8876  font-size: 12px;8877  color: var(--peach-t2);8878  line-height: 1.6;8879  margin: 0;8880}88818882/* Action buttons */8883.peach-sync-actions {8884  display: flex;8885  gap: 10px;8886  flex-wrap: wrap;8887}88888889/* Upgrade prompt (State B) */8890.peach-sync-upgrade {8891  display: flex;8892  flex-direction: column;8893  gap: 12px;8894  padding: 16px;8895  border: 1px solid var(--peach-border);8896  border-radius: 10px;8897}88988899.peach-sync-upgrade-text {8900  font-size: 13px;8901  color: var(--peach-t2);8902  line-height: 1.6;8903  margin: 0;8904}89058906/* Network note */8907.peach-sync-network-note {8908  font-size: 12px;8909  color: var(--peach-t3);8910  line-height: 1.6;8911  margin: 0;8912}89138914/* Advanced */8915.peach-sync-advanced {8916  margin-top: auto;8917  padding-top: 16px;8918  border-top: 1px solid var(--peach-border);8919}89208921.peach-sync-advanced-toggle {8922  display: flex;8923  align-items: center;8924  gap: 8px;8925  background: none;8926  border: none;8927  font-family: 'IBM Plex Mono', monospace;8928  font-size: 11px;8929  letter-spacing: 0.08em;8930  color: var(--peach-t3);8931  cursor: pointer;8932  padding: 0;8933  text-transform: uppercase;8934}89358936.peach-sync-advanced-chevron {8937  display: inline-block;8938  transition: transform 200ms ease;8939  font-size: 10px;8940}89418942.peach-sync-advanced-chevron.is-open {8943  transform: rotate(90deg);8944}89458946.peach-sync-advanced-content {8947  margin-top: 14px;8948}89498950.peach-sync-advanced-row {8951  display: flex;8952  justify-content: space-between;8953  align-items: center;8954  gap: 16px;8955}89568957.peach-sync-advanced-title {8958  font-size: 14px;8959  color: var(--peach-t1);8960  margin: 0 0 2px;8961}89628963.peach-sync-advanced-subtitle {8964  font-size: 12px;8965  color: var(--peach-t3);8966  margin: 0;8967  line-height: 1.5;8968}89698970/* ── Notes Mode ── */89718972/* Overlay that crossfades over the vault */8973.peach-notes-overlay {8974  position: fixed;8975  inset: 0;8976  z-index: 90;8977  opacity: 0;8978  pointer-events: none;8979  animation: peach-mode-in 220ms ease-in forwards;8980}89818982.peach-notes-overlay.is-visible {8983  opacity: 1;8984  pointer-events: auto;8985}89868987@keyframes peach-mode-in {8988  from { opacity: 0; }8989  to   { opacity: 1; }8990}89918992/* Top-level notes surface */8993.peach-notes-mode {8994  position: absolute;8995  inset: 0;8996  background: var(--peach-bg);8997  display: flex;8998  flex-direction: column;8999}90009001/* Rune canvas positioned behind content */9002.peach-note-rune-canvas {9003  position: absolute;9004  inset: 0;9005  width: 100%;9006  height: 100%;9007  pointer-events: none;9008  z-index: 0;9009}90109011/* TOC wrapper */9012.peach-notes-toc-wrapper {9013  position: absolute;9014  inset: 0;9015  z-index: 1;9016  opacity: 1;9017  pointer-events: auto;9018  transition: opacity 200ms ease;9019}90209021.peach-notes-toc-wrapper.is-hidden {9022  opacity: 0;9023  pointer-events: none;9024}90259026/* Editor wrapper */9027.peach-notes-editor-wrapper {9028  position: absolute;9029  inset: 0;9030  z-index: 2;9031  opacity: 0;9032  pointer-events: none;9033  transition: opacity 200ms ease;9034}90359036.peach-notes-editor-wrapper.is-visible {9037  opacity: 1;9038  pointer-events: auto;9039}90409041/* TOC inner */9042.peach-notes-toc {9043  position: relative;9044  display: flex;9045  flex-direction: column;9046  height: 100%;9047  padding-top: env(safe-area-inset-top, 0px);9048  padding-bottom: env(safe-area-inset-bottom, 0px);9049}90509051/* Shared header */9052.peach-notes-header {9053  display: flex;9054  align-items: center;9055  padding: 12px 16px;9056  gap: 12px;9057  flex-shrink: 0;9058  min-height: 52px;9059  position: relative;9060  z-index: 2;9061}90629063.peach-notes-back {9064  font-size: 22px;9065  color: var(--peach-t2);9066  background: none;9067  border: none;9068  padding: 4px;9069  cursor: pointer;9070  line-height: 1;9071  flex-shrink: 0;9072  transition: color 150ms ease;9073  -webkit-tap-highlight-color: transparent;9074}90759076.peach-notes-back:active { color: var(--peach-t0); }90779078.peach-notes-header-title {9079  flex: 1;9080  font-family: 'Cormorant Garamond', serif;9081  font-style: italic;9082  font-size: 22px;9083  color: var(--peach-t0);9084  text-align: center;9085}90869087.peach-notes-header-title.is-breadcrumb {9088  font-family: 'IBM Plex Mono', monospace;9089  font-style: normal;9090  font-size: 11px;9091  color: var(--peach-t3);9092  letter-spacing: 0.08em;9093  text-transform: uppercase;9094  cursor: pointer;9095}90969097.peach-notes-header-actions {9098  display: flex;9099  gap: 8px;9100  flex-shrink: 0;9101}91029103.peach-notes-header-btn {9104  width: 36px;9105  height: 36px;9106  display: flex;9107  align-items: center;9108  justify-content: center;9109  background: none;9110  border: none;9111  color: var(--peach-t2);9112  cursor: pointer;9113  border-radius: 8px;9114  font-size: 16px;9115  transition: color 150ms ease, background 150ms ease;9116  -webkit-tap-highlight-color: transparent;9117}91189119.peach-notes-header-btn:active {9120  background: rgba(255,255,255,0.06);9121  color: var(--peach-t0);9122}91239124/* The header + glyph is larger than the search svg so the two right-side9125 * buttons feel visually balanced. The base .peach-notes-header-btn caps font9126 * at 16px which would render the + too small. */9127.peach-notes-new-btn-icon {9128  font-size: 22px;9129  font-weight: 300;9130  line-height: 1;9131}91329133/* Inline search bar */9134.peach-notes-search-input {9135  flex: 1;9136  background: none;9137  border: none;9138  outline: none;9139  font-family: 'IBM Plex Mono', monospace;9140  font-size: 13px;9141  color: var(--peach-t0);9142  padding: 4px 0;9143  letter-spacing: 0.02em;9144}91459146.peach-notes-search-input::placeholder {9147  color: var(--peach-t3);9148}91499150/* TOC list */9151.peach-notes-list-container {9152  flex: 1;9153  overflow-y: auto;9154  overflow-x: hidden;9155  scrollbar-width: none;9156  -webkit-overflow-scrolling: touch;9157  overscroll-behavior: contain;9158  position: relative;9159  z-index: 1;9160}91619162.peach-notes-list-container::-webkit-scrollbar { display: none; }91639164/* Note row */9165.peach-note-row {9166  position: relative;9167  display: grid;9168  grid-template-columns: 44px 8px 1fr 8px auto;9169  align-items: center;9170  min-height: 72px;9171  padding: 16px 20px;9172  border-bottom: 0.5px solid var(--peach-border);9173  cursor: pointer;9174  overflow: hidden;9175  touch-action: pan-y;9176  user-select: none;9177  -webkit-user-select: none;9178  -webkit-tap-highlight-color: transparent;9179}91809181.peach-note-row:first-child {9182  border-top: 0.5px solid var(--peach-border);9183}91849185.peach-note-row:active {9186  background: rgba(255,255,255,0.02);9187}91889189.peach-note-numeral {9190  font-family: 'Cormorant Garamond', serif;9191  font-style: italic;9192  font-size: 15px;9193  color: var(--peach-accent);9194  text-align: right;9195  line-height: 1;9196  flex-shrink: 0;9197}91989199.peach-note-title-gap { /* grid spacer */ }92009201.peach-note-title {9202  font-family: 'Cormorant Garamond', serif;9203  font-style: italic;9204  font-size: 18px;9205  color: var(--peach-t0);9206  line-height: 1.3;9207  min-width: 0;9208  overflow-wrap: break-word;9209}92109211.peach-note-title-match {9212  color: var(--peach-accent);9213}92149215.peach-note-date {9216  font-family: 'IBM Plex Mono', monospace;9217  font-size: 11px;9218  color: var(--peach-t2);9219  white-space: nowrap;9220  text-align: right;9221  flex-shrink: 0;9222  grid-column: 5;9223}92249225/* Swipe underlays */9226.peach-note-row-underlay {9227  position: absolute;9228  inset: 0;9229  display: flex;9230  align-items: center;9231  padding: 0 24px;9232  font-family: 'IBM Plex Mono', monospace;9233  font-size: 11px;9234  letter-spacing: 0.1em;9235  pointer-events: none;9236  z-index: 0;9237}92389239.peach-note-row-underlay--delete {9240  background: #8B2020;9241  color: rgba(255,255,255,0.9);9242  justify-content: flex-end;9243}92449245.peach-note-row-underlay--archive {9246  background: var(--peach-accent);9247  color: #0C0A06;9248  justify-content: flex-start;9249}92509251/* Delete confirm strip */9252.peach-note-delete-confirm {9253  position: absolute;9254  inset: 0;9255  background: var(--peach-bg);9256  display: flex;9257  align-items: center;9258  gap: 12px;9259  padding: 0 20px;9260  font-family: 'IBM Plex Mono', monospace;9261  font-size: 11px;9262  color: var(--peach-t1);9263  letter-spacing: 0.04em;9264  animation: peach-delete-confirm-in 150ms ease both;9265  z-index: 10;9266}92679268@keyframes peach-delete-confirm-in {9269  from { opacity: 0; }9270  to   { opacity: 1; }9271}92729273.peach-note-delete-confirm-btn {9274  background: #8B2020;9275  color: rgba(255,255,255,0.9);9276  border: none;9277  border-radius: 6px;9278  padding: 4px 10px;9279  font-family: 'IBM Plex Mono', monospace;9280  font-size: 10px;9281  cursor: pointer;9282  letter-spacing: 0.06em;9283}92849285.peach-note-delete-cancel-btn {9286  background: none;9287  border: none;9288  color: var(--peach-t3);9289  font-family: 'IBM Plex Mono', monospace;9290  font-size: 10px;9291  cursor: pointer;9292  letter-spacing: 0.06em;9293  padding: 4px 6px;9294}92959296/* + New note button */9297.peach-notes-new-btn {9298  font-family: 'IBM Plex Mono', monospace;9299  font-size: 12px;9300  color: var(--peach-t3);9301  text-align: center;9302  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));9303  background: none;9304  border: none;9305  width: 100%;9306  cursor: pointer;9307  letter-spacing: 0.04em;9308  transition: color 150ms ease;9309  -webkit-tap-highlight-color: transparent;9310}93119312.peach-notes-new-btn:active { color: var(--peach-accent); }93139314/* Empty state */9315.peach-notes-empty {9316  display: flex;9317  flex-direction: column;9318  align-items: center;9319  justify-content: center;9320  flex: 1;9321  padding: 48px 32px;9322  gap: 16px;9323}93249325.peach-notes-empty-text {9326  font-family: 'Cormorant Garamond', serif;9327  font-style: italic;9328  font-size: 20px;9329  color: var(--peach-t3);9330  text-align: center;9331  margin: 0;9332  line-height: 1.4;9333  white-space: pre-line;9334}93359336/* ── Editor surface ── */93379338.peach-note-editor-surface {9339  position: absolute;9340  inset: 0;9341  background: var(--peach-bg);9342  display: flex;9343  flex-direction: column;9344  padding-top: env(safe-area-inset-top, 0px);9345}93469347.peach-note-editor-scroll {9348  flex: 1;9349  overflow-y: auto;9350  overflow-x: hidden;9351  scrollbar-width: none;9352  -webkit-overflow-scrolling: touch;9353  padding: 0 24px 120px;9354  position: relative;9355  z-index: 1;9356}93579358.peach-note-editor-scroll::-webkit-scrollbar { display: none; }93599360/* Desktop toolbar (always visible above body) */9361.peach-note-toolbar-desktop-inline {9362  display: flex;9363  align-items: center;9364  gap: 2px;9365  padding: 6px 0 12px;9366  margin-bottom: 4px;9367  border-bottom: 0.5px solid var(--peach-border);9368}93699370/* Title field */9371.peach-note-title-field {9372  font-family: 'Cormorant Garamond', serif;9373  font-style: italic;9374  font-size: 32px;9375  font-weight: 600;9376  color: var(--peach-t0);9377  line-height: 1.2;9378  padding: 8px 0 0;9379  outline: none;9380  min-height: 44px;9381  word-break: break-word;9382  position: relative;9383  z-index: 1;9384}93859386.peach-note-title-field:empty::before {9387  content: attr(data-placeholder);9388  color: var(--peach-t3);9389  pointer-events: none;9390}93919392/* Hairline separator */9393.peach-note-hairline {9394  height: 0.5px;9395  background: var(--peach-border);9396  margin: 12px 0 20px;9397  position: relative;9398  z-index: 1;9399}94009401/* Body field */9402.peach-note-body-field {9403  font-family: 'DM Sans', sans-serif;9404  font-size: 16px;9405  color: var(--peach-t0);9406  line-height: 1.85;9407  padding: 0;9408  outline: none;9409  min-height: 240px;9410  word-break: break-word;9411  position: relative;9412  z-index: 1;9413}94149415.peach-note-body-field:empty::before {9416  content: attr(data-placeholder);9417  color: var(--peach-t3);9418  font-style: italic;9419  pointer-events: none;9420}94219422.peach-note-body-field h2 {9423  font-family: 'Cormorant Garamond', serif;9424  font-style: italic;9425  font-size: 22px;9426  font-weight: 600;9427  color: var(--peach-t0);9428  margin: 20px 0 8px;9429}94309431.peach-note-body-field blockquote {9432  border-left: 2px solid var(--peach-accent);9433  margin: 12px 0;9434  padding-left: 16px;9435  color: var(--peach-t1);9436  font-style: italic;9437}94389439.peach-note-body-field ul,9440.peach-note-body-field ol {9441  padding-left: 20px;9442  margin: 8px 0;9443}94449445.peach-note-body-field li {9446  margin: 4px 0;9447}94489449.peach-note-body-field hr {9450  border: none;9451  border-top: 0.5px solid var(--peach-border);9452  margin: 16px 0;9453}94549455/* Saved indicator */9456.peach-note-saved-indicator {9457  font-family: 'IBM Plex Mono', monospace;9458  font-size: 11px;9459  color: var(--peach-t3);9460  letter-spacing: 0.04em;9461  text-align: right;9462  padding: 6px 24px;9463  flex-shrink: 0;9464  transition: opacity 300ms ease;9465  pointer-events: none;9466  position: relative;9467  z-index: 1;9468}94699470/* Mobile keyboard toolbar */9471.peach-note-toolbar-mobile {9472  display: flex;9473  align-items: center;9474  padding: 8px 16px;9475  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));9476  background: var(--peach-bg);9477  border-top: 0.5px solid var(--peach-border);9478  gap: 4px;9479  flex-shrink: 0;9480  position: relative;9481  z-index: 10;9482}94839484.peach-note-toolbar-btn {9485  min-width: 36px;9486  height: 36px;9487  display: flex;9488  align-items: center;9489  justify-content: center;9490  background: none;9491  border: none;9492  border-radius: 8px;9493  cursor: pointer;9494  font-size: 14px;9495  color: var(--peach-t1);9496  font-family: 'DM Sans', sans-serif;9497  font-weight: 600;9498  transition: background 100ms ease, color 100ms ease;9499  -webkit-tap-highlight-color: transparent;9500}95019502.peach-note-toolbar-btn--italic { font-style: italic; }9503.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }9504.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }95059506.peach-note-toolbar-divider {9507  width: 0.5px;9508  height: 20px;9509  background: var(--peach-border);9510  margin: 0 4px;9511  flex-shrink: 0;9512}95139514.peach-note-toolbar-spacer { flex: 1; }95159516/* Desktop: larger headline in TOC */9517@media (min-width: 400px) {9518  .peach-notes-header-title:not(.is-breadcrumb) {9519    font-size: 32px;9520  }95219522  .peach-note-row {9523    min-height: 64px;9524    padding: 14px 16px;9525  }9526}95279528/* Flying title — shared element during expansion/collapse */95299530/* ─── Light theme overrides ───────────────────────────────────────────────9531   Tokens that cannot be expressed as variable substitutions — hardcoded9532   context-specific values that need separate light-mode rules. */95339534/* Settings section headers: use text-label (#79766F) per restoration brief —9535   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY9536   presence without fighting the light parchment background. */9537.light .peach-settings-sub-label,9538[data-theme="light"] .peach-settings-sub-label,9539.light .peach-settings-nav-label,9540[data-theme="light"] .peach-settings-nav-label {9541  color: #79766F;9542}95439544/* Secondary action buttons (ghost / subtle): filled with input-well surface9545   so they read as recessed against the parchment card background. */9546.light .peach-btn--ghost:not(.peach-icon-btn),9547[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {9548  background: #EEE7DD;9549  border-color: #DDD5CB;9550  color: #1A1208;9551}9552.light .peach-icon-btn,9553[data-theme="light"] .peach-icon-btn {9554  background: transparent;9555  border-color: transparent;9556}9557.light .peach-btn--subtle,9558[data-theme="light"] .peach-btn--subtle {9559  background: #EEE7DD;9560  border-color: #DDD5CB;9561}95629563/* Wide secondary action button on the lock screen — override the9564   hardcoded dark-mode rgba values with warm parchment equivalents. */9565.light .peach-lock-secondary,9566[data-theme="light"] .peach-lock-secondary {9567  background: #EEE7DD;9568  border-color: #DDD5CB;9569  color: #1A1208;9570}9571.light .peach-lock-secondary:hover,9572[data-theme="light"] .peach-lock-secondary:hover {9573  background: #F0E9DF;9574}95759576/* Entry row hover: bg-row lifts the row above the card surface. */9577.light .peach-entry-row:hover,9578[data-theme="light"] .peach-entry-row:hover {9579  background: #F2EBE1;9580}9581.light .peach-entry-row.is-active,9582[data-theme="light"] .peach-entry-row.is-active {9583  background: #F2EBE1;9584}9585.light .peach-entry-row.is-selected,9586[data-theme="light"] .peach-entry-row.is-selected {9587  background: #F5EDE2;9588}95899590/* ──────────────────────────────────────────────────────────────────────────9591   Pair-device flow — bird-stage animation (Phase 1)9592   See src/popup/components/PairingBirds.tsx and the brief §6.2.9593   Three-act animation gated on the [data-phase] attribute of9594   .peach-pair-pair; child layers (birds, sound arcs, flight wave, dot)9595   each react via either pose class or visibility flag.9596   Tokens: accent surfaces use var(--peach-accent); bird illustration9597   colours are baked into the SVG per the brand-peach exception in §3.1.9598   ────────────────────────────────────────────────────────────────────── */95999600.peach-pair-pair {9601  position: absolute;9602  inset: 0;9603  z-index: 3;9604  display: flex;9605  flex-direction: column;9606  padding: 14px 12px 12px;9607  width: 100%;9608  box-sizing: border-box;9609  gap: 0;9610  background:9611    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9612    var(--peach-bg);9613  color: var(--peach-t0);9614  overflow-y: auto;9615  overflow-x: hidden;9616  scrollbar-width: none;9617  isolation: isolate;9618  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9619}9620@keyframes peach-pair-overlay-in {9621  from { opacity: 0; transform: translateY(8px); }9622  to   { opacity: 1; transform: translateY(0); }9623}9624.peach-pair-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9625.peach-pair-pair::before {9626  content: '';9627  position: absolute;9628  inset: 0;9629  border-radius: inherit;9630  pointer-events: none;9631  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9632  z-index: 0;9633}9634.peach-pair-pair > * { position: relative; z-index: 1; }96359636/* Header --------------------------------------------------------------- */9637.peach-pair-head {9638  display: flex; align-items: center; gap: 10px;9639}9640.peach-pair-back {9641  width: 32px; height: 32px;9642  display: inline-flex; align-items: center; justify-content: center;9643  background: transparent;9644  border: none;9645  border-radius: 8px;9646  color: var(--peach-t1);9647  cursor: pointer;9648  transition: color 0.15s ease, box-shadow 0.15s ease;9649}9650.peach-pair-back:hover {9651  color: var(--peach-accent);9652  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9653}9654.peach-pair-title {9655  font-family: var(--font-display, Georgia, serif);9656  font-style: italic;9657  font-size: 24px;9658  font-weight: 500;9659  letter-spacing: 0.005em;9660  color: var(--peach-t0);9661  line-height: 1;9662}9663.peach-pair-head-spacer { flex: 1; }96649665/* Chip row ------------------------------------------------------------- */9666.peach-pair-chip-row {9667  display: flex;9668  align-items: center;9669  justify-content: flex-start;9670  margin-top: 12px;9671}9672.peach-pair-chip {9673  display: inline-flex; align-items: center; gap: 8px;9674  padding: 5px 10px 5px 8px;9675  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9676  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9677  border-radius: 999px;9678  font-family: var(--peach-mono, ui-monospace, monospace);9679  font-size: 11px;9680  letter-spacing: 0.04em;9681  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9682}9683.peach-pair-chip-dot {9684  width: 6px; height: 6px; border-radius: 50%;9685  background: var(--peach-accent);9686  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9687}9688.peach-pair-chip[data-phase="paired"] {9689  background: color-mix(in srgb, #4f9eda 12%, transparent);9690  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9691  color: #76b6e8;9692}9693.peach-pair-chip[data-phase="paired"] .peach-pair-chip-dot {9694  background: #76b6e8;9695  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9696}9697.peach-pair-chip[data-phase="timeout"],9698.peach-pair-chip[data-phase="mic_denied"],9699.peach-pair-chip[data-phase="version_mismatch"],9700.peach-pair-chip[data-phase="handshake_failed"] {9701  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9702  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9703  color: var(--peach-warn, #d29257);9704}9705.peach-pair-chip[data-phase="timeout"] .peach-pair-chip-dot,9706.peach-pair-chip[data-phase="mic_denied"] .peach-pair-chip-dot,9707.peach-pair-chip[data-phase="version_mismatch"] .peach-pair-chip-dot,9708.peach-pair-chip[data-phase="handshake_failed"] .peach-pair-chip-dot {9709  background: var(--peach-warn, #d29257);9710  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9711}971297139714/* Bird stage ----------------------------------------------------------- */9715.peach-pair-stage {9716  position: relative;9717  height: 180px;9718  margin: 8px auto 18px;9719  width: 300px;9720  display: flex;9721  align-items: flex-end;9722  justify-content: center;9723}9724.peach-pair-bird-slot {9725  position: absolute;9726  bottom: 0;9727  width: 108px;9728  height: 108px;9729  transform-origin: 50% 95%;9730}9731.peach-pair-bird-slot-desktop { left: 12px; }9732.peach-pair-bird-slot-mobile { right: 12px; }9733.peach-pair-stage.act-handshake .peach-pair-bird-slot-desktop,9734.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop {9735  transform: translateX(6px);9736  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9737}9738.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop { --bb-x: 6px; }9739.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { --bb-x: -6px; }9740.peach-pair-stage.act-paired .peach-pair-bird-slot {9741  animation: peach-pair-happy-bob 1.2s ease-in-out infinite;9742}9743.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { animation-delay: 0.2s; }9744@keyframes peach-pair-happy-bob {9745  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9746  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9747}97489749/* Bird internal -------------------------------------------------------- */9750.peach-pair-bird {9751  width: 108px;9752  height: 108px;9753  transform-origin: 50% 95%;9754}9755.peach-pair-bird svg { width: 100%; height: 100%; overflow: visible; }97569757.peach-pair-bird-body {9758  transform-origin: 50% 80%;9759  animation: peach-pair-bird-bob 2.4s ease-in-out infinite;9760}9761.peach-pair-bird-pose-chirping .peach-pair-bird-body { animation-duration: 1.4s; }9762.peach-pair-bird-pose-happy .peach-pair-bird-body   { animation: peach-pair-bird-celebrate 0.9s ease-in-out infinite; }9763.peach-pair-bird-pose-attentive .peach-pair-bird-body { animation-duration: 2.0s; }97649765@keyframes peach-pair-bird-bob {9766  0%, 100% { transform: translateY(0) rotate(0deg); }9767  50%      { transform: translateY(-2px) rotate(-1deg); }9768}9769@keyframes peach-pair-bird-celebrate {9770  0%, 100% { transform: translateY(0) rotate(0deg); }9771  25%      { transform: translateY(-4px) rotate(-2deg); }9772  75%      { transform: translateY(-4px) rotate(2deg); }9773}97749775.peach-pair-bird-wing {9776  transform-origin: 50% 50%;9777  animation: peach-pair-bird-flap 0.9s ease-in-out infinite;9778}9779.peach-pair-bird-pose-happy .peach-pair-bird-wing { animation-duration: 0.35s; }9780.peach-pair-bird-pose-attentive .peach-pair-bird-wing { animation-duration: 1.4s; }9781@keyframes peach-pair-bird-flap {9782  0%, 100% { transform: scaleY(1); }9783  50%      { transform: scaleY(0.85); }9784}97859786.peach-pair-bird-head-group {9787  transform-origin: 95px 52px;9788  animation: peach-pair-bird-bob-head 2.6s ease-in-out infinite;9789}9790.peach-pair-bird-pose-chirping .peach-pair-bird-head-group { animation-duration: 0.45s; }9791.peach-pair-bird-pose-attentive .peach-pair-bird-head-group { animation: none; }9792@keyframes peach-pair-bird-bob-head {9793  0%, 100% { transform: rotate(0deg); }9794  50%      { transform: rotate(3deg); }9795}97969797.peach-pair-bird-eye-group { transform-origin: center; }9798.peach-pair-bird-blink { animation: peach-pair-bird-blink 4s ease-in-out infinite; }9799@keyframes peach-pair-bird-blink {9800  0%, 92%, 100% { transform: scaleY(1); }9801  95%           { transform: scaleY(0.1); }9802}98039804.peach-pair-bird-aura {9805  animation: peach-pair-bird-aura 2.6s ease-in-out infinite;9806}9807.peach-pair-bird-pose-happy .peach-pair-bird-aura { animation-duration: 1.4s; }9808@keyframes peach-pair-bird-aura {9809  0%, 100% { opacity: 0; }9810  50%      { opacity: 0.18; }9811}98129813.peach-pair-bird-tail {9814  transform-origin: 50% 100%;9815  animation: peach-pair-bird-tail-wag 3s ease-in-out infinite;9816}9817@keyframes peach-pair-bird-tail-wag {9818  0%, 100% { transform: rotate(0deg); }9819  50%      { transform: rotate(2deg); }9820}98219822.peach-pair-bird-pose-happy .peach-pair-bird-shadow { animation: peach-pair-bird-shadow-pulse 0.9s ease-in-out infinite; }9823@keyframes peach-pair-bird-shadow-pulse {9824  0%, 100% { transform: scaleX(1); opacity: 0.45; }9825  50%      { transform: scaleX(0.92); opacity: 0.3; }9826}98279828/* Per-pose variants --------------------------------------------------- */9829.peach-pair-bird-pose-sad .peach-pair-bird-head-group { transform: translateY(4px) rotate(8deg); }9830.peach-pair-bird-pose-sad .peach-pair-bird-tuft { transform: rotate(15deg) translateY(2px); }9831.peach-pair-bird-pose-sad .peach-pair-bird-tail { transform: rotate(8deg) translateY(2px); }9832.peach-pair-bird-pose-hidden { opacity: 0; }98339834/* Rest state — bird stage at idle pose, primary CTA + paired list */9835.peach-pair-pair[data-phase="idle"] .peach-pair-stage {9836  height: 160px;9837}98389839/* Sound arcs ----------------------------------------------------------- */9840.peach-pair-arcs {9841  position: absolute;9842  top: 18px;9843  width: 96px;9844  height: 70px;9845  pointer-events: none;9846}9847.peach-pair-arcs-right { right: -60px; }9848.peach-pair-arcs-left  { left: -60px; transform: scaleX(-1); }9849.peach-pair-arc {9850  position: absolute;9851  top: 50%;9852  left: 0;9853  width: 40px;9854  height: 40px;9855  margin-top: -20px;9856  border: 1.2px solid #f4d5a8;9857  border-color: transparent #f4d5a8 transparent transparent;9858  border-radius: 50%;9859  opacity: 0;9860  animation: peach-pair-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9861}9862@keyframes peach-pair-arc-expand {9863  0%   { transform: scale(0.4); opacity: 0; }9864  20%  { opacity: 0.9; }9865  100% { transform: scale(1.6); opacity: 0; }9866}98679868/* Flight wave ---------------------------------------------------------- */9869.peach-pair-flight-track {9870  position: absolute;9871  inset: 32px 36px 38px 36px;9872  pointer-events: none;9873}9874.peach-pair-flight-wave {9875  position: absolute;9876  top: 8px;9877  left: 76px;9878  right: 76px;9879  height: 60px;9880  width: auto;9881  opacity: 0;9882  transition: opacity 0.15s ease;9883  stroke: #f4d5a8;9884  fill: none;9885}9886.peach-pair-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9887.peach-pair-flight-wave.is-visible { opacity: 1; }9888.peach-pair-flight-path,9889.peach-pair-flight-path-2 {9890  stroke-dasharray: 240;9891  stroke-dashoffset: 240;9892  stroke-linecap: round;9893  fill: none;9894}9895.peach-pair-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9896.peach-pair-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9897.peach-pair-flight-wave.is-visible .peach-pair-flight-path {9898  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9899}9900.peach-pair-flight-wave.is-visible .peach-pair-flight-path-2 {9901  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9902}9903@keyframes peach-pair-fly {9904  0%   { stroke-dashoffset: 240; opacity: 0; }9905  20%  { opacity: 1; }9906  100% { stroke-dashoffset: -120; opacity: 0; }9907}99089909/* Connection dot ------------------------------------------------------- */9910.peach-pair-dot {9911  position: absolute;9912  top: 50%; left: 50%;9913  transform: translate(-50%, -50%);9914  width: 40px; height: 40px;9915  opacity: 0;9916  pointer-events: none;9917  transition: opacity 0.3s ease;9918  color: var(--peach-accent);9919}9920.peach-pair-dot.is-visible { opacity: 1; }9921.peach-pair-dot-glow {9922  position: absolute; top: 50%; left: 50%;9923  transform: translate(-50%, -50%);9924  width: 38px; height: 38px;9925  border-radius: 50%;9926  filter: blur(10px);9927  opacity: 0.55;9928  background: var(--peach-accent);9929  animation: peach-pair-dot-bloom 1.4s ease-out;9930}9931.peach-pair-dot-core {9932  position: absolute; top: 50%; left: 50%;9933  transform: translate(-50%, -50%);9934  width: 8px; height: 8px;9935  border-radius: 50%;9936  background: var(--peach-accent);9937  box-shadow: 0 0 12px currentColor;9938  animation: peach-pair-dot-core 1.4s ease-out;9939}9940.peach-pair-dot-ring {9941  position: absolute; top: 50%; left: 50%;9942  width: 60px; height: 60px;9943  transform: translate(-50%, -50%);9944  animation: peach-pair-dot-ring 1.4s linear;9945  stroke: var(--peach-accent);9946}9947@keyframes peach-pair-dot-bloom {9948  0%   { width: 4px; height: 4px; opacity: 0; }9949  35%  { width: 60px; height: 60px; opacity: 0.7; }9950  100% { width: 38px; height: 38px; opacity: 0.55; }9951}9952@keyframes peach-pair-dot-core {9953  0%   { width: 0; height: 0; }9954  35%  { width: 12px; height: 12px; }9955  100% { width: 8px; height: 8px; }9956}9957@keyframes peach-pair-dot-ring {9958  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9959  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9960  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9961}99629963/* Motes — drift upward across the stage */9964.peach-pair-motes {9965  position: absolute;9966  inset: 0;9967  pointer-events: none;9968}9969.peach-pair-mote {9970  position: absolute;9971  width: 2px; height: 2px;9972  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9973  border-radius: 50%;9974  bottom: 32px;9975  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9976  opacity: 0;9977  animation: peach-pair-mote-drift 6s linear infinite;9978  animation-delay: calc(var(--mote-i, 0) * 0.7s);9979}9980@keyframes peach-pair-mote-drift {9981  0%   { transform: translateY(0); opacity: 0; }9982  10%  { opacity: 0.6; }9983  90%  { opacity: 0.1; }9984  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9985}99869987/* Status copy ---------------------------------------------------------- */9988.peach-pair-copy-host {9989  margin: 4px 4px 10px;9990  text-align: center;9991  min-height: 50px;9992}9993.peach-pair-copy {9994  animation: peach-pair-copy-in 0.35s ease both;9995}9996@keyframes peach-pair-copy-in {9997  from { opacity: 0; transform: translateY(4px); }9998  to   { opacity: 1; transform: translateY(0); }9999}10000.peach-pair-headline {10001  font-family: var(--font-display, Georgia, serif);10002  font-style: italic;10003  font-size: 20px;10004  font-weight: 500;10005  line-height: 1.2;10006  letter-spacing: 0.005em;10007  color: var(--peach-t0);10008  margin-bottom: 6px;10009}10010.peach-pair-copy-listening .peach-pair-headline,10011.peach-pair-copy-chirping .peach-pair-headline,10012.peach-pair-copy-idle .peach-pair-headline {10013  font-family: inherit;10014  font-style: normal;10015  font-weight: 500;10016  font-size: 15px;10017  color: var(--peach-t0);10018  letter-spacing: 0;10019}10020.peach-pair-copy-paired .peach-pair-headline {10021  color: var(--peach-t0);10022  font-weight: 600;10023}10024.peach-pair-sub {10025  font-size: 12.5px;10026  line-height: 1.45;10027  color: var(--peach-t1);10028  max-width: 280px;10029  margin: 0 auto;10030  text-wrap: pretty;10031}1003210033/* Status action -------------------------------------------------------- */10034.peach-pair-action {10035  margin: 2px 4px 10px;10036  margin-top: auto;10037  display: flex;10038  flex-direction: column;10039  gap: 8px;10040}10041.peach-pair-action-waiting {10042  display: flex;10043  align-items: center;10044  justify-content: space-between;10045  gap: 12px;10046}10047.peach-pair-cancel {10048  min-width: 96px;10049}10050.peach-pair-listening {10051  display: inline-flex; align-items: center; gap: 4px;10052  font-family: var(--peach-mono, ui-monospace, monospace);10053  font-size: 9.5px;10054  text-transform: uppercase;10055  letter-spacing: 0.12em;10056  color: var(--peach-t1);10057  padding: 8px 10px;10058}10059.peach-pair-listen-dot {10060  width: 4px; height: 4px;10061  border-radius: 50%;10062  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);10063  animation: peach-pair-listen-pulse 1.2s ease-in-out infinite;10064}10065.peach-pair-listen-dot:nth-child(2) { animation-delay: 0.2s; }10066.peach-pair-listen-dot:nth-child(3) { animation-delay: 0.4s; }10067.peach-pair-listen-label { margin-left: 6px; }10068@keyframes peach-pair-listen-pulse {10069  0%, 100% { opacity: 0.25; transform: scale(0.9); }10070  50%      { opacity: 1;     transform: scale(1.15); }10071}1007210073.peach-pair-action-handshake {10074  display: flex;10075  flex-direction: column;10076  align-items: center;10077  gap: 8px;10078  padding: 8px 4px;10079}10080.peach-pair-meter {10081  width: 100%;10082  max-width: 280px;10083  height: 2px;10084  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);10085  border-radius: 2px;10086  position: relative;10087  overflow: hidden;10088}10089.peach-pair-meter-bar {10090  position: absolute;10091  top: 0; bottom: 0;10092  width: 30%;10093  left: -30%;10094  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);10095  animation: peach-pair-meter-sweep 1.4s ease-in-out infinite;10096}10097@keyframes peach-pair-meter-sweep {10098  0%   { left: -30%; }10099  100% { left: 100%; }10100}10101.peach-pair-meter-label {10102  font-family: var(--peach-mono, ui-monospace, monospace);10103  font-size: 9.5px;10104  text-transform: uppercase;10105  letter-spacing: 0.14em;10106  color: var(--peach-t1);10107}1010810109.peach-pair-action-paired {10110  display: flex;10111  align-items: center;10112  gap: 10px;10113}10114.peach-pair-device-confirm {10115  flex: 1;10116  display: inline-flex;10117  align-items: center;10118  gap: 8px;10119  padding: 9px 10px 9px 12px;10120  border-radius: 10px;10121  background: color-mix(in srgb, #76b6e8 12%, transparent);10122  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);10123  font-size: 12.5px;10124  color: var(--peach-t0);10125  min-width: 0;10126}10127.peach-pair-device-confirm-glyph {10128  display: inline-flex;10129  color: #76b6e8;10130}10131.peach-pair-device-confirm-name {10132  flex: 1;10133  overflow: hidden;10134  text-overflow: ellipsis;10135  white-space: nowrap;10136}10137.peach-pair-device-confirm-trust {10138  font-family: var(--peach-mono, ui-monospace, monospace);10139  font-size: 9.5px;10140  text-transform: uppercase;10141  letter-spacing: 0.1em;10142  color: #76b6e8;10143  padding: 2px 6px;10144  border-radius: 4px;10145  background: color-mix(in srgb, #76b6e8 14%, transparent);10146}10147.peach-pair-done {10148  min-width: 80px;10149}10150.peach-pair-retry {10151  align-self: center;10152  display: block;10153  margin: 6px auto 0;10154  min-width: 120px;10155}10156.peach-pair-mic-help {10157  font-size: 12px;10158  color: var(--peach-t1);10159  text-align: center;10160  max-width: 320px;10161  margin: 0 auto;10162}1016310164/* Rest state — bird stage at idle pose, primary CTA + paired list */10165.peach-pair-pair[data-phase="idle"] .peach-pair-stage {10166  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */10167  height: 160px;10168}10169.peach-pair-pair-start {10170  width: 100%;10171  display: inline-flex;10172  align-items: center;10173  justify-content: center;10174  gap: 8px;10175  padding: 11px 14px;10176  border-radius: 10px;10177  background: var(--peach-accent);10178  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);10179  color: #1a0905;10180  font-family: inherit;10181  font-size: 13px;10182  font-weight: 600;10183  letter-spacing: 0.01em;10184  cursor: pointer;10185  transition: filter 0.15s ease, transform 0.1s ease;10186}10187.peach-pair-pair-start:hover { filter: brightness(1.08); }10188.peach-pair-pair-start:active { transform: translateY(1px); }1018910190.peach-pair-paired-section {10191  margin-top: 14px;10192  display: flex;10193  flex-direction: column;10194  gap: 8px;10195}10196.peach-pair-paired-heading {10197  margin: 0;10198  font-family: var(--peach-mono, ui-monospace, monospace);10199  font-size: 10px;10200  font-weight: 500;10201  letter-spacing: 0.14em;10202  text-transform: uppercase;10203  color: var(--peach-t1);10204}1020510206/* Footer --------------------------------------------------------------- */10207.peach-pair-foot {10208  margin: 10px -4px -2px;10209  margin-top: auto;10210}10211.peach-pair-foot-divider {10212  height: 1px;10213  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);10214  margin-bottom: 10px;10215}10216.peach-pair-foot-text {10217  font-size: 11px;10218  line-height: 1.5;10219  color: var(--peach-t1);10220  text-align: center;10221  padding: 0 4px;10222  text-wrap: pretty;10223}1022410225/* Screen-reader-only live region. Kept off the visual flow but read by10226   assistive tech as the pairing phase advances. */10227.peach-sr-only {10228  position: absolute;10229  width: 1px; height: 1px;10230  padding: 0; margin: -1px;10231  overflow: hidden;10232  clip: rect(0, 0, 0, 0);10233  white-space: nowrap;10234  border: 0;10235}1023610237/* Reduced motion — stage simplifies to opacity transitions only */10238@media (prefers-reduced-motion: reduce) {10239  .peach-pair-bird-body,10240  .peach-pair-bird-head-group,10241  .peach-pair-bird-beak,10242  .peach-pair-bird-wing,10243  .peach-pair-bird-tuft,10244  .peach-pair-bird-tail,10245  .peach-pair-bird-eye-group,10246  .peach-pair-bird-aura,10247  .peach-pair-arc,10248  .peach-pair-flight-path,10249  .peach-pair-flight-path-2,10250  .peach-pair-dot-glow,10251  .peach-pair-dot-core,10252  .peach-pair-dot-ring,10253  .peach-pair-mote,10254  .peach-pair-meter-bar,10255  .peach-pair-listen-dot,10256  .peach-pair-bird-slot,10257  .peach-pair-bird-slot-mobile {10258    animation: none !important;10259    transition: opacity 0.2s linear !important;10260  }10261}1026210263/* ─────────────────────────────────────────────────────────────────10264   Settings → Sync surface. Wraps the same bird10265   animation used by the pairing flow with a paired-devices list and10266   the "Pair a device" CTA.10267   ───────────────────────────────────────────────────────────────── */10268.peach-pair-settings {10269  position: absolute;10270  inset: 0;10271  z-index: 3;10272  display: flex;10273  flex-direction: column;10274  gap: 18px;10275  padding: 14px 12px 12px;10276  width: 100%;10277  box-sizing: border-box;10278  overflow-y: auto;10279  overflow-x: hidden;10280  /* Same warm surface as the pairing screen — unifies the two views. */10281  background:10282    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),10283    var(--peach-bg);10284  color: var(--peach-t0);10285  isolation: isolate;10286  /* Hide native scrollbar — content fits 99% of the time and a chunky10287     gutter ruins the surface. */10288  scrollbar-width: none;10289  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;10290}10291.peach-pair-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }10292.peach-pair-settings::before {10293  content: '';10294  position: absolute;10295  inset: 0;10296  pointer-events: none;10297  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);10298  z-index: 0;10299}10300.peach-pair-settings > * { position: relative; z-index: 1; }1030110302.peach-pair-settings--pairing {10303  padding: 0;10304  align-items: stretch;10305  justify-content: stretch;10306  background: none;10307  isolation: auto;10308}10309.peach-pair-settings--pairing::before { display: none; }1031010311.peach-pair-settings-header {10312  display: flex;10313  align-items: center;10314  gap: 10px;10315}10316.peach-pair-settings-title {10317  margin: 0;10318  font-family: var(--font-display, Georgia, serif);10319  font-style: italic;10320  font-size: 24px;10321  font-weight: 500;10322  line-height: 1;10323  color: var(--peach-t0);10324  letter-spacing: 0.005em;10325}10326.peach-pair-settings-section {10327  margin: 6px 0 -4px;10328  font-size: 11px;10329  font-weight: 600;10330  letter-spacing: 0.08em;10331  text-transform: uppercase;10332  color: var(--peach-text-muted);10333}10334.peach-pair-settings-error {10335  font-size: 12px;10336  padding: 8px 10px;10337  border-radius: 8px;10338  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);10339  color: var(--peach-text);10340}10341.peach-pair-settings-footer {10342  margin-top: auto;10343  padding-top: 18px;10344  font-size: 11.5px;10345  line-height: 1.5;10346  color: var(--peach-text-muted);10347  text-align: center;10348}1034910350/* Hero card shown when no devices are paired yet. */10351.peach-pair-hero {10352  display: flex;10353  flex-direction: column;10354  align-items: center;10355  gap: 12px;10356  padding: 20px 12px 8px;10357  text-align: center;10358}10359.peach-pair-hero-svg {10360  display: block;10361  max-width: 100%;10362  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));10363}10364.peach-pair-hero-headline {10365  margin: 0;10366  font-family: var(--font-display, Georgia, serif);10367  font-style: italic;10368  font-size: 20px;10369  font-weight: 500;10370  line-height: 1.2;10371  letter-spacing: 0.005em;10372  color: var(--peach-t0);10373}10374.peach-pair-hero-sub {10375  margin: 0;10376  font-size: 13px;10377  line-height: 1.5;10378  color: var(--peach-t1);10379  max-width: 320px;10380  text-wrap: pretty;10381}1038210383.peach-pair-pair-cta {10384  display: flex;10385  justify-content: center;10386  padding: 4px 0 6px;10387}10388.peach-pair-pair-button {10389  display: inline-flex;10390  align-items: center;10391  gap: 8px;10392  min-width: 220px;10393  justify-content: center;10394}10395.peach-pair-pair-button-icon {10396  flex: 0 0 auto;10397}1039810399/* Paired devices list. Roomy rows that look at home next to the rest10400   of Settings; stale rows get a soft warm-warning border tint. */10401.peach-pair-device-list {10402  list-style: none;10403  margin: 0;10404  padding: 0;10405  display: flex;10406  flex-direction: column;10407  gap: 8px;10408}10409.peach-pair-device-row {10410  display: flex;10411  align-items: center;10412  gap: 12px;10413  padding: 12px;10414  border-radius: 10px;10415  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10416  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);10417}10418.peach-pair-device-row[data-stale="true"] {10419  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);10420}10421.peach-pair-device-icon {10422  width: 32px;10423  height: 32px;10424  display: flex;10425  align-items: center;10426  justify-content: center;10427  border-radius: 8px;10428  color: var(--peach-text);10429  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);10430}10431.peach-pair-device-info {10432  flex: 1;10433  display: flex;10434  flex-direction: column;10435  gap: 2px;10436  min-width: 0;10437}10438.peach-pair-device-name {10439  font-size: 14px;10440  font-weight: 600;10441  color: var(--peach-text);10442  overflow: hidden;10443  text-overflow: ellipsis;10444  white-space: nowrap;10445}10446.peach-pair-device-meta {10447  font-size: 11.5px;10448  color: var(--peach-text-muted);10449  display: flex;10450  flex-wrap: wrap;10451  align-items: center;10452  gap: 8px;10453}10454.peach-pair-device-badge {10455  font-size: 10.5px;10456  font-weight: 500;10457  letter-spacing: 0.02em;10458  padding: 2px 6px;10459  border-radius: 999px;10460  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);10461  color: var(--peach-text);10462}10463.peach-pair-device-stale {10464  font-size: 10.5px;10465  font-weight: 500;10466  color: var(--peach-warn, #d29257);10467}10468.peach-pair-device-remove {10469  flex: 0 0 auto;10470  color: var(--peach-text-muted);10471}10472.peach-pair-device-remove:hover {10473  color: var(--peach-danger, #c25b4a);10474}10475.peach-pair-unpair-confirm {10476  display: flex;10477  gap: 6px;10478  align-items: center;10479}1048010481/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10482.peach-pair-pro-card {10483  position: relative;10484  margin: 18px 12px;10485  padding: 18px 20px 22px;10486  border-radius: 22px;10487  background:10488    radial-gradient(140% 90% at 50% 0%,10489      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10490      transparent 60%),10491    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10492  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10493  box-shadow:10494    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10495    0 18px 40px -24px rgba(0, 0, 0, 0.45);10496  display: flex;10497  flex-direction: column;10498  align-items: center;10499  gap: 10px;10500  text-align: center;10501  overflow: hidden;10502}10503.peach-pair-pro-stage {10504  position: relative;10505  width: 220px;10506  height: 140px;10507  display: flex;10508  align-items: flex-end;10509  justify-content: center;10510  margin-bottom: 2px;10511}10512.peach-pair-pro-bird-slot {10513  width: 140px;10514  height: 132px;10515  display: flex;10516  align-items: flex-end;10517  justify-content: center;10518  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10519}10520.peach-pair-pro-bird-slot .peach-pair-bird {10521  width: 100%;10522  height: 100%;10523}10524.peach-pair-pro-bird-slot .peach-pair-bird svg {10525  width: 100%;10526  height: 100%;10527  overflow: visible;10528}10529.peach-pair-pro-headline {10530  margin: 4px 0 0;10531  font-family: var(--font-display, "Cormorant Garamond", serif);10532  font-style: italic;10533  font-size: 19px;10534  font-weight: 500;10535  letter-spacing: 0.01em;10536  color: var(--peach-t0);10537  max-width: 280px;10538  line-height: 1.25;10539}10540.peach-pair-pro-body {10541  margin: 0;10542  font-size: 13px;10543  line-height: 1.55;10544  color: var(--peach-t1);10545  max-width: 300px;10546}10547.peach-pair-pro-cta {10548  margin-top: 4px;10549}10550.peach-pair-pro-foot {10551  margin: 2px 0 0;10552  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10553  font-size: 0.625rem;10554  letter-spacing: 0.08em;10555  text-transform: uppercase;10556  color: var(--peach-t2);10557  opacity: 0.75;10558}1055910560/* Shell border and shadow in light mode: match dark mode's near-invisible10561   border weight so the popup frame looks the same in both themes. */10562.light .peach-shell,10563.light .peach-screen {10564  border-color: rgba(26, 18, 8, 0.07);10565  box-shadow:10566    0 2px 8px rgba(80, 56, 32, 0.08),10567    0 14px 48px rgba(80, 56, 32, 0.10),10568    0 0 0 1px rgba(26, 18, 8, 0.04);10569}1057010571/* HOLE 4: the revoke confirmation carries its own disclosure, so it needs the10572   full row width rather than sitting inline beside the device name. */10573.peach-settings-row:has(> .peach-unpair-confirm) { flex-wrap: wrap; }10574.peach-unpair-confirm {10575  display: flex;10576  flex-direction: column;10577  gap: 8px;10578  width: 100%;10579}10580.peach-unpair-confirm-note {10581  margin: 0;10582  font-size: 0.6875rem;10583  line-height: 1.5;10584  color: var(--peach-t2);10585}1058610587/* Sync mode selector — three named choices (public / private / off). Replaces10588   the old binary "local network only" toggle; see docs/sync-lan-retirement.md. */10589.peach-sync-mode {10590  display: flex;10591  align-items: flex-start;10592  gap: 10px;10593  width: 100%;10594  text-align: left;10595  padding: 10px 12px;10596  margin-top: 8px;10597  border-radius: 10px;10598  border: 1px solid var(--peach-border);10599  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);10600  color: var(--peach-t1);10601  cursor: pointer;10602  transition: border-color var(--peach-dur-80) var(--peach-curve-arrival),10603              background-color var(--peach-dur-80) var(--peach-curve-arrival);10604}10605.peach-sync-mode:hover:not(:disabled) {10606  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);10607}10608.peach-sync-mode.is-active {10609  border-color: var(--peach-accent);10610  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);10611}10612.peach-sync-mode:disabled { opacity: 0.6; cursor: default; }10613.peach-sync-mode-main { display: flex; flex-direction: column; gap: 3px; flex: 1; }10614.peach-sync-mode-title { font-size: 12px; }10615.peach-sync-mode-sub {10616  font-size: 11px;10617  line-height: 1.5;10618  color: var(--peach-t2);10619}10620.peach-sync-mode-pip {10621  flex: none;10622  margin-top: 3px;10623  width: 12px; height: 12px;10624  border-radius: 50%;10625  border: 1px solid var(--peach-t3);10626}10627.peach-sync-mode.is-active .peach-sync-mode-pip {10628  border-color: var(--peach-accent);10629  background:10630    radial-gradient(circle at 50% 50%, var(--peach-accent) 0 42%, transparent 44%);10631}10632.peach-sync-mode-disclosure {10633  margin: 10px 2px 0;10634  font-size: 11px;10635  line-height: 1.5;10636  color: var(--peach-t2);10637}10638.peach-sync-mode-warn { color: var(--peach-breach); }1063910640/* Compact form, used mid-pairing: a quiet line, not a decision to make. */10641.peach-sync-mode-summary {10642  margin: 8px 2px 0;10643  font-size: 11px;10644  color: var(--peach-t2);10645  text-align: center;10646}10647.peach-sync-mode-change {10648  background: none;10649  border: none;10650  padding: 0;10651  font: inherit;10652  color: var(--peach-accent);10653  text-decoration: underline;10654  cursor: pointer;10655}