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}1035@keyframes overlay-in {1036  from { opacity: 0; transform: translateY(8px); }1037  to   { opacity: 1; transform: translateY(0); }1038}1039.peach-overlay-view.ov-enter-up {1040  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1041}1042.peach-overlay-view.ov-exit-up {1043  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1044}1045.peach-overlay-view.ov-enter-right {1046  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1047}1048.peach-overlay-view.ov-exit-right {1049  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1050}10511052@keyframes ov-enter-up {1053  from { opacity: 0; transform: translateY(18px); }1054  to   { opacity: 1; transform: translateY(0); }1055}1056@keyframes ov-exit-up {1057  from { opacity: 1; transform: translateY(0); }1058  to   { opacity: 0; transform: translateY(-12px); }1059}1060@keyframes ov-enter-right {1061  from { opacity: 0; transform: translateX(20px); }1062  to   { opacity: 1; transform: translateX(0); }1063}1064@keyframes ov-exit-right {1065  from { opacity: 1; transform: translateX(0); }1066  to   { opacity: 0; transform: translateX(20px); }1067}10681069/* Overlay shared header */1070.peach-overlay-header {1071  padding: 10px 12px 8px;1072  display: flex;1073  align-items: center;1074  gap: 10px;1075  flex-shrink: 0;1076}1077/* Back button — circular pill matching the settings stack masthead (.stk-back) */1078.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1079  width: 28px;1080  height: 28px;1081  flex: 0 0 28px;1082  border-radius: 999px;1083  border: 1px solid var(--peach-border);1084  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1085  color: var(--peach-t1);1086  padding: 0;1087}1088.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1089  color: var(--peach-t0);1090  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1091  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1092}1093.peach-overlay-title {1094  font-family: var(--font-display);1095  font-style: italic;1096  font-weight: 400;1097  font-size: 20px;1098  line-height: 1;1099  color: var(--peach-t0);1100  flex: 1;1101  text-align: center;1102}1103/* Balances the 28px back button so the title stays visually centred */1104.peach-overlay-spacer {1105  width: 28px;1106  flex: 0 0 28px;1107}11081109.peach-overlay-card {1110  background: var(--peach-s1);1111  border: 1px solid var(--peach-t3);1112  border-radius: 12px;1113  overflow: hidden;1114  width: 100%;1115}11161117.peach-onboarding-alt-actions {1118  display: flex;1119  flex-direction: column;1120  gap: 4px;1121  padding: 0;1122}11231124.peach-settings-copy {1125  margin: 0 0 10px;1126  font-size: 0.6875rem;1127  line-height: 1.5;1128  color: var(--peach-t2);1129}11301131.peach-settings-copy strong {1132  color: var(--peach-t0);1133}11341135.peach-settings-copy--spacious {1136  margin-bottom: 12px;1137}11381139.peach-settings-copy--result {1140  color: var(--peach-accent);1141  font-size: 0.8125rem;1142  text-align: center;1143  padding: 8px 0;1144}11451146.peach-settings-copy--danger {1147  color: var(--peach-breach);1148}11491150.peach-settings-copy--success {1151  color: var(--peach-accent);1152}11531154.peach-inline-feedback {1155  font-size: 0.6875rem;1156  margin: 10px 0 0;1157}11581159.peach-inline-feedback--ok {1160  color: var(--peach-accent);1161}11621163.peach-inline-feedback--error {1164  color: var(--peach-breach);1165}11661167.peach-inline-feedback--muted {1168  color: var(--peach-t2);1169  font-size: 0.625rem;1170  margin: 4px 0;1171}11721173.peach-inline-feedback--spaced {1174  margin-top: 12px;1175}11761177.peach-settings-actions--row {1178  display: flex;1179  gap: 6px;1180}11811182.peach-settings-actions--end {1183  margin-top: 14px;1184  justify-content: flex-end;1185}11861187.peach-settings-stack {1188  display: flex;1189  flex-direction: column;1190  gap: 6px;1191}11921193.peach-settings-stack--tight {1194  gap: 4px;1195}11961197.peach-settings-stack--spacious {1198  gap: 8px;1199}12001201.peach-settings-input {1202  width: 100%;1203  box-sizing: border-box;1204  padding: 8px 10px;1205  background: rgba(0, 0, 0, 0.22);1206  border: 1px solid transparent;1207  border-radius: 6px;1208  color: var(--peach-t0);1209  font-family: var(--font-ui);1210  font-size: 0.75rem;1211  outline: none;1212  transition: border-color 120ms ease, background 120ms ease;1213}12141215.peach-settings-input:focus {1216  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1217  background: rgba(0, 0, 0, 0.28);1218}12191220.peach-settings-input[type="password"] {1221  font-family: var(--font-mono);1222  letter-spacing: 0.04em;1223}12241225.peach-hidden-file-input {1226  display: none;1227}12281229.peach-checkbox-note {1230  display: flex;1231  align-items: flex-start;1232  gap: 8px;1233  font-size: 0.6875rem;1234  color: var(--peach-t1);1235  cursor: pointer;1236  margin: 12px 0;1237}12381239.peach-checkbox-note input {1240  margin-top: 1px;1241}12421243.peach-danger-notice {1244  background: rgba(220, 80, 60, 0.08);1245  border: 1px solid rgba(220, 80, 60, 0.2);1246  border-radius: 6px;1247  padding: 9px 11px;1248  font-size: 0.6875rem;1249  color: var(--peach-t1);1250  line-height: 1.5;1251}12521253.peach-info-notice {1254  font-size: 0.6875rem;1255  color: var(--peach-t1);1256  line-height: 1.5;1257  background: var(--surface-card);1258  border: 1px solid var(--peach-t3);1259  border-radius: 6px;1260  padding: 8px 10px;1261}12621263.peach-info-notice--warn {1264  border-color: rgba(220, 38, 38, 0.4);1265  background: rgba(220, 38, 38, 0.06);1266  color: rgba(220, 38, 38, 0.92);1267  margin-bottom: 8px;1268}12691270.peach-strength-row {1271  display: flex;1272  align-items: center;1273  gap: 8px;1274  margin-bottom: 10px;1275}12761277.peach-strength-track {1278  flex: 1;1279  height: 4px;1280  background: var(--peach-s2);1281  border-radius: 2px;1282  overflow: hidden;1283}12841285.peach-strength-fill {1286  height: 100%;1287  border-radius: 2px;1288  transition: width 120ms ease, background 120ms ease;1289}12901291/* ── Type selector tabs ── */1292.peach-type-tabs {1293  display: flex;1294  gap: 0;1295  background: var(--peach-t4);1296  border-radius: 8px;1297  padding: 3px;1298}12991300.peach-type-tab {1301  flex: 1;1302  display: flex;1303  align-items: center;1304  justify-content: center;1305  gap: 6px;1306  padding: 6px 10px;1307  border-radius: 6px;1308  border: none;1309  background: transparent;1310  cursor: pointer;1311  font-family: Inter, system-ui, sans-serif;1312  font-size: 0.6875rem;1313  font-weight: 400;1314  letter-spacing: 0.04em;1315  color: var(--peach-t1);1316  transition: background 150ms ease, color 150ms ease;1317}13181319.peach-type-tab.is-active {1320  background: var(--peach-s2);1321  color: var(--peach-t0);1322  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1323}13241325.peach-type-tab:not(.is-active):hover {1326  color: var(--peach-t0);1327}13281329.peach-type-tab svg {1330  opacity: 0.7;1331  flex-shrink: 0;1332}13331334.peach-type-tab.is-active svg {1335  opacity: 1;1336}13371338/* ── List view ───────────────────────────────────────────────────────── */1339.peach-list-top {1340  padding: 0 10px;1341  min-height: 46px;1342  display: flex;1343  align-items: center;1344  gap: 6px;1345  border-bottom: 1px solid var(--peach-t3);1346  flex-shrink: 0;1347  background: var(--peach-s1);1348}13491350.peach-vault-list {1351  flex: 1;1352  overflow-y: auto;1353  scrollbar-width: none;1354}1355.peach-vault-list::-webkit-scrollbar { display: none; }13561357/* Scrollbar — vault list */1358.peach-vault-list {1359  scrollbar-width: thin;1360  scrollbar-color: var(--peach-t3) transparent;1361}13621363.peach-vault-list::-webkit-scrollbar {1364  width: 3px;1365}13661367.peach-vault-list::-webkit-scrollbar-thumb {1368  background: var(--peach-t3);1369  border-radius: 2px;1370}13711372.peach-entry-row {1373  width: 100%;1374  display: flex;1375  align-items: center;1376  gap: 10px;1377  padding: 9px 16px;1378  background: transparent;1379  border: none;1380  border-bottom: 1px solid var(--peach-t3);1381  cursor: pointer;1382  color: inherit;1383  text-align: left;1384  transition: background 80ms ease;1385}1386.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1387.peach-entry-row:last-child { border-bottom: none; }1388.peach-entry-row.is-active {1389  box-shadow: inset 2px 0 0 var(--peach-accent);1390  background: rgba(240,232,216,0.03);1391}1392.peach-entry-row:focus-visible {1393  outline: none;1394  box-shadow: 0 0 0 1px var(--peach-border-accent);1395  background: rgba(240,232,216,0.03);1396}1397.peach-entry-row-icon {1398  width: 26px; height: 26px;1399  border-radius: 7px;1400  border: 1px solid var(--peach-t3);1401  display: flex; align-items: center; justify-content: center;1402  color: var(--peach-t2);1403  flex-shrink: 0;1404}1405.peach-entry-row-icon.is-breach {1406  border-color: rgba(220,80,60,0.3);1407  color: rgba(220,80,60,0.7);1408}14091410/* Title-initials chip used as the favicon fallback for login entries whose1411 * real favicon hasn't been cached by the browser yet (freshly-imported,1412 * never-visited domains). Background colour is hashed from the title so1413 * the same entry always shows the same chip. The chip fits the same1414 * 26×26 row icon slot the favicon would take. */1415.peach-favicon-initials {1416  display: inline-flex;1417  align-items: center;1418  justify-content: center;1419  width: 100%;1420  height: 100%;1421  border-radius: 4px;1422  font-family: "IBM Plex Mono", monospace;1423  font-size: 0.5625rem;1424  font-weight: 600;1425  letter-spacing: 0.04em;1426  color: rgba(240, 232, 216, 0.92);1427  text-transform: uppercase;1428  user-select: none;1429}1430.peach-entry-row-info { flex: 1; min-width: 0; }1431.peach-entry-row-name {1432  display: block;1433  font-family: var(--font-display);1434  font-size: 1.0625rem;1435  font-style: italic;1436  font-weight: 400;1437  color: var(--peach-t0);1438  line-height: 1.2;1439  white-space: nowrap;1440  overflow: hidden;1441  text-overflow: ellipsis;1442}1443.peach-entry-row-meta {1444  display: block;1445  font-family: "IBM Plex Mono", monospace;1446  font-size: 0.5625rem;1447  color: var(--peach-t2);1448  margin-top: 1px;1449  letter-spacing: 0.05em;1450}1451.peach-entry-row-dot {1452  width: 5px; height: 5px;1453  border-radius: 50%;1454  background: rgba(220,80,60,0.7);1455  flex-shrink: 0;1456}1457.peach-new-entry-row {1458  display: flex;1459  align-items: center;1460  justify-content: center;1461  gap: 6px;1462  width: 100%;1463  padding: 11px;1464  background: transparent;1465  border: none;1466  border-top: 1px solid var(--peach-t3);1467  color: var(--peach-t2);1468  font-family: "IBM Plex Mono", monospace;1469  font-size: 0.5625rem;1470  text-transform: uppercase;1471  letter-spacing: 0.14em;1472  cursor: pointer;1473  flex-shrink: 0;1474  transition: color 120ms ease, background 120ms ease;1475}1476.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }14771478/* ── Multi-select mode ─────────────────────────────────────────────── */14791480/* Select-mode trigger button in sort bar — same shape as trash btn */1481.peach-sort-select-btn {1482  display: flex;1483  align-items: center;1484  justify-content: center;1485  padding: 3px 5px;1486  background: transparent;1487  border: none;1488  cursor: pointer;1489  color: var(--peach-t2);1490  border-radius: 4px;1491  transition: color 140ms ease, background 140ms ease;1492}1493.peach-sort-select-btn:hover {1494  color: var(--peach-t1);1495  background: var(--peach-t3);1496}14971498/* Sort bar in select mode */1499.peach-select-cancel-btn {1500  background: transparent;1501  border: none;1502  padding: 0 4px;1503  cursor: pointer;1504  font-family: "IBM Plex Mono", monospace;1505  font-size: 0.5625rem;1506  letter-spacing: 0.12em;1507  text-transform: uppercase;1508  color: var(--peach-t2);1509  transition: color 140ms ease;1510  flex-shrink: 0;1511}1512.peach-select-cancel-btn:hover { color: var(--peach-t0); }15131514.peach-select-count-label {1515  flex: 1;1516  text-align: center;1517  font-family: "IBM Plex Mono", monospace;1518  font-size: 0.5625rem;1519  letter-spacing: 0.14em;1520  text-transform: uppercase;1521  color: var(--peach-t1);1522}15231524.peach-select-all-btn {1525  background: transparent;1526  border: none;1527  padding: 0 4px;1528  cursor: pointer;1529  font-family: "IBM Plex Mono", monospace;1530  font-size: 0.5625rem;1531  letter-spacing: 0.12em;1532  text-transform: uppercase;1533  color: var(--peach-t2);1534  transition: color 140ms ease;1535  flex-shrink: 0;1536}1537.peach-select-all-btn:hover { color: var(--peach-accent); }15381539/* List in select mode */1540.peach-vault-list.is-selecting .peach-entry-row {1541  cursor: default;1542}1543.peach-vault-list.is-selecting .peach-entry-row:hover {1544  background: rgba(240,232,216,0.02);1545}1546.peach-vault-list.is-selecting .peach-entry-row.is-selected {1547  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1548}1549.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1550  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1551}15521553/* Select indicator circles in icon slot */1554.peach-entry-row-icon.is-select-icon {1555  color: var(--peach-t2);1556}1557.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1558  color: var(--peach-accent);1559}15601561/* Delete action bar at bottom (replaces new-entry row) */1562.peach-select-action-bar {1563  display: flex;1564  align-items: center;1565  justify-content: center;1566  gap: 7px;1567  width: 100%;1568  padding: 11px;1569  background: transparent;1570  border: none;1571  border-top: 1px solid var(--peach-t3);1572  color: var(--peach-t1);1573  font-family: "IBM Plex Mono", monospace;1574  font-size: 0.5625rem;1575  text-transform: uppercase;1576  letter-spacing: 0.14em;1577  cursor: pointer;1578  flex-shrink: 0;1579  transition: color 120ms ease, background 120ms ease;1580}1581.peach-select-action-bar:not(:disabled):hover {1582  color: var(--peach-t0);1583  background: rgba(220,80,60,0.06);1584}1585.peach-select-action-bar:not(:disabled):hover svg {1586  stroke: rgba(220,80,60,0.8);1587}1588.peach-select-action-bar:disabled,1589.peach-select-action-bar.is-empty {1590  color: var(--peach-t2);1591  cursor: default;1592  opacity: 0.5;1593}1594.peach-search-counter-list {1595  white-space: nowrap;1596  flex-shrink: 0;1597}1598.peach-list-empty {1599  min-height: 180px;1600  display: grid;1601  place-items: center;1602  color: var(--peach-t2);1603  font-family: "IBM Plex Mono", monospace;1604  font-size: 0.6875rem;1605}16061607/* ── Settings view ───────────────────────────────────────────────────── */1608.peach-settings-body {1609  flex: 1;1610  overflow-y: auto;1611  min-height: 0;1612  display: flex;1613  flex-direction: column;1614  padding: 2px 0 10px;1615}1616.peach-settings-group {1617  margin: 4px 10px;1618  padding: 9px 14px 11px;1619  border-radius: 12px;1620  border: 1px solid rgba(255, 255, 255, 0.07);1621  background: rgba(26, 20, 16, 0.60);1622  backdrop-filter: blur(10px) saturate(1.3);1623  -webkit-backdrop-filter: blur(10px) saturate(1.3);1624}16251626.peach-settings-group + .peach-settings-group {1627  margin-top: 6px;1628}16291630@supports not (backdrop-filter: blur(1px)) {1631  .peach-settings-group {1632    background: rgba(26, 20, 16, 0.90);1633    border-color: rgba(255, 255, 255, 0.09);1634    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1635  }1636}16371638.light .peach-settings-group,1639[data-theme="light"] .peach-settings-group {1640  background: rgba(245, 237, 226, 0.70);1641  border-color: rgba(26, 18, 8, 0.08);1642  backdrop-filter: blur(10px) saturate(1.2);1643  -webkit-backdrop-filter: blur(10px) saturate(1.2);1644}16451646@supports not (backdrop-filter: blur(1px)) {1647  .light .peach-settings-group,1648  [data-theme="light"] .peach-settings-group {1649    background: rgba(245, 237, 226, 0.97);1650    border-color: rgba(26, 18, 8, 0.10);1651  }1652}1653.peach-export-intro {1654  padding-bottom: 8px;1655}1656.peach-export-card {1657  display: grid;1658  gap: 10px;1659}1660.peach-rune-canvas {1661  border-radius: 8px;1662  background: rgba(0, 0, 0, 0.22);1663  flex: 1;1664  align-self: center;1665}1666.peach-script-input {1667  font-family: "PeachScript", monospace;1668  font-size: 0.6875rem;1669  line-height: 1.9;1670  letter-spacing: 0.06em;1671  color: var(--peach-t0);1672  background: rgba(0, 0, 0, 0.22);1673  border: none;1674  border-radius: 6px;1675  padding: 12px;1676  width: 100%;1677  min-height: 96px;1678  resize: vertical;1679  word-break: break-all;1680  scrollbar-width: none;1681  -ms-overflow-style: none;1682}16831684.peach-script-input::-webkit-scrollbar { display: none; }1685.peach-csv-warning {1686  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1687  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1688  color: var(--peach-t0);1689  border-radius: 6px;1690  padding: 10px 12px;1691  margin-bottom: 8px;1692  font-size: 0.75rem;1693  line-height: 1.45;1694}1695.peach-export-card--primary {1696  background:1697    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1698}16991700/* Export menu — distribute the three format cards across the popup. */1701.peach-export-menu {1702  display: flex;1703  flex-direction: column;1704  flex: 1;1705  min-height: 0;1706}1707.peach-export-menu .peach-settings-group {1708  flex: 1;1709  display: flex;1710  flex-direction: column;1711  justify-content: center;1712  gap: 10px;1713}17141715/* Result view — the script-string fills the remaining vertical surface. */1716.peach-export-result-group {1717  flex: 1;1718  display: flex;1719  flex-direction: column;1720  min-height: 0;1721  border-bottom: none;1722}1723.peach-export-result-group .peach-export-card {1724  flex: 1;1725  min-height: 0;1726  display: flex;1727  flex-direction: column;1728  gap: 10px;1729}1730.peach-export-result-group .peach-export-card-copy {1731  flex-shrink: 0;1732}1733.peach-export-result-group .peach-settings-label {1734  flex-shrink: 0;1735}1736.peach-export-result-group button {1737  flex-shrink: 0;1738}1739.peach-export-card-head {1740  display: flex;1741  align-items: center;1742  justify-content: space-between;1743  gap: 10px;1744}1745.peach-export-card-copy {1746  margin: 0;1747  font-size: 0.75rem;1748  line-height: 1.55;1749  color: var(--peach-t1);1750}1751.peach-export-note {1752  margin: 0;1753  font-size: 0.625rem;1754  line-height: 1.5;1755  color: var(--peach-t2);1756}1757.peach-export-strength-track {1758  height: 3px;1759  background: var(--peach-border);1760  border-radius: 2px;1761  margin: 4px 0 2px;1762  overflow: hidden;1763}1764.peach-export-strength-fill {1765  height: 100%;1766  border-radius: 2px;1767  transition: width 250ms ease, background 250ms ease;1768}1769.peach-export-strength-warn {1770  margin: 0;1771  font-size: 0.625rem;1772  line-height: 1.5;1773  color: #e84040;1774  font-family: "IBM Plex Mono", monospace;1775}1776.peach-export-strength-hint {1777  margin: 0;1778  font-size: 0.625rem;1779  line-height: 1.5;1780  color: var(--peach-t2);1781  font-family: "IBM Plex Mono", monospace;1782}1783.peach-export-pill {1784  display: inline-flex;1785  align-items: center;1786  padding: 4px 8px;1787  border-radius: 999px;1788  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1789  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1790  color: var(--peach-accent);1791  font-family: "IBM Plex Mono", monospace;1792  font-size: 0.5rem;1793  letter-spacing: 0.12em;1794  text-transform: uppercase;1795  white-space: nowrap;1796}1797.peach-export-pill--danger {1798  border-color: rgba(220,80,60,0.22);1799  background: rgba(220,80,60,0.08);1800  color: var(--peach-breach);1801}1802.peach-settings-label {1803  margin: 0 0 6px;1804  font-family: "IBM Plex Mono", monospace;1805  font-size: 0.5rem;1806  text-transform: uppercase;1807  letter-spacing: 0.18em;1808  color: var(--peach-t2);1809}1810.peach-settings-row {1811  display: flex;1812  align-items: center;1813  justify-content: space-between;1814  gap: 12px;1815  min-height: 34px;1816  padding: 6px 0;1817  font-size: 0.8125rem;1818  color: var(--peach-t1);1819}1820.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1821.peach-settings-value {1822  font-family: "IBM Plex Mono", monospace;1823  font-size: 0.625rem;1824  color: var(--peach-t2);1825}18261827.peach-settings-value--status {1828  display: flex;1829  align-items: center;1830  gap: 6px;1831}18321833.peach-settings-link {1834  font-family: "IBM Plex Mono", monospace;1835  font-size: 0.625rem;1836  color: var(--peach-accent);1837  text-decoration: none;1838  cursor: pointer;1839}1840.peach-settings-link:hover {1841  text-decoration: underline;1842}18431844.peach-settings-row--stack {1845  flex-direction: column;1846  align-items: stretch;1847  gap: 6px;1848}18491850.peach-settings-row--top {1851  align-items: flex-start;1852}18531854.peach-settings-row-main {1855  display: flex;1856  flex-direction: column;1857  gap: 4px;1858  flex: 1;1859}1860.peach-toggle {1861  width: 28px; height: 16px;1862  border-radius: 999px;1863  background: var(--peach-t3);1864  border: 1px solid var(--peach-t3);1865  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1866  flex-shrink: 0;1867  transition: background 200ms ease, border-color 200ms ease;1868  cursor: pointer;1869}1870.peach-toggle.is-on {1871  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1872  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1873}1874.peach-toggle-knob {1875  width: 10px; height: 10px;1876  border-radius: 50%;1877  background: var(--peach-t2);1878  flex-shrink: 0;1879  transform: translateX(0px);1880  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1881}1882.peach-toggle.is-on .peach-toggle-knob {1883  background: var(--peach-accent);1884  transform: translateX(12px);1885}1886.peach-settings-footer {1887  display: flex;1888  align-items: center;1889  gap: 8px;1890  margin-top: auto;1891  padding: 14px 16px 8px;1892  font-family: "IBM Plex Mono", monospace;1893  font-size: 0.5625rem;1894  color: var(--peach-t2);1895}18961897/* ── Settings home navigation ──────────────────────────────────────────── */1898.peach-settings-nav-label {1899  margin: 0 0 2px;1900  padding: 12px 16px 4px;1901  font-family: "IBM Plex Mono", monospace;1902  font-size: 0.5rem;1903  text-transform: uppercase;1904  letter-spacing: 0.18em;1905  color: var(--peach-t2);1906}19071908.peach-settings-cat-row {1909  display: flex;1910  align-items: center;1911  gap: 10px;1912  width: 100%;1913  padding: 9px 16px;1914  background: none;1915  border: none;1916  border-bottom: 1px solid var(--peach-t3);1917  cursor: pointer;1918  text-align: left;1919  color: inherit;1920  transition: background var(--peach-dur-80) ease;1921}1922.peach-settings-cat-row:hover {1923  background: var(--peach-t3);1924}1925.peach-settings-cat-row:last-child {1926  border-bottom: none;1927}19281929.peach-settings-cat-icon {1930  width: 28px;1931  height: 28px;1932  border-radius: 7px;1933  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1934  color: var(--peach-accent);1935  display: flex;1936  align-items: center;1937  justify-content: center;1938  flex-shrink: 0;1939}1940/* Light theme: peach-on-cream is too low-contrast — both colors are warm.1941   Darken the icon stroke to ink and bump the bg tint so the icon reads1942   sharply while the cell still feels accent-tinted. */1943.light .peach-settings-cat-icon {1944  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1945  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));1946}19471948.peach-settings-cat-content {1949  flex: 1;1950  display: flex;1951  flex-direction: column;1952  gap: 2px;1953  min-width: 0;1954}19551956.peach-settings-cat-name {1957  font-size: 0.8125rem;1958  font-weight: 450;1959  color: var(--peach-t0);1960  line-height: 1.2;1961}19621963.peach-settings-cat-desc {1964  font-size: 0.625rem;1965  color: var(--peach-t2);1966  line-height: 1.3;1967  white-space: nowrap;1968  overflow: hidden;1969  text-overflow: ellipsis;1970}19711972.peach-settings-cat-chevron {1973  color: var(--peach-t2);1974  flex-shrink: 0;1975  opacity: 0.5;1976}19771978/* ── Settings sub-view section labels ──────────────────────────────────── */1979.peach-settings-sub-label {1980  margin: 12px 0 4px;1981  font-family: "IBM Plex Mono", monospace;1982  font-size: 0.5rem;1983  text-transform: uppercase;1984  letter-spacing: 0.18em;1985  color: var(--peach-t2);1986}1987.peach-settings-sub-label:first-child {1988  margin-top: 4px;1989}19901991/* ── Settings: collapsible Advanced section ─────────────────────────────── */1992.peach-settings-advanced-toggle {1993  display: flex;1994  align-items: center;1995  justify-content: space-between;1996  width: 100%;1997  background: none;1998  border: none;1999  cursor: pointer;2000  padding: 12px 0 4px;2001  margin: 0;2002  color: inherit;2003}2004.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2005  color: var(--peach-t1);2006}2007.peach-settings-advanced-chevron {2008  font-size: 0.5625rem;2009  color: var(--peach-t3);2010  letter-spacing: 0;2011  transition: color 120ms ease;2012}20132014/* ── Feedback form ──────────────────────────────────────────────────────── */2015.peach-feedback-group {2016  flex: 1;2017  display: flex;2018  flex-direction: column;2019  border-bottom: none;2020}20212022.peach-feedback-intro {2023  margin: 4px 0 14px;2024  font-size: 0.75rem;2025  line-height: 1.55;2026  color: var(--peach-t1);2027}20282029.peach-feedback-chips {2030  display: flex;2031  flex-wrap: wrap;2032  gap: 6px;2033  margin-bottom: 14px;2034}20352036.peach-feedback-chip {2037  padding: 4px 10px;2038  border-radius: 999px;2039  border: 1px solid var(--peach-t3);2040  background: none;2041  color: var(--peach-t2);2042  font-size: 0.6875rem;2043  font-family: var(--font-ui);2044  cursor: pointer;2045  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2046    background var(--peach-dur-80) ease;2047}2048.peach-feedback-chip:hover {2049  border-color: var(--peach-t2);2050  color: var(--peach-t1);2051}2052.peach-feedback-chip.is-active {2053  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);2054  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2055  color: var(--peach-accent);2056}20572058.peach-feedback-textarea {2059  flex: 1;2060  width: 100%;2061  min-height: 120px;2062  box-sizing: border-box;2063  background: rgba(0, 0, 0, 0.22);2064  border: 1px solid transparent;2065  border-radius: 6px;2066  color: var(--peach-t0);2067  font-size: 0.75rem;2068  font-family: var(--font-ui);2069  line-height: 1.5;2070  padding: 8px 10px;2071  resize: none;2072  outline: none;2073  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2074}2075.peach-feedback-textarea:focus {2076  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2077  background: rgba(0, 0, 0, 0.28);2078}2079.peach-feedback-textarea:focus {2080  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2081}2082.peach-feedback-textarea::placeholder {2083  color: var(--peach-t2);2084}20852086.peach-feedback-meta {2087  margin: 6px 0 0;2088  font-size: 0.625rem;2089  color: var(--peach-t2);2090  font-family: "IBM Plex Mono", monospace;2091}20922093.peach-feedback-result {2094  margin: 8px 0 0;2095  font-size: 0.6875rem;2096  font-family: "IBM Plex Mono", monospace;2097}2098.peach-feedback-result--ok { color: var(--peach-sync-ok); }2099.peach-feedback-result--err { color: var(--peach-breach); }21002101.peach-feedback-submit {2102  width: 100%;2103  margin-top: 12px;2104  justify-content: center;2105}21062107.peach-feedback-anon {2108  margin: 8px 0 0;2109  font-size: 0.625rem;2110  color: var(--peach-t2);2111  text-align: center;2112}21132114.peach-passkey-badge {2115  margin-left: 8px;2116  font-size: 0.625rem;2117  letter-spacing: 0.06em;2118  text-transform: uppercase;2119  color: var(--peach-t2);2120  font-family: var(--font-ui);2121  vertical-align: middle;2122}21232124.peach-passkey-delete-btn {2125  color: var(--peach-breach);2126  border-color: rgba(229, 85, 85, 0.25);2127}21282129.peach-passkey-delete-confirm {2130  display: flex;2131  align-items: center;2132  gap: 8px;2133  padding: 8px 10px;2134  background: rgba(229, 85, 85, 0.06);2135  border: 1px solid rgba(229, 85, 85, 0.2);2136  border-radius: 6px;2137}21382139.peach-passkey-delete-confirm-copy {2140  flex: 1;2141  font-size: 0.6875rem;2142  color: var(--peach-t1);2143}21442145.peach-passkey-delete-btn--confirm {2146  color: var(--peach-breach);2147  border-color: rgba(229, 85, 85, 0.4);2148}21492150.peach-passkey-activity {2151  flex-direction: column;2152  align-items: flex-start;2153  gap: 4px;2154}21552156.peach-passkey-meta {2157  font-size: 0.6875rem;2158  color: var(--peach-t2);2159}21602161.peach-passkey-actions {2162  position: relative;2163  z-index: 1;2164  margin-top: 14px;2165  display: flex;2166  flex-direction: column;2167  gap: 8px;2168}21692170.peach-passkey-approval {2171  display: flex;2172  flex-direction: column;2173  align-items: center;2174  padding: 16px 20px 14px;2175  gap: 8px;2176  text-align: center;2177}21782179.peach-passkey-approval-icon {2180  width: 36px;2181  height: 36px;2182  border-radius: 10px;2183  background: var(--peach-s2);2184  border: 1px solid var(--peach-t3);2185  display: flex;2186  align-items: center;2187  justify-content: center;2188  flex-shrink: 0;2189  color: var(--peach-accent);2190}21912192.peach-passkey-approval-icon img,2193.peach-passkey-approval-icon svg {2194  width: 22px;2195  height: 22px;2196  border-radius: 5px;2197}21982199.peach-passkey-approval-rp {2200  font-family: var(--font-ui);2201  font-size: 0.75rem;2202  color: var(--peach-t2);2203  letter-spacing: 0.03em;2204}22052206.peach-passkey-approval-action {2207  font-family: var(--font-display);2208  font-style: italic;2209  font-weight: 300;2210  font-size: 18px;2211  color: var(--peach-t0);2212  line-height: 1.1;2213  margin: 1px 0;2214}22152216.peach-passkey-approval-user {2217  font-family: var(--font-mono);2218  font-size: 0.6875rem;2219  color: var(--peach-t1);2220  background: var(--peach-s2);2221  border: 1px solid var(--peach-t3);2222  border-radius: 4px;2223  padding: 3px 8px;2224}22252226.peach-passkey-approval-notice {2227  font-size: 0.625rem;2228  color: var(--peach-t2);2229  line-height: 1.5;2230  max-width: 220px;2231}22322233.peach-passkey-approval-actions {2234  display: flex;2235  gap: 8px;2236  width: 100%;2237  margin-top: 6px;2238}22392240.peach-passkey-approval-actions .peach-btn {2241  flex: 1;2242}22432244/* ── Inline generator drawer ── */2245.peach-generator-drawer {2246  display: grid;2247  grid-template-rows: 0fr;2248  transition: grid-template-rows 320ms var(--peach-curve-arrival);2249  overflow: hidden;2250}2251.peach-generator-drawer.is-open {2252  grid-template-rows: 1fr;2253}2254.peach-generator-drawer-inner {2255  min-height: 0;2256  overflow: hidden;2257}2258.peach-generator-drawer-content {2259  border-top: 1px solid var(--peach-t3);2260  padding: 8px 0 4px;2261  display: flex;2262  flex-direction: column;2263  gap: 8px;2264}22652266/* ── Compact generator (inside entry edit) ── */2267.peach-generator-drawer-content--compact {2268  border-top: 1px solid var(--peach-t3);2269  padding: 8px 0 2px;2270  gap: 7px;2271}2272.peach-pwgen-compact-display-row {2273  display: flex;2274  align-items: center;2275  gap: 6px;2276}2277.peach-pwgen-compact-output {2278  flex: 1;2279  min-width: 0;2280  font-family: "IBM Plex Mono", monospace;2281  font-size: 0.6875rem;2282  font-weight: 400;2283  letter-spacing: 0.04em;2284  color: var(--peach-t0);2285  background: rgba(240, 232, 216, 0.04);2286  border: 1px solid var(--peach-t3);2287  border-radius: 5px;2288  padding: 5px 8px;2289  line-height: 1.5;2290  outline: none;2291  transition: border-color 120ms ease;2292}22932294.peach-pwgen-compact-output:focus {2295  border-color: var(--peach-t1);2296}2297.peach-pwgen-compact-controls {2298  display: flex;2299  align-items: center;2300  gap: 6px;2301}2302.peach-pwgen-compact-slider {2303  flex: 1;2304  min-width: 0;2305  height: 2px !important;2306}2307.peach-pwgen-compact-controls .peach-pwgen-len-num {2308  flex-shrink: 0;2309  min-width: 18px;2310  text-align: right;2311}2312.peach-pwgen-compact-pills {2313  display: flex;2314  gap: 3px;2315  flex-shrink: 0;2316}2317.peach-pwgen-compact-pills .peach-pwgen-pill {2318  padding: 2px 7px;2319  font-size: 0.5rem;2320}2321.peach-pwgen-compact-use {2322  flex-shrink: 0;2323  font-size: 0.625rem !important;2324  padding: 3px 9px !important;2325  min-height: 22px !important;2326  border-radius: 5px !important;2327}23282329/* ── Password edit row (input + eye toggle side-by-side) ── */2330.peach-password-edit-row {2331  display: flex;2332  align-items: center;2333  gap: 6px;2334}2335.peach-password-edit-row .peach-inline-input {2336  flex: 1;2337  min-width: 0;2338}23392340/* ── Generate toggle link ── */2341.peach-generate-toggle-link {2342  display: inline-flex;2343  align-items: center;2344  gap: 5px;2345  background: none;2346  border: none;2347  padding: 0;2348  cursor: pointer;2349  font-family: "IBM Plex Mono", monospace;2350  font-size: 0.625rem;2351  color: var(--peach-t2);2352  letter-spacing: 0.04em;2353  transition: color 120ms ease;2354  align-self: flex-start;2355}2356.peach-generate-toggle-link:hover {2357  color: var(--peach-accent);2358}23592360/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2361.peach-entry-body {2362  flex: 1;2363  overflow-y: auto;2364  overflow-x: hidden;2365  scrollbar-width: none;2366  -ms-overflow-style: none;2367  overscroll-behavior: contain;2368  display: grid;2369  gap: 10px;2370  align-content: start;2371  padding: 10px 20px 14px;2372  min-width: 0;2373  min-height: 0;2374}2375.peach-entry-body::-webkit-scrollbar { display: none; }23762377/* Type-toggle pills + inline note toolbar */2378.peach-new-type-row {2379  display: flex;2380  align-items: center;2381  gap: 6px;2382  margin-bottom: 2px;2383}2384.peach-new-type-btn {2385  background: transparent;2386  border: 1px solid var(--peach-t3);2387  border-radius: 12px;2388  padding: 3px 10px;2389  font-family: "IBM Plex Mono", monospace;2390  font-size: 0.5625rem;2391  letter-spacing: 0.12em;2392  text-transform: uppercase;2393  color: var(--peach-t2);2394  cursor: pointer;2395  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2396}2397.peach-new-type-btn.is-active {2398  color: var(--peach-t0);2399  border-color: var(--peach-accent);2400  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2401}2402.peach-new-type-btn:not(.is-active):hover {2403  color: var(--peach-t1);2404  border-color: var(--peach-t2);2405}24062407/* Editable title */2408.peach-new-title-wrap { margin: 0 0 2px; }2409.peach-new-title-input {2410  background: transparent;2411  border: none;2412  outline: none;2413  width: 100%;2414  color: var(--peach-t0);2415  font-family: var(--font-display);2416  font-style: italic;2417  font-weight: 400;2418  font-size: 40px;2419  line-height: 0.95;2420  caret-color: var(--peach-accent);2421}2422.peach-new-title-input::placeholder { color: var(--peach-t2); }24232424/* Editable domain field */2425.peach-domain-edit-row {2426  display: flex;2427  align-items: center;2428  gap: 6px;2429}24302431.peach-domain-edit-row .peach-domain-value--edit {2432  flex: 1;2433  width: 0;2434}24352436.peach-domain-url-btn {2437  flex-shrink: 0;2438  background: transparent;2439  border: none;2440  cursor: pointer;2441  color: var(--peach-t3);2442  padding: 2px 3px;2443  display: flex;2444  align-items: center;2445  line-height: 0;2446  border-radius: 3px;2447  transition: color 120ms ease;2448}24492450.peach-domain-url-btn:hover {2451  color: var(--peach-accent);2452}24532454.peach-domain-value--edit {2455  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2456  font-size: 0.625rem;2457  font-style: italic;2458  letter-spacing: 0.12em;2459  color: var(--peach-t1);2460  background: transparent;2461  border: none;2462  border-bottom: 1px solid var(--peach-t3);2463  outline: none;2464  width: 100%;2465  padding: 2px 0;2466  caret-color: var(--peach-accent);2467  transition: border-color 140ms ease, color 140ms ease;2468}2469.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2470.peach-domain-value--edit:focus {2471  border-bottom-color: rgba(240, 232, 216, 0.28);2472  color: var(--peach-t0);2473}24742475/* Editable field values (username, password, totp) */2476.peach-field-value--edit {2477  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2478  font-size: 0.8125rem;2479  color: var(--peach-t0);2480  background: transparent;2481  border: none;2482  border-bottom: 1px solid var(--peach-t3);2483  outline: none;2484  flex: 1;2485  min-width: 0;2486  padding: 3px 0;2487  caret-color: var(--peach-accent);2488  transition: border-color 140ms ease, color 140ms ease;2489}2490.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2491.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2492.peach-field-value--edit:focus {2493  border-bottom-color: rgba(240, 232, 216, 0.28);2494  color: var(--peach-t0);2495}24962497/* "+ add optional field" links */2498.peach-entry-add-links {2499  display: flex;2500  gap: 12px;2501  flex-wrap: wrap;2502  margin-top: -2px;2503}2504.peach-add-field-link {2505  background: transparent;2506  border: none;2507  padding: 0;2508  cursor: pointer;2509  font-family: "IBM Plex Mono", monospace;2510  font-size: 0.5625rem;2511  letter-spacing: 0.1em;2512  text-transform: uppercase;2513  color: var(--peach-t2);2514  transition: color 140ms ease;2515}2516.peach-add-field-link:hover { color: var(--peach-accent); }25172518/* ── New entry form (legacy classes) ────────────────────────────────── */2519.peach-new-body {2520  flex: 1;2521  overflow-y: auto;2522  padding: 10px 20px 14px;2523}2524.peach-new-name-input {2525  background: transparent;2526  border: none;2527  outline: none;2528  width: 100%;2529  color: var(--peach-t0);2530  font-family: var(--font-display);2531  font-style: italic;2532  font-weight: 400;2533  font-size: 40px;2534  line-height: 0.95;2535  caret-color: var(--peach-accent);2536}2537.peach-new-name-input::placeholder { color: var(--peach-t2); }2538.peach-new-field-input {2539  background: transparent;2540  border: none;2541  outline: none;2542  flex: 1;2543  min-width: 0;2544  caret-color: var(--peach-accent);2545}2546.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }25472548/* ── Canary card ── */2549.peach-canary-card {2550  border: 1px solid rgba(217, 160, 48, 0.2);2551  background: rgba(217, 160, 48, 0.03);2552  border-radius: 8px;2553  padding: 12px;2554}25552556.peach-canary-settings-header {2557  display: flex;2558  align-items: center;2559  justify-content: space-between;2560  cursor: pointer;2561  user-select: none;2562}25632564.peach-canary-card .peach-label {2565  color: rgba(217, 160, 48, 0.85);2566}25672568.peach-canary-card .peach-new-field-input {2569  border-color: rgba(217, 160, 48, 0.25);2570}25712572.peach-canary-card .peach-new-field-input:focus {2573  border-color: rgba(217, 160, 48, 0.5);2574}25752576.peach-canary-body {2577  margin-top: 12px;2578  display: flex;2579  flex-direction: column;2580  gap: 10px;2581}25822583.peach-canary-explainer {2584  display: flex;2585  gap: 10px;2586  padding: 10px 12px;2587  border-radius: 10px;2588  background: rgba(217, 160, 48, 0.06);2589  border: 1px solid rgba(217, 160, 48, 0.22);2590  margin-bottom: 4px;2591}25922593.peach-canary-explainer-icon {2594  font-size: 1rem;2595  flex-shrink: 0;2596  line-height: 1.2;2597}25982599.peach-canary-explainer-title {2600  font-family: var(--font-ui);2601  font-size: 0.6875rem;2602  font-weight: 500;2603  color: rgba(217, 160, 48, 0.9);2604  margin: 0 0 3px;2605}26062607.peach-canary-explainer-copy {2608  font-family: var(--font-ui);2609  font-size: 0.625rem;2610  color: var(--peach-t2);2611  line-height: 1.55;2612  margin: 0;2613}26142615.peach-canary-hint {2616  font-size: 0.625rem;2617  color: var(--peach-t2);2618  font-family: Inter, system-ui, sans-serif;2619  line-height: 1.5;2620  margin-top: 4px;2621}26222623.peach-canary-actions-row {2624  display: flex;2625  align-items: center;2626  gap: 8px;2627}26282629.peach-canary-test-btn {2630  border-color: rgba(217, 160, 48, 0.3);2631  color: rgba(217, 160, 48, 0.85);2632}26332634.peach-canary-test-result {2635  font-size: 0.625rem;2636  font-family: Inter, system-ui, sans-serif;2637}26382639.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2640.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }26412642.peach-canary-badge {2643  display: flex;2644  position: relative;2645  z-index: 1;2646  align-items: center;2647  gap: 5px;2648  padding: 4px 10px;2649  background: rgba(217, 160, 48, 0.12);2650  border: 1px solid rgba(217, 160, 48, 0.35);2651  border-radius: 6px;2652  margin-bottom: 6px;2653  width: fit-content;2654}26552656.peach-canary-badge-label {2657  font-size: 0.625rem;2658  letter-spacing: 0.06em;2659  color: rgba(217, 160, 48, 0.9);2660  font-family: var(--font-ui);2661  text-transform: uppercase;2662}26632664.peach-canary-badge-icon {2665  font-size: 0.6875rem;2666}26672668.peach-canary-suppress-row {2669  display: flex;2670  align-items: center;2671  gap: 8px;2672  padding: 6px 10px;2673  background: rgba(217, 160, 48, 0.08);2674  border-radius: 6px;2675  margin-bottom: 8px;2676}26772678.peach-canary-suppress-label {2679  font-size: 0.6875rem;2680  color: rgba(217, 160, 48, 0.85);2681  cursor: pointer;2682  font-family: var(--font-ui);2683  letter-spacing: 0.04em;2684}26852686.peach-regen-panel {2687  position: relative;2688  z-index: 1;2689  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2690  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2691  border-radius: 8px;2692  padding: 12px;2693  margin-bottom: 8px;2694}26952696.peach-regen-panel-header {2697  display: flex;2698  align-items: center;2699  justify-content: space-between;2700  margin-bottom: 10px;2701}27022703.peach-regen-panel-title {2704  font-size: 0.6875rem;2705  font-weight: 600;2706  letter-spacing: 0.06em;2707  text-transform: uppercase;2708  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2709}27102711.peach-regen-output {2712  background: rgba(0, 0, 0, 0.2);2713  border-radius: 6px;2714  padding: 10px;2715  margin-bottom: 10px;2716  font-family: var(--font-mono);2717  font-size: 0.8125rem;2718  word-break: break-all;2719  color: var(--peach-t1);2720}27212722.peach-regen-actions {2723  display: flex;2724  gap: 6px;2725}27262727.peach-regen-actions--spaced {2728  margin-bottom: 8px;2729}27302731.peach-regen-action-grow {2732  flex: 1;2733}27342735.peach-regen-copy-btn {2736  padding: 0 8px;2737}27382739.peach-regen-success {2740  position: relative;2741  z-index: 1;2742  background: rgba(40, 180, 80, 0.1);2743  border: 1px solid rgba(40, 180, 80, 0.3);2744  border-radius: 8px;2745  padding: 10px 12px;2746  margin-bottom: 8px;2747  display: flex;2748  align-items: center;2749  gap: 8px;2750  font-size: 0.6875rem;2751  color: rgba(40, 180, 80, 0.9);2752}27532754/* ── Note editor overlay ── */2755.peach-note-editor {2756  position: absolute;2757  inset: 0;2758  z-index: 200;2759  display: flex;2760  flex-direction: column;2761  background:2762    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2763    var(--peach-bg);2764  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2765}27662767.peach-note-editor-header {2768  display: flex;2769  align-items: center;2770  gap: 10px;2771  padding: 14px 16px 10px;2772  border-bottom: 1px solid var(--peach-t3);2773  flex-shrink: 0;2774}27752776.peach-note-editor-back {2777  background: transparent;2778  border: none;2779  cursor: pointer;2780  color: var(--peach-t2);2781  padding: 4px 6px;2782  border-radius: 6px;2783  display: flex;2784  align-items: center;2785  transition: color 120ms ease, background 120ms ease;2786  flex-shrink: 0;2787}2788.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }27892790.peach-note-editor-label {2791  flex: 1;2792  font-family: var(--font-display);2793  font-style: italic;2794  font-size: 0.9375rem;2795  color: var(--peach-t1);2796  letter-spacing: 0.02em;2797}27982799.peach-note-editor-save-btn {2800  background: transparent;2801  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2802  border-radius: 8px;2803  color: var(--peach-accent);2804  font-family: "IBM Plex Mono", monospace;2805  font-size: 0.625rem;2806  letter-spacing: 0.06em;2807  text-transform: uppercase;2808  padding: 3px 10px;2809  cursor: pointer;2810  transition: background 120ms ease, border-color 120ms ease;2811}2812.peach-note-editor-save-btn:hover:not(:disabled) {2813  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2814  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2815}2816.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }28172818.peach-note-toolbar {2819  display: flex;2820  align-items: center;2821  gap: 3px;2822  padding: 6px 14px 5px;2823  border-bottom: 1px solid var(--peach-t3);2824  flex-shrink: 0;2825}28262827.peach-note-tool-btn {2828  background: transparent;2829  border: 1px solid transparent;2830  border-radius: 5px;2831  color: var(--peach-t2);2832  font-family: "IBM Plex Mono", monospace;2833  font-size: 0.625rem;2834  letter-spacing: 0.04em;2835  padding: 2px 8px;2836  cursor: pointer;2837  line-height: 1.6;2838  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2839}2840.peach-note-tool-btn:hover {2841  background: var(--peach-t4);2842  color: var(--peach-t0);2843  border-color: var(--peach-t3);2844}28452846.peach-note-tool-icon {2847  padding: 3px 7px;2848  display: inline-flex;2849  align-items: center;2850  justify-content: center;2851}28522853.peach-note-tool-divider {2854  width: 1px;2855  height: 14px;2856  background: var(--peach-t3);2857  margin: 0 4px;2858  flex-shrink: 0;2859}28602861.peach-note-editor-body {2862  flex: 1;2863  overflow-y: auto;2864  padding: 16px 20px 20px;2865  outline: none;2866  font-family: var(--font-display);2867  font-size: 1rem;2868  line-height: 1.75;2869  color: var(--peach-t0);2870  scrollbar-width: none;2871  word-break: break-word;2872}2873.peach-note-editor-body:empty::before {2874  content: "write your note…";2875  color: var(--peach-t3);2876  font-style: italic;2877  pointer-events: none;2878}28792880/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2881.peach-note-editor-inline {2882  display: flex;2883  flex-direction: column;2884  flex: 1;2885  min-height: 0;2886}2887.peach-note-editor-body--inline {2888  flex: 1;2889  min-height: 0;2890  font-size: 0.9375rem;2891  padding: 10px 20px 14px;2892}28932894/* Full-width toolbar row inside the body (Add.tsx note type).2895   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2896.peach-note-toolbar-body {2897  display: flex;2898  align-items: center;2899  gap: 3px;2900  padding: 5px 20px 4px;2901  margin: 2px -20px 0;2902  border-bottom: 1px solid var(--peach-t3);2903  flex-shrink: 0;2904}29052906/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2907   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2908   and .peach-note-tool-divider button-level styles. */2909.peach-note-toolbar-inline {2910  display: flex;2911  align-items: center;2912  gap: 3px;2913  margin-left: auto;2914  padding-left: 10px;2915  border-left: 1px solid var(--peach-t3);2916  min-height: 22px;2917}29182919/* Entry.tsx toolbar row (no tabs, toolbar only) */2920.peach-entry-note-toolbar-row {2921  display: flex;2922  align-items: center;2923  margin: 4px 0 6px;2924  position: relative;2925  z-index: 1;2926}2927.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2928  border-left: none;2929  padding-left: 0;2930  margin-left: 0;2931}29322933/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2934.peach-note-body {2935  display: flex;2936  flex-direction: column;2937  flex: 1;2938  min-height: 0;2939  margin: 4px 0 0;2940}2941.peach-entry-body--new .peach-note-body {2942  margin: 8px -20px 0;2943}29442945/* Add.tsx body is a grid by default; swap to a flex column when a note is2946   active so the note body can stretch and pin the tags row to the bottom. */2947.peach-entry-body--new:has(.peach-note-body) {2948  display: flex;2949  flex-direction: column;2950}29512952/* Rich content element styles (editor + display) */2953.peach-note-editor-body h2,2954.peach-note-content h2 {2955  font-family: var(--font-display);2956  font-size: 20px;2957  font-weight: 600;2958  font-style: italic;2959  color: var(--peach-t0);2960  margin: 6px 0 2px;2961  line-height: 1.3;2962}2963.peach-note-editor-body ul,2964.peach-note-content ul {2965  padding-left: 18px;2966  margin: 3px 0;2967  list-style: disc;2968}2969.peach-note-editor-body ol,2970.peach-note-content ol {2971  padding-left: 18px;2972  margin: 3px 0;2973  list-style: decimal;2974}2975.peach-note-editor-body li,2976.peach-note-content li { margin: 2px 0; }2977.peach-note-editor-body hr,2978.peach-note-content hr {2979  border: none;2980  border-top: 1px solid var(--peach-t3);2981  margin: 10px 0;2982}29832984/* font size elements from execCommand */2985.peach-note-editor-body font[size="1"],2986.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }2987.peach-note-editor-body font[size="2"],2988.peach-note-content font[size="2"] { font-size: 0.8125rem; }2989.peach-note-editor-body font[size="3"],2990.peach-note-content font[size="3"] { font-size: 1rem; }2991.peach-note-editor-body font[size="4"],2992.peach-note-content font[size="4"] { font-size: 20px; }2993.peach-note-editor-body font[size="5"],2994.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }29952996/* bold / italic inside the editor and note display */2997.peach-note-editor-body b, .peach-note-editor-body strong,2998.peach-note-content b, .peach-note-content strong { font-weight: 700; }2999.peach-note-editor-body em, .peach-note-editor-body i,3000.peach-note-content em, .peach-note-content i { font-style: italic; }30013002/* note display — rendered HTML, no pre-wrap */3003.peach-note-content {3004  overflow: auto;3005  max-height: 340px;3006  word-break: break-word;3007}30083009/* ── Note textarea ── */3010.peach-note-textarea {3011  width: 100%;3012  min-height: 180px;3013  max-height: 280px;3014  resize: vertical;3015  background: var(--peach-t4);3016  border: 1px solid var(--peach-t3);3017  border-radius: 8px;3018  padding: 10px 12px;3019  font-family: "IBM Plex Mono", monospace;3020  font-size: 0.75rem;3021  line-height: 1.7;3022  color: var(--peach-t1);3023  outline: none;3024  transition: border-color 150ms ease;3025}30263027.peach-note-textarea:focus {3028  border-color: var(--peach-t2);3029}30303031.peach-note-char-count {3032  font-family: "IBM Plex Mono", monospace;3033  font-size: 0.5625rem;3034  color: var(--peach-t3);3035  text-align: right;3036  margin-top: 4px;3037  letter-spacing: 0.1em;3038}30393040/* ── Field input baseline ── */3041.peach-new-field-input {3042  width: 100%;3043  background: transparent;3044  border: none;3045  border-bottom: 1px solid var(--peach-t3);3046  padding: 4px 0;3047  color: var(--peach-t1);3048  font-family: "IBM Plex Mono", monospace;3049  font-size: 0.8125rem;3050  outline: none;3051  transition: border-color 150ms ease;3052}30533054.peach-new-field-input:focus {3055  border-bottom-color: var(--peach-t0);3056  color: var(--peach-t0);3057}30583059.peach-new-name-input {3060  width: 100%;3061  background: transparent;3062  border: none;3063  border-bottom: 1px solid var(--peach-t3);3064  padding: 6px 0;3065  font-family: var(--font-display);3066  font-style: italic;3067  font-size: 28px;3068  color: var(--peach-t0);3069  outline: none;3070  transition: border-color 150ms ease;3071}30723073.peach-new-name-input:focus {3074  border-bottom-color: var(--peach-t1);3075}30763077.peach-new-name-input::placeholder {3078  color: var(--peach-t2);3079  font-style: italic;3080}30813082.peach-new-field-input::placeholder {3083  color: var(--peach-t3);3084}30853086/* ── Demo entrance animation ── */3087#hd-shell {3088  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3089}3090@keyframes hd-shell-enter {3091  from { opacity: 0; transform: scale(0.96) translateY(16px); }3092  to   { opacity: 1; transform: scale(1) translateY(0); }3093}30943095/* ── Keyframes ── */3096@keyframes peach-char-enter {3097  from { opacity: 0; transform: translateY(0.22em); }3098  to   { opacity: 1; transform: translateY(0); }3099}3100@keyframes peach-content-enter {3101  from { opacity: 0.96; transform: translateY(4px); }3102  to   { opacity: 1; transform: translateY(0); }3103}3104@keyframes peach-content-exit {3105  from { opacity: 1; transform: translateY(0); }3106  to   { opacity: 0.92; transform: translateY(-3px); }3107}3108@keyframes peach-screen-enter {3109  from { opacity: 0; transform: translateY(14px); }3110  to   { opacity: 1; transform: translateY(0); }3111}3112@keyframes peach-shell-fade-in {3113  from { opacity: 0; }3114  to   { opacity: 1; }3115}3116@keyframes peach-veil-in {3117  from { opacity: 0; }3118  to   { opacity: 1; }3119}3120@keyframes peach-lock-settle {3121  0%   { transform: scale(0.9); }3122  65%  { transform: scale(1.08); }3123  100% { transform: scale(1); }3124}3125@keyframes peach-copy-confirm {3126  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3127  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); }3128}3129@keyframes peach-copy-retreat {3130  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); }3131  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3132}3133@keyframes peach-copy-flood {3134  from { opacity: 0; transform: scaleX(0.15); }3135  to   { opacity: 1; transform: scaleX(1); }3136}3137@keyframes peach-copy-icon-settle {3138  from  { transform: scale(0.84); }3139  70%   { transform: scale(1.08); }3140  to    { transform: scale(1); }3141}3142@keyframes peach-copy-sheen-retreat {3143  from { opacity: 1; transform: scaleX(1); }3144  to   { opacity: 0; transform: scaleX(0.15); }3145}3146@keyframes peach-copy-drain {3147  from { width: 100%; }3148  to   { width: 0; }3149}3150@keyframes peach-shake {3151  0%, 100% { transform: translateX(0); }3152  20%      { transform: translateX(-6px); }3153  40%      { transform: translateX(6px); }3154  60%      { transform: translateX(-4px); }3155  80%      { transform: translateX(4px); }3156}31573158@keyframes pip-pulse {3159  0% { transform: scale(1); }3160  40% { transform: scale(2.2); }3161  100% { transform: scale(1); }3162}316331643165/* ── Password generator ── */3166.peach-pwgen-body {3167  flex: 1; overflow-y: auto;3168  display: flex; flex-direction: column;3169}3170.peach-policy-badge {3171  display: flex; align-items: center;3172  padding: 6px 20px 0;3173  font-size: 0.625rem; font-family: Inter, sans-serif;3174  color: var(--peach-t2); letter-spacing: 0.04em;3175}3176.peach-pwgen-display {3177  padding: 14px 20px 12px;3178  border-bottom: 1px solid var(--peach-t3);3179  display: flex; align-items: flex-start; gap: 10px;3180}3181.peach-pwgen-display-row {3182  display: flex;3183  align-items: flex-start;3184  gap: 8px;3185  padding-bottom: 8px;3186  border-bottom: 1px solid var(--peach-t3);3187}3188.peach-pwgen-output {3189  flex: 1; min-width: 0; margin: 0;3190  font-family: "IBM Plex Mono", monospace;3191  font-size: 0.8125rem; color: var(--peach-t0);3192  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3193  white-space: normal;3194  padding: 10px 12px;3195  background: var(--peach-t4);3196  border-radius: 6px;3197  min-height: 36px;3198}3199.peach-pwgen-output-display {3200  flex: 1;3201  min-width: 0;3202  margin: 0;3203  font-family: var(--font-display);3204  font-style: italic;3205  font-weight: 300;3206  font-size: 32px;3207  line-height: 1.05;3208  color: var(--peach-t0);3209  word-break: break-all;3210  overflow-wrap: break-word;3211  white-space: normal;3212  letter-spacing: 0.02em;3213}3214.peach-pwgen-display-actions {3215  display: flex;3216  flex-direction: column;3217  gap: 4px;3218  flex-shrink: 0;3219  margin-top: 2px;3220}3221.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3222.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3223.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3224.peach-pwgen-len-num {3225  font-family: "IBM Plex Mono", monospace;3226  font-size: 0.75rem; color: var(--peach-accent);3227}3228.peach-pwgen-len-num--edit {3229  cursor: text;3230  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3231}3232.peach-pwgen-len-input {3233  font-family: "IBM Plex Mono", monospace;3234  font-size: 0.75rem;3235  color: var(--peach-accent);3236  background: transparent;3237  border: none;3238  border-bottom: 1px solid var(--peach-accent);3239  outline: none;3240  width: 32px;3241  text-align: right;3242  padding: 0;3243}3244.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3245.peach-pwgen-toggles { display: flex; flex-direction: column; }3246.peach-pwgen-charset-pills {3247  display: flex;3248  gap: 6px;3249  flex-wrap: wrap;3250}3251.peach-pwgen-pill {3252  padding: 4px 11px;3253  border-radius: 999px;3254  border: 1px solid var(--peach-t3);3255  background: transparent;3256  color: var(--peach-t2);3257  font-family: "IBM Plex Mono", monospace;3258  font-size: 0.5625rem;3259  letter-spacing: 0.08em;3260  cursor: pointer;3261  transition: all 150ms ease;3262}3263.peach-pwgen-pill.is-on {3264  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3265  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3266  color: var(--peach-accent);3267}3268.peach-pwgen-pill:not(.is-on):hover {3269  color: var(--peach-t1);3270  border-color: var(--peach-t2);3271}3272.peach-pwgen-use-btn {3273  width: 100%;3274  min-height: 34px;3275  border-radius: 8px;3276  margin-top: 2px;3277}3278.peach-generator-constraint-note {3279  font-family: 'IBM Plex Mono', monospace;3280  font-size: 10px;3281  color: var(--peach-t3);3282  letter-spacing: 0.04em;3283  margin: 0;3284  transition: opacity 200ms ease;3285}3286.peach-pwgen-toggle-row {3287  display: flex; align-items: center; justify-content: space-between;3288  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3289}3290.peach-pwgen-toggle-row:last-child { border-bottom: none; }3291.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }32923293.peach-screen-prelock {3294  z-index: 10;3295}32963297.prelock-form {3298  display: grid;3299  gap: 12px;3300}33013302/* Peach popup should not expose native scrollbars on internal panels. */3303.peach-settings-body,3304.peach-new-body,3305.peach-pwgen-body,3306.lock-screen,3307.peach-import-preview {3308  scrollbar-width: none;3309  -ms-overflow-style: none;3310  overscroll-behavior: contain;3311}3312.peach-settings-body::-webkit-scrollbar,3313.peach-new-body::-webkit-scrollbar,3314.peach-pwgen-body::-webkit-scrollbar,3315.lock-screen::-webkit-scrollbar,3316.peach-import-preview::-webkit-scrollbar {3317  width: 0;3318  height: 0;3319  display: none;3320}33213322.lock-screen {3323  height: 100%;3324  min-height: 100%;3325  overflow-y: auto;3326  padding: 18px 18px 16px;3327  gap: 14px;3328  grid-template-rows: auto auto auto 1fr auto;3329  align-content: stretch;3330  position: relative;3331  isolation: isolate;3332}3333.peach-screen.lock-screen--vault-stage {3334  display: flex;3335  flex-direction: column;3336  justify-content: flex-start;3337  gap: 18px;3338  padding: 20px 18px 18px;3339  overflow: hidden;3340}3341.peach-screen.lock-screen--vault-stage .peach-lock-panel {3342  margin-top: 0;3343}3344.lock-screen--onboarding {3345  display: flex;3346  flex-direction: column;3347  gap: 12px;3348  justify-content: flex-start;3349}33503351.lock-screen::before {3352  content: "";3353  position: absolute;3354  inset: 12px 18px auto auto;3355  width: 160px;3356  height: 160px;3357  border-radius: 999px;3358  background:3359    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%);3360  filter: blur(6px);3361  opacity: 0.7;3362  pointer-events: none;3363  z-index: 0;3364}33653366.peach-lock-rune-string {3367  flex: 1;3368  display: flex;3369  align-items: center;3370  justify-content: center;3371  gap: 6px;3372  font-family: PeachScript, monospace;3373  font-size: 0.8125rem;3374  letter-spacing: 0.05em;3375  pointer-events: none;3376  user-select: none;3377  position: relative;3378  z-index: 1;3379}33803381.peach-lock-rune-string span {3382  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3383  text-shadow:3384    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3385    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3386  transition: color 0.9s ease, text-shadow 0.9s ease;3387}33883389.peach-lock-rune-string span.is-glowing {3390  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3391  text-shadow:3392    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3393    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3394}33953396.lock-screen-header {3397  display: flex;3398  align-items: center;3399  justify-content: space-between;3400  position: relative;3401  z-index: 1;3402}34033404.lock-password-input.shake {3405  animation: peach-shake 300ms ease-in-out;3406}34073408.peach-hint-error {3409  color: rgba(220, 80, 60, 0.92);3410}34113412.peach-onboarding-headline {3413  margin: 0;3414  font-family: var(--font-display);3415  font-size: 35px;3416  line-height: 0.88;3417  font-style: italic;3418  font-weight: 400;3419  max-width: 252px;3420}34213422.peach-lock-copy {3423  display: grid;3424  gap: 8px;3425  position: relative;3426  z-index: 1;3427}34283429.peach-lock-copy--onboarding {3430  gap: 10px;3431}34323433.peach-lock-hero {3434  position: relative;3435  z-index: 1;3436  display: grid;3437  gap: 8px;3438  min-height: 0;3439  padding: 4px 2px 0;3440  border: none;3441  border-radius: 0;3442  background: transparent;3443  box-shadow: none;3444}3445.peach-lock-hero-art {3446  position: absolute;3447  right: -8px;3448  top: -6px;3449  width: 120px;3450  height: 120px;3451  display: flex;3452  align-items: center;3453  justify-content: center;3454  pointer-events: none;3455  opacity: 0.12;3456  filter: saturate(0.9);3457}3458.peach-lock-hero-mark {3459  width: 100%;3460  height: 100%;3461}3462/* Peach body stays brand-peach across every accent — we don't want a3463   green or blue peach when sage/sky is selected. Leaf + vein keep the3464   sage tint because a real peach has a sage leaf. In the new brand-kit3465   mark the leaf is path 1 and the vein stroke is path 2; the body and3466   back-lobe (paths 3 + 4) must stay untouched. */3467.peach-lock-hero-mark path:nth-child(1) {3468  fill: rgba(123, 144, 96, 0.88);3469}3470.peach-lock-hero-mark path:nth-child(2) {3471  stroke: rgba(94, 122, 66, 0.95);3472}3473.peach-lock-hero > *:not(.peach-lock-hero-art) {3474  position: relative;3475  z-index: 1;3476}34773478.peach-lock-eyebrow {3479  display: inline-flex;3480  align-items: center;3481  width: fit-content;3482  padding: 4px 9px;3483  border-radius: 999px;3484  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3485  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3486  color: var(--peach-t0);3487  font-family: "IBM Plex Mono", monospace;3488  font-size: 0.5rem;3489  letter-spacing: 0.18em;3490  text-transform: uppercase;3491}34923493.peach-lock-label-row {3494  display: flex;3495  align-items: center;3496  justify-content: space-between;3497  margin-bottom: 0;3498}34993500.peach-lock-reveal-btn {3501  display: inline-flex;3502  align-items: center;3503  gap: 4px;3504  background: none;3505  border: none;3506  cursor: pointer;3507  font-family: "IBM Plex Mono", monospace;3508  font-size: 0.5625rem;3509  letter-spacing: 0.06em;3510  color: var(--peach-t2);3511  padding: 2px 0;3512  transition: color 150ms ease;3513}35143515.peach-lock-reveal-btn:hover {3516  color: var(--peach-t1);3517}35183519.peach-lock-warning {3520  color: rgba(220, 80, 60, 0.85) !important;3521  line-height: 1.5;3522}35233524.peach-onboarding-cards {3525  display: grid;3526  gap: 8px;3527  position: relative;3528  z-index: 1;3529}35303531.peach-lock-panel {3532  position: relative;3533  z-index: 1;3534  display: grid;3535  gap: 9px;3536  padding: 14px 16px 15px;3537  border-radius: 18px;3538  border: 1px solid var(--peach-t3);3539  background:3540    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3541  box-shadow:3542    inset 0 1px 0 rgba(240, 232, 216, 0.04),3543    0 12px 28px rgba(0, 0, 0, 0.12);3544}35453546/* Glass surface — lock panel and settings groups */3547.peach-glass {3548  background: rgba(26, 20, 16, 0.65);3549  border: 1px solid rgba(255, 255, 255, 0.08);3550  border-radius: 12px;3551  backdrop-filter: blur(12px) saturate(1.4);3552  -webkit-backdrop-filter: blur(12px) saturate(1.4);3553}35543555@supports not (backdrop-filter: blur(1px)) {3556  .peach-glass {3557    background: rgba(26, 20, 16, 0.92);3558    border: 1px solid rgba(255, 255, 255, 0.10);3559    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3560  }3561}35623563.light .peach-glass,3564[data-theme="light"] .peach-glass {3565  background: rgba(240, 233, 223, 0.72);3566  border: 1px solid rgba(26, 18, 8, 0.08);3567  backdrop-filter: blur(12px) saturate(1.2);3568  -webkit-backdrop-filter: blur(12px) saturate(1.2);3569}35703571@supports not (backdrop-filter: blur(1px)) {3572  .light .peach-glass,3573  [data-theme="light"] .peach-glass {3574    background: rgba(240, 233, 223, 0.97);3575    border: 1px solid rgba(26, 18, 8, 0.10);3576  }3577}35783579/* Lock panel keeps its own border-radius over the generic glass token */3580.peach-lock-panel.peach-glass {3581  border-radius: 18px;3582  background: rgba(26, 20, 16, 0.65);3583  border: 1px solid rgba(255, 255, 255, 0.08);3584  box-shadow:3585    inset 0 1px 0 rgba(255, 255, 255, 0.05),3586    0 12px 28px rgba(0, 0, 0, 0.3);3587}35883589.light .peach-lock-panel.peach-glass,3590[data-theme="light"] .peach-lock-panel.peach-glass {3591  background: rgba(240, 233, 223, 0.82);3592  border: 1px solid rgba(26, 18, 8, 0.08);3593  box-shadow:3594    inset 0 1px 0 rgba(255, 255, 255, 0.4),3595    0 8px 24px rgba(80, 56, 32, 0.15);3596}35973598@supports not (backdrop-filter: blur(1px)) {3599  .peach-lock-panel.peach-glass {3600    background: rgba(26, 20, 16, 0.92);3601    box-shadow:3602      inset 0 1px 0 rgba(255, 255, 255, 0.05),3603      0 12px 28px rgba(0, 0, 0, 0.4);3604  }3605  .light .peach-lock-panel.peach-glass,3606  [data-theme="light"] .peach-lock-panel.peach-glass {3607    background: rgba(240, 233, 223, 0.98);3608  }3609}36103611.peach-lock-panel--secondary {3612  gap: 12px;3613}36143615.peach-lock-panel-header {3616  display: flex;3617  align-items: baseline;3618  justify-content: space-between;3619  gap: 12px;3620}36213622.peach-lock-option-grid {3623  display: grid;3624  gap: 10px;3625}36263627.peach-lock-option {3628  width: 100%;3629  display: grid;3630  gap: 6px;3631  padding: 14px 15px;3632  border-radius: 16px;3633  border: 1px solid rgba(240, 232, 216, 0.08);3634  background: rgba(240, 232, 216, 0.02);3635  color: var(--peach-t0);3636  text-align: left;3637  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3638}36393640.peach-lock-option:hover {3641  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3642  background: rgba(240, 232, 216, 0.04);3643  transform: translateY(-1px);3644}36453646.peach-lock-option-title {3647  font-size: 0.75rem;3648  color: var(--peach-t0);3649}36503651.peach-lock-option-copy {3652  font-size: 0.6875rem;3653  line-height: 1.55;3654  color: var(--peach-t1);3655}36563657.peach-onboarding-stack {3658  margin-top: 2px;3659}3660.peach-lock-panel-footer {3661  display: grid;3662  gap: 6px;3663  margin-top: 2px;3664  padding-top: 10px;3665  border-top: 1px solid rgba(240, 232, 216, 0.06);3666}36673668/* ── Restore tab view ─────────────────────────────────────────────────────3669   Tab-based restore screen replacing the old three-card picker. */36703671.peach-restore-tabview {3672  overflow: hidden;3673}36743675.peach-restore-tabcard {3676  flex: 1;3677  display: flex;3678  flex-direction: column;3679  gap: 0;3680  padding: 0;3681  overflow: hidden;3682  cursor: default;3683  user-select: none;3684  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3685}36863687/* ── Tab selector ─────────────────────────────────────────────────────── */36883689.peach-restore-tabs {3690  display: flex;3691  justify-content: space-around;3692  padding: 14px 10px 10px;3693  border-bottom: 1px solid var(--peach-t3);3694  gap: 2px;3695  overflow: hidden;3696  scrollbar-width: none;3697}3698.peach-restore-tabs::-webkit-scrollbar { display: none; }36993700.peach-restore-tab {3701  background: none;3702  border: none;3703  cursor: pointer;3704  padding: 3px 2px;3705  font-family: 'Cormorant Garamond', Georgia, serif;3706  font-style: italic;3707  font-size: 11px;3708  color: var(--peach-t2);3709  transition: color 150ms ease, text-shadow 150ms ease;3710  flex: 1;3711  min-width: 0;3712  text-align: center;3713  white-space: nowrap;3714  overflow: hidden;3715  text-overflow: ellipsis;3716}3717.peach-restore-tab:hover {3718  color: var(--peach-accent);3719  text-shadow:3720    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3721    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3722}3723.peach-restore-tab.is-active {3724  color: var(--peach-accent);3725  text-shadow:3726    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3727    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3728}37293730/* ── Content area ─────────────────────────────────────────────────────── */37313732.peach-restore-content {3733  padding: 16px 16px 14px;3734  display: flex;3735  flex-direction: column;3736  gap: 8px;3737  overflow: hidden;3738  scrollbar-width: none;3739  flex: 1;3740}3741.peach-restore-content::-webkit-scrollbar { display: none; }3742.peach-restore-content > * {3743  overflow: hidden;3744  scrollbar-width: none;3745}3746.peach-restore-content > *::-webkit-scrollbar { display: none; }37473748/* ── Shared tab inner layout ──────────────────────────────────────────── */37493750.peach-rt-symbols,3751.peach-rt-csv,3752.peach-rt-phone {3753  display: flex;3754  flex-direction: column;3755  gap: 8px;3756  overflow: hidden;3757}37583759.peach-rt-submit {3760  width: 100%;3761}37623763.peach-rt-error {3764  margin: 0;3765  font-size: 0.6875rem;3766  color: var(--peach-breach);3767  line-height: 1.4;3768}37693770/* ── PeachScript tab ──────────────────────────────────────────────────── */37713772.peach-restore-symbols-textarea {3773  font-family: 'PeachScript', monospace;3774  font-size: 13px;3775  line-height: 1.9;3776  letter-spacing: 0.1em;3777  word-break: break-all;3778  resize: none;3779  width: 100%;3780  min-height: 56px;3781  max-height: 72px;3782  overflow: hidden;3783  scrollbar-width: none;3784  -ms-overflow-style: none;3785  box-sizing: border-box;3786  padding: 6px 8px;3787  border-radius: 8px;3788  border: 1px solid var(--peach-t3);3789  background: rgba(240, 232, 216, 0.03);3790  color: var(--peach-t0);3791}3792.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3793.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }37943795.peach-restore-symbols-pass {3796  width: 100%;3797  box-sizing: border-box;3798  padding: 7px 10px;3799  border-radius: 8px;3800  border: 1px solid var(--peach-t3);3801  background: rgba(240, 232, 216, 0.03);3802  color: var(--peach-t0);3803  font-size: 0.8125rem;3804}3805.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3806.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }38073808.peach-rt-divider {3809  text-align: center;3810  font-size: 0.6875rem;3811  color: var(--peach-t2);3812  font-style: italic;3813}38143815.peach-rt-file-label {3816  width: 100%;3817  justify-content: center;3818}38193820.peach-rt-anim-canvas {3821  width: 100%;3822  height: 180px;3823  border-radius: 10px;3824  overflow: hidden;3825  display: block;3826}38273828/* ── CSV tab ──────────────────────────────────────────────────────────── */38293830.peach-rt-csv-sources {3831  margin: 0;3832  font-size: 0.6875rem;3833  color: var(--peach-t2);3834  line-height: 1.5;3835  text-align: center;3836}38373838.peach-rt-csv-warning {3839  margin: 0;3840  font-family: "IBM Plex Mono", monospace;3841  font-size: 0.5625rem;3842  letter-spacing: 0.12em;3843  color: var(--peach-breach);3844  text-align: center;3845}38463847/* ── From Phone tab ───────────────────────────────────────────────────── */38483849.peach-rt-phone-code {3850  margin: 0;3851  text-align: center;3852  font-family: "IBM Plex Mono", monospace;3853  font-size: 22px;3854  letter-spacing: 0.18em;3855  color: var(--peach-t0);3856}38573858.peach-rt-phone-qr {3859  display: block;3860  width: 96px;3861  height: 96px;3862  margin: 0 auto;3863  border-radius: 6px;3864  image-rendering: pixelated;3865  overflow: hidden;3866}38673868.peach-rt-phone-hint {3869  margin: 0;3870  font-size: 0.6875rem;3871  color: var(--peach-t2);3872  line-height: 1.55;3873  text-align: center;3874}38753876/* ── Intro popup ──────────────────────────────────────────────────────── */38773878.peach-restore-intro-overlay {3879  position: absolute;3880  inset: 0;3881  z-index: 100;3882  display: flex;3883  align-items: center;3884  justify-content: center;3885  padding: 20px;3886  background: rgba(12, 10, 6, 0.7);3887  backdrop-filter: blur(4px);3888  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3889}38903891.peach-restore-intro-card {3892  width: 100%;3893  display: flex;3894  flex-direction: column;3895  gap: 12px;3896  padding: 22px 20px 20px;3897  border-radius: 16px;3898  border: 1px solid var(--peach-t3);3899  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3900  backdrop-filter: blur(4px);3901  -webkit-backdrop-filter: blur(4px);3902  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3903}39043905.peach-restore-intro-headline {3906  margin: 0;3907  font-family: var(--font-display);3908  font-style: italic;3909  font-size: 20px;3910  font-weight: 400;3911  color: var(--peach-t0);3912}39133914.peach-restore-intro-body {3915  display: flex;3916  flex-direction: column;3917  gap: 8px;3918}3919.peach-restore-intro-body p {3920  margin: 0;3921  font-size: 0.75rem;3922  color: var(--peach-t1);3923  line-height: 1.5;3924}39253926.peach-restore-intro-btn {3927  width: 100%;3928  margin-top: 4px;3929}39303931/* Snapshot restore panel */3932.peach-snapshot-panel {3933  gap: 10px;3934  overflow-y: auto;3935  max-height: 340px;3936}3937.peach-snapshot-list {3938  display: flex;3939  flex-direction: column;3940  gap: 4px;3941}3942.peach-snapshot-row {3943  display: flex;3944  align-items: center;3945  justify-content: space-between;3946  width: 100%;3947  padding: 8px 10px;3948  border-radius: 8px;3949  border: 1px solid rgba(240, 232, 216, 0.07);3950  background: transparent;3951  cursor: pointer;3952  transition: border-color 120ms, background 120ms;3953  text-align: left;3954  gap: 8px;3955}3956.peach-snapshot-row:hover {3957  border-color: rgba(240, 232, 216, 0.14);3958  background: rgba(240, 232, 216, 0.03);3959}3960.peach-snapshot-row.is-selected {3961  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3962  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);3963}3964.peach-snapshot-time {3965  font-size: 11.5px;3966  color: var(--peach-t0);3967  flex: 1;3968}3969.peach-snapshot-count {3970  font-family: "IBM Plex Mono", monospace;3971  font-size: 0.625rem;3972  color: var(--peach-t2);3973  flex-shrink: 0;3974}3975.peach-snapshot-confirm {3976  display: flex;3977  flex-direction: column;3978  gap: 8px;3979  padding-top: 10px;3980  border-top: 1px solid rgba(240, 232, 216, 0.06);3981}3982.peach-snapshot-warning {3983  display: flex;3984  align-items: flex-start;3985  gap: 6px;3986  font-size: 10.5px;3987  color: rgba(220, 80, 60, 0.85);3988  line-height: 1.55;3989}3990.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }3991.peach-snapshot-confirm-row {3992  display: flex;3993  gap: 6px;3994  align-items: center;3995}3996.peach-snapshot-restore-btn {3997  width: 100%;3998}3999.peach-lock-hero--unlock .peach-lock-hero-art {4000  width: 112px;4001  height: 112px;4002  right: 0;4003  top: 2px;4004  opacity: 0.1;4005}40064007.peach-card {4008  border: 1px solid var(--peach-t3);4009  border-radius: 18px;4010  background:4011    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4012  box-shadow:4013    inset 0 0 0 1px var(--peach-border-accent),4014    inset 0 1px 0 rgba(240, 232, 216, 0.04),4015    0 12px 32px rgba(0, 0, 0, 0.14);4016  overflow: hidden;4017}40184019.peach-card-active {4020  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4021  box-shadow:4022    inset 0 1px 0 rgba(240, 232, 216, 0.05),4023    0 16px 38px rgba(0, 0, 0, 0.18),4024    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4025}40264027.peach-card-disabled {4028  opacity: 0.72;4029}40304031.peach-card-header {4032  width: 100%;4033  padding: 13px 16px 11px;4034  background: transparent;4035  color: var(--peach-t0);4036  display: flex;4037  justify-content: space-between;4038  align-items: center;4039  text-align: left;4040  font-size: 0.75rem;4041}40424043.peach-card-body {4044  padding: 0 16px 16px;4045  display: grid;4046  gap: 9px;4047}40484049.peach-card-tag {4050  color: var(--peach-t2);4051  font-family: "IBM Plex Mono", monospace;4052  font-size: 0.5625rem;4053  letter-spacing: 0.12em;4054  text-transform: uppercase;4055}40564057.peach-empty-copy {4058  display: grid;4059  gap: 6px;4060  color: var(--peach-t1);4061  font-size: 0.8125rem;4062}40634064.peach-lock-submit {4065  width: 100%;4066  box-shadow:4067    0 1px 0 rgba(255,255,255,0.10) inset,4068    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4069    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4070    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4071}40724073.peach-lock-secondary {4074  width: 100%;4075  border-color: var(--peach-t3);4076  background: rgba(240, 232, 216, 0.02);4077}40784079.peach-lock-secondary:hover {4080  background: rgba(240, 232, 216, 0.04);4081}40824083.peach-lock-note {4084  max-width: none;4085  line-height: 1.55;4086  margin: 0;4087}40884089.peach-overlay-action {4090  font-size: 0.625rem;4091  padding: 4px 8px;4092  letter-spacing: 0.06em;4093  min-width: 44px;4094  text-align: center;4095}40964097.peach-inline-action {4098  flex-shrink: 0;4099  font-size: 0.5625rem;4100  letter-spacing: 0.1em;4101  text-transform: uppercase;4102  padding: 4px 7px;4103}4104.peach-password-toggle-btn {4105  display: inline-flex;4106  align-items: center;4107  justify-content: center;4108  min-width: 30px;4109  min-height: 26px;4110  padding: 0 7px;4111  border: 1px solid var(--peach-t3);4112  border-radius: 999px;4113  background: rgba(240, 232, 216, 0.04);4114  color: var(--peach-t2);4115  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4116}4117.peach-password-toggle-btn:hover {4118  border-color: var(--peach-t2);4119  color: var(--peach-t0);4120  background: rgba(240, 232, 216, 0.06);4121}41224123.peach-new-textarea {4124  width: 100%;4125  min-height: 88px;4126  resize: vertical;4127  border: 0;4128  outline: none;4129  background: transparent;4130  color: var(--peach-t1);4131  font-family: "IBM Plex Mono", monospace;4132  font-size: 0.75rem;4133  line-height: 1.65;4134  caret-color: var(--peach-accent);4135}41364137.peach-new-textarea::placeholder {4138  color: var(--peach-t2);4139  opacity: 0.7;4140}41414142.peach-settings-actions {4143  display: grid;4144  gap: 8px;4145}41464147.peach-sync-section-label {4148  font-size: 0.6875rem;4149  color: var(--peach-t2);4150  text-transform: uppercase;4151  letter-spacing: 0.05em;4152}41534154.peach-sync-network-note {4155  margin: 0 0 6px;4156  font-size: 0.75rem;4157  color: var(--peach-t2);4158  line-height: 1.4;4159}41604161.peach-settings-row--tappable {4162  background: none;4163  border: none;4164  width: 100%;4165  text-align: left;4166  cursor: pointer;4167  color: var(--peach-t1);4168  font-size: 0.8125rem;4169}4170.peach-settings-row--tappable:hover {4171  color: var(--peach-t0);4172}41734174.peach-sync-pro-hint {4175  display: flex;4176  flex-direction: column;4177  align-items: flex-start;4178  gap: 8px;4179  padding: 12px 0 4px;4180}41814182.peach-sync-device-row {4183  display: flex;4184  justify-content: space-between;4185  align-items: center;4186  padding: 6px 0;4187  border-bottom: 1px solid var(--peach-t3);4188}41894190.peach-sync-device-info {4191  display: flex;4192  flex-direction: column;4193  gap: 2px;4194}41954196.peach-sync-device-name {4197  font-size: 0.8125rem;4198  color: var(--peach-t0);4199}42004201.peach-sync-device-meta {4202  font-size: 0.6875rem;4203  color: var(--peach-t2);4204}42054206.peach-sync-status-dot {4207  display: inline-block;4208  width: 8px;4209  height: 8px;4210  border-radius: 50%;4211  vertical-align: middle;4212}42134214.peach-sync-remove-btn {4215  color: var(--peach-breach);4216}42174218.peach-sync-advanced-row {4219  display: flex;4220  justify-content: space-between;4221  align-items: center;4222  padding: 6px 0;4223  gap: 12px;4224}42254226.peach-sync-advanced-info {4227  display: flex;4228  flex-direction: column;4229  gap: 2px;4230  flex: 1;4231}42324233.peach-sync-advanced-name {4234  font-size: 0.8125rem;4235  color: var(--peach-t0);4236}42374238.peach-sync-reset-confirm {4239  display: flex;4240  flex-direction: column;4241  gap: 8px;4242  padding: 10px;4243  border: 1px solid var(--peach-breach);4244  border-radius: 10px;4245  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4246}42474248.peach-sync-reset-confirm-headline {4249  font-size: 0.8125rem;4250  font-weight: 600;4251  color: var(--peach-t0);4252  margin: 0;4253}42544255.peach-sync-reset-confirm-body {4256  font-size: 0.75rem;4257  color: var(--peach-t1);4258  margin: 0;4259  line-height: 1.4;4260}42614262.peach-btn--danger {4263  background: var(--peach-breach);4264  color: #fff;4265  border-color: var(--peach-breach);4266}4267.peach-btn--danger:hover:not(:disabled) {4268  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4269}4270.peach-btn--danger:disabled {4271  opacity: 0.55;4272  cursor: not-allowed;4273}42744275.peach-sync-hero-icon {4276  color: var(--peach-t1);4277  opacity: 0.85;4278}42794280.peach-import-preview {4281  margin-bottom: 12px;4282  max-height: 152px;4283  overflow-y: auto;4284  border: 1px solid var(--peach-t3);4285  border-radius: 10px;4286  padding: 8px 10px;4287  display: grid;4288  gap: 8px;4289  background: rgba(240, 232, 216, 0.02);4290}42914292.peach-import-preview-row {4293  display: flex;4294  justify-content: space-between;4295  gap: 10px;4296  font-size: 0.6875rem;4297  color: var(--peach-t1);4298}42994300.peach-import-preview-title {4301  color: var(--peach-t0);4302  flex: 1;4303  min-width: 0;4304  overflow: hidden;4305  text-overflow: ellipsis;4306  white-space: nowrap;4307}43084309.peach-import-preview-meta {4310  color: var(--peach-t2);4311  flex-shrink: 0;4312  max-width: 42%;4313  overflow: hidden;4314  text-overflow: ellipsis;4315  white-space: nowrap;4316}43174318.peach-import-preview-more {4319  color: var(--peach-t2);4320  font-size: 0.625rem;4321}43224323.peach-restore-copy {4324  margin: 0;4325  color: var(--peach-t1);4326  font-size: 0.6875rem;4327  line-height: 1.6;4328}43294330.peach-restore-warning {4331  padding: 10px 12px;4332  border-radius: 12px;4333  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4334  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4335  color: var(--peach-t0);4336  font-size: 0.6875rem;4337  line-height: 1.55;4338}43394340.peach-provider-chips {4341  display: flex;4342  flex-wrap: wrap;4343  gap: 6px;4344}43454346.peach-provider-chip {4347  display: inline-flex;4348  align-items: center;4349  padding: 5px 8px;4350  border-radius: 999px;4351  border: 1px solid var(--peach-t3);4352  background: rgba(240, 232, 216, 0.02);4353  color: var(--peach-t1);4354  font-family: "IBM Plex Mono", monospace;4355  font-size: 0.5rem;4356  letter-spacing: 0.08em;4357  text-transform: uppercase;4358}43594360.peach-restore-file,4361.peach-restore-input {4362  width: 100%;4363  border-radius: 10px;4364  border: 1px solid var(--peach-t3);4365  background: var(--peach-s2);4366  color: var(--peach-t0);4367  font-size: 0.75rem;4368}43694370.peach-restore-file {4371  padding: 9px 10px;4372}43734374.peach-restore-file::file-selector-button {4375  margin-right: 10px;4376  padding: 7px 10px;4377  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4378  border-radius: 999px;4379  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4380  color: var(--peach-t0);4381  font-size: 0.625rem;4382  letter-spacing: 0.08em;4383  text-transform: uppercase;4384  cursor: pointer;4385}43864387.peach-restore-input {4388  padding: 10px 12px;4389}43904391.peach-auth-grid {4392  display: grid;4393  gap: 10px;4394}43954396.peach-import-summary {4397  color: var(--peach-t1);4398  font-size: 0.75rem;4399  line-height: 1.6;4400  margin-bottom: 12px;4401}44024403.peach-restore-error {4404  color: rgba(220, 80, 60, 0.95);4405  font-size: 0.75rem;4406  line-height: 1.55;4407}44084409.peach-passkey-card {4410  max-width: 400px;4411  margin: auto 16px;4412  align-self: center;4413  width: calc(100% - 32px);4414}44154416/* Center the approval card vertically inside the overlay-view (which sets4417 * flex-direction: column without justify-content). Without this, the card4418 * sits at the top with a tall empty band below — looks unfinished on the4419 * 320px popup. */4420.peach-overlay-view:has(.peach-passkey-card) {4421  justify-content: center;4422}44234424.peach-pro-badge {4425  padding: 2px 6px;4426  border-radius: 999px;4427  font-family: var(--font-ui);4428  font-size: 0.625rem;4429  letter-spacing: 0.08em;4430  text-transform: uppercase;4431  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4432  color: var(--peach-accent);4433}44344435/* ── Shortcuts rebind table ─────────────────────────────────── */4436.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4437.peach-shortcut-row {4438  display: flex;4439  align-items: center;4440  gap: 10px;4441  padding: 6px 0;4442}4443.peach-shortcut-row-label {4444  flex: 1;4445  font-size: 0.75rem;4446  color: var(--peach-t0);4447}4448.peach-shortcut-chip {4449  min-width: 64px;4450  padding: 4px 10px;4451  border-radius: 6px;4452  border: 1px solid var(--peach-t3);4453  background: var(--peach-input-bg, var(--surface-card));4454  color: var(--peach-t0);4455  font-family: var(--font-mono);4456  font-size: 0.6875rem;4457  letter-spacing: 0.04em;4458  cursor: pointer;4459  text-align: center;4460  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4461}4462.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4463.peach-shortcut-chip.is-custom {4464  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4465  color: var(--peach-accent);4466}4467.peach-shortcut-chip.is-capturing {4468  border-color: var(--peach-accent);4469  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4470  color: var(--peach-accent);4471  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4472}4473@keyframes peach-shortcut-capture-pulse {4474  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4475  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4476}4477.peach-shortcut-reset {4478  background: transparent;4479  border: none;4480  cursor: pointer;4481  color: var(--peach-t2);4482  padding: 4px 6px;4483  border-radius: 5px;4484  font-size: 0.875rem;4485  line-height: 1;4486  transition: color 120ms ease, background 120ms ease;4487}4488.peach-shortcut-reset:hover {4489  color: var(--peach-t0);4490  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4491}4492.peach-shortcuts-conflict {4493  margin: 4px 0 0;4494  padding: 8px 10px;4495  border-radius: 7px;4496  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4497  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4498  font-family: var(--font-mono);4499  font-size: 0.6875rem;4500  color: var(--peach-t0);4501}45024503/* ── Help dialog overlay (? to open) ────────────────────────── */4504.peach-shortcuts-help-backdrop {4505  position: fixed;4506  inset: 0;4507  background: rgba(0, 0, 0, 0.55);4508  backdrop-filter: blur(2px);4509  display: flex;4510  align-items: center;4511  justify-content: center;4512  z-index: 1000;4513  animation: peach-help-fade-in 140ms ease forwards;4514}4515@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4516.peach-shortcuts-help-card {4517  width: min(320px, 92vw);4518  max-height: 80vh;4519  overflow-y: auto;4520  border-radius: 14px;4521  border: 1px solid var(--peach-t3);4522  background: var(--peach-bg);4523  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4524  padding: 16px 18px 18px;4525  display: flex;4526  flex-direction: column;4527  gap: 12px;4528}4529.peach-shortcuts-help-head {4530  display: flex; align-items: center; justify-content: space-between;4531}4532.peach-shortcuts-help-head h3 {4533  margin: 0;4534  font-family: var(--font-display);4535  font-style: italic;4536  font-weight: 400;4537  font-size: 22px;4538  color: var(--peach-t0);4539}4540.peach-shortcuts-help-close {4541  background: transparent;4542  border: none;4543  color: var(--peach-t2);4544  cursor: pointer;4545  font-size: 0.875rem;4546  padding: 4px 8px;4547  border-radius: 5px;4548}4549.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4550.peach-shortcuts-help-body ul {4551  list-style: none; padding: 0; margin: 4px 0 12px;4552  display: grid; gap: 8px;4553}4554.peach-shortcuts-help-body li {4555  display: flex; align-items: center; justify-content: space-between; gap: 12px;4556  font-size: 0.75rem; color: var(--peach-t0);4557}4558.peach-shortcuts-help-body kbd {4559  font-family: var(--font-mono);4560  font-size: 0.6875rem;4561  padding: 3px 8px;4562  border-radius: 6px;4563  background: var(--surface-card);4564  border: 1px solid var(--peach-t3);4565  color: var(--peach-accent);4566  letter-spacing: 0.04em;4567}45684569/* ── Pro promo on Account screen ────────────────────────────── */4570.peach-pro-promo {4571  position: relative;4572  border-radius: 14px;4573  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4574  background:4575    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4576    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4577    var(--surface-card);4578  overflow: hidden;4579  margin-bottom: 14px;4580}4581.peach-pro-promo-glow {4582  position: absolute;4583  inset: -40% -20% auto auto;4584  width: 220px; height: 220px;4585  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4586  pointer-events: none;4587  filter: blur(8px);4588}4589.peach-pro-promo-inner {4590  position: relative;4591  padding: 18px 18px 16px;4592}4593.peach-pro-promo-title {4594  font-family: var(--font-display);4595  font-style: italic;4596  font-weight: 400;4597  font-size: 28px;4598  line-height: 1;4599  letter-spacing: -0.005em;4600  color: var(--peach-t0);4601  margin: 0 0 4px;4602}4603.peach-pro-promo-tagline {4604  font-family: var(--font-mono);4605  font-size: 0.625rem;4606  letter-spacing: 0.06em;4607  color: var(--peach-t2);4608  margin: 0 0 14px;4609}4610.peach-pro-promo-list {4611  list-style: none;4612  margin: 0 0 16px;4613  padding: 0;4614  display: grid;4615  gap: 9px;4616}4617.peach-pro-promo-list li {4618  display: flex;4619  align-items: flex-start;4620  gap: 9px;4621  font-size: 0.75rem;4622  color: var(--peach-t1);4623  line-height: 1.4;4624}4625.peach-pro-promo-list svg {4626  width: 14px;4627  height: 14px;4628  flex-shrink: 0;4629  color: var(--peach-accent);4630  margin-top: 2px;4631}4632.peach-pro-promo-list span {4633  color: var(--peach-t0);4634}4635.peach-pro-promo-cta {4636  width: 100%;4637  background: var(--peach-accent);4638  color: #fff;4639  border: none;4640  padding: 9px 12px;4641  border-radius: 9px;4642  font-size: 0.75rem;4643  font-weight: 500;4644  font-family: var(--font-ui);4645  letter-spacing: 0.02em;4646  text-decoration: none;4647  display: inline-flex;4648  align-items: center;4649  justify-content: center;4650  cursor: pointer;4651  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4652  box-shadow: 0 2px 16px var(--peach-glow);4653}4654.peach-pro-promo-cta:hover {4655  filter: brightness(1.07);4656  box-shadow: 0 4px 24px var(--peach-glow);4657  transform: translateY(-1px);4658}4659.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }46604661.peach-pro-or-divider {4662  display: flex;4663  align-items: center;4664  gap: 10px;4665  margin: 4px 0 12px;4666  font-family: var(--font-mono);4667  font-size: 0.625rem;4668  letter-spacing: 0.06em;4669  color: var(--peach-t2);4670  text-transform: uppercase;4671}4672.peach-pro-or-divider::before,4673.peach-pro-or-divider::after {4674  content: "";4675  flex: 1;4676  height: 1px;4677  background: var(--peach-t3);4678}46794680.peach-loading {4681  position: absolute;4682  inset: 0;4683  display: flex;4684  align-items: center;4685  justify-content: center;4686  background: var(--bg);4687  animation: peach-loading-pulse 1.2s ease-in-out infinite;4688}46894690@keyframes peach-loading-pulse {4691  0%, 100% { opacity: 0.6; }4692  50% { opacity: 1; }4693}46944695/* ── Health Dashboard ─────────────────────────────────────────────────── */4696.peach-health-body {4697  flex: 1;4698  overflow-y: auto;4699  display: flex;4700  flex-direction: column;4701  /* Hide the platform scrollbar — every other scrollable surface in the4702   * popup hides it; the Health view was the one outlier and it ruined the4703   * polish. Behavior unchanged, just no rail rendered. */4704  scrollbar-width: none;4705  -ms-overflow-style: none;4706}4707.peach-health-body::-webkit-scrollbar { display: none; }47084709/* Loading screen for the Vault Health view. The advanced report computation4710 * can run for a few seconds on a large vault — without a clear loading4711 * screen the surface looked broken (the entry view bleeds through the4712 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4713.peach-health-loading-screen {4714  flex: 1;4715  display: flex;4716  flex-direction: column;4717  align-items: center;4718  justify-content: center;4719  gap: 14px;4720  padding: 32px 28px;4721  text-align: center;4722}47234724.peach-health-loading-glyph {4725  width: 48px;4726  height: 48px;4727  display: flex;4728  align-items: center;4729  justify-content: center;4730  border-radius: 14px;4731  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4732  color: var(--peach-accent);4733}47344735.peach-health-loading-title {4736  margin: 0;4737  font-family: var(--font-display);4738  font-style: italic;4739  font-weight: 300;4740  font-size: 19px;4741  line-height: 1.2;4742  color: var(--peach-t0);4743}47444745.peach-health-loading-copy {4746  margin: 0;4747  max-width: 240px;4748  font-size: 0.75rem;4749  line-height: 1.55;4750  color: var(--peach-t2);4751}47524753.peach-health-loading-track {4754  width: 200px;4755  height: 3px;4756  margin-top: 6px;4757  border-radius: 999px;4758  background: rgba(240, 232, 216, 0.06);4759  overflow: hidden;4760}47614762.peach-health-loading-fill {4763  width: 40%;4764  height: 100%;4765  border-radius: inherit;4766  background: linear-gradient(4767    90deg,4768    transparent 0%,4769    var(--peach-accent) 50%,4770    transparent 100%4771  );4772  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4773}47744775@keyframes peach-health-loading-sweep {4776  0%   { transform: translateX(-100%); }4777  100% { transform: translateX(350%); }4778}47794780[data-motion="reduce"] .peach-health-loading-fill,4781[data-motion="reduce"] .peach-health-loading-glyph svg path {4782  animation: none;4783}47844785.peach-health-summary {4786  padding: 10px 16px 6px;4787  font-family: "IBM Plex Mono", monospace;4788  font-size: 0.6875rem;4789}4790.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4791.peach-health-summary-ok { color: var(--peach-t2); }47924793.peach-health-check-row {4794  padding: 0 16px 10px;4795}4796.peach-health-check-btn {4797  width: 100%;4798  display: flex;4799  align-items: center;4800  justify-content: center;4801}48024803.peach-health-sections {4804  flex: 1;4805  display: flex;4806  flex-direction: column;4807}48084809.peach-health-section {4810  border-bottom: 1px solid var(--peach-t3);4811}48124813.peach-health-section-header {4814  width: 100%;4815  display: flex;4816  align-items: center;4817  justify-content: space-between;4818  padding: 9px 16px;4819  background: transparent;4820  cursor: pointer;4821  color: var(--peach-t0);4822}48234824.peach-health-section-title-row {4825  display: flex;4826  align-items: center;4827  gap: 8px;4828}48294830.peach-health-count-badge {4831  display: inline-flex;4832  align-items: center;4833  justify-content: center;4834  min-width: 20px;4835  height: 18px;4836  padding: 0 5px;4837  border-radius: 999px;4838  background: rgba(220,80,60,0.15);4839  border: 1px solid rgba(220,80,60,0.25);4840  font-family: "IBM Plex Mono", monospace;4841  font-size: 0.5625rem;4842  color: rgba(220,80,60,0.9);4843}48444845.peach-health-section-title {4846  font-family: "IBM Plex Mono", monospace;4847  font-size: 0.6875rem;4848  text-transform: uppercase;4849  letter-spacing: 0.1em;4850  color: var(--peach-t1);4851}48524853.peach-health-chevron {4854  color: var(--peach-t2);4855  transition: transform 200ms ease;4856  flex-shrink: 0;4857}4858.peach-health-chevron.is-expanded {4859  transform: rotate(180deg);4860}48614862.peach-health-section-body {4863  padding: 0 16px 10px;4864  display: flex;4865  flex-direction: column;4866  gap: 4px;4867}48684869.peach-health-row {4870  display: flex;4871  align-items: flex-start;4872  justify-content: space-between;4873  gap: 8px;4874  padding: 6px 8px;4875  border-radius: 8px;4876  background: rgba(240,232,216,0.02);4877}48784879.peach-health-row-info {4880  flex: 1;4881  min-width: 0;4882  display: flex;4883  flex-direction: column;4884  gap: 2px;4885}48864887.peach-health-row-name {4888  font-family: var(--font-display);4889  font-size: 0.9375rem;4890  font-style: italic;4891  font-weight: 400;4892  color: var(--peach-t0);4893  white-space: nowrap;4894  overflow: hidden;4895  text-overflow: ellipsis;4896}48974898.peach-health-row-meta {4899  font-family: "IBM Plex Mono", monospace;4900  font-size: 0.5625rem;4901  color: var(--peach-t2);4902  letter-spacing: 0.05em;4903}49044905.peach-health-fix-btn {4906  font-size: 0.5625rem;4907  letter-spacing: 0.08em;4908  text-transform: uppercase;4909  padding: 4px 7px;4910  flex-shrink: 0;4911  display: flex;4912  align-items: center;4913}49144915.peach-health-empty {4916  font-family: "IBM Plex Mono", monospace;4917  font-size: 0.625rem;4918  color: var(--peach-t2);4919  padding: 6px 0;4920}49214922.peach-health-loading {4923  font-family: "IBM Plex Mono", monospace;4924  font-size: 0.625rem;4925  color: var(--peach-t2);4926  padding: 6px 0;4927  display: flex;4928  align-items: center;4929  gap: 6px;4930}49314932.peach-health-loading::before {4933  content: "";4934  width: 10px;4935  height: 10px;4936  border: 1.5px solid var(--peach-t3);4937  border-top-color: var(--peach-accent);4938  border-radius: 50%;4939  animation: peach-spin 600ms linear infinite;4940}49414942@keyframes peach-spin {4943  to { transform: rotate(360deg); }4944}49454946.peach-spinner {4947  width: 32px;4948  height: 32px;4949  border: 2px solid var(--peach-s2);4950  border-top-color: var(--peach-accent);4951  border-radius: 50%;4952  margin: 0 auto 16px;4953  animation: peach-spin 0.8s linear infinite;4954}49554956.peach-progress-screen {4957  text-align: center;4958  padding: 32px 16px;4959}49604961.peach-progress-screen-title {4962  font-size: 0.8125rem;4963  color: var(--peach-t0);4964  margin-bottom: 16px;4965}49664967.peach-progress-screen-stage {4968  font-size: 0.6875rem;4969  color: var(--peach-t2);4970  min-height: 14px;4971}49724973.peach-progress-screen-note {4974  font-size: 0.625rem;4975  color: var(--peach-t2);4976  margin-top: 8px;4977}49784979.peach-pairing-body {4980  flex: 1;4981  overflow-y: auto;4982  display: flex;4983  flex-direction: column;4984}49854986.peach-pairing-content {4987  flex: 1;4988  display: flex;4989  flex-direction: column;4990  align-items: center;4991  justify-content: center;4992  gap: 14px;4993  padding: 28px 20px;4994  text-align: center;4995}49964997.peach-pairing-code-screen {4998  gap: 18px;4999}50005001.peach-pairing-headline {5002  font-family: var(--font-display);5003  font-style: italic;5004  font-weight: 300;5005  font-size: 28px;5006  color: var(--peach-t0);5007  margin: 0;5008  line-height: 1;5009}50105011.peach-pairing-subline {5012  font-size: 0.75rem;5013  color: var(--peach-t2);5014  max-width: 220px;5015  line-height: 1.5;5016  margin: 0;5017}50185019.peach-pairing-subline--center {5020  text-align: center;5021}50225023/* 6-digit pairing code — both display (.peach-pairing-code) and entry5024   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking5025   so the two modes feel like the same surface. */5026.peach-pairing-code {5027  font-family: "IBM Plex Mono", monospace;5028  font-size: 36px;5029  letter-spacing: 0.25em;5030  color: var(--peach-t0);5031  text-align: center;5032  padding: 24px 0;5033  text-shadow:5034    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5035    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5036  background: transparent;5037  border: 0;5038  cursor: default;5039  user-select: text;5040}50415042.peach-pairing-code--loading,5043.peach-pairing-code--expired {5044  font-size: 18px;5045  letter-spacing: 0.04em;5046  color: var(--peach-t2);5047  cursor: pointer;5048  text-shadow: none;5049}50505051.peach-pairing-qr-container {5052  display: flex;5053  flex-direction: column;5054  align-items: center;5055  gap: 10px;5056}50575058.peach-pairing-qr {5059  width: 240px;5060  height: 240px;5061  display: block;5062}50635064.peach-pairing-instruction {5065  font-size: 0.75rem;5066  color: var(--peach-t2);5067  text-align: center;5068  line-height: 1.5;5069  margin: 0;5070  max-width: 220px;5071}50725073.peach-pairing-expiry {5074  font-family: "IBM Plex Mono", monospace;5075  font-size: 13px;5076  letter-spacing: 0.06em;5077  color: var(--peach-t2);5078  margin: 0;5079}50805081.peach-pairing-regen {5082  font-size: 0.75rem;5083  color: var(--peach-accent);5084  background: transparent;5085  border: 0;5086  cursor: pointer;5087  padding: 4px 0;5088  text-decoration: underline;5089  text-underline-offset: 2px;5090}50915092.peach-pairing-code-input {5093  font-family: "IBM Plex Mono", monospace;5094  font-size: 36px;5095  letter-spacing: 0.25em;5096  color: var(--peach-t0);5097  background: transparent;5098  border: 0;5099  border-bottom: 1px solid var(--peach-t3);5100  outline: none;5101  text-align: center;5102  padding: 18px 0;5103  width: 220px;5104  caret-color: var(--peach-accent);5105  transition: border-color 160ms ease;5106}51075108.peach-pairing-code-input::placeholder {5109  color: var(--peach-t3);5110}51115112.peach-pairing-code-input:focus {5113  border-bottom-color: var(--peach-accent);5114}51155116.peach-pairing-toggle {5117  background: transparent;5118  border: 0;5119  color: var(--peach-t2);5120  font-size: 0.75rem;5121  padding: 8px 4px;5122  cursor: pointer;5123  transition: color 120ms ease;5124}51255126.peach-pairing-toggle:hover:not(:disabled) {5127  color: var(--peach-t1);5128}51295130.peach-pairing-toggle:disabled {5131  opacity: 0.5;5132  cursor: default;5133}51345135.peach-pairing-hint {5136  font-size: 0.6875rem;5137  color: var(--peach-t2);5138  margin: 0;5139  text-align: center;5140}51415142.peach-pairing-status {5143  display: flex;5144  align-items: center;5145  gap: 8px;5146  margin: 0;5147  font-size: 0.75rem;5148  color: var(--peach-t1);5149}51505151.peach-pairing-error {5152  margin: 0;5153  font-size: 0.6875rem;5154  color: var(--peach-breach);5155}51565157.peach-pairing-error--muted {5158  color: var(--peach-t2);5159}51605161.peach-pairing-spinner {5162  width: 12px;5163  height: 12px;5164  border: 1.5px solid var(--peach-t3);5165  border-top-color: var(--peach-accent);5166  border-radius: 50%;5167  animation: peach-spin 0.8s linear infinite;5168}51695170.peach-pairing-success-icon,5171.peach-pairing-error-icon,5172.peach-pairing-hero {5173  display: inline-flex;5174  align-items: center;5175  justify-content: center;5176}51775178/* Tag chips */5179.peach-tag-chip {5180  display: inline-flex;5181  align-items: center;5182  gap: 4px;5183  padding: 3px 8px;5184  border-radius: 999px;5185  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5186  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5187  color: var(--peach-t0);5188  font-family: "IBM Plex Mono", monospace;5189  font-size: 0.625rem;5190  letter-spacing: 0.04em;5191}51925193.peach-tag-chip-remove {5194  background: transparent;5195  border: none;5196  color: inherit;5197  opacity: 0.6;5198  cursor: pointer;5199  padding: 0;5200  font-size: 0.75rem;5201  line-height: 1;5202}52035204.peach-tag-chip-remove:hover {5205  opacity: 1;5206}52075208/* Tag input */5209.peach-tag-input-wrap {5210  border-bottom: 1px solid var(--peach-t3);5211}52125213.peach-tag-suggestions {5214  display: flex;5215  flex-wrap: wrap;5216  gap: 4px;5217  padding: 6px 0;5218}52195220.peach-tag-suggestion {5221  padding: 2px 8px;5222  border-radius: 999px;5223  border: 1px solid var(--peach-t3);5224  background: var(--peach-s2);5225  color: var(--peach-t1);5226  font-family: "IBM Plex Mono", monospace;5227  font-size: 0.625rem;5228  cursor: pointer;5229  transition: border-color 80ms ease, background 80ms ease;5230}52315232.peach-tag-suggestion:hover {5233  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5234  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5235}52365237/* Identity suggestions — shown below username/email inputs in new-entry form */5238@keyframes peach-suggest-in {5239  from { opacity: 0; transform: translateY(-4px); }5240  to   { opacity: 1; transform: none; }5241}52425243.peach-identity-suggestions {5244  display: flex;5245  flex-direction: column;5246  gap: 1px;5247  margin-top: 4px;5248  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5249}52505251.peach-identity-filter-row {5252  display: flex;5253  align-items: center;5254  gap: 4px;5255  padding: 2px 0 5px;5256}52575258.peach-identity-collapse-btn {5259  margin-left: auto;5260  background: transparent;5261  border: none;5262  cursor: pointer;5263  color: var(--peach-t3);5264  padding: 2px 4px;5265  display: flex;5266  align-items: center;5267  line-height: 0;5268  border-radius: 3px;5269  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5270}52715272.peach-identity-collapse-btn:hover {5273  color: var(--peach-t1);5274}52755276.peach-identity-collapse-btn.is-collapsed {5277  transform: rotate(-90deg);5278}52795280.peach-identity-rows {5281  display: grid;5282  grid-template-rows: 1fr;5283  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5284}52855286.peach-identity-rows.is-collapsed {5287  grid-template-rows: 0fr;5288}52895290.peach-identity-rows-inner {5291  overflow-y: auto;5292  min-height: 0;5293  max-height: 148px;5294  scrollbar-width: thin;5295  scrollbar-color: var(--peach-t3) transparent;5296  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5297  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5298}52995300.peach-identity-rows-inner::-webkit-scrollbar {5301  width: 4px;5302}53035304.peach-identity-rows-inner::-webkit-scrollbar-track {5305  background: transparent;5306}53075308.peach-identity-rows-inner::-webkit-scrollbar-thumb {5309  background: var(--peach-t3);5310  border-radius: 2px;5311}53125313.peach-identity-filter-pill {5314  padding: 2px 7px;5315  border-radius: 999px;5316  border: 1px solid var(--peach-t3);5317  background: transparent;5318  color: var(--peach-t2);5319  font-family: "IBM Plex Mono", monospace;5320  font-size: 0.6rem;5321  cursor: pointer;5322  transition: border-color 80ms, background 80ms, color 80ms;5323}53245325.peach-identity-filter-pill.is-on {5326  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5327  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5328  color: var(--peach-accent);5329}53305331.peach-identity-suggestion {5332  display: flex;5333  align-items: center;5334  gap: 6px;5335  width: 100%;5336  padding: 4px 6px;5337  border-radius: 5px;5338  border: none;5339  background: transparent;5340  cursor: pointer;5341  text-align: left;5342  transition: background 80ms ease;5343}53445345.peach-identity-suggestion:hover,5346.peach-identity-suggestion:focus {5347  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5348  outline: none;5349}53505351.peach-identity-suggestion-value {5352  font-family: "IBM Plex Mono", monospace;5353  font-size: 0.7rem;5354  color: var(--peach-t1);5355  overflow: hidden;5356  text-overflow: ellipsis;5357  white-space: nowrap;5358  flex: 1;5359  min-width: 0;5360}53615362.peach-identity-suggestion-type {5363  font-family: "IBM Plex Mono", monospace;5364  font-size: 0.55rem;5365  font-weight: 600;5366  flex-shrink: 0;5367  padding: 1px 4px;5368  border-radius: 3px;5369}53705371.peach-identity-suggestion-type--email {5372  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5373  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5374}53755376.peach-identity-suggestion-type--username {5377  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5378  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5379}53805381.peach-identity-suggestion-meta {5382  font-family: "IBM Plex Mono", monospace;5383  font-size: 0.6rem;5384  color: var(--peach-t3);5385  flex-shrink: 0;5386}53875388/* Tag filter strip */5389.peach-tag-filter-strip {5390  border-bottom: 1px solid var(--peach-t3);5391  flex-shrink: 0;5392}53935394.peach-tag-filter-chip {5395  display: inline-flex;5396  align-items: center;5397  padding: 4px 10px;5398  border-radius: 999px;5399  border: 1px solid var(--peach-t3);5400  background: transparent;5401  color: var(--peach-t2);5402  font-family: "IBM Plex Mono", monospace;5403  font-size: 0.5625rem;5404  letter-spacing: 0.06em;5405  text-transform: uppercase;5406  cursor: pointer;5407  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5408  white-space: nowrap;5409}54105411.peach-tag-filter-chip:hover {5412  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5413  color: var(--peach-t1);5414}54155416.peach-tag-filter-chip.is-selected {5417  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5418  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5419  color: var(--peach-t0);5420}54215422/* ─────────────────────────────────────────────────────────────────────────5423   v1.4.12 additions5424   ─────────────────────────────────────────────────────────────────────── */54255426/* Sort bar */5427.peach-sort-bar {5428  display: flex;5429  align-items: center;5430  gap: 4px;5431  padding: 5px 12px;5432  border-bottom: 1px solid var(--peach-t3);5433  flex-shrink: 0;5434  overflow-x: auto;5435  scrollbar-width: none;5436}54375438.peach-sort-btn {5439  padding: 2px 9px;5440  border-radius: 999px;5441  border: 1px solid transparent;5442  background: transparent;5443  color: var(--peach-t2);5444  font-family: "IBM Plex Mono", monospace;5445  font-size: 0.5625rem;5446  letter-spacing: 0.07em;5447  text-transform: uppercase;5448  cursor: pointer;5449  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5450  white-space: nowrap;5451}54525453.peach-sort-btn:hover {5454  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5455  color: var(--peach-t1);5456}54575458.peach-sort-btn.is-active {5459  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5460  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5461  color: var(--peach-t0);5462}54635464.peach-sort-domain-hint {5465  margin-left: auto;5466  font-family: "IBM Plex Mono", monospace;5467  font-size: 0.5625rem;5468  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5469  white-space: nowrap;5470  overflow: hidden;5471  text-overflow: ellipsis;5472  max-width: 110px;5473}54745475/* Tab-match badge on entry rows */5476.peach-tab-match-badge {5477  display: inline-block;5478  width: 6px;5479  height: 6px;5480  border-radius: 50%;5481  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5482  margin-left: 5px;5483  vertical-align: middle;5484  flex-shrink: 0;5485  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5486}54875488.peach-entry-row.is-tab-match {5489  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5490  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5491}54925493.peach-entry-row.is-tab-match:hover {5494  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5495}54965497/* Entry list stagger entrance */5498@keyframes peach-entry-fadein {5499  from { opacity: 0; transform: translateY(4px); }5500  to   { opacity: 1; transform: translateY(0); }5501}55025503.peach-vault-list .peach-entry-row {5504  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5505}55065507/* Button press micro-interaction */5508.peach-btn:active {5509  transform: scale(0.95);5510  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5511}55125513.peach-sort-btn:active,5514.peach-tag-filter-chip:active {5515  transform: scale(0.93);5516  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5517}55185519/* Password strength bar (Lock view + shared) */5520.peach-password-strength {5521  display: flex;5522  align-items: center;5523  gap: 8px;5524  margin-top: 6px;5525}55265527.peach-strength-bar {5528  flex: 1;5529  height: 3px;5530  border-radius: 2px;5531  background: var(--peach-t3);5532  overflow: hidden;5533}55345535.peach-strength-fill {5536  height: 100%;5537  border-radius: 2px;5538  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5539              background 300ms ease;5540}55415542.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5543.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5544.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5545.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }55465547.peach-strength-label {5548  font-family: "IBM Plex Mono", monospace;5549  font-style: italic;5550  font-size: 0.5625rem;5551  font-weight: 300;5552  letter-spacing: 0.06em;5553  color: var(--peach-t2);5554  min-width: 36px;5555  text-align: right;5556}55575558.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5559.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5560.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5561.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }55625563/* Duress form */5564.peach-duress-status {5565  padding: 2px 8px;5566  border-radius: 999px;5567  border: 1px solid var(--peach-t3);5568  font-family: "IBM Plex Mono", monospace;5569  font-size: 0.5625rem;5570  letter-spacing: 0.07em;5571  text-transform: uppercase;5572  color: var(--peach-t2);5573  flex-shrink: 0;5574}55755576.peach-duress-status.is-active {5577  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5578  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5579  color: var(--peach-t0);5580}55815582.peach-duress-form {5583  padding: 8px 0 4px;5584  display: flex;5585  flex-direction: column;5586  gap: 6px;5587}55885589.peach-duress-form .peach-label {5590  margin-top: 4px;5591}55925593.peach-duress-actions {5594  display: flex;5595  gap: 6px;5596  align-items: center;5597  margin-top: 4px;5598}55995600.peach-duress-actions .peach-btn:first-child {5601  margin-right: auto;5602}56035604/* Improved overlay spring entrance */5605.peach-overlay-view.ov-enter-up {5606  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5607}56085609@keyframes ov-enter-up-spring {5610  from { opacity: 0; transform: translateY(16px) scale(0.98); }5611  to   { opacity: 1; transform: translateY(0) scale(1); }5612}56135614.peach-overlay-view.ov-enter-right {5615  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5616}56175618@keyframes ov-enter-right-spring {5619  from { opacity: 0; transform: translateX(18px) scale(0.98); }5620  to   { opacity: 1; transform: translateX(0) scale(1); }5621}56225623/* ── Onboarding-mode restore screens (file import) ── */5624/* Used when MainImportView renders during onboarding (no vault yet).5625   Animates like a lock-screen transition. */5626.peach-lock-view {5627  position: absolute;5628  inset: 0;5629  display: flex;5630  flex-direction: column;5631  background:5632    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5633    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5634    var(--peach-bg);5635  z-index: 2;5636  overflow: hidden;5637  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5638}56395640.peach-lock-view-header {5641  display: flex;5642  align-items: center;5643  justify-content: space-between;5644  padding: 16px 18px 12px;5645  flex-shrink: 0;5646}56475648/* ───────── Settings: auto-lock select ───────── */5649.peach-settings-select {5650  font-family: "IBM Plex Mono", monospace;5651  font-size: 0.6875rem;5652  background: transparent;5653  border: 1px solid var(--peach-t3);5654  border-radius: 4px;5655  color: var(--peach-t1);5656  padding: 3px 6px;5657  cursor: pointer;5658  outline: none;5659}5660.peach-settings-select:focus {5661  border-color: var(--peach-accent);5662}56635664/* ───────── Duress status pill (new polished) ───────── */5665.peach-duress-status-pill {5666  font-family: "IBM Plex Mono", monospace;5667  font-size: 0.5625rem;5668  text-transform: uppercase;5669  letter-spacing: 0.12em;5670  padding: 2px 8px;5671  border-radius: 12px;5672  background: var(--peach-t3);5673  color: var(--peach-t2);5674  flex-shrink: 0;5675}5676.peach-duress-status-pill.is-active {5677  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5678  color: var(--peach-accent);5679}56805681/* ───────── Entry advanced disclosure (canary) ───────── */5682.peach-entry-advanced {5683  margin-top: 12px;5684  border-top: 1px solid var(--peach-t3);5685  padding-top: 10px;5686  position: relative;5687  z-index: 1;5688}5689.peach-entry-advanced-toggle {5690  display: flex;5691  align-items: center;5692  justify-content: space-between;5693  width: 100%;5694  background: transparent;5695  border: none;5696  cursor: pointer;5697  padding: 0;5698  color: var(--peach-t2);5699}5700.peach-canary-section {5701  margin-top: 10px;5702  display: grid;5703  gap: 6px;5704}57055706/* ───────── Import: merge/replace radio choices ───────── */5707.peach-import-choice {5708  display: flex;5709  align-items: flex-start;5710  gap: 10px;5711  padding: 8px 10px;5712  border: 1px solid var(--peach-t3);5713  border-radius: 10px;5714  cursor: pointer;5715  margin-bottom: 6px;5716  transition: border-color 120ms ease, background 120ms ease;5717}5718.peach-import-choice:hover {5719  border-color: var(--peach-accent);5720}5721.peach-import-choice input[type="radio"] {5722  margin-top: 3px;5723  accent-color: var(--peach-accent);5724  flex-shrink: 0;5725}5726.peach-import-choice-main {5727  display: flex;5728  flex-direction: column;5729  gap: 2px;5730  min-width: 0;5731}5732.peach-import-choice-label {5733  font-size: 0.75rem;5734  color: var(--peach-t0);5735}5736.peach-import-choice-sub {5737  font-size: 0.6875rem;5738  color: var(--peach-t2);5739  line-height: 1.5;5740}57415742/* ───────── Export: success confirmation strip ───────── */5743.peach-export-success {5744  display: flex;5745  align-items: flex-start;5746  gap: 10px;5747  padding: 12px;5748  border-radius: 12px;5749  border: 1px solid rgba(150, 175, 110, 0.3);5750  background: rgba(150, 175, 110, 0.08);5751  color: var(--peach-t0);5752  font-size: 0.75rem;5753  line-height: 1.55;5754}5755.peach-export-success-check {5756  color: rgba(150, 175, 110, 0.9);5757  font-size: 0.875rem;5758  flex-shrink: 0;5759}57605761/* ── Trash view ──────────────────────────────────────────────────────── */5762.peach-trash-entry-row {5763  display: flex;5764  align-items: center;5765  justify-content: space-between;5766  gap: 8px;5767  padding: 8px 0;5768  border-bottom: 1px solid var(--peach-border);5769}5770.peach-trash-entry-info {5771  flex: 1;5772  min-width: 0;5773  display: flex;5774  flex-direction: column;5775  gap: 2px;5776}5777.peach-trash-entry-title {5778  font-size: 0.8125rem;5779  color: var(--peach-t0);5780  overflow: hidden;5781  text-overflow: ellipsis;5782  white-space: nowrap;5783}5784.peach-trash-entry-meta {5785  font-family: var(--font-mono);5786  font-size: 0.5625rem;5787  color: var(--peach-t2);5788  letter-spacing: 0.04em;5789}5790.peach-trash-entry-actions {5791  display: flex;5792  align-items: center;5793  gap: 4px;5794  flex-shrink: 0;5795}5796.peach-trash-delete-btn {5797  background: transparent;5798  border: 0;5799  color: var(--peach-t3);5800  font-size: 1rem;5801  line-height: 1;5802  cursor: pointer;5803  padding: 2px 5px;5804  transition: color 0.15s;5805}5806.peach-trash-delete-btn:hover { color: var(--peach-breach); }5807.peach-trash-list {5808  overflow-y: auto;5809}5810.peach-trash-footer {5811  display: flex;5812  align-items: center;5813  gap: 8px;5814  padding: 8px 0 0;5815  border-top: 1px solid var(--peach-border);5816  margin-top: 4px;5817}5818.peach-trash-purge-all {5819  background: transparent;5820  border: 0;5821  color: var(--peach-t3);5822  font-size: 0.625rem;5823  cursor: pointer;5824  padding: 4px 0;5825  letter-spacing: 0.03em;5826  transition: color 0.2s;5827}5828.peach-trash-purge-all:hover { color: var(--peach-breach); }5829.peach-trash-purge-confirm-label {5830  font-size: 0.625rem;5831  color: var(--peach-t1);5832  flex: 1;5833}58345835/* ── Settings shortcuts grid ─────────────────────────────────────────── */5836.peach-shortcuts-grid {5837  display: grid;5838  grid-template-columns: auto 1fr;5839  gap: 6px 12px;5840  align-items: center;5841  padding: 4px 0;5842}5843.peach-shortcut-key {5844  font-family: var(--font-mono);5845  font-size: 0.625rem;5846  color: var(--peach-t0);5847  background: var(--peach-t3);5848  border-radius: 4px;5849  padding: 2px 6px;5850  white-space: nowrap;5851  text-align: center;5852}5853.peach-shortcut-desc {5854  font-size: 0.6875rem;5855  color: var(--peach-t1);5856}58575858/* ── Sort bar trash button ───────────────────────────────────────────── */5859.peach-sort-trash-btn {5860  display: flex;5861  align-items: center;5862  justify-content: center;5863  padding: 3px 5px;5864  background: transparent;5865  border: none;5866  cursor: pointer;5867  color: var(--peach-t2);5868  border-radius: 4px;5869  transition: color 140ms ease, background 140ms ease;5870}5871.peach-sort-trash-btn:hover {5872  color: var(--peach-t1);5873  background: var(--peach-t3);5874}5875.peach-sort-trash-btn.is-active {5876  color: var(--peach-accent);5877}58785879/* Accent color picker */5880.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5881.peach-accent-picker {5882  display: flex;5883  flex-wrap: wrap;5884  gap: 7px;5885  padding: 2px 0;5886}5887.peach-accent-swatch {5888  width: 22px;5889  height: 22px;5890  border-radius: 50%;5891  border: 2px solid transparent;5892  cursor: pointer;5893  padding: 0;5894  transition: transform 100ms;5895  outline-offset: 2px;5896}5897.peach-accent-swatch:hover { transform: scale(1.15); }5898.peach-accent-swatch.is-active {5899  border-color: var(--peach-t0);5900  transform: scale(1.1);5901}59025903.peach-pill-group {5904  display: flex;5905  gap: 6px;5906}5907.peach-pill-group .peach-btn.is-active {5908  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5909  border-color: var(--peach-accent);5910  color: var(--peach-t0);5911}59125913/* ── Card entry styles ───────────────────────────────────────── */5914.peach-card-number {5915  font-family: var(--peach-mono);5916  letter-spacing: 0.08em;5917}59185919.peach-card-network-badge {5920  font-size: 0.625rem;5921  padding: 1px 5px;5922  border-radius: 4px;5923  border: 0.5px solid var(--peach-border);5924  color: var(--peach-text-dim);5925  margin-left: 6px;5926  vertical-align: middle;5927}59285929.peach-card-expiry-row {5930  display: flex;5931  align-items: center;5932  gap: 8px;5933}59345935.peach-card-expiry-sep {5936  color: var(--peach-text-dim);5937}59385939/* ── Pro tier — upgrade screen ──────────────────────────────── */5940.peach-pro-mark {5941  font-size: 0.5625rem;5942  color: var(--peach-accent);5943  margin-left: 6px;5944  vertical-align: super;5945  opacity: 0.7;5946}59475948.peach-pro-mini-badge {5949  display: block;5950  font-size: 0.625rem;5951  font-style: italic;5952  color: var(--peach-accent);5953  letter-spacing: 0.04em;5954  margin-top: -2px;5955  padding-left: 2px;5956  opacity: 0.85;5957  text-align: center;5958}59595960.peach-wordmark-stack {5961  display: inline-flex;5962  flex-direction: column;5963  align-items: center;5964}59655966/* ── Pro tier — upgrade page ─────────────────────────────────── */5967/* ── Pro upgrade — redesigned editorial layout ─────────────────── */59685969.peach-pro-upgrade {5970  display: flex;5971  flex-direction: column;5972  align-items: stretch;5973  gap: 10px;5974  padding: 2px 2px 12px;5975}59765977.peach-pro-eyebrow {5978  margin: 0;5979  font-family: var(--font-ui);5980  font-size: 0.625rem;5981  font-weight: 500;5982  letter-spacing: 0.12em;5983  color: var(--peach-accent);5984}59855986.peach-pro-headline {5987  margin: 0;5988  font-family: var(--font-display, "Cormorant Garamond", serif);5989  font-size: 30px;5990  font-weight: 700;5991  font-style: normal;5992  line-height: 1.05;5993  color: var(--peach-t0);5994  letter-spacing: -0.01em;5995}5996.peach-pro-headline em {5997  font-style: italic;5998  font-weight: 400;5999  color: var(--peach-accent);6000}60016002.peach-pro-subtitle {6003  margin: 0;6004  font-size: 0.6875rem;6005  line-height: 1.5;6006  color: var(--peach-t1);6007}60086009/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6010.peach-pro-section-label {6011  margin: 6px 0 0;6012  font-family: var(--font-ui);6013  font-size: 0.5625rem;6014  font-weight: 500;6015  letter-spacing: 0.12em;6016  text-transform: uppercase;6017  color: var(--peach-t2);6018}60196020/* 2-column numbered feature grid */6021.peach-pro-grid {6022  display: grid;6023  grid-template-columns: 1fr 1fr;6024  border-top: 1px solid var(--peach-border);6025  border-left: 1px solid var(--peach-border);6026}60276028.peach-pro-grid-item {6029  display: flex;6030  flex-direction: column;6031  gap: 2px;6032  padding: 8px 9px;6033  border-right: 1px solid var(--peach-border);6034  border-bottom: 1px solid var(--peach-border);6035}60366037.peach-pro-grid-item--wide {6038  grid-column: 1 / -1;6039}60406041.peach-pro-grid-num {6042  font-family: var(--font-mono);6043  font-size: 0.5625rem;6044  color: var(--peach-accent);6045  letter-spacing: 0.06em;6046  opacity: 0.85;6047}60486049.peach-pro-grid-name {6050  font-size: 0.8125rem;6051  font-weight: 500;6052  color: var(--peach-t0);6053  line-height: 1.2;6054}60556056.peach-pro-grid-desc {6057  font-size: 0.625rem;6058  color: var(--peach-t1);6059  line-height: 1.4;6060}60616062.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6063  animation: peach-pulse-accent 600ms ease-out forwards;6064}60656066@keyframes peach-pulse-accent {6067  0%   { opacity: 1; transform: scale(1.2); }6068  100% { opacity: 0.85; transform: scale(1); }6069}60706071/* Actions */6072.peach-pro-upgrade-actions {6073  display: flex;6074  flex-direction: column;6075  align-items: stretch;6076  gap: 10px;6077}60786079.peach-pro-pricing {6080  margin: 0;6081  font-size: 1rem;6082  font-weight: 600;6083  color: var(--peach-t0);6084  letter-spacing: 0.01em;6085}6086.peach-pro-pricing-sub {6087  font-size: 0.75rem;6088  font-weight: 400;6089  color: var(--peach-t1);6090  letter-spacing: 0.02em;6091}60926093.peach-pro-upgrade-cta {6094  display: flex;6095  align-items: center;6096  justify-content: center;6097  text-decoration: none;6098  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6099  border: 1px solid var(--peach-accent);6100  border-radius: 10px;6101  color: var(--peach-accent);6102  font-family: var(--font-ui);6103  font-size: 0.8125rem;6104  font-weight: 600;6105  letter-spacing: 0.06em;6106  padding: 11px 16px;6107  transition: background 0.15s ease, color 0.15s ease;6108}6109.peach-pro-upgrade-cta:hover {6110  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6111}61126113.peach-pro-key-divider {6114  display: flex;6115  align-items: center;6116  gap: 8px;6117  color: var(--peach-t2);6118  font-size: 0.5625rem;6119  letter-spacing: 0.1em;6120}6121.peach-pro-key-divider::before,6122.peach-pro-key-divider::after {6123  content: "";6124  flex: 1;6125  height: 1px;6126  background: var(--peach-border);6127}61286129/* Inline key entry row */6130.peach-pro-key-inline {6131  display: flex;6132  align-items: center;6133  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6134  border: 1px solid var(--peach-border);6135  border-radius: 8px;6136  overflow: hidden;6137}6138.peach-pro-key-inline-input {6139  flex: 1;6140  background: transparent;6141  border: none;6142  outline: none;6143  color: var(--peach-t1);6144  font-family: var(--font-mono);6145  font-size: 0.625rem;6146  letter-spacing: 0.06em;6147  padding: 9px 10px;6148}6149.peach-pro-key-inline-input::placeholder {6150  color: var(--peach-t2);6151}6152.peach-pro-key-apply {6153  background: transparent;6154  border: none;6155  border-left: 1px solid var(--peach-border);6156  color: var(--peach-t2);6157  font-family: var(--font-ui);6158  font-size: 0.5625rem;6159  font-weight: 600;6160  letter-spacing: 0.08em;6161  padding: 9px 10px;6162  cursor: pointer;6163  transition: color 0.15s ease;6164  flex-shrink: 0;6165}6166.peach-pro-key-apply:not(:disabled):hover {6167  color: var(--peach-accent);6168}6169.peach-pro-key-apply:disabled {6170  opacity: 0.35;6171  cursor: not-allowed;6172}61736174/* ── Pro tier — key ceremony ─────────────────────────────────── */6175.peach-pro-key-ceremony {6176  display: flex;6177  flex-direction: column;6178  align-items: center;6179  gap: 12px;6180  padding: 20px 4px 16px;6181}61826183.peach-pro-key-ceremony .peach-lock-rune-string {6184  font-size: 1rem;6185  gap: 12px;6186  flex: 0;6187  justify-content: center;6188}61896190.peach-pro-key-ceremony-label {6191  margin: 0;6192  font-size: 0.6875rem;6193  color: var(--peach-t2);6194  font-style: italic;6195  letter-spacing: 0.04em;6196}61976198.peach-pro-key-input {6199  font-family: var(--font-mono, monospace);6200  letter-spacing: 0.06em;6201  text-align: center;6202  width: 100%;6203  box-sizing: border-box;6204}62056206.peach-pro-key-error {6207  margin: 0;6208  font-size: 0.75rem;6209  text-align: center;6210  color: var(--peach-breach, #e55);6211  padding: 0;6212}62136214.peach-pro-key-activate {6215  width: 100%;6216  text-align: center;6217  box-sizing: border-box;6218  padding: 10px 20px;6219  font-size: 0.8125rem;6220}62216222.peach-pro-key-cancel {6223  background: transparent;6224  border: 0;6225  color: var(--peach-t2);6226  font-size: 0.6875rem;6227  cursor: pointer;6228  padding: 2px 8px;6229  transition: color 0.2s;6230}62316232.peach-pro-key-cancel:hover { color: var(--peach-accent); }62336234/* ── Pro tier — active state ─────────────────────────────────── */6235.peach-pro-active {6236  display: flex;6237  flex-direction: column;6238  align-items: center;6239  gap: 0;6240  padding: 8px 4px 16px;6241  min-height: 280px;6242}62436244.peach-pro-active-hero {6245  display: flex;6246  flex-direction: column;6247  align-items: center;6248  gap: 6px;6249  padding: 20px 0 22px;6250}62516252.peach-pro-active-mark-wrap {6253  display: flex;6254  align-items: center;6255  justify-content: center;6256  margin-bottom: 4px;6257}62586259.peach-pro-active-mark {6260  width: 60px;6261  height: 60px;6262}62636264.peach-pro-active-title {6265  font-family: var(--font-display, var(--font-ui));6266  font-size: 26px;6267  margin: 0;6268  color: var(--peach-t0);6269  letter-spacing: 0.01em;6270}62716272.peach-pro-active-since {6273  margin: 0;6274  font-size: 0.6875rem;6275  color: var(--peach-t2);6276  font-style: italic;6277}62786279.peach-pro-active-features {6280  display: flex;6281  flex-direction: column;6282  gap: 8px;6283  width: 100%;6284  padding: 14px 8px 0;6285  border-top: 1px solid var(--peach-border);6286  flex: 1;6287}62886289.peach-pro-active-feature {6290  display: flex;6291  align-items: center;6292  gap: 9px;6293}62946295.peach-pro-active-feature-mark {6296  color: var(--peach-accent);6297  font-size: 0.625rem;6298  opacity: 0.65;6299  flex-shrink: 0;6300}63016302.peach-pro-active-feature-name {6303  font-size: 0.75rem;6304  color: var(--peach-t1);6305}63066307.peach-pro-deactivate {6308  align-self: center;6309  background: transparent;6310  border: 0;6311  color: var(--peach-t3);6312  font-size: 0.625rem;6313  cursor: pointer;6314  padding: 8px 0 0;6315  margin-top: 16px;6316  letter-spacing: 0.03em;6317  transition: color 0.2s;6318}63196320.peach-pro-deactivate:hover { color: var(--peach-t2); }63216322.peach-pro-deactivate:disabled {6323  opacity: 0.5;6324  cursor: default;6325}63266327/* ── Pro advanced health remediation queue ──────────────────── */6328.peach-health-pro-queue {6329  display: flex;6330  flex-direction: column;6331  gap: 10px;6332  padding: 12px;6333  margin: 0 0 12px;6334  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6335  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6336  border-radius: 10px;6337}63386339.peach-health-pro-queue-head {6340  display: flex;6341  justify-content: space-between;6342  align-items: baseline;6343}63446345.peach-health-pro-queue-title {6346  font-size: 0.75rem;6347  font-weight: 500;6348  letter-spacing: 0.04em;6349  text-transform: uppercase;6350  color: var(--peach-accent);6351}63526353.peach-health-pro-queue-score {6354  font-size: 0.6875rem;6355  color: var(--peach-t2);6356}63576358.peach-health-pro-row {6359  display: flex;6360  gap: 10px;6361  align-items: center;6362  padding: 8px 0;6363  border-top: 1px solid var(--peach-border);6364}63656366.peach-health-pro-row-info {6367  flex: 1;6368  display: flex;6369  flex-direction: column;6370  gap: 4px;6371  min-width: 0;6372}63736374.peach-health-pro-row-name {6375  font-size: 0.8125rem;6376  color: var(--peach-t0);6377  overflow: hidden;6378  text-overflow: ellipsis;6379  white-space: nowrap;6380}63816382.peach-health-pro-row-meta {6383  font-size: 0.6875rem;6384  color: var(--peach-t2);6385}63866387.peach-health-pro-bar {6388  height: 2px;6389  background: var(--peach-border);6390  border-radius: 2px;6391  overflow: hidden;6392  margin-top: 2px;6393}63946395.peach-health-pro-bar-fill {6396  height: 100%;6397  background: var(--peach-accent);6398  transition: width 200ms ease-out;6399}64006401/* ── Pro activation celebration ── */6402@keyframes peach-pro-bloom {6403  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6404  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6405                 drop-shadow(0 0 48px var(--peach-glow)); }6406  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6407}64086409@keyframes peach-pro-wordmark-in {6410  from { opacity: 0; transform: translateY(4px); }6411  to   { opacity: 1; transform: translateY(0); }6412}64136414@keyframes peach-pro-fade-out {6415  from { opacity: 1; }6416  to   { opacity: 0; }6417}64186419.peach-pro-celebration {6420  background:6421    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6422    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6423    var(--peach-bg);6424  border: 1px solid var(--peach-t3);6425  box-shadow:6426    0 2px 8px rgba(0,0,0,0.55),6427    0 14px 48px rgba(0,0,0,0.7),6428    0 0 0 1px rgba(240,232,216,0.04);6429  overflow: hidden;6430  width: 320px;6431  height: 520px;6432  display: flex;6433  flex-direction: column;6434  align-items: center;6435  justify-content: center;6436  gap: 8px;6437  padding: 32px 24px;6438  text-align: center;6439}64406441.peach-pro-celebration.is-leaving {6442  animation: peach-pro-fade-out 400ms ease forwards;6443}64446445.peach-pro-bloom-target {6446  display: flex;6447  align-items: center;6448  justify-content: center;6449  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6450  margin-bottom: 12px;6451}64526453.peach-pro-bloom-icon {6454  width: 48px;6455  height: 48px;6456}64576458.peach-pro-wordmark {6459  font-family: var(--font-display);6460  font-size: 22px;6461  font-style: italic;6462  font-weight: 400;6463  color: var(--peach-accent);6464  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6465}64666467.peach-pro-thankyou {6468  font-size: 0.75rem;6469  font-style: italic;6470  color: var(--peach-t2);6471  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6472}647364746475/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6476.peach-pro-notice-banner {6477  display: flex;6478  align-items: center;6479  gap: 8px;6480  padding: 7px 12px;6481  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6482  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6483  font-size: 0.6875rem;6484  color: var(--peach-t2);6485  font-family: "IBM Plex Mono", monospace;6486  flex-shrink: 0;6487}64886489.peach-pro-notice-link {6490  background: none;6491  border: none;6492  padding: 0;6493  cursor: pointer;6494  font-size: 0.6875rem;6495  color: var(--peach-accent);6496  font-family: "IBM Plex Mono", monospace;6497  margin-left: auto;6498  white-space: nowrap;6499}65006501.peach-pro-notice-close {6502  background: none;6503  border: none;6504  padding: 0 0 0 4px;6505  cursor: pointer;6506  font-size: 0.625rem;6507  color: var(--peach-t3);6508  line-height: 1;6509}65106511/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6512   Renders over whatever view is showing. 60-second expiry; the popup ticks6513   the countdown each second and clears the banner when it hits zero. */6514.peach-pair-request-banner {6515  display: flex;6516  flex-direction: column;6517  gap: 8px;6518  padding: 10px 12px;6519  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6520  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6521  font-family: "IBM Plex Mono", monospace;6522  flex-shrink: 0;6523}65246525.peach-pair-toast {6526  padding: 8px 12px;6527  font-family: "IBM Plex Mono", monospace;6528  font-size: 0.75rem;6529  color: var(--peach-t1);6530  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6531  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6532  flex-shrink: 0;6533  text-align: center;6534}65356536.peach-pair-toast strong {6537  color: var(--peach-t0);6538  font-weight: 500;6539}65406541.peach-pair-request-header {6542  display: flex;6543  align-items: center;6544  gap: 8px;6545  font-size: 0.75rem;6546  color: var(--peach-t1);6547}65486549.peach-pair-request-mark {6550  font-size: 0.875rem;6551  display: inline-flex;6552  align-items: center;6553}65546555.peach-pair-request-icon {6556  width: 1em;6557  height: 1em;6558}65596560.peach-pair-request-title {6561  font-weight: 600;6562  color: var(--peach-t0);6563}65646565.peach-pair-request-countdown {6566  margin-left: auto;6567  font-variant-numeric: tabular-nums;6568  color: var(--peach-t2);6569  font-size: 0.6875rem;6570}65716572.peach-pair-request-body {6573  margin: 0;6574  font-size: 0.75rem;6575  color: var(--peach-t1);6576  line-height: 1.4;6577}65786579.peach-pair-request-body strong {6580  color: var(--peach-t0);6581  font-weight: 600;6582}65836584.peach-pair-request-actions {6585  display: flex;6586  gap: 8px;6587  justify-content: flex-end;6588}65896590/* ─── First-run onboarding ──────────────────────────────────────────────6591   Three-card welcome shown once before vault creation. The PeachScript6592   rune background drifts behind everything at very low opacity — it's6593   atmosphere, not focus. The cards themselves use the same panel6594   language as the rest of the popup so the transition into NewVault is6595   continuous, not a jarring switch of visual register. */65966597.peach-onboarding {6598  position: relative;6599  display: flex;6600  flex-direction: column;6601  width: 100%;6602  height: 100%;6603  padding: 16px 16px 18px;6604  box-sizing: border-box;6605  overflow: hidden;6606  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6607}66086609.peach-onboarding.is-completing {6610  animation: peach-onboard-exit 200ms ease-out forwards;6611}66126613.peach-rune-background {6614  position: absolute;6615  inset: 0;6616  width: 100%;6617  height: 100%;6618  pointer-events: none;6619  z-index: 0;6620  transition: opacity 500ms ease-out;6621}66226623.peach-onboarding.is-completing .peach-rune-background {6624  opacity: 0;6625}66266627.peach-onboarding-header {6628  position: relative;6629  z-index: 1;6630  display: flex;6631  align-items: center;6632  margin-bottom: 14px;6633}66346635.peach-onboarding-card {6636  position: relative;6637  z-index: 1;6638  flex: 1;6639  display: flex;6640  flex-direction: column;6641  gap: 10px;6642  padding: 22px 20px;6643  border-radius: 16px;6644  border: 1px solid var(--peach-t3);6645  background:6646    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6647  backdrop-filter: blur(3px);6648  -webkit-backdrop-filter: blur(3px);6649  box-shadow:6650    inset 0 1px 0 rgba(240, 232, 216, 0.04),6651    0 12px 28px rgba(0, 0, 0, 0.12);6652  cursor: pointer;6653  user-select: none;6654  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6655}66566657.peach-onboarding-card.is-exiting {6658  animation: peach-card-out 120ms ease-in forwards;6659  pointer-events: none;6660}66616662.peach-onboarding-card-headline {6663  margin: 0;6664  font-family: var(--font-display);6665  font-style: italic;6666  font-weight: 400;6667  font-size: 22px;6668  line-height: 1.05;6669  color: var(--peach-t0);6670  white-space: pre-line;6671}66726673.peach-onboarding-divider {6674  margin: 4px 0 6px;6675  border: 0;6676  border-top: 1px solid var(--peach-t3);6677  width: 100%;6678}66796680.peach-onboarding-body {6681  margin: 0;6682  font-size: 0.8125rem;6683  line-height: 1.6;6684  color: var(--peach-t1);6685}66866687.peach-onboarding-warning {6688  display: flex;6689  align-items: flex-start;6690  gap: 8px;6691  margin: 6px 0 0;6692  padding-top: 8px;6693  border-top: 1px dashed var(--peach-t3);6694  font-size: 0.8125rem;6695  line-height: 1.5;6696  color: var(--peach-t1);6697}66986699.peach-onboarding-warning-icon {6700  color: var(--peach-accent);6701  font-size: 0.8125rem;6702  line-height: 1.5;6703  flex: 0 0 auto;6704}67056706.peach-onboarding-nav {6707  position: relative;6708  z-index: 1;6709  display: flex;6710  align-items: center;6711  justify-content: space-between;6712  margin-top: 12px;6713  padding: 0 4px;6714}67156716.peach-onboarding-dots {6717  display: flex;6718  align-items: center;6719  gap: 6px;6720}67216722.peach-onboarding-dot {6723  width: 6px;6724  height: 6px;6725  border-radius: 50%;6726  background: var(--peach-t2);6727  transition: width 200ms ease, height 200ms ease, background 200ms ease;6728}67296730.peach-onboarding-dot.is-active {6731  width: 8px;6732  height: 8px;6733  background: var(--peach-accent);6734}67356736.peach-onboarding-next {6737  background: none;6738  border: none;6739  padding: 4px 0;6740  cursor: pointer;6741  font-family: "IBM Plex Mono", monospace;6742  font-size: 0.6875rem;6743  letter-spacing: 0.04em;6744  color: var(--peach-t1);6745  transition: color 150ms ease;6746}67476748.peach-onboarding-next:hover {6749  color: var(--peach-t0);6750}67516752.peach-onboarding-next:disabled {6753  opacity: 0.5;6754  cursor: default;6755}67566757.peach-onboarding-back {6758  background: none;6759  border: none;6760  padding: 4px 0;6761  cursor: pointer;6762  font-family: "IBM Plex Mono", monospace;6763  font-size: 0.6875rem;6764  letter-spacing: 0.04em;6765  color: var(--peach-t2);6766  transition: color 150ms ease;6767}67686769.peach-onboarding-back:hover {6770  color: var(--peach-t0);6771}67726773.peach-onboarding-back:disabled {6774  opacity: 0.5;6775  cursor: default;6776}67776778/* Reserve back-button width on the first card so the dots stay centred */6779.peach-onboarding-back-spacer {6780  width: 44px;6781}67826783.peach-onboarding-mobile-card-buttons {6784  display: flex;6785  flex-direction: column;6786  gap: 8px;6787  margin-top: 16px;6788}67896790@keyframes peach-onboard-enter {6791  from { opacity: 0; transform: translateY(20px); }6792  to   { opacity: 1; transform: translateY(0); }6793}67946795@keyframes peach-onboard-exit {6796  from { opacity: 1; }6797  to   { opacity: 0; }6798}67996800@keyframes peach-card-in {6801  from { opacity: 0; transform: translateX(12px); }6802  to   { opacity: 1; transform: translateX(0); }6803}68046805@keyframes peach-card-out {6806  from { opacity: 1; transform: translateX(0); }6807  to   { opacity: 0; transform: translateX(-12px); }6808}68096810/* ─── New vault screen — matched to onboarding card language ─────────── */68116812.peach-newvault {6813  position: relative;6814  display: flex;6815  flex-direction: column;6816  gap: 12px;6817  padding: 16px 16px 18px;6818  overflow: hidden;6819}68206821/* Suppress the warm-blob ambient art inherited from .lock-screen — the6822   new vault card now carries the visual weight. */6823.peach-newvault::before {6824  content: none;6825}68266827.peach-newvault-header {6828  position: relative;6829  z-index: 2;6830  display: flex;6831  align-items: center;6832  gap: 10px;6833  margin-bottom: 2px;6834}68356836.peach-newvault-back {6837  display: inline-flex;6838  align-items: center;6839  gap: 4px;6840  background: transparent;6841  border: none;6842  color: var(--peach-t2);6843  font-family: "IBM Plex Mono", monospace;6844  font-size: 0.625rem;6845  letter-spacing: 0.06em;6846  cursor: pointer;6847  padding: 4px 6px;6848  border-radius: 6px;6849  transition: color 120ms ease, background 120ms ease;6850}68516852.peach-newvault-back:hover {6853  color: var(--peach-t0);6854  background: rgba(240, 232, 216, 0.04);6855}68566857.peach-newvault-mark {6858  position: absolute;6859  right: -12px;6860  top: 6px;6861  width: 110px;6862  height: 110px;6863  pointer-events: none;6864  opacity: 0.10;6865  filter: saturate(0.9);6866  z-index: 0;6867}6868.peach-newvault-mark-art {6869  width: 100%;6870  height: 100%;6871}6872.peach-newvault-mark-art path:nth-child(1) {6873  fill: rgba(123, 144, 96, 0.88);6874}6875.peach-newvault-mark-art path:nth-child(2) {6876  stroke: rgba(94, 122, 66, 0.95);6877}68786879.peach-newvault-card {6880  position: relative;6881  z-index: 1;6882  display: flex;6883  flex-direction: column;6884  gap: 12px;6885  padding: 22px 20px 18px;6886  border-radius: 16px;6887  border: 1px solid var(--peach-t3);6888  background:6889    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6890  backdrop-filter: blur(3px);6891  -webkit-backdrop-filter: blur(3px);6892  box-shadow:6893    inset 0 1px 0 rgba(240, 232, 216, 0.04),6894    0 12px 28px rgba(0, 0, 0, 0.12);6895  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6896}68976898.peach-newvault-headline {6899  margin: 0;6900  font-family: var(--font-display);6901  font-style: italic;6902  font-weight: 400;6903  font-size: 24px;6904  line-height: 1.05;6905  color: var(--peach-t0);6906  white-space: pre-line;6907}69086909.peach-newvault-divider {6910  margin: 2px 0 4px;6911  border: 0;6912  border-top: 1px solid var(--peach-t3);6913  width: 100%;6914}69156916.peach-newvault-field {6917  display: flex;6918  flex-direction: column;6919  gap: 4px;6920}69216922.peach-newvault-label-row {6923  display: flex;6924  align-items: center;6925  justify-content: space-between;6926}69276928/* Monospace input scaled to the card. Replaces the 22px unlock-input6929   so the placeholder no longer overflows and the field reads as part6930   of the same surface as the body copy. */6931.peach-newvault-input {6932  font-size: 0.875rem;6933  letter-spacing: 0.18em;6934  padding: 8px 0;6935}6936.peach-newvault-input::placeholder {6937  letter-spacing: 0.18em;6938  color: var(--peach-t2);6939}69406941.peach-newvault-hint {6942  margin: 2px 0 0;6943  font-family: "IBM Plex Mono", monospace;6944  font-size: 0.625rem;6945  color: var(--peach-t2);6946  letter-spacing: 0.04em;6947}69486949.peach-newvault-submit {6950  margin-top: 4px;6951}69526953.peach-newvault-warning {6954  display: flex;6955  align-items: flex-start;6956  gap: 8px;6957  margin: 4px 0 0;6958  padding-top: 10px;6959  border-top: 1px dashed var(--peach-t3);6960  font-size: 0.75rem;6961  line-height: 1.5;6962  color: var(--peach-t1);6963}69646965.peach-newvault-warning-icon {6966  color: var(--peach-accent);6967  font-size: 0.8125rem;6968  line-height: 1.4;6969  flex: 0 0 auto;6970}69716972.peach-newvault-footer {6973  position: relative;6974  z-index: 1;6975  display: flex;6976  flex-direction: column;6977  gap: 4px;6978  padding: 4px 4px 0;6979}69806981/* Settings body — warm accent gradient gives the glass something to blur against */6982.peach-settings-body {6983  background:6984    radial-gradient(6985      ellipse at 30% 20%,6986      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6987      transparent 60%6988    );6989}69906991/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6992/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6993 * Two severity levels: "warn" for actions that are dangerous-but-recoverable6994 * (replacing the vault from a backup file) and "hazard" for actions that6995 * are absolutely irreversible (Panic). Both use the same card scaffold so6996 * they read as a pair, but the colour family signals the severity at a6997 * glance — yellow for caution, red for don't.6998 */6999.peach-danger-card {7000  --danger-tint: 235, 158, 52; /* amber */7001  display: flex;7002  flex-direction: column;7003  gap: 8px;7004  padding: 14px;7005  margin-top: 10px;7006  border-radius: 12px;7007  border: 1px solid rgba(var(--danger-tint), 0.32);7008  background:7009    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7010    rgba(var(--danger-tint), 0.04);7011  box-shadow:7012    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7013    0 0 24px rgba(var(--danger-tint), 0.04);7014  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7015}70167017.peach-danger-card:hover {7018  border-color: rgba(var(--danger-tint), 0.55);7019  box-shadow:7020    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7021    0 0 36px rgba(var(--danger-tint), 0.10);7022}70237024.peach-danger-card--hazard {7025  --danger-tint: 220, 38, 38; /* red */7026}70277028.peach-danger-card-head {7029  display: flex;7030  align-items: center;7031  gap: 10px;7032}70337034.peach-danger-card-glyph {7035  width: 28px;7036  height: 28px;7037  flex-shrink: 0;7038  display: flex;7039  align-items: center;7040  justify-content: center;7041  border-radius: 8px;7042  background: rgba(var(--danger-tint), 0.12);7043  color: rgba(var(--danger-tint), 0.95);7044  font-size: 1rem;7045  line-height: 1;7046}70477048.peach-danger-card-title {7049  margin: 0;7050  font-size: 0.8125rem;7051  font-weight: 600;7052  color: rgba(var(--danger-tint), 0.92);7053  letter-spacing: 0.01em;7054}70557056.peach-danger-card-copy {7057  margin: 0;7058  font-size: 0.6875rem;7059  line-height: 1.5;7060  color: var(--peach-t2);7061}70627063.peach-danger-card-button {7064  width: 100%;7065  padding: 9px;7066  margin-top: 4px;7067  background: transparent;7068  border: 1px solid rgba(var(--danger-tint), 0.45);7069  border-radius: 8px;7070  color: rgba(var(--danger-tint), 0.9);7071  font-size: 0.75rem;7072  font-weight: 500;7073  letter-spacing: 0.02em;7074  cursor: pointer;7075  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7076}70777078.peach-danger-card-button:hover {7079  background: rgba(var(--danger-tint), 0.10);7080  border-color: rgba(var(--danger-tint), 0.75);7081  color: rgb(var(--danger-tint));7082}70837084/* ── Panic flow (three-step destruction) ───────────────────────────────── */7085.peach-panic {7086  display: flex;7087  flex-direction: column;7088  flex: 1;7089  min-height: 0;7090  padding: 28px 20px 20px;7091  gap: 18px;7092  overflow-y: auto;7093  scrollbar-width: none;7094  -ms-overflow-style: none;7095}70967097.peach-panic::-webkit-scrollbar { display: none; }70987099.peach-panic-step2 {7100  background: rgba(220, 38, 38, 0.04);7101}71027103.peach-panic-step3 {7104  position: relative;7105  background: #0f0505;7106  color: #ffffff;7107  overflow: hidden;7108}71097110.peach-panic-rune-bg {7111  position: absolute;7112  inset: 0;7113  opacity: 0.22;7114  pointer-events: none;7115  overflow: hidden;7116}71177118.peach-panic-rune-bg canvas {7119  width: 100% !important;7120  height: 100% !important;7121}71227123.peach-panic-icon {7124  font-size: 32px;7125  color: rgb(220, 38, 38);7126  line-height: 1;7127}71287129.peach-panic-title {7130  margin: 0;7131  font-size: 18px;7132  font-weight: 500;7133  color: var(--peach-t1);7134}71357136.peach-panic-title--severe {7137  font-size: 20px;7138  font-weight: 700;7139  color: rgb(220, 38, 38);7140}71417142.peach-panic-body {7143  margin: 0;7144  font-size: 0.8125rem;7145  line-height: 1.55;7146  color: var(--peach-t2);7147}71487149.peach-panic-body--severe {7150  color: rgba(220, 38, 38, 0.85);7151}71527153.peach-panic-body--final {7154  font-size: 1rem;7155  font-weight: 700;7156  color: rgb(255, 80, 80);7157  line-height: 1.4;7158}71597160.peach-panic-body--final-intro {7161  font-size: 1rem;7162  color: #ffffff;7163  font-weight: 400;7164}71657166.peach-panic-divider {7167  height: 1px;7168  background: rgba(255, 255, 255, 0.08);7169  margin: 4px 0;7170}71717172.peach-panic-confirm-input {7173  width: 100%;7174  padding: 10px 12px;7175  background: rgba(255, 255, 255, 0.02);7176  border: 1px solid rgba(220, 38, 38, 0.4);7177  border-radius: 8px;7178  color: var(--peach-t1);7179  font-family: "IBM Plex Mono", monospace;7180  font-size: 0.875rem;7181  letter-spacing: 0.12em;7182  text-transform: uppercase;7183}71847185.peach-panic-confirm-input:focus {7186  outline: none;7187  border-color: rgb(220, 38, 38);7188}71897190.peach-panic-confirm-input--match {7191  border-color: rgb(220, 38, 38);7192  color: rgb(220, 38, 38);7193}71947195.peach-panic-confirm-label {7196  font-size: 0.6875rem;7197  color: var(--peach-t2);7198  margin: 0 0 -8px;7199  letter-spacing: 0.06em;7200}72017202.peach-panic-actions {7203  display: flex;7204  flex-direction: column;7205  gap: 10px;7206  margin-top: auto;7207}72087209.peach-panic-button {7210  width: 100%;7211  padding: 12px;7212  border-radius: 8px;7213  font-size: 0.8125rem;7214  cursor: pointer;7215  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7216}72177218.peach-panic-button--primary {7219  background: var(--peach-accent);7220  border: 1px solid var(--peach-accent);7221  color: #ffffff;7222  font-weight: 600;7223}72247225.peach-panic-button--primary:hover {7226  background: color-mix(in srgb, var(--peach-accent) 88%, white);7227}72287229.peach-panic-button--danger {7230  background: rgb(220, 38, 38);7231  border: 1px solid rgb(220, 38, 38);7232  color: #ffffff;7233  font-weight: 600;7234}72357236.peach-panic-button--danger:disabled {7237  opacity: 0.35;7238  cursor: not-allowed;7239}72407241.peach-panic-button--ghost {7242  background: transparent;7243  border: 1px solid rgba(255, 255, 255, 0.18);7244  color: var(--peach-t2);7245}72467247.peach-panic-button--ghost:hover {7248  border-color: rgba(255, 255, 255, 0.32);7249  color: var(--peach-t1);7250}72517252.peach-panic-link {7253  background: transparent;7254  border: none;7255  padding: 4px 0;7256  color: rgba(220, 38, 38, 0.65);7257  font-size: 0.75rem;7258  cursor: pointer;7259  text-align: left;7260  text-decoration: underline;7261  text-underline-offset: 3px;7262}72637264.peach-panic-link:hover {7265  color: rgb(220, 38, 38);7266}72677268.peach-panic-bar {7269  background: rgb(220, 38, 38);7270  padding: 16px 20px;7271  margin: -28px -20px 0;7272  text-align: center;7273  font-size: 0.8125rem;7274  font-weight: 700;7275  letter-spacing: 0.12em;7276  color: #ffffff;7277}72787279.peach-panic-final-button {7280  width: 100%;7281  padding: 14px;7282  background: rgb(220, 38, 38);7283  border: none;7284  border-radius: 8px;7285  color: #ffffff;7286  font-size: 0.875rem;7287  font-weight: 700;7288  letter-spacing: 0.08em;7289  text-transform: uppercase;7290  cursor: pointer;7291  animation: peach-panic-pulse 2s ease-in-out infinite;7292}72937294.peach-settings-license {7295  margin-top: 10px;7296  padding-top: 10px;7297  border-top: 1px solid var(--peach-t3);7298}72997300.peach-settings-label {7301  font-size: 0.625rem;7302  letter-spacing: 0.08em;7303  color: var(--peach-t3);7304  display: block;7305  margin-bottom: 6px;7306}73077308.peach-settings-license-row {7309  display: flex;7310  align-items: center;7311  justify-content: space-between;7312  gap: 8px;7313}73147315.peach-settings-license-key {7316  font-family: 'IBM Plex Mono', monospace;7317  font-size: 0.75rem;7318  color: var(--peach-t0);7319  letter-spacing: 0.04em;7320  word-break: break-all;7321  flex: 1;7322  min-width: 0;7323}73247325.peach-settings-license-key--masked {7326  font-family: 'IBM Plex Mono', monospace;7327  font-size: 0.6rem;7328  color: var(--peach-t1);7329  letter-spacing: 0.18em;7330  user-select: none;7331}73327333.peach-settings-license-actions {7334  display: flex;7335  align-items: center;7336  gap: 2px;7337  flex-shrink: 0;7338}73397340.peach-settings-license-copy {7341  font-size: 0.6875rem;7342  color: var(--peach-accent);7343  background: transparent;7344  border: none;7345  cursor: pointer;7346  padding: 4px 8px;7347  border-radius: 4px;7348  flex-shrink: 0;7349  transition: opacity 150ms ease;7350}73517352.peach-settings-license-copy:hover {7353  opacity: 0.75;7354}73557356.peach-settings-license-toggle {7357  display: flex;7358  align-items: center;7359  justify-content: center;7360  background: transparent;7361  border: none;7362  cursor: pointer;7363  padding: 4px 6px;7364  border-radius: 4px;7365  color: var(--peach-t2);7366  transition: color 150ms ease;7367}73687369.peach-settings-license-toggle:hover {7370  color: var(--peach-t1);7371}73727373@keyframes peach-panic-pulse {7374  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7375  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7376}73777378[data-motion="reduce"] .peach-panic-final-button {7379  animation: none;7380}73817382/* Vault History — Settings → Vault sub-view */73837384.peach-history-list {7385  border: 1px solid var(--peach-border);7386  border-radius: 8px;7387  overflow: hidden;7388  margin: 8px 0 4px;7389}73907391.peach-history-row {7392  display: flex;7393  align-items: center;7394  justify-content: space-between;7395  padding: 9px 12px;7396  gap: 10px;7397  border-bottom: 1px solid var(--peach-border);7398}73997400.peach-history-row:last-child {7401  border-bottom: none;7402}74037404.peach-history-meta {7405  display: flex;7406  flex-direction: column;7407  gap: 2px;7408  min-width: 0;7409  flex: 1;7410}74117412.peach-history-time {7413  font-size: 0.75rem;7414  font-family: 'IBM Plex Mono', ui-monospace, monospace;7415  color: var(--peach-t0);7416  white-space: nowrap;7417  overflow: hidden;7418  text-overflow: ellipsis;7419}74207421.peach-history-sub {7422  font-size: 0.625rem;7423  color: var(--peach-t2);7424  letter-spacing: 0.06em;7425  text-transform: uppercase;7426  white-space: nowrap;7427  overflow: hidden;7428  text-overflow: ellipsis;7429}74307431.peach-history-btn {7432  flex-shrink: 0;7433  white-space: nowrap;7434  min-width: 56px;7435  text-align: center;7436}74377438.peach-history-btn.is-busy {7439  opacity: 0.65;7440}74417442.peach-history-footer {7443  font-size: 0.625rem;7444  color: var(--peach-t3);7445  letter-spacing: 0.05em;7446  text-align: right;7447  margin: 0;7448  padding: 2px 0 0;7449}74507451/* ── Context menu + swipe-copy flash ─────────────────────── */7452.peach-context-menu-backdrop {7453  position: fixed;7454  inset: 0;7455  background: rgba(0, 0, 0, 0.45);7456  z-index: 100;7457  display: flex;7458  align-items: flex-end;7459  justify-content: center;7460  animation: peach-ctx-fade 140ms ease both;7461}7462.peach-context-menu {7463  width: min(360px, calc(100vw - 24px));7464  margin-bottom: max(env(safe-area-inset-bottom), 12px);7465  background: var(--peach-bg);7466  border: 1px solid var(--peach-t3);7467  border-radius: 14px;7468  padding: 6px;7469  display: flex;7470  flex-direction: column;7471  gap: 2px;7472  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7473  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7474}7475@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7476@keyframes peach-ctx-rise {7477  from { transform: translateY(16px); opacity: 0; }7478  to   { transform: translateY(0);    opacity: 1; }7479}7480.peach-context-menu-item {7481  background: transparent;7482  color: var(--peach-t0);7483  border: 0;7484  border-radius: 10px;7485  padding: 12px 14px;7486  text-align: left;7487  font: inherit;7488  cursor: pointer;7489}7490.peach-context-menu-item:hover,7491.peach-context-menu-item:focus-visible {7492  background: var(--peach-t3);7493}7494.peach-context-menu-item--danger {7495  color: var(--peach-health-bad, #d96868);7496}7497.peach-context-menu-item--cancel {7498  color: var(--peach-t2);7499  margin-top: 4px;7500  border-top: 1px solid var(--peach-t3);7501  border-radius: 0 0 10px 10px;7502}75037504/* Swipe-to-copy flash */7505.peach-entry-row.is-copy-flash {7506  animation: peach-copy-flash 600ms ease both;7507}7508@keyframes peach-copy-flash {7509  0%   { background: transparent; }7510  20%  { background: rgba(217, 153, 51, 0.32); }7511  100% { background: transparent; }7512}75137514html { font-size: 16px; }75157516/* ── Recovery word entry ─────────────────────────────────────────── */7517.peach-lock-recover-link {7518  display: block;7519  width: 100%;7520  margin-top: 12px;7521  background: none;7522  border: none;7523  font-family: "IBM Plex Mono", monospace;7524  font-size: 0.625rem;7525  letter-spacing: 0.06em;7526  color: var(--peach-t2);7527  cursor: pointer;7528  text-align: center;7529  padding: 4px;7530  transition: color 120ms ease;7531}7532.peach-lock-recover-link:hover {7533  color: var(--peach-t0);7534}75357536.lock-screen--recovery {7537  display: flex;7538  flex-direction: column;7539  align-items: stretch;7540  padding: 12px 20px 24px;7541  overflow: hidden;7542}75437544.peach-recovery-nav {7545  display: flex;7546  align-items: center;7547  position: relative;7548  z-index: 1;7549  margin-bottom: 4px;7550}75517552/* Mask runes to the top decorative band only — keep inputs and the7553   bottom CTA button clear. The bottom of the popup is reserved for7554   submit buttons; rendering runes there overlaps the button glyph. */7555.peach-rune-background--recovery {7556  -webkit-mask-image: linear-gradient(7557    to bottom,7558    black 0px, black 85px,7559    transparent 110px,7560    transparent 100%7561  );7562  mask-image: linear-gradient(7563    to bottom,7564    black 0px, black 85px,7565    transparent 110px,7566    transparent 100%7567  );7568}75697570.peach-recovery-header {7571  text-align: center;7572  margin-bottom: 16px;7573  margin-top: 4px;7574}7575.peach-recovery-header .peach-onboarding-headline {7576  font-size: 1.25rem;7577  font-weight: 300;7578  letter-spacing: 0.02em;7579  margin: 0 0 4px;7580}7581.peach-recovery-header .peach-hint {7582  font-family: "IBM Plex Mono", monospace;7583  font-size: 0.625rem;7584  color: var(--peach-t2);7585  letter-spacing: 0.04em;7586  margin: 0;7587}75887589/* 12-word grid: 2 columns × 6 rows */7590.peach-recovery-grid {7591  display: grid;7592  grid-template-columns: repeat(2, 1fr);7593  gap: 12px 20px;7594  width: 100%;7595  margin-bottom: 0;7596}75977598.peach-recovery-word-slot {7599  display: flex;7600  align-items: center;7601  gap: 6px;7602  min-width: 0;7603}76047605.peach-recovery-word-index {7606  font-family: "IBM Plex Mono", monospace;7607  font-size: 0.5rem;7608  color: rgba(255, 255, 255, 0.35);7609  min-width: 14px;7610  flex-shrink: 0;7611  text-align: right;7612  letter-spacing: 0.04em;7613}76147615.peach-recovery-word-input {7616  flex: 1;7617  min-width: 0;7618  background: transparent;7619  border: none;7620  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7621  color: var(--peach-t0);7622  font-family: "IBM Plex Mono", monospace;7623  font-size: 0.6875rem;7624  letter-spacing: 0.06em;7625  padding: 5px 2px 4px;7626  outline: none;7627  text-transform: lowercase;7628  transition: border-color 120ms ease;7629}7630.peach-recovery-word-input::placeholder {7631  color: rgba(255, 255, 255, 0.18);7632}7633.peach-recovery-word-input:focus {7634  border-bottom-color: var(--peach-accent);7635}76367637.peach-recovery-submit {7638  width: 100%;7639  margin-top: auto;7640}76417642.peach-recovery-new-password-form {7643  width: 100%;7644  display: flex;7645  flex-direction: column;7646  gap: 16px;7647  margin-bottom: 8px;7648}7649.peach-recovery-new-password-form .peach-newvault-field {7650  display: flex;7651  flex-direction: column;7652  gap: 4px;7653}76547655/* ── Recovery words display (post-create) ────────────────────────── */7656.lock-screen--recovery-display {7657  display: flex;7658  flex-direction: column;7659  align-items: stretch;7660  padding: 0 20px 20px;7661  min-height: 0;7662  overflow-y: auto;7663}76647665.peach-recovery-words-display {7666  width: 100%;7667  margin-bottom: 16px;7668  border: 1px solid var(--peach-t3);7669  border-radius: 8px;7670  padding: 12px 14px;7671  background: rgba(245, 240, 234, 0.04);7672}76737674.peach-recovery-words-label {7675  font-family: "IBM Plex Mono", monospace;7676  font-size: 0.5rem;7677  letter-spacing: 0.08em;7678  color: var(--peach-t2);7679  text-transform: uppercase;7680  margin-bottom: 10px;7681}76827683.peach-recovery-word-list {7684  list-style: none;7685  margin: 0;7686  padding: 0;7687  display: grid;7688  grid-template-columns: repeat(2, 1fr);7689  gap: 6px 16px;7690}76917692.peach-recovery-word-item {7693  display: flex;7694  align-items: baseline;7695  gap: 5px;7696}76977698.peach-recovery-word-num {7699  font-family: "IBM Plex Mono", monospace;7700  font-size: 0.5rem;7701  color: var(--peach-t2);7702  width: 14px;7703  flex: 0 0 14px;7704  text-align: right;7705  letter-spacing: 0.04em;7706  font-variant-numeric: tabular-nums;7707}77087709.peach-recovery-download-btn {7710  display: block;7711  margin: 10px auto 0;7712  padding: 4px 10px;7713  background: transparent;7714  border: 1px solid var(--peach-border);7715  border-radius: 6px;7716  color: var(--peach-t2);7717  font-family: "IBM Plex Mono", monospace;7718  font-size: 0.5625rem;7719  letter-spacing: 0.06em;7720  text-transform: lowercase;7721  cursor: pointer;7722  transition: border-color 0.15s, color 0.15s;7723}77247725.peach-recovery-download-btn:hover {7726  border-color: var(--peach-accent);7727  color: var(--peach-t0);7728}77297730.peach-recovery-word-text {7731  font-family: "IBM Plex Mono", monospace;7732  font-size: 0.6875rem;7733  letter-spacing: 0.06em;7734  color: var(--peach-t0);7735  text-transform: lowercase;7736}77377738.peach-hint--warning {7739  color: var(--peach-accent);7740  font-style: italic;7741}7742.peach-hint--success {7743  color: var(--peach-t2);7744  font-family: "IBM Plex Mono", monospace;7745  font-size: 0.625rem;7746  letter-spacing: 0.06em;7747}77487749/* Confirmation step */7750.peach-recovery-confirm {7751  width: 100%;7752  flex: 1;7753  display: flex;7754  flex-direction: column;7755}7756.peach-recovery-confirm-label {7757  font-family: "IBM Plex Mono", monospace;7758  font-size: 0.5625rem;7759  letter-spacing: 0.04em;7760  color: var(--peach-t2);7761  text-align: center;7762  margin: 0 0 12px;7763}7764.peach-recovery-confirm-fields {7765  display: flex;7766  flex-direction: column;7767  gap: 14px;7768  margin-bottom: 10px;7769}7770.peach-recovery-confirm-field {7771  display: flex;7772  align-items: center;7773  gap: 8px;7774}7775.peach-recovery-confirm-num {7776  font-family: "IBM Plex Mono", monospace;7777  font-size: 0.5rem;7778  color: var(--peach-t2);7779  min-width: 44px;7780  letter-spacing: 0.04em;7781}7782.peach-recovery-confirm-input {7783  flex: 1;7784  background: transparent;7785  border: none;7786  border-bottom: 1px solid var(--peach-t3);7787  color: var(--peach-t0);7788  font-family: "IBM Plex Mono", monospace;7789  font-size: 0.6875rem;7790  letter-spacing: 0.06em;7791  padding: 4px 2px 3px;7792  outline: none;7793  text-transform: lowercase;7794  transition: border-color 120ms ease;7795}7796.peach-recovery-confirm-input:focus {7797  border-bottom-color: var(--peach-accent);7798}7799.peach-recovery-confirm-input:disabled {7800  opacity: 0.4;7801  cursor: not-allowed;7802}7803.peach-recovery-confirm-btn {7804  width: 100%;7805  margin-top: auto;7806}78077808/* ============================================================7809   Sync info sheet7810   ============================================================ */78117812.peach-sync-info-backdrop {7813  position: fixed;7814  inset: 0;7815  z-index: 200;7816  background: rgba(0, 0, 0, 0.55);7817  display: flex;7818  align-items: flex-end;7819  animation: peach-fade-in 200ms ease forwards;7820}78217822@keyframes peach-fade-in {7823  from { opacity: 0; }7824  to   { opacity: 1; }7825}78267827.peach-sync-info-sheet {7828  width: 100%;7829  background: var(--peach-bg-card, var(--peach-bg));7830  border-top-left-radius: 20px;7831  border-top-right-radius: 20px;7832  padding: 12px 24px 32px;7833  display: flex;7834  flex-direction: column;7835  gap: 20px;7836  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;7837}78387839@keyframes peach-sheet-up {7840  from { transform: translateY(100%); }7841  to   { transform: translateY(0); }7842}78437844.peach-sync-info-handle {7845  width: 36px;7846  height: 4px;7847  border-radius: 2px;7848  background: var(--peach-border);7849  margin: 0 auto 4px;7850  flex-shrink: 0;7851}78527853.peach-sync-info-title {7854  font-family: 'Cormorant Garamond', serif;7855  font-style: italic;7856  font-size: 26px;7857  font-weight: 600;7858  color: var(--peach-t0);7859  margin: 0;7860  line-height: 1.2;7861}78627863.peach-sync-info-body {7864  display: flex;7865  flex-direction: column;7866  gap: 14px;7867}78687869.peach-sync-info-point {7870  display: flex;7871  gap: 12px;7872  align-items: flex-start;7873  font-size: 14px;7874  color: var(--peach-t2);7875  line-height: 1.6;7876  margin: 0;7877}78787879.peach-sync-info-icon {7880  color: var(--peach-accent);7881  font-size: 16px;7882  flex-shrink: 0;7883  margin-top: 1px;7884}78857886.peach-sync-info-actions {7887  display: flex;7888  flex-direction: column;7889  gap: 12px;7890  margin-top: 4px;7891}78927893.peach-sync-info-pro-link {7894  background: none;7895  border: none;7896  font-size: 13px;7897  color: var(--peach-t3);7898  cursor: pointer;7899  padding: 0;7900  font-family: inherit;7901  text-align: center;7902  transition: color 150ms ease;7903}79047905.peach-sync-info-pro-link:hover {7906  color: var(--peach-accent);7907}79087909.peach-btn--full {7910  width: 100%;7911}79127913/* ── Sync screen ── */79147915.peach-sync-coming-soon {7916  display: flex;7917  align-items: flex-start;7918  gap: 10px;7919  padding: 12px 14px;7920  background: var(--peach-s1);7921  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);7922  border-radius: 10px;7923}7924.peach-sync-coming-soon__icon {7925  flex-shrink: 0;7926  color: var(--peach-accent);7927  margin-top: 1px;7928  line-height: 0;7929}7930.peach-sync-coming-soon__title {7931  font-family: 'Cormorant Garamond', serif;7932  font-weight: 500;7933  font-size: 13px;7934  color: var(--peach-accent);7935  margin: 0 0 5px;7936  line-height: 1.3;7937}7938.peach-sync-coming-soon__body {7939  font-size: 12px;7940  color: var(--peach-t1);7941  line-height: 1.55;7942  margin: 0;7943}79447945.peach-sync-screen {7946  display: flex;7947  flex-direction: column;7948  height: 100%;7949}79507951.peach-sync-content {7952  flex: 1;7953  overflow-y: auto;7954  padding: 24px 20px 40px;7955  display: flex;7956  flex-direction: column;7957  gap: 24px;7958}79597960/* Intro (State A) */7961.peach-sync-headline {7962  font-family: 'Cormorant Garamond', serif;7963  font-style: italic;7964  font-size: 28px;7965  font-weight: 600;7966  color: var(--peach-t0);7967  margin: 0 0 10px;7968  line-height: 1.2;7969}79707971.peach-sync-intro-body {7972  font-size: 14px;7973  color: var(--peach-t1);7974  line-height: 1.6;7975  margin: 0;7976}79777978.peach-sync-pro-note {7979  display: flex;7980  flex-direction: column;7981  gap: 8px;7982  background: var(--peach-t3);7983  border-radius: 10px;7984  padding: 12px 14px;7985}79867987.peach-sync-pro-note-text {7988  font-size: 12px;7989  color: var(--peach-t2);7990  line-height: 1.5;7991  margin: 0;7992}79937994.peach-sync-pro-link {7995  background: none;7996  border: none;7997  font-size: 12px;7998  color: var(--peach-accent);7999  cursor: pointer;8000  padding: 0;8001  font-family: inherit;8002  text-align: left;8003}80048005/* Status (State C) */8006.peach-sync-status {8007  padding: 12px 0;8008  border-bottom: 1px solid var(--peach-border);8009}80108011.peach-sync-status-row {8012  display: flex;8013  align-items: center;8014  gap: 8px;8015}80168017.peach-sync-dot {8018  width: 7px;8019  height: 7px;8020  border-radius: 50%;8021  flex-shrink: 0;8022}80238024.peach-sync-dot--green { background: var(--peach-health-ok); }8025.peach-sync-dot--amber { background: var(--peach-accent); }80268027.peach-sync-status-text {8028  font-family: 'IBM Plex Mono', monospace;8029  font-size: 11px;8030  color: var(--peach-t2);8031}80328033/* Paired devices */8034.peach-sync-section {8035  display: flex;8036  flex-direction: column;8037  gap: 2px;8038}80398040.peach-sync-section-label {8041  font-family: 'IBM Plex Mono', monospace;8042  font-size: 10px;8043  letter-spacing: 0.1em;8044  color: var(--peach-t3);8045  margin: 0 0 10px;8046}80478048.peach-sync-device-row {8049  display: flex;8050  justify-content: space-between;8051  align-items: baseline;8052  padding: 10px 0;8053  border-bottom: 1px solid var(--peach-border);8054  gap: 12px;8055}80568057.peach-sync-device-name {8058  font-size: 14px;8059  color: var(--peach-t1);8060}80618062.peach-sync-device-meta {8063  font-family: 'IBM Plex Mono', monospace;8064  font-size: 11px;8065  color: var(--peach-t3);8066  white-space: nowrap;8067}80688069.peach-sync-hub-note {8070  padding: 14px 16px;8071  border: 1px solid var(--peach-border);8072  border-radius: 10px;8073  display: flex;8074  flex-direction: column;8075  gap: 6px;8076  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8077}80788079.peach-sync-hub-note-title {8080  font-size: 13px;8081  font-weight: 600;8082  color: var(--peach-t0);8083  margin: 0;8084}80858086.peach-sync-hub-note-body {8087  font-size: 12px;8088  color: var(--peach-t2);8089  line-height: 1.6;8090  margin: 0;8091}80928093/* Action buttons */8094.peach-sync-actions {8095  display: flex;8096  gap: 10px;8097  flex-wrap: wrap;8098}80998100/* Upgrade prompt (State B) */8101.peach-sync-upgrade {8102  display: flex;8103  flex-direction: column;8104  gap: 12px;8105  padding: 16px;8106  border: 1px solid var(--peach-border);8107  border-radius: 10px;8108}81098110.peach-sync-upgrade-text {8111  font-size: 13px;8112  color: var(--peach-t2);8113  line-height: 1.6;8114  margin: 0;8115}81168117/* Network note */8118.peach-sync-network-note {8119  font-size: 12px;8120  color: var(--peach-t3);8121  line-height: 1.6;8122  margin: 0;8123}81248125/* Advanced */8126.peach-sync-advanced {8127  margin-top: auto;8128  padding-top: 16px;8129  border-top: 1px solid var(--peach-border);8130}81318132.peach-sync-advanced-toggle {8133  display: flex;8134  align-items: center;8135  gap: 8px;8136  background: none;8137  border: none;8138  font-family: 'IBM Plex Mono', monospace;8139  font-size: 11px;8140  letter-spacing: 0.08em;8141  color: var(--peach-t3);8142  cursor: pointer;8143  padding: 0;8144  text-transform: uppercase;8145}81468147.peach-sync-advanced-chevron {8148  display: inline-block;8149  transition: transform 200ms ease;8150  font-size: 10px;8151}81528153.peach-sync-advanced-chevron.is-open {8154  transform: rotate(90deg);8155}81568157.peach-sync-advanced-content {8158  margin-top: 14px;8159}81608161.peach-sync-advanced-row {8162  display: flex;8163  justify-content: space-between;8164  align-items: center;8165  gap: 16px;8166}81678168.peach-sync-advanced-title {8169  font-size: 14px;8170  color: var(--peach-t1);8171  margin: 0 0 2px;8172}81738174.peach-sync-advanced-subtitle {8175  font-size: 12px;8176  color: var(--peach-t3);8177  margin: 0;8178  line-height: 1.5;8179}81808181/* ── Add Device — Android scan tabs ─────────────────────────────────────── */81828183.peach-pairing-tabs {8184  display: flex;8185  border: 1px solid var(--peach-border);8186  border-radius: 8px;8187  overflow: hidden;8188  margin-bottom: 4px;8189}81908191.peach-pairing-tab {8192  flex: 1;8193  padding: 10px 0;8194  background: none;8195  border: none;8196  font-family: 'IBM Plex Mono', monospace;8197  font-size: 11px;8198  letter-spacing: 0.06em;8199  color: var(--peach-t2);8200  cursor: pointer;8201  transition: background 150ms, color 150ms;8202}82038204.peach-pairing-tab.is-active {8205  background: var(--peach-accent);8206  color: #fff;8207  font-weight: 600;8208}82098210.peach-pairing-tab:not(.is-active):active {8211  background: var(--peach-border);8212}82138214/* Camera view */8215.peach-pairing-camera-container {8216  position: relative;8217  width: 100%;8218  aspect-ratio: 1;8219  border-radius: 12px;8220  overflow: hidden;8221  background: #000;8222  flex-shrink: 0;8223}82248225.peach-pairing-video {8226  width: 100%;8227  height: 100%;8228  object-fit: cover;8229}82308231.peach-pairing-scan-frame {8232  position: absolute;8233  top: 50%;8234  left: 50%;8235  transform: translate(-50%, -50%);8236  width: 60%;8237  aspect-ratio: 1;8238  border: 2px solid var(--peach-accent);8239  border-radius: 8px;8240  pointer-events: none;8241}82428243/* ── Notes Mode ── */82448245/* Overlay that crossfades over the vault */8246.peach-notes-overlay {8247  position: fixed;8248  inset: 0;8249  z-index: 90;8250  opacity: 0;8251  pointer-events: none;8252  animation: peach-mode-in 220ms ease-in forwards;8253}82548255.peach-notes-overlay.is-visible {8256  opacity: 1;8257  pointer-events: auto;8258}82598260@keyframes peach-mode-in {8261  from { opacity: 0; }8262  to   { opacity: 1; }8263}82648265/* Top-level notes surface */8266.peach-notes-mode {8267  position: absolute;8268  inset: 0;8269  background: var(--peach-bg);8270  display: flex;8271  flex-direction: column;8272}82738274/* Rune canvas positioned behind content */8275.peach-note-rune-canvas {8276  position: absolute;8277  inset: 0;8278  width: 100%;8279  height: 100%;8280  pointer-events: none;8281  z-index: 0;8282}82838284/* TOC wrapper */8285.peach-notes-toc-wrapper {8286  position: absolute;8287  inset: 0;8288  z-index: 1;8289  opacity: 1;8290  pointer-events: auto;8291  transition: opacity 200ms ease;8292}82938294.peach-notes-toc-wrapper.is-hidden {8295  opacity: 0;8296  pointer-events: none;8297}82988299/* Editor wrapper */8300.peach-notes-editor-wrapper {8301  position: absolute;8302  inset: 0;8303  z-index: 2;8304  opacity: 0;8305  pointer-events: none;8306  transition: opacity 200ms ease;8307}83088309.peach-notes-editor-wrapper.is-visible {8310  opacity: 1;8311  pointer-events: auto;8312}83138314/* TOC inner */8315.peach-notes-toc {8316  position: relative;8317  display: flex;8318  flex-direction: column;8319  height: 100%;8320  padding-top: env(safe-area-inset-top, 0px);8321  padding-bottom: env(safe-area-inset-bottom, 0px);8322}83238324/* Shared header */8325.peach-notes-header {8326  display: flex;8327  align-items: center;8328  padding: 12px 16px;8329  gap: 12px;8330  flex-shrink: 0;8331  min-height: 52px;8332  position: relative;8333  z-index: 2;8334}83358336.peach-notes-back {8337  font-size: 22px;8338  color: var(--peach-t2);8339  background: none;8340  border: none;8341  padding: 4px;8342  cursor: pointer;8343  line-height: 1;8344  flex-shrink: 0;8345  transition: color 150ms ease;8346  -webkit-tap-highlight-color: transparent;8347}83488349.peach-notes-back:active { color: var(--peach-t0); }83508351.peach-notes-header-title {8352  flex: 1;8353  font-family: 'Cormorant Garamond', serif;8354  font-style: italic;8355  font-size: 22px;8356  color: var(--peach-t0);8357  text-align: center;8358}83598360.peach-notes-header-title.is-breadcrumb {8361  font-family: 'IBM Plex Mono', monospace;8362  font-style: normal;8363  font-size: 11px;8364  color: var(--peach-t3);8365  letter-spacing: 0.08em;8366  text-transform: uppercase;8367  cursor: pointer;8368}83698370.peach-notes-header-actions {8371  display: flex;8372  gap: 8px;8373  flex-shrink: 0;8374}83758376.peach-notes-header-btn {8377  width: 36px;8378  height: 36px;8379  display: flex;8380  align-items: center;8381  justify-content: center;8382  background: none;8383  border: none;8384  color: var(--peach-t2);8385  cursor: pointer;8386  border-radius: 8px;8387  font-size: 16px;8388  transition: color 150ms ease, background 150ms ease;8389  -webkit-tap-highlight-color: transparent;8390}83918392.peach-notes-header-btn:active {8393  background: rgba(255,255,255,0.06);8394  color: var(--peach-t0);8395}83968397/* Inline search bar */8398.peach-notes-search-input {8399  flex: 1;8400  background: none;8401  border: none;8402  outline: none;8403  font-family: 'IBM Plex Mono', monospace;8404  font-size: 13px;8405  color: var(--peach-t0);8406  padding: 4px 0;8407  letter-spacing: 0.02em;8408}84098410.peach-notes-search-input::placeholder {8411  color: var(--peach-t3);8412}84138414/* TOC list */8415.peach-notes-list-container {8416  flex: 1;8417  overflow-y: auto;8418  overflow-x: hidden;8419  scrollbar-width: none;8420  -webkit-overflow-scrolling: touch;8421  overscroll-behavior: contain;8422  position: relative;8423  z-index: 1;8424}84258426.peach-notes-list-container::-webkit-scrollbar { display: none; }84278428/* Note row */8429.peach-note-row {8430  position: relative;8431  display: grid;8432  grid-template-columns: 44px 8px 1fr 8px auto;8433  align-items: center;8434  min-height: 72px;8435  padding: 16px 20px;8436  border-bottom: 0.5px solid var(--peach-border);8437  cursor: pointer;8438  overflow: hidden;8439  touch-action: pan-y;8440  user-select: none;8441  -webkit-user-select: none;8442  -webkit-tap-highlight-color: transparent;8443}84448445.peach-note-row:first-child {8446  border-top: 0.5px solid var(--peach-border);8447}84488449.peach-note-row:active {8450  background: rgba(255,255,255,0.02);8451}84528453.peach-note-numeral {8454  font-family: 'Cormorant Garamond', serif;8455  font-style: italic;8456  font-size: 15px;8457  color: var(--peach-accent);8458  text-align: right;8459  line-height: 1;8460  flex-shrink: 0;8461}84628463.peach-note-title-gap { /* grid spacer */ }84648465.peach-note-title {8466  font-family: 'Cormorant Garamond', serif;8467  font-style: italic;8468  font-size: 18px;8469  color: var(--peach-t0);8470  line-height: 1.3;8471  min-width: 0;8472  overflow-wrap: break-word;8473}84748475.peach-note-title-match {8476  color: var(--peach-accent);8477}84788479.peach-note-date {8480  font-family: 'IBM Plex Mono', monospace;8481  font-size: 11px;8482  color: var(--peach-t2);8483  white-space: nowrap;8484  text-align: right;8485  flex-shrink: 0;8486  grid-column: 5;8487}84888489/* Swipe underlays */8490.peach-note-row-underlay {8491  position: absolute;8492  inset: 0;8493  display: flex;8494  align-items: center;8495  padding: 0 24px;8496  font-family: 'IBM Plex Mono', monospace;8497  font-size: 11px;8498  letter-spacing: 0.1em;8499  pointer-events: none;8500  z-index: 0;8501}85028503.peach-note-row-underlay--delete {8504  background: #8B2020;8505  color: rgba(255,255,255,0.9);8506  justify-content: flex-end;8507}85088509.peach-note-row-underlay--archive {8510  background: var(--peach-accent);8511  color: #0C0A06;8512  justify-content: flex-start;8513}85148515/* Delete confirm strip */8516.peach-note-delete-confirm {8517  position: absolute;8518  inset: 0;8519  background: var(--peach-bg);8520  display: flex;8521  align-items: center;8522  gap: 12px;8523  padding: 0 20px;8524  font-family: 'IBM Plex Mono', monospace;8525  font-size: 11px;8526  color: var(--peach-t1);8527  letter-spacing: 0.04em;8528  animation: peach-delete-confirm-in 150ms ease both;8529  z-index: 10;8530}85318532@keyframes peach-delete-confirm-in {8533  from { opacity: 0; }8534  to   { opacity: 1; }8535}85368537.peach-note-delete-confirm-btn {8538  background: #8B2020;8539  color: rgba(255,255,255,0.9);8540  border: none;8541  border-radius: 6px;8542  padding: 4px 10px;8543  font-family: 'IBM Plex Mono', monospace;8544  font-size: 10px;8545  cursor: pointer;8546  letter-spacing: 0.06em;8547}85488549.peach-note-delete-cancel-btn {8550  background: none;8551  border: none;8552  color: var(--peach-t3);8553  font-family: 'IBM Plex Mono', monospace;8554  font-size: 10px;8555  cursor: pointer;8556  letter-spacing: 0.06em;8557  padding: 4px 6px;8558}85598560/* + New note button */8561.peach-notes-new-btn {8562  font-family: 'IBM Plex Mono', monospace;8563  font-size: 12px;8564  color: var(--peach-t3);8565  text-align: center;8566  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8567  background: none;8568  border: none;8569  width: 100%;8570  cursor: pointer;8571  letter-spacing: 0.04em;8572  transition: color 150ms ease;8573  -webkit-tap-highlight-color: transparent;8574}85758576.peach-notes-new-btn:active { color: var(--peach-accent); }85778578/* Empty state */8579.peach-notes-empty {8580  display: flex;8581  flex-direction: column;8582  align-items: center;8583  justify-content: center;8584  flex: 1;8585  padding: 48px 32px;8586  gap: 16px;8587}85888589.peach-notes-empty-text {8590  font-family: 'Cormorant Garamond', serif;8591  font-style: italic;8592  font-size: 20px;8593  color: var(--peach-t3);8594  text-align: center;8595  margin: 0;8596  line-height: 1.4;8597  white-space: pre-line;8598}85998600/* ── Editor surface ── */86018602.peach-note-editor-surface {8603  position: absolute;8604  inset: 0;8605  background: var(--peach-bg);8606  display: flex;8607  flex-direction: column;8608  padding-top: env(safe-area-inset-top, 0px);8609}86108611.peach-note-editor-scroll {8612  flex: 1;8613  overflow-y: auto;8614  overflow-x: hidden;8615  scrollbar-width: none;8616  -webkit-overflow-scrolling: touch;8617  padding: 0 24px 120px;8618  position: relative;8619  z-index: 1;8620}86218622.peach-note-editor-scroll::-webkit-scrollbar { display: none; }86238624/* Desktop toolbar (always visible above body) */8625.peach-note-toolbar-desktop-inline {8626  display: flex;8627  align-items: center;8628  gap: 2px;8629  padding: 6px 0 12px;8630  margin-bottom: 4px;8631  border-bottom: 0.5px solid var(--peach-border);8632}86338634/* Title field */8635.peach-note-title-field {8636  font-family: 'Cormorant Garamond', serif;8637  font-style: italic;8638  font-size: 32px;8639  font-weight: 600;8640  color: var(--peach-t0);8641  line-height: 1.2;8642  padding: 8px 0 0;8643  outline: none;8644  min-height: 44px;8645  word-break: break-word;8646  position: relative;8647  z-index: 1;8648}86498650.peach-note-title-field:empty::before {8651  content: attr(data-placeholder);8652  color: var(--peach-t3);8653  pointer-events: none;8654}86558656/* Hairline separator */8657.peach-note-hairline {8658  height: 0.5px;8659  background: var(--peach-border);8660  margin: 12px 0 20px;8661  position: relative;8662  z-index: 1;8663}86648665/* Body field */8666.peach-note-body-field {8667  font-family: 'DM Sans', sans-serif;8668  font-size: 16px;8669  color: var(--peach-t0);8670  line-height: 1.85;8671  padding: 0;8672  outline: none;8673  min-height: 240px;8674  word-break: break-word;8675  position: relative;8676  z-index: 1;8677}86788679.peach-note-body-field:empty::before {8680  content: attr(data-placeholder);8681  color: var(--peach-t3);8682  font-style: italic;8683  pointer-events: none;8684}86858686.peach-note-body-field h2 {8687  font-family: 'Cormorant Garamond', serif;8688  font-style: italic;8689  font-size: 22px;8690  font-weight: 600;8691  color: var(--peach-t0);8692  margin: 20px 0 8px;8693}86948695.peach-note-body-field blockquote {8696  border-left: 2px solid var(--peach-accent);8697  margin: 12px 0;8698  padding-left: 16px;8699  color: var(--peach-t1);8700  font-style: italic;8701}87028703.peach-note-body-field ul,8704.peach-note-body-field ol {8705  padding-left: 20px;8706  margin: 8px 0;8707}87088709.peach-note-body-field li {8710  margin: 4px 0;8711}87128713.peach-note-body-field hr {8714  border: none;8715  border-top: 0.5px solid var(--peach-border);8716  margin: 16px 0;8717}87188719/* Saved indicator */8720.peach-note-saved-indicator {8721  font-family: 'IBM Plex Mono', monospace;8722  font-size: 11px;8723  color: var(--peach-t3);8724  letter-spacing: 0.04em;8725  text-align: right;8726  padding: 6px 24px;8727  flex-shrink: 0;8728  transition: opacity 300ms ease;8729  pointer-events: none;8730  position: relative;8731  z-index: 1;8732}87338734/* Mobile keyboard toolbar */8735.peach-note-toolbar-mobile {8736  display: flex;8737  align-items: center;8738  padding: 8px 16px;8739  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));8740  background: var(--peach-bg);8741  border-top: 0.5px solid var(--peach-border);8742  gap: 4px;8743  flex-shrink: 0;8744  position: relative;8745  z-index: 10;8746}87478748.peach-note-toolbar-btn {8749  min-width: 36px;8750  height: 36px;8751  display: flex;8752  align-items: center;8753  justify-content: center;8754  background: none;8755  border: none;8756  border-radius: 8px;8757  cursor: pointer;8758  font-size: 14px;8759  color: var(--peach-t1);8760  font-family: 'DM Sans', sans-serif;8761  font-weight: 600;8762  transition: background 100ms ease, color 100ms ease;8763  -webkit-tap-highlight-color: transparent;8764}87658766.peach-note-toolbar-btn--italic { font-style: italic; }8767.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }8768.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }87698770.peach-note-toolbar-divider {8771  width: 0.5px;8772  height: 20px;8773  background: var(--peach-border);8774  margin: 0 4px;8775  flex-shrink: 0;8776}87778778.peach-note-toolbar-spacer { flex: 1; }87798780/* Desktop: larger headline in TOC */8781@media (min-width: 400px) {8782  .peach-notes-header-title:not(.is-breadcrumb) {8783    font-size: 32px;8784  }87858786  .peach-note-row {8787    min-height: 64px;8788    padding: 14px 16px;8789  }8790}87918792/* Flying title — shared element during expansion/collapse */87938794/* ─── Light theme overrides ───────────────────────────────────────────────8795   Tokens that cannot be expressed as variable substitutions — hardcoded8796   context-specific values that need separate light-mode rules. */87978798/* Settings section headers: use text-label (#79766F) per restoration brief —8799   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY8800   presence without fighting the light parchment background. */8801.light .peach-settings-sub-label,8802[data-theme="light"] .peach-settings-sub-label,8803.light .peach-settings-nav-label,8804[data-theme="light"] .peach-settings-nav-label {8805  color: #79766F;8806}88078808/* Secondary action buttons (ghost / subtle): filled with input-well surface8809   so they read as recessed against the parchment card background. */8810.light .peach-btn--ghost:not(.peach-icon-btn),8811[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {8812  background: #EEE7DD;8813  border-color: #DDD5CB;8814  color: #1A1208;8815}8816.light .peach-icon-btn,8817[data-theme="light"] .peach-icon-btn {8818  background: transparent;8819  border-color: transparent;8820}8821.light .peach-btn--subtle,8822[data-theme="light"] .peach-btn--subtle {8823  background: #EEE7DD;8824  border-color: #DDD5CB;8825}88268827/* Wide secondary action button on the lock screen — override the8828   hardcoded dark-mode rgba values with warm parchment equivalents. */8829.light .peach-lock-secondary,8830[data-theme="light"] .peach-lock-secondary {8831  background: #EEE7DD;8832  border-color: #DDD5CB;8833  color: #1A1208;8834}8835.light .peach-lock-secondary:hover,8836[data-theme="light"] .peach-lock-secondary:hover {8837  background: #F0E9DF;8838}88398840/* Entry row hover: bg-row lifts the row above the card surface. */8841.light .peach-entry-row:hover,8842[data-theme="light"] .peach-entry-row:hover {8843  background: #F2EBE1;8844}8845.light .peach-entry-row.is-active,8846[data-theme="light"] .peach-entry-row.is-active {8847  background: #F2EBE1;8848}8849.light .peach-entry-row.is-selected,8850[data-theme="light"] .peach-entry-row.is-selected {8851  background: #F5EDE2;8852}88538854/* ──────────────────────────────────────────────────────────────────────────8855   Chirp pairing flow — bird-stage animation (Phase 1)8856   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.8857   Three-act animation gated on the [data-phase] attribute of8858   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)8859   each react via either pose class or visibility flag.8860   Tokens: accent surfaces use var(--peach-accent); bird illustration8861   colours are baked into the SVG per the brand-peach exception in §3.1.8862   ────────────────────────────────────────────────────────────────────── */88638864.peach-chirp-pair {8865  position: absolute;8866  inset: 0;8867  z-index: 3;8868  display: flex;8869  flex-direction: column;8870  padding: 14px 12px 12px;8871  width: 100%;8872  box-sizing: border-box;8873  gap: 0;8874  background:8875    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),8876    var(--peach-bg);8877  color: var(--peach-t0);8878  overflow-y: auto;8879  overflow-x: hidden;8880  scrollbar-width: none;8881  isolation: isolate;8882  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;8883}8884@keyframes peach-chirp-overlay-in {8885  from { opacity: 0; transform: translateY(8px); }8886  to   { opacity: 1; transform: translateY(0); }8887}8888.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }8889.peach-chirp-pair::before {8890  content: '';8891  position: absolute;8892  inset: 0;8893  border-radius: inherit;8894  pointer-events: none;8895  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);8896  z-index: 0;8897}8898.peach-chirp-pair > * { position: relative; z-index: 1; }88998900/* Header --------------------------------------------------------------- */8901.peach-chirp-head {8902  display: flex; align-items: center; gap: 10px;8903}8904.peach-chirp-back {8905  width: 32px; height: 32px;8906  display: inline-flex; align-items: center; justify-content: center;8907  background: transparent;8908  border: none;8909  border-radius: 8px;8910  color: var(--peach-t1);8911  cursor: pointer;8912  transition: color 0.15s ease, box-shadow 0.15s ease;8913}8914.peach-chirp-back:hover {8915  color: var(--peach-accent);8916  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);8917}8918.peach-chirp-title {8919  font-family: var(--font-display, Georgia, serif);8920  font-style: italic;8921  font-size: 24px;8922  font-weight: 500;8923  letter-spacing: 0.005em;8924  color: var(--peach-t0);8925  line-height: 1;8926}8927.peach-chirp-head-spacer { flex: 1; }89288929/* Chip row ------------------------------------------------------------- */8930.peach-chirp-chip-row {8931  display: flex;8932  align-items: center;8933  justify-content: flex-start;8934  margin-top: 12px;8935}8936.peach-chirp-chip {8937  display: inline-flex; align-items: center; gap: 8px;8938  padding: 5px 10px 5px 8px;8939  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);8940  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);8941  border-radius: 999px;8942  font-family: var(--peach-mono, ui-monospace, monospace);8943  font-size: 11px;8944  letter-spacing: 0.04em;8945  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));8946}8947.peach-chirp-chip-dot {8948  width: 6px; height: 6px; border-radius: 50%;8949  background: var(--peach-accent);8950  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);8951}8952.peach-chirp-chip[data-phase="paired"] {8953  background: color-mix(in srgb, #4f9eda 12%, transparent);8954  border-color: color-mix(in srgb, #4f9eda 28%, transparent);8955  color: #76b6e8;8956}8957.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {8958  background: #76b6e8;8959  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);8960}8961.peach-chirp-chip[data-phase="timeout"],8962.peach-chirp-chip[data-phase="mic_denied"],8963.peach-chirp-chip[data-phase="version_mismatch"],8964.peach-chirp-chip[data-phase="handshake_failed"] {8965  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);8966  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);8967  color: var(--peach-warn, #d29257);8968}8969.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,8970.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,8971.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,8972.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {8973  background: var(--peach-warn, #d29257);8974  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);8975}89768977/* Bird stage ----------------------------------------------------------- */8978.peach-chirp-stage {8979  position: relative;8980  margin: 14px 0 8px;8981  height: 180px;8982  border-radius: 12px;8983  background:8984    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),8985    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),8986    color-mix(in srgb, var(--peach-bg) 92%, #000);8987  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);8988  overflow: hidden;8989  isolation: isolate;8990}8991.peach-chirp-stage::after {8992  content: '';8993  position: absolute;8994  left: 12%; right: 12%;8995  bottom: 36px;8996  height: 1px;8997  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);8998}89999000.peach-chirp-bird-slot {9001  position: absolute;9002  bottom: 8px;9003  width: 100px;9004  height: 110px;9005  display: flex;9006  align-items: flex-end;9007  justify-content: center;9008}9009.peach-chirp-bird-slot-desktop { left: 28px; }9010.peach-chirp-bird-slot-mobile { right: 28px; }90119012/* Mobile bird hops in from the right when handshake begins */9013.peach-chirp-bird-slot-mobile {9014  opacity: 1;9015  transform: translateX(-6px);9016  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9017}9018.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,9019.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,9020.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {9021  opacity: 0;9022  transform: translateX(60px) rotate(8deg);9023}9024.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,9025.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {9026  transform: translateX(6px);9027  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9028}90299030/* Paired: both birds bob together */9031.peach-chirp-stage.act-paired .peach-chirp-bird-slot {9032  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;9033}9034.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }9035.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }9036.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }9037@keyframes peach-chirp-happy-bob {9038  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9039  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9040}90419042/* Bird internal -------------------------------------------------------- */9043.peach-chirp-bird {9044  width: 108px;9045  height: 108px;9046  transform-origin: 50% 95%;9047}9048.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }90499050.peach-chirp-bird-body {9051  transform-origin: 50% 80%;9052  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;9053}9054@keyframes peach-chirp-bird-bob {9055  0%, 100% { transform: translateY(0) scale(1, 1); }9056  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9057}90589059.peach-chirp-bird-eye-group {9060  animation: peach-chirp-blink 5.2s steps(1, end) infinite;9061  transform-origin: center;9062  transform-box: fill-box;9063}9064@keyframes peach-chirp-blink {9065  0%, 92%, 96%, 100% { transform: scaleY(1); }9066  94%                { transform: scaleY(0.05); }9067}90689069/* Pose: chirping — beak opens, head bobs, aura blooms */9070.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {9071  animation:9072    peach-chirp-bird-bob 2.4s ease-in-out infinite,9073    peach-chirp-squeeze 1.7s ease-in-out infinite;9074}9075@keyframes peach-chirp-squeeze {9076  0%, 70%, 100% { transform-origin: 50% 85%; }9077  78%           { transform: scale(1.04, 0.96) translateY(1px); }9078  86%           { transform: scale(0.98, 1.02); }9079}9080.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {9081  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;9082}9083@keyframes peach-chirp-head-bob {9084  0%, 70%, 100% { transform: translateY(0) rotate(0); }9085  78%           { transform: translateY(-3px) rotate(-4deg); }9086  86%           { transform: translateY(-1px) rotate(-2deg); }9087}9088.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {9089  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;9090}9091@keyframes peach-chirp-beak-open {9092  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9093  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9094  86%           { transform: rotate(-6deg); }9095}9096.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {9097  animation: peach-chirp-aura 1.7s ease-in-out infinite;9098}9099@keyframes peach-chirp-aura {9100  0%, 100% { opacity: 0; }9101  50%      { opacity: 0.8; }9102}9103.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {9104  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;9105  transform-origin: 100% 50%;9106}9107@keyframes peach-chirp-tail-twitch {9108  0%, 75%, 100% { transform: rotate(0); }9109  82%           { transform: rotate(-3deg) translateX(-1px); }9110}91119112/* Pose: attentive — head tilts toward partner */9113.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {9114  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9115}9116@keyframes peach-chirp-head-tilt {9117  0%   { transform: rotate(0) translateY(0); }9118  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9119  100% { transform: rotate(-6deg); }9120}9121.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {9122  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9123  transform-origin: 100% 50%;9124}9125@keyframes peach-chirp-tail-cock {9126  0%   { transform: rotate(0); }9127  100% { transform: rotate(-4deg); }9128}91299130/* Pose: happy — wing flutter, tuft perk, tail wag */9131.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9132  transform-origin: 80% 60%;9133  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9134}9135@keyframes peach-chirp-wing-flutter {9136  0%, 100% { transform: rotate(0) translateY(0); }9137  50%      { transform: rotate(-16deg) translateY(-2px); }9138}9139.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9140  transform-origin: 0% 100%;9141  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9142}9143@keyframes peach-chirp-tuft-perk {9144  0%, 100% { transform: rotate(0); }9145  50%      { transform: rotate(-15deg) translateY(-1px); }9146}9147.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9148  transform-origin: 100% 50%;9149  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9150}9151@keyframes peach-chirp-tail-wag {9152  0%, 100% { transform: rotate(0); }9153  25%      { transform: rotate(6deg); }9154  75%      { transform: rotate(-6deg); }9155}9156.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9157  animation: peach-chirp-head-perk 0.5s ease-out;9158}9159@keyframes peach-chirp-head-perk {9160  0%   { transform: translateY(0); }9161  40%  { transform: translateY(-3px) rotate(2deg); }9162  100% { transform: translateY(0); }9163}91649165/* Pose: sad — body droops forward */9166.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9167  transform: translateY(5px) rotate(-2deg);9168  animation: none;9169}9170.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9171  transform: translateY(4px) rotate(8deg);9172}9173.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9174.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }91759176.peach-chirp-bird-pose-hidden { opacity: 0; }91779178/* Chirp arcs ----------------------------------------------------------- */9179.peach-chirp-arcs {9180  position: absolute;9181  top: 18px;9182  width: 96px;9183  height: 70px;9184  pointer-events: none;9185}9186.peach-chirp-arcs-right { right: -60px; }9187.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9188.peach-chirp-arc {9189  position: absolute;9190  top: 50%;9191  left: 0;9192  width: 40px;9193  height: 40px;9194  margin-top: -20px;9195  border: 1.2px solid #f4d5a8;9196  border-color: transparent #f4d5a8 transparent transparent;9197  border-radius: 50%;9198  opacity: 0;9199  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9200}9201@keyframes peach-chirp-arc-expand {9202  0%   { transform: scale(0.4); opacity: 0; }9203  20%  { opacity: 0.9; }9204  100% { transform: scale(1.6); opacity: 0; }9205}92069207/* Flight wave ---------------------------------------------------------- */9208.peach-chirp-flight-track {9209  position: absolute;9210  inset: 32px 36px 38px 36px;9211  pointer-events: none;9212}9213.peach-chirp-flight-wave {9214  position: absolute;9215  top: 8px;9216  left: 76px;9217  right: 76px;9218  height: 60px;9219  width: auto;9220  opacity: 0;9221  transition: opacity 0.15s ease;9222  stroke: #f4d5a8;9223  fill: none;9224}9225.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9226.peach-chirp-flight-wave.is-visible { opacity: 1; }9227.peach-chirp-flight-path,9228.peach-chirp-flight-path-2 {9229  stroke-dasharray: 240;9230  stroke-dashoffset: 240;9231  stroke-linecap: round;9232  fill: none;9233}9234.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9235.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9236.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9237  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9238}9239.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9240  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9241}9242@keyframes peach-chirp-fly {9243  0%   { stroke-dashoffset: 240; opacity: 0; }9244  20%  { opacity: 1; }9245  100% { stroke-dashoffset: -120; opacity: 0; }9246}92479248/* Connection dot ------------------------------------------------------- */9249.peach-chirp-dot {9250  position: absolute;9251  top: 50%; left: 50%;9252  transform: translate(-50%, -50%);9253  width: 40px; height: 40px;9254  opacity: 0;9255  pointer-events: none;9256  transition: opacity 0.3s ease;9257  color: var(--peach-accent);9258}9259.peach-chirp-dot.is-visible { opacity: 1; }9260.peach-chirp-dot-glow {9261  position: absolute; top: 50%; left: 50%;9262  transform: translate(-50%, -50%);9263  width: 38px; height: 38px;9264  border-radius: 50%;9265  filter: blur(10px);9266  opacity: 0.55;9267  background: var(--peach-accent);9268  animation: peach-chirp-dot-bloom 1.4s ease-out;9269}9270.peach-chirp-dot-core {9271  position: absolute; top: 50%; left: 50%;9272  transform: translate(-50%, -50%);9273  width: 8px; height: 8px;9274  border-radius: 50%;9275  background: var(--peach-accent);9276  box-shadow: 0 0 12px currentColor;9277  animation: peach-chirp-dot-core 1.4s ease-out;9278}9279.peach-chirp-dot-ring {9280  position: absolute; top: 50%; left: 50%;9281  width: 60px; height: 60px;9282  transform: translate(-50%, -50%);9283  animation: peach-chirp-dot-ring 1.4s linear;9284  stroke: var(--peach-accent);9285}9286@keyframes peach-chirp-dot-bloom {9287  0%   { width: 4px; height: 4px; opacity: 0; }9288  35%  { width: 60px; height: 60px; opacity: 0.7; }9289  100% { width: 38px; height: 38px; opacity: 0.55; }9290}9291@keyframes peach-chirp-dot-core {9292  0%   { width: 0; height: 0; }9293  35%  { width: 12px; height: 12px; }9294  100% { width: 8px; height: 8px; }9295}9296@keyframes peach-chirp-dot-ring {9297  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9298  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9299  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9300}93019302/* Motes — drift upward across the stage */9303.peach-chirp-motes {9304  position: absolute;9305  inset: 0;9306  pointer-events: none;9307}9308.peach-chirp-mote {9309  position: absolute;9310  width: 2px; height: 2px;9311  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9312  border-radius: 50%;9313  bottom: 32px;9314  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9315  opacity: 0;9316  animation: peach-chirp-mote-drift 6s linear infinite;9317  animation-delay: calc(var(--mote-i, 0) * 0.7s);9318}9319@keyframes peach-chirp-mote-drift {9320  0%   { transform: translateY(0); opacity: 0; }9321  10%  { opacity: 0.6; }9322  90%  { opacity: 0.1; }9323  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9324}93259326/* Status copy ---------------------------------------------------------- */9327.peach-chirp-copy-host {9328  margin: 4px 4px 10px;9329  text-align: center;9330  min-height: 50px;9331}9332.peach-chirp-copy {9333  animation: peach-chirp-copy-in 0.35s ease both;9334}9335@keyframes peach-chirp-copy-in {9336  from { opacity: 0; transform: translateY(4px); }9337  to   { opacity: 1; transform: translateY(0); }9338}9339.peach-chirp-headline {9340  font-family: var(--font-display, Georgia, serif);9341  font-style: italic;9342  font-size: 20px;9343  font-weight: 500;9344  line-height: 1.2;9345  letter-spacing: 0.005em;9346  color: var(--peach-t0);9347  margin-bottom: 6px;9348}9349.peach-chirp-copy-listening .peach-chirp-headline,9350.peach-chirp-copy-chirping .peach-chirp-headline,9351.peach-chirp-copy-idle .peach-chirp-headline {9352  font-family: inherit;9353  font-style: normal;9354  font-weight: 500;9355  font-size: 15px;9356  color: var(--peach-t0);9357  letter-spacing: 0;9358}9359.peach-chirp-copy-paired .peach-chirp-headline {9360  color: var(--peach-t0);9361  font-weight: 600;9362}9363.peach-chirp-sub {9364  font-size: 12.5px;9365  line-height: 1.45;9366  color: var(--peach-t1);9367  max-width: 280px;9368  margin: 0 auto;9369  text-wrap: pretty;9370}93719372/* Status action -------------------------------------------------------- */9373.peach-chirp-action {9374  margin: 2px 4px 10px;9375  margin-top: auto;9376  display: flex;9377  flex-direction: column;9378  gap: 8px;9379}9380.peach-chirp-mic-notice {9381  margin: 0;9382  font-size: 0.625rem;9383  color: var(--peach-t2);9384  line-height: 1.4;9385}9386.peach-chirp-action-waiting {9387  display: flex;9388  align-items: center;9389  justify-content: space-between;9390  gap: 12px;9391}9392.peach-chirp-cancel {9393  min-width: 96px;9394}9395.peach-chirp-listening {9396  display: inline-flex; align-items: center; gap: 4px;9397  font-family: var(--peach-mono, ui-monospace, monospace);9398  font-size: 9.5px;9399  text-transform: uppercase;9400  letter-spacing: 0.12em;9401  color: var(--peach-t1);9402  padding: 8px 10px;9403}9404.peach-chirp-listen-dot {9405  width: 4px; height: 4px;9406  border-radius: 50%;9407  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9408  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9409}9410.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9411.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9412.peach-chirp-listen-label { margin-left: 6px; }9413@keyframes peach-chirp-listen-pulse {9414  0%, 100% { opacity: 0.25; transform: scale(0.9); }9415  50%      { opacity: 1;     transform: scale(1.15); }9416}94179418.peach-chirp-action-handshake {9419  display: flex;9420  flex-direction: column;9421  align-items: center;9422  gap: 8px;9423  padding: 8px 4px;9424}9425.peach-chirp-meter {9426  width: 100%;9427  max-width: 280px;9428  height: 2px;9429  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9430  border-radius: 2px;9431  position: relative;9432  overflow: hidden;9433}9434.peach-chirp-meter-bar {9435  position: absolute;9436  top: 0; bottom: 0;9437  width: 30%;9438  left: -30%;9439  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9440  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9441}9442@keyframes peach-chirp-meter-sweep {9443  0%   { left: -30%; }9444  100% { left: 100%; }9445}9446.peach-chirp-meter-label {9447  font-family: var(--peach-mono, ui-monospace, monospace);9448  font-size: 9.5px;9449  text-transform: uppercase;9450  letter-spacing: 0.14em;9451  color: var(--peach-t1);9452}94539454.peach-chirp-action-paired {9455  display: flex;9456  align-items: center;9457  gap: 10px;9458}9459.peach-chirp-device-confirm {9460  flex: 1;9461  display: inline-flex;9462  align-items: center;9463  gap: 8px;9464  padding: 9px 10px 9px 12px;9465  border-radius: 10px;9466  background: color-mix(in srgb, #76b6e8 12%, transparent);9467  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9468  font-size: 12.5px;9469  color: var(--peach-t0);9470  min-width: 0;9471}9472.peach-chirp-device-confirm-glyph {9473  display: inline-flex;9474  color: #76b6e8;9475}9476.peach-chirp-device-confirm-name {9477  flex: 1;9478  overflow: hidden;9479  text-overflow: ellipsis;9480  white-space: nowrap;9481}9482.peach-chirp-device-confirm-trust {9483  font-family: var(--peach-mono, ui-monospace, monospace);9484  font-size: 9.5px;9485  text-transform: uppercase;9486  letter-spacing: 0.1em;9487  color: #76b6e8;9488  padding: 2px 6px;9489  border-radius: 4px;9490  background: color-mix(in srgb, #76b6e8 14%, transparent);9491}9492.peach-chirp-done {9493  min-width: 80px;9494}9495.peach-chirp-retry {9496  align-self: center;9497  display: block;9498  margin: 6px auto 0;9499  min-width: 120px;9500}9501.peach-chirp-mic-help {9502  font-size: 12px;9503  color: var(--peach-t1);9504  text-align: center;9505  max-width: 320px;9506  margin: 0 auto;9507}95089509/* Rest state — bird stage at idle pose, primary CTA + paired list */9510.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9511  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9512  height: 160px;9513}9514.peach-chirp-pair-start {9515  width: 100%;9516  display: inline-flex;9517  align-items: center;9518  justify-content: center;9519  gap: 8px;9520  padding: 11px 14px;9521  border-radius: 10px;9522  background: var(--peach-accent);9523  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9524  color: #1a0905;9525  font-family: inherit;9526  font-size: 13px;9527  font-weight: 600;9528  letter-spacing: 0.01em;9529  cursor: pointer;9530  transition: filter 0.15s ease, transform 0.1s ease;9531}9532.peach-chirp-pair-start:hover { filter: brightness(1.08); }9533.peach-chirp-pair-start:active { transform: translateY(1px); }95349535.peach-chirp-paired-section {9536  margin-top: 14px;9537  display: flex;9538  flex-direction: column;9539  gap: 8px;9540}9541.peach-chirp-paired-heading {9542  margin: 0;9543  font-family: var(--peach-mono, ui-monospace, monospace);9544  font-size: 10px;9545  font-weight: 500;9546  letter-spacing: 0.14em;9547  text-transform: uppercase;9548  color: var(--peach-t1);9549}95509551/* Footer --------------------------------------------------------------- */9552.peach-chirp-foot {9553  margin: 10px -4px -2px;9554  margin-top: auto;9555}9556.peach-chirp-foot-divider {9557  height: 1px;9558  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9559  margin-bottom: 10px;9560}9561.peach-chirp-foot-text {9562  font-size: 11px;9563  line-height: 1.5;9564  color: var(--peach-t1);9565  text-align: center;9566  padding: 0 4px;9567  text-wrap: pretty;9568}95699570/* Screen-reader-only live region. Kept off the visual flow but read by9571   assistive tech as the pairing phase advances. */9572.peach-sr-only {9573  position: absolute;9574  width: 1px; height: 1px;9575  padding: 0; margin: -1px;9576  overflow: hidden;9577  clip: rect(0, 0, 0, 0);9578  white-space: nowrap;9579  border: 0;9580}95819582/* Reduced motion — stage simplifies to opacity transitions only */9583@media (prefers-reduced-motion: reduce) {9584  .peach-chirp-bird-body,9585  .peach-chirp-bird-head-group,9586  .peach-chirp-bird-beak,9587  .peach-chirp-bird-wing,9588  .peach-chirp-bird-tuft,9589  .peach-chirp-bird-tail,9590  .peach-chirp-bird-eye-group,9591  .peach-chirp-bird-aura,9592  .peach-chirp-arc,9593  .peach-chirp-flight-path,9594  .peach-chirp-flight-path-2,9595  .peach-chirp-dot-glow,9596  .peach-chirp-dot-core,9597  .peach-chirp-dot-ring,9598  .peach-chirp-mote,9599  .peach-chirp-meter-bar,9600  .peach-chirp-listen-dot,9601  .peach-chirp-bird-slot,9602  .peach-chirp-bird-slot-mobile {9603    animation: none !important;9604    transition: opacity 0.2s linear !important;9605  }9606}96079608/* ─────────────────────────────────────────────────────────────────9609   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9610   animation used by the pairing flow with a paired-devices list and9611   the "Pair a device" CTA.9612   ───────────────────────────────────────────────────────────────── */9613.peach-chirp-settings {9614  position: absolute;9615  inset: 0;9616  z-index: 3;9617  display: flex;9618  flex-direction: column;9619  gap: 18px;9620  padding: 14px 12px 12px;9621  width: 100%;9622  box-sizing: border-box;9623  overflow-y: auto;9624  overflow-x: hidden;9625  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9626  background:9627    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9628    var(--peach-bg);9629  color: var(--peach-t0);9630  isolation: isolate;9631  /* Hide native scrollbar — content fits 99% of the time and a chunky9632     gutter ruins the surface. */9633  scrollbar-width: none;9634  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9635}9636.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9637.peach-chirp-settings::before {9638  content: '';9639  position: absolute;9640  inset: 0;9641  pointer-events: none;9642  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9643  z-index: 0;9644}9645.peach-chirp-settings > * { position: relative; z-index: 1; }96469647.peach-chirp-settings--pairing {9648  padding: 0;9649  align-items: stretch;9650  justify-content: stretch;9651  background: none;9652  isolation: auto;9653}9654.peach-chirp-settings--pairing::before { display: none; }96559656.peach-chirp-settings-header {9657  display: flex;9658  align-items: center;9659  gap: 10px;9660}9661.peach-chirp-settings-title {9662  margin: 0;9663  font-family: var(--font-display, Georgia, serif);9664  font-style: italic;9665  font-size: 24px;9666  font-weight: 500;9667  line-height: 1;9668  color: var(--peach-t0);9669  letter-spacing: 0.005em;9670}9671.peach-chirp-settings-section {9672  margin: 6px 0 -4px;9673  font-size: 11px;9674  font-weight: 600;9675  letter-spacing: 0.08em;9676  text-transform: uppercase;9677  color: var(--peach-text-muted);9678}9679.peach-chirp-settings-error {9680  font-size: 12px;9681  padding: 8px 10px;9682  border-radius: 8px;9683  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9684  color: var(--peach-text);9685}9686.peach-chirp-settings-footer {9687  margin-top: auto;9688  padding-top: 18px;9689  font-size: 11.5px;9690  line-height: 1.5;9691  color: var(--peach-text-muted);9692  text-align: center;9693}96949695/* Hero card shown when no devices are paired yet. */9696.peach-chirp-hero {9697  display: flex;9698  flex-direction: column;9699  align-items: center;9700  gap: 12px;9701  padding: 20px 12px 8px;9702  text-align: center;9703}9704.peach-chirp-hero-svg {9705  display: block;9706  max-width: 100%;9707  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9708}9709.peach-chirp-hero-headline {9710  margin: 0;9711  font-family: var(--font-display, Georgia, serif);9712  font-style: italic;9713  font-size: 20px;9714  font-weight: 500;9715  line-height: 1.2;9716  letter-spacing: 0.005em;9717  color: var(--peach-t0);9718}9719.peach-chirp-hero-sub {9720  margin: 0;9721  font-size: 13px;9722  line-height: 1.5;9723  color: var(--peach-t1);9724  max-width: 320px;9725  text-wrap: pretty;9726}97279728.peach-chirp-pair-cta {9729  display: flex;9730  justify-content: center;9731  padding: 4px 0 6px;9732}9733.peach-chirp-pair-button {9734  display: inline-flex;9735  align-items: center;9736  gap: 8px;9737  min-width: 220px;9738  justify-content: center;9739}9740.peach-chirp-pair-button-icon {9741  flex: 0 0 auto;9742}97439744/* Paired devices list. Roomy rows that look at home next to the rest9745   of Settings; stale rows get a soft warm-warning border tint. */9746.peach-chirp-device-list {9747  list-style: none;9748  margin: 0;9749  padding: 0;9750  display: flex;9751  flex-direction: column;9752  gap: 8px;9753}9754.peach-chirp-device-row {9755  display: flex;9756  align-items: center;9757  gap: 12px;9758  padding: 12px;9759  border-radius: 10px;9760  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9761  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);9762}9763.peach-chirp-device-row[data-stale="true"] {9764  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);9765}9766.peach-chirp-device-icon {9767  width: 32px;9768  height: 32px;9769  display: flex;9770  align-items: center;9771  justify-content: center;9772  border-radius: 8px;9773  color: var(--peach-text);9774  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);9775}9776.peach-chirp-device-info {9777  flex: 1;9778  display: flex;9779  flex-direction: column;9780  gap: 2px;9781  min-width: 0;9782}9783.peach-chirp-device-name {9784  font-size: 14px;9785  font-weight: 600;9786  color: var(--peach-text);9787  overflow: hidden;9788  text-overflow: ellipsis;9789  white-space: nowrap;9790}9791.peach-chirp-device-meta {9792  font-size: 11.5px;9793  color: var(--peach-text-muted);9794  display: flex;9795  flex-wrap: wrap;9796  align-items: center;9797  gap: 8px;9798}9799.peach-chirp-device-badge {9800  font-size: 10.5px;9801  font-weight: 500;9802  letter-spacing: 0.02em;9803  padding: 2px 6px;9804  border-radius: 999px;9805  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);9806  color: var(--peach-text);9807}9808.peach-chirp-device-stale {9809  font-size: 10.5px;9810  font-weight: 500;9811  color: var(--peach-warn, #d29257);9812}9813.peach-chirp-device-remove {9814  flex: 0 0 auto;9815  color: var(--peach-text-muted);9816}9817.peach-chirp-device-remove:hover {9818  color: var(--peach-danger, #c25b4a);9819}9820.peach-chirp-unpair-confirm {9821  display: flex;9822  gap: 6px;9823  align-items: center;9824}98259826/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */9827.peach-chirp-pro-card {9828  position: relative;9829  margin: 18px 12px;9830  padding: 18px 20px 22px;9831  border-radius: 22px;9832  background:9833    radial-gradient(140% 90% at 50% 0%,9834      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,9835      transparent 60%),9836    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9837  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);9838  box-shadow:9839    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,9840    0 18px 40px -24px rgba(0, 0, 0, 0.45);9841  display: flex;9842  flex-direction: column;9843  align-items: center;9844  gap: 10px;9845  text-align: center;9846  overflow: hidden;9847}9848.peach-chirp-pro-stage {9849  position: relative;9850  width: 220px;9851  height: 140px;9852  display: flex;9853  align-items: flex-end;9854  justify-content: center;9855  margin-bottom: 2px;9856}9857.peach-chirp-pro-bird-slot {9858  width: 140px;9859  height: 132px;9860  display: flex;9861  align-items: flex-end;9862  justify-content: center;9863  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));9864}9865.peach-chirp-pro-bird-slot .peach-chirp-bird {9866  width: 100%;9867  height: 100%;9868}9869.peach-chirp-pro-bird-slot .peach-chirp-bird svg {9870  width: 100%;9871  height: 100%;9872  overflow: visible;9873}9874.peach-chirp-pro-chirp {9875  position: absolute;9876  top: 14px;9877  right: 8px;9878  width: 96px;9879  height: 80px;9880  color: var(--peach-accent);9881  animation: peach-chirp-pulse 2.6s ease-in-out infinite;9882  transform-origin: 0% 50%;9883  pointer-events: none;9884}9885@keyframes peach-chirp-pulse {9886  0%, 100% { opacity: 0.35; transform: translateX(0) scale(0.92); }9887  45%      { opacity: 1;    transform: translateX(2px) scale(1); }9888  70%      { opacity: 0.6;  transform: translateX(4px) scale(1.04); }9889}9890@media (prefers-reduced-motion: reduce) {9891  .peach-chirp-pro-chirp { animation: none; opacity: 0.7; }9892}9893.peach-chirp-pro-headline {9894  margin: 4px 0 0;9895  font-family: var(--font-display, "Cormorant Garamond", serif);9896  font-style: italic;9897  font-size: 19px;9898  font-weight: 500;9899  letter-spacing: 0.01em;9900  color: var(--peach-t0);9901  max-width: 280px;9902  line-height: 1.25;9903}9904.peach-chirp-pro-body {9905  margin: 0;9906  font-size: 13px;9907  line-height: 1.55;9908  color: var(--peach-t1);9909  max-width: 300px;9910}9911.peach-chirp-pro-cta {9912  margin-top: 4px;9913}9914.peach-chirp-pro-foot {9915  margin: 2px 0 0;9916  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;9917  font-size: 0.625rem;9918  letter-spacing: 0.08em;9919  text-transform: uppercase;9920  color: var(--peach-t2);9921  opacity: 0.75;9922}