popup.css

1html,2body,3#app,4#pre-lock,5.popup-root {6  width: 320px;7  min-height: 520px;8  height: 520px;9  margin: 0;10}1112body {13  overflow: hidden;14  background: var(--bg);15  color: var(--t0);16  font-family: var(--font-ui);17  font-weight: 300;18  position: relative;19}2021* {22  box-sizing: border-box;23}2425button,26input,27textarea,28select {29  font: inherit;30}3132button {33  border: 0;34}3536#pre-lock {37  position: absolute;38  inset: 0;39  z-index: 10;40}4142#pre-lock[hidden] {43  display: none;44}4546.popup-root {47  position: relative;48  overflow: hidden;49}5051.peach-theme {52  color: var(--peach-t0);53  font-family: var(--font-ui);54  font-weight: 300;55  box-sizing: border-box;56  text-align: left;57}58.peach-theme, .peach-theme * { box-sizing: inherit; }5960.peach-brand-mark {61  width: 14px;62  height: 14px;63  flex-shrink: 0;64}6566.peach-status-pip.is-hidden {67  display: none;68}6970.peach-status-pip.unlocked {71  background: var(--peach-health-ok);72  box-shadow: 0 0 6px rgba(100, 210, 100, 0.6);73}7475.peach-status-pip.pulse {76  animation: pip-pulse 400ms var(--peach-curve-settle) both;77}7879/* Shell */80.peach-shell, .peach-screen {81  background:82    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),83    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),84    var(--peach-bg);85  border: 1px solid var(--peach-t3);86  box-shadow:87    0 2px 8px rgba(0,0,0,0.55),88    0 14px 48px rgba(0,0,0,0.7),89    0 0 0 1px rgba(240,232,216,0.04);90  overflow: hidden;91}92.peach-shell {93  display: grid;94  grid-template-rows: auto 1fr;95  min-height: 520px;96  position: relative;97  isolation: isolate;98}99100.peach-shell[data-surface="extension"] {101  width: min(320px, 100vw);102  border-radius: 0;103  height: 520px;104  max-height: 520px;105  overflow: hidden;106}107108/* ── Lock screen – full-window lock/create stage ── */109.lock-screen--vault-stage {110  display: flex;111  flex-direction: column;112  gap: 18px;113  padding: 20px 18px 18px;114  justify-content: flex-start;115}116.lock-screen--vault-stage .peach-lock-panel {117  margin-top: auto;118}119.peach-lock-headline--unlock {120  max-width: 220px;121}122.peach-lock-hero--unlock {123  padding-top: 14px;124}125.peach-lock-panel--unlock {126  gap: 10px;127}128129.peach-lock-restore-link {130  background: transparent;131  border: none;132  cursor: pointer;133  font-family: var(--font-mono);134  font-size: 0.625rem;135  letter-spacing: 0.08em;136  color: var(--t1);137  padding: 5px 0;138  text-align: left;139  transition: color 150ms ease;140}141142.peach-lock-restore-link:hover {143  color: var(--t0);144}145.peach-shell[data-surface="extension"] .peach-stage {146  min-height: 250px;147}148149/* Screen (unlock) */150.peach-screen {151  width: min(320px, 100vw);152  min-height: 100%;153  height: 100%;154  border-radius: 0;155  padding: 16px 20px 18px;156  display: grid;157  gap: 14px;158}159.peach-screen[data-motion-phase="enter"] {160  animation: peach-screen-enter var(--peach-dur-600) var(--peach-curve-arrival) both;161}162.peach-screen-header { min-height: 20px; }163164/* Wordmark */165.peach-wordmark {166  margin: 0;167  font-family: var(--font-display);168  font-size: 0.9375rem;169  font-style: italic;170  letter-spacing: 0.03em;171  color: var(--peach-t0);172  display: inline-flex;173  min-height: 1em;174}175176/* Motion text / char animation */177.peach-motion-text { display: inline-flex; min-height: 1em; }178.peach-motion-char {179  display: inline-block;180  white-space: pre;181  opacity: 0;182  transform: translateY(0.22em);183  animation: peach-char-enter var(--peach-motion-duration, 380ms) var(--peach-curve-arrival) forwards;184  animation-delay: calc(var(--peach-char-index, 0) * 20ms);185}186187/* Chrome */188.peach-chrome {189  position: relative;190  z-index: 10;191  padding: 16px 20px 0;192  display: flex;193  justify-content: space-between;194  align-items: center;195  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense196     fallback) per §15 regression guard. Without pointer-events:none, the197     empty header strip also sits above `.peach-overlay-view` (z-index:2)198     and swallows clicks meant for an overlay's back button / top search. */199  pointer-events: none;200}201.peach-chrome .peach-btn { pointer-events: auto; }202.peach-chrome.is-hidden-for-overlay,203.peach-search-wrap.is-hidden-for-overlay {204  opacity: 0;205  visibility: hidden;206  pointer-events: none;207}208/* Chirp-sync owns its own surface and header — fully collapse the global209   chrome row so the warm gradient reaches the popup edge. */210.peach-chrome.is-collapsed,211.peach-search-wrap.is-collapsed {212  display: none;213}214.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }215.peach-status-pip {216  width: 5px;217  height: 5px;218  border-radius: 50%;219  background: var(--peach-t3);220  display: inline-flex;221  flex-shrink: 0;222  transition: background 400ms ease, box-shadow 400ms ease;223}224.peach-chrome-actions { display: flex; gap: 6px; }225226/* Shell body */227.peach-shell-body {228  position: relative;229  display: grid;230  grid-template-rows: 1fr auto;231  min-height: 0;232  min-width: 0;233  width: 100%;234  overflow: hidden;235  height: 100%;236}237.peach-shell-veil {238  position: absolute; inset: 0;239  background: #000; opacity: 0;240  pointer-events: none; z-index: 1;241}242.peach-shell[data-motion-phase="enter"] .peach-shell-body {243  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;244}245.peach-shell[data-motion-phase="exit"] .peach-shell-veil {246  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;247}248249/* Content frame */250.peach-content-frame {251  display: grid;252  grid-template-rows: 1fr auto;253  grid-template-columns: minmax(0, 1fr);254  align-content: start;255  min-height: 0;256  min-width: 0;257  overflow: hidden;258  transition: opacity 80ms ease, transform 80ms ease;259}260.peach-content-frame.navigating {261  opacity: 0.93;262  transform: translateX(2px);263}264.peach-content-frame[data-content-phase="enter"] {265  animation: peach-content-enter 135ms ease-out both;266}267.peach-content-frame[data-content-phase="exit"] {268  animation: peach-content-exit 95ms ease-in forwards;269}270.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }271272/* Stage */273.peach-stage {274  padding: 10px 20px 12px;275  display: grid;276  gap: 12px;277  align-content: start;278  min-width: 0;279  min-height: 0;280  max-width: 100%;281  overflow-y: auto;282  overflow-x: hidden;283  scrollbar-width: none;284  -ms-overflow-style: none;285  overscroll-behavior: contain;286}287.peach-stage::-webkit-scrollbar { display: none; }288289/* Entry name */290.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }291.peach-entry-header {292  position: relative;293  z-index: 1;294  display: flex;295  align-items: flex-start;296  gap: 6px;297  min-width: 0;298}299.peach-entry-header-name {300  flex: 1;301  min-width: 0;302}303.peach-entry-name {304  margin: 0;305  padding-bottom: 0.12em;306  font-family: var(--font-display);307  font-style: italic; font-weight: 400;308  font-size: 44px; line-height: 0.95;309  color: var(--peach-t0);310  display: -webkit-box;311  -webkit-line-clamp: 2;312  -webkit-box-orient: vertical;313  overflow: hidden;314  text-wrap: balance;315}316.peach-entry-name--lg { font-size: 40px; }317.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }318.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }319.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }320321/* Trash icon in entry header */322.peach-entry-trash-btn {323  flex-shrink: 0;324  padding: 4px;325  margin-top: 4px;326  background: transparent;327  border: none;328  cursor: pointer;329  color: var(--peach-t2);330  border-radius: 4px;331  transition: color 140ms ease, background 140ms ease;332  display: flex;333  align-items: center;334  justify-content: center;335}336.peach-entry-trash-btn:hover {337  color: var(--peach-t1);338  background: var(--peach-t3);339}340.peach-entry-trash-confirm {341  display: flex;342  align-items: center;343  gap: 6px;344  flex-shrink: 0;345  margin-top: 6px;346  flex-wrap: nowrap;347}348.peach-entry-trash-confirm-label {349  font-family: var(--font-mono);350  font-size: 0.5625rem;351  letter-spacing: 0.1em;352  color: var(--peach-t2);353  white-space: nowrap;354}355.peach-entry-name-button {356  padding: 0;357  background: transparent;358  text-align: left;359  cursor: pointer;360  max-width: 100%;361  overflow: hidden;362  display: block;363}364.peach-entry-name-char {365  display: inline-block;366  white-space: pre;367  opacity: 0;368  transform: translateY(0.22em);369  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;370  animation-delay: calc(var(--char-index, 0) * 20ms);371}372373/* Domain */374.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }375.peach-domain-row {376  width: 100%; border: 0; background: transparent; color: inherit;377  padding: 0; display: flex; justify-content: space-between; align-items: baseline;378  cursor: default;379}380.peach-domain-value {381  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;382  font-size: 0.625rem; font-style: italic;383  letter-spacing: 0.12em; color: var(--peach-t1);384}385386/* Fields */387.peach-fields { display: grid; gap: 10px; }388.peach-field-card { display: grid; gap: 7px; }389.peach-label {390  font-family: Inter, system-ui, sans-serif;391  text-transform: uppercase; letter-spacing: 0.2em;392  font-size: 0.5rem; color: var(--peach-t2);393}394.peach-add-field-btn {395  align-self: flex-start;396  background: none; border: none; padding: 2px 0;397  font-family: Inter, system-ui, sans-serif;398  font-size: 0.6875rem; color: var(--peach-accent);399  cursor: pointer; opacity: 0.75;400  letter-spacing: 0.02em;401}402.peach-add-field-btn:hover { opacity: 1; }403.peach-field-value-row {404  display: flex; justify-content: space-between;405  align-items: center; gap: 8px;406  min-width: 0;407}408.peach-field-value {409  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;410  font-size: 0.8125rem; color: var(--peach-t1);411  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;412  flex: 1;413  min-width: 0;414}415.peach-password-value {416  display: inline-flex;417  align-items: center;418  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;419  font-size: 1rem; letter-spacing: 0.3em; color: var(--peach-t0);420  overflow: hidden;421  text-overflow: ellipsis;422  white-space: nowrap;423  flex: 1;424  min-width: 0;425  max-width: 100%;426}427.peach-password-value.is-revealed {428  font-size: 0.875rem;429  letter-spacing: 0.08em;430}431.peach-password-text,432.peach-password-mask {433  display: block;434  width: 100%;435  overflow: hidden;436  white-space: nowrap;437  /* Render as uniform mid-line bullets, not baseline periods */438  font-family: Inter, system-ui, sans-serif;439  font-size: 0.625rem;440  letter-spacing: 3px;441  user-select: none;442}443.peach-field-actions { display: flex; gap: 4px; align-items: center; }444.peach-password-strength { display: flex; align-items: center; gap: 8px; }445.peach-strength-bar { display: flex; gap: 3px; }446.peach-strength-seg { width: 28px; height: 4px; border-radius: 2px; background: #eee; }447.peach-strength-label {448  font-family: "IBM Plex Mono", monospace;449  font-style: italic;450  font-size: 0.5625rem;451  font-weight: 300;452  min-width: 36px;453  text-align: right;454  color: var(--peach-t2);455  letter-spacing: 0.06em;456}457458.peach-strength-hairline {459  display: flex;460  align-items: center;461  gap: 10px;462  margin-top: -2px;463}464465.peach-strength-hairline-track {466  flex: 1;467  height: 3px;468  border-radius: 2px;469  background: var(--peach-s2);470  overflow: hidden;471}472473.peach-strength-hairline-fill {474  height: 100%;475  border-radius: 2px;476  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),477    background 400ms ease;478}479480/* Note content (display) */481.peach-note-content {482  border-top: 1px solid var(--peach-t3);483  padding-top: 10px;484  font-family: var(--font-display);485  font-size: 0.9375rem;486  line-height: 1.75;487  color: var(--peach-t1);488}489490/* ── Inline editing ─────────────────────────────────────────────────── */491492/* Clickable display values */493.peach-inline-clickable {494  cursor: text;495  border-radius: 3px;496  transition: background 150ms ease;497}498.peach-inline-clickable:hover {499  background: rgba(240, 232, 216, 0.05);500}501502/* Subtle "edit" hint that appears on hover */503.peach-inline-edit-hint {504  font-family: Inter, system-ui, sans-serif;505  font-size: 0.5625rem;506  text-transform: uppercase;507  letter-spacing: 0.14em;508  color: var(--peach-t2);509  opacity: 0;510  transition: opacity 120ms ease;511  pointer-events: none;512  margin-left: 6px;513  flex-shrink: 0;514}515.peach-domain-row:hover .peach-inline-edit-hint {516  opacity: 1;517}518519/* Title editing */520.peach-inline-title-wrap {521  display: flex;522  flex-direction: column;523  gap: 6px;524}525.peach-inline-title-input {526  font-family: var(--font-display);527  font-style: italic;528  font-weight: 400;529  font-size: 40px;530  line-height: 0.95;531  color: var(--peach-t0);532  background: transparent;533  border: none;534  border-bottom: 1px solid var(--peach-accent);535  outline: none;536  width: 100%;537  padding: 2px 0;538}539540/* Generic inline field */541.peach-inline-field-wrap {542  display: flex;543  flex-direction: column;544  gap: 6px;545}546.peach-inline-input {547  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;548  font-size: 0.8125rem;549  color: var(--peach-t0);550  background: transparent;551  border: none;552  border-bottom: 1px solid var(--peach-accent);553  outline: none;554  width: 100%;555  padding: 3px 0;556}557.peach-inline-textarea {558  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;559  font-size: 0.6875rem;560  line-height: 1.7;561  color: var(--peach-t0);562  background: rgba(240, 232, 216, 0.04);563  border: 1px solid var(--peach-accent);564  border-radius: 4px;565  outline: none;566  width: 100%;567  padding: 8px;568  resize: vertical;569  min-height: 80px;570}571572/* Save / cancel row */573.peach-inline-actions {574  display: flex;575  gap: 6px;576  align-items: center;577}578.peach-inline-save-btn,579.peach-inline-cancel-btn {580  display: inline-flex;581  align-items: center;582  justify-content: center;583  width: 26px;584  height: 26px;585  border-radius: 4px;586  border: none;587  cursor: pointer;588  transition: background 140ms ease, opacity 140ms ease;589  flex-shrink: 0;590}591.peach-inline-save-btn {592  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);593  color: var(--peach-accent);594}595.peach-inline-save-btn:hover:not(:disabled) {596  background: color-mix(in srgb, var(--peach-accent) 30%, transparent);597}598.peach-inline-cancel-btn {599  background: rgba(240, 232, 216, 0.06);600  color: var(--peach-t2);601}602.peach-inline-cancel-btn:hover:not(:disabled) {603  background: rgba(240, 232, 216, 0.12);604  color: var(--peach-t1);605}606.peach-inline-save-btn:disabled,607.peach-inline-cancel-btn:disabled {608  opacity: 0.4;609  cursor: not-allowed;610}611612/* Inline password generator wrapper */613.peach-inline-generator-wrap {614  margin-top: 10px;615  padding-top: 10px;616  border-top: 1px solid var(--peach-t3);617  display: flex;618  flex-direction: column;619  gap: 8px;620}621.peach-inline-generator-cancel {622  align-self: flex-start;623  font-size: 0.6875rem;624  color: var(--peach-t2);625}626627/* "is-editing" card state */628.peach-field-card.is-editing {629  background: rgba(240, 232, 216, 0.02);630  border-radius: 6px;631  padding: 8px;632  margin: -8px;633}634635/* Inline tag editor on Entry detail view */636.peach-inline-tag-editor {637  display: flex;638  flex-direction: column;639  gap: 6px;640}641642/* Quiet inline "+ add X" link in the entry detail body */643.peach-entry-add-link {644  justify-self: start;645  margin-top: 8px;646}647648/* Additional URLs editor revealed by clicking the URL field */649.peach-additional-urls {650  display: flex;651  flex-direction: column;652  gap: 6px;653  margin-top: 8px;654}655.peach-additional-urls-label {656  font-size: 0.5625rem;657  letter-spacing: 0.1em;658  text-transform: uppercase;659  color: var(--peach-t2);660  margin-bottom: 2px;661}662.peach-additional-url-row {663  display: flex;664  align-items: center;665  gap: 6px;666}667.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }668.peach-additional-url-remove {669  background: transparent;670  border: 1px solid var(--peach-t3);671  color: var(--peach-t2);672  width: 22px;673  height: 22px;674  border-radius: 4px;675  cursor: pointer;676  font-size: 0.875rem;677  line-height: 1;678  display: inline-flex;679  align-items: center;680  justify-content: center;681  flex-shrink: 0;682  transition: color 120ms ease, border-color 120ms ease;683}684.peach-additional-url-remove:hover:not(:disabled) {685  color: var(--peach-accent);686  border-color: var(--peach-border-accent);687}688.peach-additional-urls-add { align-self: flex-start; }689690/* Delete row */691.peach-entry-delete-row {692  display: flex;693  align-items: center;694  gap: 8px;695  padding-top: 18px;696  margin-top: 8px;697  border-top: 1px solid var(--peach-t3);698}699.peach-delete-btn {700  font-size: 0.6875rem;701  color: var(--peach-t2);702  padding: 4px 0;703}704.peach-delete-confirm-text {705  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;706  font-size: 0.6875rem;707  font-style: italic;708  color: var(--peach-t2);709  flex-shrink: 0;710}711712/* TOTP band */713.peach-totp-band {714  border-top: 1px solid var(--peach-t3);715  padding: 12px 20px 14px;716  position: relative;717  display: grid;718  grid-template-columns: 1fr auto;719  gap: 10px;720}721.peach-totp-main {722  min-width: 0;723  cursor: pointer;724  user-select: none;725}726.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }727.peach-totp-code-row {728  display: flex;729  align-items: flex-end;730  gap: 10px;731  min-width: 0;732}733.peach-totp-code {734  margin: 2px 0 0;735  font-family: var(--font-display);736  font-style: italic;737  font-weight: 300;738  font-size: 38px; color: var(--peach-accent);739  line-height: 0.95; min-height: 1em;740  min-width: 0;741}742.peach-totp-code-text {743  display: inline-flex;744  overflow: hidden;745  text-overflow: ellipsis;746  white-space: nowrap;747}748.peach-totp-copy-btn {749  margin-bottom: 2px;750  flex-shrink: 0;751  border-color: transparent;752}753.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }754.peach-totp-countdown {755  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;756  font-size: 22px; color: var(--peach-t1);757}758.peach-totp-ring { transform: rotate(-90deg); }759.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }760.peach-totp-ring-progress {761  fill: none; stroke: var(--peach-accent); stroke-width: 2;762  stroke-linecap: round;763  transition: stroke-dashoffset 1s linear, stroke 500ms ease;764}765/* Search bar */766.peach-search-wrap {767  border-top: 1px solid var(--peach-t3);768  background: var(--peach-s1);769  min-height: 54px; position: relative;770  box-shadow: inset 0 6px 18px transparent;771  transition: box-shadow 700ms ease;772}773.peach-search-wrap::before {774  content: "";775  position: absolute;776  left: 0;777  top: 0;778  height: 2px;779  width: var(--peach-totp-progress, 0%);780  background: var(--peach-accent);781  opacity: 0;782  transition: width 1s linear, opacity 180ms ease;783  pointer-events: none;784}785.peach-shell[data-totp-active="true"] .peach-search-wrap::before {786  opacity: 0.9;787}788.peach-shell[data-totp-active="true"] .peach-search-wrap {789  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);790}791792@keyframes peach-totp-code-flare {793  0%   { filter: brightness(1); }794  25%  { filter: brightness(1.3); }795  100% { filter: brightness(1); }796}797.peach-totp-code.is-hot {798  animation: peach-totp-code-flare 3000ms ease-in-out both;799}800.peach-search-bar {801  min-height: 54px;802  display: grid;803  grid-template-columns: auto minmax(0, 1fr) auto;804  align-items: center;805  gap: 8px; padding: 0 9px 0 12px;806}807.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }808.peach-search-input {809  border: 0; background: transparent; color: var(--peach-t0);810  font-family: var(--font-display);811  font-style: italic; font-size: 18px;812  outline: none; width: 100%; min-width: 0; padding: 0;813  caret-color: var(--peach-accent);814}815.peach-search-input::placeholder { color: var(--peach-t2); }816.peach-search-meta {817  display: grid;818  grid-auto-flow: column;819  align-items: center;820  justify-content: end;821  gap: 6px;822  min-width: max-content;823}824.peach-search-counter {825  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;826  font-size: 0.625rem; color: var(--peach-t2);827  display: inline-flex;828  align-items: center;829  line-height: 1;830}831.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }832833/* Buttons */834.peach-btn {835  border: 1px solid transparent; border-radius: 12px;836  background: transparent; color: var(--peach-t0);837  font-family: Inter, system-ui, sans-serif;838  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;839  cursor: pointer;840  transition:841    background-color var(--peach-dur-80) var(--peach-curve-arrival),842    color var(--peach-dur-80) var(--peach-curve-arrival),843    border-color var(--peach-dur-150) var(--peach-curve-arrival);844}845.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }846.peach-btn:disabled {847  opacity: 0.45;848  cursor: not-allowed;849}850.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }851.peach-btn--md { min-height: 38px; }852.peach-btn--accent {853  background: var(--peach-accent);854  color: rgba(0,0,0,0.92);855  font-weight: 500;856  box-shadow:857    0 1px 0 rgba(255,255,255,0.08) inset,858    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),859    0 3px 16px var(--peach-glow),860    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);861}862.peach-btn--accent:hover:not(:disabled) {863  background: var(--peach-accent);864  filter: brightness(1.10) saturate(1.05);865  box-shadow:866    0 1px 0 rgba(255,255,255,0.10) inset,867    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),868    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),869    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);870}871.peach-btn--ghost:not(.peach-icon-btn) { border-color: var(--peach-t3); color: var(--peach-t1); }872.peach-btn--ghost.peach-icon-btn { color: var(--peach-t1); }873.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }874.peach-icon-btn {875  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;876  display: inline-flex; align-items: center; justify-content: center;877  border-color: transparent;878  transition:879    color var(--peach-dur-80) var(--peach-curve-arrival),880    box-shadow var(--peach-dur-150) var(--peach-curve-arrival),881    background-color var(--peach-dur-80) var(--peach-curve-arrival);882}883.peach-icon-btn:hover:not(:disabled) {884  background: transparent;885  color: var(--peach-accent);886  box-shadow: 0 0 12px color-mix(in srgb, var(--peach-accent) 28%, transparent),887              0 0 4px color-mix(in srgb, var(--peach-accent) 16%, transparent);888}889890.peach-btn:focus-visible {891  outline: none;892  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);893}894895/* Lock button */896.peach-lock-icon { transform-origin: center; }897.peach-lock-btn { color: var(--peach-accent); }898.peach-lock-btn.is-locking .peach-lock-icon {899  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);900}901902/* Biometric unlock button */903.peach-biometric-btn {904  display: flex;905  align-items: center;906  justify-content: center;907  gap: 6px;908  margin-top: 8px;909  width: 100%;910}911912/* Copy button */913.peach-copy-btn {914  position: relative; overflow: hidden;915  color: var(--peach-t2); border-color: var(--peach-t3);916}917.peach-copy-icon {918  display: inline-flex; align-items: center; justify-content: center;919  position: relative; z-index: 1;920}921.peach-copy-icon-svg { display: block; }922.peach-copy-sheen {923  position: absolute; inset: 0;924  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%);925  opacity: 0; transform: scaleX(0.15); transform-origin: left center;926}927.peach-copy-btn.is-copied {928  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;929  box-shadow:930    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),931    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),932    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);933}934.peach-copy-btn.is-copied .peach-copy-icon {935  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;936}937.peach-copy-btn.is-copied .peach-copy-sheen {938  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;939}940.peach-copy-btn.is-retreat {941  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;942}943.peach-copy-btn.is-retreat .peach-copy-sheen {944  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;945}946.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }947.peach-copy-drain-bar {948  display: block; width: 100%; height: 100%;949  background: var(--peach-accent); opacity: 0.7;950  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;951}952953/* Unlock screen elements */954.peach-unlock-headline {955  margin: 2px 0 0;956  font-family: var(--font-display);957  font-size: 52px; line-height: 0.95;958  font-style: italic; font-weight: 400;959}960.peach-subline {961  margin: 0;962  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;963  font-size: 0.625rem; color: var(--peach-t2); font-style: italic;964}965.peach-subline--lock {966  max-width: 248px;967  line-height: 1.5;968}969.peach-underline-input {970  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);971  padding: 6px 0; background: transparent; color: var(--peach-t0);972  outline: none;973  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;974  font-size: 0.8125rem;975  caret-color: var(--peach-accent);976}977.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }978.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }979.peach-hint {980  margin: 0;981  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;982  font-size: 0.625rem; color: var(--peach-t2);983}984.peach-unlock-footer {985  margin-top: 4px; display: flex; align-items: center; gap: 7px;986  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;987  font-size: 0.625rem; color: var(--peach-t2);988}989.peach-unlock-footer--lock {990  padding-top: 2px;991}992993/* Breach badge */994.peach-breach-badge {995  display: flex;996  position: relative;997  z-index: 1;998  align-items: center;999  gap: 7px;1000  font-size: 0.5625rem;1001  color: var(--peach-breach);1002  padding: 5px 10px;1003  margin-bottom: 4px;1004  border-radius: 8px;1005  background: rgba(220, 80, 60, 0.07);1006  border: 1px solid rgba(220, 80, 60, 0.18);1007  letter-spacing: 0.04em;1008}10091010.peach-breach-action {1011  margin-left: auto;1012  font-size: 0.625rem;1013  padding: 3px 8px;1014}10151016.peach-password-value.is-breached {1017  color: rgba(220, 80, 60, 0.75);1018  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1019}10201021/* ── Overlay views ─────────────────────────────────────────────────── */1022.peach-overlay-view {1023  position: absolute;1024  inset: 0;1025  display: flex;1026  flex-direction: column;1027  background:1028    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1029    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1030    var(--peach-bg);1031  z-index: 2;1032  overflow: hidden;1033  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1034}10351036.peach-overlay-view:has(.stk-shell) {1037  background: var(--peach-bg);1038}1039@keyframes overlay-in {1040  from { opacity: 0; transform: translateY(8px); }1041  to   { opacity: 1; transform: translateY(0); }1042}1043.peach-overlay-view.ov-enter-up {1044  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1045}1046.peach-overlay-view.ov-exit-up {1047  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1048}1049.peach-overlay-view.ov-enter-right {1050  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1051}1052.peach-overlay-view.ov-exit-right {1053  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1054}10551056@keyframes ov-enter-up {1057  from { opacity: 0; transform: translateY(18px); }1058  to   { opacity: 1; transform: translateY(0); }1059}1060@keyframes ov-exit-up {1061  from { opacity: 1; transform: translateY(0); }1062  to   { opacity: 0; transform: translateY(-12px); }1063}1064@keyframes ov-enter-right {1065  from { opacity: 0; transform: translateX(20px); }1066  to   { opacity: 1; transform: translateX(0); }1067}1068@keyframes ov-exit-right {1069  from { opacity: 1; transform: translateX(0); }1070  to   { opacity: 0; transform: translateX(20px); }1071}10721073/* Overlay shared header */1074.peach-overlay-header {1075  padding: 10px 12px 8px;1076  display: flex;1077  align-items: center;1078  gap: 10px;1079  flex-shrink: 0;1080}1081/* Back button — circular pill matching the settings stack masthead (.stk-back) */1082.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1083  width: 28px;1084  height: 28px;1085  flex: 0 0 28px;1086  border-radius: 999px;1087  border: 1px solid var(--peach-border);1088  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1089  color: var(--peach-t1);1090  padding: 0;1091}1092.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1093  color: var(--peach-t0);1094  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1095  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1096}1097.peach-overlay-title {1098  font-family: var(--font-display);1099  font-style: italic;1100  font-weight: 400;1101  font-size: 20px;1102  line-height: 1;1103  color: var(--peach-t0);1104  flex: 1;1105  text-align: center;1106}1107/* Balances the 28px back button so the title stays visually centred */1108.peach-overlay-spacer {1109  width: 28px;1110  flex: 0 0 28px;1111}11121113.peach-overlay-card {1114  background: var(--peach-s1);1115  border: 1px solid var(--peach-t3);1116  border-radius: 12px;1117  overflow: hidden;1118  width: 100%;1119}11201121.peach-onboarding-alt-actions {1122  display: flex;1123  flex-direction: column;1124  gap: 4px;1125  padding: 0;1126}11271128.peach-settings-copy {1129  margin: 0 0 10px;1130  font-size: 0.6875rem;1131  line-height: 1.5;1132  color: var(--peach-t2);1133}11341135.peach-settings-copy strong {1136  color: var(--peach-t0);1137}11381139.peach-settings-copy--spacious {1140  margin-bottom: 12px;1141}11421143.peach-settings-copy--result {1144  color: var(--peach-accent);1145  font-size: 0.8125rem;1146  text-align: center;1147  padding: 8px 0;1148}11491150.peach-settings-copy--danger {1151  color: var(--peach-breach);1152}11531154.peach-settings-copy--success {1155  color: var(--peach-accent);1156}11571158.peach-inline-feedback {1159  font-size: 0.6875rem;1160  margin: 10px 0 0;1161}11621163.peach-inline-feedback--ok {1164  color: var(--peach-accent);1165}11661167.peach-inline-feedback--error {1168  color: var(--peach-breach);1169}11701171.peach-inline-feedback--muted {1172  color: var(--peach-t2);1173  font-size: 0.625rem;1174  margin: 4px 0;1175}11761177.peach-inline-feedback--spaced {1178  margin-top: 12px;1179}11801181.peach-settings-actions--row {1182  display: flex;1183  gap: 6px;1184}11851186.peach-settings-actions--end {1187  margin-top: 14px;1188  justify-content: flex-end;1189}11901191.peach-settings-stack {1192  display: flex;1193  flex-direction: column;1194  gap: 6px;1195}11961197.peach-settings-stack--tight {1198  gap: 4px;1199}12001201.peach-settings-stack--spacious {1202  gap: 8px;1203}12041205.peach-settings-input {1206  width: 100%;1207  box-sizing: border-box;1208  padding: 8px 10px;1209  background: rgba(0, 0, 0, 0.22);1210  border: 1px solid transparent;1211  border-radius: 6px;1212  color: var(--peach-t0);1213  font-family: var(--font-ui);1214  font-size: 0.75rem;1215  outline: none;1216  transition: border-color 120ms ease, background 120ms ease;1217}12181219.peach-settings-input:focus {1220  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1221  background: rgba(0, 0, 0, 0.28);1222}12231224.peach-settings-input[type="password"] {1225  font-family: var(--font-mono);1226  letter-spacing: 0.04em;1227}12281229.peach-hidden-file-input {1230  display: none;1231}12321233.peach-checkbox-note {1234  display: flex;1235  align-items: flex-start;1236  gap: 8px;1237  font-size: 0.6875rem;1238  color: var(--peach-t1);1239  cursor: pointer;1240  margin: 12px 0;1241}12421243.peach-checkbox-note input {1244  margin-top: 1px;1245}12461247.peach-danger-notice {1248  background: rgba(220, 80, 60, 0.08);1249  border: 1px solid rgba(220, 80, 60, 0.2);1250  border-radius: 6px;1251  padding: 9px 11px;1252  font-size: 0.6875rem;1253  color: var(--peach-t1);1254  line-height: 1.5;1255}12561257.peach-info-notice {1258  font-size: 0.6875rem;1259  color: var(--peach-t1);1260  line-height: 1.5;1261  background: var(--surface-card);1262  border: 1px solid var(--peach-t3);1263  border-radius: 6px;1264  padding: 8px 10px;1265}12661267.peach-info-notice--warn {1268  border-color: rgba(220, 38, 38, 0.4);1269  background: rgba(220, 38, 38, 0.06);1270  color: rgba(220, 38, 38, 0.92);1271  margin-bottom: 8px;1272}12731274.peach-strength-row {1275  display: flex;1276  align-items: center;1277  gap: 8px;1278  margin-bottom: 10px;1279}12801281.peach-strength-track {1282  flex: 1;1283  height: 4px;1284  background: var(--peach-s2);1285  border-radius: 2px;1286  overflow: hidden;1287}12881289.peach-strength-fill {1290  height: 100%;1291  border-radius: 2px;1292  transition: width 120ms ease, background 120ms ease;1293}12941295/* ── Type selector tabs ── */1296.peach-type-tabs {1297  display: flex;1298  gap: 0;1299  background: var(--peach-t4);1300  border-radius: 8px;1301  padding: 3px;1302}13031304.peach-type-tab {1305  flex: 1;1306  display: flex;1307  align-items: center;1308  justify-content: center;1309  gap: 6px;1310  padding: 6px 10px;1311  border-radius: 6px;1312  border: none;1313  background: transparent;1314  cursor: pointer;1315  font-family: Inter, system-ui, sans-serif;1316  font-size: 0.6875rem;1317  font-weight: 400;1318  letter-spacing: 0.04em;1319  color: var(--peach-t1);1320  transition: background 150ms ease, color 150ms ease;1321}13221323.peach-type-tab.is-active {1324  background: var(--peach-s2);1325  color: var(--peach-t0);1326  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1327}13281329.peach-type-tab:not(.is-active):hover {1330  color: var(--peach-t0);1331}13321333.peach-type-tab svg {1334  opacity: 0.7;1335  flex-shrink: 0;1336}13371338.peach-type-tab.is-active svg {1339  opacity: 1;1340}13411342/* ── List view ───────────────────────────────────────────────────────── */1343.peach-list-top {1344  padding: 0 10px;1345  min-height: 46px;1346  display: flex;1347  align-items: center;1348  gap: 6px;1349  border-bottom: 1px solid var(--peach-t3);1350  flex-shrink: 0;1351  background: var(--peach-s1);1352}13531354.peach-vault-list {1355  flex: 1;1356  overflow-y: auto;1357  scrollbar-width: none;1358}1359.peach-vault-list::-webkit-scrollbar { display: none; }13601361/* Scrollbar — vault list */1362.peach-vault-list {1363  scrollbar-width: thin;1364  scrollbar-color: var(--peach-t3) transparent;1365}13661367.peach-vault-list::-webkit-scrollbar {1368  width: 3px;1369}13701371.peach-vault-list::-webkit-scrollbar-thumb {1372  background: var(--peach-t3);1373  border-radius: 2px;1374}13751376.peach-entry-row {1377  width: 100%;1378  display: flex;1379  align-items: center;1380  gap: 10px;1381  padding: 9px 16px;1382  background: transparent;1383  border: none;1384  border-bottom: 1px solid var(--peach-t3);1385  cursor: pointer;1386  color: inherit;1387  text-align: left;1388  transition: background 80ms ease;1389}1390.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1391.peach-entry-row:last-child { border-bottom: none; }1392.peach-entry-row.is-active {1393  box-shadow: inset 2px 0 0 var(--peach-accent);1394  background: rgba(240,232,216,0.03);1395}1396.peach-entry-row:focus-visible {1397  outline: none;1398  box-shadow: 0 0 0 1px var(--peach-border-accent);1399  background: rgba(240,232,216,0.03);1400}1401.peach-entry-row-icon {1402  width: 26px; height: 26px;1403  border-radius: 7px;1404  border: 1px solid var(--peach-t3);1405  display: flex; align-items: center; justify-content: center;1406  color: var(--peach-t2);1407  flex-shrink: 0;1408}1409.peach-entry-row-icon.is-breach {1410  border-color: rgba(220,80,60,0.3);1411  color: rgba(220,80,60,0.7);1412}14131414/* Title-initials chip used as the favicon fallback for login entries whose1415 * real favicon hasn't been cached by the browser yet (freshly-imported,1416 * never-visited domains). Background colour is hashed from the title so1417 * the same entry always shows the same chip. The chip fits the same1418 * 26×26 row icon slot the favicon would take. */1419.peach-favicon-initials {1420  display: inline-flex;1421  align-items: center;1422  justify-content: center;1423  width: 100%;1424  height: 100%;1425  border-radius: 4px;1426  font-family: "IBM Plex Mono", monospace;1427  font-size: 0.5625rem;1428  font-weight: 600;1429  letter-spacing: 0.04em;1430  color: rgba(240, 232, 216, 0.92);1431  text-transform: uppercase;1432  user-select: none;1433}1434.peach-entry-row-info { flex: 1; min-width: 0; }1435.peach-entry-row-name {1436  display: block;1437  font-family: var(--font-display);1438  font-size: 1.0625rem;1439  font-style: italic;1440  font-weight: 400;1441  color: var(--peach-t0);1442  line-height: 1.2;1443  white-space: nowrap;1444  overflow: hidden;1445  text-overflow: ellipsis;1446}1447.peach-entry-row-meta {1448  display: block;1449  font-family: "IBM Plex Mono", monospace;1450  font-size: 0.5625rem;1451  color: var(--peach-t2);1452  margin-top: 1px;1453  letter-spacing: 0.05em;1454}1455.peach-entry-row-dot {1456  width: 5px; height: 5px;1457  border-radius: 50%;1458  background: rgba(220,80,60,0.7);1459  flex-shrink: 0;1460}1461.peach-new-entry-row {1462  display: flex;1463  align-items: center;1464  justify-content: center;1465  gap: 6px;1466  width: 100%;1467  padding: 11px;1468  background: transparent;1469  border: none;1470  border-top: 1px solid var(--peach-t3);1471  color: var(--peach-t2);1472  font-family: "IBM Plex Mono", monospace;1473  font-size: 0.5625rem;1474  text-transform: uppercase;1475  letter-spacing: 0.14em;1476  cursor: pointer;1477  flex-shrink: 0;1478  transition: color 120ms ease, background 120ms ease;1479}1480.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }14811482/* ── Multi-select mode ─────────────────────────────────────────────── */14831484/* Select-mode trigger button in sort bar — same shape as trash btn */1485.peach-sort-select-btn {1486  display: flex;1487  align-items: center;1488  justify-content: center;1489  padding: 3px 5px;1490  background: transparent;1491  border: none;1492  cursor: pointer;1493  color: var(--peach-t2);1494  border-radius: 4px;1495  transition: color 140ms ease, background 140ms ease;1496}1497.peach-sort-select-btn:hover {1498  color: var(--peach-t1);1499  background: var(--peach-t3);1500}15011502/* Sort bar in select mode */1503.peach-select-cancel-btn {1504  background: transparent;1505  border: none;1506  padding: 0 4px;1507  cursor: pointer;1508  font-family: "IBM Plex Mono", monospace;1509  font-size: 0.5625rem;1510  letter-spacing: 0.12em;1511  text-transform: uppercase;1512  color: var(--peach-t2);1513  transition: color 140ms ease;1514  flex-shrink: 0;1515}1516.peach-select-cancel-btn:hover { color: var(--peach-t0); }15171518.peach-select-count-label {1519  flex: 1;1520  text-align: center;1521  font-family: "IBM Plex Mono", monospace;1522  font-size: 0.5625rem;1523  letter-spacing: 0.14em;1524  text-transform: uppercase;1525  color: var(--peach-t1);1526}15271528.peach-select-all-btn {1529  background: transparent;1530  border: none;1531  padding: 0 4px;1532  cursor: pointer;1533  font-family: "IBM Plex Mono", monospace;1534  font-size: 0.5625rem;1535  letter-spacing: 0.12em;1536  text-transform: uppercase;1537  color: var(--peach-t2);1538  transition: color 140ms ease;1539  flex-shrink: 0;1540}1541.peach-select-all-btn:hover { color: var(--peach-accent); }15421543/* List in select mode */1544.peach-vault-list.is-selecting .peach-entry-row {1545  cursor: default;1546}1547.peach-vault-list.is-selecting .peach-entry-row:hover {1548  background: rgba(240,232,216,0.02);1549}1550.peach-vault-list.is-selecting .peach-entry-row.is-selected {1551  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1552}1553.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1554  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1555}15561557/* Select indicator circles in icon slot */1558.peach-entry-row-icon.is-select-icon {1559  color: var(--peach-t2);1560}1561.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1562  color: var(--peach-accent);1563}15641565/* Delete action bar at bottom (replaces new-entry row) */1566.peach-select-action-bar {1567  display: flex;1568  align-items: center;1569  justify-content: center;1570  gap: 7px;1571  width: 100%;1572  padding: 11px;1573  background: transparent;1574  border: none;1575  border-top: 1px solid var(--peach-t3);1576  color: var(--peach-t1);1577  font-family: "IBM Plex Mono", monospace;1578  font-size: 0.5625rem;1579  text-transform: uppercase;1580  letter-spacing: 0.14em;1581  cursor: pointer;1582  flex-shrink: 0;1583  transition: color 120ms ease, background 120ms ease;1584}1585.peach-select-action-bar:not(:disabled):hover {1586  color: var(--peach-t0);1587  background: rgba(220,80,60,0.06);1588}1589.peach-select-action-bar:not(:disabled):hover svg {1590  stroke: rgba(220,80,60,0.8);1591}1592.peach-select-action-bar:disabled,1593.peach-select-action-bar.is-empty {1594  color: var(--peach-t2);1595  cursor: default;1596  opacity: 0.5;1597}1598.peach-search-counter-list {1599  white-space: nowrap;1600  flex-shrink: 0;1601}1602.peach-list-empty {1603  min-height: 180px;1604  display: grid;1605  place-items: center;1606  color: var(--peach-t2);1607  font-family: "IBM Plex Mono", monospace;1608  font-size: 0.6875rem;1609}16101611/* ── Settings view ───────────────────────────────────────────────────── */1612.peach-settings-body {1613  flex: 1;1614  overflow-y: auto;1615  min-height: 0;1616  display: flex;1617  flex-direction: column;1618  padding: 2px 0 10px;1619}1620.peach-settings-group {1621  margin: 4px 10px;1622  padding: 9px 14px 11px;1623  border-radius: 12px;1624  border: 1px solid rgba(255, 255, 255, 0.07);1625  background: rgba(26, 20, 16, 0.60);1626  backdrop-filter: blur(10px) saturate(1.3);1627  -webkit-backdrop-filter: blur(10px) saturate(1.3);1628}16291630.peach-settings-group + .peach-settings-group {1631  margin-top: 6px;1632}16331634@supports not (backdrop-filter: blur(1px)) {1635  .peach-settings-group {1636    background: rgba(26, 20, 16, 0.90);1637    border-color: rgba(255, 255, 255, 0.09);1638    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1639  }1640}16411642.light .peach-settings-group,1643[data-theme="light"] .peach-settings-group {1644  background: rgba(245, 237, 226, 0.70);1645  border-color: rgba(26, 18, 8, 0.08);1646  backdrop-filter: blur(10px) saturate(1.2);1647  -webkit-backdrop-filter: blur(10px) saturate(1.2);1648}16491650@supports not (backdrop-filter: blur(1px)) {1651  .light .peach-settings-group,1652  [data-theme="light"] .peach-settings-group {1653    background: rgba(245, 237, 226, 0.97);1654    border-color: rgba(26, 18, 8, 0.10);1655  }1656}1657.peach-export-intro {1658  padding-bottom: 8px;1659}1660.peach-export-card {1661  display: grid;1662  gap: 10px;1663}1664.peach-rune-canvas {1665  border-radius: 8px;1666  background: rgba(0, 0, 0, 0.22);1667  flex: 1;1668  align-self: center;1669}1670.peach-script-input {1671  font-family: "PeachScript", monospace;1672  font-size: 0.6875rem;1673  line-height: 1.9;1674  letter-spacing: 0.06em;1675  color: var(--peach-t0);1676  background: rgba(0, 0, 0, 0.22);1677  border: none;1678  border-radius: 6px;1679  padding: 12px;1680  width: 100%;1681  min-height: 96px;1682  resize: vertical;1683  word-break: break-all;1684  scrollbar-width: none;1685  -ms-overflow-style: none;1686}16871688.peach-script-input::-webkit-scrollbar { display: none; }1689.peach-csv-warning {1690  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1691  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1692  color: var(--peach-t0);1693  border-radius: 6px;1694  padding: 10px 12px;1695  margin-bottom: 8px;1696  font-size: 0.75rem;1697  line-height: 1.45;1698}1699.peach-export-card--primary {1700  background:1701    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1702}17031704/* Export menu — distribute the three format cards across the popup. */1705.peach-export-menu {1706  display: flex;1707  flex-direction: column;1708  flex: 1;1709  min-height: 0;1710}1711.peach-export-menu .peach-settings-group {1712  flex: 1;1713  display: flex;1714  flex-direction: column;1715  justify-content: center;1716  gap: 10px;1717}17181719/* Result view — the script-string fills the remaining vertical surface. */1720.peach-export-result-group {1721  flex: 1;1722  display: flex;1723  flex-direction: column;1724  min-height: 0;1725  border-bottom: none;1726}1727.peach-export-result-group .peach-export-card {1728  flex: 1;1729  min-height: 0;1730  display: flex;1731  flex-direction: column;1732  gap: 10px;1733}1734.peach-export-result-group .peach-export-card-copy {1735  flex-shrink: 0;1736}1737.peach-export-result-group .peach-settings-label {1738  flex-shrink: 0;1739}1740.peach-export-result-group button {1741  flex-shrink: 0;1742}1743.peach-export-card-head {1744  display: flex;1745  align-items: center;1746  justify-content: space-between;1747  gap: 10px;1748}1749.peach-export-card-copy {1750  margin: 0;1751  font-size: 0.75rem;1752  line-height: 1.55;1753  color: var(--peach-t1);1754}1755.peach-export-note {1756  margin: 0;1757  font-size: 0.625rem;1758  line-height: 1.5;1759  color: var(--peach-t2);1760}1761.peach-export-strength-track {1762  height: 3px;1763  background: var(--peach-border);1764  border-radius: 2px;1765  margin: 4px 0 2px;1766  overflow: hidden;1767}1768.peach-export-strength-fill {1769  height: 100%;1770  border-radius: 2px;1771  transition: width 250ms ease, background 250ms ease;1772}1773.peach-export-strength-warn {1774  margin: 0;1775  font-size: 0.625rem;1776  line-height: 1.5;1777  color: #e84040;1778  font-family: "IBM Plex Mono", monospace;1779}1780.peach-export-strength-hint {1781  margin: 0;1782  font-size: 0.625rem;1783  line-height: 1.5;1784  color: var(--peach-t2);1785  font-family: "IBM Plex Mono", monospace;1786}1787.peach-export-pill {1788  display: inline-flex;1789  align-items: center;1790  padding: 4px 8px;1791  border-radius: 999px;1792  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1793  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1794  color: var(--peach-accent);1795  font-family: "IBM Plex Mono", monospace;1796  font-size: 0.5rem;1797  letter-spacing: 0.12em;1798  text-transform: uppercase;1799  white-space: nowrap;1800}1801.peach-export-pill--danger {1802  border-color: rgba(220,80,60,0.22);1803  background: rgba(220,80,60,0.08);1804  color: var(--peach-breach);1805}1806.peach-settings-label {1807  margin: 0 0 6px;1808  font-family: "IBM Plex Mono", monospace;1809  font-size: 0.5rem;1810  text-transform: uppercase;1811  letter-spacing: 0.18em;1812  color: var(--peach-t2);1813}1814.peach-settings-row {1815  display: flex;1816  align-items: center;1817  justify-content: space-between;1818  gap: 12px;1819  min-height: 34px;1820  padding: 6px 0;1821  font-size: 0.8125rem;1822  color: var(--peach-t1);1823}1824.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1825.peach-settings-value {1826  font-family: "IBM Plex Mono", monospace;1827  font-size: 0.625rem;1828  color: var(--peach-t2);1829}18301831.peach-settings-value--status {1832  display: flex;1833  align-items: center;1834  gap: 6px;1835}18361837.peach-settings-link {1838  font-family: "IBM Plex Mono", monospace;1839  font-size: 0.625rem;1840  color: var(--peach-accent);1841  text-decoration: none;1842  cursor: pointer;1843}1844.peach-settings-link:hover {1845  text-decoration: underline;1846}18471848.peach-settings-row--stack {1849  flex-direction: column;1850  align-items: stretch;1851  gap: 6px;1852}18531854.peach-settings-row--top {1855  align-items: flex-start;1856}18571858.peach-settings-row-main {1859  display: flex;1860  flex-direction: column;1861  gap: 4px;1862  flex: 1;1863}1864.peach-toggle {1865  width: 28px; height: 16px;1866  border-radius: 999px;1867  background: var(--peach-t3);1868  border: 1px solid var(--peach-t3);1869  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1870  flex-shrink: 0;1871  transition: background 200ms ease, border-color 200ms ease;1872  cursor: pointer;1873}1874.peach-toggle.is-on {1875  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1876  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1877}1878.peach-toggle-knob {1879  width: 10px; height: 10px;1880  border-radius: 50%;1881  background: var(--peach-t2);1882  flex-shrink: 0;1883  transform: translateX(0px);1884  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1885}1886.peach-toggle.is-on .peach-toggle-knob {1887  background: var(--peach-accent);1888  transform: translateX(12px);1889}1890.peach-settings-footer {1891  display: flex;1892  align-items: center;1893  gap: 8px;1894  margin-top: auto;1895  padding: 14px 16px 8px;1896  font-family: "IBM Plex Mono", monospace;1897  font-size: 0.5625rem;1898  color: var(--peach-t2);1899}19001901/* ── Settings home navigation ──────────────────────────────────────────── */1902.peach-settings-nav-label {1903  margin: 0 0 2px;1904  padding: 12px 16px 4px;1905  font-family: "IBM Plex Mono", monospace;1906  font-size: 0.5rem;1907  text-transform: uppercase;1908  letter-spacing: 0.18em;1909  color: var(--peach-t2);1910}19111912.peach-settings-cat-row {1913  display: flex;1914  align-items: center;1915  gap: 10px;1916  width: 100%;1917  padding: 9px 16px;1918  background: none;1919  border: none;1920  border-bottom: 1px solid var(--peach-t3);1921  cursor: pointer;1922  text-align: left;1923  color: inherit;1924  transition: background var(--peach-dur-80) ease;1925}1926.peach-settings-cat-row:hover {1927  background: var(--peach-t3);1928}1929.peach-settings-cat-row:last-child {1930  border-bottom: none;1931}19321933.peach-settings-cat-icon {1934  width: 28px;1935  height: 28px;1936  border-radius: 7px;1937  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1938  color: var(--peach-accent);1939  display: flex;1940  align-items: center;1941  justify-content: center;1942  flex-shrink: 0;1943}1944/* Light theme: peach-on-cream is too low-contrast — both colors are warm.1945   Darken the icon stroke to ink and bump the bg tint so the icon reads1946   sharply while the cell still feels accent-tinted. */1947.light .peach-settings-cat-icon {1948  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1949  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));1950}19511952.peach-settings-cat-content {1953  flex: 1;1954  display: flex;1955  flex-direction: column;1956  gap: 2px;1957  min-width: 0;1958}19591960.peach-settings-cat-name {1961  font-size: 0.8125rem;1962  font-weight: 450;1963  color: var(--peach-t0);1964  line-height: 1.2;1965}19661967.peach-settings-cat-desc {1968  font-size: 0.625rem;1969  color: var(--peach-t2);1970  line-height: 1.3;1971  white-space: nowrap;1972  overflow: hidden;1973  text-overflow: ellipsis;1974}19751976.peach-settings-cat-chevron {1977  color: var(--peach-t2);1978  flex-shrink: 0;1979  opacity: 0.5;1980}19811982/* ── Settings sub-view section labels ──────────────────────────────────── */1983.peach-settings-sub-label {1984  margin: 12px 0 4px;1985  font-family: "IBM Plex Mono", monospace;1986  font-size: 0.5rem;1987  text-transform: uppercase;1988  letter-spacing: 0.18em;1989  color: var(--peach-t2);1990}1991.peach-settings-sub-label:first-child {1992  margin-top: 4px;1993}19941995/* ── Settings: collapsible Advanced section ─────────────────────────────── */1996.peach-settings-advanced-toggle {1997  display: flex;1998  align-items: center;1999  justify-content: space-between;2000  width: 100%;2001  background: none;2002  border: none;2003  cursor: pointer;2004  padding: 12px 0 4px;2005  margin: 0;2006  color: inherit;2007}2008.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2009  color: var(--peach-t1);2010}2011.peach-settings-advanced-chevron {2012  font-size: 0.5625rem;2013  color: var(--peach-t3);2014  letter-spacing: 0;2015  transition: color 120ms ease;2016}20172018/* ── Feedback form ──────────────────────────────────────────────────────── */2019.peach-feedback-group {2020  flex: 1;2021  display: flex;2022  flex-direction: column;2023  border-bottom: none;2024}20252026.peach-feedback-intro {2027  margin: 4px 0 14px;2028  font-size: 0.75rem;2029  line-height: 1.55;2030  color: var(--peach-t1);2031}20322033.peach-feedback-chips {2034  display: flex;2035  flex-wrap: wrap;2036  gap: 6px;2037  margin-bottom: 14px;2038}20392040.peach-feedback-chip {2041  padding: 4px 10px;2042  border-radius: 999px;2043  border: 1px solid var(--peach-t3);2044  background: none;2045  color: var(--peach-t2);2046  font-size: 0.6875rem;2047  font-family: var(--font-ui);2048  cursor: pointer;2049  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2050    background var(--peach-dur-80) ease;2051}2052.peach-feedback-chip:hover {2053  border-color: var(--peach-t2);2054  color: var(--peach-t1);2055}2056.peach-feedback-chip.is-active {2057  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);2058  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2059  color: var(--peach-accent);2060}20612062.peach-feedback-textarea {2063  flex: 1;2064  width: 100%;2065  min-height: 120px;2066  box-sizing: border-box;2067  background: rgba(0, 0, 0, 0.22);2068  border: 1px solid transparent;2069  border-radius: 6px;2070  color: var(--peach-t0);2071  font-size: 0.75rem;2072  font-family: var(--font-ui);2073  line-height: 1.5;2074  padding: 8px 10px;2075  resize: none;2076  outline: none;2077  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2078}2079.peach-feedback-textarea:focus {2080  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2081  background: rgba(0, 0, 0, 0.28);2082}2083.peach-feedback-textarea:focus {2084  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2085}2086.peach-feedback-textarea::placeholder {2087  color: var(--peach-t2);2088}20892090.peach-feedback-meta {2091  margin: 6px 0 0;2092  font-size: 0.625rem;2093  color: var(--peach-t2);2094  font-family: "IBM Plex Mono", monospace;2095}20962097.peach-feedback-result {2098  margin: 8px 0 0;2099  font-size: 0.6875rem;2100  font-family: "IBM Plex Mono", monospace;2101}2102.peach-feedback-result--ok { color: var(--peach-sync-ok); }2103.peach-feedback-result--err { color: var(--peach-breach); }21042105.peach-feedback-submit {2106  width: 100%;2107  margin-top: 12px;2108  justify-content: center;2109}21102111.peach-feedback-anon {2112  margin: 8px 0 0;2113  font-size: 0.625rem;2114  color: var(--peach-t2);2115  text-align: center;2116}21172118.peach-passkey-badge {2119  margin-left: 8px;2120  font-size: 0.625rem;2121  letter-spacing: 0.06em;2122  text-transform: uppercase;2123  color: var(--peach-t2);2124  font-family: var(--font-ui);2125  vertical-align: middle;2126}21272128.peach-passkey-delete-btn {2129  color: var(--peach-breach);2130  border-color: rgba(229, 85, 85, 0.25);2131}21322133.peach-passkey-delete-confirm {2134  display: flex;2135  align-items: center;2136  gap: 8px;2137  padding: 8px 10px;2138  background: rgba(229, 85, 85, 0.06);2139  border: 1px solid rgba(229, 85, 85, 0.2);2140  border-radius: 6px;2141}21422143.peach-passkey-delete-confirm-copy {2144  flex: 1;2145  font-size: 0.6875rem;2146  color: var(--peach-t1);2147}21482149.peach-passkey-delete-btn--confirm {2150  color: var(--peach-breach);2151  border-color: rgba(229, 85, 85, 0.4);2152}21532154.peach-passkey-activity {2155  flex-direction: column;2156  align-items: flex-start;2157  gap: 4px;2158}21592160.peach-passkey-meta {2161  font-size: 0.6875rem;2162  color: var(--peach-t2);2163}21642165.peach-passkey-actions {2166  position: relative;2167  z-index: 1;2168  margin-top: 14px;2169  display: flex;2170  flex-direction: column;2171  gap: 8px;2172}21732174.peach-passkey-approval {2175  display: flex;2176  flex-direction: column;2177  align-items: center;2178  padding: 16px 20px 14px;2179  gap: 8px;2180  text-align: center;2181}21822183.peach-passkey-approval-icon {2184  width: 36px;2185  height: 36px;2186  border-radius: 10px;2187  background: var(--peach-s2);2188  border: 1px solid var(--peach-t3);2189  display: flex;2190  align-items: center;2191  justify-content: center;2192  flex-shrink: 0;2193  color: var(--peach-accent);2194}21952196.peach-passkey-approval-icon img,2197.peach-passkey-approval-icon svg {2198  width: 22px;2199  height: 22px;2200  border-radius: 5px;2201}22022203.peach-passkey-approval-rp {2204  font-family: var(--font-ui);2205  font-size: 0.75rem;2206  color: var(--peach-t2);2207  letter-spacing: 0.03em;2208}22092210.peach-passkey-approval-action {2211  font-family: var(--font-display);2212  font-style: italic;2213  font-weight: 300;2214  font-size: 18px;2215  color: var(--peach-t0);2216  line-height: 1.1;2217  margin: 1px 0;2218}22192220.peach-passkey-approval-user {2221  font-family: var(--font-mono);2222  font-size: 0.6875rem;2223  color: var(--peach-t1);2224  background: var(--peach-s2);2225  border: 1px solid var(--peach-t3);2226  border-radius: 4px;2227  padding: 3px 8px;2228}22292230.peach-passkey-approval-notice {2231  font-size: 0.625rem;2232  color: var(--peach-t2);2233  line-height: 1.5;2234  max-width: 220px;2235}22362237.peach-passkey-approval-actions {2238  display: flex;2239  gap: 8px;2240  width: 100%;2241  margin-top: 6px;2242}22432244.peach-passkey-approval-actions .peach-btn {2245  flex: 1;2246}22472248/* ── Inline generator drawer ── */2249.peach-generator-drawer {2250  display: grid;2251  grid-template-rows: 0fr;2252  transition: grid-template-rows 320ms var(--peach-curve-arrival);2253  overflow: hidden;2254}2255.peach-generator-drawer.is-open {2256  grid-template-rows: 1fr;2257}2258.peach-generator-drawer-inner {2259  min-height: 0;2260  overflow: hidden;2261}2262.peach-generator-drawer-content {2263  border-top: 1px solid var(--peach-t3);2264  padding: 8px 0 4px;2265  display: flex;2266  flex-direction: column;2267  gap: 8px;2268}22692270/* ── Compact generator (inside entry edit) ── */2271.peach-generator-drawer-content--compact {2272  border-top: 1px solid var(--peach-t3);2273  padding: 8px 0 2px;2274  gap: 7px;2275}2276.peach-pwgen-compact-display-row {2277  display: flex;2278  align-items: center;2279  gap: 6px;2280}2281.peach-pwgen-compact-output {2282  flex: 1;2283  min-width: 0;2284  font-family: "IBM Plex Mono", monospace;2285  font-size: 0.6875rem;2286  font-weight: 400;2287  letter-spacing: 0.04em;2288  color: var(--peach-t0);2289  background: rgba(240, 232, 216, 0.04);2290  border: 1px solid var(--peach-t3);2291  border-radius: 5px;2292  padding: 5px 8px;2293  line-height: 1.5;2294  outline: none;2295  transition: border-color 120ms ease;2296}22972298.peach-pwgen-compact-output:focus {2299  border-color: var(--peach-t1);2300}2301.peach-pwgen-compact-controls {2302  display: flex;2303  align-items: center;2304  gap: 6px;2305}2306.peach-pwgen-compact-slider {2307  flex: 1;2308  min-width: 0;2309  height: 2px !important;2310}2311.peach-pwgen-compact-controls .peach-pwgen-len-num {2312  flex-shrink: 0;2313  min-width: 18px;2314  text-align: right;2315}2316.peach-pwgen-compact-pills {2317  display: flex;2318  gap: 3px;2319  flex-shrink: 0;2320}2321.peach-pwgen-compact-pills .peach-pwgen-pill {2322  padding: 2px 7px;2323  font-size: 0.5rem;2324}2325.peach-pwgen-compact-use {2326  flex-shrink: 0;2327  font-size: 0.625rem !important;2328  padding: 3px 9px !important;2329  min-height: 22px !important;2330  border-radius: 5px !important;2331}23322333/* ── Password edit row (input + eye toggle side-by-side) ── */2334.peach-password-edit-row {2335  display: flex;2336  align-items: center;2337  gap: 6px;2338}2339.peach-password-edit-row .peach-inline-input {2340  flex: 1;2341  min-width: 0;2342}23432344/* ── Generate toggle link ── */2345.peach-generate-toggle-link {2346  display: inline-flex;2347  align-items: center;2348  gap: 5px;2349  background: none;2350  border: none;2351  padding: 0;2352  cursor: pointer;2353  font-family: "IBM Plex Mono", monospace;2354  font-size: 0.625rem;2355  color: var(--peach-t2);2356  letter-spacing: 0.04em;2357  transition: color 120ms ease;2358  align-self: flex-start;2359}2360.peach-generate-toggle-link:hover {2361  color: var(--peach-accent);2362}23632364/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2365.peach-entry-body {2366  flex: 1;2367  overflow-y: auto;2368  overflow-x: hidden;2369  scrollbar-width: none;2370  -ms-overflow-style: none;2371  overscroll-behavior: contain;2372  display: grid;2373  gap: 10px;2374  align-content: start;2375  padding: 10px 20px 14px;2376  min-width: 0;2377  min-height: 0;2378}2379.peach-entry-body::-webkit-scrollbar { display: none; }23802381/* Type-toggle pills + inline note toolbar */2382.peach-new-type-row {2383  display: flex;2384  align-items: center;2385  gap: 6px;2386  margin-bottom: 2px;2387}2388.peach-new-type-btn {2389  background: transparent;2390  border: 1px solid var(--peach-t3);2391  border-radius: 12px;2392  padding: 3px 10px;2393  font-family: "IBM Plex Mono", monospace;2394  font-size: 0.5625rem;2395  letter-spacing: 0.12em;2396  text-transform: uppercase;2397  color: var(--peach-t2);2398  cursor: pointer;2399  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2400}2401.peach-new-type-btn.is-active {2402  color: var(--peach-t0);2403  border-color: var(--peach-accent);2404  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2405}2406.peach-new-type-btn:not(.is-active):hover {2407  color: var(--peach-t1);2408  border-color: var(--peach-t2);2409}24102411/* Editable title */2412.peach-new-title-wrap { margin: 0 0 2px; }2413.peach-new-title-input {2414  background: transparent;2415  border: none;2416  outline: none;2417  width: 100%;2418  color: var(--peach-t0);2419  font-family: var(--font-display);2420  font-style: italic;2421  font-weight: 400;2422  font-size: 40px;2423  line-height: 0.95;2424  caret-color: var(--peach-accent);2425}2426.peach-new-title-input::placeholder { color: var(--peach-t2); }24272428/* Editable domain field */2429.peach-domain-edit-row {2430  display: flex;2431  align-items: center;2432  gap: 6px;2433}24342435.peach-domain-edit-row .peach-domain-value--edit {2436  flex: 1;2437  width: 0;2438}24392440.peach-domain-url-btn {2441  flex-shrink: 0;2442  background: transparent;2443  border: none;2444  cursor: pointer;2445  color: var(--peach-t3);2446  padding: 2px 3px;2447  display: flex;2448  align-items: center;2449  line-height: 0;2450  border-radius: 3px;2451  transition: color 120ms ease;2452}24532454.peach-domain-url-btn:hover {2455  color: var(--peach-accent);2456}24572458.peach-domain-value--edit {2459  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2460  font-size: 0.625rem;2461  font-style: italic;2462  letter-spacing: 0.12em;2463  color: var(--peach-t1);2464  background: transparent;2465  border: none;2466  border-bottom: 1px solid var(--peach-t3);2467  outline: none;2468  width: 100%;2469  padding: 2px 0;2470  caret-color: var(--peach-accent);2471  transition: border-color 140ms ease, color 140ms ease;2472}2473.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2474.peach-domain-value--edit:focus {2475  border-bottom-color: rgba(240, 232, 216, 0.28);2476  color: var(--peach-t0);2477}24782479/* Editable field values (username, password, totp) */2480.peach-field-value--edit {2481  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2482  font-size: 0.8125rem;2483  color: var(--peach-t0);2484  background: transparent;2485  border: none;2486  border-bottom: 1px solid var(--peach-t3);2487  outline: none;2488  flex: 1;2489  min-width: 0;2490  padding: 3px 0;2491  caret-color: var(--peach-accent);2492  transition: border-color 140ms ease, color 140ms ease;2493}2494.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2495.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2496.peach-field-value--edit:focus {2497  border-bottom-color: rgba(240, 232, 216, 0.28);2498  color: var(--peach-t0);2499}25002501/* "+ add optional field" links */2502.peach-entry-add-links {2503  display: flex;2504  gap: 12px;2505  flex-wrap: wrap;2506  margin-top: -2px;2507}2508.peach-add-field-link {2509  background: transparent;2510  border: none;2511  padding: 0;2512  cursor: pointer;2513  font-family: "IBM Plex Mono", monospace;2514  font-size: 0.5625rem;2515  letter-spacing: 0.1em;2516  text-transform: uppercase;2517  color: var(--peach-t2);2518  transition: color 140ms ease;2519}2520.peach-add-field-link:hover { color: var(--peach-accent); }25212522/* ── New entry form (legacy classes) ────────────────────────────────── */2523.peach-new-body {2524  flex: 1;2525  overflow-y: auto;2526  padding: 10px 20px 14px;2527}2528.peach-new-name-input {2529  background: transparent;2530  border: none;2531  outline: none;2532  width: 100%;2533  color: var(--peach-t0);2534  font-family: var(--font-display);2535  font-style: italic;2536  font-weight: 400;2537  font-size: 40px;2538  line-height: 0.95;2539  caret-color: var(--peach-accent);2540}2541.peach-new-name-input::placeholder { color: var(--peach-t2); }2542.peach-new-field-input {2543  background: transparent;2544  border: none;2545  outline: none;2546  flex: 1;2547  min-width: 0;2548  caret-color: var(--peach-accent);2549}2550.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }25512552/* ── Canary card ── */2553.peach-canary-card {2554  border: 1px solid rgba(217, 160, 48, 0.2);2555  background: rgba(217, 160, 48, 0.03);2556  border-radius: 8px;2557  padding: 12px;2558}25592560.peach-canary-settings-header {2561  display: flex;2562  align-items: center;2563  justify-content: space-between;2564  cursor: pointer;2565  user-select: none;2566}25672568.peach-canary-card .peach-label {2569  color: rgba(217, 160, 48, 0.85);2570}25712572.peach-canary-card .peach-new-field-input {2573  border-color: rgba(217, 160, 48, 0.25);2574}25752576.peach-canary-card .peach-new-field-input:focus {2577  border-color: rgba(217, 160, 48, 0.5);2578}25792580.peach-canary-body {2581  margin-top: 12px;2582  display: flex;2583  flex-direction: column;2584  gap: 10px;2585}25862587.peach-canary-explainer {2588  display: flex;2589  gap: 10px;2590  padding: 10px 12px;2591  border-radius: 10px;2592  background: rgba(217, 160, 48, 0.06);2593  border: 1px solid rgba(217, 160, 48, 0.22);2594  margin-bottom: 4px;2595}25962597.peach-canary-explainer-icon {2598  font-size: 1rem;2599  flex-shrink: 0;2600  line-height: 1.2;2601}26022603.peach-canary-explainer-title {2604  font-family: var(--font-ui);2605  font-size: 0.6875rem;2606  font-weight: 500;2607  color: rgba(217, 160, 48, 0.9);2608  margin: 0 0 3px;2609}26102611.peach-canary-explainer-copy {2612  font-family: var(--font-ui);2613  font-size: 0.625rem;2614  color: var(--peach-t2);2615  line-height: 1.55;2616  margin: 0;2617}26182619.peach-canary-hint {2620  font-size: 0.625rem;2621  color: var(--peach-t2);2622  font-family: Inter, system-ui, sans-serif;2623  line-height: 1.5;2624  margin-top: 4px;2625}26262627.peach-canary-actions-row {2628  display: flex;2629  align-items: center;2630  gap: 8px;2631}26322633.peach-canary-test-btn {2634  border-color: rgba(217, 160, 48, 0.3);2635  color: rgba(217, 160, 48, 0.85);2636}26372638.peach-canary-test-result {2639  font-size: 0.625rem;2640  font-family: Inter, system-ui, sans-serif;2641}26422643.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2644.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }26452646.peach-canary-badge {2647  display: flex;2648  position: relative;2649  z-index: 1;2650  align-items: center;2651  gap: 5px;2652  padding: 4px 10px;2653  background: rgba(217, 160, 48, 0.12);2654  border: 1px solid rgba(217, 160, 48, 0.35);2655  border-radius: 6px;2656  margin-bottom: 6px;2657  width: fit-content;2658}26592660.peach-canary-badge-label {2661  font-size: 0.625rem;2662  letter-spacing: 0.06em;2663  color: rgba(217, 160, 48, 0.9);2664  font-family: var(--font-ui);2665  text-transform: uppercase;2666}26672668.peach-canary-badge-icon {2669  font-size: 0.6875rem;2670}26712672.peach-canary-suppress-row {2673  display: flex;2674  align-items: center;2675  gap: 8px;2676  padding: 6px 10px;2677  background: rgba(217, 160, 48, 0.08);2678  border-radius: 6px;2679  margin-bottom: 8px;2680}26812682.peach-canary-suppress-label {2683  font-size: 0.6875rem;2684  color: rgba(217, 160, 48, 0.85);2685  cursor: pointer;2686  font-family: var(--font-ui);2687  letter-spacing: 0.04em;2688}26892690.peach-regen-panel {2691  position: relative;2692  z-index: 1;2693  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2694  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2695  border-radius: 8px;2696  padding: 12px;2697  margin-bottom: 8px;2698}26992700.peach-regen-panel-header {2701  display: flex;2702  align-items: center;2703  justify-content: space-between;2704  margin-bottom: 10px;2705}27062707.peach-regen-panel-title {2708  font-size: 0.6875rem;2709  font-weight: 600;2710  letter-spacing: 0.06em;2711  text-transform: uppercase;2712  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2713}27142715.peach-regen-output {2716  background: rgba(0, 0, 0, 0.2);2717  border-radius: 6px;2718  padding: 10px;2719  margin-bottom: 10px;2720  font-family: var(--font-mono);2721  font-size: 0.8125rem;2722  word-break: break-all;2723  color: var(--peach-t1);2724}27252726.peach-regen-actions {2727  display: flex;2728  gap: 6px;2729}27302731.peach-regen-actions--spaced {2732  margin-bottom: 8px;2733}27342735.peach-regen-action-grow {2736  flex: 1;2737}27382739.peach-regen-copy-btn {2740  padding: 0 8px;2741}27422743.peach-regen-success {2744  position: relative;2745  z-index: 1;2746  background: rgba(40, 180, 80, 0.1);2747  border: 1px solid rgba(40, 180, 80, 0.3);2748  border-radius: 8px;2749  padding: 10px 12px;2750  margin-bottom: 8px;2751  display: flex;2752  align-items: center;2753  gap: 8px;2754  font-size: 0.6875rem;2755  color: rgba(40, 180, 80, 0.9);2756}27572758/* ── Note editor overlay ── */2759.peach-note-editor {2760  position: absolute;2761  inset: 0;2762  z-index: 200;2763  display: flex;2764  flex-direction: column;2765  background:2766    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2767    var(--peach-bg);2768  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2769}27702771.peach-note-editor-header {2772  display: flex;2773  align-items: center;2774  gap: 10px;2775  padding: 14px 16px 10px;2776  border-bottom: 1px solid var(--peach-t3);2777  flex-shrink: 0;2778}27792780.peach-note-editor-back {2781  background: transparent;2782  border: none;2783  cursor: pointer;2784  color: var(--peach-t2);2785  padding: 4px 6px;2786  border-radius: 6px;2787  display: flex;2788  align-items: center;2789  transition: color 120ms ease, background 120ms ease;2790  flex-shrink: 0;2791}2792.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }27932794.peach-note-editor-label {2795  flex: 1;2796  font-family: var(--font-display);2797  font-style: italic;2798  font-size: 0.9375rem;2799  color: var(--peach-t1);2800  letter-spacing: 0.02em;2801}28022803.peach-note-editor-save-btn {2804  background: transparent;2805  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2806  border-radius: 8px;2807  color: var(--peach-accent);2808  font-family: "IBM Plex Mono", monospace;2809  font-size: 0.625rem;2810  letter-spacing: 0.06em;2811  text-transform: uppercase;2812  padding: 3px 10px;2813  cursor: pointer;2814  transition: background 120ms ease, border-color 120ms ease;2815}2816.peach-note-editor-save-btn:hover:not(:disabled) {2817  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2818  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2819}2820.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }28212822.peach-note-toolbar {2823  display: flex;2824  align-items: center;2825  gap: 3px;2826  padding: 6px 14px 5px;2827  border-bottom: 1px solid var(--peach-t3);2828  flex-shrink: 0;2829}28302831.peach-note-tool-btn {2832  background: transparent;2833  border: 1px solid transparent;2834  border-radius: 5px;2835  color: var(--peach-t2);2836  font-family: "IBM Plex Mono", monospace;2837  font-size: 0.625rem;2838  letter-spacing: 0.04em;2839  padding: 2px 8px;2840  cursor: pointer;2841  line-height: 1.6;2842  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2843}2844.peach-note-tool-btn:hover {2845  background: var(--peach-t4);2846  color: var(--peach-t0);2847  border-color: var(--peach-t3);2848}28492850.peach-note-tool-icon {2851  padding: 3px 7px;2852  display: inline-flex;2853  align-items: center;2854  justify-content: center;2855}28562857.peach-note-tool-divider {2858  width: 1px;2859  height: 14px;2860  background: var(--peach-t3);2861  margin: 0 4px;2862  flex-shrink: 0;2863}28642865.peach-note-editor-body {2866  flex: 1;2867  overflow-y: auto;2868  padding: 16px 20px 20px;2869  outline: none;2870  font-family: var(--font-display);2871  font-size: 1rem;2872  line-height: 1.75;2873  color: var(--peach-t0);2874  scrollbar-width: none;2875  word-break: break-word;2876}2877.peach-note-editor-body:empty::before {2878  content: "write your note…";2879  color: var(--peach-t3);2880  font-style: italic;2881  pointer-events: none;2882}28832884/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2885.peach-note-editor-inline {2886  display: flex;2887  flex-direction: column;2888  flex: 1;2889  min-height: 0;2890}2891.peach-note-editor-body--inline {2892  flex: 1;2893  min-height: 0;2894  font-size: 0.9375rem;2895  padding: 10px 20px 14px;2896}28972898/* Full-width toolbar row inside the body (Add.tsx note type).2899   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2900.peach-note-toolbar-body {2901  display: flex;2902  align-items: center;2903  gap: 3px;2904  padding: 5px 20px 4px;2905  margin: 2px -20px 0;2906  border-bottom: 1px solid var(--peach-t3);2907  flex-shrink: 0;2908}29092910/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2911   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2912   and .peach-note-tool-divider button-level styles. */2913.peach-note-toolbar-inline {2914  display: flex;2915  align-items: center;2916  gap: 3px;2917  margin-left: auto;2918  padding-left: 10px;2919  border-left: 1px solid var(--peach-t3);2920  min-height: 22px;2921}29222923/* Entry.tsx toolbar row (no tabs, toolbar only) */2924.peach-entry-note-toolbar-row {2925  display: flex;2926  align-items: center;2927  margin: 4px 0 6px;2928  position: relative;2929  z-index: 1;2930}2931.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2932  border-left: none;2933  padding-left: 0;2934  margin-left: 0;2935}29362937/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2938.peach-note-body {2939  display: flex;2940  flex-direction: column;2941  flex: 1;2942  min-height: 0;2943  margin: 4px 0 0;2944}2945.peach-entry-body--new .peach-note-body {2946  margin: 8px -20px 0;2947}29482949/* Add.tsx body is a grid by default; swap to a flex column when a note is2950   active so the note body can stretch and pin the tags row to the bottom. */2951.peach-entry-body--new:has(.peach-note-body) {2952  display: flex;2953  flex-direction: column;2954}29552956/* Rich content element styles (editor + display) */2957.peach-note-editor-body h2,2958.peach-note-content h2 {2959  font-family: var(--font-display);2960  font-size: 20px;2961  font-weight: 600;2962  font-style: italic;2963  color: var(--peach-t0);2964  margin: 6px 0 2px;2965  line-height: 1.3;2966}2967.peach-note-editor-body ul,2968.peach-note-content ul {2969  padding-left: 18px;2970  margin: 3px 0;2971  list-style: disc;2972}2973.peach-note-editor-body ol,2974.peach-note-content ol {2975  padding-left: 18px;2976  margin: 3px 0;2977  list-style: decimal;2978}2979.peach-note-editor-body li,2980.peach-note-content li { margin: 2px 0; }2981.peach-note-editor-body hr,2982.peach-note-content hr {2983  border: none;2984  border-top: 1px solid var(--peach-t3);2985  margin: 10px 0;2986}29872988/* font size elements from execCommand */2989.peach-note-editor-body font[size="1"],2990.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }2991.peach-note-editor-body font[size="2"],2992.peach-note-content font[size="2"] { font-size: 0.8125rem; }2993.peach-note-editor-body font[size="3"],2994.peach-note-content font[size="3"] { font-size: 1rem; }2995.peach-note-editor-body font[size="4"],2996.peach-note-content font[size="4"] { font-size: 20px; }2997.peach-note-editor-body font[size="5"],2998.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }29993000/* bold / italic inside the editor and note display */3001.peach-note-editor-body b, .peach-note-editor-body strong,3002.peach-note-content b, .peach-note-content strong { font-weight: 700; }3003.peach-note-editor-body em, .peach-note-editor-body i,3004.peach-note-content em, .peach-note-content i { font-style: italic; }30053006/* note display — rendered HTML, no pre-wrap */3007.peach-note-content {3008  overflow: auto;3009  max-height: 340px;3010  word-break: break-word;3011}30123013/* ── Note textarea ── */3014.peach-note-textarea {3015  width: 100%;3016  min-height: 180px;3017  max-height: 280px;3018  resize: vertical;3019  background: var(--peach-t4);3020  border: 1px solid var(--peach-t3);3021  border-radius: 8px;3022  padding: 10px 12px;3023  font-family: "IBM Plex Mono", monospace;3024  font-size: 0.75rem;3025  line-height: 1.7;3026  color: var(--peach-t1);3027  outline: none;3028  transition: border-color 150ms ease;3029}30303031.peach-note-textarea:focus {3032  border-color: var(--peach-t2);3033}30343035.peach-note-char-count {3036  font-family: "IBM Plex Mono", monospace;3037  font-size: 0.5625rem;3038  color: var(--peach-t3);3039  text-align: right;3040  margin-top: 4px;3041  letter-spacing: 0.1em;3042}30433044/* ── Field input baseline ── */3045.peach-new-field-input {3046  width: 100%;3047  background: transparent;3048  border: none;3049  border-bottom: 1px solid var(--peach-t3);3050  padding: 4px 0;3051  color: var(--peach-t1);3052  font-family: "IBM Plex Mono", monospace;3053  font-size: 0.8125rem;3054  outline: none;3055  transition: border-color 150ms ease;3056}30573058.peach-new-field-input:focus {3059  border-bottom-color: var(--peach-t0);3060  color: var(--peach-t0);3061}30623063.peach-new-name-input {3064  width: 100%;3065  background: transparent;3066  border: none;3067  border-bottom: 1px solid var(--peach-t3);3068  padding: 6px 0;3069  font-family: var(--font-display);3070  font-style: italic;3071  font-size: 28px;3072  color: var(--peach-t0);3073  outline: none;3074  transition: border-color 150ms ease;3075}30763077.peach-new-name-input:focus {3078  border-bottom-color: var(--peach-t1);3079}30803081.peach-new-name-input::placeholder {3082  color: var(--peach-t2);3083  font-style: italic;3084}30853086.peach-new-field-input::placeholder {3087  color: var(--peach-t3);3088}30893090/* ── Demo entrance animation ── */3091#hd-shell {3092  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3093}3094@keyframes hd-shell-enter {3095  from { opacity: 0; transform: scale(0.96) translateY(16px); }3096  to   { opacity: 1; transform: scale(1) translateY(0); }3097}30983099/* ── Keyframes ── */3100@keyframes peach-char-enter {3101  from { opacity: 0; transform: translateY(0.22em); }3102  to   { opacity: 1; transform: translateY(0); }3103}3104@keyframes peach-content-enter {3105  from { opacity: 0.96; transform: translateY(4px); }3106  to   { opacity: 1; transform: translateY(0); }3107}3108@keyframes peach-content-exit {3109  from { opacity: 1; transform: translateY(0); }3110  to   { opacity: 0.92; transform: translateY(-3px); }3111}3112@keyframes peach-screen-enter {3113  from { opacity: 0; transform: translateY(14px); }3114  to   { opacity: 1; transform: translateY(0); }3115}3116@keyframes peach-shell-fade-in {3117  from { opacity: 0; }3118  to   { opacity: 1; }3119}3120@keyframes peach-veil-in {3121  from { opacity: 0; }3122  to   { opacity: 1; }3123}3124@keyframes peach-lock-settle {3125  0%   { transform: scale(0.9); }3126  65%  { transform: scale(1.08); }3127  100% { transform: scale(1); }3128}3129@keyframes peach-copy-confirm {3130  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3131  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); }3132}3133@keyframes peach-copy-retreat {3134  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); }3135  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3136}3137@keyframes peach-copy-flood {3138  from { opacity: 0; transform: scaleX(0.15); }3139  to   { opacity: 1; transform: scaleX(1); }3140}3141@keyframes peach-copy-icon-settle {3142  from  { transform: scale(0.84); }3143  70%   { transform: scale(1.08); }3144  to    { transform: scale(1); }3145}3146@keyframes peach-copy-sheen-retreat {3147  from { opacity: 1; transform: scaleX(1); }3148  to   { opacity: 0; transform: scaleX(0.15); }3149}3150@keyframes peach-copy-drain {3151  from { width: 100%; }3152  to   { width: 0; }3153}3154@keyframes peach-shake {3155  0%, 100% { transform: translateX(0); }3156  20%      { transform: translateX(-6px); }3157  40%      { transform: translateX(6px); }3158  60%      { transform: translateX(-4px); }3159  80%      { transform: translateX(4px); }3160}31613162@keyframes pip-pulse {3163  0% { transform: scale(1); }3164  40% { transform: scale(2.2); }3165  100% { transform: scale(1); }3166}316731683169/* ── Password generator ── */3170.peach-pwgen-body {3171  flex: 1; overflow-y: auto;3172  display: flex; flex-direction: column;3173}3174.peach-policy-badge {3175  display: flex; align-items: center;3176  padding: 6px 20px 0;3177  font-size: 0.625rem; font-family: Inter, sans-serif;3178  color: var(--peach-t2); letter-spacing: 0.04em;3179}3180.peach-pwgen-display {3181  padding: 14px 20px 12px;3182  border-bottom: 1px solid var(--peach-t3);3183  display: flex; align-items: flex-start; gap: 10px;3184}3185.peach-pwgen-display-row {3186  display: flex;3187  align-items: flex-start;3188  gap: 8px;3189  padding-bottom: 8px;3190  border-bottom: 1px solid var(--peach-t3);3191}3192.peach-pwgen-output {3193  flex: 1; min-width: 0; margin: 0;3194  font-family: "IBM Plex Mono", monospace;3195  font-size: 0.8125rem; color: var(--peach-t0);3196  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3197  white-space: normal;3198  padding: 10px 12px;3199  background: var(--peach-t4);3200  border-radius: 6px;3201  min-height: 36px;3202}3203.peach-pwgen-output-display {3204  flex: 1;3205  min-width: 0;3206  margin: 0;3207  font-family: var(--font-display);3208  font-style: italic;3209  font-weight: 300;3210  font-size: 32px;3211  line-height: 1.05;3212  color: var(--peach-t0);3213  word-break: break-all;3214  overflow-wrap: break-word;3215  white-space: normal;3216  letter-spacing: 0.02em;3217}3218.peach-pwgen-display-actions {3219  display: flex;3220  flex-direction: column;3221  gap: 4px;3222  flex-shrink: 0;3223  margin-top: 2px;3224}3225.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3226.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3227.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3228.peach-pwgen-len-num {3229  font-family: "IBM Plex Mono", monospace;3230  font-size: 0.75rem; color: var(--peach-accent);3231}3232.peach-pwgen-len-num--edit {3233  cursor: text;3234  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3235}3236.peach-pwgen-len-input {3237  font-family: "IBM Plex Mono", monospace;3238  font-size: 0.75rem;3239  color: var(--peach-accent);3240  background: transparent;3241  border: none;3242  border-bottom: 1px solid var(--peach-accent);3243  outline: none;3244  width: 32px;3245  text-align: right;3246  padding: 0;3247}3248.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3249.peach-pwgen-toggles { display: flex; flex-direction: column; }3250.peach-pwgen-charset-pills {3251  display: flex;3252  gap: 6px;3253  flex-wrap: wrap;3254}3255.peach-pwgen-pill {3256  padding: 4px 11px;3257  border-radius: 999px;3258  border: 1px solid var(--peach-t3);3259  background: transparent;3260  color: var(--peach-t2);3261  font-family: "IBM Plex Mono", monospace;3262  font-size: 0.5625rem;3263  letter-spacing: 0.08em;3264  cursor: pointer;3265  transition: all 150ms ease;3266}3267.peach-pwgen-pill.is-on {3268  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3269  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3270  color: var(--peach-accent);3271}3272.peach-pwgen-pill:not(.is-on):hover {3273  color: var(--peach-t1);3274  border-color: var(--peach-t2);3275}3276.peach-pwgen-use-btn {3277  width: 100%;3278  min-height: 34px;3279  border-radius: 8px;3280  margin-top: 2px;3281}3282.peach-generator-constraint-note {3283  font-family: 'IBM Plex Mono', monospace;3284  font-size: 10px;3285  color: var(--peach-t3);3286  letter-spacing: 0.04em;3287  margin: 0;3288  transition: opacity 200ms ease;3289}3290.peach-pwgen-toggle-row {3291  display: flex; align-items: center; justify-content: space-between;3292  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3293}3294.peach-pwgen-toggle-row:last-child { border-bottom: none; }3295.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }32963297.peach-screen-prelock {3298  z-index: 10;3299}33003301.prelock-form {3302  display: grid;3303  gap: 12px;3304}33053306/* Peach popup should not expose native scrollbars on internal panels. */3307.peach-settings-body,3308.peach-new-body,3309.peach-pwgen-body,3310.lock-screen,3311.peach-import-preview {3312  scrollbar-width: none;3313  -ms-overflow-style: none;3314  overscroll-behavior: contain;3315}3316.peach-settings-body::-webkit-scrollbar,3317.peach-new-body::-webkit-scrollbar,3318.peach-pwgen-body::-webkit-scrollbar,3319.lock-screen::-webkit-scrollbar,3320.peach-import-preview::-webkit-scrollbar {3321  width: 0;3322  height: 0;3323  display: none;3324}33253326.lock-screen {3327  height: 100%;3328  min-height: 100%;3329  overflow-y: auto;3330  padding: 18px 18px 16px;3331  gap: 14px;3332  grid-template-rows: auto auto auto 1fr auto;3333  align-content: stretch;3334  position: relative;3335  isolation: isolate;3336}3337.peach-screen.lock-screen--vault-stage {3338  display: flex;3339  flex-direction: column;3340  justify-content: flex-start;3341  gap: 18px;3342  padding: 20px 18px 18px;3343  overflow: hidden;3344}3345.peach-screen.lock-screen--vault-stage .peach-lock-panel {3346  margin-top: 0;3347}3348.lock-screen--onboarding {3349  display: flex;3350  flex-direction: column;3351  gap: 12px;3352  justify-content: flex-start;3353}33543355.lock-screen::before {3356  content: "";3357  position: absolute;3358  inset: 12px 18px auto auto;3359  width: 160px;3360  height: 160px;3361  border-radius: 999px;3362  background:3363    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%);3364  filter: blur(6px);3365  opacity: 0.7;3366  pointer-events: none;3367  z-index: 0;3368}33693370.peach-lock-rune-string {3371  flex: 1;3372  display: flex;3373  align-items: center;3374  justify-content: center;3375  gap: 6px;3376  font-family: PeachScript, monospace;3377  font-size: 0.8125rem;3378  letter-spacing: 0.05em;3379  pointer-events: none;3380  user-select: none;3381  position: relative;3382  z-index: 1;3383}33843385.peach-lock-rune-string span {3386  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3387  text-shadow:3388    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3389    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3390  transition: color 0.9s ease, text-shadow 0.9s ease;3391}33923393.peach-lock-rune-string span.is-glowing {3394  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3395  text-shadow:3396    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3397    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3398}33993400.lock-screen-header {3401  display: flex;3402  align-items: center;3403  justify-content: space-between;3404  position: relative;3405  z-index: 1;3406}34073408.lock-password-input.shake {3409  animation: peach-shake 300ms ease-in-out;3410}34113412.peach-hint-error {3413  color: rgba(220, 80, 60, 0.92);3414}34153416.peach-onboarding-headline {3417  margin: 0;3418  font-family: var(--font-display);3419  font-size: 35px;3420  line-height: 0.88;3421  font-style: italic;3422  font-weight: 400;3423  max-width: 252px;3424}34253426.peach-lock-copy {3427  display: grid;3428  gap: 8px;3429  position: relative;3430  z-index: 1;3431}34323433.peach-lock-copy--onboarding {3434  gap: 10px;3435}34363437.peach-lock-hero {3438  position: relative;3439  z-index: 1;3440  display: grid;3441  gap: 8px;3442  min-height: 0;3443  padding: 4px 2px 0;3444  border: none;3445  border-radius: 0;3446  background: transparent;3447  box-shadow: none;3448}3449.peach-lock-hero-art {3450  position: absolute;3451  right: -8px;3452  top: -6px;3453  width: 120px;3454  height: 120px;3455  display: flex;3456  align-items: center;3457  justify-content: center;3458  pointer-events: none;3459  opacity: 0.12;3460  filter: saturate(0.9);3461}3462.peach-lock-hero-mark {3463  width: 100%;3464  height: 100%;3465}3466/* Peach body stays brand-peach across every accent — we don't want a3467   green or blue peach when sage/sky is selected. Leaf + vein keep the3468   sage tint because a real peach has a sage leaf. In the new brand-kit3469   mark the leaf is path 1 and the vein stroke is path 2; the body and3470   back-lobe (paths 3 + 4) must stay untouched. */3471.peach-lock-hero-mark path:nth-child(1) {3472  fill: rgba(123, 144, 96, 0.88);3473}3474.peach-lock-hero-mark path:nth-child(2) {3475  stroke: rgba(94, 122, 66, 0.95);3476}3477.peach-lock-hero > *:not(.peach-lock-hero-art) {3478  position: relative;3479  z-index: 1;3480}34813482.peach-lock-eyebrow {3483  display: inline-flex;3484  align-items: center;3485  width: fit-content;3486  padding: 4px 9px;3487  border-radius: 999px;3488  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3489  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3490  color: var(--peach-t0);3491  font-family: "IBM Plex Mono", monospace;3492  font-size: 0.5rem;3493  letter-spacing: 0.18em;3494  text-transform: uppercase;3495}34963497.peach-lock-label-row {3498  display: flex;3499  align-items: center;3500  justify-content: space-between;3501  margin-bottom: 0;3502}35033504.peach-lock-reveal-btn {3505  display: inline-flex;3506  align-items: center;3507  gap: 4px;3508  background: none;3509  border: none;3510  cursor: pointer;3511  font-family: "IBM Plex Mono", monospace;3512  font-size: 0.5625rem;3513  letter-spacing: 0.06em;3514  color: var(--peach-t2);3515  padding: 2px 0;3516  transition: color 150ms ease;3517}35183519.peach-lock-reveal-btn:hover {3520  color: var(--peach-t1);3521}35223523.peach-lock-warning {3524  color: rgba(220, 80, 60, 0.85) !important;3525  line-height: 1.5;3526}35273528.peach-onboarding-cards {3529  display: grid;3530  gap: 8px;3531  position: relative;3532  z-index: 1;3533}35343535.peach-lock-panel {3536  position: relative;3537  z-index: 1;3538  display: grid;3539  gap: 9px;3540  padding: 14px 16px 15px;3541  border-radius: 18px;3542  border: 1px solid var(--peach-t3);3543  background:3544    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3545  box-shadow:3546    inset 0 1px 0 rgba(240, 232, 216, 0.04),3547    0 12px 28px rgba(0, 0, 0, 0.12);3548}35493550/* Glass surface — lock panel and settings groups */3551.peach-glass {3552  background: rgba(26, 20, 16, 0.65);3553  border: 1px solid rgba(255, 255, 255, 0.08);3554  border-radius: 12px;3555  backdrop-filter: blur(12px) saturate(1.4);3556  -webkit-backdrop-filter: blur(12px) saturate(1.4);3557}35583559@supports not (backdrop-filter: blur(1px)) {3560  .peach-glass {3561    background: rgba(26, 20, 16, 0.92);3562    border: 1px solid rgba(255, 255, 255, 0.10);3563    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3564  }3565}35663567.light .peach-glass,3568[data-theme="light"] .peach-glass {3569  background: rgba(240, 233, 223, 0.72);3570  border: 1px solid rgba(26, 18, 8, 0.08);3571  backdrop-filter: blur(12px) saturate(1.2);3572  -webkit-backdrop-filter: blur(12px) saturate(1.2);3573}35743575@supports not (backdrop-filter: blur(1px)) {3576  .light .peach-glass,3577  [data-theme="light"] .peach-glass {3578    background: rgba(240, 233, 223, 0.97);3579    border: 1px solid rgba(26, 18, 8, 0.10);3580  }3581}35823583/* Lock panel keeps its own border-radius over the generic glass token */3584.peach-lock-panel.peach-glass {3585  border-radius: 18px;3586  background: rgba(26, 20, 16, 0.65);3587  border: 1px solid rgba(255, 255, 255, 0.08);3588  box-shadow:3589    inset 0 1px 0 rgba(255, 255, 255, 0.05),3590    0 12px 28px rgba(0, 0, 0, 0.3);3591}35923593.light .peach-lock-panel.peach-glass,3594[data-theme="light"] .peach-lock-panel.peach-glass {3595  background: rgba(240, 233, 223, 0.82);3596  border: 1px solid rgba(26, 18, 8, 0.08);3597  box-shadow:3598    inset 0 1px 0 rgba(255, 255, 255, 0.4),3599    0 8px 24px rgba(80, 56, 32, 0.15);3600}36013602@supports not (backdrop-filter: blur(1px)) {3603  .peach-lock-panel.peach-glass {3604    background: rgba(26, 20, 16, 0.92);3605    box-shadow:3606      inset 0 1px 0 rgba(255, 255, 255, 0.05),3607      0 12px 28px rgba(0, 0, 0, 0.4);3608  }3609  .light .peach-lock-panel.peach-glass,3610  [data-theme="light"] .peach-lock-panel.peach-glass {3611    background: rgba(240, 233, 223, 0.98);3612  }3613}36143615.peach-lock-panel--secondary {3616  gap: 12px;3617}36183619.peach-lock-panel-header {3620  display: flex;3621  align-items: baseline;3622  justify-content: space-between;3623  gap: 12px;3624}36253626.peach-lock-option-grid {3627  display: grid;3628  gap: 10px;3629}36303631.peach-lock-option {3632  width: 100%;3633  display: grid;3634  gap: 6px;3635  padding: 14px 15px;3636  border-radius: 16px;3637  border: 1px solid rgba(240, 232, 216, 0.08);3638  background: rgba(240, 232, 216, 0.02);3639  color: var(--peach-t0);3640  text-align: left;3641  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3642}36433644.peach-lock-option:hover {3645  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3646  background: rgba(240, 232, 216, 0.04);3647  transform: translateY(-1px);3648}36493650.peach-lock-option-title {3651  font-size: 0.75rem;3652  color: var(--peach-t0);3653}36543655.peach-lock-option-copy {3656  font-size: 0.6875rem;3657  line-height: 1.55;3658  color: var(--peach-t1);3659}36603661.peach-onboarding-stack {3662  margin-top: 2px;3663}3664.peach-lock-panel-footer {3665  display: grid;3666  gap: 6px;3667  margin-top: 2px;3668  padding-top: 10px;3669  border-top: 1px solid rgba(240, 232, 216, 0.06);3670}36713672/* ── Restore tab view ─────────────────────────────────────────────────────3673   Tab-based restore screen replacing the old three-card picker. */36743675.peach-restore-tabview {3676  overflow: hidden;3677}36783679.peach-restore-tabcard {3680  flex: 1;3681  display: flex;3682  flex-direction: column;3683  gap: 0;3684  padding: 0;3685  overflow: hidden;3686  cursor: default;3687  user-select: none;3688  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3689}36903691/* ── Tab selector ─────────────────────────────────────────────────────── */36923693.peach-restore-tabs {3694  display: flex;3695  justify-content: space-around;3696  padding: 14px 10px 10px;3697  border-bottom: 1px solid var(--peach-t3);3698  gap: 2px;3699  overflow: hidden;3700  scrollbar-width: none;3701}3702.peach-restore-tabs::-webkit-scrollbar { display: none; }37033704.peach-restore-tab {3705  background: none;3706  border: none;3707  cursor: pointer;3708  padding: 3px 2px;3709  font-family: 'Cormorant Garamond', Georgia, serif;3710  font-style: italic;3711  font-size: 11px;3712  color: var(--peach-t2);3713  transition: color 150ms ease, text-shadow 150ms ease;3714  flex: 1;3715  min-width: 0;3716  text-align: center;3717  white-space: nowrap;3718  overflow: hidden;3719  text-overflow: ellipsis;3720}3721.peach-restore-tab:hover {3722  color: var(--peach-accent);3723  text-shadow:3724    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3725    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3726}3727.peach-restore-tab.is-active {3728  color: var(--peach-accent);3729  text-shadow:3730    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3731    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3732}37333734/* ── Content area ─────────────────────────────────────────────────────── */37353736.peach-restore-content {3737  padding: 16px 16px 14px;3738  display: flex;3739  flex-direction: column;3740  gap: 8px;3741  overflow: hidden;3742  scrollbar-width: none;3743  flex: 1;3744}3745.peach-restore-content::-webkit-scrollbar { display: none; }3746.peach-restore-content > * {3747  overflow: hidden;3748  scrollbar-width: none;3749}3750.peach-restore-content > *::-webkit-scrollbar { display: none; }37513752/* ── Shared tab inner layout ──────────────────────────────────────────── */37533754.peach-rt-symbols,3755.peach-rt-csv,3756.peach-rt-phone {3757  display: flex;3758  flex-direction: column;3759  gap: 8px;3760  overflow: hidden;3761}37623763.peach-rt-submit {3764  width: 100%;3765}37663767.peach-rt-error {3768  margin: 0;3769  font-size: 0.6875rem;3770  color: var(--peach-breach);3771  line-height: 1.4;3772}37733774/* ── PeachScript tab ──────────────────────────────────────────────────── */37753776.peach-restore-symbols-textarea {3777  font-family: 'PeachScript', monospace;3778  font-size: 13px;3779  line-height: 1.9;3780  letter-spacing: 0.1em;3781  word-break: break-all;3782  resize: none;3783  width: 100%;3784  min-height: 56px;3785  max-height: 72px;3786  overflow: hidden;3787  scrollbar-width: none;3788  -ms-overflow-style: none;3789  box-sizing: border-box;3790  padding: 6px 8px;3791  border-radius: 8px;3792  border: 1px solid var(--peach-t3);3793  background: rgba(240, 232, 216, 0.03);3794  color: var(--peach-t0);3795}3796.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3797.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }37983799.peach-restore-symbols-pass {3800  width: 100%;3801  box-sizing: border-box;3802  padding: 7px 10px;3803  border-radius: 8px;3804  border: 1px solid var(--peach-t3);3805  background: rgba(240, 232, 216, 0.03);3806  color: var(--peach-t0);3807  font-size: 0.8125rem;3808}3809.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3810.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }38113812.peach-rt-divider {3813  text-align: center;3814  font-size: 0.6875rem;3815  color: var(--peach-t2);3816  font-style: italic;3817}38183819.peach-rt-file-label {3820  width: 100%;3821  justify-content: center;3822}38233824.peach-rt-anim-canvas {3825  width: 100%;3826  height: 180px;3827  border-radius: 10px;3828  overflow: hidden;3829  display: block;3830}38313832/* ── CSV tab ──────────────────────────────────────────────────────────── */38333834.peach-rt-csv-sources {3835  margin: 0;3836  font-size: 0.6875rem;3837  color: var(--peach-t2);3838  line-height: 1.5;3839  text-align: center;3840}38413842.peach-rt-csv-warning {3843  margin: 0;3844  font-family: "IBM Plex Mono", monospace;3845  font-size: 0.5625rem;3846  letter-spacing: 0.12em;3847  color: var(--peach-breach);3848  text-align: center;3849}38503851/* ── From Phone tab ───────────────────────────────────────────────────── */38523853.peach-rt-phone-code {3854  margin: 0;3855  text-align: center;3856  font-family: "IBM Plex Mono", monospace;3857  font-size: 22px;3858  letter-spacing: 0.18em;3859  color: var(--peach-t0);3860}38613862.peach-rt-phone-qr {3863  display: block;3864  width: 96px;3865  height: 96px;3866  margin: 0 auto;3867  border-radius: 6px;3868  image-rendering: pixelated;3869  overflow: hidden;3870}38713872.peach-rt-phone-hint {3873  margin: 0;3874  font-size: 0.6875rem;3875  color: var(--peach-t2);3876  line-height: 1.55;3877  text-align: center;3878}38793880/* ── Intro popup ──────────────────────────────────────────────────────── */38813882.peach-restore-intro-overlay {3883  position: absolute;3884  inset: 0;3885  z-index: 100;3886  display: flex;3887  align-items: center;3888  justify-content: center;3889  padding: 20px;3890  background: rgba(12, 10, 6, 0.7);3891  backdrop-filter: blur(4px);3892  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3893}38943895.peach-restore-intro-card {3896  width: 100%;3897  display: flex;3898  flex-direction: column;3899  gap: 12px;3900  padding: 22px 20px 20px;3901  border-radius: 16px;3902  border: 1px solid var(--peach-t3);3903  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3904  backdrop-filter: blur(4px);3905  -webkit-backdrop-filter: blur(4px);3906  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3907}39083909.peach-restore-intro-headline {3910  margin: 0;3911  font-family: var(--font-display);3912  font-style: italic;3913  font-size: 20px;3914  font-weight: 400;3915  color: var(--peach-t0);3916}39173918.peach-restore-intro-body {3919  display: flex;3920  flex-direction: column;3921  gap: 8px;3922}3923.peach-restore-intro-body p {3924  margin: 0;3925  font-size: 0.75rem;3926  color: var(--peach-t1);3927  line-height: 1.5;3928}39293930.peach-restore-intro-btn {3931  width: 100%;3932  margin-top: 4px;3933}39343935/* Snapshot restore panel */3936.peach-snapshot-panel {3937  gap: 10px;3938  overflow-y: auto;3939  max-height: 340px;3940}3941.peach-snapshot-list {3942  display: flex;3943  flex-direction: column;3944  gap: 4px;3945}3946.peach-snapshot-row {3947  display: flex;3948  align-items: center;3949  justify-content: space-between;3950  width: 100%;3951  padding: 8px 10px;3952  border-radius: 8px;3953  border: 1px solid rgba(240, 232, 216, 0.07);3954  background: transparent;3955  cursor: pointer;3956  transition: border-color 120ms, background 120ms;3957  text-align: left;3958  gap: 8px;3959}3960.peach-snapshot-row:hover {3961  border-color: rgba(240, 232, 216, 0.14);3962  background: rgba(240, 232, 216, 0.03);3963}3964.peach-snapshot-row.is-selected {3965  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3966  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);3967}3968.peach-snapshot-time {3969  font-size: 11.5px;3970  color: var(--peach-t0);3971  flex: 1;3972}3973.peach-snapshot-count {3974  font-family: "IBM Plex Mono", monospace;3975  font-size: 0.625rem;3976  color: var(--peach-t2);3977  flex-shrink: 0;3978}3979.peach-snapshot-confirm {3980  display: flex;3981  flex-direction: column;3982  gap: 8px;3983  padding-top: 10px;3984  border-top: 1px solid rgba(240, 232, 216, 0.06);3985}3986.peach-snapshot-warning {3987  display: flex;3988  align-items: flex-start;3989  gap: 6px;3990  font-size: 10.5px;3991  color: rgba(220, 80, 60, 0.85);3992  line-height: 1.55;3993}3994.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }3995.peach-snapshot-confirm-row {3996  display: flex;3997  gap: 6px;3998  align-items: center;3999}4000.peach-snapshot-restore-btn {4001  width: 100%;4002}4003.peach-lock-hero--unlock .peach-lock-hero-art {4004  width: 112px;4005  height: 112px;4006  right: 0;4007  top: 2px;4008  opacity: 0.1;4009}40104011.peach-card {4012  border: 1px solid var(--peach-t3);4013  border-radius: 18px;4014  background:4015    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4016  box-shadow:4017    inset 0 0 0 1px var(--peach-border-accent),4018    inset 0 1px 0 rgba(240, 232, 216, 0.04),4019    0 12px 32px rgba(0, 0, 0, 0.14);4020  overflow: hidden;4021}40224023.peach-card-active {4024  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4025  box-shadow:4026    inset 0 1px 0 rgba(240, 232, 216, 0.05),4027    0 16px 38px rgba(0, 0, 0, 0.18),4028    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4029}40304031.peach-card-disabled {4032  opacity: 0.72;4033}40344035.peach-card-header {4036  width: 100%;4037  padding: 13px 16px 11px;4038  background: transparent;4039  color: var(--peach-t0);4040  display: flex;4041  justify-content: space-between;4042  align-items: center;4043  text-align: left;4044  font-size: 0.75rem;4045}40464047.peach-card-body {4048  padding: 0 16px 16px;4049  display: grid;4050  gap: 9px;4051}40524053.peach-card-tag {4054  color: var(--peach-t2);4055  font-family: "IBM Plex Mono", monospace;4056  font-size: 0.5625rem;4057  letter-spacing: 0.12em;4058  text-transform: uppercase;4059}40604061.peach-empty-copy {4062  display: grid;4063  gap: 6px;4064  color: var(--peach-t1);4065  font-size: 0.8125rem;4066}40674068.peach-lock-submit {4069  width: 100%;4070  box-shadow:4071    0 1px 0 rgba(255,255,255,0.10) inset,4072    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4073    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4074    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4075}40764077.peach-lock-secondary {4078  width: 100%;4079  border-color: var(--peach-t3);4080  background: rgba(240, 232, 216, 0.02);4081}40824083.peach-lock-secondary:hover {4084  background: rgba(240, 232, 216, 0.04);4085}40864087.peach-lock-note {4088  max-width: none;4089  line-height: 1.55;4090  margin: 0;4091}40924093.peach-overlay-action {4094  font-size: 0.625rem;4095  padding: 4px 8px;4096  letter-spacing: 0.06em;4097  min-width: 44px;4098  text-align: center;4099}41004101.peach-inline-action {4102  flex-shrink: 0;4103  font-size: 0.5625rem;4104  letter-spacing: 0.1em;4105  text-transform: uppercase;4106  padding: 4px 7px;4107}4108.peach-password-toggle-btn {4109  display: inline-flex;4110  align-items: center;4111  justify-content: center;4112  min-width: 30px;4113  min-height: 26px;4114  padding: 0 7px;4115  border: 1px solid var(--peach-t3);4116  border-radius: 999px;4117  background: rgba(240, 232, 216, 0.04);4118  color: var(--peach-t2);4119  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4120}4121.peach-password-toggle-btn:hover {4122  border-color: var(--peach-t2);4123  color: var(--peach-t0);4124  background: rgba(240, 232, 216, 0.06);4125}41264127.peach-new-textarea {4128  width: 100%;4129  min-height: 88px;4130  resize: vertical;4131  border: 0;4132  outline: none;4133  background: transparent;4134  color: var(--peach-t1);4135  font-family: "IBM Plex Mono", monospace;4136  font-size: 0.75rem;4137  line-height: 1.65;4138  caret-color: var(--peach-accent);4139}41404141.peach-new-textarea::placeholder {4142  color: var(--peach-t2);4143  opacity: 0.7;4144}41454146.peach-settings-actions {4147  display: grid;4148  gap: 8px;4149}41504151.peach-sync-section-label {4152  font-size: 0.6875rem;4153  color: var(--peach-t2);4154  text-transform: uppercase;4155  letter-spacing: 0.05em;4156}41574158.peach-sync-network-note {4159  margin: 0 0 6px;4160  font-size: 0.75rem;4161  color: var(--peach-t2);4162  line-height: 1.4;4163}41644165.peach-settings-row--tappable {4166  background: none;4167  border: none;4168  width: 100%;4169  text-align: left;4170  cursor: pointer;4171  color: var(--peach-t1);4172  font-size: 0.8125rem;4173}4174.peach-settings-row--tappable:hover {4175  color: var(--peach-t0);4176}41774178.peach-sync-pro-hint {4179  display: flex;4180  flex-direction: column;4181  align-items: flex-start;4182  gap: 8px;4183  padding: 12px 0 4px;4184}41854186.peach-sync-device-row {4187  display: flex;4188  justify-content: space-between;4189  align-items: center;4190  padding: 6px 0;4191  border-bottom: 1px solid var(--peach-t3);4192}41934194.peach-sync-device-info {4195  display: flex;4196  flex-direction: column;4197  gap: 2px;4198}41994200.peach-sync-device-name {4201  font-size: 0.8125rem;4202  color: var(--peach-t0);4203}42044205.peach-sync-device-meta {4206  font-size: 0.6875rem;4207  color: var(--peach-t2);4208}42094210.peach-sync-status-dot {4211  display: inline-block;4212  width: 8px;4213  height: 8px;4214  border-radius: 50%;4215  vertical-align: middle;4216}42174218.peach-sync-remove-btn {4219  color: var(--peach-breach);4220}42214222.peach-sync-advanced-row {4223  display: flex;4224  justify-content: space-between;4225  align-items: center;4226  padding: 6px 0;4227  gap: 12px;4228}42294230.peach-sync-advanced-info {4231  display: flex;4232  flex-direction: column;4233  gap: 2px;4234  flex: 1;4235}42364237.peach-sync-advanced-name {4238  font-size: 0.8125rem;4239  color: var(--peach-t0);4240}42414242.peach-sync-reset-confirm {4243  display: flex;4244  flex-direction: column;4245  gap: 8px;4246  padding: 10px;4247  border: 1px solid var(--peach-breach);4248  border-radius: 10px;4249  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4250}42514252.peach-sync-reset-confirm-headline {4253  font-size: 0.8125rem;4254  font-weight: 600;4255  color: var(--peach-t0);4256  margin: 0;4257}42584259.peach-sync-reset-confirm-body {4260  font-size: 0.75rem;4261  color: var(--peach-t1);4262  margin: 0;4263  line-height: 1.4;4264}42654266.peach-btn--danger {4267  background: var(--peach-breach);4268  color: #fff;4269  border-color: var(--peach-breach);4270}4271.peach-btn--danger:hover:not(:disabled) {4272  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4273}4274.peach-btn--danger:disabled {4275  opacity: 0.55;4276  cursor: not-allowed;4277}42784279.peach-sync-hero-icon {4280  color: var(--peach-t1);4281  opacity: 0.85;4282}42834284.peach-import-preview {4285  margin-bottom: 12px;4286  max-height: 152px;4287  overflow-y: auto;4288  border: 1px solid var(--peach-t3);4289  border-radius: 10px;4290  padding: 8px 10px;4291  display: grid;4292  gap: 8px;4293  background: rgba(240, 232, 216, 0.02);4294}42954296.peach-import-preview-row {4297  display: flex;4298  justify-content: space-between;4299  gap: 10px;4300  font-size: 0.6875rem;4301  color: var(--peach-t1);4302}43034304.peach-import-preview-title {4305  color: var(--peach-t0);4306  flex: 1;4307  min-width: 0;4308  overflow: hidden;4309  text-overflow: ellipsis;4310  white-space: nowrap;4311}43124313.peach-import-preview-meta {4314  color: var(--peach-t2);4315  flex-shrink: 0;4316  max-width: 42%;4317  overflow: hidden;4318  text-overflow: ellipsis;4319  white-space: nowrap;4320}43214322.peach-import-preview-more {4323  color: var(--peach-t2);4324  font-size: 0.625rem;4325}43264327.peach-restore-copy {4328  margin: 0;4329  color: var(--peach-t1);4330  font-size: 0.6875rem;4331  line-height: 1.6;4332}43334334.peach-restore-warning {4335  padding: 10px 12px;4336  border-radius: 12px;4337  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4338  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4339  color: var(--peach-t0);4340  font-size: 0.6875rem;4341  line-height: 1.55;4342}43434344.peach-provider-chips {4345  display: flex;4346  flex-wrap: wrap;4347  gap: 6px;4348}43494350.peach-provider-chip {4351  display: inline-flex;4352  align-items: center;4353  padding: 5px 8px;4354  border-radius: 999px;4355  border: 1px solid var(--peach-t3);4356  background: rgba(240, 232, 216, 0.02);4357  color: var(--peach-t1);4358  font-family: "IBM Plex Mono", monospace;4359  font-size: 0.5rem;4360  letter-spacing: 0.08em;4361  text-transform: uppercase;4362}43634364.peach-restore-file,4365.peach-restore-input {4366  width: 100%;4367  border-radius: 10px;4368  border: 1px solid var(--peach-t3);4369  background: var(--peach-s2);4370  color: var(--peach-t0);4371  font-size: 0.75rem;4372}43734374.peach-restore-file {4375  padding: 9px 10px;4376}43774378.peach-restore-file::file-selector-button {4379  margin-right: 10px;4380  padding: 7px 10px;4381  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4382  border-radius: 999px;4383  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4384  color: var(--peach-t0);4385  font-size: 0.625rem;4386  letter-spacing: 0.08em;4387  text-transform: uppercase;4388  cursor: pointer;4389}43904391.peach-restore-input {4392  padding: 10px 12px;4393}43944395.peach-auth-grid {4396  display: grid;4397  gap: 10px;4398}43994400.peach-import-summary {4401  color: var(--peach-t1);4402  font-size: 0.75rem;4403  line-height: 1.6;4404  margin-bottom: 12px;4405}44064407.peach-restore-error {4408  color: rgba(220, 80, 60, 0.95);4409  font-size: 0.75rem;4410  line-height: 1.55;4411}44124413.peach-passkey-card {4414  max-width: 400px;4415  margin: auto 16px;4416  align-self: center;4417  width: calc(100% - 32px);4418}44194420/* Center the approval card vertically inside the overlay-view (which sets4421 * flex-direction: column without justify-content). Without this, the card4422 * sits at the top with a tall empty band below — looks unfinished on the4423 * 320px popup. */4424.peach-overlay-view:has(.peach-passkey-card) {4425  justify-content: center;4426}44274428.peach-pro-badge {4429  padding: 2px 6px;4430  border-radius: 999px;4431  font-family: var(--font-ui);4432  font-size: 0.625rem;4433  letter-spacing: 0.08em;4434  text-transform: uppercase;4435  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4436  color: var(--peach-accent);4437}44384439/* ── Shortcuts rebind table ─────────────────────────────────── */4440.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4441.peach-shortcut-row {4442  display: flex;4443  align-items: center;4444  gap: 10px;4445  padding: 6px 0;4446}4447.peach-shortcut-row-label {4448  flex: 1;4449  font-size: 0.75rem;4450  color: var(--peach-t0);4451}4452.peach-shortcut-chip {4453  min-width: 64px;4454  padding: 4px 10px;4455  border-radius: 6px;4456  border: 1px solid var(--peach-t3);4457  background: var(--peach-input-bg, var(--surface-card));4458  color: var(--peach-t0);4459  font-family: var(--font-mono);4460  font-size: 0.6875rem;4461  letter-spacing: 0.04em;4462  cursor: pointer;4463  text-align: center;4464  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4465}4466.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4467.peach-shortcut-chip.is-custom {4468  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4469  color: var(--peach-accent);4470}4471.peach-shortcut-chip.is-capturing {4472  border-color: var(--peach-accent);4473  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4474  color: var(--peach-accent);4475  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4476}4477@keyframes peach-shortcut-capture-pulse {4478  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4479  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4480}4481.peach-shortcut-reset {4482  background: transparent;4483  border: none;4484  cursor: pointer;4485  color: var(--peach-t2);4486  padding: 4px 6px;4487  border-radius: 5px;4488  font-size: 0.875rem;4489  line-height: 1;4490  transition: color 120ms ease, background 120ms ease;4491}4492.peach-shortcut-reset:hover {4493  color: var(--peach-t0);4494  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4495}4496.peach-shortcuts-conflict {4497  margin: 4px 0 0;4498  padding: 8px 10px;4499  border-radius: 7px;4500  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4501  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4502  font-family: var(--font-mono);4503  font-size: 0.6875rem;4504  color: var(--peach-t0);4505}45064507/* ── Help dialog overlay (? to open) ────────────────────────── */4508.peach-shortcuts-help-backdrop {4509  position: fixed;4510  inset: 0;4511  background: rgba(0, 0, 0, 0.55);4512  backdrop-filter: blur(2px);4513  display: flex;4514  align-items: center;4515  justify-content: center;4516  z-index: 1000;4517  animation: peach-help-fade-in 140ms ease forwards;4518}4519@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4520.peach-shortcuts-help-card {4521  width: min(320px, 92vw);4522  max-height: 80vh;4523  overflow-y: auto;4524  border-radius: 14px;4525  border: 1px solid var(--peach-t3);4526  background: var(--peach-bg);4527  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4528  padding: 16px 18px 18px;4529  display: flex;4530  flex-direction: column;4531  gap: 12px;4532}4533.peach-shortcuts-help-head {4534  display: flex; align-items: center; justify-content: space-between;4535}4536.peach-shortcuts-help-head h3 {4537  margin: 0;4538  font-family: var(--font-display);4539  font-style: italic;4540  font-weight: 400;4541  font-size: 22px;4542  color: var(--peach-t0);4543}4544.peach-shortcuts-help-close {4545  background: transparent;4546  border: none;4547  color: var(--peach-t2);4548  cursor: pointer;4549  font-size: 0.875rem;4550  padding: 4px 8px;4551  border-radius: 5px;4552}4553.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4554.peach-shortcuts-help-body ul {4555  list-style: none; padding: 0; margin: 4px 0 12px;4556  display: grid; gap: 8px;4557}4558.peach-shortcuts-help-body li {4559  display: flex; align-items: center; justify-content: space-between; gap: 12px;4560  font-size: 0.75rem; color: var(--peach-t0);4561}4562.peach-shortcuts-help-body kbd {4563  font-family: var(--font-mono);4564  font-size: 0.6875rem;4565  padding: 3px 8px;4566  border-radius: 6px;4567  background: var(--surface-card);4568  border: 1px solid var(--peach-t3);4569  color: var(--peach-accent);4570  letter-spacing: 0.04em;4571}45724573/* ── Pro promo on Account screen ────────────────────────────── */4574.peach-pro-promo {4575  position: relative;4576  border-radius: 14px;4577  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4578  background:4579    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4580    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4581    var(--surface-card);4582  overflow: hidden;4583  margin-bottom: 14px;4584}4585.peach-pro-promo-glow {4586  position: absolute;4587  inset: -40% -20% auto auto;4588  width: 220px; height: 220px;4589  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4590  pointer-events: none;4591  filter: blur(8px);4592}4593.peach-pro-promo-inner {4594  position: relative;4595  padding: 18px 18px 16px;4596}4597.peach-pro-promo-title {4598  font-family: var(--font-display);4599  font-style: italic;4600  font-weight: 400;4601  font-size: 28px;4602  line-height: 1;4603  letter-spacing: -0.005em;4604  color: var(--peach-t0);4605  margin: 0 0 4px;4606}4607.peach-pro-promo-tagline {4608  font-family: var(--font-mono);4609  font-size: 0.625rem;4610  letter-spacing: 0.06em;4611  color: var(--peach-t2);4612  margin: 0 0 14px;4613}4614.peach-pro-promo-list {4615  list-style: none;4616  margin: 0 0 16px;4617  padding: 0;4618  display: grid;4619  gap: 9px;4620}4621.peach-pro-promo-list li {4622  display: flex;4623  align-items: flex-start;4624  gap: 9px;4625  font-size: 0.75rem;4626  color: var(--peach-t1);4627  line-height: 1.4;4628}4629.peach-pro-promo-list svg {4630  width: 14px;4631  height: 14px;4632  flex-shrink: 0;4633  color: var(--peach-accent);4634  margin-top: 2px;4635}4636.peach-pro-promo-list span {4637  color: var(--peach-t0);4638}4639.peach-pro-promo-cta {4640  width: 100%;4641  background: var(--peach-accent);4642  color: #fff;4643  border: none;4644  padding: 9px 12px;4645  border-radius: 9px;4646  font-size: 0.75rem;4647  font-weight: 500;4648  font-family: var(--font-ui);4649  letter-spacing: 0.02em;4650  text-decoration: none;4651  display: inline-flex;4652  align-items: center;4653  justify-content: center;4654  cursor: pointer;4655  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4656  box-shadow: 0 2px 16px var(--peach-glow);4657}4658.peach-pro-promo-cta:hover {4659  filter: brightness(1.07);4660  box-shadow: 0 4px 24px var(--peach-glow);4661  transform: translateY(-1px);4662}4663.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }46644665.peach-pro-or-divider {4666  display: flex;4667  align-items: center;4668  gap: 10px;4669  margin: 4px 0 12px;4670  font-family: var(--font-mono);4671  font-size: 0.625rem;4672  letter-spacing: 0.06em;4673  color: var(--peach-t2);4674  text-transform: uppercase;4675}4676.peach-pro-or-divider::before,4677.peach-pro-or-divider::after {4678  content: "";4679  flex: 1;4680  height: 1px;4681  background: var(--peach-t3);4682}46834684.peach-loading {4685  position: absolute;4686  inset: 0;4687  display: flex;4688  align-items: center;4689  justify-content: center;4690  background: var(--bg);4691  animation: peach-loading-pulse 1.2s ease-in-out infinite;4692}46934694@keyframes peach-loading-pulse {4695  0%, 100% { opacity: 0.6; }4696  50% { opacity: 1; }4697}46984699/* ── Health Dashboard ─────────────────────────────────────────────────── */4700.peach-health-body {4701  flex: 1;4702  overflow-y: auto;4703  display: flex;4704  flex-direction: column;4705  /* Hide the platform scrollbar — every other scrollable surface in the4706   * popup hides it; the Health view was the one outlier and it ruined the4707   * polish. Behavior unchanged, just no rail rendered. */4708  scrollbar-width: none;4709  -ms-overflow-style: none;4710}4711.peach-health-body::-webkit-scrollbar { display: none; }47124713/* Loading screen for the Vault Health view. The advanced report computation4714 * can run for a few seconds on a large vault — without a clear loading4715 * screen the surface looked broken (the entry view bleeds through the4716 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4717.peach-health-loading-screen {4718  flex: 1;4719  display: flex;4720  flex-direction: column;4721  align-items: center;4722  justify-content: center;4723  gap: 14px;4724  padding: 32px 28px;4725  text-align: center;4726}47274728.peach-health-loading-glyph {4729  width: 48px;4730  height: 48px;4731  display: flex;4732  align-items: center;4733  justify-content: center;4734  border-radius: 14px;4735  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4736  color: var(--peach-accent);4737}47384739.peach-health-loading-title {4740  margin: 0;4741  font-family: var(--font-display);4742  font-style: italic;4743  font-weight: 300;4744  font-size: 19px;4745  line-height: 1.2;4746  color: var(--peach-t0);4747}47484749.peach-health-loading-copy {4750  margin: 0;4751  max-width: 240px;4752  font-size: 0.75rem;4753  line-height: 1.55;4754  color: var(--peach-t2);4755}47564757.peach-health-loading-track {4758  width: 200px;4759  height: 3px;4760  margin-top: 6px;4761  border-radius: 999px;4762  background: rgba(240, 232, 216, 0.06);4763  overflow: hidden;4764}47654766.peach-health-loading-fill {4767  width: 40%;4768  height: 100%;4769  border-radius: inherit;4770  background: linear-gradient(4771    90deg,4772    transparent 0%,4773    var(--peach-accent) 50%,4774    transparent 100%4775  );4776  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4777}47784779@keyframes peach-health-loading-sweep {4780  0%   { transform: translateX(-100%); }4781  100% { transform: translateX(350%); }4782}47834784[data-motion="reduce"] .peach-health-loading-fill,4785[data-motion="reduce"] .peach-health-loading-glyph svg path {4786  animation: none;4787}47884789.peach-health-summary {4790  padding: 10px 16px 6px;4791  font-family: "IBM Plex Mono", monospace;4792  font-size: 0.6875rem;4793}4794.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4795.peach-health-summary-ok { color: var(--peach-t2); }47964797.peach-health-check-row {4798  padding: 0 16px 10px;4799}4800.peach-health-check-btn {4801  width: 100%;4802  display: flex;4803  align-items: center;4804  justify-content: center;4805}48064807.peach-health-sections {4808  flex: 1;4809  display: flex;4810  flex-direction: column;4811}48124813.peach-health-section {4814  border-bottom: 1px solid var(--peach-t3);4815}48164817.peach-health-section-header {4818  width: 100%;4819  display: flex;4820  align-items: center;4821  justify-content: space-between;4822  padding: 9px 16px;4823  background: transparent;4824  cursor: pointer;4825  color: var(--peach-t0);4826}48274828.peach-health-section-title-row {4829  display: flex;4830  align-items: center;4831  gap: 8px;4832}48334834.peach-health-count-badge {4835  display: inline-flex;4836  align-items: center;4837  justify-content: center;4838  min-width: 20px;4839  height: 18px;4840  padding: 0 5px;4841  border-radius: 999px;4842  background: rgba(220,80,60,0.15);4843  border: 1px solid rgba(220,80,60,0.25);4844  font-family: "IBM Plex Mono", monospace;4845  font-size: 0.5625rem;4846  color: rgba(220,80,60,0.9);4847}48484849.peach-health-section-title {4850  font-family: "IBM Plex Mono", monospace;4851  font-size: 0.6875rem;4852  text-transform: uppercase;4853  letter-spacing: 0.1em;4854  color: var(--peach-t1);4855}48564857.peach-health-chevron {4858  color: var(--peach-t2);4859  transition: transform 200ms ease;4860  flex-shrink: 0;4861}4862.peach-health-chevron.is-expanded {4863  transform: rotate(180deg);4864}48654866.peach-health-section-body {4867  padding: 0 16px 10px;4868  display: flex;4869  flex-direction: column;4870  gap: 4px;4871}48724873.peach-health-row {4874  display: flex;4875  align-items: flex-start;4876  justify-content: space-between;4877  gap: 8px;4878  padding: 6px 8px;4879  border-radius: 8px;4880  background: rgba(240,232,216,0.02);4881}48824883.peach-health-row-info {4884  flex: 1;4885  min-width: 0;4886  display: flex;4887  flex-direction: column;4888  gap: 2px;4889}48904891.peach-health-row-name {4892  font-family: var(--font-display);4893  font-size: 0.9375rem;4894  font-style: italic;4895  font-weight: 400;4896  color: var(--peach-t0);4897  white-space: nowrap;4898  overflow: hidden;4899  text-overflow: ellipsis;4900}49014902.peach-health-row-meta {4903  font-family: "IBM Plex Mono", monospace;4904  font-size: 0.5625rem;4905  color: var(--peach-t2);4906  letter-spacing: 0.05em;4907}49084909.peach-health-fix-btn {4910  font-size: 0.5625rem;4911  letter-spacing: 0.08em;4912  text-transform: uppercase;4913  padding: 4px 7px;4914  flex-shrink: 0;4915  display: flex;4916  align-items: center;4917}49184919.peach-health-empty {4920  font-family: "IBM Plex Mono", monospace;4921  font-size: 0.625rem;4922  color: var(--peach-t2);4923  padding: 6px 0;4924}49254926.peach-health-loading {4927  font-family: "IBM Plex Mono", monospace;4928  font-size: 0.625rem;4929  color: var(--peach-t2);4930  padding: 6px 0;4931  display: flex;4932  align-items: center;4933  gap: 6px;4934}49354936.peach-health-loading::before {4937  content: "";4938  width: 10px;4939  height: 10px;4940  border: 1.5px solid var(--peach-t3);4941  border-top-color: var(--peach-accent);4942  border-radius: 50%;4943  animation: peach-spin 600ms linear infinite;4944}49454946@keyframes peach-spin {4947  to { transform: rotate(360deg); }4948}49494950.peach-spinner {4951  width: 32px;4952  height: 32px;4953  border: 2px solid var(--peach-s2);4954  border-top-color: var(--peach-accent);4955  border-radius: 50%;4956  margin: 0 auto 16px;4957  animation: peach-spin 0.8s linear infinite;4958}49594960.peach-progress-screen {4961  text-align: center;4962  padding: 32px 16px;4963}49644965.peach-progress-screen-title {4966  font-size: 0.8125rem;4967  color: var(--peach-t0);4968  margin-bottom: 16px;4969}49704971.peach-progress-screen-stage {4972  font-size: 0.6875rem;4973  color: var(--peach-t2);4974  min-height: 14px;4975}49764977.peach-progress-screen-note {4978  font-size: 0.625rem;4979  color: var(--peach-t2);4980  margin-top: 8px;4981}49824983.peach-pairing-body {4984  flex: 1;4985  overflow-y: auto;4986  display: flex;4987  flex-direction: column;4988}49894990.peach-pairing-content {4991  flex: 1;4992  display: flex;4993  flex-direction: column;4994  align-items: center;4995  justify-content: center;4996  gap: 14px;4997  padding: 28px 20px;4998  text-align: center;4999}50005001.peach-pairing-code-screen {5002  gap: 18px;5003}50045005.peach-pairing-headline {5006  font-family: var(--font-display);5007  font-style: italic;5008  font-weight: 300;5009  font-size: 28px;5010  color: var(--peach-t0);5011  margin: 0;5012  line-height: 1;5013}50145015.peach-pairing-subline {5016  font-size: 0.75rem;5017  color: var(--peach-t2);5018  max-width: 220px;5019  line-height: 1.5;5020  margin: 0;5021}50225023.peach-pairing-subline--center {5024  text-align: center;5025}50265027/* 6-digit pairing code — both display (.peach-pairing-code) and entry5028   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking5029   so the two modes feel like the same surface. */5030.peach-pairing-code {5031  font-family: "IBM Plex Mono", monospace;5032  font-size: 36px;5033  letter-spacing: 0.25em;5034  color: var(--peach-t0);5035  text-align: center;5036  padding: 24px 0;5037  text-shadow:5038    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5039    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5040  background: transparent;5041  border: 0;5042  cursor: default;5043  user-select: text;5044}50455046.peach-pairing-code--loading,5047.peach-pairing-code--expired {5048  font-size: 18px;5049  letter-spacing: 0.04em;5050  color: var(--peach-t2);5051  cursor: pointer;5052  text-shadow: none;5053}50545055.peach-pairing-qr-container {5056  display: flex;5057  flex-direction: column;5058  align-items: center;5059  gap: 10px;5060}50615062.peach-pairing-qr {5063  width: 240px;5064  height: 240px;5065  display: block;5066}50675068.peach-pairing-instruction {5069  font-size: 0.75rem;5070  color: var(--peach-t2);5071  text-align: center;5072  line-height: 1.5;5073  margin: 0;5074  max-width: 220px;5075}50765077.peach-pairing-expiry {5078  font-family: "IBM Plex Mono", monospace;5079  font-size: 13px;5080  letter-spacing: 0.06em;5081  color: var(--peach-t2);5082  margin: 0;5083}50845085.peach-pairing-regen {5086  font-size: 0.75rem;5087  color: var(--peach-accent);5088  background: transparent;5089  border: 0;5090  cursor: pointer;5091  padding: 4px 0;5092  text-decoration: underline;5093  text-underline-offset: 2px;5094}50955096.peach-pairing-code-input {5097  font-family: "IBM Plex Mono", monospace;5098  font-size: 36px;5099  letter-spacing: 0.25em;5100  color: var(--peach-t0);5101  background: transparent;5102  border: 0;5103  border-bottom: 1px solid var(--peach-t3);5104  outline: none;5105  text-align: center;5106  padding: 18px 0;5107  width: 220px;5108  caret-color: var(--peach-accent);5109  transition: border-color 160ms ease;5110}51115112.peach-pairing-code-input::placeholder {5113  color: var(--peach-t3);5114}51155116.peach-pairing-code-input:focus {5117  border-bottom-color: var(--peach-accent);5118}51195120.peach-pairing-toggle {5121  background: transparent;5122  border: 0;5123  color: var(--peach-t2);5124  font-size: 0.75rem;5125  padding: 8px 4px;5126  cursor: pointer;5127  transition: color 120ms ease;5128}51295130.peach-pairing-toggle:hover:not(:disabled) {5131  color: var(--peach-t1);5132}51335134.peach-pairing-toggle:disabled {5135  opacity: 0.5;5136  cursor: default;5137}51385139.peach-pairing-hint {5140  font-size: 0.6875rem;5141  color: var(--peach-t2);5142  margin: 0;5143  text-align: center;5144}51455146.peach-pairing-status {5147  display: flex;5148  align-items: center;5149  gap: 8px;5150  margin: 0;5151  font-size: 0.75rem;5152  color: var(--peach-t1);5153}51545155.peach-pairing-error {5156  margin: 0;5157  font-size: 0.6875rem;5158  color: var(--peach-breach);5159}51605161.peach-pairing-error--muted {5162  color: var(--peach-t2);5163}51645165.peach-pairing-spinner {5166  width: 12px;5167  height: 12px;5168  border: 1.5px solid var(--peach-t3);5169  border-top-color: var(--peach-accent);5170  border-radius: 50%;5171  animation: peach-spin 0.8s linear infinite;5172}51735174.peach-pairing-success-icon,5175.peach-pairing-error-icon,5176.peach-pairing-hero {5177  display: inline-flex;5178  align-items: center;5179  justify-content: center;5180}51815182/* Tag chips */5183.peach-tag-chip {5184  display: inline-flex;5185  align-items: center;5186  gap: 4px;5187  padding: 3px 8px;5188  border-radius: 999px;5189  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5190  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5191  color: var(--peach-t0);5192  font-family: "IBM Plex Mono", monospace;5193  font-size: 0.625rem;5194  letter-spacing: 0.04em;5195}51965197.peach-tag-chip-remove {5198  background: transparent;5199  border: none;5200  color: inherit;5201  opacity: 0.6;5202  cursor: pointer;5203  padding: 0;5204  font-size: 0.75rem;5205  line-height: 1;5206}52075208.peach-tag-chip-remove:hover {5209  opacity: 1;5210}52115212/* Tag input */5213.peach-tag-input-wrap {5214  border-bottom: 1px solid var(--peach-t3);5215}52165217.peach-tag-suggestions {5218  display: flex;5219  flex-wrap: wrap;5220  gap: 4px;5221  padding: 6px 0;5222}52235224.peach-tag-suggestion {5225  padding: 2px 8px;5226  border-radius: 999px;5227  border: 1px solid var(--peach-t3);5228  background: var(--peach-s2);5229  color: var(--peach-t1);5230  font-family: "IBM Plex Mono", monospace;5231  font-size: 0.625rem;5232  cursor: pointer;5233  transition: border-color 80ms ease, background 80ms ease;5234}52355236.peach-tag-suggestion:hover {5237  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5238  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5239}52405241/* Identity suggestions — shown below username/email inputs in new-entry form */5242@keyframes peach-suggest-in {5243  from { opacity: 0; transform: translateY(-4px); }5244  to   { opacity: 1; transform: none; }5245}52465247.peach-identity-suggestions {5248  display: flex;5249  flex-direction: column;5250  gap: 1px;5251  margin-top: 4px;5252  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5253}52545255.peach-identity-filter-row {5256  display: flex;5257  align-items: center;5258  gap: 4px;5259  padding: 2px 0 5px;5260}52615262.peach-identity-collapse-btn {5263  margin-left: auto;5264  background: transparent;5265  border: none;5266  cursor: pointer;5267  color: var(--peach-t3);5268  padding: 2px 4px;5269  display: flex;5270  align-items: center;5271  line-height: 0;5272  border-radius: 3px;5273  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5274}52755276.peach-identity-collapse-btn:hover {5277  color: var(--peach-t1);5278}52795280.peach-identity-collapse-btn.is-collapsed {5281  transform: rotate(-90deg);5282}52835284.peach-identity-rows {5285  display: grid;5286  grid-template-rows: 1fr;5287  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5288}52895290.peach-identity-rows.is-collapsed {5291  grid-template-rows: 0fr;5292}52935294.peach-identity-rows-inner {5295  overflow-y: auto;5296  min-height: 0;5297  max-height: 148px;5298  scrollbar-width: thin;5299  scrollbar-color: var(--peach-t3) transparent;5300  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5301  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5302}53035304.peach-identity-rows-inner::-webkit-scrollbar {5305  width: 4px;5306}53075308.peach-identity-rows-inner::-webkit-scrollbar-track {5309  background: transparent;5310}53115312.peach-identity-rows-inner::-webkit-scrollbar-thumb {5313  background: var(--peach-t3);5314  border-radius: 2px;5315}53165317.peach-identity-filter-pill {5318  padding: 2px 7px;5319  border-radius: 999px;5320  border: 1px solid var(--peach-t3);5321  background: transparent;5322  color: var(--peach-t2);5323  font-family: "IBM Plex Mono", monospace;5324  font-size: 0.6rem;5325  cursor: pointer;5326  transition: border-color 80ms, background 80ms, color 80ms;5327}53285329.peach-identity-filter-pill.is-on {5330  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5331  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5332  color: var(--peach-accent);5333}53345335.peach-identity-suggestion {5336  display: flex;5337  align-items: center;5338  gap: 6px;5339  width: 100%;5340  padding: 4px 6px;5341  border-radius: 5px;5342  border: none;5343  background: transparent;5344  cursor: pointer;5345  text-align: left;5346  transition: background 80ms ease;5347}53485349.peach-identity-suggestion:hover,5350.peach-identity-suggestion:focus {5351  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5352  outline: none;5353}53545355.peach-identity-suggestion-value {5356  font-family: "IBM Plex Mono", monospace;5357  font-size: 0.7rem;5358  color: var(--peach-t1);5359  overflow: hidden;5360  text-overflow: ellipsis;5361  white-space: nowrap;5362  flex: 1;5363  min-width: 0;5364}53655366.peach-identity-suggestion-type {5367  font-family: "IBM Plex Mono", monospace;5368  font-size: 0.55rem;5369  font-weight: 600;5370  flex-shrink: 0;5371  padding: 1px 4px;5372  border-radius: 3px;5373}53745375.peach-identity-suggestion-type--email {5376  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5377  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5378}53795380.peach-identity-suggestion-type--username {5381  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5382  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5383}53845385.peach-identity-suggestion-meta {5386  font-family: "IBM Plex Mono", monospace;5387  font-size: 0.6rem;5388  color: var(--peach-t3);5389  flex-shrink: 0;5390}53915392/* Tag filter strip */5393.peach-tag-filter-strip {5394  border-bottom: 1px solid var(--peach-t3);5395  flex-shrink: 0;5396}53975398.peach-tag-filter-chip {5399  display: inline-flex;5400  align-items: center;5401  padding: 4px 10px;5402  border-radius: 999px;5403  border: 1px solid var(--peach-t3);5404  background: transparent;5405  color: var(--peach-t2);5406  font-family: "IBM Plex Mono", monospace;5407  font-size: 0.5625rem;5408  letter-spacing: 0.06em;5409  text-transform: uppercase;5410  cursor: pointer;5411  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5412  white-space: nowrap;5413}54145415.peach-tag-filter-chip:hover {5416  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5417  color: var(--peach-t1);5418}54195420.peach-tag-filter-chip.is-selected {5421  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5422  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5423  color: var(--peach-t0);5424}54255426/* ─────────────────────────────────────────────────────────────────────────5427   v1.4.12 additions5428   ─────────────────────────────────────────────────────────────────────── */54295430/* Sort bar */5431.peach-sort-bar {5432  display: flex;5433  align-items: center;5434  gap: 4px;5435  padding: 5px 12px;5436  border-bottom: 1px solid var(--peach-t3);5437  flex-shrink: 0;5438  overflow-x: auto;5439  scrollbar-width: none;5440}54415442.peach-sort-btn {5443  padding: 2px 9px;5444  border-radius: 999px;5445  border: 1px solid transparent;5446  background: transparent;5447  color: var(--peach-t2);5448  font-family: "IBM Plex Mono", monospace;5449  font-size: 0.5625rem;5450  letter-spacing: 0.07em;5451  text-transform: uppercase;5452  cursor: pointer;5453  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5454  white-space: nowrap;5455}54565457.peach-sort-btn:hover {5458  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5459  color: var(--peach-t1);5460}54615462.peach-sort-btn.is-active {5463  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5464  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5465  color: var(--peach-t0);5466}54675468.peach-sort-domain-hint {5469  margin-left: auto;5470  font-family: "IBM Plex Mono", monospace;5471  font-size: 0.5625rem;5472  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5473  white-space: nowrap;5474  overflow: hidden;5475  text-overflow: ellipsis;5476  max-width: 110px;5477}54785479/* Tab-match badge on entry rows */5480.peach-tab-match-badge {5481  display: inline-block;5482  width: 6px;5483  height: 6px;5484  border-radius: 50%;5485  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5486  margin-left: 5px;5487  vertical-align: middle;5488  flex-shrink: 0;5489  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5490}54915492.peach-entry-row.is-tab-match {5493  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5494  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5495}54965497.peach-entry-row.is-tab-match:hover {5498  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5499}55005501/* Entry list stagger entrance */5502@keyframes peach-entry-fadein {5503  from { opacity: 0; transform: translateY(4px); }5504  to   { opacity: 1; transform: translateY(0); }5505}55065507.peach-vault-list .peach-entry-row {5508  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5509}55105511/* Button press micro-interaction */5512.peach-btn:active {5513  transform: scale(0.95);5514  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5515}55165517.peach-sort-btn:active,5518.peach-tag-filter-chip:active {5519  transform: scale(0.93);5520  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5521}55225523/* Password strength bar (Lock view + shared) */5524.peach-password-strength {5525  display: flex;5526  align-items: center;5527  gap: 8px;5528  margin-top: 6px;5529}55305531.peach-strength-bar {5532  flex: 1;5533  height: 3px;5534  border-radius: 2px;5535  background: var(--peach-t3);5536  overflow: hidden;5537}55385539.peach-strength-fill {5540  height: 100%;5541  border-radius: 2px;5542  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5543              background 300ms ease;5544}55455546.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5547.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5548.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5549.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }55505551.peach-strength-label {5552  font-family: "IBM Plex Mono", monospace;5553  font-style: italic;5554  font-size: 0.5625rem;5555  font-weight: 300;5556  letter-spacing: 0.06em;5557  color: var(--peach-t2);5558  min-width: 36px;5559  text-align: right;5560}55615562.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5563.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5564.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5565.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }55665567/* Duress form */5568.peach-duress-status {5569  padding: 2px 8px;5570  border-radius: 999px;5571  border: 1px solid var(--peach-t3);5572  font-family: "IBM Plex Mono", monospace;5573  font-size: 0.5625rem;5574  letter-spacing: 0.07em;5575  text-transform: uppercase;5576  color: var(--peach-t2);5577  flex-shrink: 0;5578}55795580.peach-duress-status.is-active {5581  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5582  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5583  color: var(--peach-t0);5584}55855586.peach-duress-form {5587  padding: 8px 0 4px;5588  display: flex;5589  flex-direction: column;5590  gap: 6px;5591}55925593.peach-duress-form .peach-label {5594  margin-top: 4px;5595}55965597.peach-duress-actions {5598  display: flex;5599  gap: 6px;5600  align-items: center;5601  margin-top: 4px;5602}56035604.peach-duress-actions .peach-btn:first-child {5605  margin-right: auto;5606}56075608/* Improved overlay spring entrance */5609.peach-overlay-view.ov-enter-up {5610  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5611}56125613@keyframes ov-enter-up-spring {5614  from { opacity: 0; transform: translateY(16px) scale(0.98); }5615  to   { opacity: 1; transform: translateY(0) scale(1); }5616}56175618.peach-overlay-view.ov-enter-right {5619  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5620}56215622@keyframes ov-enter-right-spring {5623  from { opacity: 0; transform: translateX(18px) scale(0.98); }5624  to   { opacity: 1; transform: translateX(0) scale(1); }5625}56265627/* ── Onboarding-mode restore screens (file import) ── */5628/* Used when MainImportView renders during onboarding (no vault yet).5629   Animates like a lock-screen transition. */5630.peach-lock-view {5631  position: absolute;5632  inset: 0;5633  display: flex;5634  flex-direction: column;5635  background:5636    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5637    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5638    var(--peach-bg);5639  z-index: 2;5640  overflow: hidden;5641  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5642}56435644.peach-lock-view-header {5645  display: flex;5646  align-items: center;5647  justify-content: space-between;5648  padding: 16px 18px 12px;5649  flex-shrink: 0;5650}56515652/* ───────── Settings: auto-lock select ───────── */5653.peach-settings-select {5654  font-family: "IBM Plex Mono", monospace;5655  font-size: 0.6875rem;5656  background: transparent;5657  border: 1px solid var(--peach-t3);5658  border-radius: 4px;5659  color: var(--peach-t1);5660  padding: 3px 6px;5661  cursor: pointer;5662  outline: none;5663}5664.peach-settings-select:focus {5665  border-color: var(--peach-accent);5666}56675668/* ───────── Duress status pill (new polished) ───────── */5669.peach-duress-status-pill {5670  font-family: "IBM Plex Mono", monospace;5671  font-size: 0.5625rem;5672  text-transform: uppercase;5673  letter-spacing: 0.12em;5674  padding: 2px 8px;5675  border-radius: 12px;5676  background: var(--peach-t3);5677  color: var(--peach-t2);5678  flex-shrink: 0;5679}5680.peach-duress-status-pill.is-active {5681  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5682  color: var(--peach-accent);5683}56845685/* ───────── Entry advanced disclosure (canary) ───────── */5686.peach-entry-advanced {5687  margin-top: 12px;5688  border-top: 1px solid var(--peach-t3);5689  padding-top: 10px;5690  position: relative;5691  z-index: 1;5692}5693.peach-entry-advanced-toggle {5694  display: flex;5695  align-items: center;5696  justify-content: space-between;5697  width: 100%;5698  background: transparent;5699  border: none;5700  cursor: pointer;5701  padding: 0;5702  color: var(--peach-t2);5703}5704.peach-canary-section {5705  margin-top: 10px;5706  display: grid;5707  gap: 6px;5708}57095710/* ───────── Import: merge/replace radio choices ───────── */5711.peach-import-choice {5712  display: flex;5713  align-items: flex-start;5714  gap: 10px;5715  padding: 8px 10px;5716  border: 1px solid var(--peach-t3);5717  border-radius: 10px;5718  cursor: pointer;5719  margin-bottom: 6px;5720  transition: border-color 120ms ease, background 120ms ease;5721}5722.peach-import-choice:hover {5723  border-color: var(--peach-accent);5724}5725.peach-import-choice input[type="radio"] {5726  margin-top: 3px;5727  accent-color: var(--peach-accent);5728  flex-shrink: 0;5729}5730.peach-import-choice-main {5731  display: flex;5732  flex-direction: column;5733  gap: 2px;5734  min-width: 0;5735}5736.peach-import-choice-label {5737  font-size: 0.75rem;5738  color: var(--peach-t0);5739}5740.peach-import-choice-sub {5741  font-size: 0.6875rem;5742  color: var(--peach-t2);5743  line-height: 1.5;5744}57455746/* ───────── Export: success confirmation strip ───────── */5747.peach-export-success {5748  display: flex;5749  align-items: flex-start;5750  gap: 10px;5751  padding: 12px;5752  border-radius: 12px;5753  border: 1px solid rgba(150, 175, 110, 0.3);5754  background: rgba(150, 175, 110, 0.08);5755  color: var(--peach-t0);5756  font-size: 0.75rem;5757  line-height: 1.55;5758}5759.peach-export-success-check {5760  color: rgba(150, 175, 110, 0.9);5761  font-size: 0.875rem;5762  flex-shrink: 0;5763}57645765/* ── Trash view ──────────────────────────────────────────────────────── */5766.peach-trash-entry-row {5767  display: flex;5768  align-items: center;5769  justify-content: space-between;5770  gap: 8px;5771  padding: 8px 0;5772  border-bottom: 1px solid var(--peach-border);5773}5774.peach-trash-entry-info {5775  flex: 1;5776  min-width: 0;5777  display: flex;5778  flex-direction: column;5779  gap: 2px;5780}5781.peach-trash-entry-title {5782  font-size: 0.8125rem;5783  color: var(--peach-t0);5784  overflow: hidden;5785  text-overflow: ellipsis;5786  white-space: nowrap;5787}5788.peach-trash-entry-meta {5789  font-family: var(--font-mono);5790  font-size: 0.5625rem;5791  color: var(--peach-t2);5792  letter-spacing: 0.04em;5793}5794.peach-trash-entry-actions {5795  display: flex;5796  align-items: center;5797  gap: 4px;5798  flex-shrink: 0;5799}5800.peach-trash-delete-btn {5801  background: transparent;5802  border: 0;5803  color: var(--peach-t3);5804  font-size: 1rem;5805  line-height: 1;5806  cursor: pointer;5807  padding: 2px 5px;5808  transition: color 0.15s;5809}5810.peach-trash-delete-btn:hover { color: var(--peach-breach); }5811.peach-trash-list {5812  overflow-y: auto;5813}5814.peach-trash-footer {5815  display: flex;5816  align-items: center;5817  gap: 8px;5818  padding: 8px 0 0;5819  border-top: 1px solid var(--peach-border);5820  margin-top: 4px;5821}5822.peach-trash-purge-all {5823  background: transparent;5824  border: 0;5825  color: var(--peach-t3);5826  font-size: 0.625rem;5827  cursor: pointer;5828  padding: 4px 0;5829  letter-spacing: 0.03em;5830  transition: color 0.2s;5831}5832.peach-trash-purge-all:hover { color: var(--peach-breach); }5833.peach-trash-purge-confirm-label {5834  font-size: 0.625rem;5835  color: var(--peach-t1);5836  flex: 1;5837}58385839/* ── Settings shortcuts grid ─────────────────────────────────────────── */5840.peach-shortcuts-grid {5841  display: grid;5842  grid-template-columns: auto 1fr;5843  gap: 6px 12px;5844  align-items: center;5845  padding: 4px 0;5846}5847.peach-shortcut-key {5848  font-family: var(--font-mono);5849  font-size: 0.625rem;5850  color: var(--peach-t0);5851  background: var(--peach-t3);5852  border-radius: 4px;5853  padding: 2px 6px;5854  white-space: nowrap;5855  text-align: center;5856}5857.peach-shortcut-desc {5858  font-size: 0.6875rem;5859  color: var(--peach-t1);5860}58615862/* ── Sort bar trash button ───────────────────────────────────────────── */5863.peach-sort-trash-btn {5864  display: flex;5865  align-items: center;5866  justify-content: center;5867  padding: 3px 5px;5868  background: transparent;5869  border: none;5870  cursor: pointer;5871  color: var(--peach-t2);5872  border-radius: 4px;5873  transition: color 140ms ease, background 140ms ease;5874}5875.peach-sort-trash-btn:hover {5876  color: var(--peach-t1);5877  background: var(--peach-t3);5878}5879.peach-sort-trash-btn.is-active {5880  color: var(--peach-accent);5881}58825883/* Accent color picker */5884.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5885.peach-accent-picker {5886  display: flex;5887  flex-wrap: wrap;5888  gap: 7px;5889  padding: 2px 0;5890}5891.peach-accent-swatch {5892  width: 22px;5893  height: 22px;5894  border-radius: 50%;5895  border: 2px solid transparent;5896  cursor: pointer;5897  padding: 0;5898  transition: transform 100ms;5899  outline-offset: 2px;5900}5901.peach-accent-swatch:hover { transform: scale(1.15); }5902.peach-accent-swatch.is-active {5903  border-color: var(--peach-t0);5904  transform: scale(1.1);5905}59065907.peach-pill-group {5908  display: flex;5909  gap: 6px;5910}5911.peach-pill-group .peach-btn.is-active {5912  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5913  border-color: var(--peach-accent);5914  color: var(--peach-t0);5915}59165917/* ── Card entry styles ───────────────────────────────────────── */5918.peach-card-number {5919  font-family: var(--peach-mono);5920  letter-spacing: 0.08em;5921}59225923.peach-card-network-badge {5924  font-size: 0.625rem;5925  padding: 1px 5px;5926  border-radius: 4px;5927  border: 0.5px solid var(--peach-border);5928  color: var(--peach-text-dim);5929  margin-left: 6px;5930  vertical-align: middle;5931}59325933.peach-card-expiry-row {5934  display: flex;5935  align-items: center;5936  gap: 8px;5937}59385939.peach-card-expiry-sep {5940  color: var(--peach-text-dim);5941}59425943/* ── Pro tier — upgrade screen ──────────────────────────────── */5944.peach-pro-mark {5945  font-size: 0.5625rem;5946  color: var(--peach-accent);5947  margin-left: 6px;5948  vertical-align: super;5949  opacity: 0.7;5950}59515952.peach-pro-mini-badge {5953  display: block;5954  font-size: 0.625rem;5955  font-style: italic;5956  color: var(--peach-accent);5957  letter-spacing: 0.04em;5958  margin-top: -2px;5959  padding-left: 2px;5960  opacity: 0.85;5961  text-align: center;5962}59635964.peach-wordmark-stack {5965  display: inline-flex;5966  flex-direction: column;5967  align-items: center;5968}59695970/* ── Pro tier — upgrade page ─────────────────────────────────── */5971/* ── Pro upgrade — redesigned editorial layout ─────────────────── */59725973.peach-pro-upgrade {5974  display: flex;5975  flex-direction: column;5976  align-items: stretch;5977  gap: 10px;5978  padding: 2px 2px 12px;5979}59805981.peach-pro-eyebrow {5982  margin: 0;5983  font-family: var(--font-ui);5984  font-size: 0.625rem;5985  font-weight: 500;5986  letter-spacing: 0.12em;5987  color: var(--peach-accent);5988}59895990.peach-pro-headline {5991  margin: 0;5992  font-family: var(--font-display, "Cormorant Garamond", serif);5993  font-size: 30px;5994  font-weight: 700;5995  font-style: normal;5996  line-height: 1.05;5997  color: var(--peach-t0);5998  letter-spacing: -0.01em;5999}6000.peach-pro-headline em {6001  font-style: italic;6002  font-weight: 400;6003  color: var(--peach-accent);6004}60056006.peach-pro-subtitle {6007  margin: 0;6008  font-size: 0.6875rem;6009  line-height: 1.5;6010  color: var(--peach-t1);6011}60126013/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6014.peach-pro-section-label {6015  margin: 6px 0 0;6016  font-family: var(--font-ui);6017  font-size: 0.5625rem;6018  font-weight: 500;6019  letter-spacing: 0.12em;6020  text-transform: uppercase;6021  color: var(--peach-t2);6022}60236024/* 2-column numbered feature grid */6025.peach-pro-grid {6026  display: grid;6027  grid-template-columns: 1fr 1fr;6028  border-top: 1px solid var(--peach-border);6029  border-left: 1px solid var(--peach-border);6030}60316032.peach-pro-grid-item {6033  display: flex;6034  flex-direction: column;6035  gap: 2px;6036  padding: 8px 9px;6037  border-right: 1px solid var(--peach-border);6038  border-bottom: 1px solid var(--peach-border);6039}60406041.peach-pro-grid-item--wide {6042  grid-column: 1 / -1;6043}60446045.peach-pro-grid-num {6046  font-family: var(--font-mono);6047  font-size: 0.5625rem;6048  color: var(--peach-accent);6049  letter-spacing: 0.06em;6050  opacity: 0.85;6051}60526053.peach-pro-grid-name {6054  font-size: 0.8125rem;6055  font-weight: 500;6056  color: var(--peach-t0);6057  line-height: 1.2;6058}60596060.peach-pro-grid-desc {6061  font-size: 0.625rem;6062  color: var(--peach-t1);6063  line-height: 1.4;6064}60656066.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6067  animation: peach-pulse-accent 600ms ease-out forwards;6068}60696070@keyframes peach-pulse-accent {6071  0%   { opacity: 1; transform: scale(1.2); }6072  100% { opacity: 0.85; transform: scale(1); }6073}60746075/* Actions */6076.peach-pro-upgrade-actions {6077  display: flex;6078  flex-direction: column;6079  align-items: stretch;6080  gap: 10px;6081}60826083.peach-pro-pricing {6084  margin: 0;6085  font-size: 1rem;6086  font-weight: 600;6087  color: var(--peach-t0);6088  letter-spacing: 0.01em;6089}6090.peach-pro-pricing-sub {6091  font-size: 0.75rem;6092  font-weight: 400;6093  color: var(--peach-t1);6094  letter-spacing: 0.02em;6095}60966097.peach-pro-upgrade-cta {6098  display: flex;6099  align-items: center;6100  justify-content: center;6101  text-decoration: none;6102  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6103  border: 1px solid var(--peach-accent);6104  border-radius: 10px;6105  color: var(--peach-accent);6106  font-family: var(--font-ui);6107  font-size: 0.8125rem;6108  font-weight: 600;6109  letter-spacing: 0.06em;6110  padding: 11px 16px;6111  transition: background 0.15s ease, color 0.15s ease;6112}6113.peach-pro-upgrade-cta:hover {6114  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6115}61166117.peach-pro-key-divider {6118  display: flex;6119  align-items: center;6120  gap: 8px;6121  color: var(--peach-t2);6122  font-size: 0.5625rem;6123  letter-spacing: 0.1em;6124}6125.peach-pro-key-divider::before,6126.peach-pro-key-divider::after {6127  content: "";6128  flex: 1;6129  height: 1px;6130  background: var(--peach-border);6131}61326133/* Inline key entry row */6134.peach-pro-key-inline {6135  display: flex;6136  align-items: center;6137  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6138  border: 1px solid var(--peach-border);6139  border-radius: 8px;6140  overflow: hidden;6141}6142.peach-pro-key-inline-input {6143  flex: 1;6144  background: transparent;6145  border: none;6146  outline: none;6147  color: var(--peach-t1);6148  font-family: var(--font-mono);6149  font-size: 0.625rem;6150  letter-spacing: 0.06em;6151  padding: 9px 10px;6152}6153.peach-pro-key-inline-input::placeholder {6154  color: var(--peach-t2);6155}6156.peach-pro-key-apply {6157  background: transparent;6158  border: none;6159  border-left: 1px solid var(--peach-border);6160  color: var(--peach-t2);6161  font-family: var(--font-ui);6162  font-size: 0.5625rem;6163  font-weight: 600;6164  letter-spacing: 0.08em;6165  padding: 9px 10px;6166  cursor: pointer;6167  transition: color 0.15s ease;6168  flex-shrink: 0;6169}6170.peach-pro-key-apply:not(:disabled):hover {6171  color: var(--peach-accent);6172}6173.peach-pro-key-apply:disabled {6174  opacity: 0.35;6175  cursor: not-allowed;6176}61776178/* ── Pro tier — key ceremony ─────────────────────────────────── */6179.peach-pro-key-ceremony {6180  display: flex;6181  flex-direction: column;6182  align-items: center;6183  gap: 12px;6184  padding: 20px 4px 16px;6185}61866187.peach-pro-key-ceremony .peach-lock-rune-string {6188  font-size: 1rem;6189  gap: 12px;6190  flex: 0;6191  justify-content: center;6192}61936194.peach-pro-key-ceremony-label {6195  margin: 0;6196  font-size: 0.6875rem;6197  color: var(--peach-t2);6198  font-style: italic;6199  letter-spacing: 0.04em;6200}62016202.peach-pro-key-input {6203  font-family: var(--font-mono, monospace);6204  letter-spacing: 0.06em;6205  text-align: center;6206  width: 100%;6207  box-sizing: border-box;6208}62096210.peach-pro-key-error {6211  margin: 0;6212  font-size: 0.75rem;6213  text-align: center;6214  color: var(--peach-breach, #e55);6215  padding: 0;6216}62176218.peach-pro-key-activate {6219  width: 100%;6220  text-align: center;6221  box-sizing: border-box;6222  padding: 10px 20px;6223  font-size: 0.8125rem;6224}62256226.peach-pro-key-cancel {6227  background: transparent;6228  border: 0;6229  color: var(--peach-t2);6230  font-size: 0.6875rem;6231  cursor: pointer;6232  padding: 2px 8px;6233  transition: color 0.2s;6234}62356236.peach-pro-key-cancel:hover { color: var(--peach-accent); }62376238/* ── Pro tier — active state ─────────────────────────────────── */6239.peach-pro-active {6240  display: flex;6241  flex-direction: column;6242  align-items: center;6243  gap: 0;6244  padding: 8px 4px 16px;6245  min-height: 280px;6246}62476248.peach-pro-active-hero {6249  display: flex;6250  flex-direction: column;6251  align-items: center;6252  gap: 6px;6253  padding: 20px 0 22px;6254}62556256.peach-pro-active-mark-wrap {6257  display: flex;6258  align-items: center;6259  justify-content: center;6260  margin-bottom: 4px;6261}62626263.peach-pro-active-mark {6264  width: 60px;6265  height: 60px;6266}62676268.peach-pro-active-title {6269  font-family: var(--font-display, var(--font-ui));6270  font-size: 26px;6271  margin: 0;6272  color: var(--peach-t0);6273  letter-spacing: 0.01em;6274}62756276.peach-pro-active-since {6277  margin: 0;6278  font-size: 0.6875rem;6279  color: var(--peach-t2);6280  font-style: italic;6281}62826283.peach-pro-active-features {6284  display: flex;6285  flex-direction: column;6286  gap: 8px;6287  width: 100%;6288  padding: 14px 8px 0;6289  border-top: 1px solid var(--peach-border);6290  flex: 1;6291}62926293.peach-pro-active-feature {6294  display: flex;6295  align-items: center;6296  gap: 9px;6297}62986299.peach-pro-active-feature-mark {6300  color: var(--peach-accent);6301  font-size: 0.625rem;6302  opacity: 0.65;6303  flex-shrink: 0;6304}63056306.peach-pro-active-feature-name {6307  font-size: 0.75rem;6308  color: var(--peach-t1);6309}63106311.peach-pro-deactivate {6312  align-self: center;6313  background: transparent;6314  border: 0;6315  color: var(--peach-t3);6316  font-size: 0.625rem;6317  cursor: pointer;6318  padding: 8px 0 0;6319  margin-top: 16px;6320  letter-spacing: 0.03em;6321  transition: color 0.2s;6322}63236324.peach-pro-deactivate:hover { color: var(--peach-t2); }63256326.peach-pro-deactivate:disabled {6327  opacity: 0.5;6328  cursor: default;6329}63306331/* ── Pro advanced health remediation queue ──────────────────── */6332.peach-health-pro-queue {6333  display: flex;6334  flex-direction: column;6335  gap: 10px;6336  padding: 12px;6337  margin: 0 0 12px;6338  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6339  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6340  border-radius: 10px;6341}63426343.peach-health-pro-queue-head {6344  display: flex;6345  justify-content: space-between;6346  align-items: baseline;6347}63486349.peach-health-pro-queue-title {6350  font-size: 0.75rem;6351  font-weight: 500;6352  letter-spacing: 0.04em;6353  text-transform: uppercase;6354  color: var(--peach-accent);6355}63566357.peach-health-pro-queue-score {6358  font-size: 0.6875rem;6359  color: var(--peach-t2);6360}63616362.peach-health-pro-row {6363  display: flex;6364  gap: 10px;6365  align-items: center;6366  padding: 8px 0;6367  border-top: 1px solid var(--peach-border);6368}63696370.peach-health-pro-row-info {6371  flex: 1;6372  display: flex;6373  flex-direction: column;6374  gap: 4px;6375  min-width: 0;6376}63776378.peach-health-pro-row-name {6379  font-size: 0.8125rem;6380  color: var(--peach-t0);6381  overflow: hidden;6382  text-overflow: ellipsis;6383  white-space: nowrap;6384}63856386.peach-health-pro-row-meta {6387  font-size: 0.6875rem;6388  color: var(--peach-t2);6389}63906391.peach-health-pro-bar {6392  height: 2px;6393  background: var(--peach-border);6394  border-radius: 2px;6395  overflow: hidden;6396  margin-top: 2px;6397}63986399.peach-health-pro-bar-fill {6400  height: 100%;6401  background: var(--peach-accent);6402  transition: width 200ms ease-out;6403}64046405/* ── Pro activation celebration ── */6406@keyframes peach-pro-bloom {6407  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6408  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6409                 drop-shadow(0 0 48px var(--peach-glow)); }6410  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6411}64126413@keyframes peach-pro-wordmark-in {6414  from { opacity: 0; transform: translateY(4px); }6415  to   { opacity: 1; transform: translateY(0); }6416}64176418@keyframes peach-pro-fade-out {6419  from { opacity: 1; }6420  to   { opacity: 0; }6421}64226423.peach-pro-celebration {6424  background:6425    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6426    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6427    var(--peach-bg);6428  border: 1px solid var(--peach-t3);6429  box-shadow:6430    0 2px 8px rgba(0,0,0,0.55),6431    0 14px 48px rgba(0,0,0,0.7),6432    0 0 0 1px rgba(240,232,216,0.04);6433  overflow: hidden;6434  width: 320px;6435  height: 520px;6436  display: flex;6437  flex-direction: column;6438  align-items: center;6439  justify-content: center;6440  gap: 8px;6441  padding: 32px 24px;6442  text-align: center;6443}64446445.peach-pro-celebration.is-leaving {6446  animation: peach-pro-fade-out 400ms ease forwards;6447}64486449.peach-pro-bloom-target {6450  display: flex;6451  align-items: center;6452  justify-content: center;6453  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6454  margin-bottom: 12px;6455}64566457.peach-pro-bloom-icon {6458  width: 48px;6459  height: 48px;6460}64616462.peach-pro-wordmark {6463  font-family: var(--font-display);6464  font-size: 22px;6465  font-style: italic;6466  font-weight: 400;6467  color: var(--peach-accent);6468  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6469}64706471.peach-pro-thankyou {6472  font-size: 0.75rem;6473  font-style: italic;6474  color: var(--peach-t2);6475  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6476}647764786479/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6480.peach-pro-notice-banner {6481  display: flex;6482  align-items: center;6483  gap: 8px;6484  padding: 7px 12px;6485  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6486  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6487  font-size: 0.6875rem;6488  color: var(--peach-t2);6489  font-family: "IBM Plex Mono", monospace;6490  flex-shrink: 0;6491}64926493.peach-pro-notice-link {6494  background: none;6495  border: none;6496  padding: 0;6497  cursor: pointer;6498  font-size: 0.6875rem;6499  color: var(--peach-accent);6500  font-family: "IBM Plex Mono", monospace;6501  margin-left: auto;6502  white-space: nowrap;6503}65046505.peach-pro-notice-close {6506  background: none;6507  border: none;6508  padding: 0 0 0 4px;6509  cursor: pointer;6510  font-size: 0.625rem;6511  color: var(--peach-t3);6512  line-height: 1;6513}65146515/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6516   Renders over whatever view is showing. 60-second expiry; the popup ticks6517   the countdown each second and clears the banner when it hits zero. */6518.peach-pair-request-banner {6519  display: flex;6520  flex-direction: column;6521  gap: 8px;6522  padding: 10px 12px;6523  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6524  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6525  font-family: "IBM Plex Mono", monospace;6526  flex-shrink: 0;6527}65286529.peach-pair-toast {6530  padding: 8px 12px;6531  font-family: "IBM Plex Mono", monospace;6532  font-size: 0.75rem;6533  color: var(--peach-t1);6534  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6535  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6536  flex-shrink: 0;6537  text-align: center;6538}65396540.peach-pair-toast strong {6541  color: var(--peach-t0);6542  font-weight: 500;6543}65446545.peach-pair-request-header {6546  display: flex;6547  align-items: center;6548  gap: 8px;6549  font-size: 0.75rem;6550  color: var(--peach-t1);6551}65526553.peach-pair-request-mark {6554  font-size: 0.875rem;6555  display: inline-flex;6556  align-items: center;6557}65586559.peach-pair-request-icon {6560  width: 1em;6561  height: 1em;6562}65636564.peach-pair-request-title {6565  font-weight: 600;6566  color: var(--peach-t0);6567}65686569.peach-pair-request-countdown {6570  margin-left: auto;6571  font-variant-numeric: tabular-nums;6572  color: var(--peach-t2);6573  font-size: 0.6875rem;6574}65756576.peach-pair-request-body {6577  margin: 0;6578  font-size: 0.75rem;6579  color: var(--peach-t1);6580  line-height: 1.4;6581}65826583.peach-pair-request-body strong {6584  color: var(--peach-t0);6585  font-weight: 600;6586}65876588.peach-pair-request-actions {6589  display: flex;6590  gap: 8px;6591  justify-content: flex-end;6592}65936594/* ─── First-run onboarding ──────────────────────────────────────────────6595   Three-card welcome shown once before vault creation. The PeachScript6596   rune background drifts behind everything at very low opacity — it's6597   atmosphere, not focus. The cards themselves use the same panel6598   language as the rest of the popup so the transition into NewVault is6599   continuous, not a jarring switch of visual register. */66006601.peach-onboarding {6602  position: relative;6603  display: flex;6604  flex-direction: column;6605  width: 100%;6606  height: 100%;6607  padding: 16px 16px 18px;6608  box-sizing: border-box;6609  overflow: hidden;6610  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6611}66126613.peach-onboarding.is-completing {6614  animation: peach-onboard-exit 200ms ease-out forwards;6615}66166617.peach-rune-background {6618  position: absolute;6619  inset: 0;6620  width: 100%;6621  height: 100%;6622  pointer-events: none;6623  z-index: 0;6624  transition: opacity 500ms ease-out;6625}66266627.peach-onboarding.is-completing .peach-rune-background {6628  opacity: 0;6629}66306631.peach-onboarding-header {6632  position: relative;6633  z-index: 1;6634  display: flex;6635  align-items: center;6636  margin-bottom: 14px;6637}66386639.peach-onboarding-card {6640  position: relative;6641  z-index: 1;6642  flex: 1;6643  display: flex;6644  flex-direction: column;6645  gap: 10px;6646  padding: 22px 20px;6647  border-radius: 16px;6648  border: 1px solid var(--peach-t3);6649  background:6650    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6651  backdrop-filter: blur(3px);6652  -webkit-backdrop-filter: blur(3px);6653  box-shadow:6654    inset 0 1px 0 rgba(240, 232, 216, 0.04),6655    0 12px 28px rgba(0, 0, 0, 0.12);6656  cursor: pointer;6657  user-select: none;6658  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6659}66606661.peach-onboarding-card.is-exiting {6662  animation: peach-card-out 120ms ease-in forwards;6663  pointer-events: none;6664}66656666.peach-onboarding-card-headline {6667  margin: 0;6668  font-family: var(--font-display);6669  font-style: italic;6670  font-weight: 400;6671  font-size: 22px;6672  line-height: 1.05;6673  color: var(--peach-t0);6674  white-space: pre-line;6675}66766677.peach-onboarding-divider {6678  margin: 4px 0 6px;6679  border: 0;6680  border-top: 1px solid var(--peach-t3);6681  width: 100%;6682}66836684.peach-onboarding-body {6685  margin: 0;6686  font-size: 0.8125rem;6687  line-height: 1.6;6688  color: var(--peach-t1);6689}66906691.peach-onboarding-warning {6692  display: flex;6693  align-items: flex-start;6694  gap: 8px;6695  margin: 6px 0 0;6696  padding-top: 8px;6697  border-top: 1px dashed var(--peach-t3);6698  font-size: 0.8125rem;6699  line-height: 1.5;6700  color: var(--peach-t1);6701}67026703.peach-onboarding-warning-icon {6704  color: var(--peach-accent);6705  font-size: 0.8125rem;6706  line-height: 1.5;6707  flex: 0 0 auto;6708}67096710.peach-onboarding-nav {6711  position: relative;6712  z-index: 1;6713  display: flex;6714  align-items: center;6715  justify-content: space-between;6716  margin-top: 12px;6717  padding: 0 4px;6718}67196720.peach-onboarding-dots {6721  display: flex;6722  align-items: center;6723  gap: 6px;6724}67256726.peach-onboarding-dot {6727  width: 6px;6728  height: 6px;6729  border-radius: 50%;6730  background: var(--peach-t2);6731  transition: width 200ms ease, height 200ms ease, background 200ms ease;6732}67336734.peach-onboarding-dot.is-active {6735  width: 8px;6736  height: 8px;6737  background: var(--peach-accent);6738}67396740.peach-onboarding-next {6741  background: none;6742  border: none;6743  padding: 4px 0;6744  cursor: pointer;6745  font-family: "IBM Plex Mono", monospace;6746  font-size: 0.6875rem;6747  letter-spacing: 0.04em;6748  color: var(--peach-t1);6749  transition: color 150ms ease;6750}67516752.peach-onboarding-next:hover {6753  color: var(--peach-t0);6754}67556756.peach-onboarding-next:disabled {6757  opacity: 0.5;6758  cursor: default;6759}67606761.peach-onboarding-back {6762  background: none;6763  border: none;6764  padding: 4px 0;6765  cursor: pointer;6766  font-family: "IBM Plex Mono", monospace;6767  font-size: 0.6875rem;6768  letter-spacing: 0.04em;6769  color: var(--peach-t2);6770  transition: color 150ms ease;6771}67726773.peach-onboarding-back:hover {6774  color: var(--peach-t0);6775}67766777.peach-onboarding-back:disabled {6778  opacity: 0.5;6779  cursor: default;6780}67816782/* Reserve back-button width on the first card so the dots stay centred */6783.peach-onboarding-back-spacer {6784  width: 44px;6785}67866787.peach-onboarding-mobile-card-buttons {6788  display: flex;6789  flex-direction: column;6790  gap: 8px;6791  margin-top: 16px;6792}67936794@keyframes peach-onboard-enter {6795  from { opacity: 0; transform: translateY(20px); }6796  to   { opacity: 1; transform: translateY(0); }6797}67986799@keyframes peach-onboard-exit {6800  from { opacity: 1; }6801  to   { opacity: 0; }6802}68036804@keyframes peach-card-in {6805  from { opacity: 0; transform: translateX(12px); }6806  to   { opacity: 1; transform: translateX(0); }6807}68086809@keyframes peach-card-out {6810  from { opacity: 1; transform: translateX(0); }6811  to   { opacity: 0; transform: translateX(-12px); }6812}68136814/* ─── New vault screen — matched to onboarding card language ─────────── */68156816.peach-newvault {6817  position: relative;6818  display: flex;6819  flex-direction: column;6820  gap: 12px;6821  padding: 16px 16px 18px;6822  overflow: hidden;6823}68246825/* Suppress the warm-blob ambient art inherited from .lock-screen — the6826   new vault card now carries the visual weight. */6827.peach-newvault::before {6828  content: none;6829}68306831.peach-newvault-header {6832  position: relative;6833  z-index: 2;6834  display: flex;6835  align-items: center;6836  gap: 10px;6837  margin-bottom: 2px;6838}68396840.peach-newvault-back {6841  display: inline-flex;6842  align-items: center;6843  gap: 4px;6844  background: transparent;6845  border: none;6846  color: var(--peach-t2);6847  font-family: "IBM Plex Mono", monospace;6848  font-size: 0.625rem;6849  letter-spacing: 0.06em;6850  cursor: pointer;6851  padding: 4px 6px;6852  border-radius: 6px;6853  transition: color 120ms ease, background 120ms ease;6854}68556856.peach-newvault-back:hover {6857  color: var(--peach-t0);6858  background: rgba(240, 232, 216, 0.04);6859}68606861.peach-newvault-mark {6862  position: absolute;6863  right: -12px;6864  top: 6px;6865  width: 110px;6866  height: 110px;6867  pointer-events: none;6868  opacity: 0.10;6869  filter: saturate(0.9);6870  z-index: 0;6871}6872.peach-newvault-mark-art {6873  width: 100%;6874  height: 100%;6875}6876.peach-newvault-mark-art path:nth-child(1) {6877  fill: rgba(123, 144, 96, 0.88);6878}6879.peach-newvault-mark-art path:nth-child(2) {6880  stroke: rgba(94, 122, 66, 0.95);6881}68826883.peach-newvault-card {6884  position: relative;6885  z-index: 1;6886  display: flex;6887  flex-direction: column;6888  gap: 12px;6889  padding: 22px 20px 18px;6890  border-radius: 16px;6891  border: 1px solid var(--peach-t3);6892  background:6893    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6894  backdrop-filter: blur(3px);6895  -webkit-backdrop-filter: blur(3px);6896  box-shadow:6897    inset 0 1px 0 rgba(240, 232, 216, 0.04),6898    0 12px 28px rgba(0, 0, 0, 0.12);6899  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6900}69016902.peach-newvault-headline {6903  margin: 0;6904  font-family: var(--font-display);6905  font-style: italic;6906  font-weight: 400;6907  font-size: 24px;6908  line-height: 1.05;6909  color: var(--peach-t0);6910  white-space: pre-line;6911}69126913.peach-newvault-divider {6914  margin: 2px 0 4px;6915  border: 0;6916  border-top: 1px solid var(--peach-t3);6917  width: 100%;6918}69196920.peach-newvault-field {6921  display: flex;6922  flex-direction: column;6923  gap: 4px;6924}69256926.peach-newvault-label-row {6927  display: flex;6928  align-items: center;6929  justify-content: space-between;6930}69316932/* Monospace input scaled to the card. Replaces the 22px unlock-input6933   so the placeholder no longer overflows and the field reads as part6934   of the same surface as the body copy. */6935.peach-newvault-input {6936  font-size: 0.875rem;6937  letter-spacing: 0.18em;6938  padding: 8px 0;6939}6940.peach-newvault-input::placeholder {6941  letter-spacing: 0.18em;6942  color: var(--peach-t2);6943}69446945.peach-newvault-hint {6946  margin: 2px 0 0;6947  font-family: "IBM Plex Mono", monospace;6948  font-size: 0.625rem;6949  color: var(--peach-t2);6950  letter-spacing: 0.04em;6951}69526953.peach-newvault-submit {6954  margin-top: 4px;6955}69566957.peach-newvault-warning {6958  display: flex;6959  align-items: flex-start;6960  gap: 8px;6961  margin: 4px 0 0;6962  padding-top: 10px;6963  border-top: 1px dashed var(--peach-t3);6964  font-size: 0.75rem;6965  line-height: 1.5;6966  color: var(--peach-t1);6967}69686969.peach-newvault-warning-icon {6970  color: var(--peach-accent);6971  font-size: 0.8125rem;6972  line-height: 1.4;6973  flex: 0 0 auto;6974}69756976.peach-newvault-footer {6977  position: relative;6978  z-index: 1;6979  display: flex;6980  flex-direction: column;6981  gap: 4px;6982  padding: 4px 4px 0;6983}69846985/* Settings body — warm accent gradient gives the glass something to blur against */6986.peach-settings-body {6987  background:6988    radial-gradient(6989      ellipse at 30% 20%,6990      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6991      transparent 60%6992    );6993}69946995/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6996/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6997 * Two severity levels: "warn" for actions that are dangerous-but-recoverable6998 * (replacing the vault from a backup file) and "hazard" for actions that6999 * are absolutely irreversible (Panic). Both use the same card scaffold so7000 * they read as a pair, but the colour family signals the severity at a7001 * glance — yellow for caution, red for don't.7002 */7003.peach-danger-card {7004  --danger-tint: 235, 158, 52; /* amber */7005  display: flex;7006  flex-direction: column;7007  gap: 8px;7008  padding: 14px;7009  margin-top: 10px;7010  border-radius: 12px;7011  border: 1px solid rgba(var(--danger-tint), 0.32);7012  background:7013    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7014    rgba(var(--danger-tint), 0.04);7015  box-shadow:7016    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7017    0 0 24px rgba(var(--danger-tint), 0.04);7018  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7019}70207021.peach-danger-card:hover {7022  border-color: rgba(var(--danger-tint), 0.55);7023  box-shadow:7024    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7025    0 0 36px rgba(var(--danger-tint), 0.10);7026}70277028.peach-danger-card--hazard {7029  --danger-tint: 220, 38, 38; /* red */7030}70317032.peach-danger-card-head {7033  display: flex;7034  align-items: center;7035  gap: 10px;7036}70377038.peach-danger-card-glyph {7039  width: 28px;7040  height: 28px;7041  flex-shrink: 0;7042  display: flex;7043  align-items: center;7044  justify-content: center;7045  border-radius: 8px;7046  background: rgba(var(--danger-tint), 0.12);7047  color: rgba(var(--danger-tint), 0.95);7048  font-size: 1rem;7049  line-height: 1;7050}70517052.peach-danger-card-title {7053  margin: 0;7054  font-size: 0.8125rem;7055  font-weight: 600;7056  color: rgba(var(--danger-tint), 0.92);7057  letter-spacing: 0.01em;7058}70597060.peach-danger-card-copy {7061  margin: 0;7062  font-size: 0.6875rem;7063  line-height: 1.5;7064  color: var(--peach-t2);7065}70667067.peach-danger-card-button {7068  width: 100%;7069  padding: 9px;7070  margin-top: 4px;7071  background: transparent;7072  border: 1px solid rgba(var(--danger-tint), 0.45);7073  border-radius: 8px;7074  color: rgba(var(--danger-tint), 0.9);7075  font-size: 0.75rem;7076  font-weight: 500;7077  letter-spacing: 0.02em;7078  cursor: pointer;7079  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7080}70817082.peach-danger-card-button:hover {7083  background: rgba(var(--danger-tint), 0.10);7084  border-color: rgba(var(--danger-tint), 0.75);7085  color: rgb(var(--danger-tint));7086}70877088/* ── Panic flow (three-step destruction) ───────────────────────────────── */7089.peach-panic {7090  display: flex;7091  flex-direction: column;7092  flex: 1;7093  min-height: 0;7094  padding: 28px 20px 20px;7095  gap: 18px;7096  overflow-y: auto;7097  scrollbar-width: none;7098  -ms-overflow-style: none;7099}71007101.peach-panic::-webkit-scrollbar { display: none; }71027103.peach-panic-step2 {7104  background: rgba(220, 38, 38, 0.04);7105}71067107.peach-panic-step3 {7108  position: relative;7109  background: #0f0505;7110  color: #ffffff;7111  overflow: hidden;7112}71137114.peach-panic-rune-bg {7115  position: absolute;7116  inset: 0;7117  opacity: 0.22;7118  pointer-events: none;7119  overflow: hidden;7120}71217122.peach-panic-rune-bg canvas {7123  width: 100% !important;7124  height: 100% !important;7125}71267127.peach-panic-icon {7128  font-size: 32px;7129  color: rgb(220, 38, 38);7130  line-height: 1;7131}71327133.peach-panic-title {7134  margin: 0;7135  font-size: 18px;7136  font-weight: 500;7137  color: var(--peach-t1);7138}71397140.peach-panic-title--severe {7141  font-size: 20px;7142  font-weight: 700;7143  color: rgb(220, 38, 38);7144}71457146.peach-panic-body {7147  margin: 0;7148  font-size: 0.8125rem;7149  line-height: 1.55;7150  color: var(--peach-t2);7151}71527153.peach-panic-body--severe {7154  color: rgba(220, 38, 38, 0.85);7155}71567157.peach-panic-body--final {7158  font-size: 1rem;7159  font-weight: 700;7160  color: rgb(255, 80, 80);7161  line-height: 1.4;7162}71637164.peach-panic-body--final-intro {7165  font-size: 1rem;7166  color: #ffffff;7167  font-weight: 400;7168}71697170.peach-panic-divider {7171  height: 1px;7172  background: rgba(255, 255, 255, 0.08);7173  margin: 4px 0;7174}71757176.peach-panic-confirm-input {7177  width: 100%;7178  padding: 10px 12px;7179  background: rgba(255, 255, 255, 0.02);7180  border: 1px solid rgba(220, 38, 38, 0.4);7181  border-radius: 8px;7182  color: var(--peach-t1);7183  font-family: "IBM Plex Mono", monospace;7184  font-size: 0.875rem;7185  letter-spacing: 0.12em;7186  text-transform: uppercase;7187}71887189.peach-panic-confirm-input:focus {7190  outline: none;7191  border-color: rgb(220, 38, 38);7192}71937194.peach-panic-confirm-input--match {7195  border-color: rgb(220, 38, 38);7196  color: rgb(220, 38, 38);7197}71987199.peach-panic-confirm-label {7200  font-size: 0.6875rem;7201  color: var(--peach-t2);7202  margin: 0 0 -8px;7203  letter-spacing: 0.06em;7204}72057206.peach-panic-actions {7207  display: flex;7208  flex-direction: column;7209  gap: 10px;7210  margin-top: auto;7211}72127213.peach-panic-button {7214  width: 100%;7215  padding: 12px;7216  border-radius: 8px;7217  font-size: 0.8125rem;7218  cursor: pointer;7219  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7220}72217222.peach-panic-button--primary {7223  background: var(--peach-accent);7224  border: 1px solid var(--peach-accent);7225  color: #ffffff;7226  font-weight: 600;7227}72287229.peach-panic-button--primary:hover {7230  background: color-mix(in srgb, var(--peach-accent) 88%, white);7231}72327233.peach-panic-button--danger {7234  background: rgb(220, 38, 38);7235  border: 1px solid rgb(220, 38, 38);7236  color: #ffffff;7237  font-weight: 600;7238}72397240.peach-panic-button--danger:disabled {7241  opacity: 0.35;7242  cursor: not-allowed;7243}72447245.peach-panic-button--ghost {7246  background: transparent;7247  border: 1px solid rgba(255, 255, 255, 0.18);7248  color: var(--peach-t2);7249}72507251.peach-panic-button--ghost:hover {7252  border-color: rgba(255, 255, 255, 0.32);7253  color: var(--peach-t1);7254}72557256.peach-panic-link {7257  background: transparent;7258  border: none;7259  padding: 4px 0;7260  color: rgba(220, 38, 38, 0.65);7261  font-size: 0.75rem;7262  cursor: pointer;7263  text-align: left;7264  text-decoration: underline;7265  text-underline-offset: 3px;7266}72677268.peach-panic-link:hover {7269  color: rgb(220, 38, 38);7270}72717272.peach-panic-bar {7273  background: rgb(220, 38, 38);7274  padding: 16px 20px;7275  margin: -28px -20px 0;7276  text-align: center;7277  font-size: 0.8125rem;7278  font-weight: 700;7279  letter-spacing: 0.12em;7280  color: #ffffff;7281}72827283.peach-panic-final-button {7284  width: 100%;7285  padding: 14px;7286  background: rgb(220, 38, 38);7287  border: none;7288  border-radius: 8px;7289  color: #ffffff;7290  font-size: 0.875rem;7291  font-weight: 700;7292  letter-spacing: 0.08em;7293  text-transform: uppercase;7294  cursor: pointer;7295  animation: peach-panic-pulse 2s ease-in-out infinite;7296}72977298.peach-settings-license {7299  margin-top: 10px;7300  padding-top: 10px;7301  border-top: 1px solid var(--peach-t3);7302}73037304.peach-settings-label {7305  font-size: 0.625rem;7306  letter-spacing: 0.08em;7307  color: var(--peach-t3);7308  display: block;7309  margin-bottom: 6px;7310}73117312.peach-settings-license-row {7313  display: flex;7314  align-items: center;7315  justify-content: space-between;7316  gap: 8px;7317}73187319.peach-settings-license-key {7320  font-family: 'IBM Plex Mono', monospace;7321  font-size: 0.75rem;7322  color: var(--peach-t0);7323  letter-spacing: 0.04em;7324  word-break: break-all;7325  flex: 1;7326  min-width: 0;7327}73287329.peach-settings-license-key--masked {7330  font-family: 'IBM Plex Mono', monospace;7331  font-size: 0.6rem;7332  color: var(--peach-t1);7333  letter-spacing: 0.18em;7334  user-select: none;7335}73367337.peach-settings-license-actions {7338  display: flex;7339  align-items: center;7340  gap: 2px;7341  flex-shrink: 0;7342}73437344.peach-settings-license-copy {7345  font-size: 0.6875rem;7346  color: var(--peach-accent);7347  background: transparent;7348  border: none;7349  cursor: pointer;7350  padding: 4px 8px;7351  border-radius: 4px;7352  flex-shrink: 0;7353  transition: opacity 150ms ease;7354}73557356.peach-settings-license-copy:hover {7357  opacity: 0.75;7358}73597360.peach-settings-license-toggle {7361  display: flex;7362  align-items: center;7363  justify-content: center;7364  background: transparent;7365  border: none;7366  cursor: pointer;7367  padding: 4px 6px;7368  border-radius: 4px;7369  color: var(--peach-t2);7370  transition: color 150ms ease;7371}73727373.peach-settings-license-toggle:hover {7374  color: var(--peach-t1);7375}73767377.peach-settings-version {7378  position: absolute;7379  bottom: 8px;7380  left: 22px;7381  font-family: var(--font-mono);7382  font-size: 9px;7383  color: var(--peach-t3);7384  letter-spacing: 0.04em;7385  pointer-events: none;7386  user-select: none;7387}73887389@keyframes peach-panic-pulse {7390  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7391  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7392}73937394[data-motion="reduce"] .peach-panic-final-button {7395  animation: none;7396}73977398/* Vault History — Settings → Vault sub-view */73997400.peach-history-list {7401  border: 1px solid var(--peach-border);7402  border-radius: 8px;7403  overflow: hidden;7404  margin: 8px 0 4px;7405}74067407.peach-history-row {7408  display: flex;7409  align-items: center;7410  justify-content: space-between;7411  padding: 9px 12px;7412  gap: 10px;7413  border-bottom: 1px solid var(--peach-border);7414}74157416.peach-history-row:last-child {7417  border-bottom: none;7418}74197420.peach-history-meta {7421  display: flex;7422  flex-direction: column;7423  gap: 2px;7424  min-width: 0;7425  flex: 1;7426}74277428.peach-history-time {7429  font-size: 0.75rem;7430  font-family: 'IBM Plex Mono', ui-monospace, monospace;7431  color: var(--peach-t0);7432  white-space: nowrap;7433  overflow: hidden;7434  text-overflow: ellipsis;7435}74367437.peach-history-sub {7438  font-size: 0.625rem;7439  color: var(--peach-t2);7440  letter-spacing: 0.06em;7441  text-transform: uppercase;7442  white-space: nowrap;7443  overflow: hidden;7444  text-overflow: ellipsis;7445}74467447.peach-history-btn {7448  flex-shrink: 0;7449  white-space: nowrap;7450  min-width: 56px;7451  text-align: center;7452}74537454.peach-history-btn.is-busy {7455  opacity: 0.65;7456}74577458.peach-history-footer {7459  font-size: 0.625rem;7460  color: var(--peach-t3);7461  letter-spacing: 0.05em;7462  text-align: right;7463  margin: 0;7464  padding: 2px 0 0;7465}74667467/* ── Context menu + swipe-copy flash ─────────────────────── */7468.peach-context-menu-backdrop {7469  position: fixed;7470  inset: 0;7471  background: rgba(0, 0, 0, 0.45);7472  z-index: 100;7473  display: flex;7474  align-items: flex-end;7475  justify-content: center;7476  animation: peach-ctx-fade 140ms ease both;7477}7478.peach-context-menu {7479  width: min(360px, calc(100vw - 24px));7480  margin-bottom: max(env(safe-area-inset-bottom), 12px);7481  background: var(--peach-bg);7482  border: 1px solid var(--peach-t3);7483  border-radius: 14px;7484  padding: 6px;7485  display: flex;7486  flex-direction: column;7487  gap: 2px;7488  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7489  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7490}7491@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7492@keyframes peach-ctx-rise {7493  from { transform: translateY(16px); opacity: 0; }7494  to   { transform: translateY(0);    opacity: 1; }7495}7496.peach-context-menu-item {7497  background: transparent;7498  color: var(--peach-t0);7499  border: 0;7500  border-radius: 10px;7501  padding: 12px 14px;7502  text-align: left;7503  font: inherit;7504  cursor: pointer;7505}7506.peach-context-menu-item:hover,7507.peach-context-menu-item:focus-visible {7508  background: var(--peach-t3);7509}7510.peach-context-menu-item--danger {7511  color: var(--peach-health-bad, #d96868);7512}7513.peach-context-menu-item--cancel {7514  color: var(--peach-t2);7515  margin-top: 4px;7516  border-top: 1px solid var(--peach-t3);7517  border-radius: 0 0 10px 10px;7518}75197520/* Swipe-to-copy flash */7521.peach-entry-row.is-copy-flash {7522  animation: peach-copy-flash 600ms ease both;7523}7524@keyframes peach-copy-flash {7525  0%   { background: transparent; }7526  20%  { background: rgba(217, 153, 51, 0.32); }7527  100% { background: transparent; }7528}75297530html { font-size: 16px; }75317532/* ── Recovery word entry ─────────────────────────────────────────── */7533.peach-lock-recover-link {7534  display: block;7535  width: 100%;7536  margin-top: 12px;7537  background: none;7538  border: none;7539  font-family: "IBM Plex Mono", monospace;7540  font-size: 0.625rem;7541  letter-spacing: 0.06em;7542  color: var(--peach-t2);7543  cursor: pointer;7544  text-align: center;7545  padding: 4px;7546  transition: color 120ms ease;7547}7548.peach-lock-recover-link:hover {7549  color: var(--peach-t0);7550}75517552.lock-screen--recovery {7553  display: flex;7554  flex-direction: column;7555  align-items: stretch;7556  padding: 12px 20px 24px;7557  overflow: hidden;7558}75597560.peach-recovery-nav {7561  display: flex;7562  align-items: center;7563  position: relative;7564  z-index: 1;7565  margin-bottom: 4px;7566}75677568/* Mask runes to the top decorative band only — keep inputs and the7569   bottom CTA button clear. The bottom of the popup is reserved for7570   submit buttons; rendering runes there overlaps the button glyph. */7571.peach-rune-background--recovery {7572  -webkit-mask-image: linear-gradient(7573    to bottom,7574    black 0px, black 85px,7575    transparent 110px,7576    transparent 100%7577  );7578  mask-image: linear-gradient(7579    to bottom,7580    black 0px, black 85px,7581    transparent 110px,7582    transparent 100%7583  );7584}75857586.peach-recovery-header {7587  text-align: center;7588  margin-bottom: 16px;7589  margin-top: 4px;7590}7591.peach-recovery-header .peach-onboarding-headline {7592  font-size: 1.25rem;7593  font-weight: 300;7594  letter-spacing: 0.02em;7595  margin: 0 0 4px;7596}7597.peach-recovery-header .peach-hint {7598  font-family: "IBM Plex Mono", monospace;7599  font-size: 0.625rem;7600  color: var(--peach-t2);7601  letter-spacing: 0.04em;7602  margin: 0;7603}76047605/* 12-word grid: 2 columns × 6 rows */7606.peach-recovery-grid {7607  display: grid;7608  grid-template-columns: repeat(2, 1fr);7609  gap: 12px 20px;7610  width: 100%;7611  margin-bottom: 0;7612}76137614.peach-recovery-word-slot {7615  display: flex;7616  align-items: center;7617  gap: 6px;7618  min-width: 0;7619}76207621.peach-recovery-word-index {7622  font-family: "IBM Plex Mono", monospace;7623  font-size: 0.5rem;7624  color: rgba(255, 255, 255, 0.35);7625  min-width: 14px;7626  flex-shrink: 0;7627  text-align: right;7628  letter-spacing: 0.04em;7629}76307631.peach-recovery-word-input {7632  flex: 1;7633  min-width: 0;7634  background: transparent;7635  border: none;7636  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7637  color: var(--peach-t0);7638  font-family: "IBM Plex Mono", monospace;7639  font-size: 0.6875rem;7640  letter-spacing: 0.06em;7641  padding: 5px 2px 4px;7642  outline: none;7643  text-transform: lowercase;7644  transition: border-color 120ms ease;7645}7646.peach-recovery-word-input::placeholder {7647  color: rgba(255, 255, 255, 0.18);7648}7649.peach-recovery-word-input:focus {7650  border-bottom-color: var(--peach-accent);7651}76527653.peach-recovery-submit {7654  width: 100%;7655  margin-top: auto;7656}76577658.peach-recovery-new-password-form {7659  width: 100%;7660  display: flex;7661  flex-direction: column;7662  gap: 16px;7663  margin-bottom: 8px;7664}7665.peach-recovery-new-password-form .peach-newvault-field {7666  display: flex;7667  flex-direction: column;7668  gap: 4px;7669}76707671/* ── Recovery words display (post-create) ────────────────────────── */7672.lock-screen--recovery-display {7673  display: flex;7674  flex-direction: column;7675  align-items: stretch;7676  padding: 0 20px 20px;7677  min-height: 0;7678  overflow-y: auto;7679}76807681.peach-recovery-words-display {7682  width: 100%;7683  margin-bottom: 16px;7684  border: 1px solid var(--peach-t3);7685  border-radius: 8px;7686  padding: 12px 14px;7687  background: rgba(245, 240, 234, 0.04);7688}76897690.peach-recovery-words-label {7691  font-family: "IBM Plex Mono", monospace;7692  font-size: 0.5rem;7693  letter-spacing: 0.08em;7694  color: var(--peach-t2);7695  text-transform: uppercase;7696  margin-bottom: 10px;7697}76987699.peach-recovery-word-list {7700  list-style: none;7701  margin: 0;7702  padding: 0;7703  display: grid;7704  grid-template-columns: repeat(2, 1fr);7705  gap: 6px 16px;7706}77077708.peach-recovery-word-item {7709  display: flex;7710  align-items: baseline;7711  gap: 5px;7712}77137714.peach-recovery-word-num {7715  font-family: "IBM Plex Mono", monospace;7716  font-size: 0.5rem;7717  color: var(--peach-t2);7718  width: 14px;7719  flex: 0 0 14px;7720  text-align: right;7721  letter-spacing: 0.04em;7722  font-variant-numeric: tabular-nums;7723}77247725.peach-recovery-download-btn {7726  display: block;7727  margin: 10px auto 0;7728  padding: 4px 10px;7729  background: transparent;7730  border: 1px solid var(--peach-border);7731  border-radius: 6px;7732  color: var(--peach-t2);7733  font-family: "IBM Plex Mono", monospace;7734  font-size: 0.5625rem;7735  letter-spacing: 0.06em;7736  text-transform: lowercase;7737  cursor: pointer;7738  transition: border-color 0.15s, color 0.15s;7739}77407741.peach-recovery-download-btn:hover {7742  border-color: var(--peach-accent);7743  color: var(--peach-t0);7744}77457746.peach-recovery-word-text {7747  font-family: "IBM Plex Mono", monospace;7748  font-size: 0.6875rem;7749  letter-spacing: 0.06em;7750  color: var(--peach-t0);7751  text-transform: lowercase;7752}77537754.peach-hint--warning {7755  color: var(--peach-accent);7756  font-style: italic;7757}7758.peach-hint--success {7759  color: var(--peach-t2);7760  font-family: "IBM Plex Mono", monospace;7761  font-size: 0.625rem;7762  letter-spacing: 0.06em;7763}77647765/* Confirmation step */7766.peach-recovery-confirm {7767  width: 100%;7768  flex: 1;7769  display: flex;7770  flex-direction: column;7771}7772.peach-recovery-confirm-label {7773  font-family: "IBM Plex Mono", monospace;7774  font-size: 0.5625rem;7775  letter-spacing: 0.04em;7776  color: var(--peach-t2);7777  text-align: center;7778  margin: 0 0 12px;7779}7780.peach-recovery-confirm-fields {7781  display: flex;7782  flex-direction: column;7783  gap: 14px;7784  margin-bottom: 10px;7785}7786.peach-recovery-confirm-field {7787  display: flex;7788  align-items: center;7789  gap: 8px;7790}7791.peach-recovery-confirm-num {7792  font-family: "IBM Plex Mono", monospace;7793  font-size: 0.5rem;7794  color: var(--peach-t2);7795  min-width: 44px;7796  letter-spacing: 0.04em;7797}7798.peach-recovery-confirm-input {7799  flex: 1;7800  background: transparent;7801  border: none;7802  border-bottom: 1px solid var(--peach-t3);7803  color: var(--peach-t0);7804  font-family: "IBM Plex Mono", monospace;7805  font-size: 0.6875rem;7806  letter-spacing: 0.06em;7807  padding: 4px 2px 3px;7808  outline: none;7809  text-transform: lowercase;7810  transition: border-color 120ms ease;7811}7812.peach-recovery-confirm-input:focus {7813  border-bottom-color: var(--peach-accent);7814}7815.peach-recovery-confirm-input:disabled {7816  opacity: 0.4;7817  cursor: not-allowed;7818}7819.peach-recovery-confirm-btn {7820  width: 100%;7821  margin-top: auto;7822}78237824/* ============================================================7825   Sync info sheet7826   ============================================================ */78277828.peach-sync-info-backdrop {7829  position: fixed;7830  inset: 0;7831  z-index: 200;7832  background: rgba(0, 0, 0, 0.55);7833  display: flex;7834  align-items: flex-end;7835  animation: peach-fade-in 200ms ease forwards;7836}78377838@keyframes peach-fade-in {7839  from { opacity: 0; }7840  to   { opacity: 1; }7841}78427843.peach-sync-info-sheet {7844  width: 100%;7845  background: var(--peach-bg-card, var(--peach-bg));7846  border-top-left-radius: 20px;7847  border-top-right-radius: 20px;7848  padding: 12px 24px 32px;7849  display: flex;7850  flex-direction: column;7851  gap: 20px;7852  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;7853}78547855@keyframes peach-sheet-up {7856  from { transform: translateY(100%); }7857  to   { transform: translateY(0); }7858}78597860.peach-sync-info-handle {7861  width: 36px;7862  height: 4px;7863  border-radius: 2px;7864  background: var(--peach-border);7865  margin: 0 auto 4px;7866  flex-shrink: 0;7867}78687869.peach-sync-info-title {7870  font-family: 'Cormorant Garamond', serif;7871  font-style: italic;7872  font-size: 26px;7873  font-weight: 600;7874  color: var(--peach-t0);7875  margin: 0;7876  line-height: 1.2;7877}78787879.peach-sync-info-body {7880  display: flex;7881  flex-direction: column;7882  gap: 14px;7883}78847885.peach-sync-info-point {7886  display: flex;7887  gap: 12px;7888  align-items: flex-start;7889  font-size: 14px;7890  color: var(--peach-t2);7891  line-height: 1.6;7892  margin: 0;7893}78947895.peach-sync-info-icon {7896  color: var(--peach-accent);7897  font-size: 16px;7898  flex-shrink: 0;7899  margin-top: 1px;7900}79017902.peach-sync-info-actions {7903  display: flex;7904  flex-direction: column;7905  gap: 12px;7906  margin-top: 4px;7907}79087909.peach-sync-info-pro-link {7910  background: none;7911  border: none;7912  font-size: 13px;7913  color: var(--peach-t3);7914  cursor: pointer;7915  padding: 0;7916  font-family: inherit;7917  text-align: center;7918  transition: color 150ms ease;7919}79207921.peach-sync-info-pro-link:hover {7922  color: var(--peach-accent);7923}79247925.peach-btn--full {7926  width: 100%;7927}79287929/* ── Sync screen ── */79307931.peach-sync-coming-soon {7932  display: flex;7933  align-items: flex-start;7934  gap: 10px;7935  padding: 12px 14px;7936  background: var(--peach-s1);7937  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);7938  border-radius: 10px;7939}7940.peach-sync-coming-soon__icon {7941  flex-shrink: 0;7942  color: var(--peach-accent);7943  margin-top: 1px;7944  line-height: 0;7945}7946.peach-sync-coming-soon__title {7947  font-family: 'Cormorant Garamond', serif;7948  font-weight: 500;7949  font-size: 13px;7950  color: var(--peach-accent);7951  margin: 0 0 5px;7952  line-height: 1.3;7953}7954.peach-sync-coming-soon__body {7955  font-size: 12px;7956  color: var(--peach-t1);7957  line-height: 1.55;7958  margin: 0;7959}79607961.peach-sync-screen {7962  display: flex;7963  flex-direction: column;7964  height: 100%;7965}79667967.peach-sync-content {7968  flex: 1;7969  overflow-y: auto;7970  padding: 24px 20px 40px;7971  display: flex;7972  flex-direction: column;7973  gap: 24px;7974}79757976/* Intro (State A) */7977.peach-sync-headline {7978  font-family: 'Cormorant Garamond', serif;7979  font-style: italic;7980  font-size: 28px;7981  font-weight: 600;7982  color: var(--peach-t0);7983  margin: 0 0 10px;7984  line-height: 1.2;7985}79867987.peach-sync-intro-body {7988  font-size: 14px;7989  color: var(--peach-t1);7990  line-height: 1.6;7991  margin: 0;7992}79937994.peach-sync-pro-note {7995  display: flex;7996  flex-direction: column;7997  gap: 8px;7998  background: var(--peach-t3);7999  border-radius: 10px;8000  padding: 12px 14px;8001}80028003.peach-sync-pro-note-text {8004  font-size: 12px;8005  color: var(--peach-t2);8006  line-height: 1.5;8007  margin: 0;8008}80098010.peach-sync-pro-link {8011  background: none;8012  border: none;8013  font-size: 12px;8014  color: var(--peach-accent);8015  cursor: pointer;8016  padding: 0;8017  font-family: inherit;8018  text-align: left;8019}80208021/* Status (State C) */8022.peach-sync-status {8023  padding: 12px 0;8024  border-bottom: 1px solid var(--peach-border);8025}80268027.peach-sync-status-row {8028  display: flex;8029  align-items: center;8030  gap: 8px;8031}80328033.peach-sync-dot {8034  width: 7px;8035  height: 7px;8036  border-radius: 50%;8037  flex-shrink: 0;8038}80398040.peach-sync-dot--green { background: var(--peach-health-ok); }8041.peach-sync-dot--amber { background: var(--peach-accent); }80428043.peach-sync-status-text {8044  font-family: 'IBM Plex Mono', monospace;8045  font-size: 11px;8046  color: var(--peach-t2);8047}80488049/* Paired devices */8050.peach-sync-section {8051  display: flex;8052  flex-direction: column;8053  gap: 2px;8054}80558056.peach-sync-section-label {8057  font-family: 'IBM Plex Mono', monospace;8058  font-size: 10px;8059  letter-spacing: 0.1em;8060  color: var(--peach-t3);8061  margin: 0 0 10px;8062}80638064.peach-sync-device-row {8065  display: flex;8066  justify-content: space-between;8067  align-items: baseline;8068  padding: 10px 0;8069  border-bottom: 1px solid var(--peach-border);8070  gap: 12px;8071}80728073.peach-sync-device-name {8074  font-size: 14px;8075  color: var(--peach-t1);8076}80778078.peach-sync-device-meta {8079  font-family: 'IBM Plex Mono', monospace;8080  font-size: 11px;8081  color: var(--peach-t3);8082  white-space: nowrap;8083}80848085.peach-sync-hub-note {8086  padding: 14px 16px;8087  border: 1px solid var(--peach-border);8088  border-radius: 10px;8089  display: flex;8090  flex-direction: column;8091  gap: 6px;8092  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8093}80948095.peach-sync-hub-note-title {8096  font-size: 13px;8097  font-weight: 600;8098  color: var(--peach-t0);8099  margin: 0;8100}81018102.peach-sync-hub-note-body {8103  font-size: 12px;8104  color: var(--peach-t2);8105  line-height: 1.6;8106  margin: 0;8107}81088109/* Action buttons */8110.peach-sync-actions {8111  display: flex;8112  gap: 10px;8113  flex-wrap: wrap;8114}81158116/* Upgrade prompt (State B) */8117.peach-sync-upgrade {8118  display: flex;8119  flex-direction: column;8120  gap: 12px;8121  padding: 16px;8122  border: 1px solid var(--peach-border);8123  border-radius: 10px;8124}81258126.peach-sync-upgrade-text {8127  font-size: 13px;8128  color: var(--peach-t2);8129  line-height: 1.6;8130  margin: 0;8131}81328133/* Network note */8134.peach-sync-network-note {8135  font-size: 12px;8136  color: var(--peach-t3);8137  line-height: 1.6;8138  margin: 0;8139}81408141/* Advanced */8142.peach-sync-advanced {8143  margin-top: auto;8144  padding-top: 16px;8145  border-top: 1px solid var(--peach-border);8146}81478148.peach-sync-advanced-toggle {8149  display: flex;8150  align-items: center;8151  gap: 8px;8152  background: none;8153  border: none;8154  font-family: 'IBM Plex Mono', monospace;8155  font-size: 11px;8156  letter-spacing: 0.08em;8157  color: var(--peach-t3);8158  cursor: pointer;8159  padding: 0;8160  text-transform: uppercase;8161}81628163.peach-sync-advanced-chevron {8164  display: inline-block;8165  transition: transform 200ms ease;8166  font-size: 10px;8167}81688169.peach-sync-advanced-chevron.is-open {8170  transform: rotate(90deg);8171}81728173.peach-sync-advanced-content {8174  margin-top: 14px;8175}81768177.peach-sync-advanced-row {8178  display: flex;8179  justify-content: space-between;8180  align-items: center;8181  gap: 16px;8182}81838184.peach-sync-advanced-title {8185  font-size: 14px;8186  color: var(--peach-t1);8187  margin: 0 0 2px;8188}81898190.peach-sync-advanced-subtitle {8191  font-size: 12px;8192  color: var(--peach-t3);8193  margin: 0;8194  line-height: 1.5;8195}81968197/* ── Add Device — Android scan tabs ─────────────────────────────────────── */81988199.peach-pairing-tabs {8200  display: flex;8201  border: 1px solid var(--peach-border);8202  border-radius: 8px;8203  overflow: hidden;8204  margin-bottom: 4px;8205}82068207.peach-pairing-tab {8208  flex: 1;8209  padding: 10px 0;8210  background: none;8211  border: none;8212  font-family: 'IBM Plex Mono', monospace;8213  font-size: 11px;8214  letter-spacing: 0.06em;8215  color: var(--peach-t2);8216  cursor: pointer;8217  transition: background 150ms, color 150ms;8218}82198220.peach-pairing-tab.is-active {8221  background: var(--peach-accent);8222  color: #fff;8223  font-weight: 600;8224}82258226.peach-pairing-tab:not(.is-active):active {8227  background: var(--peach-border);8228}82298230/* Camera view */8231.peach-pairing-camera-container {8232  position: relative;8233  width: 100%;8234  aspect-ratio: 1;8235  border-radius: 12px;8236  overflow: hidden;8237  background: #000;8238  flex-shrink: 0;8239}82408241.peach-pairing-video {8242  width: 100%;8243  height: 100%;8244  object-fit: cover;8245}82468247.peach-pairing-scan-frame {8248  position: absolute;8249  top: 50%;8250  left: 50%;8251  transform: translate(-50%, -50%);8252  width: 60%;8253  aspect-ratio: 1;8254  border: 2px solid var(--peach-accent);8255  border-radius: 8px;8256  pointer-events: none;8257}82588259/* ── Notes Mode ── */82608261/* Overlay that crossfades over the vault */8262.peach-notes-overlay {8263  position: fixed;8264  inset: 0;8265  z-index: 90;8266  opacity: 0;8267  pointer-events: none;8268  animation: peach-mode-in 220ms ease-in forwards;8269}82708271.peach-notes-overlay.is-visible {8272  opacity: 1;8273  pointer-events: auto;8274}82758276@keyframes peach-mode-in {8277  from { opacity: 0; }8278  to   { opacity: 1; }8279}82808281/* Top-level notes surface */8282.peach-notes-mode {8283  position: absolute;8284  inset: 0;8285  background: var(--peach-bg);8286  display: flex;8287  flex-direction: column;8288}82898290/* Rune canvas positioned behind content */8291.peach-note-rune-canvas {8292  position: absolute;8293  inset: 0;8294  width: 100%;8295  height: 100%;8296  pointer-events: none;8297  z-index: 0;8298}82998300/* TOC wrapper */8301.peach-notes-toc-wrapper {8302  position: absolute;8303  inset: 0;8304  z-index: 1;8305  opacity: 1;8306  pointer-events: auto;8307  transition: opacity 200ms ease;8308}83098310.peach-notes-toc-wrapper.is-hidden {8311  opacity: 0;8312  pointer-events: none;8313}83148315/* Editor wrapper */8316.peach-notes-editor-wrapper {8317  position: absolute;8318  inset: 0;8319  z-index: 2;8320  opacity: 0;8321  pointer-events: none;8322  transition: opacity 200ms ease;8323}83248325.peach-notes-editor-wrapper.is-visible {8326  opacity: 1;8327  pointer-events: auto;8328}83298330/* TOC inner */8331.peach-notes-toc {8332  position: relative;8333  display: flex;8334  flex-direction: column;8335  height: 100%;8336  padding-top: env(safe-area-inset-top, 0px);8337  padding-bottom: env(safe-area-inset-bottom, 0px);8338}83398340/* Shared header */8341.peach-notes-header {8342  display: flex;8343  align-items: center;8344  padding: 12px 16px;8345  gap: 12px;8346  flex-shrink: 0;8347  min-height: 52px;8348  position: relative;8349  z-index: 2;8350}83518352.peach-notes-back {8353  font-size: 22px;8354  color: var(--peach-t2);8355  background: none;8356  border: none;8357  padding: 4px;8358  cursor: pointer;8359  line-height: 1;8360  flex-shrink: 0;8361  transition: color 150ms ease;8362  -webkit-tap-highlight-color: transparent;8363}83648365.peach-notes-back:active { color: var(--peach-t0); }83668367.peach-notes-header-title {8368  flex: 1;8369  font-family: 'Cormorant Garamond', serif;8370  font-style: italic;8371  font-size: 22px;8372  color: var(--peach-t0);8373  text-align: center;8374}83758376.peach-notes-header-title.is-breadcrumb {8377  font-family: 'IBM Plex Mono', monospace;8378  font-style: normal;8379  font-size: 11px;8380  color: var(--peach-t3);8381  letter-spacing: 0.08em;8382  text-transform: uppercase;8383  cursor: pointer;8384}83858386.peach-notes-header-actions {8387  display: flex;8388  gap: 8px;8389  flex-shrink: 0;8390}83918392.peach-notes-header-btn {8393  width: 36px;8394  height: 36px;8395  display: flex;8396  align-items: center;8397  justify-content: center;8398  background: none;8399  border: none;8400  color: var(--peach-t2);8401  cursor: pointer;8402  border-radius: 8px;8403  font-size: 16px;8404  transition: color 150ms ease, background 150ms ease;8405  -webkit-tap-highlight-color: transparent;8406}84078408.peach-notes-header-btn:active {8409  background: rgba(255,255,255,0.06);8410  color: var(--peach-t0);8411}84128413/* Inline search bar */8414.peach-notes-search-input {8415  flex: 1;8416  background: none;8417  border: none;8418  outline: none;8419  font-family: 'IBM Plex Mono', monospace;8420  font-size: 13px;8421  color: var(--peach-t0);8422  padding: 4px 0;8423  letter-spacing: 0.02em;8424}84258426.peach-notes-search-input::placeholder {8427  color: var(--peach-t3);8428}84298430/* TOC list */8431.peach-notes-list-container {8432  flex: 1;8433  overflow-y: auto;8434  overflow-x: hidden;8435  scrollbar-width: none;8436  -webkit-overflow-scrolling: touch;8437  overscroll-behavior: contain;8438  position: relative;8439  z-index: 1;8440}84418442.peach-notes-list-container::-webkit-scrollbar { display: none; }84438444/* Note row */8445.peach-note-row {8446  position: relative;8447  display: grid;8448  grid-template-columns: 44px 8px 1fr 8px auto;8449  align-items: center;8450  min-height: 72px;8451  padding: 16px 20px;8452  border-bottom: 0.5px solid var(--peach-border);8453  cursor: pointer;8454  overflow: hidden;8455  touch-action: pan-y;8456  user-select: none;8457  -webkit-user-select: none;8458  -webkit-tap-highlight-color: transparent;8459}84608461.peach-note-row:first-child {8462  border-top: 0.5px solid var(--peach-border);8463}84648465.peach-note-row:active {8466  background: rgba(255,255,255,0.02);8467}84688469.peach-note-numeral {8470  font-family: 'Cormorant Garamond', serif;8471  font-style: italic;8472  font-size: 15px;8473  color: var(--peach-accent);8474  text-align: right;8475  line-height: 1;8476  flex-shrink: 0;8477}84788479.peach-note-title-gap { /* grid spacer */ }84808481.peach-note-title {8482  font-family: 'Cormorant Garamond', serif;8483  font-style: italic;8484  font-size: 18px;8485  color: var(--peach-t0);8486  line-height: 1.3;8487  min-width: 0;8488  overflow-wrap: break-word;8489}84908491.peach-note-title-match {8492  color: var(--peach-accent);8493}84948495.peach-note-date {8496  font-family: 'IBM Plex Mono', monospace;8497  font-size: 11px;8498  color: var(--peach-t2);8499  white-space: nowrap;8500  text-align: right;8501  flex-shrink: 0;8502  grid-column: 5;8503}85048505/* Swipe underlays */8506.peach-note-row-underlay {8507  position: absolute;8508  inset: 0;8509  display: flex;8510  align-items: center;8511  padding: 0 24px;8512  font-family: 'IBM Plex Mono', monospace;8513  font-size: 11px;8514  letter-spacing: 0.1em;8515  pointer-events: none;8516  z-index: 0;8517}85188519.peach-note-row-underlay--delete {8520  background: #8B2020;8521  color: rgba(255,255,255,0.9);8522  justify-content: flex-end;8523}85248525.peach-note-row-underlay--archive {8526  background: var(--peach-accent);8527  color: #0C0A06;8528  justify-content: flex-start;8529}85308531/* Delete confirm strip */8532.peach-note-delete-confirm {8533  position: absolute;8534  inset: 0;8535  background: var(--peach-bg);8536  display: flex;8537  align-items: center;8538  gap: 12px;8539  padding: 0 20px;8540  font-family: 'IBM Plex Mono', monospace;8541  font-size: 11px;8542  color: var(--peach-t1);8543  letter-spacing: 0.04em;8544  animation: peach-delete-confirm-in 150ms ease both;8545  z-index: 10;8546}85478548@keyframes peach-delete-confirm-in {8549  from { opacity: 0; }8550  to   { opacity: 1; }8551}85528553.peach-note-delete-confirm-btn {8554  background: #8B2020;8555  color: rgba(255,255,255,0.9);8556  border: none;8557  border-radius: 6px;8558  padding: 4px 10px;8559  font-family: 'IBM Plex Mono', monospace;8560  font-size: 10px;8561  cursor: pointer;8562  letter-spacing: 0.06em;8563}85648565.peach-note-delete-cancel-btn {8566  background: none;8567  border: none;8568  color: var(--peach-t3);8569  font-family: 'IBM Plex Mono', monospace;8570  font-size: 10px;8571  cursor: pointer;8572  letter-spacing: 0.06em;8573  padding: 4px 6px;8574}85758576/* + New note button */8577.peach-notes-new-btn {8578  font-family: 'IBM Plex Mono', monospace;8579  font-size: 12px;8580  color: var(--peach-t3);8581  text-align: center;8582  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8583  background: none;8584  border: none;8585  width: 100%;8586  cursor: pointer;8587  letter-spacing: 0.04em;8588  transition: color 150ms ease;8589  -webkit-tap-highlight-color: transparent;8590}85918592.peach-notes-new-btn:active { color: var(--peach-accent); }85938594/* Empty state */8595.peach-notes-empty {8596  display: flex;8597  flex-direction: column;8598  align-items: center;8599  justify-content: center;8600  flex: 1;8601  padding: 48px 32px;8602  gap: 16px;8603}86048605.peach-notes-empty-text {8606  font-family: 'Cormorant Garamond', serif;8607  font-style: italic;8608  font-size: 20px;8609  color: var(--peach-t3);8610  text-align: center;8611  margin: 0;8612  line-height: 1.4;8613  white-space: pre-line;8614}86158616/* ── Editor surface ── */86178618.peach-note-editor-surface {8619  position: absolute;8620  inset: 0;8621  background: var(--peach-bg);8622  display: flex;8623  flex-direction: column;8624  padding-top: env(safe-area-inset-top, 0px);8625}86268627.peach-note-editor-scroll {8628  flex: 1;8629  overflow-y: auto;8630  overflow-x: hidden;8631  scrollbar-width: none;8632  -webkit-overflow-scrolling: touch;8633  padding: 0 24px 120px;8634  position: relative;8635  z-index: 1;8636}86378638.peach-note-editor-scroll::-webkit-scrollbar { display: none; }86398640/* Desktop toolbar (always visible above body) */8641.peach-note-toolbar-desktop-inline {8642  display: flex;8643  align-items: center;8644  gap: 2px;8645  padding: 6px 0 12px;8646  margin-bottom: 4px;8647  border-bottom: 0.5px solid var(--peach-border);8648}86498650/* Title field */8651.peach-note-title-field {8652  font-family: 'Cormorant Garamond', serif;8653  font-style: italic;8654  font-size: 32px;8655  font-weight: 600;8656  color: var(--peach-t0);8657  line-height: 1.2;8658  padding: 8px 0 0;8659  outline: none;8660  min-height: 44px;8661  word-break: break-word;8662  position: relative;8663  z-index: 1;8664}86658666.peach-note-title-field:empty::before {8667  content: attr(data-placeholder);8668  color: var(--peach-t3);8669  pointer-events: none;8670}86718672/* Hairline separator */8673.peach-note-hairline {8674  height: 0.5px;8675  background: var(--peach-border);8676  margin: 12px 0 20px;8677  position: relative;8678  z-index: 1;8679}86808681/* Body field */8682.peach-note-body-field {8683  font-family: 'DM Sans', sans-serif;8684  font-size: 16px;8685  color: var(--peach-t0);8686  line-height: 1.85;8687  padding: 0;8688  outline: none;8689  min-height: 240px;8690  word-break: break-word;8691  position: relative;8692  z-index: 1;8693}86948695.peach-note-body-field:empty::before {8696  content: attr(data-placeholder);8697  color: var(--peach-t3);8698  font-style: italic;8699  pointer-events: none;8700}87018702.peach-note-body-field h2 {8703  font-family: 'Cormorant Garamond', serif;8704  font-style: italic;8705  font-size: 22px;8706  font-weight: 600;8707  color: var(--peach-t0);8708  margin: 20px 0 8px;8709}87108711.peach-note-body-field blockquote {8712  border-left: 2px solid var(--peach-accent);8713  margin: 12px 0;8714  padding-left: 16px;8715  color: var(--peach-t1);8716  font-style: italic;8717}87188719.peach-note-body-field ul,8720.peach-note-body-field ol {8721  padding-left: 20px;8722  margin: 8px 0;8723}87248725.peach-note-body-field li {8726  margin: 4px 0;8727}87288729.peach-note-body-field hr {8730  border: none;8731  border-top: 0.5px solid var(--peach-border);8732  margin: 16px 0;8733}87348735/* Saved indicator */8736.peach-note-saved-indicator {8737  font-family: 'IBM Plex Mono', monospace;8738  font-size: 11px;8739  color: var(--peach-t3);8740  letter-spacing: 0.04em;8741  text-align: right;8742  padding: 6px 24px;8743  flex-shrink: 0;8744  transition: opacity 300ms ease;8745  pointer-events: none;8746  position: relative;8747  z-index: 1;8748}87498750/* Mobile keyboard toolbar */8751.peach-note-toolbar-mobile {8752  display: flex;8753  align-items: center;8754  padding: 8px 16px;8755  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));8756  background: var(--peach-bg);8757  border-top: 0.5px solid var(--peach-border);8758  gap: 4px;8759  flex-shrink: 0;8760  position: relative;8761  z-index: 10;8762}87638764.peach-note-toolbar-btn {8765  min-width: 36px;8766  height: 36px;8767  display: flex;8768  align-items: center;8769  justify-content: center;8770  background: none;8771  border: none;8772  border-radius: 8px;8773  cursor: pointer;8774  font-size: 14px;8775  color: var(--peach-t1);8776  font-family: 'DM Sans', sans-serif;8777  font-weight: 600;8778  transition: background 100ms ease, color 100ms ease;8779  -webkit-tap-highlight-color: transparent;8780}87818782.peach-note-toolbar-btn--italic { font-style: italic; }8783.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }8784.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }87858786.peach-note-toolbar-divider {8787  width: 0.5px;8788  height: 20px;8789  background: var(--peach-border);8790  margin: 0 4px;8791  flex-shrink: 0;8792}87938794.peach-note-toolbar-spacer { flex: 1; }87958796/* Desktop: larger headline in TOC */8797@media (min-width: 400px) {8798  .peach-notes-header-title:not(.is-breadcrumb) {8799    font-size: 32px;8800  }88018802  .peach-note-row {8803    min-height: 64px;8804    padding: 14px 16px;8805  }8806}88078808/* Flying title — shared element during expansion/collapse */88098810/* ─── Light theme overrides ───────────────────────────────────────────────8811   Tokens that cannot be expressed as variable substitutions — hardcoded8812   context-specific values that need separate light-mode rules. */88138814/* Settings section headers: use text-label (#79766F) per restoration brief —8815   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY8816   presence without fighting the light parchment background. */8817.light .peach-settings-sub-label,8818[data-theme="light"] .peach-settings-sub-label,8819.light .peach-settings-nav-label,8820[data-theme="light"] .peach-settings-nav-label {8821  color: #79766F;8822}88238824/* Secondary action buttons (ghost / subtle): filled with input-well surface8825   so they read as recessed against the parchment card background. */8826.light .peach-btn--ghost:not(.peach-icon-btn),8827[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {8828  background: #EEE7DD;8829  border-color: #DDD5CB;8830  color: #1A1208;8831}8832.light .peach-icon-btn,8833[data-theme="light"] .peach-icon-btn {8834  background: transparent;8835  border-color: transparent;8836}8837.light .peach-btn--subtle,8838[data-theme="light"] .peach-btn--subtle {8839  background: #EEE7DD;8840  border-color: #DDD5CB;8841}88428843/* Wide secondary action button on the lock screen — override the8844   hardcoded dark-mode rgba values with warm parchment equivalents. */8845.light .peach-lock-secondary,8846[data-theme="light"] .peach-lock-secondary {8847  background: #EEE7DD;8848  border-color: #DDD5CB;8849  color: #1A1208;8850}8851.light .peach-lock-secondary:hover,8852[data-theme="light"] .peach-lock-secondary:hover {8853  background: #F0E9DF;8854}88558856/* Entry row hover: bg-row lifts the row above the card surface. */8857.light .peach-entry-row:hover,8858[data-theme="light"] .peach-entry-row:hover {8859  background: #F2EBE1;8860}8861.light .peach-entry-row.is-active,8862[data-theme="light"] .peach-entry-row.is-active {8863  background: #F2EBE1;8864}8865.light .peach-entry-row.is-selected,8866[data-theme="light"] .peach-entry-row.is-selected {8867  background: #F5EDE2;8868}88698870/* ──────────────────────────────────────────────────────────────────────────8871   Chirp pairing flow — bird-stage animation (Phase 1)8872   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.8873   Three-act animation gated on the [data-phase] attribute of8874   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)8875   each react via either pose class or visibility flag.8876   Tokens: accent surfaces use var(--peach-accent); bird illustration8877   colours are baked into the SVG per the brand-peach exception in §3.1.8878   ────────────────────────────────────────────────────────────────────── */88798880.peach-chirp-pair {8881  position: absolute;8882  inset: 0;8883  z-index: 3;8884  display: flex;8885  flex-direction: column;8886  padding: 14px 12px 12px;8887  width: 100%;8888  box-sizing: border-box;8889  gap: 0;8890  background:8891    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),8892    var(--peach-bg);8893  color: var(--peach-t0);8894  overflow-y: auto;8895  overflow-x: hidden;8896  scrollbar-width: none;8897  isolation: isolate;8898  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;8899}8900@keyframes peach-chirp-overlay-in {8901  from { opacity: 0; transform: translateY(8px); }8902  to   { opacity: 1; transform: translateY(0); }8903}8904.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }8905.peach-chirp-pair::before {8906  content: '';8907  position: absolute;8908  inset: 0;8909  border-radius: inherit;8910  pointer-events: none;8911  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);8912  z-index: 0;8913}8914.peach-chirp-pair > * { position: relative; z-index: 1; }89158916/* Header --------------------------------------------------------------- */8917.peach-chirp-head {8918  display: flex; align-items: center; gap: 10px;8919}8920.peach-chirp-back {8921  width: 32px; height: 32px;8922  display: inline-flex; align-items: center; justify-content: center;8923  background: transparent;8924  border: none;8925  border-radius: 8px;8926  color: var(--peach-t1);8927  cursor: pointer;8928  transition: color 0.15s ease, box-shadow 0.15s ease;8929}8930.peach-chirp-back:hover {8931  color: var(--peach-accent);8932  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);8933}8934.peach-chirp-title {8935  font-family: var(--font-display, Georgia, serif);8936  font-style: italic;8937  font-size: 24px;8938  font-weight: 500;8939  letter-spacing: 0.005em;8940  color: var(--peach-t0);8941  line-height: 1;8942}8943.peach-chirp-head-spacer { flex: 1; }89448945/* Chip row ------------------------------------------------------------- */8946.peach-chirp-chip-row {8947  display: flex;8948  align-items: center;8949  justify-content: flex-start;8950  margin-top: 12px;8951}8952.peach-chirp-chip {8953  display: inline-flex; align-items: center; gap: 8px;8954  padding: 5px 10px 5px 8px;8955  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);8956  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);8957  border-radius: 999px;8958  font-family: var(--peach-mono, ui-monospace, monospace);8959  font-size: 11px;8960  letter-spacing: 0.04em;8961  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));8962}8963.peach-chirp-chip-dot {8964  width: 6px; height: 6px; border-radius: 50%;8965  background: var(--peach-accent);8966  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);8967}8968.peach-chirp-chip[data-phase="paired"] {8969  background: color-mix(in srgb, #4f9eda 12%, transparent);8970  border-color: color-mix(in srgb, #4f9eda 28%, transparent);8971  color: #76b6e8;8972}8973.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {8974  background: #76b6e8;8975  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);8976}8977.peach-chirp-chip[data-phase="timeout"],8978.peach-chirp-chip[data-phase="mic_denied"],8979.peach-chirp-chip[data-phase="version_mismatch"],8980.peach-chirp-chip[data-phase="handshake_failed"] {8981  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);8982  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);8983  color: var(--peach-warn, #d29257);8984}8985.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,8986.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,8987.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,8988.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {8989  background: var(--peach-warn, #d29257);8990  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);8991}89928993/* Bird stage ----------------------------------------------------------- */8994.peach-chirp-stage {8995  position: relative;8996  margin: 14px 0 8px;8997  height: 180px;8998  border-radius: 12px;8999  background:9000    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9001    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9002    color-mix(in srgb, var(--peach-bg) 92%, #000);9003  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9004  overflow: hidden;9005  isolation: isolate;9006}9007.peach-chirp-stage::after {9008  content: '';9009  position: absolute;9010  left: 12%; right: 12%;9011  bottom: 36px;9012  height: 1px;9013  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9014}90159016.peach-chirp-bird-slot {9017  position: absolute;9018  bottom: 8px;9019  width: 100px;9020  height: 110px;9021  display: flex;9022  align-items: flex-end;9023  justify-content: center;9024}9025.peach-chirp-bird-slot-desktop { left: 28px; }9026.peach-chirp-bird-slot-mobile { right: 28px; }90279028/* Mobile bird hops in from the right when handshake begins */9029.peach-chirp-bird-slot-mobile {9030  opacity: 1;9031  transform: translateX(-6px);9032  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9033}9034.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,9035.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,9036.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {9037  opacity: 0;9038  transform: translateX(60px) rotate(8deg);9039}9040.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,9041.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {9042  transform: translateX(6px);9043  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9044}90459046/* Paired: both birds bob together */9047.peach-chirp-stage.act-paired .peach-chirp-bird-slot {9048  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;9049}9050.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }9051.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }9052.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }9053@keyframes peach-chirp-happy-bob {9054  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9055  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9056}90579058/* Bird internal -------------------------------------------------------- */9059.peach-chirp-bird {9060  width: 108px;9061  height: 108px;9062  transform-origin: 50% 95%;9063}9064.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }90659066.peach-chirp-bird-body {9067  transform-origin: 50% 80%;9068  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;9069}9070@keyframes peach-chirp-bird-bob {9071  0%, 100% { transform: translateY(0) scale(1, 1); }9072  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9073}90749075.peach-chirp-bird-eye-group {9076  animation: peach-chirp-blink 5.2s steps(1, end) infinite;9077  transform-origin: center;9078  transform-box: fill-box;9079}9080@keyframes peach-chirp-blink {9081  0%, 92%, 96%, 100% { transform: scaleY(1); }9082  94%                { transform: scaleY(0.05); }9083}90849085/* Pose: chirping — beak opens, head bobs, aura blooms */9086.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {9087  animation:9088    peach-chirp-bird-bob 2.4s ease-in-out infinite,9089    peach-chirp-squeeze 1.7s ease-in-out infinite;9090}9091@keyframes peach-chirp-squeeze {9092  0%, 70%, 100% { transform-origin: 50% 85%; }9093  78%           { transform: scale(1.04, 0.96) translateY(1px); }9094  86%           { transform: scale(0.98, 1.02); }9095}9096.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {9097  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;9098}9099@keyframes peach-chirp-head-bob {9100  0%, 70%, 100% { transform: translateY(0) rotate(0); }9101  78%           { transform: translateY(-3px) rotate(-4deg); }9102  86%           { transform: translateY(-1px) rotate(-2deg); }9103}9104.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {9105  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;9106}9107@keyframes peach-chirp-beak-open {9108  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9109  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9110  86%           { transform: rotate(-6deg); }9111}9112.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {9113  animation: peach-chirp-aura 1.7s ease-in-out infinite;9114}9115@keyframes peach-chirp-aura {9116  0%, 100% { opacity: 0; }9117  50%      { opacity: 0.8; }9118}9119.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {9120  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;9121  transform-origin: 100% 50%;9122}9123@keyframes peach-chirp-tail-twitch {9124  0%, 75%, 100% { transform: rotate(0); }9125  82%           { transform: rotate(-3deg) translateX(-1px); }9126}91279128/* Pose: attentive — head tilts toward partner */9129.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {9130  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9131}9132@keyframes peach-chirp-head-tilt {9133  0%   { transform: rotate(0) translateY(0); }9134  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9135  100% { transform: rotate(-6deg); }9136}9137.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {9138  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9139  transform-origin: 100% 50%;9140}9141@keyframes peach-chirp-tail-cock {9142  0%   { transform: rotate(0); }9143  100% { transform: rotate(-4deg); }9144}91459146/* Pose: happy — wing flutter, tuft perk, tail wag */9147.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9148  transform-origin: 80% 60%;9149  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9150}9151@keyframes peach-chirp-wing-flutter {9152  0%, 100% { transform: rotate(0) translateY(0); }9153  50%      { transform: rotate(-16deg) translateY(-2px); }9154}9155.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9156  transform-origin: 0% 100%;9157  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9158}9159@keyframes peach-chirp-tuft-perk {9160  0%, 100% { transform: rotate(0); }9161  50%      { transform: rotate(-15deg) translateY(-1px); }9162}9163.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9164  transform-origin: 100% 50%;9165  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9166}9167@keyframes peach-chirp-tail-wag {9168  0%, 100% { transform: rotate(0); }9169  25%      { transform: rotate(6deg); }9170  75%      { transform: rotate(-6deg); }9171}9172.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9173  animation: peach-chirp-head-perk 0.5s ease-out;9174}9175@keyframes peach-chirp-head-perk {9176  0%   { transform: translateY(0); }9177  40%  { transform: translateY(-3px) rotate(2deg); }9178  100% { transform: translateY(0); }9179}91809181/* Pose: sad — body droops forward */9182.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9183  transform: translateY(5px) rotate(-2deg);9184  animation: none;9185}9186.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9187  transform: translateY(4px) rotate(8deg);9188}9189.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9190.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }91919192.peach-chirp-bird-pose-hidden { opacity: 0; }91939194/* Chirp arcs ----------------------------------------------------------- */9195.peach-chirp-arcs {9196  position: absolute;9197  top: 18px;9198  width: 96px;9199  height: 70px;9200  pointer-events: none;9201}9202.peach-chirp-arcs-right { right: -60px; }9203.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9204.peach-chirp-arc {9205  position: absolute;9206  top: 50%;9207  left: 0;9208  width: 40px;9209  height: 40px;9210  margin-top: -20px;9211  border: 1.2px solid #f4d5a8;9212  border-color: transparent #f4d5a8 transparent transparent;9213  border-radius: 50%;9214  opacity: 0;9215  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9216}9217@keyframes peach-chirp-arc-expand {9218  0%   { transform: scale(0.4); opacity: 0; }9219  20%  { opacity: 0.9; }9220  100% { transform: scale(1.6); opacity: 0; }9221}92229223/* Flight wave ---------------------------------------------------------- */9224.peach-chirp-flight-track {9225  position: absolute;9226  inset: 32px 36px 38px 36px;9227  pointer-events: none;9228}9229.peach-chirp-flight-wave {9230  position: absolute;9231  top: 8px;9232  left: 76px;9233  right: 76px;9234  height: 60px;9235  width: auto;9236  opacity: 0;9237  transition: opacity 0.15s ease;9238  stroke: #f4d5a8;9239  fill: none;9240}9241.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9242.peach-chirp-flight-wave.is-visible { opacity: 1; }9243.peach-chirp-flight-path,9244.peach-chirp-flight-path-2 {9245  stroke-dasharray: 240;9246  stroke-dashoffset: 240;9247  stroke-linecap: round;9248  fill: none;9249}9250.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9251.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9252.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9253  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9254}9255.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9256  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9257}9258@keyframes peach-chirp-fly {9259  0%   { stroke-dashoffset: 240; opacity: 0; }9260  20%  { opacity: 1; }9261  100% { stroke-dashoffset: -120; opacity: 0; }9262}92639264/* Connection dot ------------------------------------------------------- */9265.peach-chirp-dot {9266  position: absolute;9267  top: 50%; left: 50%;9268  transform: translate(-50%, -50%);9269  width: 40px; height: 40px;9270  opacity: 0;9271  pointer-events: none;9272  transition: opacity 0.3s ease;9273  color: var(--peach-accent);9274}9275.peach-chirp-dot.is-visible { opacity: 1; }9276.peach-chirp-dot-glow {9277  position: absolute; top: 50%; left: 50%;9278  transform: translate(-50%, -50%);9279  width: 38px; height: 38px;9280  border-radius: 50%;9281  filter: blur(10px);9282  opacity: 0.55;9283  background: var(--peach-accent);9284  animation: peach-chirp-dot-bloom 1.4s ease-out;9285}9286.peach-chirp-dot-core {9287  position: absolute; top: 50%; left: 50%;9288  transform: translate(-50%, -50%);9289  width: 8px; height: 8px;9290  border-radius: 50%;9291  background: var(--peach-accent);9292  box-shadow: 0 0 12px currentColor;9293  animation: peach-chirp-dot-core 1.4s ease-out;9294}9295.peach-chirp-dot-ring {9296  position: absolute; top: 50%; left: 50%;9297  width: 60px; height: 60px;9298  transform: translate(-50%, -50%);9299  animation: peach-chirp-dot-ring 1.4s linear;9300  stroke: var(--peach-accent);9301}9302@keyframes peach-chirp-dot-bloom {9303  0%   { width: 4px; height: 4px; opacity: 0; }9304  35%  { width: 60px; height: 60px; opacity: 0.7; }9305  100% { width: 38px; height: 38px; opacity: 0.55; }9306}9307@keyframes peach-chirp-dot-core {9308  0%   { width: 0; height: 0; }9309  35%  { width: 12px; height: 12px; }9310  100% { width: 8px; height: 8px; }9311}9312@keyframes peach-chirp-dot-ring {9313  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9314  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9315  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9316}93179318/* Motes — drift upward across the stage */9319.peach-chirp-motes {9320  position: absolute;9321  inset: 0;9322  pointer-events: none;9323}9324.peach-chirp-mote {9325  position: absolute;9326  width: 2px; height: 2px;9327  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9328  border-radius: 50%;9329  bottom: 32px;9330  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9331  opacity: 0;9332  animation: peach-chirp-mote-drift 6s linear infinite;9333  animation-delay: calc(var(--mote-i, 0) * 0.7s);9334}9335@keyframes peach-chirp-mote-drift {9336  0%   { transform: translateY(0); opacity: 0; }9337  10%  { opacity: 0.6; }9338  90%  { opacity: 0.1; }9339  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9340}93419342/* Status copy ---------------------------------------------------------- */9343.peach-chirp-copy-host {9344  margin: 4px 4px 10px;9345  text-align: center;9346  min-height: 50px;9347}9348.peach-chirp-copy {9349  animation: peach-chirp-copy-in 0.35s ease both;9350}9351@keyframes peach-chirp-copy-in {9352  from { opacity: 0; transform: translateY(4px); }9353  to   { opacity: 1; transform: translateY(0); }9354}9355.peach-chirp-headline {9356  font-family: var(--font-display, Georgia, serif);9357  font-style: italic;9358  font-size: 20px;9359  font-weight: 500;9360  line-height: 1.2;9361  letter-spacing: 0.005em;9362  color: var(--peach-t0);9363  margin-bottom: 6px;9364}9365.peach-chirp-copy-listening .peach-chirp-headline,9366.peach-chirp-copy-chirping .peach-chirp-headline,9367.peach-chirp-copy-idle .peach-chirp-headline {9368  font-family: inherit;9369  font-style: normal;9370  font-weight: 500;9371  font-size: 15px;9372  color: var(--peach-t0);9373  letter-spacing: 0;9374}9375.peach-chirp-copy-paired .peach-chirp-headline {9376  color: var(--peach-t0);9377  font-weight: 600;9378}9379.peach-chirp-sub {9380  font-size: 12.5px;9381  line-height: 1.45;9382  color: var(--peach-t1);9383  max-width: 280px;9384  margin: 0 auto;9385  text-wrap: pretty;9386}93879388/* Status action -------------------------------------------------------- */9389.peach-chirp-action {9390  margin: 2px 4px 10px;9391  margin-top: auto;9392  display: flex;9393  flex-direction: column;9394  gap: 8px;9395}9396.peach-chirp-mic-notice {9397  margin: 0;9398  font-size: 0.625rem;9399  color: var(--peach-t2);9400  line-height: 1.4;9401}9402.peach-chirp-action-waiting {9403  display: flex;9404  align-items: center;9405  justify-content: space-between;9406  gap: 12px;9407}9408.peach-chirp-cancel {9409  min-width: 96px;9410}9411.peach-chirp-listening {9412  display: inline-flex; align-items: center; gap: 4px;9413  font-family: var(--peach-mono, ui-monospace, monospace);9414  font-size: 9.5px;9415  text-transform: uppercase;9416  letter-spacing: 0.12em;9417  color: var(--peach-t1);9418  padding: 8px 10px;9419}9420.peach-chirp-listen-dot {9421  width: 4px; height: 4px;9422  border-radius: 50%;9423  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9424  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9425}9426.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9427.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9428.peach-chirp-listen-label { margin-left: 6px; }9429@keyframes peach-chirp-listen-pulse {9430  0%, 100% { opacity: 0.25; transform: scale(0.9); }9431  50%      { opacity: 1;     transform: scale(1.15); }9432}94339434.peach-chirp-action-handshake {9435  display: flex;9436  flex-direction: column;9437  align-items: center;9438  gap: 8px;9439  padding: 8px 4px;9440}9441.peach-chirp-meter {9442  width: 100%;9443  max-width: 280px;9444  height: 2px;9445  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9446  border-radius: 2px;9447  position: relative;9448  overflow: hidden;9449}9450.peach-chirp-meter-bar {9451  position: absolute;9452  top: 0; bottom: 0;9453  width: 30%;9454  left: -30%;9455  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9456  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9457}9458@keyframes peach-chirp-meter-sweep {9459  0%   { left: -30%; }9460  100% { left: 100%; }9461}9462.peach-chirp-meter-label {9463  font-family: var(--peach-mono, ui-monospace, monospace);9464  font-size: 9.5px;9465  text-transform: uppercase;9466  letter-spacing: 0.14em;9467  color: var(--peach-t1);9468}94699470.peach-chirp-action-paired {9471  display: flex;9472  align-items: center;9473  gap: 10px;9474}9475.peach-chirp-device-confirm {9476  flex: 1;9477  display: inline-flex;9478  align-items: center;9479  gap: 8px;9480  padding: 9px 10px 9px 12px;9481  border-radius: 10px;9482  background: color-mix(in srgb, #76b6e8 12%, transparent);9483  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9484  font-size: 12.5px;9485  color: var(--peach-t0);9486  min-width: 0;9487}9488.peach-chirp-device-confirm-glyph {9489  display: inline-flex;9490  color: #76b6e8;9491}9492.peach-chirp-device-confirm-name {9493  flex: 1;9494  overflow: hidden;9495  text-overflow: ellipsis;9496  white-space: nowrap;9497}9498.peach-chirp-device-confirm-trust {9499  font-family: var(--peach-mono, ui-monospace, monospace);9500  font-size: 9.5px;9501  text-transform: uppercase;9502  letter-spacing: 0.1em;9503  color: #76b6e8;9504  padding: 2px 6px;9505  border-radius: 4px;9506  background: color-mix(in srgb, #76b6e8 14%, transparent);9507}9508.peach-chirp-done {9509  min-width: 80px;9510}9511.peach-chirp-retry {9512  align-self: center;9513  display: block;9514  margin: 6px auto 0;9515  min-width: 120px;9516}9517.peach-chirp-mic-help {9518  font-size: 12px;9519  color: var(--peach-t1);9520  text-align: center;9521  max-width: 320px;9522  margin: 0 auto;9523}95249525/* Rest state — bird stage at idle pose, primary CTA + paired list */9526.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9527  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9528  height: 160px;9529}9530.peach-chirp-pair-start {9531  width: 100%;9532  display: inline-flex;9533  align-items: center;9534  justify-content: center;9535  gap: 8px;9536  padding: 11px 14px;9537  border-radius: 10px;9538  background: var(--peach-accent);9539  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9540  color: #1a0905;9541  font-family: inherit;9542  font-size: 13px;9543  font-weight: 600;9544  letter-spacing: 0.01em;9545  cursor: pointer;9546  transition: filter 0.15s ease, transform 0.1s ease;9547}9548.peach-chirp-pair-start:hover { filter: brightness(1.08); }9549.peach-chirp-pair-start:active { transform: translateY(1px); }95509551.peach-chirp-paired-section {9552  margin-top: 14px;9553  display: flex;9554  flex-direction: column;9555  gap: 8px;9556}9557.peach-chirp-paired-heading {9558  margin: 0;9559  font-family: var(--peach-mono, ui-monospace, monospace);9560  font-size: 10px;9561  font-weight: 500;9562  letter-spacing: 0.14em;9563  text-transform: uppercase;9564  color: var(--peach-t1);9565}95669567/* Footer --------------------------------------------------------------- */9568.peach-chirp-foot {9569  margin: 10px -4px -2px;9570  margin-top: auto;9571}9572.peach-chirp-foot-divider {9573  height: 1px;9574  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9575  margin-bottom: 10px;9576}9577.peach-chirp-foot-text {9578  font-size: 11px;9579  line-height: 1.5;9580  color: var(--peach-t1);9581  text-align: center;9582  padding: 0 4px;9583  text-wrap: pretty;9584}95859586/* Screen-reader-only live region. Kept off the visual flow but read by9587   assistive tech as the pairing phase advances. */9588.peach-sr-only {9589  position: absolute;9590  width: 1px; height: 1px;9591  padding: 0; margin: -1px;9592  overflow: hidden;9593  clip: rect(0, 0, 0, 0);9594  white-space: nowrap;9595  border: 0;9596}95979598/* Reduced motion — stage simplifies to opacity transitions only */9599@media (prefers-reduced-motion: reduce) {9600  .peach-chirp-bird-body,9601  .peach-chirp-bird-head-group,9602  .peach-chirp-bird-beak,9603  .peach-chirp-bird-wing,9604  .peach-chirp-bird-tuft,9605  .peach-chirp-bird-tail,9606  .peach-chirp-bird-eye-group,9607  .peach-chirp-bird-aura,9608  .peach-chirp-arc,9609  .peach-chirp-flight-path,9610  .peach-chirp-flight-path-2,9611  .peach-chirp-dot-glow,9612  .peach-chirp-dot-core,9613  .peach-chirp-dot-ring,9614  .peach-chirp-mote,9615  .peach-chirp-meter-bar,9616  .peach-chirp-listen-dot,9617  .peach-chirp-bird-slot,9618  .peach-chirp-bird-slot-mobile {9619    animation: none !important;9620    transition: opacity 0.2s linear !important;9621  }9622}96239624/* ─────────────────────────────────────────────────────────────────9625   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9626   animation used by the pairing flow with a paired-devices list and9627   the "Pair a device" CTA.9628   ───────────────────────────────────────────────────────────────── */9629.peach-chirp-settings {9630  position: absolute;9631  inset: 0;9632  z-index: 3;9633  display: flex;9634  flex-direction: column;9635  gap: 18px;9636  padding: 14px 12px 12px;9637  width: 100%;9638  box-sizing: border-box;9639  overflow-y: auto;9640  overflow-x: hidden;9641  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9642  background:9643    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9644    var(--peach-bg);9645  color: var(--peach-t0);9646  isolation: isolate;9647  /* Hide native scrollbar — content fits 99% of the time and a chunky9648     gutter ruins the surface. */9649  scrollbar-width: none;9650  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9651}9652.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9653.peach-chirp-settings::before {9654  content: '';9655  position: absolute;9656  inset: 0;9657  pointer-events: none;9658  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9659  z-index: 0;9660}9661.peach-chirp-settings > * { position: relative; z-index: 1; }96629663.peach-chirp-settings--pairing {9664  padding: 0;9665  align-items: stretch;9666  justify-content: stretch;9667  background: none;9668  isolation: auto;9669}9670.peach-chirp-settings--pairing::before { display: none; }96719672.peach-chirp-settings-header {9673  display: flex;9674  align-items: center;9675  gap: 10px;9676}9677.peach-chirp-settings-title {9678  margin: 0;9679  font-family: var(--font-display, Georgia, serif);9680  font-style: italic;9681  font-size: 24px;9682  font-weight: 500;9683  line-height: 1;9684  color: var(--peach-t0);9685  letter-spacing: 0.005em;9686}9687.peach-chirp-settings-section {9688  margin: 6px 0 -4px;9689  font-size: 11px;9690  font-weight: 600;9691  letter-spacing: 0.08em;9692  text-transform: uppercase;9693  color: var(--peach-text-muted);9694}9695.peach-chirp-settings-error {9696  font-size: 12px;9697  padding: 8px 10px;9698  border-radius: 8px;9699  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9700  color: var(--peach-text);9701}9702.peach-chirp-settings-footer {9703  margin-top: auto;9704  padding-top: 18px;9705  font-size: 11.5px;9706  line-height: 1.5;9707  color: var(--peach-text-muted);9708  text-align: center;9709}97109711/* Hero card shown when no devices are paired yet. */9712.peach-chirp-hero {9713  display: flex;9714  flex-direction: column;9715  align-items: center;9716  gap: 12px;9717  padding: 20px 12px 8px;9718  text-align: center;9719}9720.peach-chirp-hero-svg {9721  display: block;9722  max-width: 100%;9723  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9724}9725.peach-chirp-hero-headline {9726  margin: 0;9727  font-family: var(--font-display, Georgia, serif);9728  font-style: italic;9729  font-size: 20px;9730  font-weight: 500;9731  line-height: 1.2;9732  letter-spacing: 0.005em;9733  color: var(--peach-t0);9734}9735.peach-chirp-hero-sub {9736  margin: 0;9737  font-size: 13px;9738  line-height: 1.5;9739  color: var(--peach-t1);9740  max-width: 320px;9741  text-wrap: pretty;9742}97439744.peach-chirp-pair-cta {9745  display: flex;9746  justify-content: center;9747  padding: 4px 0 6px;9748}9749.peach-chirp-pair-button {9750  display: inline-flex;9751  align-items: center;9752  gap: 8px;9753  min-width: 220px;9754  justify-content: center;9755}9756.peach-chirp-pair-button-icon {9757  flex: 0 0 auto;9758}97599760/* Paired devices list. Roomy rows that look at home next to the rest9761   of Settings; stale rows get a soft warm-warning border tint. */9762.peach-chirp-device-list {9763  list-style: none;9764  margin: 0;9765  padding: 0;9766  display: flex;9767  flex-direction: column;9768  gap: 8px;9769}9770.peach-chirp-device-row {9771  display: flex;9772  align-items: center;9773  gap: 12px;9774  padding: 12px;9775  border-radius: 10px;9776  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9777  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);9778}9779.peach-chirp-device-row[data-stale="true"] {9780  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);9781}9782.peach-chirp-device-icon {9783  width: 32px;9784  height: 32px;9785  display: flex;9786  align-items: center;9787  justify-content: center;9788  border-radius: 8px;9789  color: var(--peach-text);9790  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);9791}9792.peach-chirp-device-info {9793  flex: 1;9794  display: flex;9795  flex-direction: column;9796  gap: 2px;9797  min-width: 0;9798}9799.peach-chirp-device-name {9800  font-size: 14px;9801  font-weight: 600;9802  color: var(--peach-text);9803  overflow: hidden;9804  text-overflow: ellipsis;9805  white-space: nowrap;9806}9807.peach-chirp-device-meta {9808  font-size: 11.5px;9809  color: var(--peach-text-muted);9810  display: flex;9811  flex-wrap: wrap;9812  align-items: center;9813  gap: 8px;9814}9815.peach-chirp-device-badge {9816  font-size: 10.5px;9817  font-weight: 500;9818  letter-spacing: 0.02em;9819  padding: 2px 6px;9820  border-radius: 999px;9821  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);9822  color: var(--peach-text);9823}9824.peach-chirp-device-stale {9825  font-size: 10.5px;9826  font-weight: 500;9827  color: var(--peach-warn, #d29257);9828}9829.peach-chirp-device-remove {9830  flex: 0 0 auto;9831  color: var(--peach-text-muted);9832}9833.peach-chirp-device-remove:hover {9834  color: var(--peach-danger, #c25b4a);9835}9836.peach-chirp-unpair-confirm {9837  display: flex;9838  gap: 6px;9839  align-items: center;9840}98419842/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */9843.peach-chirp-pro-card {9844  position: relative;9845  margin: 18px 12px;9846  padding: 18px 20px 22px;9847  border-radius: 22px;9848  background:9849    radial-gradient(140% 90% at 50% 0%,9850      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,9851      transparent 60%),9852    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9853  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);9854  box-shadow:9855    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,9856    0 18px 40px -24px rgba(0, 0, 0, 0.45);9857  display: flex;9858  flex-direction: column;9859  align-items: center;9860  gap: 10px;9861  text-align: center;9862  overflow: hidden;9863}9864.peach-chirp-pro-stage {9865  position: relative;9866  width: 220px;9867  height: 140px;9868  display: flex;9869  align-items: flex-end;9870  justify-content: center;9871  margin-bottom: 2px;9872}9873.peach-chirp-pro-bird-slot {9874  width: 140px;9875  height: 132px;9876  display: flex;9877  align-items: flex-end;9878  justify-content: center;9879  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));9880}9881.peach-chirp-pro-bird-slot .peach-chirp-bird {9882  width: 100%;9883  height: 100%;9884}9885.peach-chirp-pro-bird-slot .peach-chirp-bird svg {9886  width: 100%;9887  height: 100%;9888  overflow: visible;9889}9890.peach-chirp-pro-chirp {9891  position: absolute;9892  top: 14px;9893  right: 8px;9894  width: 96px;9895  height: 80px;9896  color: var(--peach-accent);9897  animation: peach-chirp-pulse 2.6s ease-in-out infinite;9898  transform-origin: 0% 50%;9899  pointer-events: none;9900}9901@keyframes peach-chirp-pulse {9902  0%, 100% { opacity: 0.35; transform: translateX(0) scale(0.92); }9903  45%      { opacity: 1;    transform: translateX(2px) scale(1); }9904  70%      { opacity: 0.6;  transform: translateX(4px) scale(1.04); }9905}9906@media (prefers-reduced-motion: reduce) {9907  .peach-chirp-pro-chirp { animation: none; opacity: 0.7; }9908}9909.peach-chirp-pro-headline {9910  margin: 4px 0 0;9911  font-family: var(--font-display, "Cormorant Garamond", serif);9912  font-style: italic;9913  font-size: 19px;9914  font-weight: 500;9915  letter-spacing: 0.01em;9916  color: var(--peach-t0);9917  max-width: 280px;9918  line-height: 1.25;9919}9920.peach-chirp-pro-body {9921  margin: 0;9922  font-size: 13px;9923  line-height: 1.55;9924  color: var(--peach-t1);9925  max-width: 300px;9926}9927.peach-chirp-pro-cta {9928  margin-top: 4px;9929}9930.peach-chirp-pro-foot {9931  margin: 2px 0 0;9932  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;9933  font-size: 0.625rem;9934  letter-spacing: 0.08em;9935  text-transform: uppercase;9936  color: var(--peach-t2);9937  opacity: 0.75;9938}