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-pill {2734  padding: 4px 11px;2735  border-radius: 999px;2736  border: 1px solid var(--peach-t3);2737  background: transparent;2738  color: var(--peach-t2);2739  font-family: "IBM Plex Mono", monospace;2740  font-size: 0.5625rem;2741  letter-spacing: 0.08em;2742  cursor: pointer;2743  transition: all 150ms ease;2744}2745.peach-pwgen-pill.is-on {2746  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);2747  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2748  color: var(--peach-accent);2749}2750.peach-pwgen-pill:not(.is-on):hover {2751  color: var(--peach-t1);2752  border-color: var(--peach-t2);2753}2754.peach-pwgen-use-btn {2755  width: 100%;2756  min-height: 34px;2757  border-radius: 8px;2758  margin-top: 2px;2759}2760.peach-generator-constraint-note {2761  font-family: 'IBM Plex Mono', monospace;2762  font-size: 10px;2763  color: var(--peach-t3);2764  letter-spacing: 0.04em;2765  margin: 0;2766  transition: opacity 200ms ease;2767}2768.peach-pwgen-toggle-row {2769  display: flex; align-items: center; justify-content: space-between;2770  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);2771}2772.peach-pwgen-toggle-row:last-child { border-bottom: none; }27732774/* Peach popup should not expose native scrollbars on internal panels. */2775.peach-settings-body,2776.peach-new-body,2777.lock-screen,2778.peach-import-preview {2779  scrollbar-width: none;2780  -ms-overflow-style: none;2781  overscroll-behavior: contain;2782}2783.peach-settings-body::-webkit-scrollbar,2784.peach-new-body::-webkit-scrollbar,2785.lock-screen::-webkit-scrollbar,2786.peach-import-preview::-webkit-scrollbar {2787  width: 0;2788  height: 0;2789  display: none;2790}27912792.lock-screen {2793  height: 100%;2794  min-height: 100%;2795  overflow-y: auto;2796  padding: 18px 18px 16px;2797  gap: 14px;2798  grid-template-rows: auto auto auto 1fr auto;2799  align-content: stretch;2800  position: relative;2801  isolation: isolate;2802}2803.peach-screen.lock-screen--vault-stage {2804  display: flex;2805  flex-direction: column;2806  justify-content: flex-start;2807  gap: 18px;2808  padding: 20px 18px 18px;2809  overflow: hidden;2810}2811.peach-screen.lock-screen--vault-stage .peach-lock-panel {2812  margin-top: 0;2813}28142815.lock-screen::before {2816  content: "";2817  position: absolute;2818  inset: 12px 18px auto auto;2819  width: 160px;2820  height: 160px;2821  border-radius: 999px;2822  background:2823    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%);2824  filter: blur(6px);2825  opacity: 0.7;2826  pointer-events: none;2827  z-index: 0;2828}28292830.lock-screen-header {2831  display: flex;2832  align-items: center;2833  justify-content: space-between;2834  position: relative;2835  z-index: 1;2836}28372838.lock-password-input.shake {2839  animation: peach-shake 300ms ease-in-out;2840}28412842.peach-hint-error {2843  color: rgba(220, 80, 60, 0.92);2844}28452846.peach-onboarding-headline {2847  margin: 0;2848  font-family: var(--font-display);2849  font-size: 35px;2850  line-height: 0.88;2851  font-style: italic;2852  font-weight: 400;2853  max-width: 252px;2854}28552856.peach-lock-hero {2857  position: relative;2858  z-index: 1;2859  display: flex;2860  flex-direction: column;2861  align-items: center;2862  justify-content: center;2863  text-align: center;2864  gap: 10px;2865  min-height: 0;2866  padding: 4px 2px 0;2867  border: none;2868  border-radius: 0;2869  background: transparent;2870  box-shadow: none;2871}2872.peach-lock-hero > * {2873  position: relative;2874  z-index: 1;2875}28762877.peach-lock-mark {2878  width: 40px;2879  height: 40px;2880  margin: 0 auto 6px;2881  display: block;2882}28832884.peach-lock-eyebrow {2885  display: inline-flex;2886  align-items: center;2887  width: fit-content;2888  margin: 0 auto;2889  padding: 4px 9px;2890  border-radius: 999px;2891  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);2892  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2893  color: var(--peach-t0);2894  font-family: "IBM Plex Mono", monospace;2895  font-weight: 600;2896  font-size: 0.55rem;2897  letter-spacing: 0.14em;2898  text-transform: uppercase;2899}29002901.peach-lock-reveal-btn {2902  display: inline-flex;2903  align-items: center;2904  gap: 4px;2905  background: none;2906  border: none;2907  cursor: pointer;2908  font-family: "IBM Plex Mono", monospace;2909  font-size: 0.5625rem;2910  letter-spacing: 0.06em;2911  color: var(--peach-t2);2912  padding: 2px 0;2913  transition: color 150ms ease;2914}29152916.peach-lock-reveal-btn:hover {2917  color: var(--peach-t1);2918}29192920.peach-lock-panel {2921  position: relative;2922  z-index: 1;2923  display: grid;2924  gap: 9px;2925  padding: 14px 16px 15px;2926  border-radius: 18px;2927  border: 1px solid var(--peach-t3);2928  background:2929    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));2930  box-shadow:2931    inset 0 1px 0 rgba(240, 232, 216, 0.04),2932    0 12px 28px rgba(0, 0, 0, 0.12);2933}29342935/* Glass surface — lock panel and settings groups */2936.peach-glass {2937  background: rgba(26, 20, 16, 0.65);2938  border: 1px solid rgba(255, 255, 255, 0.08);2939  border-radius: 12px;2940  backdrop-filter: blur(12px) saturate(1.4);2941  -webkit-backdrop-filter: blur(12px) saturate(1.4);2942}29432944@supports not (backdrop-filter: blur(1px)) {2945  .peach-glass {2946    background: rgba(26, 20, 16, 0.92);2947    border: 1px solid rgba(255, 255, 255, 0.10);2948    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);2949  }2950}29512952.light .peach-glass {2953  background: rgba(240, 233, 223, 0.72);2954  border: 1px solid rgba(26, 18, 8, 0.08);2955  backdrop-filter: blur(12px) saturate(1.2);2956  -webkit-backdrop-filter: blur(12px) saturate(1.2);2957}29582959@supports not (backdrop-filter: blur(1px)) {2960  .light .peach-glass {2961    background: rgba(240, 233, 223, 0.97);2962    border: 1px solid rgba(26, 18, 8, 0.10);2963  }2964}29652966/* Lock panel keeps its own border-radius over the generic glass token */2967.peach-lock-panel.peach-glass {2968  border-radius: 18px;2969  background: rgba(26, 20, 16, 0.65);2970  border: 1px solid rgba(255, 255, 255, 0.08);2971  box-shadow:2972    inset 0 1px 0 rgba(255, 255, 255, 0.05),2973    0 12px 28px rgba(0, 0, 0, 0.3);2974}29752976.light .peach-lock-panel.peach-glass {2977  background: rgba(240, 233, 223, 0.82);2978  border: 1px solid rgba(26, 18, 8, 0.08);2979  box-shadow:2980    inset 0 1px 0 rgba(255, 255, 255, 0.4),2981    0 8px 24px rgba(80, 56, 32, 0.15);2982}29832984@supports not (backdrop-filter: blur(1px)) {2985  .peach-lock-panel.peach-glass {2986    background: rgba(26, 20, 16, 0.92);2987    box-shadow:2988      inset 0 1px 0 rgba(255, 255, 255, 0.05),2989      0 12px 28px rgba(0, 0, 0, 0.4);2990  }2991  .light .peach-lock-panel.peach-glass {2992    background: rgba(240, 233, 223, 0.98);2993  }2994}29952996/* ── Restore surface ────────────────────────────────────────────────────2997   The onboarding restore screen. Shares the create-vault screen's glass2998   card language: Cormorant headline, hairline divider, choice rows. The2999   card lists the backup sources; picking one swaps the card body to that3000   source's form. */30013002/* Content centers in the tall card (mirrors the onboarding cards) and3003   scrolls as a fallback on shorter viewports. */3004.peach-restore-card {3005  justify-content: center;3006  overflow-y: auto;3007  scrollbar-width: none;3008}3009.peach-restore-card::-webkit-scrollbar { display: none; }30103011.peach-restore-sources {3012  display: grid;3013  gap: 6px;3014  margin-top: 4px;3015}30163017/* Choice rows reuse .peach-onboarding-choice; tighten them to the same3018   compactness as the final onboarding card's rows. */3019.peach-restore-source {3020  min-height: 40px;3021  padding: 6px 10px;3022  cursor: pointer;3023  transition: border-color 140ms ease, background 140ms ease;3024}3025.peach-restore-source:hover {3026  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);3027  background: color-mix(in srgb, var(--peach-accent) 9%, transparent);3028}30293030/* In-card header shown once a source is picked */3031.peach-restore-source-head {3032  display: flex;3033  align-items: baseline;3034  justify-content: space-between;3035  gap: 10px;3036}30373038.peach-restore-source-title {3039  margin: 0;3040  font-family: var(--font-display);3041  font-style: italic;3042  font-weight: 400;3043  font-size: 18px;3044  line-height: 1.1;3045  color: var(--peach-t0);3046}30473048.peach-restore-picker-back {3049  background: none;3050  border: none;3051  cursor: pointer;3052  padding: 2px 0;3053  font-family: var(--font-mono);3054  font-size: 0.625rem;3055  letter-spacing: 0.06em;3056  color: var(--peach-t2);3057  transition: color 150ms ease;3058}3059.peach-restore-picker-back:hover {3060  color: var(--peach-t0);3061}30623063/* Shared inner form layout */3064.peach-restore-form {3065  display: flex;3066  flex-direction: column;3067  gap: 8px;3068}30693070/* Drag-and-drop import — the one file path that survives the action popup3071   (the popup dismisses itself when the OS file picker steals focus). */3072.peach-restore-form.is-dragover {3073  outline: 2px dashed color-mix(in srgb, var(--peach-accent) 55%, transparent);3074  outline-offset: 6px;3075  border-radius: 8px;3076}30773078.peach-restore-drop-hint {3079  margin: -2px 0 0;3080  text-align: center;3081  font-family: var(--font-mono);3082  font-size: 0.5625rem;3083  letter-spacing: 0.06em;3084  color: var(--peach-t2);3085}30863087.peach-restore-submit {3088  width: 100%;3089}30903091.peach-restore-file-btn {3092  display: inline-flex;3093  align-items: center;3094  justify-content: center;3095  width: 100%;3096}30973098/* ── PeachScript source ───────────────────────────────────────────────── */30993100/* Rune textarea styled as an underline input to match the card's other3101   fields. */3102.peach-restore-script {3103  width: 100%;3104  box-sizing: border-box;3105  min-height: 56px;3106  max-height: 72px;3107  padding: 6px 0;3108  resize: none;3109  overflow: hidden;3110  scrollbar-width: none;3111  -ms-overflow-style: none;3112  border: 0;3113  border-bottom: 1px solid var(--peach-t3);3114  border-radius: 0;3115  background: transparent;3116  color: var(--peach-t0);3117  outline: none;3118  caret-color: var(--peach-accent);3119  font-family: "PeachScript", monospace;3120  font-size: 13px;3121  line-height: 1.9;3122  letter-spacing: 0.1em;3123  word-break: break-all;3124}3125.peach-restore-script::-webkit-scrollbar { display: none; }3126.peach-restore-script::placeholder { color: var(--peach-t2); }3127.peach-restore-script:focus {3128  border-bottom-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3129}31303131.peach-restore-or {3132  display: flex;3133  align-items: center;3134  gap: 8px;3135  font-family: var(--font-mono);3136  font-size: 0.5625rem;3137  letter-spacing: 0.14em;3138  text-transform: uppercase;3139  color: var(--peach-t2);3140}3141.peach-restore-or::before,3142.peach-restore-or::after {3143  content: "";3144  flex: 1;3145  border-top: 1px solid var(--peach-t3);3146}31473148.peach-restore-anim-canvas {3149  width: 100%;3150  height: 180px;3151  border-radius: 10px;3152  overflow: hidden;3153  display: block;3154}31553156/* Animated rune preview shown once valid PeachScript is pasted — mirrors the3157   export screen's RuneCanvas. */3158.peach-restore-rune-preview {3159  overflow: hidden;3160  border: 1px solid color-mix(in srgb, var(--peach-t0) 22%, transparent);3161  border-radius: 8px;3162}31633164/* ── Codex source ─────────────────────────────────────────────────────── */31653166.peach-restore-codex-copy {3167  margin: 0;3168  font-size: 0.75rem;3169  line-height: 1.55;3170  color: var(--peach-t1);3171}31723173/* ── CSV source ───────────────────────────────────────────────────────── */31743175.peach-restore-csv-sources {3176  margin: 0;3177  text-align: center;3178}31793180/* ── Intro popup ──────────────────────────────────────────────────────── */31813182.peach-restore-intro-overlay {3183  position: absolute;3184  inset: 0;3185  z-index: 100;3186  display: flex;3187  align-items: center;3188  justify-content: center;3189  padding: 20px;3190  background: rgba(12, 10, 6, 0.7);3191  backdrop-filter: blur(4px);3192  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3193}31943195.peach-restore-intro-card {3196  width: 100%;3197  display: flex;3198  flex-direction: column;3199  gap: 12px;3200  padding: 22px 20px 20px;3201  border-radius: 16px;3202  border: 1px solid var(--peach-t3);3203  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3204  backdrop-filter: blur(4px);3205  -webkit-backdrop-filter: blur(4px);3206  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3207}32083209.peach-restore-intro-headline {3210  margin: 0;3211  font-family: var(--font-display);3212  font-style: italic;3213  font-size: 20px;3214  font-weight: 400;3215  color: var(--peach-t0);3216}32173218.peach-restore-intro-body {3219  display: flex;3220  flex-direction: column;3221  gap: 8px;3222}3223.peach-restore-intro-body p {3224  margin: 0;3225  font-size: 0.75rem;3226  color: var(--peach-t1);3227  line-height: 1.5;3228}32293230.peach-restore-intro-btn {3231  width: 100%;3232  margin-top: 4px;3233}32343235/* Snapshot restore panel */32363237.peach-empty-copy {3238  display: grid;3239  gap: 6px;3240  color: var(--peach-t1);3241  font-size: 0.8125rem;3242}32433244.peach-lock-submit {3245  width: 100%;3246  box-shadow:3247    0 1px 0 rgba(255,255,255,0.10) inset,3248    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),3249    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),3250    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);3251}32523253.peach-overlay-action {3254  font-size: 0.625rem;3255  padding: 4px 8px;3256  letter-spacing: 0.06em;3257  min-width: 44px;3258  text-align: center;3259}32603261.peach-inline-action {3262  flex-shrink: 0;3263  font-size: 0.5625rem;3264  letter-spacing: 0.1em;3265  text-transform: uppercase;3266  padding: 4px 7px;3267}3268.peach-password-toggle-btn {3269  display: inline-flex;3270  align-items: center;3271  justify-content: center;3272  min-width: 30px;3273  min-height: 26px;3274  padding: 0 7px;3275  border: 1px solid var(--peach-t3);3276  border-radius: 999px;3277  background: rgba(240, 232, 216, 0.04);3278  color: var(--peach-t2);3279  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;3280}3281.peach-password-toggle-btn:hover {3282  border-color: var(--peach-t2);3283  color: var(--peach-t0);3284  background: rgba(240, 232, 216, 0.06);3285}32863287.peach-new-textarea {3288  width: 100%;3289  min-height: 88px;3290  resize: vertical;3291  border: 0;3292  outline: none;3293  background: transparent;3294  color: var(--peach-t1);3295  font-family: "IBM Plex Mono", monospace;3296  font-size: 0.75rem;3297  line-height: 1.65;3298  caret-color: var(--peach-accent);3299}33003301.peach-new-textarea::placeholder {3302  color: var(--peach-t2);3303  opacity: 0.7;3304}33053306.peach-settings-actions {3307  display: grid;3308  gap: 8px;3309}33103311.peach-btn--danger {3312  background: var(--peach-breach);3313  color: #fff;3314  border-color: var(--peach-breach);3315}3316.peach-btn--danger:hover:not(:disabled) {3317  background: color-mix(in srgb, var(--peach-breach) 88%, #000);3318}3319.peach-btn--danger:disabled {3320  opacity: 0.55;3321  cursor: not-allowed;3322}33233324.peach-import-preview {3325  margin-bottom: 12px;3326  max-height: 152px;3327  overflow-y: auto;3328  border: 1px solid var(--peach-t3);3329  border-radius: 10px;3330  padding: 8px 10px;3331  display: grid;3332  gap: 8px;3333  background: rgba(240, 232, 216, 0.02);3334}33353336.peach-import-preview-row {3337  display: flex;3338  justify-content: space-between;3339  gap: 10px;3340  font-size: 0.6875rem;3341  color: var(--peach-t1);3342}33433344.peach-import-preview-title {3345  color: var(--peach-t0);3346  flex: 1;3347  min-width: 0;3348  overflow: hidden;3349  text-overflow: ellipsis;3350  white-space: nowrap;3351}33523353.peach-import-preview-meta {3354  color: var(--peach-t2);3355  flex-shrink: 0;3356  max-width: 42%;3357  overflow: hidden;3358  text-overflow: ellipsis;3359  white-space: nowrap;3360}33613362.peach-import-preview-more {3363  color: var(--peach-t2);3364  font-size: 0.625rem;3365}33663367.peach-restore-warning {3368  padding: 10px 12px;3369  border-radius: 12px;3370  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);3371  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);3372  color: var(--peach-t0);3373  font-size: 0.6875rem;3374  line-height: 1.55;3375}33763377.peach-provider-chips {3378  display: flex;3379  flex-wrap: wrap;3380  gap: 6px;3381}33823383.peach-provider-chip {3384  display: inline-flex;3385  align-items: center;3386  padding: 5px 8px;3387  border-radius: 999px;3388  border: 1px solid var(--peach-t3);3389  background: rgba(240, 232, 216, 0.02);3390  color: var(--peach-t1);3391  font-family: "IBM Plex Mono", monospace;3392  font-size: 0.5rem;3393  letter-spacing: 0.08em;3394  text-transform: uppercase;3395}33963397.peach-restore-file,3398.peach-restore-input {3399  width: 100%;3400  border-radius: 10px;3401  border: 1px solid var(--peach-t3);3402  background: var(--peach-s2);3403  color: var(--peach-t0);3404  font-size: 0.75rem;3405}34063407.peach-restore-file {3408  padding: 9px 10px;3409}34103411.peach-restore-file::file-selector-button {3412  margin-right: 10px;3413  padding: 7px 10px;3414  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);3415  border-radius: 999px;3416  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3417  color: var(--peach-t0);3418  font-size: 0.625rem;3419  letter-spacing: 0.08em;3420  text-transform: uppercase;3421  cursor: pointer;3422}34233424.peach-restore-input {3425  padding: 10px 12px;3426}34273428.peach-import-summary {3429  color: var(--peach-t1);3430  font-size: 0.75rem;3431  line-height: 1.6;3432  margin-bottom: 12px;3433}34343435.peach-restore-error {3436  color: rgba(220, 80, 60, 0.95);3437  font-size: 0.75rem;3438  line-height: 1.55;3439}34403441.peach-passkey-card {3442  max-width: 400px;3443  margin: auto 16px;3444  align-self: center;3445  width: calc(100% - 32px);3446}34473448/* Center the approval card vertically inside the overlay-view (which sets3449 * flex-direction: column without justify-content). Without this, the card3450 * sits at the top with a tall empty band below — looks unfinished on the3451 * 320px popup. */3452.peach-overlay-view:has(.peach-passkey-card) {3453  justify-content: center;3454}34553456.peach-pro-badge {3457  padding: 2px 6px;3458  border-radius: 999px;3459  font-family: var(--font-ui);3460  font-size: 0.625rem;3461  letter-spacing: 0.08em;3462  text-transform: uppercase;3463  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);3464  color: var(--peach-accent);3465}34663467/* ── Shortcuts rebind table ─────────────────────────────────── */3468.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }3469.peach-shortcut-row {3470  display: flex;3471  align-items: center;3472  gap: 10px;3473  padding: 6px 0;3474}3475.peach-shortcut-row-label {3476  flex: 1;3477  font-size: 0.75rem;3478  color: var(--peach-t0);3479}3480.peach-shortcut-chip {3481  min-width: 64px;3482  padding: 4px 10px;3483  border-radius: 6px;3484  border: 1px solid var(--peach-t3);3485  background: var(--peach-input-bg, var(--surface-card));3486  color: var(--peach-t0);3487  font-family: var(--font-mono);3488  font-size: 0.6875rem;3489  letter-spacing: 0.04em;3490  cursor: pointer;3491  text-align: center;3492  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;3493}3494.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }3495.peach-shortcut-chip.is-custom {3496  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3497  color: var(--peach-accent);3498}3499.peach-shortcut-chip.is-capturing {3500  border-color: var(--peach-accent);3501  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);3502  color: var(--peach-accent);3503  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;3504}3505@keyframes peach-shortcut-capture-pulse {3506  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }3507  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }3508}3509.peach-shortcut-reset {3510  background: transparent;3511  border: none;3512  cursor: pointer;3513  color: var(--peach-t2);3514  padding: 4px 6px;3515  border-radius: 5px;3516  font-size: 0.875rem;3517  line-height: 1;3518  transition: color 120ms ease, background 120ms ease;3519}3520.peach-shortcut-reset:hover {3521  color: var(--peach-t0);3522  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);3523}3524.peach-shortcuts-conflict {3525  margin: 4px 0 0;3526  padding: 8px 10px;3527  border-radius: 7px;3528  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);3529  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);3530  font-family: var(--font-mono);3531  font-size: 0.6875rem;3532  color: var(--peach-t0);3533}35343535/* ── Help dialog overlay (? to open) ────────────────────────── */3536.peach-shortcuts-help-backdrop {3537  position: fixed;3538  inset: 0;3539  background: rgba(0, 0, 0, 0.55);3540  backdrop-filter: blur(2px);3541  display: flex;3542  align-items: center;3543  justify-content: center;3544  z-index: 1000;3545  animation: peach-help-fade-in 140ms ease forwards;3546}3547@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }3548.peach-shortcuts-help-card {3549  width: min(320px, 92vw);3550  max-height: 80vh;3551  overflow-y: auto;3552  border-radius: 14px;3553  border: 1px solid var(--peach-t3);3554  background: var(--peach-bg);3555  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);3556  padding: 16px 18px 18px;3557  display: flex;3558  flex-direction: column;3559  gap: 12px;3560}3561.peach-shortcuts-help-head {3562  display: flex; align-items: center; justify-content: space-between;3563}3564.peach-shortcuts-help-head h3 {3565  margin: 0;3566  font-family: var(--font-display);3567  font-style: italic;3568  font-weight: 400;3569  font-size: 22px;3570  color: var(--peach-t0);3571}3572.peach-shortcuts-help-close {3573  background: transparent;3574  border: none;3575  color: var(--peach-t2);3576  cursor: pointer;3577  font-size: 0.875rem;3578  padding: 4px 8px;3579  border-radius: 5px;3580}3581.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }3582.peach-shortcuts-help-body ul {3583  list-style: none; padding: 0; margin: 4px 0 12px;3584  display: grid; gap: 8px;3585}3586.peach-shortcuts-help-body li {3587  display: flex; align-items: center; justify-content: space-between; gap: 12px;3588  font-size: 0.75rem; color: var(--peach-t0);3589}3590.peach-shortcuts-help-body kbd {3591  font-family: var(--font-mono);3592  font-size: 0.6875rem;3593  padding: 3px 8px;3594  border-radius: 6px;3595  background: var(--surface-card);3596  border: 1px solid var(--peach-t3);3597  color: var(--peach-accent);3598  letter-spacing: 0.04em;3599}36003601/* ── Pro promo on Account screen ────────────────────────────── */36023603.peach-loading {3604  position: absolute;3605  inset: 0;3606  display: flex;3607  align-items: center;3608  justify-content: center;3609  background: var(--bg);3610  animation: peach-loading-pulse 1.2s ease-in-out infinite;3611}36123613@keyframes peach-loading-pulse {3614  0%, 100% { opacity: 0.6; }3615  50% { opacity: 1; }3616}36173618/* ── Health Dashboard ─────────────────────────────────────────────────── */3619.peach-health-body {3620  flex: 1;3621  overflow-y: auto;3622  display: flex;3623  flex-direction: column;3624  /* Hide the platform scrollbar — every other scrollable surface in the3625   * popup hides it; the Health view was the one outlier and it ruined the3626   * polish. Behavior unchanged, just no rail rendered. */3627  scrollbar-width: none;3628  -ms-overflow-style: none;3629}3630.peach-health-body::-webkit-scrollbar { display: none; }36313632/* Loading screen for the Vault Health view. The advanced report computation3633 * can run for a few seconds on a large vault — without a clear loading3634 * screen the surface looked broken (the entry view bleeds through the3635 * empty body). Centered glyph + title + copy + indeterminate progress bar. */3636.peach-health-loading-screen {3637  flex: 1;3638  display: flex;3639  flex-direction: column;3640  align-items: center;3641  justify-content: center;3642  gap: 14px;3643  padding: 32px 28px;3644  text-align: center;3645}36463647.peach-health-loading-glyph {3648  width: 48px;3649  height: 48px;3650  display: flex;3651  align-items: center;3652  justify-content: center;3653  border-radius: 14px;3654  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3655  color: var(--peach-accent);3656}36573658.peach-health-loading-title {3659  margin: 0;3660  font-family: var(--font-display);3661  font-style: italic;3662  font-weight: 300;3663  font-size: 19px;3664  line-height: 1.2;3665  color: var(--peach-t0);3666}36673668.peach-health-loading-copy {3669  margin: 0;3670  max-width: 240px;3671  font-size: 0.75rem;3672  line-height: 1.55;3673  color: var(--peach-t2);3674}36753676.peach-health-loading-track {3677  width: 200px;3678  height: 3px;3679  margin-top: 6px;3680  border-radius: 999px;3681  background: rgba(240, 232, 216, 0.06);3682  overflow: hidden;3683}36843685.peach-health-loading-fill {3686  width: 40%;3687  height: 100%;3688  border-radius: inherit;3689  background: linear-gradient(3690    90deg,3691    transparent 0%,3692    var(--peach-accent) 50%,3693    transparent 100%3694  );3695  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;3696}36973698@keyframes peach-health-loading-sweep {3699  0%   { transform: translateX(-100%); }3700  100% { transform: translateX(350%); }3701}37023703[data-motion="reduce"] .peach-health-loading-fill,3704[data-motion="reduce"] .peach-health-loading-glyph svg path {3705  animation: none;3706}37073708.peach-health-summary {3709  padding: 10px 16px 6px;3710  font-family: "IBM Plex Mono", monospace;3711  font-size: 0.6875rem;3712}3713.peach-health-summary-warn { color: rgba(220,80,60,0.9); }3714.peach-health-summary-ok { color: var(--peach-t2); }37153716.peach-health-check-row {3717  padding: 0 16px 10px;3718}3719.peach-health-check-btn {3720  width: 100%;3721  display: flex;3722  align-items: center;3723  justify-content: center;3724}37253726.peach-health-sections {3727  flex: 1;3728  display: flex;3729  flex-direction: column;3730}37313732.peach-health-section {3733  border-bottom: 1px solid var(--peach-t3);3734}37353736.peach-health-section-header {3737  width: 100%;3738  display: flex;3739  align-items: center;3740  justify-content: space-between;3741  padding: 9px 16px;3742  background: transparent;3743  cursor: pointer;3744  color: var(--peach-t0);3745}37463747.peach-health-section-title-row {3748  display: flex;3749  align-items: center;3750  gap: 8px;3751}37523753.peach-health-count-badge {3754  display: inline-flex;3755  align-items: center;3756  justify-content: center;3757  min-width: 20px;3758  height: 18px;3759  padding: 0 5px;3760  border-radius: 999px;3761  background: rgba(220,80,60,0.15);3762  border: 1px solid rgba(220,80,60,0.25);3763  font-family: "IBM Plex Mono", monospace;3764  font-size: 0.5625rem;3765  color: rgba(220,80,60,0.9);3766}37673768.peach-health-section-title {3769  font-family: "IBM Plex Mono", monospace;3770  font-size: 0.6875rem;3771  text-transform: uppercase;3772  letter-spacing: 0.1em;3773  color: var(--peach-t1);3774}37753776.peach-health-chevron {3777  color: var(--peach-t2);3778  transition: transform 200ms ease;3779  flex-shrink: 0;3780}3781.peach-health-chevron.is-expanded {3782  transform: rotate(180deg);3783}37843785.peach-health-section-body {3786  padding: 0 16px 10px;3787  display: flex;3788  flex-direction: column;3789  gap: 4px;3790}37913792.peach-health-row {3793  display: flex;3794  align-items: flex-start;3795  justify-content: space-between;3796  gap: 8px;3797  padding: 6px 8px;3798  border-radius: 8px;3799  background: rgba(240,232,216,0.02);3800}38013802.peach-health-row-info {3803  flex: 1;3804  min-width: 0;3805  display: flex;3806  flex-direction: column;3807  gap: 2px;3808}38093810.peach-health-row-name {3811  font-family: var(--font-display);3812  font-size: 0.9375rem;3813  font-style: italic;3814  font-weight: 400;3815  color: var(--peach-t0);3816  white-space: nowrap;3817  overflow: hidden;3818  text-overflow: ellipsis;3819}38203821.peach-health-row-meta {3822  font-family: "IBM Plex Mono", monospace;3823  font-size: 0.5625rem;3824  color: var(--peach-t2);3825  letter-spacing: 0.05em;3826}38273828.peach-health-fix-btn {3829  font-size: 0.5625rem;3830  letter-spacing: 0.08em;3831  text-transform: uppercase;3832  padding: 4px 7px;3833  flex-shrink: 0;3834  display: flex;3835  align-items: center;3836}38373838.peach-health-empty {3839  font-family: "IBM Plex Mono", monospace;3840  font-size: 0.625rem;3841  color: var(--peach-t2);3842  padding: 6px 0;3843}38443845.peach-health-loading {3846  font-family: "IBM Plex Mono", monospace;3847  font-size: 0.625rem;3848  color: var(--peach-t2);3849  padding: 6px 0;3850  display: flex;3851  align-items: center;3852  gap: 6px;3853}38543855.peach-health-loading::before {3856  content: "";3857  width: 10px;3858  height: 10px;3859  border: 1.5px solid var(--peach-t3);3860  border-top-color: var(--peach-accent);3861  border-radius: 50%;3862  animation: peach-spin 600ms linear infinite;3863}38643865@keyframes peach-spin {3866  to { transform: rotate(360deg); }3867}38683869/* Pairing commits the vault key before the first entry sync. Keep that3870   implementation detail off-screen until the paired source records a real,3871   durable sync completion. */3872.peach-initial-sync {3873  position: relative;3874  display: flex;3875  align-items: center;3876  justify-content: center;3877  overflow: hidden;3878}38793880.peach-initial-sync-card {3881  position: relative;3882  z-index: 1;3883  width: min(100%, 320px);3884  display: flex;3885  flex-direction: column;3886  align-items: center;3887  gap: 10px;3888  padding: 36px 26px;3889  text-align: center;3890}38913892.peach-initial-sync-mark {3893  width: 54px;3894  height: 54px;3895  display: flex;3896  align-items: center;3897  justify-content: center;3898  border-radius: 18px;3899  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);3900  margin-bottom: 4px;3901}39023903.peach-initial-sync-mark svg {3904  width: 34px;3905  height: 34px;3906}39073908.peach-initial-sync-card h1 {3909  margin: 0;3910  color: var(--peach-t0);3911  font-family: var(--font-display);3912  font-size: 1.55rem;3913  font-style: italic;3914  font-weight: 400;3915}39163917.peach-initial-sync-card > p {3918  margin: 0;3919}39203921.peach-initial-sync-card #initial-sync-copy {3922  color: var(--peach-t1);3923  font-size: 0.78rem;3924  line-height: 1.55;3925}39263927.peach-initial-sync-progress {3928  width: 100%;3929  height: 3px;3930  overflow: hidden;3931  border-radius: 999px;3932  background: color-mix(in srgb, var(--peach-t0) 8%, transparent);3933  margin: 8px 0 2px;3934}39353936.peach-initial-sync-progress span {3937  display: block;3938  width: 42%;3939  height: 100%;3940  border-radius: inherit;3941  background: var(--peach-accent);3942  animation: peach-initial-sync-progress 1.4s cubic-bezier(0.2, 0, 0, 1) infinite;3943}39443945@keyframes peach-initial-sync-progress {3946  from { transform: translateX(-115%); }3947  to { transform: translateX(340%); }3948}39493950.peach-initial-sync-note {3951  color: var(--peach-t2);3952  font-size: 0.625rem;3953  line-height: 1.45;3954}39553956.peach-initial-sync-slow {3957  width: 100%;3958  display: flex;3959  flex-direction: column;3960  gap: 10px;3961  padding-top: 10px;3962  border-top: 1px solid var(--peach-border);3963}39643965.peach-initial-sync-slow p {3966  margin: 0;3967  color: var(--peach-t2);3968  font-size: 0.6875rem;3969  line-height: 1.45;3970}39713972.peach-initial-sync-slow .peach-btn {3973  width: 100%;3974}39753976@media (prefers-reduced-motion: reduce) {3977  .peach-initial-sync-progress span {3978    width: 100%;3979    opacity: 0.7;3980    animation: none;3981  }3982}39833984/* Tag chips */3985.peach-tag-chip {3986  display: inline-flex;3987  align-items: center;3988  gap: 4px;3989  padding: 3px 8px;3990  border-radius: 999px;3991  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);3992  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3993  color: var(--peach-t0);3994  font-family: "IBM Plex Mono", monospace;3995  font-size: 0.625rem;3996  letter-spacing: 0.04em;3997}39983999.peach-tag-chip-remove {4000  background: transparent;4001  border: none;4002  color: inherit;4003  opacity: 0.6;4004  cursor: pointer;4005  padding: 0;4006  font-size: 0.75rem;4007  line-height: 1;4008}40094010.peach-tag-chip-remove:hover {4011  opacity: 1;4012}40134014/* Tag input */4015.peach-tag-input-wrap {4016  border-bottom: 1px solid var(--peach-t3);4017}40184019.peach-tag-suggestions {4020  display: flex;4021  flex-wrap: wrap;4022  gap: 4px;4023  padding: 6px 0;4024}40254026.peach-tag-suggestion {4027  padding: 2px 8px;4028  border-radius: 999px;4029  border: 1px solid var(--peach-t3);4030  background: var(--peach-s2);4031  color: var(--peach-t1);4032  font-family: "IBM Plex Mono", monospace;4033  font-size: 0.625rem;4034  cursor: pointer;4035  transition: border-color 80ms ease, background 80ms ease;4036}40374038.peach-tag-suggestion:hover {4039  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4040  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4041}40424043/* Identity suggestions — shown below username/email inputs in new-entry form */4044@keyframes peach-suggest-in {4045  from { opacity: 0; transform: translateY(-4px); }4046  to   { opacity: 1; transform: none; }4047}40484049.peach-identity-suggestions {4050  display: flex;4051  flex-direction: column;4052  gap: 1px;4053  margin-top: 4px;4054  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;4055}40564057.peach-identity-filter-row {4058  display: flex;4059  align-items: center;4060  gap: 4px;4061  padding: 2px 0 5px;4062}40634064.peach-identity-collapse-btn {4065  margin-left: auto;4066  background: transparent;4067  border: none;4068  cursor: pointer;4069  color: var(--peach-t3);4070  padding: 2px 4px;4071  display: flex;4072  align-items: center;4073  line-height: 0;4074  border-radius: 3px;4075  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);4076}40774078.peach-identity-collapse-btn:hover {4079  color: var(--peach-t1);4080}40814082.peach-identity-collapse-btn.is-collapsed {4083  transform: rotate(-90deg);4084}40854086.peach-identity-rows {4087  display: grid;4088  grid-template-rows: 1fr;4089  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);4090}40914092.peach-identity-rows.is-collapsed {4093  grid-template-rows: 0fr;4094}40954096.peach-identity-rows-inner {4097  overflow-y: auto;4098  min-height: 0;4099  max-height: 148px;4100  scrollbar-width: thin;4101  scrollbar-color: var(--peach-t3) transparent;4102  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);4103  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);4104}41054106.peach-identity-rows-inner::-webkit-scrollbar {4107  width: 4px;4108}41094110.peach-identity-rows-inner::-webkit-scrollbar-track {4111  background: transparent;4112}41134114.peach-identity-rows-inner::-webkit-scrollbar-thumb {4115  background: var(--peach-t3);4116  border-radius: 2px;4117}41184119.peach-identity-suggestion {4120  display: flex;4121  align-items: center;4122  gap: 6px;4123  width: 100%;4124  padding: 4px 6px;4125  border-radius: 5px;4126  border: none;4127  background: transparent;4128  cursor: pointer;4129  text-align: left;4130  transition: background 80ms ease;4131}41324133.peach-identity-suggestion:hover,4134.peach-identity-suggestion:focus {4135  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4136  outline: none;4137}41384139.peach-identity-suggestion-value {4140  font-family: "IBM Plex Mono", monospace;4141  font-size: 0.7rem;4142  color: var(--peach-t1);4143  overflow: hidden;4144  text-overflow: ellipsis;4145  white-space: nowrap;4146  flex: 1;4147  min-width: 0;4148}41494150.peach-identity-suggestion-meta {4151  font-family: "IBM Plex Mono", monospace;4152  font-size: 0.6rem;4153  color: var(--peach-t3);4154  flex-shrink: 0;4155}41564157/* Tag filter strip */4158.peach-tag-filter-strip {4159  border-bottom: 1px solid var(--peach-t3);4160  flex-shrink: 0;4161}41624163.peach-tag-filter-chip {4164  display: inline-flex;4165  align-items: center;4166  padding: 4px 10px;4167  border-radius: 999px;4168  border: 1px solid var(--peach-t3);4169  background: transparent;4170  color: var(--peach-t2);4171  font-family: "IBM Plex Mono", monospace;4172  font-size: 0.5625rem;4173  letter-spacing: 0.06em;4174  text-transform: uppercase;4175  cursor: pointer;4176  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;4177  white-space: nowrap;4178}41794180.peach-tag-filter-chip:hover {4181  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4182  color: var(--peach-t1);4183}41844185.peach-tag-filter-chip.is-selected {4186  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);4187  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);4188  color: var(--peach-t0);4189}41904191/* ─────────────────────────────────────────────────────────────────────────4192   v1.4.12 additions4193   ─────────────────────────────────────────────────────────────────────── */41944195/* Sort bar */4196.peach-sort-bar {4197  display: flex;4198  align-items: center;4199  gap: 4px;4200  padding: 5px 12px;4201  border-bottom: 1px solid var(--peach-t3);4202  flex-shrink: 0;4203  overflow-x: auto;4204  scrollbar-width: none;4205}42064207.peach-sort-btn {4208  padding: 2px 9px;4209  border-radius: 999px;4210  border: 1px solid transparent;4211  background: transparent;4212  color: var(--peach-t2);4213  font-family: "IBM Plex Mono", monospace;4214  font-size: 0.5625rem;4215  letter-spacing: 0.07em;4216  text-transform: uppercase;4217  cursor: pointer;4218  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;4219  white-space: nowrap;4220}42214222.peach-sort-btn:hover {4223  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);4224  color: var(--peach-t1);4225}42264227.peach-sort-btn.is-active {4228  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);4229  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);4230  color: var(--peach-t0);4231}42324233/* Tab-match badge on entry rows */4234.peach-tab-match-badge {4235  display: inline-block;4236  width: 6px;4237  height: 6px;4238  border-radius: 50%;4239  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);4240  margin-left: 5px;4241  vertical-align: middle;4242  flex-shrink: 0;4243  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);4244}42454246.peach-entry-row.is-tab-match {4247  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);4248  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);4249}42504251.peach-entry-row.is-tab-match:hover {4252  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4253}42544255/* Entry list stagger entrance */4256@keyframes peach-entry-fadein {4257  from { opacity: 0; transform: translateY(4px); }4258  to   { opacity: 1; transform: translateY(0); }4259}42604261.peach-vault-list .peach-entry-row {4262  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;4263}42644265/* Button press micro-interaction */4266.peach-btn:active {4267  transform: scale(0.95);4268  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);4269}42704271.peach-sort-btn:active,4272.peach-tag-filter-chip:active {4273  transform: scale(0.93);4274  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);4275}42764277/* Password strength bar (Lock view + shared) */4278.peach-password-strength {4279  display: flex;4280  align-items: center;4281  gap: 8px;4282  margin-top: 6px;4283}42844285.peach-strength-bar {4286  flex: 1;4287  height: 3px;4288  border-radius: 2px;4289  background: var(--peach-t3);4290  overflow: hidden;4291}42924293.peach-strength-fill {4294  height: 100%;4295  border-radius: 2px;4296  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),4297              background 300ms ease;4298}42994300.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }4301.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }4302.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }4303.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }43044305.peach-strength-label {4306  font-family: "IBM Plex Mono", monospace;4307  font-style: italic;4308  font-size: 0.5625rem;4309  font-weight: 300;4310  letter-spacing: 0.06em;4311  color: var(--peach-t2);4312  min-width: 36px;4313  text-align: right;4314}43154316.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }4317.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }4318.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }4319.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }43204321/* Duress form */43224323.peach-duress-form {4324  padding: 8px 0 4px;4325  display: flex;4326  flex-direction: column;4327  gap: 6px;4328}43294330.peach-duress-form .peach-label {4331  margin-top: 4px;4332}43334334.peach-duress-actions {4335  display: flex;4336  gap: 6px;4337  align-items: center;4338  margin-top: 4px;4339}43404341.peach-duress-actions .peach-btn:first-child {4342  margin-right: auto;4343}43444345/* Improved overlay spring entrance */4346.peach-overlay-view.ov-enter-up {4347  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;4348}43494350@keyframes ov-enter-up-spring {4351  from { opacity: 0; transform: translateY(16px) scale(0.98); }4352  to   { opacity: 1; transform: translateY(0) scale(1); }4353}43544355.peach-overlay-view.ov-enter-right {4356  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;4357}43584359@keyframes ov-enter-right-spring {4360  from { opacity: 0; transform: translateX(18px) scale(0.98); }4361  to   { opacity: 1; transform: translateX(0) scale(1); }4362}43634364/* ── Onboarding-mode restore screens (file import) ── */4365/* Used when MainImportView renders during onboarding (no vault yet).4366   Animates like a lock-screen transition. */4367.peach-lock-view {4368  position: absolute;4369  inset: 0;4370  display: flex;4371  flex-direction: column;4372  background:4373    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),4374    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),4375    var(--peach-bg);4376  z-index: 2;4377  overflow: hidden;4378  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4379}43804381.peach-lock-view-header {4382  display: flex;4383  align-items: center;4384  justify-content: space-between;4385  padding: 16px 18px 12px;4386  flex-shrink: 0;4387}43884389/* ───────── Settings: auto-lock select ───────── */4390.peach-settings-select {4391  font-family: "IBM Plex Mono", monospace;4392  font-size: 0.6875rem;4393  background: transparent;4394  border: 1px solid var(--peach-t3);4395  border-radius: 4px;4396  color: var(--peach-t1);4397  padding: 3px 6px;4398  cursor: pointer;4399  outline: none;4400}4401.peach-settings-select:focus {4402  border-color: var(--peach-accent);4403}44044405/* ───────── Duress status pill (new polished) ───────── */4406.peach-duress-status-pill {4407  font-family: "IBM Plex Mono", monospace;4408  font-size: 0.5625rem;4409  text-transform: uppercase;4410  letter-spacing: 0.12em;4411  padding: 2px 8px;4412  border-radius: 12px;4413  background: var(--peach-t3);4414  color: var(--peach-t2);4415  flex-shrink: 0;4416}4417.peach-duress-status-pill.is-active {4418  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);4419  color: var(--peach-accent);4420}44214422/* ───────── Entry advanced disclosure (canary) ───────── */44234424.peach-canary-section {4425  margin-top: 10px;4426  display: grid;4427  gap: 6px;4428}44294430/* ───────── Import: merge/replace radio choices ───────── */4431.peach-import-choice {4432  display: flex;4433  align-items: flex-start;4434  gap: 10px;4435  padding: 8px 10px;4436  border: 1px solid var(--peach-t3);4437  border-radius: 10px;4438  cursor: pointer;4439  margin-bottom: 6px;4440  transition: border-color 120ms ease, background 120ms ease;4441}4442.peach-import-choice:hover {4443  border-color: var(--peach-accent);4444}4445.peach-import-choice input[type="radio"] {4446  margin-top: 3px;4447  accent-color: var(--peach-accent);4448  flex-shrink: 0;4449}4450.peach-import-choice-main {4451  display: flex;4452  flex-direction: column;4453  gap: 2px;4454  min-width: 0;4455}4456.peach-import-choice-label {4457  font-size: 0.75rem;4458  color: var(--peach-t0);4459}4460.peach-import-choice-sub {4461  font-size: 0.6875rem;4462  color: var(--peach-t2);4463  line-height: 1.5;4464}44654466/* ───────── Export: success confirmation strip ───────── */4467.peach-export-success {4468  display: flex;4469  align-items: flex-start;4470  gap: 10px;4471  padding: 12px;4472  border-radius: 12px;4473  border: 1px solid rgba(150, 175, 110, 0.3);4474  background: rgba(150, 175, 110, 0.08);4475  color: var(--peach-t0);4476  font-size: 0.75rem;4477  line-height: 1.55;4478}4479.peach-export-success-check {4480  color: rgba(150, 175, 110, 0.9);4481  font-size: 0.875rem;4482  flex-shrink: 0;4483}44844485/* ── Trash view ──────────────────────────────────────────────────────── */4486.peach-trash-entry-row {4487  display: flex;4488  align-items: center;4489  justify-content: space-between;4490  gap: 8px;4491  padding: 8px 0;4492  border-bottom: 1px solid var(--peach-border);4493}4494.peach-trash-entry-info {4495  flex: 1;4496  min-width: 0;4497  display: flex;4498  flex-direction: column;4499  gap: 2px;4500}4501.peach-trash-entry-title {4502  font-size: 0.8125rem;4503  color: var(--peach-t0);4504  overflow: hidden;4505  text-overflow: ellipsis;4506  white-space: nowrap;4507}4508.peach-trash-entry-meta {4509  font-family: var(--font-mono);4510  font-size: 0.5625rem;4511  color: var(--peach-t2);4512  letter-spacing: 0.04em;4513}4514.peach-trash-entry-actions {4515  display: flex;4516  align-items: center;4517  gap: 4px;4518  flex-shrink: 0;4519}4520.peach-trash-delete-btn {4521  background: transparent;4522  border: 0;4523  color: var(--peach-t3);4524  font-size: 1rem;4525  line-height: 1;4526  cursor: pointer;4527  padding: 2px 5px;4528  transition: color 0.15s;4529}4530.peach-trash-delete-btn:hover { color: var(--peach-breach); }4531.peach-trash-list {4532  overflow-y: auto;4533}4534.peach-trash-footer {4535  display: flex;4536  align-items: center;4537  gap: 8px;4538  padding: 8px 0 0;4539  border-top: 1px solid var(--peach-border);4540  margin-top: 4px;4541}4542.peach-trash-purge-all {4543  background: transparent;4544  border: 0;4545  color: var(--peach-t3);4546  font-size: 0.625rem;4547  cursor: pointer;4548  padding: 4px 0;4549  letter-spacing: 0.03em;4550  transition: color 0.2s;4551}4552.peach-trash-purge-all:hover { color: var(--peach-breach); }4553.peach-trash-purge-confirm-label {4554  font-size: 0.625rem;4555  color: var(--peach-t1);4556  flex: 1;4557}45584559/* ── Sort bar trash button ───────────────────────────────────────────── */4560.peach-sort-trash-btn {4561  display: flex;4562  align-items: center;4563  justify-content: center;4564  padding: 3px 5px;4565  background: transparent;4566  border: none;4567  cursor: pointer;4568  color: var(--peach-t2);4569  border-radius: 4px;4570  transition: color 140ms ease, background 140ms ease;4571}4572.peach-sort-trash-btn:hover {4573  color: var(--peach-t1);4574  background: var(--peach-t3);4575}4576.peach-sort-trash-btn.is-active {4577  color: var(--peach-accent);4578}45794580/* Accent color picker */4581.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }4582.peach-accent-picker {4583  display: flex;4584  flex-wrap: wrap;4585  gap: 7px;4586  padding: 2px 0;4587}4588.peach-accent-swatch {4589  width: 22px;4590  height: 22px;4591  border-radius: 50%;4592  border: 2px solid transparent;4593  cursor: pointer;4594  padding: 0;4595  transition: transform 100ms;4596  outline-offset: 2px;4597}4598.peach-accent-swatch:hover { transform: scale(1.15); }4599.peach-accent-swatch.is-active {4600  border-color: var(--peach-t0);4601  transform: scale(1.1);4602}46034604.peach-pill-group {4605  display: flex;4606  gap: 6px;4607}4608.peach-pill-group .peach-btn.is-active {4609  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4610  border-color: var(--peach-accent);4611  color: var(--peach-t0);4612}46134614/* ── Card entry styles ───────────────────────────────────────── */4615.peach-card-number {4616  font-family: var(--peach-mono);4617  letter-spacing: 0.08em;4618}46194620.peach-card-network-badge {4621  font-size: 0.625rem;4622  padding: 1px 5px;4623  border-radius: 4px;4624  border: 0.5px solid var(--peach-border);4625  color: var(--peach-text-dim);4626  margin-left: 6px;4627  vertical-align: middle;4628}46294630.peach-card-expiry-row {4631  display: flex;4632  align-items: center;4633  gap: 8px;4634}46354636.peach-card-expiry-sep {4637  color: var(--peach-text-dim);4638}46394640/* ── Pro tier — upgrade screen ──────────────────────────────── */4641.peach-pro-mark {4642  font-size: 0.5625rem;4643  color: var(--peach-accent);4644  margin-left: 6px;4645  vertical-align: super;4646  opacity: 0.7;4647}46484649.peach-pro-mini-badge {4650  display: block;4651  font-size: 0.625rem;4652  font-style: italic;4653  color: var(--peach-accent);4654  letter-spacing: 0.04em;4655  margin-top: -2px;4656  padding-left: 2px;4657  opacity: 0.85;4658  text-align: center;4659}46604661.peach-wordmark-stack {4662  display: inline-flex;4663  flex-direction: column;4664  align-items: center;4665}46664667/* ── Pro tier — upgrade page ─────────────────────────────────── */4668/* ── Pro upgrade — redesigned editorial layout ─────────────────── */46694670.peach-pro-upgrade {4671  display: flex;4672  flex-direction: column;4673  align-items: stretch;4674  gap: 10px;4675  padding: 2px 2px 12px;4676}46774678.peach-pro-eyebrow {4679  margin: 0;4680  font-family: var(--font-ui);4681  font-size: 0.625rem;4682  font-weight: 500;4683  letter-spacing: 0.12em;4684  color: var(--peach-accent);4685}46864687.peach-pro-headline {4688  margin: 0;4689  font-family: var(--font-display, "Cormorant Garamond", serif);4690  font-size: 30px;4691  font-weight: 700;4692  font-style: normal;4693  line-height: 1.05;4694  color: var(--peach-t0);4695  letter-spacing: -0.01em;4696}4697.peach-pro-headline em {4698  font-style: italic;4699  font-weight: 400;4700  color: var(--peach-accent);4701}47024703.peach-pro-subtitle {4704  margin: 0;4705  font-size: 0.6875rem;4706  line-height: 1.5;4707  color: var(--peach-t1);4708}47094710/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */4711.peach-pro-section-label {4712  margin: 6px 0 0;4713  font-family: var(--font-ui);4714  font-size: 0.5625rem;4715  font-weight: 500;4716  letter-spacing: 0.12em;4717  text-transform: uppercase;4718  color: var(--peach-t2);4719}47204721/* 2-column numbered feature grid */4722.peach-pro-grid {4723  display: grid;4724  grid-template-columns: 1fr 1fr;4725  border-top: 1px solid var(--peach-border);4726  border-left: 1px solid var(--peach-border);4727}47284729.peach-pro-grid-item {4730  display: flex;4731  flex-direction: column;4732  gap: 2px;4733  padding: 8px 9px;4734  border-right: 1px solid var(--peach-border);4735  border-bottom: 1px solid var(--peach-border);4736}47374738.peach-pro-grid-item--wide {4739  grid-column: 1 / -1;4740}47414742.peach-pro-grid-num {4743  font-family: var(--font-mono);4744  font-size: 0.5625rem;4745  color: var(--peach-accent);4746  letter-spacing: 0.06em;4747  opacity: 0.85;4748}47494750.peach-pro-grid-name {4751  font-size: 0.8125rem;4752  font-weight: 500;4753  color: var(--peach-t0);4754  line-height: 1.2;4755}47564757.peach-pro-grid-desc {4758  font-size: 0.625rem;4759  color: var(--peach-t1);4760  line-height: 1.4;4761}47624763.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {4764  animation: peach-pulse-accent 600ms ease-out forwards;4765}47664767@keyframes peach-pulse-accent {4768  0%   { opacity: 1; transform: scale(1.2); }4769  100% { opacity: 0.85; transform: scale(1); }4770}47714772/* Actions */4773.peach-pro-upgrade-actions {4774  display: flex;4775  flex-direction: column;4776  align-items: stretch;4777  gap: 10px;4778}47794780.peach-pro-pricing {4781  margin: 0;4782  font-size: 1rem;4783  font-weight: 600;4784  color: var(--peach-t0);4785  letter-spacing: 0.01em;4786}4787.peach-pro-pricing-sub {4788  font-size: 0.75rem;4789  font-weight: 400;4790  color: var(--peach-t1);4791  letter-spacing: 0.02em;4792}47934794.peach-pro-upgrade-cta {4795  display: flex;4796  align-items: center;4797  justify-content: center;4798  text-decoration: none;4799  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);4800  border: 1px solid var(--peach-accent);4801  border-radius: 10px;4802  color: var(--peach-accent);4803  font-family: var(--font-ui);4804  font-size: 0.8125rem;4805  font-weight: 600;4806  letter-spacing: 0.06em;4807  padding: 11px 16px;4808  transition: background 0.15s ease, color 0.15s ease;4809}4810.peach-pro-upgrade-cta:hover {4811  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);4812}48134814/* Pairing's terminal entitlement fallback reuses the Peach Pro card's4815   editorial hierarchy without embedding the settings deck itself. */4816.peach-pair-pro-required {4817  width: 100%;4818  display: flex;4819  flex-direction: column;4820  align-items: stretch;4821  gap: 10px;4822  text-align: left;4823}4824.peach-pair-pro-required .peach-pro-headline {4825  font-size: 1.75rem;4826}4827.peach-pair-pro-required .peach-pro-subtitle {4828  font-size: 0.6875rem;4829}4830.peach-pair-pro-grid {4831  grid-template-columns: 1fr;4832}4833.peach-pair-pro-button {4834  width: 100%;4835  cursor: pointer;4836}4837.peach-desktop-error--pro {4838  width: min(100%, 320px);4839  overflow-y: auto;4840}48414842.peach-pro-key-divider {4843  display: flex;4844  align-items: center;4845  gap: 8px;4846  color: var(--peach-t2);4847  font-size: 0.5625rem;4848  letter-spacing: 0.1em;4849}4850.peach-pro-key-divider::before,4851.peach-pro-key-divider::after {4852  content: "";4853  flex: 1;4854  height: 1px;4855  background: var(--peach-border);4856}48574858/* Inline key entry row */4859.peach-pro-key-inline {4860  display: flex;4861  align-items: center;4862  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);4863  border: 1px solid var(--peach-border);4864  border-radius: 8px;4865  overflow: hidden;4866}4867.peach-pro-key-inline-input {4868  flex: 1;4869  background: transparent;4870  border: none;4871  outline: none;4872  color: var(--peach-t1);4873  font-family: var(--font-mono);4874  font-size: 0.625rem;4875  letter-spacing: 0.06em;4876  padding: 9px 10px;4877}4878.peach-pro-key-inline-input::placeholder {4879  color: var(--peach-t2);4880}4881.peach-pro-key-apply {4882  background: transparent;4883  border: none;4884  border-left: 1px solid var(--peach-border);4885  color: var(--peach-t2);4886  font-family: var(--font-ui);4887  font-size: 0.5625rem;4888  font-weight: 600;4889  letter-spacing: 0.08em;4890  padding: 9px 10px;4891  cursor: pointer;4892  transition: color 0.15s ease;4893  flex-shrink: 0;4894}4895.peach-pro-key-apply:not(:disabled):hover {4896  color: var(--peach-accent);4897}4898.peach-pro-key-apply:disabled {4899  opacity: 0.35;4900  cursor: not-allowed;4901}49024903/* ── Pro tier — key ceremony ─────────────────────────────────── */49044905.peach-pro-key-error {4906  margin: 0;4907  font-size: 0.75rem;4908  text-align: center;4909  color: var(--peach-breach, #e55);4910  padding: 0;4911}49124913/* ── Pro tier — active state ─────────────────────────────────── */4914.peach-pro-active {4915  display: flex;4916  flex-direction: column;4917  align-items: center;4918  gap: 0;4919  padding: 8px 4px 16px;4920  min-height: 280px;4921}49224923.peach-pro-active-hero {4924  display: flex;4925  flex-direction: column;4926  align-items: center;4927  gap: 6px;4928  padding: 20px 0 8px;4929}49304931.peach-pro-active-mark-wrap {4932  display: flex;4933  align-items: center;4934  justify-content: center;4935  margin-bottom: 4px;4936}49374938.peach-pro-active-mark {4939  width: 60px;4940  height: 60px;4941}49424943.peach-pro-active-title {4944  font-family: var(--font-display, var(--font-ui));4945  font-size: 26px;4946  margin: 0;4947  color: var(--peach-t0);4948  letter-spacing: 0.01em;4949}49504951.peach-pro-active-since {4952  margin: 0;4953  font-size: 0.6875rem;4954  color: var(--peach-t2);4955  font-style: italic;4956}49574958.peach-pro-active-features {4959  display: flex;4960  flex-direction: column;4961  gap: 8px;4962  width: 100%;4963  padding: 14px 8px 0;4964  border-top: 1px solid var(--peach-border);4965  flex: 1;4966}49674968.peach-pro-active-feature {4969  display: flex;4970  align-items: center;4971  gap: 9px;4972}49734974.peach-pro-active-feature-mark {4975  color: var(--peach-accent);4976  font-size: 0.625rem;4977  opacity: 0.65;4978  flex-shrink: 0;4979}49804981.peach-pro-active-feature-name {4982  font-size: 0.75rem;4983  color: var(--peach-t1);4984}49854986.peach-pro-deactivate {4987  align-self: center;4988  background: transparent;4989  border: 0;4990  color: var(--peach-t3);4991  font-size: 0.625rem;4992  cursor: pointer;4993  padding: 8px 0 0;4994  margin-top: 16px;4995  letter-spacing: 0.03em;4996  transition: color 0.2s;4997}49984999.peach-pro-deactivate:hover { color: var(--peach-t2); }50005001.peach-pro-deactivate:disabled {5002  opacity: 0.5;5003  cursor: default;5004}50055006/* ── Pro card activation sparkles & thank-you ── */5007button.peach-pro-active-mark-wrap {5008  background: transparent;5009  border: 0;5010  padding: 0;5011  cursor: pointer;5012  position: relative;5013  overflow: visible;5014}50155016.peach-pro-sparks {5017  position: absolute;5018  inset: 0;5019  pointer-events: none;5020  overflow: visible;5021}50225023.peach-pro-spark {5024  position: absolute;5025  top: 50%;5026  left: 50%;5027  font-size: 9px;5028  line-height: 1;5029  opacity: 0;5030  transform: translate(-50%, -50%);5031  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;5032}50335034@keyframes peach-pro-spark-fly {5035  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }5036  25%  { opacity: 1; }5037  100% {5038    opacity: 0;5039    transform: translate(5040      calc(-50% + var(--spark-x, 0px)),5041      calc(-50% + var(--spark-y, -40px))5042    ) scale(0.8);5043  }5044}50455046.peach-pro-thankyou-text {5047  margin: 4px 0 0;5048  font-size: 0.6875rem;5049  font-style: italic;5050  color: currentColor;5051  opacity: 0;5052  animation: peach-pro-thankyou-flash 2.5s ease both;5053}50545055@keyframes peach-pro-thankyou-flash {5056  0%   { opacity: 0; transform: translateY(4px); }5057  15%  { opacity: 0.75; transform: translateY(0); }5058  75%  { opacity: 0.75; }5059  100% { opacity: 0; }5060}50615062/* ── Pro advanced health remediation queue ──────────────────── */5063.peach-health-pro-queue {5064  display: flex;5065  flex-direction: column;5066  gap: 10px;5067  padding: 12px;5068  margin: 0 0 12px;5069  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5070  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);5071  border-radius: 10px;5072}50735074.peach-health-pro-queue-head {5075  display: flex;5076  justify-content: space-between;5077  align-items: baseline;5078}50795080.peach-health-pro-queue-title {5081  font-size: 0.75rem;5082  font-weight: 500;5083  letter-spacing: 0.04em;5084  text-transform: uppercase;5085  color: var(--peach-accent);5086}50875088.peach-health-pro-queue-score {5089  font-size: 0.6875rem;5090  color: var(--peach-t2);5091}50925093.peach-health-pro-row {5094  display: flex;5095  gap: 10px;5096  align-items: center;5097  padding: 8px 0;5098  border-top: 1px solid var(--peach-border);5099}51005101.peach-health-pro-row-info {5102  flex: 1;5103  display: flex;5104  flex-direction: column;5105  gap: 4px;5106  min-width: 0;5107}51085109.peach-health-pro-action {5110  flex: 0 0 auto;5111  padding: 4px 8px;5112  font-size: 0.5625rem;5113  letter-spacing: 0.08em;5114  text-transform: uppercase;5115}51165117.peach-health-pro-row-name {5118  font-size: 0.8125rem;5119  color: var(--peach-t0);5120  overflow: hidden;5121  text-overflow: ellipsis;5122  white-space: nowrap;5123}51245125.peach-health-pro-row-meta {5126  font-size: 0.6875rem;5127  color: var(--peach-t2);5128}51295130.peach-health-pro-bar {5131  height: 2px;5132  background: var(--peach-border);5133  border-radius: 2px;5134  overflow: hidden;5135  margin-top: 2px;5136}51375138.peach-health-pro-bar-fill {5139  height: 100%;5140  background: var(--peach-accent);5141  transition: width 200ms ease-out;5142}51435144/* ── Pro activation celebration ── */5145@keyframes peach-pro-bloom {5146  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }5147  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))5148                 drop-shadow(0 0 48px var(--peach-glow)); }5149  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }5150}51515152@keyframes peach-pro-wordmark-in {5153  from { opacity: 0; transform: translateY(4px); }5154  to   { opacity: 1; transform: translateY(0); }5155}51565157@keyframes peach-pro-fade-out {5158  from { opacity: 1; }5159  to   { opacity: 0; }5160}51615162.peach-pro-celebration {5163  background:5164    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5165    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5166    var(--peach-bg);5167  border: 1px solid var(--peach-t3);5168  box-shadow:5169    0 2px 8px rgba(0,0,0,0.55),5170    0 14px 48px rgba(0,0,0,0.7),5171    0 0 0 1px rgba(240,232,216,0.04);5172  overflow: hidden;5173  width: 320px;5174  height: 520px;5175  display: flex;5176  flex-direction: column;5177  align-items: center;5178  justify-content: center;5179  gap: 8px;5180  padding: 32px 24px;5181  text-align: center;5182}51835184.peach-pro-celebration.is-leaving {5185  animation: peach-pro-fade-out 400ms ease forwards;5186}51875188.peach-pro-bloom-target {5189  display: flex;5190  align-items: center;5191  justify-content: center;5192  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;5193  margin-bottom: 12px;5194}51955196.peach-pro-bloom-icon {5197  width: 48px;5198  height: 48px;5199}52005201.peach-pro-wordmark {5202  font-family: var(--font-display);5203  font-size: 22px;5204  font-style: italic;5205  font-weight: 400;5206  color: var(--peach-accent);5207  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;5208}52095210.peach-pro-thankyou {5211  font-size: 0.75rem;5212  font-style: italic;5213  color: var(--peach-t2);5214  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;5215}52165217/* ── Pending Pro notice banner (shown after background sync gate fires) ── */5218.peach-pro-notice-banner {5219  display: flex;5220  align-items: center;5221  gap: 8px;5222  padding: 7px 12px;5223  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));5224  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);5225  font-size: 0.6875rem;5226  color: var(--peach-t2);5227  font-family: "IBM Plex Mono", monospace;5228  flex-shrink: 0;5229}52305231.peach-pro-notice-link {5232  background: none;5233  border: none;5234  padding: 0;5235  cursor: pointer;5236  font-size: 0.6875rem;5237  color: var(--peach-accent);5238  font-family: "IBM Plex Mono", monospace;5239  margin-left: auto;5240  white-space: nowrap;5241}52425243.peach-pro-notice-close {5244  background: none;5245  border: none;5246  padding: 0 0 0 4px;5247  cursor: pointer;5248  font-size: 0.625rem;5249  color: var(--peach-t3);5250  line-height: 1;5251}52525253/* ─── First-run onboarding ──────────────────────────────────────────────5254   Three-card welcome shown once before vault creation. The PeachScript5255   rune background drifts behind everything at very low opacity — it's5256   atmosphere, not focus. The cards themselves use the same panel5257   language as the rest of the popup so the transition into NewVault is5258   continuous, not a jarring switch of visual register. */52595260.peach-onboarding {5261  position: relative;5262  display: flex;5263  flex-direction: column;5264  width: 100%;5265  height: 100%;5266  padding: 16px 16px 18px;5267  box-sizing: border-box;5268  overflow: hidden;5269  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;5270}52715272.peach-onboarding.is-completing {5273  animation: peach-onboard-exit 200ms ease-out forwards;5274}52755276.peach-rune-background {5277  position: absolute;5278  inset: 0;5279  width: 100%;5280  height: 100%;5281  pointer-events: none;5282  z-index: 0;5283  transition: opacity 500ms ease-out;5284}52855286.peach-onboarding.is-completing .peach-rune-background {5287  opacity: 0;5288}52895290.peach-onboarding-header {5291  position: relative;5292  z-index: 1;5293  display: flex;5294  align-items: center;5295  margin-bottom: 14px;5296}52975298.peach-onboarding-card {5299  position: relative;5300  z-index: 1;5301  flex: 1;5302  min-height: 0;5303  display: flex;5304  flex-direction: column;5305  gap: 10px;5306  padding: 22px 20px;5307  justify-content: center;5308  border-radius: 16px;5309  border: 1px solid var(--peach-t3);5310  background:5311    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));5312  backdrop-filter: blur(3px);5313  -webkit-backdrop-filter: blur(3px);5314  box-shadow:5315    inset 0 1px 0 rgba(240, 232, 216, 0.04),5316    0 12px 28px rgba(0, 0, 0, 0.12);5317  cursor: pointer;5318  user-select: none;5319  overflow-y: auto;5320  scrollbar-width: none;5321  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;5322}53235324.peach-onboarding-card::-webkit-scrollbar {5325  display: none;5326}53275328.peach-onboarding-card.is-exiting {5329  animation: peach-card-out 120ms ease-in forwards;5330  pointer-events: none;5331}53325333/* The final card carries the choice rows on top of the full intro copy.5334 * The "Already using Peach?" block is a separate decision section — float it5335 * toward the bottom so the copy breathes and no dead gap pools under it5336 * (scroll stays available as a fallback on shorter viewports). */5337.peach-onboarding-card--final {5338  gap: 8px;5339  padding-top: 20px;5340  padding-bottom: 16px;5341  justify-content: flex-start;5342}53435344.peach-onboarding-card--final .peach-onboarding-body {5345  font-size: 0.75rem;5346  line-height: 1.5;5347}53485349.peach-onboarding-card--final .peach-onboarding-choice {5350  min-height: 40px;5351  padding: 6px 10px;5352}53535354.peach-onboarding-card--final .peach-onboarding-choice-row {5355  gap: 6px;5356}53575358.peach-onboarding-card--final .peach-onboarding-choice-heading {5359  margin: auto 0 -2px;5360}53615362.peach-onboarding-card-headline {5363  margin: 0;5364  font-family: var(--font-display);5365  font-style: italic;5366  font-weight: 400;5367  font-size: 22px;5368  line-height: 1.05;5369  color: var(--peach-t0);5370  white-space: pre-line;5371}53725373.peach-onboarding-divider {5374  margin: 4px 0 6px;5375  border: 0;5376  border-top: 1px solid var(--peach-t3);5377  width: 100%;5378}53795380.peach-onboarding-body {5381  margin: 0;5382  font-size: 0.8125rem;5383  line-height: 1.6;5384  color: var(--peach-t1);5385}53865387.peach-onboarding-warning {5388  display: flex;5389  align-items: flex-start;5390  gap: 8px;5391  margin: 6px 0 0;5392  padding-top: 8px;5393  border-top: 1px dashed var(--peach-t3);5394  font-size: 0.8125rem;5395  line-height: 1.5;5396  color: var(--peach-t1);5397}53985399.peach-onboarding-warning-icon {5400  color: var(--peach-accent);5401  font-size: 0.8125rem;5402  line-height: 1.5;5403  flex: 0 0 auto;5404}54055406.peach-onboarding-nav {5407  position: relative;5408  z-index: 1;5409  display: grid;5410  grid-template-columns: 1fr auto 1fr;5411  align-items: center;5412  margin-top: 12px;5413  padding: 0 4px;5414}54155416.peach-onboarding-next {5417  justify-self: end;5418}54195420.peach-onboarding-back {5421  justify-self: start;5422}54235424.peach-onboarding-dots {5425  display: flex;5426  align-items: center;5427  gap: 6px;5428}54295430.peach-onboarding-dot {5431  width: 6px;5432  height: 6px;5433  border-radius: 50%;5434  background: var(--peach-t2);5435  transition: width 200ms ease, height 200ms ease, background 200ms ease;5436}54375438.peach-onboarding-dot.is-active {5439  width: 8px;5440  height: 8px;5441  background: var(--peach-accent);5442}54435444.peach-onboarding-next {5445  background: none;5446  border: none;5447  padding: 4px 0;5448  cursor: pointer;5449  font-family: "IBM Plex Mono", monospace;5450  font-size: 0.6875rem;5451  letter-spacing: 0.04em;5452  color: var(--peach-t1);5453  transition: color 150ms ease;5454}54555456.peach-onboarding-next:hover {5457  color: var(--peach-t0);5458}54595460.peach-onboarding-next:disabled {5461  opacity: 0.5;5462  cursor: default;5463}54645465.peach-onboarding-back {5466  background: none;5467  border: none;5468  padding: 4px 0;5469  cursor: pointer;5470  font-family: "IBM Plex Mono", monospace;5471  font-size: 0.6875rem;5472  letter-spacing: 0.04em;5473  color: var(--peach-t2);5474  transition: color 150ms ease;5475}54765477.peach-onboarding-back:hover {5478  color: var(--peach-t0);5479}54805481.peach-onboarding-back:disabled {5482  opacity: 0.5;5483  cursor: default;5484}54855486/* Reserve back-button width on the first card so the dots stay centred */5487.peach-onboarding-back-spacer {5488  width: 44px;5489}54905491.peach-onboarding-choice-row {5492  display: grid;5493  grid-template-columns: 1fr;5494  gap: 8px;5495}54965497.peach-onboarding-choice-heading {5498  margin: 8px 0 -2px;5499  color: var(--peach-t1);5500  font-family: "IBM Plex Mono", monospace;5501  font-size: 0.6875rem;5502  letter-spacing: 0.04em;5503  text-transform: uppercase;5504}55055506.peach-onboarding-choice {5507  min-height: 48px;5508  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);5509  border-radius: 8px;5510  padding: 8px 10px;5511  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);5512  color: var(--peach-t0);5513  font-size: 0.76rem;5514  font-weight: 700;5515  text-align: left;5516}55175518.peach-onboarding-choice-label {5519  display: flex;5520  align-items: center;5521  gap: 6px;5522}55235524.peach-onboarding-choice-detail {5525  display: block;5526}55275528.peach-onboarding-choice-detail {5529  margin-top: 2px;5530  color: var(--peach-t1);5531  font-size: 0.625rem;5532  font-weight: 400;5533  line-height: 1.35;5534}55355536.peach-onboarding-choice--adopt {5537  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);5538  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);5539}55405541.peach-adopt-vault {5542  position: relative;5543  min-height: 100%;5544  padding: 22px;5545  display: grid;5546  place-items: center;5547}55485549.peach-adopt-vault--pair {5550  padding: 10px;5551  overflow-y: auto;5552  scrollbar-width: none;5553}55545555.peach-adopt-vault--pair::-webkit-scrollbar {5556  display: none;5557}55585559.peach-adopt-card {5560  position: relative;5561  z-index: 1;5562  width: min(100%, 330px);5563  padding: 20px;5564  border-radius: 8px;5565  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);5566  background: color-mix(in srgb, var(--peach-surface) 90%, transparent);5567  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);5568}55695570.peach-adopt-card--pair {5571  width: 100%;5572  max-height: 500px;5573  margin: auto;5574  padding: 14px 16px 12px;5575  overflow-y: auto;5576  scrollbar-width: none;5577  border: 0;5578  border-radius: 16px;5579  background:5580    radial-gradient(5581      circle at 50% -10%,5582      color-mix(in srgb, var(--peach-accent) 14%, transparent),5583      transparent 38%5584    ),5585    color-mix(in srgb, var(--peach-surface) 94%, transparent);5586}55875588.peach-adopt-card--pair::-webkit-scrollbar {5589  display: none;5590}55915592.peach-adopt-card h1 {5593  margin: 0 0 10px;5594  font-family: var(--font-display);5595  font-style: italic;5596  font-weight: 400;5597  font-size: 1.42rem;5598  line-height: 1.15;5599}56005601.peach-adopt-card p {5602  margin: 0 0 14px;5603  color: var(--peach-t1);5604  line-height: 1.35;5605}56065607.peach-adopt-input {5608  margin-bottom: 12px;5609}56105611.peach-adopt-card textarea.peach-adopt-input {5612  width: 100%;5613  resize: vertical;5614  overflow-wrap: anywhere;5615  font-family: "IBM Plex Mono", monospace;5616  font-size: 0.64rem;5617}56185619.peach-adoption-source-invitation {5620  display: flex;5621  flex-direction: column;5622  align-items: center;5623  gap: 10px;5624  padding: 4px 18px 16px;5625  text-align: center;5626}56275628.peach-pair-qr {5629  display: block;5630  margin-inline: auto;5631  max-width: min(224px, 100%);5632  height: auto;5633  padding: 8px;5634  border-radius: 10px;5635  background: #fff;5636}56375638.peach-adopt-card > .peach-btn + .peach-btn {5639  margin-top: 8px;5640}56415642.peach-adopt-actions {5643  display: flex;5644  gap: 10px;5645  margin-top: 14px;5646}56475648.peach-adopt-actions > button {5649  flex: 1;5650}56515652.peach-adopt-pairing {5653  text-align: center;5654}56555656.peach-adopt-pairing h1 {5657  max-width: 260px;5658  margin: 0 auto 6px;5659  color: var(--peach-t0);5660  font-family: var(--font-display, Georgia, serif);5661  font-size: 1.42rem;5662  font-style: italic;5663  font-weight: 500;5664  line-height: 1.12;5665  text-wrap: balance;5666}56675668.peach-adopt-pairing .peach-adopt-pair-lede {5669  max-width: 258px;5670  margin: 0 auto;5671  color: color-mix(in srgb, var(--peach-t0) 82%, var(--peach-bg));5672  font-size: 0.73rem;5673  line-height: 1.42;5674  text-wrap: pretty;5675}56765677.peach-pair-stage.peach-adopt-bird-stage {5678  width: min(100%, 260px);5679  height: 102px;5680  margin: -6px auto 2px;5681}56825683.peach-adopt-bird-stage .peach-pair-bird-slot,5684.peach-adopt-bird-stage .peach-pair-bird {5685  width: 90px;5686  height: 90px;5687}56885689.peach-adopt-bird-stage .peach-pair-bird-slot-desktop {5690  left: 12px;5691}56925693.peach-adopt-bird-stage .peach-pair-bird-slot-mobile {5694  right: 12px;5695}56965697.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-desktop {5698  --bb-x: 12px;5699  transform: translateX(12px);5700}57015702.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-mobile {5703  --bb-x: -12px;5704  transform: translateX(-12px);5705}57065707.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot {5708  animation: peach-adopt-happy-bob 0.8s ease-in-out infinite;5709}57105711.peach-pair-stage.peach-adopt-bird-stage.act-paired .peach-pair-bird-slot-mobile {5712  animation-delay: 0.18s;5713  animation-direction: reverse;5714}57155716.peach-adopt-pairing.is-complete .peach-pair-stage.peach-adopt-bird-stage {5717  width: 100%;5718  height: 135px;5719  margin: -8px auto 6px;5720}57215722.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot,5723.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird {5724  width: 112px;5725  height: 112px;5726}57275728.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot-desktop {5729  left: 0;5730  --bb-x: 0;5731  transform: translateX(0);5732}57335734.peach-adopt-pairing.is-complete .peach-adopt-bird-stage .peach-pair-bird-slot-mobile {5735  right: 0;5736  --bb-x: 0;5737  transform: translateX(0);5738}57395740.peach-adopt-pairing.is-complete h1 {5741  font-size: 1.6rem;5742}57435744.peach-adopt-pairing.is-complete .peach-adopt-pair-lede {5745  font-size: 0.78rem;5746}57475748@keyframes peach-adopt-happy-bob {5749  0%, 100% {5750    transform: translateX(var(--bb-x, 0)) translateY(0) rotate(0deg);5751  }5752  35% {5753    transform: translateX(var(--bb-x, 0)) translateY(-8px) rotate(-3deg);5754  }5755  70% {5756    transform: translateX(var(--bb-x, 0)) translateY(-3px) rotate(2deg);5757  }5758}57595760.peach-adopt-connection {5761  position: absolute;5762  left: 50%;5763  bottom: 38px;5764  width: 78px;5765  height: 1px;5766  translate: -50% 0;5767  background: color-mix(in srgb, var(--peach-accent) 62%, transparent);5768  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 56%, transparent);5769}57705771.peach-adopt-pairing.is-complete .peach-adopt-connection {5772  bottom: 49px;5773  width: 92px;5774}57755776.peach-adopt-connection::after {5777  content: "";5778  position: absolute;5779  left: 50%;5780  top: 50%;5781  width: 7px;5782  height: 7px;5783  border-radius: 50%;5784  translate: -50% -50%;5785  background: var(--peach-accent);5786  box-shadow:5787    0 0 0 4px color-mix(in srgb, var(--peach-accent) 17%, transparent),5788    0 0 14px color-mix(in srgb, var(--peach-accent) 74%, transparent);5789  animation: peach-adopt-connection-pulse 1.1s ease-in-out infinite;5790}57915792@keyframes peach-adopt-connection-pulse {5793  0%, 100% { scale: 0.8; opacity: 0.72; }5794  50% { scale: 1.14; opacity: 1; }5795}57965797.peach-adopt-qr-wrap {5798  min-height: 160px;5799  display: grid;5800  place-items: center;5801}58025803.peach-adopt-qr-wrap .peach-hint-error {5804  margin: 12px 0;5805}58065807.peach-adopt-pairing .peach-adopt-pair-status {5808  margin: 0;5809  color: var(--peach-t0);5810  font-size: 0.75rem;5811}58125813.peach-adopt-confirmation {5814  margin-top: 18px;5815  padding: 8px 0 4px;5816}58175818.peach-adopt-confirmation .peach-adopt-confirmation-label {5819  margin: 0 0 7px;5820  color: color-mix(in srgb, var(--peach-accent) 72%, var(--peach-t0));5821  font-family: var(--peach-mono, "IBM Plex Mono", monospace);5822  font-size: 0.625rem;5823  font-weight: 700;5824  letter-spacing: 0.14em;5825}58265827.peach-adopt-confirmation .peach-adoption-sas {5828  margin: 0 auto;5829  padding: 12px 14px;5830  border-color: color-mix(in srgb, var(--peach-accent) 36%, transparent);5831  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);5832}58335834.peach-adopt-confirmation .peach-adoption-sas strong {5835  color: color-mix(in srgb, var(--peach-accent) 84%, var(--peach-t0));5836  font-size: 1.58rem;5837  text-shadow: 0 0 16px color-mix(in srgb, var(--peach-accent) 30%, transparent);5838}58395840.peach-adopt-confirmation .peach-adopt-confirmation-help {5841  max-width: 270px;5842  margin: 8px auto 0;5843  color: color-mix(in srgb, var(--peach-t0) 78%, var(--peach-bg));5844  font-size: 0.7rem;5845  line-height: 1.45;5846}58475848.peach-adopt-privacy {5849  display: flex;5850  align-items: flex-start;5851  gap: 9px;5852  margin-top: 10px;5853  padding: 8px 9px;5854  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);5855  border-radius: 10px;5856  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);5857  text-align: left;5858}58595860.peach-adopt-privacy svg {5861  width: 16px;5862  height: 16px;5863  flex: 0 0 auto;5864  margin-top: 1px;5865  fill: none;5866  stroke: color-mix(in srgb, var(--peach-accent) 74%, var(--peach-t0));5867  stroke-linecap: round;5868  stroke-linejoin: round;5869  stroke-width: 1.7;5870}58715872.peach-adopt-pairing .peach-adopt-privacy p {5873  margin: 0;5874  color: color-mix(in srgb, var(--peach-t0) 76%, var(--peach-bg));5875  font-size: 0.62rem;5876  line-height: 1.4;5877}58785879.peach-adopt-privacy strong {5880  color: var(--peach-t0);5881  font-weight: 700;5882}58835884.peach-adopt-pair-actions {5885  margin-top: 9px;5886}58875888.peach-adopt-pair-actions > button {5889  width: 100%;5890}58915892.peach-adopt-paired-status {5893  display: inline-flex;5894  align-items: center;5895  gap: 8px;5896  margin: 22px auto 18px;5897  padding: 9px 13px;5898  border: 1px solid color-mix(in srgb, var(--peach-accent) 30%, transparent);5899  border-radius: 999px;5900  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5901  color: color-mix(in srgb, var(--peach-accent) 78%, var(--peach-t0));5902  font-family: var(--peach-mono, "IBM Plex Mono", monospace);5903  font-size: 0.66rem;5904  font-weight: 700;5905  letter-spacing: 0.04em;5906}59075908.peach-adopt-paired-status span {5909  width: 7px;5910  height: 7px;5911  border-radius: 50%;5912  background: var(--peach-accent);5913  box-shadow: 0 0 8px color-mix(in srgb, var(--peach-accent) 68%, transparent);5914}59155916@media (prefers-reduced-motion: reduce) {5917  .peach-adopt-connection::after {5918    animation: none;5919  }5920}59215922@keyframes peach-onboard-enter {5923  from { opacity: 0; transform: translateY(20px); }5924  to   { opacity: 1; transform: translateY(0); }5925}59265927@keyframes peach-onboard-exit {5928  from { opacity: 1; }5929  to   { opacity: 0; }5930}59315932@keyframes peach-card-in {5933  from { opacity: 0; transform: translateX(12px); }5934  to   { opacity: 1; transform: translateX(0); }5935}59365937@keyframes peach-card-out {5938  from { opacity: 1; transform: translateX(0); }5939  to   { opacity: 0; transform: translateX(-12px); }5940}59415942/* ─── New vault screen — matched to onboarding card language ─────────── */59435944/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage5945   rule (same element) without loosening the unlock/restore screens. The5946   create-vault screen is the only vault-stage view tall enough to overflow5947   the 520px popup, so its spacing is tuned to fit header → card → restore →5948   recovery warning with nothing clipped. */5949.peach-screen.peach-newvault {5950  position: relative;5951  display: flex;5952  flex-direction: column;5953  gap: 12px;5954  padding: 16px 16px 12px;5955  overflow: hidden;5956}59575958/* Suppress the warm-blob ambient art inherited from .lock-screen — the5959   new vault card now carries the visual weight. */5960.peach-newvault::before {5961  content: none;5962}59635964/* Wordmark sits in the exact same spot as on the onboarding cards; the5965   back button takes the right side so the wordmark never shifts. */5966.peach-newvault-header {5967  position: relative;5968  z-index: 2;5969  display: flex;5970  align-items: center;5971  justify-content: space-between;5972  gap: 10px;5973  margin-bottom: 2px;5974}59755976.peach-newvault-back {5977  display: inline-flex;5978  align-items: center;5979  gap: 4px;5980  background: transparent;5981  border: none;5982  color: var(--peach-t2);5983  font-family: "IBM Plex Mono", monospace;5984  font-size: 0.625rem;5985  letter-spacing: 0.06em;5986  cursor: pointer;5987  padding: 4px 6px;5988  border-radius: 6px;5989  transition: color 120ms ease, background 120ms ease;5990}59915992.peach-newvault-back:hover {5993  color: var(--peach-t0);5994  background: rgba(240, 232, 216, 0.04);5995}59965997.peach-newvault-mark {5998  position: absolute;5999  right: -12px;6000  top: 44px;6001  width: 110px;6002  height: 110px;6003  pointer-events: none;6004  opacity: 0.10;6005  filter: saturate(0.9);6006  z-index: 0;6007}6008.peach-newvault-mark-art {6009  width: 100%;6010  height: 100%;6011}6012.peach-newvault-mark-art path:nth-child(1) {6013  fill: rgba(123, 144, 96, 0.88);6014}6015.peach-newvault-mark-art path:nth-child(2) {6016  stroke: rgba(94, 122, 66, 0.95);6017}60186019.peach-newvault-card {6020  position: relative;6021  z-index: 1;6022  flex: 1;6023  display: flex;6024  flex-direction: column;6025  gap: 8px;6026  padding: 16px 20px 14px;6027  border-radius: 16px;6028  border: 1px solid var(--peach-t3);6029  background:6030    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6031  backdrop-filter: blur(3px);6032  -webkit-backdrop-filter: blur(3px);6033  box-shadow:6034    inset 0 1px 0 rgba(240, 232, 216, 0.04),6035    0 12px 28px rgba(0, 0, 0, 0.12);6036  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6037}60386039/* Create-vault card only (the restore card lays out differently — see6040   .peach-restore-card). The warning hugs the glass edge with a small6041   margin; leftover height distributes between elements so they breathe6042   instead of leaving one dead gap. Scroll stays available as a fallback6043   on shorter viewports. */6044.peach-newvault-card:not(.peach-restore-card) {6045  min-height: 0;6046  gap: 10px;6047  padding: 14px 22px 16px;6048  justify-content: space-between;6049  overflow-y: auto;6050  scrollbar-width: none;6051}60526053.peach-newvault-card:not(.peach-restore-card)::-webkit-scrollbar {6054  display: none;6055}60566057.peach-newvault-headline {6058  margin: 0;6059  font-family: var(--font-display);6060  font-style: italic;6061  font-weight: 400;6062  font-size: 24px;6063  line-height: 1.05;6064  color: var(--peach-t0);6065  white-space: pre-line;6066}60676068.peach-newvault-divider {6069  margin: 2px 0 4px;6070  border: 0;6071  border-top: 1px solid var(--peach-t3);6072  width: 100%;6073}60746075.peach-newvault-field {6076  display: flex;6077  flex-direction: column;6078  gap: 4px;6079}60806081.peach-newvault-label-row {6082  display: flex;6083  align-items: center;6084  justify-content: space-between;6085}60866087/* Monospace input scaled to the card. Replaces the 22px unlock-input6088   so the placeholder no longer overflows and the field reads as part6089   of the same surface as the body copy. */6090.peach-newvault-input {6091  font-size: 0.875rem;6092  letter-spacing: 0.18em;6093  padding: 8px 0;6094}6095.peach-newvault-input::placeholder {6096  letter-spacing: 0.18em;6097  color: var(--peach-t2);6098}60996100.peach-newvault-hint {6101  margin: 2px 0 0;6102  font-family: "IBM Plex Mono", monospace;6103  font-size: 0.625rem;6104  color: var(--peach-t2);6105  letter-spacing: 0.04em;6106}61076108.peach-newvault-submit {6109  margin-top: 4px;6110}61116112.peach-newvault-warning {6113  display: flex;6114  align-items: flex-start;6115  gap: 8px;6116  margin: 0;6117  padding-top: 8px;6118  border-top: 1px dashed var(--peach-t3);6119  font-size: 0.75rem;6120  line-height: 1.45;6121  color: var(--peach-t1);6122}61236124.peach-newvault-warning-icon {6125  color: var(--peach-accent);6126  font-size: 0.8125rem;6127  line-height: 1.4;6128  flex: 0 0 auto;6129}61306131/* Settings body — warm accent gradient gives the glass something to blur against */6132.peach-settings-body {6133  background:6134    radial-gradient(6135      ellipse at 30% 20%,6136      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6137      transparent 60%6138    );6139}61406141/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6142/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6143 * Two severity levels: "warn" for actions that are dangerous-but-recoverable6144 * (replacing the vault from a backup file) and "hazard" for actions that6145 * are absolutely irreversible (Panic). Both use the same card scaffold so6146 * they read as a pair, but the colour family signals the severity at a6147 * glance — yellow for caution, red for don't.6148 */6149.peach-danger-card {6150  --danger-tint: 235, 158, 52; /* amber */6151  display: flex;6152  flex-direction: column;6153  gap: 8px;6154  padding: 14px;6155  margin-top: 10px;6156  border-radius: 12px;6157  border: 1px solid rgba(var(--danger-tint), 0.32);6158  background:6159    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),6160    rgba(var(--danger-tint), 0.04);6161  box-shadow:6162    inset 0 1px 0 rgba(var(--danger-tint), 0.08),6163    0 0 24px rgba(var(--danger-tint), 0.04);6164  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;6165}61666167.peach-danger-card:hover {6168  border-color: rgba(var(--danger-tint), 0.55);6169  box-shadow:6170    inset 0 1px 0 rgba(var(--danger-tint), 0.12),6171    0 0 36px rgba(var(--danger-tint), 0.10);6172}61736174.peach-danger-card--hazard {6175  --danger-tint: 220, 38, 38; /* red */6176}61776178.peach-danger-card-head {6179  display: flex;6180  align-items: center;6181  gap: 10px;6182}61836184.peach-danger-card-glyph {6185  width: 28px;6186  height: 28px;6187  flex-shrink: 0;6188  display: flex;6189  align-items: center;6190  justify-content: center;6191  border-radius: 8px;6192  background: rgba(var(--danger-tint), 0.12);6193  color: rgba(var(--danger-tint), 0.95);6194  font-size: 1rem;6195  line-height: 1;6196}61976198.peach-danger-card-title {6199  margin: 0;6200  font-size: 0.8125rem;6201  font-weight: 600;6202  color: rgba(var(--danger-tint), 0.92);6203  letter-spacing: 0.01em;6204}62056206.peach-danger-card-copy {6207  margin: 0;6208  font-size: 0.6875rem;6209  line-height: 1.5;6210  color: var(--peach-t2);6211}62126213.peach-danger-card-button {6214  width: 100%;6215  padding: 9px;6216  margin-top: 4px;6217  background: transparent;6218  border: 1px solid rgba(var(--danger-tint), 0.45);6219  border-radius: 8px;6220  color: rgba(var(--danger-tint), 0.9);6221  font-size: 0.75rem;6222  font-weight: 500;6223  letter-spacing: 0.02em;6224  cursor: pointer;6225  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6226}62276228.peach-danger-card-button:hover {6229  background: rgba(var(--danger-tint), 0.10);6230  border-color: rgba(var(--danger-tint), 0.75);6231  color: rgb(var(--danger-tint));6232}62336234.peach-adoption-sas {6235  margin: 16px auto 0;6236  padding: 12px 16px;6237  border: 1px solid color-mix(in srgb, var(--peach-t0) 18%, transparent);6238  border-radius: 10px;6239  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);6240  color: var(--peach-t0);6241  text-align: center;6242}62436244.peach-adoption-sas strong {6245  font-size: 1.65rem;6246  font-variant-numeric: tabular-nums;6247  letter-spacing: 0.18em;6248  white-space: nowrap;6249}62506251/* ── Panic flow (three-step destruction) ───────────────────────────────── */6252.peach-panic {6253  display: flex;6254  flex-direction: column;6255  flex: 1;6256  min-height: 0;6257  padding: 28px 20px 20px;6258  gap: 18px;6259  overflow-y: auto;6260  scrollbar-width: none;6261  -ms-overflow-style: none;6262}62636264.peach-panic::-webkit-scrollbar { display: none; }62656266.peach-panic-step2 {6267  background: rgba(220, 38, 38, 0.04);6268}62696270.peach-panic-step3 {6271  position: relative;6272  background: #0f0505;6273  color: #ffffff;6274  overflow: hidden;6275}62766277.peach-panic-rune-bg {6278  position: absolute;6279  inset: 0;6280  opacity: 0.22;6281  pointer-events: none;6282  overflow: hidden;6283}62846285.peach-panic-rune-bg canvas {6286  width: 100% !important;6287  height: 100% !important;6288}62896290.peach-panic-icon {6291  font-size: 32px;6292  color: rgb(220, 38, 38);6293  line-height: 1;6294}62956296.peach-panic-title {6297  margin: 0;6298  font-size: 18px;6299  font-weight: 500;6300  color: var(--peach-t1);6301}63026303.peach-panic-title--severe {6304  font-size: 20px;6305  font-weight: 700;6306  color: rgb(220, 38, 38);6307}63086309.peach-panic-body {6310  margin: 0;6311  font-size: 0.8125rem;6312  line-height: 1.55;6313  color: var(--peach-t2);6314}63156316.peach-panic-body--severe {6317  color: rgba(220, 38, 38, 0.85);6318}63196320.peach-panic-body--final {6321  font-size: 1rem;6322  font-weight: 700;6323  color: rgb(255, 80, 80);6324  line-height: 1.4;6325}63266327.peach-panic-body--final-intro {6328  font-size: 1rem;6329  color: #ffffff;6330  font-weight: 400;6331}63326333.peach-panic-divider {6334  height: 1px;6335  background: rgba(255, 255, 255, 0.08);6336  margin: 4px 0;6337}63386339.peach-panic-confirm-input {6340  width: 100%;6341  padding: 10px 12px;6342  background: rgba(255, 255, 255, 0.02);6343  border: 1px solid rgba(220, 38, 38, 0.4);6344  border-radius: 8px;6345  color: var(--peach-t1);6346  font-family: "IBM Plex Mono", monospace;6347  font-size: 0.875rem;6348  letter-spacing: 0.12em;6349  text-transform: uppercase;6350}63516352.peach-panic-confirm-input:focus {6353  outline: none;6354  border-color: rgb(220, 38, 38);6355}63566357.peach-panic-confirm-input--match {6358  border-color: rgb(220, 38, 38);6359  color: rgb(220, 38, 38);6360}63616362.peach-panic-confirm-label {6363  font-size: 0.6875rem;6364  color: var(--peach-t2);6365  margin: 0 0 -8px;6366  letter-spacing: 0.06em;6367}63686369.peach-panic-actions {6370  display: flex;6371  flex-direction: column;6372  gap: 10px;6373  margin-top: auto;6374}63756376.peach-panic-button {6377  width: 100%;6378  padding: 12px;6379  border-radius: 8px;6380  font-size: 0.8125rem;6381  cursor: pointer;6382  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6383}63846385.peach-panic-button--primary {6386  background: var(--peach-accent);6387  border: 1px solid var(--peach-accent);6388  color: #ffffff;6389  font-weight: 600;6390}63916392.peach-panic-button--primary:hover {6393  background: color-mix(in srgb, var(--peach-accent) 88%, white);6394}63956396.peach-panic-button--danger {6397  background: rgb(220, 38, 38);6398  border: 1px solid rgb(220, 38, 38);6399  color: #ffffff;6400  font-weight: 600;6401}64026403.peach-panic-button--danger:disabled {6404  opacity: 0.35;6405  cursor: not-allowed;6406}64076408.peach-panic-button--ghost {6409  background: transparent;6410  border: 1px solid rgba(255, 255, 255, 0.18);6411  color: var(--peach-t2);6412}64136414.peach-panic-button--ghost:hover {6415  border-color: rgba(255, 255, 255, 0.32);6416  color: var(--peach-t1);6417}64186419.peach-panic-link {6420  background: transparent;6421  border: none;6422  padding: 4px 0;6423  color: rgba(220, 38, 38, 0.65);6424  font-size: 0.75rem;6425  cursor: pointer;6426  text-align: left;6427  text-decoration: underline;6428  text-underline-offset: 3px;6429}64306431.peach-panic-link:hover {6432  color: rgb(220, 38, 38);6433}64346435.peach-panic-bar {6436  background: rgb(220, 38, 38);6437  padding: 16px 20px;6438  margin: -28px -20px 0;6439  text-align: center;6440  font-size: 0.8125rem;6441  font-weight: 700;6442  letter-spacing: 0.12em;6443  color: #ffffff;6444}64456446.peach-panic-final-button {6447  width: 100%;6448  padding: 14px;6449  background: rgb(220, 38, 38);6450  border: none;6451  border-radius: 8px;6452  color: #ffffff;6453  font-size: 0.875rem;6454  font-weight: 700;6455  letter-spacing: 0.08em;6456  text-transform: uppercase;6457  cursor: pointer;6458  animation: peach-panic-pulse 2s ease-in-out infinite;6459}64606461.peach-settings-license {6462  margin-top: 10px;6463  padding-top: 10px;6464  border-top: 1px solid var(--peach-t3);6465}64666467.peach-settings-label {6468  font-size: 0.625rem;6469  letter-spacing: 0.08em;6470  color: var(--peach-t2);6471  display: block;6472  margin-bottom: 6px;6473}64746475.peach-settings-license-row {6476  display: flex;6477  align-items: center;6478  justify-content: space-between;6479  gap: 8px;6480}64816482.peach-settings-license-key {6483  font-family: 'IBM Plex Mono', monospace;6484  font-size: 0.75rem;6485  color: var(--peach-t0);6486  letter-spacing: 0.04em;6487  word-break: break-all;6488  flex: 1;6489  min-width: 0;6490}64916492.peach-settings-license-key--masked {6493  font-family: 'IBM Plex Mono', monospace;6494  font-size: 0.6rem;6495  color: var(--peach-t1);6496  letter-spacing: 0.18em;6497  user-select: none;6498}64996500.peach-settings-license-actions {6501  display: flex;6502  align-items: center;6503  gap: 2px;6504  flex-shrink: 0;6505}65066507.peach-settings-license-copy {6508  font-size: 0.6875rem;6509  color: var(--peach-accent);6510  background: transparent;6511  border: none;6512  cursor: pointer;6513  padding: 4px 8px;6514  border-radius: 4px;6515  flex-shrink: 0;6516  transition: opacity 150ms ease;6517}65186519.peach-settings-license-copy:hover {6520  opacity: 0.75;6521}65226523.peach-settings-license-toggle {6524  display: flex;6525  align-items: center;6526  justify-content: center;6527  background: transparent;6528  border: none;6529  cursor: pointer;6530  padding: 4px 6px;6531  border-radius: 4px;6532  color: var(--peach-t2);6533  transition: color 150ms ease;6534}65356536.peach-settings-license-toggle:hover {6537  color: var(--peach-t1);6538}65396540@keyframes peach-panic-pulse {6541  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }6542  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }6543}65446545[data-motion="reduce"] .peach-panic-final-button {6546  animation: none;6547}65486549/* Vault History — Settings → Vault sub-view */65506551.peach-history-list {6552  border: 1px solid var(--peach-border);6553  border-radius: 8px;6554  overflow: hidden;6555  margin: 8px 0 4px;6556}65576558.peach-history-row {6559  display: flex;6560  align-items: center;6561  justify-content: space-between;6562  padding: 9px 12px;6563  gap: 10px;6564  border-bottom: 1px solid var(--peach-border);6565}65666567.peach-history-row:last-child {6568  border-bottom: none;6569}65706571.peach-history-meta {6572  display: flex;6573  flex-direction: column;6574  gap: 2px;6575  min-width: 0;6576  flex: 1;6577}65786579.peach-history-time {6580  font-size: 0.75rem;6581  font-family: 'IBM Plex Mono', ui-monospace, monospace;6582  color: var(--peach-t0);6583  white-space: nowrap;6584  overflow: hidden;6585  text-overflow: ellipsis;6586}65876588.peach-history-sub {6589  font-size: 0.625rem;6590  color: var(--peach-t2);6591  letter-spacing: 0.06em;6592  text-transform: uppercase;6593  white-space: nowrap;6594  overflow: hidden;6595  text-overflow: ellipsis;6596}65976598.peach-history-btn {6599  flex-shrink: 0;6600  white-space: nowrap;6601  min-width: 56px;6602  text-align: center;6603}66046605.peach-history-btn.is-busy {6606  opacity: 0.65;6607}66086609.peach-history-footer {6610  font-size: 0.625rem;6611  color: var(--peach-t3);6612  letter-spacing: 0.05em;6613  text-align: right;6614  margin: 0;6615  padding: 2px 0 0;6616}66176618/* ── Context menu + swipe-copy flash ─────────────────────── */6619.peach-context-menu-backdrop {6620  position: fixed;6621  inset: 0;6622  background: rgba(0, 0, 0, 0.45);6623  z-index: 100;6624  display: flex;6625  align-items: flex-end;6626  justify-content: center;6627  animation: peach-ctx-fade 140ms ease both;6628}6629.peach-context-menu {6630  width: min(360px, calc(100vw - 24px));6631  margin-bottom: max(env(safe-area-inset-bottom), 12px);6632  background: var(--peach-bg);6633  border: 1px solid var(--peach-t3);6634  border-radius: 14px;6635  padding: 6px;6636  display: flex;6637  flex-direction: column;6638  gap: 2px;6639  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);6640  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6641}6642@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }6643@keyframes peach-ctx-rise {6644  from { transform: translateY(16px); opacity: 0; }6645  to   { transform: translateY(0);    opacity: 1; }6646}6647.peach-context-menu-item {6648  background: transparent;6649  color: var(--peach-t0);6650  border: 0;6651  border-radius: 10px;6652  padding: 12px 14px;6653  text-align: left;6654  font: inherit;6655  cursor: pointer;6656}6657.peach-context-menu-item:hover,6658.peach-context-menu-item:focus-visible {6659  background: var(--peach-t3);6660}6661.peach-context-menu-item--danger {6662  color: var(--peach-health-bad, #d96868);6663}6664.peach-context-menu-item--cancel {6665  color: var(--peach-t2);6666  margin-top: 4px;6667  border-top: 1px solid var(--peach-t3);6668  border-radius: 0 0 10px 10px;6669}66706671/* Swipe-to-copy flash */6672.peach-entry-row.is-copy-flash {6673  animation: peach-copy-flash 600ms ease both;6674}6675@keyframes peach-copy-flash {6676  0%   { background: transparent; }6677  20%  { background: rgba(217, 153, 51, 0.32); }6678  100% { background: transparent; }6679}66806681html { font-size: 16px; }66826683/* ── Recovery word entry ─────────────────────────────────────────── */6684.peach-lock-recover-link {6685  display: block;6686  width: 100%;6687  margin-top: 12px;6688  background: none;6689  border: none;6690  font-family: "IBM Plex Mono", monospace;6691  font-size: 0.625rem;6692  letter-spacing: 0.06em;6693  color: var(--peach-t2);6694  cursor: pointer;6695  text-align: center;6696  padding: 4px;6697  transition: color 120ms ease;6698}6699.peach-lock-recover-link:hover {6700  color: var(--peach-t0);6701}67026703.lock-screen--recovery {6704  display: flex;6705  flex-direction: column;6706  align-items: stretch;6707  padding: 12px 20px 24px;6708  overflow: hidden;6709}67106711.peach-recovery-nav {6712  display: flex;6713  align-items: center;6714  position: relative;6715  z-index: 1;6716  margin-bottom: 4px;6717}67186719/* Mask runes to the top decorative band only — keep inputs and the6720   bottom CTA button clear. The bottom of the popup is reserved for6721   submit buttons; rendering runes there overlaps the button glyph. */6722.peach-rune-background--recovery {6723  -webkit-mask-image: linear-gradient(6724    to bottom,6725    black 0px, black 85px,6726    transparent 110px,6727    transparent 100%6728  );6729  mask-image: linear-gradient(6730    to bottom,6731    black 0px, black 85px,6732    transparent 110px,6733    transparent 100%6734  );6735}67366737.peach-recovery-header {6738  text-align: center;6739  margin-bottom: 0;6740  margin-top: 2px;6741}6742.peach-recovery-header .peach-onboarding-headline {6743  font-size: 1.25rem;6744  font-weight: 300;6745  letter-spacing: 0.02em;6746  /* max-width:252px inherited above is narrower than the section — without6747     auto margins the text box sits left-of-center. */6748  margin: 0 auto 4px;6749}6750.peach-recovery-header .peach-hint {6751  font-family: "IBM Plex Mono", monospace;6752  font-size: 0.625rem;6753  color: var(--peach-t1);6754  letter-spacing: 0.04em;6755  margin: 0;6756}6757.peach-recovery-header .peach-hint--warning {6758  color: var(--peach-accent);6759}67606761/* 12-word grid: 2 columns × 6 rows */6762.peach-recovery-grid {6763  display: grid;6764  grid-template-columns: repeat(2, 1fr);6765  gap: 12px 20px;6766  width: 100%;6767  margin-bottom: 0;6768}67696770.peach-recovery-word-slot {6771  display: flex;6772  align-items: center;6773  gap: 6px;6774  min-width: 0;6775}67766777.peach-recovery-word-index {6778  font-family: "IBM Plex Mono", monospace;6779  font-size: 0.5rem;6780  color: rgba(255, 255, 255, 0.35);6781  min-width: 14px;6782  flex-shrink: 0;6783  text-align: right;6784  letter-spacing: 0.04em;6785}67866787.peach-recovery-word-input {6788  flex: 1;6789  min-width: 0;6790  background: transparent;6791  border: none;6792  border-bottom: 1px solid rgba(255, 255, 255, 0.22);6793  color: var(--peach-t0);6794  font-family: "IBM Plex Mono", monospace;6795  font-size: 0.6875rem;6796  letter-spacing: 0.06em;6797  padding: 5px 2px 4px;6798  outline: none;6799  text-transform: lowercase;6800  transition: border-color 120ms ease;6801}6802.peach-recovery-word-input::placeholder {6803  color: rgba(255, 255, 255, 0.18);6804}6805.peach-recovery-word-input:focus {6806  border-bottom-color: var(--peach-accent);6807}68086809.peach-recovery-submit {6810  width: 100%;6811  margin-top: auto;6812}68136814.peach-recovery-new-password-form {6815  width: 100%;6816  display: flex;6817  flex-direction: column;6818  gap: 16px;6819  margin-bottom: 8px;6820}6821.peach-recovery-new-password-form .peach-newvault-field {6822  display: flex;6823  flex-direction: column;6824  gap: 4px;6825}68266827/* ── Recovery words display (post-create) ──────────────────────────6828   Condensed so word list + confirmation fit the 520px popup with no6829   scroll — the confirm button must never be clipped. */6830.lock-screen--recovery-display {6831  display: flex;6832  flex-direction: column;6833  align-items: stretch;6834  padding: 10px 16px 12px;6835  gap: 8px;6836  min-height: 0;6837  overflow-y: auto;6838}68396840.peach-recovery-words-display {6841  width: 100%;6842  margin-bottom: 0;6843  border: 1px solid var(--peach-t3);6844  border-radius: 8px;6845  padding: 10px 14px;6846  background: rgba(245, 240, 234, 0.04);6847}68486849.peach-recovery-words-label {6850  font-family: "IBM Plex Mono", monospace;6851  font-size: 0.5rem;6852  letter-spacing: 0.08em;6853  color: var(--peach-t2);6854  text-transform: uppercase;6855  margin-bottom: 8px;6856  text-align: center;6857}68586859.peach-recovery-word-list {6860  list-style: none;6861  margin: 0;6862  padding: 0;6863  display: grid;6864  grid-template-columns: repeat(2, 1fr);6865  gap: 5px 16px;6866}68676868.peach-recovery-word-item {6869  display: flex;6870  align-items: baseline;6871  justify-content: center;6872  gap: 5px;6873}68746875.peach-recovery-word-num {6876  font-family: "IBM Plex Mono", monospace;6877  font-size: 0.5rem;6878  color: var(--peach-accent);6879  width: 14px;6880  flex: 0 0 14px;6881  text-align: right;6882  letter-spacing: 0.04em;6883  font-variant-numeric: tabular-nums;6884}68856886.peach-recovery-download-btn {6887  display: block;6888  margin: 8px auto 0;6889  padding: 4px 10px;6890  background: transparent;6891  border: 1px solid var(--peach-border);6892  border-radius: 6px;6893  color: var(--peach-t2);6894  font-family: "IBM Plex Mono", monospace;6895  font-size: 0.5625rem;6896  letter-spacing: 0.06em;6897  text-transform: lowercase;6898  cursor: pointer;6899  transition: border-color 0.15s, color 0.15s;6900}69016902.peach-recovery-download-btn:hover {6903  border-color: var(--peach-accent);6904  color: var(--peach-t0);6905}69066907.peach-recovery-word-text {6908  font-family: "IBM Plex Mono", monospace;6909  font-size: 0.6875rem;6910  letter-spacing: 0.06em;6911  color: var(--peach-t0);6912  text-transform: lowercase;6913}69146915.peach-hint--warning {6916  color: var(--peach-accent);6917  font-style: italic;6918}6919.peach-hint--success {6920  color: var(--peach-t2);6921  font-family: "IBM Plex Mono", monospace;6922  font-size: 0.625rem;6923  letter-spacing: 0.06em;6924}69256926/* Confirmation step */6927.peach-recovery-confirm {6928  width: 100%;6929  flex: 1;6930  display: flex;6931  flex-direction: column;6932}6933.peach-recovery-confirm-label {6934  font-family: "IBM Plex Mono", monospace;6935  font-size: 0.5625rem;6936  letter-spacing: 0.04em;6937  color: var(--peach-t1);6938  text-align: center;6939  margin: 0 0 8px;6940}6941.peach-recovery-confirm-fields {6942  flex: 1;6943  display: flex;6944  flex-direction: column;6945  /* Spread the three inputs through the available height instead of pooling6946     one dead gap under them. */6947  justify-content: space-evenly;6948  gap: 8px;6949  margin-bottom: 0;6950}6951.peach-recovery-confirm-field {6952  display: flex;6953  align-items: center;6954  gap: 8px;6955}6956.peach-recovery-confirm-num {6957  font-family: "IBM Plex Mono", monospace;6958  font-size: 0.5rem;6959  color: var(--peach-accent);6960  min-width: 44px;6961  letter-spacing: 0.04em;6962}6963.peach-recovery-confirm-input {6964  flex: 1;6965  background: transparent;6966  border: none;6967  border-bottom: 1px solid var(--peach-t3);6968  color: var(--peach-t0);6969  font-family: "IBM Plex Mono", monospace;6970  font-size: 0.6875rem;6971  letter-spacing: 0.06em;6972  padding: 4px 2px 3px;6973  outline: none;6974  text-transform: lowercase;6975  transition: border-color 120ms ease;6976}6977.peach-recovery-confirm-input:focus {6978  border-bottom-color: var(--peach-accent);6979}6980.peach-recovery-confirm-input:disabled {6981  opacity: 0.4;6982  cursor: not-allowed;6983}6984.peach-recovery-confirm-btn {6985  width: 100%;6986  margin-top: 12px;6987}69886989/* ============================================================6990   Sync info sheet6991   ============================================================ */69926993.peach-btn--full {6994  width: 100%;6995}69966997/* ── Notes Mode ── */69986999/* Overlay that crossfades over the vault */7000.peach-notes-overlay {7001  position: fixed;7002  inset: 0;7003  z-index: 90;7004  opacity: 0;7005  pointer-events: none;7006  animation: peach-mode-in 220ms ease-in forwards;7007}70087009.peach-notes-overlay.is-visible {7010  opacity: 1;7011  pointer-events: auto;7012}70137014@keyframes peach-mode-in {7015  from { opacity: 0; }7016  to   { opacity: 1; }7017}70187019/* Top-level notes surface */7020.peach-notes-mode {7021  position: absolute;7022  inset: 0;7023  background:7024    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 5%, transparent) 0%, transparent 62%),7025    var(--peach-bg);7026  display: flex;7027  flex-direction: column;7028}70297030/* TOC wrapper */7031.peach-notes-toc-wrapper {7032  position: absolute;7033  inset: 0;7034  z-index: 1;7035  opacity: 1;7036  pointer-events: auto;7037  transition: opacity 200ms ease;7038}70397040.peach-notes-toc-wrapper.is-hidden {7041  opacity: 0;7042  pointer-events: none;7043}70447045/* Editor wrapper */7046.peach-notes-editor-wrapper {7047  position: absolute;7048  inset: 0;7049  z-index: 2;7050  opacity: 0;7051  pointer-events: none;7052  transition: opacity 200ms ease;7053}70547055.peach-notes-editor-wrapper.is-visible {7056  opacity: 1;7057  pointer-events: auto;7058}70597060/* TOC inner */7061.peach-notes-toc {7062  position: relative;7063  display: flex;7064  flex-direction: column;7065  height: 100%;7066  padding-top: env(safe-area-inset-top, 0px);7067  padding-bottom: env(safe-area-inset-bottom, 0px);7068}70697070/* Shared header */7071.peach-notes-header {7072  display: flex;7073  align-items: center;7074  padding: 12px 16px;7075  gap: 12px;7076  flex-shrink: 0;7077  min-height: 52px;7078  position: relative;7079  z-index: 2;7080}70817082.peach-notes-back {7083  font-size: 22px;7084  color: var(--peach-t2);7085  background: none;7086  border: none;7087  padding: 4px;7088  cursor: pointer;7089  line-height: 1;7090  flex-shrink: 0;7091  transition: color 150ms ease;7092  -webkit-tap-highlight-color: transparent;7093}70947095.peach-notes-back:active { color: var(--peach-t0); }70967097.peach-notes-header-title {7098  flex: 1;7099  font-family: 'Cormorant Garamond', serif;7100  font-style: italic;7101  font-size: 22px;7102  color: var(--peach-t0);7103  text-align: center;7104}71057106.peach-notes-header--editor {7107  display: grid;7108  grid-template-columns: 36px minmax(0, 1fr) 36px;7109}71107111.peach-notes-header--editor .peach-notes-back,7112.peach-notes-header--editor .peach-notes-header-actions {7113  width: 36px;7114}71157116.peach-notes-header--editor .peach-notes-header-title {7117  cursor: pointer;7118}71197120.peach-notes-header-actions {7121  display: flex;7122  gap: 8px;7123  flex-shrink: 0;7124}71257126.peach-notes-header-btn {7127  width: 36px;7128  height: 36px;7129  display: flex;7130  align-items: center;7131  justify-content: center;7132  background: none;7133  border: none;7134  color: var(--peach-t2);7135  cursor: pointer;7136  border-radius: 8px;7137  font-size: 16px;7138  transition: color 150ms ease, background 150ms ease;7139  -webkit-tap-highlight-color: transparent;7140}71417142.peach-notes-header-btn:active {7143  background: rgba(255,255,255,0.06);7144  color: var(--peach-t0);7145}71467147/* The header + glyph is larger than the search svg so the two right-side7148 * buttons feel visually balanced. The base .peach-notes-header-btn caps font7149 * at 16px which would render the + too small. */7150.peach-notes-new-btn-icon {7151  font-size: 22px;7152  font-weight: 300;7153  line-height: 1;7154}71557156.peach-notes-search-btn svg {7157  display: block;7158  transform: translate(0.5px, 2.5px);7159}71607161/* Inline search bar */7162.peach-notes-search-input {7163  flex: 1;7164  background: none;7165  border: none;7166  outline: none;7167  font-family: 'IBM Plex Mono', monospace;7168  font-size: 13px;7169  color: var(--peach-t0);7170  padding: 4px 0;7171  letter-spacing: 0.02em;7172}71737174.peach-notes-search-input::placeholder {7175  color: var(--peach-t3);7176}71777178/* TOC list */7179.peach-notes-list-container {7180  flex: 1;7181  overflow-y: auto;7182  overflow-x: hidden;7183  scrollbar-width: none;7184  -webkit-overflow-scrolling: touch;7185  overscroll-behavior: contain;7186  position: relative;7187  z-index: 1;7188}71897190.peach-notes-list-container::-webkit-scrollbar { display: none; }71917192/* Note row */7193.peach-note-row {7194  position: relative;7195  display: grid;7196  grid-template-columns: 44px 8px 1fr 8px auto;7197  align-items: center;7198  min-height: 72px;7199  padding: 16px 20px;7200  border-bottom: 0.5px solid var(--peach-border);7201  cursor: pointer;7202  overflow: hidden;7203  touch-action: pan-y;7204  user-select: none;7205  -webkit-user-select: none;7206  -webkit-tap-highlight-color: transparent;7207}72087209.peach-note-row:first-child {7210  border-top: 0.5px solid var(--peach-border);7211}72127213.peach-note-row:active {7214  background: rgba(255,255,255,0.02);7215}72167217.peach-note-numeral {7218  font-family: 'Cormorant Garamond', serif;7219  font-style: italic;7220  font-size: 15px;7221  color: var(--peach-accent);7222  text-align: right;7223  line-height: 1;7224  flex-shrink: 0;7225}72267227.peach-note-title-gap { /* grid spacer */ }72287229.peach-note-title {7230  font-family: 'Cormorant Garamond', serif;7231  font-style: italic;7232  font-size: 18px;7233  color: var(--peach-t0);7234  line-height: 1.3;7235  min-width: 0;7236  overflow-wrap: break-word;7237}72387239.peach-note-title-match {7240  color: var(--peach-accent);7241}72427243.peach-note-date {7244  font-family: 'IBM Plex Mono', monospace;7245  font-size: 11px;7246  color: var(--peach-t1);7247  opacity: 0.62;7248  white-space: nowrap;7249  text-align: right;7250  flex-shrink: 0;7251  grid-column: 5;7252}72537254/* Swipe underlays */7255.peach-note-row-underlay {7256  position: absolute;7257  inset: 0;7258  display: flex;7259  align-items: center;7260  padding: 0 24px;7261  font-family: 'IBM Plex Mono', monospace;7262  font-size: 11px;7263  letter-spacing: 0.1em;7264  pointer-events: none;7265  z-index: 0;7266}72677268.peach-note-row-underlay--delete {7269  background: #8B2020;7270  color: rgba(255,255,255,0.9);7271  justify-content: flex-end;7272}72737274.peach-note-row-underlay--archive {7275  background: var(--peach-accent);7276  color: #0C0A06;7277  justify-content: flex-start;7278}72797280/* Delete confirm strip */7281.peach-note-delete-confirm {7282  position: absolute;7283  inset: 0;7284  background: var(--peach-bg);7285  display: flex;7286  align-items: center;7287  gap: 12px;7288  padding: 0 20px;7289  font-family: 'IBM Plex Mono', monospace;7290  font-size: 11px;7291  color: var(--peach-t1);7292  letter-spacing: 0.04em;7293  animation: peach-delete-confirm-in 150ms ease both;7294  z-index: 10;7295}72967297@keyframes peach-delete-confirm-in {7298  from { opacity: 0; }7299  to   { opacity: 1; }7300}73017302.peach-note-delete-confirm-btn {7303  background: #8B2020;7304  color: rgba(255,255,255,0.9);7305  border: none;7306  border-radius: 6px;7307  padding: 4px 10px;7308  font-family: 'IBM Plex Mono', monospace;7309  font-size: 10px;7310  cursor: pointer;7311  letter-spacing: 0.06em;7312}73137314.peach-note-delete-cancel-btn {7315  background: none;7316  border: none;7317  color: var(--peach-t3);7318  font-family: 'IBM Plex Mono', monospace;7319  font-size: 10px;7320  cursor: pointer;7321  letter-spacing: 0.06em;7322  padding: 4px 6px;7323}73247325/* Empty state */7326.peach-notes-empty {7327  display: flex;7328  flex-direction: column;7329  align-items: center;7330  justify-content: center;7331  flex: 1;7332  padding: 48px 32px;7333  gap: 16px;7334}73357336.peach-notes-empty-text {7337  font-family: 'Cormorant Garamond', serif;7338  font-style: italic;7339  font-size: 20px;7340  color: var(--peach-t3);7341  text-align: center;7342  margin: 0;7343  line-height: 1.4;7344  white-space: pre-line;7345}73467347/* ── Editor surface ── */73487349.peach-note-editor-surface {7350  position: absolute;7351  inset: 0;7352  background:7353    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 5%, transparent) 0%, transparent 62%),7354    var(--peach-bg);7355  display: flex;7356  flex-direction: column;7357  padding-top: env(safe-area-inset-top, 0px);7358}73597360.peach-note-editor-scroll {7361  flex: 1;7362  overflow-y: auto;7363  overflow-x: hidden;7364  scrollbar-width: none;7365  -webkit-overflow-scrolling: touch;7366  padding: 0 20px 120px;7367  position: relative;7368  z-index: 1;7369}73707371.peach-note-editor-scroll::-webkit-scrollbar { display: none; }73727373/* Desktop toolbar (always visible above body) */7374.peach-note-toolbar-desktop-inline {7375  display: grid;7376  grid-template-columns: repeat(4, minmax(0, 1fr)) auto repeat(5, minmax(0, 1fr));7377  align-items: center;7378  gap: 0;7379  padding: 5px 0 10px;7380  margin-bottom: 10px;7381  border-bottom: 0.5px solid var(--peach-border);7382}73837384/* Title field */7385.peach-note-title-field {7386  font-family: var(--font-display);7387  font-style: italic;7388  font-size: clamp(34px, 13vw, 44px);7389  font-weight: 400;7390  color: var(--peach-t0);7391  line-height: 0.98;7392  letter-spacing: -0.015em;7393  padding: 10px 0 2px;7394  outline: none;7395  min-height: 52px;7396  word-break: break-word;7397  position: relative;7398  z-index: 1;7399}74007401.peach-note-title-field:empty::before {7402  content: attr(data-placeholder);7403  color: var(--peach-t1);7404  opacity: 0.58;7405  pointer-events: none;7406}74077408/* Hairline separator */7409.peach-note-hairline {7410  height: 0.5px;7411  background: var(--peach-border);7412  margin: 14px 0 18px;7413  position: relative;7414  z-index: 1;7415}74167417/* Body field */7418.peach-note-body-field {7419  font-family: var(--font-display);7420  font-size: 17px;7421  color: var(--peach-t1);7422  line-height: 1.72;7423  padding: 0;7424  outline: none;7425  min-height: 240px;7426  word-break: break-word;7427  position: relative;7428  z-index: 1;7429}74307431.peach-note-body-field:empty::before {7432  content: attr(data-placeholder);7433  color: var(--peach-t1);7434  opacity: 0.56;7435  font-style: italic;7436  pointer-events: none;7437}74387439.peach-note-body-field h2 {7440  font-family: var(--font-display);7441  font-style: italic;7442  font-size: 22px;7443  font-weight: 600;7444  color: var(--peach-t0);7445  margin: 20px 0 8px;7446}74477448.peach-note-body-field blockquote {7449  border-left: 2px solid var(--peach-accent);7450  margin: 12px 0;7451  padding-left: 16px;7452  color: var(--peach-t1);7453  font-style: italic;7454}74557456.peach-note-body-field ul,7457.peach-note-body-field ol {7458  padding-left: 20px;7459  margin: 8px 0;7460}74617462.peach-note-body-field li {7463  margin: 4px 0;7464}74657466.peach-note-body-field hr {7467  border: none;7468  border-top: 0.5px solid var(--peach-border);7469  margin: 16px 0;7470}74717472/* Saved indicator */7473.peach-note-saved-indicator {7474  font-family: var(--font-mono);7475  font-size: 11px;7476  color: var(--peach-t3);7477  letter-spacing: 0.04em;7478  text-align: right;7479  padding: 6px 24px;7480  flex-shrink: 0;7481  transition: opacity 300ms ease;7482  pointer-events: none;7483  position: relative;7484  z-index: 1;7485}74867487/* Mobile keyboard toolbar */74887489.peach-note-toolbar-btn {7490  min-width: 0;7491  width: auto;7492  height: 30px;7493  display: flex;7494  align-items: center;7495  justify-content: center;7496  background: none;7497  border: none;7498  border-radius: 4px;7499  cursor: pointer;7500  color: var(--peach-t1);7501  transition: background 100ms ease, color 100ms ease;7502  -webkit-tap-highlight-color: transparent;7503}75047505.peach-note-toolbar-btn svg {7506  width: 14px;7507  height: 14px;7508  fill: none;7509  stroke: currentColor;7510  stroke-width: 1.15;7511  stroke-linecap: round;7512  stroke-linejoin: round;7513  pointer-events: none;7514}75157516.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }7517.peach-note-toolbar-btn:hover,7518.peach-note-toolbar-btn:active {7519  background: var(--peach-t4);7520  color: var(--peach-t0);7521}75227523.peach-note-toolbar-divider {7524  width: 0.5px;7525  height: 20px;7526  background: var(--peach-border);7527  margin: 0 4px;7528  flex-shrink: 0;7529}75307531/* Desktop: larger headline in TOC */7532@media (min-width: 400px) {7533  .peach-notes-header-title {7534    font-size: 32px;7535  }75367537  .peach-note-row {7538    min-height: 64px;7539    padding: 14px 16px;7540  }7541}75427543/* Flying title — shared element during expansion/collapse */75447545/* ─── Light theme overrides ───────────────────────────────────────────────7546   Tokens that cannot be expressed as variable substitutions — hardcoded7547   context-specific values that need separate light-mode rules. */75487549/* Settings section headers: use text-label (#79766F) per restoration brief —7550   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY7551   presence without fighting the light parchment background. */7552.light .peach-settings-sub-label {7553  color: #79766F;7554}75557556/* Secondary action buttons (ghost / subtle): filled with input-well surface7557   so they read as recessed against the parchment card background. */7558.light .peach-btn--ghost:not(.peach-icon-btn) {7559  background: #EEE7DD;7560  border-color: #DDD5CB;7561  color: #1A1208;7562}7563.light .peach-icon-btn {7564  background: transparent;7565  border-color: transparent;7566}7567.light .peach-btn--subtle {7568  background: #EEE7DD;7569  border-color: #DDD5CB;7570}75717572/* Entry row hover: bg-row lifts the row above the card surface. */7573.light .peach-entry-row:hover {7574  background: #F2EBE1;7575}7576.light .peach-entry-row.is-active {7577  background: #F2EBE1;7578}7579.light .peach-entry-row.is-selected {7580  background: #F5EDE2;7581}75827583/* ──────────────────────────────────────────────────────────────────────────7584   Pair-device flow — bird-stage animation (Phase 1)7585   See src/popup/components/PairingBirds.tsx and the brief §6.2.7586   Three-act animation gated on the [data-phase] attribute of7587   .peach-pair-pair; child layers (birds, sound arcs, flight wave, dot)7588   each react via either pose class or visibility flag.7589   Tokens: accent surfaces use var(--peach-accent); bird illustration7590   colours are baked into the SVG per the brand-peach exception in §3.1.7591   ────────────────────────────────────────────────────────────────────── */75927593.peach-pair-pair {7594  position: absolute;7595  inset: 0;7596  z-index: 3;7597  display: flex;7598  flex-direction: column;7599  padding: 14px 12px 12px;7600  width: 100%;7601  box-sizing: border-box;7602  gap: 0;7603  background:7604    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),7605    var(--peach-bg);7606  color: var(--peach-t0);7607  overflow-y: auto;7608  overflow-x: hidden;7609  scrollbar-width: none;7610  isolation: isolate;7611  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;7612}7613@keyframes peach-pair-overlay-in {7614  from { opacity: 0; transform: translateY(8px); }7615  to   { opacity: 1; transform: translateY(0); }7616}7617.peach-pair-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }7618.peach-pair-pair::before {7619  content: '';7620  position: absolute;7621  inset: 0;7622  border-radius: inherit;7623  pointer-events: none;7624  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);7625  z-index: 0;7626}7627.peach-pair-pair > * { position: relative; z-index: 1; }76287629/* Header --------------------------------------------------------------- */7630.peach-pair-head {7631  display: flex; align-items: center; gap: 10px;7632}7633.peach-pair-back {7634  width: 32px; height: 32px;7635  display: inline-flex; align-items: center; justify-content: center;7636  background: transparent;7637  border: none;7638  border-radius: 8px;7639  color: var(--peach-t1);7640  cursor: pointer;7641  transition: color 0.15s ease, box-shadow 0.15s ease;7642}7643.peach-pair-back:hover {7644  color: var(--peach-accent);7645  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);7646}7647.peach-pair-title {7648  font-family: var(--font-display, Georgia, serif);7649  font-style: italic;7650  font-size: 24px;7651  font-weight: 500;7652  letter-spacing: 0.005em;7653  color: var(--peach-t0);7654  line-height: 1;7655}7656.peach-pair-head-spacer { flex: 1; }76577658/* Bird stage ----------------------------------------------------------- */7659.peach-pair-stage {7660  position: relative;7661  height: 180px;7662  margin: 8px auto 18px;7663  width: 300px;7664  display: flex;7665  align-items: flex-end;7666  justify-content: center;7667}7668.peach-pair-bird-slot {7669  position: absolute;7670  bottom: 0;7671  width: 108px;7672  height: 108px;7673  transform-origin: 50% 95%;7674}7675.peach-pair-bird-slot-desktop { left: 12px; }7676.peach-pair-bird-slot-mobile { right: 12px; }7677.peach-pair-stage.act-handshake .peach-pair-bird-slot-desktop,7678.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop {7679  transform: translateX(6px);7680  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);7681}7682.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop { --bb-x: 6px; }7683.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { --bb-x: -6px; }7684.peach-pair-stage.act-paired .peach-pair-bird-slot {7685  animation: peach-pair-happy-bob 1.2s ease-in-out infinite;7686}7687.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { animation-delay: 0.2s; }7688@keyframes peach-pair-happy-bob {7689  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }7690  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }7691}76927693/* Bird internal -------------------------------------------------------- */7694.peach-pair-bird {7695  width: 108px;7696  height: 108px;7697  transform-origin: 50% 95%;7698}7699.peach-pair-bird svg { width: 100%; height: 100%; overflow: visible; }77007701.peach-pair-bird-body {7702  transform-origin: 50% 80%;7703  animation: peach-pair-bird-bob 2.4s ease-in-out infinite;7704}7705.peach-pair-bird-pose-chirping .peach-pair-bird-body { animation-duration: 1.4s; }7706.peach-pair-bird-pose-happy .peach-pair-bird-body   { animation: peach-pair-bird-celebrate 0.9s ease-in-out infinite; }7707.peach-pair-bird-pose-attentive .peach-pair-bird-body { animation-duration: 2.0s; }77087709@keyframes peach-pair-bird-bob {7710  0%, 100% { transform: translateY(0) rotate(0deg); }7711  50%      { transform: translateY(-2px) rotate(-1deg); }7712}7713@keyframes peach-pair-bird-celebrate {7714  0%, 100% { transform: translateY(0) rotate(0deg); }7715  25%      { transform: translateY(-4px) rotate(-2deg); }7716  75%      { transform: translateY(-4px) rotate(2deg); }7717}77187719.peach-pair-bird-wing {7720  transform-origin: 50% 50%;7721  animation: peach-pair-bird-flap 0.9s ease-in-out infinite;7722}7723.peach-pair-bird-pose-happy .peach-pair-bird-wing { animation-duration: 0.35s; }7724.peach-pair-bird-pose-attentive .peach-pair-bird-wing { animation-duration: 1.4s; }7725@keyframes peach-pair-bird-flap {7726  0%, 100% { transform: scaleY(1); }7727  50%      { transform: scaleY(0.85); }7728}77297730.peach-pair-bird-head-group {7731  transform-origin: 95px 52px;7732  animation: peach-pair-bird-bob-head 2.6s ease-in-out infinite;7733}7734.peach-pair-bird-pose-chirping .peach-pair-bird-head-group { animation-duration: 0.45s; }7735.peach-pair-bird-pose-attentive .peach-pair-bird-head-group { animation: none; }7736@keyframes peach-pair-bird-bob-head {7737  0%, 100% { transform: rotate(0deg); }7738  50%      { transform: rotate(3deg); }7739}77407741.peach-pair-bird-eye-group { transform-origin: center; }77427743.peach-pair-bird-aura {7744  animation: peach-pair-bird-aura 2.6s ease-in-out infinite;7745}7746.peach-pair-bird-pose-happy .peach-pair-bird-aura { animation-duration: 1.4s; }7747@keyframes peach-pair-bird-aura {7748  0%, 100% { opacity: 0; }7749  50%      { opacity: 0.18; }7750}77517752.peach-pair-bird-tail {7753  transform-origin: 50% 100%;7754  animation: peach-pair-bird-tail-wag 3s ease-in-out infinite;7755}7756@keyframes peach-pair-bird-tail-wag {7757  0%, 100% { transform: rotate(0deg); }7758  50%      { transform: rotate(2deg); }7759}77607761.peach-pair-bird-pose-happy .peach-pair-bird-shadow { animation: peach-pair-bird-shadow-pulse 0.9s ease-in-out infinite; }7762@keyframes peach-pair-bird-shadow-pulse {7763  0%, 100% { transform: scaleX(1); opacity: 0.45; }7764  50%      { transform: scaleX(0.92); opacity: 0.3; }7765}77667767/* Per-pose variants --------------------------------------------------- */7768/* Status copy ---------------------------------------------------------- */77697770.peach-pair-headline {7771  font-family: var(--font-display, Georgia, serif);7772  font-style: italic;7773  font-size: 20px;7774  font-weight: 500;7775  line-height: 1.2;7776  letter-spacing: 0.005em;7777  color: var(--peach-t0);7778  margin-bottom: 6px;7779}77807781.peach-pair-sub {7782  font-size: 12.5px;7783  line-height: 1.45;7784  color: var(--peach-t1);7785  max-width: 280px;7786  margin: 0 auto;7787  text-wrap: pretty;7788}77897790/* Status action -------------------------------------------------------- */7791.peach-pair-action {7792  margin: 2px 4px 10px;7793  margin-top: auto;7794  display: flex;7795  flex-direction: column;7796  gap: 8px;7797}77987799/* Screen-reader-only live region. Kept off the visual flow but read by7800   assistive tech as the pairing phase advances. */7801.peach-sr-only {7802  position: absolute;7803  width: 1px; height: 1px;7804  padding: 0; margin: -1px;7805  overflow: hidden;7806  clip: rect(0, 0, 0, 0);7807  white-space: nowrap;7808  border: 0;7809}78107811/* Reduced motion — stage simplifies to opacity transitions only */7812@media (prefers-reduced-motion: reduce) {7813  .peach-pair-bird-body,7814  .peach-pair-bird-head-group,7815  .peach-pair-bird-beak,7816  .peach-pair-bird-wing,7817  .peach-pair-bird-tuft,7818  .peach-pair-bird-tail,7819  .peach-pair-bird-eye-group,7820  .peach-pair-bird-aura,7821  .peach-pair-bird-slot,7822  .peach-pair-bird-slot-mobile {7823    animation: none !important;7824    transition: opacity 0.2s linear !important;7825  }7826}78277828/* Shell border and shadow in light mode: match dark mode's near-invisible7829   border weight so the popup frame looks the same in both themes. */7830.light .peach-shell,7831.light .peach-screen {7832  border-color: rgba(26, 18, 8, 0.07);7833  box-shadow:7834    0 2px 8px rgba(80, 56, 32, 0.08),7835    0 14px 48px rgba(80, 56, 32, 0.10),7836    0 0 0 1px rgba(26, 18, 8, 0.04);7837}78387839/* HOLE 4: the revoke confirmation carries its own disclosure, so it needs the7840   full row width rather than sitting inline beside the device name. */7841.peach-settings-row:has(> .peach-unpair-confirm) { flex-wrap: wrap; }7842.peach-unpair-confirm {7843  display: flex;7844  flex-direction: column;7845  gap: 8px;7846  width: 100%;7847}7848.peach-unpair-confirm-note {7849  margin: 0;7850  font-size: 0.6875rem;7851  line-height: 1.5;7852  color: var(--peach-t2);7853}78547855/* Sync mode selector — three named choices (public / private / off). Replaces7856   the old binary "local network only" toggle; see docs/sync-lan-retirement.md. */7857.peach-sync-mode {7858  display: flex;7859  align-items: flex-start;7860  gap: 10px;7861  width: 100%;7862  text-align: left;7863  padding: 10px 12px;7864  margin-top: 8px;7865  border-radius: 10px;7866  border: 1px solid var(--peach-border);7867  background: color-mix(in srgb, var(--peach-t0) 3%, transparent);7868  color: var(--peach-t1);7869  cursor: pointer;7870  transition: border-color var(--peach-dur-80) var(--peach-curve-arrival),7871              background-color var(--peach-dur-80) var(--peach-curve-arrival);7872}7873.peach-sync-mode:hover:not(:disabled) {7874  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);7875}7876.peach-sync-mode.is-active {7877  border-color: var(--peach-accent);7878  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);7879}7880.peach-sync-mode:disabled { opacity: 0.6; cursor: default; }7881.peach-sync-mode-main { display: flex; flex-direction: column; gap: 3px; flex: 1; }7882.peach-sync-mode-title { font-size: 12px; }7883.peach-sync-mode-sub {7884  font-size: 11px;7885  line-height: 1.5;7886  color: var(--peach-t2);7887}7888.peach-sync-mode-pip {7889  flex: none;7890  margin-top: 3px;7891  width: 12px; height: 12px;7892  border-radius: 50%;7893  border: 1px solid var(--peach-t3);7894}7895.peach-sync-mode.is-active .peach-sync-mode-pip {7896  border-color: var(--peach-accent);7897  background:7898    radial-gradient(circle at 50% 50%, var(--peach-accent) 0 42%, transparent 44%);7899}7900.peach-sync-mode-disclosure {7901  margin: 10px 2px 0;7902  font-size: 11px;7903  line-height: 1.5;7904  color: var(--peach-t2);7905}7906.peach-sync-mode-warn { color: var(--peach-breach); }79077908/* Compact form, used mid-pairing: a quiet line, not a decision to make. */7909.peach-sync-mode-summary {7910  margin: 8px 2px 0;7911  font-size: 11px;7912  color: var(--peach-t2);7913  text-align: center;7914}7915.peach-sync-mode-change {7916  background: none;7917  border: none;7918  padding: 0;7919  font: inherit;7920  color: var(--peach-accent);7921  text-decoration: underline;7922  cursor: pointer;7923}