popup.css

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