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[data-content-phase="enter"] {240  animation: peach-content-enter 135ms ease-out both;241}242.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }243244/* Stage */245.peach-stage {246  padding: 10px 20px 12px;247  display: grid;248  gap: 12px;249  align-content: start;250  min-width: 0;251  min-height: 0;252  max-width: 100%;253  overflow-y: auto;254  overflow-x: hidden;255  scrollbar-width: none;256  -ms-overflow-style: none;257  overscroll-behavior: contain;258}259.peach-stage::-webkit-scrollbar { display: none; }260261/* Entry name */262.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }263.peach-entry-header {264  position: relative;265  z-index: 1;266  display: flex;267  align-items: flex-start;268  gap: 6px;269  min-width: 0;270}271.peach-entry-header-name {272  flex: 1;273  min-width: 0;274}275.peach-entry-name {276  margin: 0;277  padding-bottom: 0.12em;278  font-family: var(--font-display);279  font-style: italic; font-weight: 400;280  font-size: 44px; line-height: 0.95;281  color: var(--peach-t0);282  display: -webkit-box;283  -webkit-line-clamp: 2;284  -webkit-box-orient: vertical;285  overflow: hidden;286  text-wrap: balance;287}288.peach-entry-name--lg { font-size: 40px; }289.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }290.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }291.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }292293/* Trash icon in entry header */294.peach-entry-trash-btn {295  flex-shrink: 0;296  padding: 4px;297  margin-top: 4px;298  background: transparent;299  border: none;300  cursor: pointer;301  color: var(--peach-t2);302  border-radius: 4px;303  transition: color 140ms ease, background 140ms ease;304  display: flex;305  align-items: center;306  justify-content: center;307}308.peach-entry-trash-btn:hover {309  color: var(--peach-t1);310  background: var(--peach-t3);311}312.peach-entry-trash-confirm {313  display: flex;314  align-items: center;315  gap: 6px;316  flex-shrink: 0;317  margin-top: 6px;318  flex-wrap: nowrap;319}320.peach-entry-trash-confirm-label {321  font-family: var(--font-mono);322  font-size: 0.5625rem;323  letter-spacing: 0.1em;324  color: var(--peach-t2);325  white-space: nowrap;326}327.peach-entry-name-button {328  padding: 0;329  background: transparent;330  text-align: left;331  cursor: pointer;332  max-width: 100%;333  overflow: hidden;334  display: block;335}336.peach-entry-name-char {337  display: inline-block;338  white-space: pre;339  opacity: 0;340  transform: translateY(0.22em);341  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;342  animation-delay: calc(var(--char-index, 0) * 20ms);343}344345/* Domain */346.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }347.peach-domain-row {348  width: 100%; border: 0; background: transparent; color: inherit;349  padding: 0; display: flex; justify-content: space-between; align-items: baseline;350  cursor: default;351}352.peach-domain-value {353  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;354  font-size: 0.625rem; font-style: italic;355  letter-spacing: 0.12em; color: var(--peach-t1);356}357358/* Fields */359.peach-fields { display: grid; gap: 10px; }360.peach-field-card { display: grid; gap: 7px; }361.peach-label {362  font-family: Inter, system-ui, sans-serif;363  text-transform: uppercase; letter-spacing: 0.2em;364  font-size: 0.5rem; color: var(--peach-t2);365}366.peach-add-field-btn {367  align-self: flex-start;368  background: none; border: none; padding: 2px 0;369  font-family: Inter, system-ui, sans-serif;370  font-size: 0.6875rem; color: var(--peach-accent);371  cursor: pointer; opacity: 0.75;372  letter-spacing: 0.02em;373}374.peach-add-field-btn:hover { opacity: 1; }375.peach-field-value-row {376  display: flex; justify-content: space-between;377  align-items: center; gap: 8px;378  min-width: 0;379}380.peach-field-value {381  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;382  font-size: 0.8125rem; color: var(--peach-t1);383  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;384  flex: 1;385  min-width: 0;386}387.peach-password-value {388  display: inline-flex;389  align-items: center;390  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;391  font-size: 1rem; letter-spacing: 0.3em; color: var(--peach-t0);392  overflow: hidden;393  text-overflow: ellipsis;394  white-space: nowrap;395  flex: 1;396  min-width: 0;397  max-width: 100%;398}399.peach-password-value.is-revealed {400  font-size: 0.875rem;401  letter-spacing: 0.08em;402}403.peach-password-text,404.peach-password-mask {405  display: block;406  width: 100%;407  overflow: hidden;408  white-space: nowrap;409  /* Render as uniform mid-line bullets, not baseline periods */410  font-family: Inter, system-ui, sans-serif;411  font-size: 0.625rem;412  letter-spacing: 3px;413  user-select: none;414}415.peach-field-actions { display: flex; gap: 4px; align-items: center; }416.peach-password-strength { display: flex; align-items: center; gap: 8px; }417.peach-strength-bar { display: flex; gap: 3px; }418419.peach-strength-label {420  font-family: "IBM Plex Mono", monospace;421  font-style: italic;422  font-size: 0.5625rem;423  font-weight: 300;424  min-width: 36px;425  text-align: right;426  color: var(--peach-t2);427  letter-spacing: 0.06em;428}429430.peach-strength-hairline {431  display: flex;432  align-items: center;433  gap: 10px;434  margin-top: -2px;435}436437.peach-strength-hairline-track {438  flex: 1;439  height: 3px;440  border-radius: 2px;441  background: var(--peach-s2);442  overflow: hidden;443}444445.peach-strength-hairline-fill {446  height: 100%;447  border-radius: 2px;448  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),449    background 400ms ease;450}451452/* Note content (display) */453.peach-note-content {454  border-top: 1px solid var(--peach-t3);455  padding-top: 10px;456  font-family: var(--font-display);457  font-size: 0.9375rem;458  line-height: 1.75;459  color: var(--peach-t1);460}461462/* ── Inline editing ─────────────────────────────────────────────────── */463464/* Clickable display values */465.peach-inline-clickable {466  cursor: text;467  border-radius: 3px;468  transition: background 150ms ease;469}470.peach-inline-clickable:hover {471  background: rgba(240, 232, 216, 0.05);472}473474/* Subtle "edit" hint that appears on hover */475.peach-inline-edit-hint {476  font-family: Inter, system-ui, sans-serif;477  font-size: 0.5625rem;478  text-transform: uppercase;479  letter-spacing: 0.14em;480  color: var(--peach-t2);481  opacity: 0;482  transition: opacity 120ms ease;483  pointer-events: none;484  margin-left: 6px;485  flex-shrink: 0;486}487.peach-domain-row:hover .peach-inline-edit-hint {488  opacity: 1;489}490491/* Title editing */492.peach-inline-title-wrap {493  display: flex;494  flex-direction: column;495  gap: 6px;496}497.peach-inline-title-input {498  font-family: var(--font-display);499  font-style: italic;500  font-weight: 400;501  font-size: 40px;502  line-height: 0.95;503  color: var(--peach-t0);504  background: transparent;505  border: none;506  border-bottom: 1px solid var(--peach-accent);507  outline: none;508  width: 100%;509  padding: 2px 0;510}511512/* Generic inline field */513.peach-inline-field-wrap {514  display: flex;515  flex-direction: column;516  gap: 6px;517}518.peach-inline-input {519  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;520  font-size: 0.8125rem;521  color: var(--peach-t0);522  background: transparent;523  border: none;524  border-bottom: 1px solid var(--peach-accent);525  outline: none;526  width: 100%;527  padding: 3px 0;528}529.peach-inline-textarea {530  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;531  font-size: 0.6875rem;532  line-height: 1.7;533  color: var(--peach-t0);534  background: rgba(240, 232, 216, 0.04);535  border: 1px solid var(--peach-accent);536  border-radius: 4px;537  outline: none;538  width: 100%;539  padding: 8px;540  resize: vertical;541  min-height: 80px;542}543544/* Save / cancel row */545.peach-inline-actions {546  display: flex;547  gap: 6px;548  align-items: center;549}550.peach-inline-save-btn,551.peach-inline-cancel-btn {552  display: inline-flex;553  align-items: center;554  justify-content: center;555  width: 26px;556  height: 26px;557  border-radius: 4px;558  border: none;559  cursor: pointer;560  transition: background 140ms ease, opacity 140ms ease;561  flex-shrink: 0;562}563.peach-inline-save-btn {564  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);565  color: var(--peach-accent);566}567.peach-inline-save-btn:hover:not(:disabled) {568  background: color-mix(in srgb, var(--peach-accent) 30%, transparent);569}570.peach-inline-cancel-btn {571  background: rgba(240, 232, 216, 0.06);572  color: var(--peach-t2);573}574.peach-inline-cancel-btn:hover:not(:disabled) {575  background: rgba(240, 232, 216, 0.12);576  color: var(--peach-t1);577}578.peach-inline-save-btn:disabled,579.peach-inline-cancel-btn:disabled {580  opacity: 0.4;581  cursor: not-allowed;582}583584/* "is-editing" card state */585.peach-field-card.is-editing {586  background: rgba(240, 232, 216, 0.02);587  border-radius: 6px;588  padding: 8px;589  margin: -8px;590}591592/* Inline tag editor on Entry detail view */593.peach-inline-tag-editor {594  display: flex;595  flex-direction: column;596  gap: 6px;597}598599/* Quiet inline "+ add X" link in the entry detail body */600.peach-entry-add-link {601  justify-self: start;602  margin-top: 8px;603}604605/* Additional URLs editor revealed by clicking the URL field */606.peach-additional-urls {607  display: flex;608  flex-direction: column;609  gap: 6px;610  margin-top: 8px;611}612.peach-additional-urls-label {613  font-size: 0.5625rem;614  letter-spacing: 0.1em;615  text-transform: uppercase;616  color: var(--peach-t2);617  margin-bottom: 2px;618}619/* UI-5 / LV-4: recovery words grid in the view-words reveal. */620.peach-recovery-words-grid {621  display: grid;622  grid-template-columns: 1fr 1fr;623  gap: 4px 10px;624}625.peach-recovery-word {626  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;627  font-size: 11px;628  color: var(--peach-t0);629}630.peach-recovery-word b {631  color: var(--peach-t2);632  font-weight: 400;633  margin-right: 4px;634}635636/* UI-1 / HV-1b: dismissible sync alert banners at the top of the vault view. */637.peach-sync-alerts {638  display: flex;639  flex-direction: column;640  gap: 6px;641  padding: 8px 12px 0;642  /* Grid item of .peach-shell: without a zero min-width the nowrap alert text643     sizes this item to its min-content, blowing the fixed-width shell past644     320px and clipping/distorting everything else in it. */645  min-width: 0;646}647.peach-sync-alert {648  display: flex;649  align-items: center;650  gap: 8px;651  padding: 8px 10px;652  border-radius: 7px;653  min-width: 0;654  max-width: 100%;655  background: color-mix(in srgb, #C8A840 14%, transparent);656  border: 1px solid color-mix(in srgb, #C8A840 38%, transparent);657}658.peach-sync-alert-text {659  flex: 1;660  min-width: 0;661  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;662  font-size: 10px;663  line-height: 1.45;664  color: var(--peach-t0);665  overflow: hidden;666  text-overflow: ellipsis;667  white-space: nowrap;668}669.peach-sync-alert-flip {670  flex-shrink: 0;671  background: none;672  border: none;673  color: var(--peach-t2);674  font-size: 14px;675  line-height: 1;676  cursor: pointer;677  padding: 0 2px;678}679.peach-sync-alert-flip:hover { color: var(--peach-t0); }680.peach-sync-alert-count {681  flex-shrink: 0;682  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;683  font-size: 9px;684  color: var(--peach-t2);685  min-width: 24px;686  text-align: center;687}688.peach-sync-alert-dismiss {689  flex-shrink: 0;690  background: none;691  border: none;692  color: var(--peach-t2);693  font-size: 14px;694  line-height: 1;695  cursor: pointer;696  padding: 0 2px;697}698.peach-sync-alert-dismiss:hover { color: var(--peach-t0); }699700/* UI-8 / LV-2: non-blocking homograph warning under the URL editor. */701.peach-homograph-warning {702  margin: 4px 0 2px;703  padding: 6px 8px;704  border-radius: 6px;705  background: color-mix(in srgb, var(--peach-breach) 12%, transparent);706  border: 1px solid color-mix(in srgb, var(--peach-breach) 36%, transparent);707  color: var(--peach-t1);708  font-size: 0.6875rem;709  line-height: 1.4;710}711.peach-additional-url-row {712  display: flex;713  align-items: center;714  gap: 6px;715}716.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }717.peach-additional-url-remove {718  background: transparent;719  border: 1px solid var(--peach-t3);720  color: var(--peach-t2);721  width: 22px;722  height: 22px;723  border-radius: 4px;724  cursor: pointer;725  font-size: 0.875rem;726  line-height: 1;727  display: inline-flex;728  align-items: center;729  justify-content: center;730  flex-shrink: 0;731  transition: color 120ms ease, border-color 120ms ease;732}733.peach-additional-url-remove:hover:not(:disabled) {734  color: var(--peach-accent);735  border-color: var(--peach-border-accent);736}737.peach-additional-urls-add { align-self: flex-start; }738739/* TOTP band */740.peach-totp-band {741  border-top: 1px solid var(--peach-t3);742  padding: 12px 20px 14px;743  position: relative;744  display: grid;745  grid-template-columns: 1fr auto;746  gap: 10px;747}748.peach-totp-main {749  min-width: 0;750  cursor: pointer;751  user-select: none;752}753.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }754.peach-totp-code-row {755  display: flex;756  align-items: flex-end;757  gap: 10px;758  min-width: 0;759}760.peach-totp-code {761  margin: 2px 0 0;762  font-family: var(--font-display);763  font-style: italic;764  font-weight: 300;765  font-size: 38px; color: var(--peach-accent);766  line-height: 0.95; min-height: 1em;767  min-width: 0;768}769.peach-totp-code-text {770  display: inline-flex;771  overflow: hidden;772  text-overflow: ellipsis;773  white-space: nowrap;774}775776.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }777.peach-totp-countdown {778  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;779  font-size: 22px; color: var(--peach-t1);780}781.peach-totp-ring { transform: rotate(-90deg); }782.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }783.peach-totp-ring-progress {784  fill: none; stroke: var(--peach-accent); stroke-width: 2;785  stroke-linecap: round;786  transition: stroke-dashoffset 1s linear, stroke 500ms ease;787}788/* Search bar */789.peach-search-wrap {790  border-top: 1px solid var(--peach-t3);791  background: var(--peach-s1);792  min-height: 54px; position: relative;793  box-shadow: inset 0 6px 18px transparent;794  transition: box-shadow 700ms ease;795}796.peach-search-wrap::before {797  content: "";798  position: absolute;799  left: 0;800  top: 0;801  height: 2px;802  width: var(--peach-totp-progress, 0%);803  background: var(--peach-accent);804  opacity: 0;805  transition: width 1s linear, opacity 180ms ease;806  pointer-events: none;807}808.peach-shell[data-totp-active="true"] .peach-search-wrap::before {809  opacity: 0.9;810}811.peach-shell[data-totp-active="true"] .peach-search-wrap {812  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);813}814815@keyframes peach-totp-code-flare {816  0%   { filter: brightness(1); }817  25%  { filter: brightness(1.3); }818  100% { filter: brightness(1); }819}820.peach-totp-code.is-hot {821  animation: peach-totp-code-flare 3000ms ease-in-out both;822}823.peach-search-bar {824  min-height: 54px;825  display: grid;826  grid-template-columns: auto minmax(0, 1fr) auto;827  align-items: center;828  gap: 8px; padding: 0 9px 0 12px;829}830.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }831.peach-search-input {832  border: 0; background: transparent; color: var(--peach-t0);833  font-family: var(--font-display);834  font-style: italic; font-size: 18px;835  outline: none; width: 100%; min-width: 0; padding: 0;836  caret-color: var(--peach-accent);837}838.peach-search-input::placeholder { color: var(--peach-t2); }839.peach-search-meta {840  display: grid;841  grid-auto-flow: column;842  align-items: center;843  justify-content: end;844  gap: 6px;845  min-width: max-content;846}847.peach-search-counter {848  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;849  font-size: 0.625rem; color: var(--peach-t2);850  display: inline-flex;851  align-items: center;852  line-height: 1;853}854.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }855856/* Buttons */857.peach-btn {858  border: 1px solid transparent; border-radius: 12px;859  background: transparent; color: var(--peach-t0);860  font-family: Inter, system-ui, sans-serif;861  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;862  cursor: pointer;863  transition:864    background-color var(--peach-dur-80) var(--peach-curve-arrival),865    color var(--peach-dur-80) var(--peach-curve-arrival),866    border-color var(--peach-dur-150) var(--peach-curve-arrival);867}868.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }869.peach-btn:disabled {870  opacity: 0.45;871  cursor: not-allowed;872}873.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }874.peach-btn--md { min-height: 38px; }875.peach-btn--accent {876  background: var(--peach-accent);877  color: rgba(0,0,0,0.92);878  font-weight: 500;879  box-shadow:880    0 1px 0 rgba(255,255,255,0.08) inset,881    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),882    0 3px 16px var(--peach-glow),883    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);884}885.peach-btn--accent:hover:not(:disabled) {886  background: var(--peach-accent);887  filter: brightness(1.10) saturate(1.05);888  box-shadow:889    0 1px 0 rgba(255,255,255,0.10) inset,890    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),891    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),892    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);893}894.peach-btn--ghost:not(.peach-icon-btn) { border-color: var(--peach-t3); color: var(--peach-t1); }895.peach-btn--ghost.peach-icon-btn { color: var(--peach-t1); }896.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }897.peach-icon-btn {898  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;899  display: inline-flex; align-items: center; justify-content: center;900  border-color: transparent;901  transition:902    color var(--peach-dur-80) var(--peach-curve-arrival),903    box-shadow var(--peach-dur-150) var(--peach-curve-arrival),904    background-color var(--peach-dur-80) var(--peach-curve-arrival);905}906.peach-icon-btn:hover:not(:disabled) {907  background: transparent;908  color: var(--peach-accent);909  box-shadow: 0 0 12px color-mix(in srgb, var(--peach-accent) 28%, transparent),910              0 0 4px color-mix(in srgb, var(--peach-accent) 16%, transparent);911}912913/* Topbar sync. Only rendered when a device is paired, so it never sits there914   as a control that cannot do anything. */915.peach-sync-btn.is-syncing { color: var(--peach-accent); }916.peach-sync-btn.is-syncing .peach-sync-icon {917  animation: peach-sync-spin 900ms linear infinite;918  transform-origin: 50% 50%;919}920.peach-sync-btn.is-ok { color: var(--peach-accent); }921.peach-sync-btn.is-error { color: var(--peach-breach, #d66); }922@keyframes peach-sync-spin { to { transform: rotate(360deg); } }923924/* Sync indicator light — same taxonomy as the Settings pip, sized for the925   14px topbar icon. Unlit when nothing has happened yet; never green when926   sync is not actually working. */927.peach-sync-btn { position: relative; }928.peach-sync-pip {929  position: absolute;930  top: 2px;931  right: 2px;932  width: 5px;933  height: 5px;934  border-radius: 50%;935  background: transparent;936}937.peach-sync-pip.is-ok,938.peach-sync-pip.is-busy {939  background: var(--peach-health-ok);940  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-health-ok) 60%, transparent);941}942.peach-sync-pip.is-busy { animation: peach-sync-pip-pulse 1600ms ease-in-out infinite; }943/* Yellow — the dial did not reach the peer, but the alarm will retry. Distinct944   from is-error (red) so a transient network miss does not look like a real945   fault. */946.peach-sync-pip.is-warn {947  background: var(--peach-health-warn);948  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-health-warn) 60%, transparent);949}950.peach-sync-pip.is-error {951  background: var(--peach-breach);952  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-breach) 60%, transparent);953}954@keyframes peach-sync-pip-pulse {955  0%, 100% { opacity: 1; }956  50% { opacity: 0.35; }957}958@media (prefers-reduced-motion: reduce) {959  .peach-sync-btn.is-syncing .peach-sync-icon { animation: none; opacity: 0.6; }960  .peach-sync-pip.is-busy { animation: none; }961}962963.peach-btn:focus-visible {964  outline: none;965  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);966}967968/* Lock button */969.peach-lock-icon { transform-origin: center; }970/* Beat .peach-btn--ghost.peach-icon-btn (rest) and .peach-icon-btn:hover971   (hover) so the lock reads accent in both states. */972.peach-btn--ghost.peach-icon-btn.peach-lock-btn { color: var(--peach-accent); }973/* Copy button */974.peach-copy-btn {975  position: relative; overflow: hidden;976  color: var(--peach-t2); border-color: var(--peach-t3);977}978.peach-copy-icon {979  display: inline-flex; align-items: center; justify-content: center;980  position: relative; z-index: 1;981}982.peach-copy-icon-svg { display: block; }983.peach-copy-sheen {984  position: absolute; inset: 0;985  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%);986  opacity: 0; transform: scaleX(0.15); transform-origin: left center;987}988.peach-copy-btn.is-copied {989  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;990  box-shadow:991    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),992    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),993    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);994}995.peach-copy-btn.is-copied .peach-copy-icon {996  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;997}998.peach-copy-btn.is-copied .peach-copy-sheen {999  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;1000}1001.peach-copy-btn.is-retreat {1002  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;1003}1004.peach-copy-btn.is-retreat .peach-copy-sheen {1005  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;1006}1007.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }1008.peach-copy-drain-bar {1009  display: block; width: 100%; height: 100%;1010  background: var(--peach-accent); opacity: 0.7;1011  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;1012}10131014/* Unlock screen elements */1015.peach-underline-input {1016  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);1017  padding: 6px 0; background: transparent; color: var(--peach-t0);1018  outline: none;1019  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1020  font-size: 0.8125rem;1021  caret-color: var(--peach-accent);1022}1023.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }1024.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }1025.peach-hint {1026  margin: 0;1027  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1028  font-size: 0.625rem; color: var(--peach-t2);1029}10301031/* Desktop helper (peach-sync) code pairing — additive hooks. The shared pairing1032   classes (peach-pair-*) carry the shared layout; these only style the parts1033   unique to the typed-code path. Inline styles cover the SAS/confirm gate. */1034.peach-desktop-pair { display: flex; flex-direction: column; }1035.peach-desktop-searching,1036.peach-desktop-paired,1037.peach-desktop-error {1038  display: flex; flex-direction: column; gap: 8px;1039  padding: 4px 18px 16px; text-align: center; align-items: center;1040}10411042/* Sync card "pair a device" options — bordered, raised tappable rows that read1043   as buttons on any card hue (theme-neutral light overlay, not the peach accent). */1044.peach-sync-pair-option {1045  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;1046  width: 100%; text-align: left; cursor: pointer; font-family: inherit;1047  padding: 11px 12px; border-radius: 10px;1048  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);1049  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);1050  color: var(--peach-t0);1051  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;1052}1053.peach-sync-pair-option + .peach-sync-pair-option { margin-top: 8px; }1054.peach-sync-pair-option:hover {1055  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);1056  border-color: color-mix(in srgb, var(--peach-t0) 28%, transparent);1057}1058.peach-sync-pair-option:active { transform: translateY(1px); }1059.peach-sync-pair-option:disabled { opacity: 0.5; cursor: default; }1060.peach-sync-pair-option-icon { flex-shrink: 0; display: flex; align-items: center; color: var(--peach-t1); margin-top: 1px; }1061.peach-sync-pair-option-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }1062.peach-sync-pair-option-title { font-size: 0.8125rem; font-weight: 600; }1063.peach-sync-pair-option-sub { font-size: 0.6875rem; line-height: 1.45; color: var(--peach-t2); }1064.peach-sync-pair-option-chevron { flex-shrink: 0; color: var(--peach-t2); font-size: 1.05rem; line-height: 1.3; }10651066/* Breach badge */1067.peach-breach-badge {1068  display: flex;1069  position: relative;1070  z-index: 1;1071  align-items: center;1072  gap: 7px;1073  font-size: 0.5625rem;1074  color: var(--peach-breach);1075  padding: 5px 10px;1076  margin-bottom: 4px;1077  border-radius: 8px;1078  background: rgba(220, 80, 60, 0.07);1079  border: 1px solid rgba(220, 80, 60, 0.18);1080  letter-spacing: 0.04em;1081}10821083.peach-password-value.is-breached {1084  color: rgba(220, 80, 60, 0.75);1085  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1086}10871088/* ── Overlay views ─────────────────────────────────────────────────── */1089.peach-overlay-view {1090  position: absolute;1091  inset: 0;1092  display: flex;1093  flex-direction: column;1094  background:1095    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1096    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1097    var(--peach-bg);1098  z-index: 2;1099  overflow: hidden;1100  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1101}11021103.peach-overlay-view:has(.stk-shell) {1104  background: var(--peach-bg);1105}1106@keyframes overlay-in {1107  from { opacity: 0; transform: translateY(8px); }1108  to   { opacity: 1; transform: translateY(0); }1109}1110.peach-overlay-view.ov-enter-up {1111  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1112}11131114.peach-overlay-view.ov-enter-right {1115  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1116}1117.peach-overlay-view.ov-exit-right {1118  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1119}11201121@keyframes ov-enter-up {1122  from { opacity: 0; transform: translateY(18px); }1123  to   { opacity: 1; transform: translateY(0); }1124}11251126@keyframes ov-enter-right {1127  from { opacity: 0; transform: translateX(20px); }1128  to   { opacity: 1; transform: translateX(0); }1129}1130@keyframes ov-exit-right {1131  from { opacity: 1; transform: translateX(0); }1132  to   { opacity: 0; transform: translateX(20px); }1133}11341135/* Overlay shared header */1136.peach-overlay-header {1137  padding: 10px 12px 8px;1138  display: flex;1139  align-items: center;1140  gap: 10px;1141  flex-shrink: 0;1142}1143/* Back button — circular pill matching the settings stack masthead (.stk-back) */1144.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1145  width: 28px;1146  height: 28px;1147  flex: 0 0 28px;1148  border-radius: 999px;1149  border: 1px solid var(--peach-border);1150  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1151  color: var(--peach-t1);1152  padding: 0;1153}1154.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1155  color: var(--peach-t0);1156  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1157  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1158}1159.peach-overlay-title {1160  font-family: var(--font-display);1161  font-style: italic;1162  font-weight: 400;1163  font-size: 20px;1164  line-height: 1;1165  color: var(--peach-t0);1166  flex: 1;1167  text-align: center;1168}1169/* Balances the 28px back button so the title stays visually centred */1170.peach-overlay-spacer {1171  width: 28px;1172  flex: 0 0 28px;1173}11741175.peach-overlay-card {1176  background: var(--peach-s1);1177  border: 1px solid var(--peach-t3);1178  border-radius: 12px;1179  overflow: hidden;1180  width: 100%;1181}11821183.peach-settings-stack {1184  display: flex;1185  flex-direction: column;1186  gap: 6px;1187}11881189.peach-settings-input {1190  width: 100%;1191  box-sizing: border-box;1192  padding: 8px 10px;1193  background: rgba(0, 0, 0, 0.22);1194  border: 1px solid transparent;1195  border-radius: 6px;1196  color: var(--peach-t0);1197  font-family: var(--font-ui);1198  font-size: 0.75rem;1199  outline: none;1200  transition: border-color 120ms ease, background 120ms ease;1201}12021203.peach-settings-input:focus {1204  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1205  background: rgba(0, 0, 0, 0.28);1206}12071208.peach-settings-input[type="password"] {1209  font-family: var(--font-mono);1210  letter-spacing: 0.04em;1211}12121213.peach-info-notice {1214  font-size: 0.6875rem;1215  color: var(--peach-t1);1216  line-height: 1.5;1217  background: var(--surface-card);1218  border: 1px solid var(--peach-t3);1219  border-radius: 6px;1220  padding: 8px 10px;1221}12221223.peach-info-notice--warn {1224  border-color: rgba(220, 38, 38, 0.4);1225  background: rgba(220, 38, 38, 0.06);1226  color: rgba(220, 38, 38, 0.92);1227  margin-bottom: 8px;1228}12291230/* Warm helpful-context note — reads as a soft aside, not an alert. */12311232.peach-strength-fill {1233  height: 100%;1234  border-radius: 2px;1235  transition: width 120ms ease, background 120ms ease;1236}12371238/* ── List view ───────────────────────────────────────────────────────── */1239.peach-list-top {1240  padding: 0 10px;1241  min-height: 46px;1242  display: flex;1243  align-items: center;1244  gap: 6px;1245  border-bottom: 1px solid var(--peach-t3);1246  flex-shrink: 0;1247  background: var(--peach-s1);1248}12491250.peach-vault-list {1251  flex: 1;1252  overflow-y: auto;1253  scrollbar-width: none;1254}1255.peach-vault-list::-webkit-scrollbar { display: none; }12561257/* Scrollbar — vault list */1258.peach-vault-list {1259  scrollbar-width: thin;1260  scrollbar-color: var(--peach-t3) transparent;1261}12621263.peach-vault-list::-webkit-scrollbar {1264  width: 3px;1265}12661267.peach-vault-list::-webkit-scrollbar-thumb {1268  background: var(--peach-t3);1269  border-radius: 2px;1270}12711272.peach-entry-row {1273  width: 100%;1274  display: flex;1275  align-items: center;1276  gap: 10px;1277  padding: 9px 16px;1278  background: transparent;1279  border: none;1280  border-bottom: 1px solid var(--peach-t3);1281  cursor: pointer;1282  color: inherit;1283  text-align: left;1284  transition: background 80ms ease;1285}1286.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1287.peach-entry-row:last-child { border-bottom: none; }1288.peach-entry-row.is-active {1289  box-shadow: inset 2px 0 0 var(--peach-accent);1290  background: rgba(240,232,216,0.03);1291}1292.peach-entry-row:focus-visible {1293  outline: none;1294  box-shadow: 0 0 0 1px var(--peach-border-accent);1295  background: rgba(240,232,216,0.03);1296}1297.peach-entry-row-icon {1298  width: 26px; height: 26px;1299  border-radius: 7px;1300  border: 1px solid var(--peach-t3);1301  display: flex; align-items: center; justify-content: center;1302  color: var(--peach-t2);1303  flex-shrink: 0;1304}1305.peach-entry-row-icon.is-breach {1306  border-color: rgba(220,80,60,0.3);1307  color: rgba(220,80,60,0.7);1308}13091310/* Title-initials chip used as the favicon fallback for login entries whose1311 * real favicon hasn't been cached by the browser yet (freshly-imported,1312 * never-visited domains). Background colour is hashed from the title so1313 * the same entry always shows the same chip. The chip fits the same1314 * 26×26 row icon slot the favicon would take. */1315.peach-favicon-initials {1316  display: inline-flex;1317  align-items: center;1318  justify-content: center;1319  width: 100%;1320  height: 100%;1321  border-radius: 4px;1322  font-family: "IBM Plex Mono", monospace;1323  font-size: 0.5625rem;1324  font-weight: 600;1325  letter-spacing: 0.04em;1326  color: rgba(240, 232, 216, 0.92);1327  text-transform: uppercase;1328  user-select: none;1329}1330.peach-entry-row-info { flex: 1; min-width: 0; }1331.peach-entry-row-name {1332  display: block;1333  font-family: var(--font-display);1334  font-size: 1.0625rem;1335  font-style: italic;1336  font-weight: 400;1337  color: var(--peach-t0);1338  line-height: 1.2;1339  white-space: nowrap;1340  overflow: hidden;1341  text-overflow: ellipsis;1342}1343.peach-entry-row-meta {1344  display: block;1345  font-family: "IBM Plex Mono", monospace;1346  font-size: 0.5625rem;1347  color: var(--peach-t2);1348  margin-top: 1px;1349  letter-spacing: 0.05em;1350}1351.peach-entry-row-dot {1352  width: 5px; height: 5px;1353  border-radius: 50%;1354  background: rgba(220,80,60,0.7);1355  flex-shrink: 0;1356}1357.peach-new-entry-row {1358  display: flex;1359  align-items: center;1360  justify-content: center;1361  gap: 6px;1362  width: 100%;1363  padding: 11px;1364  background: transparent;1365  border: none;1366  border-top: 1px solid var(--peach-t3);1367  color: var(--peach-t2);1368  font-family: "IBM Plex Mono", monospace;1369  font-size: 0.5625rem;1370  text-transform: uppercase;1371  letter-spacing: 0.14em;1372  cursor: pointer;1373  flex-shrink: 0;1374  transition: color 120ms ease, background 120ms ease;1375}1376.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }13771378/* ── Multi-select mode ─────────────────────────────────────────────── */13791380/* Sort bar in select mode */1381.peach-select-cancel-btn {1382  background: transparent;1383  border: none;1384  padding: 0 4px;1385  cursor: pointer;1386  font-family: "IBM Plex Mono", monospace;1387  font-size: 0.5625rem;1388  letter-spacing: 0.12em;1389  text-transform: uppercase;1390  color: var(--peach-t2);1391  transition: color 140ms ease;1392  flex-shrink: 0;1393}1394.peach-select-cancel-btn:hover { color: var(--peach-t0); }13951396.peach-select-count-label {1397  flex: 1;1398  text-align: center;1399  font-family: "IBM Plex Mono", monospace;1400  font-size: 0.5625rem;1401  letter-spacing: 0.14em;1402  text-transform: uppercase;1403  color: var(--peach-t1);1404}14051406.peach-select-all-btn {1407  background: transparent;1408  border: none;1409  padding: 0 4px;1410  cursor: pointer;1411  font-family: "IBM Plex Mono", monospace;1412  font-size: 0.5625rem;1413  letter-spacing: 0.12em;1414  text-transform: uppercase;1415  color: var(--peach-t2);1416  transition: color 140ms ease;1417  flex-shrink: 0;1418}1419.peach-select-all-btn:hover { color: var(--peach-accent); }14201421/* List in select mode */1422.peach-vault-list.is-selecting .peach-entry-row {1423  cursor: default;1424}1425.peach-vault-list.is-selecting .peach-entry-row:hover {1426  background: rgba(240,232,216,0.02);1427}1428.peach-vault-list.is-selecting .peach-entry-row.is-selected {1429  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1430}1431.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1432  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1433}14341435/* Select indicator circles in icon slot */1436.peach-entry-row-icon.is-select-icon {1437  color: var(--peach-t2);1438}1439.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1440  color: var(--peach-accent);1441}14421443/* Delete action bar at bottom (replaces new-entry row) */1444.peach-select-action-bar {1445  display: flex;1446  align-items: center;1447  justify-content: center;1448  gap: 7px;1449  width: 100%;1450  padding: 11px;1451  background: transparent;1452  border: none;1453  border-top: 1px solid var(--peach-t3);1454  color: var(--peach-t1);1455  font-family: "IBM Plex Mono", monospace;1456  font-size: 0.5625rem;1457  text-transform: uppercase;1458  letter-spacing: 0.14em;1459  cursor: pointer;1460  flex-shrink: 0;1461  transition: color 120ms ease, background 120ms ease;1462}1463.peach-select-action-bar:not(:disabled):hover {1464  color: var(--peach-t0);1465  background: rgba(220,80,60,0.06);1466}1467.peach-select-action-bar:not(:disabled):hover svg {1468  stroke: rgba(220,80,60,0.8);1469}1470.peach-select-action-bar:disabled,1471.peach-select-action-bar.is-empty {1472  color: var(--peach-t2);1473  cursor: default;1474  opacity: 0.5;1475}1476.peach-search-counter-list {1477  white-space: nowrap;1478  flex-shrink: 0;1479}1480.peach-list-empty {1481  min-height: 180px;1482  display: grid;1483  place-items: center;1484  color: var(--peach-t2);1485  font-family: "IBM Plex Mono", monospace;1486  font-size: 0.6875rem;1487}14881489/* ── Settings view ───────────────────────────────────────────────────── */1490.peach-settings-body {1491  flex: 1;1492  overflow-y: auto;1493  min-height: 0;1494  display: flex;1495  flex-direction: column;1496  padding: 2px 0 10px;1497}1498.peach-settings-group {1499  margin: 4px 10px;1500  padding: 9px 14px 11px;1501  border-radius: 12px;1502  border: 1px solid rgba(255, 255, 255, 0.07);1503  background: rgba(26, 20, 16, 0.60);1504  backdrop-filter: blur(10px) saturate(1.3);1505  -webkit-backdrop-filter: blur(10px) saturate(1.3);1506}15071508.peach-settings-group + .peach-settings-group {1509  margin-top: 6px;1510}15111512@supports not (backdrop-filter: blur(1px)) {1513  .peach-settings-group {1514    background: rgba(26, 20, 16, 0.90);1515    border-color: rgba(255, 255, 255, 0.09);1516    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1517  }1518}15191520.light .peach-settings-group {1521  background: rgba(245, 237, 226, 0.70);1522  border-color: rgba(26, 18, 8, 0.08);1523  backdrop-filter: blur(10px) saturate(1.2);1524  -webkit-backdrop-filter: blur(10px) saturate(1.2);1525}15261527@supports not (backdrop-filter: blur(1px)) {1528  .light .peach-settings-group {1529    background: rgba(245, 237, 226, 0.97);1530    border-color: rgba(26, 18, 8, 0.10);1531  }1532}15331534.peach-export-card {1535  display: grid;1536  gap: 10px;1537}1538.peach-rune-canvas {1539  border: 1px solid color-mix(in srgb, var(--peach-t0) 22%, transparent);1540  border-radius: 8px;1541  background: rgba(0, 0, 0, 0.22);1542  flex: 1;1543  align-self: center;1544}1545.peach-script-input {1546  font-family: "PeachScript", monospace;1547  font-size: 0.6875rem;1548  line-height: 1.9;1549  letter-spacing: 0.06em;1550  color: var(--peach-t0);1551  background: rgba(0, 0, 0, 0.22);1552  border: none;1553  border-radius: 6px;1554  padding: 12px;1555  width: 100%;1556  min-height: 96px;1557  resize: vertical;1558  word-break: break-all;1559  scrollbar-width: none;1560  -ms-overflow-style: none;1561}15621563.peach-script-input::-webkit-scrollbar { display: none; }1564.peach-csv-warning {1565  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1566  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1567  color: var(--peach-t0);1568  border-radius: 6px;1569  padding: 10px 12px;1570  margin-bottom: 8px;1571  font-size: 0.75rem;1572  line-height: 1.45;1573}1574.peach-export-card--primary {1575  background:1576    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1577}15781579/* Export menu — distribute the three format cards across the popup. */1580.peach-export-menu {1581  display: flex;1582  flex-direction: column;1583  flex: 1;1584  min-height: 0;1585}1586.peach-export-menu .peach-settings-group {1587  flex: 1;1588  display: flex;1589  flex-direction: column;1590  justify-content: center;1591  gap: 10px;1592}15931594/* Result view — the script-string fills the remaining vertical surface. */1595.peach-export-result-group {1596  flex: 1;1597  display: flex;1598  flex-direction: column;1599  min-height: 0;1600  border-bottom: none;1601}1602.peach-export-result-group .peach-export-card {1603  flex: 1;1604  min-height: 0;1605  display: flex;1606  flex-direction: column;1607  gap: 10px;1608}1609.peach-export-result-group .peach-export-card-copy {1610  flex-shrink: 0;1611}1612.peach-export-result-group .peach-settings-label {1613  flex-shrink: 0;1614}1615.peach-export-result-group button {1616  flex-shrink: 0;1617}16181619.peach-export-card-copy {1620  margin: 0;1621  font-size: 0.75rem;1622  line-height: 1.55;1623  color: var(--peach-t1);1624}1625.peach-export-note {1626  margin: 0;1627  font-size: 0.625rem;1628  line-height: 1.5;1629  color: var(--peach-t2);1630}1631.peach-export-strength-track {1632  height: 3px;1633  background: var(--peach-border);1634  border-radius: 2px;1635  margin: 4px 0 2px;1636  overflow: hidden;1637}1638.peach-export-strength-fill {1639  height: 100%;1640  border-radius: 2px;1641  transition: width 250ms ease, background 250ms ease;1642}1643.peach-export-strength-warn {1644  margin: 0;1645  font-size: 0.625rem;1646  line-height: 1.5;1647  color: #e84040;1648  font-family: "IBM Plex Mono", monospace;1649}1650.peach-export-strength-hint {1651  margin: 0;1652  font-size: 0.625rem;1653  line-height: 1.5;1654  color: var(--peach-t2);1655  font-family: "IBM Plex Mono", monospace;1656}16571658.peach-settings-label {1659  margin: 0 0 6px;1660  font-family: "IBM Plex Mono", monospace;1661  font-size: 0.5rem;1662  text-transform: uppercase;1663  letter-spacing: 0.18em;1664  color: var(--peach-t2);1665}1666.peach-settings-row {1667  display: flex;1668  align-items: center;1669  justify-content: space-between;1670  gap: 12px;1671  min-height: 34px;1672  padding: 6px 0;1673  font-size: 0.8125rem;1674  color: var(--peach-t1);1675}1676.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1677.peach-settings-value {1678  font-family: "IBM Plex Mono", monospace;1679  font-size: 0.625rem;1680  color: var(--peach-t2);1681}16821683.peach-settings-link {1684  font-family: "IBM Plex Mono", monospace;1685  font-size: 0.625rem;1686  color: var(--peach-accent);1687  text-decoration: none;1688  cursor: pointer;1689}1690.peach-settings-link:hover {1691  text-decoration: underline;1692}16931694.peach-settings-row--top {1695  align-items: flex-start;1696}16971698.peach-settings-row-main {1699  display: flex;1700  flex-direction: column;1701  gap: 4px;1702  flex: 1;1703}1704.peach-toggle {1705  width: 28px; height: 16px;1706  border-radius: 999px;1707  background: var(--peach-t3);1708  border: 1px solid var(--peach-t3);1709  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1710  flex-shrink: 0;1711  transition: background 200ms ease, border-color 200ms ease;1712  cursor: pointer;1713}1714.peach-toggle.is-on {1715  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1716  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1717}1718.peach-toggle-knob {1719  width: 10px; height: 10px;1720  border-radius: 50%;1721  background: var(--peach-t2);1722  flex-shrink: 0;1723  transform: translateX(0px);1724  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1725}1726.peach-toggle.is-on .peach-toggle-knob {1727  background: var(--peach-accent);1728  transform: translateX(12px);1729}17301731/* ── Settings sub-view section labels ──────────────────────────────────── */1732.peach-settings-sub-label {1733  margin: 12px 0 4px;1734  font-family: "IBM Plex Mono", monospace;1735  font-size: 0.5rem;1736  text-transform: uppercase;1737  letter-spacing: 0.18em;1738  color: var(--peach-t2);1739}1740.peach-settings-sub-label:first-child {1741  margin-top: 4px;1742}17431744/* ── Settings: collapsible Advanced section ─────────────────────────────── */1745.peach-settings-advanced-toggle {1746  display: flex;1747  align-items: center;1748  justify-content: space-between;1749  width: 100%;1750  background: none;1751  border: none;1752  cursor: pointer;1753  padding: 12px 0 4px;1754  margin: 0;1755  color: inherit;1756}1757.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {1758  color: var(--peach-t1);1759}1760.peach-settings-advanced-chevron {1761  font-size: 0.5625rem;1762  color: var(--peach-t3);1763  letter-spacing: 0;1764  transition: color 120ms ease;1765}17661767.peach-sync-disclosure-toggle {1768  min-height: 48px;1769  padding: 10px 0;1770  text-align: left;1771}17721773.peach-sync-disclosure-toggle > span:first-child {1774  display: flex;1775  flex-direction: column;1776  gap: 3px;1777}17781779.peach-sync-disclosure-summary {1780  color: var(--peach-t2);1781  font-size: 0.6875rem;1782  line-height: 1.35;1783}17841785.peach-sync-disclosure-content {1786  padding-bottom: 4px;1787}17881789/* ── Feedback form ──────────────────────────────────────────────────────── */1790.peach-feedback-group {1791  flex: 1;1792  display: flex;1793  flex-direction: column;1794  border-bottom: none;1795}17961797.peach-feedback-intro {1798  margin: 4px 0 14px;1799  font-size: 0.75rem;1800  line-height: 1.55;1801  color: var(--peach-t1);1802}18031804.peach-feedback-chips {1805  display: flex;1806  flex-wrap: wrap;1807  gap: 6px;1808  margin-bottom: 14px;1809}18101811.peach-feedback-chip {1812  padding: 4px 10px;1813  border-radius: 999px;1814  border: 1px solid var(--peach-t3);1815  background: none;1816  color: var(--peach-t2);1817  font-size: 0.6875rem;1818  font-family: var(--font-ui);1819  cursor: pointer;1820  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,1821    background var(--peach-dur-80) ease;1822}1823.peach-feedback-chip:hover {1824  border-color: var(--peach-t2);1825  color: var(--peach-t1);1826}1827.peach-feedback-chip.is-active {1828  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);1829  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));1830  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);1831  box-shadow:1832    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),1833    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);1834  font-weight: 700;1835}18361837.peach-feedback-textarea {1838  flex: 1;1839  width: 100%;1840  min-height: 120px;1841  box-sizing: border-box;1842  background: rgba(0, 0, 0, 0.22);1843  border: 1px solid transparent;1844  border-radius: 6px;1845  color: var(--peach-t0);1846  font-size: 0.75rem;1847  font-family: var(--font-ui);1848  line-height: 1.5;1849  padding: 8px 10px;1850  resize: none;1851  outline: none;1852  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;1853}1854.peach-feedback-textarea:focus {1855  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1856  background: rgba(0, 0, 0, 0.28);1857}1858.peach-feedback-textarea:focus {1859  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1860}1861.peach-feedback-textarea::placeholder {1862  color: var(--peach-t2);1863}18641865.peach-feedback-meta {1866  margin: 6px 0 0;1867  font-size: 0.625rem;1868  color: var(--peach-t2);1869  font-family: "IBM Plex Mono", monospace;1870}18711872.peach-feedback-submit {1873  width: 100%;1874  margin-top: 12px;1875  justify-content: center;1876}18771878.peach-feedback-anon {1879  margin: 8px 0 0;1880  font-size: 0.625rem;1881  color: var(--peach-t2);1882  text-align: center;1883}18841885.peach-feedback-thanks {1886  margin: auto 0;1887  padding: 18px 14px;1888  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);1889  border-radius: 8px;1890  background:1891    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),1892    rgba(0, 0, 0, 0.18);1893  color: var(--peach-t1);1894  text-align: center;1895}18961897.peach-feedback-thanks p {1898  margin: 0;1899  font-size: 0.75rem;1900  line-height: 1.5;1901}19021903.peach-feedback-thanks-title {1904  color: var(--peach-t0);1905  font-family: "Cormorant Garamond", serif;1906  font-size: 1.375rem !important;1907  line-height: 1.1 !important;1908  margin-bottom: 8px !important;1909}19101911.peach-passkey-badge {1912  margin-left: 8px;1913  font-size: 0.625rem;1914  letter-spacing: 0.06em;1915  text-transform: uppercase;1916  color: var(--peach-t2);1917  font-family: var(--font-ui);1918  vertical-align: middle;1919}19201921.peach-passkey-activity {1922  flex-direction: column;1923  align-items: flex-start;1924  gap: 4px;1925}19261927.peach-passkey-meta {1928  font-size: 0.6875rem;1929  color: var(--peach-t2);1930}19311932.peach-passkey-approval {1933  display: flex;1934  flex-direction: column;1935  align-items: center;1936  padding: 16px 20px 14px;1937  gap: 8px;1938  text-align: center;1939}19401941.peach-passkey-approval-icon {1942  width: 36px;1943  height: 36px;1944  border-radius: 10px;1945  background: var(--peach-s2);1946  border: 1px solid var(--peach-t3);1947  display: flex;1948  align-items: center;1949  justify-content: center;1950  flex-shrink: 0;1951  color: var(--peach-accent);1952}19531954.peach-passkey-approval-icon img,1955.peach-passkey-approval-icon svg {1956  width: 22px;1957  height: 22px;1958  border-radius: 5px;1959}19601961.peach-passkey-approval-rp {1962  font-family: var(--font-ui);1963  font-size: 0.75rem;1964  color: var(--peach-t2);1965  letter-spacing: 0.03em;1966}19671968.peach-passkey-approval-action {1969  font-family: var(--font-display);1970  font-style: italic;1971  font-weight: 300;1972  font-size: 18px;1973  color: var(--peach-t0);1974  line-height: 1.1;1975  margin: 1px 0;1976}19771978.peach-passkey-approval-user {1979  font-family: var(--font-mono);1980  font-size: 0.6875rem;1981  color: var(--peach-t1);1982  background: var(--peach-s2);1983  border: 1px solid var(--peach-t3);1984  border-radius: 4px;1985  padding: 3px 8px;1986}19871988.peach-passkey-approval-notice {1989  font-size: 0.625rem;1990  color: var(--peach-t2);1991  line-height: 1.5;1992  max-width: 220px;1993}19941995.peach-passkey-approval-actions {1996  display: flex;1997  gap: 8px;1998  width: 100%;1999  margin-top: 6px;2000}20012002.peach-passkey-approval-actions .peach-btn {2003  flex: 1;2004}20052006/* ── Inline generator drawer ── */2007.peach-generator-drawer {2008  display: grid;2009  grid-template-rows: 0fr;2010  transition: grid-template-rows 320ms var(--peach-curve-arrival);2011  overflow: hidden;2012}2013.peach-generator-drawer.is-open {2014  grid-template-rows: 1fr;2015}2016.peach-generator-drawer-inner {2017  min-height: 0;2018  overflow: hidden;2019}2020.peach-generator-drawer-content {2021  border-top: 1px solid var(--peach-t3);2022  padding: 8px 0 4px;2023  display: flex;2024  flex-direction: column;2025  gap: 8px;2026}20272028/* ── Compact generator (inside entry edit) ── */2029.peach-generator-drawer-content--compact {2030  border-top: 1px solid var(--peach-t3);2031  padding: 8px 0 2px;2032  gap: 7px;2033}2034.peach-pwgen-compact-display-row {2035  display: flex;2036  align-items: center;2037  gap: 6px;2038}2039.peach-pwgen-compact-output {2040  flex: 1;2041  min-width: 0;2042  font-family: "IBM Plex Mono", monospace;2043  font-size: 0.6875rem;2044  font-weight: 400;2045  letter-spacing: 0.04em;2046  color: var(--peach-t0);2047  background: rgba(240, 232, 216, 0.04);2048  border: 1px solid var(--peach-t3);2049  border-radius: 5px;2050  padding: 5px 8px;2051  line-height: 1.5;2052  outline: none;2053  transition: border-color 120ms ease;2054}20552056.peach-pwgen-compact-output:focus {2057  border-color: var(--peach-t1);2058}2059.peach-pwgen-compact-controls {2060  display: flex;2061  align-items: center;2062  gap: 6px;2063}2064.peach-pwgen-compact-slider {2065  flex: 1;2066  min-width: 0;2067  height: 2px !important;2068}2069.peach-pwgen-compact-controls .peach-pwgen-len-num {2070  flex-shrink: 0;2071  min-width: 18px;2072  text-align: right;2073}2074.peach-pwgen-compact-pills {2075  display: flex;2076  gap: 3px;2077  flex-shrink: 0;2078}2079.peach-pwgen-compact-pills .peach-pwgen-pill {2080  padding: 2px 7px;2081  font-size: 0.5rem;2082}2083.peach-pwgen-compact-use {2084  flex-shrink: 0;2085  font-size: 0.625rem !important;2086  padding: 3px 9px !important;2087  min-height: 22px !important;2088  border-radius: 5px !important;2089}20902091/* ── Password edit row (input + eye toggle side-by-side) ── */2092.peach-password-edit-row {2093  display: flex;2094  align-items: center;2095  gap: 6px;2096}2097.peach-password-edit-row .peach-inline-input {2098  flex: 1;2099  min-width: 0;2100}21012102/* ── Generate toggle link ── */2103.peach-generate-toggle-link {2104  display: inline-flex;2105  align-items: center;2106  gap: 5px;2107  background: none;2108  border: none;2109  padding: 0;2110  cursor: pointer;2111  font-family: "IBM Plex Mono", monospace;2112  font-size: 0.625rem;2113  color: var(--peach-t2);2114  letter-spacing: 0.04em;2115  transition: color 120ms ease;2116  align-self: flex-start;2117}2118.peach-generate-toggle-link:hover {2119  color: var(--peach-accent);2120}21212122/* Holds the generate + history toggle links on one row under the editor. */2123.peach-password-edit-links {2124  display: flex;2125  align-items: center;2126  gap: 14px;2127  flex-wrap: wrap;2128}21292130/* ── Past-password history list ── */2131.peach-password-history {2132  display: grid;2133  gap: 4px;2134  margin-top: 2px;2135  max-height: 168px;2136  overflow-y: auto;2137  scrollbar-width: thin;2138}2139.peach-history-row {2140  display: flex;2141  align-items: center;2142  justify-content: space-between;2143  gap: 8px;2144  padding: 5px 7px;2145  border-radius: 7px;2146  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2147  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2148}2149.peach-history-main {2150  display: flex;2151  flex-direction: column;2152  gap: 1px;2153  min-width: 0;2154  flex: 1;2155}2156.peach-history-pw {2157  font-family: "IBM Plex Mono", monospace;2158  font-size: 0.6875rem;2159  color: var(--peach-t1);2160  white-space: nowrap;2161  overflow: hidden;2162  text-overflow: ellipsis;2163}2164.peach-history-pw .peach-password-mask {2165  letter-spacing: 0.08em;2166  color: var(--peach-t2);2167}2168.peach-history-age {2169  font-family: "IBM Plex Mono", monospace;2170  font-size: 0.5625rem;2171  color: var(--peach-t3, var(--peach-t2));2172  letter-spacing: 0.03em;2173}2174.peach-history-actions {2175  display: flex;2176  align-items: center;2177  gap: 2px;2178  flex-shrink: 0;2179}2180.peach-history-use {2181  font-family: "IBM Plex Mono", monospace;2182  font-size: 0.5625rem;2183  letter-spacing: 0.05em;2184  padding: 3px 7px;2185}2186.peach-history-empty {2187  font-family: "IBM Plex Mono", monospace;2188  font-size: 0.625rem;2189  line-height: 1.45;2190  color: var(--peach-t2);2191  padding: 6px 8px;2192  border-radius: 7px;2193  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);2194  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);2195}21962197/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2198.peach-entry-body {2199  flex: 1;2200  overflow-y: auto;2201  overflow-x: hidden;2202  scrollbar-width: none;2203  -ms-overflow-style: none;2204  overscroll-behavior: contain;2205  display: grid;2206  gap: 10px;2207  align-content: start;2208  padding: 10px 20px 14px;2209  min-width: 0;2210  min-height: 0;2211}2212.peach-entry-body::-webkit-scrollbar { display: none; }22132214/* Type-toggle pills + inline note toolbar */2215.peach-new-type-row {2216  display: flex;2217  align-items: center;2218  gap: 6px;2219  margin-bottom: 2px;2220}2221.peach-new-type-btn {2222  background: transparent;2223  border: 1px solid var(--peach-t3);2224  border-radius: 12px;2225  padding: 3px 10px;2226  font-family: "IBM Plex Mono", monospace;2227  font-size: 0.5625rem;2228  letter-spacing: 0.12em;2229  text-transform: uppercase;2230  color: var(--peach-t2);2231  cursor: pointer;2232  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2233}2234.peach-new-type-btn.is-active {2235  color: var(--peach-t0);2236  border-color: var(--peach-accent);2237  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2238}2239.peach-new-type-btn:not(.is-active):hover {2240  color: var(--peach-t1);2241  border-color: var(--peach-t2);2242}22432244/* Editable title */2245.peach-new-title-wrap { margin: 0 0 2px; }2246.peach-new-title-input {2247  background: transparent;2248  border: none;2249  outline: none;2250  width: 100%;2251  color: var(--peach-t0);2252  font-family: var(--font-display);2253  font-style: italic;2254  font-weight: 400;2255  font-size: 40px;2256  line-height: 0.95;2257  caret-color: var(--peach-accent);2258}2259.peach-new-title-input::placeholder { color: var(--peach-t2); }22602261/* Editable domain field */2262.peach-domain-edit-row {2263  display: flex;2264  align-items: center;2265  gap: 6px;2266}22672268.peach-domain-edit-row .peach-domain-value--edit {2269  flex: 1;2270  width: 0;2271}22722273.peach-domain-url-btn {2274  flex-shrink: 0;2275  background: transparent;2276  border: none;2277  cursor: pointer;2278  color: var(--peach-t3);2279  padding: 2px 3px;2280  display: flex;2281  align-items: center;2282  line-height: 0;2283  border-radius: 3px;2284  transition: color 120ms ease;2285}22862287.peach-domain-url-btn:hover {2288  color: var(--peach-accent);2289}22902291.peach-domain-value--edit {2292  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2293  font-size: 0.625rem;2294  font-style: italic;2295  letter-spacing: 0.12em;2296  color: var(--peach-t1);2297  background: transparent;2298  border: none;2299  border-bottom: 1px solid var(--peach-t3);2300  outline: none;2301  width: 100%;2302  padding: 2px 0;2303  caret-color: var(--peach-accent);2304  transition: border-color 140ms ease, color 140ms ease;2305}2306.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2307.peach-domain-value--edit:focus {2308  border-bottom-color: rgba(240, 232, 216, 0.28);2309  color: var(--peach-t0);2310}23112312/* Editable field values (username, password, totp) */2313.peach-field-value--edit {2314  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2315  font-size: 0.8125rem;2316  color: var(--peach-t0);2317  background: transparent;2318  border: none;2319  border-bottom: 1px solid var(--peach-t3);2320  outline: none;2321  flex: 1;2322  min-width: 0;2323  padding: 3px 0;2324  caret-color: var(--peach-accent);2325  transition: border-color 140ms ease, color 140ms ease;2326}2327.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2328.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2329.peach-field-value--edit:focus {2330  border-bottom-color: rgba(240, 232, 216, 0.28);2331  color: var(--peach-t0);2332}23332334/* "+ add optional field" links */2335.peach-entry-add-links {2336  display: flex;2337  gap: 12px;2338  flex-wrap: wrap;2339  margin-top: -2px;2340}2341.peach-add-field-link {2342  background: transparent;2343  border: none;2344  padding: 0;2345  cursor: pointer;2346  font-family: "IBM Plex Mono", monospace;2347  font-size: 0.5625rem;2348  letter-spacing: 0.1em;2349  text-transform: uppercase;2350  color: var(--peach-t2);2351  transition: color 140ms ease;2352}2353.peach-add-field-link:hover { color: var(--peach-accent); }23542355/* ── New entry form (legacy classes) ────────────────────────────────── */2356.peach-new-body {2357  flex: 1;2358  overflow-y: auto;2359  padding: 10px 20px 14px;2360}2361.peach-new-name-input {2362  background: transparent;2363  border: none;2364  outline: none;2365  width: 100%;2366  color: var(--peach-t0);2367  font-family: var(--font-display);2368  font-style: italic;2369  font-weight: 400;2370  font-size: 40px;2371  line-height: 0.95;2372  caret-color: var(--peach-accent);2373}2374.peach-new-name-input::placeholder { color: var(--peach-t2); }2375.peach-new-field-input {2376  background: transparent;2377  border: none;2378  outline: none;2379  flex: 1;2380  min-width: 0;2381  caret-color: var(--peach-accent);2382}2383.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }23842385/* ── Note editor overlay ── */23862387.peach-note-toolbar {2388  display: flex;2389  align-items: center;2390  gap: 3px;2391  padding: 6px 14px 5px;2392  border-bottom: 1px solid var(--peach-t3);2393  flex-shrink: 0;2394}23952396.peach-note-tool-btn {2397  background: transparent;2398  border: 1px solid transparent;2399  border-radius: 5px;2400  color: var(--peach-t2);2401  font-family: "IBM Plex Mono", monospace;2402  font-size: 0.625rem;2403  letter-spacing: 0.04em;2404  padding: 2px 8px;2405  cursor: pointer;2406  line-height: 1.6;2407  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2408}2409.peach-note-tool-btn:hover {2410  background: var(--peach-t4);2411  color: var(--peach-t0);2412  border-color: var(--peach-t3);2413}24142415.peach-note-tool-icon {2416  padding: 3px 7px;2417  display: inline-flex;2418  align-items: center;2419  justify-content: center;2420}24212422.peach-note-tool-divider {2423  width: 1px;2424  height: 14px;2425  background: var(--peach-t3);2426  margin: 0 4px;2427  flex-shrink: 0;2428}24292430.peach-note-editor-body {2431  flex: 1;2432  overflow-y: auto;2433  padding: 16px 20px 20px;2434  outline: none;2435  font-family: var(--font-display);2436  font-size: 1rem;2437  line-height: 1.75;2438  color: var(--peach-t0);2439  scrollbar-width: none;2440  word-break: break-word;2441}2442.peach-note-editor-body:empty::before {2443  content: "write your note…";2444  color: var(--peach-t3);2445  font-style: italic;2446  pointer-events: none;2447}24482449/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2450.peach-note-editor-inline {2451  display: flex;2452  flex-direction: column;2453  flex: 1;2454  min-height: 0;2455}2456.peach-note-editor-body--inline {2457  flex: 1;2458  min-height: 0;2459  font-size: 0.9375rem;2460  padding: 10px 20px 14px;2461}24622463/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2464   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2465   and .peach-note-tool-divider button-level styles. */2466.peach-note-toolbar-inline {2467  display: flex;2468  align-items: center;2469  gap: 3px;2470  margin-left: auto;2471  padding-left: 10px;2472  border-left: 1px solid var(--peach-t3);2473  min-height: 22px;2474}24752476/* Entry.tsx toolbar row (no tabs, toolbar only) */2477.peach-entry-note-toolbar-row {2478  display: flex;2479  align-items: center;2480  margin: 4px 0 6px;2481  position: relative;2482  z-index: 1;2483}2484.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2485  border-left: none;2486  padding-left: 0;2487  margin-left: 0;2488}24892490/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2491.peach-note-body {2492  display: flex;2493  flex-direction: column;2494  flex: 1;2495  min-height: 0;2496  margin: 4px 0 0;2497}2498/* Rich content element styles (editor + display) */2499.peach-note-editor-body h2,2500.peach-note-content h2 {2501  font-family: var(--font-display);2502  font-size: 20px;2503  font-weight: 600;2504  font-style: italic;2505  color: var(--peach-t0);2506  margin: 6px 0 2px;2507  line-height: 1.3;2508}2509.peach-note-editor-body ul,2510.peach-note-content ul {2511  padding-left: 18px;2512  margin: 3px 0;2513  list-style: disc;2514}2515.peach-note-editor-body ol,2516.peach-note-content ol {2517  padding-left: 18px;2518  margin: 3px 0;2519  list-style: decimal;2520}2521.peach-note-editor-body li,2522.peach-note-content li { margin: 2px 0; }2523.peach-note-editor-body hr,2524.peach-note-content hr {2525  border: none;2526  border-top: 1px solid var(--peach-t3);2527  margin: 10px 0;2528}25292530/* bold / italic inside the editor and note display */2531.peach-note-editor-body b, .peach-note-editor-body strong,2532.peach-note-content b, .peach-note-content strong { font-weight: 700; }2533.peach-note-editor-body em, .peach-note-editor-body i,2534.peach-note-content em, .peach-note-content i { font-style: italic; }2535.peach-note-content blockquote {2536  border-left: 2px solid var(--peach-accent);2537  margin: 12px 0;2538  padding-left: 16px;2539  color: var(--peach-t1);2540  font-style: italic;2541}25422543/* note display — rendered HTML, no pre-wrap */2544.peach-note-content {2545  overflow: auto;2546  max-height: 340px;2547  word-break: break-word;2548}25492550/* ── Field input baseline ── */2551.peach-new-field-input {2552  width: 100%;2553  background: transparent;2554  border: none;2555  border-bottom: 1px solid var(--peach-t3);2556  padding: 4px 0;2557  color: var(--peach-t1);2558  font-family: "IBM Plex Mono", monospace;2559  font-size: 0.8125rem;2560  outline: none;2561  transition: border-color 150ms ease;2562}25632564.peach-new-field-input:focus {2565  border-bottom-color: var(--peach-t0);2566  color: var(--peach-t0);2567}25682569.peach-new-name-input {2570  width: 100%;2571  background: transparent;2572  border: none;2573  border-bottom: 1px solid var(--peach-t3);2574  padding: 6px 0;2575  font-family: var(--font-display);2576  font-style: italic;2577  font-size: 28px;2578  color: var(--peach-t0);2579  outline: none;2580  transition: border-color 150ms ease;2581}25822583.peach-new-name-input:focus {2584  border-bottom-color: var(--peach-t1);2585}25862587.peach-new-name-input::placeholder {2588  color: var(--peach-t2);2589  font-style: italic;2590}25912592.peach-new-field-input::placeholder {2593  color: var(--peach-t3);2594}25952596/* ── Demo entrance animation ── */2597#hd-shell {2598  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;2599}2600@keyframes hd-shell-enter {2601  from { opacity: 0; transform: scale(0.96) translateY(16px); }2602  to   { opacity: 1; transform: scale(1) translateY(0); }2603}26042605/* ── Keyframes ── */2606@keyframes peach-char-enter {2607  from { opacity: 0; transform: translateY(0.22em); }2608  to   { opacity: 1; transform: translateY(0); }2609}2610@keyframes peach-content-enter {2611  from { opacity: 0.96; transform: translateY(4px); }2612  to   { opacity: 1; transform: translateY(0); }2613}2614@keyframes peach-screen-enter {2615  from { opacity: 0; transform: translateY(14px); }2616  to   { opacity: 1; transform: translateY(0); }2617}2618@keyframes peach-shell-fade-in {2619  from { opacity: 0; }2620  to   { opacity: 1; }2621}2622@keyframes peach-copy-confirm {2623  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }2624  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); }2625}2626@keyframes peach-copy-retreat {2627  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); }2628  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }2629}2630@keyframes peach-copy-flood {2631  from { opacity: 0; transform: scaleX(0.15); }2632  to   { opacity: 1; transform: scaleX(1); }2633}2634@keyframes peach-copy-icon-settle {2635  from  { transform: scale(0.84); }2636  70%   { transform: scale(1.08); }2637  to    { transform: scale(1); }2638}2639@keyframes peach-copy-sheen-retreat {2640  from { opacity: 1; transform: scaleX(1); }2641  to   { opacity: 0; transform: scaleX(0.15); }2642}2643@keyframes peach-copy-drain {2644  from { width: 100%; }2645  to   { width: 0; }2646}2647@keyframes peach-shake {2648  0%, 100% { transform: translateX(0); }2649  20%      { transform: translateX(-6px); }2650  40%      { transform: translateX(6px); }2651  60%      { transform: translateX(-4px); }2652  80%      { transform: translateX(4px); }2653}26542655@keyframes pip-pulse {2656  0% { transform: scale(1); }2657  40% { transform: scale(2.2); }2658  100% { transform: scale(1); }2659}26602661/* ── Password generator ── */26622663.peach-pwgen-display-row {2664  display: flex;2665  align-items: flex-start;2666  gap: 8px;2667  padding-bottom: 8px;2668  border-bottom: 1px solid var(--peach-t3);2669}2670.peach-pwgen-output {2671  flex: 1; min-width: 0; margin: 0;2672  font-family: "IBM Plex Mono", monospace;2673  font-size: 0.8125rem; color: var(--peach-t0);2674  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;2675  white-space: normal;2676  padding: 10px 12px;2677  background: var(--peach-t4);2678  border-radius: 6px;2679  min-height: 36px;2680}2681.peach-pwgen-output-display {2682  flex: 1;2683  min-width: 0;2684  margin: 0;2685  font-family: var(--font-display);2686  font-style: italic;2687  font-weight: 300;2688  font-size: 32px;2689  line-height: 1.05;2690  color: var(--peach-t0);2691  word-break: break-all;2692  overflow-wrap: break-word;2693  white-space: normal;2694  letter-spacing: 0.02em;2695}2696.peach-pwgen-display-actions {2697  display: flex;2698  flex-direction: column;2699  gap: 4px;2700  flex-shrink: 0;2701  margin-top: 2px;2702}27032704.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }2705.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }2706.peach-pwgen-len-num {2707  font-family: "IBM Plex Mono", monospace;2708  font-size: 0.75rem; color: var(--peach-accent);2709}2710.peach-pwgen-len-num--edit {2711  cursor: text;2712  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);2713}2714.peach-pwgen-len-input {2715  font-family: "IBM Plex Mono", monospace;2716  font-size: 0.75rem;2717  color: var(--peach-accent);2718  background: transparent;2719  border: none;2720  border-bottom: 1px solid var(--peach-accent);2721  outline: none;2722  width: 32px;2723  text-align: right;2724  padding: 0;2725}2726.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }27272728.peach-pwgen-charset-pills {2729  display: flex;2730  gap: 6px;2731  flex-wrap: wrap;2732}2733.peach-pwgen-mode-pills {2734  display: flex;2735  gap: 5px;2736}2737.peach-pwgen-pill {2738  padding: 4px 11px;2739  border-radius: 999px;2740  border: 1px solid var(--peach-t3);2741  background: transparent;2742  color: var(--peach-t2);2743  font-family: "IBM Plex Mono", monospace;2744  font-size: 0.5625rem;2745  letter-spacing: 0.08em;2746  cursor: pointer;2747  transition: all 150ms ease;2748}2749.peach-pwgen-pill.is-on {2750  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);2751  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2752  color: var(--peach-accent);2753}2754.peach-pwgen-pill:not(.is-on):hover {2755  color: var(--peach-t1);2756  border-color: var(--peach-t2);2757}2758.peach-pwgen-use-btn {2759  width: 100%;2760  min-height: 34px;2761  border-radius: 8px;2762  margin-top: 2px;2763}2764.peach-generator-constraint-note {2765  font-family: 'IBM Plex Mono', monospace;2766  font-size: 10px;2767  color: var(--peach-t1);2768  letter-spacing: 0.04em;2769  margin: 0;2770  transition: opacity 200ms ease;2771}2772.peach-pwgen-toggle-row {2773  display: flex; align-items: center; justify-content: space-between;2774  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);2775}2776.peach-pwgen-toggle-row:last-child { border-bottom: none; }27772778/* Peach popup should not expose native scrollbars on internal panels. */2779.peach-settings-body,2780.peach-new-body,2781.lock-screen,2782.peach-import-preview {2783  scrollbar-width: none;2784  -ms-overflow-style: none;2785  overscroll-behavior: contain;2786}2787.peach-settings-body::-webkit-scrollbar,2788.peach-new-body::-webkit-scrollbar,2789.lock-screen::-webkit-scrollbar,2790.peach-import-preview::-webkit-scrollbar {2791  width: 0;2792  height: 0;2793  display: none;2794}27952796.lock-screen {2797  height: 100%;2798  min-height: 100%;2799  overflow-y: auto;2800  padding: 18px 18px 16px;2801  gap: 14px;2802  grid-template-rows: auto auto auto 1fr auto;2803  align-content: stretch;2804  position: relative;2805  isolation: isolate;2806}2807.peach-screen.lock-screen--vault-stage {2808  display: flex;2809  flex-direction: column;2810  justify-content: flex-start;2811  gap: 18px;2812  padding: 20px 18px 18px;2813  overflow: hidden;2814}2815.peach-screen.lock-screen--vault-stage .peach-lock-panel {2816  margin-top: 0;2817}28182819.lock-screen::before {2820  content: "";2821  position: absolute;2822  inset: 12px 18px auto auto;2823  width: 160px;2824  height: 160px;2825  border-radius: 999px;2826  background:2827    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%);2828  filter: blur(6px);2829  opacity: 0.7;2830  pointer-events: none;2831  z-index: 0;2832}28332834.lock-screen-header {2835  display: flex;2836  align-items: center;2837  justify-content: space-between;2838  position: relative;2839  z-index: 1;2840}28412842.lock-password-input.shake {2843  animation: peach-shake 300ms ease-in-out;2844}28452846.peach-hint-error {2847  color: rgba(220, 80, 60, 0.92);2848}28492850.peach-onboarding-headline {2851  margin: 0;2852  font-family: var(--font-display);2853  font-size: 35px;2854  line-height: 0.88;2855  font-style: italic;2856  font-weight: 400;2857  max-width: 252px;2858}28592860.peach-lock-hero {2861  position: relative;2862  z-index: 1;2863  display: flex;2864  flex-direction: column;2865  align-items: center;2866  justify-content: center;2867  text-align: center;2868  gap: 10px;2869  min-height: 0;2870  padding: 4px 2px 0;2871  border: none;2872  border-radius: 0;2873  background: transparent;2874  box-shadow: none;2875}2876.peach-lock-hero > * {2877  position: relative;2878  z-index: 1;2879}28802881.peach-lock-mark {2882  width: 40px;2883  height: 40px;2884  margin: 0 auto 6px;2885  display: block;2886}28872888.peach-lock-eyebrow {2889  display: inline-flex;2890  align-items: center;2891  width: fit-content;2892  margin: 0 auto;2893  padding: 4px 9px;2894  border-radius: 999px;2895  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);2896  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2897  color: var(--peach-t0);2898  font-family: "IBM Plex Mono", monospace;2899  font-weight: 600;2900  font-size: 0.55rem;2901  letter-spacing: 0.14em;2902  text-transform: uppercase;2903}29042905.peach-lock-reveal-btn {2906  display: inline-flex;2907  align-items: center;2908  gap: 4px;2909  background: none;2910  border: none;2911  cursor: pointer;2912  font-family: "IBM Plex Mono", monospace;2913  font-size: 0.5625rem;2914  letter-spacing: 0.06em;2915  color: var(--peach-t2);2916  padding: 2px 0;2917  transition: color 150ms ease;2918}29192920.peach-lock-reveal-btn:hover {2921  color: var(--peach-t1);2922}29232924.peach-lock-panel {2925  position: relative;2926  z-index: 1;2927  display: grid;2928  gap: 9px;2929  padding: 14px 16px 15px;2930  border-radius: 18px;2931  border: 1px solid var(--peach-t3);2932  background:2933    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));2934  box-shadow:2935    inset 0 1px 0 rgba(240, 232, 216, 0.04),2936    0 12px 28px rgba(0, 0, 0, 0.12);2937}29382939/* Glass surface — lock panel and settings groups */2940.peach-glass {2941  background: rgba(26, 20, 16, 0.65);2942  border: 1px solid rgba(255, 255, 255, 0.08);2943  border-radius: 12px;2944  backdrop-filter: blur(12px) saturate(1.4);2945  -webkit-backdrop-filter: blur(12px) saturate(1.4);2946}29472948@supports not (backdrop-filter: blur(1px)) {2949  .peach-glass {2950    background: rgba(26, 20, 16, 0.92);2951    border: 1px solid rgba(255, 255, 255, 0.10);2952    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);2953  }2954}29552956.light .peach-glass {2957  background: rgba(240, 233, 223, 0.72);2958  border: 1px solid rgba(26, 18, 8, 0.08);2959  backdrop-filter: blur(12px) saturate(1.2);2960  -webkit-backdrop-filter: blur(12px) saturate(1.2);2961}29622963@supports not (backdrop-filter: blur(1px)) {2964  .light .peach-glass {2965    background: rgba(240, 233, 223, 0.97);2966    border: 1px solid rgba(26, 18, 8, 0.10);2967  }2968}29692970/* Lock panel keeps its own border-radius over the generic glass token */2971.peach-lock-panel.peach-glass {2972  border-radius: 18px;2973  background: rgba(26, 20, 16, 0.65);2974  border: 1px solid rgba(255, 255, 255, 0.08);2975  box-shadow:2976    inset 0 1px 0 rgba(255, 255, 255, 0.05),2977    0 12px 28px rgba(0, 0, 0, 0.3);2978}29792980.light .peach-lock-panel.peach-glass {2981  background: rgba(240, 233, 223, 0.82);2982  border: 1px solid rgba(26, 18, 8, 0.08);2983  box-shadow:2984    inset 0 1px 0 rgba(255, 255, 255, 0.4),2985    0 8px 24px rgba(80, 56, 32, 0.15);2986}29872988@supports not (backdrop-filter: blur(1px)) {2989  .peach-lock-panel.peach-glass {2990    background: rgba(26, 20, 16, 0.92);2991    box-shadow:2992      inset 0 1px 0 rgba(255, 255, 255, 0.05),2993      0 12px 28px rgba(0, 0, 0, 0.4);2994  }2995  .light .peach-lock-panel.peach-glass {2996    background: rgba(240, 233, 223, 0.98);2997  }2998}29993000/* ── Restore surface ────────────────────────────────────────────────────3001   The onboarding restore screen. Shares the create-vault screen's glass3002   card language: Cormorant headline, hairline divider, choice rows. The3003   card lists the backup sources; picking one swaps the card body to that3004   source's form. */30053006/* Content centers in the tall card (mirrors the onboarding cards) and3007   scrolls as a fallback on shorter viewports. */3008.peach-restore-card {3009  justify-content: center;3010  overflow-y: auto;3011  scrollbar-width: none;3012}3013.peach-restore-card::-webkit-scrollbar { display: none; }30143015.peach-restore-sources {3016  display: grid;3017  gap: 6px;3018  margin-top: 4px;3019}30203021/* Choice rows reuse .peach-onboarding-choice; tighten them to the same3022   compactness as the final onboarding card's rows. */3023.peach-restore-source {3024  min-height: 40px;3025  padding: 6px 10px;3026  cursor: pointer;3027  transition: border-color 140ms ease, background 140ms ease;3028}3029.peach-restore-source:hover {3030  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);3031  background: color-mix(in srgb, var(--peach-accent) 9%, transparent);3032}30333034/* In-card header shown once a source is picked */3035.peach-restore-source-head {3036  display: flex;3037  align-items: baseline;3038  justify-content: space-between;3039  gap: 10px;3040}30413042.peach-restore-source-title {3043  margin: 0;3044  font-family: var(--font-display);3045  font-style: italic;3046  font-weight: 400;3047  font-size: 18px;3048  line-height: 1.1;3049  color: var(--peach-t0);3050}30513052.peach-restore-picker-back {3053  background: none;3054  border: none;3055  cursor: pointer;3056  padding: 2px 0;3057  font-family: var(--font-mono);3058  font-size: 0.625rem;3059  letter-spacing: 0.06em;3060  color: var(--peach-t2);3061  transition: color 150ms ease;3062}3063.peach-restore-picker-back:hover {3064  color: var(--peach-t0);3065}30663067/* Shared inner form layout */3068.peach-restore-form {3069  display: flex;3070  flex-direction: column;3071  gap: 8px;3072}30733074/* Drag-and-drop import — the one file path that survives the action popup3075   (the popup dismisses itself when the OS file picker steals focus). */3076.peach-restore-form.is-dragover {3077  outline: 2px dashed color-mix(in srgb, var(--peach-accent) 55%, transparent);3078  outline-offset: 6px;3079  border-radius: 8px;3080}30813082.peach-restore-drop-hint {3083  margin: -2px 0 0;3084  text-align: center;3085  font-family: var(--font-mono);3086  font-size: 0.5625rem;3087  letter-spacing: 0.06em;3088  color: var(--peach-t2);3089}30903091.peach-restore-submit {3092  width: 100%;3093}30943095.peach-restore-file-btn {3096  display: inline-flex;3097  align-items: center;3098  justify-content: center;3099  width: 100%;3100}31013102/* ── PeachScript source ───────────────────────────────────────────────── */31033104/* Rune textarea styled as an underline input to match the card's other3105   fields. */3106.peach-restore-script {3107  width: 100%;3108  box-sizing: border-box;3109  min-height: 56px;3110  max-height: 72px;3111  padding: 6px 0;3112  resize: none;3113  overflow: hidden;3114  scrollbar-width: none;3115  -ms-overflow-style: none;3116  border: 0;3117  border-bottom: 1px solid var(--peach-t3);3118  border-radius: 0;3119  background: transparent;3120  color: var(--peach-t0);3121  outline: none;3122  caret-color: var(--peach-accent);3123  font-family: "PeachScript", monospace;3124  font-size: 13px;3125  line-height: 1.9;3126  letter-spacing: 0.1em;3127  word-break: break-all;3128}3129.peach-restore-script::-webkit-scrollbar { display: none; }3130.peach-restore-script::placeholder { color: var(--peach-t2); }3131.peach-restore-script:focus {3132  border-bottom-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3133}31343135.peach-restore-or {3136  display: flex;3137  align-items: center;3138  gap: 8px;3139  font-family: var(--font-mono);3140  font-size: 0.5625rem;3141  letter-spacing: 0.14em;3142  text-transform: uppercase;3143  color: var(--peach-t2);3144}3145.peach-restore-or::before,3146.peach-restore-or::after {3147  content: "";3148  flex: 1;3149  border-top: 1px solid var(--peach-t3);3150}31513152.peach-restore-anim-canvas {3153  width: 100%;3154  height: 180px;3155  border-radius: 10px;3156  overflow: hidden;3157  display: block;3158}31593160/* Animated rune preview shown once valid PeachScript is pasted — mirrors the3161   export screen's RuneCanvas. */3162.peach-restore-rune-preview {3163  overflow: hidden;3164  border: 1px solid color-mix(in srgb, var(--peach-t0) 22%, transparent);3165  border-radius: 8px;3166}31673168/* ── Codex source ─────────────────────────────────────────────────────── */31693170.peach-restore-codex-copy {3171  margin: 0;3172  font-size: 0.75rem;3173  line-height: 1.55;3174  color: var(--peach-t1);3175}31763177/* ── CSV source ───────────────────────────────────────────────────────── */31783179.peach-restore-csv-sources {3180  margin: 0;3181  text-align: center;3182}31833184/* ── Intro popup ──────────────────────────────────────────────────────── */31853186.peach-restore-intro-overlay {3187  position: absolute;3188  inset: 0;3189  z-index: 100;3190  display: flex;3191  align-items: center;3192  justify-content: center;3193  padding: 20px;3194  background: rgba(12, 10, 6, 0.7);3195  backdrop-filter: blur(4px);3196  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3197}31983199.peach-restore-intro-card {3200  width: 100%;3201  display: flex;3202  flex-direction: column;3203  gap: 12px;3204  padding: 22px 20px 20px;3205  border-radius: 16px;3206  border: 1px solid var(--peach-t3);3207  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3208  backdrop-filter: blur(4px);3209  -webkit-backdrop-filter: blur(4px);3210  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3211}32123213.peach-restore-intro-headline {3214  margin: 0;3215  font-family: var(--font-display);3216  font-style: italic;3217  font-size: 20px;3218  font-weight: 400;3219  color: var(--peach-t0);3220}32213222.peach-restore-intro-body {3223  display: flex;3224  flex-direction: column;3225  gap: 8px;3226}3227.peach-restore-intro-body p {3228  margin: 0;3229  font-size: 0.75rem;3230  color: var(--peach-t1);3231  line-height: 1.5;3232}32333234.peach-restore-intro-btn {3235  width: 100%;3236  margin-top: 4px;3237}32383239/* Snapshot restore panel */32403241.peach-empty-copy {3242  display: grid;3243  gap: 6px;3244  color: var(--peach-t1);3245  font-size: 0.8125rem;3246}32473248.peach-lock-submit {3249  width: 100%;3250  box-shadow:3251    0 1px 0 rgba(255,255,255,0.10) inset,3252    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),3253    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),3254    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);3255}32563257.peach-overlay-action {3258  font-size: 0.625rem;3259  padding: 4px 8px;3260  letter-spacing: 0.06em;3261  min-width: 44px;3262  text-align: center;3263}32643265.peach-inline-action {3266  flex-shrink: 0;3267  font-size: 0.5625rem;3268  letter-spacing: 0.1em;3269  text-transform: uppercase;3270  padding: 4px 7px;3271}3272.peach-password-toggle-btn {3273  display: inline-flex;3274  align-items: center;3275  justify-content: center;3276  min-width: 30px;3277  min-height: 26px;3278  padding: 0 7px;3279  border: 1px solid var(--peach-t3);3280  border-radius: 999px;3281  background: rgba(240, 232, 216, 0.04);3282  color: var(--peach-t2);3283  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;3284}3285.peach-password-toggle-btn:hover {3286  border-color: var(--peach-t2);3287  color: var(--peach-t0);3288  background: rgba(240, 232, 216, 0.06);3289}32903291.peach-new-textarea {3292  width: 100%;3293  min-height: 88px;3294  resize: vertical;3295  border: 0;3296  outline: none;3297  background: transparent;3298  color: var(--peach-t1);3299  font-family: "IBM Plex Mono", monospace;3300  font-size: 0.75rem;3301  line-height: 1.65;3302  caret-color: var(--peach-accent);3303}33043305.peach-new-textarea::placeholder {3306  color: var(--peach-t2);3307  opacity: 0.7;3308}33093310.peach-settings-actions {3311  display: grid;3312  gap: 8px;3313}33143315.peach-btn--danger {3316  background: var(--peach-breach);3317  color: #fff;3318  border-color: var(--peach-breach);3319}3320.peach-btn--danger:hover:not(:disabled) {3321  background: color-mix(in srgb, var(--peach-breach) 88%, #000);3322}3323.peach-btn--danger:disabled {3324  opacity: 0.55;3325  cursor: not-allowed;3326}33273328.peach-import-preview {3329  margin-bottom: 12px;3330  max-height: 152px;3331  overflow-y: auto;3332  border: 1px solid var(--peach-t3);3333  border-radius: 10px;3334  padding: 8px 10px;3335  display: grid;3336  gap: 8px;3337  background: rgba(240, 232, 216, 0.02);3338}33393340.peach-import-preview-row {3341  display: flex;3342  justify-content: space-between;3343  gap: 10px;3344  font-size: 0.6875rem;3345  color: var(--peach-t1);3346}33473348.peach-import-preview-title {3349  color: var(--peach-t0);3350  flex: 1;3351  min-width: 0;3352  overflow: hidden;3353  text-overflow: ellipsis;3354  white-space: nowrap;3355}33563357.peach-import-preview-meta {3358  color: var(--peach-t2);3359  flex-shrink: 0;3360  max-width: 42%;3361  overflow: hidden;3362  text-overflow: ellipsis;3363  white-space: nowrap;3364}33653366.peach-import-preview-more {3367  color: var(--peach-t2);3368  font-size: 0.625rem;3369}33703371.peach-restore-warning {3372  padding: 10px 12px;3373  border-radius: 12px;3374  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);3375  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);3376  color: var(--peach-t0);3377  font-size: 0.6875rem;3378  line-height: 1.55;3379}33803381.peach-provider-chips {3382  display: flex;3383  flex-wrap: wrap;3384  gap: 6px;3385}33863387.peach-provider-chip {3388  display: inline-flex;3389  align-items: center;3390  padding: 5px 8px;3391  border-radius: 999px;3392  border: 1px solid var(--peach-t3);3393  background: rgba(240, 232, 216, 0.02);3394  color: var(--peach-t1);3395  font-family: "IBM Plex Mono", monospace;3396  font-size: 0.5rem;3397  letter-spacing: 0.08em;3398  text-transform: uppercase;3399}34003401.peach-restore-file,3402.peach-restore-input {3403  width: 100%;3404  border-radius: 10px;3405  border: 1px solid var(--peach-t3);3406  background: var(--peach-s2);3407  color: var(--peach-t0);3408  font-size: 0.75rem;3409}34103411.peach-restore-file {3412  padding: 9px 10px;3413}34143415.peach-restore-file::file-selector-button {3416  margin-right: 10px;3417  padding: 7px 10px;3418  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);3419  border-radius: 999px;3420  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3421  color: var(--peach-t0);3422  font-size: 0.625rem;3423  letter-spacing: 0.08em;3424  text-transform: uppercase;3425  cursor: pointer;3426}34273428.peach-restore-input {3429  padding: 10px 12px;3430}34313432.peach-import-summary {3433  color: var(--peach-t1);3434  font-size: 0.75rem;3435  line-height: 1.6;3436  margin-bottom: 12px;3437}34383439.peach-restore-error {3440  color: rgba(220, 80, 60, 0.95);3441  font-size: 0.75rem;3442  line-height: 1.55;3443}34443445.peach-passkey-card {3446  max-width: 400px;3447  margin: auto 16px;3448  align-self: center;3449  width: calc(100% - 32px);3450}34513452/* Center the approval card vertically inside the overlay-view (which sets3453 * flex-direction: column without justify-content). Without this, the card3454 * sits at the top with a tall empty band below — looks unfinished on the3455 * 320px popup. */3456.peach-overlay-view:has(.peach-passkey-card) {3457  justify-content: center;3458}34593460.peach-pro-badge {3461  padding: 2px 6px;3462  border-radius: 999px;3463  font-family: var(--font-ui);3464  font-size: 0.625rem;3465  letter-spacing: 0.08em;3466  text-transform: uppercase;3467  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);3468  color: var(--peach-accent);3469}34703471/* ── Shortcuts rebind table ─────────────────────────────────── */3472.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }3473.peach-shortcut-row {3474  display: flex;3475  align-items: center;3476  gap: 10px;3477  padding: 6px 0;3478}3479.peach-shortcut-row-label {3480  flex: 1;3481  font-size: 0.75rem;3482  color: var(--peach-t0);3483}3484.peach-shortcut-chip {3485  min-width: 64px;3486  padding: 4px 10px;3487  border-radius: 6px;3488  border: 1px solid var(--peach-t3);3489  background: var(--peach-input-bg, var(--surface-card));3490  color: var(--peach-t0);3491  font-family: var(--font-mono);3492  font-size: 0.6875rem;3493  letter-spacing: 0.04em;3494  cursor: pointer;3495  text-align: center;3496  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;3497}3498.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }3499.peach-shortcut-chip.is-custom {3500  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3501  color: var(--peach-accent);3502}3503.peach-shortcut-chip.is-capturing {3504  border-color: var(--peach-accent);3505  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);3506  color: var(--peach-accent);3507  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;3508}3509@keyframes peach-shortcut-capture-pulse {3510  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }3511  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }3512}3513.peach-shortcut-reset {3514  background: transparent;3515  border: none;3516  cursor: pointer;3517  color: var(--peach-t2);3518  padding: 4px 6px;3519  border-radius: 5px;3520  font-size: 0.875rem;3521  line-height: 1;3522  transition: color 120ms ease, background 120ms ease;3523}3524.peach-shortcut-reset:hover {3525  color: var(--peach-t0);3526  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);3527}3528.peach-shortcuts-conflict {3529  margin: 4px 0 0;3530  padding: 8px 10px;3531  border-radius: 7px;3532  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);3533  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);3534  font-family: var(--font-mono);3535  font-size: 0.6875rem;3536  color: var(--peach-t0);3537}35383539/* ── Help dialog overlay (? to open) ────────────────────────── */3540.peach-shortcuts-help-backdrop {3541  position: fixed;3542  inset: 0;3543  background: rgba(0, 0, 0, 0.55);3544  backdrop-filter: blur(2px);3545  display: flex;3546  align-items: center;3547  justify-content: center;3548  z-index: 1000;3549  animation: peach-help-fade-in 140ms ease forwards;3550}3551@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }3552.peach-shortcuts-help-card {3553  width: min(320px, 92vw);3554  max-height: 80vh;3555  overflow-y: auto;3556  border-radius: 14px;3557  border: 1px solid var(--peach-t3);3558  background: var(--peach-bg);3559  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);3560  padding: 16px 18px 18px;3561  display: flex;3562  flex-direction: column;3563  gap: 12px;3564}3565.peach-shortcuts-help-head {3566  display: flex; align-items: center; justify-content: space-between;3567}3568.peach-shortcuts-help-head h3 {3569  margin: 0;3570  font-family: var(--font-display);3571  font-style: italic;3572  font-weight: 400;3573  font-size: 22px;3574  color: var(--peach-t0);3575}3576.peach-shortcuts-help-close {3577  background: transparent;3578  border: none;3579  color: var(--peach-t2);3580  cursor: pointer;3581  font-size: 0.875rem;3582  padding: 4px 8px;3583  border-radius: 5px;3584}3585.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }3586.peach-shortcuts-help-body ul {3587  list-style: none; padding: 0; margin: 4px 0 12px;3588  display: grid; gap: 8px;3589}3590.peach-shortcuts-help-body li {3591  display: flex; align-items: center; justify-content: space-between; gap: 12px;3592  font-size: 0.75rem; color: var(--peach-t0);3593}3594.peach-shortcuts-help-body kbd {3595  font-family: var(--font-mono);3596  font-size: 0.6875rem;3597  padding: 3px 8px;3598  border-radius: 6px;3599  background: var(--surface-card);3600  border: 1px solid var(--peach-t3);3601  color: var(--peach-accent);3602  letter-spacing: 0.04em;3603}36043605/* ── Pro promo on Account screen ────────────────────────────── */36063607.peach-loading {3608  position: absolute;3609  inset: 0;3610  display: flex;3611  align-items: center;3612  justify-content: center;3613  background: var(--bg);3614  animation: peach-loading-pulse 1.2s ease-in-out infinite;3615}36163617@keyframes peach-loading-pulse {3618  0%, 100% { opacity: 0.6; }3619  50% { opacity: 1; }3620}36213622/* ── Health Dashboard ─────────────────────────────────────────────────── */3623.peach-health-body {3624  flex: 1;3625  overflow-y: auto;3626  display: flex;3627  flex-direction: column;3628  /* Hide the platform scrollbar — every other scrollable surface in the3629   * popup hides it; the Health view was the one outlier and it ruined the3630   * polish. Behavior unchanged, just no rail rendered. */3631  scrollbar-width: none;3632  -ms-overflow-style: none;3633}3634.peach-health-body::-webkit-scrollbar { display: none; }36353636/* Loading screen for the Vault Health view. The advanced report computation3637 * can run for a few seconds on a large vault — without a clear loading3638 * screen the surface looked broken (the entry view bleeds through the3639 * empty body). Centered glyph + title + copy + indeterminate progress bar. */3640.peach-health-loading-screen {3641  flex: 1;3642  display: flex;3643  flex-direction: column;3644  align-items: center;3645  justify-content: center;3646  gap: 14px;3647  padding: 32px 28px;3648  text-align: center;3649}36503651.peach-health-loading-glyph {3652  width: 48px;3653  height: 48px;3654  display: flex;3655  align-items: center;3656  justify-content: center;3657  border-radius: 14px;3658  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3659  color: var(--peach-accent);3660}36613662.peach-health-loading-title {3663  margin: 0;3664  font-family: var(--font-display);3665  font-style: italic;3666  font-weight: 300;3667  font-size: 19px;3668  line-height: 1.2;3669  color: var(--peach-t0);3670}36713672.peach-health-loading-copy {3673  margin: 0;3674  max-width: 240px;3675  font-size: 0.75rem;3676  line-height: 1.55;3677  color: var(--peach-t2);3678}36793680.peach-health-loading-track {3681  width: 200px;3682  height: 3px;3683  margin-top: 6px;3684  border-radius: 999px;3685  background: rgba(240, 232, 216, 0.06);3686  overflow: hidden;3687}36883689.peach-health-loading-fill {3690  width: 40%;3691  height: 100%;3692  border-radius: inherit;3693  background: linear-gradient(3694    90deg,3695    transparent 0%,3696    var(--peach-accent) 50%,3697    transparent 100%3698  );3699  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;3700}37013702@keyframes peach-health-loading-sweep {3703  0%   { transform: translateX(-100%); }3704  100% { transform: translateX(350%); }3705}37063707[data-motion="reduce"] .peach-health-loading-fill,3708[data-motion="reduce"] .peach-health-loading-glyph svg path {3709  animation: none;3710}37113712.peach-health-summary {3713  padding: 10px 16px 6px;3714  font-family: "IBM Plex Mono", monospace;3715  font-size: 0.6875rem;3716}3717.peach-health-summary-warn { color: rgba(220,80,60,0.9); }3718.peach-health-summary-ok { color: var(--peach-t2); }37193720.peach-health-check-row {3721  padding: 0 16px 10px;3722}3723.peach-health-check-btn {3724  width: 100%;3725  display: flex;3726  align-items: center;3727  justify-content: center;3728}37293730.peach-health-sections {3731  flex: 1;3732  display: flex;3733  flex-direction: column;3734}37353736.peach-health-section {3737  border-bottom: 1px solid var(--peach-t3);3738}37393740.peach-health-section-header {3741  width: 100%;3742  display: flex;3743  align-items: center;3744  justify-content: space-between;3745  padding: 9px 16px;3746  background: transparent;3747  cursor: pointer;3748  color: var(--peach-t0);3749}37503751.peach-health-section-title-row {3752  display: flex;3753  align-items: center;3754  gap: 8px;3755}37563757.peach-health-count-badge {3758  display: inline-flex;3759  align-items: center;3760  justify-content: center;3761  min-width: 20px;3762  height: 18px;3763  padding: 0 5px;3764  border-radius: 999px;3765  background: rgba(220,80,60,0.15);3766  border: 1px solid rgba(220,80,60,0.25);3767  font-family: "IBM Plex Mono", monospace;3768  font-size: 0.5625rem;3769  color: rgba(220,80,60,0.9);3770}37713772.peach-health-section-title {3773  font-family: "IBM Plex Mono", monospace;3774  font-size: 0.6875rem;3775  text-transform: uppercase;3776  letter-spacing: 0.1em;3777  color: var(--peach-t1);3778}37793780.peach-health-chevron {3781  color: var(--peach-t2);3782  transition: transform 200ms ease;3783  flex-shrink: 0;3784}3785.peach-health-chevron.is-expanded {3786  transform: rotate(180deg);3787}37883789.peach-health-section-body {3790  padding: 0 16px 10px;3791  display: flex;3792  flex-direction: column;3793  gap: 4px;3794}37953796.peach-health-row {3797  display: flex;3798  align-items: flex-start;3799  justify-content: space-between;3800  gap: 8px;3801  padding: 6px 8px;3802  border-radius: 8px;3803  background: rgba(240,232,216,0.02);3804}38053806.peach-health-row-info {3807  flex: 1;3808  min-width: 0;3809  display: flex;3810  flex-direction: column;3811  gap: 2px;3812}38133814.peach-health-row-name {3815  font-family: var(--font-display);3816  font-size: 0.9375rem;3817  font-style: italic;3818  font-weight: 400;3819  color: var(--peach-t0);3820  white-space: nowrap;3821  overflow: hidden;3822  text-overflow: ellipsis;3823}38243825.peach-health-row-meta {3826  font-family: "IBM Plex Mono", monospace;3827  font-size: 0.5625rem;3828  color: var(--peach-t2);3829  letter-spacing: 0.05em;3830}38313832.peach-health-fix-btn {3833  font-size: 0.5625rem;3834  letter-spacing: 0.08em;3835  text-transform: uppercase;3836  padding: 4px 7px;3837  flex-shrink: 0;3838  display: flex;3839  align-items: center;3840}38413842.peach-health-empty {3843  font-family: "IBM Plex Mono", monospace;3844  font-size: 0.625rem;3845  color: var(--peach-t2);3846  padding: 6px 0;3847}38483849.peach-health-loading {3850  font-family: "IBM Plex Mono", monospace;3851  font-size: 0.625rem;3852  color: var(--peach-t2);3853  padding: 6px 0;3854  display: flex;3855  align-items: center;3856  gap: 6px;3857}38583859.peach-health-loading::before {3860  content: "";3861  width: 10px;3862  height: 10px;3863  border: 1.5px solid var(--peach-t3);3864  border-top-color: var(--peach-accent);3865  border-radius: 50%;3866  animation: peach-spin 600ms linear infinite;3867}38683869@keyframes peach-spin {3870  to { transform: rotate(360deg); }3871}38723873/* Pairing commits the vault key before the first entry sync. Keep that3874   implementation detail off-screen until the paired source records a real,3875   durable sync completion. */3876.peach-initial-sync {3877  position: relative;3878  display: flex;3879  align-items: center;3880  justify-content: center;3881  overflow: hidden;3882}38833884.peach-initial-sync-card {3885  position: relative;3886  z-index: 1;3887  width: min(100%, 320px);3888  display: flex;3889  flex-direction: column;3890  align-items: center;3891  gap: 10px;3892  padding: 36px 26px;3893  text-align: center;3894}38953896.peach-initial-sync-mark {3897  width: 54px;3898  height: 54px;3899  display: flex;3900  align-items: center;3901  justify-content: center;3902  border-radius: 18px;3903  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);3904  margin-bottom: 4px;3905}39063907.peach-initial-sync-mark svg {3908  width: 34px;3909  height: 34px;3910}39113912.peach-initial-sync-card h1 {3913  margin: 0;3914  color: var(--peach-t0);3915  font-family: var(--font-display);3916  font-size: 1.55rem;3917  font-style: italic;3918  font-weight: 400;3919}39203921.peach-initial-sync-card > p {3922  margin: 0;3923}39243925.peach-initial-sync-card #initial-sync-copy {3926  color: var(--peach-t1);3927  font-size: 0.78rem;3928  line-height: 1.55;3929}39303931.peach-initial-sync-progress {3932  width: 100%;3933  height: 3px;3934  overflow: hidden;3935  border-radius: 999px;3936  background: color-mix(in srgb, var(--peach-t0) 8%, transparent);3937  margin: 8px 0 2px;3938}39393940.peach-initial-sync-progress span {3941  display: block;3942  width: 42%;3943  height: 100%;3944  border-radius: inherit;3945  background: var(--peach-accent);3946  animation: peach-initial-sync-progress 1.4s cubic-bezier(0.2, 0, 0, 1) infinite;3947}39483949@keyframes peach-initial-sync-progress {3950  from { transform: translateX(-115%); }3951  to { transform: translateX(340%); }3952}39533954.peach-initial-sync-note {3955  color: var(--peach-t2);3956  font-size: 0.625rem;3957  line-height: 1.45;3958}39593960.peach-initial-sync-slow {3961  width: 100%;3962  display: flex;3963  flex-direction: column;3964  gap: 10px;3965  padding-top: 10px;3966  border-top: 1px solid var(--peach-border);3967}39683969.peach-initial-sync-slow p {3970  margin: 0;3971  color: var(--peach-t2);3972  font-size: 0.6875rem;3973  line-height: 1.45;3974}39753976.peach-initial-sync-slow .peach-btn {3977  width: 100%;3978}39793980@media (prefers-reduced-motion: reduce) {3981  .peach-initial-sync-progress span {3982    width: 100%;3983    opacity: 0.7;3984    animation: none;3985  }3986}39873988/* Tag chips */3989.peach-tag-chip {3990  display: inline-flex;3991  align-items: center;3992  gap: 4px;3993  padding: 3px 8px;3994  border-radius: 999px;3995  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);3996  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3997  color: var(--peach-t0);3998  font-family: "IBM Plex Mono", monospace;3999  font-size: 0.625rem;4000  letter-spacing: 0.04em;4001}40024003.peach-tag-chip-remove {4004  background: transparent;4005  border: none;4006  color: inherit;4007  opacity: 0.6;4008  cursor: pointer;4009  padding: 0;4010  font-size: 0.75rem;4011  line-height: 1;4012}40134014.peach-tag-chip-remove:hover {4015  opacity: 1;4016}40174018/* Tag input */4019.peach-tag-input-wrap {4020  border-bottom: 1px solid var(--peach-t3);4021}40224023.peach-tag-suggestions {4024  display: flex;4025  flex-wrap: wrap;4026  gap: 4px;4027  padding: 6px 0;4028}40294030.peach-tag-suggestion {4031  padding: 2px 8px;4032  border-radius: 999px;4033  border: 1px solid var(--peach-t3);4034  background: var(--peach-s2);4035  color: var(--peach-t1);4036  font-family: "IBM Plex Mono", monospace;4037  font-size: 0.625rem;4038  cursor: pointer;4039  transition: border-color 80ms ease, background 80ms ease;4040}40414042.peach-tag-suggestion:hover {4043  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4044  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4045}40464047/* Identity suggestions — shown below username/email inputs in new-entry form */4048@keyframes peach-suggest-in {4049  from { opacity: 0; transform: translateY(-4px); }4050  to   { opacity: 1; transform: none; }4051}40524053.peach-identity-suggestions {4054  display: flex;4055  flex-direction: column;4056  gap: 1px;4057  margin-top: 4px;4058  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;4059}40604061.peach-identity-filter-row {4062  display: flex;4063  align-items: center;4064  gap: 4px;4065  padding: 2px 0 5px;4066}40674068.peach-identity-collapse-btn {4069  margin-left: auto;4070  background: transparent;4071  border: none;4072  cursor: pointer;4073  color: var(--peach-t3);4074  padding: 2px 4px;4075  display: flex;4076  align-items: center;4077  line-height: 0;4078  border-radius: 3px;4079  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);4080}40814082.peach-identity-collapse-btn:hover {4083  color: var(--peach-t1);4084}40854086.peach-identity-collapse-btn.is-collapsed {4087  transform: rotate(-90deg);4088}40894090.peach-identity-rows {4091  display: grid;4092  grid-template-rows: 1fr;4093  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);4094}40954096.peach-identity-rows.is-collapsed {4097  grid-template-rows: 0fr;4098}40994100.peach-identity-rows-inner {4101  overflow-y: auto;4102  min-height: 0;4103  max-height: 148px;4104  scrollbar-width: thin;4105  scrollbar-color: var(--peach-t3) transparent;4106  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);4107  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);4108}41094110.peach-identity-rows-inner::-webkit-scrollbar {4111  width: 4px;4112}41134114.peach-identity-rows-inner::-webkit-scrollbar-track {4115  background: transparent;4116}41174118.peach-identity-rows-inner::-webkit-scrollbar-thumb {4119  background: var(--peach-t3);4120  border-radius: 2px;4121}41224123.peach-identity-suggestion {4124  display: flex;4125  align-items: center;4126  gap: 6px;4127  width: 100%;4128  padding: 4px 6px;4129  border-radius: 5px;4130  border: none;4131  background: transparent;4132  cursor: pointer;4133  text-align: left;4134  transition: background 80ms ease;4135}41364137.peach-identity-suggestion:hover,4138.peach-identity-suggestion:focus {4139  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4140  outline: none;4141}41424143.peach-identity-suggestion-value {4144  font-family: "IBM Plex Mono", monospace;4145  font-size: 0.7rem;4146  color: var(--peach-t1);4147  overflow: hidden;4148  text-overflow: ellipsis;4149  white-space: nowrap;4150  flex: 1;4151  min-width: 0;4152}41534154.peach-identity-suggestion-meta {4155  font-family: "IBM Plex Mono", monospace;4156  font-size: 0.6rem;4157  color: var(--peach-t3);4158  flex-shrink: 0;4159}41604161/* Tag filter strip */4162.peach-tag-filter-strip {4163  border-bottom: 1px solid var(--peach-t3);4164  flex-shrink: 0;4165}41664167.peach-tag-filter-chip {4168  display: inline-flex;4169  align-items: center;4170  padding: 4px 10px;4171  border-radius: 999px;4172  border: 1px solid var(--peach-t3);4173  background: transparent;4174  color: var(--peach-t2);4175  font-family: "IBM Plex Mono", monospace;4176  font-size: 0.5625rem;4177  letter-spacing: 0.06em;4178  text-transform: uppercase;4179  cursor: pointer;4180  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;4181  white-space: nowrap;4182}41834184.peach-tag-filter-chip:hover {4185  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4186  color: var(--peach-t1);4187}41884189.peach-tag-filter-chip.is-selected {4190  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);4191  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);4192  color: var(--peach-t0);4193}41944195/* ─────────────────────────────────────────────────────────────────────────4196   v1.4.12 additions4197   ─────────────────────────────────────────────────────────────────────── */41984199/* Sort bar */4200.peach-sort-bar {4201  display: flex;4202  align-items: center;4203  gap: 4px;4204  padding: 5px 12px;4205  border-bottom: 1px solid var(--peach-t3);4206  flex-shrink: 0;4207  overflow-x: auto;4208  scrollbar-width: none;4209}42104211.peach-sort-btn {4212  padding: 2px 9px;4213  border-radius: 999px;4214  border: 1px solid transparent;4215  background: transparent;4216  color: var(--peach-t2);4217  font-family: "IBM Plex Mono", monospace;4218  font-size: 0.5625rem;4219  letter-spacing: 0.07em;4220  text-transform: uppercase;4221  cursor: pointer;4222  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;4223  white-space: nowrap;4224}42254226.peach-sort-btn:hover {4227  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);4228  color: var(--peach-t1);4229}42304231.peach-sort-btn.is-active {4232  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);4233  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);4234  color: var(--peach-t0);4235}42364237/* Tab-match badge on entry rows */4238.peach-tab-match-badge {4239  display: inline-block;4240  width: 6px;4241  height: 6px;4242  border-radius: 50%;4243  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);4244  margin-left: 5px;4245  vertical-align: middle;4246  flex-shrink: 0;4247  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);4248}42494250.peach-entry-row.is-tab-match {4251  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);4252  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);4253}42544255.peach-entry-row.is-tab-match:hover {4256  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4257}42584259/* Entry list stagger entrance */4260@keyframes peach-entry-fadein {4261  from { opacity: 0; transform: translateY(4px); }4262  to   { opacity: 1; transform: translateY(0); }4263}42644265.peach-vault-list .peach-entry-row {4266  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;4267}42684269/* Button press micro-interaction */4270.peach-btn:active {4271  transform: scale(0.95);4272  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);4273}42744275.peach-sort-btn:active,4276.peach-tag-filter-chip:active {4277  transform: scale(0.93);4278  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);4279}42804281/* Password strength bar (Lock view + shared) */4282.peach-password-strength {4283  display: flex;4284  align-items: center;4285  gap: 8px;4286  margin-top: 6px;4287}42884289.peach-strength-bar {4290  flex: 1;4291  height: 3px;4292  border-radius: 2px;4293  background: var(--peach-t3);4294  overflow: hidden;4295}42964297.peach-strength-fill {4298  height: 100%;4299  border-radius: 2px;4300  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),4301              background 300ms ease;4302}43034304.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }4305.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }4306.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }4307.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }43084309.peach-strength-label {4310  font-family: "IBM Plex Mono", monospace;4311  font-style: italic;4312  font-size: 0.5625rem;4313  font-weight: 300;4314  letter-spacing: 0.06em;4315  color: var(--peach-t2);4316  min-width: 36px;4317  text-align: right;4318}43194320.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }4321.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }4322.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }4323.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }43244325/* Duress form */43264327.peach-duress-form {4328  padding: 8px 0 4px;4329  display: flex;4330  flex-direction: column;4331  gap: 6px;4332}43334334.peach-duress-form .peach-label {4335  margin-top: 4px;4336}43374338.peach-duress-actions {4339  display: flex;4340  gap: 6px;4341  align-items: center;4342  margin-top: 4px;4343}43444345.peach-duress-actions .peach-btn:first-child {4346  margin-right: auto;4347}43484349/* Improved overlay spring entrance */4350.peach-overlay-view.ov-enter-up {4351  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;4352}43534354@keyframes ov-enter-up-spring {4355  from { opacity: 0; transform: translateY(16px) scale(0.98); }4356  to   { opacity: 1; transform: translateY(0) scale(1); }4357}43584359.peach-overlay-view.ov-enter-right {4360  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;4361}43624363@keyframes ov-enter-right-spring {4364  from { opacity: 0; transform: translateX(18px) scale(0.98); }4365  to   { opacity: 1; transform: translateX(0) scale(1); }4366}43674368/* ── Onboarding-mode restore screens (file import) ── */4369/* Used when MainImportView renders during onboarding (no vault yet).4370   Animates like a lock-screen transition. */4371.peach-lock-view {4372  position: absolute;4373  inset: 0;4374  display: flex;4375  flex-direction: column;4376  background:4377    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),4378    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),4379    var(--peach-bg);4380  z-index: 2;4381  overflow: hidden;4382  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4383}43844385.peach-lock-view-header {4386  display: flex;4387  align-items: center;4388  justify-content: space-between;4389  padding: 16px 18px 12px;4390  flex-shrink: 0;4391}43924393/* ───────── Settings: auto-lock select ───────── */4394.peach-settings-select {4395  font-family: "IBM Plex Mono", monospace;4396  font-size: 0.6875rem;4397  background: transparent;4398  border: 1px solid var(--peach-t3);4399  border-radius: 4px;4400  color: var(--peach-t1);4401  padding: 3px 6px;4402  cursor: pointer;4403  outline: none;4404}4405.peach-settings-select:focus {4406  border-color: var(--peach-accent);4407}44084409/* ───────── Duress status pill (new polished) ───────── */4410.peach-duress-status-pill {4411  font-family: "IBM Plex Mono", monospace;4412  font-size: 0.5625rem;4413  text-transform: uppercase;4414  letter-spacing: 0.12em;4415  padding: 2px 8px;4416  border-radius: 12px;4417  background: var(--peach-t3);4418  color: var(--peach-t2);4419  flex-shrink: 0;4420}4421.peach-duress-status-pill.is-active {4422  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);4423  color: var(--peach-accent);4424}44254426/* ───────── Entry advanced disclosure (canary) ───────── */44274428.peach-canary-section {4429  margin-top: 10px;4430  display: grid;4431  gap: 6px;4432}44334434/* ───────── Import: merge/replace radio choices ───────── */4435.peach-import-choice {4436  display: flex;4437  align-items: flex-start;4438  gap: 10px;4439  padding: 8px 10px;4440  border: 1px solid var(--peach-t3);4441  border-radius: 10px;4442  cursor: pointer;4443  margin-bottom: 6px;4444  transition: border-color 120ms ease, background 120ms ease;4445}4446.peach-import-choice:hover {4447  border-color: var(--peach-accent);4448}4449.peach-import-choice input[type="radio"] {4450  margin-top: 3px;4451  accent-color: var(--peach-accent);4452  flex-shrink: 0;4453}4454.peach-import-choice-main {4455  display: flex;4456  flex-direction: column;4457  gap: 2px;4458  min-width: 0;4459}4460.peach-import-choice-label {4461  font-size: 0.75rem;4462  color: var(--peach-t0);4463}4464.peach-import-choice-sub {4465  font-size: 0.6875rem;4466  color: var(--peach-t2);4467  line-height: 1.5;4468}44694470/* ───────── Export: success confirmation strip ───────── */4471.peach-export-success {4472  display: flex;4473  align-items: flex-start;4474  gap: 10px;4475  padding: 12px;4476  border-radius: 12px;4477  border: 1px solid rgba(150, 175, 110, 0.3);4478  background: rgba(150, 175, 110, 0.08);4479  color: var(--peach-t0);4480  font-size: 0.75rem;4481  line-height: 1.55;4482}4483.peach-export-success-check {4484  color: rgba(150, 175, 110, 0.9);4485  font-size: 0.875rem;4486  flex-shrink: 0;4487}44884489/* ── Trash view ──────────────────────────────────────────────────────── */4490.peach-trash-entry-row {4491  display: flex;4492  align-items: center;4493  justify-content: space-between;4494  gap: 8px;4495  padding: 8px 0;4496  border-bottom: 1px solid var(--peach-border);4497}4498.peach-trash-entry-info {4499  flex: 1;4500  min-width: 0;4501  display: flex;4502  flex-direction: column;4503  gap: 2px;4504}4505.peach-trash-entry-title {4506  font-size: 0.8125rem;4507  color: var(--peach-t0);4508  overflow: hidden;4509  text-overflow: ellipsis;4510  white-space: nowrap;4511}4512.peach-trash-entry-meta {4513  font-family: var(--font-mono);4514  font-size: 0.5625rem;4515  color: var(--peach-t2);4516  letter-spacing: 0.04em;4517}4518.peach-trash-entry-actions {4519  display: flex;4520  align-items: center;4521  gap: 4px;4522  flex-shrink: 0;4523}4524.peach-trash-delete-btn {4525  background: transparent;4526  border: 0;4527  color: var(--peach-t3);4528  font-size: 1rem;4529  line-height: 1;4530  cursor: pointer;4531  padding: 2px 5px;4532  transition: color 0.15s;4533}4534.peach-trash-delete-btn:hover { color: var(--peach-breach); }4535.peach-trash-list {4536  overflow-y: auto;4537}4538.peach-trash-footer {4539  display: flex;4540  align-items: center;4541  gap: 8px;4542  padding: 8px 0 0;4543  border-top: 1px solid var(--peach-border);4544  margin-top: 4px;4545}4546.peach-trash-purge-all {4547  background: transparent;4548  border: 0;4549  color: var(--peach-t3);4550  font-size: 0.625rem;4551  cursor: pointer;4552  padding: 4px 0;4553  letter-spacing: 0.03em;4554  transition: color 0.2s;4555}4556.peach-trash-purge-all:hover { color: var(--peach-breach); }4557.peach-trash-purge-confirm-label {4558  font-size: 0.625rem;4559  color: var(--peach-t1);4560  flex: 1;4561}45624563/* ── Sort bar trash button ───────────────────────────────────────────── */4564.peach-sort-trash-btn {4565  display: flex;4566  align-items: center;4567  justify-content: center;4568  padding: 3px 5px;4569  background: transparent;4570  border: none;4571  cursor: pointer;4572  color: var(--peach-t2);4573  border-radius: 4px;4574  transition: color 140ms ease, background 140ms ease;4575}4576.peach-sort-trash-btn:hover {4577  color: var(--peach-t1);4578  background: var(--peach-t3);4579}4580.peach-sort-trash-btn.is-active {4581  color: var(--peach-accent);4582}45834584/* Accent color picker */4585.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }4586.peach-accent-picker {4587  display: flex;4588  flex-wrap: wrap;4589  gap: 7px;4590  padding: 2px 0;4591}4592.peach-accent-swatch {4593  width: 22px;4594  height: 22px;4595  border-radius: 50%;4596  border: 2px solid transparent;4597  cursor: pointer;4598  padding: 0;4599  transition: transform 100ms;4600  outline-offset: 2px;4601}4602.peach-accent-swatch:hover { transform: scale(1.15); }4603.peach-accent-swatch.is-active {4604  border-color: var(--peach-t0);4605  transform: scale(1.1);4606}46074608.peach-pill-group {4609  display: flex;4610  gap: 6px;4611}4612.peach-pill-group .peach-btn.is-active {4613  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4614  border-color: var(--peach-accent);4615  color: var(--peach-t0);4616}46174618/* ── Card entry styles ───────────────────────────────────────── */4619.peach-card-number {4620  font-family: var(--peach-mono);4621  letter-spacing: 0.08em;4622}46234624.peach-card-network-badge {4625  font-size: 0.625rem;4626  padding: 1px 5px;4627  border-radius: 4px;4628  border: 0.5px solid var(--peach-border);4629  color: var(--peach-text-dim);4630  margin-left: 6px;4631  vertical-align: middle;4632}46334634.peach-card-expiry-row {4635  display: flex;4636  align-items: center;4637  gap: 8px;4638}46394640.peach-card-expiry-sep {4641  color: var(--peach-text-dim);4642}46434644/* ── Pro tier — upgrade screen ──────────────────────────────── */4645.peach-pro-mark {4646  font-size: 0.5625rem;4647  color: var(--peach-accent);4648  margin-left: 6px;4649  vertical-align: super;4650  opacity: 0.7;4651}46524653.peach-pro-mini-badge {4654  display: block;4655  font-size: 0.625rem;4656  font-style: italic;4657  color: var(--peach-accent);4658  letter-spacing: 0.04em;4659  margin-top: -2px;4660  padding-left: 2px;4661  opacity: 0.85;4662  text-align: center;4663}46644665.peach-wordmark-stack {4666  display: inline-flex;4667  flex-direction: column;4668  align-items: center;4669}46704671/* ── Pro tier — upgrade page ─────────────────────────────────── */4672/* ── Pro upgrade — redesigned editorial layout ─────────────────── */46734674.peach-pro-upgrade {4675  display: flex;4676  flex-direction: column;4677  align-items: stretch;4678  gap: 10px;4679  padding: 2px 2px 12px;4680}46814682.peach-pro-eyebrow {4683  margin: 0;4684  font-family: var(--font-ui);4685  font-size: 0.625rem;4686  font-weight: 500;4687  letter-spacing: 0.12em;4688  color: var(--peach-accent);4689}46904691.peach-pro-headline {4692  margin: 0;4693  font-family: var(--font-display, "Cormorant Garamond", serif);4694  font-size: 30px;4695  font-weight: 700;4696  font-style: normal;4697  line-height: 1.05;4698  color: var(--peach-t0);4699  letter-spacing: -0.01em;4700}4701.peach-pro-headline em {4702  font-style: italic;4703  font-weight: 400;4704  color: var(--peach-accent);4705}47064707.peach-pro-subtitle {4708  margin: 0;4709  font-size: 0.6875rem;4710  line-height: 1.5;4711  color: var(--peach-t1);4712}47134714/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */4715.peach-pro-section-label {4716  margin: 6px 0 0;4717  font-family: var(--font-ui);4718  font-size: 0.5625rem;4719  font-weight: 500;4720  letter-spacing: 0.12em;4721  text-transform: uppercase;4722  color: var(--peach-t2);4723}47244725/* 2-column numbered feature grid */4726.peach-pro-grid {4727  display: grid;4728  grid-template-columns: 1fr 1fr;4729  border-top: 1px solid var(--peach-border);4730  border-left: 1px solid var(--peach-border);4731}47324733.peach-pro-grid-item {4734  display: flex;4735  flex-direction: column;4736  gap: 2px;4737  padding: 8px 9px;4738  border-right: 1px solid var(--peach-border);4739  border-bottom: 1px solid var(--peach-border);4740}47414742.peach-pro-grid-item--wide {4743  grid-column: 1 / -1;4744}47454746.peach-pro-grid-num {4747  font-family: var(--font-mono);4748  font-size: 0.5625rem;4749  color: var(--peach-accent);4750  letter-spacing: 0.06em;4751  opacity: 0.85;4752}47534754.peach-pro-grid-name {4755  font-size: 0.8125rem;4756  font-weight: 500;4757  color: var(--peach-t0);4758  line-height: 1.2;4759}47604761.peach-pro-grid-desc {4762  font-size: 0.625rem;4763  color: var(--peach-t1);4764  line-height: 1.4;4765}47664767.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {4768  animation: peach-pulse-accent 600ms ease-out forwards;4769}47704771@keyframes peach-pulse-accent {4772  0%   { opacity: 1; transform: scale(1.2); }4773  100% { opacity: 0.85; transform: scale(1); }4774}47754776/* Actions */4777.peach-pro-upgrade-actions {4778  display: flex;4779  flex-direction: column;4780  align-items: stretch;4781  gap: 10px;4782}47834784.peach-pro-pricing {4785  margin: 0;4786  font-size: 1rem;4787  font-weight: 600;4788  color: var(--peach-t0);4789  letter-spacing: 0.01em;4790}4791.peach-pro-pricing-sub {4792  font-size: 0.75rem;4793  font-weight: 400;4794  color: var(--peach-t1);4795  letter-spacing: 0.02em;4796}47974798.peach-pro-upgrade-cta {4799  display: flex;4800  align-items: center;4801  justify-content: center;4802  text-decoration: none;4803  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);4804  border: 1px solid var(--peach-accent);4805  border-radius: 10px;4806  color: var(--peach-accent);4807  font-family: var(--font-ui);4808  font-size: 0.8125rem;4809  font-weight: 600;4810  letter-spacing: 0.06em;4811  padding: 11px 16px;4812  transition: background 0.15s ease, color 0.15s ease;4813}4814.peach-pro-upgrade-cta:hover {4815  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);4816}48174818/* Pairing's terminal entitlement fallback reuses the Peach Pro card's4819   editorial hierarchy without embedding the settings deck itself. */4820.peach-pair-pro-required {4821  width: 100%;4822  display: flex;4823  flex-direction: column;4824  align-items: stretch;4825  gap: 10px;4826  text-align: left;4827}4828.peach-pair-pro-required .peach-pro-headline {4829  font-size: 1.75rem;4830}4831.peach-pair-pro-required .peach-pro-subtitle {4832  font-size: 0.6875rem;4833}4834.peach-pair-pro-grid {4835  grid-template-columns: 1fr;4836}4837.peach-pair-pro-button {4838  width: 100%;4839  cursor: pointer;4840}4841.peach-desktop-error--pro {4842  width: min(100%, 320px);4843  overflow-y: auto;4844}48454846.peach-pro-key-divider {4847  display: flex;4848  align-items: center;4849  gap: 8px;4850  color: var(--peach-t2);4851  font-size: 0.5625rem;4852  letter-spacing: 0.1em;4853}4854.peach-pro-key-divider::before,4855.peach-pro-key-divider::after {4856  content: "";4857  flex: 1;4858  height: 1px;4859  background: var(--peach-border);4860}48614862/* Inline key entry row */4863.peach-pro-key-inline {4864  display: flex;4865  align-items: center;4866  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);4867  border: 1px solid var(--peach-border);4868  border-radius: 8px;4869  overflow: hidden;4870}4871.peach-pro-key-inline-input {4872  flex: 1;4873  background: transparent;4874  border: none;4875  outline: none;4876  color: var(--peach-t1);4877  font-family: var(--font-mono);4878  font-size: 0.625rem;4879  letter-spacing: 0.06em;4880  padding: 9px 10px;4881}4882.peach-pro-key-inline-input::placeholder {4883  color: var(--peach-t2);4884}4885.peach-pro-key-apply {4886  background: transparent;4887  border: none;4888  border-left: 1px solid var(--peach-border);4889  color: var(--peach-t2);4890  font-family: var(--font-ui);4891  font-size: 0.5625rem;4892  font-weight: 600;4893  letter-spacing: 0.08em;4894  padding: 9px 10px;4895  cursor: pointer;4896  transition: color 0.15s ease;4897  flex-shrink: 0;4898}4899.peach-pro-key-apply:not(:disabled):hover {4900  color: var(--peach-accent);4901}4902.peach-pro-key-apply:disabled {4903  opacity: 0.35;4904  cursor: not-allowed;4905}49064907/* ── Pro tier — key ceremony ─────────────────────────────────── */49084909.peach-pro-key-error {4910  margin: 0;4911  font-size: 0.75rem;4912  text-align: center;4913  color: var(--peach-breach, #e55);4914  padding: 0;4915}49164917/* ── Pro tier — active state ─────────────────────────────────── */4918.peach-pro-active {4919  display: flex;4920  flex-direction: column;4921  align-items: center;4922  gap: 0;4923  padding: 8px 4px 16px;4924  min-height: 280px;4925}49264927.peach-pro-active-hero {4928  display: flex;4929  flex-direction: column;4930  align-items: center;4931  gap: 6px;4932  padding: 20px 0 8px;4933}49344935.peach-pro-active-mark-wrap {4936  display: flex;4937  align-items: center;4938  justify-content: center;4939  margin-bottom: 4px;4940}49414942.peach-pro-active-mark {4943  width: 60px;4944  height: 60px;4945}49464947.peach-pro-active-title {4948  font-family: var(--font-display, var(--font-ui));4949  font-size: 26px;4950  margin: 0;4951  color: var(--peach-t0);4952  letter-spacing: 0.01em;4953}49544955.peach-pro-active-since {4956  margin: 0;4957  font-size: 0.6875rem;4958  color: var(--peach-t2);4959  font-style: italic;4960}49614962.peach-pro-active-features {4963  display: flex;4964  flex-direction: column;4965  gap: 8px;4966  width: 100%;4967  padding: 14px 8px 0;4968  border-top: 1px solid var(--peach-border);4969  flex: 1;4970}49714972.peach-pro-active-feature {4973  display: flex;4974  align-items: center;4975  gap: 9px;4976}49774978.peach-pro-active-feature-mark {4979  color: var(--peach-accent);4980  font-size: 0.625rem;4981  opacity: 0.65;4982  flex-shrink: 0;4983}49844985.peach-pro-active-feature-name {4986  font-size: 0.75rem;4987  color: var(--peach-t1);4988}49894990.peach-pro-deactivate {4991  align-self: center;4992  background: transparent;4993  border: 0;4994  color: var(--peach-t3);4995  font-size: 0.625rem;4996  cursor: pointer;4997  padding: 8px 0 0;4998  margin-top: 16px;4999  letter-spacing: 0.03em;5000  transition: color 0.2s;5001}50025003.peach-pro-deactivate:hover { color: var(--peach-t2); }50045005.peach-pro-deactivate:disabled {5006  opacity: 0.5;5007  cursor: default;5008}50095010/* ── Pro card activation sparkles & thank-you ── */5011button.peach-pro-active-mark-wrap {5012  background: transparent;5013  border: 0;5014  padding: 0;5015  cursor: pointer;5016  position: relative;5017  overflow: visible;5018}50195020.peach-pro-sparks {5021  position: absolute;5022  inset: 0;5023  pointer-events: none;5024  overflow: visible;5025}50265027.peach-pro-spark {5028  position: absolute;5029  top: 50%;5030  left: 50%;5031  font-size: 9px;5032  line-height: 1;5033  opacity: 0;5034  transform: translate(-50%, -50%);5035  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;5036}50375038@keyframes peach-pro-spark-fly {5039  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }5040  25%  { opacity: 1; }5041  100% {5042    opacity: 0;5043    transform: translate(5044      calc(-50% + var(--spark-x, 0px)),5045      calc(-50% + var(--spark-y, -40px))5046    ) scale(0.8);5047  }5048}50495050.peach-pro-thankyou-text {5051  margin: 4px 0 0;5052  font-size: 0.6875rem;5053  font-style: italic;5054  color: currentColor;5055  opacity: 0;5056  animation: peach-pro-thankyou-flash 2.5s ease both;5057}50585059@keyframes peach-pro-thankyou-flash {5060  0%   { opacity: 0; transform: translateY(4px); }5061  15%  { opacity: 0.75; transform: translateY(0); }5062  75%  { opacity: 0.75; }5063  100% { opacity: 0; }5064}50655066/* ── Pro advanced health remediation queue ──────────────────── */5067.peach-health-pro-queue {5068  display: flex;5069  flex-direction: column;5070  gap: 10px;5071  padding: 12px;5072  margin: 0 0 12px;5073  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5074  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);5075  border-radius: 10px;5076}50775078.peach-health-pro-queue-head {5079  display: flex;5080  justify-content: space-between;5081  align-items: baseline;5082}50835084.peach-health-pro-queue-title {5085  font-size: 0.75rem;5086  font-weight: 500;5087  letter-spacing: 0.04em;5088  text-transform: uppercase;5089  color: var(--peach-accent);5090}50915092.peach-health-pro-queue-score {5093  font-size: 0.6875rem;5094  color: var(--peach-t2);5095}50965097.peach-health-pro-row {5098  display: flex;5099  gap: 10px;5100  align-items: center;5101  padding: 8px 0;5102  border-top: 1px solid var(--peach-border);5103}51045105.peach-health-pro-row-info {5106  flex: 1;5107  display: flex;5108  flex-direction: column;5109  gap: 4px;5110  min-width: 0;5111}51125113.peach-health-pro-action {5114  flex: 0 0 auto;5115  padding: 4px 8px;5116  font-size: 0.5625rem;5117  letter-spacing: 0.08em;5118  text-transform: uppercase;5119}51205121.peach-health-pro-row-name {5122  font-size: 0.8125rem;5123  color: var(--peach-t0);5124  overflow: hidden;5125  text-overflow: ellipsis;5126  white-space: nowrap;5127}51285129.peach-health-pro-row-meta {5130  font-size: 0.6875rem;5131  color: var(--peach-t2);5132}51335134.peach-health-pro-bar {5135  height: 2px;5136  background: var(--peach-border);5137  border-radius: 2px;5138  overflow: hidden;5139  margin-top: 2px;5140}51415142.peach-health-pro-bar-fill {5143  height: 100%;5144  background: var(--peach-accent);5145  transition: width 200ms ease-out;5146}51475148/* ── Pro activation celebration ── */5149@keyframes peach-pro-bloom {5150  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }5151  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))5152                 drop-shadow(0 0 48px var(--peach-glow)); }5153  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }5154}51555156@keyframes peach-pro-wordmark-in {5157  from { opacity: 0; transform: translateY(4px); }5158  to   { opacity: 1; transform: translateY(0); }5159}51605161@keyframes peach-pro-fade-out {5162  from { opacity: 1; }5163  to   { opacity: 0; }5164}51655166.peach-pro-celebration {5167  background:5168    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5169    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5170    var(--peach-bg);5171  border: 1px solid var(--peach-t3);5172  box-shadow:5173    0 2px 8px rgba(0,0,0,0.55),5174    0 14px 48px rgba(0,0,0,0.7),5175    0 0 0 1px rgba(240,232,216,0.04);5176  overflow: hidden;5177  width: 320px;5178  height: 520px;5179  display: flex;5180  flex-direction: column;5181  align-items: center;5182  justify-content: center;5183  gap: 8px;5184  padding: 32px 24px;5185  text-align: center;5186}51875188.peach-pro-celebration.is-leaving {5189  animation: peach-pro-fade-out 400ms ease forwards;5190}51915192.peach-pro-bloom-target {5193  display: flex;5194  align-items: center;5195  justify-content: center;5196  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;5197  margin-bottom: 12px;5198}51995200.peach-pro-bloom-icon {5201  width: 48px;5202  height: 48px;5203}52045205.peach-pro-wordmark {5206  font-family: var(--font-display);5207  font-size: 22px;5208  font-style: italic;5209  font-weight: 400;5210  color: var(--peach-accent);5211  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;5212}52135214.peach-pro-thankyou {5215  font-size: 0.75rem;5216  font-style: italic;5217  color: var(--peach-t2);5218  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;5219}52205221/* ── Pending Pro notice banner (shown after background sync gate fires) ── */5222.peach-pro-notice-banner {5223  display: flex;5224  align-items: center;5225  gap: 8px;5226  padding: 7px 12px;5227  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));5228  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);5229  font-size: 0.6875rem;5230  color: var(--peach-t2);5231  font-family: "IBM Plex Mono", monospace;5232  flex-shrink: 0;5233}52345235.peach-pro-notice-link {5236  background: none;5237  border: none;5238  padding: 0;5239  cursor: pointer;5240  font-size: 0.6875rem;5241  color: var(--peach-accent);5242  font-family: "IBM Plex Mono", monospace;5243  margin-left: auto;5244  white-space: nowrap;5245}52465247.peach-pro-notice-close {5248  background: none;5249  border: none;5250  padding: 0 0 0 4px;5251  cursor: pointer;5252  font-size: 0.625rem;5253  color: var(--peach-t3);5254  line-height: 1;5255}52565257/* Overlays the top edge: the popup is a fixed 520px, so a flow banner would clip the bottom. */5258.peach-site-access-banner {5259  position: absolute;5260  inset: 0 0 auto;5261  background:5262    linear-gradient(color-mix(in srgb, var(--peach-accent) 12%, transparent), color-mix(in srgb, var(--peach-accent) 12%, transparent)),5263    var(--bg);5264  z-index: 50;5265}52665267/* ─── First-run onboarding ──────────────────────────────────────────────5268   Three-card welcome shown once before vault creation. The PeachScript5269   rune background drifts behind everything at very low opacity — it's5270   atmosphere, not focus. The cards themselves use the same panel5271   language as the rest of the popup so the transition into NewVault is5272   continuous, not a jarring switch of visual register. */52735274.peach-onboarding {5275  position: relative;5276  display: flex;5277  flex-direction: column;5278  width: 100%;5279  height: 100%;5280  padding: 16px 16px 18px;5281  box-sizing: border-box;5282  overflow: hidden;5283  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;5284}52855286.peach-onboarding.is-completing {5287  animation: peach-onboard-exit 200ms ease-out forwards;5288}52895290.peach-rune-background {5291  position: absolute;5292  inset: 0;5293  width: 100%;5294  height: 100%;5295  pointer-events: none;5296  z-index: 0;5297  transition: opacity 500ms ease-out;5298}52995300.peach-onboarding.is-completing .peach-rune-background {5301  opacity: 0;5302}53035304.peach-onboarding-header {5305  position: relative;5306  z-index: 1;5307  display: flex;5308  align-items: center;5309  margin-bottom: 14px;5310}53115312.peach-onboarding-card {5313  position: relative;5314  z-index: 1;5315  flex: 1;5316  min-height: 0;5317  display: flex;5318  flex-direction: column;5319  gap: 10px;5320  padding: 22px 20px;5321  justify-content: center;5322  border-radius: 16px;5323  border: 1px solid var(--peach-t3);5324  background:5325    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));5326  backdrop-filter: blur(3px);5327  -webkit-backdrop-filter: blur(3px);5328  box-shadow:5329    inset 0 1px 0 rgba(240, 232, 216, 0.04),5330    0 12px 28px rgba(0, 0, 0, 0.12);5331  cursor: pointer;5332  user-select: none;5333  overflow-y: auto;5334  scrollbar-width: none;5335  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;5336}53375338.peach-onboarding-card::-webkit-scrollbar {5339  display: none;5340}53415342.peach-onboarding-card.is-exiting {5343  animation: peach-card-out 120ms ease-in forwards;5344  pointer-events: none;5345}53465347/* The final card carries the choice rows on top of the full intro copy.5348 * The "Already using Peach?" block is a separate decision section — float it5349 * toward the bottom so the copy breathes and no dead gap pools under it5350 * (scroll stays available as a fallback on shorter viewports). */5351.peach-onboarding-card--final {5352  gap: 8px;5353  padding-top: 20px;5354  padding-bottom: 16px;5355  justify-content: flex-start;5356}53575358.peach-onboarding-card--final .peach-onboarding-body {5359  font-size: 0.75rem;5360  line-height: 1.5;5361}53625363.peach-onboarding-card--final .peach-onboarding-choice {5364  min-height: 40px;5365  padding: 6px 10px;5366}53675368.peach-onboarding-card--final .peach-onboarding-choice-row {5369  gap: 6px;5370}53715372.peach-onboarding-card--final .peach-onboarding-choice-heading {5373  margin: auto 0 -2px;5374}53755376.peach-onboarding-card-headline {5377  margin: 0;5378  font-family: var(--font-display);5379  font-style: italic;5380  font-weight: 400;5381  font-size: 22px;5382  line-height: 1.05;5383  color: var(--peach-t0);5384  white-space: pre-line;5385}53865387.peach-onboarding-divider {5388  margin: 4px 0 6px;5389  border: 0;5390  border-top: 1px solid var(--peach-t3);5391  width: 100%;5392}53935394.peach-onboarding-body {5395  margin: 0;5396  font-size: 0.8125rem;5397  line-height: 1.6;5398  color: var(--peach-t1);5399}54005401.peach-onboarding-warning {5402  display: flex;5403  align-items: flex-start;5404  gap: 8px;5405  margin: 6px 0 0;5406  padding-top: 8px;5407  border-top: 1px dashed var(--peach-t3);5408  font-size: 0.8125rem;5409  line-height: 1.5;5410  color: var(--peach-t1);5411}54125413.peach-onboarding-warning-icon {5414  color: var(--peach-accent);5415  font-size: 0.8125rem;5416  line-height: 1.5;5417  flex: 0 0 auto;5418}54195420.peach-onboarding-nav {5421  position: relative;5422  z-index: 1;5423  display: grid;5424  grid-template-columns: 1fr auto 1fr;5425  align-items: center;5426  margin-top: 12px;5427  padding: 0 4px;5428}54295430.peach-onboarding-next {5431  justify-self: end;5432}54335434.peach-onboarding-back {5435  justify-self: start;5436}54375438.peach-onboarding-dots {5439  display: flex;5440  align-items: center;5441  gap: 6px;5442}54435444.peach-onboarding-dot {5445  width: 6px;5446  height: 6px;5447  border-radius: 50%;5448  background: var(--peach-t2);5449  transition: width 200ms ease, height 200ms ease, background 200ms ease;5450}54515452.peach-onboarding-dot.is-active {5453  width: 8px;5454  height: 8px;5455  background: var(--peach-accent);5456}54575458.peach-onboarding-next {5459  background: none;5460  border: none;5461  padding: 4px 0;5462  cursor: pointer;5463  font-family: "IBM Plex Mono", monospace;5464  font-size: 0.6875rem;5465  letter-spacing: 0.04em;5466  color: var(--peach-t1);5467  transition: color 150ms ease;5468}54695470.peach-onboarding-next:hover {5471  color: var(--peach-t0);5472}54735474.peach-onboarding-next:disabled {5475  opacity: 0.5;5476  cursor: default;5477}54785479.peach-onboarding-back {5480  background: none;5481  border: none;5482  padding: 4px 0;5483  cursor: pointer;5484  font-family: "IBM Plex Mono", monospace;5485  font-size: 0.6875rem;5486  letter-spacing: 0.04em;5487  color: var(--peach-t2);5488  transition: color 150ms ease;5489}54905491.peach-onboarding-back:hover {5492  color: var(--peach-t0);5493}54945495.peach-onboarding-back:disabled {5496  opacity: 0.5;5497  cursor: default;5498}54995500/* Reserve back-button width on the first card so the dots stay centred */5501.peach-onboarding-back-spacer {5502  width: 44px;5503}55045505.peach-onboarding-choice-row {5506  display: grid;5507  grid-template-columns: 1fr;5508  gap: 8px;5509}55105511.peach-onboarding-choice-heading {5512  margin: 8px 0 -2px;5513  color: var(--peach-t1);5514  font-family: "IBM Plex Mono", monospace;5515  font-size: 0.6875rem;5516  letter-spacing: 0.04em;5517  text-transform: uppercase;5518}55195520.peach-onboarding-choice {5521  min-height: 48px;5522  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);5523  border-radius: 8px;5524  padding: 8px 10px;5525  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);5526  color: var(--peach-t0);5527  font-size: 0.76rem;5528  font-weight: 700;5529  text-align: left;5530}55315532.peach-onboarding-choice-label {5533  display: flex;5534  align-items: center;5535  gap: 6px;5536}55375538.peach-onboarding-choice-detail {5539  display: block;5540}55415542.peach-onboarding-choice-detail {5543  margin-top: 2px;5544  color: var(--peach-t1);5545  font-size: 0.625rem;5546  font-weight: 400;5547  line-height: 1.35;5548}55495550.peach-onboarding-choice--adopt {5551  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);5552  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);5553}55545555.peach-adopt-vault {5556  position: relative;5557  min-height: 100%;5558  padding: 22px;5559  display: grid;5560  place-items: center;5561}55625563.peach-adopt-vault--pair {5564  padding: 10px;5565  overflow-y: auto;5566  scrollbar-width: none;5567}55685569.peach-adopt-vault--pair::-webkit-scrollbar {5570  display: none;5571}55725573.peach-adopt-card {5574  position: relative;5575  z-index: 1;5576  width: min(100%, 330px);5577  padding: 20px;5578  border-radius: 8px;5579  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);5580  background: color-mix(in srgb, var(--peach-surface) 90%, transparent);5581  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);5582}55835584.peach-adopt-card--pair {5585  width: 100%;5586  max-height: 500px;5587  margin: auto;5588  padding: 14px 16px 12px;5589  overflow-y: auto;5590  scrollbar-width: none;5591  border: 0;5592  border-radius: 16px;5593  background:5594    radial-gradient(5595      circle at 50% -10%,5596      color-mix(in srgb, var(--peach-accent) 14%, transparent),5597      transparent 38%5598    ),5599    color-mix(in srgb, var(--peach-surface) 94%, transparent);5600}56015602.peach-adopt-card--pair::-webkit-scrollbar {5603  display: none;5604}56055606.peach-adopt-card h1 {5607  margin: 0 0 10px;5608  font-family: var(--font-display);5609  font-style: italic;5610  font-weight: 400;5611  font-size: 1.42rem;5612  line-height: 1.15;5613}56145615.peach-adopt-card p {5616  margin: 0 0 14px;5617  color: var(--peach-t1);5618  line-height: 1.35;5619}56205621.peach-adopt-input {5622  margin-bottom: 12px;5623}56245625.peach-adopt-card textarea.peach-adopt-input {5626  width: 100%;5627  resize: vertical;5628  overflow-wrap: anywhere;5629  font-family: "IBM Plex Mono", monospace;5630  font-size: 0.64rem;5631}56325633.peach-adoption-source-invitation {5634  display: flex;5635  flex-direction: column;5636  align-items: center;5637  gap: 10px;5638  padding: 4px 18px 16px;5639  text-align: center;5640}56415642.peach-pair-qr {5643  display: block;5644  margin-inline: auto;5645  max-width: min(224px, 100%);5646  height: auto;5647  padding: 8px;5648  border-radius: 10px;5649  background: #fff;5650}56515652.peach-adopt-card > .peach-btn + .peach-btn {5653  margin-top: 8px;5654}56555656.peach-adopt-actions {5657  display: flex;5658  gap: 10px;5659  margin-top: 14px;5660}56615662.peach-adopt-actions > button {5663  flex: 1;5664}56655666.peach-adopt-pairing {5667  text-align: center;5668}56695670.peach-adopt-pairing h1 {5671  max-width: 260px;5672  margin: 0 auto 6px;5673  color: var(--peach-t0);5674  font-family: var(--font-display, Georgia, serif);5675  font-size: 1.42rem;5676  font-style: italic;5677  font-weight: 500;5678  line-height: 1.12;5679  text-wrap: balance;5680}56815682.peach-adopt-pairing .peach-adopt-pair-lede {5683  max-width: 258px;5684  margin: 0 auto;5685  color: color-mix(in srgb, var(--peach-t0) 82%, var(--peach-bg));5686  font-size: 0.73rem;5687  line-height: 1.42;5688  text-wrap: pretty;5689}56905691.peach-pair-stage.peach-adopt-bird-stage {5692  width: min(100%, 260px);5693  height: 102px;5694  margin: -6px auto 2px;5695}56965697.peach-adopt-bird-stage .peach-pair-bird-slot,5698.peach-adopt-bird-stage .peach-pair-bird {5699  width: 90px;5700  height: 90px;5701}57025703.peach-adopt-bird-stage .peach-pair-bird-slot-desktop {5704  left: 12px;5705}57065707.peach-adopt-bird-stage .peach-pair-bird-slot-mobile {5708  right: 12px;5709}57105711.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-desktop {5712  --bb-x: 12px;5713  transform: translateX(12px);5714}57155716.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-mobile {5717  --bb-x: -12px;5718  transform: translateX(-12px);5719}57205721.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot {5722  animation: peach-adopt-happy-bob 0.8s ease-in-out infinite;5723}57245725.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-mobile {5726  animation-delay: 0.18s;5727  animation-direction: reverse;5728}57295730.peach-adopt-pairing.is-complete .peach-pair-stage.peach-adopt-bird-stage {5731  width: 100%;5732  height: 135px;5733  margin: -8px auto 6px;5734}57355736.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot,5737.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird {5738  width: 112px;5739  height: 112px;5740}57415742.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot-desktop {5743  left: 0;5744  --bb-x: 0;5745  transform: translateX(0);5746}57475748.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot-mobile {5749  right: 0;5750  --bb-x: 0;5751  transform: translateX(0);5752}57535754.peach-adopt-pairing.is-complete h1 {5755  font-size: 1.6rem;5756}57575758.peach-adopt-pairing.is-complete .peach-adopt-pair-lede {5759  font-size: 0.78rem;5760}57615762@keyframes peach-adopt-happy-bob {5763  0%, 100% {5764    transform: translateX(var(--bb-x, 0)) translateY(0) rotate(0deg);5765  }5766  35% {5767    transform: translateX(var(--bb-x, 0)) translateY(-8px) rotate(-3deg);5768  }5769  70% {5770    transform: translateX(var(--bb-x, 0)) translateY(-3px) rotate(2deg);5771  }5772}57735774.peach-adopt-connection {5775  position: absolute;5776  left: 50%;5777  bottom: 38px;5778  width: 78px;5779  height: 1px;5780  translate: -50% 0;5781  background: color-mix(in srgb, var(--peach-accent) 62%, transparent);5782  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 56%, transparent);5783}57845785.peach-adopt-pairing.is-complete .peach-adopt-connection {5786  bottom: 49px;5787  width: 92px;5788}57895790.peach-adopt-connection::after {5791  content: "";5792  position: absolute;5793  left: 50%;5794  top: 50%;5795  width: 7px;5796  height: 7px;5797  border-radius: 50%;5798  translate: -50% -50%;5799  background: var(--peach-accent);5800  box-shadow:5801    0 0 0 4px color-mix(in srgb, var(--peach-accent) 17%, transparent),5802    0 0 14px color-mix(in srgb, var(--peach-accent) 74%, transparent);5803  animation: peach-adopt-connection-pulse 1.1s ease-in-out infinite;5804}58055806@keyframes peach-adopt-connection-pulse {5807  0%, 100% { scale: 0.8; opacity: 0.72; }5808  50% { scale: 1.14; opacity: 1; }5809}58105811.peach-adopt-qr-wrap {5812  min-height: 160px;5813  display: grid;5814  place-items: center;5815}58165817.peach-adopt-qr-wrap .peach-hint-error {5818  margin: 12px 0;5819}58205821.peach-adopt-pairing .peach-adopt-pair-status {5822  margin: 0;5823  color: var(--peach-t0);5824  font-size: 0.75rem;5825}58265827.peach-adopt-confirmation {5828  margin-top: 18px;5829  padding: 8px 0 4px;5830}58315832.peach-adopt-confirmation .peach-adopt-confirmation-label {5833  margin: 0 0 7px;5834  color: color-mix(in srgb, var(--peach-accent) 72%, var(--peach-t0));5835  font-family: var(--peach-mono, "IBM Plex Mono", monospace);5836  font-size: 0.625rem;5837  font-weight: 700;5838  letter-spacing: 0.14em;5839}58405841.peach-adopt-confirmation .peach-adoption-sas {5842  margin: 0 auto;5843  padding: 12px 14px;5844  border-color: color-mix(in srgb, var(--peach-accent) 36%, transparent);5845  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);5846}58475848.peach-adopt-confirmation .peach-adoption-sas strong {5849  color: color-mix(in srgb, var(--peach-accent) 84%, var(--peach-t0));5850  font-size: 1.58rem;5851  text-shadow: 0 0 16px color-mix(in srgb, var(--peach-accent) 30%, transparent);5852}58535854.peach-adopt-confirmation .peach-adopt-confirmation-help {5855  max-width: 270px;5856  margin: 8px auto 0;5857  color: color-mix(in srgb, var(--peach-t0) 78%, var(--peach-bg));5858  font-size: 0.7rem;5859  line-height: 1.45;5860}58615862.peach-adopt-privacy {5863  display: flex;5864  align-items: flex-start;5865  gap: 9px;5866  margin-top: 10px;5867  padding: 8px 9px;5868  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);5869  border-radius: 10px;5870  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);5871  text-align: left;5872}58735874.peach-adopt-privacy svg {5875  width: 16px;5876  height: 16px;5877  flex: 0 0 auto;5878  margin-top: 1px;5879  fill: none;5880  stroke: color-mix(in srgb, var(--peach-accent) 74%, var(--peach-t0));5881  stroke-linecap: round;5882  stroke-linejoin: round;5883  stroke-width: 1.7;5884}58855886.peach-adopt-pairing .peach-adopt-privacy p {5887  margin: 0;5888  color: color-mix(in srgb, var(--peach-t0) 76%, var(--peach-bg));5889  font-size: 0.62rem;5890  line-height: 1.4;5891}58925893.peach-adopt-privacy strong {5894  color: var(--peach-t0);5895  font-weight: 700;5896}58975898.peach-adopt-pair-actions {5899  margin-top: 9px;5900}59015902.peach-adopt-pair-actions > button {5903  width: 100%;5904}59055906.peach-adopt-paired-status {5907  display: inline-flex;5908  align-items: center;5909  gap: 8px;5910  margin: 22px auto 18px;5911  padding: 9px 13px;5912  border: 1px solid color-mix(in srgb, var(--peach-accent) 30%, transparent);5913  border-radius: 999px;5914  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5915  color: color-mix(in srgb, var(--peach-accent) 78%, var(--peach-t0));5916  font-family: var(--peach-mono, "IBM Plex Mono", monospace);5917  font-size: 0.66rem;5918  font-weight: 700;5919  letter-spacing: 0.04em;5920}59215922.peach-adopt-paired-status span {5923  width: 7px;5924  height: 7px;5925  border-radius: 50%;5926  background: var(--peach-accent);5927  box-shadow: 0 0 8px color-mix(in srgb, var(--peach-accent) 68%, transparent);5928}59295930@media (prefers-reduced-motion: reduce) {5931  .peach-adopt-connection::after {5932    animation: none;5933  }5934}59355936@keyframes peach-onboard-enter {5937  from { opacity: 0; transform: translateY(20px); }5938  to   { opacity: 1; transform: translateY(0); }5939}59405941@keyframes peach-onboard-exit {5942  from { opacity: 1; }5943  to   { opacity: 0; }5944}59455946@keyframes peach-card-in {5947  from { opacity: 0; transform: translateX(12px); }5948  to   { opacity: 1; transform: translateX(0); }5949}59505951@keyframes peach-card-out {5952  from { opacity: 1; transform: translateX(0); }5953  to   { opacity: 0; transform: translateX(-12px); }5954}59555956/* ─── New vault screen — matched to onboarding card language ─────────── */59575958/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage5959   rule (same element) without loosening the unlock/restore screens. The5960   create-vault screen is the only vault-stage view tall enough to overflow5961   the 520px popup, so its spacing is tuned to fit header → card → restore →5962   recovery warning with nothing clipped. */5963.peach-screen.peach-newvault {5964  position: relative;5965  display: flex;5966  flex-direction: column;5967  gap: 12px;5968  padding: 16px 16px 12px;5969  overflow: hidden;5970}59715972/* Suppress the warm-blob ambient art inherited from .lock-screen — the5973   new vault card now carries the visual weight. */5974.peach-newvault::before {5975  content: none;5976}59775978/* Wordmark sits in the exact same spot as on the onboarding cards; the5979   back button takes the right side so the wordmark never shifts. */5980.peach-newvault-header {5981  position: relative;5982  z-index: 2;5983  display: flex;5984  align-items: center;5985  justify-content: space-between;5986  gap: 10px;5987  margin-bottom: 2px;5988}59895990.peach-newvault-back {5991  display: inline-flex;5992  align-items: center;5993  gap: 4px;5994  background: transparent;5995  border: none;5996  color: var(--peach-t2);5997  font-family: "IBM Plex Mono", monospace;5998  font-size: 0.625rem;5999  letter-spacing: 0.06em;6000  cursor: pointer;6001  padding: 4px 6px;6002  border-radius: 6px;6003  transition: color 120ms ease, background 120ms ease;6004}60056006.peach-newvault-back:hover {6007  color: var(--peach-t0);6008  background: rgba(240, 232, 216, 0.04);6009}60106011.peach-newvault-mark {6012  position: absolute;6013  right: -12px;6014  top: 44px;6015  width: 110px;6016  height: 110px;6017  pointer-events: none;6018  opacity: 0.10;6019  filter: saturate(0.9);6020  z-index: 0;6021}6022.peach-newvault-mark-art {6023  width: 100%;6024  height: 100%;6025}6026.peach-newvault-mark-art path:nth-child(1) {6027  fill: rgba(123, 144, 96, 0.88);6028}6029.peach-newvault-mark-art path:nth-child(2) {6030  stroke: rgba(94, 122, 66, 0.95);6031}60326033.peach-newvault-card {6034  position: relative;6035  z-index: 1;6036  flex: 1;6037  display: flex;6038  flex-direction: column;6039  gap: 8px;6040  padding: 16px 20px 14px;6041  border-radius: 16px;6042  border: 1px solid var(--peach-t3);6043  background:6044    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6045  backdrop-filter: blur(3px);6046  -webkit-backdrop-filter: blur(3px);6047  box-shadow:6048    inset 0 1px 0 rgba(240, 232, 216, 0.04),6049    0 12px 28px rgba(0, 0, 0, 0.12);6050  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6051}60526053/* Create-vault card only (the restore card lays out differently — see6054   .peach-restore-card). The warning hugs the glass edge with a small6055   margin; leftover height distributes between elements so they breathe6056   instead of leaving one dead gap. Scroll stays available as a fallback6057   on shorter viewports. */6058.peach-newvault-card:not(.peach-restore-card) {6059  min-height: 0;6060  gap: 10px;6061  padding: 14px 22px 16px;6062  justify-content: space-between;6063  overflow-y: auto;6064  scrollbar-width: none;6065}60666067.peach-newvault-card:not(.peach-restore-card)::-webkit-scrollbar {6068  display: none;6069}60706071.peach-newvault-headline {6072  margin: 0;6073  font-family: var(--font-display);6074  font-style: italic;6075  font-weight: 400;6076  font-size: 24px;6077  line-height: 1.05;6078  color: var(--peach-t0);6079  white-space: pre-line;6080}60816082.peach-newvault-divider {6083  margin: 2px 0 4px;6084  border: 0;6085  border-top: 1px solid var(--peach-t3);6086  width: 100%;6087}60886089.peach-newvault-field {6090  display: flex;6091  flex-direction: column;6092  gap: 4px;6093}60946095.peach-newvault-label-row {6096  display: flex;6097  align-items: center;6098  justify-content: space-between;6099}61006101/* Monospace input scaled to the card. Replaces the 22px unlock-input6102   so the placeholder no longer overflows and the field reads as part6103   of the same surface as the body copy. */6104.peach-newvault-input {6105  font-size: 0.875rem;6106  letter-spacing: 0.18em;6107  padding: 8px 0;6108}6109.peach-newvault-input::placeholder {6110  letter-spacing: 0.18em;6111  color: var(--peach-t2);6112}61136114.peach-newvault-hint {6115  margin: 2px 0 0;6116  font-family: "IBM Plex Mono", monospace;6117  font-size: 0.625rem;6118  color: var(--peach-t2);6119  letter-spacing: 0.04em;6120}61216122.peach-newvault-submit {6123  margin-top: 4px;6124}61256126.peach-newvault-warning {6127  display: flex;6128  align-items: flex-start;6129  gap: 8px;6130  margin: 0;6131  padding-top: 8px;6132  border-top: 1px dashed var(--peach-t3);6133  font-size: 0.75rem;6134  line-height: 1.45;6135  color: var(--peach-t1);6136}61376138.peach-newvault-warning-icon {6139  color: var(--peach-accent);6140  font-size: 0.8125rem;6141  line-height: 1.4;6142  flex: 0 0 auto;6143}61446145/* Settings body — warm accent gradient gives the glass something to blur against */6146.peach-settings-body {6147  background:6148    radial-gradient(6149      ellipse at 30% 20%,6150      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6151      transparent 60%6152    );6153}61546155/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6156/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6157 * Two severity levels: "warn" for actions that are dangerous-but-recoverable6158 * (replacing the vault from a backup file) and "hazard" for actions that6159 * are absolutely irreversible (Panic). Both use the same card scaffold so6160 * they read as a pair, but the colour family signals the severity at a6161 * glance — yellow for caution, red for don't.6162 */6163.peach-danger-card {6164  --danger-tint: 235, 158, 52; /* amber */6165  display: flex;6166  flex-direction: column;6167  gap: 8px;6168  padding: 14px;6169  margin-top: 10px;6170  border-radius: 12px;6171  border: 1px solid rgba(var(--danger-tint), 0.32);6172  background:6173    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),6174    rgba(var(--danger-tint), 0.04);6175  box-shadow:6176    inset 0 1px 0 rgba(var(--danger-tint), 0.08),6177    0 0 24px rgba(var(--danger-tint), 0.04);6178  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;6179}61806181.peach-danger-card:hover {6182  border-color: rgba(var(--danger-tint), 0.55);6183  box-shadow:6184    inset 0 1px 0 rgba(var(--danger-tint), 0.12),6185    0 0 36px rgba(var(--danger-tint), 0.10);6186}61876188.peach-danger-card--hazard {6189  --danger-tint: 220, 38, 38; /* red */6190}61916192.peach-danger-card-head {6193  display: flex;6194  align-items: center;6195  gap: 10px;6196}61976198.peach-danger-card-glyph {6199  width: 28px;6200  height: 28px;6201  flex-shrink: 0;6202  display: flex;6203  align-items: center;6204  justify-content: center;6205  border-radius: 8px;6206  background: rgba(var(--danger-tint), 0.12);6207  color: rgba(var(--danger-tint), 0.95);6208  font-size: 1rem;6209  line-height: 1;6210}62116212.peach-danger-card-title {6213  margin: 0;6214  font-size: 0.8125rem;6215  font-weight: 600;6216  color: rgba(var(--danger-tint), 0.92);6217  letter-spacing: 0.01em;6218}62196220.peach-danger-card-copy {6221  margin: 0;6222  font-size: 0.6875rem;6223  line-height: 1.5;6224  color: var(--peach-t2);6225}62266227.peach-danger-card-button {6228  width: 100%;6229  padding: 9px;6230  margin-top: 4px;6231  background: transparent;6232  border: 1px solid rgba(var(--danger-tint), 0.45);6233  border-radius: 8px;6234  color: rgba(var(--danger-tint), 0.9);6235  font-size: 0.75rem;6236  font-weight: 500;6237  letter-spacing: 0.02em;6238  cursor: pointer;6239  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6240}62416242.peach-danger-card-button:hover {6243  background: rgba(var(--danger-tint), 0.10);6244  border-color: rgba(var(--danger-tint), 0.75);6245  color: rgb(var(--danger-tint));6246}62476248.peach-adoption-sas {6249  margin: 16px auto 0;6250  padding: 12px 16px;6251  border: 1px solid color-mix(in srgb, var(--peach-t0) 18%, transparent);6252  border-radius: 10px;6253  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);6254  color: var(--peach-t0);6255  text-align: center;6256}62576258.peach-adoption-sas strong {6259  font-size: 1.65rem;6260  font-variant-numeric: tabular-nums;6261  letter-spacing: 0.18em;6262  white-space: nowrap;6263}62646265/* ── Panic flow (three-step destruction) ───────────────────────────────── */6266.peach-panic {6267  display: flex;6268  flex-direction: column;6269  flex: 1;6270  min-height: 0;6271  padding: 28px 20px 20px;6272  gap: 18px;6273  overflow-y: auto;6274  scrollbar-width: none;6275  -ms-overflow-style: none;6276}62776278.peach-panic::-webkit-scrollbar { display: none; }62796280.peach-panic-step2 {6281  background: rgba(220, 38, 38, 0.04);6282}62836284.peach-panic-step3 {6285  position: relative;6286  background: #0f0505;6287  color: #ffffff;6288  overflow: hidden;6289}62906291.peach-panic-rune-bg {6292  position: absolute;6293  inset: 0;6294  opacity: 0.22;6295  pointer-events: none;6296  overflow: hidden;6297}62986299.peach-panic-rune-bg canvas {6300  width: 100% !important;6301  height: 100% !important;6302}63036304.peach-panic-icon {6305  font-size: 32px;6306  color: rgb(220, 38, 38);6307  line-height: 1;6308}63096310.peach-panic-title {6311  margin: 0;6312  font-size: 18px;6313  font-weight: 500;6314  color: var(--peach-t1);6315}63166317.peach-panic-title--severe {6318  font-size: 20px;6319  font-weight: 700;6320  color: rgb(220, 38, 38);6321}63226323.peach-panic-body {6324  margin: 0;6325  font-size: 0.8125rem;6326  line-height: 1.55;6327  color: var(--peach-t2);6328}63296330.peach-panic-body--severe {6331  color: rgba(220, 38, 38, 0.85);6332}63336334.peach-panic-body--final {6335  font-size: 1rem;6336  font-weight: 700;6337  color: rgb(255, 80, 80);6338  line-height: 1.4;6339}63406341.peach-panic-body--final-intro {6342  font-size: 1rem;6343  color: #ffffff;6344  font-weight: 400;6345}63466347.peach-panic-divider {6348  height: 1px;6349  background: rgba(255, 255, 255, 0.08);6350  margin: 4px 0;6351}63526353.peach-panic-confirm-input {6354  width: 100%;6355  padding: 10px 12px;6356  background: rgba(255, 255, 255, 0.02);6357  border: 1px solid rgba(220, 38, 38, 0.4);6358  border-radius: 8px;6359  color: var(--peach-t1);6360  font-family: "IBM Plex Mono", monospace;6361  font-size: 0.875rem;6362  letter-spacing: 0.12em;6363  text-transform: uppercase;6364}63656366.peach-panic-confirm-input:focus {6367  outline: none;6368  border-color: rgb(220, 38, 38);6369}63706371.peach-panic-confirm-input--match {6372  border-color: rgb(220, 38, 38);6373  color: rgb(220, 38, 38);6374}63756376.peach-panic-confirm-label {6377  font-size: 0.6875rem;6378  color: var(--peach-t2);6379  margin: 0 0 -8px;6380  letter-spacing: 0.06em;6381}63826383.peach-panic-actions {6384  display: flex;6385  flex-direction: column;6386  gap: 10px;6387  margin-top: auto;6388}63896390.peach-panic-button {6391  width: 100%;6392  padding: 12px;6393  border-radius: 8px;6394  font-size: 0.8125rem;6395  cursor: pointer;6396  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6397}63986399.peach-panic-button--primary {6400  background: var(--peach-accent);6401  border: 1px solid var(--peach-accent);6402  color: #ffffff;6403  font-weight: 600;6404}64056406.peach-panic-button--primary:hover {6407  background: color-mix(in srgb, var(--peach-accent) 88%, white);6408}64096410.peach-panic-button--danger {6411  background: rgb(220, 38, 38);6412  border: 1px solid rgb(220, 38, 38);6413  color: #ffffff;6414  font-weight: 600;6415}64166417.peach-panic-button--danger:disabled {6418  opacity: 0.35;6419  cursor: not-allowed;6420}64216422.peach-panic-button--ghost {6423  background: transparent;6424  border: 1px solid rgba(255, 255, 255, 0.18);6425  color: var(--peach-t2);6426}64276428.peach-panic-button--ghost:hover {6429  border-color: rgba(255, 255, 255, 0.32);6430  color: var(--peach-t1);6431}64326433.peach-panic-link {6434  background: transparent;6435  border: none;6436  padding: 4px 0;6437  color: rgba(220, 38, 38, 0.65);6438  font-size: 0.75rem;6439  cursor: pointer;6440  text-align: left;6441  text-decoration: underline;6442  text-underline-offset: 3px;6443}64446445.peach-panic-link:hover {6446  color: rgb(220, 38, 38);6447}64486449.peach-panic-bar {6450  background: rgb(220, 38, 38);6451  padding: 16px 20px;6452  margin: -28px -20px 0;6453  text-align: center;6454  font-size: 0.8125rem;6455  font-weight: 700;6456  letter-spacing: 0.12em;6457  color: #ffffff;6458}64596460.peach-panic-final-button {6461  width: 100%;6462  padding: 14px;6463  background: rgb(220, 38, 38);6464  border: none;6465  border-radius: 8px;6466  color: #ffffff;6467  font-size: 0.875rem;6468  font-weight: 700;6469  letter-spacing: 0.08em;6470  text-transform: uppercase;6471  cursor: pointer;6472  animation: peach-panic-pulse 2s ease-in-out infinite;6473}64746475.peach-settings-license {6476  margin-top: 10px;6477  padding-top: 10px;6478  border-top: 1px solid var(--peach-t3);6479}64806481.peach-settings-label {6482  font-size: 0.625rem;6483  letter-spacing: 0.08em;6484  color: var(--peach-t2);6485  display: block;6486  margin-bottom: 6px;6487}64886489.peach-settings-license-row {6490  display: flex;6491  align-items: center;6492  justify-content: space-between;6493  gap: 8px;6494}64956496.peach-settings-license-key {6497  font-family: 'IBM Plex Mono', monospace;6498  font-size: 0.75rem;6499  color: var(--peach-t0);6500  letter-spacing: 0.04em;6501  word-break: break-all;6502  flex: 1;6503  min-width: 0;6504}65056506.peach-settings-license-key--masked {6507  font-family: 'IBM Plex Mono', monospace;6508  font-size: 0.6rem;6509  color: var(--peach-t1);6510  letter-spacing: 0.18em;6511  user-select: none;6512}65136514.peach-settings-license-actions {6515  display: flex;6516  align-items: center;6517  gap: 2px;6518  flex-shrink: 0;6519}65206521.peach-settings-license-copy {6522  font-size: 0.6875rem;6523  color: var(--peach-accent);6524  background: transparent;6525  border: none;6526  cursor: pointer;6527  padding: 4px 8px;6528  border-radius: 4px;6529  flex-shrink: 0;6530  transition: opacity 150ms ease;6531}65326533.peach-settings-license-copy:hover {6534  opacity: 0.75;6535}65366537.peach-settings-license-toggle {6538  display: flex;6539  align-items: center;6540  justify-content: center;6541  background: transparent;6542  border: none;6543  cursor: pointer;6544  padding: 4px 6px;6545  border-radius: 4px;6546  color: var(--peach-t2);6547  transition: color 150ms ease;6548}65496550.peach-settings-license-toggle:hover {6551  color: var(--peach-t1);6552}65536554@keyframes peach-panic-pulse {6555  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }6556  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }6557}65586559[data-motion="reduce"] .peach-panic-final-button {6560  animation: none;6561}65626563/* Vault History — Settings → Vault sub-view */65646565.peach-history-list {6566  border: 1px solid var(--peach-border);6567  border-radius: 8px;6568  overflow: hidden;6569  margin: 8px 0 4px;6570}65716572.peach-history-row {6573  display: flex;6574  align-items: center;6575  justify-content: space-between;6576  padding: 9px 12px;6577  gap: 10px;6578  border-bottom: 1px solid var(--peach-border);6579}65806581.peach-history-row:last-child {6582  border-bottom: none;6583}65846585.peach-history-meta {6586  display: flex;6587  flex-direction: column;6588  gap: 2px;6589  min-width: 0;6590  flex: 1;6591}65926593.peach-history-time {6594  font-size: 0.75rem;6595  font-family: 'IBM Plex Mono', ui-monospace, monospace;6596  color: var(--peach-t0);6597  white-space: nowrap;6598  overflow: hidden;6599  text-overflow: ellipsis;6600}66016602.peach-history-sub {6603  font-size: 0.625rem;6604  color: var(--peach-t2);6605  letter-spacing: 0.06em;6606  text-transform: uppercase;6607  white-space: nowrap;6608  overflow: hidden;6609  text-overflow: ellipsis;6610}66116612.peach-history-btn {6613  flex-shrink: 0;6614  white-space: nowrap;6615  min-width: 56px;6616  text-align: center;6617}66186619.peach-history-btn.is-busy {6620  opacity: 0.65;6621}66226623.peach-history-footer {6624  font-size: 0.625rem;6625  color: var(--peach-t3);6626  letter-spacing: 0.05em;6627  text-align: right;6628  margin: 0;6629  padding: 2px 0 0;6630}66316632/* ── Context menu + swipe-copy flash ─────────────────────── */6633.peach-context-menu-backdrop {6634  position: fixed;6635  inset: 0;6636  background: rgba(0, 0, 0, 0.45);6637  z-index: 100;6638  display: flex;6639  align-items: flex-end;6640  justify-content: center;6641  animation: peach-ctx-fade 140ms ease both;6642}6643.peach-context-menu {6644  width: min(360px, calc(100vw - 24px));6645  margin-bottom: max(env(safe-area-inset-bottom), 12px);6646  background: var(--peach-bg);6647  border: 1px solid var(--peach-t3);6648  border-radius: 14px;6649  padding: 6px;6650  display: flex;6651  flex-direction: column;6652  gap: 2px;6653  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);6654  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6655}6656@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }6657@keyframes peach-ctx-rise {6658  from { transform: translateY(16px); opacity: 0; }6659  to   { transform: translateY(0);    opacity: 1; }6660}6661.peach-context-menu-item {6662  background: transparent;6663  color: var(--peach-t0);6664  border: 0;6665  border-radius: 10px;6666  padding: 12px 14px;6667  text-align: left;6668  font: inherit;6669  cursor: pointer;6670}6671.peach-context-menu-item:hover,6672.peach-context-menu-item:focus-visible {6673  background: var(--peach-t3);6674}6675.peach-context-menu-item--danger {6676  color: var(--peach-health-bad, #d96868);6677}6678.peach-context-menu-item--cancel {6679  color: var(--peach-t2);6680  margin-top: 4px;6681  border-top: 1px solid var(--peach-t3);6682  border-radius: 0 0 10px 10px;6683}66846685/* Swipe-to-copy flash */6686.peach-entry-row.is-copy-flash {6687  animation: peach-copy-flash 600ms ease both;6688}6689@keyframes peach-copy-flash {6690  0%   { background: transparent; }6691  20%  { background: rgba(217, 153, 51, 0.32); }6692  100% { background: transparent; }6693}66946695html { font-size: 16px; }66966697/* ── Recovery word entry ─────────────────────────────────────────── */6698.peach-lock-recover-link {6699  display: block;6700  width: 100%;6701  margin-top: 12px;6702  background: none;6703  border: none;6704  font-family: "IBM Plex Mono", monospace;6705  font-size: 0.625rem;6706  letter-spacing: 0.06em;6707  color: var(--peach-t2);6708  cursor: pointer;6709  text-align: center;6710  padding: 4px;6711  transition: color 120ms ease;6712}6713.peach-lock-recover-link:hover {6714  color: var(--peach-t0);6715}67166717.lock-screen--recovery {6718  display: flex;6719  flex-direction: column;6720  align-items: stretch;6721  padding: 12px 20px 24px;6722  overflow: hidden;6723}67246725.peach-recovery-nav {6726  display: flex;6727  align-items: center;6728  position: relative;6729  z-index: 1;6730  margin-bottom: 4px;6731}67326733/* Mask runes to the top decorative band only — keep inputs and the6734   bottom CTA button clear. The bottom of the popup is reserved for6735   submit buttons; rendering runes there overlaps the button glyph. */6736.peach-rune-background--recovery {6737  -webkit-mask-image: linear-gradient(6738    to bottom,6739    black 0px, black 85px,6740    transparent 110px,6741    transparent 100%6742  );6743  mask-image: linear-gradient(6744    to bottom,6745    black 0px, black 85px,6746    transparent 110px,6747    transparent 100%6748  );6749}67506751.peach-recovery-header {6752  text-align: center;6753  margin-bottom: 0;6754  margin-top: 2px;6755}6756.peach-recovery-header .peach-onboarding-headline {6757  font-size: 1.25rem;6758  font-weight: 300;6759  letter-spacing: 0.02em;6760  /* max-width:252px inherited above is narrower than the section — without6761     auto margins the text box sits left-of-center. */6762  margin: 0 auto 4px;6763}6764.peach-recovery-header .peach-hint {6765  font-family: "IBM Plex Mono", monospace;6766  font-size: 0.625rem;6767  color: var(--peach-t1);6768  letter-spacing: 0.04em;6769  margin: 0;6770}6771.peach-recovery-header .peach-hint--warning {6772  color: var(--peach-accent);6773}67746775/* 12-word grid: 2 columns × 6 rows */6776.peach-recovery-grid {6777  display: grid;6778  grid-template-columns: repeat(2, 1fr);6779  gap: 12px 20px;6780  width: 100%;6781  margin-bottom: 0;6782}67836784.peach-recovery-word-slot {6785  display: flex;6786  align-items: center;6787  gap: 6px;6788  min-width: 0;6789}67906791.peach-recovery-word-index {6792  font-family: "IBM Plex Mono", monospace;6793  font-size: 0.5rem;6794  color: rgba(255, 255, 255, 0.35);6795  min-width: 14px;6796  flex-shrink: 0;6797  text-align: right;6798  letter-spacing: 0.04em;6799}68006801.peach-recovery-word-input {6802  flex: 1;6803  min-width: 0;6804  background: transparent;6805  border: none;6806  border-bottom: 1px solid rgba(255, 255, 255, 0.22);6807  color: var(--peach-t0);6808  font-family: "IBM Plex Mono", monospace;6809  font-size: 0.6875rem;6810  letter-spacing: 0.06em;6811  padding: 5px 2px 4px;6812  outline: none;6813  text-transform: lowercase;6814  transition: border-color 120ms ease;6815}6816.peach-recovery-word-input::placeholder {6817  color: rgba(255, 255, 255, 0.18);6818}6819.peach-recovery-word-input:focus {6820  border-bottom-color: var(--peach-accent);6821}68226823.peach-recovery-submit {6824  width: 100%;6825  margin-top: auto;6826}68276828.peach-recovery-new-password-form {6829  width: 100%;6830  display: flex;6831  flex-direction: column;6832  gap: 16px;6833  margin-bottom: 8px;6834}6835.peach-recovery-new-password-form .peach-newvault-field {6836  display: flex;6837  flex-direction: column;6838  gap: 4px;6839}68406841/* ── Recovery words display (post-create) ──────────────────────────6842   Condensed so word list + confirmation fit the 520px popup with no6843   scroll — the confirm button must never be clipped. */6844.lock-screen--recovery-display {6845  display: flex;6846  flex-direction: column;6847  align-items: stretch;6848  padding: 10px 16px 12px;6849  gap: 8px;6850  min-height: 0;6851  overflow-y: auto;6852}68536854.peach-recovery-words-display {6855  width: 100%;6856  margin-bottom: 0;6857  border: 1px solid var(--peach-t3);6858  border-radius: 8px;6859  padding: 10px 14px;6860  background: rgba(245, 240, 234, 0.04);6861}68626863.peach-recovery-words-label {6864  font-family: "IBM Plex Mono", monospace;6865  font-size: 0.5rem;6866  letter-spacing: 0.08em;6867  color: var(--peach-t2);6868  text-transform: uppercase;6869  margin-bottom: 8px;6870  text-align: center;6871}68726873.peach-recovery-word-list {6874  list-style: none;6875  margin: 0;6876  padding: 0;6877  display: grid;6878  grid-template-columns: repeat(2, 1fr);6879  gap: 5px 16px;6880}68816882.peach-recovery-word-item {6883  display: flex;6884  align-items: baseline;6885  justify-content: center;6886  gap: 5px;6887}68886889.peach-recovery-word-num {6890  font-family: "IBM Plex Mono", monospace;6891  font-size: 0.5rem;6892  color: var(--peach-accent);6893  width: 14px;6894  flex: 0 0 14px;6895  text-align: right;6896  letter-spacing: 0.04em;6897  font-variant-numeric: tabular-nums;6898}68996900.peach-recovery-download-btn {6901  display: block;6902  margin: 8px auto 0;6903  padding: 4px 10px;6904  background: transparent;6905  border: 1px solid var(--peach-border);6906  border-radius: 6px;6907  color: var(--peach-t2);6908  font-family: "IBM Plex Mono", monospace;6909  font-size: 0.5625rem;6910  letter-spacing: 0.06em;6911  text-transform: lowercase;6912  cursor: pointer;6913  transition: border-color 0.15s, color 0.15s;6914}69156916.peach-recovery-download-btn:hover {6917  border-color: var(--peach-accent);6918  color: var(--peach-t0);6919}69206921.peach-recovery-word-text {6922  font-family: "IBM Plex Mono", monospace;6923  font-size: 0.6875rem;6924  letter-spacing: 0.06em;6925  color: var(--peach-t0);6926  text-transform: lowercase;6927}69286929.peach-hint--warning {6930  color: var(--peach-accent);6931  font-style: italic;6932}6933.peach-hint--success {6934  color: var(--peach-t2);6935  font-family: "IBM Plex Mono", monospace;6936  font-size: 0.625rem;6937  letter-spacing: 0.06em;6938}69396940/* Confirmation step */6941.peach-recovery-confirm {6942  width: 100%;6943  flex: 1;6944  display: flex;6945  flex-direction: column;6946}6947.peach-recovery-confirm-label {6948  font-family: "IBM Plex Mono", monospace;6949  font-size: 0.5625rem;6950  letter-spacing: 0.04em;6951  color: var(--peach-t1);6952  text-align: center;6953  margin: 0 0 8px;6954}6955.peach-recovery-confirm-fields {6956  flex: 1;6957  display: flex;6958  flex-direction: column;6959  /* Spread the three inputs through the available height instead of pooling6960     one dead gap under them. */6961  justify-content: space-evenly;6962  gap: 8px;6963  margin-bottom: 0;6964}6965.peach-recovery-confirm-field {6966  display: flex;6967  align-items: center;6968  gap: 8px;6969}6970.peach-recovery-confirm-num {6971  font-family: "IBM Plex Mono", monospace;6972  font-size: 0.5rem;6973  color: var(--peach-accent);6974  min-width: 44px;6975  letter-spacing: 0.04em;6976}6977.peach-recovery-confirm-input {6978  flex: 1;6979  background: transparent;6980  border: none;6981  border-bottom: 1px solid var(--peach-t3);6982  color: var(--peach-t0);6983  font-family: "IBM Plex Mono", monospace;6984  font-size: 0.6875rem;6985  letter-spacing: 0.06em;6986  padding: 4px 2px 3px;6987  outline: none;6988  text-transform: lowercase;6989  transition: border-color 120ms ease;6990}6991.peach-recovery-confirm-input:focus {6992  border-bottom-color: var(--peach-accent);6993}6994.peach-recovery-confirm-input:disabled {6995  opacity: 0.4;6996  cursor: not-allowed;6997}6998.peach-recovery-confirm-btn {6999  width: 100%;7000  margin-top: 12px;7001}70027003/* ============================================================7004   Sync info sheet7005   ============================================================ */70067007.peach-btn--full {7008  width: 100%;7009}70107011/* ── Notes Mode ── */70127013/* Overlay that crossfades over the vault */7014.peach-notes-overlay {7015  position: fixed;7016  inset: 0;7017  z-index: 90;7018  opacity: 0;7019  pointer-events: none;7020  animation: peach-mode-in 220ms ease-in forwards;7021}70227023.peach-notes-overlay.is-visible {7024  opacity: 1;7025  pointer-events: auto;7026}70277028@keyframes peach-mode-in {7029  from { opacity: 0; }7030  to   { opacity: 1; }7031}70327033/* Top-level notes surface */7034.peach-notes-mode {7035  position: absolute;7036  inset: 0;7037  background:7038    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 5%, transparent) 0%, transparent 62%),7039    var(--peach-bg);7040  display: flex;7041  flex-direction: column;7042}70437044/* TOC wrapper */7045.peach-notes-toc-wrapper {7046  position: absolute;7047  inset: 0;7048  z-index: 1;7049  opacity: 1;7050  pointer-events: auto;7051  transition: opacity 200ms ease;7052}70537054.peach-notes-toc-wrapper.is-hidden {7055  opacity: 0;7056  pointer-events: none;7057}70587059/* Editor wrapper */7060.peach-notes-editor-wrapper {7061  position: absolute;7062  inset: 0;7063  z-index: 2;7064  opacity: 0;7065  pointer-events: none;7066  transition: opacity 200ms ease;7067}70687069.peach-notes-editor-wrapper.is-visible {7070  opacity: 1;7071  pointer-events: auto;7072}70737074/* TOC inner */7075.peach-notes-toc {7076  position: relative;7077  display: flex;7078  flex-direction: column;7079  height: 100%;7080  padding-top: env(safe-area-inset-top, 0px);7081  padding-bottom: env(safe-area-inset-bottom, 0px);7082}70837084/* Shared header */7085.peach-notes-header {7086  display: flex;7087  align-items: center;7088  padding: 12px 16px;7089  gap: 12px;7090  flex-shrink: 0;7091  min-height: 52px;7092  position: relative;7093  z-index: 2;7094}70957096.peach-notes-back {7097  font-size: 22px;7098  color: var(--peach-t2);7099  background: none;7100  border: none;7101  padding: 4px;7102  cursor: pointer;7103  line-height: 1;7104  flex-shrink: 0;7105  transition: color 150ms ease;7106  -webkit-tap-highlight-color: transparent;7107}71087109.peach-notes-back:active { color: var(--peach-t0); }71107111.peach-notes-header-title {7112  flex: 1;7113  font-family: 'Cormorant Garamond', serif;7114  font-style: italic;7115  font-size: 22px;7116  color: var(--peach-t0);7117  text-align: center;7118}71197120.peach-notes-header--editor {7121  display: grid;7122  grid-template-columns: 36px minmax(0, 1fr) 36px;7123}71247125.peach-notes-header--editor .peach-notes-back,7126.peach-notes-header--editor .peach-notes-header-actions {7127  width: 36px;7128}71297130.peach-notes-header--editor .peach-notes-header-title {7131  cursor: pointer;7132}71337134.peach-notes-header-actions {7135  display: flex;7136  gap: 8px;7137  flex-shrink: 0;7138}71397140.peach-notes-header-btn {7141  width: 36px;7142  height: 36px;7143  display: flex;7144  align-items: center;7145  justify-content: center;7146  background: none;7147  border: none;7148  color: var(--peach-t2);7149  cursor: pointer;7150  border-radius: 8px;7151  font-size: 16px;7152  transition: color 150ms ease, background 150ms ease;7153  -webkit-tap-highlight-color: transparent;7154}71557156.peach-notes-header-btn:active {7157  background: rgba(255,255,255,0.06);7158  color: var(--peach-t0);7159}71607161/* The header + glyph is larger than the search svg so the two right-side7162 * buttons feel visually balanced. The base .peach-notes-header-btn caps font7163 * at 16px which would render the + too small. */7164.peach-notes-new-btn-icon {7165  font-size: 22px;7166  font-weight: 300;7167  line-height: 1;7168}71697170.peach-notes-search-btn svg {7171  display: block;7172  transform: translate(0.5px, 2.5px);7173}71747175/* Inline search bar */7176.peach-notes-search-input {7177  flex: 1;7178  background: none;7179  border: none;7180  outline: none;7181  font-family: 'IBM Plex Mono', monospace;7182  font-size: 13px;7183  color: var(--peach-t0);7184  padding: 4px 0;7185  letter-spacing: 0.02em;7186}71877188.peach-notes-search-input::placeholder {7189  color: var(--peach-t3);7190}71917192/* TOC list */7193.peach-notes-list-container {7194  flex: 1;7195  overflow-y: auto;7196  overflow-x: hidden;7197  scrollbar-width: none;7198  -webkit-overflow-scrolling: touch;7199  overscroll-behavior: contain;7200  position: relative;7201  z-index: 1;7202}72037204.peach-notes-list-container::-webkit-scrollbar { display: none; }72057206/* Note row */7207.peach-note-row {7208  position: relative;7209  display: grid;7210  grid-template-columns: 44px 8px 1fr 8px auto;7211  align-items: center;7212  min-height: 72px;7213  padding: 16px 20px;7214  border-bottom: 0.5px solid var(--peach-border);7215  cursor: pointer;7216  overflow: hidden;7217  touch-action: pan-y;7218  user-select: none;7219  -webkit-user-select: none;7220  -webkit-tap-highlight-color: transparent;7221}72227223.peach-note-row:first-child {7224  border-top: 0.5px solid var(--peach-border);7225}72267227.peach-note-row:active {7228  background: rgba(255,255,255,0.02);7229}72307231.peach-note-numeral {7232  font-family: 'Cormorant Garamond', serif;7233  font-style: italic;7234  font-size: 15px;7235  color: var(--peach-accent);7236  text-align: right;7237  line-height: 1;7238  flex-shrink: 0;7239}72407241.peach-note-title-gap { /* grid spacer */ }72427243.peach-note-title {7244  font-family: 'Cormorant Garamond', serif;7245  font-style: italic;7246  font-size: 18px;7247  color: var(--peach-t0);7248  line-height: 1.3;7249  min-width: 0;7250  overflow-wrap: break-word;7251}72527253.peach-note-title-match {7254  color: var(--peach-accent);7255}72567257.peach-note-date {7258  font-family: 'IBM Plex Mono', monospace;7259  font-size: 11px;7260  color: var(--peach-t1);7261  opacity: 0.62;7262  white-space: nowrap;7263  text-align: right;7264  flex-shrink: 0;7265  grid-column: 5;7266}72677268/* Swipe underlays */7269.peach-note-row-underlay {7270  position: absolute;7271  inset: 0;7272  display: flex;7273  align-items: center;7274  padding: 0 24px;7275  font-family: 'IBM Plex Mono', monospace;7276  font-size: 11px;7277  letter-spacing: 0.1em;7278  pointer-events: none;7279  z-index: 0;7280}72817282.peach-note-row-underlay--delete {7283  background: #8B2020;7284  color: rgba(255,255,255,0.9);7285  justify-content: flex-end;7286}72877288.peach-note-row-underlay--archive {7289  background: var(--peach-accent);7290  color: #0C0A06;7291  justify-content: flex-start;7292}72937294/* Delete confirm strip */7295.peach-note-delete-confirm {7296  position: absolute;7297  inset: 0;7298  background: var(--peach-bg);7299  display: flex;7300  align-items: center;7301  gap: 12px;7302  padding: 0 20px;7303  font-family: 'IBM Plex Mono', monospace;7304  font-size: 11px;7305  color: var(--peach-t1);7306  letter-spacing: 0.04em;7307  animation: peach-delete-confirm-in 150ms ease both;7308  z-index: 10;7309}73107311@keyframes peach-delete-confirm-in {7312  from { opacity: 0; }7313  to   { opacity: 1; }7314}73157316.peach-note-delete-confirm-btn {7317  background: #8B2020;7318  color: rgba(255,255,255,0.9);7319  border: none;7320  border-radius: 6px;7321  padding: 4px 10px;7322  font-family: 'IBM Plex Mono', monospace;7323  font-size: 10px;7324  cursor: pointer;7325  letter-spacing: 0.06em;7326}73277328.peach-note-delete-cancel-btn {7329  background: none;7330  border: none;7331  color: var(--peach-t3);7332  font-family: 'IBM Plex Mono', monospace;7333  font-size: 10px;7334  cursor: pointer;7335  letter-spacing: 0.06em;7336  padding: 4px 6px;7337}73387339/* Empty state */7340.peach-notes-empty {7341  display: flex;7342  flex-direction: column;7343  align-items: center;7344  justify-content: center;7345  flex: 1;7346  padding: 48px 32px;7347  gap: 16px;7348}73497350.peach-notes-empty-text {7351  font-family: 'Cormorant Garamond', serif;7352  font-style: italic;7353  font-size: 20px;7354  color: var(--peach-t3);7355  text-align: center;7356  margin: 0;7357  line-height: 1.4;7358  white-space: pre-line;7359}73607361/* ── Editor surface ── */73627363.peach-note-editor-surface {7364  position: absolute;7365  inset: 0;7366  background:7367    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 5%, transparent) 0%, transparent 62%),7368    var(--peach-bg);7369  display: flex;7370  flex-direction: column;7371  padding-top: env(safe-area-inset-top, 0px);7372}73737374.peach-note-editor-scroll {7375  flex: 1;7376  overflow-y: auto;7377  overflow-x: hidden;7378  scrollbar-width: none;7379  -webkit-overflow-scrolling: touch;7380  padding: 0 20px 120px;7381  position: relative;7382  z-index: 1;7383}73847385.peach-note-editor-scroll::-webkit-scrollbar { display: none; }73867387/* Desktop toolbar (always visible above body) */7388.peach-note-toolbar-desktop-inline {7389  display: grid;7390  grid-template-columns: repeat(4, minmax(0, 1fr)) auto repeat(5, minmax(0, 1fr));7391  align-items: center;7392  gap: 0;7393  padding: 5px 0 10px;7394  margin-bottom: 10px;7395  border-bottom: 0.5px solid var(--peach-border);7396}73977398/* Title field */7399.peach-note-title-field {7400  font-family: var(--font-display);7401  font-style: italic;7402  font-size: clamp(34px, 13vw, 44px);7403  font-weight: 400;7404  color: var(--peach-t0);7405  line-height: 0.98;7406  letter-spacing: -0.015em;7407  padding: 10px 0 2px;7408  outline: none;7409  min-height: 52px;7410  word-break: break-word;7411  position: relative;7412  z-index: 1;7413}74147415.peach-note-title-field:empty::before {7416  content: attr(data-placeholder);7417  color: var(--peach-t1);7418  opacity: 0.58;7419  pointer-events: none;7420}74217422/* Hairline separator */7423.peach-note-hairline {7424  height: 0.5px;7425  background: var(--peach-border);7426  margin: 14px 0 18px;7427  position: relative;7428  z-index: 1;7429}74307431/* Body field */7432.peach-note-body-field {7433  font-family: var(--font-display);7434  font-size: 17px;7435  color: var(--peach-t1);7436  line-height: 1.72;7437  padding: 0;7438  outline: none;7439  min-height: 240px;7440  word-break: break-word;7441  position: relative;7442  z-index: 1;7443}74447445.peach-note-body-field:empty::before {7446  content: attr(data-placeholder);7447  color: var(--peach-t1);7448  opacity: 0.56;7449  font-style: italic;7450  pointer-events: none;7451}74527453.peach-note-body-field h2 {7454  font-family: var(--font-display);7455  font-style: italic;7456  font-size: 22px;7457  font-weight: 600;7458  color: var(--peach-t0);7459  margin: 20px 0 8px;7460}74617462.peach-note-body-field blockquote {7463  border-left: 2px solid var(--peach-accent);7464  margin: 12px 0;7465  padding-left: 16px;7466  color: var(--peach-t1);7467  font-style: italic;7468}74697470.peach-note-body-field ul,7471.peach-note-body-field ol {7472  padding-left: 20px;7473  margin: 8px 0;7474}74757476.peach-note-body-field li {7477  margin: 4px 0;7478}74797480.peach-note-body-field hr {7481  border: none;7482  border-top: 0.5px solid var(--peach-border);7483  margin: 16px 0;7484}74857486/* Saved indicator */7487.peach-note-saved-indicator {7488  font-family: var(--font-mono);7489  font-size: 11px;7490  color: var(--peach-t3);7491  letter-spacing: 0.04em;7492  text-align: right;7493  padding: 6px 24px;7494  flex-shrink: 0;7495  transition: opacity 300ms ease;7496  pointer-events: none;7497  position: relative;7498  z-index: 1;7499}75007501/* Mobile keyboard toolbar */75027503.peach-note-toolbar-btn {7504  min-width: 0;7505  width: auto;7506  height: 30px;7507  display: flex;7508  align-items: center;7509  justify-content: center;7510  background: none;7511  border: none;7512  border-radius: 4px;7513  cursor: pointer;7514  color: var(--peach-t1);7515  transition: background 100ms ease, color 100ms ease;7516  -webkit-tap-highlight-color: transparent;7517}75187519.peach-note-toolbar-btn svg {7520  width: 14px;7521  height: 14px;7522  fill: none;7523  stroke: currentColor;7524  stroke-width: 1.15;7525  stroke-linecap: round;7526  stroke-linejoin: round;7527  pointer-events: none;7528}75297530.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }7531.peach-note-toolbar-btn:hover,7532.peach-note-toolbar-btn:active {7533  background: var(--peach-t4);7534  color: var(--peach-t0);7535}75367537.peach-note-toolbar-divider {7538  width: 0.5px;7539  height: 20px;7540  background: var(--peach-border);7541  margin: 0 4px;7542  flex-shrink: 0;7543}75447545/* Desktop: larger headline in TOC */7546@media (min-width: 400px) {7547  .peach-notes-header-title {7548    font-size: 32px;7549  }75507551  .peach-note-row {7552    min-height: 64px;7553    padding: 14px 16px;7554  }7555}75567557/* Flying title — shared element during expansion/collapse */75587559/* ─── Light theme overrides ───────────────────────────────────────────────7560   Tokens that cannot be expressed as variable substitutions — hardcoded7561   context-specific values that need separate light-mode rules. */75627563/* Settings section headers: use text-label (#79766F) per restoration brief —7564   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY7565   presence without fighting the light parchment background. */7566.light .peach-settings-sub-label {7567  color: #79766F;7568}75697570/* Secondary action buttons (ghost / subtle): filled with input-well surface7571   so they read as recessed against the parchment card background. */7572.light .peach-btn--ghost:not(.peach-icon-btn) {7573  background: #EEE7DD;7574  border-color: #DDD5CB;7575  color: #1A1208;7576}7577.light .peach-icon-btn {7578  background: transparent;7579  border-color: transparent;7580}7581.light .peach-btn--subtle {7582  background: #EEE7DD;7583  border-color: #DDD5CB;7584}75857586/* Entry row hover: bg-row lifts the row above the card surface. */7587.light .peach-entry-row:hover {7588  background: #F2EBE1;7589}7590.light .peach-entry-row.is-active {7591  background: #F2EBE1;7592}7593.light .peach-entry-row.is-selected {7594  background: #F5EDE2;7595}75967597/* ──────────────────────────────────────────────────────────────────────────7598   Pair-device flow — bird-stage animation (Phase 1)7599   See src/popup/components/PairingBirds.tsx and the brief §6.2.7600   Three-act animation gated on the [data-phase] attribute of7601   .peach-pair-pair; child layers (birds, sound arcs, flight wave, dot)7602   each react via either pose class or visibility flag.7603   Tokens: accent surfaces use var(--peach-accent); bird illustration7604   colours are baked into the SVG per the brand-peach exception in §3.1.7605   ────────────────────────────────────────────────────────────────────── */76067607.peach-pair-pair {7608  position: absolute;7609  inset: 0;7610  z-index: 3;7611  display: flex;7612  flex-direction: column;7613  padding: 14px 12px 12px;7614  width: 100%;7615  box-sizing: border-box;7616  gap: 0;7617  background:7618    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),7619    var(--peach-bg);7620  color: var(--peach-t0);7621  overflow-y: auto;7622  overflow-x: hidden;7623  scrollbar-width: none;7624  isolation: isolate;7625  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;7626}7627@keyframes peach-pair-overlay-in {7628  from { opacity: 0; transform: translateY(8px); }7629  to   { opacity: 1; transform: translateY(0); }7630}7631.peach-pair-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }7632.peach-pair-pair::before {7633  content: '';7634  position: absolute;7635  inset: 0;7636  border-radius: inherit;7637  pointer-events: none;7638  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);7639  z-index: 0;7640}7641.peach-pair-pair > * { position: relative; z-index: 1; }76427643/* Header --------------------------------------------------------------- */7644.peach-pair-head {7645  display: flex; align-items: center; gap: 10px;7646}7647.peach-pair-back {7648  width: 32px; height: 32px;7649  display: inline-flex; align-items: center; justify-content: center;7650  background: transparent;7651  border: none;7652  border-radius: 8px;7653  color: var(--peach-t1);7654  cursor: pointer;7655  transition: color 0.15s ease, box-shadow 0.15s ease;7656}7657.peach-pair-back:hover {7658  color: var(--peach-accent);7659  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);7660}7661.peach-pair-title {7662  font-family: var(--font-display, Georgia, serif);7663  font-style: italic;7664  font-size: 24px;7665  font-weight: 500;7666  letter-spacing: 0.005em;7667  color: var(--peach-t0);7668  line-height: 1;7669}7670.peach-pair-head-spacer { flex: 1; }76717672/* Bird stage ----------------------------------------------------------- */7673.peach-pair-stage {7674  position: relative;7675  flex: 0 0 108px;7676  height: 108px;7677  margin: 8px auto 18px;7678  width: 300px;7679  display: flex;7680  align-items: flex-end;7681  justify-content: center;7682}7683.peach-pair-bird-slot {7684  position: absolute;7685  bottom: 0;7686  width: 108px;7687  height: 108px;7688  transform-origin: 50% 95%;7689}7690.peach-pair-bird-slot-desktop { left: 12px; }7691.peach-pair-bird-slot-mobile { right: 12px; }7692.peach-pair-stage.act-handshake .peach-pair-bird-slot-desktop,7693.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop {7694  transform: translateX(6px);7695  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);7696}7697.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop { --bb-x: 6px; }7698.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { --bb-x: -6px; }7699.peach-pair-stage.act-paired .peach-pair-bird-slot {7700  animation: peach-pair-happy-bob 1.2s ease-in-out infinite;7701}7702.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { animation-delay: 0.2s; }7703@keyframes peach-pair-happy-bob {7704  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }7705  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }7706}77077708/* Bird internal -------------------------------------------------------- */7709.peach-pair-bird {7710  width: 108px;7711  height: 108px;7712  transform-origin: 50% 95%;7713}7714.peach-pair-bird svg { width: 100%; height: 100%; overflow: visible; }77157716.peach-pair-bird-body {7717  transform-origin: 50% 80%;7718  animation: peach-pair-bird-bob 2.4s ease-in-out infinite;7719}7720.peach-pair-bird-pose-chirping .peach-pair-bird-body { animation-duration: 1.4s; }7721.peach-pair-bird-pose-happy .peach-pair-bird-body   { animation: peach-pair-bird-celebrate 0.9s ease-in-out infinite; }7722.peach-pair-bird-pose-attentive .peach-pair-bird-body { animation-duration: 2.0s; }77237724@keyframes peach-pair-bird-bob {7725  0%, 100% { transform: translateY(0) rotate(0deg); }7726  50%      { transform: translateY(-2px) rotate(-1deg); }7727}7728@keyframes peach-pair-bird-celebrate {7729  0%, 100% { transform: translateY(0) rotate(0deg); }7730  25%      { transform: translateY(-4px) rotate(-2deg); }7731  75%      { transform: translateY(-4px) rotate(2deg); }7732}77337734.peach-pair-bird-wing {7735  transform-origin: 50% 50%;7736  animation: peach-pair-bird-flap 0.9s ease-in-out infinite;7737}7738.peach-pair-bird-pose-happy .peach-pair-bird-wing { animation-duration: 0.35s; }7739.peach-pair-bird-pose-attentive .peach-pair-bird-wing { animation-duration: 1.4s; }7740@keyframes peach-pair-bird-flap {7741  0%, 100% { transform: scaleY(1); }7742  50%      { transform: scaleY(0.85); }7743}77447745.peach-pair-bird-head-group {7746  transform-origin: 95px 52px;7747  animation: peach-pair-bird-bob-head 2.6s ease-in-out infinite;7748}7749.peach-pair-bird-pose-chirping .peach-pair-bird-head-group { animation-duration: 0.45s; }7750.peach-pair-bird-pose-attentive .peach-pair-bird-head-group { animation: none; }7751@keyframes peach-pair-bird-bob-head {7752  0%, 100% { transform: rotate(0deg); }7753  50%      { transform: rotate(3deg); }7754}77557756.peach-pair-bird-eye-group { transform-origin: center; }77577758.peach-pair-bird-aura {7759  animation: peach-pair-bird-aura 2.6s ease-in-out infinite;7760}7761.peach-pair-bird-pose-happy .peach-pair-bird-aura { animation-duration: 1.4s; }7762@keyframes peach-pair-bird-aura {7763  0%, 100% { opacity: 0; }7764  50%      { opacity: 0.18; }7765}77667767.peach-pair-bird-tail {7768  transform-origin: 50% 100%;7769  animation: peach-pair-bird-tail-wag 3s ease-in-out infinite;7770}7771@keyframes peach-pair-bird-tail-wag {7772  0%, 100% { transform: rotate(0deg); }7773  50%      { transform: rotate(2deg); }7774}77757776.peach-pair-bird-pose-happy .peach-pair-bird-shadow { animation: peach-pair-bird-shadow-pulse 0.9s ease-in-out infinite; }7777@keyframes peach-pair-bird-shadow-pulse {7778  0%, 100% { transform: scaleX(1); opacity: 0.45; }7779  50%      { transform: scaleX(0.92); opacity: 0.3; }7780}77817782/* Per-pose variants --------------------------------------------------- */7783/* Status copy ---------------------------------------------------------- */77847785.peach-pair-headline {7786  font-family: var(--font-display, Georgia, serif);7787  font-style: italic;7788  font-size: 20px;7789  font-weight: 500;7790  line-height: 1.2;7791  letter-spacing: 0.005em;7792  color: var(--peach-t0);7793  margin-bottom: 6px;7794}77957796.peach-pair-sub {7797  font-size: 12.5px;7798  line-height: 1.45;7799  color: var(--peach-t1);7800  max-width: 280px;7801  margin: 0 auto;7802  text-wrap: pretty;7803}78047805/* Status action -------------------------------------------------------- */7806.peach-pair-action {7807  margin: 2px 4px 10px;7808  margin-top: auto;7809  display: flex;7810  flex-direction: column;7811  gap: 8px;7812}78137814/* Screen-reader-only live region. Kept off the visual flow but read by7815   assistive tech as the pairing phase advances. */7816.peach-sr-only {7817  position: absolute;7818  width: 1px; height: 1px;7819  padding: 0; margin: -1px;7820  overflow: hidden;7821  clip: rect(0, 0, 0, 0);7822  white-space: nowrap;7823  border: 0;7824}78257826/* Reduced motion — stage simplifies to opacity transitions only */7827@media (prefers-reduced-motion: reduce) {7828  .peach-pair-bird-body,7829  .peach-pair-bird-head-group,7830  .peach-pair-bird-beak,7831  .peach-pair-bird-wing,7832  .peach-pair-bird-tuft,7833  .peach-pair-bird-tail,7834  .peach-pair-bird-eye-group,7835  .peach-pair-bird-aura,7836  .peach-pair-bird-slot,7837  .peach-pair-bird-slot-mobile {7838    animation: none !important;7839    transition: opacity 0.2s linear !important;7840  }7841}78427843/* Shell border and shadow in light mode: match dark mode's near-invisible7844   border weight so the popup frame looks the same in both themes. */7845.light .peach-shell,7846.light .peach-screen {7847  border-color: rgba(26, 18, 8, 0.07);7848  box-shadow:7849    0 2px 8px rgba(80, 56, 32, 0.08),7850    0 14px 48px rgba(80, 56, 32, 0.10),7851    0 0 0 1px rgba(26, 18, 8, 0.04);7852}78537854/* HOLE 4: the revoke confirmation carries its own disclosure, so it needs the7855   full row width rather than sitting inline beside the device name. */7856.peach-settings-row:has(> .peach-unpair-confirm) { flex-wrap: wrap; }7857.peach-unpair-confirm {7858  display: flex;7859  flex-direction: column;7860  gap: 8px;7861  width: 100%;7862}7863.peach-unpair-confirm-note {7864  margin: 0;7865  font-size: 0.6875rem;7866  line-height: 1.5;7867  color: var(--peach-t2);7868}78697870/* Sync mode selector — three named choices (public / private / off). Replaces7871   the old binary "local network only" toggle; see docs/sync-lan-retirement.md. */7872.peach-sync-mode {7873  display: flex;7874  align-items: flex-start;7875  gap: 10px;7876  width: 100%;7877  text-align: left;7878  padding: 10px 12px;7879  margin-top: 8px;7880  border-radius: 10px;7881  border: 1px solid var(--peach-border);7882  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);7883  color: var(--peach-t1);7884  cursor: pointer;7885  transition: border-color var(--peach-dur-80) var(--peach-curve-arrival),7886              background-color var(--peach-dur-80) var(--peach-curve-arrival);7887}7888.peach-sync-mode:hover:not(:disabled) {7889  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);7890}7891.peach-sync-mode.is-active {7892  border-color: var(--peach-accent);7893  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);7894}7895.peach-sync-mode:disabled { opacity: 0.6; cursor: default; }7896.peach-sync-mode-main { display: flex; flex-direction: column; gap: 3px; flex: 1; }7897.peach-sync-mode-title { font-size: 12px; }7898.peach-sync-mode-sub {7899  font-size: 11px;7900  line-height: 1.5;7901  color: var(--peach-t2);7902}7903.peach-sync-mode-pip {7904  flex: none;7905  margin-top: 3px;7906  width: 12px; height: 12px;7907  border-radius: 50%;7908  border: 1px solid var(--peach-t3);7909}7910.peach-sync-mode.is-active .peach-sync-mode-pip {7911  border-color: var(--peach-accent);7912  background:7913    radial-gradient(circle at 50% 50%, var(--peach-accent) 0 42%, transparent 44%);7914}7915.peach-sync-mode-disclosure {7916  margin: 10px 2px 0;7917  font-size: 11px;7918  line-height: 1.5;7919  color: var(--peach-t2);7920}7921.peach-sync-mode-warn { color: var(--peach-breach); }79227923/* Compact form, used mid-pairing: a quiet line, not a decision to make. */7924.peach-sync-mode-summary {7925  margin: 8px 2px 0;7926  font-size: 11px;7927  color: var(--peach-t2);7928  text-align: center;7929}7930.peach-sync-mode-change {7931  background: none;7932  border: none;7933  padding: 0;7934  font: inherit;7935  color: var(--peach-accent);7936  text-decoration: underline;7937  cursor: pointer;7938}79397940/* ── What's new / breaking-changes screen (one-shot after unlock) ── */7941.peach-whats-new {7942  width: 100%;7943  height: 100%;7944  display: flex;7945  flex-direction: column;7946  background:7947    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%, transparent 65%),7948    var(--peach-bg);7949  overflow: hidden;7950}79517952.peach-whats-new-inner {7953  display: flex;7954  flex-direction: column;7955  height: 100%;7956  padding: 28px 24px 20px;7957}79587959.peach-whats-new-header {7960  display: flex;7961  flex-direction: column;7962  align-items: center;7963  gap: 4px;7964  margin-bottom: 16px;7965  flex-shrink: 0;7966}79677968.peach-whats-new-mark {7969  width: 28px;7970  height: 28px;7971  margin-bottom: 2px;7972}79737974.peach-whats-new-title {7975  font-family: var(--font-display);7976  font-size: 19px;7977  font-style: italic;7978  font-weight: 400;7979  color: var(--peach-t0);7980  margin: 0;7981}79827983.peach-whats-new-version {7984  font-family: var(--peach-mono);7985  font-size: 0.6875rem;7986  color: var(--peach-t1);7987}79887989.peach-whats-new-notes {7990  flex: 1;7991  display: flex;7992  flex-direction: column;7993  gap: 12px;7994  overflow-y: auto;7995  min-height: 0;7996  padding-right: 4px;7997}79987999.peach-whats-new-release-meta {8000  display: flex;8001  align-items: baseline;8002  justify-content: space-between;8003  margin-bottom: 7px;8004  font-family: var(--peach-mono);8005  font-size: 0.5625rem;8006  color: var(--peach-t2);8007}80088009.peach-whats-new-release-version { margin: 0; font-size: 0.6875rem; color: var(--peach-t0); }8010.peach-whats-new-item + .peach-whats-new-item { margin-top: 10px; }80118012.peach-whats-new-note {8013  padding: 12px 14px;8014  border-radius: 10px;8015  background: var(--peach-bg-card);8016  border: 1px solid var(--peach-t3);8017}80188019.peach-whats-new-note.is-breaking {8020  border-color: color-mix(in srgb, var(--peach-breach) 45%, var(--peach-t3));8021  background: color-mix(in srgb, var(--peach-breach) 6%, var(--peach-bg-card));8022}80238024.peach-whats-new-badge {8025  display: inline-block;8026  font-family: var(--peach-mono);8027  font-size: 0.5625rem;8028  text-transform: uppercase;8029  letter-spacing: 0.05em;8030  color: var(--peach-breach);8031  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);8032  padding: 2px 7px;8033  border-radius: 4px;8034  margin-bottom: 6px;8035}80368037.peach-whats-new-note-heading {8038  font-size: 0.8125rem;8039  font-weight: 600;8040  color: var(--peach-t0);8041  margin: 0 0 4px;8042}80438044.peach-whats-new-note-body {8045  font-size: 0.75rem;8046  line-height: 1.45;8047  color: var(--peach-t1);8048  margin: 0;8049}80508051.peach-whats-new-continue {8052  margin-top: 16px;8053  flex-shrink: 0;8054  width: 100%;8055  padding: 11px;8056  border-radius: 999px;8057  font-size: 0.75rem;8058}80598060/* ── Peach Pro nudge (occasional, after unlock, free plan only) ── */8061.peach-pro-nudge {8062  width: 100%;8063  height: 100%;8064  background:8065    radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--peach-accent) 14%, transparent) 0%, transparent 70%),8066    var(--peach-bg);8067  overflow-y: auto;8068}80698070.peach-pro-nudge-inner {8071  display: flex;8072  flex-direction: column;8073  gap: 8px;8074  min-height: 100%;8075  padding: 20px 24px 16px;8076  animation: peach-pro-nudge-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;8077}80788079.peach-pro-nudge-mark {8080  width: 26px;8081  height: 26px;8082  margin-bottom: 2px;8083}80848085.peach-pro-nudge-grid {8086  margin: 8px 0 0;8087  padding: 0;8088  list-style: none;8089}80908091.peach-pro-nudge-actions {8092  display: flex;8093  flex-direction: column;8094  gap: 10px;8095  margin-top: auto;8096  padding-top: 12px;8097}80988099.peach-pro-nudge-actions .peach-pro-upgrade-cta { padding: 11px; }81008101.peach-pro-nudge-dismissals {8102  display: flex;8103  justify-content: center;8104  align-items: center;8105  gap: 8px;8106  color: var(--peach-t2);8107  font-size: 0.6875rem;8108}81098110.peach-pro-nudge-quiet {8111  background: none;8112  border: none;8113  padding: 4px 2px;8114  color: var(--peach-t1);8115  font: inherit;8116  cursor: pointer;8117}81188119.peach-pro-nudge-quiet:hover { color: var(--peach-t0); text-decoration: underline; }81208121.peach-pro-nudge-quiet:focus-visible {8122  outline: 2px solid var(--peach-accent);8123  outline-offset: 2px;8124  border-radius: 4px;8125}81268127@keyframes peach-pro-nudge-in {8128  from { opacity: 0; transform: translateY(8px); }8129  to   { opacity: 1; transform: none; }8130}81318132@media (prefers-reduced-motion: reduce) {8133  .peach-pro-nudge-inner { animation: none; }8134}