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/* Chrome */170.peach-chrome {171  position: relative;172  z-index: 10;173  padding: 16px 20px 0;174  display: flex;175  justify-content: space-between;176  align-items: center;177  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense178     fallback) per §15 regression guard. Without pointer-events:none, the179     empty header strip also sits above `.peach-overlay-view` (z-index:2)180     and swallows clicks meant for an overlay's back button / top search. */181  pointer-events: none;182}183.peach-chrome .peach-btn { pointer-events: auto; }184.peach-chrome.is-hidden-for-overlay,185.peach-search-wrap.is-hidden-for-overlay {186  opacity: 0;187  visibility: hidden;188  pointer-events: none;189}190/* The pair-device surface owns its own header and header — fully collapse the global191   chrome row so the warm gradient reaches the popup edge. */192.peach-chrome.is-collapsed,193.peach-search-wrap.is-collapsed {194  display: none;195}196.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }197.peach-status-pip {198  width: 5px;199  height: 5px;200  border-radius: 50%;201  background: var(--peach-t3);202  display: inline-flex;203  flex-shrink: 0;204  transition: background 400ms ease, box-shadow 400ms ease;205}206.peach-chrome-actions { display: flex; gap: 6px; }207208/* Shell body */209.peach-shell-body {210  position: relative;211  display: grid;212  grid-template-rows: 1fr auto;213  min-height: 0;214  min-width: 0;215  width: 100%;216  overflow: hidden;217  height: 100%;218}219.peach-shell-veil {220  position: absolute; inset: 0;221  background: #000; opacity: 0;222  pointer-events: none; z-index: 1;223}224.peach-shell[data-motion-phase="enter"] .peach-shell-body {225  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;226}227228/* Content frame */229.peach-content-frame {230  display: grid;231  grid-template-rows: 1fr auto;232  grid-template-columns: minmax(0, 1fr);233  align-content: start;234  min-height: 0;235  min-width: 0;236  overflow: hidden;237  transition: opacity 80ms ease, transform 80ms ease;238}239.peach-content-frame.navigating {240  opacity: 0.93;241  transform: translateX(2px);242}243.peach-content-frame[data-content-phase="enter"] {244  animation: peach-content-enter 135ms ease-out both;245}246.peach-content-frame[data-content-phase="exit"] {247  animation: peach-content-exit 95ms ease-in forwards;248}249.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }250251/* Stage */252.peach-stage {253  padding: 10px 20px 12px;254  display: grid;255  gap: 12px;256  align-content: start;257  min-width: 0;258  min-height: 0;259  max-width: 100%;260  overflow-y: auto;261  overflow-x: hidden;262  scrollbar-width: none;263  -ms-overflow-style: none;264  overscroll-behavior: contain;265}266.peach-stage::-webkit-scrollbar { display: none; }267268/* Entry name */269.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }270.peach-entry-header {271  position: relative;272  z-index: 1;273  display: flex;274  align-items: flex-start;275  gap: 6px;276  min-width: 0;277}278.peach-entry-header-name {279  flex: 1;280  min-width: 0;281}282.peach-entry-name {283  margin: 0;284  padding-bottom: 0.12em;285  font-family: var(--font-display);286  font-style: italic; font-weight: 400;287  font-size: 44px; line-height: 0.95;288  color: var(--peach-t0);289  display: -webkit-box;290  -webkit-line-clamp: 2;291  -webkit-box-orient: vertical;292  overflow: hidden;293  text-wrap: balance;294}295.peach-entry-name--lg { font-size: 40px; }296.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }297.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }298.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }299300/* Trash icon in entry header */301.peach-entry-trash-btn {302  flex-shrink: 0;303  padding: 4px;304  margin-top: 4px;305  background: transparent;306  border: none;307  cursor: pointer;308  color: var(--peach-t2);309  border-radius: 4px;310  transition: color 140ms ease, background 140ms ease;311  display: flex;312  align-items: center;313  justify-content: center;314}315.peach-entry-trash-btn:hover {316  color: var(--peach-t1);317  background: var(--peach-t3);318}319.peach-entry-trash-confirm {320  display: flex;321  align-items: center;322  gap: 6px;323  flex-shrink: 0;324  margin-top: 6px;325  flex-wrap: nowrap;326}327.peach-entry-trash-confirm-label {328  font-family: var(--font-mono);329  font-size: 0.5625rem;330  letter-spacing: 0.1em;331  color: var(--peach-t2);332  white-space: nowrap;333}334.peach-entry-name-button {335  padding: 0;336  background: transparent;337  text-align: left;338  cursor: pointer;339  max-width: 100%;340  overflow: hidden;341  display: block;342}343.peach-entry-name-char {344  display: inline-block;345  white-space: pre;346  opacity: 0;347  transform: translateY(0.22em);348  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;349  animation-delay: calc(var(--char-index, 0) * 20ms);350}351352/* Domain */353.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }354.peach-domain-row {355  width: 100%; border: 0; background: transparent; color: inherit;356  padding: 0; display: flex; justify-content: space-between; align-items: baseline;357  cursor: default;358}359.peach-domain-value {360  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;361  font-size: 0.625rem; font-style: italic;362  letter-spacing: 0.12em; color: var(--peach-t1);363}364365/* Fields */366.peach-fields { display: grid; gap: 10px; }367.peach-field-card { display: grid; gap: 7px; }368.peach-label {369  font-family: Inter, system-ui, sans-serif;370  text-transform: uppercase; letter-spacing: 0.2em;371  font-size: 0.5rem; color: var(--peach-t2);372}373.peach-add-field-btn {374  align-self: flex-start;375  background: none; border: none; padding: 2px 0;376  font-family: Inter, system-ui, sans-serif;377  font-size: 0.6875rem; color: var(--peach-accent);378  cursor: pointer; opacity: 0.75;379  letter-spacing: 0.02em;380}381.peach-add-field-btn:hover { opacity: 1; }382.peach-field-value-row {383  display: flex; justify-content: space-between;384  align-items: center; gap: 8px;385  min-width: 0;386}387.peach-field-value {388  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;389  font-size: 0.8125rem; color: var(--peach-t1);390  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;391  flex: 1;392  min-width: 0;393}394.peach-password-value {395  display: inline-flex;396  align-items: center;397  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;398  font-size: 1rem; letter-spacing: 0.3em; color: var(--peach-t0);399  overflow: hidden;400  text-overflow: ellipsis;401  white-space: nowrap;402  flex: 1;403  min-width: 0;404  max-width: 100%;405}406.peach-password-value.is-revealed {407  font-size: 0.875rem;408  letter-spacing: 0.08em;409}410.peach-password-text,411.peach-password-mask {412  display: block;413  width: 100%;414  overflow: hidden;415  white-space: nowrap;416  /* Render as uniform mid-line bullets, not baseline periods */417  font-family: Inter, system-ui, sans-serif;418  font-size: 0.625rem;419  letter-spacing: 3px;420  user-select: none;421}422.peach-field-actions { display: flex; gap: 4px; align-items: center; }423.peach-password-strength { display: flex; align-items: center; gap: 8px; }424.peach-strength-bar { display: flex; gap: 3px; }425426.peach-strength-label {427  font-family: "IBM Plex Mono", monospace;428  font-style: italic;429  font-size: 0.5625rem;430  font-weight: 300;431  min-width: 36px;432  text-align: right;433  color: var(--peach-t2);434  letter-spacing: 0.06em;435}436437.peach-strength-hairline {438  display: flex;439  align-items: center;440  gap: 10px;441  margin-top: -2px;442}443444.peach-strength-hairline-track {445  flex: 1;446  height: 3px;447  border-radius: 2px;448  background: var(--peach-s2);449  overflow: hidden;450}451452.peach-strength-hairline-fill {453  height: 100%;454  border-radius: 2px;455  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),456    background 400ms ease;457}458459/* Note content (display) */460.peach-note-content {461  border-top: 1px solid var(--peach-t3);462  padding-top: 10px;463  font-family: var(--font-display);464  font-size: 0.9375rem;465  line-height: 1.75;466  color: var(--peach-t1);467}468469/* ── Inline editing ─────────────────────────────────────────────────── */470471/* Clickable display values */472.peach-inline-clickable {473  cursor: text;474  border-radius: 3px;475  transition: background 150ms ease;476}477.peach-inline-clickable:hover {478  background: rgba(240, 232, 216, 0.05);479}480481/* Subtle "edit" hint that appears on hover */482.peach-inline-edit-hint {483  font-family: Inter, system-ui, sans-serif;484  font-size: 0.5625rem;485  text-transform: uppercase;486  letter-spacing: 0.14em;487  color: var(--peach-t2);488  opacity: 0;489  transition: opacity 120ms ease;490  pointer-events: none;491  margin-left: 6px;492  flex-shrink: 0;493}494.peach-domain-row:hover .peach-inline-edit-hint {495  opacity: 1;496}497498/* Title editing */499.peach-inline-title-wrap {500  display: flex;501  flex-direction: column;502  gap: 6px;503}504.peach-inline-title-input {505  font-family: var(--font-display);506  font-style: italic;507  font-weight: 400;508  font-size: 40px;509  line-height: 0.95;510  color: var(--peach-t0);511  background: transparent;512  border: none;513  border-bottom: 1px solid var(--peach-accent);514  outline: none;515  width: 100%;516  padding: 2px 0;517}518519/* Generic inline field */520.peach-inline-field-wrap {521  display: flex;522  flex-direction: column;523  gap: 6px;524}525.peach-inline-input {526  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;527  font-size: 0.8125rem;528  color: var(--peach-t0);529  background: transparent;530  border: none;531  border-bottom: 1px solid var(--peach-accent);532  outline: none;533  width: 100%;534  padding: 3px 0;535}536.peach-inline-textarea {537  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;538  font-size: 0.6875rem;539  line-height: 1.7;540  color: var(--peach-t0);541  background: rgba(240, 232, 216, 0.04);542  border: 1px solid var(--peach-accent);543  border-radius: 4px;544  outline: none;545  width: 100%;546  padding: 8px;547  resize: vertical;548  min-height: 80px;549}550551/* Save / cancel row */552.peach-inline-actions {553  display: flex;554  gap: 6px;555  align-items: center;556}557.peach-inline-save-btn,558.peach-inline-cancel-btn {559  display: inline-flex;560  align-items: center;561  justify-content: center;562  width: 26px;563  height: 26px;564  border-radius: 4px;565  border: none;566  cursor: pointer;567  transition: background 140ms ease, opacity 140ms ease;568  flex-shrink: 0;569}570.peach-inline-save-btn {571  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);572  color: var(--peach-accent);573}574.peach-inline-save-btn:hover:not(:disabled) {575  background: color-mix(in srgb, var(--peach-accent) 30%, transparent);576}577.peach-inline-cancel-btn {578  background: rgba(240, 232, 216, 0.06);579  color: var(--peach-t2);580}581.peach-inline-cancel-btn:hover:not(:disabled) {582  background: rgba(240, 232, 216, 0.12);583  color: var(--peach-t1);584}585.peach-inline-save-btn:disabled,586.peach-inline-cancel-btn:disabled {587  opacity: 0.4;588  cursor: not-allowed;589}590591/* "is-editing" card state */592.peach-field-card.is-editing {593  background: rgba(240, 232, 216, 0.02);594  border-radius: 6px;595  padding: 8px;596  margin: -8px;597}598599/* Inline tag editor on Entry detail view */600.peach-inline-tag-editor {601  display: flex;602  flex-direction: column;603  gap: 6px;604}605606/* Quiet inline "+ add X" link in the entry detail body */607.peach-entry-add-link {608  justify-self: start;609  margin-top: 8px;610}611612/* Additional URLs editor revealed by clicking the URL field */613.peach-additional-urls {614  display: flex;615  flex-direction: column;616  gap: 6px;617  margin-top: 8px;618}619.peach-additional-urls-label {620  font-size: 0.5625rem;621  letter-spacing: 0.1em;622  text-transform: uppercase;623  color: var(--peach-t2);624  margin-bottom: 2px;625}626/* UI-5 / LV-4: recovery words grid in the view-words reveal. */627.peach-recovery-words-grid {628  display: grid;629  grid-template-columns: 1fr 1fr;630  gap: 4px 10px;631}632.peach-recovery-word {633  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;634  font-size: 11px;635  color: var(--peach-t0);636}637.peach-recovery-word b {638  color: var(--peach-t2);639  font-weight: 400;640  margin-right: 4px;641}642643/* UI-1 / HV-1b: dismissible sync alert banners at the top of the vault view. */644.peach-sync-alerts {645  display: flex;646  flex-direction: column;647  gap: 6px;648  padding: 8px 12px 0;649  /* Grid item of .peach-shell: without a zero min-width the nowrap alert text650     sizes this item to its min-content, blowing the fixed-width shell past651     320px and clipping/distorting everything else in it. */652  min-width: 0;653}654.peach-sync-alert {655  display: flex;656  align-items: center;657  gap: 8px;658  padding: 8px 10px;659  border-radius: 7px;660  min-width: 0;661  max-width: 100%;662  background: color-mix(in srgb, #C8A840 14%, transparent);663  border: 1px solid color-mix(in srgb, #C8A840 38%, transparent);664}665.peach-sync-alert-text {666  flex: 1;667  min-width: 0;668  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;669  font-size: 10px;670  line-height: 1.45;671  color: var(--peach-t0);672  overflow: hidden;673  text-overflow: ellipsis;674  white-space: nowrap;675}676.peach-sync-alert-flip {677  flex-shrink: 0;678  background: none;679  border: none;680  color: var(--peach-t2);681  font-size: 14px;682  line-height: 1;683  cursor: pointer;684  padding: 0 2px;685}686.peach-sync-alert-flip:hover { color: var(--peach-t0); }687.peach-sync-alert-count {688  flex-shrink: 0;689  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;690  font-size: 9px;691  color: var(--peach-t2);692  min-width: 24px;693  text-align: center;694}695.peach-sync-alert-dismiss {696  flex-shrink: 0;697  background: none;698  border: none;699  color: var(--peach-t2);700  font-size: 14px;701  line-height: 1;702  cursor: pointer;703  padding: 0 2px;704}705.peach-sync-alert-dismiss:hover { color: var(--peach-t0); }706707/* UI-8 / LV-2: non-blocking homograph warning under the URL editor. */708.peach-homograph-warning {709  margin: 4px 0 2px;710  padding: 6px 8px;711  border-radius: 6px;712  background: color-mix(in srgb, var(--peach-breach) 12%, transparent);713  border: 1px solid color-mix(in srgb, var(--peach-breach) 36%, transparent);714  color: var(--peach-t1);715  font-size: 0.6875rem;716  line-height: 1.4;717}718.peach-additional-url-row {719  display: flex;720  align-items: center;721  gap: 6px;722}723.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }724.peach-additional-url-remove {725  background: transparent;726  border: 1px solid var(--peach-t3);727  color: var(--peach-t2);728  width: 22px;729  height: 22px;730  border-radius: 4px;731  cursor: pointer;732  font-size: 0.875rem;733  line-height: 1;734  display: inline-flex;735  align-items: center;736  justify-content: center;737  flex-shrink: 0;738  transition: color 120ms ease, border-color 120ms ease;739}740.peach-additional-url-remove:hover:not(:disabled) {741  color: var(--peach-accent);742  border-color: var(--peach-border-accent);743}744.peach-additional-urls-add { align-self: flex-start; }745746/* TOTP band */747.peach-totp-band {748  border-top: 1px solid var(--peach-t3);749  padding: 12px 20px 14px;750  position: relative;751  display: grid;752  grid-template-columns: 1fr auto;753  gap: 10px;754}755.peach-totp-main {756  min-width: 0;757  cursor: pointer;758  user-select: none;759}760.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }761.peach-totp-code-row {762  display: flex;763  align-items: flex-end;764  gap: 10px;765  min-width: 0;766}767.peach-totp-code {768  margin: 2px 0 0;769  font-family: var(--font-display);770  font-style: italic;771  font-weight: 300;772  font-size: 38px; color: var(--peach-accent);773  line-height: 0.95; min-height: 1em;774  min-width: 0;775}776.peach-totp-code-text {777  display: inline-flex;778  overflow: hidden;779  text-overflow: ellipsis;780  white-space: nowrap;781}782783.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }784.peach-totp-countdown {785  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;786  font-size: 22px; color: var(--peach-t1);787}788.peach-totp-ring { transform: rotate(-90deg); }789.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }790.peach-totp-ring-progress {791  fill: none; stroke: var(--peach-accent); stroke-width: 2;792  stroke-linecap: round;793  transition: stroke-dashoffset 1s linear, stroke 500ms ease;794}795/* Search bar */796.peach-search-wrap {797  border-top: 1px solid var(--peach-t3);798  background: var(--peach-s1);799  min-height: 54px; position: relative;800  box-shadow: inset 0 6px 18px transparent;801  transition: box-shadow 700ms ease;802}803.peach-search-wrap::before {804  content: "";805  position: absolute;806  left: 0;807  top: 0;808  height: 2px;809  width: var(--peach-totp-progress, 0%);810  background: var(--peach-accent);811  opacity: 0;812  transition: width 1s linear, opacity 180ms ease;813  pointer-events: none;814}815.peach-shell[data-totp-active="true"] .peach-search-wrap::before {816  opacity: 0.9;817}818.peach-shell[data-totp-active="true"] .peach-search-wrap {819  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);820}821822@keyframes peach-totp-code-flare {823  0%   { filter: brightness(1); }824  25%  { filter: brightness(1.3); }825  100% { filter: brightness(1); }826}827.peach-totp-code.is-hot {828  animation: peach-totp-code-flare 3000ms ease-in-out both;829}830.peach-search-bar {831  min-height: 54px;832  display: grid;833  grid-template-columns: auto minmax(0, 1fr) auto;834  align-items: center;835  gap: 8px; padding: 0 9px 0 12px;836}837.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }838.peach-search-input {839  border: 0; background: transparent; color: var(--peach-t0);840  font-family: var(--font-display);841  font-style: italic; font-size: 18px;842  outline: none; width: 100%; min-width: 0; padding: 0;843  caret-color: var(--peach-accent);844}845.peach-search-input::placeholder { color: var(--peach-t2); }846.peach-search-meta {847  display: grid;848  grid-auto-flow: column;849  align-items: center;850  justify-content: end;851  gap: 6px;852  min-width: max-content;853}854.peach-search-counter {855  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;856  font-size: 0.625rem; color: var(--peach-t2);857  display: inline-flex;858  align-items: center;859  line-height: 1;860}861.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }862863/* Buttons */864.peach-btn {865  border: 1px solid transparent; border-radius: 12px;866  background: transparent; color: var(--peach-t0);867  font-family: Inter, system-ui, sans-serif;868  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;869  cursor: pointer;870  transition:871    background-color var(--peach-dur-80) var(--peach-curve-arrival),872    color var(--peach-dur-80) var(--peach-curve-arrival),873    border-color var(--peach-dur-150) var(--peach-curve-arrival);874}875.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }876.peach-btn:disabled {877  opacity: 0.45;878  cursor: not-allowed;879}880.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }881.peach-btn--md { min-height: 38px; }882.peach-btn--accent {883  background: var(--peach-accent);884  color: rgba(0,0,0,0.92);885  font-weight: 500;886  box-shadow:887    0 1px 0 rgba(255,255,255,0.08) inset,888    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),889    0 3px 16px var(--peach-glow),890    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);891}892.peach-btn--accent:hover:not(:disabled) {893  background: var(--peach-accent);894  filter: brightness(1.10) saturate(1.05);895  box-shadow:896    0 1px 0 rgba(255,255,255,0.10) inset,897    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),898    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),899    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);900}901.peach-btn--ghost:not(.peach-icon-btn) { border-color: var(--peach-t3); color: var(--peach-t1); }902.peach-btn--ghost.peach-icon-btn { color: var(--peach-t1); }903.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }904.peach-icon-btn {905  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;906  display: inline-flex; align-items: center; justify-content: center;907  border-color: transparent;908  transition:909    color var(--peach-dur-80) var(--peach-curve-arrival),910    box-shadow var(--peach-dur-150) var(--peach-curve-arrival),911    background-color var(--peach-dur-80) var(--peach-curve-arrival);912}913.peach-icon-btn:hover:not(:disabled) {914  background: transparent;915  color: var(--peach-accent);916  box-shadow: 0 0 12px color-mix(in srgb, var(--peach-accent) 28%, transparent),917              0 0 4px color-mix(in srgb, var(--peach-accent) 16%, transparent);918}919920/* Topbar sync. Only rendered when a device is paired, so it never sits there921   as a control that cannot do anything. */922.peach-sync-btn.is-syncing { color: var(--peach-accent); }923.peach-sync-btn.is-syncing .peach-sync-icon {924  animation: peach-sync-spin 900ms linear infinite;925  transform-origin: 50% 50%;926}927.peach-sync-btn.is-ok { color: var(--peach-accent); }928.peach-sync-btn.is-error { color: var(--peach-breach, #d66); }929@keyframes peach-sync-spin { to { transform: rotate(360deg); } }930931/* Sync indicator light — same taxonomy as the Settings pip, sized for the932   14px topbar icon. Unlit when nothing has happened yet; never green when933   sync is not actually working. */934.peach-sync-btn { position: relative; }935.peach-sync-pip {936  position: absolute;937  top: 2px;938  right: 2px;939  width: 5px;940  height: 5px;941  border-radius: 50%;942  background: transparent;943}944.peach-sync-pip.is-ok,945.peach-sync-pip.is-busy {946  background: var(--peach-health-ok);947  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-health-ok) 60%, transparent);948}949.peach-sync-pip.is-busy { animation: peach-sync-pip-pulse 1600ms ease-in-out infinite; }950/* Yellow — the dial did not reach the peer, but the alarm will retry. Distinct951   from is-error (red) so a transient network miss does not look like a real952   fault. */953.peach-sync-pip.is-warn {954  background: var(--peach-health-warn);955  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-health-warn) 60%, transparent);956}957.peach-sync-pip.is-error {958  background: var(--peach-breach);959  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-breach) 60%, transparent);960}961@keyframes peach-sync-pip-pulse {962  0%, 100% { opacity: 1; }963  50% { opacity: 0.35; }964}965@media (prefers-reduced-motion: reduce) {966  .peach-sync-btn.is-syncing .peach-sync-icon { animation: none; opacity: 0.6; }967  .peach-sync-pip.is-busy { animation: none; }968}969970.peach-btn:focus-visible {971  outline: none;972  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);973}974975/* Lock button */976.peach-lock-icon { transform-origin: center; }977/* Beat .peach-btn--ghost.peach-icon-btn (rest) and .peach-icon-btn:hover978   (hover) so the lock reads accent in both states. */979.peach-btn--ghost.peach-icon-btn.peach-lock-btn { color: var(--peach-accent); }980.peach-lock-btn.is-locking .peach-lock-icon {981  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);982}983984/* Copy button */985.peach-copy-btn {986  position: relative; overflow: hidden;987  color: var(--peach-t2); border-color: var(--peach-t3);988}989.peach-copy-icon {990  display: inline-flex; align-items: center; justify-content: center;991  position: relative; z-index: 1;992}993.peach-copy-icon-svg { display: block; }994.peach-copy-sheen {995  position: absolute; inset: 0;996  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%);997  opacity: 0; transform: scaleX(0.15); transform-origin: left center;998}999.peach-copy-btn.is-copied {1000  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;1001  box-shadow:1002    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),1003    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),1004    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);1005}1006.peach-copy-btn.is-copied .peach-copy-icon {1007  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;1008}1009.peach-copy-btn.is-copied .peach-copy-sheen {1010  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;1011}1012.peach-copy-btn.is-retreat {1013  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;1014}1015.peach-copy-btn.is-retreat .peach-copy-sheen {1016  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;1017}1018.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }1019.peach-copy-drain-bar {1020  display: block; width: 100%; height: 100%;1021  background: var(--peach-accent); opacity: 0.7;1022  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;1023}10241025/* Unlock screen elements */1026.peach-underline-input {1027  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);1028  padding: 6px 0; background: transparent; color: var(--peach-t0);1029  outline: none;1030  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1031  font-size: 0.8125rem;1032  caret-color: var(--peach-accent);1033}1034.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }1035.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }1036.peach-hint {1037  margin: 0;1038  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1039  font-size: 0.625rem; color: var(--peach-t2);1040}10411042/* Desktop helper (peach-sync) code pairing — additive hooks. The shared pairing1043   classes (peach-pair-*) carry the shared layout; these only style the parts1044   unique to the typed-code path. Inline styles cover the SAS/confirm gate. */1045.peach-desktop-pair { display: flex; flex-direction: column; }1046.peach-desktop-searching,1047.peach-desktop-paired,1048.peach-desktop-error {1049  display: flex; flex-direction: column; gap: 8px;1050  padding: 4px 18px 16px; text-align: center; align-items: center;1051}10521053/* Sync card "pair a device" options — bordered, raised tappable rows that read1054   as buttons on any card hue (theme-neutral light overlay, not the peach accent). */1055.peach-sync-pair-option {1056  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;1057  width: 100%; text-align: left; cursor: pointer; font-family: inherit;1058  padding: 11px 12px; border-radius: 10px;1059  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);1060  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);1061  color: var(--peach-t0);1062  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;1063}1064.peach-sync-pair-option + .peach-sync-pair-option { margin-top: 8px; }1065.peach-sync-pair-option:hover {1066  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);1067  border-color: color-mix(in srgb, var(--peach-t0) 28%, transparent);1068}1069.peach-sync-pair-option:active { transform: translateY(1px); }1070.peach-sync-pair-option:disabled { opacity: 0.5; cursor: default; }1071.peach-sync-pair-option-icon { flex-shrink: 0; display: flex; align-items: center; color: var(--peach-t1); margin-top: 1px; }1072.peach-sync-pair-option-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }1073.peach-sync-pair-option-title { font-size: 0.8125rem; font-weight: 600; }1074.peach-sync-pair-option-sub { font-size: 0.6875rem; line-height: 1.45; color: var(--peach-t2); }1075.peach-sync-pair-option-chevron { flex-shrink: 0; color: var(--peach-t2); font-size: 1.05rem; line-height: 1.3; }10761077/* Breach badge */1078.peach-breach-badge {1079  display: flex;1080  position: relative;1081  z-index: 1;1082  align-items: center;1083  gap: 7px;1084  font-size: 0.5625rem;1085  color: var(--peach-breach);1086  padding: 5px 10px;1087  margin-bottom: 4px;1088  border-radius: 8px;1089  background: rgba(220, 80, 60, 0.07);1090  border: 1px solid rgba(220, 80, 60, 0.18);1091  letter-spacing: 0.04em;1092}10931094.peach-password-value.is-breached {1095  color: rgba(220, 80, 60, 0.75);1096  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1097}10981099/* ── Overlay views ─────────────────────────────────────────────────── */1100.peach-overlay-view {1101  position: absolute;1102  inset: 0;1103  display: flex;1104  flex-direction: column;1105  background:1106    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1107    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1108    var(--peach-bg);1109  z-index: 2;1110  overflow: hidden;1111  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1112}11131114.peach-overlay-view:has(.stk-shell) {1115  background: var(--peach-bg);1116}1117@keyframes overlay-in {1118  from { opacity: 0; transform: translateY(8px); }1119  to   { opacity: 1; transform: translateY(0); }1120}1121.peach-overlay-view.ov-enter-up {1122  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1123}11241125.peach-overlay-view.ov-enter-right {1126  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1127}1128.peach-overlay-view.ov-exit-right {1129  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1130}11311132@keyframes ov-enter-up {1133  from { opacity: 0; transform: translateY(18px); }1134  to   { opacity: 1; transform: translateY(0); }1135}11361137@keyframes ov-enter-right {1138  from { opacity: 0; transform: translateX(20px); }1139  to   { opacity: 1; transform: translateX(0); }1140}1141@keyframes ov-exit-right {1142  from { opacity: 1; transform: translateX(0); }1143  to   { opacity: 0; transform: translateX(20px); }1144}11451146/* Overlay shared header */1147.peach-overlay-header {1148  padding: 10px 12px 8px;1149  display: flex;1150  align-items: center;1151  gap: 10px;1152  flex-shrink: 0;1153}1154/* Back button — circular pill matching the settings stack masthead (.stk-back) */1155.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1156  width: 28px;1157  height: 28px;1158  flex: 0 0 28px;1159  border-radius: 999px;1160  border: 1px solid var(--peach-border);1161  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1162  color: var(--peach-t1);1163  padding: 0;1164}1165.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1166  color: var(--peach-t0);1167  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1168  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1169}1170.peach-overlay-title {1171  font-family: var(--font-display);1172  font-style: italic;1173  font-weight: 400;1174  font-size: 20px;1175  line-height: 1;1176  color: var(--peach-t0);1177  flex: 1;1178  text-align: center;1179}1180/* Balances the 28px back button so the title stays visually centred */1181.peach-overlay-spacer {1182  width: 28px;1183  flex: 0 0 28px;1184}11851186.peach-overlay-card {1187  background: var(--peach-s1);1188  border: 1px solid var(--peach-t3);1189  border-radius: 12px;1190  overflow: hidden;1191  width: 100%;1192}11931194.peach-settings-stack {1195  display: flex;1196  flex-direction: column;1197  gap: 6px;1198}11991200.peach-settings-input {1201  width: 100%;1202  box-sizing: border-box;1203  padding: 8px 10px;1204  background: rgba(0, 0, 0, 0.22);1205  border: 1px solid transparent;1206  border-radius: 6px;1207  color: var(--peach-t0);1208  font-family: var(--font-ui);1209  font-size: 0.75rem;1210  outline: none;1211  transition: border-color 120ms ease, background 120ms ease;1212}12131214.peach-settings-input:focus {1215  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1216  background: rgba(0, 0, 0, 0.28);1217}12181219.peach-settings-input[type="password"] {1220  font-family: var(--font-mono);1221  letter-spacing: 0.04em;1222}12231224.peach-info-notice {1225  font-size: 0.6875rem;1226  color: var(--peach-t1);1227  line-height: 1.5;1228  background: var(--surface-card);1229  border: 1px solid var(--peach-t3);1230  border-radius: 6px;1231  padding: 8px 10px;1232}12331234.peach-info-notice--warn {1235  border-color: rgba(220, 38, 38, 0.4);1236  background: rgba(220, 38, 38, 0.06);1237  color: rgba(220, 38, 38, 0.92);1238  margin-bottom: 8px;1239}12401241/* Warm helpful-context note — reads as a soft aside, not an alert. */12421243.peach-strength-fill {1244  height: 100%;1245  border-radius: 2px;1246  transition: width 120ms ease, background 120ms ease;1247}12481249/* ── List view ───────────────────────────────────────────────────────── */1250.peach-list-top {1251  padding: 0 10px;1252  min-height: 46px;1253  display: flex;1254  align-items: center;1255  gap: 6px;1256  border-bottom: 1px solid var(--peach-t3);1257  flex-shrink: 0;1258  background: var(--peach-s1);1259}12601261.peach-vault-list {1262  flex: 1;1263  overflow-y: auto;1264  scrollbar-width: none;1265}1266.peach-vault-list::-webkit-scrollbar { display: none; }12671268/* Scrollbar — vault list */1269.peach-vault-list {1270  scrollbar-width: thin;1271  scrollbar-color: var(--peach-t3) transparent;1272}12731274.peach-vault-list::-webkit-scrollbar {1275  width: 3px;1276}12771278.peach-vault-list::-webkit-scrollbar-thumb {1279  background: var(--peach-t3);1280  border-radius: 2px;1281}12821283.peach-entry-row {1284  width: 100%;1285  display: flex;1286  align-items: center;1287  gap: 10px;1288  padding: 9px 16px;1289  background: transparent;1290  border: none;1291  border-bottom: 1px solid var(--peach-t3);1292  cursor: pointer;1293  color: inherit;1294  text-align: left;1295  transition: background 80ms ease;1296}1297.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1298.peach-entry-row:last-child { border-bottom: none; }1299.peach-entry-row.is-active {1300  box-shadow: inset 2px 0 0 var(--peach-accent);1301  background: rgba(240,232,216,0.03);1302}1303.peach-entry-row:focus-visible {1304  outline: none;1305  box-shadow: 0 0 0 1px var(--peach-border-accent);1306  background: rgba(240,232,216,0.03);1307}1308.peach-entry-row-icon {1309  width: 26px; height: 26px;1310  border-radius: 7px;1311  border: 1px solid var(--peach-t3);1312  display: flex; align-items: center; justify-content: center;1313  color: var(--peach-t2);1314  flex-shrink: 0;1315}1316.peach-entry-row-icon.is-breach {1317  border-color: rgba(220,80,60,0.3);1318  color: rgba(220,80,60,0.7);1319}13201321/* Title-initials chip used as the favicon fallback for login entries whose1322 * real favicon hasn't been cached by the browser yet (freshly-imported,1323 * never-visited domains). Background colour is hashed from the title so1324 * the same entry always shows the same chip. The chip fits the same1325 * 26×26 row icon slot the favicon would take. */1326.peach-favicon-initials {1327  display: inline-flex;1328  align-items: center;1329  justify-content: center;1330  width: 100%;1331  height: 100%;1332  border-radius: 4px;1333  font-family: "IBM Plex Mono", monospace;1334  font-size: 0.5625rem;1335  font-weight: 600;1336  letter-spacing: 0.04em;1337  color: rgba(240, 232, 216, 0.92);1338  text-transform: uppercase;1339  user-select: none;1340}1341.peach-entry-row-info { flex: 1; min-width: 0; }1342.peach-entry-row-name {1343  display: block;1344  font-family: var(--font-display);1345  font-size: 1.0625rem;1346  font-style: italic;1347  font-weight: 400;1348  color: var(--peach-t0);1349  line-height: 1.2;1350  white-space: nowrap;1351  overflow: hidden;1352  text-overflow: ellipsis;1353}1354.peach-entry-row-meta {1355  display: block;1356  font-family: "IBM Plex Mono", monospace;1357  font-size: 0.5625rem;1358  color: var(--peach-t2);1359  margin-top: 1px;1360  letter-spacing: 0.05em;1361}1362.peach-entry-row-dot {1363  width: 5px; height: 5px;1364  border-radius: 50%;1365  background: rgba(220,80,60,0.7);1366  flex-shrink: 0;1367}1368.peach-new-entry-row {1369  display: flex;1370  align-items: center;1371  justify-content: center;1372  gap: 6px;1373  width: 100%;1374  padding: 11px;1375  background: transparent;1376  border: none;1377  border-top: 1px solid var(--peach-t3);1378  color: var(--peach-t2);1379  font-family: "IBM Plex Mono", monospace;1380  font-size: 0.5625rem;1381  text-transform: uppercase;1382  letter-spacing: 0.14em;1383  cursor: pointer;1384  flex-shrink: 0;1385  transition: color 120ms ease, background 120ms ease;1386}1387.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }13881389/* ── Multi-select mode ─────────────────────────────────────────────── */13901391/* Sort bar in select mode */1392.peach-select-cancel-btn {1393  background: transparent;1394  border: none;1395  padding: 0 4px;1396  cursor: pointer;1397  font-family: "IBM Plex Mono", monospace;1398  font-size: 0.5625rem;1399  letter-spacing: 0.12em;1400  text-transform: uppercase;1401  color: var(--peach-t2);1402  transition: color 140ms ease;1403  flex-shrink: 0;1404}1405.peach-select-cancel-btn:hover { color: var(--peach-t0); }14061407.peach-select-count-label {1408  flex: 1;1409  text-align: center;1410  font-family: "IBM Plex Mono", monospace;1411  font-size: 0.5625rem;1412  letter-spacing: 0.14em;1413  text-transform: uppercase;1414  color: var(--peach-t1);1415}14161417.peach-select-all-btn {1418  background: transparent;1419  border: none;1420  padding: 0 4px;1421  cursor: pointer;1422  font-family: "IBM Plex Mono", monospace;1423  font-size: 0.5625rem;1424  letter-spacing: 0.12em;1425  text-transform: uppercase;1426  color: var(--peach-t2);1427  transition: color 140ms ease;1428  flex-shrink: 0;1429}1430.peach-select-all-btn:hover { color: var(--peach-accent); }14311432/* List in select mode */1433.peach-vault-list.is-selecting .peach-entry-row {1434  cursor: default;1435}1436.peach-vault-list.is-selecting .peach-entry-row:hover {1437  background: rgba(240,232,216,0.02);1438}1439.peach-vault-list.is-selecting .peach-entry-row.is-selected {1440  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1441}1442.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1443  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1444}14451446/* Select indicator circles in icon slot */1447.peach-entry-row-icon.is-select-icon {1448  color: var(--peach-t2);1449}1450.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1451  color: var(--peach-accent);1452}14531454/* Delete action bar at bottom (replaces new-entry row) */1455.peach-select-action-bar {1456  display: flex;1457  align-items: center;1458  justify-content: center;1459  gap: 7px;1460  width: 100%;1461  padding: 11px;1462  background: transparent;1463  border: none;1464  border-top: 1px solid var(--peach-t3);1465  color: var(--peach-t1);1466  font-family: "IBM Plex Mono", monospace;1467  font-size: 0.5625rem;1468  text-transform: uppercase;1469  letter-spacing: 0.14em;1470  cursor: pointer;1471  flex-shrink: 0;1472  transition: color 120ms ease, background 120ms ease;1473}1474.peach-select-action-bar:not(:disabled):hover {1475  color: var(--peach-t0);1476  background: rgba(220,80,60,0.06);1477}1478.peach-select-action-bar:not(:disabled):hover svg {1479  stroke: rgba(220,80,60,0.8);1480}1481.peach-select-action-bar:disabled,1482.peach-select-action-bar.is-empty {1483  color: var(--peach-t2);1484  cursor: default;1485  opacity: 0.5;1486}1487.peach-search-counter-list {1488  white-space: nowrap;1489  flex-shrink: 0;1490}1491.peach-list-empty {1492  min-height: 180px;1493  display: grid;1494  place-items: center;1495  color: var(--peach-t2);1496  font-family: "IBM Plex Mono", monospace;1497  font-size: 0.6875rem;1498}14991500/* ── Settings view ───────────────────────────────────────────────────── */1501.peach-settings-body {1502  flex: 1;1503  overflow-y: auto;1504  min-height: 0;1505  display: flex;1506  flex-direction: column;1507  padding: 2px 0 10px;1508}1509.peach-settings-group {1510  margin: 4px 10px;1511  padding: 9px 14px 11px;1512  border-radius: 12px;1513  border: 1px solid rgba(255, 255, 255, 0.07);1514  background: rgba(26, 20, 16, 0.60);1515  backdrop-filter: blur(10px) saturate(1.3);1516  -webkit-backdrop-filter: blur(10px) saturate(1.3);1517}15181519.peach-settings-group + .peach-settings-group {1520  margin-top: 6px;1521}15221523@supports not (backdrop-filter: blur(1px)) {1524  .peach-settings-group {1525    background: rgba(26, 20, 16, 0.90);1526    border-color: rgba(255, 255, 255, 0.09);1527    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1528  }1529}15301531.light .peach-settings-group,1532[data-theme="light"] .peach-settings-group {1533  background: rgba(245, 237, 226, 0.70);1534  border-color: rgba(26, 18, 8, 0.08);1535  backdrop-filter: blur(10px) saturate(1.2);1536  -webkit-backdrop-filter: blur(10px) saturate(1.2);1537}15381539@supports not (backdrop-filter: blur(1px)) {1540  .light .peach-settings-group,1541  [data-theme="light"] .peach-settings-group {1542    background: rgba(245, 237, 226, 0.97);1543    border-color: rgba(26, 18, 8, 0.10);1544  }1545}15461547.peach-export-card {1548  display: grid;1549  gap: 10px;1550}1551.peach-rune-canvas {1552  border: 1px solid color-mix(in srgb, var(--peach-t0) 22%, transparent);1553  border-radius: 8px;1554  background: rgba(0, 0, 0, 0.22);1555  flex: 1;1556  align-self: center;1557}1558.peach-script-input {1559  font-family: "PeachScript", monospace;1560  font-size: 0.6875rem;1561  line-height: 1.9;1562  letter-spacing: 0.06em;1563  color: var(--peach-t0);1564  background: rgba(0, 0, 0, 0.22);1565  border: none;1566  border-radius: 6px;1567  padding: 12px;1568  width: 100%;1569  min-height: 96px;1570  resize: vertical;1571  word-break: break-all;1572  scrollbar-width: none;1573  -ms-overflow-style: none;1574}15751576.peach-script-input::-webkit-scrollbar { display: none; }1577.peach-csv-warning {1578  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1579  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1580  color: var(--peach-t0);1581  border-radius: 6px;1582  padding: 10px 12px;1583  margin-bottom: 8px;1584  font-size: 0.75rem;1585  line-height: 1.45;1586}1587.peach-export-card--primary {1588  background:1589    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1590}15911592/* Export menu — distribute the three format cards across the popup. */1593.peach-export-menu {1594  display: flex;1595  flex-direction: column;1596  flex: 1;1597  min-height: 0;1598}1599.peach-export-menu .peach-settings-group {1600  flex: 1;1601  display: flex;1602  flex-direction: column;1603  justify-content: center;1604  gap: 10px;1605}16061607/* Result view — the script-string fills the remaining vertical surface. */1608.peach-export-result-group {1609  flex: 1;1610  display: flex;1611  flex-direction: column;1612  min-height: 0;1613  border-bottom: none;1614}1615.peach-export-result-group .peach-export-card {1616  flex: 1;1617  min-height: 0;1618  display: flex;1619  flex-direction: column;1620  gap: 10px;1621}1622.peach-export-result-group .peach-export-card-copy {1623  flex-shrink: 0;1624}1625.peach-export-result-group .peach-settings-label {1626  flex-shrink: 0;1627}1628.peach-export-result-group button {1629  flex-shrink: 0;1630}16311632.peach-export-card-copy {1633  margin: 0;1634  font-size: 0.75rem;1635  line-height: 1.55;1636  color: var(--peach-t1);1637}1638.peach-export-note {1639  margin: 0;1640  font-size: 0.625rem;1641  line-height: 1.5;1642  color: var(--peach-t2);1643}1644.peach-export-strength-track {1645  height: 3px;1646  background: var(--peach-border);1647  border-radius: 2px;1648  margin: 4px 0 2px;1649  overflow: hidden;1650}1651.peach-export-strength-fill {1652  height: 100%;1653  border-radius: 2px;1654  transition: width 250ms ease, background 250ms ease;1655}1656.peach-export-strength-warn {1657  margin: 0;1658  font-size: 0.625rem;1659  line-height: 1.5;1660  color: #e84040;1661  font-family: "IBM Plex Mono", monospace;1662}1663.peach-export-strength-hint {1664  margin: 0;1665  font-size: 0.625rem;1666  line-height: 1.5;1667  color: var(--peach-t2);1668  font-family: "IBM Plex Mono", monospace;1669}16701671.peach-settings-label {1672  margin: 0 0 6px;1673  font-family: "IBM Plex Mono", monospace;1674  font-size: 0.5rem;1675  text-transform: uppercase;1676  letter-spacing: 0.18em;1677  color: var(--peach-t2);1678}1679.peach-settings-row {1680  display: flex;1681  align-items: center;1682  justify-content: space-between;1683  gap: 12px;1684  min-height: 34px;1685  padding: 6px 0;1686  font-size: 0.8125rem;1687  color: var(--peach-t1);1688}1689.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1690.peach-settings-value {1691  font-family: "IBM Plex Mono", monospace;1692  font-size: 0.625rem;1693  color: var(--peach-t2);1694}16951696.peach-settings-link {1697  font-family: "IBM Plex Mono", monospace;1698  font-size: 0.625rem;1699  color: var(--peach-accent);1700  text-decoration: none;1701  cursor: pointer;1702}1703.peach-settings-link:hover {1704  text-decoration: underline;1705}17061707.peach-settings-row--top {1708  align-items: flex-start;1709}17101711.peach-settings-row-main {1712  display: flex;1713  flex-direction: column;1714  gap: 4px;1715  flex: 1;1716}1717.peach-toggle {1718  width: 28px; height: 16px;1719  border-radius: 999px;1720  background: var(--peach-t3);1721  border: 1px solid var(--peach-t3);1722  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1723  flex-shrink: 0;1724  transition: background 200ms ease, border-color 200ms ease;1725  cursor: pointer;1726}1727.peach-toggle.is-on {1728  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1729  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1730}1731.peach-toggle-knob {1732  width: 10px; height: 10px;1733  border-radius: 50%;1734  background: var(--peach-t2);1735  flex-shrink: 0;1736  transform: translateX(0px);1737  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1738}1739.peach-toggle.is-on .peach-toggle-knob {1740  background: var(--peach-accent);1741  transform: translateX(12px);1742}17431744/* ── Settings sub-view section labels ──────────────────────────────────── */1745.peach-settings-sub-label {1746  margin: 12px 0 4px;1747  font-family: "IBM Plex Mono", monospace;1748  font-size: 0.5rem;1749  text-transform: uppercase;1750  letter-spacing: 0.18em;1751  color: var(--peach-t2);1752}1753.peach-settings-sub-label:first-child {1754  margin-top: 4px;1755}17561757/* ── Settings: collapsible Advanced section ─────────────────────────────── */1758.peach-settings-advanced-toggle {1759  display: flex;1760  align-items: center;1761  justify-content: space-between;1762  width: 100%;1763  background: none;1764  border: none;1765  cursor: pointer;1766  padding: 12px 0 4px;1767  margin: 0;1768  color: inherit;1769}1770.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {1771  color: var(--peach-t1);1772}1773.peach-settings-advanced-chevron {1774  font-size: 0.5625rem;1775  color: var(--peach-t3);1776  letter-spacing: 0;1777  transition: color 120ms ease;1778}17791780.peach-sync-disclosure-toggle {1781  min-height: 48px;1782  padding: 10px 0;1783  text-align: left;1784}17851786.peach-sync-disclosure-toggle > span:first-child {1787  display: flex;1788  flex-direction: column;1789  gap: 3px;1790}17911792.peach-sync-disclosure-summary {1793  color: var(--peach-t2);1794  font-size: 0.6875rem;1795  line-height: 1.35;1796}17971798.peach-sync-disclosure-content {1799  padding-bottom: 4px;1800}18011802/* ── Feedback form ──────────────────────────────────────────────────────── */1803.peach-feedback-group {1804  flex: 1;1805  display: flex;1806  flex-direction: column;1807  border-bottom: none;1808}18091810.peach-feedback-intro {1811  margin: 4px 0 14px;1812  font-size: 0.75rem;1813  line-height: 1.55;1814  color: var(--peach-t1);1815}18161817.peach-feedback-chips {1818  display: flex;1819  flex-wrap: wrap;1820  gap: 6px;1821  margin-bottom: 14px;1822}18231824.peach-feedback-chip {1825  padding: 4px 10px;1826  border-radius: 999px;1827  border: 1px solid var(--peach-t3);1828  background: none;1829  color: var(--peach-t2);1830  font-size: 0.6875rem;1831  font-family: var(--font-ui);1832  cursor: pointer;1833  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,1834    background var(--peach-dur-80) ease;1835}1836.peach-feedback-chip:hover {1837  border-color: var(--peach-t2);1838  color: var(--peach-t1);1839}1840.peach-feedback-chip.is-active {1841  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);1842  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));1843  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);1844  box-shadow:1845    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),1846    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);1847  font-weight: 700;1848}18491850.peach-feedback-textarea {1851  flex: 1;1852  width: 100%;1853  min-height: 120px;1854  box-sizing: border-box;1855  background: rgba(0, 0, 0, 0.22);1856  border: 1px solid transparent;1857  border-radius: 6px;1858  color: var(--peach-t0);1859  font-size: 0.75rem;1860  font-family: var(--font-ui);1861  line-height: 1.5;1862  padding: 8px 10px;1863  resize: none;1864  outline: none;1865  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;1866}1867.peach-feedback-textarea:focus {1868  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1869  background: rgba(0, 0, 0, 0.28);1870}1871.peach-feedback-textarea:focus {1872  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1873}1874.peach-feedback-textarea::placeholder {1875  color: var(--peach-t2);1876}18771878.peach-feedback-meta {1879  margin: 6px 0 0;1880  font-size: 0.625rem;1881  color: var(--peach-t2);1882  font-family: "IBM Plex Mono", monospace;1883}18841885.peach-feedback-submit {1886  width: 100%;1887  margin-top: 12px;1888  justify-content: center;1889}18901891.peach-feedback-anon {1892  margin: 8px 0 0;1893  font-size: 0.625rem;1894  color: var(--peach-t2);1895  text-align: center;1896}18971898.peach-feedback-thanks {1899  margin: auto 0;1900  padding: 18px 14px;1901  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);1902  border-radius: 8px;1903  background:1904    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),1905    rgba(0, 0, 0, 0.18);1906  color: var(--peach-t1);1907  text-align: center;1908}19091910.peach-feedback-thanks p {1911  margin: 0;1912  font-size: 0.75rem;1913  line-height: 1.5;1914}19151916.peach-feedback-thanks-title {1917  color: var(--peach-t0);1918  font-family: "Cormorant Garamond", serif;1919  font-size: 1.375rem !important;1920  line-height: 1.1 !important;1921  margin-bottom: 8px !important;1922}19231924.peach-passkey-badge {1925  margin-left: 8px;1926  font-size: 0.625rem;1927  letter-spacing: 0.06em;1928  text-transform: uppercase;1929  color: var(--peach-t2);1930  font-family: var(--font-ui);1931  vertical-align: middle;1932}19331934.peach-passkey-activity {1935  flex-direction: column;1936  align-items: flex-start;1937  gap: 4px;1938}19391940.peach-passkey-meta {1941  font-size: 0.6875rem;1942  color: var(--peach-t2);1943}19441945.peach-passkey-approval {1946  display: flex;1947  flex-direction: column;1948  align-items: center;1949  padding: 16px 20px 14px;1950  gap: 8px;1951  text-align: center;1952}19531954.peach-passkey-approval-icon {1955  width: 36px;1956  height: 36px;1957  border-radius: 10px;1958  background: var(--peach-s2);1959  border: 1px solid var(--peach-t3);1960  display: flex;1961  align-items: center;1962  justify-content: center;1963  flex-shrink: 0;1964  color: var(--peach-accent);1965}19661967.peach-passkey-approval-icon img,1968.peach-passkey-approval-icon svg {1969  width: 22px;1970  height: 22px;1971  border-radius: 5px;1972}19731974.peach-passkey-approval-rp {1975  font-family: var(--font-ui);1976  font-size: 0.75rem;1977  color: var(--peach-t2);1978  letter-spacing: 0.03em;1979}19801981.peach-passkey-approval-action {1982  font-family: var(--font-display);1983  font-style: italic;1984  font-weight: 300;1985  font-size: 18px;1986  color: var(--peach-t0);1987  line-height: 1.1;1988  margin: 1px 0;1989}19901991.peach-passkey-approval-user {1992  font-family: var(--font-mono);1993  font-size: 0.6875rem;1994  color: var(--peach-t1);1995  background: var(--peach-s2);1996  border: 1px solid var(--peach-t3);1997  border-radius: 4px;1998  padding: 3px 8px;1999}20002001.peach-passkey-approval-notice {2002  font-size: 0.625rem;2003  color: var(--peach-t2);2004  line-height: 1.5;2005  max-width: 220px;2006}20072008.peach-passkey-approval-actions {2009  display: flex;2010  gap: 8px;2011  width: 100%;2012  margin-top: 6px;2013}20142015.peach-passkey-approval-actions .peach-btn {2016  flex: 1;2017}20182019/* ── Inline generator drawer ── */2020.peach-generator-drawer {2021  display: grid;2022  grid-template-rows: 0fr;2023  transition: grid-template-rows 320ms var(--peach-curve-arrival);2024  overflow: hidden;2025}2026.peach-generator-drawer.is-open {2027  grid-template-rows: 1fr;2028}2029.peach-generator-drawer-inner {2030  min-height: 0;2031  overflow: hidden;2032}2033.peach-generator-drawer-content {2034  border-top: 1px solid var(--peach-t3);2035  padding: 8px 0 4px;2036  display: flex;2037  flex-direction: column;2038  gap: 8px;2039}20402041/* ── Compact generator (inside entry edit) ── */2042.peach-generator-drawer-content--compact {2043  border-top: 1px solid var(--peach-t3);2044  padding: 8px 0 2px;2045  gap: 7px;2046}2047.peach-pwgen-compact-display-row {2048  display: flex;2049  align-items: center;2050  gap: 6px;2051}2052.peach-pwgen-compact-output {2053  flex: 1;2054  min-width: 0;2055  font-family: "IBM Plex Mono", monospace;2056  font-size: 0.6875rem;2057  font-weight: 400;2058  letter-spacing: 0.04em;2059  color: var(--peach-t0);2060  background: rgba(240, 232, 216, 0.04);2061  border: 1px solid var(--peach-t3);2062  border-radius: 5px;2063  padding: 5px 8px;2064  line-height: 1.5;2065  outline: none;2066  transition: border-color 120ms ease;2067}20682069.peach-pwgen-compact-output:focus {2070  border-color: var(--peach-t1);2071}2072.peach-pwgen-compact-controls {2073  display: flex;2074  align-items: center;2075  gap: 6px;2076}2077.peach-pwgen-compact-slider {2078  flex: 1;2079  min-width: 0;2080  height: 2px !important;2081}2082.peach-pwgen-compact-controls .peach-pwgen-len-num {2083  flex-shrink: 0;2084  min-width: 18px;2085  text-align: right;2086}2087.peach-pwgen-compact-pills {2088  display: flex;2089  gap: 3px;2090  flex-shrink: 0;2091}2092.peach-pwgen-compact-pills .peach-pwgen-pill {2093  padding: 2px 7px;2094  font-size: 0.5rem;2095}2096.peach-pwgen-compact-use {2097  flex-shrink: 0;2098  font-size: 0.625rem !important;2099  padding: 3px 9px !important;2100  min-height: 22px !important;2101  border-radius: 5px !important;2102}21032104/* ── Password edit row (input + eye toggle side-by-side) ── */2105.peach-password-edit-row {2106  display: flex;2107  align-items: center;2108  gap: 6px;2109}2110.peach-password-edit-row .peach-inline-input {2111  flex: 1;2112  min-width: 0;2113}21142115/* ── Generate toggle link ── */2116.peach-generate-toggle-link {2117  display: inline-flex;2118  align-items: center;2119  gap: 5px;2120  background: none;2121  border: none;2122  padding: 0;2123  cursor: pointer;2124  font-family: "IBM Plex Mono", monospace;2125  font-size: 0.625rem;2126  color: var(--peach-t2);2127  letter-spacing: 0.04em;2128  transition: color 120ms ease;2129  align-self: flex-start;2130}2131.peach-generate-toggle-link:hover {2132  color: var(--peach-accent);2133}21342135/* Holds the generate + history toggle links on one row under the editor. */2136.peach-password-edit-links {2137  display: flex;2138  align-items: center;2139  gap: 14px;2140  flex-wrap: wrap;2141}21422143/* ── Past-password history list ── */2144.peach-password-history {2145  display: grid;2146  gap: 4px;2147  margin-top: 2px;2148  max-height: 168px;2149  overflow-y: auto;2150  scrollbar-width: thin;2151}2152.peach-history-row {2153  display: flex;2154  align-items: center;2155  justify-content: space-between;2156  gap: 8px;2157  padding: 5px 7px;2158  border-radius: 7px;2159  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2160  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2161}2162.peach-history-main {2163  display: flex;2164  flex-direction: column;2165  gap: 1px;2166  min-width: 0;2167  flex: 1;2168}2169.peach-history-pw {2170  font-family: "IBM Plex Mono", monospace;2171  font-size: 0.6875rem;2172  color: var(--peach-t1);2173  white-space: nowrap;2174  overflow: hidden;2175  text-overflow: ellipsis;2176}2177.peach-history-pw .peach-password-mask {2178  letter-spacing: 0.08em;2179  color: var(--peach-t2);2180}2181.peach-history-age {2182  font-family: "IBM Plex Mono", monospace;2183  font-size: 0.5625rem;2184  color: var(--peach-t3, var(--peach-t2));2185  letter-spacing: 0.03em;2186}2187.peach-history-actions {2188  display: flex;2189  align-items: center;2190  gap: 2px;2191  flex-shrink: 0;2192}2193.peach-history-use {2194  font-family: "IBM Plex Mono", monospace;2195  font-size: 0.5625rem;2196  letter-spacing: 0.05em;2197  padding: 3px 7px;2198}2199.peach-history-empty {2200  font-family: "IBM Plex Mono", monospace;2201  font-size: 0.625rem;2202  line-height: 1.45;2203  color: var(--peach-t2);2204  padding: 6px 8px;2205  border-radius: 7px;2206  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);2207  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);2208}22092210/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2211.peach-entry-body {2212  flex: 1;2213  overflow-y: auto;2214  overflow-x: hidden;2215  scrollbar-width: none;2216  -ms-overflow-style: none;2217  overscroll-behavior: contain;2218  display: grid;2219  gap: 10px;2220  align-content: start;2221  padding: 10px 20px 14px;2222  min-width: 0;2223  min-height: 0;2224}2225.peach-entry-body::-webkit-scrollbar { display: none; }22262227/* Type-toggle pills + inline note toolbar */2228.peach-new-type-row {2229  display: flex;2230  align-items: center;2231  gap: 6px;2232  margin-bottom: 2px;2233}2234.peach-new-type-btn {2235  background: transparent;2236  border: 1px solid var(--peach-t3);2237  border-radius: 12px;2238  padding: 3px 10px;2239  font-family: "IBM Plex Mono", monospace;2240  font-size: 0.5625rem;2241  letter-spacing: 0.12em;2242  text-transform: uppercase;2243  color: var(--peach-t2);2244  cursor: pointer;2245  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2246}2247.peach-new-type-btn.is-active {2248  color: var(--peach-t0);2249  border-color: var(--peach-accent);2250  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2251}2252.peach-new-type-btn:not(.is-active):hover {2253  color: var(--peach-t1);2254  border-color: var(--peach-t2);2255}22562257/* Editable title */2258.peach-new-title-wrap { margin: 0 0 2px; }2259.peach-new-title-input {2260  background: transparent;2261  border: none;2262  outline: none;2263  width: 100%;2264  color: var(--peach-t0);2265  font-family: var(--font-display);2266  font-style: italic;2267  font-weight: 400;2268  font-size: 40px;2269  line-height: 0.95;2270  caret-color: var(--peach-accent);2271}2272.peach-new-title-input::placeholder { color: var(--peach-t2); }22732274/* Editable domain field */2275.peach-domain-edit-row {2276  display: flex;2277  align-items: center;2278  gap: 6px;2279}22802281.peach-domain-edit-row .peach-domain-value--edit {2282  flex: 1;2283  width: 0;2284}22852286.peach-domain-url-btn {2287  flex-shrink: 0;2288  background: transparent;2289  border: none;2290  cursor: pointer;2291  color: var(--peach-t3);2292  padding: 2px 3px;2293  display: flex;2294  align-items: center;2295  line-height: 0;2296  border-radius: 3px;2297  transition: color 120ms ease;2298}22992300.peach-domain-url-btn:hover {2301  color: var(--peach-accent);2302}23032304.peach-domain-value--edit {2305  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2306  font-size: 0.625rem;2307  font-style: italic;2308  letter-spacing: 0.12em;2309  color: var(--peach-t1);2310  background: transparent;2311  border: none;2312  border-bottom: 1px solid var(--peach-t3);2313  outline: none;2314  width: 100%;2315  padding: 2px 0;2316  caret-color: var(--peach-accent);2317  transition: border-color 140ms ease, color 140ms ease;2318}2319.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2320.peach-domain-value--edit:focus {2321  border-bottom-color: rgba(240, 232, 216, 0.28);2322  color: var(--peach-t0);2323}23242325/* Editable field values (username, password, totp) */2326.peach-field-value--edit {2327  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2328  font-size: 0.8125rem;2329  color: var(--peach-t0);2330  background: transparent;2331  border: none;2332  border-bottom: 1px solid var(--peach-t3);2333  outline: none;2334  flex: 1;2335  min-width: 0;2336  padding: 3px 0;2337  caret-color: var(--peach-accent);2338  transition: border-color 140ms ease, color 140ms ease;2339}2340.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2341.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2342.peach-field-value--edit:focus {2343  border-bottom-color: rgba(240, 232, 216, 0.28);2344  color: var(--peach-t0);2345}23462347/* "+ add optional field" links */2348.peach-entry-add-links {2349  display: flex;2350  gap: 12px;2351  flex-wrap: wrap;2352  margin-top: -2px;2353}2354.peach-add-field-link {2355  background: transparent;2356  border: none;2357  padding: 0;2358  cursor: pointer;2359  font-family: "IBM Plex Mono", monospace;2360  font-size: 0.5625rem;2361  letter-spacing: 0.1em;2362  text-transform: uppercase;2363  color: var(--peach-t2);2364  transition: color 140ms ease;2365}2366.peach-add-field-link:hover { color: var(--peach-accent); }23672368/* ── New entry form (legacy classes) ────────────────────────────────── */2369.peach-new-body {2370  flex: 1;2371  overflow-y: auto;2372  padding: 10px 20px 14px;2373}2374.peach-new-name-input {2375  background: transparent;2376  border: none;2377  outline: none;2378  width: 100%;2379  color: var(--peach-t0);2380  font-family: var(--font-display);2381  font-style: italic;2382  font-weight: 400;2383  font-size: 40px;2384  line-height: 0.95;2385  caret-color: var(--peach-accent);2386}2387.peach-new-name-input::placeholder { color: var(--peach-t2); }2388.peach-new-field-input {2389  background: transparent;2390  border: none;2391  outline: none;2392  flex: 1;2393  min-width: 0;2394  caret-color: var(--peach-accent);2395}2396.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }23972398/* ── Note editor overlay ── */23992400.peach-note-toolbar {2401  display: flex;2402  align-items: center;2403  gap: 3px;2404  padding: 6px 14px 5px;2405  border-bottom: 1px solid var(--peach-t3);2406  flex-shrink: 0;2407}24082409.peach-note-tool-btn {2410  background: transparent;2411  border: 1px solid transparent;2412  border-radius: 5px;2413  color: var(--peach-t2);2414  font-family: "IBM Plex Mono", monospace;2415  font-size: 0.625rem;2416  letter-spacing: 0.04em;2417  padding: 2px 8px;2418  cursor: pointer;2419  line-height: 1.6;2420  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2421}2422.peach-note-tool-btn:hover {2423  background: var(--peach-t4);2424  color: var(--peach-t0);2425  border-color: var(--peach-t3);2426}24272428.peach-note-tool-icon {2429  padding: 3px 7px;2430  display: inline-flex;2431  align-items: center;2432  justify-content: center;2433}24342435.peach-note-tool-divider {2436  width: 1px;2437  height: 14px;2438  background: var(--peach-t3);2439  margin: 0 4px;2440  flex-shrink: 0;2441}24422443.peach-note-editor-body {2444  flex: 1;2445  overflow-y: auto;2446  padding: 16px 20px 20px;2447  outline: none;2448  font-family: var(--font-display);2449  font-size: 1rem;2450  line-height: 1.75;2451  color: var(--peach-t0);2452  scrollbar-width: none;2453  word-break: break-word;2454}2455.peach-note-editor-body:empty::before {2456  content: "write your note…";2457  color: var(--peach-t3);2458  font-style: italic;2459  pointer-events: none;2460}24612462/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2463.peach-note-editor-inline {2464  display: flex;2465  flex-direction: column;2466  flex: 1;2467  min-height: 0;2468}2469.peach-note-editor-body--inline {2470  flex: 1;2471  min-height: 0;2472  font-size: 0.9375rem;2473  padding: 10px 20px 14px;2474}24752476/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2477   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2478   and .peach-note-tool-divider button-level styles. */2479.peach-note-toolbar-inline {2480  display: flex;2481  align-items: center;2482  gap: 3px;2483  margin-left: auto;2484  padding-left: 10px;2485  border-left: 1px solid var(--peach-t3);2486  min-height: 22px;2487}24882489/* Entry.tsx toolbar row (no tabs, toolbar only) */2490.peach-entry-note-toolbar-row {2491  display: flex;2492  align-items: center;2493  margin: 4px 0 6px;2494  position: relative;2495  z-index: 1;2496}2497.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2498  border-left: none;2499  padding-left: 0;2500  margin-left: 0;2501}25022503/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2504.peach-note-body {2505  display: flex;2506  flex-direction: column;2507  flex: 1;2508  min-height: 0;2509  margin: 4px 0 0;2510}2511/* Rich content element styles (editor + display) */2512.peach-note-editor-body h2,2513.peach-note-content h2 {2514  font-family: var(--font-display);2515  font-size: 20px;2516  font-weight: 600;2517  font-style: italic;2518  color: var(--peach-t0);2519  margin: 6px 0 2px;2520  line-height: 1.3;2521}2522.peach-note-editor-body ul,2523.peach-note-content ul {2524  padding-left: 18px;2525  margin: 3px 0;2526  list-style: disc;2527}2528.peach-note-editor-body ol,2529.peach-note-content ol {2530  padding-left: 18px;2531  margin: 3px 0;2532  list-style: decimal;2533}2534.peach-note-editor-body li,2535.peach-note-content li { margin: 2px 0; }2536.peach-note-editor-body hr,2537.peach-note-content hr {2538  border: none;2539  border-top: 1px solid var(--peach-t3);2540  margin: 10px 0;2541}25422543/* font size elements from execCommand */2544.peach-note-editor-body font[size="1"],2545.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }2546.peach-note-editor-body font[size="2"],2547.peach-note-content font[size="2"] { font-size: 0.8125rem; }2548.peach-note-editor-body font[size="3"],2549.peach-note-content font[size="3"] { font-size: 1rem; }2550.peach-note-editor-body font[size="4"],2551.peach-note-content font[size="4"] { font-size: 20px; }2552.peach-note-editor-body font[size="5"],2553.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }25542555/* bold / italic inside the editor and note display */2556.peach-note-editor-body b, .peach-note-editor-body strong,2557.peach-note-content b, .peach-note-content strong { font-weight: 700; }2558.peach-note-editor-body em, .peach-note-editor-body i,2559.peach-note-content em, .peach-note-content i { font-style: italic; }2560.peach-note-content blockquote {2561  border-left: 2px solid var(--peach-accent);2562  margin: 12px 0;2563  padding-left: 16px;2564  color: var(--peach-t1);2565  font-style: italic;2566}25672568/* note display — rendered HTML, no pre-wrap */2569.peach-note-content {2570  overflow: auto;2571  max-height: 340px;2572  word-break: break-word;2573}25742575/* ── Field input baseline ── */2576.peach-new-field-input {2577  width: 100%;2578  background: transparent;2579  border: none;2580  border-bottom: 1px solid var(--peach-t3);2581  padding: 4px 0;2582  color: var(--peach-t1);2583  font-family: "IBM Plex Mono", monospace;2584  font-size: 0.8125rem;2585  outline: none;2586  transition: border-color 150ms ease;2587}25882589.peach-new-field-input:focus {2590  border-bottom-color: var(--peach-t0);2591  color: var(--peach-t0);2592}25932594.peach-new-name-input {2595  width: 100%;2596  background: transparent;2597  border: none;2598  border-bottom: 1px solid var(--peach-t3);2599  padding: 6px 0;2600  font-family: var(--font-display);2601  font-style: italic;2602  font-size: 28px;2603  color: var(--peach-t0);2604  outline: none;2605  transition: border-color 150ms ease;2606}26072608.peach-new-name-input:focus {2609  border-bottom-color: var(--peach-t1);2610}26112612.peach-new-name-input::placeholder {2613  color: var(--peach-t2);2614  font-style: italic;2615}26162617.peach-new-field-input::placeholder {2618  color: var(--peach-t3);2619}26202621/* ── Demo entrance animation ── */2622#hd-shell {2623  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;2624}2625@keyframes hd-shell-enter {2626  from { opacity: 0; transform: scale(0.96) translateY(16px); }2627  to   { opacity: 1; transform: scale(1) translateY(0); }2628}26292630/* ── Keyframes ── */2631@keyframes peach-char-enter {2632  from { opacity: 0; transform: translateY(0.22em); }2633  to   { opacity: 1; transform: translateY(0); }2634}2635@keyframes peach-content-enter {2636  from { opacity: 0.96; transform: translateY(4px); }2637  to   { opacity: 1; transform: translateY(0); }2638}2639@keyframes peach-content-exit {2640  from { opacity: 1; transform: translateY(0); }2641  to   { opacity: 0.92; transform: translateY(-3px); }2642}2643@keyframes peach-screen-enter {2644  from { opacity: 0; transform: translateY(14px); }2645  to   { opacity: 1; transform: translateY(0); }2646}2647@keyframes peach-shell-fade-in {2648  from { opacity: 0; }2649  to   { opacity: 1; }2650}2651@keyframes peach-lock-settle {2652  0%   { transform: scale(0.9); }2653  65%  { transform: scale(1.08); }2654  100% { transform: scale(1); }2655}2656@keyframes peach-copy-confirm {2657  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }2658  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); }2659}2660@keyframes peach-copy-retreat {2661  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); }2662  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }2663}2664@keyframes peach-copy-flood {2665  from { opacity: 0; transform: scaleX(0.15); }2666  to   { opacity: 1; transform: scaleX(1); }2667}2668@keyframes peach-copy-icon-settle {2669  from  { transform: scale(0.84); }2670  70%   { transform: scale(1.08); }2671  to    { transform: scale(1); }2672}2673@keyframes peach-copy-sheen-retreat {2674  from { opacity: 1; transform: scaleX(1); }2675  to   { opacity: 0; transform: scaleX(0.15); }2676}2677@keyframes peach-copy-drain {2678  from { width: 100%; }2679  to   { width: 0; }2680}2681@keyframes peach-shake {2682  0%, 100% { transform: translateX(0); }2683  20%      { transform: translateX(-6px); }2684  40%      { transform: translateX(6px); }2685  60%      { transform: translateX(-4px); }2686  80%      { transform: translateX(4px); }2687}26882689@keyframes pip-pulse {2690  0% { transform: scale(1); }2691  40% { transform: scale(2.2); }2692  100% { transform: scale(1); }2693}26942695/* ── Password generator ── */26962697.peach-pwgen-display-row {2698  display: flex;2699  align-items: flex-start;2700  gap: 8px;2701  padding-bottom: 8px;2702  border-bottom: 1px solid var(--peach-t3);2703}2704.peach-pwgen-output {2705  flex: 1; min-width: 0; margin: 0;2706  font-family: "IBM Plex Mono", monospace;2707  font-size: 0.8125rem; color: var(--peach-t0);2708  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;2709  white-space: normal;2710  padding: 10px 12px;2711  background: var(--peach-t4);2712  border-radius: 6px;2713  min-height: 36px;2714}2715.peach-pwgen-output-display {2716  flex: 1;2717  min-width: 0;2718  margin: 0;2719  font-family: var(--font-display);2720  font-style: italic;2721  font-weight: 300;2722  font-size: 32px;2723  line-height: 1.05;2724  color: var(--peach-t0);2725  word-break: break-all;2726  overflow-wrap: break-word;2727  white-space: normal;2728  letter-spacing: 0.02em;2729}2730.peach-pwgen-display-actions {2731  display: flex;2732  flex-direction: column;2733  gap: 4px;2734  flex-shrink: 0;2735  margin-top: 2px;2736}27372738.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }2739.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }2740.peach-pwgen-len-num {2741  font-family: "IBM Plex Mono", monospace;2742  font-size: 0.75rem; color: var(--peach-accent);2743}2744.peach-pwgen-len-num--edit {2745  cursor: text;2746  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);2747}2748.peach-pwgen-len-input {2749  font-family: "IBM Plex Mono", monospace;2750  font-size: 0.75rem;2751  color: var(--peach-accent);2752  background: transparent;2753  border: none;2754  border-bottom: 1px solid var(--peach-accent);2755  outline: none;2756  width: 32px;2757  text-align: right;2758  padding: 0;2759}2760.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }27612762.peach-pwgen-charset-pills {2763  display: flex;2764  gap: 6px;2765  flex-wrap: wrap;2766}2767.peach-pwgen-pill {2768  padding: 4px 11px;2769  border-radius: 999px;2770  border: 1px solid var(--peach-t3);2771  background: transparent;2772  color: var(--peach-t2);2773  font-family: "IBM Plex Mono", monospace;2774  font-size: 0.5625rem;2775  letter-spacing: 0.08em;2776  cursor: pointer;2777  transition: all 150ms ease;2778}2779.peach-pwgen-pill.is-on {2780  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);2781  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2782  color: var(--peach-accent);2783}2784.peach-pwgen-pill:not(.is-on):hover {2785  color: var(--peach-t1);2786  border-color: var(--peach-t2);2787}2788.peach-pwgen-use-btn {2789  width: 100%;2790  min-height: 34px;2791  border-radius: 8px;2792  margin-top: 2px;2793}2794.peach-generator-constraint-note {2795  font-family: 'IBM Plex Mono', monospace;2796  font-size: 10px;2797  color: var(--peach-t3);2798  letter-spacing: 0.04em;2799  margin: 0;2800  transition: opacity 200ms ease;2801}2802.peach-pwgen-toggle-row {2803  display: flex; align-items: center; justify-content: space-between;2804  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);2805}2806.peach-pwgen-toggle-row:last-child { border-bottom: none; }28072808/* Peach popup should not expose native scrollbars on internal panels. */2809.peach-settings-body,2810.peach-new-body,2811.lock-screen,2812.peach-import-preview {2813  scrollbar-width: none;2814  -ms-overflow-style: none;2815  overscroll-behavior: contain;2816}2817.peach-settings-body::-webkit-scrollbar,2818.peach-new-body::-webkit-scrollbar,2819.lock-screen::-webkit-scrollbar,2820.peach-import-preview::-webkit-scrollbar {2821  width: 0;2822  height: 0;2823  display: none;2824}28252826.lock-screen {2827  height: 100%;2828  min-height: 100%;2829  overflow-y: auto;2830  padding: 18px 18px 16px;2831  gap: 14px;2832  grid-template-rows: auto auto auto 1fr auto;2833  align-content: stretch;2834  position: relative;2835  isolation: isolate;2836}2837.peach-screen.lock-screen--vault-stage {2838  display: flex;2839  flex-direction: column;2840  justify-content: flex-start;2841  gap: 18px;2842  padding: 20px 18px 18px;2843  overflow: hidden;2844}2845.peach-screen.lock-screen--vault-stage .peach-lock-panel {2846  margin-top: 0;2847}28482849.lock-screen::before {2850  content: "";2851  position: absolute;2852  inset: 12px 18px auto auto;2853  width: 160px;2854  height: 160px;2855  border-radius: 999px;2856  background:2857    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%);2858  filter: blur(6px);2859  opacity: 0.7;2860  pointer-events: none;2861  z-index: 0;2862}28632864.lock-screen-header {2865  display: flex;2866  align-items: center;2867  justify-content: space-between;2868  position: relative;2869  z-index: 1;2870}28712872.lock-password-input.shake {2873  animation: peach-shake 300ms ease-in-out;2874}28752876.peach-hint-error {2877  color: rgba(220, 80, 60, 0.92);2878}28792880.peach-onboarding-headline {2881  margin: 0;2882  font-family: var(--font-display);2883  font-size: 35px;2884  line-height: 0.88;2885  font-style: italic;2886  font-weight: 400;2887  max-width: 252px;2888}28892890.peach-lock-hero {2891  position: relative;2892  z-index: 1;2893  display: flex;2894  flex-direction: column;2895  align-items: center;2896  justify-content: center;2897  text-align: center;2898  gap: 10px;2899  min-height: 0;2900  padding: 4px 2px 0;2901  border: none;2902  border-radius: 0;2903  background: transparent;2904  box-shadow: none;2905}2906.peach-lock-hero > * {2907  position: relative;2908  z-index: 1;2909}29102911.peach-lock-mark {2912  width: 40px;2913  height: 40px;2914  margin: 0 auto 6px;2915  display: block;2916}29172918.peach-lock-eyebrow {2919  display: inline-flex;2920  align-items: center;2921  width: fit-content;2922  margin: 0 auto;2923  padding: 4px 9px;2924  border-radius: 999px;2925  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);2926  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2927  color: var(--peach-t0);2928  font-family: "IBM Plex Mono", monospace;2929  font-weight: 600;2930  font-size: 0.55rem;2931  letter-spacing: 0.14em;2932  text-transform: uppercase;2933}29342935.peach-lock-reveal-btn {2936  display: inline-flex;2937  align-items: center;2938  gap: 4px;2939  background: none;2940  border: none;2941  cursor: pointer;2942  font-family: "IBM Plex Mono", monospace;2943  font-size: 0.5625rem;2944  letter-spacing: 0.06em;2945  color: var(--peach-t2);2946  padding: 2px 0;2947  transition: color 150ms ease;2948}29492950.peach-lock-reveal-btn:hover {2951  color: var(--peach-t1);2952}29532954.peach-lock-panel {2955  position: relative;2956  z-index: 1;2957  display: grid;2958  gap: 9px;2959  padding: 14px 16px 15px;2960  border-radius: 18px;2961  border: 1px solid var(--peach-t3);2962  background:2963    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));2964  box-shadow:2965    inset 0 1px 0 rgba(240, 232, 216, 0.04),2966    0 12px 28px rgba(0, 0, 0, 0.12);2967}29682969/* Glass surface — lock panel and settings groups */2970.peach-glass {2971  background: rgba(26, 20, 16, 0.65);2972  border: 1px solid rgba(255, 255, 255, 0.08);2973  border-radius: 12px;2974  backdrop-filter: blur(12px) saturate(1.4);2975  -webkit-backdrop-filter: blur(12px) saturate(1.4);2976}29772978@supports not (backdrop-filter: blur(1px)) {2979  .peach-glass {2980    background: rgba(26, 20, 16, 0.92);2981    border: 1px solid rgba(255, 255, 255, 0.10);2982    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);2983  }2984}29852986.light .peach-glass,2987[data-theme="light"] .peach-glass {2988  background: rgba(240, 233, 223, 0.72);2989  border: 1px solid rgba(26, 18, 8, 0.08);2990  backdrop-filter: blur(12px) saturate(1.2);2991  -webkit-backdrop-filter: blur(12px) saturate(1.2);2992}29932994@supports not (backdrop-filter: blur(1px)) {2995  .light .peach-glass,2996  [data-theme="light"] .peach-glass {2997    background: rgba(240, 233, 223, 0.97);2998    border: 1px solid rgba(26, 18, 8, 0.10);2999  }3000}30013002/* Lock panel keeps its own border-radius over the generic glass token */3003.peach-lock-panel.peach-glass {3004  border-radius: 18px;3005  background: rgba(26, 20, 16, 0.65);3006  border: 1px solid rgba(255, 255, 255, 0.08);3007  box-shadow:3008    inset 0 1px 0 rgba(255, 255, 255, 0.05),3009    0 12px 28px rgba(0, 0, 0, 0.3);3010}30113012.light .peach-lock-panel.peach-glass,3013[data-theme="light"] .peach-lock-panel.peach-glass {3014  background: rgba(240, 233, 223, 0.82);3015  border: 1px solid rgba(26, 18, 8, 0.08);3016  box-shadow:3017    inset 0 1px 0 rgba(255, 255, 255, 0.4),3018    0 8px 24px rgba(80, 56, 32, 0.15);3019}30203021@supports not (backdrop-filter: blur(1px)) {3022  .peach-lock-panel.peach-glass {3023    background: rgba(26, 20, 16, 0.92);3024    box-shadow:3025      inset 0 1px 0 rgba(255, 255, 255, 0.05),3026      0 12px 28px rgba(0, 0, 0, 0.4);3027  }3028  .light .peach-lock-panel.peach-glass,3029  [data-theme="light"] .peach-lock-panel.peach-glass {3030    background: rgba(240, 233, 223, 0.98);3031  }3032}30333034/* ── Restore surface ────────────────────────────────────────────────────3035   The onboarding restore screen. Shares the create-vault screen's glass3036   card language: Cormorant headline, hairline divider, choice rows. The3037   card lists the backup sources; picking one swaps the card body to that3038   source's form. */30393040/* Content centers in the tall card (mirrors the onboarding cards) and3041   scrolls as a fallback on shorter viewports. */3042.peach-restore-card {3043  justify-content: center;3044  overflow-y: auto;3045  scrollbar-width: none;3046}3047.peach-restore-card::-webkit-scrollbar { display: none; }30483049.peach-restore-sources {3050  display: grid;3051  gap: 6px;3052  margin-top: 4px;3053}30543055/* Choice rows reuse .peach-onboarding-choice; tighten them to the same3056   compactness as the final onboarding card's rows. */3057.peach-restore-source {3058  min-height: 40px;3059  padding: 6px 10px;3060  cursor: pointer;3061  transition: border-color 140ms ease, background 140ms ease;3062}3063.peach-restore-source:hover {3064  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);3065  background: color-mix(in srgb, var(--peach-accent) 9%, transparent);3066}30673068/* In-card header shown once a source is picked */3069.peach-restore-source-head {3070  display: flex;3071  align-items: baseline;3072  justify-content: space-between;3073  gap: 10px;3074}30753076.peach-restore-source-title {3077  margin: 0;3078  font-family: var(--font-display);3079  font-style: italic;3080  font-weight: 400;3081  font-size: 18px;3082  line-height: 1.1;3083  color: var(--peach-t0);3084}30853086.peach-restore-picker-back {3087  background: none;3088  border: none;3089  cursor: pointer;3090  padding: 2px 0;3091  font-family: var(--font-mono);3092  font-size: 0.625rem;3093  letter-spacing: 0.06em;3094  color: var(--peach-t2);3095  transition: color 150ms ease;3096}3097.peach-restore-picker-back:hover {3098  color: var(--peach-t0);3099}31003101/* Shared inner form layout */3102.peach-restore-form {3103  display: flex;3104  flex-direction: column;3105  gap: 8px;3106}31073108/* Drag-and-drop import — the one file path that survives the action popup3109   (the popup dismisses itself when the OS file picker steals focus). */3110.peach-restore-form.is-dragover {3111  outline: 2px dashed color-mix(in srgb, var(--peach-accent) 55%, transparent);3112  outline-offset: 6px;3113  border-radius: 8px;3114}31153116.peach-restore-drop-hint {3117  margin: -2px 0 0;3118  text-align: center;3119  font-family: var(--font-mono);3120  font-size: 0.5625rem;3121  letter-spacing: 0.06em;3122  color: var(--peach-t2);3123}31243125.peach-restore-submit {3126  width: 100%;3127}31283129.peach-restore-file-btn {3130  display: inline-flex;3131  align-items: center;3132  justify-content: center;3133  width: 100%;3134}31353136/* ── PeachScript source ───────────────────────────────────────────────── */31373138/* Rune textarea styled as an underline input to match the card's other3139   fields. */3140.peach-restore-script {3141  width: 100%;3142  box-sizing: border-box;3143  min-height: 56px;3144  max-height: 72px;3145  padding: 6px 0;3146  resize: none;3147  overflow: hidden;3148  scrollbar-width: none;3149  -ms-overflow-style: none;3150  border: 0;3151  border-bottom: 1px solid var(--peach-t3);3152  border-radius: 0;3153  background: transparent;3154  color: var(--peach-t0);3155  outline: none;3156  caret-color: var(--peach-accent);3157  font-family: "PeachScript", monospace;3158  font-size: 13px;3159  line-height: 1.9;3160  letter-spacing: 0.1em;3161  word-break: break-all;3162}3163.peach-restore-script::-webkit-scrollbar { display: none; }3164.peach-restore-script::placeholder { color: var(--peach-t2); }3165.peach-restore-script:focus {3166  border-bottom-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3167}31683169.peach-restore-or {3170  display: flex;3171  align-items: center;3172  gap: 8px;3173  font-family: var(--font-mono);3174  font-size: 0.5625rem;3175  letter-spacing: 0.14em;3176  text-transform: uppercase;3177  color: var(--peach-t2);3178}3179.peach-restore-or::before,3180.peach-restore-or::after {3181  content: "";3182  flex: 1;3183  border-top: 1px solid var(--peach-t3);3184}31853186.peach-restore-anim-canvas {3187  width: 100%;3188  height: 180px;3189  border-radius: 10px;3190  overflow: hidden;3191  display: block;3192}31933194/* Animated rune preview shown once valid PeachScript is pasted — mirrors the3195   export screen's RuneCanvas. */3196.peach-restore-rune-preview {3197  overflow: hidden;3198  border: 1px solid color-mix(in srgb, var(--peach-t0) 22%, transparent);3199  border-radius: 8px;3200}32013202/* ── Codex source ─────────────────────────────────────────────────────── */32033204.peach-restore-codex-copy {3205  margin: 0;3206  font-size: 0.75rem;3207  line-height: 1.55;3208  color: var(--peach-t1);3209}32103211/* ── CSV source ───────────────────────────────────────────────────────── */32123213.peach-restore-csv-sources {3214  margin: 0;3215  text-align: center;3216}32173218/* ── Intro popup ──────────────────────────────────────────────────────── */32193220.peach-restore-intro-overlay {3221  position: absolute;3222  inset: 0;3223  z-index: 100;3224  display: flex;3225  align-items: center;3226  justify-content: center;3227  padding: 20px;3228  background: rgba(12, 10, 6, 0.7);3229  backdrop-filter: blur(4px);3230  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3231}32323233.peach-restore-intro-card {3234  width: 100%;3235  display: flex;3236  flex-direction: column;3237  gap: 12px;3238  padding: 22px 20px 20px;3239  border-radius: 16px;3240  border: 1px solid var(--peach-t3);3241  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3242  backdrop-filter: blur(4px);3243  -webkit-backdrop-filter: blur(4px);3244  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3245}32463247.peach-restore-intro-headline {3248  margin: 0;3249  font-family: var(--font-display);3250  font-style: italic;3251  font-size: 20px;3252  font-weight: 400;3253  color: var(--peach-t0);3254}32553256.peach-restore-intro-body {3257  display: flex;3258  flex-direction: column;3259  gap: 8px;3260}3261.peach-restore-intro-body p {3262  margin: 0;3263  font-size: 0.75rem;3264  color: var(--peach-t1);3265  line-height: 1.5;3266}32673268.peach-restore-intro-btn {3269  width: 100%;3270  margin-top: 4px;3271}32723273/* Snapshot restore panel */32743275.peach-empty-copy {3276  display: grid;3277  gap: 6px;3278  color: var(--peach-t1);3279  font-size: 0.8125rem;3280}32813282.peach-lock-submit {3283  width: 100%;3284  box-shadow:3285    0 1px 0 rgba(255,255,255,0.10) inset,3286    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),3287    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),3288    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);3289}32903291.peach-overlay-action {3292  font-size: 0.625rem;3293  padding: 4px 8px;3294  letter-spacing: 0.06em;3295  min-width: 44px;3296  text-align: center;3297}32983299.peach-inline-action {3300  flex-shrink: 0;3301  font-size: 0.5625rem;3302  letter-spacing: 0.1em;3303  text-transform: uppercase;3304  padding: 4px 7px;3305}3306.peach-password-toggle-btn {3307  display: inline-flex;3308  align-items: center;3309  justify-content: center;3310  min-width: 30px;3311  min-height: 26px;3312  padding: 0 7px;3313  border: 1px solid var(--peach-t3);3314  border-radius: 999px;3315  background: rgba(240, 232, 216, 0.04);3316  color: var(--peach-t2);3317  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;3318}3319.peach-password-toggle-btn:hover {3320  border-color: var(--peach-t2);3321  color: var(--peach-t0);3322  background: rgba(240, 232, 216, 0.06);3323}33243325.peach-new-textarea {3326  width: 100%;3327  min-height: 88px;3328  resize: vertical;3329  border: 0;3330  outline: none;3331  background: transparent;3332  color: var(--peach-t1);3333  font-family: "IBM Plex Mono", monospace;3334  font-size: 0.75rem;3335  line-height: 1.65;3336  caret-color: var(--peach-accent);3337}33383339.peach-new-textarea::placeholder {3340  color: var(--peach-t2);3341  opacity: 0.7;3342}33433344.peach-settings-actions {3345  display: grid;3346  gap: 8px;3347}33483349.peach-btn--danger {3350  background: var(--peach-breach);3351  color: #fff;3352  border-color: var(--peach-breach);3353}3354.peach-btn--danger:hover:not(:disabled) {3355  background: color-mix(in srgb, var(--peach-breach) 88%, #000);3356}3357.peach-btn--danger:disabled {3358  opacity: 0.55;3359  cursor: not-allowed;3360}33613362.peach-import-preview {3363  margin-bottom: 12px;3364  max-height: 152px;3365  overflow-y: auto;3366  border: 1px solid var(--peach-t3);3367  border-radius: 10px;3368  padding: 8px 10px;3369  display: grid;3370  gap: 8px;3371  background: rgba(240, 232, 216, 0.02);3372}33733374.peach-import-preview-row {3375  display: flex;3376  justify-content: space-between;3377  gap: 10px;3378  font-size: 0.6875rem;3379  color: var(--peach-t1);3380}33813382.peach-import-preview-title {3383  color: var(--peach-t0);3384  flex: 1;3385  min-width: 0;3386  overflow: hidden;3387  text-overflow: ellipsis;3388  white-space: nowrap;3389}33903391.peach-import-preview-meta {3392  color: var(--peach-t2);3393  flex-shrink: 0;3394  max-width: 42%;3395  overflow: hidden;3396  text-overflow: ellipsis;3397  white-space: nowrap;3398}33993400.peach-import-preview-more {3401  color: var(--peach-t2);3402  font-size: 0.625rem;3403}34043405.peach-restore-warning {3406  padding: 10px 12px;3407  border-radius: 12px;3408  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);3409  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);3410  color: var(--peach-t0);3411  font-size: 0.6875rem;3412  line-height: 1.55;3413}34143415.peach-provider-chips {3416  display: flex;3417  flex-wrap: wrap;3418  gap: 6px;3419}34203421.peach-provider-chip {3422  display: inline-flex;3423  align-items: center;3424  padding: 5px 8px;3425  border-radius: 999px;3426  border: 1px solid var(--peach-t3);3427  background: rgba(240, 232, 216, 0.02);3428  color: var(--peach-t1);3429  font-family: "IBM Plex Mono", monospace;3430  font-size: 0.5rem;3431  letter-spacing: 0.08em;3432  text-transform: uppercase;3433}34343435.peach-restore-file,3436.peach-restore-input {3437  width: 100%;3438  border-radius: 10px;3439  border: 1px solid var(--peach-t3);3440  background: var(--peach-s2);3441  color: var(--peach-t0);3442  font-size: 0.75rem;3443}34443445.peach-restore-file {3446  padding: 9px 10px;3447}34483449.peach-restore-file::file-selector-button {3450  margin-right: 10px;3451  padding: 7px 10px;3452  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);3453  border-radius: 999px;3454  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3455  color: var(--peach-t0);3456  font-size: 0.625rem;3457  letter-spacing: 0.08em;3458  text-transform: uppercase;3459  cursor: pointer;3460}34613462.peach-restore-input {3463  padding: 10px 12px;3464}34653466.peach-import-summary {3467  color: var(--peach-t1);3468  font-size: 0.75rem;3469  line-height: 1.6;3470  margin-bottom: 12px;3471}34723473.peach-restore-error {3474  color: rgba(220, 80, 60, 0.95);3475  font-size: 0.75rem;3476  line-height: 1.55;3477}34783479.peach-passkey-card {3480  max-width: 400px;3481  margin: auto 16px;3482  align-self: center;3483  width: calc(100% - 32px);3484}34853486/* Center the approval card vertically inside the overlay-view (which sets3487 * flex-direction: column without justify-content). Without this, the card3488 * sits at the top with a tall empty band below — looks unfinished on the3489 * 320px popup. */3490.peach-overlay-view:has(.peach-passkey-card) {3491  justify-content: center;3492}34933494.peach-pro-badge {3495  padding: 2px 6px;3496  border-radius: 999px;3497  font-family: var(--font-ui);3498  font-size: 0.625rem;3499  letter-spacing: 0.08em;3500  text-transform: uppercase;3501  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);3502  color: var(--peach-accent);3503}35043505/* ── Shortcuts rebind table ─────────────────────────────────── */3506.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }3507.peach-shortcut-row {3508  display: flex;3509  align-items: center;3510  gap: 10px;3511  padding: 6px 0;3512}3513.peach-shortcut-row-label {3514  flex: 1;3515  font-size: 0.75rem;3516  color: var(--peach-t0);3517}3518.peach-shortcut-chip {3519  min-width: 64px;3520  padding: 4px 10px;3521  border-radius: 6px;3522  border: 1px solid var(--peach-t3);3523  background: var(--peach-input-bg, var(--surface-card));3524  color: var(--peach-t0);3525  font-family: var(--font-mono);3526  font-size: 0.6875rem;3527  letter-spacing: 0.04em;3528  cursor: pointer;3529  text-align: center;3530  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;3531}3532.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }3533.peach-shortcut-chip.is-custom {3534  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3535  color: var(--peach-accent);3536}3537.peach-shortcut-chip.is-capturing {3538  border-color: var(--peach-accent);3539  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);3540  color: var(--peach-accent);3541  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;3542}3543@keyframes peach-shortcut-capture-pulse {3544  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }3545  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }3546}3547.peach-shortcut-reset {3548  background: transparent;3549  border: none;3550  cursor: pointer;3551  color: var(--peach-t2);3552  padding: 4px 6px;3553  border-radius: 5px;3554  font-size: 0.875rem;3555  line-height: 1;3556  transition: color 120ms ease, background 120ms ease;3557}3558.peach-shortcut-reset:hover {3559  color: var(--peach-t0);3560  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);3561}3562.peach-shortcuts-conflict {3563  margin: 4px 0 0;3564  padding: 8px 10px;3565  border-radius: 7px;3566  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);3567  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);3568  font-family: var(--font-mono);3569  font-size: 0.6875rem;3570  color: var(--peach-t0);3571}35723573/* ── Help dialog overlay (? to open) ────────────────────────── */3574.peach-shortcuts-help-backdrop {3575  position: fixed;3576  inset: 0;3577  background: rgba(0, 0, 0, 0.55);3578  backdrop-filter: blur(2px);3579  display: flex;3580  align-items: center;3581  justify-content: center;3582  z-index: 1000;3583  animation: peach-help-fade-in 140ms ease forwards;3584}3585@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }3586.peach-shortcuts-help-card {3587  width: min(320px, 92vw);3588  max-height: 80vh;3589  overflow-y: auto;3590  border-radius: 14px;3591  border: 1px solid var(--peach-t3);3592  background: var(--peach-bg);3593  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);3594  padding: 16px 18px 18px;3595  display: flex;3596  flex-direction: column;3597  gap: 12px;3598}3599.peach-shortcuts-help-head {3600  display: flex; align-items: center; justify-content: space-between;3601}3602.peach-shortcuts-help-head h3 {3603  margin: 0;3604  font-family: var(--font-display);3605  font-style: italic;3606  font-weight: 400;3607  font-size: 22px;3608  color: var(--peach-t0);3609}3610.peach-shortcuts-help-close {3611  background: transparent;3612  border: none;3613  color: var(--peach-t2);3614  cursor: pointer;3615  font-size: 0.875rem;3616  padding: 4px 8px;3617  border-radius: 5px;3618}3619.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }3620.peach-shortcuts-help-body ul {3621  list-style: none; padding: 0; margin: 4px 0 12px;3622  display: grid; gap: 8px;3623}3624.peach-shortcuts-help-body li {3625  display: flex; align-items: center; justify-content: space-between; gap: 12px;3626  font-size: 0.75rem; color: var(--peach-t0);3627}3628.peach-shortcuts-help-body kbd {3629  font-family: var(--font-mono);3630  font-size: 0.6875rem;3631  padding: 3px 8px;3632  border-radius: 6px;3633  background: var(--surface-card);3634  border: 1px solid var(--peach-t3);3635  color: var(--peach-accent);3636  letter-spacing: 0.04em;3637}36383639/* ── Pro promo on Account screen ────────────────────────────── */36403641.peach-loading {3642  position: absolute;3643  inset: 0;3644  display: flex;3645  align-items: center;3646  justify-content: center;3647  background: var(--bg);3648  animation: peach-loading-pulse 1.2s ease-in-out infinite;3649}36503651@keyframes peach-loading-pulse {3652  0%, 100% { opacity: 0.6; }3653  50% { opacity: 1; }3654}36553656/* ── Health Dashboard ─────────────────────────────────────────────────── */3657.peach-health-body {3658  flex: 1;3659  overflow-y: auto;3660  display: flex;3661  flex-direction: column;3662  /* Hide the platform scrollbar — every other scrollable surface in the3663   * popup hides it; the Health view was the one outlier and it ruined the3664   * polish. Behavior unchanged, just no rail rendered. */3665  scrollbar-width: none;3666  -ms-overflow-style: none;3667}3668.peach-health-body::-webkit-scrollbar { display: none; }36693670/* Loading screen for the Vault Health view. The advanced report computation3671 * can run for a few seconds on a large vault — without a clear loading3672 * screen the surface looked broken (the entry view bleeds through the3673 * empty body). Centered glyph + title + copy + indeterminate progress bar. */3674.peach-health-loading-screen {3675  flex: 1;3676  display: flex;3677  flex-direction: column;3678  align-items: center;3679  justify-content: center;3680  gap: 14px;3681  padding: 32px 28px;3682  text-align: center;3683}36843685.peach-health-loading-glyph {3686  width: 48px;3687  height: 48px;3688  display: flex;3689  align-items: center;3690  justify-content: center;3691  border-radius: 14px;3692  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3693  color: var(--peach-accent);3694}36953696.peach-health-loading-title {3697  margin: 0;3698  font-family: var(--font-display);3699  font-style: italic;3700  font-weight: 300;3701  font-size: 19px;3702  line-height: 1.2;3703  color: var(--peach-t0);3704}37053706.peach-health-loading-copy {3707  margin: 0;3708  max-width: 240px;3709  font-size: 0.75rem;3710  line-height: 1.55;3711  color: var(--peach-t2);3712}37133714.peach-health-loading-track {3715  width: 200px;3716  height: 3px;3717  margin-top: 6px;3718  border-radius: 999px;3719  background: rgba(240, 232, 216, 0.06);3720  overflow: hidden;3721}37223723.peach-health-loading-fill {3724  width: 40%;3725  height: 100%;3726  border-radius: inherit;3727  background: linear-gradient(3728    90deg,3729    transparent 0%,3730    var(--peach-accent) 50%,3731    transparent 100%3732  );3733  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;3734}37353736@keyframes peach-health-loading-sweep {3737  0%   { transform: translateX(-100%); }3738  100% { transform: translateX(350%); }3739}37403741[data-motion="reduce"] .peach-health-loading-fill,3742[data-motion="reduce"] .peach-health-loading-glyph svg path {3743  animation: none;3744}37453746.peach-health-summary {3747  padding: 10px 16px 6px;3748  font-family: "IBM Plex Mono", monospace;3749  font-size: 0.6875rem;3750}3751.peach-health-summary-warn { color: rgba(220,80,60,0.9); }3752.peach-health-summary-ok { color: var(--peach-t2); }37533754.peach-health-check-row {3755  padding: 0 16px 10px;3756}3757.peach-health-check-btn {3758  width: 100%;3759  display: flex;3760  align-items: center;3761  justify-content: center;3762}37633764.peach-health-sections {3765  flex: 1;3766  display: flex;3767  flex-direction: column;3768}37693770.peach-health-section {3771  border-bottom: 1px solid var(--peach-t3);3772}37733774.peach-health-section-header {3775  width: 100%;3776  display: flex;3777  align-items: center;3778  justify-content: space-between;3779  padding: 9px 16px;3780  background: transparent;3781  cursor: pointer;3782  color: var(--peach-t0);3783}37843785.peach-health-section-title-row {3786  display: flex;3787  align-items: center;3788  gap: 8px;3789}37903791.peach-health-count-badge {3792  display: inline-flex;3793  align-items: center;3794  justify-content: center;3795  min-width: 20px;3796  height: 18px;3797  padding: 0 5px;3798  border-radius: 999px;3799  background: rgba(220,80,60,0.15);3800  border: 1px solid rgba(220,80,60,0.25);3801  font-family: "IBM Plex Mono", monospace;3802  font-size: 0.5625rem;3803  color: rgba(220,80,60,0.9);3804}38053806.peach-health-section-title {3807  font-family: "IBM Plex Mono", monospace;3808  font-size: 0.6875rem;3809  text-transform: uppercase;3810  letter-spacing: 0.1em;3811  color: var(--peach-t1);3812}38133814.peach-health-chevron {3815  color: var(--peach-t2);3816  transition: transform 200ms ease;3817  flex-shrink: 0;3818}3819.peach-health-chevron.is-expanded {3820  transform: rotate(180deg);3821}38223823.peach-health-section-body {3824  padding: 0 16px 10px;3825  display: flex;3826  flex-direction: column;3827  gap: 4px;3828}38293830.peach-health-row {3831  display: flex;3832  align-items: flex-start;3833  justify-content: space-between;3834  gap: 8px;3835  padding: 6px 8px;3836  border-radius: 8px;3837  background: rgba(240,232,216,0.02);3838}38393840.peach-health-row-info {3841  flex: 1;3842  min-width: 0;3843  display: flex;3844  flex-direction: column;3845  gap: 2px;3846}38473848.peach-health-row-name {3849  font-family: var(--font-display);3850  font-size: 0.9375rem;3851  font-style: italic;3852  font-weight: 400;3853  color: var(--peach-t0);3854  white-space: nowrap;3855  overflow: hidden;3856  text-overflow: ellipsis;3857}38583859.peach-health-row-meta {3860  font-family: "IBM Plex Mono", monospace;3861  font-size: 0.5625rem;3862  color: var(--peach-t2);3863  letter-spacing: 0.05em;3864}38653866.peach-health-fix-btn {3867  font-size: 0.5625rem;3868  letter-spacing: 0.08em;3869  text-transform: uppercase;3870  padding: 4px 7px;3871  flex-shrink: 0;3872  display: flex;3873  align-items: center;3874}38753876.peach-health-empty {3877  font-family: "IBM Plex Mono", monospace;3878  font-size: 0.625rem;3879  color: var(--peach-t2);3880  padding: 6px 0;3881}38823883.peach-health-loading {3884  font-family: "IBM Plex Mono", monospace;3885  font-size: 0.625rem;3886  color: var(--peach-t2);3887  padding: 6px 0;3888  display: flex;3889  align-items: center;3890  gap: 6px;3891}38923893.peach-health-loading::before {3894  content: "";3895  width: 10px;3896  height: 10px;3897  border: 1.5px solid var(--peach-t3);3898  border-top-color: var(--peach-accent);3899  border-radius: 50%;3900  animation: peach-spin 600ms linear infinite;3901}39023903@keyframes peach-spin {3904  to { transform: rotate(360deg); }3905}39063907/* Pairing commits the vault key before the first entry sync. Keep that3908   implementation detail off-screen until the paired source records a real,3909   durable sync completion. */3910.peach-initial-sync {3911  position: relative;3912  display: flex;3913  align-items: center;3914  justify-content: center;3915  overflow: hidden;3916}39173918.peach-initial-sync-card {3919  position: relative;3920  z-index: 1;3921  width: min(100%, 320px);3922  display: flex;3923  flex-direction: column;3924  align-items: center;3925  gap: 10px;3926  padding: 36px 26px;3927  text-align: center;3928}39293930.peach-initial-sync-mark {3931  width: 54px;3932  height: 54px;3933  display: flex;3934  align-items: center;3935  justify-content: center;3936  border-radius: 18px;3937  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);3938  margin-bottom: 4px;3939}39403941.peach-initial-sync-mark svg {3942  width: 34px;3943  height: 34px;3944}39453946.peach-initial-sync-card h1 {3947  margin: 0;3948  color: var(--peach-t0);3949  font-family: var(--font-display);3950  font-size: 1.55rem;3951  font-style: italic;3952  font-weight: 400;3953}39543955.peach-initial-sync-card > p {3956  margin: 0;3957}39583959.peach-initial-sync-card #initial-sync-copy {3960  color: var(--peach-t1);3961  font-size: 0.78rem;3962  line-height: 1.55;3963}39643965.peach-initial-sync-progress {3966  width: 100%;3967  height: 3px;3968  overflow: hidden;3969  border-radius: 999px;3970  background: color-mix(in srgb, var(--peach-t0) 8%, transparent);3971  margin: 8px 0 2px;3972}39733974.peach-initial-sync-progress span {3975  display: block;3976  width: 42%;3977  height: 100%;3978  border-radius: inherit;3979  background: var(--peach-accent);3980  animation: peach-initial-sync-progress 1.4s cubic-bezier(0.2, 0, 0, 1) infinite;3981}39823983@keyframes peach-initial-sync-progress {3984  from { transform: translateX(-115%); }3985  to { transform: translateX(340%); }3986}39873988.peach-initial-sync-note {3989  color: var(--peach-t2);3990  font-size: 0.625rem;3991  line-height: 1.45;3992}39933994.peach-initial-sync-slow {3995  width: 100%;3996  display: flex;3997  flex-direction: column;3998  gap: 10px;3999  padding-top: 10px;4000  border-top: 1px solid var(--peach-border);4001}40024003.peach-initial-sync-slow p {4004  margin: 0;4005  color: var(--peach-t2);4006  font-size: 0.6875rem;4007  line-height: 1.45;4008}40094010.peach-initial-sync-slow .peach-btn {4011  width: 100%;4012}40134014@media (prefers-reduced-motion: reduce) {4015  .peach-initial-sync-progress span {4016    width: 100%;4017    opacity: 0.7;4018    animation: none;4019  }4020}40214022/* Tag chips */4023.peach-tag-chip {4024  display: inline-flex;4025  align-items: center;4026  gap: 4px;4027  padding: 3px 8px;4028  border-radius: 999px;4029  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4030  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4031  color: var(--peach-t0);4032  font-family: "IBM Plex Mono", monospace;4033  font-size: 0.625rem;4034  letter-spacing: 0.04em;4035}40364037.peach-tag-chip-remove {4038  background: transparent;4039  border: none;4040  color: inherit;4041  opacity: 0.6;4042  cursor: pointer;4043  padding: 0;4044  font-size: 0.75rem;4045  line-height: 1;4046}40474048.peach-tag-chip-remove:hover {4049  opacity: 1;4050}40514052/* Tag input */4053.peach-tag-input-wrap {4054  border-bottom: 1px solid var(--peach-t3);4055}40564057.peach-tag-suggestions {4058  display: flex;4059  flex-wrap: wrap;4060  gap: 4px;4061  padding: 6px 0;4062}40634064.peach-tag-suggestion {4065  padding: 2px 8px;4066  border-radius: 999px;4067  border: 1px solid var(--peach-t3);4068  background: var(--peach-s2);4069  color: var(--peach-t1);4070  font-family: "IBM Plex Mono", monospace;4071  font-size: 0.625rem;4072  cursor: pointer;4073  transition: border-color 80ms ease, background 80ms ease;4074}40754076.peach-tag-suggestion:hover {4077  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4078  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4079}40804081/* Identity suggestions — shown below username/email inputs in new-entry form */4082@keyframes peach-suggest-in {4083  from { opacity: 0; transform: translateY(-4px); }4084  to   { opacity: 1; transform: none; }4085}40864087.peach-identity-suggestions {4088  display: flex;4089  flex-direction: column;4090  gap: 1px;4091  margin-top: 4px;4092  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;4093}40944095.peach-identity-filter-row {4096  display: flex;4097  align-items: center;4098  gap: 4px;4099  padding: 2px 0 5px;4100}41014102.peach-identity-collapse-btn {4103  margin-left: auto;4104  background: transparent;4105  border: none;4106  cursor: pointer;4107  color: var(--peach-t3);4108  padding: 2px 4px;4109  display: flex;4110  align-items: center;4111  line-height: 0;4112  border-radius: 3px;4113  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);4114}41154116.peach-identity-collapse-btn:hover {4117  color: var(--peach-t1);4118}41194120.peach-identity-collapse-btn.is-collapsed {4121  transform: rotate(-90deg);4122}41234124.peach-identity-rows {4125  display: grid;4126  grid-template-rows: 1fr;4127  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);4128}41294130.peach-identity-rows.is-collapsed {4131  grid-template-rows: 0fr;4132}41334134.peach-identity-rows-inner {4135  overflow-y: auto;4136  min-height: 0;4137  max-height: 148px;4138  scrollbar-width: thin;4139  scrollbar-color: var(--peach-t3) transparent;4140  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);4141  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);4142}41434144.peach-identity-rows-inner::-webkit-scrollbar {4145  width: 4px;4146}41474148.peach-identity-rows-inner::-webkit-scrollbar-track {4149  background: transparent;4150}41514152.peach-identity-rows-inner::-webkit-scrollbar-thumb {4153  background: var(--peach-t3);4154  border-radius: 2px;4155}41564157.peach-identity-suggestion {4158  display: flex;4159  align-items: center;4160  gap: 6px;4161  width: 100%;4162  padding: 4px 6px;4163  border-radius: 5px;4164  border: none;4165  background: transparent;4166  cursor: pointer;4167  text-align: left;4168  transition: background 80ms ease;4169}41704171.peach-identity-suggestion:hover,4172.peach-identity-suggestion:focus {4173  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4174  outline: none;4175}41764177.peach-identity-suggestion-value {4178  font-family: "IBM Plex Mono", monospace;4179  font-size: 0.7rem;4180  color: var(--peach-t1);4181  overflow: hidden;4182  text-overflow: ellipsis;4183  white-space: nowrap;4184  flex: 1;4185  min-width: 0;4186}41874188.peach-identity-suggestion-meta {4189  font-family: "IBM Plex Mono", monospace;4190  font-size: 0.6rem;4191  color: var(--peach-t3);4192  flex-shrink: 0;4193}41944195/* Tag filter strip */4196.peach-tag-filter-strip {4197  border-bottom: 1px solid var(--peach-t3);4198  flex-shrink: 0;4199}42004201.peach-tag-filter-chip {4202  display: inline-flex;4203  align-items: center;4204  padding: 4px 10px;4205  border-radius: 999px;4206  border: 1px solid var(--peach-t3);4207  background: transparent;4208  color: var(--peach-t2);4209  font-family: "IBM Plex Mono", monospace;4210  font-size: 0.5625rem;4211  letter-spacing: 0.06em;4212  text-transform: uppercase;4213  cursor: pointer;4214  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;4215  white-space: nowrap;4216}42174218.peach-tag-filter-chip:hover {4219  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4220  color: var(--peach-t1);4221}42224223.peach-tag-filter-chip.is-selected {4224  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);4225  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);4226  color: var(--peach-t0);4227}42284229/* ─────────────────────────────────────────────────────────────────────────4230   v1.4.12 additions4231   ─────────────────────────────────────────────────────────────────────── */42324233/* Sort bar */4234.peach-sort-bar {4235  display: flex;4236  align-items: center;4237  gap: 4px;4238  padding: 5px 12px;4239  border-bottom: 1px solid var(--peach-t3);4240  flex-shrink: 0;4241  overflow-x: auto;4242  scrollbar-width: none;4243}42444245.peach-sort-btn {4246  padding: 2px 9px;4247  border-radius: 999px;4248  border: 1px solid transparent;4249  background: transparent;4250  color: var(--peach-t2);4251  font-family: "IBM Plex Mono", monospace;4252  font-size: 0.5625rem;4253  letter-spacing: 0.07em;4254  text-transform: uppercase;4255  cursor: pointer;4256  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;4257  white-space: nowrap;4258}42594260.peach-sort-btn:hover {4261  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);4262  color: var(--peach-t1);4263}42644265.peach-sort-btn.is-active {4266  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);4267  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);4268  color: var(--peach-t0);4269}42704271/* Tab-match badge on entry rows */4272.peach-tab-match-badge {4273  display: inline-block;4274  width: 6px;4275  height: 6px;4276  border-radius: 50%;4277  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);4278  margin-left: 5px;4279  vertical-align: middle;4280  flex-shrink: 0;4281  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);4282}42834284.peach-entry-row.is-tab-match {4285  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);4286  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);4287}42884289.peach-entry-row.is-tab-match:hover {4290  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4291}42924293/* Entry list stagger entrance */4294@keyframes peach-entry-fadein {4295  from { opacity: 0; transform: translateY(4px); }4296  to   { opacity: 1; transform: translateY(0); }4297}42984299.peach-vault-list .peach-entry-row {4300  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;4301}43024303/* Button press micro-interaction */4304.peach-btn:active {4305  transform: scale(0.95);4306  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);4307}43084309.peach-sort-btn:active,4310.peach-tag-filter-chip:active {4311  transform: scale(0.93);4312  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);4313}43144315/* Password strength bar (Lock view + shared) */4316.peach-password-strength {4317  display: flex;4318  align-items: center;4319  gap: 8px;4320  margin-top: 6px;4321}43224323.peach-strength-bar {4324  flex: 1;4325  height: 3px;4326  border-radius: 2px;4327  background: var(--peach-t3);4328  overflow: hidden;4329}43304331.peach-strength-fill {4332  height: 100%;4333  border-radius: 2px;4334  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),4335              background 300ms ease;4336}43374338.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }4339.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }4340.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }4341.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }43424343.peach-strength-label {4344  font-family: "IBM Plex Mono", monospace;4345  font-style: italic;4346  font-size: 0.5625rem;4347  font-weight: 300;4348  letter-spacing: 0.06em;4349  color: var(--peach-t2);4350  min-width: 36px;4351  text-align: right;4352}43534354.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }4355.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }4356.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }4357.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }43584359/* Duress form */43604361.peach-duress-form {4362  padding: 8px 0 4px;4363  display: flex;4364  flex-direction: column;4365  gap: 6px;4366}43674368.peach-duress-form .peach-label {4369  margin-top: 4px;4370}43714372.peach-duress-actions {4373  display: flex;4374  gap: 6px;4375  align-items: center;4376  margin-top: 4px;4377}43784379.peach-duress-actions .peach-btn:first-child {4380  margin-right: auto;4381}43824383/* Improved overlay spring entrance */4384.peach-overlay-view.ov-enter-up {4385  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;4386}43874388@keyframes ov-enter-up-spring {4389  from { opacity: 0; transform: translateY(16px) scale(0.98); }4390  to   { opacity: 1; transform: translateY(0) scale(1); }4391}43924393.peach-overlay-view.ov-enter-right {4394  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;4395}43964397@keyframes ov-enter-right-spring {4398  from { opacity: 0; transform: translateX(18px) scale(0.98); }4399  to   { opacity: 1; transform: translateX(0) scale(1); }4400}44014402/* ── Onboarding-mode restore screens (file import) ── */4403/* Used when MainImportView renders during onboarding (no vault yet).4404   Animates like a lock-screen transition. */4405.peach-lock-view {4406  position: absolute;4407  inset: 0;4408  display: flex;4409  flex-direction: column;4410  background:4411    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),4412    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),4413    var(--peach-bg);4414  z-index: 2;4415  overflow: hidden;4416  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4417}44184419.peach-lock-view-header {4420  display: flex;4421  align-items: center;4422  justify-content: space-between;4423  padding: 16px 18px 12px;4424  flex-shrink: 0;4425}44264427/* ───────── Settings: auto-lock select ───────── */4428.peach-settings-select {4429  font-family: "IBM Plex Mono", monospace;4430  font-size: 0.6875rem;4431  background: transparent;4432  border: 1px solid var(--peach-t3);4433  border-radius: 4px;4434  color: var(--peach-t1);4435  padding: 3px 6px;4436  cursor: pointer;4437  outline: none;4438}4439.peach-settings-select:focus {4440  border-color: var(--peach-accent);4441}44424443/* ───────── Duress status pill (new polished) ───────── */4444.peach-duress-status-pill {4445  font-family: "IBM Plex Mono", monospace;4446  font-size: 0.5625rem;4447  text-transform: uppercase;4448  letter-spacing: 0.12em;4449  padding: 2px 8px;4450  border-radius: 12px;4451  background: var(--peach-t3);4452  color: var(--peach-t2);4453  flex-shrink: 0;4454}4455.peach-duress-status-pill.is-active {4456  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);4457  color: var(--peach-accent);4458}44594460/* ───────── Entry advanced disclosure (canary) ───────── */44614462.peach-canary-section {4463  margin-top: 10px;4464  display: grid;4465  gap: 6px;4466}44674468/* ───────── Import: merge/replace radio choices ───────── */4469.peach-import-choice {4470  display: flex;4471  align-items: flex-start;4472  gap: 10px;4473  padding: 8px 10px;4474  border: 1px solid var(--peach-t3);4475  border-radius: 10px;4476  cursor: pointer;4477  margin-bottom: 6px;4478  transition: border-color 120ms ease, background 120ms ease;4479}4480.peach-import-choice:hover {4481  border-color: var(--peach-accent);4482}4483.peach-import-choice input[type="radio"] {4484  margin-top: 3px;4485  accent-color: var(--peach-accent);4486  flex-shrink: 0;4487}4488.peach-import-choice-main {4489  display: flex;4490  flex-direction: column;4491  gap: 2px;4492  min-width: 0;4493}4494.peach-import-choice-label {4495  font-size: 0.75rem;4496  color: var(--peach-t0);4497}4498.peach-import-choice-sub {4499  font-size: 0.6875rem;4500  color: var(--peach-t2);4501  line-height: 1.5;4502}45034504/* ───────── Export: success confirmation strip ───────── */4505.peach-export-success {4506  display: flex;4507  align-items: flex-start;4508  gap: 10px;4509  padding: 12px;4510  border-radius: 12px;4511  border: 1px solid rgba(150, 175, 110, 0.3);4512  background: rgba(150, 175, 110, 0.08);4513  color: var(--peach-t0);4514  font-size: 0.75rem;4515  line-height: 1.55;4516}4517.peach-export-success-check {4518  color: rgba(150, 175, 110, 0.9);4519  font-size: 0.875rem;4520  flex-shrink: 0;4521}45224523/* ── Trash view ──────────────────────────────────────────────────────── */4524.peach-trash-entry-row {4525  display: flex;4526  align-items: center;4527  justify-content: space-between;4528  gap: 8px;4529  padding: 8px 0;4530  border-bottom: 1px solid var(--peach-border);4531}4532.peach-trash-entry-info {4533  flex: 1;4534  min-width: 0;4535  display: flex;4536  flex-direction: column;4537  gap: 2px;4538}4539.peach-trash-entry-title {4540  font-size: 0.8125rem;4541  color: var(--peach-t0);4542  overflow: hidden;4543  text-overflow: ellipsis;4544  white-space: nowrap;4545}4546.peach-trash-entry-meta {4547  font-family: var(--font-mono);4548  font-size: 0.5625rem;4549  color: var(--peach-t2);4550  letter-spacing: 0.04em;4551}4552.peach-trash-entry-actions {4553  display: flex;4554  align-items: center;4555  gap: 4px;4556  flex-shrink: 0;4557}4558.peach-trash-delete-btn {4559  background: transparent;4560  border: 0;4561  color: var(--peach-t3);4562  font-size: 1rem;4563  line-height: 1;4564  cursor: pointer;4565  padding: 2px 5px;4566  transition: color 0.15s;4567}4568.peach-trash-delete-btn:hover { color: var(--peach-breach); }4569.peach-trash-list {4570  overflow-y: auto;4571}4572.peach-trash-footer {4573  display: flex;4574  align-items: center;4575  gap: 8px;4576  padding: 8px 0 0;4577  border-top: 1px solid var(--peach-border);4578  margin-top: 4px;4579}4580.peach-trash-purge-all {4581  background: transparent;4582  border: 0;4583  color: var(--peach-t3);4584  font-size: 0.625rem;4585  cursor: pointer;4586  padding: 4px 0;4587  letter-spacing: 0.03em;4588  transition: color 0.2s;4589}4590.peach-trash-purge-all:hover { color: var(--peach-breach); }4591.peach-trash-purge-confirm-label {4592  font-size: 0.625rem;4593  color: var(--peach-t1);4594  flex: 1;4595}45964597/* ── Sort bar trash button ───────────────────────────────────────────── */4598.peach-sort-trash-btn {4599  display: flex;4600  align-items: center;4601  justify-content: center;4602  padding: 3px 5px;4603  background: transparent;4604  border: none;4605  cursor: pointer;4606  color: var(--peach-t2);4607  border-radius: 4px;4608  transition: color 140ms ease, background 140ms ease;4609}4610.peach-sort-trash-btn:hover {4611  color: var(--peach-t1);4612  background: var(--peach-t3);4613}4614.peach-sort-trash-btn.is-active {4615  color: var(--peach-accent);4616}46174618/* Accent color picker */4619.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }4620.peach-accent-picker {4621  display: flex;4622  flex-wrap: wrap;4623  gap: 7px;4624  padding: 2px 0;4625}4626.peach-accent-swatch {4627  width: 22px;4628  height: 22px;4629  border-radius: 50%;4630  border: 2px solid transparent;4631  cursor: pointer;4632  padding: 0;4633  transition: transform 100ms;4634  outline-offset: 2px;4635}4636.peach-accent-swatch:hover { transform: scale(1.15); }4637.peach-accent-swatch.is-active {4638  border-color: var(--peach-t0);4639  transform: scale(1.1);4640}46414642.peach-pill-group {4643  display: flex;4644  gap: 6px;4645}4646.peach-pill-group .peach-btn.is-active {4647  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4648  border-color: var(--peach-accent);4649  color: var(--peach-t0);4650}46514652/* ── Card entry styles ───────────────────────────────────────── */4653.peach-card-number {4654  font-family: var(--peach-mono);4655  letter-spacing: 0.08em;4656}46574658.peach-card-network-badge {4659  font-size: 0.625rem;4660  padding: 1px 5px;4661  border-radius: 4px;4662  border: 0.5px solid var(--peach-border);4663  color: var(--peach-text-dim);4664  margin-left: 6px;4665  vertical-align: middle;4666}46674668.peach-card-expiry-row {4669  display: flex;4670  align-items: center;4671  gap: 8px;4672}46734674.peach-card-expiry-sep {4675  color: var(--peach-text-dim);4676}46774678/* ── Pro tier — upgrade screen ──────────────────────────────── */4679.peach-pro-mark {4680  font-size: 0.5625rem;4681  color: var(--peach-accent);4682  margin-left: 6px;4683  vertical-align: super;4684  opacity: 0.7;4685}46864687.peach-pro-mini-badge {4688  display: block;4689  font-size: 0.625rem;4690  font-style: italic;4691  color: var(--peach-accent);4692  letter-spacing: 0.04em;4693  margin-top: -2px;4694  padding-left: 2px;4695  opacity: 0.85;4696  text-align: center;4697}46984699.peach-wordmark-stack {4700  display: inline-flex;4701  flex-direction: column;4702  align-items: center;4703}47044705/* ── Pro tier — upgrade page ─────────────────────────────────── */4706/* ── Pro upgrade — redesigned editorial layout ─────────────────── */47074708.peach-pro-upgrade {4709  display: flex;4710  flex-direction: column;4711  align-items: stretch;4712  gap: 10px;4713  padding: 2px 2px 12px;4714}47154716.peach-pro-eyebrow {4717  margin: 0;4718  font-family: var(--font-ui);4719  font-size: 0.625rem;4720  font-weight: 500;4721  letter-spacing: 0.12em;4722  color: var(--peach-accent);4723}47244725.peach-pro-headline {4726  margin: 0;4727  font-family: var(--font-display, "Cormorant Garamond", serif);4728  font-size: 30px;4729  font-weight: 700;4730  font-style: normal;4731  line-height: 1.05;4732  color: var(--peach-t0);4733  letter-spacing: -0.01em;4734}4735.peach-pro-headline em {4736  font-style: italic;4737  font-weight: 400;4738  color: var(--peach-accent);4739}47404741.peach-pro-subtitle {4742  margin: 0;4743  font-size: 0.6875rem;4744  line-height: 1.5;4745  color: var(--peach-t1);4746}47474748/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */4749.peach-pro-section-label {4750  margin: 6px 0 0;4751  font-family: var(--font-ui);4752  font-size: 0.5625rem;4753  font-weight: 500;4754  letter-spacing: 0.12em;4755  text-transform: uppercase;4756  color: var(--peach-t2);4757}47584759/* 2-column numbered feature grid */4760.peach-pro-grid {4761  display: grid;4762  grid-template-columns: 1fr 1fr;4763  border-top: 1px solid var(--peach-border);4764  border-left: 1px solid var(--peach-border);4765}47664767.peach-pro-grid-item {4768  display: flex;4769  flex-direction: column;4770  gap: 2px;4771  padding: 8px 9px;4772  border-right: 1px solid var(--peach-border);4773  border-bottom: 1px solid var(--peach-border);4774}47754776.peach-pro-grid-item--wide {4777  grid-column: 1 / -1;4778}47794780.peach-pro-grid-num {4781  font-family: var(--font-mono);4782  font-size: 0.5625rem;4783  color: var(--peach-accent);4784  letter-spacing: 0.06em;4785  opacity: 0.85;4786}47874788.peach-pro-grid-name {4789  font-size: 0.8125rem;4790  font-weight: 500;4791  color: var(--peach-t0);4792  line-height: 1.2;4793}47944795.peach-pro-grid-desc {4796  font-size: 0.625rem;4797  color: var(--peach-t1);4798  line-height: 1.4;4799}48004801.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {4802  animation: peach-pulse-accent 600ms ease-out forwards;4803}48044805@keyframes peach-pulse-accent {4806  0%   { opacity: 1; transform: scale(1.2); }4807  100% { opacity: 0.85; transform: scale(1); }4808}48094810/* Actions */4811.peach-pro-upgrade-actions {4812  display: flex;4813  flex-direction: column;4814  align-items: stretch;4815  gap: 10px;4816}48174818.peach-pro-pricing {4819  margin: 0;4820  font-size: 1rem;4821  font-weight: 600;4822  color: var(--peach-t0);4823  letter-spacing: 0.01em;4824}4825.peach-pro-pricing-sub {4826  font-size: 0.75rem;4827  font-weight: 400;4828  color: var(--peach-t1);4829  letter-spacing: 0.02em;4830}48314832.peach-pro-upgrade-cta {4833  display: flex;4834  align-items: center;4835  justify-content: center;4836  text-decoration: none;4837  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);4838  border: 1px solid var(--peach-accent);4839  border-radius: 10px;4840  color: var(--peach-accent);4841  font-family: var(--font-ui);4842  font-size: 0.8125rem;4843  font-weight: 600;4844  letter-spacing: 0.06em;4845  padding: 11px 16px;4846  transition: background 0.15s ease, color 0.15s ease;4847}4848.peach-pro-upgrade-cta:hover {4849  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);4850}48514852/* Pairing's terminal entitlement fallback reuses the Peach Pro card's4853   editorial hierarchy without embedding the settings deck itself. */4854.peach-pair-pro-required {4855  width: 100%;4856  display: flex;4857  flex-direction: column;4858  align-items: stretch;4859  gap: 10px;4860  text-align: left;4861}4862.peach-pair-pro-required .peach-pro-headline {4863  font-size: 1.75rem;4864}4865.peach-pair-pro-required .peach-pro-subtitle {4866  font-size: 0.6875rem;4867}4868.peach-pair-pro-grid {4869  grid-template-columns: 1fr;4870}4871.peach-pair-pro-button {4872  width: 100%;4873  cursor: pointer;4874}4875.peach-desktop-error--pro {4876  width: min(100%, 320px);4877  overflow-y: auto;4878}48794880.peach-pro-key-divider {4881  display: flex;4882  align-items: center;4883  gap: 8px;4884  color: var(--peach-t2);4885  font-size: 0.5625rem;4886  letter-spacing: 0.1em;4887}4888.peach-pro-key-divider::before,4889.peach-pro-key-divider::after {4890  content: "";4891  flex: 1;4892  height: 1px;4893  background: var(--peach-border);4894}48954896/* Inline key entry row */4897.peach-pro-key-inline {4898  display: flex;4899  align-items: center;4900  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);4901  border: 1px solid var(--peach-border);4902  border-radius: 8px;4903  overflow: hidden;4904}4905.peach-pro-key-inline-input {4906  flex: 1;4907  background: transparent;4908  border: none;4909  outline: none;4910  color: var(--peach-t1);4911  font-family: var(--font-mono);4912  font-size: 0.625rem;4913  letter-spacing: 0.06em;4914  padding: 9px 10px;4915}4916.peach-pro-key-inline-input::placeholder {4917  color: var(--peach-t2);4918}4919.peach-pro-key-apply {4920  background: transparent;4921  border: none;4922  border-left: 1px solid var(--peach-border);4923  color: var(--peach-t2);4924  font-family: var(--font-ui);4925  font-size: 0.5625rem;4926  font-weight: 600;4927  letter-spacing: 0.08em;4928  padding: 9px 10px;4929  cursor: pointer;4930  transition: color 0.15s ease;4931  flex-shrink: 0;4932}4933.peach-pro-key-apply:not(:disabled):hover {4934  color: var(--peach-accent);4935}4936.peach-pro-key-apply:disabled {4937  opacity: 0.35;4938  cursor: not-allowed;4939}49404941/* ── Pro tier — key ceremony ─────────────────────────────────── */49424943.peach-pro-key-error {4944  margin: 0;4945  font-size: 0.75rem;4946  text-align: center;4947  color: var(--peach-breach, #e55);4948  padding: 0;4949}49504951/* ── Pro tier — active state ─────────────────────────────────── */4952.peach-pro-active {4953  display: flex;4954  flex-direction: column;4955  align-items: center;4956  gap: 0;4957  padding: 8px 4px 16px;4958  min-height: 280px;4959}49604961.peach-pro-active-hero {4962  display: flex;4963  flex-direction: column;4964  align-items: center;4965  gap: 6px;4966  padding: 20px 0 8px;4967}49684969.peach-pro-active-mark-wrap {4970  display: flex;4971  align-items: center;4972  justify-content: center;4973  margin-bottom: 4px;4974}49754976.peach-pro-active-mark {4977  width: 60px;4978  height: 60px;4979}49804981.peach-pro-active-title {4982  font-family: var(--font-display, var(--font-ui));4983  font-size: 26px;4984  margin: 0;4985  color: var(--peach-t0);4986  letter-spacing: 0.01em;4987}49884989.peach-pro-active-since {4990  margin: 0;4991  font-size: 0.6875rem;4992  color: var(--peach-t2);4993  font-style: italic;4994}49954996.peach-pro-active-features {4997  display: flex;4998  flex-direction: column;4999  gap: 8px;5000  width: 100%;5001  padding: 14px 8px 0;5002  border-top: 1px solid var(--peach-border);5003  flex: 1;5004}50055006.peach-pro-active-feature {5007  display: flex;5008  align-items: center;5009  gap: 9px;5010}50115012.peach-pro-active-feature-mark {5013  color: var(--peach-accent);5014  font-size: 0.625rem;5015  opacity: 0.65;5016  flex-shrink: 0;5017}50185019.peach-pro-active-feature-name {5020  font-size: 0.75rem;5021  color: var(--peach-t1);5022}50235024.peach-pro-deactivate {5025  align-self: center;5026  background: transparent;5027  border: 0;5028  color: var(--peach-t3);5029  font-size: 0.625rem;5030  cursor: pointer;5031  padding: 8px 0 0;5032  margin-top: 16px;5033  letter-spacing: 0.03em;5034  transition: color 0.2s;5035}50365037.peach-pro-deactivate:hover { color: var(--peach-t2); }50385039.peach-pro-deactivate:disabled {5040  opacity: 0.5;5041  cursor: default;5042}50435044/* ── Pro card activation sparkles & thank-you ── */5045button.peach-pro-active-mark-wrap {5046  background: transparent;5047  border: 0;5048  padding: 0;5049  cursor: pointer;5050  position: relative;5051  overflow: visible;5052}50535054.peach-pro-sparks {5055  position: absolute;5056  inset: 0;5057  pointer-events: none;5058  overflow: visible;5059}50605061.peach-pro-spark {5062  position: absolute;5063  top: 50%;5064  left: 50%;5065  font-size: 9px;5066  line-height: 1;5067  opacity: 0;5068  transform: translate(-50%, -50%);5069  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;5070}50715072@keyframes peach-pro-spark-fly {5073  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }5074  25%  { opacity: 1; }5075  100% {5076    opacity: 0;5077    transform: translate(5078      calc(-50% + var(--spark-x, 0px)),5079      calc(-50% + var(--spark-y, -40px))5080    ) scale(0.8);5081  }5082}50835084.peach-pro-thankyou-text {5085  margin: 4px 0 0;5086  font-size: 0.6875rem;5087  font-style: italic;5088  color: currentColor;5089  opacity: 0;5090  animation: peach-pro-thankyou-flash 2.5s ease both;5091}50925093@keyframes peach-pro-thankyou-flash {5094  0%   { opacity: 0; transform: translateY(4px); }5095  15%  { opacity: 0.75; transform: translateY(0); }5096  75%  { opacity: 0.75; }5097  100% { opacity: 0; }5098}50995100/* ── Pro advanced health remediation queue ──────────────────── */5101.peach-health-pro-queue {5102  display: flex;5103  flex-direction: column;5104  gap: 10px;5105  padding: 12px;5106  margin: 0 0 12px;5107  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5108  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);5109  border-radius: 10px;5110}51115112.peach-health-pro-queue-head {5113  display: flex;5114  justify-content: space-between;5115  align-items: baseline;5116}51175118.peach-health-pro-queue-title {5119  font-size: 0.75rem;5120  font-weight: 500;5121  letter-spacing: 0.04em;5122  text-transform: uppercase;5123  color: var(--peach-accent);5124}51255126.peach-health-pro-queue-score {5127  font-size: 0.6875rem;5128  color: var(--peach-t2);5129}51305131.peach-health-pro-row {5132  display: flex;5133  gap: 10px;5134  align-items: center;5135  padding: 8px 0;5136  border-top: 1px solid var(--peach-border);5137}51385139.peach-health-pro-row-info {5140  flex: 1;5141  display: flex;5142  flex-direction: column;5143  gap: 4px;5144  min-width: 0;5145}51465147.peach-health-pro-action {5148  flex: 0 0 auto;5149  padding: 4px 8px;5150  font-size: 0.5625rem;5151  letter-spacing: 0.08em;5152  text-transform: uppercase;5153}51545155.peach-health-pro-row-name {5156  font-size: 0.8125rem;5157  color: var(--peach-t0);5158  overflow: hidden;5159  text-overflow: ellipsis;5160  white-space: nowrap;5161}51625163.peach-health-pro-row-meta {5164  font-size: 0.6875rem;5165  color: var(--peach-t2);5166}51675168.peach-health-pro-bar {5169  height: 2px;5170  background: var(--peach-border);5171  border-radius: 2px;5172  overflow: hidden;5173  margin-top: 2px;5174}51755176.peach-health-pro-bar-fill {5177  height: 100%;5178  background: var(--peach-accent);5179  transition: width 200ms ease-out;5180}51815182/* ── Pro activation celebration ── */5183@keyframes peach-pro-bloom {5184  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }5185  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))5186                 drop-shadow(0 0 48px var(--peach-glow)); }5187  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }5188}51895190@keyframes peach-pro-wordmark-in {5191  from { opacity: 0; transform: translateY(4px); }5192  to   { opacity: 1; transform: translateY(0); }5193}51945195@keyframes peach-pro-fade-out {5196  from { opacity: 1; }5197  to   { opacity: 0; }5198}51995200.peach-pro-celebration {5201  background:5202    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5203    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5204    var(--peach-bg);5205  border: 1px solid var(--peach-t3);5206  box-shadow:5207    0 2px 8px rgba(0,0,0,0.55),5208    0 14px 48px rgba(0,0,0,0.7),5209    0 0 0 1px rgba(240,232,216,0.04);5210  overflow: hidden;5211  width: 320px;5212  height: 520px;5213  display: flex;5214  flex-direction: column;5215  align-items: center;5216  justify-content: center;5217  gap: 8px;5218  padding: 32px 24px;5219  text-align: center;5220}52215222.peach-pro-celebration.is-leaving {5223  animation: peach-pro-fade-out 400ms ease forwards;5224}52255226.peach-pro-bloom-target {5227  display: flex;5228  align-items: center;5229  justify-content: center;5230  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;5231  margin-bottom: 12px;5232}52335234.peach-pro-bloom-icon {5235  width: 48px;5236  height: 48px;5237}52385239.peach-pro-wordmark {5240  font-family: var(--font-display);5241  font-size: 22px;5242  font-style: italic;5243  font-weight: 400;5244  color: var(--peach-accent);5245  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;5246}52475248.peach-pro-thankyou {5249  font-size: 0.75rem;5250  font-style: italic;5251  color: var(--peach-t2);5252  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;5253}52545255/* ── Pending Pro notice banner (shown after background sync gate fires) ── */5256.peach-pro-notice-banner {5257  display: flex;5258  align-items: center;5259  gap: 8px;5260  padding: 7px 12px;5261  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));5262  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);5263  font-size: 0.6875rem;5264  color: var(--peach-t2);5265  font-family: "IBM Plex Mono", monospace;5266  flex-shrink: 0;5267}52685269.peach-pro-notice-link {5270  background: none;5271  border: none;5272  padding: 0;5273  cursor: pointer;5274  font-size: 0.6875rem;5275  color: var(--peach-accent);5276  font-family: "IBM Plex Mono", monospace;5277  margin-left: auto;5278  white-space: nowrap;5279}52805281.peach-pro-notice-close {5282  background: none;5283  border: none;5284  padding: 0 0 0 4px;5285  cursor: pointer;5286  font-size: 0.625rem;5287  color: var(--peach-t3);5288  line-height: 1;5289}52905291/* ─── First-run onboarding ──────────────────────────────────────────────5292   Three-card welcome shown once before vault creation. The PeachScript5293   rune background drifts behind everything at very low opacity — it's5294   atmosphere, not focus. The cards themselves use the same panel5295   language as the rest of the popup so the transition into NewVault is5296   continuous, not a jarring switch of visual register. */52975298.peach-onboarding {5299  position: relative;5300  display: flex;5301  flex-direction: column;5302  width: 100%;5303  height: 100%;5304  padding: 16px 16px 18px;5305  box-sizing: border-box;5306  overflow: hidden;5307  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;5308}53095310.peach-onboarding.is-completing {5311  animation: peach-onboard-exit 200ms ease-out forwards;5312}53135314.peach-rune-background {5315  position: absolute;5316  inset: 0;5317  width: 100%;5318  height: 100%;5319  pointer-events: none;5320  z-index: 0;5321  transition: opacity 500ms ease-out;5322}53235324.peach-onboarding.is-completing .peach-rune-background {5325  opacity: 0;5326}53275328.peach-onboarding-header {5329  position: relative;5330  z-index: 1;5331  display: flex;5332  align-items: center;5333  margin-bottom: 14px;5334}53355336.peach-onboarding-card {5337  position: relative;5338  z-index: 1;5339  flex: 1;5340  min-height: 0;5341  display: flex;5342  flex-direction: column;5343  gap: 10px;5344  padding: 22px 20px;5345  justify-content: center;5346  border-radius: 16px;5347  border: 1px solid var(--peach-t3);5348  background:5349    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));5350  backdrop-filter: blur(3px);5351  -webkit-backdrop-filter: blur(3px);5352  box-shadow:5353    inset 0 1px 0 rgba(240, 232, 216, 0.04),5354    0 12px 28px rgba(0, 0, 0, 0.12);5355  cursor: pointer;5356  user-select: none;5357  overflow-y: auto;5358  scrollbar-width: none;5359  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;5360}53615362.peach-onboarding-card::-webkit-scrollbar {5363  display: none;5364}53655366.peach-onboarding-card.is-exiting {5367  animation: peach-card-out 120ms ease-in forwards;5368  pointer-events: none;5369}53705371/* The final card carries the choice rows on top of the full intro copy.5372 * The "Already using Peach?" block is a separate decision section — float it5373 * toward the bottom so the copy breathes and no dead gap pools under it5374 * (scroll stays available as a fallback on shorter viewports). */5375.peach-onboarding-card--final {5376  gap: 8px;5377  padding-top: 20px;5378  padding-bottom: 16px;5379  justify-content: flex-start;5380}53815382.peach-onboarding-card--final .peach-onboarding-body {5383  font-size: 0.75rem;5384  line-height: 1.5;5385}53865387.peach-onboarding-card--final .peach-onboarding-choice {5388  min-height: 40px;5389  padding: 6px 10px;5390}53915392.peach-onboarding-card--final .peach-onboarding-choice-row {5393  gap: 6px;5394}53955396.peach-onboarding-card--final .peach-onboarding-choice-heading {5397  margin: auto 0 -2px;5398}53995400.peach-onboarding-card-headline {5401  margin: 0;5402  font-family: var(--font-display);5403  font-style: italic;5404  font-weight: 400;5405  font-size: 22px;5406  line-height: 1.05;5407  color: var(--peach-t0);5408  white-space: pre-line;5409}54105411.peach-onboarding-divider {5412  margin: 4px 0 6px;5413  border: 0;5414  border-top: 1px solid var(--peach-t3);5415  width: 100%;5416}54175418.peach-onboarding-body {5419  margin: 0;5420  font-size: 0.8125rem;5421  line-height: 1.6;5422  color: var(--peach-t1);5423}54245425.peach-onboarding-warning {5426  display: flex;5427  align-items: flex-start;5428  gap: 8px;5429  margin: 6px 0 0;5430  padding-top: 8px;5431  border-top: 1px dashed var(--peach-t3);5432  font-size: 0.8125rem;5433  line-height: 1.5;5434  color: var(--peach-t1);5435}54365437.peach-onboarding-warning-icon {5438  color: var(--peach-accent);5439  font-size: 0.8125rem;5440  line-height: 1.5;5441  flex: 0 0 auto;5442}54435444.peach-onboarding-nav {5445  position: relative;5446  z-index: 1;5447  display: grid;5448  grid-template-columns: 1fr auto 1fr;5449  align-items: center;5450  margin-top: 12px;5451  padding: 0 4px;5452}54535454.peach-onboarding-next {5455  justify-self: end;5456}54575458.peach-onboarding-back {5459  justify-self: start;5460}54615462.peach-onboarding-dots {5463  display: flex;5464  align-items: center;5465  gap: 6px;5466}54675468.peach-onboarding-dot {5469  width: 6px;5470  height: 6px;5471  border-radius: 50%;5472  background: var(--peach-t2);5473  transition: width 200ms ease, height 200ms ease, background 200ms ease;5474}54755476.peach-onboarding-dot.is-active {5477  width: 8px;5478  height: 8px;5479  background: var(--peach-accent);5480}54815482.peach-onboarding-next {5483  background: none;5484  border: none;5485  padding: 4px 0;5486  cursor: pointer;5487  font-family: "IBM Plex Mono", monospace;5488  font-size: 0.6875rem;5489  letter-spacing: 0.04em;5490  color: var(--peach-t1);5491  transition: color 150ms ease;5492}54935494.peach-onboarding-next:hover {5495  color: var(--peach-t0);5496}54975498.peach-onboarding-next:disabled {5499  opacity: 0.5;5500  cursor: default;5501}55025503.peach-onboarding-back {5504  background: none;5505  border: none;5506  padding: 4px 0;5507  cursor: pointer;5508  font-family: "IBM Plex Mono", monospace;5509  font-size: 0.6875rem;5510  letter-spacing: 0.04em;5511  color: var(--peach-t2);5512  transition: color 150ms ease;5513}55145515.peach-onboarding-back:hover {5516  color: var(--peach-t0);5517}55185519.peach-onboarding-back:disabled {5520  opacity: 0.5;5521  cursor: default;5522}55235524/* Reserve back-button width on the first card so the dots stay centred */5525.peach-onboarding-back-spacer {5526  width: 44px;5527}55285529.peach-onboarding-choice-row {5530  display: grid;5531  grid-template-columns: 1fr;5532  gap: 8px;5533}55345535.peach-onboarding-choice-heading {5536  margin: 8px 0 -2px;5537  color: var(--peach-t1);5538  font-family: "IBM Plex Mono", monospace;5539  font-size: 0.6875rem;5540  letter-spacing: 0.04em;5541  text-transform: uppercase;5542}55435544.peach-onboarding-choice {5545  min-height: 48px;5546  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);5547  border-radius: 8px;5548  padding: 8px 10px;5549  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);5550  color: var(--peach-t0);5551  font-size: 0.76rem;5552  font-weight: 700;5553  text-align: left;5554}55555556.peach-onboarding-choice-label {5557  display: flex;5558  align-items: center;5559  gap: 6px;5560}55615562.peach-onboarding-choice-detail {5563  display: block;5564}55655566.peach-onboarding-choice-detail {5567  margin-top: 2px;5568  color: var(--peach-t1);5569  font-size: 0.625rem;5570  font-weight: 400;5571  line-height: 1.35;5572}55735574.peach-onboarding-choice--adopt {5575  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);5576  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);5577}55785579.peach-adopt-vault {5580  position: relative;5581  min-height: 100%;5582  padding: 22px;5583  display: grid;5584  place-items: center;5585}55865587.peach-adopt-vault--pair {5588  padding: 10px;5589  overflow-y: auto;5590  scrollbar-width: none;5591}55925593.peach-adopt-vault--pair::-webkit-scrollbar {5594  display: none;5595}55965597.peach-adopt-card {5598  position: relative;5599  z-index: 1;5600  width: min(100%, 330px);5601  padding: 20px;5602  border-radius: 8px;5603  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);5604  background: color-mix(in srgb, var(--peach-surface) 90%, transparent);5605  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);5606}56075608.peach-adopt-card--pair {5609  width: 100%;5610  max-height: 500px;5611  margin: auto;5612  padding: 14px 16px 12px;5613  overflow-y: auto;5614  scrollbar-width: none;5615  border: 0;5616  border-radius: 16px;5617  background:5618    radial-gradient(5619      circle at 50% -10%,5620      color-mix(in srgb, var(--peach-accent) 14%, transparent),5621      transparent 38%5622    ),5623    color-mix(in srgb, var(--peach-surface) 94%, transparent);5624}56255626.peach-adopt-card--pair::-webkit-scrollbar {5627  display: none;5628}56295630.peach-adopt-card h1 {5631  margin: 0 0 10px;5632  font-family: var(--font-display);5633  font-style: italic;5634  font-weight: 400;5635  font-size: 1.42rem;5636  line-height: 1.15;5637}56385639.peach-adopt-card p {5640  margin: 0 0 14px;5641  color: var(--peach-t1);5642  line-height: 1.35;5643}56445645.peach-adopt-input {5646  margin-bottom: 12px;5647}56485649.peach-adopt-card textarea.peach-adopt-input {5650  width: 100%;5651  resize: vertical;5652  overflow-wrap: anywhere;5653  font-family: "IBM Plex Mono", monospace;5654  font-size: 0.64rem;5655}56565657.peach-adoption-source-invitation {5658  display: flex;5659  flex-direction: column;5660  align-items: center;5661  gap: 10px;5662  padding: 4px 18px 16px;5663  text-align: center;5664}56655666.peach-pair-qr {5667  display: block;5668  margin-inline: auto;5669  max-width: min(224px, 100%);5670  height: auto;5671  padding: 8px;5672  border-radius: 10px;5673  background: #fff;5674}56755676.peach-adopt-card > .peach-btn + .peach-btn {5677  margin-top: 8px;5678}56795680.peach-adopt-actions {5681  display: flex;5682  gap: 10px;5683  margin-top: 14px;5684}56855686.peach-adopt-actions > button {5687  flex: 1;5688}56895690.peach-adopt-pairing {5691  text-align: center;5692}56935694.peach-adopt-pairing h1 {5695  max-width: 260px;5696  margin: 0 auto 6px;5697  color: var(--peach-t0);5698  font-family: var(--font-display, Georgia, serif);5699  font-size: 1.42rem;5700  font-style: italic;5701  font-weight: 500;5702  line-height: 1.12;5703  text-wrap: balance;5704}57055706.peach-adopt-pairing .peach-adopt-pair-lede {5707  max-width: 258px;5708  margin: 0 auto;5709  color: color-mix(in srgb, var(--peach-t0) 82%, var(--peach-bg));5710  font-size: 0.73rem;5711  line-height: 1.42;5712  text-wrap: pretty;5713}57145715.peach-pair-stage.peach-adopt-bird-stage {5716  width: min(100%, 260px);5717  height: 102px;5718  margin: -6px auto 2px;5719}57205721.peach-adopt-bird-stage .peach-pair-bird-slot,5722.peach-adopt-bird-stage .peach-pair-bird {5723  width: 90px;5724  height: 90px;5725}57265727.peach-adopt-bird-stage .peach-pair-bird-slot-desktop {5728  left: 12px;5729}57305731.peach-adopt-bird-stage .peach-pair-bird-slot-mobile {5732  right: 12px;5733}57345735.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-desktop {5736  --bb-x: 12px;5737  transform: translateX(12px);5738}57395740.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-mobile {5741  --bb-x: -12px;5742  transform: translateX(-12px);5743}57445745.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot {5746  animation: peach-adopt-happy-bob 0.8s ease-in-out infinite;5747}57485749.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-mobile {5750  animation-delay: 0.18s;5751  animation-direction: reverse;5752}57535754.peach-adopt-pairing.is-complete .peach-pair-stage.peach-adopt-bird-stage {5755  width: 100%;5756  height: 135px;5757  margin: -8px auto 6px;5758}57595760.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot,5761.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird {5762  width: 112px;5763  height: 112px;5764}57655766.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot-desktop {5767  left: 0;5768  --bb-x: 0;5769  transform: translateX(0);5770}57715772.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot-mobile {5773  right: 0;5774  --bb-x: 0;5775  transform: translateX(0);5776}57775778.peach-adopt-pairing.is-complete h1 {5779  font-size: 1.6rem;5780}57815782.peach-adopt-pairing.is-complete .peach-adopt-pair-lede {5783  font-size: 0.78rem;5784}57855786@keyframes peach-adopt-happy-bob {5787  0%, 100% {5788    transform: translateX(var(--bb-x, 0)) translateY(0) rotate(0deg);5789  }5790  35% {5791    transform: translateX(var(--bb-x, 0)) translateY(-8px) rotate(-3deg);5792  }5793  70% {5794    transform: translateX(var(--bb-x, 0)) translateY(-3px) rotate(2deg);5795  }5796}57975798.peach-adopt-connection {5799  position: absolute;5800  left: 50%;5801  bottom: 38px;5802  width: 78px;5803  height: 1px;5804  translate: -50% 0;5805  background: color-mix(in srgb, var(--peach-accent) 62%, transparent);5806  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 56%, transparent);5807}58085809.peach-adopt-pairing.is-complete .peach-adopt-connection {5810  bottom: 49px;5811  width: 92px;5812}58135814.peach-adopt-connection::after {5815  content: "";5816  position: absolute;5817  left: 50%;5818  top: 50%;5819  width: 7px;5820  height: 7px;5821  border-radius: 50%;5822  translate: -50% -50%;5823  background: var(--peach-accent);5824  box-shadow:5825    0 0 0 4px color-mix(in srgb, var(--peach-accent) 17%, transparent),5826    0 0 14px color-mix(in srgb, var(--peach-accent) 74%, transparent);5827  animation: peach-adopt-connection-pulse 1.1s ease-in-out infinite;5828}58295830@keyframes peach-adopt-connection-pulse {5831  0%, 100% { scale: 0.8; opacity: 0.72; }5832  50% { scale: 1.14; opacity: 1; }5833}58345835.peach-adopt-qr-wrap {5836  min-height: 160px;5837  display: grid;5838  place-items: center;5839}58405841.peach-adopt-qr-wrap .peach-hint-error {5842  margin: 12px 0;5843}58445845.peach-adopt-pairing .peach-adopt-pair-status {5846  margin: 0;5847  color: var(--peach-t0);5848  font-size: 0.75rem;5849}58505851.peach-adopt-confirmation {5852  margin-top: 18px;5853  padding: 8px 0 4px;5854}58555856.peach-adopt-confirmation .peach-adopt-confirmation-label {5857  margin: 0 0 7px;5858  color: color-mix(in srgb, var(--peach-accent) 72%, var(--peach-t0));5859  font-family: var(--peach-mono, "IBM Plex Mono", monospace);5860  font-size: 0.625rem;5861  font-weight: 700;5862  letter-spacing: 0.14em;5863}58645865.peach-adopt-confirmation .peach-adoption-sas {5866  margin: 0 auto;5867  padding: 12px 14px;5868  border-color: color-mix(in srgb, var(--peach-accent) 36%, transparent);5869  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);5870}58715872.peach-adopt-confirmation .peach-adoption-sas strong {5873  color: color-mix(in srgb, var(--peach-accent) 84%, var(--peach-t0));5874  font-size: 1.58rem;5875  text-shadow: 0 0 16px color-mix(in srgb, var(--peach-accent) 30%, transparent);5876}58775878.peach-adopt-confirmation .peach-adopt-confirmation-help {5879  max-width: 270px;5880  margin: 8px auto 0;5881  color: color-mix(in srgb, var(--peach-t0) 78%, var(--peach-bg));5882  font-size: 0.7rem;5883  line-height: 1.45;5884}58855886.peach-adopt-privacy {5887  display: flex;5888  align-items: flex-start;5889  gap: 9px;5890  margin-top: 10px;5891  padding: 8px 9px;5892  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);5893  border-radius: 10px;5894  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);5895  text-align: left;5896}58975898.peach-adopt-privacy svg {5899  width: 16px;5900  height: 16px;5901  flex: 0 0 auto;5902  margin-top: 1px;5903  fill: none;5904  stroke: color-mix(in srgb, var(--peach-accent) 74%, var(--peach-t0));5905  stroke-linecap: round;5906  stroke-linejoin: round;5907  stroke-width: 1.7;5908}59095910.peach-adopt-pairing .peach-adopt-privacy p {5911  margin: 0;5912  color: color-mix(in srgb, var(--peach-t0) 76%, var(--peach-bg));5913  font-size: 0.62rem;5914  line-height: 1.4;5915}59165917.peach-adopt-privacy strong {5918  color: var(--peach-t0);5919  font-weight: 700;5920}59215922.peach-adopt-pair-actions {5923  margin-top: 9px;5924}59255926.peach-adopt-pair-actions > button {5927  width: 100%;5928}59295930.peach-adopt-paired-status {5931  display: inline-flex;5932  align-items: center;5933  gap: 8px;5934  margin: 22px auto 18px;5935  padding: 9px 13px;5936  border: 1px solid color-mix(in srgb, var(--peach-accent) 30%, transparent);5937  border-radius: 999px;5938  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5939  color: color-mix(in srgb, var(--peach-accent) 78%, var(--peach-t0));5940  font-family: var(--peach-mono, "IBM Plex Mono", monospace);5941  font-size: 0.66rem;5942  font-weight: 700;5943  letter-spacing: 0.04em;5944}59455946.peach-adopt-paired-status span {5947  width: 7px;5948  height: 7px;5949  border-radius: 50%;5950  background: var(--peach-accent);5951  box-shadow: 0 0 8px color-mix(in srgb, var(--peach-accent) 68%, transparent);5952}59535954@media (prefers-reduced-motion: reduce) {5955  .peach-adopt-connection::after {5956    animation: none;5957  }5958}59595960@keyframes peach-onboard-enter {5961  from { opacity: 0; transform: translateY(20px); }5962  to   { opacity: 1; transform: translateY(0); }5963}59645965@keyframes peach-onboard-exit {5966  from { opacity: 1; }5967  to   { opacity: 0; }5968}59695970@keyframes peach-card-in {5971  from { opacity: 0; transform: translateX(12px); }5972  to   { opacity: 1; transform: translateX(0); }5973}59745975@keyframes peach-card-out {5976  from { opacity: 1; transform: translateX(0); }5977  to   { opacity: 0; transform: translateX(-12px); }5978}59795980/* ─── New vault screen — matched to onboarding card language ─────────── */59815982/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage5983   rule (same element) without loosening the unlock/restore screens. The5984   create-vault screen is the only vault-stage view tall enough to overflow5985   the 520px popup, so its spacing is tuned to fit header → card → restore →5986   recovery warning with nothing clipped. */5987.peach-screen.peach-newvault {5988  position: relative;5989  display: flex;5990  flex-direction: column;5991  gap: 12px;5992  padding: 16px 16px 12px;5993  overflow: hidden;5994}59955996/* Suppress the warm-blob ambient art inherited from .lock-screen — the5997   new vault card now carries the visual weight. */5998.peach-newvault::before {5999  content: none;6000}60016002/* Wordmark sits in the exact same spot as on the onboarding cards; the6003   back button takes the right side so the wordmark never shifts. */6004.peach-newvault-header {6005  position: relative;6006  z-index: 2;6007  display: flex;6008  align-items: center;6009  justify-content: space-between;6010  gap: 10px;6011  margin-bottom: 2px;6012}60136014.peach-newvault-back {6015  display: inline-flex;6016  align-items: center;6017  gap: 4px;6018  background: transparent;6019  border: none;6020  color: var(--peach-t2);6021  font-family: "IBM Plex Mono", monospace;6022  font-size: 0.625rem;6023  letter-spacing: 0.06em;6024  cursor: pointer;6025  padding: 4px 6px;6026  border-radius: 6px;6027  transition: color 120ms ease, background 120ms ease;6028}60296030.peach-newvault-back:hover {6031  color: var(--peach-t0);6032  background: rgba(240, 232, 216, 0.04);6033}60346035.peach-newvault-mark {6036  position: absolute;6037  right: -12px;6038  top: 44px;6039  width: 110px;6040  height: 110px;6041  pointer-events: none;6042  opacity: 0.10;6043  filter: saturate(0.9);6044  z-index: 0;6045}6046.peach-newvault-mark-art {6047  width: 100%;6048  height: 100%;6049}6050.peach-newvault-mark-art path:nth-child(1) {6051  fill: rgba(123, 144, 96, 0.88);6052}6053.peach-newvault-mark-art path:nth-child(2) {6054  stroke: rgba(94, 122, 66, 0.95);6055}60566057.peach-newvault-card {6058  position: relative;6059  z-index: 1;6060  flex: 1;6061  display: flex;6062  flex-direction: column;6063  gap: 8px;6064  padding: 16px 20px 14px;6065  border-radius: 16px;6066  border: 1px solid var(--peach-t3);6067  background:6068    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6069  backdrop-filter: blur(3px);6070  -webkit-backdrop-filter: blur(3px);6071  box-shadow:6072    inset 0 1px 0 rgba(240, 232, 216, 0.04),6073    0 12px 28px rgba(0, 0, 0, 0.12);6074  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6075}60766077/* Create-vault card only (the restore card lays out differently — see6078   .peach-restore-card). The warning hugs the glass edge with a small6079   margin; leftover height distributes between elements so they breathe6080   instead of leaving one dead gap. Scroll stays available as a fallback6081   on shorter viewports. */6082.peach-newvault-card:not(.peach-restore-card) {6083  min-height: 0;6084  gap: 10px;6085  padding: 14px 22px 16px;6086  justify-content: space-between;6087  overflow-y: auto;6088  scrollbar-width: none;6089}60906091.peach-newvault-card:not(.peach-restore-card)::-webkit-scrollbar {6092  display: none;6093}60946095.peach-newvault-headline {6096  margin: 0;6097  font-family: var(--font-display);6098  font-style: italic;6099  font-weight: 400;6100  font-size: 24px;6101  line-height: 1.05;6102  color: var(--peach-t0);6103  white-space: pre-line;6104}61056106.peach-newvault-divider {6107  margin: 2px 0 4px;6108  border: 0;6109  border-top: 1px solid var(--peach-t3);6110  width: 100%;6111}61126113.peach-newvault-field {6114  display: flex;6115  flex-direction: column;6116  gap: 4px;6117}61186119.peach-newvault-label-row {6120  display: flex;6121  align-items: center;6122  justify-content: space-between;6123}61246125/* Monospace input scaled to the card. Replaces the 22px unlock-input6126   so the placeholder no longer overflows and the field reads as part6127   of the same surface as the body copy. */6128.peach-newvault-input {6129  font-size: 0.875rem;6130  letter-spacing: 0.18em;6131  padding: 8px 0;6132}6133.peach-newvault-input::placeholder {6134  letter-spacing: 0.18em;6135  color: var(--peach-t2);6136}61376138.peach-newvault-hint {6139  margin: 2px 0 0;6140  font-family: "IBM Plex Mono", monospace;6141  font-size: 0.625rem;6142  color: var(--peach-t2);6143  letter-spacing: 0.04em;6144}61456146.peach-newvault-submit {6147  margin-top: 4px;6148}61496150.peach-newvault-warning {6151  display: flex;6152  align-items: flex-start;6153  gap: 8px;6154  margin: 0;6155  padding-top: 8px;6156  border-top: 1px dashed var(--peach-t3);6157  font-size: 0.75rem;6158  line-height: 1.45;6159  color: var(--peach-t1);6160}61616162.peach-newvault-warning-icon {6163  color: var(--peach-accent);6164  font-size: 0.8125rem;6165  line-height: 1.4;6166  flex: 0 0 auto;6167}61686169/* Settings body — warm accent gradient gives the glass something to blur against */6170.peach-settings-body {6171  background:6172    radial-gradient(6173      ellipse at 30% 20%,6174      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6175      transparent 60%6176    );6177}61786179/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6180/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6181 * Two severity levels: "warn" for actions that are dangerous-but-recoverable6182 * (replacing the vault from a backup file) and "hazard" for actions that6183 * are absolutely irreversible (Panic). Both use the same card scaffold so6184 * they read as a pair, but the colour family signals the severity at a6185 * glance — yellow for caution, red for don't.6186 */6187.peach-danger-card {6188  --danger-tint: 235, 158, 52; /* amber */6189  display: flex;6190  flex-direction: column;6191  gap: 8px;6192  padding: 14px;6193  margin-top: 10px;6194  border-radius: 12px;6195  border: 1px solid rgba(var(--danger-tint), 0.32);6196  background:6197    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),6198    rgba(var(--danger-tint), 0.04);6199  box-shadow:6200    inset 0 1px 0 rgba(var(--danger-tint), 0.08),6201    0 0 24px rgba(var(--danger-tint), 0.04);6202  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;6203}62046205.peach-danger-card:hover {6206  border-color: rgba(var(--danger-tint), 0.55);6207  box-shadow:6208    inset 0 1px 0 rgba(var(--danger-tint), 0.12),6209    0 0 36px rgba(var(--danger-tint), 0.10);6210}62116212.peach-danger-card--hazard {6213  --danger-tint: 220, 38, 38; /* red */6214}62156216.peach-danger-card-head {6217  display: flex;6218  align-items: center;6219  gap: 10px;6220}62216222.peach-danger-card-glyph {6223  width: 28px;6224  height: 28px;6225  flex-shrink: 0;6226  display: flex;6227  align-items: center;6228  justify-content: center;6229  border-radius: 8px;6230  background: rgba(var(--danger-tint), 0.12);6231  color: rgba(var(--danger-tint), 0.95);6232  font-size: 1rem;6233  line-height: 1;6234}62356236.peach-danger-card-title {6237  margin: 0;6238  font-size: 0.8125rem;6239  font-weight: 600;6240  color: rgba(var(--danger-tint), 0.92);6241  letter-spacing: 0.01em;6242}62436244.peach-danger-card-copy {6245  margin: 0;6246  font-size: 0.6875rem;6247  line-height: 1.5;6248  color: var(--peach-t2);6249}62506251.peach-danger-card-button {6252  width: 100%;6253  padding: 9px;6254  margin-top: 4px;6255  background: transparent;6256  border: 1px solid rgba(var(--danger-tint), 0.45);6257  border-radius: 8px;6258  color: rgba(var(--danger-tint), 0.9);6259  font-size: 0.75rem;6260  font-weight: 500;6261  letter-spacing: 0.02em;6262  cursor: pointer;6263  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6264}62656266.peach-danger-card-button:hover {6267  background: rgba(var(--danger-tint), 0.10);6268  border-color: rgba(var(--danger-tint), 0.75);6269  color: rgb(var(--danger-tint));6270}62716272.peach-adoption-sas {6273  margin: 16px auto 0;6274  padding: 12px 16px;6275  border: 1px solid color-mix(in srgb, var(--peach-t0) 18%, transparent);6276  border-radius: 10px;6277  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);6278  color: var(--peach-t0);6279  text-align: center;6280}62816282.peach-adoption-sas strong {6283  font-size: 1.65rem;6284  font-variant-numeric: tabular-nums;6285  letter-spacing: 0.18em;6286  white-space: nowrap;6287}62886289/* ── Panic flow (three-step destruction) ───────────────────────────────── */6290.peach-panic {6291  display: flex;6292  flex-direction: column;6293  flex: 1;6294  min-height: 0;6295  padding: 28px 20px 20px;6296  gap: 18px;6297  overflow-y: auto;6298  scrollbar-width: none;6299  -ms-overflow-style: none;6300}63016302.peach-panic::-webkit-scrollbar { display: none; }63036304.peach-panic-step2 {6305  background: rgba(220, 38, 38, 0.04);6306}63076308.peach-panic-step3 {6309  position: relative;6310  background: #0f0505;6311  color: #ffffff;6312  overflow: hidden;6313}63146315.peach-panic-rune-bg {6316  position: absolute;6317  inset: 0;6318  opacity: 0.22;6319  pointer-events: none;6320  overflow: hidden;6321}63226323.peach-panic-rune-bg canvas {6324  width: 100% !important;6325  height: 100% !important;6326}63276328.peach-panic-icon {6329  font-size: 32px;6330  color: rgb(220, 38, 38);6331  line-height: 1;6332}63336334.peach-panic-title {6335  margin: 0;6336  font-size: 18px;6337  font-weight: 500;6338  color: var(--peach-t1);6339}63406341.peach-panic-title--severe {6342  font-size: 20px;6343  font-weight: 700;6344  color: rgb(220, 38, 38);6345}63466347.peach-panic-body {6348  margin: 0;6349  font-size: 0.8125rem;6350  line-height: 1.55;6351  color: var(--peach-t2);6352}63536354.peach-panic-body--severe {6355  color: rgba(220, 38, 38, 0.85);6356}63576358.peach-panic-body--final {6359  font-size: 1rem;6360  font-weight: 700;6361  color: rgb(255, 80, 80);6362  line-height: 1.4;6363}63646365.peach-panic-body--final-intro {6366  font-size: 1rem;6367  color: #ffffff;6368  font-weight: 400;6369}63706371.peach-panic-divider {6372  height: 1px;6373  background: rgba(255, 255, 255, 0.08);6374  margin: 4px 0;6375}63766377.peach-panic-confirm-input {6378  width: 100%;6379  padding: 10px 12px;6380  background: rgba(255, 255, 255, 0.02);6381  border: 1px solid rgba(220, 38, 38, 0.4);6382  border-radius: 8px;6383  color: var(--peach-t1);6384  font-family: "IBM Plex Mono", monospace;6385  font-size: 0.875rem;6386  letter-spacing: 0.12em;6387  text-transform: uppercase;6388}63896390.peach-panic-confirm-input:focus {6391  outline: none;6392  border-color: rgb(220, 38, 38);6393}63946395.peach-panic-confirm-input--match {6396  border-color: rgb(220, 38, 38);6397  color: rgb(220, 38, 38);6398}63996400.peach-panic-confirm-label {6401  font-size: 0.6875rem;6402  color: var(--peach-t2);6403  margin: 0 0 -8px;6404  letter-spacing: 0.06em;6405}64066407.peach-panic-actions {6408  display: flex;6409  flex-direction: column;6410  gap: 10px;6411  margin-top: auto;6412}64136414.peach-panic-button {6415  width: 100%;6416  padding: 12px;6417  border-radius: 8px;6418  font-size: 0.8125rem;6419  cursor: pointer;6420  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6421}64226423.peach-panic-button--primary {6424  background: var(--peach-accent);6425  border: 1px solid var(--peach-accent);6426  color: #ffffff;6427  font-weight: 600;6428}64296430.peach-panic-button--primary:hover {6431  background: color-mix(in srgb, var(--peach-accent) 88%, white);6432}64336434.peach-panic-button--danger {6435  background: rgb(220, 38, 38);6436  border: 1px solid rgb(220, 38, 38);6437  color: #ffffff;6438  font-weight: 600;6439}64406441.peach-panic-button--danger:disabled {6442  opacity: 0.35;6443  cursor: not-allowed;6444}64456446.peach-panic-button--ghost {6447  background: transparent;6448  border: 1px solid rgba(255, 255, 255, 0.18);6449  color: var(--peach-t2);6450}64516452.peach-panic-button--ghost:hover {6453  border-color: rgba(255, 255, 255, 0.32);6454  color: var(--peach-t1);6455}64566457.peach-panic-link {6458  background: transparent;6459  border: none;6460  padding: 4px 0;6461  color: rgba(220, 38, 38, 0.65);6462  font-size: 0.75rem;6463  cursor: pointer;6464  text-align: left;6465  text-decoration: underline;6466  text-underline-offset: 3px;6467}64686469.peach-panic-link:hover {6470  color: rgb(220, 38, 38);6471}64726473.peach-panic-bar {6474  background: rgb(220, 38, 38);6475  padding: 16px 20px;6476  margin: -28px -20px 0;6477  text-align: center;6478  font-size: 0.8125rem;6479  font-weight: 700;6480  letter-spacing: 0.12em;6481  color: #ffffff;6482}64836484.peach-panic-final-button {6485  width: 100%;6486  padding: 14px;6487  background: rgb(220, 38, 38);6488  border: none;6489  border-radius: 8px;6490  color: #ffffff;6491  font-size: 0.875rem;6492  font-weight: 700;6493  letter-spacing: 0.08em;6494  text-transform: uppercase;6495  cursor: pointer;6496  animation: peach-panic-pulse 2s ease-in-out infinite;6497}64986499.peach-settings-license {6500  margin-top: 10px;6501  padding-top: 10px;6502  border-top: 1px solid var(--peach-t3);6503}65046505.peach-settings-label {6506  font-size: 0.625rem;6507  letter-spacing: 0.08em;6508  color: var(--peach-t2);6509  display: block;6510  margin-bottom: 6px;6511}65126513.peach-settings-license-row {6514  display: flex;6515  align-items: center;6516  justify-content: space-between;6517  gap: 8px;6518}65196520.peach-settings-license-key {6521  font-family: 'IBM Plex Mono', monospace;6522  font-size: 0.75rem;6523  color: var(--peach-t0);6524  letter-spacing: 0.04em;6525  word-break: break-all;6526  flex: 1;6527  min-width: 0;6528}65296530.peach-settings-license-key--masked {6531  font-family: 'IBM Plex Mono', monospace;6532  font-size: 0.6rem;6533  color: var(--peach-t1);6534  letter-spacing: 0.18em;6535  user-select: none;6536}65376538.peach-settings-license-actions {6539  display: flex;6540  align-items: center;6541  gap: 2px;6542  flex-shrink: 0;6543}65446545.peach-settings-license-copy {6546  font-size: 0.6875rem;6547  color: var(--peach-accent);6548  background: transparent;6549  border: none;6550  cursor: pointer;6551  padding: 4px 8px;6552  border-radius: 4px;6553  flex-shrink: 0;6554  transition: opacity 150ms ease;6555}65566557.peach-settings-license-copy:hover {6558  opacity: 0.75;6559}65606561.peach-settings-license-toggle {6562  display: flex;6563  align-items: center;6564  justify-content: center;6565  background: transparent;6566  border: none;6567  cursor: pointer;6568  padding: 4px 6px;6569  border-radius: 4px;6570  color: var(--peach-t2);6571  transition: color 150ms ease;6572}65736574.peach-settings-license-toggle:hover {6575  color: var(--peach-t1);6576}65776578@keyframes peach-panic-pulse {6579  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }6580  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }6581}65826583[data-motion="reduce"] .peach-panic-final-button {6584  animation: none;6585}65866587/* Vault History — Settings → Vault sub-view */65886589.peach-history-list {6590  border: 1px solid var(--peach-border);6591  border-radius: 8px;6592  overflow: hidden;6593  margin: 8px 0 4px;6594}65956596.peach-history-row {6597  display: flex;6598  align-items: center;6599  justify-content: space-between;6600  padding: 9px 12px;6601  gap: 10px;6602  border-bottom: 1px solid var(--peach-border);6603}66046605.peach-history-row:last-child {6606  border-bottom: none;6607}66086609.peach-history-meta {6610  display: flex;6611  flex-direction: column;6612  gap: 2px;6613  min-width: 0;6614  flex: 1;6615}66166617.peach-history-time {6618  font-size: 0.75rem;6619  font-family: 'IBM Plex Mono', ui-monospace, monospace;6620  color: var(--peach-t0);6621  white-space: nowrap;6622  overflow: hidden;6623  text-overflow: ellipsis;6624}66256626.peach-history-sub {6627  font-size: 0.625rem;6628  color: var(--peach-t2);6629  letter-spacing: 0.06em;6630  text-transform: uppercase;6631  white-space: nowrap;6632  overflow: hidden;6633  text-overflow: ellipsis;6634}66356636.peach-history-btn {6637  flex-shrink: 0;6638  white-space: nowrap;6639  min-width: 56px;6640  text-align: center;6641}66426643.peach-history-btn.is-busy {6644  opacity: 0.65;6645}66466647.peach-history-footer {6648  font-size: 0.625rem;6649  color: var(--peach-t3);6650  letter-spacing: 0.05em;6651  text-align: right;6652  margin: 0;6653  padding: 2px 0 0;6654}66556656/* ── Context menu + swipe-copy flash ─────────────────────── */6657.peach-context-menu-backdrop {6658  position: fixed;6659  inset: 0;6660  background: rgba(0, 0, 0, 0.45);6661  z-index: 100;6662  display: flex;6663  align-items: flex-end;6664  justify-content: center;6665  animation: peach-ctx-fade 140ms ease both;6666}6667.peach-context-menu {6668  width: min(360px, calc(100vw - 24px));6669  margin-bottom: max(env(safe-area-inset-bottom), 12px);6670  background: var(--peach-bg);6671  border: 1px solid var(--peach-t3);6672  border-radius: 14px;6673  padding: 6px;6674  display: flex;6675  flex-direction: column;6676  gap: 2px;6677  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);6678  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6679}6680@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }6681@keyframes peach-ctx-rise {6682  from { transform: translateY(16px); opacity: 0; }6683  to   { transform: translateY(0);    opacity: 1; }6684}6685.peach-context-menu-item {6686  background: transparent;6687  color: var(--peach-t0);6688  border: 0;6689  border-radius: 10px;6690  padding: 12px 14px;6691  text-align: left;6692  font: inherit;6693  cursor: pointer;6694}6695.peach-context-menu-item:hover,6696.peach-context-menu-item:focus-visible {6697  background: var(--peach-t3);6698}6699.peach-context-menu-item--danger {6700  color: var(--peach-health-bad, #d96868);6701}6702.peach-context-menu-item--cancel {6703  color: var(--peach-t2);6704  margin-top: 4px;6705  border-top: 1px solid var(--peach-t3);6706  border-radius: 0 0 10px 10px;6707}67086709/* Swipe-to-copy flash */6710.peach-entry-row.is-copy-flash {6711  animation: peach-copy-flash 600ms ease both;6712}6713@keyframes peach-copy-flash {6714  0%   { background: transparent; }6715  20%  { background: rgba(217, 153, 51, 0.32); }6716  100% { background: transparent; }6717}67186719html { font-size: 16px; }67206721/* ── Recovery word entry ─────────────────────────────────────────── */6722.peach-lock-recover-link {6723  display: block;6724  width: 100%;6725  margin-top: 12px;6726  background: none;6727  border: none;6728  font-family: "IBM Plex Mono", monospace;6729  font-size: 0.625rem;6730  letter-spacing: 0.06em;6731  color: var(--peach-t2);6732  cursor: pointer;6733  text-align: center;6734  padding: 4px;6735  transition: color 120ms ease;6736}6737.peach-lock-recover-link:hover {6738  color: var(--peach-t0);6739}67406741.lock-screen--recovery {6742  display: flex;6743  flex-direction: column;6744  align-items: stretch;6745  padding: 12px 20px 24px;6746  overflow: hidden;6747}67486749.peach-recovery-nav {6750  display: flex;6751  align-items: center;6752  position: relative;6753  z-index: 1;6754  margin-bottom: 4px;6755}67566757/* Mask runes to the top decorative band only — keep inputs and the6758   bottom CTA button clear. The bottom of the popup is reserved for6759   submit buttons; rendering runes there overlaps the button glyph. */6760.peach-rune-background--recovery {6761  -webkit-mask-image: linear-gradient(6762    to bottom,6763    black 0px, black 85px,6764    transparent 110px,6765    transparent 100%6766  );6767  mask-image: linear-gradient(6768    to bottom,6769    black 0px, black 85px,6770    transparent 110px,6771    transparent 100%6772  );6773}67746775.peach-recovery-header {6776  text-align: center;6777  margin-bottom: 0;6778  margin-top: 2px;6779}6780.peach-recovery-header .peach-onboarding-headline {6781  font-size: 1.25rem;6782  font-weight: 300;6783  letter-spacing: 0.02em;6784  /* max-width:252px inherited above is narrower than the section — without6785     auto margins the text box sits left-of-center. */6786  margin: 0 auto 4px;6787}6788.peach-recovery-header .peach-hint {6789  font-family: "IBM Plex Mono", monospace;6790  font-size: 0.625rem;6791  color: var(--peach-t1);6792  letter-spacing: 0.04em;6793  margin: 0;6794}6795.peach-recovery-header .peach-hint--warning {6796  color: var(--peach-accent);6797}67986799/* 12-word grid: 2 columns × 6 rows */6800.peach-recovery-grid {6801  display: grid;6802  grid-template-columns: repeat(2, 1fr);6803  gap: 12px 20px;6804  width: 100%;6805  margin-bottom: 0;6806}68076808.peach-recovery-word-slot {6809  display: flex;6810  align-items: center;6811  gap: 6px;6812  min-width: 0;6813}68146815.peach-recovery-word-index {6816  font-family: "IBM Plex Mono", monospace;6817  font-size: 0.5rem;6818  color: rgba(255, 255, 255, 0.35);6819  min-width: 14px;6820  flex-shrink: 0;6821  text-align: right;6822  letter-spacing: 0.04em;6823}68246825.peach-recovery-word-input {6826  flex: 1;6827  min-width: 0;6828  background: transparent;6829  border: none;6830  border-bottom: 1px solid rgba(255, 255, 255, 0.22);6831  color: var(--peach-t0);6832  font-family: "IBM Plex Mono", monospace;6833  font-size: 0.6875rem;6834  letter-spacing: 0.06em;6835  padding: 5px 2px 4px;6836  outline: none;6837  text-transform: lowercase;6838  transition: border-color 120ms ease;6839}6840.peach-recovery-word-input::placeholder {6841  color: rgba(255, 255, 255, 0.18);6842}6843.peach-recovery-word-input:focus {6844  border-bottom-color: var(--peach-accent);6845}68466847.peach-recovery-submit {6848  width: 100%;6849  margin-top: auto;6850}68516852.peach-recovery-new-password-form {6853  width: 100%;6854  display: flex;6855  flex-direction: column;6856  gap: 16px;6857  margin-bottom: 8px;6858}6859.peach-recovery-new-password-form .peach-newvault-field {6860  display: flex;6861  flex-direction: column;6862  gap: 4px;6863}68646865/* ── Recovery words display (post-create) ──────────────────────────6866   Condensed so word list + confirmation fit the 520px popup with no6867   scroll — the confirm button must never be clipped. */6868.lock-screen--recovery-display {6869  display: flex;6870  flex-direction: column;6871  align-items: stretch;6872  padding: 10px 16px 12px;6873  gap: 8px;6874  min-height: 0;6875  overflow-y: auto;6876}68776878.peach-recovery-words-display {6879  width: 100%;6880  margin-bottom: 0;6881  border: 1px solid var(--peach-t3);6882  border-radius: 8px;6883  padding: 10px 14px;6884  background: rgba(245, 240, 234, 0.04);6885}68866887.peach-recovery-words-label {6888  font-family: "IBM Plex Mono", monospace;6889  font-size: 0.5rem;6890  letter-spacing: 0.08em;6891  color: var(--peach-t2);6892  text-transform: uppercase;6893  margin-bottom: 8px;6894  text-align: center;6895}68966897.peach-recovery-word-list {6898  list-style: none;6899  margin: 0;6900  padding: 0;6901  display: grid;6902  grid-template-columns: repeat(2, 1fr);6903  gap: 5px 16px;6904}69056906.peach-recovery-word-item {6907  display: flex;6908  align-items: baseline;6909  justify-content: center;6910  gap: 5px;6911}69126913.peach-recovery-word-num {6914  font-family: "IBM Plex Mono", monospace;6915  font-size: 0.5rem;6916  color: var(--peach-accent);6917  width: 14px;6918  flex: 0 0 14px;6919  text-align: right;6920  letter-spacing: 0.04em;6921  font-variant-numeric: tabular-nums;6922}69236924.peach-recovery-download-btn {6925  display: block;6926  margin: 8px auto 0;6927  padding: 4px 10px;6928  background: transparent;6929  border: 1px solid var(--peach-border);6930  border-radius: 6px;6931  color: var(--peach-t2);6932  font-family: "IBM Plex Mono", monospace;6933  font-size: 0.5625rem;6934  letter-spacing: 0.06em;6935  text-transform: lowercase;6936  cursor: pointer;6937  transition: border-color 0.15s, color 0.15s;6938}69396940.peach-recovery-download-btn:hover {6941  border-color: var(--peach-accent);6942  color: var(--peach-t0);6943}69446945.peach-recovery-word-text {6946  font-family: "IBM Plex Mono", monospace;6947  font-size: 0.6875rem;6948  letter-spacing: 0.06em;6949  color: var(--peach-t0);6950  text-transform: lowercase;6951}69526953.peach-hint--warning {6954  color: var(--peach-accent);6955  font-style: italic;6956}6957.peach-hint--success {6958  color: var(--peach-t2);6959  font-family: "IBM Plex Mono", monospace;6960  font-size: 0.625rem;6961  letter-spacing: 0.06em;6962}69636964/* Confirmation step */6965.peach-recovery-confirm {6966  width: 100%;6967  flex: 1;6968  display: flex;6969  flex-direction: column;6970}6971.peach-recovery-confirm-label {6972  font-family: "IBM Plex Mono", monospace;6973  font-size: 0.5625rem;6974  letter-spacing: 0.04em;6975  color: var(--peach-t1);6976  text-align: center;6977  margin: 0 0 8px;6978}6979.peach-recovery-confirm-fields {6980  flex: 1;6981  display: flex;6982  flex-direction: column;6983  /* Spread the three inputs through the available height instead of pooling6984     one dead gap under them. */6985  justify-content: space-evenly;6986  gap: 8px;6987  margin-bottom: 0;6988}6989.peach-recovery-confirm-field {6990  display: flex;6991  align-items: center;6992  gap: 8px;6993}6994.peach-recovery-confirm-num {6995  font-family: "IBM Plex Mono", monospace;6996  font-size: 0.5rem;6997  color: var(--peach-accent);6998  min-width: 44px;6999  letter-spacing: 0.04em;7000}7001.peach-recovery-confirm-input {7002  flex: 1;7003  background: transparent;7004  border: none;7005  border-bottom: 1px solid var(--peach-t3);7006  color: var(--peach-t0);7007  font-family: "IBM Plex Mono", monospace;7008  font-size: 0.6875rem;7009  letter-spacing: 0.06em;7010  padding: 4px 2px 3px;7011  outline: none;7012  text-transform: lowercase;7013  transition: border-color 120ms ease;7014}7015.peach-recovery-confirm-input:focus {7016  border-bottom-color: var(--peach-accent);7017}7018.peach-recovery-confirm-input:disabled {7019  opacity: 0.4;7020  cursor: not-allowed;7021}7022.peach-recovery-confirm-btn {7023  width: 100%;7024  margin-top: 12px;7025}70267027/* ============================================================7028   Sync info sheet7029   ============================================================ */70307031.peach-btn--full {7032  width: 100%;7033}70347035/* ── Notes Mode ── */70367037/* Overlay that crossfades over the vault */7038.peach-notes-overlay {7039  position: fixed;7040  inset: 0;7041  z-index: 90;7042  opacity: 0;7043  pointer-events: none;7044  animation: peach-mode-in 220ms ease-in forwards;7045}70467047.peach-notes-overlay.is-visible {7048  opacity: 1;7049  pointer-events: auto;7050}70517052@keyframes peach-mode-in {7053  from { opacity: 0; }7054  to   { opacity: 1; }7055}70567057/* Top-level notes surface */7058.peach-notes-mode {7059  position: absolute;7060  inset: 0;7061  background:7062    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 5%, transparent) 0%, transparent 62%),7063    var(--peach-bg);7064  display: flex;7065  flex-direction: column;7066}70677068/* TOC wrapper */7069.peach-notes-toc-wrapper {7070  position: absolute;7071  inset: 0;7072  z-index: 1;7073  opacity: 1;7074  pointer-events: auto;7075  transition: opacity 200ms ease;7076}70777078.peach-notes-toc-wrapper.is-hidden {7079  opacity: 0;7080  pointer-events: none;7081}70827083/* Editor wrapper */7084.peach-notes-editor-wrapper {7085  position: absolute;7086  inset: 0;7087  z-index: 2;7088  opacity: 0;7089  pointer-events: none;7090  transition: opacity 200ms ease;7091}70927093.peach-notes-editor-wrapper.is-visible {7094  opacity: 1;7095  pointer-events: auto;7096}70977098/* TOC inner */7099.peach-notes-toc {7100  position: relative;7101  display: flex;7102  flex-direction: column;7103  height: 100%;7104  padding-top: env(safe-area-inset-top, 0px);7105  padding-bottom: env(safe-area-inset-bottom, 0px);7106}71077108/* Shared header */7109.peach-notes-header {7110  display: flex;7111  align-items: center;7112  padding: 12px 16px;7113  gap: 12px;7114  flex-shrink: 0;7115  min-height: 52px;7116  position: relative;7117  z-index: 2;7118}71197120.peach-notes-back {7121  font-size: 22px;7122  color: var(--peach-t2);7123  background: none;7124  border: none;7125  padding: 4px;7126  cursor: pointer;7127  line-height: 1;7128  flex-shrink: 0;7129  transition: color 150ms ease;7130  -webkit-tap-highlight-color: transparent;7131}71327133.peach-notes-back:active { color: var(--peach-t0); }71347135.peach-notes-header-title {7136  flex: 1;7137  font-family: 'Cormorant Garamond', serif;7138  font-style: italic;7139  font-size: 22px;7140  color: var(--peach-t0);7141  text-align: center;7142}71437144.peach-notes-header--editor {7145  display: grid;7146  grid-template-columns: 36px minmax(0, 1fr) 36px;7147}71487149.peach-notes-header--editor .peach-notes-back,7150.peach-notes-header--editor .peach-notes-header-actions {7151  width: 36px;7152}71537154.peach-notes-header--editor .peach-notes-header-title {7155  cursor: pointer;7156}71577158.peach-notes-header-actions {7159  display: flex;7160  gap: 8px;7161  flex-shrink: 0;7162}71637164.peach-notes-header-btn {7165  width: 36px;7166  height: 36px;7167  display: flex;7168  align-items: center;7169  justify-content: center;7170  background: none;7171  border: none;7172  color: var(--peach-t2);7173  cursor: pointer;7174  border-radius: 8px;7175  font-size: 16px;7176  transition: color 150ms ease, background 150ms ease;7177  -webkit-tap-highlight-color: transparent;7178}71797180.peach-notes-header-btn:active {7181  background: rgba(255,255,255,0.06);7182  color: var(--peach-t0);7183}71847185/* The header + glyph is larger than the search svg so the two right-side7186 * buttons feel visually balanced. The base .peach-notes-header-btn caps font7187 * at 16px which would render the + too small. */7188.peach-notes-new-btn-icon {7189  font-size: 22px;7190  font-weight: 300;7191  line-height: 1;7192}71937194.peach-notes-search-btn svg {7195  display: block;7196  transform: translate(0.5px, 2.5px);7197}71987199/* Inline search bar */7200.peach-notes-search-input {7201  flex: 1;7202  background: none;7203  border: none;7204  outline: none;7205  font-family: 'IBM Plex Mono', monospace;7206  font-size: 13px;7207  color: var(--peach-t0);7208  padding: 4px 0;7209  letter-spacing: 0.02em;7210}72117212.peach-notes-search-input::placeholder {7213  color: var(--peach-t3);7214}72157216/* TOC list */7217.peach-notes-list-container {7218  flex: 1;7219  overflow-y: auto;7220  overflow-x: hidden;7221  scrollbar-width: none;7222  -webkit-overflow-scrolling: touch;7223  overscroll-behavior: contain;7224  position: relative;7225  z-index: 1;7226}72277228.peach-notes-list-container::-webkit-scrollbar { display: none; }72297230/* Note row */7231.peach-note-row {7232  position: relative;7233  display: grid;7234  grid-template-columns: 44px 8px 1fr 8px auto;7235  align-items: center;7236  min-height: 72px;7237  padding: 16px 20px;7238  border-bottom: 0.5px solid var(--peach-border);7239  cursor: pointer;7240  overflow: hidden;7241  touch-action: pan-y;7242  user-select: none;7243  -webkit-user-select: none;7244  -webkit-tap-highlight-color: transparent;7245}72467247.peach-note-row:first-child {7248  border-top: 0.5px solid var(--peach-border);7249}72507251.peach-note-row:active {7252  background: rgba(255,255,255,0.02);7253}72547255.peach-note-numeral {7256  font-family: 'Cormorant Garamond', serif;7257  font-style: italic;7258  font-size: 15px;7259  color: var(--peach-accent);7260  text-align: right;7261  line-height: 1;7262  flex-shrink: 0;7263}72647265.peach-note-title-gap { /* grid spacer */ }72667267.peach-note-title {7268  font-family: 'Cormorant Garamond', serif;7269  font-style: italic;7270  font-size: 18px;7271  color: var(--peach-t0);7272  line-height: 1.3;7273  min-width: 0;7274  overflow-wrap: break-word;7275}72767277.peach-note-title-match {7278  color: var(--peach-accent);7279}72807281.peach-note-date {7282  font-family: 'IBM Plex Mono', monospace;7283  font-size: 11px;7284  color: var(--peach-t1);7285  opacity: 0.62;7286  white-space: nowrap;7287  text-align: right;7288  flex-shrink: 0;7289  grid-column: 5;7290}72917292/* Swipe underlays */7293.peach-note-row-underlay {7294  position: absolute;7295  inset: 0;7296  display: flex;7297  align-items: center;7298  padding: 0 24px;7299  font-family: 'IBM Plex Mono', monospace;7300  font-size: 11px;7301  letter-spacing: 0.1em;7302  pointer-events: none;7303  z-index: 0;7304}73057306.peach-note-row-underlay--delete {7307  background: #8B2020;7308  color: rgba(255,255,255,0.9);7309  justify-content: flex-end;7310}73117312.peach-note-row-underlay--archive {7313  background: var(--peach-accent);7314  color: #0C0A06;7315  justify-content: flex-start;7316}73177318/* Delete confirm strip */7319.peach-note-delete-confirm {7320  position: absolute;7321  inset: 0;7322  background: var(--peach-bg);7323  display: flex;7324  align-items: center;7325  gap: 12px;7326  padding: 0 20px;7327  font-family: 'IBM Plex Mono', monospace;7328  font-size: 11px;7329  color: var(--peach-t1);7330  letter-spacing: 0.04em;7331  animation: peach-delete-confirm-in 150ms ease both;7332  z-index: 10;7333}73347335@keyframes peach-delete-confirm-in {7336  from { opacity: 0; }7337  to   { opacity: 1; }7338}73397340.peach-note-delete-confirm-btn {7341  background: #8B2020;7342  color: rgba(255,255,255,0.9);7343  border: none;7344  border-radius: 6px;7345  padding: 4px 10px;7346  font-family: 'IBM Plex Mono', monospace;7347  font-size: 10px;7348  cursor: pointer;7349  letter-spacing: 0.06em;7350}73517352.peach-note-delete-cancel-btn {7353  background: none;7354  border: none;7355  color: var(--peach-t3);7356  font-family: 'IBM Plex Mono', monospace;7357  font-size: 10px;7358  cursor: pointer;7359  letter-spacing: 0.06em;7360  padding: 4px 6px;7361}73627363/* Empty state */7364.peach-notes-empty {7365  display: flex;7366  flex-direction: column;7367  align-items: center;7368  justify-content: center;7369  flex: 1;7370  padding: 48px 32px;7371  gap: 16px;7372}73737374.peach-notes-empty-text {7375  font-family: 'Cormorant Garamond', serif;7376  font-style: italic;7377  font-size: 20px;7378  color: var(--peach-t3);7379  text-align: center;7380  margin: 0;7381  line-height: 1.4;7382  white-space: pre-line;7383}73847385/* ── Editor surface ── */73867387.peach-note-editor-surface {7388  position: absolute;7389  inset: 0;7390  background:7391    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 5%, transparent) 0%, transparent 62%),7392    var(--peach-bg);7393  display: flex;7394  flex-direction: column;7395  padding-top: env(safe-area-inset-top, 0px);7396}73977398.peach-note-editor-scroll {7399  flex: 1;7400  overflow-y: auto;7401  overflow-x: hidden;7402  scrollbar-width: none;7403  -webkit-overflow-scrolling: touch;7404  padding: 0 20px 120px;7405  position: relative;7406  z-index: 1;7407}74087409.peach-note-editor-scroll::-webkit-scrollbar { display: none; }74107411/* Desktop toolbar (always visible above body) */7412.peach-note-toolbar-desktop-inline {7413  display: grid;7414  grid-template-columns: repeat(4, minmax(0, 1fr)) auto repeat(5, minmax(0, 1fr));7415  align-items: center;7416  gap: 0;7417  padding: 5px 0 10px;7418  margin-bottom: 10px;7419  border-bottom: 0.5px solid var(--peach-border);7420}74217422/* Title field */7423.peach-note-title-field {7424  font-family: var(--font-display);7425  font-style: italic;7426  font-size: clamp(34px, 13vw, 44px);7427  font-weight: 400;7428  color: var(--peach-t0);7429  line-height: 0.98;7430  letter-spacing: -0.015em;7431  padding: 10px 0 2px;7432  outline: none;7433  min-height: 52px;7434  word-break: break-word;7435  position: relative;7436  z-index: 1;7437}74387439.peach-note-title-field:empty::before {7440  content: attr(data-placeholder);7441  color: var(--peach-t1);7442  opacity: 0.58;7443  pointer-events: none;7444}74457446/* Hairline separator */7447.peach-note-hairline {7448  height: 0.5px;7449  background: var(--peach-border);7450  margin: 14px 0 18px;7451  position: relative;7452  z-index: 1;7453}74547455/* Body field */7456.peach-note-body-field {7457  font-family: var(--font-display);7458  font-size: 17px;7459  color: var(--peach-t1);7460  line-height: 1.72;7461  padding: 0;7462  outline: none;7463  min-height: 240px;7464  word-break: break-word;7465  position: relative;7466  z-index: 1;7467}74687469.peach-note-body-field:empty::before {7470  content: attr(data-placeholder);7471  color: var(--peach-t1);7472  opacity: 0.56;7473  font-style: italic;7474  pointer-events: none;7475}74767477.peach-note-body-field h2 {7478  font-family: var(--font-display);7479  font-style: italic;7480  font-size: 22px;7481  font-weight: 600;7482  color: var(--peach-t0);7483  margin: 20px 0 8px;7484}74857486.peach-note-body-field blockquote {7487  border-left: 2px solid var(--peach-accent);7488  margin: 12px 0;7489  padding-left: 16px;7490  color: var(--peach-t1);7491  font-style: italic;7492}74937494.peach-note-body-field ul,7495.peach-note-body-field ol {7496  padding-left: 20px;7497  margin: 8px 0;7498}74997500.peach-note-body-field li {7501  margin: 4px 0;7502}75037504.peach-note-body-field hr {7505  border: none;7506  border-top: 0.5px solid var(--peach-border);7507  margin: 16px 0;7508}75097510/* Saved indicator */7511.peach-note-saved-indicator {7512  font-family: var(--font-mono);7513  font-size: 11px;7514  color: var(--peach-t3);7515  letter-spacing: 0.04em;7516  text-align: right;7517  padding: 6px 24px;7518  flex-shrink: 0;7519  transition: opacity 300ms ease;7520  pointer-events: none;7521  position: relative;7522  z-index: 1;7523}75247525/* Mobile keyboard toolbar */75267527.peach-note-toolbar-btn {7528  min-width: 0;7529  width: auto;7530  height: 30px;7531  display: flex;7532  align-items: center;7533  justify-content: center;7534  background: none;7535  border: none;7536  border-radius: 4px;7537  cursor: pointer;7538  color: var(--peach-t1);7539  transition: background 100ms ease, color 100ms ease;7540  -webkit-tap-highlight-color: transparent;7541}75427543.peach-note-toolbar-btn svg {7544  width: 14px;7545  height: 14px;7546  fill: none;7547  stroke: currentColor;7548  stroke-width: 1.15;7549  stroke-linecap: round;7550  stroke-linejoin: round;7551  pointer-events: none;7552}75537554.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }7555.peach-note-toolbar-btn:hover,7556.peach-note-toolbar-btn:active {7557  background: var(--peach-t4);7558  color: var(--peach-t0);7559}75607561.peach-note-toolbar-divider {7562  width: 0.5px;7563  height: 20px;7564  background: var(--peach-border);7565  margin: 0 4px;7566  flex-shrink: 0;7567}75687569/* Desktop: larger headline in TOC */7570@media (min-width: 400px) {7571  .peach-notes-header-title:not(.is-breadcrumb) {7572    font-size: 32px;7573  }75747575  .peach-note-row {7576    min-height: 64px;7577    padding: 14px 16px;7578  }7579}75807581/* Flying title — shared element during expansion/collapse */75827583/* ─── Light theme overrides ───────────────────────────────────────────────7584   Tokens that cannot be expressed as variable substitutions — hardcoded7585   context-specific values that need separate light-mode rules. */75867587/* Settings section headers: use text-label (#79766F) per restoration brief —7588   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY7589   presence without fighting the light parchment background. */7590.light .peach-settings-sub-label,7591[data-theme="light"] .peach-settings-sub-label {7592  color: #79766F;7593}75947595/* Secondary action buttons (ghost / subtle): filled with input-well surface7596   so they read as recessed against the parchment card background. */7597.light .peach-btn--ghost:not(.peach-icon-btn),7598[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {7599  background: #EEE7DD;7600  border-color: #DDD5CB;7601  color: #1A1208;7602}7603.light .peach-icon-btn,7604[data-theme="light"] .peach-icon-btn {7605  background: transparent;7606  border-color: transparent;7607}7608.light .peach-btn--subtle,7609[data-theme="light"] .peach-btn--subtle {7610  background: #EEE7DD;7611  border-color: #DDD5CB;7612}76137614/* Entry row hover: bg-row lifts the row above the card surface. */7615.light .peach-entry-row:hover,7616[data-theme="light"] .peach-entry-row:hover {7617  background: #F2EBE1;7618}7619.light .peach-entry-row.is-active,7620[data-theme="light"] .peach-entry-row.is-active {7621  background: #F2EBE1;7622}7623.light .peach-entry-row.is-selected,7624[data-theme="light"] .peach-entry-row.is-selected {7625  background: #F5EDE2;7626}76277628/* ──────────────────────────────────────────────────────────────────────────7629   Pair-device flow — bird-stage animation (Phase 1)7630   See src/popup/components/PairingBirds.tsx and the brief §6.2.7631   Three-act animation gated on the [data-phase] attribute of7632   .peach-pair-pair; child layers (birds, sound arcs, flight wave, dot)7633   each react via either pose class or visibility flag.7634   Tokens: accent surfaces use var(--peach-accent); bird illustration7635   colours are baked into the SVG per the brand-peach exception in §3.1.7636   ────────────────────────────────────────────────────────────────────── */76377638.peach-pair-pair {7639  position: absolute;7640  inset: 0;7641  z-index: 3;7642  display: flex;7643  flex-direction: column;7644  padding: 14px 12px 12px;7645  width: 100%;7646  box-sizing: border-box;7647  gap: 0;7648  background:7649    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),7650    var(--peach-bg);7651  color: var(--peach-t0);7652  overflow-y: auto;7653  overflow-x: hidden;7654  scrollbar-width: none;7655  isolation: isolate;7656  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;7657}7658@keyframes peach-pair-overlay-in {7659  from { opacity: 0; transform: translateY(8px); }7660  to   { opacity: 1; transform: translateY(0); }7661}7662.peach-pair-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }7663.peach-pair-pair::before {7664  content: '';7665  position: absolute;7666  inset: 0;7667  border-radius: inherit;7668  pointer-events: none;7669  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);7670  z-index: 0;7671}7672.peach-pair-pair > * { position: relative; z-index: 1; }76737674/* Header --------------------------------------------------------------- */7675.peach-pair-head {7676  display: flex; align-items: center; gap: 10px;7677}7678.peach-pair-back {7679  width: 32px; height: 32px;7680  display: inline-flex; align-items: center; justify-content: center;7681  background: transparent;7682  border: none;7683  border-radius: 8px;7684  color: var(--peach-t1);7685  cursor: pointer;7686  transition: color 0.15s ease, box-shadow 0.15s ease;7687}7688.peach-pair-back:hover {7689  color: var(--peach-accent);7690  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);7691}7692.peach-pair-title {7693  font-family: var(--font-display, Georgia, serif);7694  font-style: italic;7695  font-size: 24px;7696  font-weight: 500;7697  letter-spacing: 0.005em;7698  color: var(--peach-t0);7699  line-height: 1;7700}7701.peach-pair-head-spacer { flex: 1; }77027703/* Bird stage ----------------------------------------------------------- */7704.peach-pair-stage {7705  position: relative;7706  height: 180px;7707  margin: 8px auto 18px;7708  width: 300px;7709  display: flex;7710  align-items: flex-end;7711  justify-content: center;7712}7713.peach-pair-bird-slot {7714  position: absolute;7715  bottom: 0;7716  width: 108px;7717  height: 108px;7718  transform-origin: 50% 95%;7719}7720.peach-pair-bird-slot-desktop { left: 12px; }7721.peach-pair-bird-slot-mobile { right: 12px; }7722.peach-pair-stage.act-handshake .peach-pair-bird-slot-desktop,7723.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop {7724  transform: translateX(6px);7725  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);7726}7727.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop { --bb-x: 6px; }7728.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { --bb-x: -6px; }7729.peach-pair-stage.act-paired .peach-pair-bird-slot {7730  animation: peach-pair-happy-bob 1.2s ease-in-out infinite;7731}7732.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { animation-delay: 0.2s; }7733@keyframes peach-pair-happy-bob {7734  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }7735  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }7736}77377738/* Bird internal -------------------------------------------------------- */7739.peach-pair-bird {7740  width: 108px;7741  height: 108px;7742  transform-origin: 50% 95%;7743}7744.peach-pair-bird svg { width: 100%; height: 100%; overflow: visible; }77457746.peach-pair-bird-body {7747  transform-origin: 50% 80%;7748  animation: peach-pair-bird-bob 2.4s ease-in-out infinite;7749}7750.peach-pair-bird-pose-chirping .peach-pair-bird-body { animation-duration: 1.4s; }7751.peach-pair-bird-pose-happy .peach-pair-bird-body   { animation: peach-pair-bird-celebrate 0.9s ease-in-out infinite; }7752.peach-pair-bird-pose-attentive .peach-pair-bird-body { animation-duration: 2.0s; }77537754@keyframes peach-pair-bird-bob {7755  0%, 100% { transform: translateY(0) rotate(0deg); }7756  50%      { transform: translateY(-2px) rotate(-1deg); }7757}7758@keyframes peach-pair-bird-celebrate {7759  0%, 100% { transform: translateY(0) rotate(0deg); }7760  25%      { transform: translateY(-4px) rotate(-2deg); }7761  75%      { transform: translateY(-4px) rotate(2deg); }7762}77637764.peach-pair-bird-wing {7765  transform-origin: 50% 50%;7766  animation: peach-pair-bird-flap 0.9s ease-in-out infinite;7767}7768.peach-pair-bird-pose-happy .peach-pair-bird-wing { animation-duration: 0.35s; }7769.peach-pair-bird-pose-attentive .peach-pair-bird-wing { animation-duration: 1.4s; }7770@keyframes peach-pair-bird-flap {7771  0%, 100% { transform: scaleY(1); }7772  50%      { transform: scaleY(0.85); }7773}77747775.peach-pair-bird-head-group {7776  transform-origin: 95px 52px;7777  animation: peach-pair-bird-bob-head 2.6s ease-in-out infinite;7778}7779.peach-pair-bird-pose-chirping .peach-pair-bird-head-group { animation-duration: 0.45s; }7780.peach-pair-bird-pose-attentive .peach-pair-bird-head-group { animation: none; }7781@keyframes peach-pair-bird-bob-head {7782  0%, 100% { transform: rotate(0deg); }7783  50%      { transform: rotate(3deg); }7784}77857786.peach-pair-bird-eye-group { transform-origin: center; }77877788.peach-pair-bird-aura {7789  animation: peach-pair-bird-aura 2.6s ease-in-out infinite;7790}7791.peach-pair-bird-pose-happy .peach-pair-bird-aura { animation-duration: 1.4s; }7792@keyframes peach-pair-bird-aura {7793  0%, 100% { opacity: 0; }7794  50%      { opacity: 0.18; }7795}77967797.peach-pair-bird-tail {7798  transform-origin: 50% 100%;7799  animation: peach-pair-bird-tail-wag 3s ease-in-out infinite;7800}7801@keyframes peach-pair-bird-tail-wag {7802  0%, 100% { transform: rotate(0deg); }7803  50%      { transform: rotate(2deg); }7804}78057806.peach-pair-bird-pose-happy .peach-pair-bird-shadow { animation: peach-pair-bird-shadow-pulse 0.9s ease-in-out infinite; }7807@keyframes peach-pair-bird-shadow-pulse {7808  0%, 100% { transform: scaleX(1); opacity: 0.45; }7809  50%      { transform: scaleX(0.92); opacity: 0.3; }7810}78117812/* Per-pose variants --------------------------------------------------- */7813/* Status copy ---------------------------------------------------------- */78147815.peach-pair-headline {7816  font-family: var(--font-display, Georgia, serif);7817  font-style: italic;7818  font-size: 20px;7819  font-weight: 500;7820  line-height: 1.2;7821  letter-spacing: 0.005em;7822  color: var(--peach-t0);7823  margin-bottom: 6px;7824}78257826.peach-pair-sub {7827  font-size: 12.5px;7828  line-height: 1.45;7829  color: var(--peach-t1);7830  max-width: 280px;7831  margin: 0 auto;7832  text-wrap: pretty;7833}78347835/* Status action -------------------------------------------------------- */7836.peach-pair-action {7837  margin: 2px 4px 10px;7838  margin-top: auto;7839  display: flex;7840  flex-direction: column;7841  gap: 8px;7842}78437844/* Screen-reader-only live region. Kept off the visual flow but read by7845   assistive tech as the pairing phase advances. */7846.peach-sr-only {7847  position: absolute;7848  width: 1px; height: 1px;7849  padding: 0; margin: -1px;7850  overflow: hidden;7851  clip: rect(0, 0, 0, 0);7852  white-space: nowrap;7853  border: 0;7854}78557856/* Reduced motion — stage simplifies to opacity transitions only */7857@media (prefers-reduced-motion: reduce) {7858  .peach-pair-bird-body,7859  .peach-pair-bird-head-group,7860  .peach-pair-bird-beak,7861  .peach-pair-bird-wing,7862  .peach-pair-bird-tuft,7863  .peach-pair-bird-tail,7864  .peach-pair-bird-eye-group,7865  .peach-pair-bird-aura,7866  .peach-pair-bird-slot,7867  .peach-pair-bird-slot-mobile {7868    animation: none !important;7869    transition: opacity 0.2s linear !important;7870  }7871}78727873/* Shell border and shadow in light mode: match dark mode's near-invisible7874   border weight so the popup frame looks the same in both themes. */7875.light .peach-shell,7876.light .peach-screen {7877  border-color: rgba(26, 18, 8, 0.07);7878  box-shadow:7879    0 2px 8px rgba(80, 56, 32, 0.08),7880    0 14px 48px rgba(80, 56, 32, 0.10),7881    0 0 0 1px rgba(26, 18, 8, 0.04);7882}78837884/* HOLE 4: the revoke confirmation carries its own disclosure, so it needs the7885   full row width rather than sitting inline beside the device name. */7886.peach-settings-row:has(> .peach-unpair-confirm) { flex-wrap: wrap; }7887.peach-unpair-confirm {7888  display: flex;7889  flex-direction: column;7890  gap: 8px;7891  width: 100%;7892}7893.peach-unpair-confirm-note {7894  margin: 0;7895  font-size: 0.6875rem;7896  line-height: 1.5;7897  color: var(--peach-t2);7898}78997900/* Sync mode selector — three named choices (public / private / off). Replaces7901   the old binary "local network only" toggle; see docs/sync-lan-retirement.md. */7902.peach-sync-mode {7903  display: flex;7904  align-items: flex-start;7905  gap: 10px;7906  width: 100%;7907  text-align: left;7908  padding: 10px 12px;7909  margin-top: 8px;7910  border-radius: 10px;7911  border: 1px solid var(--peach-border);7912  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);7913  color: var(--peach-t1);7914  cursor: pointer;7915  transition: border-color var(--peach-dur-80) var(--peach-curve-arrival),7916              background-color var(--peach-dur-80) var(--peach-curve-arrival);7917}7918.peach-sync-mode:hover:not(:disabled) {7919  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);7920}7921.peach-sync-mode.is-active {7922  border-color: var(--peach-accent);7923  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);7924}7925.peach-sync-mode:disabled { opacity: 0.6; cursor: default; }7926.peach-sync-mode-main { display: flex; flex-direction: column; gap: 3px; flex: 1; }7927.peach-sync-mode-title { font-size: 12px; }7928.peach-sync-mode-sub {7929  font-size: 11px;7930  line-height: 1.5;7931  color: var(--peach-t2);7932}7933.peach-sync-mode-pip {7934  flex: none;7935  margin-top: 3px;7936  width: 12px; height: 12px;7937  border-radius: 50%;7938  border: 1px solid var(--peach-t3);7939}7940.peach-sync-mode.is-active .peach-sync-mode-pip {7941  border-color: var(--peach-accent);7942  background:7943    radial-gradient(circle at 50% 50%, var(--peach-accent) 0 42%, transparent 44%);7944}7945.peach-sync-mode-disclosure {7946  margin: 10px 2px 0;7947  font-size: 11px;7948  line-height: 1.5;7949  color: var(--peach-t2);7950}7951.peach-sync-mode-warn { color: var(--peach-breach); }79527953/* Compact form, used mid-pairing: a quiet line, not a decision to make. */7954.peach-sync-mode-summary {7955  margin: 8px 2px 0;7956  font-size: 11px;7957  color: var(--peach-t2);7958  text-align: center;7959}7960.peach-sync-mode-change {7961  background: none;7962  border: none;7963  padding: 0;7964  font: inherit;7965  color: var(--peach-accent);7966  text-decoration: underline;7967  cursor: pointer;7968}