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/* ─── First-run onboarding ──────────────────────────────────────────────5258   Three-card welcome shown once before vault creation. The PeachScript5259   rune background drifts behind everything at very low opacity — it's5260   atmosphere, not focus. The cards themselves use the same panel5261   language as the rest of the popup so the transition into NewVault is5262   continuous, not a jarring switch of visual register. */52635264.peach-onboarding {5265  position: relative;5266  display: flex;5267  flex-direction: column;5268  width: 100%;5269  height: 100%;5270  padding: 16px 16px 18px;5271  box-sizing: border-box;5272  overflow: hidden;5273  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;5274}52755276.peach-onboarding.is-completing {5277  animation: peach-onboard-exit 200ms ease-out forwards;5278}52795280.peach-rune-background {5281  position: absolute;5282  inset: 0;5283  width: 100%;5284  height: 100%;5285  pointer-events: none;5286  z-index: 0;5287  transition: opacity 500ms ease-out;5288}52895290.peach-onboarding.is-completing .peach-rune-background {5291  opacity: 0;5292}52935294.peach-onboarding-header {5295  position: relative;5296  z-index: 1;5297  display: flex;5298  align-items: center;5299  margin-bottom: 14px;5300}53015302.peach-onboarding-card {5303  position: relative;5304  z-index: 1;5305  flex: 1;5306  min-height: 0;5307  display: flex;5308  flex-direction: column;5309  gap: 10px;5310  padding: 22px 20px;5311  justify-content: center;5312  border-radius: 16px;5313  border: 1px solid var(--peach-t3);5314  background:5315    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));5316  backdrop-filter: blur(3px);5317  -webkit-backdrop-filter: blur(3px);5318  box-shadow:5319    inset 0 1px 0 rgba(240, 232, 216, 0.04),5320    0 12px 28px rgba(0, 0, 0, 0.12);5321  cursor: pointer;5322  user-select: none;5323  overflow-y: auto;5324  scrollbar-width: none;5325  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;5326}53275328.peach-onboarding-card::-webkit-scrollbar {5329  display: none;5330}53315332.peach-onboarding-card.is-exiting {5333  animation: peach-card-out 120ms ease-in forwards;5334  pointer-events: none;5335}53365337/* The final card carries the choice rows on top of the full intro copy.5338 * The "Already using Peach?" block is a separate decision section — float it5339 * toward the bottom so the copy breathes and no dead gap pools under it5340 * (scroll stays available as a fallback on shorter viewports). */5341.peach-onboarding-card--final {5342  gap: 8px;5343  padding-top: 20px;5344  padding-bottom: 16px;5345  justify-content: flex-start;5346}53475348.peach-onboarding-card--final .peach-onboarding-body {5349  font-size: 0.75rem;5350  line-height: 1.5;5351}53525353.peach-onboarding-card--final .peach-onboarding-choice {5354  min-height: 40px;5355  padding: 6px 10px;5356}53575358.peach-onboarding-card--final .peach-onboarding-choice-row {5359  gap: 6px;5360}53615362.peach-onboarding-card--final .peach-onboarding-choice-heading {5363  margin: auto 0 -2px;5364}53655366.peach-onboarding-card-headline {5367  margin: 0;5368  font-family: var(--font-display);5369  font-style: italic;5370  font-weight: 400;5371  font-size: 22px;5372  line-height: 1.05;5373  color: var(--peach-t0);5374  white-space: pre-line;5375}53765377.peach-onboarding-divider {5378  margin: 4px 0 6px;5379  border: 0;5380  border-top: 1px solid var(--peach-t3);5381  width: 100%;5382}53835384.peach-onboarding-body {5385  margin: 0;5386  font-size: 0.8125rem;5387  line-height: 1.6;5388  color: var(--peach-t1);5389}53905391.peach-onboarding-warning {5392  display: flex;5393  align-items: flex-start;5394  gap: 8px;5395  margin: 6px 0 0;5396  padding-top: 8px;5397  border-top: 1px dashed var(--peach-t3);5398  font-size: 0.8125rem;5399  line-height: 1.5;5400  color: var(--peach-t1);5401}54025403.peach-onboarding-warning-icon {5404  color: var(--peach-accent);5405  font-size: 0.8125rem;5406  line-height: 1.5;5407  flex: 0 0 auto;5408}54095410.peach-onboarding-nav {5411  position: relative;5412  z-index: 1;5413  display: grid;5414  grid-template-columns: 1fr auto 1fr;5415  align-items: center;5416  margin-top: 12px;5417  padding: 0 4px;5418}54195420.peach-onboarding-next {5421  justify-self: end;5422}54235424.peach-onboarding-back {5425  justify-self: start;5426}54275428.peach-onboarding-dots {5429  display: flex;5430  align-items: center;5431  gap: 6px;5432}54335434.peach-onboarding-dot {5435  width: 6px;5436  height: 6px;5437  border-radius: 50%;5438  background: var(--peach-t2);5439  transition: width 200ms ease, height 200ms ease, background 200ms ease;5440}54415442.peach-onboarding-dot.is-active {5443  width: 8px;5444  height: 8px;5445  background: var(--peach-accent);5446}54475448.peach-onboarding-next {5449  background: none;5450  border: none;5451  padding: 4px 0;5452  cursor: pointer;5453  font-family: "IBM Plex Mono", monospace;5454  font-size: 0.6875rem;5455  letter-spacing: 0.04em;5456  color: var(--peach-t1);5457  transition: color 150ms ease;5458}54595460.peach-onboarding-next:hover {5461  color: var(--peach-t0);5462}54635464.peach-onboarding-next:disabled {5465  opacity: 0.5;5466  cursor: default;5467}54685469.peach-onboarding-back {5470  background: none;5471  border: none;5472  padding: 4px 0;5473  cursor: pointer;5474  font-family: "IBM Plex Mono", monospace;5475  font-size: 0.6875rem;5476  letter-spacing: 0.04em;5477  color: var(--peach-t2);5478  transition: color 150ms ease;5479}54805481.peach-onboarding-back:hover {5482  color: var(--peach-t0);5483}54845485.peach-onboarding-back:disabled {5486  opacity: 0.5;5487  cursor: default;5488}54895490/* Reserve back-button width on the first card so the dots stay centred */5491.peach-onboarding-back-spacer {5492  width: 44px;5493}54945495.peach-onboarding-choice-row {5496  display: grid;5497  grid-template-columns: 1fr;5498  gap: 8px;5499}55005501.peach-onboarding-choice-heading {5502  margin: 8px 0 -2px;5503  color: var(--peach-t1);5504  font-family: "IBM Plex Mono", monospace;5505  font-size: 0.6875rem;5506  letter-spacing: 0.04em;5507  text-transform: uppercase;5508}55095510.peach-onboarding-choice {5511  min-height: 48px;5512  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);5513  border-radius: 8px;5514  padding: 8px 10px;5515  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);5516  color: var(--peach-t0);5517  font-size: 0.76rem;5518  font-weight: 700;5519  text-align: left;5520}55215522.peach-onboarding-choice-label {5523  display: flex;5524  align-items: center;5525  gap: 6px;5526}55275528.peach-onboarding-choice-detail {5529  display: block;5530}55315532.peach-onboarding-choice-detail {5533  margin-top: 2px;5534  color: var(--peach-t1);5535  font-size: 0.625rem;5536  font-weight: 400;5537  line-height: 1.35;5538}55395540.peach-onboarding-choice--adopt {5541  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);5542  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);5543}55445545.peach-adopt-vault {5546  position: relative;5547  min-height: 100%;5548  padding: 22px;5549  display: grid;5550  place-items: center;5551}55525553.peach-adopt-vault--pair {5554  padding: 10px;5555  overflow-y: auto;5556  scrollbar-width: none;5557}55585559.peach-adopt-vault--pair::-webkit-scrollbar {5560  display: none;5561}55625563.peach-adopt-card {5564  position: relative;5565  z-index: 1;5566  width: min(100%, 330px);5567  padding: 20px;5568  border-radius: 8px;5569  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);5570  background: color-mix(in srgb, var(--peach-surface) 90%, transparent);5571  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);5572}55735574.peach-adopt-card--pair {5575  width: 100%;5576  max-height: 500px;5577  margin: auto;5578  padding: 14px 16px 12px;5579  overflow-y: auto;5580  scrollbar-width: none;5581  border: 0;5582  border-radius: 16px;5583  background:5584    radial-gradient(5585      circle at 50% -10%,5586      color-mix(in srgb, var(--peach-accent) 14%, transparent),5587      transparent 38%5588    ),5589    color-mix(in srgb, var(--peach-surface) 94%, transparent);5590}55915592.peach-adopt-card--pair::-webkit-scrollbar {5593  display: none;5594}55955596.peach-adopt-card h1 {5597  margin: 0 0 10px;5598  font-family: var(--font-display);5599  font-style: italic;5600  font-weight: 400;5601  font-size: 1.42rem;5602  line-height: 1.15;5603}56045605.peach-adopt-card p {5606  margin: 0 0 14px;5607  color: var(--peach-t1);5608  line-height: 1.35;5609}56105611.peach-adopt-input {5612  margin-bottom: 12px;5613}56145615.peach-adopt-card textarea.peach-adopt-input {5616  width: 100%;5617  resize: vertical;5618  overflow-wrap: anywhere;5619  font-family: "IBM Plex Mono", monospace;5620  font-size: 0.64rem;5621}56225623.peach-adoption-source-invitation {5624  display: flex;5625  flex-direction: column;5626  align-items: center;5627  gap: 10px;5628  padding: 4px 18px 16px;5629  text-align: center;5630}56315632.peach-pair-qr {5633  display: block;5634  margin-inline: auto;5635  max-width: min(224px, 100%);5636  height: auto;5637  padding: 8px;5638  border-radius: 10px;5639  background: #fff;5640}56415642.peach-adopt-card > .peach-btn + .peach-btn {5643  margin-top: 8px;5644}56455646.peach-adopt-actions {5647  display: flex;5648  gap: 10px;5649  margin-top: 14px;5650}56515652.peach-adopt-actions > button {5653  flex: 1;5654}56555656.peach-adopt-pairing {5657  text-align: center;5658}56595660.peach-adopt-pairing h1 {5661  max-width: 260px;5662  margin: 0 auto 6px;5663  color: var(--peach-t0);5664  font-family: var(--font-display, Georgia, serif);5665  font-size: 1.42rem;5666  font-style: italic;5667  font-weight: 500;5668  line-height: 1.12;5669  text-wrap: balance;5670}56715672.peach-adopt-pairing .peach-adopt-pair-lede {5673  max-width: 258px;5674  margin: 0 auto;5675  color: color-mix(in srgb, var(--peach-t0) 82%, var(--peach-bg));5676  font-size: 0.73rem;5677  line-height: 1.42;5678  text-wrap: pretty;5679}56805681.peach-pair-stage.peach-adopt-bird-stage {5682  width: min(100%, 260px);5683  height: 102px;5684  margin: -6px auto 2px;5685}56865687.peach-adopt-bird-stage .peach-pair-bird-slot,5688.peach-adopt-bird-stage .peach-pair-bird {5689  width: 90px;5690  height: 90px;5691}56925693.peach-adopt-bird-stage .peach-pair-bird-slot-desktop {5694  left: 12px;5695}56965697.peach-adopt-bird-stage .peach-pair-bird-slot-mobile {5698  right: 12px;5699}57005701.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-desktop {5702  --bb-x: 12px;5703  transform: translateX(12px);5704}57055706.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-mobile {5707  --bb-x: -12px;5708  transform: translateX(-12px);5709}57105711.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot {5712  animation: peach-adopt-happy-bob 0.8s ease-in-out infinite;5713}57145715.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-mobile {5716  animation-delay: 0.18s;5717  animation-direction: reverse;5718}57195720.peach-adopt-pairing.is-complete .peach-pair-stage.peach-adopt-bird-stage {5721  width: 100%;5722  height: 135px;5723  margin: -8px auto 6px;5724}57255726.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot,5727.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird {5728  width: 112px;5729  height: 112px;5730}57315732.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot-desktop {5733  left: 0;5734  --bb-x: 0;5735  transform: translateX(0);5736}57375738.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot-mobile {5739  right: 0;5740  --bb-x: 0;5741  transform: translateX(0);5742}57435744.peach-adopt-pairing.is-complete h1 {5745  font-size: 1.6rem;5746}57475748.peach-adopt-pairing.is-complete .peach-adopt-pair-lede {5749  font-size: 0.78rem;5750}57515752@keyframes peach-adopt-happy-bob {5753  0%, 100% {5754    transform: translateX(var(--bb-x, 0)) translateY(0) rotate(0deg);5755  }5756  35% {5757    transform: translateX(var(--bb-x, 0)) translateY(-8px) rotate(-3deg);5758  }5759  70% {5760    transform: translateX(var(--bb-x, 0)) translateY(-3px) rotate(2deg);5761  }5762}57635764.peach-adopt-connection {5765  position: absolute;5766  left: 50%;5767  bottom: 38px;5768  width: 78px;5769  height: 1px;5770  translate: -50% 0;5771  background: color-mix(in srgb, var(--peach-accent) 62%, transparent);5772  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 56%, transparent);5773}57745775.peach-adopt-pairing.is-complete .peach-adopt-connection {5776  bottom: 49px;5777  width: 92px;5778}57795780.peach-adopt-connection::after {5781  content: "";5782  position: absolute;5783  left: 50%;5784  top: 50%;5785  width: 7px;5786  height: 7px;5787  border-radius: 50%;5788  translate: -50% -50%;5789  background: var(--peach-accent);5790  box-shadow:5791    0 0 0 4px color-mix(in srgb, var(--peach-accent) 17%, transparent),5792    0 0 14px color-mix(in srgb, var(--peach-accent) 74%, transparent);5793  animation: peach-adopt-connection-pulse 1.1s ease-in-out infinite;5794}57955796@keyframes peach-adopt-connection-pulse {5797  0%, 100% { scale: 0.8; opacity: 0.72; }5798  50% { scale: 1.14; opacity: 1; }5799}58005801.peach-adopt-qr-wrap {5802  min-height: 160px;5803  display: grid;5804  place-items: center;5805}58065807.peach-adopt-qr-wrap .peach-hint-error {5808  margin: 12px 0;5809}58105811.peach-adopt-pairing .peach-adopt-pair-status {5812  margin: 0;5813  color: var(--peach-t0);5814  font-size: 0.75rem;5815}58165817.peach-adopt-confirmation {5818  margin-top: 18px;5819  padding: 8px 0 4px;5820}58215822.peach-adopt-confirmation .peach-adopt-confirmation-label {5823  margin: 0 0 7px;5824  color: color-mix(in srgb, var(--peach-accent) 72%, var(--peach-t0));5825  font-family: var(--peach-mono, "IBM Plex Mono", monospace);5826  font-size: 0.625rem;5827  font-weight: 700;5828  letter-spacing: 0.14em;5829}58305831.peach-adopt-confirmation .peach-adoption-sas {5832  margin: 0 auto;5833  padding: 12px 14px;5834  border-color: color-mix(in srgb, var(--peach-accent) 36%, transparent);5835  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);5836}58375838.peach-adopt-confirmation .peach-adoption-sas strong {5839  color: color-mix(in srgb, var(--peach-accent) 84%, var(--peach-t0));5840  font-size: 1.58rem;5841  text-shadow: 0 0 16px color-mix(in srgb, var(--peach-accent) 30%, transparent);5842}58435844.peach-adopt-confirmation .peach-adopt-confirmation-help {5845  max-width: 270px;5846  margin: 8px auto 0;5847  color: color-mix(in srgb, var(--peach-t0) 78%, var(--peach-bg));5848  font-size: 0.7rem;5849  line-height: 1.45;5850}58515852.peach-adopt-privacy {5853  display: flex;5854  align-items: flex-start;5855  gap: 9px;5856  margin-top: 10px;5857  padding: 8px 9px;5858  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);5859  border-radius: 10px;5860  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);5861  text-align: left;5862}58635864.peach-adopt-privacy svg {5865  width: 16px;5866  height: 16px;5867  flex: 0 0 auto;5868  margin-top: 1px;5869  fill: none;5870  stroke: color-mix(in srgb, var(--peach-accent) 74%, var(--peach-t0));5871  stroke-linecap: round;5872  stroke-linejoin: round;5873  stroke-width: 1.7;5874}58755876.peach-adopt-pairing .peach-adopt-privacy p {5877  margin: 0;5878  color: color-mix(in srgb, var(--peach-t0) 76%, var(--peach-bg));5879  font-size: 0.62rem;5880  line-height: 1.4;5881}58825883.peach-adopt-privacy strong {5884  color: var(--peach-t0);5885  font-weight: 700;5886}58875888.peach-adopt-pair-actions {5889  margin-top: 9px;5890}58915892.peach-adopt-pair-actions > button {5893  width: 100%;5894}58955896.peach-adopt-paired-status {5897  display: inline-flex;5898  align-items: center;5899  gap: 8px;5900  margin: 22px auto 18px;5901  padding: 9px 13px;5902  border: 1px solid color-mix(in srgb, var(--peach-accent) 30%, transparent);5903  border-radius: 999px;5904  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5905  color: color-mix(in srgb, var(--peach-accent) 78%, var(--peach-t0));5906  font-family: var(--peach-mono, "IBM Plex Mono", monospace);5907  font-size: 0.66rem;5908  font-weight: 700;5909  letter-spacing: 0.04em;5910}59115912.peach-adopt-paired-status span {5913  width: 7px;5914  height: 7px;5915  border-radius: 50%;5916  background: var(--peach-accent);5917  box-shadow: 0 0 8px color-mix(in srgb, var(--peach-accent) 68%, transparent);5918}59195920@media (prefers-reduced-motion: reduce) {5921  .peach-adopt-connection::after {5922    animation: none;5923  }5924}59255926@keyframes peach-onboard-enter {5927  from { opacity: 0; transform: translateY(20px); }5928  to   { opacity: 1; transform: translateY(0); }5929}59305931@keyframes peach-onboard-exit {5932  from { opacity: 1; }5933  to   { opacity: 0; }5934}59355936@keyframes peach-card-in {5937  from { opacity: 0; transform: translateX(12px); }5938  to   { opacity: 1; transform: translateX(0); }5939}59405941@keyframes peach-card-out {5942  from { opacity: 1; transform: translateX(0); }5943  to   { opacity: 0; transform: translateX(-12px); }5944}59455946/* ─── New vault screen — matched to onboarding card language ─────────── */59475948/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage5949   rule (same element) without loosening the unlock/restore screens. The5950   create-vault screen is the only vault-stage view tall enough to overflow5951   the 520px popup, so its spacing is tuned to fit header → card → restore →5952   recovery warning with nothing clipped. */5953.peach-screen.peach-newvault {5954  position: relative;5955  display: flex;5956  flex-direction: column;5957  gap: 12px;5958  padding: 16px 16px 12px;5959  overflow: hidden;5960}59615962/* Suppress the warm-blob ambient art inherited from .lock-screen — the5963   new vault card now carries the visual weight. */5964.peach-newvault::before {5965  content: none;5966}59675968/* Wordmark sits in the exact same spot as on the onboarding cards; the5969   back button takes the right side so the wordmark never shifts. */5970.peach-newvault-header {5971  position: relative;5972  z-index: 2;5973  display: flex;5974  align-items: center;5975  justify-content: space-between;5976  gap: 10px;5977  margin-bottom: 2px;5978}59795980.peach-newvault-back {5981  display: inline-flex;5982  align-items: center;5983  gap: 4px;5984  background: transparent;5985  border: none;5986  color: var(--peach-t2);5987  font-family: "IBM Plex Mono", monospace;5988  font-size: 0.625rem;5989  letter-spacing: 0.06em;5990  cursor: pointer;5991  padding: 4px 6px;5992  border-radius: 6px;5993  transition: color 120ms ease, background 120ms ease;5994}59955996.peach-newvault-back:hover {5997  color: var(--peach-t0);5998  background: rgba(240, 232, 216, 0.04);5999}60006001.peach-newvault-mark {6002  position: absolute;6003  right: -12px;6004  top: 44px;6005  width: 110px;6006  height: 110px;6007  pointer-events: none;6008  opacity: 0.10;6009  filter: saturate(0.9);6010  z-index: 0;6011}6012.peach-newvault-mark-art {6013  width: 100%;6014  height: 100%;6015}6016.peach-newvault-mark-art path:nth-child(1) {6017  fill: rgba(123, 144, 96, 0.88);6018}6019.peach-newvault-mark-art path:nth-child(2) {6020  stroke: rgba(94, 122, 66, 0.95);6021}60226023.peach-newvault-card {6024  position: relative;6025  z-index: 1;6026  flex: 1;6027  display: flex;6028  flex-direction: column;6029  gap: 8px;6030  padding: 16px 20px 14px;6031  border-radius: 16px;6032  border: 1px solid var(--peach-t3);6033  background:6034    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6035  backdrop-filter: blur(3px);6036  -webkit-backdrop-filter: blur(3px);6037  box-shadow:6038    inset 0 1px 0 rgba(240, 232, 216, 0.04),6039    0 12px 28px rgba(0, 0, 0, 0.12);6040  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6041}60426043/* Create-vault card only (the restore card lays out differently — see6044   .peach-restore-card). The warning hugs the glass edge with a small6045   margin; leftover height distributes between elements so they breathe6046   instead of leaving one dead gap. Scroll stays available as a fallback6047   on shorter viewports. */6048.peach-newvault-card:not(.peach-restore-card) {6049  min-height: 0;6050  gap: 10px;6051  padding: 14px 22px 16px;6052  justify-content: space-between;6053  overflow-y: auto;6054  scrollbar-width: none;6055}60566057.peach-newvault-card:not(.peach-restore-card)::-webkit-scrollbar {6058  display: none;6059}60606061.peach-newvault-headline {6062  margin: 0;6063  font-family: var(--font-display);6064  font-style: italic;6065  font-weight: 400;6066  font-size: 24px;6067  line-height: 1.05;6068  color: var(--peach-t0);6069  white-space: pre-line;6070}60716072.peach-newvault-divider {6073  margin: 2px 0 4px;6074  border: 0;6075  border-top: 1px solid var(--peach-t3);6076  width: 100%;6077}60786079.peach-newvault-field {6080  display: flex;6081  flex-direction: column;6082  gap: 4px;6083}60846085.peach-newvault-label-row {6086  display: flex;6087  align-items: center;6088  justify-content: space-between;6089}60906091/* Monospace input scaled to the card. Replaces the 22px unlock-input6092   so the placeholder no longer overflows and the field reads as part6093   of the same surface as the body copy. */6094.peach-newvault-input {6095  font-size: 0.875rem;6096  letter-spacing: 0.18em;6097  padding: 8px 0;6098}6099.peach-newvault-input::placeholder {6100  letter-spacing: 0.18em;6101  color: var(--peach-t2);6102}61036104.peach-newvault-hint {6105  margin: 2px 0 0;6106  font-family: "IBM Plex Mono", monospace;6107  font-size: 0.625rem;6108  color: var(--peach-t2);6109  letter-spacing: 0.04em;6110}61116112.peach-newvault-submit {6113  margin-top: 4px;6114}61156116.peach-newvault-warning {6117  display: flex;6118  align-items: flex-start;6119  gap: 8px;6120  margin: 0;6121  padding-top: 8px;6122  border-top: 1px dashed var(--peach-t3);6123  font-size: 0.75rem;6124  line-height: 1.45;6125  color: var(--peach-t1);6126}61276128.peach-newvault-warning-icon {6129  color: var(--peach-accent);6130  font-size: 0.8125rem;6131  line-height: 1.4;6132  flex: 0 0 auto;6133}61346135/* Settings body — warm accent gradient gives the glass something to blur against */6136.peach-settings-body {6137  background:6138    radial-gradient(6139      ellipse at 30% 20%,6140      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6141      transparent 60%6142    );6143}61446145/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6146/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6147 * Two severity levels: "warn" for actions that are dangerous-but-recoverable6148 * (replacing the vault from a backup file) and "hazard" for actions that6149 * are absolutely irreversible (Panic). Both use the same card scaffold so6150 * they read as a pair, but the colour family signals the severity at a6151 * glance — yellow for caution, red for don't.6152 */6153.peach-danger-card {6154  --danger-tint: 235, 158, 52; /* amber */6155  display: flex;6156  flex-direction: column;6157  gap: 8px;6158  padding: 14px;6159  margin-top: 10px;6160  border-radius: 12px;6161  border: 1px solid rgba(var(--danger-tint), 0.32);6162  background:6163    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),6164    rgba(var(--danger-tint), 0.04);6165  box-shadow:6166    inset 0 1px 0 rgba(var(--danger-tint), 0.08),6167    0 0 24px rgba(var(--danger-tint), 0.04);6168  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;6169}61706171.peach-danger-card:hover {6172  border-color: rgba(var(--danger-tint), 0.55);6173  box-shadow:6174    inset 0 1px 0 rgba(var(--danger-tint), 0.12),6175    0 0 36px rgba(var(--danger-tint), 0.10);6176}61776178.peach-danger-card--hazard {6179  --danger-tint: 220, 38, 38; /* red */6180}61816182.peach-danger-card-head {6183  display: flex;6184  align-items: center;6185  gap: 10px;6186}61876188.peach-danger-card-glyph {6189  width: 28px;6190  height: 28px;6191  flex-shrink: 0;6192  display: flex;6193  align-items: center;6194  justify-content: center;6195  border-radius: 8px;6196  background: rgba(var(--danger-tint), 0.12);6197  color: rgba(var(--danger-tint), 0.95);6198  font-size: 1rem;6199  line-height: 1;6200}62016202.peach-danger-card-title {6203  margin: 0;6204  font-size: 0.8125rem;6205  font-weight: 600;6206  color: rgba(var(--danger-tint), 0.92);6207  letter-spacing: 0.01em;6208}62096210.peach-danger-card-copy {6211  margin: 0;6212  font-size: 0.6875rem;6213  line-height: 1.5;6214  color: var(--peach-t2);6215}62166217.peach-danger-card-button {6218  width: 100%;6219  padding: 9px;6220  margin-top: 4px;6221  background: transparent;6222  border: 1px solid rgba(var(--danger-tint), 0.45);6223  border-radius: 8px;6224  color: rgba(var(--danger-tint), 0.9);6225  font-size: 0.75rem;6226  font-weight: 500;6227  letter-spacing: 0.02em;6228  cursor: pointer;6229  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6230}62316232.peach-danger-card-button:hover {6233  background: rgba(var(--danger-tint), 0.10);6234  border-color: rgba(var(--danger-tint), 0.75);6235  color: rgb(var(--danger-tint));6236}62376238.peach-adoption-sas {6239  margin: 16px auto 0;6240  padding: 12px 16px;6241  border: 1px solid color-mix(in srgb, var(--peach-t0) 18%, transparent);6242  border-radius: 10px;6243  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);6244  color: var(--peach-t0);6245  text-align: center;6246}62476248.peach-adoption-sas strong {6249  font-size: 1.65rem;6250  font-variant-numeric: tabular-nums;6251  letter-spacing: 0.18em;6252  white-space: nowrap;6253}62546255/* ── Panic flow (three-step destruction) ───────────────────────────────── */6256.peach-panic {6257  display: flex;6258  flex-direction: column;6259  flex: 1;6260  min-height: 0;6261  padding: 28px 20px 20px;6262  gap: 18px;6263  overflow-y: auto;6264  scrollbar-width: none;6265  -ms-overflow-style: none;6266}62676268.peach-panic::-webkit-scrollbar { display: none; }62696270.peach-panic-step2 {6271  background: rgba(220, 38, 38, 0.04);6272}62736274.peach-panic-step3 {6275  position: relative;6276  background: #0f0505;6277  color: #ffffff;6278  overflow: hidden;6279}62806281.peach-panic-rune-bg {6282  position: absolute;6283  inset: 0;6284  opacity: 0.22;6285  pointer-events: none;6286  overflow: hidden;6287}62886289.peach-panic-rune-bg canvas {6290  width: 100% !important;6291  height: 100% !important;6292}62936294.peach-panic-icon {6295  font-size: 32px;6296  color: rgb(220, 38, 38);6297  line-height: 1;6298}62996300.peach-panic-title {6301  margin: 0;6302  font-size: 18px;6303  font-weight: 500;6304  color: var(--peach-t1);6305}63066307.peach-panic-title--severe {6308  font-size: 20px;6309  font-weight: 700;6310  color: rgb(220, 38, 38);6311}63126313.peach-panic-body {6314  margin: 0;6315  font-size: 0.8125rem;6316  line-height: 1.55;6317  color: var(--peach-t2);6318}63196320.peach-panic-body--severe {6321  color: rgba(220, 38, 38, 0.85);6322}63236324.peach-panic-body--final {6325  font-size: 1rem;6326  font-weight: 700;6327  color: rgb(255, 80, 80);6328  line-height: 1.4;6329}63306331.peach-panic-body--final-intro {6332  font-size: 1rem;6333  color: #ffffff;6334  font-weight: 400;6335}63366337.peach-panic-divider {6338  height: 1px;6339  background: rgba(255, 255, 255, 0.08);6340  margin: 4px 0;6341}63426343.peach-panic-confirm-input {6344  width: 100%;6345  padding: 10px 12px;6346  background: rgba(255, 255, 255, 0.02);6347  border: 1px solid rgba(220, 38, 38, 0.4);6348  border-radius: 8px;6349  color: var(--peach-t1);6350  font-family: "IBM Plex Mono", monospace;6351  font-size: 0.875rem;6352  letter-spacing: 0.12em;6353  text-transform: uppercase;6354}63556356.peach-panic-confirm-input:focus {6357  outline: none;6358  border-color: rgb(220, 38, 38);6359}63606361.peach-panic-confirm-input--match {6362  border-color: rgb(220, 38, 38);6363  color: rgb(220, 38, 38);6364}63656366.peach-panic-confirm-label {6367  font-size: 0.6875rem;6368  color: var(--peach-t2);6369  margin: 0 0 -8px;6370  letter-spacing: 0.06em;6371}63726373.peach-panic-actions {6374  display: flex;6375  flex-direction: column;6376  gap: 10px;6377  margin-top: auto;6378}63796380.peach-panic-button {6381  width: 100%;6382  padding: 12px;6383  border-radius: 8px;6384  font-size: 0.8125rem;6385  cursor: pointer;6386  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6387}63886389.peach-panic-button--primary {6390  background: var(--peach-accent);6391  border: 1px solid var(--peach-accent);6392  color: #ffffff;6393  font-weight: 600;6394}63956396.peach-panic-button--primary:hover {6397  background: color-mix(in srgb, var(--peach-accent) 88%, white);6398}63996400.peach-panic-button--danger {6401  background: rgb(220, 38, 38);6402  border: 1px solid rgb(220, 38, 38);6403  color: #ffffff;6404  font-weight: 600;6405}64066407.peach-panic-button--danger:disabled {6408  opacity: 0.35;6409  cursor: not-allowed;6410}64116412.peach-panic-button--ghost {6413  background: transparent;6414  border: 1px solid rgba(255, 255, 255, 0.18);6415  color: var(--peach-t2);6416}64176418.peach-panic-button--ghost:hover {6419  border-color: rgba(255, 255, 255, 0.32);6420  color: var(--peach-t1);6421}64226423.peach-panic-link {6424  background: transparent;6425  border: none;6426  padding: 4px 0;6427  color: rgba(220, 38, 38, 0.65);6428  font-size: 0.75rem;6429  cursor: pointer;6430  text-align: left;6431  text-decoration: underline;6432  text-underline-offset: 3px;6433}64346435.peach-panic-link:hover {6436  color: rgb(220, 38, 38);6437}64386439.peach-panic-bar {6440  background: rgb(220, 38, 38);6441  padding: 16px 20px;6442  margin: -28px -20px 0;6443  text-align: center;6444  font-size: 0.8125rem;6445  font-weight: 700;6446  letter-spacing: 0.12em;6447  color: #ffffff;6448}64496450.peach-panic-final-button {6451  width: 100%;6452  padding: 14px;6453  background: rgb(220, 38, 38);6454  border: none;6455  border-radius: 8px;6456  color: #ffffff;6457  font-size: 0.875rem;6458  font-weight: 700;6459  letter-spacing: 0.08em;6460  text-transform: uppercase;6461  cursor: pointer;6462  animation: peach-panic-pulse 2s ease-in-out infinite;6463}64646465.peach-settings-license {6466  margin-top: 10px;6467  padding-top: 10px;6468  border-top: 1px solid var(--peach-t3);6469}64706471.peach-settings-label {6472  font-size: 0.625rem;6473  letter-spacing: 0.08em;6474  color: var(--peach-t2);6475  display: block;6476  margin-bottom: 6px;6477}64786479.peach-settings-license-row {6480  display: flex;6481  align-items: center;6482  justify-content: space-between;6483  gap: 8px;6484}64856486.peach-settings-license-key {6487  font-family: 'IBM Plex Mono', monospace;6488  font-size: 0.75rem;6489  color: var(--peach-t0);6490  letter-spacing: 0.04em;6491  word-break: break-all;6492  flex: 1;6493  min-width: 0;6494}64956496.peach-settings-license-key--masked {6497  font-family: 'IBM Plex Mono', monospace;6498  font-size: 0.6rem;6499  color: var(--peach-t1);6500  letter-spacing: 0.18em;6501  user-select: none;6502}65036504.peach-settings-license-actions {6505  display: flex;6506  align-items: center;6507  gap: 2px;6508  flex-shrink: 0;6509}65106511.peach-settings-license-copy {6512  font-size: 0.6875rem;6513  color: var(--peach-accent);6514  background: transparent;6515  border: none;6516  cursor: pointer;6517  padding: 4px 8px;6518  border-radius: 4px;6519  flex-shrink: 0;6520  transition: opacity 150ms ease;6521}65226523.peach-settings-license-copy:hover {6524  opacity: 0.75;6525}65266527.peach-settings-license-toggle {6528  display: flex;6529  align-items: center;6530  justify-content: center;6531  background: transparent;6532  border: none;6533  cursor: pointer;6534  padding: 4px 6px;6535  border-radius: 4px;6536  color: var(--peach-t2);6537  transition: color 150ms ease;6538}65396540.peach-settings-license-toggle:hover {6541  color: var(--peach-t1);6542}65436544@keyframes peach-panic-pulse {6545  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }6546  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }6547}65486549[data-motion="reduce"] .peach-panic-final-button {6550  animation: none;6551}65526553/* Vault History — Settings → Vault sub-view */65546555.peach-history-list {6556  border: 1px solid var(--peach-border);6557  border-radius: 8px;6558  overflow: hidden;6559  margin: 8px 0 4px;6560}65616562.peach-history-row {6563  display: flex;6564  align-items: center;6565  justify-content: space-between;6566  padding: 9px 12px;6567  gap: 10px;6568  border-bottom: 1px solid var(--peach-border);6569}65706571.peach-history-row:last-child {6572  border-bottom: none;6573}65746575.peach-history-meta {6576  display: flex;6577  flex-direction: column;6578  gap: 2px;6579  min-width: 0;6580  flex: 1;6581}65826583.peach-history-time {6584  font-size: 0.75rem;6585  font-family: 'IBM Plex Mono', ui-monospace, monospace;6586  color: var(--peach-t0);6587  white-space: nowrap;6588  overflow: hidden;6589  text-overflow: ellipsis;6590}65916592.peach-history-sub {6593  font-size: 0.625rem;6594  color: var(--peach-t2);6595  letter-spacing: 0.06em;6596  text-transform: uppercase;6597  white-space: nowrap;6598  overflow: hidden;6599  text-overflow: ellipsis;6600}66016602.peach-history-btn {6603  flex-shrink: 0;6604  white-space: nowrap;6605  min-width: 56px;6606  text-align: center;6607}66086609.peach-history-btn.is-busy {6610  opacity: 0.65;6611}66126613.peach-history-footer {6614  font-size: 0.625rem;6615  color: var(--peach-t3);6616  letter-spacing: 0.05em;6617  text-align: right;6618  margin: 0;6619  padding: 2px 0 0;6620}66216622/* ── Context menu + swipe-copy flash ─────────────────────── */6623.peach-context-menu-backdrop {6624  position: fixed;6625  inset: 0;6626  background: rgba(0, 0, 0, 0.45);6627  z-index: 100;6628  display: flex;6629  align-items: flex-end;6630  justify-content: center;6631  animation: peach-ctx-fade 140ms ease both;6632}6633.peach-context-menu {6634  width: min(360px, calc(100vw - 24px));6635  margin-bottom: max(env(safe-area-inset-bottom), 12px);6636  background: var(--peach-bg);6637  border: 1px solid var(--peach-t3);6638  border-radius: 14px;6639  padding: 6px;6640  display: flex;6641  flex-direction: column;6642  gap: 2px;6643  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);6644  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6645}6646@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }6647@keyframes peach-ctx-rise {6648  from { transform: translateY(16px); opacity: 0; }6649  to   { transform: translateY(0);    opacity: 1; }6650}6651.peach-context-menu-item {6652  background: transparent;6653  color: var(--peach-t0);6654  border: 0;6655  border-radius: 10px;6656  padding: 12px 14px;6657  text-align: left;6658  font: inherit;6659  cursor: pointer;6660}6661.peach-context-menu-item:hover,6662.peach-context-menu-item:focus-visible {6663  background: var(--peach-t3);6664}6665.peach-context-menu-item--danger {6666  color: var(--peach-health-bad, #d96868);6667}6668.peach-context-menu-item--cancel {6669  color: var(--peach-t2);6670  margin-top: 4px;6671  border-top: 1px solid var(--peach-t3);6672  border-radius: 0 0 10px 10px;6673}66746675/* Swipe-to-copy flash */6676.peach-entry-row.is-copy-flash {6677  animation: peach-copy-flash 600ms ease both;6678}6679@keyframes peach-copy-flash {6680  0%   { background: transparent; }6681  20%  { background: rgba(217, 153, 51, 0.32); }6682  100% { background: transparent; }6683}66846685html { font-size: 16px; }66866687/* ── Recovery word entry ─────────────────────────────────────────── */6688.peach-lock-recover-link {6689  display: block;6690  width: 100%;6691  margin-top: 12px;6692  background: none;6693  border: none;6694  font-family: "IBM Plex Mono", monospace;6695  font-size: 0.625rem;6696  letter-spacing: 0.06em;6697  color: var(--peach-t2);6698  cursor: pointer;6699  text-align: center;6700  padding: 4px;6701  transition: color 120ms ease;6702}6703.peach-lock-recover-link:hover {6704  color: var(--peach-t0);6705}67066707.lock-screen--recovery {6708  display: flex;6709  flex-direction: column;6710  align-items: stretch;6711  padding: 12px 20px 24px;6712  overflow: hidden;6713}67146715.peach-recovery-nav {6716  display: flex;6717  align-items: center;6718  position: relative;6719  z-index: 1;6720  margin-bottom: 4px;6721}67226723/* Mask runes to the top decorative band only — keep inputs and the6724   bottom CTA button clear. The bottom of the popup is reserved for6725   submit buttons; rendering runes there overlaps the button glyph. */6726.peach-rune-background--recovery {6727  -webkit-mask-image: linear-gradient(6728    to bottom,6729    black 0px, black 85px,6730    transparent 110px,6731    transparent 100%6732  );6733  mask-image: linear-gradient(6734    to bottom,6735    black 0px, black 85px,6736    transparent 110px,6737    transparent 100%6738  );6739}67406741.peach-recovery-header {6742  text-align: center;6743  margin-bottom: 0;6744  margin-top: 2px;6745}6746.peach-recovery-header .peach-onboarding-headline {6747  font-size: 1.25rem;6748  font-weight: 300;6749  letter-spacing: 0.02em;6750  /* max-width:252px inherited above is narrower than the section — without6751     auto margins the text box sits left-of-center. */6752  margin: 0 auto 4px;6753}6754.peach-recovery-header .peach-hint {6755  font-family: "IBM Plex Mono", monospace;6756  font-size: 0.625rem;6757  color: var(--peach-t1);6758  letter-spacing: 0.04em;6759  margin: 0;6760}6761.peach-recovery-header .peach-hint--warning {6762  color: var(--peach-accent);6763}67646765/* 12-word grid: 2 columns × 6 rows */6766.peach-recovery-grid {6767  display: grid;6768  grid-template-columns: repeat(2, 1fr);6769  gap: 12px 20px;6770  width: 100%;6771  margin-bottom: 0;6772}67736774.peach-recovery-word-slot {6775  display: flex;6776  align-items: center;6777  gap: 6px;6778  min-width: 0;6779}67806781.peach-recovery-word-index {6782  font-family: "IBM Plex Mono", monospace;6783  font-size: 0.5rem;6784  color: rgba(255, 255, 255, 0.35);6785  min-width: 14px;6786  flex-shrink: 0;6787  text-align: right;6788  letter-spacing: 0.04em;6789}67906791.peach-recovery-word-input {6792  flex: 1;6793  min-width: 0;6794  background: transparent;6795  border: none;6796  border-bottom: 1px solid rgba(255, 255, 255, 0.22);6797  color: var(--peach-t0);6798  font-family: "IBM Plex Mono", monospace;6799  font-size: 0.6875rem;6800  letter-spacing: 0.06em;6801  padding: 5px 2px 4px;6802  outline: none;6803  text-transform: lowercase;6804  transition: border-color 120ms ease;6805}6806.peach-recovery-word-input::placeholder {6807  color: rgba(255, 255, 255, 0.18);6808}6809.peach-recovery-word-input:focus {6810  border-bottom-color: var(--peach-accent);6811}68126813.peach-recovery-submit {6814  width: 100%;6815  margin-top: auto;6816}68176818.peach-recovery-new-password-form {6819  width: 100%;6820  display: flex;6821  flex-direction: column;6822  gap: 16px;6823  margin-bottom: 8px;6824}6825.peach-recovery-new-password-form .peach-newvault-field {6826  display: flex;6827  flex-direction: column;6828  gap: 4px;6829}68306831/* ── Recovery words display (post-create) ──────────────────────────6832   Condensed so word list + confirmation fit the 520px popup with no6833   scroll — the confirm button must never be clipped. */6834.lock-screen--recovery-display {6835  display: flex;6836  flex-direction: column;6837  align-items: stretch;6838  padding: 10px 16px 12px;6839  gap: 8px;6840  min-height: 0;6841  overflow-y: auto;6842}68436844.peach-recovery-words-display {6845  width: 100%;6846  margin-bottom: 0;6847  border: 1px solid var(--peach-t3);6848  border-radius: 8px;6849  padding: 10px 14px;6850  background: rgba(245, 240, 234, 0.04);6851}68526853.peach-recovery-words-label {6854  font-family: "IBM Plex Mono", monospace;6855  font-size: 0.5rem;6856  letter-spacing: 0.08em;6857  color: var(--peach-t2);6858  text-transform: uppercase;6859  margin-bottom: 8px;6860  text-align: center;6861}68626863.peach-recovery-word-list {6864  list-style: none;6865  margin: 0;6866  padding: 0;6867  display: grid;6868  grid-template-columns: repeat(2, 1fr);6869  gap: 5px 16px;6870}68716872.peach-recovery-word-item {6873  display: flex;6874  align-items: baseline;6875  justify-content: center;6876  gap: 5px;6877}68786879.peach-recovery-word-num {6880  font-family: "IBM Plex Mono", monospace;6881  font-size: 0.5rem;6882  color: var(--peach-accent);6883  width: 14px;6884  flex: 0 0 14px;6885  text-align: right;6886  letter-spacing: 0.04em;6887  font-variant-numeric: tabular-nums;6888}68896890.peach-recovery-download-btn {6891  display: block;6892  margin: 8px auto 0;6893  padding: 4px 10px;6894  background: transparent;6895  border: 1px solid var(--peach-border);6896  border-radius: 6px;6897  color: var(--peach-t2);6898  font-family: "IBM Plex Mono", monospace;6899  font-size: 0.5625rem;6900  letter-spacing: 0.06em;6901  text-transform: lowercase;6902  cursor: pointer;6903  transition: border-color 0.15s, color 0.15s;6904}69056906.peach-recovery-download-btn:hover {6907  border-color: var(--peach-accent);6908  color: var(--peach-t0);6909}69106911.peach-recovery-word-text {6912  font-family: "IBM Plex Mono", monospace;6913  font-size: 0.6875rem;6914  letter-spacing: 0.06em;6915  color: var(--peach-t0);6916  text-transform: lowercase;6917}69186919.peach-hint--warning {6920  color: var(--peach-accent);6921  font-style: italic;6922}6923.peach-hint--success {6924  color: var(--peach-t2);6925  font-family: "IBM Plex Mono", monospace;6926  font-size: 0.625rem;6927  letter-spacing: 0.06em;6928}69296930/* Confirmation step */6931.peach-recovery-confirm {6932  width: 100%;6933  flex: 1;6934  display: flex;6935  flex-direction: column;6936}6937.peach-recovery-confirm-label {6938  font-family: "IBM Plex Mono", monospace;6939  font-size: 0.5625rem;6940  letter-spacing: 0.04em;6941  color: var(--peach-t1);6942  text-align: center;6943  margin: 0 0 8px;6944}6945.peach-recovery-confirm-fields {6946  flex: 1;6947  display: flex;6948  flex-direction: column;6949  /* Spread the three inputs through the available height instead of pooling6950     one dead gap under them. */6951  justify-content: space-evenly;6952  gap: 8px;6953  margin-bottom: 0;6954}6955.peach-recovery-confirm-field {6956  display: flex;6957  align-items: center;6958  gap: 8px;6959}6960.peach-recovery-confirm-num {6961  font-family: "IBM Plex Mono", monospace;6962  font-size: 0.5rem;6963  color: var(--peach-accent);6964  min-width: 44px;6965  letter-spacing: 0.04em;6966}6967.peach-recovery-confirm-input {6968  flex: 1;6969  background: transparent;6970  border: none;6971  border-bottom: 1px solid var(--peach-t3);6972  color: var(--peach-t0);6973  font-family: "IBM Plex Mono", monospace;6974  font-size: 0.6875rem;6975  letter-spacing: 0.06em;6976  padding: 4px 2px 3px;6977  outline: none;6978  text-transform: lowercase;6979  transition: border-color 120ms ease;6980}6981.peach-recovery-confirm-input:focus {6982  border-bottom-color: var(--peach-accent);6983}6984.peach-recovery-confirm-input:disabled {6985  opacity: 0.4;6986  cursor: not-allowed;6987}6988.peach-recovery-confirm-btn {6989  width: 100%;6990  margin-top: 12px;6991}69926993/* ============================================================6994   Sync info sheet6995   ============================================================ */69966997.peach-btn--full {6998  width: 100%;6999}70007001/* ── Notes Mode ── */70027003/* Overlay that crossfades over the vault */7004.peach-notes-overlay {7005  position: fixed;7006  inset: 0;7007  z-index: 90;7008  opacity: 0;7009  pointer-events: none;7010  animation: peach-mode-in 220ms ease-in forwards;7011}70127013.peach-notes-overlay.is-visible {7014  opacity: 1;7015  pointer-events: auto;7016}70177018@keyframes peach-mode-in {7019  from { opacity: 0; }7020  to   { opacity: 1; }7021}70227023/* Top-level notes surface */7024.peach-notes-mode {7025  position: absolute;7026  inset: 0;7027  background:7028    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 5%, transparent) 0%, transparent 62%),7029    var(--peach-bg);7030  display: flex;7031  flex-direction: column;7032}70337034/* TOC wrapper */7035.peach-notes-toc-wrapper {7036  position: absolute;7037  inset: 0;7038  z-index: 1;7039  opacity: 1;7040  pointer-events: auto;7041  transition: opacity 200ms ease;7042}70437044.peach-notes-toc-wrapper.is-hidden {7045  opacity: 0;7046  pointer-events: none;7047}70487049/* Editor wrapper */7050.peach-notes-editor-wrapper {7051  position: absolute;7052  inset: 0;7053  z-index: 2;7054  opacity: 0;7055  pointer-events: none;7056  transition: opacity 200ms ease;7057}70587059.peach-notes-editor-wrapper.is-visible {7060  opacity: 1;7061  pointer-events: auto;7062}70637064/* TOC inner */7065.peach-notes-toc {7066  position: relative;7067  display: flex;7068  flex-direction: column;7069  height: 100%;7070  padding-top: env(safe-area-inset-top, 0px);7071  padding-bottom: env(safe-area-inset-bottom, 0px);7072}70737074/* Shared header */7075.peach-notes-header {7076  display: flex;7077  align-items: center;7078  padding: 12px 16px;7079  gap: 12px;7080  flex-shrink: 0;7081  min-height: 52px;7082  position: relative;7083  z-index: 2;7084}70857086.peach-notes-back {7087  font-size: 22px;7088  color: var(--peach-t2);7089  background: none;7090  border: none;7091  padding: 4px;7092  cursor: pointer;7093  line-height: 1;7094  flex-shrink: 0;7095  transition: color 150ms ease;7096  -webkit-tap-highlight-color: transparent;7097}70987099.peach-notes-back:active { color: var(--peach-t0); }71007101.peach-notes-header-title {7102  flex: 1;7103  font-family: 'Cormorant Garamond', serif;7104  font-style: italic;7105  font-size: 22px;7106  color: var(--peach-t0);7107  text-align: center;7108}71097110.peach-notes-header--editor {7111  display: grid;7112  grid-template-columns: 36px minmax(0, 1fr) 36px;7113}71147115.peach-notes-header--editor .peach-notes-back,7116.peach-notes-header--editor .peach-notes-header-actions {7117  width: 36px;7118}71197120.peach-notes-header--editor .peach-notes-header-title {7121  cursor: pointer;7122}71237124.peach-notes-header-actions {7125  display: flex;7126  gap: 8px;7127  flex-shrink: 0;7128}71297130.peach-notes-header-btn {7131  width: 36px;7132  height: 36px;7133  display: flex;7134  align-items: center;7135  justify-content: center;7136  background: none;7137  border: none;7138  color: var(--peach-t2);7139  cursor: pointer;7140  border-radius: 8px;7141  font-size: 16px;7142  transition: color 150ms ease, background 150ms ease;7143  -webkit-tap-highlight-color: transparent;7144}71457146.peach-notes-header-btn:active {7147  background: rgba(255,255,255,0.06);7148  color: var(--peach-t0);7149}71507151/* The header + glyph is larger than the search svg so the two right-side7152 * buttons feel visually balanced. The base .peach-notes-header-btn caps font7153 * at 16px which would render the + too small. */7154.peach-notes-new-btn-icon {7155  font-size: 22px;7156  font-weight: 300;7157  line-height: 1;7158}71597160.peach-notes-search-btn svg {7161  display: block;7162  transform: translate(0.5px, 2.5px);7163}71647165/* Inline search bar */7166.peach-notes-search-input {7167  flex: 1;7168  background: none;7169  border: none;7170  outline: none;7171  font-family: 'IBM Plex Mono', monospace;7172  font-size: 13px;7173  color: var(--peach-t0);7174  padding: 4px 0;7175  letter-spacing: 0.02em;7176}71777178.peach-notes-search-input::placeholder {7179  color: var(--peach-t3);7180}71817182/* TOC list */7183.peach-notes-list-container {7184  flex: 1;7185  overflow-y: auto;7186  overflow-x: hidden;7187  scrollbar-width: none;7188  -webkit-overflow-scrolling: touch;7189  overscroll-behavior: contain;7190  position: relative;7191  z-index: 1;7192}71937194.peach-notes-list-container::-webkit-scrollbar { display: none; }71957196/* Note row */7197.peach-note-row {7198  position: relative;7199  display: grid;7200  grid-template-columns: 44px 8px 1fr 8px auto;7201  align-items: center;7202  min-height: 72px;7203  padding: 16px 20px;7204  border-bottom: 0.5px solid var(--peach-border);7205  cursor: pointer;7206  overflow: hidden;7207  touch-action: pan-y;7208  user-select: none;7209  -webkit-user-select: none;7210  -webkit-tap-highlight-color: transparent;7211}72127213.peach-note-row:first-child {7214  border-top: 0.5px solid var(--peach-border);7215}72167217.peach-note-row:active {7218  background: rgba(255,255,255,0.02);7219}72207221.peach-note-numeral {7222  font-family: 'Cormorant Garamond', serif;7223  font-style: italic;7224  font-size: 15px;7225  color: var(--peach-accent);7226  text-align: right;7227  line-height: 1;7228  flex-shrink: 0;7229}72307231.peach-note-title-gap { /* grid spacer */ }72327233.peach-note-title {7234  font-family: 'Cormorant Garamond', serif;7235  font-style: italic;7236  font-size: 18px;7237  color: var(--peach-t0);7238  line-height: 1.3;7239  min-width: 0;7240  overflow-wrap: break-word;7241}72427243.peach-note-title-match {7244  color: var(--peach-accent);7245}72467247.peach-note-date {7248  font-family: 'IBM Plex Mono', monospace;7249  font-size: 11px;7250  color: var(--peach-t1);7251  opacity: 0.62;7252  white-space: nowrap;7253  text-align: right;7254  flex-shrink: 0;7255  grid-column: 5;7256}72577258/* Swipe underlays */7259.peach-note-row-underlay {7260  position: absolute;7261  inset: 0;7262  display: flex;7263  align-items: center;7264  padding: 0 24px;7265  font-family: 'IBM Plex Mono', monospace;7266  font-size: 11px;7267  letter-spacing: 0.1em;7268  pointer-events: none;7269  z-index: 0;7270}72717272.peach-note-row-underlay--delete {7273  background: #8B2020;7274  color: rgba(255,255,255,0.9);7275  justify-content: flex-end;7276}72777278.peach-note-row-underlay--archive {7279  background: var(--peach-accent);7280  color: #0C0A06;7281  justify-content: flex-start;7282}72837284/* Delete confirm strip */7285.peach-note-delete-confirm {7286  position: absolute;7287  inset: 0;7288  background: var(--peach-bg);7289  display: flex;7290  align-items: center;7291  gap: 12px;7292  padding: 0 20px;7293  font-family: 'IBM Plex Mono', monospace;7294  font-size: 11px;7295  color: var(--peach-t1);7296  letter-spacing: 0.04em;7297  animation: peach-delete-confirm-in 150ms ease both;7298  z-index: 10;7299}73007301@keyframes peach-delete-confirm-in {7302  from { opacity: 0; }7303  to   { opacity: 1; }7304}73057306.peach-note-delete-confirm-btn {7307  background: #8B2020;7308  color: rgba(255,255,255,0.9);7309  border: none;7310  border-radius: 6px;7311  padding: 4px 10px;7312  font-family: 'IBM Plex Mono', monospace;7313  font-size: 10px;7314  cursor: pointer;7315  letter-spacing: 0.06em;7316}73177318.peach-note-delete-cancel-btn {7319  background: none;7320  border: none;7321  color: var(--peach-t3);7322  font-family: 'IBM Plex Mono', monospace;7323  font-size: 10px;7324  cursor: pointer;7325  letter-spacing: 0.06em;7326  padding: 4px 6px;7327}73287329/* Empty state */7330.peach-notes-empty {7331  display: flex;7332  flex-direction: column;7333  align-items: center;7334  justify-content: center;7335  flex: 1;7336  padding: 48px 32px;7337  gap: 16px;7338}73397340.peach-notes-empty-text {7341  font-family: 'Cormorant Garamond', serif;7342  font-style: italic;7343  font-size: 20px;7344  color: var(--peach-t3);7345  text-align: center;7346  margin: 0;7347  line-height: 1.4;7348  white-space: pre-line;7349}73507351/* ── Editor surface ── */73527353.peach-note-editor-surface {7354  position: absolute;7355  inset: 0;7356  background:7357    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 5%, transparent) 0%, transparent 62%),7358    var(--peach-bg);7359  display: flex;7360  flex-direction: column;7361  padding-top: env(safe-area-inset-top, 0px);7362}73637364.peach-note-editor-scroll {7365  flex: 1;7366  overflow-y: auto;7367  overflow-x: hidden;7368  scrollbar-width: none;7369  -webkit-overflow-scrolling: touch;7370  padding: 0 20px 120px;7371  position: relative;7372  z-index: 1;7373}73747375.peach-note-editor-scroll::-webkit-scrollbar { display: none; }73767377/* Desktop toolbar (always visible above body) */7378.peach-note-toolbar-desktop-inline {7379  display: grid;7380  grid-template-columns: repeat(4, minmax(0, 1fr)) auto repeat(5, minmax(0, 1fr));7381  align-items: center;7382  gap: 0;7383  padding: 5px 0 10px;7384  margin-bottom: 10px;7385  border-bottom: 0.5px solid var(--peach-border);7386}73877388/* Title field */7389.peach-note-title-field {7390  font-family: var(--font-display);7391  font-style: italic;7392  font-size: clamp(34px, 13vw, 44px);7393  font-weight: 400;7394  color: var(--peach-t0);7395  line-height: 0.98;7396  letter-spacing: -0.015em;7397  padding: 10px 0 2px;7398  outline: none;7399  min-height: 52px;7400  word-break: break-word;7401  position: relative;7402  z-index: 1;7403}74047405.peach-note-title-field:empty::before {7406  content: attr(data-placeholder);7407  color: var(--peach-t1);7408  opacity: 0.58;7409  pointer-events: none;7410}74117412/* Hairline separator */7413.peach-note-hairline {7414  height: 0.5px;7415  background: var(--peach-border);7416  margin: 14px 0 18px;7417  position: relative;7418  z-index: 1;7419}74207421/* Body field */7422.peach-note-body-field {7423  font-family: var(--font-display);7424  font-size: 17px;7425  color: var(--peach-t1);7426  line-height: 1.72;7427  padding: 0;7428  outline: none;7429  min-height: 240px;7430  word-break: break-word;7431  position: relative;7432  z-index: 1;7433}74347435.peach-note-body-field:empty::before {7436  content: attr(data-placeholder);7437  color: var(--peach-t1);7438  opacity: 0.56;7439  font-style: italic;7440  pointer-events: none;7441}74427443.peach-note-body-field h2 {7444  font-family: var(--font-display);7445  font-style: italic;7446  font-size: 22px;7447  font-weight: 600;7448  color: var(--peach-t0);7449  margin: 20px 0 8px;7450}74517452.peach-note-body-field blockquote {7453  border-left: 2px solid var(--peach-accent);7454  margin: 12px 0;7455  padding-left: 16px;7456  color: var(--peach-t1);7457  font-style: italic;7458}74597460.peach-note-body-field ul,7461.peach-note-body-field ol {7462  padding-left: 20px;7463  margin: 8px 0;7464}74657466.peach-note-body-field li {7467  margin: 4px 0;7468}74697470.peach-note-body-field hr {7471  border: none;7472  border-top: 0.5px solid var(--peach-border);7473  margin: 16px 0;7474}74757476/* Saved indicator */7477.peach-note-saved-indicator {7478  font-family: var(--font-mono);7479  font-size: 11px;7480  color: var(--peach-t3);7481  letter-spacing: 0.04em;7482  text-align: right;7483  padding: 6px 24px;7484  flex-shrink: 0;7485  transition: opacity 300ms ease;7486  pointer-events: none;7487  position: relative;7488  z-index: 1;7489}74907491/* Mobile keyboard toolbar */74927493.peach-note-toolbar-btn {7494  min-width: 0;7495  width: auto;7496  height: 30px;7497  display: flex;7498  align-items: center;7499  justify-content: center;7500  background: none;7501  border: none;7502  border-radius: 4px;7503  cursor: pointer;7504  color: var(--peach-t1);7505  transition: background 100ms ease, color 100ms ease;7506  -webkit-tap-highlight-color: transparent;7507}75087509.peach-note-toolbar-btn svg {7510  width: 14px;7511  height: 14px;7512  fill: none;7513  stroke: currentColor;7514  stroke-width: 1.15;7515  stroke-linecap: round;7516  stroke-linejoin: round;7517  pointer-events: none;7518}75197520.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }7521.peach-note-toolbar-btn:hover,7522.peach-note-toolbar-btn:active {7523  background: var(--peach-t4);7524  color: var(--peach-t0);7525}75267527.peach-note-toolbar-divider {7528  width: 0.5px;7529  height: 20px;7530  background: var(--peach-border);7531  margin: 0 4px;7532  flex-shrink: 0;7533}75347535/* Desktop: larger headline in TOC */7536@media (min-width: 400px) {7537  .peach-notes-header-title {7538    font-size: 32px;7539  }75407541  .peach-note-row {7542    min-height: 64px;7543    padding: 14px 16px;7544  }7545}75467547/* Flying title — shared element during expansion/collapse */75487549/* ─── Light theme overrides ───────────────────────────────────────────────7550   Tokens that cannot be expressed as variable substitutions — hardcoded7551   context-specific values that need separate light-mode rules. */75527553/* Settings section headers: use text-label (#79766F) per restoration brief —7554   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY7555   presence without fighting the light parchment background. */7556.light .peach-settings-sub-label {7557  color: #79766F;7558}75597560/* Secondary action buttons (ghost / subtle): filled with input-well surface7561   so they read as recessed against the parchment card background. */7562.light .peach-btn--ghost:not(.peach-icon-btn) {7563  background: #EEE7DD;7564  border-color: #DDD5CB;7565  color: #1A1208;7566}7567.light .peach-icon-btn {7568  background: transparent;7569  border-color: transparent;7570}7571.light .peach-btn--subtle {7572  background: #EEE7DD;7573  border-color: #DDD5CB;7574}75757576/* Entry row hover: bg-row lifts the row above the card surface. */7577.light .peach-entry-row:hover {7578  background: #F2EBE1;7579}7580.light .peach-entry-row.is-active {7581  background: #F2EBE1;7582}7583.light .peach-entry-row.is-selected {7584  background: #F5EDE2;7585}75867587/* ──────────────────────────────────────────────────────────────────────────7588   Pair-device flow — bird-stage animation (Phase 1)7589   See src/popup/components/PairingBirds.tsx and the brief §6.2.7590   Three-act animation gated on the [data-phase] attribute of7591   .peach-pair-pair; child layers (birds, sound arcs, flight wave, dot)7592   each react via either pose class or visibility flag.7593   Tokens: accent surfaces use var(--peach-accent); bird illustration7594   colours are baked into the SVG per the brand-peach exception in §3.1.7595   ────────────────────────────────────────────────────────────────────── */75967597.peach-pair-pair {7598  position: absolute;7599  inset: 0;7600  z-index: 3;7601  display: flex;7602  flex-direction: column;7603  padding: 14px 12px 12px;7604  width: 100%;7605  box-sizing: border-box;7606  gap: 0;7607  background:7608    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),7609    var(--peach-bg);7610  color: var(--peach-t0);7611  overflow-y: auto;7612  overflow-x: hidden;7613  scrollbar-width: none;7614  isolation: isolate;7615  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;7616}7617@keyframes peach-pair-overlay-in {7618  from { opacity: 0; transform: translateY(8px); }7619  to   { opacity: 1; transform: translateY(0); }7620}7621.peach-pair-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }7622.peach-pair-pair::before {7623  content: '';7624  position: absolute;7625  inset: 0;7626  border-radius: inherit;7627  pointer-events: none;7628  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);7629  z-index: 0;7630}7631.peach-pair-pair > * { position: relative; z-index: 1; }76327633/* Header --------------------------------------------------------------- */7634.peach-pair-head {7635  display: flex; align-items: center; gap: 10px;7636}7637.peach-pair-back {7638  width: 32px; height: 32px;7639  display: inline-flex; align-items: center; justify-content: center;7640  background: transparent;7641  border: none;7642  border-radius: 8px;7643  color: var(--peach-t1);7644  cursor: pointer;7645  transition: color 0.15s ease, box-shadow 0.15s ease;7646}7647.peach-pair-back:hover {7648  color: var(--peach-accent);7649  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);7650}7651.peach-pair-title {7652  font-family: var(--font-display, Georgia, serif);7653  font-style: italic;7654  font-size: 24px;7655  font-weight: 500;7656  letter-spacing: 0.005em;7657  color: var(--peach-t0);7658  line-height: 1;7659}7660.peach-pair-head-spacer { flex: 1; }76617662/* Bird stage ----------------------------------------------------------- */7663.peach-pair-stage {7664  position: relative;7665  flex-shrink: 0;7666  height: 180px;7667  margin: 8px auto 18px;7668  width: 300px;7669  display: flex;7670  align-items: flex-end;7671  justify-content: center;7672}7673.peach-pair-bird-slot {7674  position: absolute;7675  bottom: 0;7676  width: 108px;7677  height: 108px;7678  transform-origin: 50% 95%;7679}7680.peach-pair-bird-slot-desktop { left: 12px; }7681.peach-pair-bird-slot-mobile { right: 12px; }7682.peach-pair-stage.act-handshake .peach-pair-bird-slot-desktop,7683.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop {7684  transform: translateX(6px);7685  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);7686}7687.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop { --bb-x: 6px; }7688.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { --bb-x: -6px; }7689.peach-pair-stage.act-paired .peach-pair-bird-slot {7690  animation: peach-pair-happy-bob 1.2s ease-in-out infinite;7691}7692.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { animation-delay: 0.2s; }7693@keyframes peach-pair-happy-bob {7694  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }7695  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }7696}76977698/* Bird internal -------------------------------------------------------- */7699.peach-pair-bird {7700  width: 108px;7701  height: 108px;7702  transform-origin: 50% 95%;7703}7704.peach-pair-bird svg { width: 100%; height: 100%; overflow: visible; }77057706.peach-pair-bird-body {7707  transform-origin: 50% 80%;7708  animation: peach-pair-bird-bob 2.4s ease-in-out infinite;7709}7710.peach-pair-bird-pose-chirping .peach-pair-bird-body { animation-duration: 1.4s; }7711.peach-pair-bird-pose-happy .peach-pair-bird-body   { animation: peach-pair-bird-celebrate 0.9s ease-in-out infinite; }7712.peach-pair-bird-pose-attentive .peach-pair-bird-body { animation-duration: 2.0s; }77137714@keyframes peach-pair-bird-bob {7715  0%, 100% { transform: translateY(0) rotate(0deg); }7716  50%      { transform: translateY(-2px) rotate(-1deg); }7717}7718@keyframes peach-pair-bird-celebrate {7719  0%, 100% { transform: translateY(0) rotate(0deg); }7720  25%      { transform: translateY(-4px) rotate(-2deg); }7721  75%      { transform: translateY(-4px) rotate(2deg); }7722}77237724.peach-pair-bird-wing {7725  transform-origin: 50% 50%;7726  animation: peach-pair-bird-flap 0.9s ease-in-out infinite;7727}7728.peach-pair-bird-pose-happy .peach-pair-bird-wing { animation-duration: 0.35s; }7729.peach-pair-bird-pose-attentive .peach-pair-bird-wing { animation-duration: 1.4s; }7730@keyframes peach-pair-bird-flap {7731  0%, 100% { transform: scaleY(1); }7732  50%      { transform: scaleY(0.85); }7733}77347735.peach-pair-bird-head-group {7736  transform-origin: 95px 52px;7737  animation: peach-pair-bird-bob-head 2.6s ease-in-out infinite;7738}7739.peach-pair-bird-pose-chirping .peach-pair-bird-head-group { animation-duration: 0.45s; }7740.peach-pair-bird-pose-attentive .peach-pair-bird-head-group { animation: none; }7741@keyframes peach-pair-bird-bob-head {7742  0%, 100% { transform: rotate(0deg); }7743  50%      { transform: rotate(3deg); }7744}77457746.peach-pair-bird-eye-group { transform-origin: center; }77477748.peach-pair-bird-aura {7749  animation: peach-pair-bird-aura 2.6s ease-in-out infinite;7750}7751.peach-pair-bird-pose-happy .peach-pair-bird-aura { animation-duration: 1.4s; }7752@keyframes peach-pair-bird-aura {7753  0%, 100% { opacity: 0; }7754  50%      { opacity: 0.18; }7755}77567757.peach-pair-bird-tail {7758  transform-origin: 50% 100%;7759  animation: peach-pair-bird-tail-wag 3s ease-in-out infinite;7760}7761@keyframes peach-pair-bird-tail-wag {7762  0%, 100% { transform: rotate(0deg); }7763  50%      { transform: rotate(2deg); }7764}77657766.peach-pair-bird-pose-happy .peach-pair-bird-shadow { animation: peach-pair-bird-shadow-pulse 0.9s ease-in-out infinite; }7767@keyframes peach-pair-bird-shadow-pulse {7768  0%, 100% { transform: scaleX(1); opacity: 0.45; }7769  50%      { transform: scaleX(0.92); opacity: 0.3; }7770}77717772/* Per-pose variants --------------------------------------------------- */7773/* Status copy ---------------------------------------------------------- */77747775.peach-pair-headline {7776  font-family: var(--font-display, Georgia, serif);7777  font-style: italic;7778  font-size: 20px;7779  font-weight: 500;7780  line-height: 1.2;7781  letter-spacing: 0.005em;7782  color: var(--peach-t0);7783  margin-bottom: 6px;7784}77857786.peach-pair-sub {7787  font-size: 12.5px;7788  line-height: 1.45;7789  color: var(--peach-t1);7790  max-width: 280px;7791  margin: 0 auto;7792  text-wrap: pretty;7793}77947795/* Status action -------------------------------------------------------- */7796.peach-pair-action {7797  margin: 2px 4px 10px;7798  margin-top: auto;7799  display: flex;7800  flex-direction: column;7801  gap: 8px;7802}78037804/* Screen-reader-only live region. Kept off the visual flow but read by7805   assistive tech as the pairing phase advances. */7806.peach-sr-only {7807  position: absolute;7808  width: 1px; height: 1px;7809  padding: 0; margin: -1px;7810  overflow: hidden;7811  clip: rect(0, 0, 0, 0);7812  white-space: nowrap;7813  border: 0;7814}78157816/* Reduced motion — stage simplifies to opacity transitions only */7817@media (prefers-reduced-motion: reduce) {7818  .peach-pair-bird-body,7819  .peach-pair-bird-head-group,7820  .peach-pair-bird-beak,7821  .peach-pair-bird-wing,7822  .peach-pair-bird-tuft,7823  .peach-pair-bird-tail,7824  .peach-pair-bird-eye-group,7825  .peach-pair-bird-aura,7826  .peach-pair-bird-slot,7827  .peach-pair-bird-slot-mobile {7828    animation: none !important;7829    transition: opacity 0.2s linear !important;7830  }7831}78327833/* Shell border and shadow in light mode: match dark mode's near-invisible7834   border weight so the popup frame looks the same in both themes. */7835.light .peach-shell,7836.light .peach-screen {7837  border-color: rgba(26, 18, 8, 0.07);7838  box-shadow:7839    0 2px 8px rgba(80, 56, 32, 0.08),7840    0 14px 48px rgba(80, 56, 32, 0.10),7841    0 0 0 1px rgba(26, 18, 8, 0.04);7842}78437844/* HOLE 4: the revoke confirmation carries its own disclosure, so it needs the7845   full row width rather than sitting inline beside the device name. */7846.peach-settings-row:has(> .peach-unpair-confirm) { flex-wrap: wrap; }7847.peach-unpair-confirm {7848  display: flex;7849  flex-direction: column;7850  gap: 8px;7851  width: 100%;7852}7853.peach-unpair-confirm-note {7854  margin: 0;7855  font-size: 0.6875rem;7856  line-height: 1.5;7857  color: var(--peach-t2);7858}78597860/* Sync mode selector — three named choices (public / private / off). Replaces7861   the old binary "local network only" toggle; see docs/sync-lan-retirement.md. */7862.peach-sync-mode {7863  display: flex;7864  align-items: flex-start;7865  gap: 10px;7866  width: 100%;7867  text-align: left;7868  padding: 10px 12px;7869  margin-top: 8px;7870  border-radius: 10px;7871  border: 1px solid var(--peach-border);7872  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);7873  color: var(--peach-t1);7874  cursor: pointer;7875  transition: border-color var(--peach-dur-80) var(--peach-curve-arrival),7876              background-color var(--peach-dur-80) var(--peach-curve-arrival);7877}7878.peach-sync-mode:hover:not(:disabled) {7879  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);7880}7881.peach-sync-mode.is-active {7882  border-color: var(--peach-accent);7883  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);7884}7885.peach-sync-mode:disabled { opacity: 0.6; cursor: default; }7886.peach-sync-mode-main { display: flex; flex-direction: column; gap: 3px; flex: 1; }7887.peach-sync-mode-title { font-size: 12px; }7888.peach-sync-mode-sub {7889  font-size: 11px;7890  line-height: 1.5;7891  color: var(--peach-t2);7892}7893.peach-sync-mode-pip {7894  flex: none;7895  margin-top: 3px;7896  width: 12px; height: 12px;7897  border-radius: 50%;7898  border: 1px solid var(--peach-t3);7899}7900.peach-sync-mode.is-active .peach-sync-mode-pip {7901  border-color: var(--peach-accent);7902  background:7903    radial-gradient(circle at 50% 50%, var(--peach-accent) 0 42%, transparent 44%);7904}7905.peach-sync-mode-disclosure {7906  margin: 10px 2px 0;7907  font-size: 11px;7908  line-height: 1.5;7909  color: var(--peach-t2);7910}7911.peach-sync-mode-warn { color: var(--peach-breach); }79127913/* Compact form, used mid-pairing: a quiet line, not a decision to make. */7914.peach-sync-mode-summary {7915  margin: 8px 2px 0;7916  font-size: 11px;7917  color: var(--peach-t2);7918  text-align: center;7919}7920.peach-sync-mode-change {7921  background: none;7922  border: none;7923  padding: 0;7924  font: inherit;7925  color: var(--peach-accent);7926  text-decoration: underline;7927  cursor: pointer;7928}79297930/* ── What's new / breaking-changes screen (one-shot after unlock) ── */7931.peach-whats-new {7932  width: 100%;7933  height: 100%;7934  display: flex;7935  flex-direction: column;7936  background:7937    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%, transparent 65%),7938    var(--peach-bg);7939  overflow: hidden;7940}79417942.peach-whats-new-inner {7943  display: flex;7944  flex-direction: column;7945  height: 100%;7946  padding: 28px 24px 20px;7947}79487949.peach-whats-new-header {7950  display: flex;7951  flex-direction: column;7952  align-items: center;7953  gap: 4px;7954  margin-bottom: 16px;7955  flex-shrink: 0;7956}79577958.peach-whats-new-mark {7959  width: 28px;7960  height: 28px;7961  margin-bottom: 2px;7962}79637964.peach-whats-new-title {7965  font-family: var(--font-display);7966  font-size: 19px;7967  font-style: italic;7968  font-weight: 400;7969  color: var(--peach-t0);7970  margin: 0;7971}79727973.peach-whats-new-version {7974  font-family: var(--peach-mono);7975  font-size: 0.6875rem;7976  color: var(--peach-t1);7977}79787979.peach-whats-new-notes {7980  flex: 1;7981  display: flex;7982  flex-direction: column;7983  gap: 12px;7984  overflow-y: auto;7985  min-height: 0;7986  padding-right: 4px;7987}79887989.peach-whats-new-release-meta {7990  display: flex;7991  align-items: baseline;7992  justify-content: space-between;7993  margin-bottom: 7px;7994  font-family: var(--peach-mono);7995  font-size: 0.5625rem;7996  color: var(--peach-t2);7997}79987999.peach-whats-new-release-version { margin: 0; font-size: 0.6875rem; color: var(--peach-t0); }8000.peach-whats-new-item + .peach-whats-new-item { margin-top: 10px; }80018002.peach-whats-new-note {8003  padding: 12px 14px;8004  border-radius: 10px;8005  background: var(--peach-bg-card);8006  border: 1px solid var(--peach-t3);8007}80088009.peach-whats-new-note.is-breaking {8010  border-color: color-mix(in srgb, var(--peach-breach) 45%, var(--peach-t3));8011  background: color-mix(in srgb, var(--peach-breach) 6%, var(--peach-bg-card));8012}80138014.peach-whats-new-badge {8015  display: inline-block;8016  font-family: var(--peach-mono);8017  font-size: 0.5625rem;8018  text-transform: uppercase;8019  letter-spacing: 0.05em;8020  color: var(--peach-breach);8021  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);8022  padding: 2px 7px;8023  border-radius: 4px;8024  margin-bottom: 6px;8025}80268027.peach-whats-new-note-heading {8028  font-size: 0.8125rem;8029  font-weight: 600;8030  color: var(--peach-t0);8031  margin: 0 0 4px;8032}80338034.peach-whats-new-note-body {8035  font-size: 0.75rem;8036  line-height: 1.45;8037  color: var(--peach-t1);8038  margin: 0;8039}80408041.peach-whats-new-continue {8042  margin-top: 16px;8043  flex-shrink: 0;8044  width: 100%;8045  padding: 11px;8046  border-radius: 999px;8047  font-size: 0.75rem;8048}